These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Aug 2017
Liam Docherty
@ldocherty1
Aug 06 2017 00:10

Explanation on how my site works for you to understand the purpose of question.

My digital portfolio is going to consist of "4 sections" which is 4 separate scrollable web pages together. Please note my sections are also referred to as parts. For example, section one is #part1 and this goes all the way up to 4.

On #part1 I don't want the navigation bar to be visible. However, on section 2,3,4 which is known as #part2, #part3, and #part4 I want the navigation to appear.

When I attempted to put the navigation bar in section 2 also known as #part2due to the navigation bar being fixed it went straight up to section 1 (#part1) which is not what I want.

Here is an example site that I found which is how I'm aiming for my portfolio to look like in terms of the navigation bar.

Question

How can I place my navigation bar on section 2,3,4 but not be visible on section 1?
My site code

korzo
@korzo
Aug 06 2017 00:19
@ldocherty1 I would wrap sections 2, 3, 4 in div and put navigation of top of this div
Liam Docherty
@ldocherty1
Aug 06 2017 00:22
@korzo Great idea, I dunno why I didn't think of that LOL. I'll let you know how I can get on:) Thanks!
CamperBot
@camperbot
Aug 06 2017 00:22
ldocherty1 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Aug 06 2017 00:27
@ldocherty1 Happy coding ;)
Liam Docherty
@ldocherty1
Aug 06 2017 00:28
@korzo If I remove 'fixed-top' this will remove the nav bar from section 1 and place it on section 2. However, when I scroll down it won't then stay at the top? I did wrap 2,3,4 together? Could you check my code please https://jsfiddle.net/vx85qub9/1/
korzo
@korzo
Aug 06 2017 00:32
@ldocherty1 Problem is, that fixed-top use position: fixed, which is positioned relative to window, not parent element
@ldocherty1 either use some plugin for fixed nav
@ldocherty1 Or you have to watch, when section 1 leaves viewport and then display/hide nav
Liam Docherty
@ldocherty1
Aug 06 2017 00:41
@korzo what one do you recommend? do you think the hiding one would be easier?
korzo
@korzo
Aug 06 2017 00:52
@ldocherty1 also you don't have to hide it. You can give it position static and when nav leaves viewport, switch to position: fixed
@ldocherty1 Or as I said, there is a lot of drop-in plugins. I use this in some of my projects
http://wicky.nillia.ms/headroom.js/
Liam Docherty
@ldocherty1
Aug 06 2017 01:09
@korzo I'm going to pick the plugin option. Where would I put <header class="headroom"> ? After this would I just place the <header class="headroom headroom--unpinned">
under <div class="wrapsections"> in the wrap?
korzo
@korzo
Aug 06 2017 01:13
@ldocherty1 only <header class="headroom"> . Pinning is managed by plugin.
See option section
thought i would share this, a really good listen
Bryce
@BGarbs
Aug 06 2017 02:09
@Pagnito cool. Appreciate the share!
Anyone here?
Sonya Chan
@cysonya
Aug 06 2017 02:13
I am
Bryce
@BGarbs
Aug 06 2017 02:19
@cysonya Hey there! How far are you in FCC?
Sonya Chan
@cysonya
Aug 06 2017 02:22
@BGarbs Hey, I finished most of the front end stuffs
Bryce
@BGarbs
Aug 06 2017 02:23
@cysonya very cool! Are you currently a developer or what's your reason for starting?
Sonya Chan
@cysonya
Aug 06 2017 02:23
I stopped doing it for a while now, working on a side project at the moment. How about you?
Bryce
@BGarbs
Aug 06 2017 02:23
@cysonya Likewise actually.
Sonya Chan
@cysonya
Aug 06 2017 02:23
Yeah I've been working as developer since last year. You?
Pagnito
@Pagnito
Aug 06 2017 02:24
@BGarbs :+1:
Bryce
@BGarbs
Aug 06 2017 02:25
@cysonya Regrettably no. I'm stuck in a job that has no upward mobility and horrible hours. Would love to land a job as a developer so I'm trying to work at night and weekends (outside of family time) to get there. And try to freelance with it until either I grow the workload enough to leave my current job or I can get a dev job. Any suggestions?
@Pagnito Hey there man!
Sonya Chan
@cysonya
Aug 06 2017 02:26
Do you have a portfolio up? Any luck with freelance gigs?
Bryce
@BGarbs
Aug 06 2017 02:27
@cysonya yes I do actually. And regarding freelance, sort of. I have some leads to help a few people - 1 that I offered to do pro bono (as a way to build my portfolio and for marketing).
Sonya Chan
@cysonya
Aug 06 2017 02:28
I was in a similar situation last year, and luckily landed a full time web dev role pretty quickly. The key is to have a nice portfolio that showcases your knowledge in my opinion.
Bryce
@BGarbs
Aug 06 2017 02:28
@cysonya I've actually gotten several websites done for the current company I work for (some of them are super basic and others are templates I've tweaked from online)
Sonya Chan
@cysonya
Aug 06 2017 02:29
Oh that's nice, have you sent out any job applications?
Bryce
@BGarbs
Aug 06 2017 02:29
@cysonya would you be willing to take a look at mine and just give me your quick feedback?
Sonya Chan
@cysonya
Aug 06 2017 02:29
yeah for sure
Bryce
@BGarbs
Aug 06 2017 02:29
@cysonya not really - I'm sort of limited geographically and am not really sure how/where to look
Sonya Chan
@cysonya
Aug 06 2017 02:31
Are these websites done from scratch? Or mostly templates?
It's a very clean design, animation is pretty nice. Though it does take a while to load
Bryce
@BGarbs
Aug 06 2017 02:33
@cysonya I'm completely self taught and just wanted to get a site up for showing my portfolio - so that's a wordpress site. The ones I've done are a combination of coding from scratch and templates I've tweaked or wix/wordpress sites
iso
@iso1048
Aug 06 2017 02:33
@cysonya would you mind linking your portfolio? (just curious to see a portfolio of a professional)
Bryce
@BGarbs
Aug 06 2017 02:33
@gothamknight good idea
Sonya Chan
@cysonya
Aug 06 2017 02:33
Putting some of your code up on Github would be very ideal actually. What are your current skills? Like do you know a backend language such as Ruby? Python? Java?
Bryce
@BGarbs
Aug 06 2017 02:34
@cysonya regrettably I do not. I'm working my way through becoming more proficient with JS
Sonya Chan
@cysonya
Aug 06 2017 02:34
@gothamknight Unfortunately, I took mine down after getting a job. Gotta save that server cost
iso
@iso1048
Aug 06 2017 02:34
@cysonya fair enough
Sonya Chan
@cysonya
Aug 06 2017 02:34
It is in my Github though so you could clone it and view I think.
Bryce
@BGarbs
Aug 06 2017 02:34
@cysonya HTML/CSS, some limited JS. Wordpress. Wix. Some Drupel.
Sonya Chan
@cysonya
Aug 06 2017 02:36
Yeah, I would definetly work on learning JS! A lot of job postings require it especially if you are looking for a front end job
Bryce
@BGarbs
Aug 06 2017 02:37

@cysonya the question is HOW much ought someone know JS to land a front-end job?

Also, what type of developer are you and what is your experience/background?

did you study computer science or media in college?
iso
@iso1048
Aug 06 2017 02:40
@cysonya your portfolio is cool.
Sonya Chan
@cysonya
Aug 06 2017 02:40
I was self taught like you as well! I do read a lot and learn from doing projects. I was hired as a front end developer and within a month or so I started working on more backend stuffs, and now I do both backend and frontend stuffs. My company uses Rails, so I had to pick that up while working there. When I first started I really just knew html/css and js. And google my way through work tasks xD
@gothamknight thank you!
CamperBot
@camperbot
Aug 06 2017 02:40
cysonya sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @gothamknight |http://www.freecodecamp.com/gothamknight
Bryce
@BGarbs
Aug 06 2017 02:41
@cysonya that's awesome! Gives me hope for sure. Where did you look for jobs?
Sonya Chan
@cysonya
Aug 06 2017 02:41
If you are looking for front end job, I would say learn enough JS to know how to do UI like tabs/accordions, animation toggles
Bryce
@BGarbs
Aug 06 2017 02:42
@cysonya yeah, for sure
Sonya Chan
@cysonya
Aug 06 2017 02:42
I'm from Canada, so I used indeed and glassdoor. Not sure what you have at your country?
Bryce
@BGarbs
Aug 06 2017 02:42
Same
@cysonya so are you a remote employee? or were you able to land a job in your city?
Sonya Chan
@cysonya
Aug 06 2017 02:43
I got really lucky though, I only applied to about 8 positions to test the waters. Got 3 calls for interviews, and on my second one I got it. So yeah a lot has to do with timing/luck :P
Pagnito
@Pagnito
Aug 06 2017 02:43
@BGarbs whats up
Sonya Chan
@cysonya
Aug 06 2017 02:43
I work on site and have option for remote work once a week
Bryce
@BGarbs
Aug 06 2017 02:44
@cysonya that's great. the flexibility is a big plus I'm sure
Sonya Chan
@cysonya
Aug 06 2017 02:45
Oh yeah definetly
Bryce
@BGarbs
Aug 06 2017 02:46
@cysonya I have two more questions if I may?
Sonya Chan
@cysonya
Aug 06 2017 02:46
If you can pick up a framework like React, that would be a big plus too. But I would focus on getting the foundation on js down first before diving into all those framework craziness :P
Yeah go ahead
Bryce
@BGarbs
Aug 06 2017 02:47
@cysonya thanks for the suggestion! I certainly will look to do that!
  1. how long had you been learning web dev before getting the job?
  2. what did you start out for your salary?
CamperBot
@camperbot
Aug 06 2017 02:47
bgarbs sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @cysonya |http://www.freecodecamp.com/cysonya
Pagnito
@Pagnito
Aug 06 2017 02:48
@cysonya hey how do i check ur portfolio?
Bryce
@BGarbs
Aug 06 2017 02:48
@Pagnito go to her profile and check out her github account. She's posted it there
Pagnito
@Pagnito
Aug 06 2017 02:48
@BGarbs yea i found the code but how do i check the page itself?
Sonya Chan
@cysonya
Aug 06 2017 02:49
Yeah no problem. Hmm long story for first question, but on and off I would say about 2 years. But if you were to condense it, I would say less than a year. I started my salary between $40-$45, and got a nice raise in 6 months since I do more backend stuffs.
@Pagnito good question, let me find out. It's been a while haha
Bryce
@BGarbs
Aug 06 2017 02:49
@Pagnito might need to download the github desktop or paste code into a site like codepen
Sonya Chan
@cysonya
Aug 06 2017 02:50
@Pagnito go to dist/index.html
Bryce
@BGarbs
Aug 06 2017 02:50
@cysonya well done!
Sonya Chan
@cysonya
Aug 06 2017 02:51
@BGarbs thanks. You can do it too! Just keep working on projects, you will learn a lot
CamperBot
@camperbot
Aug 06 2017 02:51
cysonya sends brownie points to @bgarbs :sparkles: :thumbsup: :sparkles:
:cookie: 160 | @bgarbs |http://www.freecodecamp.com/bgarbs
Sonya Chan
@cysonya
Aug 06 2017 02:51
Yeah, you gotta clone the repo and open that file
Pagnito
@Pagnito
Aug 06 2017 02:52
oh ok
dooooope!
Sonya Chan
@cysonya
Aug 06 2017 02:53
@BGarbs have you done any of the projects on freecode camp? Like the calculator..weather api stuffs?
@Pagnito thanks!
CamperBot
@camperbot
Aug 06 2017 02:53
cysonya sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @pagnito |http://www.freecodecamp.com/pagnito
Bryce
@BGarbs
Aug 06 2017 02:55
@cysonya I have not completed those yet, regrettably. I was working on the calc when I had to take a break due to my daytime work needs.
Sonya Chan
@cysonya
Aug 06 2017 02:57
I definitely recommend doing those! Especially the ones involving working with APIs, so the weather, twitch and wiki viewer are nice projects to develop your skills
Pagnito
@Pagnito
Aug 06 2017 02:58
@cysonya hey can you tell me about how the form works?
@cysonya i wanna make my own form for my portfolio
Sonya Chan
@cysonya
Aug 06 2017 02:59
Oh and before I forget, learn to use a grid framework like Bootstrap or Foundation, and pick up Sass/Scss too
@pagnito yeah I can link you the tutorial I followed. One sec
Pagnito
@Pagnito
Aug 06 2017 02:59
sweet @cysonya thanks
CamperBot
@camperbot
Aug 06 2017 02:59
pagnito sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @cysonya |http://www.freecodecamp.com/cysonya
iso
@iso1048
Aug 06 2017 02:59
@cysonya is Sass very important?
Bryce
@BGarbs
Aug 06 2017 03:00
@cysonya I have a decent foundational grasp on bootstrap. it's what I built one or two of my portfolio pages on. Also, good to know about those projects. I will work toward completing them! Lastly, I'm still trying to understand what Sass/Scss is.
Sonya Chan
@cysonya
Aug 06 2017 03:00
@gothamknight I would say so, once you use it you will never go back to writing pure css
iso
@iso1048
Aug 06 2017 03:00
@Pagnito https://formspree.io/ a cheat haha
Pagnito
@Pagnito
Aug 06 2017 03:00
@gothamknight ya lol
thats why i really wanna make my own
Bryce
@BGarbs
Aug 06 2017 03:01
@gothamknight brilliant
Sonya Chan
@cysonya
Aug 06 2017 03:01
@BGarbs That's good. Scss is a pre-processed language for CSS. It's basically just css, except you can make use of variables
Bryce
@BGarbs
Aug 06 2017 03:01
@gothamknight thanks for sharing that!
CamperBot
@camperbot
Aug 06 2017 03:01
bgarbs sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @gothamknight |http://www.freecodecamp.com/gothamknight
Bryce
@BGarbs
Aug 06 2017 03:02
@cysonya interesting. I think I sort of follow.
iso
@iso1048
Aug 06 2017 03:02
@cysonya what is the relationship between Sass and Scss?
@BGarbs no worries man
Sonya Chan
@cysonya
Aug 06 2017 03:04

There are other nice functionality too, like nesting:

ul {
   list-style: none
   li {
       display: inline-block;
  }
}

So when you compile it, it will turn into something like this:

ul {
  list-style: none;
}
ul li {
  display: inline-block;
}
@gothamknight I believe they are both the same thing, just uses different syntaxes. Scss looks more like CSS in that it uses {} brackets. Sass does not use brackets
I personally prefer Scss
Bryce
@BGarbs
Aug 06 2017 03:06
@cysonya interesting...I've already used that sort of syntax (ie, ul li a { };)
iso
@iso1048
Aug 06 2017 03:06
@cysonya oh ok. I did the codecademy course on scss but didnt use it for any projects so i forgot all that
Bryce
@BGarbs
Aug 06 2017 03:07
anyway, I'm heading out for the night. I'll be back in here often so don't hesitate to say hey guys! I look forward to continuing the journey with you all. I appreciate the support and help greatly!
Sonya Chan
@cysonya
Aug 06 2017 03:07
yep, it's a pain in the butt to have to type all that, when you can nest it with Scss hehe But don't go too crazy with nesting, I only nest pseudo elements like :first-child, :before etc...
Good night and good luck @BGarbs
Bryce
@BGarbs
Aug 06 2017 03:08
@cysonya thumbs up
:thumbsup:
Sonya Chan
@cysonya
Aug 06 2017 03:09
@gothamknight you should keep using it for all your projects! :P
Pagnito
@Pagnito
Aug 06 2017 03:10
@cysonya hey do u remember how that totrial asks to download a zip file?
ajax-contact-form-demo.zip
Sonya Chan
@cysonya
Aug 06 2017 03:11
I don't remember downloading anything from there. I just used their ajax script for my form
Pagnito
@Pagnito
Aug 06 2017 03:11
k cool
Sonya Chan
@cysonya
Aug 06 2017 03:11
You do need a server to configure the email stuffs though
Pagnito
@Pagnito
Aug 06 2017 03:12
so i would need to like redeply my site via heroku or something?
Sonya Chan
@cysonya
Aug 06 2017 03:12
If you or a friend have a student email, go grab the Github student pack. You get $50 credit on Digital Ocean
Yeah that would work
Pagnito
@Pagnito
Aug 06 2017 03:12
heroku is free right?
Sonya Chan
@cysonya
Aug 06 2017 03:12
yep
iso
@iso1048
Aug 06 2017 03:12
@cysonya yeah ill keep it in mind. thanks
CamperBot
@camperbot
Aug 06 2017 03:12
gothamknight sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @cysonya |http://www.freecodecamp.com/cysonya
Pagnito
@Pagnito
Aug 06 2017 03:13
sweet
@cysonya did u use php too for it?
Sonya Chan
@cysonya
Aug 06 2017 03:14
Yep
Pagnito
@Pagnito
Aug 06 2017 03:16
i can do the same with node tho right?
Sonya Chan
@cysonya
Aug 06 2017 03:20
Yep, any server language will do
@Pagnito @gothamknight how far into FCC are you guys? Or what are you all working on nowadays?
Pagnito
@Pagnito
Aug 06 2017 03:25
@cysonya im finished with front end cert, im working on learning npm, webpack etc etc etc etc lol building a javascript environment, then i want to start building a video platform website as my next project, proly then ill tackle the rest of fcc data visualisation
iso
@iso1048
Aug 06 2017 03:25
@cysonya im still only doing intermediate algorithms - so not very far into fCC. still quite the beginner
Sonya Chan
@cysonya
Aug 06 2017 03:27

@Pagnito sounds like a challenging project, what language do you plan to use for it?

@gothamknight as long as you're learning something everyday you're making good progress ;)

Pagnito
@Pagnito
Aug 06 2017 03:27
@cysonya node, javascript, react
yea i feel like these challenges are the best teachers
i think it will be a great thing for my portfolio too
Sonya Chan
@cysonya
Aug 06 2017 03:28
yeah for sure
iso
@iso1048
Aug 06 2017 03:28
@cysonya i see all these things about people becoming pro in like 6-12 months, which I find amazing.
Pagnito
@Pagnito
Aug 06 2017 03:30
@gothamknight i feeeel u lol
Sonya Chan
@cysonya
Aug 06 2017 03:32
Yeah you can definitely land a entry position with a good portfolio in that timeframe. But I find I learned a lot more while on the job, like I learned way more working at my company in a month than I did on my own
Pagnito
@Pagnito
Aug 06 2017 03:34
@cysonya yea every dev always tells me that too
Jim Tryon
@jimtryon
Aug 06 2017 03:35
Yeah, I hear the same advice even as a teacher.
The main thing I hear is that you need to constantly build things.
and don’t stop coding
Sonya Chan
@cysonya
Aug 06 2017 03:37
Yeah you don't know what you don't know until you have to build something. That's when you find out what you need to know in order to solve that problem
Pagnito
@Pagnito
Aug 06 2017 04:15
@cysonya im lookin at the php file, i can the the recipent email, but im tryin to find out how to get the users email and put into variable nad config
i wanna do it with node
Pagnito
@Pagnito
Aug 06 2017 04:36
nvm im stupid, the email is in the contact form input
lol
iso
@iso1048
Aug 06 2017 04:39
@Pagnito bed time for you?
Pagnito
@Pagnito
Aug 06 2017 04:40
lol forreal, im watcing a video on handling forms with express and node, andi kep rewinding it cuz i just zone out
iso
@iso1048
Aug 06 2017 04:41
haha.
Darth Skywalker
@AdiSkywalker
Aug 06 2017 05:20
@gothamknight :wave:
iso
@iso1048
Aug 06 2017 05:26
@AdiSkywalker hi
Gulsvi
@gulsvi
Aug 06 2017 05:42
about @freecodecamp
CamperBot
@camperbot
Aug 06 2017 05:42
:warning: no user found for freecodecamp
Ashish sb
@ashishsb95
Aug 06 2017 05:53
i can't seem to fetch the quotes from the Quotes REST API https://theysaidso.com/api/ here's my code https://codepen.io/ashishsb/pen/wqGoeJ?editors=1010
Amit Patel
@AmitP88
Aug 06 2017 07:01
hey guys, do you know of a good up-to-date resource on how to best setup my IDE for React? I'm using Sublime Text 3 for my editor and I've been googling around for packages to install, but many of them are deprecated. I'm looking for the most updated packages to install for React & Redux
Akash Gajjar
@skywalker212
Aug 06 2017 07:20
help me please
im sending the problem
if i have loop like this, it runs as expected, stops when minmul greater than or equal to maxmul
while(maxmul>minmul){
      minmul = min * indmin;
      indmin++;
    }

but when i do something like this

while(minmul<maxmul){
      minmul = min * indmin;
      indmin++;
    }

it goes into infinite loop

sorry to bother, the problem was in condition, i was putting (minmul<=maxmul) in the second case
Ashish sb
@ashishsb95
Aug 06 2017 07:44
guys , i wish to share my quote onto fb wall from my codepen pen ,what should be my approach?
Akash Gajjar
@skywalker212
Aug 06 2017 08:05
checkout facebook developers site
Johnny
@JohnnyBizzel
Aug 06 2017 08:56
@ashishsb95 I believe the requirement was to use twitter
korzo
@korzo
Aug 06 2017 09:51
@ldocherty1 Just found out another library for pinning elements. Also Bootstrap v4 is using it.
See this demo http://tether.io/examples/pin/
Ivan Ngundela
@ingundela
Aug 06 2017 10:53
Hello everyone... need litle help with my project... I've done the Humburger menu.... and the menu list works fine on a normal screen size.. when I scale it down to fit a mobile screen, the humburger menu comes in and also see the list, but nothing happens when I click on the list .... Please help me
korzo
@korzo
Aug 06 2017 11:01
@ingundela Post link to your project
Ken Haduch
@khaduch
Aug 06 2017 12:10
@ingundela - make sure that you loaded the proper version of bootstrap.js as well as jquery.js in your project. Jquery first, bootstrap.js second because order is important.
Nick Gray
@nicholasnbg
Aug 06 2017 13:23

hey guys looking for some feedback on my weather app, particularly the media queries I've done.

https://htmlpreview.github.io/?https://github.com/nicholasnbg/weather-app/blob/master/index.html

teevik
@teevik
Aug 06 2017 14:29
@nicholasnbg Just took a look, is the media query supposed to be for height?
Liam Docherty
@ldocherty1
Aug 06 2017 14:38
Is wix an example of a Wordpress creation tool as it's open source?
@korzo Thanks for the link
CamperBot
@camperbot
Aug 06 2017 14:38
ldocherty1 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @korzo |http://www.freecodecamp.com/korzo
teevik
@teevik
Aug 06 2017 14:42
@ldocherty1 Wix does not use wordpress
Liam Docherty
@ldocherty1
Aug 06 2017 14:50
@teevik I see some developers they create custom built sites but also offer a cheaper option which is for like template sites created on wix. You see the template sites on wix what would be the professional name to call this?
Rabin Shrestha
@jyapujuju
Aug 06 2017 14:59
why am i getting out of bound
Thayyeb salim
@Thayyebsalim
Aug 06 2017 15:58
Can someone tell me a bit about Git?
Wael Azar
@Waelazar
Aug 06 2017 16:09
i'm not that professional in Git, however i know some about it and what is used for
Git is the most widely used modern version control system in the world today is Git
if you are using c9 it comes already
vikas bhardwaj
@vikasbhardwajvb
Aug 06 2017 16:11
Hi
Wael Azar
@Waelazar
Aug 06 2017 16:11
i used it to upload file to heroku
vikas bhardwaj
@vikasbhardwajvb
Aug 06 2017 16:11
could any one help me with the code for this box : https://ibb.co/hwwJzv
Wael Azar
@Waelazar
Aug 06 2017 16:11
and to know everythings about the logs and the status
@vikasbhardwajvb what about it ?
@Thayyebsalim
vikas bhardwaj
@vikasbhardwajvb
Aug 06 2017 16:12
how to have different alignment for texts inside box
one is in the middle of the box and other is at top left corner
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:13
is there any limit to the content that can be uploaded via Github @Waelazar
Wael Azar
@Waelazar
Aug 06 2017 16:13
try to use span
then give each span a class
give the class text align
i think this could help
@vikasbhardwajvb
vikas bhardwaj
@vikasbhardwajvb
Aug 06 2017 16:15
thanks man , i'll try
Wael Azar
@Waelazar
Aug 06 2017 16:15
@Thayyebsalim so far i didn't see any limit ..
this is my github
however if your using heroku , there is a limilt
@vikasbhardwajvb welcome :)
@Thayyebsalim are you using c9 ?
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:17
No
Wael Azar
@Waelazar
Aug 06 2017 16:17
humm
so i think you have to download it
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:18
I was talking about when you host portfolio or something using you-site-name.github.io
C9 is a cloud service right?
Wael Azar
@Waelazar
Aug 06 2017 16:19
haha i'm trying to do it right now
from heroku to Github
i used Git to upload to heroku and then connect it to Github
still working on it
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:21
Oh
I'm new to everything
so can you tell me what Heroku is?
Liam Docherty
@ldocherty1
Aug 06 2017 16:21

My digital portfolio is going to consist of "4 sections" which is 4 separate scrollable web pages together. Please note my sections are also referred to as parts. For example, section one is #part1 and this goes all the way up to 4.

On #part1 I don't want the navigation bar to be visible. However, on section 2,3,4 which is known as #part2, #part3, and #part4 I want the navigation to appear.

Here is an example site that I found which is how I'm aiming for my portfolio to look like in terms of the navigation bar.

I did attempt to wrap 2,3,4 sections together but if I remove 'fixed-top' it will remove the navbar from section 1 but section 3,4 the navigation bar won't be visible.

Question

How can I place my navigation bar on section 2,3,4 but not be visible on section 1?

My site code

Wael Azar
@Waelazar
Aug 06 2017 16:22
heroku is a cloud platform as a service
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:22
Oh like code pen with support to app devs?
Wael Azar
@Waelazar
Aug 06 2017 16:23
no , Code pen is a playground for the front end side of the web
you can use it as text editor
i will give an example, because i think i start to get more information haha
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:24
Thanks again
@ldocherty1 Can't you toggle visibilty or something?
Using Jquery
Liam Docherty
@ldocherty1
Aug 06 2017 16:27
@Thayyebsalim Do you know how to use this ? http://wicky.nillia.ms/headroom.js/ I got recommend to use this but couldn't figure it out
Sonya Chan
@cysonya
Aug 06 2017 16:29
@ldocherty1 Do you have your code up somewhere?
Moisés Man
@moigithub
Aug 06 2017 16:30

@ldocherty1 think like.. (the example) have 5 sections
part1 nav part2 part3 part4
then u need to add some javascritpcode to track the scroll position.. and when the "nav" hit the top position set it to fixed,, u will need to find what value will be ur "top"
and when its bigger than ur "top" remove fixed

  $( window ).scroll(function() {
    var top = $(window).scrollTop();
    console.log(top); //<-- to find ur top value
    //example to set fixed nav
    if (top< 500) {  $("nav").addClass("fixed") }
   else {  $("nav").removeClass("fixed") }
   }

and on css u can create that class
nav.fixed { position:fixed; }

Wael Azar
@Waelazar
Aug 06 2017 16:32

https://damp-mountain-10845.herokuapp.com/
this is a dynamic website , still under development
i developed this website using c9 ..
without pushing the files to Heroku .. it works only if the run server locally everytime you run your Computer.
but i pushed all files using "Git" to Heroku and then connected with my Database using MongoLab (if you didn't understand what is MongoLab its ok )
here i connected with my Github Profile so that everytime a made changes in my code .. also this will make changes in my Github

Happy Coding :) @Thayyebsalim

its not exist in my Github profile yet
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:34
Thats great @Waelazar
Wael Azar
@Waelazar
Aug 06 2017 16:36
:+1:
Liam Docherty
@ldocherty1
Aug 06 2017 16:38
@cysonya I will look into this much appreciated.
Wael Azar
@Waelazar
Aug 06 2017 16:44
@Thayyebsalim
i found this for you https://try.github.io/
Mattia Zirpoli
@MattiaZir
Aug 06 2017 16:51
Hey guys, is anyone familiar with the Pomodoro Timer project?
teevik
@teevik
Aug 06 2017 16:55
yes
Wael Azar
@Waelazar
Aug 06 2017 17:04
@Thayyebsalim hey it works i did it :+1:
check my github
https://github.com/Waelazar/
Thayyeb salim
@Thayyebsalim
Aug 06 2017 17:14
Well done :thumbsup: :
Taysha
@taariya
Aug 06 2017 19:05
Hey, does anyone happen to know of a good basic redux tutorial with good example code?
I tried the official documentation but personally their explanations of how to use Redux with React didn't reach me
Sajid Unar
@sajidunnar
Aug 06 2017 19:08
@taariya did you browse youtube videos ?
Taysha
@taariya
Aug 06 2017 19:22
@sajidunnar I usually avoid videos but I guess Redux is something where I need to observe some live coding to understand what's happening
@sajidunnar Thanks
CamperBot
@camperbot
Aug 06 2017 19:22
taariya sends brownie points to @sajidunnar :sparkles: :thumbsup: :sparkles:
:cookie: 26 | @sajidunnar |http://www.freecodecamp.com/sajidunnar
Sajid Unar
@sajidunnar
Aug 06 2017 19:22
@taariya there must be soem good tutorials to build some sample apps or something .
Gulsvi
@gulsvi
Aug 06 2017 19:26
There are tons of tutorials @sajidunnar but I think @taariya is looking for a recommendation based on someone who has completed a few tutorials :)
Pagnito
@Pagnito
Aug 06 2017 19:26
@SkyC0der yo
Gulsvi
@gulsvi
Aug 06 2017 19:26
@Pagnito Hello
Pagnito
@Pagnito
Aug 06 2017 19:26
@SkyC0der do u know how to send emails with node?
Gulsvi
@gulsvi
Aug 06 2017 19:27
No, I haven't set up an email server @Pagnito
Pagnito
@Pagnito
Aug 06 2017 19:29
im wondering, in the mailOptions, can i use a variable of inputVal for sender?
'from' i mean
and if i deploy the app on heroku, am i gonna be using their server or is my app still going to create an email server
Gulsvi
@gulsvi
Aug 06 2017 19:33
@Pagnito Why not use https://formspree.io until you do more back end dev?
Pagnito
@Pagnito
Aug 06 2017 19:34
yea i am at the moment
but i wanted to make the form as kind of an intro to back end stuff
tho maybe ill have to to take some courses on back end stuff first to really understand how it all works first
Gulsvi
@gulsvi
Aug 06 2017 19:35
Yeah, you probably don't want to set up email until you get comfortable with it
don't need your server turning into a spam box
Pagnito
@Pagnito
Aug 06 2017 19:36
lol
btw my mac started working alot better
Gulsvi
@gulsvi
Aug 06 2017 19:36
nigerian princes email me enough already
Pagnito
@Pagnito
Aug 06 2017 19:36
nigerian princes?? lol
Gulsvi
@gulsvi
Aug 06 2017 19:36
They all have money for me apparently
Pagnito
@Pagnito
Aug 06 2017 19:37
ooooh lol
Gulsvi
@gulsvi
Aug 06 2017 19:37
just need to send $100 to get my $27 mil
Pagnito
@Pagnito
Aug 06 2017 19:37
aah yes such generous princes
Gulsvi
@gulsvi
Aug 06 2017 19:38
Good your mac started working better, btw
Pagnito
@Pagnito
Aug 06 2017 19:38
thanks, yea i guess arctic silver 5 needed some break in period or sometihng
some heat cycles or w/e they are called
Gulsvi
@gulsvi
Aug 06 2017 19:38
Hmmm, hadn't thought of that
Andrew Horn
@sophyphreak
Aug 06 2017 19:39

Hey, thanks so much for your guys' help last time. I'm currently doing the twitch json project, and I'm doing it in react. I'm really not sure what I'm doing wrong with this code, but no matter what I try it seems like it doesn't want to return within an axios call (basically a port of ajax to React). I've set up a test where a mapping function should return an array of boolean values--true if they are currently streaming and false if not. But the array i get out the other side in a console.log is either empty or full of undefined values. I'm very confused. It's possible I'm making a silly mistake, and any advice is welcome. Relevant code lines 14-44.

How can I get return to work correctly here? And/or is there anything else obvious here that is screwing up the code?

https://codepen.io/sophyphreak/pen/dzNoxw?editors=0011

Thanks so much for the help!!!

Pagnito
@Pagnito
Aug 06 2017 19:39
yea i was really surprised to use my macbook yesterday and it beraly went up in temps, it still i think has some type of problem, tho the new paste helps it manage alot better
another thing i wanted to ask u
for the fetch polyfill, is there a file i can download for it instead of cdn
i think i might have found it
Gulsvi
@gulsvi
Aug 06 2017 19:42
I don't know @Pagnito I've never used a polyfill

@ldocherty1 You don't need a plugin to hide the navbar

// Slide the navbar up when scrolling more than 300px below the top of the page
$(window).on("scroll", function() {
  if ($(this).scrollTop() < 301) {
    $(".navbar").show();
  } else {
    $(".navbar").slideUp(400);
  }
});

https://s.codepen.io/skycoder/pen/eEgGGd?editors=1010

Roberto Di Lillo
@koop4
Aug 06 2017 20:38
hi guys
how do i remove the outline which appears when i click the detail tag?
https://codepen.io/Koop4/pen/jLqJBe
teevik
@teevik
Aug 06 2017 20:52
I think it's outline: 0
Gulsvi
@gulsvi
Aug 06 2017 20:53

@koop4 This may be easier with JS:

details.addEventListener('click', function() {
  this.blur();
});

The <details> tag is displayed according to the browser, so you'd probably have to use some browser-specific code to modify the way it is displayed

shilpi verma
@shilpiverma509
Aug 06 2017 21:02
Hi guys.I working on the FCC calculator. If anyone can help me what's going wrong with my code. So if I try to console my values, I get undefined stored in my expression array for for every number I click.
Here's a link to my code https://codepen.io/shilpiverma/pen/jLbrxb?editors=0011
Gulsvi
@gulsvi
Aug 06 2017 21:04

@shilpiverma509 expression is an empty array, so when you do:

expression[len]=expression[len]+ input;

expression[len] is undefined

expression[0] = undefined + input
I'm guessing maybe you want this?
else if (isNumeric(input)) {
      expression.push(input);
      console.log(expression);
      $("#results").val(string);
    }
Roberto Di Lillo
@koop4
Aug 06 2017 21:07
@SkyC0der its a hack which doesn't really solve the issue.
the outline doesn't stay there, but s still visile for a moment when clicking :(
Gulsvi
@gulsvi
Aug 06 2017 21:08
@koop4 Yeah, any modification you make to this control will need to be a hack. That outline is important for accessibility purposes.
shilpi verma
@shilpiverma509
Aug 06 2017 21:09
@SkyC0der You are right. But If I do this , it will take 78 as two different inputs "7" and "8"
Gulsvi
@gulsvi
Aug 06 2017 21:11
@shilpiverma509 I wasn't really sure what you wanted to do with the array. You can also check if it's empty first, and then decide whether or not to add anything to the input
@shilpiverma509 it should help you solve the issue with undefined like you had asked about above though, no?
Liam Docherty
@ldocherty1
Aug 06 2017 21:13

@SkyC0der Thanks for the codepen link :) how can I make it disappear first then make the nav bar? I tried changing the value from 301 to 0 but the nav bar was still there.

On #part1 I don’t want the navigation bar to be visible. However, on section 2,3,4 which is known as #part2, #part3, and #part4 I want the navigation to appear.

Here is an example http://findmatthew.com

https://jsfiddle.net/vx85qub9/7/

CamperBot
@camperbot
Aug 06 2017 21:13
ldocherty1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2323 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 06 2017 21:14
@shilpiverma509 Maybe this is what you wanted?
    else if (isNumeric(input)) {
      expression.length ? expression[len]=expression[len] + input : expression.push(input);
      console.log(expression);
      $("#results").val(string);
    }
shilpi verma
@shilpiverma509
Aug 06 2017 21:14
@SkyC0der yes it helped why I was getting undefined initially. :+1:
Roberto Di Lillo
@koop4
Aug 06 2017 21:14
@SkyC0der i ll use a DIV then, and manage to show/hide content using animations
thanks
Gulsvi
@gulsvi
Aug 06 2017 21:14
you're welcome
shilpi verma
@shilpiverma509
Aug 06 2017 21:21
@SkyC0der it does solve to an extent but I am not sure what's going wrong here. So I am trying to store the entire input in the array . ex: 78+99. If I use expression.length ? expression[len]=expression[len] + input : expression.push(input);
it will take 78 but still store undefined for the remaining numbers
Gulsvi
@gulsvi
Aug 06 2017 21:26
@shilpiverma509 I didn't use an array in my calculator, but I think you can fix that by checking if the element in that array exists yet
expression[len] ? expression[len]=expression[len] + input : expression.push(input);
shilpi verma
@shilpiverma509
Aug 06 2017 21:32
@SkyC0der sure. Thankyou for your help :)
CamperBot
@camperbot
Aug 06 2017 21:32
shilpiverma509 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2325 | @skyc0der |http://www.freecodecamp.com/skyc0der
Jim Tryon
@jimtryon
Aug 06 2017 22:44
Why would this line of code be wrong?
document.getElementsByTagName(“img”);
The tool that we are using for JS says it’s wrong. Try again
Gulsvi
@gulsvi
Aug 06 2017 22:50
@jimtryon The smart quotes will cause errors. Try it this way: document.getElementsByTagName("img")
if that isn't the issue, show more code - that method returns a HTML collection, so you do need to specify which img tag you want even if there is only one.
Jim Tryon
@jimtryon
Aug 06 2017 22:51
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph with a link to <a href="https://www.google.com">Google</a>.</p>
    <p>I like to show Puppy gifs! <img src="puppies.gif" alt="Puppies!></p>
  </body>
</html>
That is the HTML I am given
and I want the simplest way to target the img element in javascript
so I did document.getElementsByTagName(“img”);
Gulsvi
@gulsvi
Aug 06 2017 22:52
Since getElementsByTagName returns a collection, you need to use document.getElementsByTagName("img")[0] to target the first one
be careful with the quotes too - a big difference between “img” and "img"
Jim Tryon
@jimtryon
Aug 06 2017 22:54
Yeah, how can I check that I am using the right quotes?
Apparently my quotes are not coming out right on the keyboard
and I’m wondering how long this has been happening now
Gulsvi
@gulsvi
Aug 06 2017 22:55
Hmmmm, I'm not sure. I only see those quotes in Microsoft Word and you have to enable them in the options
Maybe your text editor?
Jim Tryon
@jimtryon
Aug 06 2017 22:55
Does this look better now?
document.getElementsByTagName("img");
Gulsvi
@gulsvi
Aug 06 2017 22:56
Yes, those quotes look good @jimtryon
Jim Tryon
@jimtryon
Aug 06 2017 22:58
What is with the [0] @SkyC0der?
Gulsvi
@gulsvi
Aug 06 2017 22:58
I did just notice your HTML is missing a quote above. alt="Puppies! needs a quote after it
Jim Tryon
@jimtryon
Aug 06 2017 22:58
I thought that wouldn’t be needed if it’s only the img element in the HTML
I think that is why I left it off since there wasn’t more than one
Gulsvi
@gulsvi
Aug 06 2017 22:59
@jimtryon Yeah, even if it's the only element, it still returns a HTML collection. A HTML Collection is like an array, so we use [0] to get the first element
All of the document.getElementsBy methods return a collection ('Elements' is plural)
Jim Tryon
@jimtryon
Aug 06 2017 23:00
@SkyC0der Is that because of how the DOM works that we have to access it that way?
@SkyC0der I’m doing the section on DOM elements
Gulsvi
@gulsvi
Aug 06 2017 23:02
@jimtryon It's more how javascript works when accessing the DOM
in jQuery, you just do $('img') and if there's only one image, that's all you need
jQuery adds a layer of logic to make things a little simpler
Jim Tryon
@jimtryon
Aug 06 2017 23:06
That makes a lot of sense @SkyC0der, thanks!
CamperBot
@camperbot
Aug 06 2017 23:06
jimtryon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2329 | @skyc0der |http://www.freecodecamp.com/skyc0der
Jim Tryon
@jimtryon
Aug 06 2017 23:07
I’m familiar with accessing the DOM in jQuery
not so much using vanilla JS since I prefer the power of jQuery
Max
@taiomori
Aug 06 2017 23:37
hello i just started my map, can I ask will this course give me ability to create https://marvelapp.com/2ea0ij7/screen/31154008 but responsive?
aRtoo
@artoodeeto
Aug 06 2017 23:41
hi guys need help. can you explain why is this returning false?

function whatIsInAName(collection, source) {
  var arr = [];
     //returning false it should be returning true because both console. log at the bottom is the same.
    console.log(collection[0] === source);

    console.log(collection[0]); //return last: 'Capulet'
    console.log(source); //return last: 'Capulet'


  return arr;
}

whatIsInAName([{ last: "Capulet" }], { last: "Capulet" });
@gothamknight i tried. even i use hasOwnProperty() its false
iso
@iso1048
Aug 06 2017 23:45
@artoodeeto can you just compare objects like that?
@artoodeeto i dont think you can compare objects
aRtoo
@artoodeeto
Aug 06 2017 23:45
@gothamknight this is true though
 console.log(collection[0].last === source.last);
iso
@iso1048
Aug 06 2017 23:45
@artoodeeto but in that case you are comparing strings
aRtoo
@artoodeeto
Aug 06 2017 23:46
@gothamknight right. but my problem is i need to change the key not the value.
Janelle deMent
@janelledement
Aug 06 2017 23:46
hey guys, I'm working on the weather app. I understand how to get the geolocation of a user but want to convert that information (lat/long) into city and state. I'm thinking of using the google maps api in order to do this but haven't been able to work it into my pen using $getJSON. Anyone know how to use this API with codepen?
iso
@iso1048
Aug 06 2017 23:47
@artoodeeto by 'change' do you mean loop through?
aRtoo
@artoodeeto
Aug 06 2017 23:48
@gothamknight

function whatIsInAName(collection, source) {
  var arr = [];

    console.log(collection[2].last === source.last);

    console.log(collection[2]);

    console.log(collection[0].hasOwnProperty(source.last));

    console.log(source.last);

    console.log(Object.keys(collection));

    console.log(collection[0].last);



  return arr;
}

whatIsInAName([{ first: "Romeo", last: "Montague" }, 
              { first: "Mercutio", last: null }, 
              { first: "Tybalt", last: "Capulet" }], 
              { last: "Capulet" }); */
//should return [{ first: "Tybalt", last: "Capulet" }].
@artoodeeto i could loop it but theres other parameter that doesnt use last.
so i need to get the property not the value
heres another given parameter
//whatIsInAName([{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }], { "a": 1 }); 
//should return [{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }].
iso
@iso1048
Aug 06 2017 23:51
@artoodeeto have you though about using Object.keys()?
aRtoo
@artoodeeto
Aug 06 2017 23:52
@gothamknight yea. Object.keys(yourObject) its returning me array
Gulsvi
@gulsvi
Aug 06 2017 23:53
@janelledement Here's an example on codepen: https://codepen.io/malyw/pen/bqJyBM
iso
@iso1048
Aug 06 2017 23:54
@artoodeeto i used Object.keys(source) to create an array of the properties of the source object, then looped through this array and the collection array (2 for loops) to see if the the properties/keys of the objects in the collection matched the properties/keys from the source
Janelle deMent
@janelledement
Aug 06 2017 23:54
@SkyC0der Cool, thanks!
CamperBot
@camperbot
Aug 06 2017 23:54
janelledement sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2330 | @skyc0der |http://www.freecodecamp.com/skyc0der
Max
@taiomori
Aug 06 2017 23:59
youre welcome