These are chat archives for FreeCodeCamp/HelpFrontEnd

31st
Jan 2017
Tyler Moeller
@TylerMoeller
Jan 31 2017 00:01
@Renniesb You can create two classes for the two different colors you want. When you click the button, check which class it has and switch it to use the other class with an if statement. You could also just change the style directly, like the chosen answer here: http://stackoverflow.com/questions/16966088/changing-a-buttons-background-color-when-its-clicked
xemexpress
@xemexpress
Jan 31 2017 00:06
@TylerMoeller Your solution is good. How can I fix the white box? avoiding from fading out?
Why transition css doesn't work in this case?
Icah Banton
@remdata
Jan 31 2017 00:09
@TylerMoeller @xemexpress . Thanks.
CamperBot
@camperbot
Jan 31 2017 00:09
remdata sends brownie points to @tylermoeller and @xemexpress :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @xemexpress |http://www.freecodecamp.com/xemexpress
:star2: 1443 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Bigyan Karki
@bigyankarki
Jan 31 2017 00:13
//for replacing button with an input field.
$(".btn").click(function(){
  $(".btn").replaceWith('<input class="input-lg" type= "text" id="inputField" placeholder= "Search"></input>')
  var input = document.getElementById("inputField").value;
  console.log("input");
});
@TylerMoeller how can i check if input has the value or not
thorugh developers tool?
it doesnt show up anything
Rennie Bevineau
@Renniesb
Jan 31 2017 00:17
thanks
for some reason my changes don't work well with jsfiddle
when I write code in my editor I'm sure it will work
I don't think I know how to use jsfiddle well
Tyler Moeller
@TylerMoeller
Jan 31 2017 00:22

@xemexpress The solution I gave applies to the whole body, you could choose to apply it to individual elements you want to fade instead.

$("box1, box2, box3, etc..").css("background-color", someRandomColor).fadeOut(1000, function() {
  //make any other style changes, html updates, etc..
}).fadeIn(1000);

I'll take a closer look to see why CSS transitions don't work

xemexpress
@xemexpress
Jan 31 2017 00:24
@TylerMoeller thanks
CamperBot
@camperbot
Jan 31 2017 00:24
xemexpress sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1444 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 31 2017 00:25
@bigyankarki When you click the button, you're replacing it with an <input> field and checking the value all at the same time. The user has to enter something first before you can check if it has a value.
Bigyan Karki
@bigyankarki
Jan 31 2017 00:32
@TylerMoeller so i should wait till the user hits enter?
Tyler Moeller
@TylerMoeller
Jan 31 2017 00:32
@bigyankarki Yes, and maybe also add a search button/icon next to the text field so they can use that too.
This is an animated example I made yesterday: https://s.codepen.io/TylerMoeller/pen/oBpNNp
Too much animation, but gives the general idea...
Tyler Moeller
@TylerMoeller
Jan 31 2017 00:42
@xemexpress I can't figure out why your background CSS transition won't work... curious now :) The code works fine in isolation: https://s.codepen.io/TylerMoeller/pen/wgpZYd
Bigyan Karki
@bigyankarki
Jan 31 2017 00:48
//for replacing button with an input field.
$(".btn").click(function(){
  $(".btn").replaceWith('<input class="input-lg" type= "text" id="inputField" placeholder= "Search"></button></input>')
});

//for th input value
$("#inputField").submit(function(){
   var input = document.getElementById("inputField").value;
  console.log(input);
});
it should work now right?
but it didnt
why is that?
xemexpress
@xemexpress
Jan 31 2017 01:07
@TylerMoeller Thanks for your help! I am still stuck at this point :) Maybe I ask later
CamperBot
@camperbot
Jan 31 2017 01:07
xemexpress sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: xemexpress already gave tylermoeller points
Moisés Man
@moigithub
Jan 31 2017 01:09
@bigyankarki input dont need a closing tag
also u have a closing button .. wheres the open tag? or probably shouldnt be there ?
Bigyan Karki
@bigyankarki
Jan 31 2017 01:12
oops ya sorry
Tyler Moeller
@TylerMoeller
Jan 31 2017 01:12
@bigyankarki A couple issues - in addition to @moigithub's comments. You need to submit a form, not an input field. The submit handler needs to run in the same function where you create the form + input, otherwise there is no code for it to attach to.
Bigyan Karki
@bigyankarki
Jan 31 2017 01:13
@moigithub what do you mean by a closing button?
oh @TylerMoeller
Moisés Man
@moigithub
Jan 31 2017 01:13
.replaceWith('<input class="input-lg" type= "text" id="inputField" placeholder= "Search"></button></input>')
Bigyan Karki
@bigyankarki
Jan 31 2017 01:14
oh :D that was from previous. i forgot to erase it :D
Bigyan Karki
@bigyankarki
Jan 31 2017 01:20
$(".btn").click(function(){
  $(".btn").replaceWith('<form><input class="input-lg" type= "text" id="inputField" placeholder= "Search"></form>')
 $("#inputField").submit(function(){
   var input = document.getElementById("inputField").value;
  getData(input);
  console.log(input);
});
});
xemexpress
@xemexpress
Jan 31 2017 01:38

@TylerMoeller Finally, I added

$("body").css("transition", "background-color 1s");

and solved the problem. I guess the problem is that the transition effect on the button which was declared after body kind of disturbed and failed the former declaration?

does it mean that Javascript would finally override all the previous CSS effect?
Tyler Moeller
@TylerMoeller
Jan 31 2017 01:48
@xemexpress Glad it's fixed, but I still don't get why lol. Will have to think some more...I didn't have to dynamically add the transition CSS to get my version working. :)
I'm sure the reason is staring right at me
avicohen123
@avicohen123
Jan 31 2017 01:49
For my weather app, I wanted to implement the F to C button by changing the url when the button is clicked from imperial to metric, however my code wouldn't work and I ended up implementing it using the formula. Could anyone tell me how I could do this. My pen is: http://codepen.io/acohen102/pen/zNpOKx
Julius Robinson
@Julius-R
Jan 31 2017 01:55

file:///Users/useruser/Desktop/untitled%20folder%202/css/imgs/banner.jpg net::ERR_FILE_NOT_FOUND

I keep getting that area everytime I try to use background-img: url(); in a seperate stylesheet

Reggie
@Reggie01
Jan 31 2017 02:09
@Julius-R what's your current url? Is it url("css/imgs/banner.jpg")?
Julius Robinson
@Julius-R
Jan 31 2017 02:10
No, that's the weird part, I have the image in a folder called imgs
it url is imgs/banner.jpg
tdellard1
@tdellard1
Jan 31 2017 02:13
hello everybody
Reggie
@Reggie01
Jan 31 2017 02:15
@Julius-R is imgs folder on same lvl as your index.html file
---project folder/
     --index.html/main.html
     --imgs/
        --banner.jpg
Julius Robinson
@Julius-R
Jan 31 2017 02:16
Yes
--profect folder/
--index.html
--css
--imgs/
--banner.jpg
Reggie
@Reggie01
Jan 31 2017 02:20

@Julius-R your error is saying that in this path

file:///Users/useruser/Desktop/untitled%20folder%202/css/imgs/banner.jpg

I can't find banner.jpg. So according to this file path it is checking in your css folder for imgs folder for file banner.

Julius Robinson
@Julius-R
Jan 31 2017 02:21
@Reggie01 That's odd. Well here's the thing, whenever I add <style> tags to the index.html, it works, it's only when I use an external .css page I get that error
Ashan Mohammed
@AshanMohammed
Jan 31 2017 02:23
hello, Can anybody help me with freecodecamp random quotes challenge. I have done everything except tweeting the quote directly from the site.
Can anybody help with it??
Reggie
@Reggie01
Jan 31 2017 02:27
@Julius-R is your css on the same level or your css inside a css folder
Julius Robinson
@Julius-R
Jan 31 2017 02:27
In a css folder
Reggie
@Reggie01
Jan 31 2017 02:29

@Julius-R You have to go up one level in your path to access imgs folder.

url("../imgs/banner.jpg")

This ../ <-- takes you up one folder level.

Julius Robinson
@Julius-R
Jan 31 2017 02:33
That worked! Thanks! @Reggie01
CamperBot
@camperbot
Jan 31 2017 02:33
julius-r sends brownie points to @reggie01 :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @reggie01 |http://www.freecodecamp.com/reggie01
Ruben
@rubenjoy
Jan 31 2017 03:10
may I ask material-ui here?
Reggie
@Reggie01
Jan 31 2017 03:14
@rubenjoy you can ask the question. Nobody may know the answer since it's not part of the curriculum. You probably want to ask here, HelpDataViz, HelpBackEnd and general chat. Hopefully, somebody can help you in the one of the channels.
Ctiller93
@Ctiller93
Jan 31 2017 04:13
So, can someone help me understand this bit of twitter code on their site?
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>
I mean it works, and it does everything they say it does, only problem is I'm having a really hard time understanding exactly what's going on here.
Joe Escobedo
@joeEscob1023
Jan 31 2017 04:26
what does iterate though an array mean?
avicohen123
@avicohen123
Jan 31 2017 04:33
Can anyone tell me why my pen is not working on mobile?http://codepen.io/acohen102/pen/zNpOKx/
JD Tadlock
@jdtdesigns
Jan 31 2017 04:40
@Ctiller93 It's not really coded to be readable. It's basically just creating a function that takes 3 args which are passed in at the end (document, 'script',...) It then inserts the script into the document then finds it and creates an element which is add to the DOM and then adds the scripts before that element.
Cristopher Encarnacion
@chris0715
Jan 31 2017 04:42
Need help to understand something with react.
Julius Robinson
@Julius-R
Jan 31 2017 04:51
How do I link an href to a particular part of a page?
Cristopher Encarnacion
@chris0715
Jan 31 2017 04:54
@Julius-R its really easy man
Julius Robinson
@Julius-R
Jan 31 2017 04:54
@chris0715 I think I have it figured out. Do I just set the href to the class that the part of the page is wrapped around?
Cristopher Encarnacion
@chris0715
Jan 31 2017 04:55
@Julius-R All you have to do for example is to assign and Id atribute to the part you want your link to take you to and then on the href='#yourdivId'
Julius Robinson
@Julius-R
Jan 31 2017 04:55
@chris0715 thanks man!
CamperBot
@camperbot
Jan 31 2017 04:55
julius-r sends brownie points to @chris0715 :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @chris0715 |http://www.freecodecamp.com/chris0715
Cristopher Encarnacion
@chris0715
Jan 31 2017 04:56
T_T anyone that can give me a hand with ReactJS
Faddah Wolf
@faddah
Jan 31 2017 04:58
my first FCC project assignment for code review, the HTML/CSS tribute page — https://codepen.io/faddah/pen/qRXmL
Cristopher Encarnacion
@chris0715
Jan 31 2017 05:09
@TacoJoe Let me try to say it in a simple way it means navigate through everything the array has inside.
@faddah Somehow is giving a 404 page.. was that your intention?
ellapham85
@ellapham85
Jan 31 2017 05:15
T
Cristopher Encarnacion
@chris0715
Jan 31 2017 05:16
@ellapham85 Hello
Chase
@Athabasco
Jan 31 2017 05:35
On my random quote machine, I can't change the quote... Somebody please help
http://codepen.io/Athabasco/pen/LxeMEX
For some reason on here you can't even see the quote.
Go to the codepen itself to see the quote
Lallo Vigil
@lalov1
Jan 31 2017 05:57
Could someone tell me why I can't get the Twitch online and offline to filter. Also, how am I supposed to see if the user is online? https://codepen.io/lalov1/pen/bZjGvA
Aman saxena
@neille2406
Jan 31 2017 06:03
how to add a background image using div?
AudioGen
@AudioGen
Jan 31 2017 06:05

@neille2406

probably provide a id to the div

#divId{
   background-image: #ffaaff;
}
Aman saxena
@neille2406
Jan 31 2017 06:06
not working
AudioGen
@AudioGen
Jan 31 2017 06:07
@neille2406 do you know how to use an id property?
Aman saxena
@neille2406
Jan 31 2017 06:07
and also how to leave some space at the top and then give the background image which covers all of the page
ya i knw @AudioGen
AudioGen
@AudioGen
Jan 31 2017 06:08
@neille2406 do you want to go to jsfiddle and show me your issue?
Chase
@Athabasco
Jan 31 2017 06:08
http://codepen.io/Athabasco/pen/LxeMEX/ how do I get it to refresh the quote?
h1tag
@h1tag
Jan 31 2017 06:09
@AudioGen you should put a url as a value for the background-image, like this:
#divId{
   background-image: url("img url");
}
Aman saxena
@neille2406
Jan 31 2017 06:09
i tried that @fortMaximus
Chase
@Athabasco
Jan 31 2017 06:10
@neille2406 how do you want to use your id
h1tag
@h1tag
Jan 31 2017 06:10
@neille2406 are you writing ur code on codepen?
Aman saxena
@neille2406
Jan 31 2017 06:10
no just notepad++
Chase
@Athabasco
Jan 31 2017 06:10
<div id="id-name-here"></div>
Aman saxena
@neille2406
Jan 31 2017 06:10
<div id=""><div>
AudioGen
@AudioGen
Jan 31 2017 06:10
@fortMaximus Oh yah that was my bad
Aman saxena
@neille2406
Jan 31 2017 06:10
then in style
h1tag
@h1tag
Jan 31 2017 06:11
@neille2406 try to paste it on codepen and give us the url to the pen
Chase
@Athabasco
Jan 31 2017 06:11
@neille2406 in style use #id-name-here {
}
Aman saxena
@neille2406
Jan 31 2017 06:11
sure wait
AudioGen
@AudioGen
Jan 31 2017 06:11
@fortMaximus provided the proper way
@fortMaximus can u tell now whats the mistake?
h1tag
@h1tag
Jan 31 2017 06:18
@neille2406 how do you select a class in css?
Aman saxena
@neille2406
Jan 31 2017 06:19
i didnt get u? @fortMaximus
h1tag
@h1tag
Jan 31 2017 06:19
@neille2406 I'm asking to give you hints
you know there's a class and there's an id, right?
Aman saxena
@neille2406
Jan 31 2017 06:20
.class name
h1tag
@h1tag
Jan 31 2017 06:20
and id?
Aman saxena
@neille2406
Jan 31 2017 06:20
ya for class dot is used and for id # is used
correct?
h1tag
@h1tag
Jan 31 2017 06:21
ok, go look what selector you are using for the background class in the css section
correct
Joe Escobedo
@joeEscob1023
Jan 31 2017 06:21

Note: We omit the second and third arguments since we only need the value

array = array.filter(function(val) {
return val !== 5;
});

what does that mean?

Aman saxena
@neille2406
Jan 31 2017 06:23
still not getting it @fortMaximus
h1tag
@h1tag
Jan 31 2017 06:24
@neille2406 you are using an id selector instead of a class selector for the background class in the css section/code
Aman saxena
@neille2406
Jan 31 2017 06:24
i have changed it even after tht im not getting it
if i put all tht in body then i get the image
Eric
@ericsolomon21
Jan 31 2017 06:26
Hey guys, Im working on the twitch.tv app and I am having a jQuery issue I think. I am trying to run a jQuery function through a loop and it isn't working. I have console.log(streamUrl); before the jQuery function and it is looping through the array fine, but when I put console.log(streamUrl); after the jQuery function, it calls the last string in the array each time....any Ideas?
for (var j = 0; j < tvChannels.length; j++){
   var streamUrl = "https://api.twitch.tv/kraken/streams/" + tvChannels[j] +"?client_id=5m1f6u3xqnrk5ucsc03tesyq11clj9"
   var userUrl = "https://api.twitch.tv/kraken/users/" + tvChannels[j] +"?client_id=5m1f6u3xqnrk5ucsc03tesyq11clj9"
    console.log(streamUrl);
  $.getJSON(streamUrl, function(data0) {
    console.log(streamUrl);
h1tag
@h1tag
Jan 31 2017 06:27
@neille2406 maybe because the div is empty (i.e there's no elements inside the <div class="background"></div>)
Aman saxena
@neille2406
Jan 31 2017 06:28
ok ill try it with writing something
still not working @fortMaximus
Chase
@Athabasco
Jan 31 2017 06:30
@ericsolomon21 Do you have a quick moment to help me with the random quote machine?
Eric
@ericsolomon21
Jan 31 2017 06:30
@Athabasco whats up?
Chase
@Athabasco
Jan 31 2017 06:33
@ericsolomon21 http://codepen.io/Athabasco/pen/LxeMEX/ I can't get another quote to pop up.
@ericsolomon21 You'll have to go to the codepen itself to see my work.
h1tag
@h1tag
Jan 31 2017 06:34
@neille2406 the url you are using for the image is giving an error. Try this website for free images: https://pixabay.com/en/
Chase
@Athabasco
Jan 31 2017 06:34
@ericsolomon21 Currently all you can do is click to make it pop up and down. And double click for it to fade.
Aman saxena
@neille2406
Jan 31 2017 06:36
@fortMaximus how do i give an image in codepen?
h1tag
@h1tag
Jan 31 2017 06:37
@neille2406 you mean upload?
Aman saxena
@neille2406
Jan 31 2017 06:37
ya
check it now
h1tag
@h1tag
Jan 31 2017 06:41
@neille2406 try this link instead: https://cdn.pixabay.com/photo/2016/12/26/17/28/background-1932466_960_720.jpg for the background image
Eric
@ericsolomon21
Jan 31 2017 06:42
@Athabasco it doesn't look like you are calling the function that gets a new quote when you click.
Chase
@Athabasco
Jan 31 2017 06:42
@ericsolomon21 Yes, how do I make that function.
@fortMaximus check it now the image doesn't span the whole page
h1tag
@h1tag
Jan 31 2017 06:46
@neille2406 of course it won't, it's now applied to background class only :worried:
Aman saxena
@neille2406
Jan 31 2017 06:48
then how do i get it for the full background? :worried:
Eric
@ericsolomon21
Jan 31 2017 06:48
@Athabasco this is what my JS looked like on that one. I called the getQuote function when the document was ready and then I had to call it again when it was clicked.
$(document).ready(function() {    
  $.getJSON(url, getQuote, 'jsonp');    
});

$("#qButton").click(function() {
  $.getJSON(url, getQuote, 'jsonp');  
});
Chase
@Athabasco
Jan 31 2017 06:48
@ericsolomon21 Oh! And how did you setup the tweet bit?
h1tag
@h1tag
Jan 31 2017 06:49
@neille2406 you did it before, you should know how
Eric
@ericsolomon21
Jan 31 2017 06:51
@Athabasco this was my JS code. I used a different api and I didn't really have any animations. You are way better at CSS and animations than I am lol
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";

$(document).ready(function() {    
  $.getJSON(url, getQuote, 'jsonp');    
});

$("#qButton").click(function() {
  $.getJSON(url, getQuote, 'jsonp');  
});

var getQuote = function(qLink) {
  $(".quote").text(qLink.quoteText);
  var qTweet = 'https://twitter.com/intent/tweet?text=' + qLink.quoteText + ' - ' + qLink.quoteAuthor;
  $("#source").text('- ' + qLink.quoteAuthor);
  $(".twitter").attr("href", qTweet);
};
Chase
@Athabasco
Jan 31 2017 06:52
@ericsolomon21 Thanks for the help!
CamperBot
@camperbot
Jan 31 2017 06:52
athabasco sends brownie points to @ericsolomon21 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ericsolomon21
Chinmaya B
@sharang108
Jan 31 2017 07:22
@TylerMoeller Okay thanks for the advice
CamperBot
@camperbot
Jan 31 2017 07:22
sharang108 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1445 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
JamesSloan
@JamesSloan
Jan 31 2017 07:40
Hey, just submitted my first project but would like help improving it
h1tag
@h1tag
Jan 31 2017 07:41
@JamesSloan you didn't make this
JamesSloan
@JamesSloan
Jan 31 2017 07:41
When I scale the page up in size, the list and image expand all the way to the edge of the well. I would like to make it so they scale to a certain point then stop at that size
h1tag
@h1tag
Jan 31 2017 07:42
you should write your own code
JamesSloan
@JamesSloan
Jan 31 2017 07:42
I copied all the text and picture, but all the code is mine
Was easier to check it looked correct to just copy the material (and I was feeling uninspired)
though thanks for the compliment I guess :)
h1tag
@h1tag
Jan 31 2017 07:43
oh, sorry but you saw the code, right? @JamesSloan
JamesSloan
@JamesSloan
Jan 31 2017 07:44
https://codepen.io/freeCodeCamp/full/NNvBQW this is the original. The list and image stay in the center (with a margin) at full screen size
@fortMaximus Yes...
Oh no
no i did not
only line i copied was the only line of css
Coz it sounded like he wanted you to on the vid. only affects the top margin
Of course I looked at bootstrap stuff and copied class names every now and then
h1tag
@h1tag
Jan 31 2017 07:47
@JamesSloan and you figured the other stuff on your own?
JamesSloan
@JamesSloan
Jan 31 2017 07:47
Yup
h1tag
@h1tag
Jan 31 2017 07:47
good job
JamesSloan
@JamesSloan
Jan 31 2017 07:47
thanks :)
Just stuck with how to impose a maximum div size i guess
h1tag
@h1tag
Jan 31 2017 07:51
you can use bootstrap
and when you saw the class names you also saw other things and took inspiration from it? ;)
JamesSloan
@JamesSloan
Jan 31 2017 07:54
from bootstrap websites? not that much for this, though I saw a cool design with things popping into the screen as you scrolled down.
Sorin Ruse
@sorinr
Jan 31 2017 07:54
@neille2406 your div id=background has a height equal to the font height of text "background-image" so the background-size:cover will cover only that space. think of adding some height to the div will show you better what happens
h1tag
@h1tag
Jan 31 2017 07:55
@JamesSloan did you pass the bootstrap challenges?
JamesSloan
@JamesSloan
Jan 31 2017 07:57
Think so
like I went through all the tutorials up till this point which covered bootstrap @fortMaximus
h1tag
@h1tag
Jan 31 2017 07:58
@sorinr he wanted to add a background image and a menu bar on top of it. I told him to put the background for the whole page and then use z-index: 1; for the menu to make the menu appear on top of it
Sorin Ruse
@sorinr
Jan 31 2017 08:00
@fortMaximus yes its ok like that. i would make the z-index even higher to be sure no other element on page will overlap the menu when scrolling if he decides to make it fixed top
h1tag
@h1tag
Jan 31 2017 08:01
@JamesSloan then use what you learned in the bootstrap tutorials, it will solve your problem
@sorinr how much higher?
Sorin Ruse
@sorinr
Jan 31 2017 08:04
@fortMaximus it can be like z-index: 100 :)
h1tag
@h1tag
Jan 31 2017 08:06
@JamesSloan oh, wait. You are using bootstrap. my bad. You should use <div class="fluid-container"> instead of <div class="container"
@sorinr can you help me now? I'm on the Twitch project
JamesSloan
@JamesSloan
Jan 31 2017 08:09
@fortMaximus class="fluid-container" or "container-fluid"? Already had "container-fluid" in the first div
Sorin Ruse
@sorinr
Jan 31 2017 08:10
@fortMaximus what problems do u have?
JamesSloan
@JamesSloan
Jan 31 2017 08:11
ahh this is what i was after: <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
h1tag
@h1tag
Jan 31 2017 08:11
@JamesSloan I'm sorry, I confused you, it's container-fluid. Did you just add bootstrap or it was there before?
JamesSloan
@JamesSloan
Jan 31 2017 08:11
Always there
make sure you're looking at the first codepen I linked
h1tag
@h1tag
Jan 31 2017 08:12
:facepunch: me
@JamesSloan so, there is no bootstrap code in ur project, you should add it to get the desired result
Muhammad Hasham
@MohammadHasham
Jan 31 2017 08:14

http://codepen.io/Mohammad_Hasham/pen/VjEBqN?editors=1100

Did that "todo list" again.Please check that.

@sorinr
h1tag
@h1tag
Jan 31 2017 08:14
and container and container-fluid are both right, I think @JamesSloan
JamesSloan
@JamesSloan
Jan 31 2017 08:14
oops, accidentally deleted it. definitely have bootstrap in there.
but thanks for the help
h1tag
@h1tag
Jan 31 2017 08:17
@JamesSloan but you're not using the necessary classes to determine the size
col-xs-*, col-md-* ... etc
JamesSloan
@JamesSloan
Jan 31 2017 08:22
@fortMaximus Yeah, noticed that. Because everything was in one column i didn't think it was necessary
@fortMaximus I thought the class="text-centered" was also bootstrap.
I totally get why there was confusion now :)
h1tag
@h1tag
Jan 31 2017 08:24
@sorinr I used the hard coded object as instructed in the project instructions. I get this error: "Uncaught TypeError: Cannot read property 'display_name' of null" and some warning. I tried putting if statements to avoid the cases when this property is null but had no success
Sorin Ruse
@sorinr
Jan 31 2017 08:24
@MohammadHasham think you need to toggle on/off textDecoration on click event
@fortMaximus can u share the pen?
h1tag
@h1tag
Jan 31 2017 08:24
@JamesSloan yes, it's bootstrap but it only centers text
JamesSloan
@JamesSloan
Jan 31 2017 08:26
Yeah. well I've learnt to start the design with those column classes in mind. That and I don't have to have columns add up to 12. They can be less to have empty space for that size
Muhammad Hasham
@MohammadHasham
Jan 31 2017 08:27
@sorinr okay i'll take a look at it.
thanks @sorinr
CamperBot
@camperbot
Jan 31 2017 08:27
:star2: 1149 | @sorinr |http://www.freecodecamp.com/sorinr
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 31 2017 08:31
@fortMaximus it should be link += obj[i].display_name; not link += obj[i].stream.display_name;
h1tag
@h1tag
Jan 31 2017 08:33
@sorinr
the "display_name" is inside "stream"
why it should be link += obj[i].display_name;?
Sorin Ruse
@sorinr
Jan 31 2017 08:36
@fortMaximus its not. add a console.log like this: } else status = "Offline"; console.log(obj[i]); and you will see the structure of the obj[i]
h1tag
@h1tag
Jan 31 2017 08:40
@sorinr I still see that it's inside stream :worried:
Sorin Ruse
@sorinr
Jan 31 2017 08:41
@fortMaximus take a look at the obj when stream is null
h1tag
@h1tag
Jan 31 2017 08:42
@sorinr so it's outside stream only when the stream is null?
Sorin Ruse
@sorinr
Jan 31 2017 08:43
@fortMaximus yes
h1tag
@h1tag
Jan 31 2017 08:44
@sorinr so I should use link += obj[i].display_name; only in the case when the stream is null
Sorin Ruse
@sorinr
Jan 31 2017 08:45
@fortMaximus yes
h1tag
@h1tag
Jan 31 2017 08:47
@sorinr thank you :smile:
CamperBot
@camperbot
Jan 31 2017 08:47
fortmaximus sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1150 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 31 2017 08:51
@fortMaximus welcome
@MohammadHasham welcome
c0d0er
@c0d0er
Jan 31 2017 09:15
any idea about my game of life http://codepen.io/c0d0er/pen/apLNPV/
Muhammad Hasham
@MohammadHasham
Jan 31 2017 09:15
is it okay if i skip the "electronic game" project in eloquent javascript?
Sorin Ruse
@sorinr
Jan 31 2017 09:17
@MohammadHasham here hou you can make the toggle in todo app:
document.getElementById('list').addEventListener('click',function(x){
    if (x.target.style['text-decoration'] == "line-through"){
      x.target.style.textDecoration = "none" ;
    } else {
      x.target.style.textDecoration = "line-through" ;      
    }
});
@MohammadHasham if the challenge has an * you must take it sooner or later
Chase
@Athabasco
Jan 31 2017 10:03
Can somebody please help explain to me why my tweet button won't work?
http://codepen.io/Athabasco/pen/LxeMEX/
You will have to go to the pen itself, not the windowed view they have here.
Muhammad Hasham
@MohammadHasham
Jan 31 2017 10:08
@sorinr no that's not an FCC challenge.It's a chapter project of eloquent JS.
Chris Cullen
@123xylem
Jan 31 2017 10:57
Hi. Im tryin to link my .js file to my html. THe js file is in the same folder as the html and im using a script tag with src = to add the js... but when I do it cant find it and i get this error Failed to load resource: net::ERR_FILE_NOT_FOUND..
please help!
Chris Cullen
@123xylem
Jan 31 2017 11:20
Quick Q: When I try to load my existing .js file at the folowing adres using a script tag it gives this error message: file:///C:/Users/Chris/Documents/Coding/SublimeProjects/random.js Failed to load resource: net::ERR_FILE_NOT_FOUND
However the js file exists in the same folder as the .html file... It can also be seen under sources but it just wont load or something. Please help!
Marianissimus
@Marianissimus
Jan 31 2017 11:34
@123xylem did you solve this? how do you connect to your file? did you try <script src="random.js"></script>?
Mark
@markellllo1998
Jan 31 2017 11:45
The task Build a Tribute Page you need to build your page, or just copy an example?
h1tag
@h1tag
Jan 31 2017 11:50
@markellllo1998 what do you mean by copy? copy the code?
Chris Cullen
@123xylem
Jan 31 2017 12:10
@Marianissimus no and yes
Marianissimus
@Marianissimus
Jan 31 2017 12:13
so it must be a bad src, right? a simple path ("random.js") should work, if in the same folder. try pasting the script tag here, so we can see.
Clyde Lobo
@oppiniated
Jan 31 2017 12:25
@Athabasco Works for me
Yakup Emre Kekec
@Emre58
Jan 31 2017 12:26
Hello guys, any idea where I can share my project for feedback?
Ken Haduch
@khaduch
Jan 31 2017 12:28
@Emre58 you can post here or in the code review room
Yakup Emre Kekec
@Emre58
Jan 31 2017 12:29
oh there is a code review room :O awesome
h1tag
@h1tag
Jan 31 2017 12:29
@khaduch can you post the code review link
Yakup Emre Kekec
@Emre58
Jan 31 2017 12:29
^^
Ken Haduch
@khaduch
Jan 31 2017 12:29
Yes @Emre58
h1tag
@h1tag
Jan 31 2017 12:30
@khaduch code review room link*
Ken Haduch
@khaduch
Jan 31 2017 12:31
Just a minute I'm on my phone have to go to computer
h1tag
@h1tag
Jan 31 2017 12:32
@khaduch Thanks. nvm, I found it :smile:
CamperBot
@camperbot
Jan 31 2017 12:32
fortmaximus sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2387 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jan 31 2017 12:34
@fortMaximus - okay - but just in case @Emre58 is looking for it: https://gitter.im/FreeCodeCamp/CodeReview
Yakup Emre Kekec
@Emre58
Jan 31 2017 12:35
@khaduch Thanks a lot :+1:
CamperBot
@camperbot
Jan 31 2017 12:35
emre58 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2388 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jan 31 2017 12:35
@Emre58 :+1:
macieqx
@macieqx
Jan 31 2017 12:37
Can i get your opinion on Rock-Paper-Scissors game?
Live at : www.chcetam.pl/kpn
Marianissimus
@Marianissimus
Jan 31 2017 12:39
@macieqx I win so much and have no idea why:) Ok, it's fun, but I find the hover effect annoying - maybe tune it down a little? Good luck.
macieqx
@macieqx
Jan 31 2017 12:40
Thank you @Marianissimus
CamperBot
@camperbot
Jan 31 2017 12:40
macieqx sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @marianissimus |http://www.freecodecamp.com/marianissimus
macieqx
@macieqx
Jan 31 2017 12:40
You're just lucky, cause it's Math.random function :D
Muzaffar Hussain
@Muzaffarhssn5
Jan 31 2017 12:44

Hi... Can someone help me with the code... I am trying to change the quote with a click in random quote machine. The color transition works fine but the quote loads only once.. Please point out my mistake in the code.

http://codepen.io/mojo5/pen/vgxBNB?editors=0110

Muzaffar Hussain
@Muzaffarhssn5
Jan 31 2017 12:56

Hi... Can someone help me with the code... I am trying to change the quote with a click in random quote machine. The color transition works fine but the quote loads only once.. Please point out my mistake in the code.

http://codepen.io/mojo5/pen/vgxBNB?editors=0110
Anyone there???

Ken Haduch
@khaduch
Jan 31 2017 12:57
@Muzaffarhssn5 - I just stopped by - I'll try to size it up...
Muzaffar Hussain
@Muzaffarhssn5
Jan 31 2017 12:57
@khaduch Okay....
@khaduch that so nice of you
Muzaffar Hussain
@Muzaffarhssn5
Jan 31 2017 13:05
@khaduch It seems to work just on this window snippet not when it is expanded...
thank you.. I have got it working.... @khaduch
CamperBot
@camperbot
Jan 31 2017 13:08
:star2: 2389 | @khaduch |http://www.freecodecamp.com/khaduch
muzaffarhssn5 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Jan 31 2017 13:13
@Muzaffarhssn5 - I was looking through the code and it looks like you are assigning a new click handler to the button each time you invoke the function? I find that it is updating the quotes now, but as I click more, the colors are changing several times, probably as each click handler is invoked? It's generally not a good idea to add more click handlers to the same element like this. You should probably change that behavior...
Muzaffar Hussain
@Muzaffarhssn5
Jan 31 2017 13:20
@khaduch yeah i noticed that just now in a new tab... Can you suggest a better way??
Ken Haduch
@khaduch
Jan 31 2017 13:29
@Muzaffarhssn5 - it looks like you are defining a new click function mostly to change the color? I would just put that color selection code into the place where you are updating the quote, so that it gets the quote and updates that, and then invokes the changeColor function (just don't add a new click handler within the functions that you are invoking multiple times - only do that one time within the "document ready" code.
Muzaffar Hussain
@Muzaffarhssn5
Jan 31 2017 13:39

@khaduch There is a little improvement.. But still not fixed.. Can you review it once again.... Thank you...

http://codepen.io/mojo5/pen/vgxBNB?editors=1010

CamperBot
@camperbot
Jan 31 2017 13:39
muzaffarhssn5 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: muzaffarhssn5 already gave khaduch points
Ken Haduch
@khaduch
Jan 31 2017 13:48
I'll check in a while. Tied up for the moment
Ilona
@ilonchik
Jan 31 2017 13:50
Hi, can somebody help me here? is this completely wrong? https://codepen.io/ilonavardanyan/pen/ObqWpW
Tom
@moT01
Jan 31 2017 14:00
@ilonchik its wrong, but kinda close
your on.click function doesn't need any arguments, ...but your .getJSON does
Ilona
@ilonchik
Jan 31 2017 14:08
@moT01 thank you, I changed it but nothing happened((
CamperBot
@camperbot
Jan 31 2017 14:08
ilonchik sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @mot01 |http://www.freecodecamp.com/mot01
taltmann42
@taltmann42
Jan 31 2017 14:28
@ilonchik there is a red exclamation mark in your JS-panel. when you click on it it shows you where you have a syntax-error:
function()
}
Husam
@7usam
Jan 31 2017 14:36
Hey guys
any chat rooms here for python other than FreeCodeCamo/Python ...
cause its a very inactive room
Ilona
@ilonchik
Jan 31 2017 14:37
@taltmann42 yeah, I changed something while you were looking, but now there isn't any, and I still don't know what's wrong
Husam
@7usam
Jan 31 2017 14:42
@jdtdesigns thanks a lot bro but its a russian room .. :(
CamperBot
@camperbot
Jan 31 2017 14:42
7usam sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 893 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
taltmann42
@taltmann42
Jan 31 2017 14:44

@ilonchik okay I see two problems

  1. getJSON is in your case the wrong function, because when you open the URL you provide in a new tab, you see it's just lines, not even an array of arrays, but just lines with [quote, person]. This is unfortunately no valid JSON-format.
    You can approach this in different ways:
    1.1 Use an API that provides JSON - would be the easiest, as you can then use the data right-away
    1.2 Read the file from the current url line by line and split the text, so you can get the values inside the brackets. You can't handle it like an array, because it's just text.

  2. You set the html of #quote to Math.floor(Math.random()*url.length)
    2.1 url.length will always be the same, because the url is the link you're using to get your data, so it has nothing to do with the underlying data.
    2.2 even if you'd manage to get the length of all the entries in the data, you'll set the value of #quote to just a number

@ilonchik additional note to 1.2: the function there would be jQuery.get(... instead of jQuery.getJSON(...
Lykedii
@Lykedii
Jan 31 2017 14:45
hi everyone, please how/where do i upload my image for the tribute page
?
JD Tadlock
@jdtdesigns
Jan 31 2017 14:46
@7usam Hmm, doesn't seem like there's a lot.
There's a django channel, but it's not super active
last chat was yesterday
taltmann42
@taltmann42
Jan 31 2017 14:47
@Lykedii you can right click on an image on the internet and copy the address, then you can paste that address to codepen
Lykedii
@Lykedii
Jan 31 2017 14:48
thanks a lot @taltmann42 .
CamperBot
@camperbot
Jan 31 2017 14:48
lykedii sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Husam
@7usam
Jan 31 2017 14:48
@jdtdesigns do u have any background on Python its a simple problem but since I'm a beginner I don't know how to fix it
how to get the image width to span the full page?
Ilona
@ilonchik
Jan 31 2017 14:49
@taltmann42 thank you very much)
CamperBot
@camperbot
Jan 31 2017 14:49
ilonchik sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Jan 31 2017 14:50
@neille2406 you can add the background to body. You can't see it, because the #background has no height, so there is no place to show the background at all
@ilonchik you're welcome :thumbsup:
Aman saxena
@neille2406
Jan 31 2017 14:51
no i dont want it as background in body
taltmann42
@taltmann42
Jan 31 2017 14:52
@neille2406 then add a height to the #background div
Aman saxena
@neille2406
Jan 31 2017 14:52
when background in body i cant fix it according to my need
taltmann42
@taltmann42
Jan 31 2017 14:53
@neille2406 then add a height to the #background div :D
@neille2406 and put the background back to that element
JD Tadlock
@jdtdesigns
Jan 31 2017 14:54
@7usam I know php and js :/
Aman saxena
@neille2406
Jan 31 2017 14:58
so u mean to tell i should add anther div with id background and then change its height and width? @taltmann42
taltmann42
@taltmann42
Jan 31 2017 14:58
@neille2406 you already have a background with id background
@neille2406 and when you want the background to be in that element, the element has to have a height. Can you maybe explain what you want to achieve specifically? maybe there is still a way with adding it in another way
Aman saxena
@neille2406
Jan 31 2017 14:59
i want the image to have full width
height is perfect
@taltmann42
taltmann42
@taltmann42
Jan 31 2017 14:59
oh so it's fine now?
Aman saxena
@neille2406
Jan 31 2017 15:01
height is fine only the width i want @taltmann42
taltmann42
@taltmann42
Jan 31 2017 15:02
@neille2406 div is a block-element and has a width of 100% by default
Aman saxena
@neille2406
Jan 31 2017 15:02
im not using my image inside any div element
so should i make it inside a div element? @taltmann42
taltmann42
@taltmann42
Jan 31 2017 15:03
oh
seems like you aren't allowed to use that image
@neille2406 I assumed you want to use the image in a background right? because that's what you have in your CSS. There is no img element in your HTML
check this pen now
in this the width is coming fine
taltmann42
@taltmann42
Jan 31 2017 15:05
@neille2406 add width:100% to the image in CSS
@neille2406 then the image may look strange because you also set the height. You can use height:auto and it will scale according to the ratio
Aman saxena
@neille2406
Jan 31 2017 15:06
ok ty i guess i almost got it @taltmann42
CamperBot
@camperbot
Jan 31 2017 15:06
neille2406 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Hello911
@Hello911
Jan 31 2017 15:09
Can some explain the instruction of "repeat a string repeat a string" challenge. If the input is ("abc",3) Is the output supposed to be "abcabcabc"?
MegaTron
@KoalaPears
Jan 31 2017 15:13
On my tribute page I am trying to make it about aroldis chapman but i can get my image to show up What should I change? <h1 class"text-primary"> Aroldis Chapman</h1>
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjoz6Co1ezRAhUM_4MKHbRVAu8QjRwIBw&url=https%3A%2F%2Fwww.espn.com%2Fmlb%2Fplayer%2F_%2Fid%2F29763%2Fpedro-strop&bvm=bv.145822982,d.cGw&psig=AFQjCNEDclUySSVIS10vIxULk8ZlJ33dlA&ust=1485961762913504" />
taltmann42
@taltmann42
Jan 31 2017 15:14
@KoalaPears that's a google result, click on "Show Image" in google and use the URL which comes up then
Clyde Lobo
@oppiniated
Jan 31 2017 15:14
@KoalaPears That's not a image link, its a page
taltmann42
@taltmann42
Jan 31 2017 15:15
  • that ^
MegaTron
@KoalaPears
Jan 31 2017 15:15
oh
what could I do If i saved the picture onto my computer?
nvm I got it
@taltmann42 @oppiniated Thanks
CamperBot
@camperbot
Jan 31 2017 15:18
koalapears sends brownie points to @taltmann42 and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @taltmann42 |http://www.freecodecamp.com/taltmann42
:cookie: 529 | @oppiniated |http://www.freecodecamp.com/oppiniated
Marianissimus
@Marianissimus
Jan 31 2017 15:18
you could move / upload it and use a relative path. img src="image.jpg"
Massguy
@Massguy
Jan 31 2017 15:25

.pageThree{
background:url("https://images.unsplash.com/photo-1471258497973-fdbc1f0c0b1c?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=);
background-size:cover;
height:800px;
padding-top:5%;

}

guys could you tell me what im doing wrong? im trying to have this image in my portfolio background...

the other two pages seems working just this

Clyde Lobo
@oppiniated
Jan 31 2017 15:25
@Massguy and the HTML?
Massguy
@Massguy
Jan 31 2017 15:26
<div class="pageThree" id="#p3">

</div>
Gulsvi
@gulsvi
Jan 31 2017 15:26
@Massguy Looks like you are missing a " at the end of the URL
after crop=, but you don't need quotes around that url since there are no spaces I believe
Massguy
@Massguy
Jan 31 2017 15:27
lol doh thanks @SkyCoder01 but its came out as an image rather than a background for some weird reason
CamperBot
@camperbot
Jan 31 2017 15:27
massguy sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 68 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Fabio Di Pane
@saylos
Jan 31 2017 15:28
hi guys, I'm trying to make the wikimedia api work, but there's no way to make it done.
https://codepen.io/saylos/pen/ygoGEW?editors=0010
pls help
Gulsvi
@gulsvi
Jan 31 2017 15:29
@Massguy maybe there's a missing closing </div> before that section?
Clyde Lobo
@oppiniated
Jan 31 2017 15:30
@saylos {code: "nosearch", info: "The "search" parameter must be set.",…} * : "See https://en.wikipedia.org/w/api.php for API usage." code : "nosearch" info : "The "search" parameter must be set." servedby : "mw1193"
Fabio Di Pane
@saylos
Jan 31 2017 15:33
@oppiniated how did you get this answer? I've read all the documentation, but I can't get what I'm doing wrong
@oppiniated did you use an app to check the code?
Gulsvi
@gulsvi
Jan 31 2017 15:35
Is it better to select with a ID or a class name with jQuery?
Marianissimus
@Marianissimus
Jan 31 2017 15:36
If you want to select just one element, an ID.
Gulsvi
@gulsvi
Jan 31 2017 15:37
thanks @Marianissimus
CamperBot
@camperbot
Jan 31 2017 15:37
skycoder01 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @marianissimus |http://www.freecodecamp.com/marianissimus
Gulsvi
@gulsvi
Jan 31 2017 15:38
If I select by ID with jQuery, I also need a class on the element for CSS though, seems like a bunch of extra code
Marianissimus
@Marianissimus
Jan 31 2017 15:39
it's fine, don't worry.
or you can select it through other methods, but what if you change something afterwards and forget about it? (for instance: first child of a div, or sibling , etc). Imho, the safest bet is ID.
Gulsvi
@gulsvi
Jan 31 2017 15:46
I was thinking, what if I use id="search" for a search box, and then a month later decide I want another search box on the page. I have to remember that id="search" is already taken, when I could have been selecting and styling with class="search" the whole time
seems like selecting with ID is faster though...
Marianissimus
@Marianissimus
Jan 31 2017 15:49
faster and safer, but maybe someone else knows better. guys?
taltmann42
@taltmann42
Jan 31 2017 15:50
@SkyCoder01 styling yes. Using classes for elements that occur more often is better. But imagine selecting the searchboxes in JS via classes. Maybe you want to have a different behaviour in one searchbox, so to differentiate between them you can give them IDs and register your listener to those elements without interfering with any others
Marianissimus
@Marianissimus
Jan 31 2017 15:50
also, if you use a soft like sublime text, you will see in real time if the name of a class / id is already taken and you'll have a warning (it appears as autocomplete)
Hello911
@Hello911
Jan 31 2017 15:53
What does this mean? count >>= 1
Gulsvi
@gulsvi
Jan 31 2017 15:53
@taltmann42 thanks, but don't we do $('.search')[0] and $('.search')[1] if we want to select the first and second, etc... element
CamperBot
@camperbot
Jan 31 2017 15:53
skycoder01 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Gulsvi
@gulsvi
Jan 31 2017 15:53
maybe it's just philosophical at this point lol
taltmann42
@taltmann42
Jan 31 2017 15:54
@SkyCoder01 you could do that, but what if the new searchbox comes before the currently existing one? the existing one previously was at index 0 but now it's in index 1
@SkyCoder01 and then you add another one that can scramble the order again
Clyde Lobo
@oppiniated
Jan 31 2017 15:55
@saylos I checked the response to the XHR request in the networks tab
Gulsvi
@gulsvi
Jan 31 2017 15:56
@taltmann42 yeah, makes sense. It can break easily, probably worth the extra html code to add an ID
Fabio Di Pane
@saylos
Jan 31 2017 15:58
@oppiniated ?
taltmann42
@taltmann42
Jan 31 2017 15:59
@SkyCoder01 yep definitely
Clyde Lobo
@oppiniated
Jan 31 2017 16:00
data: { action: 'query', list: 'search', srsearch: searchTerm, format: 'json' }, @saylos srsearch should be search
Ognyan Malinov
@omalinov1994
Jan 31 2017 16:17

Hey guys,
Any idea how I can add an image that is bottom center over another image?
I have the following code:

<div class="container-fluid bg-1 text-center">
<img class="img-responsive center-block img-1" src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature">
<img class="img-responsive img-circle center-block img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" >
</div>

.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
position:relative;
}

.bg-1 {
background-color: #4CB5F5;
color: white;
}
.img-2 {
display: inline;
width: 250px;
height: auto;
}

This produces the following result ->
http://imgur.com/a/gYmCu
So how can I do a responsive image over image in this situation? I want the dog to be in the middle bottom part of the nature image?

Kev Brunt
@kevlar0010
Jan 31 2017 16:19
Build a Personal Portfolio Webpage.... WHAT!!!
Surely i'm not the only one who saw the example page and said "i've not got these skills in my arsenal yet?"
Tom
@moT01
Jan 31 2017 16:22
@kevlar0010 to start it can be as simple as you want, you will be update/changing things as you go along
Kev Brunt
@kevlar0010
Jan 31 2017 16:24
thanks @moT01
I took one look at the Objective page and became massively daunted. I didn't want to look at the CodePen code, but I don't know where to even start. Surely i've not forgotten all my previous FreeCodeCamp lessons already??
CamperBot
@camperbot
Jan 31 2017 16:24
kevlar0010 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @mot01 |http://www.freecodecamp.com/mot01
I've tried $.getJSON() on that link, I've tried just copy pasting the contents of the link and storing it in a variable, tried calling on that variable, tried stringifying it, parsing it
Tom
@moT01
Jan 31 2017 16:27
@kevlar0010 i dont like that they say not to look at the code, it can give some idea of where to begin, or how to lay things out, or a lot of other stuff, ...when you search for answers online you get examples of code all the time so i dont see a problem with looking
Kev Brunt
@kevlar0010
Jan 31 2017 16:29
I'm glad to hear you say that @moT01 , like you say, they do ask you to Read-Search-Ask, so looking at the original code to understand it makes sense... I guess i'd not be the only one to do so to make sense of things, but I wish I didn't have too really...
Tom
@moT01
Jan 31 2017 16:30
@Tennyx why dont you use their api?
Ken Haduch
@khaduch
Jan 31 2017 16:30
@Muzaffarhssn5 - I just took a look at the project again - - :point_up: January 31, 2017 8:39 AM I think that the only thing that you should do is move the var colorArr and the function changeColor() (setting up the variable for the color array, as well as defining the function) outside of the changeColor function. It is not necessary to re-define the function every time you run the getQuote function, and other than that, I think that it would solve your problem? It looks like you are only assigning the click handler one time now, I think that it is working properly with the two changes that I mentioned here?
PipsChips
@PipsChips
Jan 31 2017 16:30
Hi! Could someone pls check my 'Local Weather' app. I'm having trouble with API key (or at least I think I have). Do I really have to wait 10 min every time to run/try my code again? I'm stuck trying to access my JSON object, and being forced to wait for the key to activate again and again... Can someone pls check for typos/mistakes and help me :)
http://codepen.io/PipsChips/pen/WRdgGR
Cale Switzer
@Tennyx
Jan 31 2017 16:31
@moT01 according to the forum post on this project twitch now requires api key and it's not recommended: https://forum.freecodecamp.com/t/freecodecamp-challenge-guide-how-to-use-the-twitchtv-api/19541
Tom
@moT01
Jan 31 2017 16:34
@Tennyx they tell you how to get around that in the project description
Cale Switzer
@Tennyx
Jan 31 2017 16:34
@kevlar0010 I've been there kev. Try to break it down piece by piece and it may not seem as overwhelming. How would you start? Header most likely. What's next? If you break it down it can seem less daunting. And never fear looking stuff up. I'm still a noobie but from all I've heard from professionals that is a large part of programming.
Ken Haduch
@khaduch
Jan 31 2017 16:34
@PipsChips - one thing that you can do for debug purposes is to capture one of the JSON data returns and put it in a variable and set up a "debug" mode where you could just work with that data while you sort out the design and implementation of accessing the data and displaying it? It would save repetitive accesses to the API, especially if you are hitting a limit. Other than that, if your API is limiting your accesses, then you have to live with that or find a different API?
Cale Switzer
@Tennyx
Jan 31 2017 16:35
@moT01 in that step 8? I'll look into that, I thought that was irrelevant because it had to do with the using twitch's api. Thanks!
CamperBot
@camperbot
Jan 31 2017 16:35
tennyx sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 488 | @mot01 |http://www.freecodecamp.com/mot01
Kev Brunt
@kevlar0010
Jan 31 2017 16:36
Appreciate that @Tennyx
I think like you say, break it down, get the start right without looking at other code then perhaps "reference" peoples work and then implement it into my own code once understood?
I kinda feel like i'm cheating a test by looking, but it does appear most people do "look up" other peoples work.
Tom
@moT01
Jan 31 2017 16:37
@Tennyx step 10
PipsChips
@PipsChips
Jan 31 2017 16:37
@khaduch
Did you check (maybe) my app in console?
Cale Switzer
@Tennyx
Jan 31 2017 16:38
@moT01 ooof. Reading comprehension fail on my part. Thanks mo
CamperBot
@camperbot
Jan 31 2017 16:38
tennyx sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: tennyx already gave mot01 points
PipsChips
@PipsChips
Jan 31 2017 16:38
I understand your advice, it's just, I'm having trouble accessing wanted informations (lists, objects)
There are many objects, they all look the same. Don't know which one to access...
Ken Haduch
@khaduch
Jan 31 2017 16:40
@PipsChips - this is how to access the weather description: $("#description").html(json.list[0].weather[0].description); - you should take your data and pop it into a site like codebeautify and get it to format it in a way that you can access it better?
@PipsChips - it seems to be working fine for me - perhaps accessing it from a different IP address is why it is working for me? But I see that you are getting some of the data correctly set up.
PipsChips
@PipsChips
Jan 31 2017 16:41
$("#description").html(json.list[0].weather.description);
I've missed *...weather[0]
Ken Haduch
@khaduch
Jan 31 2017 16:47
@PipsChips - I could not save the data in the codebeautify.org website, but I create this gist with the formatted data - you can see array brackets, etc. I don't know if that will help you? But see if it does...
Tony
@FreakishLancer
Jan 31 2017 16:48

I am having an annoying problem getting the weather app to work in all browsers. I can get both versions of my site working on desktop but can't seem to get it working on both Android/Apple devices at the same time. I isolated the problem down to the APIs used:

This one uses Open Weather API: http://codepen.io/Freaklancer/full/XpVodE/

This one uses APIXU: http://codepen.io/Freaklancer/full/OWQmav/

Any suggestions? I've spent more than 8 hours on this............. :worried:

PipsChips
@PipsChips
Jan 31 2017 16:50
@khaduch
omg thank's so much, you didn't have to :)
CamperBot
@camperbot
Jan 31 2017 16:50
pipschips sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2391 | @khaduch |http://www.freecodecamp.com/khaduch
PipsChips
@PipsChips
Jan 31 2017 16:50
but still
how do I know which of the 40 (I think..) objects inside JSON object's list property - is the one I need....
Ken Haduch
@khaduch
Jan 31 2017 16:52
@PipsChips - that I don't know... I am not sure about the data setup there, but probably the openweather api description tells you?
PipsChips
@PipsChips
Jan 31 2017 16:52
@khaduch
ooooh or, those are all current and future weather information
maybe...?
Tony
@FreakishLancer
Jan 31 2017 16:54
The Open Weather API does not seem to work for all browsers. It also only allows http. Annoying. =[
PipsChips
@PipsChips
Jan 31 2017 16:54
it really is...
Tom
@moT01
Jan 31 2017 16:55
@FreakishLancer sounds like its a browser issue maybe? do some sort of browser detection, and set the api based on which browser it used
Ken Haduch
@khaduch
Jan 31 2017 16:55
@FreakishLancer - the free openweather API is only HTTP - you have to pay for HTTPS access. Then you run into the problem with the geolocation, on Chrome is requires https:// now, FireFox still allows access over HTTP.
PipsChips
@PipsChips
Jan 31 2017 16:56
well, I managed to access given JSON object; and display informations... is this (roughly) ok?
http://codepen.io/PipsChips/pen/WRdgGR
Ken Haduch
@khaduch
Jan 31 2017 16:56
as @moT01 says - you could switch to using ip-api.com for the times when you cannot access geolocation, or just use it (even though potentially very inaccurate for location...)
Tony
@FreakishLancer
Jan 31 2017 16:56
@khaduch Exactly. My workaround was to use the IPinfo API, which is more accurate. I also switched to APIXU. The problem is, APIXU doesn't work on Android, and Open Weather doesn't work on Safari!
@PipsChips I can see my lat and long on yours, that's all. I can't see anything else. I can see the weather icon code as well but not the icon itself.
PipsChips
@PipsChips
Jan 31 2017 16:58
@FreakishLancer
aaaaah, srry. it's due to 10 mins API'S key limitation
Tony
@FreakishLancer
Jan 31 2017 17:00
Open Weather has a 10 minute limitation?
I thought it was 1000 requests a day and that's it.
Tom
@moT01
Jan 31 2017 17:01
either of you use d3 at all?
Moisés Man
@moigithub
Jan 31 2017 17:01

@FreakishLancer - the free openweather API is only HTTP - you have to pay for HTTPS access. Then you run into the problem with the geolocation, on Chrome is requires https:// now, FireFox still allows access over HTTP.

@PipsChips

Ken Haduch
@khaduch
Jan 31 2017 17:01
@PipsChips - the things seem to work fine for me, at this point? I also looked at the data, the different weather "dt" values are date and time - at the end of each record they put the dt_text which is the text value of the date and time...
Tony
@FreakishLancer
Jan 31 2017 17:01
@PipsChips I see what your problem is though. You are not putting in the URL for the icon.
@PipsChips This shows you how to get your icon. https://openweathermap.org/weather-conditions Scroll down to How to get icon URL
@moT01 Not familiar with d3
Ken Haduch
@khaduch
Jan 31 2017 17:03
@FreakishLancer - I think that I remembered the IP address site incorrectly - ip-info.com/api is correct. My memory fails sometimes... Too bad that the different sites don't work on the different mobile technologies! That's quite a pain in the neck!
PipsChips
@PipsChips
Jan 31 2017 17:04
@khaduch
Yeah, I need first [0] object. Other objects (gradually; + 3 hours) show future weather...
Tony
@FreakishLancer
Jan 31 2017 17:04
@khaduch Yeah I wish there was a centralized source to find out how to make everything work for all browsers.
Tom
@moT01
Jan 31 2017 17:05
i just started playing with it for the data visualization projects, and i have a little problem i cant get working quite right if anyone wants to take a crack at it http://codepen.io/moT01/pen/JEMxoj?editors=0110 i want to display a + or - on the mouseover, ...+ or - the difference from the previous thing
PipsChips
@PipsChips
Jan 31 2017 17:05
@FreakishLancer
Thnx. It was my next step, getting that icon set. Gonna check your link.
CamperBot
@camperbot
Jan 31 2017 17:05
pipschips sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Tony
@FreakishLancer
Jan 31 2017 17:06
@PipsChips No problem. I'd been having a lot of trouble with it as well and don't mind helping.

@FreakishLancer sounds like its a browser issue maybe? do some sort of browser detection, and set the api based on which browser it used

@moT01 Oh man, that sounds like a lot of legwork. I wish I thought of this before I reworked everything haha.... :worried:

Tom
@moT01
Jan 31 2017 17:08
doing the browser detect thing?
Tony
@FreakishLancer
Jan 31 2017 17:13
@moT01 Oh no, that would be very doable for me. The problem is rearranging my functions and doing more potential if/elses. I'll save this for next time.
Muhammad Hasham
@MohammadHasham
Jan 31 2017 17:16
Why is twitch tv api returning a 400 error when i have tried to run it after 5 months
Tom
@moT01
Jan 31 2017 17:17
@MohammadHasham check the project page, theres a new way access that api
Muhammad Hasham
@MohammadHasham
Jan 31 2017 17:17
@moT01 so is the api changed?
Tom
@moT01
Jan 31 2017 17:18
its just a new url, everything else is the same
Hello911
@Hello911
Jan 31 2017 17:27
 var result = '', pattern = this.valueOf();
    while (count > 1) {
        if (count & 1) result += pattern;
        count >>= 1, pattern += pattern;
    }
    return result + pattern;
Can someone please explain what the use of "pattern" here is? The this is a function used to repeat a string "count" times?
Jakov Horvat
@Yaaqovv
Jan 31 2017 17:32
Hi, does somebody know is it possible to share a particular paragraph from the site to facebook?
PipsChips
@PipsChips
Jan 31 2017 17:35
@FreakishLancer
Can you check if my Wetaher app is (roughly) ok now :)
http://codepen.io/PipsChips/pen/WRdgGR
Steven Failla
@Stevo99
Jan 31 2017 17:35
hi!! just wanted some feedback on my portfolio pen. been working on it for a week straight and would love to know what you think. thanks https://codepen.io/Stevo914/full/RKxayx/
Jakov Horvat
@Yaaqovv
Jan 31 2017 17:37
@Stevo99 your portfolio pen is amazing, do you know is it possible to share a particular paragraph from the site to facebook?
Steven Failla
@Stevo99
Jan 31 2017 17:39
@Yaaqovv thanks i kept redoing it over and over till it was perfect. plus i really wanted to understand what i was doing. But i dont use facebook at all so im not familiar witht that.
CamperBot
@camperbot
Jan 31 2017 17:39
stevo99 sends brownie points to @yaaqovv :sparkles: :thumbsup: :sparkles:
:cookie: 3 | @yaaqovv |http://www.freecodecamp.com/yaaqovv
Steven Failla
@Stevo99
Jan 31 2017 17:40
I really love this. I am so grateful for free code camp!!!
PipsChips
@PipsChips
Jan 31 2017 17:40
@Yaaqovv
I think you can't do that. But I'm not sure...
@Yaaqovv
Google your problem. :)
taltmann42
@taltmann42
Jan 31 2017 17:41
@Stevo99 looks nice, a few suggestions though:
  • make the header fixed, so it's always visible
  • maybe make the sections as high as the window itself is - you'd have to use some vh,vw or vmin for fonts to always fit https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
  • I can scroll to the right which reveals a blank white part of the site because the image in the "about"-section is too big
Tom
@moT01
Jan 31 2017 17:41
@Stevo99 theres some white space on the right
Steven Failla
@Stevo99
Jan 31 2017 17:42
ohh im only viewing in codepen. do you bring it up on a browser to see those areas?
let me shrink down the image size and see if that fixes it
taltmann42
@taltmann42
Jan 31 2017 17:42
@Stevo99 nope, I'm probably just on a smaller screen :P
Steven Failla
@Stevo99
Jan 31 2017 17:43
oh probably because i didnt use container-fluid.. i only used container
@taltmann42 thanks for your feedback
CamperBot
@camperbot
Jan 31 2017 17:44
stevo99 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 442 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Jan 31 2017 17:45
@Stevo99 and if you want it to be perfect perfect, you'll never be finished ;) you can replace the menu with a burger-menu as soon as the screen gets too small, you can implement smooth-scrolling, so when you click on a link in the navigation it smoothly scrolls to the section, you can make better use of the bootstrap-grid to move the portfolio-items beneath each other on smaller screens, aaaand and and but some of the things exceed what freecodecamp currently teaches
Steven Failla
@Stevo99
Jan 31 2017 17:48
oh i know, thats why i wanted to get a real grip on this before i went to java. thanks for that link i was looking it over and is very helpful
Jakov Horvat
@Yaaqovv
Jan 31 2017 17:49
does somebody know how to make the speed of changing the color of the site like this? https://codepen.io/freeCodeCamp/full/ONjoLe
Tom
@moT01
Jan 31 2017 17:52
@Yaaqovv its the duration of the transition or animation, ...look into css transitions
Tony
@FreakishLancer
Jan 31 2017 17:53
@PipsChips I can see the icon now. Keep up the progress.
PipsChips
@PipsChips
Jan 31 2017 17:54
@FreakishLancer
Thank you.
One more question...
CamperBot
@camperbot
Jan 31 2017 17:54
pipschips sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:warning: pipschips already gave freakishlancer points
PipsChips
@PipsChips
Jan 31 2017 17:54
Does my app show you your local town's weather?
Tony
@FreakishLancer
Jan 31 2017 17:55
No, it seems to show Zagreb's weather. @PipsChips
PipsChips
@PipsChips
Jan 31 2017 17:55
Yeah, that's what I tought
fadyboy
@fadyboy
Jan 31 2017 17:55
Finally finished my twitchtv app, please critique for me http://codepen.io/aofadero/full/rjJwYM/
PipsChips
@PipsChips
Jan 31 2017 17:56
I mean, I used Zagreb's ID in getJSON's URL
Tony
@FreakishLancer
Jan 31 2017 17:56
@PipsChips You should plug in the user's lat and long that you get from geolocation.
PipsChips
@PipsChips
Jan 31 2017 17:56
so I need to make different getJSON call
yeah
Tony
@FreakishLancer
Jan 31 2017 17:57
@fadyboy Works fine for me! However, it does say user "xcduefs" cannot be found.
@PipsChips Yup.
PipsChips
@PipsChips
Jan 31 2017 17:57
k. thnx.
fadyboy
@fadyboy
Jan 31 2017 17:58
@FreakishLancer ,Yes, that was part of the use case to display appropriate message if twitch user didn't exist
Tony
@FreakishLancer
Jan 31 2017 17:59
@fadyboy I see. I'm not on that challenge yet.
Icah Banton
@remdata
Jan 31 2017 17:59
Hello. Help!!! For the wikiViewer I have looked at the API but I don't understand it. How can I find out what the following query returns: https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?&search=myValue
Chase
@Athabasco
Jan 31 2017 18:00
I just finished my random quote machine, but I want to make my image cover the full screen... if you scroll, its the same image (what I want). But the image keeps going up.
Tony
@FreakishLancer
Jan 31 2017 18:00
@remdata Do you have a JSON viewer plugin in your browser? It will help you mentally sort the info that you need to get more easily.
fadyboy
@fadyboy
Jan 31 2017 18:01
@remdata , you can install a json formatter extension for chrome so you can see what is returned from the api
Icah Banton
@remdata
Jan 31 2017 18:02
@fadyboy . How do I do that?
Chase
@Athabasco
Jan 31 2017 18:02
Go to the pen itself
Tom
@moT01
Jan 31 2017 18:03
@fadyboy looks good, offline is spelled wrong
Ken Haduch
@khaduch
Jan 31 2017 18:03
@FreakishLancer - there is one post in the forum about the weather app, not sure if they mention the IOS vs Android differences? freeCodeCamp/freeCodeCamp#7853 and maybe this one, too: freeCodeCamp/freeCodeCamp#9145 - you can scan through those, if you haven't seen them, and see if they have any insight to offer?
fadyboy
@fadyboy
Jan 31 2017 18:04
@remdata , in Chrome go to settings>extensions, at the bottom there's a link to get more extensions. Search for json formatter
@moT01 , tx I'll look into that
CamperBot
@camperbot
Jan 31 2017 18:05
fadyboy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 31 2017 18:05
@fadyboy shrinking the window makes some of the text wrap to the next container
fadyboy
@fadyboy
Jan 31 2017 18:06
@moT01 , yeah - I didn't make it responsive. I suppose I should look into this and refactor the code
Tony
@FreakishLancer
Jan 31 2017 18:06
@khaduch Thanks for the links. I took a skim through them just now and it seems they mention different APIs. I already switched to APIXU. Wunderground doesn't seem to allow me to make an account.
CamperBot
@camperbot
Jan 31 2017 18:06
freakishlancer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2393 | @khaduch |http://www.freecodecamp.com/khaduch
Tom
@moT01
Jan 31 2017 18:07
@fadyboy the online/offline buttons dont correctly filter
for me anyway
it looks real good though
Ken Haduch
@khaduch
Jan 31 2017 18:07
@FreakishLancer - I'm trying to access the wunderground site now (just to check the weather) and it seems to be having some issues with their server(s) or something? Might just be down at this point?
fadyboy
@fadyboy
Jan 31 2017 18:08
@moT01 , that's strange. Can you try opening the link in a browser and not running as a codepen in this gitter session
Tom
@moT01
Jan 31 2017 18:08
what do you mean by that
Hello911
@Hello911
Jan 31 2017 18:09
String.prototype.repeat = function(times){
    var result="";
    var pattern=this;
    while (times > 0) {
        if (times&1)
            result+=pattern;
        times>>=1;
        pattern+=pattern;
    }
    return result;
};
I trying very hard to understand this function. What is the purpose of var pattern=this;?
Tom
@moT01
Jan 31 2017 18:10
oh i get ya, ...yea it was in its own tab
taltmann42
@taltmann42
Jan 31 2017 18:10
@Hello911 when you use String.prototype the this refers to the string. So if you use var string = "Hello";and string.repeat, the this is "Hello"
@Hello911 also, posting the same question simultaneously on at least 3 chatrooms may be a bit too much don't you think? This is pretty definitely a javascript question, so the HelpJavascript-room would be enough. If you don't get answers you can still continue asking on other rooms
Tony
@FreakishLancer
Jan 31 2017 18:12
@khaduch Seems like it. For now, until I find a way to make my weather site work on Android browsers, I'll just have to make to do with this one. It works fine, yes? http://codepen.io/Freaklancer/full/OWQmav/
Hello911
@Hello911
Jan 31 2017 18:12
@taltmann42 Thanks
CamperBot
@camperbot
Jan 31 2017 18:12
hello911 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Ken Haduch
@khaduch
Jan 31 2017 18:13
@fadyboy - you are definitely having problems with text overflowing into other text boxes? Looks like you ave a fixed-height div or something for each user? Narrowing the window causes lines with a long text to wrap into other boxes.
@FreakishLancer - it seems to work fine on my desktop firefox browser - I like the styling that you came up with, too - looks good!
Tony
@FreakishLancer
Jan 31 2017 18:17
@khaduch Thanks! Glad it works on your end. Now on to Wikipedia. I'll come back to this one at a later time if I can.
CamperBot
@camperbot
Jan 31 2017 18:17
freakishlancer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: freakishlancer already gave khaduch points
Icah Banton
@remdata
Jan 31 2017 18:27
@fadyboy . I have installed the JSON formatter extension. How do I use it?
Icah Banton
@remdata
Jan 31 2017 18:38
@fadyboy . nm. got it.
PipsChips
@PipsChips
Jan 31 2017 18:42
Can someone pls help me with my 'Local weather' app @FreakishLancer pls :)
I'm having trouble with my API call (I guess)
http://codepen.io/PipsChips/pen/XpZeEv
Tony
@FreakishLancer
Jan 31 2017 18:45
@PipsChips The console is spitting out the correct information for my area.
@PipsChips I may need a few minutes to see why it's not giving the right in the html though.
Oh wait. The latitude is undefined.
PipsChips
@PipsChips
Jan 31 2017 18:47
@FreakishLancer
I have 2 API calls. With first one I'm getting (among other things) coordinates from: https://ipinfo.io/
Tony
@FreakishLancer
Jan 31 2017 18:47
var lati, long = [] <-- don't do this.
PipsChips
@PipsChips
Jan 31 2017 18:47
And that's fine, it works.
Why not?
Tony
@FreakishLancer
Jan 31 2017 18:48
Just set them to separate empty variables. Don't put them in an array.
Hopefully that should work.
PipsChips
@PipsChips
Jan 31 2017 18:49
I tried, but I get JS error (exclamation mark)
Gulsvi
@gulsvi
Jan 31 2017 18:50
can you tell me if the location is right? https://codepen.io/skycoder/pen/NdyagY?editors=0010
Tony
@FreakishLancer
Jan 31 2017 18:51
@PipsChips Put the second getJSON function within your first one, after the console.log(lati, long);
PipsChips
@PipsChips
Jan 31 2017 18:51
I tried taht also :)
Tony
@FreakishLancer
Jan 31 2017 18:51
O.o haha
OH. I got it now.
You're using the wrong API head.
Check the beginning of your API. It should be the one for the current weather, and accepts lat/long.
PipsChips
@PipsChips
Jan 31 2017 18:53
I tried that :)
Tony
@FreakishLancer
Jan 31 2017 18:54
It should be the one for geographic coordinates. let me show you.
Gulsvi
@gulsvi
Jan 31 2017 18:55

@PipsChips You have to give the lati/long to your weather function.

  $.getJSON('http://ipinfo.io', function(data){
    console.log(data);    
    lati = data.loc.split(",")[0].toString();
    long = data.loc.split(",")[1].toString();
    console.log(lati, long);
    getWeather(lati, long);
  });

and remove the getWeather() at the bottom of your code

PipsChips
@PipsChips
Jan 31 2017 18:55
yeah
i made that
also :)
Does that show you something?
PipsChips
@PipsChips
Jan 31 2017 18:55
oh wait
yeah; it does
Gulsvi
@gulsvi
Jan 31 2017 18:55
otherwise your weather url won't have the lati/long variables
You were using the one for city ID and forgot to delete the city part of the API call.
"http://api.openweathermap.org/data/2.5/forecast/city?lat="+lati+"&lon="+long+"&units=metric&APPID=6acc2578590ac90e20d9cc2ec7f59a07"
"http://api.openweathermap.org/data/2.5/weather?lat="+lati+"&lon="+long+"&units=metric&appid=6acc2578590ac90e20d9cc2ec7f59a07"
See the difference?
PipsChips
@PipsChips
Jan 31 2017 18:57
yeah but I tried (half an hour ago) changing forecast/city to weather?
thnx gonna try it again
I probably made typo
Tony
@FreakishLancer
Jan 31 2017 18:59
Yes, just plug in the user's lat and long and make sure to put "metric" or "imperial" in a variable when you need to change from C to F and vice versa (or make a proper temperature conversion function).
You can use the forecast API afterwards, but that isn't part of the user stories for the challenge. Also, I think the one you had was for the city one, not the geo coords.
@SkyCoder01 Oh, I just took a look. Yes, it goes give me my current location.
Looking good so far.
Gulsvi
@gulsvi
Jan 31 2017 19:03
Thanks @FreakishLancer, wasn't sure if I was getting the city correctly.
CamperBot
@camperbot
Jan 31 2017 19:03
skycoder01 sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Gulsvi
@gulsvi
Jan 31 2017 19:04
Probably need more than one person to look though :) will try another room
Tony
@FreakishLancer
Jan 31 2017 19:05
@SkyCoder01 If you have a mobile device or another browser, it helps to test on those. Although be warned, it could be a time-sucker. O.o
Gulsvi
@gulsvi
Jan 31 2017 19:07
Wish navigator.geolocation just gave a city name....I go through a bunch of arrays with google's geocode and look for 'locality' and then get the address, but not sure if that works all around the world.
Tony
@FreakishLancer
Jan 31 2017 19:10
@SkyCoder01 It's not really accurate at times. When I first used it, it gave me a city 50 miles away from me.
Gulsvi
@gulsvi
Jan 31 2017 19:12
@FreakishLancer My page gave you a different location two different times?
Tony
@FreakishLancer
Jan 31 2017 19:12
@SkyCoder01 Oh no, for my weather site, I mean. Yours was accurate for me though.
I ended up using IPInfo.io because it gives the state too, whereas Open Weather doesn't.
Gulsvi
@gulsvi
Jan 31 2017 19:13
Oh, okay. That's why I try navigator.geolocation first. That should be pretty accurate, but if it fails, it depends on your IP
Tony
@FreakishLancer
Jan 31 2017 19:13
Perhaps.
PipsChips
@PipsChips
Jan 31 2017 19:17
@SkyCoder01 @FreakishLancer
Thank you!
CamperBot
@camperbot
Jan 31 2017 19:17
pipschips sends brownie points to @skycoder01 and @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 69 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 341 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Can you pls try one more time, and tell does it work properly now?
Do you get your local weather info?
Gulsvi
@gulsvi
Jan 31 2017 19:19
@PipsChips yes, you fixed your callback :)
PipsChips
@PipsChips
Jan 31 2017 19:19
either though :)
I still don't know what concretely have I done
Tony
@FreakishLancer
Jan 31 2017 19:20
@PipsChips It works great. I can see my city, the weather description, the icon, and the temperature in Celsius. Good job so far.
Gulsvi
@gulsvi
Jan 31 2017 19:20
No one else will check my pen to see if it shows their city...I think I'll just add a check if the city isn't defined to show unknown city.
PipsChips
@PipsChips
Jan 31 2017 19:20
with: getWeather(lati,long);
inside my first getJSON
I'll check it
Gulsvi
@gulsvi
Jan 31 2017 19:22
With getJSON, the variables you set aren't available outside the getJSON. You have to pass them to another function
or put all of your code inside the getJSON
PipsChips
@PipsChips
Jan 31 2017 19:22
@SkyCoder01
I checked your app, it works for me. I get my hometwon (and country)!
Gulsvi
@gulsvi
Jan 31 2017 19:22
Thanks @PipsChips
CamperBot
@camperbot
Jan 31 2017 19:22
skycoder01 sends brownie points to @pipschips :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @pipschips |http://www.freecodecamp.com/pipschips
Gulsvi
@gulsvi
Jan 31 2017 19:22
:)
PipsChips
@PipsChips
Jan 31 2017 19:24
So by this: getWeather(lati,long) - inside first getJSON; it's like I've said to JS, remember this two variables when I get down to work on that function, in a near future; or whenever
Gulsvi
@gulsvi
Jan 31 2017 19:25
Yeah, it says, call the getWeather() function and give the function these two variables so it can use them too
so baciaclly
I don't need the last call (which I have right now; the last line)
Gulsvi
@gulsvi
Jan 31 2017 19:27
Right, line 27 can be deleted
PipsChips
@PipsChips
Jan 31 2017 19:27
Ok. Thnx so much!
Gulsvi
@gulsvi
Jan 31 2017 19:27
We're working on the same challenge now, I just went through all of this too
Tony
@FreakishLancer
Jan 31 2017 19:27
Same here. What a coincidence.
Hehe.
Simeon Bourne
@Screechie
Jan 31 2017 19:35
Hi everyone
Can anyone assist me with my tribute challenge?
I would appreciate a little feedback if possible
Danielo814
@Danielo814
Jan 31 2017 19:37
I'm doing my tribute page and am stuck on trying to center an image on my page, can anyone assist?
Simeon Bourne
@Screechie
Jan 31 2017 19:39
@Danielo814 I just used the bootstrap class center-block
Danielo814
@Danielo814
Jan 31 2017 19:42
thanks!
Franco Javier Danussi
@francodanussi
Jan 31 2017 19:44
Hello there, I'm working on my Wikipedia Viewer. Does anyone know, after making a query to the Wiki API, how to deploy a list with the results? I mean a list of results that include the name of the article and a bunch of text, just as the example of freeCodeCamp
Tom
@moT01
Jan 31 2017 19:45
@Screechie photo didn't show up for me
not sure why
Simeon Bourne
@Screechie
Jan 31 2017 19:46
thanks..I'm not sure why either but will check it out
Tom
@moT01
Jan 31 2017 19:46
the top one,
it looks pretty good
the content is a little too wide, creating scroll bars that are a little akward
Simeon Bourne
@Screechie
Jan 31 2017 19:47
much appreciated @moT01
will work on rectifying those issues
I used a bit of Jquery and some custom CSS styles as well....is it okay to do that for the tribute challenge?
Tom
@moT01
Jan 31 2017 19:48
theres some goofy spaces as well, ...above the bottom picture on a wide window
below it on a narrow window
Simeon Bourne
@Screechie
Jan 31 2017 19:49
noted..that might be because of the hidden content I included
the buttons aren't completely finished either but will work on those as well
Thanks a lot @moT01 really appreaciate your feedback
CamperBot
@camperbot
Jan 31 2017 19:51
screechie sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 31 2017 19:51
yea, the button brought up the content correctly the first click, then it started being wierd
Simeon Bourne
@Screechie
Jan 31 2017 19:52
yup...that's the logic in the jquery that needs to be fixed
Tom
@moT01
Jan 31 2017 19:55
@Screechie theres some analyze tools on codepen, ..it maybe show some errors. click the dropdown arrow on the different sections
Simeon Bourne
@Screechie
Jan 31 2017 19:56
ohhhhh I didn't realize that
I coded in atom editor and then copied the code into codepen
I'm seeing the warnings now
Thanks again @moT01
CamperBot
@camperbot
Jan 31 2017 19:57
screechie sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: screechie already gave mot01 points
Tom
@moT01
Jan 31 2017 19:58
yea i didnt know about it for a long time, you can often ignore the errors in there, but sometimes get some useful info
Simeon Bourne
@Screechie
Jan 31 2017 19:59
yup
all along I was using the chrome dev tools and the console for errors
had no idea this was integrated into codepen
Tom
@moT01
Jan 31 2017 20:01
@francodanussi hey, do you still need help?
aymanomran
@aymanomran
Jan 31 2017 20:02
any hint ?
Anjali Rathod
@anjali1206
Jan 31 2017 20:02
Hello everyone. Finally, I completed Local Weather App project. Please share your reviews and feedback on it. http://codepen.io/anjali1206/full/vgJGBj/
Tom
@moT01
Jan 31 2017 20:04
@aymanomran just supposed to make a portfolio similar to the example, ...or even not similar, just complete the user stories, ...I would suggest to just make something simple in your skill range and continue on to other lessons/projects because you will want to go back and make all sorts of changes after you do more
aymanomran
@aymanomran
Jan 31 2017 20:04
@anjali1206 it's very simple but good
Anjali Rathod
@anjali1206
Jan 31 2017 20:05
@aymanomran Thnak u
Franco Javier Danussi
@francodanussi
Jan 31 2017 20:05
@moT01 yes, please
Tom
@moT01
Jan 31 2017 20:06
@anjali1206 looks good
aymanomran
@aymanomran
Jan 31 2017 20:06
@moT01 thank you
CamperBot
@camperbot
Jan 31 2017 20:06
aymanomran sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 491 | @mot01 |http://www.freecodecamp.com/mot01
Gulsvi
@gulsvi
Jan 31 2017 20:06
@anjali1206 The background image is distorted, but it is accurate for me
Anjali Rathod
@anjali1206
Jan 31 2017 20:07
@moT01 Thank u
Franco Javier Danussi
@francodanussi
Jan 31 2017 20:07
@anjali1206 , nice job
CamperBot
@camperbot
Jan 31 2017 20:07
anjali1206 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @mot01 |http://www.freecodecamp.com/mot01
Anjali Rathod
@anjali1206
Jan 31 2017 20:07
@SkyCoder01 thank u for ur feedback. Any suggestions on how to fix that background?
CamperBot
@camperbot
Jan 31 2017 20:07
anjali1206 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 70 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Anjali Rathod
@anjali1206
Jan 31 2017 20:08
@francodanussi thank you
Gulsvi
@gulsvi
Jan 31 2017 20:08
@anjali1206 Change the size to cover and add a background position of center center
https://css-tricks.com/perfect-full-page-background-image/
Franco Javier Danussi
@francodanussi
Jan 31 2017 20:12
@anjali1206 I saw that you wrote a lot of if else statements to render the weather icons, you can simplify that using .png icons provided by the API
@moT01 still there?
@anjali1206 I saw that you wrote a lot of if else statements to render the weather icons, you can simplify that using .png icons provided by the API
Tom
@moT01
Jan 31 2017 20:14
@francodanussi yea im here
im taking a look, ...im not familiar with the way you're trying to get the data, but it looks close
Anjali Rathod
@anjali1206
Jan 31 2017 20:17
@francodanussi Thank you for your feedback. Those if else statements are to change background image .
CamperBot
@camperbot
Jan 31 2017 20:17
anjali1206 sends brownie points to @francodanussi :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @francodanussi |http://www.freecodecamp.com/francodanussi
Tom
@moT01
Jan 31 2017 20:27
@francodanussi yea, i didnt get your fetch method working, ...theres a jquery .getJSON method they use in the tutorials that might be easier
Franco Javier Danussi
@francodanussi
Jan 31 2017 20:34
@moT01 I'm not having problems with that
I mean, I receive the JSON and then how can I create a list after that
Tom
@moT01
Jan 31 2017 20:39
instead of .innertext = shouldn't it be like .innertext(data[1]);
maybe im wrong there too
no its supposed to be =
Franco Javier Danussi
@francodanussi
Jan 31 2017 20:43
@moT01 wich method do you use to generate a list after receiving a JSON?
Tom
@moT01
Jan 31 2017 20:53
i dunno, depends what the object looks like, ...your url gives me some arrays
how do you know youre getting data back, i console.log your data and resp and get nothing
so the way youre trying to use the data looks right data[1] or something like that
@francodanussi
Alex
@ajanecek
Jan 31 2017 21:04
hey everyone, I am having some issues with the setTimeout() method. I am running a for loop that adds a random number to an array, then adds the final array to a h3 element using
disregard that.
Not Talent
@nottalent
Jan 31 2017 21:34
Alright guys I'm having a problem with the count cards javascript program. I've made a switch statement that groups the +1 cases and 0 cases and -1 cases and then ++ or +=0 or -- depending on the case. I also have the if statement that I need to print out to the screen depending on if count is positive or negative. My question is and I cant seem to reason it out, Do i need an array to store previous case results from previous cards? Give me a hint pls. I just don't want to look at the solution.
Tony
@FreakishLancer
Jan 31 2017 22:06
@SkyCoder01 Great look. The background image is nice, but I'm not sure that has anything to do with weather specifically.
Also, my city, state, and country are correctly displayed!
:)
Gulsvi
@gulsvi
Jan 31 2017 22:33
@FreakishLancer Thanks again for taking a look! The images should have something to do with your location rather than the weather. The icon should definitely reflect the weather though ;)
CamperBot
@camperbot
Jan 31 2017 22:33
skycoder01 sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Gulsvi
@gulsvi
Jan 31 2017 22:34
Still playing around with flickr to see if it's best to use pictures tagged "tourist", "landmark", "monument", etc.. -- need to learn more
Tony
@FreakishLancer
Jan 31 2017 22:35
@SkyCoder01 That's actually smart to use images based on your location. I wasn't sure how to quite figure that out though so I just used a set of 9-10 pictures based on weather keywords for mine.
@SkyCoder01 I actually like how you account for contingencies like unable to detect location and such. Nice one!
Gulsvi
@gulsvi
Jan 31 2017 22:39
Yeah our meetup organizer told us to always use .fail() in our .getJSON :)
Bigyan Karki
@bigyankarki
Jan 31 2017 22:45
//for typed.js
$(function(){
        $(".heading").typed({
            strings: ["This is Wikipedia Viewer.", "Click ooooon", "Click on search icon to find Wikipedia entries."],
            typeSpeed: 50
        });
    });

//for replacing button with an input field.
$(".btn").click(function(){
  $(".btn").replaceWith('<form><input class="input-lg" type= "text" id="inputField" placeholder= "Search"></form>')
});

 $("#inputField").submit(function(){
   var input = document.getElementById("inputField").value;
  getData(input);
  console.log(input);
});

//to get the required data from wikipedia API
function getData(input) {
  $.ajax({
    url: "https://en.wikipedia.org/w/api.php",
    dataType: "json",
    data: "method=get&format=json&list=search&srsearch=input",
    type: "GET",
    headers: {"api-user-agent" : "b.gyankarki@gmail.com"},
    success: function(wiki) {
      for (var i= 0; i< wiki.query.search.length; i++) {
        $(".content").append("<p>wiki.query.search.title[i]</p>");
      }
    }
  });
}
What is wrong with this code?
Sabrina Ferguson
@itsacoyote
Jan 31 2017 22:52
@bigyankarki Your $('.btn').click() means any button that is clicked will have every button replaced with a form, just keep that in mind if you add more buttons with that class .btn
If you want to reference and replace the button that was clicked, you can use $(this).replaceWith instead of $('.btn')
I don't believe $('#inputField').submit will work, you'll probably want to add an event listener instead to the input and then call the submit on the form. Something like $('#inputField').addEventListener('keydown', function() {}) and check for the enter key, but that's just off the top of my head.
Bigyan Karki
@bigyankarki
Jan 31 2017 22:53
hmm i will try that @itsacoyote
Sabrina Ferguson
@itsacoyote
Jan 31 2017 22:55
@bigyankarki also to clarify, .submit() works on the form, not the input, so you'll want to do something like $('#searchForm').submit()
Bigyan Karki
@bigyankarki
Jan 31 2017 23:09
@itsacoyote do you mean that i need to add class or id of form and not that of input?
Tyler Moeller
@TylerMoeller
Jan 31 2017 23:11
@bigyankarki Yes, you need to submit the form, not the input field. :point_up: January 30, 2017 5:12 PM
No need to add a submit eventhandler and a keypress handler if you do it that way.
The .submit() will need to be in the same function() where you create the <form> html too, by the way - hope that helps you get this figured out :)
Bigyan Karki
@bigyankarki
Jan 31 2017 23:20
oh @TylerMoeller thanks i will work on it
CamperBot
@camperbot
Jan 31 2017 23:20
:star2: 1446 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
bigyankarki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Bigyan Karki
@bigyankarki
Jan 31 2017 23:20
but i have a class now :D
Richard Corbett
@reacorbett
Jan 31 2017 23:44
I have completed a large amount of the work for fcc. but, i have taken a break for a long time. O am affraid that i have forgotten a lot of what I have learned. any sudgestions?
Tony
@FreakishLancer
Jan 31 2017 23:58
There's no harm in that. =]
@reacorbett Don't be afraid of just repeating the lessons or skimming over ones you've already done.
There's also google. :)