FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Shekhar Ramola

@shekharramola

https://js.do/code/263472

ehutchllew

@ehutchllew

@shekharramola what condition?

Shekhar Ramola

@shekharramola

basically In the above code, i am trying to calculate the passAsset percentage for all the asset if their reqnum is same and it is all good if I do console.log(percent)

but when I am returning, I am not getting different values like in console

@ehutchllew

Marc

@MWBauer

anyone here?

Morchid Chellali

@Morched23MJ

Yes? :)

Christopher

@bradley1492

Hello, I have a question concerning css grid.
I am trying to make a navbar that's inspired by the following one.
http://www.erinrobertsondesign.com/

My current try is this:
https://codepen.io/bradley1492/pen/rQrVpa?editors=0100

My layout is behaving quite differently to the one I posted. I would like to know how I can manage to keep my ulfixed inside the viewport and not moving, while everything else is scaling down. Do you guys understand what I mean here?? :)

I only want my h1 and h2 to move when scaling down...

zdman135

@zdman135

scaling down as in responsive to size?

try using margins and absolute position to say the header or something

i don't see a difference between the site you put and your codepen

zdman135

@zdman135

it looks the same when i reduce screen width. the only difference is when the width hits the media query width it doesn't look like the site you proposed.

but that just means, you need to style the css in your media query and you should be good to go

Christopher

@bradley1492

@zdman135 Hello, thanks for the help.
Yes exactly I mean reducing the screen width. :)

My problem here is that the body in the example page keeps it's left and right paddings when reducing screen width, whereas in my page the body loses the space on each site, as you can see by the border becoming one straight line.

I hope it's clearer for you now what I mean with the difference? :)

zdman135

@zdman135

@bradley1492, do you mean something like this? https://codepen.io/anon/pen/NEBpRd?editors=1100 (link fixed)

@bradley1492 - when you reduce the screen size you'll see the <ul> follows on the lower right of header all the way until the <h1> starts getting covered

i just added another media query and took out the flex direction to column and made it row and use position: absolute; to <header> tag

if you wanna do exactly what Erin had, I would suggest re-crafting the boostrap class that does similar to that to your needs

Erin uses square space, and i'm sure they have their own css classes for that template that does exactly the navigation thing you're talking about

zdman135

@zdman135

@bradley1492 - here check out this codepen. I basically did an example of what you can do. https://codepen.io/anon/pen/NEBpRd?editors=1100

At this point you just need to decide on the media widths and re-style the menu button. and you pretty much got the exact same thing as Erin on squarespace

and the bar. you probably don't want the gray bar if you're trying to match her site

I got it about 90% of the way there. I figured you can finish the rest, haha. let me know if that works for you. what I did. I hope I helped.

Christopher

@bradley1492

@zdman135 Hey, manyyyy thanks for that rebuild of the erin site nav part.

I'ts quite interesting to see how you solved the menu going up to the top here. I don't want to exactly make erin's

Christopher

@bradley1492

@zdman135 site. I more want to make a nav similar to hers but without the drop-up menu, if you can call it like that.
I hope I wasn't too unspecific with my initial problem that I had.
I thought on how I could have that big amount of padding on both sides at the beginning and then as I reduce the viewport-size get a have a fixed amount of smaller padding on both sides. But I think I figured it out now sort of like in this example:

https://codepen.io/bradley1492/pen/XyBeqb?editors=1100

@zdman135 menu-wise I somehow want to ditch a hamburger nav in favour of just the ul changing it's flex-direction.

@zdman135 What interests me with your example is if this would be your general workflow when seeing something that you'd like to replicate, like trying to get it done with bootstrap and then progress further from there? Would you then customize the bootstrap classes or write out your own css?

Christopher

@bradley1492

@zdman135 Like what exactly did you mean with "if you wanna do exactly what Erin had, I would suggest re-crafting the boostrap class that does similar to that to your needs"? :)

zdman135

@zdman135

@bradley1492 - ohh, I didn’t realize you didn’t want your navigation to look exactly like hers. Haha

um, as far the bootstrap comment, nah, you don’t need to use bootstrap at all. it’s fine the way it is

I was just sayin the bootstrap thing, because I would have used it as it would have been easier to create the menu and the items in it using bootstrap. it’s not necessary.

it honestly depends on what i’m trying to do, whether i’d use bootstrap or not. but yes, generally if I use bootstrap. i would still have custom style sheets that may style over a specific bootstrap thing.

AnonimoProgrammatore

@AnonimoProgrammatore

help guys, I'm trying to do this challenge : https://learn.freecodecamp.org/apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware

app.use((req, res, next) => 
        {
  console.log(req.method + ' ' + req.path + ' - ' + req.ip);
  next();
})

I wrote this function, and it logs on the console exactly this

GET /favicon.ico - ::ffff:127.0.0.1

when I test it, it seems working to me, but when I put the link of freecodecamp I get this:

// running tests
root-level logger is not working as expected
// tests completed

AnonimoProgrammatore

@AnonimoProgrammatore

nvm resolved

Christopher

@bradley1492

@zdman135 yes I can once more only apologize for your time, I should have described in a more detailed way, what I am meaning.
Okay, because I sort of learned bootstrap a few weeks ago, but now I like css grid so much and I am unsure what to use.

Now I now CSS-Grid I don't really want to go back using bootstrap...
Hm now that I think about it a bit more, I think your work still helped me a lot in thinking again of in some way utilizing bootstraps nav classes... :)

Good evening,
I just wanted to know if anyone here is using bootstrap in combination with css grid??
I guess it's quite uncommon isn't it, to use some nav building classes from bootstrap and then the CSS-Grid for layouting?

zdman135

@zdman135

@bradley1492 - it is hard to say what is common and what is not. considering there’s so many ways to do the same thing. just think of all the stuff you know as tools in your toolbelt.

as far as using css-grid for layout and bootstrap only for nav. yes that can be done.

and quite simple to do. if you wanted to set it up that way.

Christopher

@bradley1492

@zdman135 do you know how I could get myself into trouble doing things that way?

zdman135

@zdman135

but, i don’t know if you know this or not. bootstrap comes with grid classes as well. so you can do all the same grid layout building as well with bootstrap

Christopher

@bradley1492

@zdman135 yes I had quite a bit of a play around with bootstraps grid layout but I just favor the css grid system. Honestly I am extremely torn apart between those two ways of building stuff. I just thought in the long run it would be better to build something nice without the usage of a third party library like bootstrap..

zdman135

@zdman135

basically, think of bootstrap as this. people got sick of doing everything from scratch in css. so they just made bootstrap css classes allowing you to pick whatever lego blocks you need for building your UI without having to write the whole thing. can you do it yourself? of course you can.

the 3rd part library like bootstrap is honestly convenience nad preference

if you can do it all from scratch and you’re good at it, and fast. by all means do that instead

probably is better that way anyways

especially for this place being we are all newbies. we should be doing it all by hand. cause bootstrap really does a lot of things under the hood that newbies should know what exactly is going on without the “magic” happening yet.

but yeah that’s my 2 cents… but I personally like bootstrap and like to use it. hope that kinda helps you hah @bradley1492

Christopher

@bradley1492

@zdman135 Yeah your last section is exactly what I am sort of thinking as well. I would consider myself a frontend noob and want to learn how things "really" work

zdman135

@zdman135

for example bootstrap uses flexbox… if you never learned using pure css and flex box. you wouldn’t know what bootstrap is doing. it would be like magic

Where communities thrive

People

Repo info

Activity