These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Dec 2016
Jon Brandwein
@jdb409
Dec 24 2016 00:28
Hi, I just finished the json module and feel pretty lost. I don't know where to even begin with the projects. Can anyone recommend some further lessons? thanks.
Peter Steele
@PeterHSteele
Dec 24 2016 01:03

@jdb409 you'll need to work APIs for a lot of the projects. If you're not familiar with them, this is a good and short intro vid. I watched it when I got to random quote and felt really lost. https://www.youtube.com/watch?v=s7wmiS2mSXY

you access APIs using the getJson method, which is a jquery method you can read about here: http://api.jquery.com/jquery.getjson/

Sam Griffen
@ssgriffen
Dec 24 2016 01:13
Looking for critiques on my wiki proj, much appreciated..http://codepen.io/ssgriffen/pen/PbgNbL
Peter Steele
@PeterHSteele
Dec 24 2016 01:22
@ssgriffen i really like it! not much else to say
julienalexandre
@julienalexandre
Dec 24 2016 01:44
Just working on my portfolio right now and I'm wondering how I can insert social media buttons (more specifically pictures) and the link (I believe it's href=something) into my code. Here's a copy: http://codepen.io/julienalexandre/pen/XNQKzx
crystal
@crystalYY
Dec 24 2016 02:00
@khaduch thanks
CamperBot
@camperbot
Dec 24 2016 02:00
crystalyy sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2148 | @khaduch |http://www.freecodecamp.com/khaduch
jamesjd54
@jamesjd54
Dec 24 2016 02:57
im trying to do something really simple and i cant figure it out

im doing the portfolio page and i want the left text on my navbar to be white so its easier to see with the orange background. here's my code.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

  <a class="white-font navbar-brand" href="#">navbar name</a>


  <ul class="nav navbar-nav">
    <li class="active"><a href="#">option 1</a></li>

.navbar-inverse{background-color:#FF8300;
border-color:#ffffff;}
.white-font{color:white;}

jamesjd54
@jamesjd54
Dec 24 2016 03:04
anyone know how to fix this?
the "navbar name" is a gray font which is really hard to read with the orange background
Benedict Chiam
@benedictusc
Dec 24 2016 03:39
@jamesjd54 .white-font{color:white;} doesn't affect it? If so, perhaps there's some conflicting style?
Walid Ashri
@walidashri
Dec 24 2016 03:46
@jamesjd54 switch class order class='navbar-brand white-font` or add the style to navbar-brand directly
Holly Kwan
@hollykhk
Dec 24 2016 04:26
I need someone to just look for what mistakes I made in the menu bar of my website. I had already "inspect" the elements but unfortunately I don't seem to be able to figure out why there is huge chuck of spaces between each items on the menu. http://personalwebsiteholly.s3-website-us-west-2.amazonaws.com/
Ankit Agarwal
@ankit-prgmr
Dec 24 2016 04:42
Hey guys, I just finished off with my portfolio page. Would welcome all your feedback and suggestion. Thanks
Link is http://codepen.io/ankit-prgmr/full/PbOMyY
Hien Sarah Ly
@hiensarahly
Dec 24 2016 04:49
@ankit-prgmr Hello. Very neat and fully responsive. Well-aligned elements. One thing though is the yellow 'Coming soon' not centered for horizontal mobile viewing. Whereas the grey is centered. You may want to consider it! 😊😊😊
@ankit-prgmr sawry, i meant vertical
Ankit Agarwal
@ankit-prgmr
Dec 24 2016 04:50
@hiensarahly Thanks for the feedback, I'll look into it
CamperBot
@camperbot
Dec 24 2016 04:50
ankit-prgmr sends brownie points to @hiensarahly :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @hiensarahly |http://www.freecodecamp.com/hiensarahly
Hien Sarah Ly
@hiensarahly
Dec 24 2016 04:51
🙃
Ken Haduch
@khaduch
Dec 24 2016 05:16

@hollykhk - I'm trying to sort out your issue with your menu bar - but I am not familiar with the " pure-min.css" package that you are using. For some reason, there is a class .pure-menu-item that has a height setting of 100%. If I go into the browser devtools and disable that height setting, then the menu items nicely line up at the top of the page. I don't know why that setting is there, but it is definitely affecting your menu styling.

It also seems that you also have some jquery code in there, but jquery.js is not loaded?
_

Patrick
@SweetmanTech
Dec 24 2016 05:28
I am working on the Random Quote Generator Project. JavaScript issue. I am trying to use JavaScript to retrieve a new quote when a button is clicked. Can anyone help me figure out why my quote does not change? https://codepen.io/SweetTech/pen/zoXpvV?editors=0010
Ken Haduch
@khaduch
Dec 24 2016 05:31
@hollykhk - you have two <body> tags in your document, too - not sure if that could be a factor? And it seems that you have two closing </head> tags - you should try and clean up your HTML code and see if it is affecting your page layout?
@SweetmanTech - I think that your URL url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1', is not complete - you need some http:// and perhaps something else there? The path to the site you are trying to access...
khaduch @khaduch -going away for the night... a happy coding time to all! And to all a good night!
Rabin Shrestha
@jyapujuju
Dec 24 2016 05:39
```js
function sumAll(arr) {
  var sum = 0;
  arr.reduce(function(a,b){
    sum = a + b;
  }, 0);
  return sum;
}

sumAll([1, 4]);
:(
Brian
@BrianCodes33
Dec 24 2016 05:50
oops
Patrick
@SweetmanTech
Dec 24 2016 05:53
I am working on the Random Quote Generator Project. JavaScript issue. I am trying to use JavaScript to retrieve a new quote when a button is clicked. Can anyone help me figure out why my quote does not change? I have updated the URL : https://codepen.io/SweetTech/pen/zoXpvV?editors=0010
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 24 2016 06:03
@SweetmanTech copy paste and use this url https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
@SweetmanTech the issue is of having mixed content over the protocol
@SweetmanTech http protocol will not decrypt content which are encrypted by https
@SweetmanTech however , do not let yourself be confused with browser rules regarding of loading a webpage over different protocols
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 24 2016 06:10
@SweetmanTech such as , a webpage over http could have it partial content coming from https but same cannot be for the vice versa . Most mordern browsers block http content when the page is loaded over a https protocol
@SweetmanTech hope this helps ~
Nitin Chandran Nair
@NitinNair89
Dec 24 2016 06:12
hello World! :)
CamperBot
@camperbot
Dec 24 2016 06:12

welcome to FreeCodeCamp @NitinNair89!

Ritvars
@RitvarsZ
Dec 24 2016 06:21
Hi! Wanted to now about search forms in javascipt. How do you access them in codepen? Does the name attribute work Or I need an Id?
creedare
@creedare
Dec 24 2016 06:24
hey guys so im working on building a tribute page
and for some reason the img-responsive class doesn't work
Nitin Chandran Nair
@NitinNair89
Dec 24 2016 06:25
did you add the jquery and the bootstrap js files/
?
creedare
@creedare
Dec 24 2016 06:25
i added boostrap
but not jquery
i thought img-responsive only uses bootstrap
Nitin Chandran Nair
@NitinNair89
Dec 24 2016 06:28
right, but try
Ritvars
@RitvarsZ
Dec 24 2016 06:31
@SweetmanTech Try a JSON request maybe?
Hi again, just checked on my quote generator and for some reason It won't work anymore, I haven't changed any code, it used to work. Here's my codepen - https://codepen.io/Ritvars/full/BQVEvY/
Ritvars
@RitvarsZ
Dec 24 2016 06:37
anyway, I got the same exact code running on my webpage http://ripinsz.cf/RandomQuoteGenerator/index.php Over there it works, but on codepen - it doesn't
Tyler Moeller
@TylerMoeller
Dec 24 2016 07:19
@RitvarsZ Ctrl+Shift+J brings up a developer console in your browser with more info. Forismatic only supports HTTP, open your codepen as http and it will work fine
http://codepen.io/Ritvars/full/BQVEvY/
@NitinNair89 img-responsive doesn't require JavaScript. It's this CSS:
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
Nitin Chandran Nair
@NitinNair89
Dec 24 2016 07:42
@TylerMoeller Yes, i know :)
Keith Tan
@arstotzkanglory
Dec 24 2016 08:48
hi all, i'm trying to modify the code such that the buttons appear on the same line as the text "Test"
<div class="container-full">
<div class="row">
<div class="header">
<nav class="center">
<h1 class="text-center">test</h1></nav>

<nav class="pull-right">
<a class="btn btn-lg active" href="#">About</a>
<a class="btn btn-lg" href="#">Portfolio</a>
<a class="btn btn-lg" href="#">Contact</a>
</nav>
</div>
</div>
</div>
at the moment the buttons appear on the next line. anyone can help?
Jordan Bartholomew
@tourdejord
Dec 24 2016 08:53
Try float left. Or right.
That's for you Keith.
Sorry.
Float: left;
Uhhh... now I have to play with it. Are you using bootstrap?
It's probably that your h1 is outside of your nav
Oh man. Give me a sec.
Keith Tan
@arstotzkanglory
Dec 24 2016 08:58
thanks for responding @tourdejord . yes i'm using bootstrap
CamperBot
@camperbot
Dec 24 2016 08:58
arstotzkanglory sends brownie points to @tourdejord :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @tourdejord |http://www.freecodecamp.com/tourdejord
Jordan Bartholomew
@tourdejord
Dec 24 2016 08:59
I responded to a notification on my phone. I'm at my computer now.
no problem
@arstotzkanglory add this to your CSS. Then try to play with it from there. I'll do the same.
h1 {
float: right;
}
Sid Kasat
@sidkasat
Dec 24 2016 09:04
Hey Guys! For some reason my class="row" and class="col-md-*" is not working on my portfolio page.. What might be going wrong?
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:06
@sidkasat where's the code?
@arstotzkanglory actually. I would do this a different way. I've never used nav other than just copying code. I can see using 2 different nav sections as your problem however. You probably just want to add it all in the nav. Because that is your box. You just want it all in the same bar right?
Sid Kasat
@sidkasat
Dec 24 2016 09:08
@tourdejord <div class="row">
<div class="col-md-4">
<img class="portfolio-pic" src="http://res.cloudinary.com/sidkasat/image/upload/v1482569124/Screenshot_11_gp2emd.png" alt=" Coffee Buddy">
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/sidkasat/image/upload/v1482569450/Screenshot_13_vkmvnn.png" alt="Projector Buddy" >
</div>
<div class="col-md-4">
</div>
</div>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
  </div>
</div>
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:09
Is that all of the code?
If so I know the answer.
Sid Kasat
@sidkasat
Dec 24 2016 09:09
no Let me send you the whole code
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:09
<div class="container">
Sid Kasat
@sidkasat
Dec 24 2016 09:09
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top">

<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Siddhant (Sid) Kasat</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>
</div>

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#about">ABOUT</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>

</ul>

</div>

</div>
</div>
<div class="container background">
<div id="about" class="contentDiv">
<center><img class ="profile-pic thin-black-border" src= "http://res.cloudinary.com/sidkasat/image/upload/v1482468064/sid_bpcjzc.jpg" alt="Hey! It's Sid here!" >
</center>
<h3 class="text-center intro-background"> IoT Enthusiast | Software Developer | Loves interesting ideas</h3>

<p class= "text-center intro-body"> Hi! I am a second year Computer Science and Engineering major student at University of California, Irvine. I have worked on various IoT projects based on energy saving and smart machines using basic Machine Learning. Have a lot of experience as I have interned at two companies- one established MNC, the other a startup IoT company. I am looking for exciting opportunity. I am always willing to learn from others and have an entrepreneurial ambition. Would love to be a part of any exciting idea!
</div>

<div class="background">
<!-- PORTFOLIO PART-->
<div class="row">
<div class="col-md-4">
<img class="portfolio-pic" src="http://res.cloudinary.com/sidkasat/image/upload/v1482569124/Screenshot_11_gp2emd.png" alt=" Coffee Buddy">
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/sidkasat/image/upload/v1482569450/Screenshot_13_vkmvnn.png" alt="Projector Buddy" >
</div>
<div class="col-md-4">
</div>
</div>

<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:09
Yup just add the container div to the outside of the first code.
Sid Kasat
@sidkasat
Dec 24 2016 09:10
okay let me try
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:10
<div class="container">
ok
Sid Kasat
@sidkasat
Dec 24 2016 09:11
@tourdejord No didn't change
<div class="container background">
<!-- PORTFOLIO PART-->
<div class="row">
<div class="col-md-4">
<img class="portfolio-pic" src="http://res.cloudinary.com/sidkasat/image/upload/v1482569124/Screenshot_11_gp2emd.png" alt=" Coffee Buddy">
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/sidkasat/image/upload/v1482569450/Screenshot_13_vkmvnn.png" alt="Projector Buddy" class="portfolio-pic" >
</div>
<div class="col-md-4">
</div>
</div>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
  </div>
</div>
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:13
I'll see what I can find. container background is new to me.
Sid Kasat
@sidkasat
Dec 24 2016 09:14
Background is a class which I made in the style sheet.. Do you want me to make another div only with container?
Okay I tried that as well, same thing
Keith Tan
@arstotzkanglory
Dec 24 2016 09:15
@tourdejord yes i'd like them on the same bar. got rid of <nav> and am trying to squeeze things into a row vs four col-xs-4
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:15
oh. ha ha. wow. It's been so long since I names classes. I should have known. so you already had container.
Sid Kasat
@sidkasat
Dec 24 2016 09:16
@tourdejord Haha yes. Here is the link-http://codepen.io/sidkasat/pen/woZmEd?editors=1100
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:17
@arstotzkanglory I use an un-ordered list and add a float class to my nav bars. Then you can add <a>'s to your list items as links and then just style the links as buttons. I can help you with that too if you need. I'm sure I can grab you an example real quick one sec.
Keith Tan
@arstotzkanglory
Dec 24 2016 09:18
yes was debating between using a ul vs a button
sorry do you mind showing an example? i'm a bit of a newbie here
i think the problem lies with with trying to nest centralized text within a nav bar
doesn't really seem supported
Sorin Ruse
@sorinr
Dec 24 2016 09:24
@arstotzkanglory @tourdejord here an example i already had
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:24
Well. There's a way. I'd start from the beginning if I were you. I have a lot of navbar examples. I'm just trying to find a good one. I have a lot of work in progress | half done nav bars.
Keith Tan
@arstotzkanglory
Dec 24 2016 09:26
nice example @sorinr -- not a critique of you but the middle btn doesn't seem to be right in the center
Sorin Ruse
@sorinr
Dec 24 2016 09:29
@arstotzkanglory think its because of transform: translate(-50%); that works a little diff from browser to browser. it was just a quick sample and i haven't put any browser specific prefixes
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:29
@arstotzkanglory if you think of the navbar as 3 sections. It's spaced perfectly. Just the buttons on the right are all in one section.
For Sorin's example that is.
Keith Tan
@arstotzkanglory
Dec 24 2016 09:29
will have a closer look at the code behind that example
but yes it's a good illustration of usage of nav right left center 👍🏼👍🏼
Sorin Ruse
@sorinr
Dec 24 2016 09:30
also there is no responsiveness in that example. it was intended for desktop but its not hard to make it also responsive
Keith Tan
@arstotzkanglory
Dec 24 2016 09:30
ahhhh
oh right i just noticed those were predefined in your css
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:31
after a second look the alignment was off. My bad. I'm on one tonight. ok. I'm just going to focus on one at a time. Play around with his nav bar example I'm going to work on Sorin's col-md issue.
uhh... Sid's
Keith Tan
@arstotzkanglory
Dec 24 2016 09:32
just curious, are you doing this voluntarily?
i mean it's been great help but if not for people like you guys who help respond here
it'd be mainly filled with people asking questions like me
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:33
Yeah, I've only been doing this since July. But it's literally all I do. I've stepped away from learning to run a business. You can pick it up really fast if you just stick with it. Sooner or later it just clicks.
Keith Tan
@arstotzkanglory
Dec 24 2016 09:34
and you're taking this troubleshooting as a way to improve your own skills as well?
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:34
I just happened to read my notification and respond which I haven't done in a long time.
Sid Kasat
@sidkasat
Dec 24 2016 09:34
Thanks @tourdejord
CamperBot
@camperbot
Dec 24 2016 09:34
sidkasat sends brownie points to @tourdejord :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @tourdejord |http://www.freecodecamp.com/tourdejord
Ritvars
@RitvarsZ
Dec 24 2016 09:35
@TylerMoeller The console doesn't show any errors, but thaks anyway, allthough I don't know why it worked like a week ago when I developed it. Did codepen decided to switch from http to https? :D
@TylerMoeller Thank you! (You didn't get yor cookies:))
CamperBot
@camperbot
Dec 24 2016 09:36
:star2: 1199 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ritvarsz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:37
@arstotzkanglory absolutely. Teaching is learning. This is how me and my business partner figure things out is by collaborating and talking. It really works faster than searching aimlessly. @sidkasat no problem. Just so I understand.
What is it you are trying to accomplish exactly?
Or what isn't working for you.
Sid Kasat
@sidkasat
Dec 24 2016 09:39
I am trying to align 6 images in 2 rows.. with 3 in each
The code which I have, I believe it's correct.. But for some reason it doesn't show up
Ende
@LeForteXL
Dec 24 2016 09:39
col-md-6
Sid Kasat
@sidkasat
Dec 24 2016 09:40
Do I need to add some CSS file? Like external one?
@AlvinII I have done col-md-4 (The code is above)
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:41
@sidkasat that helps alot. one sec.
Ende
@LeForteXL
Dec 24 2016 09:43
I used <div class="row text-center">
it worked, but there's probably a better way
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:45
oh heck yeah. Good call Alvin. Were you looking to center your images or get them in 2 rows? Either way you'll want to add that for design quality.
Ende
@LeForteXL
Dec 24 2016 09:46
@tourdejord I wanted to center that div class otherwise it was aligned to the left
@tourdejord I have no content to show off, lol. Soon though.
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:47
Oh, you are good man. It looks nice.
@sidkasat. I think your code is right.
Just add your other images. Or atleast use placeholders to complete your view. Then once the images are in place it paints the picture better.
and add Alvin's text-center to your row class's. <div class="row text-center"
>
Ende
@LeForteXL
Dec 24 2016 09:56
@tourdejord I spent about an hour trying to figure out how to make the navbar toggle for small screens. A button appears when the window is reduced, but no menu toggles when clicked. Work in progress, advice is welcome.
Jordan Bartholomew
@tourdejord
Dec 24 2016 09:58
@AlvinII I'd recommend trying on another browser just incase you missed your browsers webkit or something.
I am by all means no expert on pc, tablet, mobile integration.
Just food for thought.
Ende
@LeForteXL
Dec 24 2016 09:59
@tourdejord well in that case, here is a future project I want to help with. it has great references already : https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:01
Ah. thanks man. That is awesome. I love finding these tools. thank you @AlvinII
CamperBot
@camperbot
Dec 24 2016 10:01
tourdejord sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:cookie: 161 | @alvinii |http://www.freecodecamp.com/alvinii
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:04
I've actually been using wordpress which integrates mobile, tablet and pc views/editing. It's a long story. But basically I intend to learn all of this eventually. Hopefully sooner than later. I'd like to be able to do it all without wordpress. But money talks and time is money. But I don't regret it. Wordpress is AMAZING.
Ende
@LeForteXL
Dec 24 2016 10:06
@tourdejord yeah, I completely understand. its fine to play around with, I'm a first year cs major, dabbling
@tourdejord I wanted to get past the portolfio project in order to jump into JS. And I hate skipping steps.
@tourdejord thanks for the website info, that will come in handy, actually.
CamperBot
@camperbot
Dec 24 2016 10:07
alvinii sends brownie points to @tourdejord :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @tourdejord |http://www.freecodecamp.com/tourdejord
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:11
I agree completely. I was anti-wordpress. 100% study. WordPress was the devil. But I had a buddy who kept telling me to try it and I can't deny that's it is an amazing thing. You can still code what you want. It just does all the long hard work for you. Check it out sometime. Here's another one of ours. https://www.silverliningsalon.com There's like 12 others as well. This one was "all" me. https://www.ezmassageroller.com I started coding in July and started with Wordpress about a month ago.
Ende
@LeForteXL
Dec 24 2016 10:13
those are your products?
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:13
no
just clients
Ende
@LeForteXL
Dec 24 2016 10:14
@tourdejord that's awesome, people paid you to design their website?
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:15
Like I said it's a long story. Basically since I started coding and got really serious about it. Like 13 hours a day studying. Well it started to pick up really quickly. An old friend of mine needed someone like me to join in. So I was in the right place at the right time.
Ende
@LeForteXL
Dec 24 2016 10:17
@tourdejord very cool
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:17
So far I've made a total of $140. But that's nothing for what is about to happen. He's 2 years into putting in the sweat equity. These are residual income sites so we get a percent of all profits plus monthly base fees to run the sites and manage the SEO.
The natures energy is taking off next month. We got Cher to promote it. Well they did.
Ende
@LeForteXL
Dec 24 2016 10:18
@tourdejord affiliate marketing is awesome
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:18
It's exactly why this industry is so amazing. The potential is endless. I'm done bragging though. thanks for listening to that.
Ende
@LeForteXL
Dec 24 2016 10:19
@tourdejord yeah, np. This was one of the reasons I wanted to make my own website. school is expensive!
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:21
ha, I bet. Well keep at it man. Your code is looking really neat. I can tell that you are picking it up nicely.
Sid Kasat
@sidkasat
Dec 24 2016 10:21
@tourdejord I changed from col-md- to col-xs- (Now it works)
It's so wierd
Ende
@LeForteXL
Dec 24 2016 10:22
@sidkasat have to you tried including all four of the class sizes in your div element?
Jordan Bartholomew
@tourdejord
Dec 24 2016 10:22
@sid that is weird. I usually used md for everything.
Sid Kasat
@sidkasat
Dec 24 2016 10:24
That's exactly I was wondering about
@AlvinII I haven't tried that.. let me try it
@AlvinII What do you mean by 4 class sizes? Do you mean 3 col-xs-/ col-md- in one div?
Ende
@LeForteXL
Dec 24 2016 10:26
@sidkasat screen sizes* oops
Sid Kasat
@sidkasat
Dec 24 2016 10:26
@AlvinII Let me try
@AlvinII No, for some reason it goes back to one image per line
So I converted back to col-xs-*
Ende
@LeForteXL
Dec 24 2016 10:29
@sidkasat so, for instance, if the screen is xs, and you want 4 col's, you would put col-xs-3. But if you wanted a larger screen to have 6 columns, you would put col-md/lg-2. Do I understand that correctly?
md/lg meaning 'medium or large' screens
Sid Kasat
@sidkasat
Dec 24 2016 10:31
No, its like if you need 6 cols then you do col-md-2
The total addition should be 12 always
So if you 2 - col-md-6
If you need 3- col-md-4
@AlvinII
Ende
@LeForteXL
Dec 24 2016 10:32
@sidkasat gotcha
@Marianissimus Ah thank you!
CamperBot
@camperbot
Dec 24 2016 10:33
alvinii sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @marianissimus |http://www.freecodecamp.com/marianissimus
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 10:42
Excuse me Somebody can tell me how to do portfolio webpage
Ende
@LeForteXL
Dec 24 2016 10:45
@DILIPKUMARJOSHI visit: www.getbootstrap.com
that gives you a huge first step to starting
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 10:46
@AlvinII oh okay.
Ende
@LeForteXL
Dec 24 2016 10:48
@DILIPKUMARJOSHI I'll be on all night I think, so ask any of us questions. itll help us learn as well
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 10:52
oh thanks a lot @AlvinII Really i am beginner so please help me
CamperBot
@camperbot
Dec 24 2016 10:52
dilipkumarjoshi sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:cookie: 163 | @alvinii |http://www.freecodecamp.com/alvinii
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 10:52
@AlvinII what i have to do next
@AlvinII actually my challenge is:Build a Personal Portfolio Webpage this one
Ende
@LeForteXL
Dec 24 2016 11:00
@DILIPKUMARJOSHI okay, did you look at the example given by quincy?
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 11:03
@AlvinII no
@AlvinII where can i get those examples?
its under the maps tab > basic front end dev projects
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 11:08
@AlvinII okay but its very difficult for me i am not getting any plan that how to look my portfolio page
Ende
@LeForteXL
Dec 24 2016 11:15
@DILIPKUMARJOSHI one thing that helps me is to break down the problem into smaller segments. Start by figuring out how the navbar is made. Do you know how to inspect the elements on a web pages?
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 11:18
@AlvinII No
Ende
@LeForteXL
Dec 24 2016 11:20
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 11:21
@AlvinII okay
Ende
@LeForteXL
Dec 24 2016 11:21
scroll down to the examples, click on one. As soon as the page loads, right click again and select 'inspect element'. At that point, you will be able to read the bootstrap code that will help you create yor own page
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 11:22
@AlvinII oh okay
Ende
@LeForteXL
Dec 24 2016 11:22
excuse me, right click > view source
Dilip Kumar Joshi
@DILIPKUMARJOSHI
Dec 24 2016 11:23
@AlvinII okay
Pablo
@Felnyr
Dec 24 2016 12:09
hi i finishing my weather app but im struggling with the button to change fahrenheit to celsius. What i want is every click changing the html element to another. here is my code.
 //Script C => F

   $("#C_btn").click(function(){
     tempF = Math.floor(32+9/5*datat);     
     $("#temp").html(tempF+deg+" Fahrenheit");

      //$("#temp").html(datat+deg+" Celsius");
   });
Ken Haduch
@khaduch
Dec 24 2016 13:30
@Felnyr - hello, not sure if you're still stuck on this. I cannot tell what is going on from your code snippet, but what is happening when you click?
I'm wondering what datat is holding for a value? It might be that you want to just calculate the degrees in both units when you receive the data, and just keep a flag to indicate which one is being displayed, so that when you click the conversion button, you just output the other value and change the flag, but without seeing more code, I don't know what you've got going on right now?
Abhishek Baliyan
@abhishekdevinfo
Dec 24 2016 14:41
is photoshop necessary for front-end developers
Ende
@LeForteXL
Dec 24 2016 14:42
photoshop is good to know to for the sake of it
its just cool if you want to edit your own photos
Nikita
@bukulele
Dec 24 2016 15:07

hello everybody! I'm coding the challenge with personal page and I don't understand how "scrollspy" function works. I've tryed to make the navbar with not-typical characteristics, so maybe this is the reason why "scrollspy" doesn't work?

<body>
<nav class="col-md-10 col-xs-12 navbar navbar-fixed-top bukulele-background border-nav">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3"><img height=50px src="http://i.imgur.com/o267Mnz.png"></div>
<div class="col-md-offset-8 col-xs-offset-6">
<a href="#page1"><button class="menu-button btn" id="text1">Text1</button></a>
<a href="#page2"><button class="menu-button btn" id="text2">Text2</button></a>
<a href="#page3"><button class="menu-button btn" id="text3">Text3</button></a></div>
</div>
</nav>
<div style="background:transparent !important" class="jumbotron" id="page1">

<div class="container">
<p style="color:red">Sed ut...

Francois van Leersum
@Blockshot12
Dec 24 2016 15:12
@bukulele Perheps a link to your codepen could be helpfull.
Nikita
@bukulele
Dec 24 2016 15:15
https://codepen.io/bukulele/pen/rWZNdw maybe there is any alternative to "scrollspy"? I just need to get the highlighting of menu buttons
Nikita
@bukulele
Dec 24 2016 15:22
@Blockshot12 sorry, I have not sent the link directly to you https://codepen.io/bukulele/pen/rWZNdw
Francois van Leersum
@Blockshot12
Dec 24 2016 15:26
@bukulele That’s ok, everybody can help!
I’ll take a look in a second.
Francois van Leersum
@Blockshot12
Dec 24 2016 15:33
@bukulele You haven’t implemented a scrollspy plugin. Take al look at this tutorial: http://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp
John Alcher
@alchermd
Dec 24 2016 16:02
Hey fellas! With regular expressions and .replace() method, how do I transform oneTwo into one Two? I can match oneTwo with /([a-z][A-Z])/, but how do I insert a space between them?
Nikita
@bukulele
Dec 24 2016 16:04
@Blockshot12 yes, I know, I've erased it from JS window, because the standard decision doesn't work. I'm trying to solve this problem since one week ago without any success. now I've added a scrollspy plugin but nothing changed
Francois van Leersum
@Blockshot12
Dec 24 2016 16:16
@bukulele You have to do 3 things:
  1. Add bootstrap.js as external javascript (it’s in the quick-add pulldown) and you can remove jQuery UI.
  2. Remove the body tag. Codepen does that for you.
  3. Place this js code:
Nikita
@bukulele
Dec 24 2016 16:20
@Blockshot12 sorry, I don't see the point N3 :)
Francois van Leersum
@Blockshot12
Dec 24 2016 16:20
still typing….
Jean Marco Romero
@volkranium
Dec 24 2016 16:35
Supp fellas
Am I the only one who feel he need a couple of days of no coding to improve at it?
Eric
@eextreme
Dec 24 2016 16:42
I'm looking at this activity build-a-javascript-calculator and the example fails to take into account the order of operations is that how it is supposed to be implemented?
Francois van Leersum
@Blockshot12
Dec 24 2016 16:55
@bukulele Sorry, I was looking add your code and so some more error. I made you a pen: http://codepen.io/Blockshot/pen/bByrPx
Ankur sharma
@ankur1163
Dec 24 2016 16:55
I also do feel like it @volkranium
Francois van Leersum
@Blockshot12
Dec 24 2016 16:57
@bukulele For example, don’t place <button> inside <a>.
If you want to style your <a>, just write <a class=“btn just-some-class” href=“…”>.
Scott S
@Scooch
Dec 24 2016 17:23
could anyone tell me why my the drop down menu doesnt show when i click the button? <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="nameNav">Scott Selva</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#p1" id="home">Home</a></li> <li><a href="#p2" id="about">About</a></li>
<li><a href="#p3" id="portfolio">Portfolio</a></li>
<li><a href="#p4" id="contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Ankit Agarwal
@ankit-prgmr
Dec 24 2016 17:26
@Scooch Have you added the bootstrap js file?
Scott S
@Scooch
Dec 24 2016 17:31
@ankit-prgmr good call! i actually didnt have it added but after adding it still no change.
maybe thatll help
Ankit Agarwal
@ankit-prgmr
Dec 24 2016 17:36
@Scooch Remove the bootstrap js file added in css . Also try adding jquery file in JS tab
Scott S
@Scooch
Dec 24 2016 17:40
@ankit-prgmr i updated those, figured the bootstrap js file was in the wrong area. added the jquery too with no resolve :(
Sorin Ruse
@sorinr
Dec 24 2016 17:41
@Scooch you can add in css to your #abotTwo some padding like padding: 20px;
Ankit Agarwal
@ankit-prgmr
Dec 24 2016 17:41
@Scooch you need to add jquery bootstrap file above js bootstrap file
Scott S
@Scooch
Dec 24 2016 17:42
ahh there we go @ankit-prgmr thank you!
CamperBot
@camperbot
Dec 24 2016 17:42
scooch sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
:cookie: 169 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
Ankit Agarwal
@ankit-prgmr
Dec 24 2016 17:43
Anytime :)
Scott S
@Scooch
Dec 24 2016 17:43
will do @sorinr
Sorin Ruse
@sorinr
Dec 24 2016 17:45
@Scooch only if u want. but padding u give will ensure also some kind of a responsiveness for lower screens
James Moore
@James-N-M
Dec 24 2016 19:15
Hey guys
how do regex look in javascript
Trying to write one for characters &, <, >, " (double quote), and '
pat
@MostLow
Dec 24 2016 19:53
im trying to set an image as page backgroun, how do i go about doing that? when i use the url it doesnt work
Sorin Ruse
@sorinr
Dec 24 2016 19:55
@MostLow here some inspiration :)
pat
@MostLow
Dec 24 2016 19:56
@sorinr that is awesome, thank you...it looks very nice hoping i can create something as appealing
CamperBot
@camperbot
Dec 24 2016 19:56
mostlow sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1002 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 24 2016 19:59
@MostLow a bonus for Christmas gift :)
Ayobami
@purpose50
Dec 24 2016 20:22
Hi guys, i finished my weather App, check it out and review please?
http://codepen.io/purpose/full/WoBpWY
Sorin Ruse
@sorinr
Dec 24 2016 20:25
@purpose50 your position showing its lagos. never been there.
@purpose50 think its time to implement ur location service to pass it to the weather app
Jhawkm
@Jhawkm
Dec 24 2016 20:30
Are we supposed to make a tribute page about a random person?
Ayobami
@purpose50
Dec 24 2016 20:37
@sorinr okay thanks
CamperBot
@camperbot
Dec 24 2016 20:37
purpose50 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1003 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 24 2016 20:44
@Jhawkm u can pick any subject for your tribute page.
Ayobami
@purpose50
Dec 24 2016 20:50
@sorinr i think the user story saya to show the weather in my current location
*says
Sorin Ruse
@sorinr
Dec 24 2016 20:51
@purpose50 the user story says to show the user of the app (that will be me, in this case) the weather of his location
Ayobami
@purpose50
Dec 24 2016 20:54
@sorinr you are right will have to modify that
but how will id do that
Phillip Troutman
@troutman21
Dec 24 2016 20:55
When creating <div></div> tags im having trouble telling the computer what closing div tag is going to which opening tag
anyone have any advice
?
Ayobami
@purpose50
Dec 24 2016 20:55
cn you tell me how? any hint whatsoever @sorinr
how do i make it so the "lower" button doesnt carry the opacity portion of that class?
Brian
@BrianCodes33
Dec 24 2016 21:25
your black box is overriding your left-nav opacity

.left-nav{
  float:left;
/*   background-color:black; */
  border:none;
  font-color:black;
/*   opacity:1 !important; */
  color: black
}

.left-nav{
  float:left;
  background-color:transparent;
  border:none;
  color: white;
}
pat
@MostLow
Dec 24 2016 21:28
does anyone know how to take that square off of icons?
trying to put in fb and twitter icon but that box still shows around it
Pieter Stokkink
@forkerino
Dec 24 2016 21:41
@MostLow add this to the .h css:
  background: transparent; // makes the background of the button transparent
  border: 0; // removes border of the button
pat
@MostLow
Dec 24 2016 21:41
thank you much!
julienalexandre
@julienalexandre
Dec 24 2016 22:54
Hey guys any idea why my Facebook button is working but my GitHub and Twitter are not? http://codepen.io/julienalexandre/full/XNQKzx/
Thanks!