These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Apr 2016
Bruce Young
@mutantspore
Apr 26 2016 00:00
@GregatGit can we see?
this part is underlined .getCurrentPosition(function (position) {
here is the warning I get - getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
Matthew Bailin
@mdbailin
Apr 26 2016 00:05
Hi everyone, I have a question related to the Wikipedia API
I can make the initial API call and display the first ten hits on wikipedia (in my example, for facebook), but I am having trouble updating the display after typing a new search in my form
Here is the code I have so far
$(document).ready(function(){ 

 var nameField;
 var name;
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=Facebook&callback=?", function(json) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+json.query.search[i].title+">"+json.query.search[i].title+"</a><br> <p> "+json.query.search[i].snippet+"</p>");
    }
    });

function getPageName() {
nameField = document.getElementById('nameField').value;
name = nameField;
}

$("#subButton").on("click", function(){
$("#wikiInfo").html('');
getPageName();
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch="+name+"&callback=?", function(data) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+data.query.search[i].title+">"+data.query.search[i].title+"</a><br> <p> "+data.query.search[i].snippet+"</p>");
    }

  });
});

});
Bruce Young
@mutantspore
Apr 26 2016 00:09
@GregatGit not sure.. that message has been coming up for Chrome forever but it still usually works
Greg Duncan
@GregatGit
Apr 26 2016 00:12
@mutantspore Thanks for looking, Bruce. The page still works on other browsers so I'll fix it later.
CamperBot
@camperbot
Apr 26 2016 00:12
gregatgit sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1451 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 26 2016 00:12
@GregatGit yes it worked in Safari ok
Greg Duncan
@GregatGit
Apr 26 2016 00:13
Does is work in your chrome?
I only updated yesterday and then the issue came up
Bruce Young
@mutantspore
Apr 26 2016 00:13
no.. but I also get this strange message
'//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.
from code school_devtools.js
John Knotts
@jhnnyk
Apr 26 2016 00:15
hi all,
i'm just starting on the Random Quote Generator project... what are people using for the quotes. Are we expected to write our own quotes in a JSON file? or is there an external source someone would recommend?
Greg Duncan
@GregatGit
Apr 26 2016 00:20
@jhnnyk I would recommend you start with an array of quotes, then once that works use an api
Andrew Schmidthuber
@calicode
Apr 26 2016 00:24
get it working with array then go to an api for practice on the next challenges which are all api based
just google quote api
exactly what @GregatGit just said pretty much lol
John Knotts
@jhnnyk
Apr 26 2016 00:26
@GregatGit @calicode OK, thx... seems like I could go straight for a JSON file, but I haven't tried working with external files via CodePen
CamperBot
@camperbot
Apr 26 2016 00:26
jhnnyk sends brownie points to @gregatgit and @calicode :sparkles: :thumbsup: :sparkles:
:star: 430 | @gregatgit | http://www.freecodecamp.com/gregatgit
:star: 368 | @calicode | http://www.freecodecamp.com/calicode
Matthew Bailin
@mdbailin
Apr 26 2016 00:28
@mdbailin
Hi everyone, I have a question related to the Wikipedia API
I can make the initial API call and display the first ten hits on wikipedia (in my example, for facebook), but I am having trouble updating the display after typing a new search in my form
Here is the code I have so far
$(document).ready(function(){ 

 var nameField;
 var name;
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=Facebook&callback=?", function(json) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+json.query.search[i].title+">"+json.query.search[i].title+"</a><br> <p> "+json.query.search[i].snippet+"</p>");
    }
    });

function getPageName() {
nameField = document.getElementById('nameField').value;
name = nameField;
}

$("#subButton").on("click", function(){
$("#wikiInfo").html('');
getPageName();
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch="+name+"&callback=?", function(data) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+data.query.search[i].title+">"+data.query.search[i].title+"</a><br> <p> "+data.query.search[i].snippet+"</p>");
    }

  });
});

});
Andrew Schmidthuber
@calicode
Apr 26 2016 00:30
if you console log out the data.query.search[i].title does it show up correctly? figure out if its an api problem or a jquery
jalley3
@jalley3
Apr 26 2016 00:33
@mutantspore yea i need all the brackets, as i said, the problem has to be in the way i am making my html tag on like line 46 or w/e
because the two console.out statements that surround it, work fine
Matthew Bailin
@mdbailin
Apr 26 2016 00:35
@calicode Hmm it's odd because nothing comes up in the console after I click the button
Andrew Schmidthuber
@calicode
Apr 26 2016 00:48
@mdbailin start commenting out pieces of that click handler until it works. Something is stopping it before it gets to getjson i think. I'm tried and can't see it right now
Matthew Bailin
@mdbailin
Apr 26 2016 00:53
even when the next API call is commented out, the page still displays the first API call
very strange
does anyone know how to pause an API
max77p
@max77p
Apr 26 2016 00:55
hi can someone tell me how best to add "clouds" or "sun" in my weather api?
in this you can see this little cloud animation at the bottom of the temp that is displayed
MikeBeers
@MikeBeers
Apr 26 2016 00:55
working on the calc app. I am trying to create click listener. From listener use a switch statement to display the pushed button. Not quite sure how to grab ID from the switch statement.
$(".target").click(function(id) {
    var number;
 switch(number) {
         case "one":
             alert("one");

         case $("#two"):
         $('#input').val($('#input').val()+2);
 }
    });
vivienneme
@vivienneme
Apr 26 2016 01:08
Hi all! I'm working on my portfolio page, and I want to add three boxes of background color with text: one about me, one to house icons for future projects, and one for contact information. I can't figure out how to create containers, except the one I have already. Can anyone help me with this? (Be kind. I'm new to coding and it's been tough!) http://codepen.io/vivenneme/pen/wGjqdP
Charlotte N.
@clnquacky
Apr 26 2016 01:14
@mdbailin I am having a similar problem. I want to clear the search field and reset the search button so it will do a clean search... http://codepen.io/clnquacky/pen/zqLKVQ?editors=1010
Christina
@cgraham74
Apr 26 2016 01:14
@vivienneme `<div class ="container"> </div>
Charlotte N.
@clnquacky
Apr 26 2016 01:15
I am wondering if I can/should create a second function to clear and reset the search field. Just nto sure how to go about getting it to do a second clean search. I am open to some suggestions
Christina
@cgraham74
Apr 26 2016 01:15
@vivienneme inbetween <div class="container"> Put your new stuff in here </div> :)
vivienneme
@vivienneme
Apr 26 2016 01:16
@cgraham74 Can I create container1, container2 and container3 in CSS, in order to designate a unique color to each one? Thanks!
CamperBot
@camperbot
Apr 26 2016 01:16
vivienneme sends brownie points to @cgraham74 :sparkles: :thumbsup: :sparkles:
:star: 297 | @cgraham74 | http://www.freecodecamp.com/cgraham74
Candice
@smrtsmrf
Apr 26 2016 01:17
I have an if statement that I want to check constantly in my javascript file. ideas?
Christina
@cgraham74
Apr 26 2016 01:18
@vivienneme just give the div's an id. and then in the css call the div's id and give it the values you want (the style) like this. <div class="container" id="myPrettyBlueBox">
@vivienneme then in the css section #myPrettyBlueBox { your style stuff }
vivienneme
@vivienneme
Apr 26 2016 01:22
@cgraham74 Thank you!
CamperBot
@camperbot
Apr 26 2016 01:22
vivienneme sends brownie points to @cgraham74 :sparkles: :thumbsup: :sparkles:
:warning: vivienneme already gave cgraham74 points
Matthew Bailin
@mdbailin
Apr 26 2016 01:42
@clnquacky Do you have anything written to clear the divs? Also, I noticed your button doesn't work after the first press
Matthew Bailin
@mdbailin
Apr 26 2016 01:47
@clnquacky I definitely would write a function to do this...the trouble is that I don't understand why own clear function isn't working
What's weird too is that the function actually did work in a previous challenge...and now it doesn't
max77p
@max77p
Apr 26 2016 01:51
thanks @GregatGit for the help!
CamperBot
@camperbot
Apr 26 2016 01:51
max77p sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:star: 431 | @gregatgit | http://www.freecodecamp.com/gregatgit
vivienneme
@vivienneme
Apr 26 2016 01:54
@cgraham74 Can I bug you one more time? I've styled, labeled and IDed the containers, but only the first one shows up. Any ideas? http://codepen.io/vivenneme/pen/wGjqdP
Christina
@cgraham74
Apr 26 2016 01:55
@vivienneme I can see the text. It's white like the background
vivienneme
@vivienneme
Apr 26 2016 01:55
:)
Thanks.
Christina
@cgraham74
Apr 26 2016 01:56
@vivienneme Welcome, just change color: to something easier to see lol
Brandon Lee
@brandonlee781
Apr 26 2016 01:56
@vivienneme You don't need to include body tags in codepen, it's added for you. And if you click the gear icon in the top right you can add the link tag to the popup box instead of the HTML section.
Christina
@cgraham74
Apr 26 2016 01:57
@vivienneme With containers, They are empty until you fill them with information . So if you want to see how they look. Just type some nonsense as a place holder to fill it. :)
Brandon Lee
@brandonlee781
Apr 26 2016 01:59
So it's really not a problem because I think I've figured out a workaround, but I don't understand why it functions this way. In my Pomodoro Clock I have a setinterval which I've gotten to pause and retain it's value. But when I restart it, for some reason it jumps down 3 seconds unless I add 1 second when I pause it. Can anyone tell me why? http://codepen.io/brandonlee781/pen/qZxaKj?editors=1010
Matthew Bailin
@mdbailin
Apr 26 2016 02:00
Hi everyone, I have a question related to the Wikipedia API
I can make the initial API call and display the first ten hits on wikipedia (in my example, for facebook), but I am having trouble updating the display after typing a new search in my form
Here is the code I have so far
$(document).ready(function(){ 

 var name = "Facebook";
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch="+name+"&callback=?", function(json) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+json.query.search[i].title+">"+json.query.search[i].title+"</a><br> <p> "+json.query.search[i].snippet+"</p>");
    }
    });

function getPageName() {
var nameField = document.getElementById('nameField').value;
name = nameField;
}

$("#subButton").on("click", function(){
$("#wikiInfo").html('');
name="facebook";
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch="+name+"&callback=?", function(data) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+data.query.search[i].title+">"+data.query.search[i].title+"</a><br> <p> "+data.query.search[i].snippet+"</p>");
   console.log(name);
    }

  });
});

});
vivienneme
@vivienneme
Apr 26 2016 02:01
@cgraham74 Great. Thanks! @brandonlee781 Thank you! I'm brand new to this, so I appreciate the pointers.
CamperBot
@camperbot
Apr 26 2016 02:01
vivienneme sends brownie points to @cgraham74 and @brandonlee781 :sparkles: :thumbsup: :sparkles:
:warning: vivienneme already gave cgraham74 points
:star: 375 | @brandonlee781 | http://www.freecodecamp.com/brandonlee781
Christina
@cgraham74
Apr 26 2016 02:01
@vivienneme You're welcome :)
Stephen James
@sjames1958gm
Apr 26 2016 02:02
@brandonlee781 Could you be starting more than one timer?
John Sevilla
@jsevilla274
Apr 26 2016 02:02
is it better to assign a variable to a jquery dom object if you deal with it constantly or is it more optimal to just keep calling the dom object?
Brandon Lee
@brandonlee781
Apr 26 2016 02:03
@sjames1958gm Technically yes, but it's counting down a value and that value should stop when I press pause. That loss of 3 seconds is just odd. I don't know why it's that specific amount.
Salomon May
@sollymay
Apr 26 2016 02:05
guys, so when I use my code in codepen it is not working, but then if i use it anywere else it works. how can I link the JS tab to the html tab in codeine?
codepen?
Stephen James
@sjames1958gm
Apr 26 2016 02:06
@sollymay Are you seeing errors in your devtools console?
@brandonlee781 Could you be getting an extra -- because you have two timers running?
Brandon Lee
@brandonlee781
Apr 26 2016 02:07
@sjames1958gm I'm not sure. I do know, it doesn't matter how many times I switch between pause and play, if I unpause it it drops 3 seconds immediately.
Salomon May
@sollymay
Apr 26 2016 02:08
@sjames1958gm I dont see any errors
Greg Duncan
@GregatGit
Apr 26 2016 02:08
@mdbailin When I have done mine - I just built the all html and replaced whatever happens to be in there. First time there is nothing but second time it replaces the old html with the new html
Greg Duncan
@GregatGit
Apr 26 2016 02:10
@mdbailin so this is the line that repaces everything $('#theResult').html(myHtml);
Matthew Bailin
@mdbailin
Apr 26 2016 02:10
@GregatGit what should "myHtml" be?
Should that be new code?
Greg Duncan
@GregatGit
Apr 26 2016 02:12
@mdbailin How did you initally add your html with wiki info?
Matthew Bailin
@mdbailin
Apr 26 2016 02:13
 var name = "Facebook";
  $.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch="+name+"&callback=?", function(json) { 
    for(var i=0;i<=9;i++){
    $("#wikiInfo").append("<a href=https://en.wikipedia.org/wiki/"+json.query.search[i].title+">"+json.query.search[i].title+"</a><br> <p> "+json.query.search[i].snippet+"</p>");
    }
    });
That function initially displays my api call inside the #wikiInfo div
What I've realized too is that I don't think the button can change the "name" variable on click but won't change or append the html
Greg Duncan
@GregatGit
Apr 26 2016 02:15
can you put up your pen
Stephen James
@sjames1958gm
Apr 26 2016 02:15
@brandonlee781 Since you have two timers running when you pause you get two minus before they stop, but they don't output when you start you get one more that's three. I stuck your counter update in the if (playing == false) and you see it count down twice before actually pausing.
Brandon Lee
@brandonlee781
Apr 26 2016 02:16
@sjames1958gm Interesting. Thank you.
CamperBot
@camperbot
Apr 26 2016 02:16
brandonlee781 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 808 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Candice
@smrtsmrf
Apr 26 2016 02:18

tricky regex problem. I’m so close. I’m trying to match sin, cos, and tan, but not asin, acos, atan. here’s what I have

str = 'cos(5)asin(2)tan(2)cos(2)’
str.replace(/[^a](cos|tan|sin)\(([\d]+)/g,Math.$1($2))

this isn’t matching the first cos. help?

Greg Duncan
@GregatGit
Apr 26 2016 02:18
@mdbailin It keeps looking up calculus
Matthew Bailin
@mdbailin
Apr 26 2016 02:18
Yep, that's the problem...
It looks up Calculus even if there's nothing in the search bar
Stephen James
@sjames1958gm
Apr 26 2016 02:20
@smrtsmrf [^a] has to match at least one char
@smrtsmrf Maybe [^a]?
Candice
@smrtsmrf
Apr 26 2016 02:21
@sjames1958gm that grabs the first cos, but then it grabs the sin in asin and i don’t want that
Stephen James
@sjames1958gm
Apr 26 2016 02:21
@brandonlee781 Your addition of ++ reverses that - you only didn't see it until you unpaused because you didn't update the display on pause.
@smrtsmrf :(
Greg Duncan
@GregatGit
Apr 26 2016 02:23
@mdbailin after I did the wiki api call - I built a div for each of the enteries and kept adding it to a var called myHtml. Then when all the entries were done I added the myHtml to the hmtl with jQuery $('#theResult').html(myHtml); then when I did another wiki call myHtml was reset and I did the same again
Matthew Bailin
@mdbailin
Apr 26 2016 02:24
And that worked?
Greg Duncan
@GregatGit
Apr 26 2016 02:24
yep
Matthew Bailin
@mdbailin
Apr 26 2016 02:24
Did that work with my codepen or just yours
?
Greg Duncan
@GregatGit
Apr 26 2016 02:25
mine
Matthew Bailin
@mdbailin
Apr 26 2016 02:25
hmm ok
Greg Duncan
@GregatGit
Apr 26 2016 02:26
@mdbailin I used Object.keys to on my json
Matthew Bailin
@mdbailin
Apr 26 2016 02:26
what's Object.keys?
Bruce Young
@mutantspore
Apr 26 2016 02:27
@mdbailin not sure if you are ok now with this but here is a fork working
http://codepen.io/MutantSpore/pen/YqOQeL
Greg Duncan
@GregatGit
Apr 26 2016 02:27
@mdbailin use this on your json when it comes down var myKeys = Object.keys(json.query.pages);
Matthew Bailin
@mdbailin
Apr 26 2016 02:30
@mutantspore I wasn't ok but I am now! wow!
I'm just reading what you did now
Bruce Young
@mutantspore
Apr 26 2016 02:30
it was mostlikely that you didn’t realise that the form submission will cause a reload
removed and fixed other stuff
Salomon May
@sollymay
Apr 26 2016 02:30
still, no luck making my pen to work with JS and JQuery
Bruce Young
@mutantspore
Apr 26 2016 02:31
the .preventDefault() stops the page reloading
Matthew Bailin
@mdbailin
Apr 26 2016 02:31
@mutantspore that's exactly what I was about to ask you about lol
I had noticed that the original query would appear even if I typed nothing in the search
Salomon May
@sollymay
Apr 26 2016 02:32
it works flawlesly when I use atom and load the script
Matthew Bailin
@mdbailin
Apr 26 2016 02:32
the .preventDefault() was the magic bullet I was looking for, to prevent a reload
very clever
Stephen James
@sjames1958gm
Apr 26 2016 02:33
@sollymay I just ran this you are accessing codepen with https:// and your URL is http:// which fails
Matthew Bailin
@mdbailin
Apr 26 2016 02:33
@mutantspore thanks!
CamperBot
@camperbot
Apr 26 2016 02:33
mdbailin sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1453 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 26 2016 02:33
forms are normally for getting info and sending it off to a backend script. you have to stop that happening
Matthew Bailin
@mdbailin
Apr 26 2016 02:33
@GregatGit thanks too!
CamperBot
@camperbot
Apr 26 2016 02:33
mdbailin sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:star: 432 | @gregatgit | http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Apr 26 2016 02:34
@mdbailin Good luck! I was reading along to.
Stephen James
@sjames1958gm
Apr 26 2016 02:34
@sjames1958gm Likely the quote engine isn't going to accept https:// so you need to access codepen over http:// which leads to the next issue Cross origin request.
Salomon May
@sollymay
Apr 26 2016 02:37
@sjames1958gm :worried: I was really thinking about running it from another pen, but that would not solve my issue again
Stephen James
@sjames1958gm
Apr 26 2016 02:38
There is a cross origin proxy that you can add to your URL I don't recall what it was maybe someone else will know. @mutantspore ?
Salomon May
@sollymay
Apr 26 2016 02:40
@sjames1958gm thank you again!! you made my day with that https fix :)
CamperBot
@camperbot
Apr 26 2016 02:40
sollymay sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 809 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Apr 26 2016 02:40
@sollymay :+1:
Greg Duncan
@GregatGit
Apr 26 2016 02:41
Hey! How do you do the "thumb"??
Stephen James
@sjames1958gm
Apr 26 2016 02:41
: +1
:zzz:
Greg Duncan
@GregatGit
Apr 26 2016 02:42
:+1:
@sjames1958gm Thanks :+1:
CamperBot
@camperbot
Apr 26 2016 02:42
:star: 810 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
gregatgit sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
Stephen James
@sjames1958gm
Apr 26 2016 02:44
:ok_hand:
Chris Dalton
@manwithgills
Apr 26 2016 03:01
Is there anyone here who has completed the local weather app yet. I have a question about the openweather api.
Bruce Young
@mutantspore
Apr 26 2016 03:13
@manwithgills go for it
Chris Dalton
@manwithgills
Apr 26 2016 03:17

I am getting an error when i run my .getjson. Here is my pen: https://codepen.io/manwithgills/pen/ONQzvo

When I run the page I get the error : Failed to load resource: net::ERR_CONNECTION_REFUSED

Yet when I paste the API URL into my browser I get the object returned.

Any idea why I would get the ERR_CONNECTION_REFUSED?
Bruce Young
@mutantspore
Apr 26 2016 03:22
@manwithgills ok the API url is http and if you also use http for your codePen page call it should be ok
Nazim
@nazimkazim
Apr 26 2016 03:22
Hey guys i'am oding my "Twitch.tv" project. What i want is to change icon for offline user. Can you tell me what is wrong with my code ?
http://codepen.io/nazimkazim/pen/ONEYgZ
Rada
@Radascript
Apr 26 2016 03:26
@manwithgills it has helped me greatly to break it down into url/data/function
so this works when I tweak your code
$(document).ready(function(){
  navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = (position.coords.latitude);
     console.log(latitude);
  var longitude =(position.coords.longitude);
    console.log(longitude);
});

  //API Key cdc9be93cc92e1ff69a00d5f882ba0f3
    var url = 'http://api.openweathermap.org/data/2.5/weather'
    var data = {
      lon: -81.5009575,
      lat: 28.3712402,
      APPID: 'cdc9be93cc92e1ff69a00d5f882ba0f3',
      units: 'metric'
    }
  $.getJSON(url, data, function (currentWeatherData) {
  console.log(currentWeatherData);


  });
});
Chris Dalton
@manwithgills
Apr 26 2016 03:26
@mutantspore You da man. Thanks so much.
CamperBot
@camperbot
Apr 26 2016 03:26
manwithgills sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1454 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 26 2016 03:27
@manwithgills now it won’t work properly with your geolocate unless you put the api code inside the geolocate function or wrap a function around the api call and call it from within the geolocate. watch out for scope issues on the lat/ lon
@manwithgills also it will be currentWeatherData.main.temp
Chris Dalton
@manwithgills
Apr 26 2016 03:36
@mutantspore I will have to take a look closer at this recommendation tomorrow. I see what you did I just need to take time to digest it and apply it. Thanks again for your help.
CamperBot
@camperbot
Apr 26 2016 03:36
manwithgills sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: manwithgills already gave mutantspore points
Chris Dalton
@manwithgills
Apr 26 2016 03:38
@Radascript Thank you. That makes a lot of sense. I have been trying to figure out how to get the lat and lon in there as it changes from place to place.
CamperBot
@camperbot
Apr 26 2016 03:38
manwithgills sends brownie points to @radascript :sparkles: :thumbsup: :sparkles:
:star: 324 | @radascript | http://www.freecodecamp.com/radascript
first of all, I don't understand why is my nvbar not showing up here
and, if you click on the link to see the better output, why are the social buttons not gong all the way to the top right side of the webpage
Frank XC
@tenkdayz
Apr 26 2016 05:15
@TheAviralGarg navbar is #000
Avi
@AviralGarg1993
Apr 26 2016 05:15
you mean the back-ground color?
Frank XC
@tenkdayz
Apr 26 2016 05:15
yes.
Avi
@AviralGarg1993
Apr 26 2016 05:16
I know that. that is intenational
I just changed the code
it look better now

now, that the previous issue is fixed;

the thumbnails overlap the nav bar while scrolling. Please help with that

Diki Ananta
@dikiaap
Apr 26 2016 06:18
@TheAviralGarg references, here you go.
Avi
@AviralGarg1993
Apr 26 2016 06:19
@dikiaap thanks :)
CamperBot
@camperbot
Apr 26 2016 06:19
theaviralgarg sends brownie points to @dikiaap :sparkles: :thumbsup: :sparkles:
:star: 149 | @dikiaap | http://www.freecodecamp.com/dikiaap
Liu Zhiqun
@lzhiqun
Apr 26 2016 06:37

I cant find out why my $(""#quote-text).html("hello"); doesnt work

<p data-height="266" data-theme-id="0" data-slug-hash="bpjqyY" data-default-tab="js,result" data-user="zhiqun" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/zhiqun/pen/bpjqyY/">bpjqyY</a> by Liu Zhiqun (<a href="http://codepen.io/zhiqun">@zhiqun</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

<iframe height='266' scrolling='no' src='//codepen.io/zhiqun/embed/bpjqyY/?height=266&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/zhiqun/pen/bpjqyY/'>bpjqyY</a> by Liu Zhiqun (<a href='http://codepen.io/zhiqun'>@zhiqun</a>) on <a href='http://codepen.io'>CodePen</a>.
<iframe height='266' scrolling='no' src='//codepen.io/zhiqun/embed/bpjqyY/?height=266&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/zhiqun/pen/bpjqyY/'>bpjqyY</a> by Liu Zhiqun (<a href='http://codepen.io/zhiqun'>@zhiqun</a>) on <a href='http://codepen.io'>CodePen</a>.
:(
Hector Garcia
@augmt
Apr 26 2016 06:42
@lzhiqun you need to include jQuery in your project
96street
@96street
Apr 26 2016 07:08
Margin-left: 0 not working http://codepen.io/anon/pen/PNdKvG
.bottomSlides #mainStoryContainer {
    float: right;
    width: 60%;
    margin-left: 0;
}
Hector Garcia
@augmt
Apr 26 2016 07:24
@96street do you want the mainStoryContainer closer to the adjacent div?
96street
@96street
Apr 26 2016 07:24
yeah @augmt
Hector Garcia
@augmt
Apr 26 2016 07:25
try margin-right: 20px
96street
@96street
Apr 26 2016 07:25
perfect, thanks @augmt
CamperBot
@camperbot
Apr 26 2016 07:25
96street sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:star: 392 | @augmt | http://www.freecodecamp.com/augmt
Hector Garcia
@augmt
Apr 26 2016 07:26
@96street 20px is arbitrary, use whatever number works for you
and margin-right because the mainStoryContainer is floated to the right
MMDF
@MMDF
Apr 26 2016 07:43
I need help :( I can't change the color of my buttons in the navbar? http://codepen.io/MMTF/pen/reZGdg
Ca anybody help
Hector Garcia
@augmt
Apr 26 2016 07:47
@MMDF i'm able to change the color using this
        .navbar-default .navbar-nav > li > a {
            color: #777;
        }
this was already included in the body
MMDF
@MMDF
Apr 26 2016 07:54
hmm neverming somehow i fixed it
Hector Garcia
@augmt
Apr 26 2016 07:55
:thumbsup:
MMDF
@MMDF
Apr 26 2016 07:55
now i'm having problem adding other content in the page. Idk why but i can't add anything below the navbar
Hector Garcia
@augmt
Apr 26 2016 08:00
@MMDF add this to your styles
body {
    padding-top: 70px;
}
your navbar is covering some content so we'll need to push the content below the navbar
MMDF
@MMDF
Apr 26 2016 08:01
hmm ok
yayyy it works!!! thanks
thanks @augmt
CamperBot
@camperbot
Apr 26 2016 08:01
mmdf sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:star: 395 | @augmt | http://www.freecodecamp.com/augmt
MMDF
@MMDF
Apr 26 2016 08:01
get some brownies :D
Hector Garcia
@augmt
Apr 26 2016 08:02
@MMDF thanks :)
CamperBot
@camperbot
Apr 26 2016 08:02
augmt sends brownie points to @mmdf :sparkles: :thumbsup: :sparkles:
:star: 150 | @mmdf | http://www.freecodecamp.com/mmdf
Nazim
@nazimkazim
Apr 26 2016 08:28
@All For those who completed "Twitch.tv" project. How to check whether user is online or offline. I have written code but it does not work. Please give me a hint.
http://codepen.io/nazimkazim/pen/ONEYgZ
@Whiplash5057
hey guys ..I want the side toggle nav bar to have a transition
how do I do that??
the doer
@ewathedoer
Apr 26 2016 08:50
@nazimkazim check API response, if it’s online you get different response than if it’s online
as a result you set the status in your app to online or offline
Nazim
@nazimkazim
Apr 26 2016 09:02
@ewathedoer yes i use different responses...
the doer
@ewathedoer
Apr 26 2016 09:07
@nazimkazim I have tried the user that is currently streaming oisketchio and it displays as if offline too
Ankit Panwar
@coderNoob
Apr 26 2016 09:09
Can I find free sound files hosted somewhere for the Simon game?
Nazim
@nazimkazim
Apr 26 2016 09:11
@ewathedoer there is something wrong with my code actually
the doer
@ewathedoer
Apr 26 2016 09:11
I don’t get why do you add divs so I am not sure how to help you, but maybe others will be able @nazimkazim
Nazim
@nazimkazim
Apr 26 2016 09:13
@ewathedoer Ok thinks! What was your implementation?
the doer
@ewathedoer
Apr 26 2016 09:14
Nazim
@nazimkazim
Apr 26 2016 09:18
@ewathedoer Cool!
96street
@96street
Apr 26 2016 09:50
How do I get the default submit button? Mine is the grey box (chrome)
i did <input type='submit'> but not working
Ankit Panwar
@coderNoob
Apr 26 2016 10:23
Your criticism is welcome
http://codepen.io/coderNoob/full/wGmbqZ/
Arminas
@ArminasBek
Apr 26 2016 11:20
@ewathedoer wow it is the best Twitch viewer i saw so far!
the doer
@ewathedoer
Apr 26 2016 11:24
thanks @ArminasBek
CamperBot
@camperbot
Apr 26 2016 11:24
ewathedoer sends brownie points to @arminasbek :sparkles: :thumbsup: :sparkles:
:star: 223 | @arminasbek | http://www.freecodecamp.com/arminasbek
Arminas
@ArminasBek
Apr 26 2016 11:33
@ewathedoer maybe you can explain me why in my code on every item it add classes for items randomly? Or there is something wrong with my whole logic?
var streams = ["freecodecamp", "storbeck", "ogamingsc2", "comster404"];
var streamVal;
var html;
//Get info from Twitch.tv API
function getInfo(){
    for (var i = 0; i < streams.length; i++) {
        (function(i){
        $.getJSON('https://api.twitch.tv/kraken/channels/' + streams[i] +'?callback=?', function(data){
        if(data.status == null){
            streamVal = "Offline";
        } else {
            streamVal = data.status;
        }

        if(data.status == 422) {
            streamVal = "Channel is unavailable";
            data.logo = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Red_x.svg/1024px-Red_x.svg.png";

        }

        html = '<div class="item"><img src="' + data.logo + '"> ' + streams[i] + ' : ' + streamVal + '</div>'

        $("div#data").append(html);

        if(streamVal == "Offline" || streamVal == "Channel is unavailable") {
            $(".item").addClass("offline");
        } else {
            $(".item").addClass("online");
        }

        console.log(data);
    })//EOF getJSON
    })(i);
    }//EOF for statement

}//EOF getInfo();

getInfo();
Randomly I mean every time i refresh page
i quickly put my code from sublime to codepen.io here it is http://codepen.io/Intooo/pen/wGEpbg
Marcel Schulz
@MarcelSchulz
Apr 26 2016 11:41
your logic adds the online/offline class to all .itemeach time it loops
not just to the current
Arminas
@ArminasBek
Apr 26 2016 11:43
hmm, but if I put that if statement outside getInfo function, it dont work at all, what I should do?
the doer
@ewathedoer
Apr 26 2016 11:44
@ArminasBek I think I get it
Marcel Schulz
@MarcelSchulz
Apr 26 2016 11:44
You could add the class when composing your markup in the ‘html’ var
the doer
@ewathedoer
Apr 26 2016 11:44
@ArminasBek you have a loop that each times it goes adds classes
so if you work on unique id it should work
Marcel Schulz
@MarcelSchulz
Apr 26 2016 11:45
        if(streamVal == "Offline" || streamVal == "Channel is unavailable") {
          statusClass = ‘offline’;
        } else {
          statusClass = ‘online’;
        }

        html = '<div class=“item ' + statusClass+ ' "><img src="' + data.logo + '"> ' + streams[i] + ' : ' + streamVal + '</div>’;

        $("div#data").append(html);
Arminas
@ArminasBek
Apr 26 2016 11:53
big thank YOU @MarcelSchulz and @ewathedoer !
CamperBot
@camperbot
Apr 26 2016 11:53
:warning: could not find receiver for marcelschulz
arminasbek sends brownie points to @marcelschulz and @ewathedoer :sparkles: :thumbsup: :sparkles:
:star: 343 | @ewathedoer | http://www.freecodecamp.com/ewathedoer
Marcel Schulz
@MarcelSchulz
Apr 26 2016 11:55
no worries :)
Arminas
@ArminasBek
Apr 26 2016 11:57
Now what I should do just hide items with particular class on button click, just I still cant understand why when page is load and all itiems are rendered I can’t add particular class to element?
I hope you understand what i said :D
Marcel Schulz
@MarcelSchulz
Apr 26 2016 11:59
roughly like this
$('btn#online').on('click', function(){
  $('.item.offline').hide();
  $('.item.online').show();
});
Arminas
@ArminasBek
Apr 26 2016 12:00
Thank You @MarcelSchulz ;)
CamperBot
@camperbot
Apr 26 2016 12:00
arminasbek sends brownie points to @marcelschulz :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for marcelschulz
Marcel Schulz
@MarcelSchulz
Apr 26 2016 12:03
or to abstract it a bit further:
<button class="toggleView" data-show="online">Online</button>
<button class="toggleView" data-show="offline">Offline</button>

$('btn.toggleView').on('click', function(){
  var status = $(this).data('show');
  $('.item').hide();
  $('.item.' + statusClass).show();
});
Nishanth Mane
@ngmgit
Apr 26 2016 12:07

@nishugit
iam trying to initiate certain animation when a div is reached upon scrolling. Here is the snippet which iam working on https://jsfiddle.net/nishu_uhsin/h5nsutww/4/

The event is not working for the class which i mentioned in the code ".main-anim-container"

Richard Andrews
@Whiplash5057
Apr 26 2016 12:14
Hey guys ..need help ...!!!
when the site opens the side nav-bar is always open ... how can I start the siteas being disabled
Arminas
@ArminasBek
Apr 26 2016 12:19
$(document).ready(function(){
  $(".ver-nav").hide();
  $("i").on("click",function(){
    $(".ver-nav").toggle("ver-nav-hide-show");
  });
})
@Whiplash5057 thats for you Richard.
Richard Andrews
@Whiplash5057
Apr 26 2016 12:21
@ArminasBek AWESOME ... how didn't I think of that ...!!!! crazy
thanks @ArminasBek
CamperBot
@camperbot
Apr 26 2016 12:21
whiplash5057 sends brownie points to @arminasbek :sparkles: :thumbsup: :sparkles:
:star: 224 | @arminasbek | http://www.freecodecamp.com/arminasbek
Richard Andrews
@Whiplash5057
Apr 26 2016 12:21
DAMN
Dag Stromsvag
@daggemann
Apr 26 2016 13:32
Hi. can anyone help me with the "Show the Local Weather" Zipline. See console error message. Not sure how to get around this --> https://codepen.io/daggemann/full/mPGXrr/
Marcel Schulz
@MarcelSchulz
Apr 26 2016 13:32
you have to change the API’s endpoint to be calles through https
Stephen James
@sjames1958gm
Apr 26 2016 13:33
@daggemann Connect to codepen over http:// not https://
Dag Stromsvag
@daggemann
Apr 26 2016 13:33
but the api will not accept https
and codepen will not allow geolocation using http
new Chrome security settings i think...
Marcel Schulz
@MarcelSchulz
Apr 26 2016 13:33
it does indeed work for me through http
Dag Stromsvag
@daggemann
Apr 26 2016 13:33
hmmm...are you using Chrome?
Marcel Schulz
@MarcelSchulz
Apr 26 2016 13:34
yeah, 49.0.2623.112
Stephen James
@sjames1958gm
Apr 26 2016 13:34
@daggemann My chrome does, it just complains.
Dag Stromsvag
@daggemann
Apr 26 2016 13:35
I get this using http: getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
Stephen James
@sjames1958gm
Apr 26 2016 13:36
@daggemann It still returns the value, just get a warning.
Marcel Schulz
@MarcelSchulz
Apr 26 2016 13:37
to get aroung this, you could set up a tunnel through your own secured domain that makes the api request
Dag Stromsvag
@daggemann
Apr 26 2016 13:46
@sjames1958gm does not seem to work at all, but it might be how I've implemented it.
Jas K
@jask84
Apr 26 2016 13:47

Hi all. Working on a function which identifies winning conditions for the tic tac toe game and resets the board. Currently, I have the following but it works incorrectly:

function winningFunc(choiceArray1) {
    if (
      //first horizontal
      choiceArray1[0] && choiceArray1[1] && choiceArray1[2] && choiceArray1[0] === choiceArray1[1] && choiceArray1[1] === choiceArray1[2] ||

      //second horizontal
      choiceArray1[3] && choiceArray1[4] && choiceArray1[5] && choiceArray1[3] === choiceArray1[4] && choiceArray1[4] === choiceArray1[5] ||

      //third horizontal
      choiceArray1[6] && choiceArray1[7] && choiceArray1[8] && choiceArray1[6] === choiceArray1[7] && choiceArray1[7] === choiceArray1[8] ||

      //first vertical
      choiceArray1[0] && choiceArray1[3] && choiceArray1[6] && choiceArray1[0] === choiceArray1[3] && choiceArray1[3] === choiceArray1[6] ||

      //second vertical
      choiceArray1[1] && choiceArray1[4] && choiceArray1[7] && choiceArray1[1] === choiceArray1[4] && choiceArray1[4] === choiceArray1[7] ||

      //third vertical
      choiceArray1[2] && choiceArray1[5] && choiceArray1[8] && choiceArray1[2] === choiceArray1[5] && choiceArray1[5] === choiceArray1[8] ||

      //diagonal top left to bottom right
      choiceArray1[0] && choiceArray1[4] && choiceArray1[8] && choiceArray1[0] === choiceArray1[4] && choiceArray1[4] === choiceArray1[8] ||

      //diagonal top right to bottom left
      choiceArray1[2] && choiceArray1[4] && choiceArray1[6] && choiceArray1[2] === choiceArray1[4] && choiceArray1[4] === choiceArray1[6]) {

      resetFunc();

    }
  }; //end of winningFunc

The board resets regardless of if the choices are a computer or user choice and doesn't fulfil all the criteria. choiceArray begins as an array filled with 'null' elements and gets filled with 'comp' or 'user' in the respective elements. My syntax is most likely incorrect. Any help would be appreciated.

Dag Stromsvag
@daggemann
Apr 26 2016 13:50
@MarcelSchulz isn't that a bit overkill for a beginner ZIPLINE :smile:
Marcel Schulz
@MarcelSchulz
Apr 26 2016 13:51
well… maybe, i was just saying :P (making the call to a little page on a secure server, which then does the request to the api and echos it as is)
Islam Ibakaev
@dagman
Apr 26 2016 14:17
what about my portfolio
Dag Stromsvag
@daggemann
Apr 26 2016 14:20
@dagman nice nick btw :smile: I see you have used ip to fetch location. I will do the same now as I am not able to get the geolocation to work. Thanks.
CamperBot
@camperbot
Apr 26 2016 14:20
daggemann sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:star: 442 | @dagman | http://www.freecodecamp.com/dagman
Islam Ibakaev
@dagman
Apr 26 2016 14:30
@daggemann thx looks like very similar nicknames :smile:
CamperBot
@camperbot
Apr 26 2016 14:30
dagman sends brownie points to @daggemann :sparkles: :thumbsup: :sparkles:
:star: 275 | @daggemann | http://www.freecodecamp.com/daggemann
Denis
@snexus
Apr 26 2016 15:10
Hi guys, anyone has finished the "smallest common multiple" challenge? to be able to advise on most efficient way to do it?
my implementation involves dictionary search, interesting if there is a better approach
Jas K
@jask84
Apr 26 2016 15:15
@snexus I found that challenge quite difficult. Used the Euclidean algorithm in the end.
Denis
@snexus
Apr 26 2016 15:20
@jask84 by recursion? for adjacent 2 numbers?
Jas K
@jask84
Apr 26 2016 15:23
@snexus bascially yes. The euclidean algorithm gets the highest common factor and then you use another formula to help get the lowest common multiple in the end
@snexus I have to be honest, it took me a while to do it and I needed a lot of help. Its different doing it in code compared to doing it by 'hand' so to speak
Denis
@snexus
Apr 26 2016 15:25
@jask84 Yeah, I see it on wiki...thanks :) I think they should move this challenge to advanced scripting
CamperBot
@camperbot
Apr 26 2016 15:25
snexus sends brownie points to @jask84 :sparkles: :thumbsup: :sparkles:
:star: 254 | @jask84 | http://www.freecodecamp.com/jask84
Jas K
@jask84
Apr 26 2016 15:25
@snexus no problem
nsloc22
@nsloc22
Apr 26 2016 15:26
is this correct? "Declaring two function arguments with the same name function f(a, b, b){}"
wouldn't a,b here be called parameters in function declaration
Frank XC
@tenkdayz
Apr 26 2016 15:30
@nsloc22 you will get an error saying b is already declared .. yea a , b parameters
Scott
@essdoubleu
Apr 26 2016 15:36
Hey guys, can someone help me with getting my <h2>SW</h2> on the same line as my buttons in my navbar? https://codepen.io/ScottW/pen/dMqpmE
Mahak Narayan Singh
@makkBit
Apr 26 2016 15:40
hey campers!
Is it ok to read the wiki of a particular algorithm challenge which provides some hints? or figuring out the algo without reading its wiki(hints) is needed to become a better programmer??
any suggestion is appreciated. :)
Frank XC
@tenkdayz
Apr 26 2016 15:43
@essdoubleu give h2 display inline block
@makkBit I'd say figure it out yourself but if you've given it too much time then take a peak
Dylan
@dhcodes
Apr 26 2016 15:59
@makkBit I'd work on it awhile and ask here before you read the solution. The hints.... they help sometimes but since there are more than one way to solve an algorithm it helps to do it yourself
then look at the solutions
@makkBit I've worked on some over the course of a few days. *looking at you closures...
Scott
@essdoubleu
Apr 26 2016 16:05
haha thanks @tenkdayz
CamperBot
@camperbot
Apr 26 2016 16:05
essdoubleu sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 458 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Richard Andrews
@Whiplash5057
Apr 26 2016 16:09
hey guys ...have a doubt ..!!
I want to make a square with the upper triangle one color and the lower triangle another
Andrew Charlebois
@andrewchar
Apr 26 2016 16:17
does anyone have a good resource for tutorial for hover effects on image? what i am after is a black overlay on image as you hover, not full opacity. with a symbol in the middle like a + or something.
also ijust want to use css3. no jquery
Marcel Schulz
@MarcelSchulz
Apr 26 2016 16:19
@Whiplash5057 does this work?
body {
  margin: 0;
}

.width-height {
  background: khaki;
  height: 100vh;
  position: relative;
}

.tri-1 {
  position: absolute;
  right:0;
  bottom: 0;
  border-top: 100vh solid khaki;
  border-left: 100vw solid khaki;
  border-bottom: 100vh solid pink;
  border-right: 0px solid blue;
}
@andrewchar like this?
<div class="imageWrapper">
  <div class="overlay dark"></div>
  <img src="">
</div>
.overlay{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  transition:all .2s;
}
.overlay.dark{
  background-color:rgba(0,0,0,0.7);
}
.imageWrapper{
  position:relative;
}
.imageWrapper:hover .overlay{
  visibility:visible;
  opacity:1;
}
Richard Andrews
@Whiplash5057
Apr 26 2016 16:25
@MarcelSchulz But I want the above div to have the box shape ...!! the lower div has to be separated into 2 triangles
Marcel Schulz
@MarcelSchulz
Apr 26 2016 16:26
mh… don’t quite get it… can you sketch that down?
Andrew Charlebois
@andrewchar
Apr 26 2016 16:28
hmm more like what they have on this page on their recent project section. i can do the zoom in and out thing with hover. just having a hard time getting a symbol in the center with opacity on hover
Marcel Schulz
@MarcelSchulz
Apr 26 2016 16:30
they simply have an icon centered in the .overlay, don’t they?
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height:50px;
    width:50px;
    margin-top: -25px;
    margin-left: -25px;
James Sral
@jamessral
Apr 26 2016 16:39
I'm having difficulty understanding how to use jQuery to get the json data and put it into my html.
http://codepen.io/jamessral/pen/vGzjro?editors=0010
Frank XC
@tenkdayz
Apr 26 2016 16:43
@jamessral why 2 json functions?
James Sral
@jamessral
Apr 26 2016 16:44
@tenkdayz I was trying to get one as soon as the page is loaded and then also by pressing the new Quote button
I see that part of my problem is a $ before referring to the local variable 'json'
Tadas Stasiulionis
@tst11
Apr 26 2016 16:49
Hello, who finds it messy with the wikipedia api?
Juwdohr
@Juwdohr
Apr 26 2016 16:58
Not sure what is going on not displaying any of the streamers info
http://s.codepen.io/juwdohr/debug/VaBqGw
alpox
@alpox
Apr 26 2016 17:07
@Juwdohr You have mistakes in your code

@Juwdohr

info += '<div class="show-left show-right"><img class="logo ' + streamCondition + '" src="' + userLogo '" alt="User Logo"></div>';

There is a + missing after userLogo

var twitchStreamers {
    "comster404",
    "freecodecamp",
    "storbeck",
    "terakilobyte",
    "habathcx",
    "RobotCaleb",
    "brunofin",
    "thomasballinger",
    "noobs2ninjas",
    "beohoff",
    "medrybw"
  };

You forgot a = and that this is an array, so you use [] instead of {}

info += '<li class="smaller">' + tuncate(user.info, MAX_INFO) + '</li>';
tuncate is not defined -> typo
Juwdohr
@Juwdohr
Apr 26 2016 17:17
Anyfeed Back would be appreciated.
http://s.codepen.io/juwdohr/debug/VaBqGw
Richard Andrews
@Whiplash5057
Apr 26 2016 17:25
hey guys have a doubt
Juwdohr
@Juwdohr
Apr 26 2016 17:26
@Whiplash5057 A doubt? About what?
Juwdohr
@Juwdohr
Apr 26 2016 17:26
@Whiplash5057 What about it?
Mahak Narayan Singh
@makkBit
Apr 26 2016 17:26
@tenkdayz @dhcodes Thanks for your advice.
CamperBot
@camperbot
Apr 26 2016 17:26
makkbit sends brownie points to @tenkdayz and @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 459 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
:star: 692 | @dhcodes | http://www.freecodecamp.com/dhcodes
Richard Andrews
@Whiplash5057
Apr 26 2016 17:26
when I am adding content in a new div ...The content seems to not start in a container
Juwdohr
@Juwdohr
Apr 26 2016 17:27
@Whiplash5057 First need to add that link into the header, you can do so by clicking on the gear.
Richard Andrews
@Whiplash5057
Apr 26 2016 17:27
the last line that I wrote ...I wanted it to start after the previous div
@Juwdohr I didn't get you
I want the fasdfasg to start in a new section ...
I cant seem to do that
but i don't seem to find a fix
Juwdohr
@Juwdohr
Apr 26 2016 17:33
@Whiplash5057 the <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> needs to go into the header, currently its in the body. About it not starting in a new section, the height of the previous section is set to 0; also tri-1 is not even on the screen
Richard Andrews
@Whiplash5057
Apr 26 2016 17:34
@Juwdohr Still not working...wait lemme post the code
Juwdohr
@Juwdohr
Apr 26 2016 17:35
@Whiplash5057 Your Tri-1 is off the screen to the right;
Richard Andrews
@Whiplash5057
Apr 26 2016 17:37
But if I change the right to vr: 100 the code changes to being not responsive...that is why I did that
@Juwdohr
alpox
@alpox
Apr 26 2016 17:40
@Whiplash5057 Take away position: absolute of the tri-1
@Whiplash5057 If you position it absolute, the element takes itself out of the page-flow
Richard Andrews
@Whiplash5057
Apr 26 2016 17:41
@alpox OOOOMMMGGG ...why didn't I see that ...getting sloppy ...Thankyou @alpox
alpox
@alpox
Apr 26 2016 17:41
@Whiplash5057 Np :-)
Richard Andrews
@Whiplash5057
Apr 26 2016 17:41
thanks a lot @alpox
CamperBot
@camperbot
Apr 26 2016 17:41
whiplash5057 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 609 | @alpox | http://www.freecodecamp.com/alpox
Patrick
@pwcsquared
Apr 26 2016 17:43
hey guys, just looking for feedback on my Simon game: https://codepen.io/pwcsquared/full/BKOaJE/
Mayur Kulkarni
@maykulkarni
Apr 26 2016 17:56
function convertToF(celsius) {
  // Only change code below this line
  var farenheit = (9/5)*celsius + 32;

  // Only change code above this line
  return fahrenheit;
}

// Change the inputs below to test your code
convertToF(130);
What's wrong? why does it say farenheit is undefined?
negyvenketto
@negyvenketto
Apr 26 2016 17:57
@mayur3086 you mistyped it
Joseph
@revisualize
Apr 26 2016 17:57
@mayur3086 Misspelling.
negyvenketto
@negyvenketto
Apr 26 2016 17:57
@mayur3086 you need an extra h in it
Mayur Kulkarni
@maykulkarni
Apr 26 2016 17:58
@negyvenketto @revisualize oh thanks! that's such a complicated spelling
CamperBot
@camperbot
Apr 26 2016 17:58
mayur3086 sends brownie points to @negyvenketto and @revisualize :sparkles: :thumbsup: :sparkles:
:star: 386 | @negyvenketto | http://www.freecodecamp.com/negyvenketto
:star: 979 | @revisualize | http://www.freecodecamp.com/revisualize
Achilleas Papakonstantinou
@AchiPapakon
Apr 26 2016 18:07

Hi, how can I make the border of my table not block the outer cells?

table {
  margin: 30px auto 0;
  border: 7px solid #222;
  padding: 10px;
}

http://codepen.io/AchiPapakon/pen/wGEmpO

Achilleas Papakonstantinou
@AchiPapakon
Apr 26 2016 18:12
I thought I saw a notification...
DanishKalim
@DanishKalim
Apr 26 2016 18:54
<html>



<body>
<script>
var fruits=[];
  function addfruit(){
     var cfruit=document.getElementById("fruit").value;
      fruits.push(cfruit);
      document.getElementById("fruit").value = "";
       displayfruit() ;
    }

    function displayfruit(){

      var x = 0;
        document.getElementById("allfruits").innerHTML = "";
       for(x=0; x<fruits.length; x++){
        document.getElementById("allfruits").innerHTML  +=  ' <input type="radio" class="fruits" name="thefruit" />' + fruits[x]  + "<br>"; 

         }   
      if (fruits.length) document.getElementById("allfruits").innerHTML  += '<input type="button" id="remove" value="Remove" onClick="removefruit()"/>'; 
    }

    function removefruit(){

       var x = document.getElementsByClassName("fruits");
       for(var i=0; i<x.length; i++){
         if (x[i].checked) fruits.splice(i, 1); 

         }   
        displayfruit();
    }

</script>

    <input type="text" id="fruit"  onkeydown = "if (event.keyCode == 13) addfruit()"/>


        <div id="allfruits"></div>

<input type="button" id="remove" value="Remove" onClick="removefruit()"/>
</body>
</html>

my code is showing two two remove button on pressing enter why?? plz help
Matthew Boland
@mattboland
Apr 26 2016 18:55
@pwcsquared seems to be working well to me. nice job
DanishKalim
@DanishKalim
Apr 26 2016 18:56
can anyone help me?
Jeff
@adzam5
Apr 26 2016 19:02
@DanishKalim Your displayfruit function is adding a remove button and you have a remove button coded into your html
@DanishKalim Your code works fine and you will only have one remove button if you eliminate
if (fruits.length) document.getElementById("allfruits").innerHTML  += '<input type="button" id="remove" value="Remove" onClick="removefruit()"/>';
Daniel Chia
@danielcodes
Apr 26 2016 19:15
Hi everyone, I am currently working on the wikipedia search project and can't seem to pass requests to the Wikipedia API with $ajax. The error is of the 'Access-Control-Allow-Origin' type. Anyone experienced the same problem?
Bruce Young
@mutantspore
Apr 26 2016 19:16
with .ajax you’ll need dataType: ‘jsonp’ @danielcodes
is there a pen?
Robert Uivarosi
@URobert
Apr 26 2016 19:16
@danielcodes jsnop should solve the matter
Mike
@mjhirsch
Apr 26 2016 19:17
@danielcodes jsonp or adding a callback (&callback=?) to your query
Daniel Chia
@danielcodes
Apr 26 2016 19:18
jsonp did it, odd because I had tried it before from all the googling
thanks guys!
Bruce Young
@mutantspore
Apr 26 2016 19:21
@danielcodes a common mistake is to spell dataType as datatype
Antony Ndungu
@Antony-Ndungu
Apr 26 2016 19:26
Hi all! Anyone knows how to improve AngularJS first load experience?
ElvisTheStriker
@ElvisTheStriker
Apr 26 2016 19:34
hi guys ... having an issue with the wiki search exercise. when I try to use the wiki API I get the following warning in the console "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=query&titles=george&prop=revisions&rvprop=content&format=json. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
"... can anybody help? http://codepen.io/ElvisTheStriker/pen/JXBVgg
Bruce Young
@mutantspore
Apr 26 2016 19:35
@ElvisTheStriker just add &callback=? to the end of your URL
ElvisTheStriker
@ElvisTheStriker
Apr 26 2016 19:40
@mutantspore Thank You Bruce.
CamperBot
@camperbot
Apr 26 2016 19:40
elvisthestriker sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1455 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 26 2016 19:41
@ElvisTheStriker also this would be a better search
wikiUrl = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + text_value + "&format=json&callback=?”;
yours will only find articles with the Title you are looking for.. one article .. if you are lucky
ElvisTheStriker
@ElvisTheStriker
Apr 26 2016 19:43
@mutantspore . OK I'll give it a bash :)
Bruce Young
@mutantspore
Apr 26 2016 19:44
@ElvisTheStriker I used a completely different search but the one I just posted is similar to the FCC demo
ElvisTheStriker
@ElvisTheStriker
Apr 26 2016 19:45
ah right... it is much better @mutantspore
Jas K
@jask84
Apr 26 2016 19:46
Hey. Been struggling with my tic tac toe project for hours lol. I am just trying to figure out how to reset the game when the winning conditions are met. But on a reset the game acts erratically and the computer takes two turns and starts messing up further. Makes me think it is an issue with the click handler for the X or O selection not being handled properly and my winning conditions probably have incorrect syntax. Any help would be appreciated, been trying lots of different things but not sure what to try next - maybe callback functions? http://codepen.io/jask/pen/grdePz?editors=0010
Bruce Young
@mutantspore
Apr 26 2016 19:47
@ElvisTheStriker now I see that you are trying to use the returned data outside of the api call. as It’s asynchronous that won’t work. You’ll need to either pull that code in or wrap it in a function and call it from within the .getJSON
Mark Howard
@iheartkode
Apr 26 2016 19:50
@jask84 it's a good idea to take a break and go back with fresh eyes :)
ElvisTheStriker
@ElvisTheStriker
Apr 26 2016 19:51
ok... it is filling the array with the last request instead of the curretn one...I'll get that sorted. Thank you @mutantspore
CamperBot
@camperbot
Apr 26 2016 19:51
elvisthestriker sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: elvisthestriker already gave mutantspore points
Jas K
@jask84
Apr 26 2016 19:52
@iheartkode youre right, but its been like this for two days lol. I need a break before I go to sleep, because I have been going in circles.
Mark Howard
@iheartkode
Apr 26 2016 19:53
@jask84 part of learning to code is a lot of head banging even the pros do it daily. try the helpjavascript room also
help rooms
CamperBot
@camperbot
Apr 26 2016 19:53

:point_right: help rooms [wiki]

FreeCodeCamp Chat Rooms

Help Rooms

Chat Room Description Chat Room
HTML/CSS/Bootstrap FreeCodeCamp/Help
JavaScript/Algorithms FreeCodeCamp/HelpJavaScript
Front End FreeCodeCamp/HelpFrontEnd
Data Visualization FreeCodeCamp/HelpDataViz
Back End FreeCodeCamp/HelpBackEnd

Choose the right room for your questions!

See also: :earth_asia: Language Specific | :satellite: Technology | :crystal_ball: Miscellaneous

back to top

:pencil: read more about help rooms on the FCC Wiki

john-dederer
@john-dederer
Apr 26 2016 19:55
Hello?
Jas K
@jask84
Apr 26 2016 19:56
@iheartkode appreciate it. Would it be ok to go over to the javascript room to ask this question? I have only really been using this room recently. I will check it out. I totally understand - have done my fair share of head banging on all the projects :smile:
Mark Howard
@iheartkode
Apr 26 2016 19:56
@jask84 it won't hurt to try :)
I have a lot of head banging and I have been coding awhile lol
john-dederer
@john-dederer
Apr 26 2016 19:57
Can someone explain me why for some channels it loads the picture and for some not?
Jas K
@jask84
Apr 26 2016 19:57
@iheartkode cheers. will check it out
Ariel
@ArielLeslie
Apr 26 2016 20:02
@john-dederer What's up?
ALINATSUI
@ALINATSUI
Apr 26 2016 20:02
Help! I'm working on the Random Quote Generator and have no idea how to put the "New Quote" button INSIDE a box containing the quote...Here's what I've got so far...I tried creating a new box but couldn't figure out how to "link" the box to the random quote function...http://codepen.io/alinawtsui/pen/mPwYZX?editors=0110
CamperBot
@camperbot
Apr 26 2016 20:02
no wiki entry for: im working on the random quote generator and have no idea how to put the new quote button inside a box containing the quoteheres what ive got so fari tried creating a new box but couldnt figure out how to link the box to the random quote functionhttpcodepenioalinawtsuipenmpwyzxeditors0110
john-dederer
@john-dederer
Apr 26 2016 20:02
@ArielLeslie I dont k now why for some channels it loads the picture and for some not
Mark Howard
@iheartkode
Apr 26 2016 20:03
codepens don't show up anymore for me
Joseph
@revisualize
Apr 26 2016 20:03
@john-dederer What does the https://api.twitch.tv/kraken/search/channels?q=revisualize for the user that isn't displaying show up?
Mark Howard
@iheartkode
Apr 26 2016 20:03
it's blank
Joseph
@revisualize
Apr 26 2016 20:03
Note I'm using my username as an example.
Ariel
@ArielLeslie
Apr 26 2016 20:04
Are we talking about codepen previews? Those only show up if you have a premium account.
john-dederer
@john-dederer
Apr 26 2016 20:04
@revisualize https://api.twitch.tv/kraken/search/channels?q=cowsep here the channel is offlien, still I could acces the links
@ALINATSUI just make the button appear below the box?
Bruce Young
@mutantspore
Apr 26 2016 20:06
@ALINATSUI $('#quote').text(RandomQuote); this is replacing whatever is in the DIV with id = quote.. whiping out your button
john-dederer
@john-dederer
Apr 26 2016 20:06

@revisualize $.getJSON(api + streamer[9], function(data){ //JSON for predefined streamer "cowsep",
if (data.stream === null) {
$("#status10").text("Offline :(");
} else {
$("#status10").text("Online :)");
}
if (data.hasOwnProperty("error")){

$("#name10").text(streamer[9]);
$("#title10").text(data.error);
$("#game10").text(data.message);
$("#status10").text("Channel does not exist");
$("#twitch10").text("Error");
//img default falls nicht vorhanden

}

$.getJSON(apiChannel + streamer[9], function(data){
$("#name10").text("Channelname: " + data.channels[0].name);
$("#title10").text("Title: " + data.channels[0].status);
$("#game10").text("Game: " + data.channels[0].game);
document.getElementById("twitch10").href = "" + data.channels[0].url;
var img = document.getElementById("image10");
img.src = data.channels[0].logo;

});
}); // ENDE json

Joseph
@revisualize
Apr 26 2016 20:06
Ummm... I can see your code.
john-dederer
@john-dederer
Apr 26 2016 20:06
this is my snippet for this particular streamer
ALINATSUI
@ALINATSUI
Apr 26 2016 20:07
@john-dederer I tried that, but what would end up happening is that as I click the "New Quote" button, each quote would take the space of "New Quote" and nothing would happen with the other box (which for some reason, I'm having some problems configuring it, so now it looks way tiny...
john-dederer
@john-dederer
Apr 26 2016 20:07
its the same snippet i used for other channels still a few channels simply dont display the image
Nikolay Neykov
@shkurata
Apr 26 2016 20:07
Guys, can somebody test my Simon Game. I need some feedback.
ALINATSUI
@ALINATSUI
Apr 26 2016 20:07
@shkurata You can go to Code Review room for feedback...
Joseph
@revisualize
Apr 26 2016 20:07
@john-dederer Why aren't you using a loop instead of hard coding them?
Nikolay Neykov
@shkurata
Apr 26 2016 20:08
@ALINATSUI , thanks. I didn't know where to go :)
CamperBot
@camperbot
Apr 26 2016 20:08
shkurata sends brownie points to @alinatsui :sparkles: :thumbsup: :sparkles:
:star: 320 | @alinatsui | http://www.freecodecamp.com/alinatsui
ALINATSUI
@ALINATSUI
Apr 26 2016 20:08
No problem @shkurata ....
john-dederer
@john-dederer
Apr 26 2016 20:08
@revisualize tried and it messed up. For this project I hardcoded
@revisualize Can it be that my API requests are here limited?
Joseph
@revisualize
Apr 26 2016 20:09
@john-dederer maybe.
Bruce Young
@mutantspore
Apr 26 2016 20:09
john-dederer
@john-dederer
Apr 26 2016 20:10
@revisualize thanks.
CamperBot
@camperbot
Apr 26 2016 20:10
john-dederer sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:star: 984 | @revisualize | http://www.freecodecamp.com/revisualize
ALINATSUI
@ALINATSUI
Apr 26 2016 20:10
@mutantspore How'd you do that? And major thanks!!
CamperBot
@camperbot
Apr 26 2016 20:10
alinatsui sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1456 | @mutantspore | http://www.freecodecamp.com/mutantspore
Dustin
@Key-Banger
Apr 26 2016 20:11
Can someone help me with my pomodoro timer?
Bruce Young
@mutantspore
Apr 26 2016 20:12
@ALINATSUI I seperated out the two things you were trying to do. called one theQuote, and the other getQuote. I had to also changed the css a bit to reflect those changes
codercooooder
@codercooooder
Apr 26 2016 20:12
is anyone here good in js - is there something wrong: with this code
if ($(window).width() > (1.5 * ($(window).height()) || sectionIndex > 1)
john-dederer
@john-dederer
Apr 26 2016 20:12
@revisualize oh darn I forgot the " for one id ... Thanks still!
CamperBot
@camperbot
Apr 26 2016 20:12
john-dederer sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:warning: john-dederer already gave revisualize points
Doug Franklin
@Imaginativeone
Apr 26 2016 20:13
may I ask angular-material questions here?
ALINATSUI
@ALINATSUI
Apr 26 2016 20:14
@mutantspore Yes, I'm seeing those changes in CSS..Also, one more thing, if I wanted to incorporate a button to tweet each specific quote, would I have to incorporate the twitter API or ??
Bruce Young
@mutantspore
Apr 26 2016 20:15
@ALINATSUI do not use the twitter widget… it’s very hard to get working. use their web intents. it should only be 1 or 2 lines of js and your own button to do that
https://dev.twitter.com/web/intents
ALINATSUI
@ALINATSUI
Apr 26 2016 20:16
Thanks @mutantspore! You've saved me hours of documentation....
CamperBot
@camperbot
Apr 26 2016 20:16
alinatsui sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: alinatsui already gave mutantspore points
Bruce Young
@mutantspore
Apr 26 2016 20:19
@Imaginativeone as FCC no longer teaches Angular .. I’ve forgotten the very little I knew. I have done one project with Materialize.css if that’s what you are talking about.
Doug Franklin
@Imaginativeone
Apr 26 2016 20:24
Thanks Bruce
why did FCC drop Angular?
Bruce Young
@mutantspore
Apr 26 2016 20:25
something about not liking Angular 2 and the rise of React. they teach React now. @Imaginativeone
Andrew Charlebois
@andrewchar
Apr 26 2016 20:27
can someone tell me why this doesnt apply a texture as bg-image......
body {
  background-image: url(resource\img\bgtexture.png);
  background-repeat:repeat;
}
but adding bg-color in the body block adds color o.O
Bruce Young
@mutantspore
Apr 26 2016 20:28
@andrewchar that is a local URL .. is it correct?
Andrew Charlebois
@andrewchar
Apr 26 2016 20:29
yes
Bruce Young
@mutantspore
Apr 26 2016 20:29
with quotes around the URL?
@codercooooder is this better if ( ( $(window).width() > (1.5 * ($(window).height()))) || sectionIndex > 1)
just trying to balance your brackets properly
Andrew Charlebois
@andrewchar
Apr 26 2016 20:31
quotes dont work either
Bruce Young
@mutantspore
Apr 26 2016 20:32
so the resource folder is in the css folder? .. hard to work it our without knowing your file structure
Andrew Charlebois
@andrewchar
Apr 26 2016 20:32
if i do the actual link to the site it works.... background-image: url("http://www.transparenttextures.com/patterns/cream-pixels.png");
Bruce Young
@mutantspore
Apr 26 2016 20:33
@andrewchar so your \ should be / also if it;s a relative URL
Yaroslav
@YVeselovskyi
Apr 26 2016 20:33
hello:) why this don't work?
blob
João Alves
@JADSN
Apr 26 2016 20:33
Andrew Charlebois
@andrewchar
Apr 26 2016 20:34
blob
@mutantspore ^
looked at my dev tool. its giving 404 error that its not found.. but its right there
Bruce Young
@mutantspore
Apr 26 2016 20:38
@JADSN 2 things.
add callback=? to your URL to sort out cross site issues and
take the quotes off myUrlApi
it’s a variable , not text.
@andrewchar resource/img/bgtexture.png perhaps as it’s supposed to be a relative URL
and as I said .. is the resource folder in the css folder.. if not that wil hav eto be fixed some more
Andrew Charlebois
@andrewchar
Apr 26 2016 20:40
yeah i changed them. atom likes to put \ when you copy a path
everything lives in construction
my gulp lives in construction. and its parsing the scss fine as i checked that to
Bruce Young
@mutantspore
Apr 26 2016 20:41
so there is a folder called resource in construction and aalso a file called whatever.css
codercooooder
@codercooooder
Apr 26 2016 20:42
@mutantspore thanks!
CamperBot
@camperbot
Apr 26 2016 20:42
codercooooder sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1457 | @mutantspore | http://www.freecodecamp.com/mutantspore
Rada
@Radascript
Apr 26 2016 20:46
not really sure how to start on the html part of Simon Game... Should I use SVG for building the toy shape?
Andrew Charlebois
@andrewchar
Apr 26 2016 20:46

hmm... my console 404 message http://localhost:3000/resource/css/resource/css/img/bgtexture.png .... my parsed css code as follows

body {
  background-image: url('resource/css/img/bgtexture.png');
  background-repeat:repeat;
}

i put the image inside /css/img to make sure it wasnt a path error. wth is happening to the path, its adding resource/css to it out of no where

wow thats weird.. i just removed the resource/css from the path and it works...
Bruce Young
@mutantspore
Apr 26 2016 20:48
@andrewchar well sound slike you have a complicated process.. atleast you now know what the issue is
Andrew Charlebois
@andrewchar
Apr 26 2016 20:48
how is it figuring out by it self the path lol
it never did that to my other images.. odd
Bruce Young
@mutantspore
Apr 26 2016 20:49
@JADSN did you also take off the quotes from around myUrlApi
Andrew Charlebois
@andrewchar
Apr 26 2016 20:50
OH! when you use an img path as url in a background-image. it goes for the css file automatically ? i know with all of my projects i always put my images that will be used as a background image in the css file it its own folder
but i dont remember ever skipping some of the path to get to it... maybe one of my plugins is doing it from my gulp tasks
Jasmina Babic
@animsaj
Apr 26 2016 20:51
@Radascript that's one idea, another is to use css border-radius. that's what I did
João Alves
@JADSN
Apr 26 2016 20:53
@mutantspore Can you give me an example how to make a Wikipedia viewer ?
Rada
@Radascript
Apr 26 2016 20:53
@animsaj thank you!
CamperBot
@camperbot
Apr 26 2016 20:53
radascript sends brownie points to @animsaj :sparkles: :thumbsup: :sparkles:
:star: 522 | @animsaj | http://www.freecodecamp.com/animsaj
Brian Cardellini
@bcardellini
Apr 26 2016 20:58
Spinning my wheels on the Simon project. Can't seem to fix the animation lag on mobile: http://briancardellini.com/temp/psimon-01 Anyone have any suggestions?
Bruce Young
@mutantspore
Apr 26 2016 20:59
@JADSN the fixed version I gave you is a good start though that search won’t be really useful. The wikipedia API is a pain. I didn’t use the type of search that the demo uses. Unfortunately pain is part of the learing process. I used their api sandbox to get right url and type of search I wanted.
basically you need to get their input and send it off to the api then list out what’s returned.
João Alves
@JADSN
Apr 26 2016 21:00
@mutantspore OK
Michael Karpinski
@karpimpski
Apr 26 2016 21:00
hey guys, I was hoping I could get some help with a personal project. I'm making a little site for my girlfriend and I's one year anniversary, and the first thing I'm adding is some pictures that transition every 2 seconds. how can I make this transition smoothly, preferrably with a nice transition animation? http://codepen.io/karpimpski/pen/vGzzPY
Bruce Young
@mutantspore
Apr 26 2016 21:01
@karpimpski lol get chocolates
Michael Karpinski
@karpimpski
Apr 26 2016 21:01
@mutantspore thanks for the advice. any advice for the site?
CamperBot
@camperbot
Apr 26 2016 21:01
karpimpski sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1458 | @mutantspore | http://www.freecodecamp.com/mutantspore
Cody Bouscaren
@codybousc
Apr 26 2016 21:02

hey all, any tips on getting this image to be responsive? i've tried the two main techniques that i've found online

first technique
.photobox {
  display: none;
  width: 100%;
  position: relative;
}

.photobox img{
  height: 100%;
  position: absolute;
  width: 100%;
}

second technique
.photobox { 
  width: 100%;
}

.photobox img{
  width: 100%;
  height: auto;
}

but neither seems to work for the image's height!
http://codepen.io/codybousc/pen/yOxRvQ

Bruce Young
@mutantspore
Apr 26 2016 21:03
Michael Karpinski
@karpimpski
Apr 26 2016 21:05
@mutantspore thanks! I'm aware of those, but my main issue is that I have the rotating images, but I plan on having more content on the page and if I scroll down, the transition brings me back to the top of the page. do you know a solution for that?
CamperBot
@camperbot
Apr 26 2016 21:05
karpimpski sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: karpimpski already gave mutantspore points
Jasmina Babic
@animsaj
Apr 26 2016 21:05
@codybousc the second works it scales on small screen
lcassettai
@lcassettai
Apr 26 2016 21:06
@codybousc
Cody Bouscaren
@codybousc
Apr 26 2016 21:06
@animsaj i also need the entire image to show on a larger screen. only the top half of the photo shows
lcassettai
@lcassettai
Apr 26 2016 21:06
blob
i see this responsive @codybousc
Paweł Przytuła
@paprzytula
Apr 26 2016 21:07
hey, for me it is responsive
Cody Bouscaren
@codybousc
Apr 26 2016 21:07
@lcassettai the width is responsive, but only half of the image shows in desktop view
Michael Karpinski
@karpimpski
Apr 26 2016 21:09
@mutantspore actually, to solve that I'm just going to put click listeners to change the image. do you know how I can make it so that clicking on the left side of an image will bring me to the previous image, but clicking on the right side will bring me to the next?
Bruce Young
@mutantspore
Apr 26 2016 21:09
@karpimpski maybe some sort of Carousel? http://designscrazed.org/free-responsive-jquery-carousel-slider-plugins/
or even just make a movie
john-dederer
@john-dederer
Apr 26 2016 21:09
Will Someone Review My codePen ? :)
Michael Karpinski
@karpimpski
Apr 26 2016 21:10
@mutantspore thanks for the help!
CamperBot
@camperbot
Apr 26 2016 21:10
karpimpski sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: karpimpski already gave mutantspore points
lcassettai
@lcassettai
Apr 26 2016 21:12

@codybousc may be you can try this ...

html

<div class="photobox">

</div>

css

html,body{
  height:100%;
}

.photobox{
  background-image:url("http://s32.postimg.org/lme9p46f9/test_Image.jpg");
 height:100%;
  background-size:contain;
  width:100%;
  background-repeat:no-repeat;
}
Juwdohr
@Juwdohr
Apr 26 2016 21:12
Hey if i have a webpage in an upper folder how do I access it? or should all pages be in the same folder?
Islam Ibakaev
@dagman
Apr 26 2016 21:14
have just done with Caesars Cipher. Is there more elegant solution?
function rot13(str) {
  return str.split('').map(function(el) {
    var code = el.charCodeAt(0);
    if(code >= 65 && code <= 90 || code >= 97 && code <= 122){
      return String.fromCharCode(getCorrectCode(el.charCodeAt(0) + 13));
    }
    return el;
  }).join('');

  function getCorrectCode(n) {
    return n > 90 ? n =  n - 26 : n;
  }
}

rot13("LBH QVQ VG!"); // 'YOU DID IT'
Bruce Young
@mutantspore
Apr 26 2016 21:15
@Juwdohr ../ will take you up one folder
andrewmai
@andrewmai
Apr 26 2016 21:15
Can someone help me with the celcius to fahrenheit converter?
Jasmina Babic
@animsaj
Apr 26 2016 21:15
@codybousc css .photobox { margin: 0 auto; max-width: 700px; }
andrewmai
@andrewmai
Apr 26 2016 21:15
Capture.JPG
Bruce Young
@mutantspore
Apr 26 2016 21:16
@andrewmai remove the line var celcius;
lcassettai
@lcassettai
Apr 26 2016 21:17
@andrewmai when you declare celcius the value of the variable is null;
andrewmai
@andrewmai
Apr 26 2016 21:17
hmm...k. but when I remove "var celcius", I get an error saying "celcius undefined"
Bruce Young
@mutantspore
Apr 26 2016 21:18
spelling error
@andrewmai
Jess Johnson
@jessjo
Apr 26 2016 21:18
you mispelled celsius in the top function :)
celsius versus celcius :)
andrewmai
@andrewmai
Apr 26 2016 21:18
OMG
OH MY GOSH
i was stuck on it for a while...haha thanks
Cody Bouscaren
@codybousc
Apr 26 2016 21:19
@animsaj i wouldn't have thought that limiting the width would alter the height but that makes complete sense
only problem is, i
andrewmai
@andrewmai
Apr 26 2016 21:19
Thank you @mutantspore
CamperBot
@camperbot
Apr 26 2016 21:19
andrewmai sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Cody Bouscaren
@codybousc
Apr 26 2016 21:19
i'm actually working with a slideshow with lots of different images
CamperBot
@camperbot
Apr 26 2016 21:19
:star: 1459 | @mutantspore | http://www.freecodecamp.com/mutantspore
Cody Bouscaren
@codybousc
Apr 26 2016 21:20
@animsaj either way, i think you've set me on the right track! thank you
CamperBot
@camperbot
Apr 26 2016 21:20
codybousc sends brownie points to @animsaj :sparkles: :thumbsup: :sparkles:
:star: 523 | @animsaj | http://www.freecodecamp.com/animsaj
Juwdohr
@Juwdohr
Apr 26 2016 21:20
@mutantspore thank you
CamperBot
@camperbot
Apr 26 2016 21:20
juwdohr sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1460 | @mutantspore | http://www.freecodecamp.com/mutantspore
Jasmina Babic
@animsaj
Apr 26 2016 21:22
@codybousc image scales maintaining the aspect ratio of original image dimensions, so if you limit one the other scales accordingly
Bruce Young
@mutantspore
Apr 26 2016 21:29

@dagman okk well they state that all the letters will be in uppercase so you can drop off the lowercase check
here’s mine.. I doubt it’s more elgant lol

function rot13(encodedStr) {
  var codeArr = encodedStr.split("");  // String to Array
  var decodedArr = []; // Your Result goes here
  // Only change code below this line

  codeArr.forEach( function (v,i){
    var temp = v.charCodeAt();

    if (temp >= 65 && temp <= 90) { 
      temp += 13;
    if (temp > 90) {
      temp -= 26;
       }
    }
    decodedArr[i] = String.fromCharCode(temp); 
  });

  // Only change code above this line
  return decodedArr.join(""); // Array to String
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

I did as they asked and only changed code between the comments.

Islam Ibakaev
@dagman
Apr 26 2016 21:34
@mutantspore looks nice :smile:
Aryan
@aryandua
Apr 26 2016 21:44
How do you make a button agaon?
again?
HELLO??
I asked a question
alpox
@alpox
Apr 26 2016 21:45
@aryandua Chill :-)
Aryan
@aryandua
Apr 26 2016 21:45
sorry in a hurry
:smile:
alpox
@alpox
Apr 26 2016 21:45
There are several ways. <button></button> is one of them :-) or <input type="submit"></input>.
If you are in a hurry, then better use google search
Bruce Young
@mutantspore
Apr 26 2016 21:45
<button>my button</button>
Aryan
@aryandua
Apr 26 2016 21:46
ok thx
thx @mutantspore @alpox
thx @alpox
CamperBot
@camperbot
Apr 26 2016 21:47
aryandua sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 610 | @alpox | http://www.freecodecamp.com/alpox
Aryan
@aryandua
Apr 26 2016 21:47
thx @mutantspore
CamperBot
@camperbot
Apr 26 2016 21:47
aryandua sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1461 | @mutantspore | http://www.freecodecamp.com/mutantspore
Islam Ibakaev
@dagman
Apr 26 2016 22:09
hey guys check out my elegant bonfires repo on github :smile:
Juwdohr
@Juwdohr
Apr 26 2016 22:34
Does anyone know where i can upload my own html documents so people can view them?
Daniel Chia
@danielcodes
Apr 26 2016 22:44
@Juwdohr github
can anyone give me a hint as to how to get the pageids of a search? This is for the wikipedia search project
jsmancer
@jsmancer
Apr 26 2016 22:47
@Juwdohr some nice free hosting is on github.io make a repo with yourName.github.io and put your html there
Marcel Schulz
@MarcelSchulz
Apr 26 2016 22:49
@danielcodes which Id do you mean?
Daniel Chia
@danielcodes
Apr 26 2016 22:50
@MarcelSchulz the id to get to the article
Marcel Schulz
@MarcelSchulz
Apr 26 2016 22:57
Seems like the API doesnt provide the page's ids
Bruce Young
@mutantspore
Apr 26 2016 22:58
@danielcodes if you view the returned data in a “pretty” format you can see better how to access it
{
  "continue" : {
    "sroffset" : 10,
    "continue" : "-||"
  },
  "query" : {
    "searchinfo" : {
      "totalhits" : 3940
    },
    "search" : [
      {
        "size" : 150995,
        "title" : "Eminem",
        "wordcount" : 14913,
        "timestamp" : "2016-04-24T06:18:39Z",
        "ns" : 0,
        "snippet" : "Marshall Bruce Mathers III (born October 17, 1972), known professionally as <span class=\"searchmatch\">Eminem<\/span>, is an American rapper, songwriter, record producer, and actor from Detroit"
      },
      {
        "size" : 152895,
        "title" : "Eminem discography",
        "wordcount" : 6262,
        "timestamp" : "2016-04-24T20:40:26Z",
        "ns" : 0,
        "snippet" : "The following is the discography of American rapper <span class=\"searchmatch\">Eminem<\/span>. His music has been released on record labels Web Entertainment and Interscope Records, along"
      },
      {
        "size" : 120982,
        "title" : "Love the Way You Lie",
        "wordcount" : 10971,
        "timestamp" : "2016-04-18T20:17:45Z",
        "ns" : 0,
        "snippet" : "Rihanna, featuring <span class=\"searchmatch\">Eminem<\/span>, see &quot;Love the Way You Lie (Part II)&quot;. &quot;Love the Way You Lie&quot; is a song recorded by the American rapper <span class=\"searchmatch\">Eminem<\/span> with the Barbadian"
      },
      {
        "size" : 2787,
        "title" : "Music Box (Eminem song)",
        "wordcount" : 140,
        "timestamp" : "2016-04-03T11:14:10Z",
        "ns" : 0,
        "snippet" : "by American rapper <span class=\"searchmatch\">Eminem<\/span>, featured on his 2009 album Relapse: Refill, the re-release of his album Relapse.   In the song <span class=\"searchmatch\">Eminem<\/span> raps through the eyes"
      },
      {
        "size" : 17013,
        "title" : "Eminem Presents: The Re-Up",
        "wordcount" : 873,
        "timestamp" : "2016-04-13T19:50:55Z",
        "ns" : 0,
        "snippet" : "<span class=\"searchmatch\">Eminem<\/span> Presents: The Re-Up is a hip hop compilation album performed by various artists of American record label, Shady Records. The album features performances"
      },
      {
        "size" : 8404,
        "title" : "Infinite (Eminem album)",
        "wordcount" : 648,
        "timestamp" : "2016-04-26T01:55:42Z",
        "ns" : 0,
        "snippet" : "Infinite is the debut studio album by American rapper <span class=\"searchmatch\">Eminem<\/span>, released November 12, 1996, through Web Entertainment. The album was recorded at the Bass"
      },
      {
        "size" : 10370,
        "title" : "Won't Back Down (Eminem song)",
        "wordcount" : 983,
        "timestamp" : "2016-02-06T03:50:54Z",
        "ns" : 0,
        "snippet" : "&quot;Won't Back Down&quot; is a song by American hip hop artist <span class=\"searchmatch\">Eminem<\/span>, featuring American pop singer Pink, recorded as the fourth track on his seventh studio album"
      },
      {
        "size" : 7841,
        "title" : "Superman (Eminem song)",
        "wordcount" : 482,
        "timestamp" : "2016-04-17T07:25:50Z",
        "ns" : 0,
        "snippet" : "&quot;Superman&quot; is a song by American rapper <span class=\"searchmatch\">Eminem<\/span>. It features backing vocals from frequent collaborator, singer Dina Rae and was released in January 2003"
      },
      {
        "size" : 55759,
        "title" : "The Slim Shady LP",
        "wordcount" : 5277,
        "timestamp" : "2016-04-25T00:12:06Z",
        "ns" : 0,
        "snippet" : "The Slim Shady LP is the second studio album by American rapper <span class=\"searchmatch\">Eminem<\/span>. It was released on February 23, 1999, under Interscope Records and Dr. Dre's Aftermath"
      }
Marcel Schulz
@MarcelSchulz
Apr 26 2016 22:58
But I'd say you could use the title to reference to specific articles for this case since they will always be unique identifiers for wikipedia
Bruce Young
@mutantspore
Apr 26 2016 22:58
ok i tried to paste too much so it’s chopped off but you can see anyway
Marcel Schulz
@MarcelSchulz
Apr 26 2016 22:59
I think he's struggling to find the articles ids within the returned results
Bruce Young
@mutantspore
Apr 26 2016 23:00
well the title can be used to link to the actual page
Daniel Chia
@danielcodes
Apr 26 2016 23:01
ah
I did not think of that..
thanks!
the demo on the main page manages to link to articles through ids
AnnasLab
@AnnasLab
Apr 26 2016 23:04
Hello everyone, Please can someone tel me why the Menu in note at the same level of Logo (in small screen) ? thanks
http://codepen.io/AnnasLab/pen/adevPv?editors=0100
Daniel Chia
@danielcodes
Apr 26 2016 23:05
still curious as to how that was accomplished, but I think I've had enough of wikipedia's api for today haha
Bruce Young
@mutantspore
Apr 26 2016 23:05
@danielcodes well play with the api sandbox to ensure that you ask for the id back
I used a totally different search method
which actually returns the required URL
Islam Ibakaev
@dagman
Apr 26 2016 23:12
Chris Davis
@chrisdav6
Apr 26 2016 23:14
@dagman pretty dang cool man! I like the way you used jQuery to animate elements on scroll offset :+1:
AnnasLab
@AnnasLab
Apr 26 2016 23:15
@dagman well done nice work
Andrew Schmidthuber
@calicode
Apr 26 2016 23:15
working on the calculator, last time i started I was using eval() to handle order of operations. any tips for doing it without eval?
Islam Ibakaev
@dagman
Apr 26 2016 23:15
@chrisdav6 @AnnasLab thx guys. if interested check out my first repo elegant bonfires
CamperBot
@camperbot
Apr 26 2016 23:15
dagman sends brownie points to @chrisdav6 and @annaslab :sparkles: :thumbsup: :sparkles:
:star: 352 | @chrisdav6 | http://www.freecodecamp.com/chrisdav6
:star: 253 | @annaslab | http://www.freecodecamp.com/annaslab
AnnasLab
@AnnasLab
Apr 26 2016 23:23
@dagman when scrolling down your menu is unreadable so try a solid color instead of transparency, and check the text of your social media button on small device ( try "vw" istead of "px" on your css, i guess it will solve the problem) again you did nice job
Islam Ibakaev
@dagman
Apr 26 2016 23:46
@AnnasLab i already used vw :smile: but thx
CamperBot
@camperbot
Apr 26 2016 23:46
dagman sends brownie points to @annaslab :sparkles: :thumbsup: :sparkles:
:warning: dagman already gave annaslab points