23rd
Apr 2016
Michael Karpinski
@karpimpski
Apr 23 2016 00:10
http://codepen.io/karpimpski/pen/jqpYYG?editors=0010 how can I make it so what my timer displays 09 instead of 9 in the seconds section, or 08 instead of 8, etc?
skhvan1111
@skhvan1111
Apr 23 2016 00:12
add 0 left, take latest 2
Michael Karpinski
@karpimpski
Apr 23 2016 00:14
@skhvan1111 what do you mean add 0 left? I have it set so that when seconds is at 10 it goes to 9, and I don't know how I could fix that without using 10 if statements. is there a more effecient way to do it?
skhvan1111
@skhvan1111
Apr 23 2016 00:14
9 is become 09
10 -> 010
why do you think its not efficient?
Michael Karpinski
@karpimpski
Apr 23 2016 00:15
@skhvan1111 yeah, that's what I'm trying to do. but I think I figured out a solution. I'll just make an if statement saying if it's below 10, I put a 0 before the seconds variable
idk if that's what you were suggesting, I didn't really get what you were trying to suggest. thanks for your help! @skhvan1111
CamperBot
@camperbot
Apr 23 2016 00:15
karpimpski sends brownie points to @skhvan1111 :sparkles: :thumbsup: :sparkles:
:star: 356 | @skhvan1111 | http://www.freecodecamp.com/skhvan1111
skhvan1111
@skhvan1111
Apr 23 2016 00:16
ok
if statement works too here
Micah Bales
@micahbales
Apr 23 2016 00:34
Howdy folks. I'm working on Sum All Odd Fibonacci Numbers (https://www.freecodecamp.com/challenges/sum-all-odd-fibonacci-numbers). My code isn't quite working. Any ideas?
``````function sumFibs(num) {
var curnum = 1;
var prevnum = 1;
var nextnum = 1;
var oddnums= 0;
for (i = 1; i < num; i++) {
if (nextnum === 1)
oddnums += nextnum;
if  (nextnum % 2 !== 0)
oddnums += nextnum;
nextnum = prevnum + curnum;
prevnum = curnum;
curnum = nextnum;
}
return oddnums;
}

sumFibs(1000);``````
Coy Sanders
@coymeetsworld
Apr 23 2016 00:45
don't think you're calculating your values right @micahbales
you may want to split your function into 2 steps: create the fibonacci sequence first, then check if its odd
also tip if you create an array you don't need to mess with so many variables
skhvan1111
@skhvan1111
Apr 23 2016 00:47
@coymeetsworld Hi, i think that solution would work too, and less memory expensive.
as they have test sumFibs(4000000)
seems they are trying to prevent array building.
Micah Bales
@micahbales
Apr 23 2016 00:48
@coymeetsworld Yeah, I just realized I'm not following the directions. Thanks. :D
CamperBot
@camperbot
Apr 23 2016 00:48
micahbales sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 615 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Apr 23 2016 00:49
don't disagree w/ that @skhvan1111, but memory considerations i would think is a more advanced topic
don't need everything to be efficient just need to get it working, then later on look at what you can improve
Micah Bales
@micahbales
Apr 23 2016 00:51
@coymeetsworld you're suggesting I push the sequence to an array
?
skhvan1111
@skhvan1111
Apr 23 2016 00:56
just 2 diff solutions, you can select one
but if you continue your current way, try to keep 2 last values
swap them via local variable
var v1 = curnum;
curnum += prevnum;
prevnum = v1;
check as you do it now
Coy Sanders
@coymeetsworld
Apr 23 2016 00:57
you don't have to, just a suggestion
you can use variables but have to be careful w/ how you manipulate them
skhvan1111
@skhvan1111
Apr 23 2016 00:57
also, i`ll suggest to check "for" condition.
Coy Sanders
@coymeetsworld
Apr 23 2016 00:58
you can use console.log() to print the state of each variable as you go through the loop to see what its doing too
Micah Bales
@micahbales
Apr 23 2016 00:59

@coymeetsworld I've done the console log bit and I'm getting the sequence... but not sure where to output it to if I'm going to do a second step.

Trying to create the array, I've ended up with an infinite loop.

(or some sort of stack overflow)
``````function sumFibs(num) {
var curnum = 1;
var prevnum = 1;
var nextnum = 1;
var fibSeq = [1];
var oddnums= 0;

for (i = 1; i < num; i++) {
fibSeq.push(nextnum);
nextnum = prevnum + curnum;
prevnum = curnum;
curnum = nextnum;
}
return fibSeq;
}

sumFibs(4);

// 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 …

/*
if (nextnum === 1)
oddnums += nextnum;
if  (nextnum % 2 !== 0)
oddnums += nextnum;
*/``````
results in a stack overflow
Coy Sanders
@coymeetsworld
Apr 23 2016 01:01
when you're passing 4 in there?
Micah Bales
@micahbales
Apr 23 2016 01:03
right. crazy, no?
skhvan1111
@skhvan1111
Apr 23 2016 01:03
hey, do someone know api that can give me city pictures by geo coordinates, except flickr, free is the best option.
Jonathan Gripshover
@mrgrip
Apr 23 2016 01:11
Here's my weather app - open to feedback (and thanks if you give it)! http://codepen.io/mrgrip/pen/rereoO
Frank XC
@tenkdayz
Apr 23 2016 01:14
This message was deleted
Micah Bales
@micahbales
Apr 23 2016 01:17
@mrgrip I'm not getting any weather info on my end. Not sure what the issue is.
Jonathan Gripshover
@mrgrip
Apr 23 2016 01:21
@micahbales I used navigator.geolocation which I'm discovering has its problems. You have to allow your browser to accept it and even then i've encountered problems
Coy Sanders
@coymeetsworld
Apr 23 2016 01:22
i can see the weather fine @mrgrip, think there's something wrong with your English though ;)
don't think there needs to be a hyphen after yo
i don't get a stack overflow @micahbales btw w/ your code
Eric
@WareHouseGnome
Apr 23 2016 01:25
@mrgrip I tried looking at your pen as it appears on this page and no joy, but when i clicked on the link that took me to codepen and then showed it to me, worked perfect! (after I shared my location that is.) Nicely done!
Charlotte N.
@clnquacky
Apr 23 2016 01:27
Working on the wikipedia viewer.. I can do a single search.. I am trying to work out how to clear the search box to attempt a new search... Would this work? or what would you suggest? function newSearch() {
var apiReturn=[];
}
Rory Avant
@roryavant8
Apr 23 2016 01:28
Hey what's up everyone? I'm working the the Twitch Streaming App right now and I am a little stuck on a problem. I am trying to find out if a specified user has ever created a account or if the account has been closed. When I make a call to the twitch API, I include the channels I am searching for. If streams are returned I know they are online, if streams are not returned I know the users are offline. If they are online, they obviously have a current active account, no problem. But if they are offline, how do I retrieve any data about the account? I've looked into Twitch's API documentation, but it seems like not much is returned if a user is not online/streaming.
Jonathan Gripshover
@mrgrip
Apr 23 2016 01:28
@coymeetsworld haha, well, some punctuation needed to exist there. A comma wasn't right, semi-colon too refined, I didn't consider it a complete thought for a period or exclamation...
thanks for the feedback @coymeetsworld and @WareHouseGnome !
CamperBot
@camperbot
Apr 23 2016 01:29
mrgrip sends brownie points to @coymeetsworld and @warehousegnome :sparkles: :thumbsup: :sparkles:
:star: 619 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
:star: 270 | @warehousegnome | http://www.freecodecamp.com/warehousegnome
skhvan1111
@skhvan1111
Apr 23 2016 01:29
Charlotte N.
@clnquacky
Apr 23 2016 01:30
skhvan1111
@skhvan1111
Apr 23 2016 01:31
are you planning to add clear button?
\$("#searchVal").html("") ?
Charlotte N.
@clnquacky
Apr 23 2016 01:32
that is what I would like to do..
Micah Bales
@micahbales
Apr 23 2016 01:34
@coymeetsworld OK, so I'm much closer now. I'm meeting every criteria except the last...
``````function sumFibs(num) {
var curnum = 1;
var prevnum = 1;
var nextnum = 1;
var fibSeq = [1];
var oddnums= 0;
// produce fibonacci sequence
while (nextnum < num) {
fibSeq.push(nextnum);
nextnum = prevnum + curnum;
prevnum = curnum;
curnum = nextnum;
}
// sum odd numbers from sequence
for (i = 0; i < fibSeq.length; i++) {
if (fibSeq[i] % 2 !== 0) {
oddnums += fibSeq[i];
}
}
return oddnums;
}

sumFibs(75025);``````
skhvan1111
@skhvan1111
Apr 23 2016 01:35
while (nextnum < num) {
Micah Bales
@micahbales
Apr 23 2016 01:35
hm?
skhvan1111
@skhvan1111
Apr 23 2016 01:36
as you see, other tests are ended with even numbers, only 75025 ends with odd
Micah Bales
@micahbales
Apr 23 2016 01:36
interesting...
skhvan1111
@skhvan1111
Apr 23 2016 01:36
so, as i told before, check "for/while" condition
Micah Bales
@micahbales
Apr 23 2016 01:37
while (nextnum <= num) {
:D
Thanks, @skhvan1111
CamperBot
@camperbot
Apr 23 2016 01:37
micahbales sends brownie points to @skhvan1111 :sparkles: :thumbsup: :sparkles:
Micah Bales
@micahbales
Apr 23 2016 01:37
well played
CamperBot
@camperbot
Apr 23 2016 01:37
:star: 357 | @skhvan1111 | http://www.freecodecamp.com/skhvan1111
Rory Avant
@roryavant8
Apr 23 2016 01:38
Nevermind I figure it out.
Coy Sanders
@coymeetsworld
Apr 23 2016 01:39
yeah you missed the last number @micahbales, was helping someone else out w/ that exact same problem
Bruce Young
@mutantspore
Apr 23 2016 01:40
@roryavant8 you need to make asecond call to channels
Micah Bales
@micahbales
Apr 23 2016 01:41
@coymeetsworld +1
Rory Avant
@roryavant8
Apr 23 2016 01:43
What would making a second call to channel do? @mutantspore
I noticed if the account doesn't exist, then it doesn't show up in the link object's self attribute. I could compare users against that string to see if the account exist.
Bruce Young
@mutantspore
Apr 23 2016 01:44
you were calling ? streams?
just trying to help with those who are offline but exist
Rory Avant
@roryavant8
Apr 23 2016 01:47
yes, i made called to streams @mutantspore
but if online nothing is really returned @mutantspore
offline*
Bruce Young
@mutantspore
Apr 23 2016 01:50
yes, so look them up on channels also.. it will all be there
Rory Avant
@roryavant8
Apr 23 2016 01:51
ahh I see. @mutantspore
I was being linked to the API by FCC which brought me straight to the API regarding to streams. My mistake @mutantspore
dgerbe
@dgerbe
Apr 23 2016 01:53
Can someone recommend a good api for obtaining quotes? I'm trying to use http://quotesondesign.com/api-v4-0/, but it seems to always return the same quote...
Bruce Young
@mutantspore
Apr 23 2016 01:54
@roryavant8 :) you need a call to both to get the full info. Plenty of extra stuff there if you poke around a bit too
Rory Avant
@roryavant8
Apr 23 2016 01:55
My next question was going to be how to access the logos if offline, but I'm sure I can find them in there now. @mutantspore
Bruce Young
@mutantspore
Apr 23 2016 01:58
yep :)
Dylan
@dhcodes
Apr 23 2016 02:02
@dgerbe I see a lot of people using Chuck Norris quotes
maybe check out this too: https://theysaidso.com/api/ @dgerbe
dgerbe
@dgerbe
Apr 23 2016 02:13
ty @dhcodes
dgerbe
@dgerbe
Apr 23 2016 02:27
@dhcodes any idea why I call getJson with this url http://quotes.stormconsultancy.co.uk/random.json, I get the error (SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of JSON data?
Dylan
@dhcodes
Apr 23 2016 02:31
@dgerbe I'm guessing it's something in your code. can you post your codepen?
dgerbe
@dgerbe
Apr 23 2016 02:42
@dhcodes
Micah Bales
@micahbales
Apr 23 2016 02:46
So I'm working on Sum All Primes. It looks like this algorithm is going to be extremely complex, à la: https://en.wikipedia.org/wiki/Sieve_of_Eratosthenes
Is there an easier way to find primes?
Dylan
@dhcodes
Apr 23 2016 02:53
@dgerbe there's a cross-origin error for that api I guess
your console shows: XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
dgerbe
@dgerbe
Apr 23 2016 02:56
where do I see this console you speak of? I see firefox developer tools has a console
but I don't see that error
@dhcodes
buiphuking
@buiphuking
Apr 23 2016 02:57
hi guys, i do No repeats please, any idea to get that number that list permutation and count them?
Dylan
@dhcodes
Apr 23 2016 02:58
on chrome it's part of the web tools @dgerbe
are you on mac or win?
dgerbe
@dgerbe
Apr 23 2016 02:59
I'm on win and using firefox. Now I see it. I had to change the types of messages I was displaying. Is there anyway to fix this error?
Michael Karpinski
@karpimpski
Apr 23 2016 03:00
@micahbales Sum All Primes isn't too hard. just make a for loop for each number less than the number you're given!
@micahbales these two things were my best friends: for loops and the modulus operator
Dylan
@dhcodes
Apr 23 2016 03:01
@dgerbe not per se. It's a security of codepen to keep people from using codepen to generate spam api calls
Michael Karpinski
@karpimpski
Apr 23 2016 03:02
http://codepen.io/karpimpski/pen/jqpYYG for my Pomodoro clock, how do I make it so that when I click my timer it will stop if I click it, and start if I click it again? the first part isn't too hard, but I don't know how I can make a function that will toggle that
Dylan
@dhcodes
Apr 23 2016 03:02
@dgerbe i'm not sure which apis work for quotes. You might search the chat history. You can of course write your own object or array of quotes and access it that way
Michael Karpinski
@karpimpski
Apr 23 2016 03:03
could I maybe make a boolean that switches every time I click? that seems like it would complicate things
Dylan
@dhcodes
Apr 23 2016 03:03
@karpimpski that's what i did
Michael Karpinski
@karpimpski
Apr 23 2016 03:04
@dhcodes okay, thanks! glad to know my solution makes sense
CamperBot
@camperbot
Apr 23 2016 03:04
karpimpski sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 677 | @dhcodes | http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Apr 23 2016 03:04
I think you may be able to use ternary operators to make it more efficient but i did it with booleans
Michael Karpinski
@karpimpski
Apr 23 2016 03:04
@dhcodes I should probably learn to use ternary operators. I know the syntax, but I've never actually used them in my code
Dylan
@dhcodes
Apr 23 2016 03:05
@karpimpski I think i set var running = true; and then if you clicked stop, i stopped the time, stored the values, and then changed running to false, and then had it so if you clicked the button and running was false, it would start the time
you get the idea
same @karpimpski i need a good youtube video
Michael Karpinski
@karpimpski
Apr 23 2016 03:06
@dhcodes I think what I'll do is make a boolean at the top and set it to false. then every time I click, I'll toggle the boolean and make a big if statement around a portion of my code saying to only run if my var is true
Dylan
@dhcodes
Apr 23 2016 03:07
right
best of luck
Michael Karpinski
@karpimpski
Apr 23 2016 03:09
@dhcodes hm, it only works for the first click still. var = !var toggles the boolean value right?
Dylan
@dhcodes
Apr 23 2016 03:13
@karpimpski i didn't do it like that
I just made my var change each time and used if statements
it was probably not the right way though
I gotta go, though. Maybe someone knows a better way.
Michael Karpinski
@karpimpski
Apr 23 2016 03:14
@dhcodes how did you do it? yeah, I just made my var changed and put my whole click function in an if statement saying if(running), do this. then I made another function that toggled running every time I clicked, but it doesn't change the state of running
buiphuking
@buiphuking
Apr 23 2016 03:22
Michael Karpinski
@karpimpski
Apr 23 2016 03:33
@dhcodes got it to work! just used 2 buttons instead, not sure if that's what you did
Michael Karpinski
@karpimpski
Apr 23 2016 04:06
http://codepen.io/karpimpski/pen/jqpYYG?editors=1111 completed the clock! thanks again for your help @dhcodes
CamperBot
@camperbot
Apr 23 2016 04:06
karpimpski sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 678 | @dhcodes | http://www.freecodecamp.com/dhcodes
kirbyedy
@kirbyedy
Apr 23 2016 04:52
@karpimpski looks nice, but there is a problem
during the countdown, I am able to change the time, even to get into minus, as you can see
so maybe you should disable the buttons
Michael Karpinski
@karpimpski
Apr 23 2016 06:10
@kirbyedy thanks! I don't want to disable the buttons, but I have an easy fix for the negatives
CamperBot
@camperbot
Apr 23 2016 06:10
karpimpski sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 909 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 23 2016 06:19
@karpimpski not to disable them completely just during the countdown, once the user clicks on stop/reset enable them again
Michael Karpinski
@karpimpski
Apr 23 2016 06:20
@kirbyedy I know what you meant, I kept them in there intentionally. do you think I should disable them completely when it's running?
during the countdown
kirbyedy
@kirbyedy
Apr 23 2016 06:22
well either that, or think of the way that the user wont be able to change the time during the countdown
even if the user can click on them, just make sure that the clock does not change
Devesh Shetty
@devesh-shetty
Apr 23 2016 06:47
explain js
CamperBot
@camperbot
Apr 23 2016 06:47

# Challenge: Accessing Nested Arrays in JSON

As we have seen in earlier examples, JSON objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.

Here is an example of how to access a nested array:

```js
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
:pencil: read more about challenge accessing nested arrays in json on the FCC Wiki

Devesh Shetty
@devesh-shetty
Apr 23 2016 06:52
help js
CamperBot
@camperbot
Apr 23 2016 06:52

# Challenge: Accessing Nested Arrays in JSON

As we have seen in earlier examples, JSON objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.

Here is an example of how to access a nested array:

```js
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats1; // "Fluffy"
:pencil: read more about challenge accessing nested arrays in json on the FCC Wiki

Devesh Shetty
@devesh-shetty
Apr 23 2016 06:52
help css
CamperBot
@camperbot
Apr 23 2016 06:52

# Change the CSS of an Element Using jQuery

We can also change the CSS of an HTML element directly with jQuery.

Query has a function called `.css()` that allows you to change the CSS of an element.

``````<script>
\$("#target1").css("color", "red");

});
</script>``````
Devesh Shetty
@devesh-shetty
Apr 23 2016 06:53
find js
Devesh Shetty
@devesh-shetty
Apr 23 2016 06:53
explain js
CamperBot
@camperbot
Apr 23 2016 06:53

# Challenge: Accessing Nested Arrays in JSON

As we have seen in earlier examples, JSON objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.

Here is an example of how to access a nested array:

```js
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats1; // "Fluffy"
:pencil: read more about challenge accessing nested arrays in json on the FCC Wiki

Nazim
@nazimkazim
Apr 23 2016 07:06
@All Hey guys can you help me to tackle an issue in my code. In my "Twitch.tv" project not every row goes down. Why is that?
http://codepen.io/nazimkazim/pen/ONEYgZ
Martialis39
@Martialis39
Apr 23 2016 07:33
@nazimkazim Hey
What exactly do you mean?
Do you want it all to be one column?
Jayson Ash
@ScriptGeek
Apr 23 2016 08:08
I'm trying to get my Simon game to resize nicely, but it either refuses to cooperate or I'm a bit dumb. http://codepen.io/ScriptGeek/pen/wGxXPj
Nazim
@nazimkazim
Apr 23 2016 08:08
@Martialis39 Yes you are right. Somehow some row go right...
Justin
@daemedeor
Apr 23 2016 08:10
@ScriptGeek you using percentages?
Jayson Ash
@ScriptGeek
Apr 23 2016 08:11
@daemedeor no, I'm using relative positioning
Justin
@daemedeor
Apr 23 2016 08:12
@ScriptGeek my suggestion is to make a containing div and then scale your elements to that div as it gets smaller. relative positioning, just puts the element relative to where it is currently in the dom
Jayson Ash
@ScriptGeek
Apr 23 2016 08:14
@daemedeor That could work easily for the width, but the height property works only when a parent element has a specified height
Justin
@daemedeor
Apr 23 2016 08:15
@ScriptGeek then specify a height ;) imo you shouldn't really try to force a height
Jayson Ash
@ScriptGeek
Apr 23 2016 08:15
@daemedeor as the width is adjusted, the height will also need to maintain the height/width ratio... I suppose I could set the height with javascript, though
Justin
@daemedeor
Apr 23 2016 08:16
@ScriptGeek sure.....
Jayson Ash
@ScriptGeek
Apr 23 2016 08:17
@daemedeor thanks for the help
CamperBot
@camperbot
Apr 23 2016 08:17
scriptgeek sends brownie points to @daemedeor :sparkles: :thumbsup: :sparkles:
:star: 622 | @daemedeor | http://www.freecodecamp.com/daemedeor
MacKenzie Whalen
@mkwhalen
Apr 23 2016 08:50
I'm struggling to get the button the toggle between Fahrenheit and Celsius in the Local Weather App. Let me know if you can help! Thanks!
http://codepen.io/mkwhalen/pen/mPjXzp?editors=0011
kirbyedy
@kirbyedy
Apr 23 2016 09:24
@mkwhalen I am a bit lost in your code, but did you try with onclick hide/show
Jose Barakat
@JoseBarakat
Apr 23 2016 09:56
Hi everyone. Can anybody help me with this:
I need to translate this curl command into XHR
``````curl -H 'Accept: application/vnd.twitchtv.v3+json' \
-X GET https://api.twitch.tv/kraken/channels/test_channel``````
Robert Uivarosi
@URobert
Apr 23 2016 09:57
@mkwhalen Here is what you could do. You have a function that is executed on each click, you have a counter that is increased on each function execution... then you check if the value is %2... based on that if condition you could switch between F and C.
@mkwhalen here is the function that I used... look at it only if necessary. It can clearly be improved but here it is:
``````// Toggle Fahrenheit - Celsius
function switchFunction () {
counter++;
console.log(counter);
if (counter % 2 === 0){
units = "imperial";
unitDisplay = "°F";
\$("#switchB").html("Switch to Celsius");
wUnit = " Mph"
getCurrentWeatherParameters();

}else{
units = "metric";
unitDisplay = "℃";
\$("#switchB").html("Switch to Fahrenheit");
wUnit = " Km/h"
getCurrentWeatherParameters();
}
}``````
alpox
@alpox
Apr 23 2016 10:07
@JoseBarakat you only need to care about the url. Use jQuery \$.getJSON for it
Jose Barakat
@JoseBarakat
Apr 23 2016 10:15
@alpox , do you know if I need an authentication token to make the request to the twitch.tv server?
Robert Uivarosi
@URobert
Apr 23 2016 10:16
@JoseBarakat from what I recall, you don't need a toke for the twitch.tv api
@JoseBarakat here is the request I used: ...
`` \$.getJSON("https://api.twitch.tv/kraken/streams/"+users[i]+ "?callback=?", function(json) { ...``
Jose Barakat
@JoseBarakat
Apr 23 2016 10:18
ok, thanks a lot @alpox @URobert , now I can continue, I was stuck...
CamperBot
@camperbot
Apr 23 2016 10:18
josebarakat sends brownie points to @alpox and @urobert :sparkles: :thumbsup: :sparkles:
:star: 816 | @urobert | http://www.freecodecamp.com/urobert
:star: 593 | @alpox | http://www.freecodecamp.com/alpox
Robert Uivarosi
@URobert
Apr 23 2016 10:18
@JoseBarakat yw, happy coding !
alpox
@alpox
Apr 23 2016 10:35
@JoseBarakat You don't :-)
Jose Barakat
@JoseBarakat
Apr 23 2016 10:39
hahaha :smile: :+1:
or rather is my list-style-image tag not working.
kirbyedy
@kirbyedy
Apr 23 2016 12:28
Apr 23 2016 12:30

@kirbyedy in my css sheet which I'm guessing you can't see now that you said that, I have:

``````ul .paw{
list-style-image: url('media/paw_print.png');
}``````

the idea being to make the bullets into little paw prints. I did virtually the same thing with my tribute page making them dice, but for some reason it isn't working here.

and I'm getting frustrated. I'm sure I'm missing something, but for the life of me, I can't tell what it is.
kirbyedy
@kirbyedy
Apr 23 2016 12:33
and I guess you did not check your console right ? :)
Apr 23 2016 12:38
@kirbyedy well, good catch, but I've tried now several path variations and no error but still no icon. but perhaps you are on to something.
Apr 23 2016 12:39
@ChadKreutzer - perhaps if you remove the `/` from the front of your path in that declaration for the list-style-image?
kirbyedy
@kirbyedy
Apr 23 2016 12:40
I dont see paw_print.png in here
Apr 23 2016 12:41
hmmm.
Apr 23 2016 12:43
@ChadKreutzer - perhaps you're making changes as we are looking at this?? I can go to the `media` directory on your site and see the image for the `paw_print.png`, so it is there, maybe something keeping it from being seen on the site? File protection issues?
Apr 23 2016 12:45
@khaduch I am making changes. ever since @kirbyedy mentioned about the console throwing the 404 error, I've been experimenting with different paths. most recently, In response to his pic up there, I tried experimenting with the WWlogo.png picture.
(and also to no avail)
kirbyedy
@kirbyedy
Apr 23 2016 12:47
@ChadKreutzer let me throw you a bone here...
Tanmay Agrawal
@tanmay7270
Apr 23 2016 12:48
http://codepen.io/tanmay7270/pen/pyPmLm?editors=1000
I have a problem with my navbar. Whenever it is viewed on a phone/small screen, it gets squeezed into multiple lines one below the other. How do I keep it uniform single-lined bar for all screen sizes?
Apr 23 2016 12:48
@kirbyedy okay...
kirbyedy
@kirbyedy
Apr 23 2016 12:48
have you thought about having a carousel instead of this window ?
just a tiny one under the logo for example
Apr 23 2016 12:50
instead of the tabs? that still doesn't solve the bullet point issue though. I'm wanting to use that for her list of services--whenever she gets them to me. I'm also waiting on her about and bio write ups.
kirbyedy
@kirbyedy
Apr 23 2016 12:50
not the tabs
this window that shows up
with a comment
like... good service, happy dog bla bla
Apr 23 2016 12:51
ohhh! the comments! that is smart! it didn't even occur to me. I always think of carosel as for pictures.
Apr 23 2016 12:51
@ChadKreutzer - okay - I found that this path works: `list-style-image: url('../media/paw_print.png');` for some reason, it is referencing this using the `css` path, so it was looking for `css/media/paw_print.png`. The next thing is that the paw-print is H-U-G-E, so I was thinking that it didn't show up on the page, but off to the left i saw the corner of the paw...
kirbyedy
@kirbyedy
Apr 23 2016 12:51
yea, does not have to be big, let it run under the logo somewhere
just plain text
Apr 23 2016 12:53
thanks @kirbyedy @khaduch I gotta log to go home and go to bed.
CamperBot
@camperbot
Apr 23 2016 12:53
:star: 910 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Tanmay Agrawal
@tanmay7270
Apr 23 2016 12:53
I have a problem with my navbar. Whenever it is viewed on a phone/small screen, it gets squeezed into multiple lines one below the other. How do I keep it uniform single-lined bar for all screen sizes?
kirbyedy
@kirbyedy
Apr 23 2016 12:54
@tanmay7270 bootstrap, you are missing it from your codepen settings in the javascript section
Tanmay Agrawal
@tanmay7270
Apr 23 2016 12:55
I tried adding container-fluid around the navbar, didn't work
kirbyedy
@kirbyedy
Apr 23 2016 12:56
Tanmay Agrawal
@tanmay7270
Apr 23 2016 12:56
Oh, let me check it
kirbyedy
@kirbyedy
Apr 23 2016 12:56
you are missing some code there
Joshua Travis
@jktravis
Apr 23 2016 12:58
Hi. I'm getting really close on the Conway's Game of Life challenge. But I have a pretty serious performance problem. I’m not really sure how to address it.
The gist is that the browser feels sluggish, and it won’t run in Chrome at all due to the maximum stack size being exceeded.
Bruno Sertić
@JAMESARAAAAA
Apr 23 2016 13:01
Hello, I'm doing this first 'real' task "Tribute page", how should I add an image?
Is there anyone who can knows how to do that?
who knows*
Joshua Travis
@jktravis
Apr 23 2016 13:01
When it errors, it points to a lodash method that’s doing a deepClone of the state, which was needed to prevent the state from changing, while the state is still be examined.
Bruno Sertić
@JAMESARAAAAA
Apr 23 2016 13:02
found it
Joshua Travis
@jktravis
Apr 23 2016 13:10
Is there a room specific to the react challenges?
Holic
@Holic101
Apr 23 2016 14:10
Hi everybody, could you please help me with the wiki viewer project? I can't get data from the API yet. Can't find the bug... http://codepen.io/Holic101/pen/KzBqvd
Christina
@cgraham74
Apr 23 2016 14:14
@Holic101 You have to set the format to json
@Holic101 When you put `https://en.wikipedia.org/w/api.php?format=jsonfm&action=query&list=search&srprop=snippet&srsearch=` into a browser
@Holic101 you get this. This is the HTML representation of the JSON format. HTML is good for debugging, but is unsuitable for application use.
Specify the format parameter to change the output format. To see the non-HTML representation of the JSON format, set format=json
Erkki
@lehesepp
Apr 23 2016 14:17
May someone recommend a very good to follow tutorial with explanations into learning Backbone? The official site is of little use.
Holic
@Holic101
Apr 23 2016 14:17
@cgraham74 i tried different formats but no luck yet...changed it to "json" now like you suggested, but still no results are displayed...
Jeff
Apr 23 2016 14:19
@Holic101 You are getting a cross-origin error. Adding `callback=?` to your url should fix that.
``var url = "https://en.wikipedia.org/w/api.php?callback=?&format=json&action=query&list=search&srprop=snippet&srsearch=" + searchString;``
@Holic101 And change the format to json as @cgraham74 said
Holic
@Holic101
Apr 23 2016 14:24
@adzam5 Thx, but I still don't get anything on my screen with the function
``````function display(data) {
\$("#result1").html(data.query.search.title);
}
\$.getJSON(url, display);``````
CamperBot
@camperbot
Apr 23 2016 14:24
holic101 sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
Holic
@Holic101
Apr 23 2016 14:24
@cgraham74 thx for the hint
CamperBot
@camperbot
Apr 23 2016 14:24
holic101 sends brownie points to @cgraham74 :sparkles: :thumbsup: :sparkles:
:star: 293 | @cgraham74 | http://www.freecodecamp.com/cgraham74
Jeff
Apr 23 2016 14:48
@Holic101 Very strange. Your URL looks good to me, but if you `console.log(data)` you will see it returns empty results.
WilliamDecker
@WilliamDecker
Apr 23 2016 14:48
can anyone recommend some reading on API's specifically related to the random quote generator challenge?
Jeff
Apr 23 2016 14:49
Even if you code a search term into the url it returns empty results.
Fabio Oliveira Costa
@drFabio
Apr 23 2016 14:54
@WilliamDecker i personally love JSON RPC 2.0
you just send jsons and receive jsons
WilliamDecker
@WilliamDecker
Apr 23 2016 14:55
awesome thx :D
sometimes I lack the language on what to google and it leaves me stuck with only finding how to interact with specific API's, but skips the "how to use GET" part :D
Fabio Oliveira Costa
@drFabio
Apr 23 2016 14:56
oh if you want just to learn how to use API if you are using jquery http://api.jquery.com/jquery.ajax/
If you are using vanilla JS http://www.w3schools.com/ajax/
Caz
@caz841
Apr 23 2016 14:58
I'm working on the weather checker - I think I've got it pretty much working however the toggle button is causing unusual behaviour. Whichever button is not selected as active to start with causes the bag to scroll back to the top when you click on it. http://codepen.io/caz841/full/GZBBBe/
WilliamDecker
@WilliamDecker
Apr 23 2016 14:59
these are all great, thanks @drFabio
CamperBot
@camperbot
Apr 23 2016 14:59
williamdecker sends brownie points to @drfabio :sparkles: :thumbsup: :sparkles:
:star: 12 | @drfabio | http://www.freecodecamp.com/drfabio
Fabio Oliveira Costa
@drFabio
Apr 23 2016 15:00
Thanks
skhvan1111
@skhvan1111
Apr 23 2016 15:00
This message was deleted
skhvan1111
@skhvan1111
Apr 23 2016 15:07
@caz841 something with \$('.tempToggle').toggle();
seems its showing 2, then hide one
probably better to not keep 2 blocks for each temperature type.
kirbyedy
@kirbyedy
Apr 23 2016 15:09
@caz841 easier would be to have 1 button with C/F and just toggle
Micah Bales
@micahbales
Apr 23 2016 15:10
Howdy folks! I'm working on Sum All Primes and am getting an infiinte loop, not quite sure why. Here's my code. The infinite loop is the for loop with `k` as the variable.
``````function sumPrimes(num) {
var numSoFar = [];
var primeSum = 0;

for (i = 2; i <= num; i++) {
numSoFar.push(i);
}

for (j = 0; j < numSoFar.length; j++) {
for (k = 0; k < numSoFar[j]; k++) {
var prime = false;
console.log(numSoFar[k]);
if (numSoFar[j] % numSoFar[k] !== 0)
prime = true;
}
if (prime) {
primeSum += numSoFar[j];
prime = false;
}
}

console.log(primeSum);
}

sumPrimes(977);

// 1, 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97``````
kirbyedy
@kirbyedy
Apr 23 2016 15:11
k = 0; k < numSoFar[j]; k++)
note the j in the bracket
maybe thats causing the infinite loop
Micah Bales
@micahbales
Apr 23 2016 15:12
hmm
do you see what I'm trying to do? Any idea of a better way to do it?
kirbyedy
@kirbyedy
Apr 23 2016 15:18
Im not very good at this to be honest
Micah Bales
@micahbales
Apr 23 2016 15:19
@kirbyedy haha, me neither! :D
just taking it one day at a time.
Martialis39
@Martialis39
Apr 23 2016 15:20
Whats the best way
to delay a function from firing for 5 seconds?
using js/jquery :)
skhvan1111
@skhvan1111
Apr 23 2016 15:20
settimeout
@Martialis39
Martialis39
@Martialis39
Apr 23 2016 15:21
@skhvan1111 Ty!
One more thing
Say I append a line of html to an element and then fade it out
what happens to it? Does it get deleted
skhvan1111
@skhvan1111
Apr 23 2016 15:21
@micahbales can you send link for that challenge?
Martialis39
@Martialis39
Apr 23 2016 15:21
or do I have to remove it with a method if I want to wirte over it?
Samuel Cupidon
@Zerazera
Apr 23 2016 15:22
@kirbyedy Try writing a separate function to check for primes
skhvan1111
@skhvan1111
Apr 23 2016 15:24
it will be in DOM even after http://api.jquery.com/fadeout/
so if you want to remove, need to remove it manually
max77p
@max77p
Apr 23 2016 15:24
looking for some help cleaning up my code here
in jquery
i am repeating the json api pull in both button clicks...i am trying to just make a function and call it under each button click to simplify the code
but having trouble with it
skhvan1111
@skhvan1111
Apr 23 2016 15:26
its possible to call once and just convert C to F and back in js
nskp
@nskpavani
Apr 23 2016 15:26
@micahbales may be adding all primes to an array and then adding them all in a different loop would be an easy one to go...
Casey Heath
@ExhibitArts
Apr 23 2016 15:26
Could someone help me? I'm trying to make the last paragraph at the bottom wrap the image on the left to where the text doesn't overlap. - http://explorecode.byethost8.com
max77p
@max77p
Apr 23 2016 15:27
@skhvan1111 talking to me?
skhvan1111
@skhvan1111
Apr 23 2016 15:27
@max77p yes
jameslw
@jameslw
Apr 23 2016 15:27
Struggling to get twitter button working on Quote machine. got code from different places but does not work as it should. Please help
max77p
@max77p
Apr 23 2016 15:27
@skhvan1111 then would i have to put the button click inside the call?
like an if statement?
nskp
@nskpavani
Apr 23 2016 15:28
and check for smaller ranges first and then try big arrays...that way we can be sure where it goes wrong..like trying for sumPrimes(10) first and then increasing there after @micahbales
skhvan1111
@skhvan1111
Apr 23 2016 15:28
@max77p no, just get C, for example, then 1.8 + 32 to convert it to F
max77p
@max77p
Apr 23 2016 15:29
@skhvan1111 but i would only convert if the user clicks the farenheit button
skhvan1111
@skhvan1111
Apr 23 2016 15:29
@max77p yes
Casey Heath
@ExhibitArts
Apr 23 2016 15:29
Could someone help me? I'm trying to make the last paragraph at the bottom wrap the image on the left to where the text doesn't overlap. - http://explorecode.byethost8.com
max77p
@max77p
Apr 23 2016 15:29
oh i see what you are saying now lol. ok so right now would i have to make the variables global to be able to convert outside the api pull?
skhvan1111
@skhvan1111
Apr 23 2016 15:30
@max77p yes
nskp
@nskpavani
Apr 23 2016 15:30
@ExhibitArts are u using bootstrap??
Caz
@caz841
Apr 23 2016 15:30
h@skhvan1111 fantastic thank you - that's sorted it. Changed it to toggle a hidden class which seems to work better. How did you find out it was exhibiting that behaviour?
Casey Heath
@ExhibitArts
Apr 23 2016 15:30
@nskpavani No.
jameslw
@jameslw
Apr 23 2016 15:30
can someone please explain the principles of how to create a dynamic twitter button?
nskp
@nskpavani
Apr 23 2016 15:30
that can give you a better alignment I guess
what are u using basically?
Casey Heath
@ExhibitArts
Apr 23 2016 15:31
@nskpavani Just html/css
I'm not using any bootstrap
@nskpavani Do you see what I mean by overlap?
@nskpavani Do you see the bolded part of the paragraph? I'm trying to make it to where it's on the left of the image.
nskp
@nskpavani
Apr 23 2016 15:33
yeah..u mean text on left and related image on right side ...is that right?
Casey Heath
@ExhibitArts
Apr 23 2016 15:34
@nskpavani Yes.
but only the bolded part. I want it to have a wrap effect if that makes sense.
max77p
@max77p
Apr 23 2016 15:35
i am trying something here, where i put lat and lon as global variable
but on initial page load, its outputting the wrong temp
whats going on here?
nskp
@nskpavani
Apr 23 2016 15:35
try ending span after image and see?
max77p
@max77p
Apr 23 2016 15:36
if i click the buttons then it outputs the right temp
Samuel Cupidon
@Zerazera
Apr 23 2016 15:36
@max77p Won't work. AJAX is asynchronous.
skhvan1111
@skhvan1111
Apr 23 2016 15:36
This message was deleted
Casey Heath
@ExhibitArts
Apr 23 2016 15:37
@nskpavani That won't work. I have the image within the css. - ```.wp-img { height: 350px; width: 600px; float: right; margin-top: -66px; margin-right: -51px; background-image: url(images/wp-content-img.png); background-repeat: round; }```
max77p
@max77p
Apr 23 2016 15:37
@Zerazera so i would have to keep it inside then?
skhvan1111
@skhvan1111
Apr 23 2016 15:37
@max77p why do you call api 3 times?
Samuel Cupidon
@Zerazera
Apr 23 2016 15:38
@max77p The problem with using global variables is that there is no guarantee that the variables will have been updated when you call the next function. The most straightforward option is to run the next function as a callback function.
max77p
@max77p
Apr 23 2016 15:40
@skhvan1111 yea this is what i am trying to simplify, because like you said its better to convert the c to f, but i am wondering if i can just include the button click inside the api call in some form of if statement?
skhvan1111
@skhvan1111
Apr 23 2016 15:41
actually, button click and api load would be connected via temperature.
no need to try to put it inside
so, need to load, then, if user clicks, calc and show another value
max77p
@max77p
Apr 23 2016 15:41
@skhvan1111 would you mind showing me example in fork please?
nskp
@nskpavani
Apr 23 2016 15:42
@ExhibitArts ...check this out may be this can help!! http://www.w3schools.com/css/css_rwd_intro.asp
skhvan1111
@skhvan1111
Apr 23 2016 15:42
@max77p
let me show you here
-getTemperature(value, type) -> type - C or F
max77p
@max77p
Apr 23 2016 15:43
@skhvan1111 so create a function to convert then call that function on button click?
skhvan1111
@skhvan1111
Apr 23 2016 15:43
yes
max77p
@max77p
Apr 23 2016 15:43
@skhvan1111 awesome, thanks!
CamperBot
@camperbot
Apr 23 2016 15:43
max77p sends brownie points to @skhvan1111 :sparkles: :thumbsup: :sparkles:
:star: 361 | @skhvan1111 | http://www.freecodecamp.com/skhvan1111
skhvan1111
@skhvan1111
Apr 23 2016 15:44
load once, convert back and forth.
Martialis39
@Martialis39
Apr 23 2016 15:47
Hey guys. wonder if you can help me with this
im trying to loop through numbers with a delay of 5 seconds,
!help
CamperBot
@camperbot
Apr 23 2016 15:48

### Basic Commands:

• `find TOPIC` find all entries about topic. ex: `find js`
• `wiki TOPIC` show contents of topic page
• `thanks @username` send brownie points to another user
• `about @username` shows info on that user
• `Algorithm BONFIRENAME` info on a Algorithm

:speech_balloon: meet CamperBot in this room!

Martialis39
@Martialis39
Apr 23 2016 15:48
!javascript
find js
Martialis39
@Martialis39
Apr 23 2016 15:49
`````` \$(".start").click(function(){
console.log(" 'Start' clicked")
for (var i = 0; i<10 ; i++){
theNumbers.push(Math.round((Math.random() * difficulty)) + lowestPossible);
console.log(theNumbers[i]);
}
\$("#number").append("<h3 class='result'>"+theNumbers[0]+"</h3>");

setTimeout(secondNumber, 5500);
});

//\$("h1").css("color", "yellow");

function secondNumber(){
console.log(theNumbers[1]);
\$(".result").empty();
thirdNumber();
//setTimeout(thirdNumber, 5500);
}
function thirdNumber(){
console.log(theNumbers[2]);
\$(".result").empty();
\$("#number").append("<h3 class='result'>"+theNumbers[2]+"</h3>");
//\$("#number").append("<form id='form-container' class='form-container'><label for='check'></label><input type='check' id='check' value=''><button id='submit-btn'>Submit</button>");

//            \$(".check").click(function(){
//                \$(this).val === theNumbers[0];
//
//            });

};``````
works up to secondNumber
max77p
@max77p
Apr 23 2016 15:59
so in this, would i call the gettemp function inside the .html?
how can i best do this?
@skhvan1111 ahh stupid question lol i figured it out...implement .html inside the gettemp function then call that whole function inside the button click function
got it! thanks
skhvan1111
@skhvan1111
Apr 23 2016 16:01
)
Zubair Ali
@03aliz
Apr 23 2016 16:04
Hi, I'm having some trouble with the Twitch API, I'm trying to get users who are online to the top of the list by using prepend. That seems to work, but I am left with a copy of the divs at the bottom. I want to know how I can delete or remove the divs or better rather than copying and pasting, to move the div's entirely to the top. Here is my project:http://codepen.io/aliz16/pen/qZyVxx?editors=1111
lcthornhill
@lsrus
Apr 23 2016 16:46
@03aliz if you wait until the second api call has returned, you can append or prepend the output string at that point as appropriate, and everything will only get attached once
Zubair Ali
@03aliz
Apr 23 2016 16:51
@lsrus Thank you that worked
CamperBot
@camperbot
Apr 23 2016 16:51
03aliz sends brownie points to @lsrus :sparkles: :thumbsup: :sparkles:
:star: 392 | @lsrus | http://www.freecodecamp.com/lsrus
Taras Yaremkiv
@Y-Taras
Apr 23 2016 17:29
Hi everyone. Please give me some hint about next problem in bootstrap:
how to center elements horizontaly
http://codepen.io/Y-Taras/pen/xVJyXG
Apr 23 2016 17:37
@Y-Taras - if you add the class `center-block` to the image, it should do it? There is also `text-center` that you can put on the parent div element, maybe it will cover both cases?
Taras Yaremkiv
@Y-Taras
Apr 23 2016 17:39
@khaduch No it doesn't help, and anyway I need to center all elements.
Apr 23 2016 17:40
@Y-Taras - did you try `text-center` on the parent div of each row? It looks like it works, at least for one div when adding it in the dev tools...
Taras Yaremkiv
@Y-Taras
Apr 23 2016 17:42
@khaduch sory, I mean to center vertically. Text -center centers but horizontally
Vivek
@vivek28111992
Apr 23 2016 17:44
does anybody know angular here?
does anybody know angular here?
Apr 23 2016 17:44
@Y-Taras - oh, that's a different story. I think that that's much harder to do, I don't know a quick method for doing that? Some solutions that I have seen involve using a table, where you can center vertically within a `<td>` element? Maybe the flexbox method of doing things has a way to do it? (Although I haven't used that.) Maybe this article https://css-tricks.com/centering-css-complete-guide/ will help you?
skhvan1111
@skhvan1111
Apr 23 2016 17:45
@vivek28111992 yep, a little
Vivek
@vivek28111992
Apr 23 2016 17:45
@skhvan1111 can you join hackathon with us
https://www.angularattack.com
skhvan1111
@skhvan1111
Apr 23 2016 17:48
havent been on such campaigns. do you have exp in that?

@vivek28111992

We prefer apps built in Angular 2, but Angular 1 submissions will be accepted
i dont know 2. btw

Vivek
@vivek28111992
Apr 23 2016 17:49
@skhvan1111 no, but I guess it will fun and there are other people who are taking part from community, so not to worry much
@skhvan1111 that is fine. we don't want to win
skhvan1111
@skhvan1111
Apr 23 2016 17:50
)
ok, then i`d like to participate.
Vivek
@vivek28111992
Apr 23 2016 17:51
@skhvan1111 thank you :smile:
CamperBot
@camperbot
Apr 23 2016 17:51
vivek28111992 sends brownie points to @skhvan1111 :sparkles: :thumbsup: :sparkles:
:star: 362 | @skhvan1111 | http://www.freecodecamp.com/skhvan1111
skhvan1111
@skhvan1111
Apr 23 2016 17:51
sure, np )
but lets target to win.
Brett Henderson
@bretth18
Apr 23 2016 17:57
how the hell do you get React to work on codepen?
Michael Karpinski
@karpimpski
Apr 23 2016 18:15
hey guys, where could I find online mp3 files to use in my code?
@bretth18 there should be a React link in the JavaScript settings
@bretth18 yep, there's an option for React in the JavaScript options
Brett Henderson
@bretth18
Apr 23 2016 18:16
@karpimpski yeah I know, but it doesn't work
I've tried with using React and React-DOM 15.0 from fb also
nothing seems to work...
Michael Karpinski
@karpimpski
Apr 23 2016 18:16
@bretth18 oh, sorry. I've never used React, so I don't know how to get it to work with CodePen. sorry I couldn't help
alpox
@alpox
Apr 23 2016 18:23
@bretth18 Did you try to use ES6 classes etc. with react but didn't specify Babel as preprocessor?
Brett Henderson
@bretth18
Apr 23 2016 18:24
no, babel is specified
alpox
@alpox
Apr 23 2016 18:24
Brett Henderson
@bretth18
Apr 23 2016 18:25
@alpox sure, one sec. I setup an example one
alpox
@alpox
Apr 23 2016 18:30
@bretth18 React itself works but you had errors in your code. Try this:
``````var TestComponent = React.createClass({
render: function() {
return(
<div className="container-default">
<h1>Testing React on codepen</h1>
</div>
);
}
});

ReactDOM.render(<TestComponent />, document.getElementById("test"));``````
Brett Henderson
@bretth18
Apr 23 2016 18:32
so i need to call render differently, thanks @alpox . Been working with meteor and the render method is different
alpox
@alpox
Apr 23 2016 18:32

@bretth18 Go sure you see that i changed `testComponent` to `TestComponent` (First letter uppercase). Refering to the tutorials:

Note that native HTML element names start with a lowercase letter, while custom React class names begin with an uppercase letter.

CamperBot
@camperbot
Apr 23 2016 18:32
bretth18 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 595 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 23 2016 18:33
@bretth18 Also, as you have seen, the render function is in an object definition. And you had a typo in testComponent in the render function :-)
Brett Henderson
@bretth18
Apr 23 2016 18:33
yeah I saw the typo, but even with the typo fixed it still wouldn't work, needed to use the object definition syntax
alpox
@alpox
Apr 23 2016 18:34
up
Yup
And uppercase component name
Jason Redmon
@rehd66
Apr 23 2016 18:46
I feel like I'm missing something here. I've just completed the Tribute Page project and I'm immediately tasked with the Personal Portfolio Webpage. It seems to be uusing things I haven't learned in previous lessons, like navigation bars and animated buttons and so forth. Did I miss some lessons?/
Michael Karpinski
@karpimpski
Apr 23 2016 18:50
does anybody with experience know how I can play MP3 files with CodePen? I'd prefer a method where I use the cloud
@rehd66 nope, you're supposed to learn on your own as well as the lessons on the site
Mandeep Singh
@MandeepMann
Apr 23 2016 18:51
@rehd66 same situation here .. i think we have to sort it by ourselves
Michael Karpinski
@karpimpski
Apr 23 2016 18:51
@MandeepMann yeah, you're supposed to learn on your own with things like navbars and other stuff
Moisés Man
@moigithub
Apr 23 2016 19:00
html5 play ?
robynsmith
@robynsmith
Apr 23 2016 19:17

Hello everyone,

I’m working on the first Twitch API project. Here is the codepen:

https://codepen.io/robsmith/full/vGaQMb/

This is the problem:

Line 31 of the Javascript fails:

``displayContent();``

But if I run displayContent() in the browser console, it works fine. Any ideas?

lcthornhill
@lsrus
Apr 23 2016 19:36
@robynsmith at the moment, you are calling displayContent before the ajax calls have returned. I have added a couple of console.log calls here to show the issue
https://codepen.io/lsrus/pen/vGavBP?editors=0011
robynsmith
@robynsmith
Apr 23 2016 19:41
@lsrus I’m really confused. I’m calling displayContent() AFTER the previous calls
Is everything happening concurrently? And if so, how do I make it so that displayContent() only happens AFTER the data is returned?
Jared Blumer
@jaredblumer
Apr 23 2016 19:56

Hi everyone, i'm trying to getJSON city and state info for my weather app and then display it in my div, but I can't seem to get the jQuery promises to work.

``````var city = "", state = "";

function getCityAndState() {
\$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
city = data.city;
state = data.region;
});
}
function renderUI() {
\$("#weather").text(city + ", " + state);
}

Any thoughts?

robynsmith
@robynsmith
Apr 23 2016 20:02
thanks @lsrus That helped. I decided to use setInterval to solve this issue.
CamperBot
@camperbot
Apr 23 2016 20:02
robynsmith sends brownie points to @lsrus :sparkles: :thumbsup: :sparkles:
:star: 393 | @lsrus | http://www.freecodecamp.com/lsrus
cmf89
@cmf89
Apr 23 2016 20:02
@jaredgblumer getCityAndState should probably be getCityAndState() since it is a function call
also i don't think you are doing the promise correctly
Jared Blumer
@jaredblumer
Apr 23 2016 20:03
@cmf89 true. unfortunately that doesn't fix it.
@cmf89 so something else must be going on also
cmf89
@cmf89
Apr 23 2016 20:04
@jaredgblumer take a look at this page https://api.jquery.com/jquery.getjson/ and scroll down to "The jqXHR Object" which better explains how to link calls to the promises
@jaredgblumer although the easiest way to accomplish what you want is probably to just call renderUI() from within your api callback function
lcthornhill
@lsrus
Apr 23 2016 20:05
@robynsmith sorry, I wandered off :-( have you got things working okay?
Jared Blumer
@jaredblumer
Apr 23 2016 20:05
awesome thanks, @cmf89
CamperBot
@camperbot
Apr 23 2016 20:05
jaredgblumer sends brownie points to @cmf89 :sparkles: :thumbsup: :sparkles:
:star: 376 | @cmf89 | http://www.freecodecamp.com/cmf89
robynsmith
@robynsmith
Apr 23 2016 20:05
@lsrus Yeah. I used setInterval/setTimer to solve the problem
lcthornhill
@lsrus
Apr 23 2016 20:05
cool , sorry
Abby
@mabbie
Apr 23 2016 20:05

Hi everyone, I'm working on the Twitch api project and I'm struggling to make sense of promises.

I have a function that takes an array of channels, and maps them to an array of promises representing the ajax call to the api for that channel. This function returns another promise object that is resolved only after all promises have been resolved. I then take this returned object and call its `then()` method to log the results.

The code works fine for channels that exist (i.e. its promise is resolved), but for a channel that doesn't exits, the API returns a 422 error. The promise is rejected (`Uncaught (in promise)` error), which means `Promise.all()` immediately fails.

How do I catch that error in the promise so that `Promise.all()` returns the resolved promises still?

Here is my code

``````var channels = [
'freecodecamp',
'storbeck',
'terakilobyte',
'brunofin',
'habathcx',
'RobotCaleb',
'thomasballinger',
'noobs2ninjas',
'beohoff',
'medrybw',
];
var endpoint = 'https://api.twitch.tv/kraken/streams/';

function getData(channels) {
//Take an array of channel names, and transform
//each element into a promise representing the
//asynchronous call to the twitch API for the
//particular channel.
var promises = channels.map(function (name) {
return \$.ajax({
url: endpoint + encodeURIComponent(name),
dataType: 'json'
});
});

//This promise will only be resolved after we query
//the API for *all* channels.
return Promise.all(promises);
}

getData(channels).then(function (results) {
//results is an array of the responses returned
//from the API call.
results.forEach(function (result) {
console.log(result);
});
});``````
robynsmith
@robynsmith
Apr 23 2016 20:06
I read about async vs. sync calls. It seems like it’s probably better to have an event based app rather than a sync app as that makes the browser hang until the response comes back.
Jared Blumer
@jaredblumer
Apr 23 2016 20:12
@cmf89 I got it to work! Thank you so much.
CamperBot
@camperbot
Apr 23 2016 20:12
jaredgblumer sends brownie points to @cmf89 :sparkles: :thumbsup: :sparkles:
:warning: jaredgblumer already gave cmf89 points
cmf89
@cmf89
Apr 23 2016 20:12
no problem!
Abby
@mabbie
Apr 23 2016 20:41
Anybody?
Marcus
@mjohnsonengr
Apr 23 2016 20:44
@mabbie chain a reject on the raw promises
@mabbie I mean a `.catch()`not a reject
Nathan
@natertot12
Apr 23 2016 20:49
I finished my portfolio, any advice? http://s.codepen.io/natertot12/debug/zvKMBx
Abby
@mabbie
Apr 23 2016 20:50
@mjohnsonengr Are you referring to the promise returned by `\$.ajax()`?
Marcus
@mjohnsonengr
Apr 23 2016 20:50
@mabbie Yes!
@mabbie check out this article on Promises too; link specifically refers to the error handling section: http://www.html5rocks.com/en/tutorials/es6/promises/#toc-error-handling
Abby
@mabbie
Apr 23 2016 20:52
Thanks @mjohnsonengr I'll read it and try to implement it.
CamperBot
@camperbot
Apr 23 2016 20:52
mabbie sends brownie points to @mjohnsonengr :sparkles: :thumbsup: :sparkles:
:star: 103 | @mjohnsonengr | http://www.freecodecamp.com/mjohnsonengr
alpox
@alpox
Apr 23 2016 20:52
Islam Ibakaev
@dagman
Apr 23 2016 21:10
still working on `portfolio page` . Any feedback is appreciated :smile:
http://codepen.io/dagman/full/WwKrgX/
John Sevilla
@jsevilla274
Apr 23 2016 21:24
hey guys, would anyone happen to know why the vertical margins (top/bottom) of the content within a parent div wouldn't expand the vertical size of that parent div?
Taras Yaremkiv
@Y-Taras
Apr 23 2016 21:37
Hello everyone. The last thing in the Twitch Json I need to do is allign my text verticaly. Tryed couple of tricks but they didn't work. An ideas what would be effective to center vertically text and images?
http://codepen.io/Y-Taras/full/xVJyXG/
@dagman one of the coolest portfolios ever seen) May be change the font in Hi. and etc.
Jasmina Babic
@animsaj
Apr 23 2016 21:43
@Y-Taras do you mean left align channel names, next to logo images?
Taras Yaremkiv
@Y-Taras
Apr 23 2016 21:44
@animsaj vertically allign in the center
Jasmina Babic
@animsaj
Apr 23 2016 21:47
@Y-Taras your channel names are center aligned, as well as status it's bio thats;s left aligned only
Michael Karpinski
@karpimpski
Apr 23 2016 21:48
how can I add sound to my JavaScript in CodePen?
Taras Yaremkiv
@Y-Taras
Apr 23 2016 21:50
@animsaj Logo Name Bio and Status are vertically alligned in the top
@animsaj as far as I've understood You are talking about horizontal alligning
Jasmina Babic
@animsaj
Apr 23 2016 21:53
@Y-Taras ok. I got it. it's difficult to achieve because your status will vary (offline or some description). you can add some padding to a parent divs so it has some more room but have all the content in the midlle of hight of parent div is difficult.If you insist search for vertical alignment
Jasmina Babic
@animsaj
Apr 23 2016 22:00
@Y-Taras vertical-align: middle; is only for inline elements, not for divs
skhvan1111
@skhvan1111
Apr 23 2016 22:04
Torrence Cole
@trcwrx78
Apr 23 2016 22:09
I am working on my Random quote generator can anyone point me in the right direction to put a fade in/out effect on my quote. I was trying to apply it as a jQuery animation. http://codepen.io/trcwrx78/pen/oxygVL
Moisés Man
@moigithub
Apr 23 2016 22:21
Moisés Man
@moigithub
Apr 23 2016 22:35
@trcwrx78 remove this transition: all 2s linear 0.3s; from ur css div
Michael Karpinski
@karpimpski
Apr 23 2016 22:36
http://codepen.io/karpimpski/pen/oxMJrN how can I make these boxes line up in the same row?
nevermind, I got that. but how do I make them line up together now?
Moisés Man
@moigithub
Apr 23 2016 22:41
dontuse bootstrap :P
Michael Karpinski
@karpimpski
Apr 23 2016 22:41
@moigithub Bootstrap is by far the easiest way, at least for me. all I'm trying to do is remove the spaces between the boxes
Moisés Man
@moigithub
Apr 23 2016 22:42
BT grid have a "gutter" btw columns
Michael Karpinski
@karpimpski
Apr 23 2016 22:42
@moigithub anyway, all I'm using it for is rows and easily sizing my boxes
@moigithub is there no way to get rid of the gutter?
Moisés Man
@moigithub
Apr 23 2016 22:42
u can always override BT defaults...
Michael Karpinski
@karpimpski
Apr 23 2016 22:43
@moigithub yep, just looked up an easy override. thanks!
CamperBot
@camperbot
Apr 23 2016 22:43
karpimpski sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star: 992 | @moigithub | http://www.freecodecamp.com/moigithub
Islam Ibakaev
@dagman
Apr 23 2016 22:58
Torrence Cole
@trcwrx78
Apr 23 2016 23:08