These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Dec 2016
lewis reynolds
@lreynl
Dec 21 2016 00:01
@jdc101214 You'll need to call a weather api. To do that, you'll need to get the user's location first. You'll learn about CORS and http vs https along the way. Also, $.getJSON() ...
Bakri
@POIbakri
Dec 21 2016 00:18
trying to include this in my header for my buttons
.button {
background-color: #708090;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
but its not coming uo
can anyone help?
Joshua
@jfc246
Dec 21 2016 00:21
who thinks Free Code Camp is awesome?
@POIbakri can you send me the link?
Jason Luboff
@JLuboff
Dec 21 2016 00:22
@POIbakri Are you trying to assign this to all button elements or are you assigning the button class to only the elements that you want affected?
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:32
I gotta problem with "size your images" lesson.....help please....I refreshed the page, retyped the script exactly where it goes and case sensitive and it will not run ????
and changed my browsers zoom to 100% like it told me to do so and I did
Jason Luboff
@JLuboff
Dec 21 2016 00:33
@MasterJackson Whats your code?
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:35
how could I show you a picture of it ?
I know there is way too, I just don't know how to do it ?
Jason Luboff
@JLuboff
Dec 21 2016 00:36
@MasterJackson Just copy and paste your code. You can use three `, hit shift enter for next line paste, shift enter again with three more
I don't know how to include a picture in the chat
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:38

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.smaller-image {
width: 100px;
}

.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Jason Luboff
@JLuboff
Dec 21 2016 00:39
@MasterJackson You need to include the class in your img element
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:40
@JLuboff .smaller-image {
width: 100px;
}
that's the code I gotta problems with
Jason Luboff
@JLuboff
Dec 21 2016 00:40
That portion is correct. You aren't applying the smaller-image class to your img though.
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:41
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
somewhere in this line of code you mean?
Jason Luboff
@JLuboff
Dec 21 2016 00:42
@MasterJackson No. In your image (img) element. You need to apply this class to your image, otherwise its not going to do anything
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:42
ohhhhhh I see it now .....okay
<img src right........
Jason Luboff
@JLuboff
Dec 21 2016 00:43
Yes, in there you need to add a class
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 00:45
yesss it worked thanks dude
Jason Luboff
@JLuboff
Dec 21 2016 00:45
:+1:
eugene002
@eugene002
Dec 21 2016 00:51
Hi all! Need help. How do i pass a text to URI with symbols like ;?&
Jason Luboff
@JLuboff
Dec 21 2016 00:52
@eugene002 As long as it's in quote "" it should work?
Tyler Moeller
@TylerMoeller
Dec 21 2016 00:54
@urketadic Yes, .hide() = display:none; with the one caveat that css will always load before your javascript, so if you're trying to avoid a Flash Of Unstyled Content (FOUC), in this case, use CSS
eugene002
@eugene002
Dec 21 2016 00:56
@JLuboff like what? I tried this: uri = '"' + text + '"' and it does not work
eugene002
@eugene002
Dec 21 2016 00:57
@JLuboff uri looks ok, but website does not receve part of text that goes after ; symbol
how can i convert symbols like ; into %3B?
Tyler Moeller
@TylerMoeller
Dec 21 2016 01:08
@eugene002 You'll want to read about encodeURIComponent() to do that: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
Jacob
@jdc101214
Dec 21 2016 01:16
@TylerMoeller Dont worry. Thankfully other people were there to help me.
eugene002
@eugene002
Dec 21 2016 01:26
@TylerMoeller thank you
CamperBot
@camperbot
Dec 21 2016 01:26
eugene002 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Jacob
@jdc101214
Dec 21 2016 02:10
How should I start this weather project????
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 02:31
hey @jdc101214 google up "nullschool weather globe" its realtime satellite technology of weather data......yup
@jdc101214 here it is https://earth.nullschool.net/
Zaurbek Zhakupov
@zzhakupov
Dec 21 2016 02:43
Hello guys can I have some React help?
Ken Haduch
@khaduch
Dec 21 2016 03:03
@ssgriffen - another place to look for help to decipher the data is to take your JSON output and plug it into this site: http://codebeautify.org/jsonviewer
Dustin Michael Jackson
@MasterJackson
Dec 21 2016 03:28
I finished html and css lessons in about 3 - 4 hours
yeaaaaaa
here I come bootstrap
Michael Bomholt
@bomholtm
Dec 21 2016 03:42
@bomholt
hey everyone please check the fixed version of my JS Calculator
https://codepen.io/bomholt/full/WGbVQA/
i wanted to add a DEL button that removes single characters on click and deletes everything while holding, but it proves to be very difficult because of all the functionalities i added (sin/cos/tan/...). should i still do it or move on to the next project?
Pramod Potdar
@ppmakeitcount
Dec 21 2016 04:11
"Twitchtv JSON API" : Can any one help me here? I am getting response from api, but the channel links that i get dont show anything. :worried:
Sorin Ruse
@sorinr
Dec 21 2016 04:15
@PP-MakeItCount can u post the pen link?
even i have created acc on twitch and got my own api key.
@sorinr
JackVizl
@JackVizl
Dec 21 2016 04:26
can someone please give me some help on the WikiViwer Project?
Cant figure a way to target the "snippet" element to display it
Ken Haduch
@khaduch
Dec 21 2016 04:29
@PP-MakeItCount - I can see that you are getting some return for the ESL_SC2 account information request?
Sorin Ruse
@sorinr
Dec 21 2016 04:29
@PP-MakeItCount it should be like example to get the response
Pramod Potdar
@ppmakeitcount
Dec 21 2016 04:30
@khaduch yes i am getting two links. but liks dont open. i.e when i manually open them it dosent show anything. @khaduch
Ken Haduch
@khaduch
Dec 21 2016 04:32
@PP-MakeItCount - I see a message "No client id specified" when I try to load one of those directly in a browser. Didn't they change to requiring an API key or something?
Pramod Potdar
@ppmakeitcount
Dec 21 2016 04:33
@sorinr okay thanks. so i was just looking at links instead of whole returned object.
CamperBot
@camperbot
Dec 21 2016 04:33
pp-makeitcount sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 985 | @sorinr |http://www.freecodecamp.com/sorinr
Ken Haduch
@khaduch
Dec 21 2016 04:33
@PP-MakeItCount - it looks like if I add your client id parameter to one of those, I then get a return for the request?
Pramod Potdar
@ppmakeitcount
Dec 21 2016 04:34
@khaduch i have included api key. i was getting whole reponse but i was just looking at part of it.
thanks
Ken Haduch
@khaduch
Dec 21 2016 04:34
@PP-MakeItCount - I mean if you take one of those links and post it like this: https://api.twitch.tv/kraken/channels/ESL_SC2?&client_id=523zdy4gq7ixa4tz6t5aap6pcc3nb4 with your client id, then you see response from that link request - I thought that you were having trouble with that?
Pramod Potdar
@ppmakeitcount
Dec 21 2016 04:35
@JackVizl hey on key up function you can grab all results from wiki and use .html() function to add it to your html code.
JackVizl
@JackVizl
Dec 21 2016 04:36
@PP-MakeItCount whats the difference between that and what ive done?
AntyElean
@AntyElean
Dec 21 2016 04:38
Hello! I am on the portfolio part (119) and am having issues with the navigation bar. Can anyone let me know how to make it stretch across to fit the whole page?
Holden Hartsoe
@hartsoeha
Dec 21 2016 04:39
Hey friends can anyone help me to align text to the left? I've googled and can't seem to get it right. I'm working on the "Build a Tribute Page" challenge.
AntyElean
@AntyElean
Dec 21 2016 04:41
blob
Holden Hartsoe
@hartsoeha
Dec 21 2016 04:43
@AntyElean this could be a wild guess but can you nest it in a <span> element?
Pramod Potdar
@ppmakeitcount
Dec 21 2016 04:44
$(document).ready(function(){

 $("#search").keyup(function(){
   $("#mySelector").html("");
  var api = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=";
  var searchTrem = $("#search").val();
   if(searchTrem == ""){
     $("#mySelector").html("");
   }
  //console.log(searchTrem);
  var cb = '&callback=JSON_CALLBACK';
  var page = 'https://en.wikipedia.org/?curid=';

  $.ajax({
  url: api+searchTrem+cb,
  dataType: "jsonp",
  success: function( data ){
  //console.log(data);
     var results = data.query.pages;
   //  console.log(results);
     for(var x in results){

      //console.log(results[x].title);
      var title = results[x].title;
      var extract = results[x].extract;
      var href = 'https://en.wikipedia.org/?curid='+results[x].pageid
      $("#mySelector").append("<a href='" + href + "'  target='_blank'> <blockquote><p>" + title + "</p> <footer>"+extract+"</footer></blockquote></a>" )
}

}


})
})


});
@JackVizl take look at this code. If it helps.
JackVizl
@JackVizl
Dec 21 2016 04:46
@PP-MakeItCount thank you very much
CamperBot
@camperbot
Dec 21 2016 04:46
jackvizl sends brownie points to @pp-makeitcount :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @pp-makeitcount |http://www.freecodecamp.com/pp-makeitcount
AntyElean
@AntyElean
Dec 21 2016 04:48
@hartsoeha any other ideas? I tried span
Coy Sanders
@coymeetsworld
Dec 21 2016 04:48
try setting width of the element to 100% @AntyElean
Holden Hartsoe
@hartsoeha
Dec 21 2016 04:52
@AntyElean hmmm you could try giving it the row and column class and then giving each one an equal column width?
AntyElean
@AntyElean
Dec 21 2016 04:53
blob
that is with the width at 100% @coymeetsworld @hartsoeha
Coy Sanders
@coymeetsworld
Dec 21 2016 04:54
can you give us the pen link @AntyElean? hard to say what it could be
Coy Sanders
@coymeetsworld
Dec 21 2016 04:56
just a tip @AntyElean, i would put the CSS inside the CSS pane
and the links can go in Settings -> HTML -> head section
to get all the list elements in a row don't use display block, that will break each of the items into its own line. You want to use display: inline
AntyElean
@AntyElean
Dec 21 2016 05:01
@coymeetsworld I changed it to inline and they started to stack on each other
Coy Sanders
@coymeetsworld
Dec 21 2016 05:01
for both li and li a style?
you can remove the display inline style for li a also
AntyElean
@AntyElean
Dec 21 2016 05:05
Changed but the same @coymeetsworld
Coy Sanders
@coymeetsworld
Dec 21 2016 05:06
really? i made that change and it looks ok
oh, remove float too
float will break to a new line also
AntyElean
@AntyElean
Dec 21 2016 05:07
So close!!! haha @coymeetsworld
Coy Sanders
@coymeetsworld
Dec 21 2016 05:07
works now @AntyElean ?
AntyElean
@AntyElean
Dec 21 2016 05:09
almost. I'm trying to make it reack all the way across. can you see what it looks like now? @coymeetsworld
Coy Sanders
@coymeetsworld
Dec 21 2016 05:10
yeah, well what do you want to span across?
probably not the buttons that wouldn't look that great being stretched like that
AntyElean
@AntyElean
Dec 21 2016 05:10
@coymeetsworld I was trying to make it a bar at the top instead of buttons
Coy Sanders
@coymeetsworld
Dec 21 2016 05:10
also have a few errors in your HTML
<ul class"topnav" id"myTopnav" >
that needs to be cleaned up, and you don't have styles for either of those you probably don't need them both right?
Michael Karpinski
@karpimpski
Dec 21 2016 05:11
is anybody familiar with font-awesome? I have a hover effect on my icons that increases the font size but it seems to grow from the top-right
AntyElean
@AntyElean
Dec 21 2016 05:12
no actually I forgot why that was there @coymeetsworld
Coy Sanders
@coymeetsworld
Dec 21 2016 05:13
hmm, well you can clean that up. Keep either/or but I'm guessing you don't need both. Then, create the style for it in CSS. You can give it a background-color and itll show a bar
AntyElean
@AntyElean
Dec 21 2016 05:16
@coymeetsworld thank you Soooo much I've been struggling for four hours lol
CamperBot
@camperbot
Dec 21 2016 05:16
antyelean sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1663 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Dec 21 2016 05:17
CSS is a pain lol @AntyElean
no problem, had to learn some stuff outside of FCC to do things
AntyElean
@AntyElean
Dec 21 2016 05:19
@coymeetsworld I want to spread it out and make it pretty but I dont want to get my butt kicked again haha
Coy Sanders
@coymeetsworld
Dec 21 2016 05:20
you can Fork your codepen if you want to experiment, which is kindof a backup. So then if you make some changes and it doesn't work and you don't know how to get back you can just go to the original one
AntyElean
@AntyElean
Dec 21 2016 05:21
@coymeetsworld thanks for that info!
CamperBot
@camperbot
Dec 21 2016 05:21
antyelean sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: antyelean already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Dec 21 2016 05:21
yeah its not great, better to use version control software like git but Codepen doesn't really have that
if you find yourself writing code locally on your computer instead of through Codepen you should look into git
or just do it the old fashioned way and copy you code and keep local backups of it on a notepad or something
Sorin Ruse
@sorinr
Dec 21 2016 05:29
@AntyElean you can also add in css body{margin: 0;} if you want to have no margin around navigation ul
Pramod Potdar
@ppmakeitcount
Dec 21 2016 05:34
this might be stupidest question which i am going to ask. How to make my image and text side by side and align them vertically at center. look at the code pen below. i googled a lot but not satisfied.
Sorin Ruse
@sorinr
Dec 21 2016 05:37
@AntyElean then in html where u have <center> that start a new section(about, portfolio, etc) u can add the id for that section in order to when you click a link on the menu will navigate to that section. something like <center id="portfolio">. these ids must correspond to the a href="#portfolio", etc. be aware that these matches are case sensitive. i mean if u have a href="About" your id shoud be "About" not "about". do not use href like href="#Fashion Portfolio" make it something like Fashion-Portfolio
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 21 2016 05:44
@PP-MakeItCount use flexbox or make a div and keep their margin-left and margin-right to auto
Anthony Contreras
@AmazeCPK
Dec 21 2016 05:55
Anyone familiar in node+vue?
Simranjit Singh
@sim3001
Dec 21 2016 06:21
can someone please help me with this. so im making a row of bootstrap thumbnails but if you go to the chrome dev tools and put the site in mobile view and click nexus 6p one of the thumbnails floats to the bottom how can i fix this the link is sim3001.github.io/portfolio
Sorin Ruse
@sorinr
Dec 21 2016 06:27
@sim3001 i would make col-xs-12 not col-xs-6
Simranjit Singh
@sim3001
Dec 21 2016 06:28
@sorinr i will do that i was just afraid it might be too many thumbnails to scroll for a xs device but i guess it will be fine
@sorinr i tried to use the clearfix class but i couldn't seem to get it to work
Sorin Ruse
@sorinr
Dec 21 2016 06:31
@sim3001 don't think clearfix is needed. col-xs-6 will make your imgs to look too small on mobile
@sim3001 and i would give some offset to the sections equal to the height of the navbar so when you "scroll" to that section the title will be entirely visible not going under the navbar
Simranjit Singh
@sim3001
Dec 21 2016 06:43
@sorinr yea i was wondering how to fix that what should i add ive tried adding height margin etc
Sorin Ruse
@sorinr
Dec 21 2016 06:45
@sim3001 try adding a padding-top: 40px to each section
Simranjit Singh
@sim3001
Dec 21 2016 06:50
@sorinr Thanks alot i've fixed it
CamperBot
@camperbot
Dec 21 2016 06:50
sim3001 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 986 | @sorinr |http://www.freecodecamp.com/sorinr
Simranjit Singh
@sim3001
Dec 21 2016 06:51
@sorinr didn't think to add padding
Sorin Ruse
@sorinr
Dec 21 2016 06:53
@sim3001 welcome
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 21 2016 06:58
could someone explain to me why clocking() function is not running after every 0.5 seconds .. https://github.com/Mr-Kumar-Abhishek/pomodoro-clock/blob/test/js/main.js
?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 21 2016 07:04
could someone explain to me why clocking() function is not running after every 0.5 seconds .. ? https://github.com/Mr-Kumar-Abhishek/pomodoro-clock/blob/test/js/main.js sometimes I get stuck with the easiest of problems :fire:
viktorioso
@viktorioso
Dec 21 2016 07:40
hey, im new here, my name is viktor :)
grantknaver
@grantknaver
Dec 21 2016 07:41
is anyone familiar with the TwitchTV JSON API challenge
how am I supposed to get the name and info for a offline channel
Sorin Ruse
@sorinr
Dec 21 2016 07:43
@grantknaver test for null when you make the call to the api and get a response
grantknaver
@grantknaver
Dec 21 2016 07:43
I understand that
and did tha
that
but, I cant pull any JSON data for the null value
I need to be able to access the url and name at least
there is my code
Satyamjay
@Satyamjay
Dec 21 2016 07:51
where to get quotes for random quote machine
aj-willi
@aj-willi
Dec 21 2016 07:52
maybe
Sorin Ruse
@sorinr
Dec 21 2016 07:55
@grantknaver your problem is here: for(var i = 0; i < channels.length; i++) use .each() function or .forEach(). the for loop will iterate an not wait for your api call response as its an asynchronous call
grantknaver
@grantknaver
Dec 21 2016 07:58
what arguments do I need to worry about? You are talking about the section right below url, right?
how do I deal with the channel index than revovling around a each
John Alcher
@alchermd
Dec 21 2016 08:17
Hey fellas, does any know how can I return the value from a $.getJSON call?
function checkIfActive(streamer) {
  var url = generateURL(streamer, "channels");

  $.getJSON(url, function(json){
    json.status != 404;
  });

}
I want to return json.status != 404 (i.e checkIfActive() returns a boolean)
grantknaver
@grantknaver
Dec 21 2016 08:26
anyone still awake?
$(document).ready(function(){
var open = false;

//mouseenter effects
$(".status").bind('mouseenter', function(){
  open = true;
  if(open == true){
  $(this).find(".text").css("display", "visibile");
  $(this).find(".text").addClass("textAppear");   
  $(this).addClass("animationExtend"); 
  }
});

$(".status").bind('mouseleave', function(){
  open = false;
  if(open == false){
  $(this).find(".text").css("display", "none");
  $(this).addClass("animationShrink"); 
  }
});
why wont this work more than once ?
Minoy
@minoy
Dec 21 2016 08:57
Hello!

Having trouble with a Javascript challenge -
Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The nextInLine function should then return the element that was removed.

This is my current code:
function nextInLine(arr, item) {
// Your code here

arr = arr.push(item);
console.log(arr[0]);
arr = arr.shift();

return item; // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

I am getting this error - TypeError: arr.shift is not a function

Any ideas anyone?

Clyde Lobo
@oppiniated
Dec 21 2016 09:24
@minoy arr.push returns the new length of the array, Here arr = arr.push(item); arr in now a number and not an array hence it does not have the shift function
Minoy
@minoy
Dec 21 2016 09:37
@oppiniated Hi Clyde, thanks... I got it. It is working now :)
CamperBot
@camperbot
Dec 21 2016 09:37
minoy sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @oppiniated |http://www.freecodecamp.com/oppiniated
Blaise
@Blaisebev
Dec 21 2016 10:44
Hi guys! Can someone please help me figure this problem out? Both my "Future Project" and "Get in Touch" sections are blue and I'm trying to figure out where I need a closing tag.. or maybe something else?
Any other feedback would be greatly appreciated, thanks!
Sorin Ruse
@sorinr
Dec 21 2016 10:56
@Blaisebev <a> tags by default have that behavior. if you need to style them create one or two classes in css and add to them
Blaise
@Blaisebev
Dec 21 2016 10:59
thank you @sorinr I removed the <a> tag from there because I don't have anything to show yet :)
CamperBot
@camperbot
Dec 21 2016 10:59
blaisebev sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 988 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 21 2016 11:01
@Blaisebev you can add them later if needed
Blaise
@Blaisebev
Dec 21 2016 11:03
awesome, thanks for the tip! @sorinr
CamperBot
@camperbot
Dec 21 2016 11:03
:warning: blaisebev already gave sorinr points
blaisebev sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Dec 21 2016 11:05
@Blaisebev :+1:
Tim Handy
@TimHandy
Dec 21 2016 11:45
Hi... has anyone done the React markdown previewer yet? If so, do I need to pass the markdown text (as the user types) up to the parent to be stored as state... and then the parent then passes the updated state to the display component as props to then be outputted to the screen? Or am I overthinking this?
ct201612
@ct201612
Dec 21 2016 12:50
somebody help,I'm stuck the project:Build a Personal Portfolio Webpage,=I was alreday finish the "nav" how to build the "home" part?
Sonja
@sonjaSch
Dec 21 2016 13:00
@sahilsunny your portfolio is soo cool :+1:
Leigh Hobson
@leighhobson89
Dec 21 2016 13:08
with only this html and css, can anyone tel me why i am already seeing the h2 element appear a lot smaller than it should...
<head>
</head>
<body>
  <div class = "container">
    <div class = "container title text-center col-xs-12"
         <h2>Quote Your Day!</h2>
  </div>

  </div>
body {
  background-color: black;
}

.title {
  background-color: white;
  border-radius: 5px;
}
i havent done anything yet and already its going wrong!
Sahil Sunny
@sahilsunny
Dec 21 2016 13:12
@sonjaSch thank you
CamperBot
@camperbot
Dec 21 2016 13:12
:cookie: 246 | @sonjasch |http://www.freecodecamp.com/sonjasch
sahilsunny sends brownie points to @sonjasch :sparkles: :thumbsup: :sparkles:
ct201612
@ct201612
Dec 21 2016 13:12
goodnight
Manish Giri
@Manish-Giri
Dec 21 2016 13:20
@leighhobson89 why do you have a col-xs-12 class without a row?
Leigh Hobson
@leighhobson89
Dec 21 2016 13:26
i pasted it wrong, sorry!!
also the problem was just a missing ">" i will take more cvare in future, cheers!
PankajKaushik78
@PankajKaushik78
Dec 21 2016 13:54
function nextInLine(arr, item) {
  // Your code here


  testArr=arr.shift();
  return nextInLine([], 1);  // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];
testArr.push(6);

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The nextInLine function should then return the element that was removed.

ERROR????

HELP ME
CamperBot
@camperbot
Dec 21 2016 13:54

:point_right: readme [wiki]

Depecrated Wiki!

This repo serves as an archive for the wiki and a place to report issues for our current wiki located in our forum!

Our open source community's Wiki focuses on answering your questions about learning to code and getting a coding job. We also cover in detail our:

  • Curriculum
  • Other Programming Languages
  • Local Group Communities
  • Nonprofit Projects and much more

:pencil: read more about readme on the FCC Wiki

Clyde Lobo
@oppiniated
Dec 21 2016 13:58
@PankajKaushik78 read the problem statement properly. Add the number to the end of the array, you have not done that
PankajKaushik78
@PankajKaushik78
Dec 21 2016 13:59
let me try
Abhijit
@blackbirdabhi
Dec 21 2016 15:29
hey guys, i can't get my button to work with css styling in codepen. I have added links for bootstrap as well. Where am I going wrong? Any help would be appreciated :smile:
http://codepen.io/blackbirdabhi/pen/KNEYjK
Tom
@moT01
Dec 21 2016 15:31
@blackbirdabhi your styling whatever has a class of button
Sorin Ruse
@sorinr
Dec 21 2016 15:32
@blackbirdabhi <button class="btn btn-primary"
@blackbirdabhi more info here: http://getbootstrap.com/css/#buttons
Abhijit
@blackbirdabhi
Dec 21 2016 15:38
@moT01 @sorinr Thanks!It seemed I just needed to remove the dot.before button in the CSS panel. I am able to style my button now, except I can't get it to align to center position. My code:
button
{
background-color: #4CAF50; / Green /
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
CamperBot
@camperbot
Dec 21 2016 15:38
blackbirdabhi sends brownie points to @mot01 and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 989 | @sorinr |http://www.freecodecamp.com/sorinr
Tom
@moT01
Dec 21 2016 15:40
@blackbirdabhi make your left and right margin: auto and display: block
Abhijit
@blackbirdabhi
Dec 21 2016 15:44
Worked! Thanks. Out of curiosity, if i did not add the display attribute, is there an alternative method to align your buttons?
Tom
@moT01
Dec 21 2016 15:53
there might be a bootstrap class for that
i think the inline keeps it kind of floating left, cause theres nothing there pushing it over, ...not sure on that
Sorin Ruse
@sorinr
Dec 21 2016 16:03
@blackbirdabhi using flexbox you can style it like: example
Tyler Moeller
@TylerMoeller
Dec 21 2016 16:24
@blackbirdabhi Or just use text-align:center on the container:
.wrapper {
  text-align: center;
}

button {
  background-color: #4CAF50;  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
}
@grantknaver Not sure if you found a solution - it looks like you aren't removing classes after adding them, so once you mouseenter and mouseleave, the animationExtend and animationShrink classes are left on the element. Try this instead:
  //mouseenter effects
  $('.status').on('mouseenter', function () {
    $(this).removeClass('animationShrink').addClass('animationExtend')
           .find('.text').addClass('textAppear');
  });

  //mouseleave effects
  $('.status').on('mouseleave', function () {
    $(this).removeClass('animationExtend').addClass('animationShrink')
           .find('.text').removeClass('textAppear');
  });
I'm struggling to connect my links to my buttons
been correcting for hours
iwould appreciate it
Emily Ann
@emilyaringoen
Dec 21 2016 16:32
Hey! I'm having trouble toggling between °F/°C in my Local Weather project. Anyone have advice for me?
Tyler Moeller
@TylerMoeller
Dec 21 2016 16:34
@POIbakri Try using the built in navbar provided with bootstrap: https://getbootstrap.com/components/#navbar
@emilyaringoen Lots of ways to do it - can you share your code so we can see what isn't working for you?
Emily Ann
@emilyaringoen
Dec 21 2016 16:37
@TylerMoeller This is my codepen http://codepen.io/eringoen/pen/gLBjLK
or my code that I wrote to toggle ```
Tyler Moeller
@TylerMoeller
Dec 21 2016 16:42
@emilyaringoen Since it looks like you are familiar with $(this).data(), you could write both the fahrenheit and celsius values to the #temp element and just grab them from there. For example: <div id="temp" data-fahrenheit="32" data-celsius="0">32</div>
Then just check if the .text() in the element is equal to data-fahrenheit, show the data-celsius value, else show data-fahrenheit.
Emily Ann
@emilyaringoen
Dec 21 2016 16:47
@TylerMoeller I'll try that. Do you think I am making this more complicated than it needs to be?
Tyler Moeller
@TylerMoeller
Dec 21 2016 16:49
@emilyaringoen Perhaps by storing both the C and F values in an object and then creating a special attribute to tell you if it's currently F or C, it makes it a little more complicated than needed. There are lots of approaches though :)
Emily Ann
@emilyaringoen
Dec 21 2016 16:54
@TylerMoeller thanks! I'll try some other methods.
CamperBot
@camperbot
Dec 21 2016 16:54
emilyaringoen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1183 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 21 2016 16:58
No problem
Marko Rajkovic
@marko88ks
Dec 21 2016 17:08
I'm working responsive for mobile width, how to replace two div`s (the one who is at the top , to swap places with the one at the bottom)??
Screenshot_2.png
Untitled-2.jpg
like this
on this picture
pls help
Francois van Leersum
@Blockshot12
Dec 21 2016 17:25
@marko88ks The easiest way to do this is to use css float: right;
Marko Rajkovic
@marko88ks
Dec 21 2016 17:26
@Blockshot12 on one div to do float: right; ...??
Francois van Leersum
@Blockshot12
Dec 21 2016 17:26
@marko88ks
<section>
  <article class=“one”></article>
  <article class=“two”></article>
</section>
.one, .two {
  display: block;
  float:right;
  width: 50%;
}
Marko Rajkovic
@marko88ks
Dec 21 2016 17:30
@Blockshot12 ok , now I'm going to try .. thanks a lot man !
CamperBot
@camperbot
Dec 21 2016 17:30
marko88ks sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 216 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Francois van Leersum
@Blockshot12
Dec 21 2016 17:30
the code is not complete but these are the basics.
Marko Rajkovic
@marko88ks
Dec 21 2016 17:30
ok , i undesrtand
Francois van Leersum
@Blockshot12
Dec 21 2016 17:31
Ok
Niffyy
@NifemiOyebanji
Dec 21 2016 17:32

hey all. I am trying to get an image to be stretched across my landing page ( for the portfolio) but its just appearing as an image to one side of the page with a white space. any ideas on how to fix this?
HTML:

<div class="container col-xs-12" id="panel1" >
</div>

CSS:

panel1 {background-image:url('http://www.weebly.com/uploads/1/_/1/72643_orig.jpg');

background-repeat: no-repeat;
height: 700px;

}

Tyler Moeller
@TylerMoeller
Dec 21 2016 17:37
@NifemiOyebanji background-size: cover; is one way to do it. There are other ways as well, in case you are looking for a specific sizing: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Niffyy
@NifemiOyebanji
Dec 21 2016 17:39
@TylerMoeller thank you! :)
CamperBot
@camperbot
Dec 21 2016 17:39
nifemioyebanji sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1184 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Pieter Stokkink
@forkerino
Dec 21 2016 17:48
Ok, I'm reworking some of my projects and was now on the pomodoro clock thingy. You can find my pen here: https://s.codepen.io/forkerino/pen/MbXOvv
Somehow I cannot get the timer to center. I'm completely bored with bootstrap by now, but am kindof locked in (in the sense that I don't want to rewrite everything). I've tried to add the class text-center and also center-block, but neither worked. I've tried adding other css styling like margin:auto; too, but can't get it to work. Any ideas?
Paulo Kinopk
@pkinopk
Dec 21 2016 17:55
Hey guys, how could I make this for loop using jQuery?
var items = []; for (var i = 0; i < data.response.docs.length; i++) items.push("<li class='article'><a href=" + data.response.docs[i].web_url + ">" + data.response.docs[i].headline.main + "</a><p>" + data.response.docs[i].lead_paragraph + "</p></li>");
Bakri
@POIbakri
Dec 21 2016 18:03
I've been using <br \> loads of times make large spaces between my headings and pages is there another way?
Tyler Moeller
@TylerMoeller
Dec 21 2016 18:12
@forkerino It's aligned left to the col-xs-8 and offset by 2, which is why it is left of center. Close the previous row, take it out of the column and put it inside its own row. Then you can use center-block to center it. Basically, replace line 26 with:
  </div>
  <div class="row">
    <div id="pomodoroclock" class="center-block">
      <span id="message">work!</span>
      <p id="clock"></p>
      <span class="glyphicon glyphicon-play playpause"></span>
    </div>
  </div>
@pkinopk Not sure I understand why you want to loop with jQuery instead of the for loop you have for pushing to an array, but you can use $.each to iterate through an object, as you are doing with your for loop: http://api.jquery.com/jquery.each/
@POIbakri Use <p> or margins in your CSS instead of <br> - the <br> tag is not meant for creating new lines: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Niffyy
@NifemiOyebanji
Dec 21 2016 18:25
I have added a background filter to an image to reduce its brightness. Is there a way to stop this being applied to the text that goes over the image ?
Sorin Ruse
@sorinr
Dec 21 2016 18:38
@forkerino add to
#pomodoroclock {
  margin-left: 50%;
  transform: translate(-50%);
Pieter Stokkink
@forkerino
Dec 21 2016 18:45
@TylerMoeller Thanks, that is helpful. I started earlier today with a well-centered pomodoro clock and indeed moved some elements around, which caused the pomodoro to be within the same row as the other elements. I did not know yet this prevented it from being centered. Your code did the trick.
CamperBot
@camperbot
Dec 21 2016 18:45
forkerino sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Pieter Stokkink
@forkerino
Dec 21 2016 18:46
@sorinr thanks for your reply, but this didn't work. I tried Tyler's approach posted just above and that worked.
CamperBot
@camperbot
Dec 21 2016 18:46
:cookie: 990 | @sorinr |http://www.freecodecamp.com/sorinr
forkerino sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Dec 21 2016 18:48
@forkerino is this example not centering the way u want?
Pieter Stokkink
@forkerino
Dec 21 2016 18:51
@sorinr actually yes. That is peculiar, as I just copy/pasted your code into my css.
Perhaps the server was lagging a bit when I tested it. Now it works as well. Thanks!
Tyler Moeller
@TylerMoeller
Dec 21 2016 18:58
With that approach, watch out for browser compatibility - use the full notation and vendor prefixes:
  margin-left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
Sorin Ruse
@sorinr
Dec 21 2016 18:59
@forkerino as u r using bootstrap the i would use @TylerMoeller solution coz its just what the framework recommends. @TylerMoeller yep. u r rght about the above
Pieter Stokkink
@forkerino
Dec 21 2016 19:01
@TylerMoeller @sorinr Okay, good to know.
Tyler Moeller
@TylerMoeller
Dec 21 2016 19:26
@NifemiOyebanji It's a little complicated, but possible with another div and some css, see this approach for a solution: http://stackoverflow.com/a/7241440
Ende
@LeForteXL
Dec 21 2016 20:13
I just read about flexbox, anyone have some relatively good experience with it?
Marianissimus
@Marianissimus
Dec 21 2016 20:15
@AlvinII we're having a lots of debates on flexbox. beware: it's not supported on ie - 10, maybe? - or other older ie versions, check on caniuse. also, the workaround / degradation for ie is pretty complicated to non-existent
Ende
@LeForteXL
Dec 21 2016 20:27
hmm
allenlswain
@allenlswain
Dec 21 2016 20:31
hello
Niffyy
@NifemiOyebanji
Dec 21 2016 20:37
@TylerMoeller thanks. I ended up getting around it by separating the background and the text into separate divs and using absolute positioning to put the text where i wanted.
CamperBot
@camperbot
Dec 21 2016 20:37
nifemioyebanji sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Jerry Purvis
@MessiaHack
Dec 21 2016 21:09
what's the difference between section tags and div tags?
Jerry Purvis
@MessiaHack
Dec 21 2016 21:17
didn't really answer my question. Just sounds like a semantics. They both function the same apparently
Ende
@LeForteXL
Dec 21 2016 21:18
just giving you the resources that are out there to answer for yourself :)
Jerry Purvis
@MessiaHack
Dec 21 2016 21:20
thanks @AlvinII
CamperBot
@camperbot
Dec 21 2016 21:20
messiahack sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @alvinii |http://www.freecodecamp.com/alvinii
Simon Cordova
@gbsimon87
Dec 21 2016 21:29
@MessiaHack
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. whereas: The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.
Jerry Purvis
@MessiaHack
Dec 21 2016 21:35
@gbsimon87 I can do the same thing with the section tag that I can do with a div tag though
and vice versa
Simon Cordova
@gbsimon87
Dec 21 2016 21:38
technically, but not semantically

it's a new html5 element, just like <nav> for example...

http://www.w3schools.com/html/html5_new_elements.asp

Jerry Purvis
@MessiaHack
Dec 21 2016 21:39
okay? so where would I use a section tag that I wouldn't use a div tag? It just seems a matter of preference
Ende
@LeForteXL
Dec 21 2016 21:45
go here, search for the elements to help understanding : http://www.w3.org/2009/cheatsheet/
Joshua
@jfc246
Dec 21 2016 21:52
Shivank Sharma
@shivanksharma91
Dec 21 2016 22:17
hi guys, anyone knows how to get the events effects as in this page? http://sauce.pimmey.com/index.fixed-nav.green.html#events
Samir Sakanovic
@SagiSan
Dec 21 2016 22:18
anyone here good at angular2 ?
Jaynil Patel
@jaynilpatel97
Dec 21 2016 22:33
hello guys , please help me create a static nav menu bar (about,portfolio,contact) for my portfolio http://codepen.io/jaynilpatel97/full/jVJrQp/
Leigh Hobson
@leighhobson89
Dec 21 2016 22:38
i have a problem - i have called in a random id from a json at a quote website endpoint - it displays it in a box which is all well and good, but when i click a button, i want it to pull that text and save it in a variable? how to do it? this is what im trying, but im getting "undefined undefined" in the variables value:
var randomQuote = document.getElementById('quote-text').value + " " + document.getElementById('author').value;
Jerry Purvis
@MessiaHack
Dec 21 2016 22:40

http://codepen.io/MessiaHack/pen/qqvPbx

trying to figure out why my day columns are not fitting within the container. any ideas?

Tyler Moeller
@TylerMoeller
Dec 21 2016 22:40
@MessiaHack There are lots of differences between <div> and <section>. Too many to list here in chat. At the highest level, a <section> tag contains a section of a document. Use <divs> for styling portions within each <section>
The detailed specs on each are at:
Jerry Purvis
@MessiaHack
Dec 21 2016 22:41
or why my top section, that has the name, weather icon, and today's temperature does not extend the full width of the container
that's if I add padding
Tyler Moeller
@TylerMoeller
Dec 21 2016 22:45
@MessiaHack A row is 30px more narrow than it's container, so 100/7 = 14.28% is not going to fit inside the row, if that makes sense
That's why I only give a 6-day forecast here :) it was just easier to do without additional javascript: https://s.codepen.io/TylerMoeller/pen/woRygW
Jerry Purvis
@MessiaHack
Dec 21 2016 22:52
that looks nice! thanks for the tip @TylerMoeller
CamperBot
@camperbot
Dec 21 2016 22:52
messiahack sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Shivank Sharma
@shivanksharma91
Dec 21 2016 22:53
hi guys, anyone knows how to get the events effects as in this page? http://sauce.pimmey.com/index.fixed-nav.green.html#events
Tyler Moeller
@TylerMoeller
Dec 21 2016 22:55
@shivanksharma91 It appears to be a customization of the materialbox plugin: http://materializecss.com/media.html#materialbox
John S Thompson
@UncleJohn418
Dec 21 2016 22:56
@Mr-Kumar-Abhishek you will find the CSS code here:http://meyerweb.com/eric/tools/css/reset/
Shivank Sharma
@shivanksharma91
Dec 21 2016 22:56
@TylerMoeller got it, its using stylemagic http://scrollmagic.io/examples/basic/section_wipes_natural.html
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 21 2016 22:57
@UncleJhon418 already got it from a CDN :)
John S Thompson
@UncleJohn418
Dec 21 2016 23:08
@Mr-Kumar-Abhishek Good, I hope it helps.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 21 2016 23:09
@UncleJhon418 it did its already in my boilerplate
Merryl
@MerrylArok
Dec 21 2016 23:13

@MerrylArok
Hello im trying to access "city" in location ->pws->stations->city from this json

https://api.wunderground.com/api/e2556316b967f129/geolookup/conditions/q/51.1213771,-114.0944811.json

so far this is what i have
var location = parsed_json.location.pws.station[0].city;
am i doing something wrong here?

Jeremy Barbe
@eemebarbe
Dec 21 2016 23:20
anyone good with react-router?
Tyler Moeller
@TylerMoeller
Dec 21 2016 23:22
@MerrylArok If you console.log(parsed_json) and look at it in your browser's developer console (Ctrl+Shift+J), you can navigate through the JSON, and then right-click -> copy property path. Looks like you want parsed_json.location.nearby_weather_stations.pws.station["0"].city
Merryl
@MerrylArok
Dec 21 2016 23:26
@TylerMoeller ah man you are a lifesaver. I had no idea I was skipping a directory and the tip was super helpful
@TylerMoeller THANKS
CamperBot
@camperbot
Dec 21 2016 23:26
merrylarok sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1188 | @tylermoeller |http://www.freecodecamp.com/tylermoeller