These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Feb 2016
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 00:59
is that your portfolio @Jarvis-327
Looking pretty good bud....its a ways different from mine...im working on too
Matt Leonard
@matty22
Feb 24 2016 01:07
@Jarvis-327 I'd make it so that the longer quotes don't give you a scroll bar. Either make the quote text smaller or adjust height/padding somewhere. That way you don't have the jarring change when you get a long quote.
Working on the Wikipedia viewer, my API call is returning an object of objects and I need to know how to target them using dot/bracket notation when I won't know one piece of the string. Example: returnedObj.query.pages[13590]
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 01:10
im not to that yet..sorry @matty22
Matt Leonard
@matty22
Feb 24 2016 01:10
That last bit is one of the returned results, but that number will change if I search for a different word
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 01:10
I'm working on my porfolio
I still have a lot to do
Matt Leonard
@matty22
Feb 24 2016 01:12
Just keep going @Rogue00! Looking good so far!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 01:13
thank you @matty22 :)
CamperBot
@camperbot
Feb 24 2016 01:13
rogue00 sends brownie points to @matty22 :sparkles: :thumbsup: :sparkles:
:star: 421 | @matty22 | http://www.freecodecamp.com/matty22
Richard Corbett
@reacorbett
Feb 24 2016 02:15
@Rogue00 looking good.
Lanitta
@DivaWeb
Feb 24 2016 02:16
@Rogue00 keep letting the creative juices flowing
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:16
Thanks @reacorbett and @DivaWeb :)
CamperBot
@camperbot
Feb 24 2016 02:16
rogue00 sends brownie points to @reacorbett and @divaweb :sparkles: :thumbsup: :sparkles:
:star: 256 | @reacorbett | http://www.freecodecamp.com/reacorbett
:star: 221 | @divaweb | http://www.freecodecamp.com/divaweb
Richard Corbett
@reacorbett
Feb 24 2016 02:16
check mine out. I still have a lot to do as well.
http://codepen.io/reacorbett/full/EPzmqY/
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:17
ive still got a ways to go on it...i wont finish tonight lol
Lanitta
@DivaWeb
Feb 24 2016 02:18
I am still working on mine
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:18
very cool man
Richard Corbett
@reacorbett
Feb 24 2016 02:18
@Rogue00 thanks
CamperBot
@camperbot
Feb 24 2016 02:18
reacorbett sends brownie points to @rogue00 :sparkles: :thumbsup: :sparkles:
:star: 151 | @rogue00 | http://www.freecodecamp.com/rogue00
Lanitta
@DivaWeb
Feb 24 2016 02:18
@reacorbett getting creative
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:18
looks pretty good @reacorbett
Matt Bajorek
@mattbajorek
Feb 24 2016 02:18
@reacorbett I'm liking the color coordinations and the drawings
Richard Corbett
@reacorbett
Feb 24 2016 02:18
@mattbajorek thanks
CamperBot
@camperbot
Feb 24 2016 02:18
reacorbett sends brownie points to @mattbajorek :sparkles: :thumbsup: :sparkles:
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:18
lets see @DivaWeb
CamperBot
@camperbot
Feb 24 2016 02:18
:star: 130 | @mattbajorek | http://www.freecodecamp.com/mattbajorek
Richard Corbett
@reacorbett
Feb 24 2016 02:19
@DivaWeb I have to. Its the only thing im good at.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:19
a lot more artistic than mine..I love how evryone has their own vision..it really shows in the end results
Lanitta
@DivaWeb
Feb 24 2016 02:19
right
Alex Dobre
@Zerelt
Feb 24 2016 02:19
guys ... my code is displaying normally on jsbin, but if i pop up the window to try and get a fullscreen view it won't display the data that's supposed to be there from the component that does the ajax request, and the same on codepen .. any ideas ? i tried adding https://crossorigin.me/ before the url on codepen but won't work
Lanitta
@DivaWeb
Feb 24 2016 02:20
check out google libraries
Richard Corbett
@reacorbett
Feb 24 2016 02:20
@DivaWeb loving it. especially the guy holding the tin can.]
Lanitta
@DivaWeb
Feb 24 2016 02:20
@reacorbett right lol high tech
Alex Dobre
@Zerelt
Feb 24 2016 02:21
that codepen takes forever to load the images for me btw
Lanitta
@DivaWeb
Feb 24 2016 02:21
@Zerelt I have had some peeps say that. Not sure why because they are online pics
Valeesi
@Valeesi
Feb 24 2016 02:22

Any idea on why when I put $.ajax within my click event, then the ajax call would stop working?

$('#submit').click(function() {
content = document.getElementById("input").value;
});

$.ajax({
type: "GET",
dataType: "jsonp",
url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=google",
success: function(data) {
arr = data;
console.log(arr1);
}
})

Alex Dobre
@Zerelt
Feb 24 2016 02:22
too high of a resolution ?
Lanitta
@DivaWeb
Feb 24 2016 02:23
@Zerelt not sure but I have no problem
Richard Corbett
@reacorbett
Feb 24 2016 02:24
Where are the pictures hosed at? @DivaWeb
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:24
when i try to run your codepen @DivaWeb it crashes my Gitter :(
Lanitta
@DivaWeb
Feb 24 2016 02:25
@reacorbett from a free pics website
@Rogue00 :(
Richard Corbett
@reacorbett
Feb 24 2016 02:26
Try downloading them. then uploading them to photobucket. They will load a lot faster. @DivaWeb
Lanitta
@DivaWeb
Feb 24 2016 02:26
@reacorbett if I could link to pics on my desktop that would be different but on code pen you can not
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:27
my images are hosted at tinypic....but i save them 8bit
Lanitta
@DivaWeb
Feb 24 2016 02:27
@reacorbett I tried the photobucket and could not get it to work
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:27
tinypic isnt too bad
Richard Corbett
@reacorbett
Feb 24 2016 02:27
@DivaWeb Thats where i host all my photos.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:27
still a few ads etc but it works well enough for me to use on my machine
Lanitta
@DivaWeb
Feb 24 2016 02:27
@reacorbett then how do you get the link for code pen
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:28
o gawd photobucket?? screw that ad infested bleh
Richard Corbett
@reacorbett
Feb 24 2016 02:28
@DivaWeb hold on i will grab some info for you.
Lanitta
@DivaWeb
Feb 24 2016 02:29
@reacorbett @Rogue00 I spent days making it completely responsive lol
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:29
well its so responsive now that when i try to see...it reaches out n turns my sh8t off ah haha
@DivaWeb
Lanitta
@DivaWeb
Feb 24 2016 02:30
@Rogue00 lolololo clean up the space on your computer
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:31
yea...ive been working it too hard...my graphics card is outdated and that doesnt help...or my 2gigs of ram >.<
Lanitta
@DivaWeb
Feb 24 2016 02:31
@Rogue00 replace it cheaper than buying a new computer
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:32
yea..im going to upgrade the vid card and ram ...i just cant afford it for right now
Lanitta
@DivaWeb
Feb 24 2016 02:32
@Rogue00 but if you do buy a new one I bought a llenovo for like 400.00 dollars a few years ago and it was a great laptop I still use it
@Rogue00 well try degragging it and cleaning up some space.
@Rogue00 *defrag
Alex Dobre
@Zerelt
Feb 24 2016 02:34
anybody has any idea why my code is only visible on the output tab of jsbin but it doesn't show if i pop out the window to get a fullscreen view and it doesn't work on codepen either ? i tried adding crossorigin.me at the start of the url and ?callback=? at the end but still the only place where it displays the data from the ajax request is the output tab on jsbin
Lanitta
@DivaWeb
Feb 24 2016 02:35
@Zerelt unless you are missing a library that code pen needs
Richard Corbett
@reacorbett
Feb 24 2016 02:35
@diva
Screenshot (2).png
Alex Dobre
@Zerelt
Feb 24 2016 02:37
i thought about that too ... thought it could have been because codepen uses the minified versions of the libraries and added the script tags in html but still nada ...
the jsbin:http://jsbin.com/kasidocoso/edit?js,output
the codepen http://codepen.io/Zerelt/pen/GobMwq?editors=0011
Richard Corbett
@reacorbett
Feb 24 2016 02:37
look in the upper left corner. click on library. after that lookin at the right side of the screen. it will say share. the one that says direct is the url you want to use
@DivaWeb
Lanitta
@DivaWeb
Feb 24 2016 02:37
@reacorbett ok I will check this out closer. thanks
CamperBot
@camperbot
Feb 24 2016 02:37
divaweb sends brownie points to @reacorbett :sparkles: :thumbsup: :sparkles:
Richard Corbett
@reacorbett
Feb 24 2016 02:37
Screenshot (1).png
CamperBot
@camperbot
Feb 24 2016 02:37
:star: 257 | @reacorbett | http://www.freecodecamp.com/reacorbett
Richard Corbett
@reacorbett
Feb 24 2016 02:38
@DivaWeb no problem. I hope it works out better.
Lanitta
@DivaWeb
Feb 24 2016 02:39
@Zerelt I can not seem to get it to open either on Grrrrrr
Alex Dobre
@Zerelt
Feb 24 2016 02:41
what's bothering me even more is that it's not even working if i press the pop out button on jsbin (the "Live preview" button in the top right corner of the output tab) ... i mean why .. it's working in the normal output tab .. O.o
Lanitta
@DivaWeb
Feb 24 2016 02:41
@Zerelt what language are you using?
Alex Dobre
@Zerelt
Feb 24 2016 02:41
React
well... javascript with the react library xD
had to add the jquery one too or else it wouldn't make the ajax request
Valeesi
@Valeesi
Feb 24 2016 02:43
Why can't I call Ajax when I put it within a click event? Could somebody point me to the right direction please? The first callAjax() doesn't work, but the second and commented one works.
$('#submit').on('click', function() {
  content = document.getElementById("input").value;
 callAjax();
});
 //callAjax();
function callAjax() {
  $.ajax({
    type: "GET",
    dataType: "jsonp",
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=google",
    success: function(data) {
      arr = data;
      console.log(data);
    }
  })
}
Lanitta
@DivaWeb
Feb 24 2016 02:43
@Zerelt check this out https://cdnjs.com/libraries/react/
@Zerelt sometimes you get a bad link for a library
Alex Dobre
@Zerelt
Feb 24 2016 02:46
tried changing them to 0.14.7 from that link ... still won't work
Lanitta
@DivaWeb
Feb 24 2016 02:47
@Valeesi I havn't even looked at ajax yet but let me see if I can figure something out
@Zerelt hmmmmm your code works in jsbin
Valeesi
@Valeesi
Feb 24 2016 02:48
@DivaWeb Cool, thanks! Here is the codepen, you could test it out. http://codepen.io/Valeesi/pen/EPqyaM
CamperBot
@camperbot
Feb 24 2016 02:48
valeesi sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:star: 222 | @divaweb | http://www.freecodecamp.com/divaweb
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:48
looks good @Valeesi
Alex Dobre
@Zerelt
Feb 24 2016 02:48
you're using jquery but you're not putting everything inside a document.ready @Valeesi
Ghost
@ghost~56bd2077e610378809c105cd
Feb 24 2016 02:49
and works ok for me
Lanitta
@DivaWeb
Feb 24 2016 02:51
@Valeesi I don't see any of the libraries do you not need them for this exercise
Valeesi
@Valeesi
Feb 24 2016 02:52
@Rogue00 It works with the callAjax() within the click function?
Lanitta
@DivaWeb
Feb 24 2016 02:55
well got to go the other half is wanting to go to bed.
Alex Dobre
@Zerelt
Feb 24 2016 02:55
bb thanks for trying :D
Valeesi
@Valeesi
Feb 24 2016 02:56
@Zerelt Is it nessasary to put everything inside? I just tried and it did't work neither.
@DivaWeb I have already added the jQuery and Bootstrap, that's all that I am using right now.
Alex Dobre
@Zerelt
Feb 24 2016 02:58
well usually when using jquery you have to to put everything inside a $(document).ready(function() {}) to make sure that you're able to use that code only when the page loads
PossibilityZero
@PossibilityZero
Feb 24 2016 02:58
@PossibilityZero
Hey, I'm having problems with my twitch API call. When I use the url directly (https://api.twitch.tv/kraken/streams/freecodecamp) the object contains a "channel" object, but when I retrieve it using $.getJSON() that object is missing
Here's a small version of my app that just outputs the JSON data to the console.
http://codepen.io/PossibilityZero/pen/gPVzZZ?editors=0011
Michael Bildstein
@mbildstein
Feb 24 2016 03:05
Is there someone here who could help me with the weather app? I can call the api, but the code seems to carry on before the information has been received, causing errors. Here's what I've got so far: http://codepen.io/mbildstein/pen/pgMaGW
krzysztofstanislawek
@krzysztofstanislawek
Feb 24 2016 03:12
I am doing the quote machine, but don't understan JSON at all. COuld anyone help?
Michael Bildstein
@mbildstein
Feb 24 2016 03:14
What about JSON is confusing you?
krzysztofstanislawek
@krzysztofstanislawek
Feb 24 2016 03:17
really everything I got to this zipline without bigger problem but now I feel like the JSON chapter was not explained sufficiently and they did not give use an api to work with and I don't understand the api documentation for the things I found online
h4r1m4u
@h4r1m4u
Feb 24 2016 03:19

@h4r1m4u omg. finally got it. appreciate your patience

great, clad i could help @tbullcoder

Michael Bildstein
@mbildstein
Feb 24 2016 03:23
@krzysztofstanislawek no worries, you may actually be overthinking it. JSON stands for JavaScript Object Notation, and that's really all it is. JSON objects are simply objects, and the values of the elements can be access using dot notation (ex. objectName.elementName)
Alex Dobre
@Zerelt
Feb 24 2016 03:23
@Valeesi ... it was the <form> tags in your html .. remove those
h4r1m4u
@h4r1m4u
Feb 24 2016 03:30
@marcdaley are you working on codepen? if so, you need to add the target="_blank" attribute into your <a> element: <a href="https://www.facebook.com/stork99" target="_blank" class="btn btn-block btn-info">Facebook</a>otherwise codepen won't allow that link to open
Alex Dobre
@Zerelt
Feb 24 2016 03:31
@Valeesi the way you have your code now should work ... all you have to do is add http://crossorigin.me/ in front of your wiki url like http://crossorigin.me/https://en.wikipedia.org/w/api.php?action=opensearch&search=google ... i did that and it console.log data like you wanted
Valeesi
@Valeesi
Feb 24 2016 03:36
@Zerelt Thank you! It didn't even occur to me to take a look at HTML. Now it actually works and I'd need to figure out why Form prevents this kind of call.
CamperBot
@camperbot
Feb 24 2016 03:36
valeesi sends brownie points to @zerelt :sparkles: :thumbsup: :sparkles:
:star: 371 | @zerelt | http://www.freecodecamp.com/zerelt
Gordon Davidescu
@gordondavidescu
Feb 24 2016 03:38
good lord my board broke :(
it was nice and 3x3 and suddenly it isn't!
h4r1m4u
@h4r1m4u
Feb 24 2016 03:40
@Valeesi i had a brief look at your codepen and what's happening is that when you click the submit button, it'll submit the form which in turn reloads the entire page. so even if you get any response from the api, it'll wipe the data. you can add type="button" to your button to prevent it from submitting the form: <button type="button" class="btn btn-info" id="submit">Submit</button>. you api call would then go inside the button click handler
Gordon Davidescu
@gordondavidescu
Feb 24 2016 03:40
is there a control z in codepen lolz
h4r1m4u
@h4r1m4u
Feb 24 2016 03:41
@gordondavidescu
// nay
<div id="s00"</div>
// yay
<div id="s00"></div>
Valeesi
@Valeesi
Feb 24 2016 03:41
@h4r1m4u Good explanation! Thank you man!
CamperBot
@camperbot
Feb 24 2016 03:41
valeesi sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1469 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Alex Dobre
@Zerelt
Feb 24 2016 03:42
yeah there is lol ... just have your cursor blinking in the tab you want to undo and press ctrl+z @gordondavidescu
h4r1m4u
@h4r1m4u
Feb 24 2016 03:42
@Valeesi no problem
Gordon Davidescu
@gordondavidescu
Feb 24 2016 03:43
@h4r1m4u you once again come through
HOW DO I MISS THIS
Alex Dobre
@Zerelt
Feb 24 2016 03:44
eyes of a hawk
h4r1m4u
@h4r1m4u
Feb 24 2016 03:44
@gordondavidescu are you using your browser's web tools? it's a very quick and convenient way to check your DOM structure. very helpful
Gordon Davidescu
@gordondavidescu
Feb 24 2016 03:45
TBH no
I didn't even think chromebook had any (now that i've written that I realize it sounds dumb)
Mark Lawrence
@ninja-ml
Feb 24 2016 03:46
hi guys... i'm working on on Wikipedia Viewer and I'm having a problem parsing out the JSON in a multidimensional array... basically I want to display the nth item of each array and I can't seem to figure it out... here's a sample api test I did that I'm trying to parse https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=Green%20Arrow&limit=10&namespace=0
h4r1m4u
@h4r1m4u
Feb 24 2016 03:47
@gordondavidescu if you're using chrome (the browser), the web dev tools are baked into it. really, start using it. i can't imagine developing without it. it lets you analyze your DOM structure, see which CSS styles apply to which elements and tweak them on the fly, it displays errors in your javascript, etc. i'd literally feel blind working without it
Gordon Davidescu
@gordondavidescu
Feb 24 2016 03:49
i'm on a chromebook
chrome is all i have :)
h4r1m4u
@h4r1m4u
Feb 24 2016 03:49
i've never used chromebook, i'm not sure if it allows you to install other browsers :)
Gordon Davidescu
@gordondavidescu
Feb 24 2016 03:49
defininitely not -- the whole OS is chrome, lol
h4r1m4u
@h4r1m4u
Feb 24 2016 03:51
@ninja-ml let's see:
var myData = 
[
"Green Arrow",
[
"Green Arrow",
"Green Arrow (Connor Hawke)",
"Green Arrow in other media",
"Green Arrow (Smallville)",
"Green Arrow and Black Canary",
"Green Arrow: Year One",
"Green Arrow: The Longbow Hunters",
"Green Arrows",
"Green Arrow (The Batman)",
"Green Arrow (disambiguation)"
],
[
"Green Arrow is a fictional superhero who appears in comic books published by DC Comics. Created by Morton Weisinger and designed by George Papp, he first appeared in More Fun Comics #73 in November 1941. His real name is Oliver Queen, a billionaire businessman and owner of Queen Industries, also a well-known celebrity in his locale of Star City.",
"Connor Hawke is a fictional DC Comics superhero who operated as the second Green Arrow, created by Kelley Puckett and Jim Aparo.",
"Green Arrow, a DC Comics superhero, has appeared in media other than comic books since 1973, including animated shows, live-action productions, and video games.",
"",
"Green Arrow and Black Canary was a comic book ongoing series published by DC Comics starring superheroes Green Arrow and Black Canary.",
"Green Arrow: Year One is a 2007 Green Arrow limited series published by DC Comics. The series is written by Andy Diggle with art by Jock, the acclaimed team behind The Losers.",
"Green Arrow: The Longbow Hunters is a three-issue prestige format comic book miniseries published in 1987 by DC Comics.",
"Green Arrows are an Italian hardcore band established in 1999 in the city of Bolzano.",
"This is a redirect from a comics related title for a minor topic to a list of minor entities, a type of article which is a collection of brief descriptions and covers the subject more comprehensively.",
"Green Arrow is a DC Comics superhero character"
],
[
"https://en.wikipedia.org/wiki/Green_Arrow",
"https://en.wikipedia.org/wiki/Green_Arrow_(Connor_Hawke)",
"https://en.wikipedia.org/wiki/Green_Arrow_in_other_media",
"https://en.wikipedia.org/wiki/Green_Arrow_(Smallville)",
"https://en.wikipedia.org/wiki/Green_Arrow_and_Black_Canary",
"https://en.wikipedia.org/wiki/Green_Arrow:_Year_One",
"https://en.wikipedia.org/wiki/Green_Arrow:_The_Longbow_Hunters",
"https://en.wikipedia.org/wiki/Green_Arrows",
"https://en.wikipedia.org/wiki/Green_Arrow_(The_Batman)",
"https://en.wikipedia.org/wiki/Green_Arrow_(disambiguation)"
]
]

myData[0][1][3]; // "Green Arrow (Smallville)"
myData[0][2][3]; // ""
myData[0][3][3]; // "https://en.wikipedia.org/wiki/Green_Arrow_(Smallville)"
you can write a nested forloop in case you need to iterate over all the data
Alex Dobre
@Zerelt
Feb 24 2016 03:52
i'd try something like for (i=0;i<json.lenght;i++) { if(json.i.length>1) { $("#test").text(json.i.9) } @ninja-ml
that would get (hopefully) the 9th element of any array that's larger that 1 inside your json
Mark Lawrence
@ninja-ml
Feb 24 2016 03:53
@h4r1m4u thanks, I was thinking something along those lines but I'm trying to loop the json to display in html if that makes sense
CamperBot
@camperbot
Feb 24 2016 03:53
ninja-ml sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1470 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 03:54
@ninja-ml sure. two nested for loops will do the trick.
actually one loop would be enough if you know that you'll always only get these 3 arrays back from the API
Alex Dobre
@Zerelt
Feb 24 2016 03:55
is what i tried to suggest wrong ?
Mark Lawrence
@ninja-ml
Feb 24 2016 03:56
@Zerelt thanks... i'm trying to figure out my loops
CamperBot
@camperbot
Feb 24 2016 03:56
ninja-ml sends brownie points to @zerelt :sparkles: :thumbsup: :sparkles:
:star: 372 | @zerelt | http://www.freecodecamp.com/zerelt
Mark Lawrence
@ninja-ml
Feb 24 2016 03:56
@h4r1m4u i'm pretty sure it's always going to give me those 3 arrays from the api
Alex Dobre
@Zerelt
Feb 24 2016 03:57
i used this http://jsonviewer.stack.hu/ to have a better look at your json ... as long as you know the name of the key (and it's the same in every array) you should be able to make it work
h4r1m4u
@h4r1m4u
Feb 24 2016 03:57
@Zerelt one thing that's wrong about what you wrote is that you cannot use dot notation with variable names:
// nay
json.i.length
// yay
json[i].length
Alex Dobre
@Zerelt
Feb 24 2016 03:58
oh
everything in square brackets then :D
good to know .. hopefully i'll keep that in mind :D
h4r1m4u
@h4r1m4u
Feb 24 2016 03:59
np :)
Mark Lawrence
@ninja-ml
Feb 24 2016 03:59
@h4r1m4u so i don't need forEach, I can just use a regular for loop?
Gordon Davidescu
@gordondavidescu
Feb 24 2016 04:01
my favourite thing about @h4r1m4u is the use of yay and nay
h4r1m4u
@h4r1m4u
Feb 24 2016 04:02

@ninja-ml something like this:

for (i = 0; i < myData[0][1].length; i++) {
  console.log(myData[0][1][i]);
  console.log(myData[0][2][i]);
  console.log(myData[0][3][i]);
}

the use of the [0] index is needed because it seems that everything you get from the API is nested in one large array.

@gordondavidescu hahaha. yeah, i like to use those :)
Marek Slabicki
@thaniri
Feb 24 2016 04:05
Can anyone help me with geolocation?
http://codepen.io/thaniri/pen/jWJWVm
The error I'm getting is that I cannot set the property innerHTML of null
h4r1m4u
@h4r1m4u
Feb 24 2016 04:10
@thaniri it's a problem of your code order. you're running the script before the DOM is rendered, so when you do var x = document.getElementById("demo");, the element doesn't exist in the DOM yet. get rid of the <header> completely, remove the <body> tags, and write your JS code in the JS code pane (without the <script> tags); i.e. don't mix your HTML and JS. you'll save yourself a lot of headache
Marek Slabicki
@thaniri
Feb 24 2016 04:11
thanks
thanks @h4r1m4u
CamperBot
@camperbot
Feb 24 2016 04:11
thaniri sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1471 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 04:11
yw
Mark Lawrence
@ninja-ml
Feb 24 2016 04:12

@h4r1m4u i tried this

$.getJSON(url, function(myData) {
      for (var i = 0; i < myData[0][1].length; i++) {
        console.log(myData[0][1][i]);
        console.log(myData[0][2][i]);
        console.log(myData[0][3][i]);
      }
    });

but it only gives me r e e from green arrow, nothing else

h4r1m4u
@h4r1m4u
Feb 24 2016 04:12
@ninja-ml do you have it in codepen?
Alex Dobre
@Zerelt
Feb 24 2016 04:12
do this x.innerHTML = "Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude;
@ninja-ml
just remove the <br> tag from inside the "<br>Longitude"
nvm i need to go to bed now :D
Mark Lawrence
@ninja-ml
Feb 24 2016 04:16
@Zerelt no worries! :-)
@h4r1m4u just added it... http://codepen.io/ninja-ml/pen/BjMOKz
h4r1m4u
@h4r1m4u
Feb 24 2016 04:20
@ninja-ml
      for (var i = 0; i < myData[1].length; i++) {
        console.log(myData[1][i]);
        console.log(myData[2][i]);
        console.log(myData[3][i]);
      }
Mark Lawrence
@ninja-ml
Feb 24 2016 04:24
@h4r1m4u thank you so much!!! that's exactly the result I wanted after trying for hours
CamperBot
@camperbot
Feb 24 2016 04:24
ninja-ml sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: ninja-ml already gave h4r1m4u points
h4r1m4u
@h4r1m4u
Feb 24 2016 04:24
@ninja-ml you're welcome
Bruce Young
@mutantspore
Feb 24 2016 04:26
@ninja-ml @h4r1m4u my version of what I think is the same issue
       $.each(data[1], function(i) {
          var page = {};
          page.url = data[3][i];
          page.name = data[1][i];
          page.brief = data[2][i];
          };
not that I was following it closely lol
h4r1m4u
@h4r1m4u
Feb 24 2016 04:27
@mutantspore yeah, look pretty similar
Mark Lawrence
@ninja-ml
Feb 24 2016 04:29
@mutantspore thanks... that works too!
CamperBot
@camperbot
Feb 24 2016 04:29
ninja-ml sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1154 | @mutantspore | http://www.freecodecamp.com/mutantspore
Catalin Scripcariu
@CatalinScr
Feb 24 2016 04:47
I have the same problem with the JSON api from wikipedia. I tried different methods to read with forEach and even with for in loop. Still no luck. Here is my code:
$.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+toAdd+"&callback=?", function (json){

        var obj ="";
       var text=""; 
       obj=json[1];

        $("#test").html(obj);
h4r1m4u
@h4r1m4u
Feb 24 2016 05:02
@CatalinScr you can do this:
        var pagesObj = json.query.pages;

        for (var page in pagesObj) {
            if (pagesObj.hasOwnProperty(page)) {
                console.log(page);
                console.log(pagesObj[page].extract);
                console.log(pagesObj[page].pageimage);
                console.log(pagesObj[page].thumbnail.source);
            }
        }
the console.log statements are just an example to show you how you can get values of the different data in each page
bitgrower
@bitgrower
Feb 24 2016 05:02
forEach is used for an Array, right, and you are getting back objects?
Catalin Scripcariu
@CatalinScr
Feb 24 2016 05:04
I will try this. Get back to you soon.
@bitgrower yes, but I was targeting just the values
bitgrower
@bitgrower
Feb 24 2016 05:05
so one of the values in a key value pair is an array ?
Catalin Scripcariu
@CatalinScr
Feb 24 2016 05:05
yes
bitgrower
@bitgrower
Feb 24 2016 05:06
you might want to take a look at Object.keys ... I recommended this to someone earlier when they were having difficulty and it seemed to help them ...
it creates an array of the object's keys, and then you can iterate over the array of keys
Catalin Scripcariu
@CatalinScr
Feb 24 2016 05:08
yes, you can see first the keys. I tried to use [0] [1] etc but with no result
h4r1m4u
@h4r1m4u
Feb 24 2016 05:08
@CatalinScr just to clarify, there's no array in the JSON you get back from the API. @bitgrower is correct in saying forEach is not going to work for you because it's an array method. Object.keys, which he recommends, is a parallel solution to the for ( ... in ...) i proposed above
both Object.keys and for (... in ...) can be used
Catalin Scripcariu
@CatalinScr
Feb 24 2016 05:09
I already tried for in loop
$.getJSON("https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+toAdd+"&callback=?", function (json){

        var obj ="";
       var text=[]; 
        var link="";

       obj=json["query"]["pages"];

        for (var keys in obj){
          text=obj[keys]["extract"];
        }

        $("#test").html(text);
@h4r1m4u you give me an ideea to create another object. Thanks
CamperBot
@camperbot
Feb 24 2016 05:11
catalinscr sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1472 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 05:12
np
Catalin Scripcariu
@CatalinScr
Feb 24 2016 05:12
@bitgrower thanks for the details. It cleared something now
CamperBot
@camperbot
Feb 24 2016 05:12
catalinscr sends brownie points to @bitgrower :sparkles: :thumbsup: :sparkles:
:star: 622 | @bitgrower | http://www.freecodecamp.com/bitgrower
bitgrower
@bitgrower
Feb 24 2016 05:12
yw ... :)
yw ... :)
hmmm not sure how I got that ...
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:15
So far, I haven't got any api to work on it
I have tried many
Catalin Scripcariu
@CatalinScr
Feb 24 2016 05:16
@bitgrower with the api link I wasted a lot of hours with the details from ApiSandbox. Finally someone give me the link and is working
and now the problem with the object
Bruce Young
@mutantspore
Feb 24 2016 05:19
@arpit-saxena do you have a pen of your work that we can see?
bitgrower
@bitgrower
Feb 24 2016 05:20
thanks for the words of caution, @CatalinScr
CamperBot
@camperbot
Feb 24 2016 05:20
bitgrower sends brownie points to @catalinscr :sparkles: :thumbsup: :sparkles:
:star: 333 | @catalinscr | http://www.freecodecamp.com/catalinscr
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:21
Here you go
@mutantspore I am only trying to implement the functionality atm
Bruce Young
@mutantspore
Feb 24 2016 05:23
ok firstly you need a http:// in front of your url. that doesn’t fix it but it’s needed. .. now looking for more
Bruce Young
@mutantspore
Feb 24 2016 05:29
ok well it seems like it needs a callback function but the API details are very poor
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:29
@mutantspore Can you recommend me another API?
Bruce Young
@mutantspore
Feb 24 2016 05:31
@arpit-saxena this was suggested by FCC at one stage .
http://forismatic.com/en/api/
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:32
@mutantspore I tried it but couldn't get it to work either
h4r1m4u
@h4r1m4u
Feb 24 2016 05:38
@arpit-saxena
$("#button").on("click", function() { 
  $.getJSON("http://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json",function(json){
    $("#quote").html("Quote" + json.quote);
  });    
});
it's not an ideal solution to use a 3rd party service (https://crossorigin.me/) to get the data from the API, but the API itself is crap
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:39
@h4r1m4u Can you suggest any other good API?
And how to use it
h4r1m4u
@h4r1m4u
Feb 24 2016 05:40
i used the one @mutantspore linked you
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:40
@h4r1m4u How can I get it to work?
Bruce Young
@mutantspore
Feb 24 2016 05:40
it does work.. just do it a bit at a time
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:40
It needs additional queries and stuff
Bruce Young
@mutantspore
Feb 24 2016 05:41
I/we could paste the code but it’s the journey.. not the destination
Zen quote of the day ;)
h4r1m4u
@h4r1m4u
Feb 24 2016 05:41
@arpit-saxena not really, it just needs the callback function parameter to get around the cross-domain request issue
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:41
Tell me how to send the methods to the api...

API method calls are implemented in the form of HTTP requests to the URL
http://api.forismatic.com/api/1.0/. Query parameters are passed using POST or GET (URL-encoded) method. The server return data format is set by the query parameter.

How can I change the query parameter or even send it?

h4r1m4u
@h4r1m4u
Feb 24 2016 05:43
by including it as part of the URL you're making the request to
e.g. http://api.forismatic.com/api/1.0/?lang=en&method=getQuote
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:44
I missed the question mark when I tried it earlier
Thanks for all your help @h4r1m4u @mutantspore
CamperBot
@camperbot
Feb 24 2016 05:44
arpit-saxena sends brownie points to @h4r1m4u and @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1155 | @mutantspore | http://www.freecodecamp.com/mutantspore
:star: 1473 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 05:45
np. give it a shot and ask more questions here if you get stuck
as a sidenote, you'll need to use the JSONP request (not just pure JSON) to get around the cross-domain request problem
Arpit Saxena
@arpit-saxena
Feb 24 2016 05:55
@h4r1m4u Can you provide a hint or some idea as to how I can use JSONP request?
h4r1m4u
@h4r1m4u
Feb 24 2016 06:00
@arpit-saxena typically you do it by adding a callback=? parameter as part of the API URL, but some APIs need the callback parameter to use a specific function
you might want to google and read up a bit on the JSONP requests as their usage is extremely common and you'll need it for other challenges as well, not just the quote one
Ankit Panwar
@coderNoob
Feb 24 2016 07:28
In my validate US number bonfire, I got the following expression but I can't filter the () portion. How do I check whether the opening and closing tags are present?
/[^-][1?][\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}/g
I used the optional (?) metacharacter if only one bracket is present.
Yury
@imbroyury
Feb 24 2016 07:52

Hey guys, need help. Works perfectly fine when app recieves GPS coordinates, but fail to give any kind of error when it doesn't (when I decline to give geolocation info or on my Android device)

http://codepen.io/imbroyury/pen/obrEbJ

dltaylor
@dltaylor
Feb 24 2016 08:11
Can someone please help me understand the queue in JS ?
蒲公英の生活
@fewspider
Feb 24 2016 08:20
@dltaylor queue first in first out
h4r1m4u
@h4r1m4u
Feb 24 2016 08:36
@imbroyury seems to work for me. i get the 'Couldn't retrieve coordinates' error. what's the issue?
i am trying to tweet my random quotes on a click
it doesnt seem to work
kirbyedy
@kirbyedy
Feb 24 2016 09:07
@h4r1m4u he fixed it in the meantime :)
h4r1m4u
@h4r1m4u
Feb 24 2016 09:08
@kirbyedy i guess that's a possiblity. if that's indeed the case, it'd be a courtesy to mention in the chat that help is no longer needed.
kirbyedy
@kirbyedy
Feb 24 2016 09:09
:)
we helped him on the other channel
but you are totally right
h4r1m4u
@h4r1m4u
Feb 24 2016 09:10
ah, gotcha. well, glad it's resolved
Alex Dobre
@Zerelt
Feb 24 2016 09:17
i think i might actually loose my mind with this god damn react library ... i got to a point where i can actually render stuff with an ajax request BUT it only renders on jsbin .. and if i try to use the Live Preview on jsbin it doesn't display it there ... and the component that's supposed to render all the data from the ajax request is not displaying anything on codepen either
somone passed me a link a couple of hours ago but that's not for my case because my components are completely separate .. no children
anybody has any suggestions besides me saying bb to react and maybe front end all together since angular 2 is not that much different from react and all this mess is really confusing ... bassically inventing a new damn language that's supposed to do what html, javascript and jquery are doing into one single file, with ugliest and most confusing syntax that you could actually come up with that becomes so much worse when you're not just trying to render a static element or to just make a button count how many times you clicked on it ...
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:25
In random quotes challenge, I know that we have to use jsonp...
I even found an API which returns me the json wrapped in the name of the function I requested but I am not able to figure out how to use the returned value.
I tried $.load() method without any success
Can someone help me?
Ashraful Islam
@iashraful
Feb 24 2016 09:25
@arpit-saxena link to your codepen
:D
need to see what you did to figure out a solution
I can maybe do with a hint
I think that I am missing something really small
kirbyedy
@kirbyedy
Feb 24 2016 09:27
@Zerelt console says Uncaught ReferenceError: x is not defined
whatever that means :D
I have no idea about react
Alex Dobre
@Zerelt
Feb 24 2016 09:27
O.o i don't see that error anywhere
on codepen or jsbin ?
Safbek
@safbek
Feb 24 2016 09:27
Hello!!please help. I don't well know the language. I do not understand whether it is possible to choose any topic in the project "build a Tribute Page". ?for example a topic about kittens and so on
kirbyedy
@kirbyedy
Feb 24 2016 09:28
just the dev tools
in chrome
I put the var in front of x and t
and now it displays
something :D
it does displays users now, but there is another warning in the console now
"Warning: Each child in an array or iterator should have a unique 'key' prop. Check the render method of Order. See https://fb.me/react-warning-keys for more information."
Alex Dobre
@Zerelt
Feb 24 2016 09:30
i'm gonna cry .. my components don't have children .. they are separate ... do i really need to go over that mess of a react docs to make sure i got properly what a child is in their minds ?
but ... you know what ... even though it shows that error now ... putting var in front of x and t makes it work on codepen
kirbyedy
@kirbyedy
Feb 24 2016 09:31
yes
Alex Dobre
@Zerelt
Feb 24 2016 09:31
@kirbyedy thank you
CamperBot
@camperbot
Feb 24 2016 09:31
zerelt sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 528 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Feb 24 2016 09:31
it was a lucky guess :D
Alex Dobre
@Zerelt
Feb 24 2016 09:31
seriously this react thing might make me die before i reach 30
kirbyedy
@kirbyedy
Feb 24 2016 09:31
but I do want to cry looking at your react code, cause that is exactly the same thing waiting for me down the line...
dough
Alex Dobre
@Zerelt
Feb 24 2016 09:33
honestly it's making me consider realllllllly hard focusing on just back-end .. RoR or node and saying a big F you to this react stuff .. at least until they come up with version 2.0 or something and that'll have at least some more examples for crying out loud ... i'm reading novels for every snippet of code they put in there which in their minds thaat is enough ...
Ashraful Islam
@iashraful
Feb 24 2016 09:34
@arpit-saxena am being all bitten by cors again, wait, I also used the same api
let me check how I did it
@arpit-saxena here this works for me, gives me a quote
$("#button").on("click", function() {

  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=callback=?").done(function(data) {
    console.log(data);
  });
});
the data in done(...) is the json holding the quotes and other info :D
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:37
@iashraful I'll try it out
I'm not sure I understand what done is
Ashraful Islam
@iashraful
Feb 24 2016 09:39
@arpit-saxena done gets called when $.getJSON get's a data, if it doesn't the error gets called :D
.done(function(data) {
    console.log(data);
    // use 'data' for your code here,
   // example data = { quoteText: "Yesterdays home runs don't win today's games.", quoteAuthor: "Babe Ruth", senderName: "", senderLink: "", quoteLink: "http://forismatic.com/en/1b9fd64f5f/"
  });
Tommy
@Saintgein
Feb 24 2016 09:41
Does anyone know how to center unordered list, without centering the list items?
I want to do it for my tribute page. :)
http://codepen.io/Saintgein/pen/bEXBqE
Ashraful Islam
@iashraful
Feb 24 2016 09:41
@Saintgein center the ul
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:41
@iashraful what about callback=? why not use a function name instead?
Tommy
@Saintgein
Feb 24 2016 09:41
With text-align: center or margin: 0 auto?
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:42
@Saintgein use html <center></center> tags
Ashraful Islam
@iashraful
Feb 24 2016 09:42
@arpit-saxena foresmatic is weird, if you use a function name then jquery will send you all kinds of errors
:D
Tommy
@Saintgein
Feb 24 2016 09:42
Cool. I'll try!
Thanks. :)
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:43
@iashraful What does callback=? do?
Tommy
@Saintgein
Feb 24 2016 09:44
Hmm, using that method, also the listitems get centered.
Ashraful Islam
@iashraful
Feb 24 2016 09:44
@arpit-saxena callback=? is a special part of jquery ajax call, it holds the data received by jquery and then jquery calls a function with that data to allow you to access the ajax data
Alex Dobre
@Zerelt
Feb 24 2016 09:44
it should make it into JSONP .. but i think it should be ?callback=?
always used it like that for the ziplines
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:45
@iashraful Thanks for all our help. The app is functional now
CamperBot
@camperbot
Feb 24 2016 09:45
arpit-saxena sends brownie points to @iashraful :sparkles: :thumbsup: :sparkles:
:star: 452 | @iashraful | http://www.freecodecamp.com/iashraful
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:46
@Zerelt Actually the last part is ?method=getQuote&format=jsonp&lang=en&jsonp=callback=?
Ashraful Islam
@iashraful
Feb 24 2016 09:46
its like this(not technically exact, but for example)
//jquery does a call to example.com
$.getJSON(...).done(blah);
// jquery gets a result like 
http://...../callback=123121241({something: ... , otherthing: ...});
// jquery calls the function in done with the data recceived like this
blah({something: ... , otherthing: ...});
@arpit-saxena
Tommy
@Saintgein
Feb 24 2016 09:46
How can i make an exception for the li tags within the list?
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:46
@iashraful Good!
Safbek
@safbek
Feb 24 2016 09:47
please help. I don't know the language. I do not understand whether it is possible to choose any topic in the project "build a Tribute Page". ?for example a topic about kittens and so on????please, help
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:47
@Saintgein The data in list is in li tags
If not that, what exactly do you want to center
Tommy
@Saintgein
Feb 24 2016 09:47
The whole list, inside its colum.
Column*
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:48
@safbek Start from the beginning.
Tommy
@Saintgein
Feb 24 2016 09:48
So the bullets are in a straight line.
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:48
@Saintgein Can you please share your code?
Safbek
@safbek
Feb 24 2016 09:48
@arpit-saxena With any topic?
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:50
@safbek Start from the beginning of frontend development and move up progressively
@Saintgein You can use bootstrap for it
For ex. class="col-xs-6 col-xs-offset-3"
Tommy
@Saintgein
Feb 24 2016 09:52
Ah, the offset makes it center?
Arpit Saxena
@arpit-saxena
Feb 24 2016 09:53
@Saintgein Not exactly
Check this out
Tommy
@Saintgein
Feb 24 2016 09:53
Cool, i'll read into it! Thanks man. :)
Safbek
@safbek
Feb 24 2016 10:00

@arpit-saxena ok. But I am stuck on the project "build Tribute Page":Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/wMQrXV.

Rule #1: Don't look at the example project's code. Figure it out for yourself.

Rule #2: Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

Can I choose any topic for my Tribute Page??

Tommy
@Saintgein
Feb 24 2016 10:00
It's still tough to manage haha. This is the tricky part of the grid system i guess.
kirbyedy
@kirbyedy
Feb 24 2016 10:02
@safbek yes, any topic
Arpit Saxena
@arpit-saxena
Feb 24 2016 10:02
@safbek Yup! Any topic!
Ashraful Islam
@iashraful
Feb 24 2016 10:05
@safbek any topic you like. Even yourself could be a topic :D
or your cat :D
its like something you are thankful for
Tommy
@Saintgein
Feb 24 2016 10:13
It's like the offset doesn't have any effect.
Hmm.
Tommy
@Saintgein
Feb 24 2016 10:22
Got it!
It's weird tho. I got a local version where the offset doesn't work, and on codepen it does the trick.
What could be the reason for that? Different version of bootstrap maybe?
Jack Lyons
@JackEdwardLyons
Feb 24 2016 10:28
hey guys im having trouble making my clock responsive... im not sure what to code for the buttons in bootstrap... any tips or suggestions on why its not working? thank you in advance :)
http://codepen.io/JackEdwardLyons/pen/eJbYyV?editors=1100
check out my random quote generator
Jack Lyons
@JackEdwardLyons
Feb 24 2016 10:43
nice one @RakshithNM :)
Dan Stockham
@DanStockham
Feb 24 2016 10:44
Hey guys, would it better if I changed my multi-dimensional array into just a one-dimensional array when creating a back-end gameboard? http://codepen.io/DanStockham/pen/LGobvp
Ankit Panwar
@coderNoob
Feb 24 2016 10:46
What does the : mean in a regex?
Timofey Votyakov
@tvotyakov
Feb 24 2016 10:50
@JackEdwardLyons try to remove col-xs-6 class from your buttons' div. Your button will be put one under another if page will be too narrow. But you will need to tune your .clock class in this case (for example, remove fixed height and use paddings instead).
Jack Lyons
@JackEdwardLyons
Feb 24 2016 10:52
oh ok thanks @tvotyakov
CamperBot
@camperbot
Feb 24 2016 10:52
jackedwardlyons sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
:star: 322 | @tvotyakov | http://www.freecodecamp.com/tvotyakov
Timofey Votyakov
@tvotyakov
Feb 24 2016 10:53
@coderNoob I think it means :
Jack Lyons
@JackEdwardLyons
Feb 24 2016 10:54
awesome advice @tvotyakov now i just need to fill out the buttons when they stack up :)
Timofey Votyakov
@tvotyakov
Feb 24 2016 10:59
@coderNoob in javascript regular expression any symbol except speciall means itself. According to this https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions : doesn't have any special meaning, except it is in (?:x) construction.
Ankit Panwar
@coderNoob
Feb 24 2016 11:03
@tvotyakov Thanks
Davide
@DavOnGit
Feb 24 2016 11:23
hi coders! i need resources, i have problems binding event handlers to dinamic generated content :worried: (like AJAX responses)....anyone have some hints?
Ankit Panwar
@coderNoob
Feb 24 2016 11:25
I'm exhausted. This is the closest I've got to validate a US number but still no good
^1?[\s-]?\(?(\d{3})\)?[\s-]?(\d{3})[\s-]?\d{4}$
Help me please.
I need to eliminate the occurrence of a single ( or ) in the string.
Andrew Grabarnick
@leprekon91
Feb 24 2016 12:15
This message was deleted
CamperBot
@camperbot
Feb 24 2016 12:15
:bulb: to format code use backticks! ``` more info
h4r1m4u
@h4r1m4u
Feb 24 2016 12:15

@DavOnGit typically including the parent element, which holds the dynamically generated element for which you're writing the handler, as part of the event handler selector does the trick. let'say your HTML is:

<div id="controls">
  // this div will hold dynamically generated buttons
</div>

your JS would then look as this:

// dynamically generate a control button
$('#controls').append('<button id="start" type="button">Start button</button>');

// click handler for start button

// this wouldn't work because the button is dynamically generated and not present in the DOM on page load
$("#start").on("click", function() {
 // do something
});

// but this should work, because we're leveraging the parent element
$("#controls #start").on("click", function() {
 // do something
});
Nazim
@nazimkazim
Feb 24 2016 12:16
Hey Guys i'm struggling with Weather zipline. I have my variable $weatherURL undefined can you tell me what is wrong? http://codepen.io/nazimkazim/pen/Bjgrzw
h4r1m4u
@h4r1m4u
Feb 24 2016 12:16
@nazimkazim different variable names: var $weatherURLvs $.getJSON(weatherURL, function(data) {
Andrew Grabarnick
@leprekon91
Feb 24 2016 12:16
$(document).ready(function() {
  var ch = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"]
  var i=0;
  for (i = 0; i < ch.length; i++) {
    //get json and compose list
   // alert(ch[i]);
    $.getJSON('https://api.twitch.tv/kraken/streams/' + ch[i] + '?callback=?', function(data) {
      //alert(JSON.stringify(data));
      alert(ch[i]);
      appendToList(ch[i],null,data._links.self);
    });
  }
why does ch[i] pass to appendToList() as "undefined"?
h4r1m4u
@h4r1m4u
Feb 24 2016 12:17
@nazimkazim your variable is defined as $weatherURL, not weatherURL
Nazim
@nazimkazim
Feb 24 2016 12:21
@h4r1m4u thanks
CamperBot
@camperbot
Feb 24 2016 12:21
nazimkazim sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1474 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 12:22
@leprekon91 you're running into a problem with the asynchronous nature of the getJSON call. basically your forloop finishes running before you get the response from the API at which point the value of i will be ch.length. your alert inside the getJSON callback is then doing this: alert(ch[ch.length]) which returns undefined because arrays are zero indexed (in other words, you're trying to alert one additional element which doesn't exist in the array). the solution to your problem is IIFE and closures. do this:
  for (i = 0; i < ch.length; i++) {

    (function(i) { // ADDED THIS

    //get json and compose list
   // alert(ch[i]);
    $.getJSON('https://api.twitch.tv/kraken/streams/' + ch[i] + '?callback=?', function(data) {
      //alert(JSON.stringify(data));
      alert(ch[i]);
      appendToList(ch[i],null,data._links.self);
    });

   })(i); // ADDED THIS

  }
this will allow you to lock the state of the i variable as the forloop is run and preserve it for the getJSON callback function when it's finally returned
if you're not familiar with IIFE, do some googling, but here's a classic piece to get you started: http://benalman.com/news/2010/11/immediately-invoked-function-expression/ (in particular read the 'Save state with closures' section as it pertains to your problem)
Andrew Grabarnick
@leprekon91
Feb 24 2016 12:24
@h4r1m4u Thank You!!!
CamperBot
@camperbot
Feb 24 2016 12:24
leprekon91 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1475 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 12:24
my pleasure @nazimkazim @leprekon91
TinT1
@TinT1
Feb 24 2016 12:26
http://codepen.io/Topolovec/full/XXveWg/
Hello.I don't understand why is line in css #title-text width:100% putting text in center.I mean thats what i want but why is width putting it there?
h4r1m4u
@h4r1m4u
Feb 24 2016 12:34
@TinT1 because #title-text is also absolutely positioned. when you absolutely position an element, it'll wrap around its content as tightly as possible. when you add add the width: 100% property, you make the element expand to 100% of it's parent element. and because you also have the text-center class on the same element, it'll center the text in it
the best way to realize what's happening is to investigate the element with your browser's web dev tools. try adjusting the width and position properties and see how this changes the layout of the element
Nazim
@nazimkazim
Feb 24 2016 12:35
@h4r1m4u can you suggest me a way to display city and other information on page. To be honest i do not really get it.
TinT1
@TinT1
Feb 24 2016 12:35
@h4r1m4u thank you very much
CamperBot
@camperbot
Feb 24 2016 12:35
tint1 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1476 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 12:37

@nazimkazim i gotta go and have dinner, but in short, you need to access the data object you're getting back from the API. do this:

$.getJSON($weatherURL, function(data) {
  console.log(data);
  //$city.append('<p class = "highlight">$cityName</p>');
   })

and check the console for what the data object looks like

once you know what it looks like, you can access its individual properties and their values and do something with them (i.e. in your case display them somewhere in the page)
Nazim
@nazimkazim
Feb 24 2016 12:38
@h4r1m4u thanks for advice
CamperBot
@camperbot
Feb 24 2016 12:38
nazimkazim sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: nazimkazim already gave h4r1m4u points
sigursiguros
@sigursiguros
Feb 24 2016 12:40
Hi guys, how do I get the three buttons to vertical align to the centre of the clock? http://codepen.io/Sigursiguros/pen/QyJaLQ?editors=0100
kirbyedy
@kirbyedy
Feb 24 2016 12:45
well you are not using bootstrap grid properly so its a bit difficult to align it at the moment
Blauelf
@Blauelf
Feb 24 2016 12:46
Is it possible to vertically align using bootstrap? Or does one have to follow patterns like described in https://www.w3.org/Style/Examples/007/center.en.html ?
kirbyedy
@kirbyedy
Feb 24 2016 12:46
```
<div class="row">
        <div class="col-md-4 col-md-offset-3">
          <h1>Pomodoro Clock</h1>
          <a id="clock">25</a>
        </div>
        <div class="col-md-5" id="clockControl">  
          <a id="startNow">Start</a>
          <a id="pauseNow">Pause</a>
          <a id="resetAll">Reset All</a>
        </div>
      </div>
here is your problem for start
sigursiguros
@sigursiguros
Feb 24 2016 12:49
@kirbyedy what is a proper grid? Does it have to add up to 20?
kirbyedy
@kirbyedy
Feb 24 2016 12:49
@Blauelf its a bit tricky, with vertical-align: middle;
Blauelf
@Blauelf
Feb 24 2016 12:49
I'm not @sigursiguros, just interested in how to properly use bootstrap, but would you add a new row for each link?
sigursiguros
@sigursiguros
Feb 24 2016 12:49
I mean 23
I mean 12
kirbyedy
@kirbyedy
Feb 24 2016 12:49
yes has to be 12
sigursiguros
@sigursiguros
Feb 24 2016 12:49
if I do twelve
the button elements in the right well of 6 is aligned to the center
kirbyedy
@kirbyedy
Feb 24 2016 12:49
now you have 9
sigursiguros
@sigursiguros
Feb 24 2016 12:50
I want the clock in the left 6 to align right and right 6 to align left
but can't get it to work
kirbyedy
@kirbyedy
Feb 24 2016 12:50
@Blauelf basically I would tile it vertically in the same row
sigursiguros
@sigursiguros
Feb 24 2016 12:51
@Blauelf are the new rows supposed to be inside column-right-6 or outside of it?
kirbyedy
@kirbyedy
Feb 24 2016 12:51
if I have to, but I try to avoid that kind of acrobatics
sigursiguros
@sigursiguros
Feb 24 2016 12:51
so what's the best way of aligning them all towards the centre cross?
kirbyedy
@kirbyedy
Feb 24 2016 12:53
well since even your first row is not properly done, I would suggest you to go with 1 row
have those + - buttons in the left column, clock in the middle, and this buttons on the right
the way you started is a bit difficult and you are just wasting your time
so 1 row then col-md-4, no offset and start from there to align
sigursiguros
@sigursiguros
Feb 24 2016 12:57
@kirbyedy if I do a 6 and 6
how do I align left well to right and right well to left?
kirbyedy
@kirbyedy
Feb 24 2016 13:00
pull-right or pull-left
keep in mind that your first row is also badly set
sigursiguros
@sigursiguros
Feb 24 2016 13:01
why is it badly set? I've changed it to 6 and 6
kirbyedy
@kirbyedy
Feb 24 2016 13:01
the first row
<div class="row lengthControl"> this div
as I said before, to avoid future problems, start with 1 row and col-md-4
so put those + - on the left, clock in the middle, and buttons on the right, and you are done
Screen Shot 2016-02-24 at 15.05.46.png
see the image
Tim Signore
@Timsig
Feb 24 2016 13:09
Hello all. I'm just about to tackle the quote generator project and wondered if anyone had found a free api that supplied quotes; I had a quick google, but nothing i found made much sense.
kirbyedy
@kirbyedy
Feb 24 2016 13:14
@Timsig http://forismatic.com/en/api/ for example
I hardcoded mine dough
Tim Signore
@Timsig
Feb 24 2016 13:17
@kirbyedy , thanks - i saw that one, but couldn't work out how to retrieve the quotes with jquery
CamperBot
@camperbot
Feb 24 2016 13:17
timsig sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 531 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Tim Signore
@Timsig
Feb 24 2016 13:28
thanks again @kirbyedy , I'll take a look
sigursiguros
@sigursiguros
Feb 24 2016 13:32
@kirbyedy I have it like this now. How do I align the clock to the center?
kirbyedy
@kirbyedy
Feb 24 2016 13:36
remove this: col-md-4
from the div where the clock is
sigursiguros
@sigursiguros
Feb 24 2016 13:37
@kirbyedy OK, I removed it but it's aligned to the left now
kirbyedy
@kirbyedy
Feb 24 2016 13:37
no it should be in the center now
line 6
this one: <div class="col-md-4 clockControl">
remove the col-md-4
disjfa
@disjfa
Feb 24 2016 13:39
you should also not combine the row and the container-fluid classes
and just remove all the bootstrap classes around the clock
sigursiguros
@sigursiguros
Feb 24 2016 13:39
@disjfa why should I not put row and container-fluid together?
kirbyedy
@kirbyedy
Feb 24 2016 13:40
I guess we have different codes then, look at the picture :D
although I am correcting yours ;)
Screen Shot 2016-02-24 at 15.40.12.png
disjfa
@disjfa
Feb 24 2016 13:42
@sigursiguros they have different qualities of bootstrap. One for the positioning and one for building col groups. If you add the row to the container-fluid it breaks the margins with the row class
sigursiguros
@sigursiguros
Feb 24 2016 13:45
@disjfa why is the row container div aligned to the left?
disjfa
@disjfa
Feb 24 2016 13:46
becouse the .row removes the margin:0 auto with it`s own (margin: 0 -15px or something)
sigursiguros
@sigursiguros
Feb 24 2016 13:47
the row by itself or the row with the container?
@kirbyedy in your image the break length and session length are far apart in the left and right
how do I get them aligned closer to the center horizontally
kirbyedy
@kirbyedy
Feb 24 2016 13:48
well maybe because I am looking your code on the 21" retina screen :)
disjfa
@disjfa
Feb 24 2016 13:49
this is the css on the two classes, can you explain wich will be used with the two classes on one element:
.container {
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
sigursiguros
@sigursiguros
Feb 24 2016 13:53
@kirbyedy it looks the same in my laptop as well
Hi guys, why is it that my width: 100px; not work on the clockSettings A
.clockControl a {
  padding: 5px 15px;
  font-size: 16px;
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  border-radius: 10px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  text-decoration: none;
  width: 100px;
}
disjfa
@disjfa
Feb 24 2016 13:57
a is an inline element, that does not accept a width. try display: inline-block
sigursiguros
@sigursiguros
Feb 24 2016 13:58
@disjfa I added the CSS to your code and nothing has changed
disjfa
@disjfa
Feb 24 2016 13:58
added? Thats the base css from bootstrap
sigursiguros
@sigursiguros
Feb 24 2016 13:58
yes added
disjfa
@disjfa
Feb 24 2016 13:59
it already has those properties, check dev tools (F12?)
sigursiguros
@sigursiguros
Feb 24 2016 13:59
i see thanks
Tenzin Phuljung
@developertenzin
Feb 24 2016 13:59
Hey guys, I am trying to learn more about the html5 canvas to create games. I am having a hard time figuring out how to trigger the click on a randomly created box within a canvas element. Here is my stackoverflow question: http://stackoverflow.com/questions/35592475/how-to-add-a-click-event-for-a-randomly-positioned-box-inside-of-canvas/35592543#35592543
Anyone have any idea how to do this?
sigursiguros
@sigursiguros
Feb 24 2016 14:00
@disjfa so how do I tell which one's container and row if n othing has changed
disjfa
@disjfa
Feb 24 2016 14:01
i was explaining the buildup of the css from the classes you added. It was not a test
the div gets the margin-left: auto from the .container class. And then it gets a margin-left: -15px added from the .row class. It uses the latest so you break the .container class. So you learn not to combine container classes with row classes.
sigursiguros
@sigursiguros
Feb 24 2016 14:04
@disjfa if I put just the .row CSS in your pen, it doesn't align the row div
why is that?
AlbertoRFer
@AlbertoRFer
Feb 24 2016 14:07
hi i'm trying to do an http request but i can't make it work. this is what i get so far: $(document).ready(function() {
$.get("http://api.forismatic.com/api/1.0/","method=getQuote&format=json&lang=en",function(data){
$(".message").html(JSON.stringify(data));
});
});
Lanitta
@DivaWeb
Feb 24 2016 14:35
good morning all
Olivia Legge
@livmaria7891
Feb 24 2016 14:39
@DivaWeb Good morning :)
@AlbertoRFer Also you might want to change the format so that youre getting a jsonp format http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=callback=?"
@AlbertoRFer Im also working on this at the moment. @iashraful comments above really helped me get my head around this part I recommend scrolling up and reading those.
AlbertoRFer
@AlbertoRFer
Feb 24 2016 14:44
ok thanks @Balldy
CamperBot
@camperbot
Feb 24 2016 14:44
albertorfer sends brownie points to @balldy :sparkles: :thumbsup: :sparkles:
:star: 284 | @balldy | http://www.freecodecamp.com/balldy
Chris Ball
@Balldy
Feb 24 2016 14:47
thanks @iashraful
CamperBot
@camperbot
Feb 24 2016 14:47
balldy sends brownie points to @iashraful :sparkles: :thumbsup: :sparkles:
:star: 454 | @iashraful | http://www.freecodecamp.com/iashraful
Davide
@DavOnGit
Feb 24 2016 15:01
This message was deleted
CamperBot
@camperbot
Feb 24 2016 15:01
davongit sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1477 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
sigursiguros
@sigursiguros
Feb 24 2016 15:01
Thanks @disjfa @kirbyedy
CamperBot
@camperbot
Feb 24 2016 15:01
sigursiguros sends brownie points to @disjfa and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 138 | @disjfa | http://www.freecodecamp.com/disjfa
:star: 534 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Davide
@DavOnGit
Feb 24 2016 15:03
@h4r1m4u thanks, this helped but i resolved with event delegates:
$(document).on('click', '.delete', function(e) {
    $(this).parent().remove();
    e.preventDefault();
  });
CamperBot
@camperbot
Feb 24 2016 15:03
davongit sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: davongit already gave h4r1m4u points
h4r1m4u
@h4r1m4u
Feb 24 2016 15:05
@DavOnGit yep, that works as well. the difference is that in your case the event bubbles up all the way to the document level
Davide
@DavOnGit
Feb 24 2016 15:07
i have to study more on events bubbling, propagations..... :)
h4r1m4u
@h4r1m4u
Feb 24 2016 15:08
same. it's not something that i'm versed in detail :)
sigursiguros
@sigursiguros
Feb 24 2016 15:12
Hi guys, I'm gonna need help on my countdown timer for the pomodoro clock. What do I need?
$("#startNow").click(function(startTime) {
    var s = 60;
    // add a zero in front of numbers<10
    var m = checkTime(sessionLength);
    var b = checkTime(breakLength);
    var s = checkTime(s);
    var t = setInterval(function() {
      $("#clock").text = m + ":" + s;
    }, 1000);
  });

  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }
do I necessarily need a date?
Or can countdown with just minutes and seconds?
h4r1m4u
@h4r1m4u
Feb 24 2016 15:18
@sigursiguros the easiest way to go about it is to keep the total time in seconds only. then you convert it to minutes and seconds only when displaying it to the DOM
keeping it in seconds only will make the implementation logic much simpler
sigursiguros
@sigursiguros
Feb 24 2016 15:19
@h4r1m4u do I do the countdown using a loop with setInterval or getting a return function on current time?
h4r1m4u
@h4r1m4u
Feb 24 2016 15:20
i'm not sure i fully understand what you have in mind, but generally you want to setInterval() as it repeatedly executes a block of code, which is exactly what you need for the pomodoro
inside the setInterval(), you'll want to decrease the value of the total time variable and display the updated value into the DOM
sigursiguros
@sigursiguros
Feb 24 2016 15:21
would it be something like my code above?
I haven no idea how to attempt this
h4r1m4u
@h4r1m4u
Feb 24 2016 15:22
well, something like that, but it needs work
sigursiguros
@sigursiguros
Feb 24 2016 15:22
I don't understand how the setInterval function works
does it execute whatever's in the function once every second (whatever time interval I set?)
disjfa
@disjfa
Feb 24 2016 15:22
Depends on how accurate the date needs to be. Usa a Date() to be more accurate, but it doesn`t matter what you use.
every interval
h4r1m4u
@h4r1m4u
Feb 24 2016 15:23
@sigursiguros yes, exactly. once you create the interval, it'll execute the block of code in the callback function at the interval you specify
sigursiguros
@sigursiguros
Feb 24 2016 15:25
@disjfa using a date would return the whole date including hours?
h4r1m4u
@h4r1m4u
Feb 24 2016 15:26
start building it slow. have a set time variable (e.g. 120 seconds). have a div which displays this value on the page. have a button. write a function which creates interval and decreases the time value. write a function which displays the time value into the DOM. make the display function part of the interval, so that it gets called every second. write a click handler which is invokes the function that creates the interval. you have a basic barebones timer implemented.
disjfa
@disjfa
Feb 24 2016 15:26
I would not use a date if you don`t quite know what you are doing. It makes a whole bunch of new testcases. Just use a setInterval and add a 1 to the total seconds.
sigursiguros
@sigursiguros
Feb 24 2016 15:27
awesome. thank you guys @h4r1m4u @disjfa
CamperBot
@camperbot
Feb 24 2016 15:27
sigursiguros sends brownie points to @h4r1m4u and @disjfa :sparkles: :thumbsup: :sparkles:
:warning: sigursiguros already gave disjfa points
:star: 1478 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 15:27
yw
sigursiguros
@sigursiguros
Feb 24 2016 15:30
@h4r1m4u how do I decrease the time inside the interval?
Chris Hinton
@hintcj
Feb 24 2016 15:32
Anyone have any advice on creating the hover effect overlay on the pictures for the Personal Portfolio challenge
Advice being a good learning resource on how to actually do it
h4r1m4u
@h4r1m4u
Feb 24 2016 15:33
@sigursiguros uhm:
var mainTime = 120;

var myTimer = setInterval(function() {
  mainTime--;
}, 1000);
Michael Betts
@MichaelFlops
Feb 24 2016 15:33
@hintcj I would add a line of jquery that adds a css class you made on hover
Nikolay Neykov
@shkurata
Feb 24 2016 15:34
Hello, I need some help with my Simon game app
disjfa
@disjfa
Feb 24 2016 15:34
@hintcj Or just use the css :hover
Nikolay Neykov
@shkurata
Feb 24 2016 15:34
how can I synchronize all the processes
Michael Betts
@MichaelFlops
Feb 24 2016 15:34
@disjfa mhm that too :)
Nikolay Neykov
@shkurata
Feb 24 2016 15:34
it's a mess
sigursiguros
@sigursiguros
Feb 24 2016 15:34
@h4r1m4u

  $("#startNow").click(function initiateClock(){
    var timeInterval = setInterval(function() {
      var s = 60;
      s -= 1;
      var seconds = checkTime(s);
      $("#clock").text = sessionLength + ":" + seconds;
    }, 1000);
  });
h4r1m4u
@h4r1m4u
Feb 24 2016 15:34
@MichaelFlops @hintcj please don't use jquery for hover effects. just use pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
sigursiguros
@sigursiguros
Feb 24 2016 15:34
any idea why this doesn't start counting?
disjfa
@disjfa
Feb 24 2016 15:35
you define s in the function
h4r1m4u
@h4r1m4u
Feb 24 2016 15:36
@sigursiguros yup, @disjfa is right. you recreate s and reset it to 60 on each tick of the interval
any advice?
Michael Betts
@MichaelFlops
Feb 24 2016 15:38
@h4r1m4u thanks for being the one to tell me
CamperBot
@camperbot
Feb 24 2016 15:38
michaelflops sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1479 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Nikolay Neykov
@shkurata
Feb 24 2016 15:38
how to fix timings
h4r1m4u
@h4r1m4u
Feb 24 2016 15:39
@MichaelFlops no worries. generally if it's possible to do in pure CSS, avoid using JS
Heather Kusmierz
@HKuz
Feb 24 2016 15:39
Hi folks! Just wondering what everyone uses for images hosting? I have an Amazon Cloud Drive account, but those links seem temporary and break after a little while. Right now I'm linking to facebook albums, which doesn't seem ideal...
Chris
@chrisdav6
Feb 24 2016 15:39
I use my own domain
h4r1m4u
@h4r1m4u
Feb 24 2016 15:40
@HKuz dropbox. or http://postimage.org. (dropbox better)
Chris
@chrisdav6
Feb 24 2016 15:40
I came across $12.00 for a year, couldn't pass it up
Heather Kusmierz
@HKuz
Feb 24 2016 15:48
@h4r1m4u @chrisdav6 Thank you! I'll check those out
CamperBot
@camperbot
Feb 24 2016 15:48
hkuz sends brownie points to @h4r1m4u and @chrisdav6 :sparkles: :thumbsup: :sparkles:
:star: 1480 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
:star: 261 | @chrisdav6 | http://www.freecodecamp.com/chrisdav6
sigursiguros
@sigursiguros
Feb 24 2016 15:49
@HKuz will I be able to clear the setInterval outside of the function?
by clicking another button?
@h4r1m4u
h4r1m4u
@h4r1m4u
Feb 24 2016 15:50
@sigursiguros yes. the setInterval() function returns the id of the interval. if you save it into a variable, you can use the variable later to clearInterval(). it might be worthwhile to read the documentation of these functions:
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval
sigursiguros
@sigursiguros
Feb 24 2016 16:00
THanks @h4r1m4u
CamperBot
@camperbot
Feb 24 2016 16:00
:warning: sigursiguros already gave h4r1m4u points
sigursiguros sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
sigursiguros
@sigursiguros
Feb 24 2016 16:00
Is there something wrong with my code? It's not returning the minutes showing on my clock
  var totalSeconds = 60 * document.getElementById(clock);
disjfa
@disjfa
Feb 24 2016 16:01
"clock" != clock
sigursiguros
@sigursiguros
Feb 24 2016 16:01
@disjfa I tried both
Coira Ellison
@Coira
Feb 24 2016 16:02
@sigursiguros do you need to convert the string from getelement to a number?
disjfa
@disjfa
Feb 24 2016 16:02
but you should not use a dom element for a integer. Use a custom integer you use in the code and set that in the clock element
sigursiguros
@sigursiguros
Feb 24 2016 16:03
I tried parseInt on it
disjfa
@disjfa
Feb 24 2016 16:03
document.getElementById(clock).innerHTML
sigursiguros
@sigursiguros
Feb 24 2016 16:04
it works, thanks @disjfa @Coira
CamperBot
@camperbot
Feb 24 2016 16:04
sigursiguros sends brownie points to @disjfa and @coira :sparkles: :thumbsup: :sparkles:
:star: 492 | @coira | http://www.freecodecamp.com/coira
:star: 141 | @disjfa | http://www.freecodecamp.com/disjfa
sigursiguros
@sigursiguros
Feb 24 2016 16:04
so what does it pick up if I don't add ".innerHTML"
disjfa
@disjfa
Feb 24 2016 16:04
the dom element
[div]
sigursiguros
@sigursiguros
Feb 24 2016 16:07
i see, thanks
Even if I set my clock to 2 minutes, it starts counting down at 25. what's wrong?
and the pause function on clearinterval wouldn't work
and if I click the start button 3 times, the interval counts down by interval of 3, how do I stop that?
Coira Ellison
@Coira
Feb 24 2016 16:16
@sigursiguros move this line var totalSeconds = 60 * document.getElementById("clock").innerHTML; inside your #startNow click function, but above where you startInterval
Tyler Moeller
@TylerMoeller
Feb 24 2016 16:16
@sigursiguros You have some scope issues in your code. If you define a variable inside a function, other functions won't know about it. This is the case with your sessionLength and timeInterval vars.
For the start button issue, you'll have to check if the clock is already running. If so, pressing start does nothing.
Coira Ellison
@Coira
Feb 24 2016 16:17
also, every time you click start, a new setInterval is started, you need to write a check so that it only starts once
J Player
@Heyjp
Feb 24 2016 16:17
can anyone tell me why my the order of the streamers does not match the order of my array? http://codepen.io/Heyjp/pen/jWgqga
sigursiguros
@sigursiguros
Feb 24 2016 16:18
Thansk for the tips @Coira @TylerMoeller
thanks @Coira @TylerMoeller
CamperBot
@camperbot
Feb 24 2016 16:18
:warning: sigursiguros already gave coira points
sigursiguros sends brownie points to @coira and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star: 365 | @tylermoeller | http://www.freecodecamp.com/tylermoeller
J Player
@Heyjp
Feb 24 2016 16:26
or even why it wont run arghhghg
Joe
@mmmcoffee
Feb 24 2016 16:28
First time here. I built the "Show The Local Weather" project in Chrome, and it worked perfectly. Then I pasted the code in Codepen, and my API calls broke.
disjfa
@disjfa
Feb 24 2016 16:29
post the pen
Joe
@mmmcoffee
Feb 24 2016 16:30
I got this from the console in my codepen page:Font from origin 'https://codepen.io' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://codepen.io' is therefore not allowed access.
Mixed Content: The page at 'https://s.codepen.io/boomerang/379bd7f73438358fe4b32044e8ed25e81456329634970/index.html?editors=1010' was loaded over HTTPS, but requested an insecure script 'http://ip-api.com/json/?callback=jQuery213045241479272954166_1456329637029&_=1456329637030'. This request has been blocked; the content must be served over HTTPS.
Codepen is http://codepen.io/mmmcoffee/pen/WrVyXx?editors=1010
???
Coira Ellison
@Coira
Feb 24 2016 16:30
@Heyjp your pen's working fine for me, and the streamers are in order. perhaps they aren't always because sometimes the ajax calls don't finish in order?
h4r1m4u
@h4r1m4u
Feb 24 2016 16:31
@mmmcoffee make sure that in your browser you're accessing your codepen at http://codepen.io/mmmcoffee/pen/WrVyXx?editors=1010, and not https://codepen.io/mmmcoffee/pen/WrVyXx?editors=1010. that's what's causing the issue
Joe
@mmmcoffee
Feb 24 2016 16:31
So you can see your local temperature and weather conditions, and a weather icon?
J Player
@Heyjp
Feb 24 2016 16:31
oh is that the case, is there anyway to delay the loop until the call finishes? @Coira
@Coira thanks btw for looking
Joe
@mmmcoffee
Feb 24 2016 16:34
@h4r1m4u thanks for the advice. However, I tried typing the address beginning with http:// into the browser, and got the same result. What am I not doing?
CamperBot
@camperbot
Feb 24 2016 16:34
mmmcoffee sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1481 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Coira Ellison
@Coira
Feb 24 2016 16:35
@Heyjp ah that i don't know. .then (like you've used) and .done wait till all calls are finished, maybe you could sort them? i don't know how it works if you're looping through an array though
Tyler Moeller
@TylerMoeller
Feb 24 2016 16:35
@Heyjp It looks like you're trying to use Promise objects to work around this. You get users back in the order that Twitch delivers them to you. Sometimes it's in the order you request, sometimes it is not. You may try an async ajax request instead: http://api.jquery.com/jquery.ajax/. I believe that will wait to get your data before processing the next user.
h4r1m4u
@h4r1m4u
Feb 24 2016 16:37
@mmmcoffee double check that you're using http:// when accessing the pen in your browser. and potentially try to reload/refresh the page. another thing to check - do you have any browser plugins/extensions that force the use of https?
Coira Ellison
@Coira
Feb 24 2016 16:37
hm, it says you can't use async for cross-domain or jsonp calls @TylerMoeller @Heyjp
sigursiguros
@sigursiguros
Feb 24 2016 16:37
@Coira @TylerMoeller how do I get the clearInterval function to work?
h4r1m4u
@h4r1m4u
Feb 24 2016 16:37
your codepen works fine for me at http:// and i've seen other people have the same problem before, so i'm pretty sure that's what's causing it
Tyler Moeller
@TylerMoeller
Feb 24 2016 16:37
@Coira Yeah, you have to set data: json, not jsonp
Coira Ellison
@Coira
Feb 24 2016 16:38
i see
J Player
@Heyjp
Feb 24 2016 16:39
thanks @TylerMoeller i'll look into it
CamperBot
@camperbot
Feb 24 2016 16:39
heyjp sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star: 367 | @tylermoeller | http://www.freecodecamp.com/tylermoeller
Joe
@mmmcoffee
Feb 24 2016 16:40
@h4r1m4u YOU.SO.ROCK Thank you! I had an extension forcing https that I'd forgotten about. I am in awe of your expertise.
CamperBot
@camperbot
Feb 24 2016 16:40
mmmcoffee sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: mmmcoffee already gave h4r1m4u points
h4r1m4u
@h4r1m4u
Feb 24 2016 16:41
@mmmcoffee yeah, i figured that might have been it. happy to have helped!
Doandes Razvan
@Fuzyon
Feb 24 2016 16:50
This message was deleted
This message was deleted
oops, wrong section
Omar Adulbaki Alsarbaji
@omar-sh
Feb 24 2016 16:51
please can any one help me with APIs I can't do the weather app :(
sigursiguros
@sigursiguros
Feb 24 2016 16:57
After adding this to my code, the function no longer work.
$("#clock").text("Session's over!"+<p>+"Take a break!");
$("#startNow").click(function() {
    var totalSeconds = 60 * document.getElementById("clock").innerHTML;
    var timeInterval = setInterval(function() {
      var s = totalSeconds % 60 + 1;
      var m = Math.floor(totalSeconds / 60);
      if (totalSeconds <= 0) {
        clearInterval(timeInterval);
        $("#clock").text("Session's over!"+<p>+"Take a break!");
      } else totalSeconds -= 1;
      s -= 1;
      var minutes = checkTime(m)
      var seconds = checkTime(s);
      $("#clock").text(minutes + ":" + seconds);
    }, 1000);
  });
any ideas?
Arpit Saxena
@arpit-saxena
Feb 24 2016 16:59
@sigursiguros Add <p> in quotations
@sigursiguros try useing.html instead of .text
sigursiguros
@sigursiguros
Feb 24 2016 17:01
@arpit-saxena what's the difference?
Coira Ellison
@Coira
Feb 24 2016 17:01
@sigursiguros sorry, just saw your message from before, did you get clearInterval working?
Arpit Saxena
@arpit-saxena
Feb 24 2016 17:02

The text() method sets or returns the text content of the selected elements.

When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed).

sigursiguros
@sigursiguros
Feb 24 2016 17:02
@Coira yes it did work after I defined it outside of the function so it's a scope issue as well
Coira Ellison
@Coira
Feb 24 2016 17:02
great!
Tyler Moeller
@TylerMoeller
Feb 24 2016 17:05
@sigursiguros The quick and dirty fix is to change var timeInterval = setInterval(function() { to timeInterval = setInterval(function() { so it can be seen outside of the #startNow button click function. Ideally, you'll want to have the button clicks call functions that pass these variables around - it's best to avoid global variables if possible. Here's a nice tutorial explaining why: https://gist.github.com/hallettj/64478
jessecronin
@jessecronin
Feb 24 2016 17:05
Hey could anyone help me out with my :hover function? I'm trying to get the color to change on my buttons, but :hover isn't working at all. http://codepen.io/jcronin/pen/WrVBXw
Dustin Frank
@DustInCompetent
Feb 24 2016 17:10
the rules only apply to the element #tbutton which seems to be somewhere in te background
Clark Arnold
@clarkarnold
Feb 24 2016 17:12
Hi all, i am trying to figure out the wiki API project. Can anyone explain how this code works?
  $.ajax({
      url: endpoint,
      dataType: 'jsonp',
      data: {
        action: 'query',
        titles: title,
        prop: 'pageimages',
        format: 'json',
        pithumbsize: 300
      },
sigursiguros
@sigursiguros
Feb 24 2016 17:12
thanks for the tips @arpit-saxena
CamperBot
@camperbot
Feb 24 2016 17:12
sigursiguros sends brownie points to @arpit-saxena :sparkles: :thumbsup: :sparkles:
:star: 278 | @arpit-saxena | http://www.freecodecamp.com/arpit-saxena
Dustin Frank
@DustInCompetent
Feb 24 2016 17:18
@jessecronin The top button doesn't register the cursor hovering it because it is below the "hitbox" of the bottom button
Jason
@carpediem1213
Feb 24 2016 17:19
Hello all, using CSS/Bootstrap for my portfolio page. How do I make a container take the entire space of a page? When I do background-color/image or cover, there is a ton of white space in each direction.
Chris
@chrisdav6
Feb 24 2016 17:20
.container-fluid
Jason
@carpediem1213
Feb 24 2016 17:20
@chrisdav6 it's that easy?
Robert Uivarosi
@URobert
Feb 24 2016 17:20
@carpediem1213 you can use class container-fluid instead of container
Chris
@chrisdav6
Feb 24 2016 17:21
it is! bootstrap is pretty cool ;)
Robert Uivarosi
@URobert
Feb 24 2016 17:21
it can save you a bunch of trouble
Jason
@carpediem1213
Feb 24 2016 17:21
@URobert @chrisdav6 Thank you both!
CamperBot
@camperbot
Feb 24 2016 17:21
carpediem1213 sends brownie points to @urobert and @chrisdav6 :sparkles: :thumbsup: :sparkles:
:star: 618 | @urobert | http://www.freecodecamp.com/urobert
:star: 268 | @chrisdav6 | http://www.freecodecamp.com/chrisdav6
Omar Adulbaki Alsarbaji
@omar-sh
Feb 24 2016 17:21
any one can help with APIs , please I am stuck with API's project :(
Chris
@chrisdav6
Feb 24 2016 17:21
you are welcome sir :)
classact1
@classact1
Feb 24 2016 17:22
hey guys. I'm having a trouble with Local Weather project. I don't quite get calling the API and getting information from there. This is what I wrote so far. Is it wrong? If not what should I do next cause I'm clueless...
var xhr = new XMLHttpRequest();
xhr.open("GET", "api.openweathermap.org/data/2.5/weather?lat=139&lon=35", false);
xhr.send();
Chris
@chrisdav6
Feb 24 2016 17:26
i believe you have to create your function that checks the onreadystatechange
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        doSomething();
    }
};
that would go between the request and the open statements
Robert Uivarosi
@URobert
Feb 24 2016 17:31
@carpediem1213 yw
pinkmanbox
@pinkmanbox
Feb 24 2016 17:32
Can anyone tell me how a button on a page can be directly controlled by using a key on the keyboard?
Chris
@chrisdav6
Feb 24 2016 17:33
jQuery keypress
$("button").on("keypress", function() {
$(this).doSomething();
});
Goje Samuel Andrei Daniel
@pringon
Feb 24 2016 17:34
hey guys
can i ask you how you made the ai for the tic tac toe game?
trying to get a hold of the minimax algorithm, but it kinda beats me....
Robert Uivarosi
@URobert
Feb 24 2016 17:36
@pringon is there still a requirement
to make it unbeatable ?
Goje Samuel Andrei Daniel
@pringon
Feb 24 2016 17:36
@URobert no there isn't
Robert Uivarosi
@URobert
Feb 24 2016 17:36
if not, I don't think you need minimax anymore
Goje Samuel Andrei Daniel
@pringon
Feb 24 2016 17:37
buy i'm trying to do it just for the challenge:D
Robert Uivarosi
@URobert
Feb 24 2016 17:37
@pringon well, then you have to use minimax I guess
MIke
@chipotle298
Feb 24 2016 17:37
could someone take a look and let me know why my code is not working? http://codepen.io/manczyk2/pen/QyeWOB?editors=1000
Robert Uivarosi
@URobert
Feb 24 2016 17:37
@pringon if you want to make it 100% unbeatable
@pringon I used minimax too, it's not easy to grasp, so it could easily take you multiple sittings , especially when you are tired and trying to get it\
Goje Samuel Andrei Daniel
@pringon
Feb 24 2016 17:39
could you tell me where i could look for an explanation for it?
most of them require either oop or graphs as i see it
pinkmanbox
@pinkmanbox
Feb 24 2016 17:39
@chrisdav6 could you elaborate on that? i have a code for a calculator. I want to press the 1 button on my keyboard and want it to trigger a function "one()"
Coira Ellison
@Coira
Feb 24 2016 17:40
@chipotle298 this is the link to your image http://s.codepen.io/boomerang/c1e3f2d1b73de9cfd5146962879726571456335483867/img_chania.jpg, which is why it doesn't work
Goje Samuel Andrei Daniel
@pringon
Feb 24 2016 17:40
can i do it with backtracking as well?
like, solely backtracking?
Coira Ellison
@Coira
Feb 24 2016 17:40
@chipotle298 you'll need to host it somewhere first (i used dropbox but there are other places, ask around)
MIke
@chipotle298
Feb 24 2016 17:40
hmmm ill take a look thanks @Coira
CamperBot
@camperbot
Feb 24 2016 17:40
chipotle298 sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
:star: 493 | @coira | http://www.freecodecamp.com/coira
Patrick
@pwcsquared
Feb 24 2016 17:41
hey guys I have a question about the falsy bouncer challenge
here is my "solution"
function bouncer(arr) {
  var newArr = arr.filter(function(val){
    if (val !== 0 || false || null || undefined || ""){
      return val;
    }
  });  
  return newArr;
}

bouncer([7, "ate", "", false, 9]);
is there a more elegant way of doing this? Mine kind of feels like cheating
Robert Uivarosi
@URobert
Feb 24 2016 17:44
function bouncer(arr) {
  // Don't show a false ID to this bouncer.
  var myCleanArray = [];
  for (var i = 0 ; i < arr.length ; i++){
    if (arr[i]){
      myCleanArray.push(arr[i]);
    }

  }
  return myCleanArray;
}

//bouncer([7, "ate", "", false, 9]);
bouncer([false, null, 0, NaN, undefined, ""]);
@pwcsquared see above
Patrick
@pwcsquared
Feb 24 2016 17:47
@URobert Thanks! I combined our solutions to get this:
CamperBot
@camperbot
Feb 24 2016 17:47
pwcsquared sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 620 | @urobert | http://www.freecodecamp.com/urobert
Patrick
@pwcsquared
Feb 24 2016 17:47
function bouncer(arr) {
  var newArr = arr.filter(function(val){
    if (val){
      return val;
    }
  });  
  return newArr;
}

bouncer([7, "ate", "", false, 9]);
Robert Uivarosi
@URobert
Feb 24 2016 17:47
@pwcsquared heh, thx... I guess that is as clear as it gets using filter :D
CamperBot
@camperbot
Feb 24 2016 17:47
urobert sends brownie points to @pwcsquared :sparkles: :thumbsup: :sparkles:
:star: 268 | @pwcsquared | http://www.freecodecamp.com/pwcsquared
Robert Uivarosi
@URobert
Feb 24 2016 17:48
*clean
Coira Ellison
@Coira
Feb 24 2016 17:49
@pwcsquared there's a nice one-liner using Boolean if you want to try figuring it out :)
Patrick
@pwcsquared
Feb 24 2016 17:50
@Coira agh I can't resist one-liners
daniellechef
@daniellechef
Feb 24 2016 17:50
Is there a way to add my own personal image to a webpage without a url?
Clark Arnold
@clarkarnold
Feb 24 2016 17:51
Does anybody have any tips for getting going on the Wikipedia Viewer?
Robert Uivarosi
@URobert
Feb 24 2016 17:51
@clarkarnold study their API and start playing around with some calls
Chris
@chrisdav6
Feb 24 2016 17:53
@pinkmanbox
$(function() {

    $('body').on("keydown", function(e){
        if(e.keyCode == 49){
            $(this).css({'background':'red'});  
        }
        if(e.keyCode == 50){
            $(this).css({'background':'yellow'});
        }
    });

});
Coira Ellison
@Coira
Feb 24 2016 17:53
@pwcsquared it's fun when you get it, though i wouldn't use it in production code
Chris
@chrisdav6
Feb 24 2016 17:54
e.keyCode is using ASCII key code and assigning the keydown function to number 1, which is ASCII key code 49.
Hope that helps
Coira Ellison
@Coira
Feb 24 2016 17:54
@pwcsquared if it starts to drive you crazy, i'll be back in a few hours to show you what it is, or you can ask around
Patrick
@pwcsquared
Feb 24 2016 17:56
@Coira I think I can get it :P
Omar Adulbaki Alsarbaji
@omar-sh
Feb 24 2016 17:56
any one can help with APIs ? please I am stuck in weather project :(
Coira Ellison
@Coira
Feb 24 2016 17:56
yay, great :)
sean9
@sean9
Feb 24 2016 18:02
same, lookingfor api help
Ray
@rbjr
Feb 24 2016 18:16
hey all
having some trouble with the random quote machine

```var quote = ["", "He who fights with monsters should look to it that he himself does not become a monster. And when you gaze long into an abyss the abyss also gazes into you. - Friedrich Nietzsche", "The surest way to corrupt a youth is to instruct him to hold in higher esteem those who think alike than those who think differently. - Friedrich Nietzsche", "There are no facts, only interpretations. - Friedrich Nietzsche", "If A is success in life, then A = x + y + z. Work is x, play is y and z is keeping your mouth shut. - Albert Einstein", "The important thing is not to stop questioning. Curiosity has its own reason for existence. - Albert Einstein", "If I have seen further it is by standing on the sholders of Giants. - Sir Isaac Newton", "God created everything by number, weight and measure. - Sir Isaac Newton"];

function quotezor() {
var x = Math.floor((Math.random() * 6) + 1);

quoteSaver = quote[x];

document.getElementById("zor").innerHTML = quoteSaver;

};

function tweetzor() {
window.open('https://twitter.com/intent/tweet?text=' + quoteSaver);
};

quotes pop up just fine, random
but I'm having a mental block on storing which quote is up at the time so i can tweet it

```var quote = ["", "He who fights with monsters should look to it that he himself does not become a monster. And when you gaze long into an abyss the abyss also gazes into you. - Friedrich Nietzsche", "The surest way to corrupt a youth is to instruct him to hold in higher esteem those who think alike than those who think differently. - Friedrich Nietzsche", "There are no facts, only interpretations. - Friedrich Nietzsche", "If A is success in life, then A = x + y + z. Work is x, play is y and z is keeping your mouth shut. - Albert Einstein", "The important thing is not to stop questioning. Curiosity has its own reason for existence. - Albert Einstein", "If I have seen further it is by standing on the sholders of Giants. - Sir Isaac Newton", "God created everything by number, weight and measure. - Sir Isaac Newton"];

function quotezor() {
var x = Math.floor((Math.random() * 6) + 1);

quoteSaver = quote[x];

document.getElementById("zor").innerHTML = quoteSaver;

};

function tweetzor() {
window.open('https://twitter.com/intent/tweet?text=' + quoteSaver);
}; ```

crap.
Matthew Boland
@mattboland
Feb 24 2016 18:17
@sean9 to start, you will need to go here and sign up and get an api key for yourself: http://openweathermap.org/current#geo
Ray
@rbjr
Feb 24 2016 18:18
var quote = ["", "He who fights with monsters should look to it that he himself does not become a monster. And when you gaze long into an abyss the abyss also gazes into you. - Friedrich Nietzsche", "The surest way to corrupt a youth is to instruct him to hold in higher esteem those who think alike than those who think differently. - Friedrich Nietzsche", "There are no facts, only interpretations. - Friedrich Nietzsche", "If A is success in life, then A = x + y + z. Work is x, play is y and z is keeping your mouth shut. - Albert Einstein", "The important thing is not to stop questioning. Curiosity has its own reason for existence. - Albert Einstein", "If I have seen further it is by standing on the sholders of Giants. - Sir Isaac Newton", "God created everything by number, weight and measure. - Sir Isaac Newton"];

function quotezor() {
  var x = Math.floor((Math.random() * 6) + 1);

quoteSaver = quote[x];  

 document.getElementById("zor").innerHTML = quoteSaver;


};

function tweetzor() {
  window.open('https://twitter.com/intent/tweet?text=' + quoteSaver);
};
drdaveg
@drdaveg
Feb 24 2016 18:31
Hi! So I have tried about 20 different approaches to get JSONP or Ajax or JQuery to work under codepen.io to do the Wikipedia viewer - does any of this actually work on codepen.io? I have spent more time on this zipline then on the rest of freecodecamp COMBINED. Nothing seems to work - and we can't modify the JSON server configuration, deployment configuration, etc. which half the approaches want! Even the plugins to add JSONP headers don't work!
sean9
@sean9
Feb 24 2016 18:32
@mattboland alright i got the api
Bruce Young
@mutantspore
Feb 24 2016 18:38
@drdaveg yes it does work. Show us a pen of your “best effort” and we can see where you might be going wrong.
Nikolay Neykov
@shkurata
Feb 24 2016 18:39
@mutantspore , I need your help.
drdaveg
@drdaveg
Feb 24 2016 18:39
Just a sec
Matthew Boland
@mattboland
Feb 24 2016 18:41
@sean9 so you are going to use that key, along with the lat and lon coordinates you pull from the browser to customize the url: "//api.openweathermap.org/data/2.5/weather?lat=(YOUR LAT)&lon=(YOUR LON)" + "&appid=" + apikey That will give you the JSON you will need to pull pertinent information from. basically you are creating a new object for each visitor to your site. the api key identifies your web page and all of its requests to the server for information. if, say you were requesting too much data the people operating the server could identify you and charge you...At least that's the way i understand it.
Nikolay Neykov
@shkurata
Feb 24 2016 18:41
I can't synchronize the events.
It's like a symphony in my Simon game
drdaveg
@drdaveg
Feb 24 2016 18:43
So this does not throw a failure or an error - but does perform the success. I am not sure how to share my pen directly, because I think they are read only. If I use JQuery I get a CORS error.

var endpoint = "https://en.wikipedia.org/w/api.php?";
var call = endpoint + "format=jsonp&action=query&callback=?&titles="; //prop=info& jsonpCallback
var response = "";

function jsonpCallback () {
console.log("in jsonpCallback");
}

jQuery.support.cors = true;
$.ajax({
url: request,
dataType: "jsonp", // was json
contentType : "text/html", // was application/javascript
callbackParameter : 'jsonpCallback', // $.jsonp only; $.ajax uses 'jsonpCallback'

type: 'GET', // was post in his
headers: { 'Api-User-Agent': 'Example/1.0' ,
'Access-Control-Allow-Origin' : '*' },
success: function(data) { // parseRecords(response)
alert("logging data in ajax success:");
rr = JSON.parse(data);
console.log(JSON.stringify(rr));
console.log("done");
},
failure: //function(XHR, textStatus, errorThrown)
function() { alert("failed"); },
error: function(XHR, textStatus, errorThrown) {
alert("something went wrong: "+ textStatus + "|" + errorThrown);
}
});
console.log("past ajax query but still in get records");

Bruce Young
@mutantspore
Feb 24 2016 18:43
@shkurata i haven’t even touched that challenge. I have seen help offered that used setTimeout with a progressively longer delay to play the notes though. As I said… not done it yet
@drdaveg just paste the url of te pen
CamperBot
@camperbot
Feb 24 2016 18:44
drdaveg sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1156 | @mutantspore | http://www.freecodecamp.com/mutantspore
Nikolay Neykov
@shkurata
Feb 24 2016 18:45
ok. thanks @mutantspore . I'll struggle myself :)
CamperBot
@camperbot
Feb 24 2016 18:45
shkurata sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1157 | @mutantspore | http://www.freecodecamp.com/mutantspore
Matthew Boland
@mattboland
Feb 24 2016 18:46
@rbjr try declaring var x as a global var and then reassign it within the function
@rbjr sorry i mean quoteSaver
Ray
@rbjr
Feb 24 2016 18:49
ok will try
Mike Rious
@kapitolkoder
Feb 24 2016 18:50
Hello World! A somewhat ambitious career change decision has landed me here.
CamperBot
@camperbot
Feb 24 2016 18:50

welcome to FreeCodeCamp @kapitolkoder!

sean9
@sean9
Feb 24 2016 18:50
@mattboland could you take a look at my codepen, i have no idea if the formating is right since its throwing me an error
Ray
@rbjr
Feb 24 2016 18:51
OMG DUDE YOU ROCK @mattboland thanks
CamperBot
@camperbot
Feb 24 2016 18:51
rbjr sends brownie points to @mattboland :sparkles: :thumbsup: :sparkles:
:star: 324 | @mattboland | http://www.freecodecamp.com/mattboland
Omran Abazid
@OmranAbazid
Feb 24 2016 18:52
@kapitolkoder Welcome, good luck
if you work hard and did not stop, im sure you will have what you want at the end.
Chris
@chrisdav6
Feb 24 2016 18:54
@kapitolkoder welcome man! good luck
Matthew Boland
@mattboland
Feb 24 2016 18:54
@rbjr i had the same problem with mine you're welcome
Mike Rious
@kapitolkoder
Feb 24 2016 18:54
Thanks @OmranAbazid @chrisdav6
CamperBot
@camperbot
Feb 24 2016 18:54
kapitolkoder sends brownie points to @omranabazid and @chrisdav6 :sparkles: :thumbsup: :sparkles:
:star: 199 | @omranabazid | http://www.freecodecamp.com/omranabazid
:star: 269 | @chrisdav6 | http://www.freecodecamp.com/chrisdav6
Chris
@chrisdav6
Feb 24 2016 18:58
too bad this site does not directly link to codepen. I'm finding it to be more valuble every day. Great platform for testing
nevermind, LOLs! just realized you can just paste the link!
So if you paste the codepen link, will it automatically create the frame window?
cool!!!!!
Ray
@rbjr
Feb 24 2016 19:01
@mattboland heh glad i'm not the only one.
Sujit Karki
@Swoozeki
Feb 24 2016 19:03
@chrisdav6 Welcome to the wonderful world of web dev
Matthew Boland
@mattboland
Feb 24 2016 19:05
@sean9 it looks like you can remove the second to last }; also, think about how you could construct that url. you can save items in variables and then concatenate the url like you would a string (remember to be careful about spaces)
Igor Šumonja
@igor-sumonja
Feb 24 2016 19:07
@igor-sumonja
quick stupid questiion, my brain stopped
http://codepen.io/igor-sumonja/pen/mPbbNy
why when field is clicked it moves
I have set margins to 0 and padding also...
Matthew Boland
@mattboland
Feb 24 2016 19:13
@sean9 say var insert = a "this is " + insert + " sentence" would concatenate to "this is a sentence"
Lanitta
@DivaWeb
Feb 24 2016 19:14
http://codepen.io/DivaWeb/pen/XXOdEX?editors=1100 let me know if pics are loading quickly please
Chris
@chrisdav6
Feb 24 2016 19:14
@igor-sumonja i was looking at your code and it doesnt look like you have your buttons wrapped in a .column class. Also you dont have your rows that are wrapped around your buttons wrapped in a .container class. Not sure if this will fix it, but that is what stood out to me
Igor Šumonja
@igor-sumonja
Feb 24 2016 19:15
@chrisdav6 will try now to adjust that
Chris
@chrisdav6
Feb 24 2016 19:16
Maybe something like this?
<div id="game" class="container">
<div class="row ">
<div class="col-md-6">
        <button id ="0" class="field"></button>
        <button id ="1" class="field"></button>
        <button id ="2" class="field"></button>
</div>
</div>
Igor Šumonja
@igor-sumonja
Feb 24 2016 19:18
nope
didn't help
Chris
@chrisdav6
Feb 24 2016 19:19
yeah i tried it too, i still think those classes should be wrapped using that method though.
bootstrap says that your .col-md classes always need to be wrapped by a .row class. And your .row classes always need to be wrapped by a .container class
Igor Šumonja
@igor-sumonja
Feb 24 2016 19:20
probably Bootstrap messing around , for example if I click all three in same row they got same height
Chris
@chrisdav6
Feb 24 2016 19:22
@DivaWeb loaded pretty quick for me
Lanitta
@DivaWeb
Feb 24 2016 19:22
@chrisdav6 hey thanks for taking the time. they were downloading pretty slow.
CamperBot
@camperbot
Feb 24 2016 19:22
divaweb sends brownie points to @chrisdav6 :sparkles: :thumbsup: :sparkles:
:star: 270 | @chrisdav6 | http://www.freecodecamp.com/chrisdav6
faraz
@silentarrowz
Feb 24 2016 19:23

Hi, I liked the idea about watching other bootstrap themes and took ideas and built a similar site for myself.
here's the link to the new site - http://codepen.io/silentarrowz/pen/eJqPjy
Now there are 3 problems I am facing :
1.My Image at the beginning of the site - when I slowly decrease the window size then my image gets smaller and then as I keep decreasing it even more, the image size becomes bigger again.

2.The paragraph below the image i.e After "Hi! I am Faraz.">
I want to display it like a paragraph below the image instead of a long line that goes from one end to the other. So, how do I accomplish that?

3.In the contact div lower down the page - I have made 2 columns - one for the h1 tag and the other for the twitter, github and linkedin buttons. I have put a solid white border around them so it's easier to make out what's wrong.
Please tell me how to make these 2 columns line up properly.

Best,
faraz

Lanitta
@DivaWeb
Feb 24 2016 19:25
@silentarrowz more than happy to take a look I know I spent some time to get all my stuff responsive correctly
faraz
@silentarrowz
Feb 24 2016 19:26
yeah,kindly do that. I'd like that @DivaWeb .
Chris
@chrisdav6
Feb 24 2016 19:28
@silentarrowz with regard to #2 on your list, you could put the h1 and p in its own row, then use a smaller col class. Centering gets tricky though
<div class="row">
<div class=.col-md-4"></div>
<div class="col-md-4">
<h1>Hi There</h1>
<p>I am a self taught...</p>
</div>
<div class=.col-md-4"></div>
</div>
Lanitta
@DivaWeb
Feb 24 2016 19:30
@silentarrowz I am unfamiliar with class="about container-fluid" what is the about for?
faraz
@silentarrowz
Feb 24 2016 19:30
@chrisdav6 yeah, it's the centering that I am not getting. to make it into a paragraph instead of a long line from one end to the other
@DivaWeb about is for me. so I know that this div is the about me section. that's all. and you already know about the container-fluid
Lanitta
@DivaWeb
Feb 24 2016 19:32
@silentarrowz yeah I just saw you were using it as an id. From my experiance I have found when I try to do things like that I don't always get the result I want. Try separating it
Chris
@chrisdav6
Feb 24 2016 19:34
@silentarrowz here is what i was thinking http://codepen.io/chrisdav6/pen/MygWOq
Lanitta
@DivaWeb
Feb 24 2016 19:35
@silentarrowz There are several ways that you can break down your text. You can use basic html5 <br> to giving it a size to making it a jumbotron
faraz
@silentarrowz
Feb 24 2016 19:36
@DivaWeb actually, I used to use id's earlier, but then I read somewhere that it's best to use id's only when you have to, so that's why I use it in class
Chris
@chrisdav6
Feb 24 2016 19:36
not sure my solution is correct in a responsive situation though
i would guess not, you shouldn't have to use empty columns to center a column
Lanitta
@DivaWeb
Feb 24 2016 19:38
@chrisdav6 checking out your code for the columns
@chrisdav6 oops sorry havn't made it that far yet
faraz
@silentarrowz
Feb 24 2016 19:40
@chrisdav6 well, it did solve the problem but it seems like a hack and not the right way to do things. not the best way to do things when learning though - but good to know a way I can use when nothing else is working
Chris
@chrisdav6
Feb 24 2016 19:40
@silentarrowz i agree
using your original code, you could just set the width on the p tag to 300px or so and give it a margin of 0 auto
.about p{
  font-size:20px;
  text-align:center;
  width: 300px;
  margin: 0 auto;
}
CamperBot
@camperbot
Feb 24 2016 19:42
you need to ask about @someone!
faraz
@silentarrowz
Feb 24 2016 19:45
@chrisdav6 ah, yes ! this does work. much better than the previous one
Chris
@chrisdav6
Feb 24 2016 19:45
thank you sir ;)
faraz
@silentarrowz
Feb 24 2016 19:46
@chrisdav6 hahaha. thanks to you
CamperBot
@camperbot
Feb 24 2016 19:46
silentarrowz sends brownie points to @chrisdav6 :sparkles: :thumbsup: :sparkles:
:star: 271 | @chrisdav6 | http://www.freecodecamp.com/chrisdav6
Chris
@chrisdav6
Feb 24 2016 19:46
if you use a % value rather than px value it will also make it responsive ;)
faraz
@silentarrowz
Feb 24 2016 19:49
yeah, one more thing @chrisdav6 . do you think using em is same as using percentage??
George
@gxenos
Feb 24 2016 19:51
This message was deleted
Jeff
@adzam5
Feb 24 2016 19:57
Anyone know any good free quote API's in JSON format? All the ones I have found so far are XML.
Andrew Boyle
@CThePants
Feb 24 2016 19:58
@adzam5 Try here: http://forismatic.com/en/api/
Jeff
@adzam5
Feb 24 2016 19:58
@CThePants Thanks!
CamperBot
@camperbot
Feb 24 2016 19:58
adzam5 sends brownie points to @cthepants :sparkles: :thumbsup: :sparkles:
:star: 301 | @cthepants | http://www.freecodecamp.com/cthepants
A-Alex-A
@A-Alex-A
Feb 24 2016 20:05
Hi! For the tribute page am I supposed to use css in html tags for padding?
Yusuf Ollaek
@yusufollaek
Feb 24 2016 20:16
Your p element should have the text "View more " (with a space after it). ???
trying to add "& n b s p ; " but not accept solution
?????????????????
Elgaoussi Hamza
@zer0rei
Feb 24 2016 20:21
This message was deleted
Chris
@chrisdav6
Feb 24 2016 20:22
@silentarrowz em is usually relative to a base font size. % would be relative to the parent container. In this case i think i would use %
Elgaoussi Hamza
@zer0rei
Feb 24 2016 20:25
Hi guys ! does anybody have an idea why in CodePen my page works in Editor View but not in the Full Page View
http://codepen.io/zer0rei/pen/dGxxGv
Jeff
@adzam5
Feb 24 2016 20:26
@zer0rei Try adding $(document).ready(function(){ to the top of your JS and }); at the bottom
Chris
@chrisdav6
Feb 24 2016 20:27
@adzam5 nice one man, that did it!
Elgaoussi Hamza
@zer0rei
Feb 24 2016 20:28
@adzam5 but I already have it, in the bottom after the functions declarations
Jeff
@adzam5
Feb 24 2016 20:31
@zer0rei I believe any JS you want loaded when the page loads needs to be within $(document).ready(function(){
Chris
@chrisdav6
Feb 24 2016 20:32
he is invoking a function at the bottom though calling all other functions with a document.ready call. Maybe its something to do with codepen?
Sorry i couldn't be more help.
Elgaoussi Hamza
@zer0rei
Feb 24 2016 20:34
@adzam5 yes but that's for the javascript that's being executed, those are just declarations, and i tried putting them inside too but no change !! it's weird because the code is working in the editor mode, yet not in the full page mode, there must be a difference!!
disjfa
@disjfa
Feb 24 2016 20:37
@zer0rei my editor says
```js
success: function(data) {
            var q = JSON.parse(data);
            $("#quote").html("<p>" + q.quote + "</p>");
            $("#cite").html("<p>- " + q.author + "</p>");
        };
success: function(data) {
            var q = JSON.parse(data);
            $("#quote").html("<p>" + q.quote + "</p>");
            $("#cite").html("<p>- " + q.author + "</p>");
        }
remove the ;
Elgaoussi Hamza
@zer0rei
Feb 24 2016 20:40
@disjfa solved it, thanks! what editor are you using ?
CamperBot
@camperbot
Feb 24 2016 20:40
zer0rei sends brownie points to @disjfa :sparkles: :thumbsup: :sparkles:
:star: 144 | @disjfa | http://www.freecodecamp.com/disjfa
A-Alex-A
@A-Alex-A
Feb 24 2016 20:41
here is what i've done so far http://codepen.io/A-Alex-A/full/ZWzzrJ/ I don't know how to place the photo with whit background.
disjfa
@disjfa
Feb 24 2016 20:41
phpstorm, but i think more, and free, editors do the same
Elgaoussi Hamza
@zer0rei
Feb 24 2016 20:48
@A-Alex-A they are putting the header and the photo inside a jumbotron (http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp)
but you don't need to do the same, try focusing of the responsive design, your page looks weird on small window widths.
Mike Morkes
@TheMorkDaddy
Feb 24 2016 20:49
Hi all. Been working on the Twitch list app. The data all comes in correctly, is styled correctly, but for some reason, when it builds the list, it seems to drop them in completely randomly. Not sure why it's not, at the very least, maintaining the order from the array. Can I get some insight on this? http://codepen.io/mikemorkes/pen/LGKaab?editors=0010
A-Alex-A
@A-Alex-A
Feb 24 2016 20:49
@zer0rei Thank you! What should I use for text blocks to get 'responsive' lokking page?
CamperBot
@camperbot
Feb 24 2016 20:49
a-alex-a sends brownie points to @zer0rei :sparkles: :thumbsup: :sparkles:
:star: 274 | @zer0rei | http://www.freecodecamp.com/zer0rei
John K.
@glarobats
Feb 24 2016 20:53

hi guys, got stuck in weather app, any hints on how move on after here?
I know I am talking to the server but I don't know how to "take" the data and put it in a variable.

$.getJSON('http://api.openweathermap.org/data/2.5/weather?&lat=37.9667&lon=23.7167&APPID=bae765b0cae4aad59634f5ded308c04d', function (data) {

});

Mike Morkes
@TheMorkDaddy
Feb 24 2016 20:55
@glarobats the URL will pull in an array with various pieces of data. For instance, one of the array elements is "name", which is the city name. You need to point your function which is grabbing the array from the api to that particular array element, and then drop it into an html element.
For instance, this line of javascript is placing the city and country into a particular html div with the ID of "city":
document.getElementById("city").innerHTML = result.name + ", " + result.sys.country;
in the case of the getJSON code you posted earlier, change out "result.name" for "data.name"
John K.
@glarobats
Feb 24 2016 20:58
thx will check it out!!!
I really hit a brick wall with json.
Mike Morkes
@TheMorkDaddy
Feb 24 2016 21:00
another tip: try pasting just the api URL into the web browser address bar. It will display the entire array of the city you've got it pointed to with those coordinates.
John K.
@glarobats
Feb 24 2016 21:01
did that already, saw the array and it blew my mind!!!
:)
Arend Groot Bleumink
@arendgb
Feb 24 2016 21:04
<script $(document).ready(function(){

        }); ></script>

The task is:
Create a script element making sure it is valid and has a closing tag.

Could someone tell me what I did wrong?

Mike Morkes
@TheMorkDaddy
Feb 24 2016 21:07
you need to close the bracket on your opening script tag
@arendgb see above
bitgrower
@bitgrower
Feb 24 2016 21:07
@arendgb -- your open & close tags both have to have both angle brackets
Mike Morkes
@TheMorkDaddy
Feb 24 2016 21:08
@arendgb if you're in codepen, however, you don't need to include the <script> tags
Elgaoussi Hamza
@zer0rei
Feb 24 2016 21:08
@A-Alex-A try reading a little bit on the grid system (http://getbootstrap.com/css/), experiment and you'll find the solution yourself, you're on the right track
Arend Groot Bleumink
@arendgb
Feb 24 2016 21:09
@TheMorkDaddy @bitgrower got it thanks
CamperBot
@camperbot
Feb 24 2016 21:09
arendgb sends brownie points to @themorkdaddy and @bitgrower :sparkles: :thumbsup: :sparkles:
:star: 631 | @bitgrower | http://www.freecodecamp.com/bitgrower
:star: 328 | @themorkdaddy | http://www.freecodecamp.com/themorkdaddy
Brett Felts
@brettfelts
Feb 24 2016 21:09
Hey, I'm working on the twitch.tv api, and my code is behaving strangely. My json call works, but when I try to display anything, it says undefined for each user
any ideas?
disjfa
@disjfa
Feb 24 2016 21:11
i is not a index number, it is the username. change data[i] to i
Omran Abazid
@OmranAbazid
Feb 24 2016 21:12
he knows that