These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Apr 2016
Keith Tsubouchi
@ktsubouchi
Apr 22 2016 01:08
Has anyone had recent problems with the Open Weather API?
Aryan
@aryandua
Apr 22 2016 01:14
Hello
I have started to use codepen and my first task is to create a similar code to some page , how will freecodecamp find about what i did in codepen?
Jan Dahl-Madsen
@jsdm
Apr 22 2016 01:17
@AndrewGHC YAY! worked perfectly!! thanks man, been trying to get that there for a full day...
CamperBot
@camperbot
Apr 22 2016 01:17
jsdm sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 350 | @andrewghc | http://www.freecodecamp.com/andrewghc
Aryan
@aryandua
Apr 22 2016 01:18
whats a user story?
Nathan
@natertot12
Apr 22 2016 01:19
@aryandua Its something that needs to be added in your project
Aryan
@aryandua
Apr 22 2016 01:20
what?
Nathan
@natertot12
Apr 22 2016 01:20
Example User Story: I can click a button to show me a new random quote. so this needs to be in your project if you are doing the random quote machine
Aryan
@aryandua
Apr 22 2016 01:21
ok
so follow user given direcctions
Frank XC
@tenkdayz
Apr 22 2016 01:21

why do people do this:

div#container{... }

instead of just

#container{...}
Aryan
@aryandua
Apr 22 2016 01:21
thx @natertot12
CamperBot
@camperbot
Apr 22 2016 01:21
aryandua sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 442 | @natertot12 | http://www.freecodecamp.com/natertot12
Nathan
@natertot12
Apr 22 2016 01:22
@aryandua Yeah just make your final project have each one done, its basically a requirement
No problem
Frank XC
@tenkdayz
Apr 22 2016 01:23
anyone?
Nathan
@natertot12
Apr 22 2016 01:23
@tenkdayz This specifies a #container inside a div
//it would  work for this
<div>
     <div id="contianer">
//it would not work for this
<div id="container">
@tenkdayz http://www.w3schools.com/css/css_combinators.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_element
Frank XC
@tenkdayz
Apr 22 2016 01:25
@natertot12 does it mean div with id of container or is it something like div > #container ?
Aryan
@aryandua
Apr 22 2016 01:25
how do you add a caption to an image?
Nathan
@natertot12
Apr 22 2016 01:26
@tenkdayz its a Descendant Selector, look at the first link I sent
@aryandua Do you mean just text under a picture?
Aryan
@aryandua
Apr 22 2016 01:29
yes
Frank XC
@tenkdayz
Apr 22 2016 01:30

@natertot12 I see . thanks! I've see people us something like

ul li{...} 
or
div p{..}

where there is no other li anywhere else.

CamperBot
@camperbot
Apr 22 2016 01:30
tenkdayz sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 443 | @natertot12 | http://www.freecodecamp.com/natertot12
Nathan
@natertot12
Apr 22 2016 01:30
@aryandua Like this?
<img src="#"/>
<p>Image caption</p>
Aryan
@aryandua
Apr 22 2016 01:32
Is that the only way??
Patrick
@pwcsquared
Apr 22 2016 01:32
hey guys, anyone here really good at explaining jsonp? I can't seem to get my api call to openweather to work anymore
Nathan
@natertot12
Apr 22 2016 01:32
No, its just kind of hard to tell what you want...
Aryan
@aryandua
Apr 22 2016 01:34
Ok thx @natertot12
thx @natertot12
CamperBot
@camperbot
Apr 22 2016 01:34
aryandua sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:warning: aryandua already gave natertot12 points
Frank XC
@tenkdayz
Apr 22 2016 01:34
@pwcsquared I can help
Nathan
@natertot12
Apr 22 2016 01:34
@aryandua Have you done all of the HTML5 and CSS challenges?
Patrick
@pwcsquared
Apr 22 2016 01:36
@tenkdayz here's the pen: https://codepen.io/pwcsquared/pen/MyWVGV
Travmatth
@Travmatth
Apr 22 2016 01:36
@pwcsquared jsonp is a hack to bypass cors protections, this is needed because your site is attempting to contact a resource that it doesn’t originate from. instead of jsonp i found it easier to just append a script to the DOM, said script will execute when it is loaded by the DOM
Patrick
@pwcsquared
Apr 22 2016 01:37
@Travmatth doesn't that also need jsonp to work though?
Travmatth
@Travmatth
Apr 22 2016 01:38
doesn’t waht also need jsonp?
Patrick
@pwcsquared
Apr 22 2016 01:38
@Travmatth the appended script, since in this case the request is originating from an https site and openweather is only http
Travmatth
@Travmatth
Apr 22 2016 01:39
this has nothing to do with http & https
Aryan
@aryandua
Apr 22 2016 01:39
how do you make an image fit to browser size?
Patrick
@pwcsquared
Apr 22 2016 01:39
@Travmatth the console error I'm getting says I have to make the request over https
Aryan
@aryandua
Apr 22 2016 01:40
how do you make an image fit to browser size?
Nathan
@natertot12
Apr 22 2016 01:40
@aryandua width: 100%;, It would be a lot easier to just google these questions
Patrick
@pwcsquared
Apr 22 2016 01:40
maybe I'm confusing two seperate issues
Aryan
@aryandua
Apr 22 2016 01:40
ok
Nathan
@natertot12
Apr 22 2016 01:41
@aryandua Start here http://www.w3schools.com/css/default.asp
Patrick
@pwcsquared
Apr 22 2016 01:43
@Travmatth how does the appended script get around the cors issue?
Travmatth
@Travmatth
Apr 22 2016 01:45
@pwcsquared ajax calls that are dynamically added to the DOM aren’t subject to CORS policy, i.e., when you append a javascript function to the DOM it gets evaluated at that point in time
@pwcsquared fwiw this is how i solved the zipline https://gist.github.com/Travmatth/577c8cebd5544caa632f454ec19fccd4
Patrick
@pwcsquared
Apr 22 2016 01:50
@Travmatth so if you run that in an appended script it works but not if it's in the .js file?
Islam Ibakaev
@dagman
Apr 22 2016 01:52
finally i have started my portfolio page and this is what i have done so far.
So what do u think guys? http://codepen.io/dagman/pen/WwKrgX
Nathan
@natertot12
Apr 22 2016 01:53
@dagman I know its a rough draft but instead of the purple you may want to use an image from here https://unsplash.com/ its completely free too
Just a suggestion
Travmatth
@Travmatth
Apr 22 2016 02:00
@pwcsquared wikipedia has a great page on CORS, i’d start with that. as i understand it, CORS prevents browsers from making requests upon sites whose responses don’t contain the appropriate headers. to get around this you either have to change the response headers (which you can’t do if you don’t run the site…), use jsonp to bypass the restriction, or bypass by defining your network request in it’s own script, and then appending the script to the dom. but you can’t have your page load with a normal ajax request to a site that doesn’t allow cross-origin-resource-sharing - if you include a script on your html page and this script requests another site, the browser will perform a preflight request and verify that the requested site is ok with being contacted in such a manner
Patrick
@pwcsquared
Apr 22 2016 02:04
@Travmatth I'm starting to get it, I think. Thanks for the help, looks like I got some reading up to do!
CamperBot
@camperbot
Apr 22 2016 02:04
pwcsquared sends brownie points to @travmatth :sparkles: :thumbsup: :sparkles:
:star: 287 | @travmatth | http://www.freecodecamp.com/travmatth
Nathan
@natertot12
Apr 22 2016 02:07
Can someone help me on my Tic Tac Toe? I have 2 problems, First after some time playing it doesn't always add the .pulsing animation to the computer play, and the second is after someone wins if you readjust the screen the winbox will overlap. http://codepen.io/natertot12/pen/PZOmRg?editors=0010
Jackson Bates
@JacksonBates
Apr 22 2016 02:08
@dagman @natertot12 nah, leave the purple :)... Everything should be purple today!
Nathan
@natertot12
Apr 22 2016 02:18
Figured out my first problem.
And my second problem is coming from my hopping animation
Jeff
@adzam5
Apr 22 2016 03:04

Can anyone tell me why this isn't working? console.log(values) returns an array, but console.log(high) returns NaN.

var value = $('.answers-q' + obj.id + ' input[name=v' + obj.id + ']').map(function(_, el) {
        return $(el).val();
    }).get();
    values = [];
    for (var j = 0; j < value.length; j++) {
        val = value[j];
        values.push(val);
    }
    var high = Math.max(values);
    total.push(high);
    console.log(values);
    console.log(high);
}

If I change the line after the for loop to val = parseInt(value[j]); high returns the first number in the array, which is not the high.

Correction. Changing the line mentioned above still returns NaN. Changing Math.max(values) to Math.max(parseInt(values)); returns the first number in the array
d wilder
@alhazen1
Apr 22 2016 03:30
@adzam5 Hi, There is some hints on MDN for using Math.max with array about half way down this page. [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max]
Hope this helps.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 03:33
This is very close to completion now so feedback on the aesthetic / any bugs you find with browsers etc would be appreciated, it's a portfolio page http://andrewghc.github.io/
Jeff
@adzam5
Apr 22 2016 03:37
@alhazen1 Thank you! I got it to work!
CamperBot
@camperbot
Apr 22 2016 03:37
adzam5 sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:star: 334 | @alhazen1 | http://www.freecodecamp.com/alhazen1
Torrence Cole
@trcwrx78
Apr 22 2016 03:40
Looks good @AndrewGHC . A couple things to look at is if you scroll down through then just scroll back to the top the navigation links fade into the background. Almost like they are :visited. The responsive nav is has similar issues if you just scroll back to the top vs. hitting the home button.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 03:43
@trcwrx78 The fade effect is an animation but it may look iffy, are you talking about the white text on the landing page?
@trcwrx78 Thanks for the feedback
CamperBot
@camperbot
Apr 22 2016 03:43
andrewghc sends brownie points to @trcwrx78 :sparkles: :thumbsup: :sparkles:
:star: 282 | @trcwrx78 | http://www.freecodecamp.com/trcwrx78
Jeff
@adzam5
Apr 22 2016 03:43
@AndrewGHC Very nice! It gets better every time you post a link!
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 03:45
@adzam5 Thanks, have been throwing this at the chat every 6 hours :smile: . Does help to have others' eyes.
CamperBot
@camperbot
Apr 22 2016 03:45
andrewghc sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 421 | @adzam5 | http://www.freecodecamp.com/adzam5
Torrence Cole
@trcwrx78
Apr 22 2016 03:45
@AndrewGHC Yes. For instance I clicked on your about and it took me to that section but instead of hitting home I scrolled back to the top. That is when I saw the text not changing back to white.
Jeff
@adzam5
Apr 22 2016 03:46
@trcwrx78 I saw the issue you are talking about, however after refreshing I am not able to replicate it again.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 03:48
@trcwrx78 Good spot, definitely a bug there. Will look into it, thanks again
CamperBot
@camperbot
Apr 22 2016 03:48
andrewghc sends brownie points to @trcwrx78 :sparkles: :thumbsup: :sparkles:
:warning: andrewghc already gave trcwrx78 points
Torrence Cole
@trcwrx78
Apr 22 2016 03:48
No prob. The site looks really good tho
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 03:49
Thanks
It looks simple but it's overkill in terms of libraries and code, but I learned a lot while making it
96street
@96street
Apr 22 2016 03:52
can someone help here. I'm trying to get the zzzzz and vvvvv div's to go right of the black boxes http://codepen.io/anon/pen/wGxoNQ, so i floated everything left but it's not working
Frank XC
@tenkdayz
Apr 22 2016 03:56
@96street float right?
Michael Karpinski
@karpimpski
Apr 22 2016 04:00
how can I take a string from my calculator (say my current input is 10+30) and convert that to a calculation?
96street
@96street
Apr 22 2016 04:01
one of them works when floated right but not the other @tenkdayz
why doesn't float:left work?
Frank XC
@tenkdayz
Apr 22 2016 04:02
@96street so you want those 2 on the same "column" correct ?
96street
@96street
Apr 22 2016 04:03
yes, both to the right of the black boxes @tenkdayz
Frank XC
@tenkdayz
Apr 22 2016 04:04
@96street make a div within that big white box. that div will contain both of those and float it right.
96street
@96street
Apr 22 2016 04:07
doesn't work http://codepen.io/anon/pen/wGxoNQ @tenkdayz
Frank XC
@tenkdayz
Apr 22 2016 04:09
@96street did you make space for it.. it has siblings floating left
96street
@96street
Apr 22 2016 04:11
yes i did
Frank XC
@tenkdayz
Apr 22 2016 04:11
@96street those slidecontainers have width of 100% but they dont cover the whole box.. is there another div there?
96street
@96street
Apr 22 2016 04:13
yeah their parent is .topSlider @tenkdayz
Frank XC
@tenkdayz
Apr 22 2016 04:16
@96street does topSlider have a sibling?
96street
@96street
Apr 22 2016 04:17
i got no idea
@tenkdayz
wait it's .topSlide not .topSlider
Frank XC
@tenkdayz
Apr 22 2016 04:19
@96street if you gitve toslider width of 65% it makes enough space for the new div
kuldeep
@Guru89
Apr 22 2016 05:33
my next project is wikipedia viewer but the hint given by FCC are somewhat difficult to digest. Please any one can help me with the link https://www.mediawiki.org/wiki/API:Main_page
what's we are trying to get from it.
Frank XC
@tenkdayz
Apr 22 2016 05:44
@Guru89 I know how that feels
kuldeep
@Guru89
Apr 22 2016 05:50
@tenkdayz Great thanks man. But do i need to know what's prop, rvprop etc things. is it necessary?
CamperBot
@camperbot
Apr 22 2016 05:50
guru89 sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 436 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Frank XC
@tenkdayz
Apr 22 2016 05:54
@Guru89 download jsonview extension to make the object easier to read
kuldeep
@Guru89
Apr 22 2016 05:55
@tenkdayz I'll do that. Thanks again
Kelvin Mungai
@munga4
Apr 22 2016 06:22
@camperbot Can i get a clue i need to start building a portfolioo
kirbyedy
@kirbyedy
Apr 22 2016 06:29
@munga4 search for some tutorials online
youtube
This message was deleted
Michael Karpinski
@karpimpski
Apr 22 2016 06:29
http://codepen.io/karpimpski/pen/dMjOQR
got all the functionality down for my calculator! I'd love some feedback (obviously gonna make it look better)
Samuel Cupidon
@Zerazera
Apr 22 2016 06:33
@karpimpski Your calculator doesn't validate input
For example I can write numbers like 00000000123.........4.5.6
Fernand
@Ferdyboy81
Apr 22 2016 06:34
Only add one class with each of your three selectors. <--- im not getting this ... plz help
$(document).ready(function() {
$("button").addClass("animated button")
$(".btn").addClass("animated shake")
$("#target1").addClass("animated btn-primary shake")
});
how do i add one class with each of my selectors
Michael Karpinski
@karpimpski
Apr 22 2016 06:36
@Zerazera I fixed the decimal problem, now the 0 problem
mvjkmr
@mvjkmr
Apr 22 2016 06:40
@karpimpski I can clik on the operators any number of times, and it does append. Something like 8++++++++2
Michael Karpinski
@karpimpski
Apr 22 2016 06:41
@Zerazera okay, the 2 things you pointed out are fixed
mvjkmr
@mvjkmr
Apr 22 2016 06:45
@Ferdyboy81 if you want to add a single class then you should not give spaces in the class name, must be something like this $("button").addClass("animatedbutton") . Is that what you were asking for?
Michael Karpinski
@karpimpski
Apr 22 2016 06:53
@mvjkmr getting there on solving the bug you foudn
buckshot307
@buckshot307
Apr 22 2016 06:53
wiki missing
CamperBot
@camperbot
Apr 22 2016 06:53

:point_right: algorithm missing letters [wiki]

Problem Explanation:

  • You will create a program that will find the missing letter from a string and add it. If there is not missing letter it will return undefined. There is currently no test case for it missing more than one letter, but if anything recursion can be implemented or a second or more calls to the same function as needed. Also the letters are always provided in order so there is no need to sort them.
:pencil: read more about algorithm missing letters on the FCC Wiki
Michael Karpinski
@karpimpski
Apr 22 2016 06:59
@mvjkmr I fixed your bug now. did you find any more?
Michael Karpinski
@karpimpski
Apr 22 2016 07:20
@mvjkmr @Zerazera thanks for your help!
CamperBot
@camperbot
Apr 22 2016 07:20
karpimpski sends brownie points to @mvjkmr and @zerazera :sparkles: :thumbsup: :sparkles:
:star: 136 | @mvjkmr | http://www.freecodecamp.com/mvjkmr
:star: 386 | @zerazera | http://www.freecodecamp.com/zerazera
Srinivasan
@kksrini89
Apr 22 2016 07:49
How we can include hyperlink within mailTo body?
Rada
@Radascript
Apr 22 2016 07:52

hey guys, does anyone know how to make it so that the box is pressed right against the svg polygon element?

http://codepen.io/RadaCodes/pen/grKegy?editors=1100

Rada
@Radascript
Apr 22 2016 08:08
guys plssss
Robert Uivarosi
@URobert
Apr 22 2016 08:18
@Radascript let me take a look... why don't you use bootstrap ?
Rada
@Radascript
Apr 22 2016 08:22
@URobert thanks. if you have advice for how to go about it with bootstrap, I'm ready to rework code if need be, I'm not too deep into it. I just thought this would be easier since I only need like 10 elements on the page
Robert Uivarosi
@URobert
Apr 22 2016 08:22
@Radascript sec, I`m working on it
swishk
@swishk
Apr 22 2016 08:25
@Radascript if you add this to .set
 .set{
  float: left;
}
buiphuking
@buiphuking
Apr 22 2016 08:26
hi guys, i do No repeats please,
is there anyway to get that number instead list permutations and count ?
swishk
@swishk
Apr 22 2016 08:26
@Radascript and make the width of
 .left-arrow{
  width: 100px;
}
That should push them against each other does that help?
Fridox
@deniz946
Apr 22 2016 08:29
Hello, im trying to do the weather app in fcc and im having a problem, im doing a api to openweather, im getting the data, but i don't know well how to go throu it
im just getting this
coord: [object Object] weather: [object Object] base: cmc stations main: [object Object] wind: [object Object] clouds: [object Object] dt: 1461309084 sys: [object Object] id: 2519405 name: Ciudad Jardín cod: 200
my codepen
swishk
@swishk
Apr 22 2016 08:37
@deniz946 you need to access that data the same as you would an array.
Robert Uivarosi
@URobert
Apr 22 2016 08:38
@Radascript uh, I'm a bit rusty, and I find it somewhat difficult to align that svg with the rest of the elements
Srinivasan
@kksrini89
Apr 22 2016 08:40
Guys, help please
How to include hyperlink within body of mailTo?
Rada
@Radascript
Apr 22 2016 08:41
@URobert that's alright, thanks for taking a look. @swishk thanks, that did the trick
CamperBot
@camperbot
Apr 22 2016 08:41
radascript sends brownie points to @urobert and @swishk :sparkles: :thumbsup: :sparkles:
:star: 813 | @urobert | http://www.freecodecamp.com/urobert
:star: 286 | @swishk | http://www.freecodecamp.com/swishk
kirbyedy
@kirbyedy
Apr 22 2016 08:43
@Radascript stupid question but... why are you using svg instead of the font awesome ?
there is an icon for that
I think its caret
swishk
@swishk
Apr 22 2016 08:44
@Radascript I find adding something like border: 1px solid red; to things like that helps me see whats going on. just a trick that might be helpful
kirbyedy
@kirbyedy
Apr 22 2016 08:44
caret-left caret right... something like that
swishk
@swishk
Apr 22 2016 08:44
yeah ^^^^ ?
swishk
@swishk
Apr 22 2016 08:48
@deniz946 does that make sense? Dot notation, something like json.main.temp
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 22 2016 09:03
any one know news feed free api
?
Samuel Cupidon
@Zerazera
Apr 22 2016 09:08
Hi all, looking for feedback on my calculator. http://codepen.io/Zeratul/full/BKVKXe/
Robert Uivarosi
@URobert
Apr 22 2016 09:09
@Radascript still around ?
@Radascript Whenever you see this, it's far away from perfect but here is another approach for what I think you wanted to obtain:
HTML 
<div class = "container-fluid">
     <div class="text-center">

    <div class="col-md-12">
      <svg><polygon points="60,50 100,70 100,20"/></svg>

      <div class="set sprint">
        <div class="inner title">Sprint Time</div>
        <div class="inner" id="sprintTime">00:30</div>
      </div>


      <div class="set rest">
        <div class="inner title">Rest Time</div>
        <div class="inner" id="restTime">01:00</div>
      </div>

      <div class="set num">
        <div class="inner title">Sprints</div>
        <div class="inner" id="numSprints">10</div>
      </div>

       </div> <!-- end of col-12-->    
  </div>  <!-- end of text center -->      
  </div> <!-- end of container-fluid -->      


  <div id="timer"></div>

CSS

.set{
  display: inline-block;
  border: solid grey;
  padding: 5px;
  position:relative;
  top:-40px;
}

svg{
  margin-top:50px;
  display: inline-block;
  max-height:100px;
  max-width:105px
}
@Radascript Happy coding !
Chad Kreutzer
@ChadKreutzer
Apr 22 2016 09:22
What am I doing wrong here? the idea is for the div to fade in at page load and then fade out after a set amount of time:
$("#testimony").addClass("splash").fadeIn(slow);
    setTimeout(function(){
         $("#testimony").fadeOut(slow, function(){
              (this).removeClass("splash");
         });
    }, 1000);
RJsauce
@RJsauce
Apr 22 2016 09:23
Hey everyone! I can't seem to figure out why my Contact header2 doesn't display. Can you guys help? http://codepen.io/rjsauce/full/MyXRwr/
CHRISTY ALBY
@christyalby
Apr 22 2016 10:01
How to change bootstrap navbar link color based on position on page?
CHRISTY ALBY
@christyalby
Apr 22 2016 10:09
code.JPG
Chad Kreutzer
@ChadKreutzer
Apr 22 2016 10:31
This message was deleted
or perhaps the question should be: why isn't the div fitting the pic.
V Arun Kumar
@arunvkumr
Apr 22 2016 10:38
@RJsauce position: absolute of portfolio is messing the contact header h1.
Davide
@DavOnGit
Apr 22 2016 11:26
@christyalby javascript: for example u could use windows.onscroll metod event handler and then use the scrollTop property....
Ankur sharma
@ankur1163
Apr 22 2016 11:29
anybody can help me
var myMusic = [
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [ 
      "CS", 
      "8T", 
      "LP" ],
    "gold": true
  }
  // Add record here
  {
    "artist":"ank",
    "title":"ankw",
    "release_year":1982,
    "formats":[
      "cs",
      "8t",
      "LP"
    ],
  }
];
there is error in artist ank line and one line above it
Samson Alajede
@ajesamson
Apr 22 2016 11:34
@ankur1163 "gold": true is missing
if not required
the remove the comma at the back of your formats []
@ankur1163 also each object should be separated with comma
a comma before the add record here comment
Ankur sharma
@ankur1163
Apr 22 2016 11:41
thanks @ajesamson
CamperBot
@camperbot
Apr 22 2016 11:41
ankur1163 sends brownie points to @ajesamson :sparkles: :thumbsup: :sparkles:
:star: 312 | @ajesamson | http://www.freecodecamp.com/ajesamson
Ankur sharma
@ankur1163
Apr 22 2016 11:42
can someone tell me when to use . and when to use []
var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
}
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"
ourStorage.cabinet["top drawer"].folder2; // "secrets"
Samson Alajede
@ajesamson
Apr 22 2016 11:44
its also a good practice to leave no space between your key
because you cannot use . operator with dt
as in top drawer above
Ankur sharma
@ankur1163
Apr 22 2016 11:45
whats dt @ajesamson
Samson Alajede
@ajesamson
Apr 22 2016 11:46
top drawer key i mean
better still use underscore -> top_drawer
Ankur sharma
@ankur1163
Apr 22 2016 11:46
cant we write ourStorage["cabinet"]["top drawer"]["folder2"]
Samson Alajede
@ajesamson
Apr 22 2016 11:47
yes we can
Ankur sharma
@ankur1163
Apr 22 2016 11:47
above code will work?
Samson Alajede
@ajesamson
Apr 22 2016 11:47
it should but let me confirm
Ankur sharma
@ankur1163
Apr 22 2016 11:48
ok
i used []
but it says use dot
and thats what confusing me
when to use dot and when to use brackets
Samson Alajede
@ajesamson
Apr 22 2016 11:49
it worked on codepen
if you want to use dot
Ankur sharma
@ankur1163
Apr 22 2016 11:50
cool
Samson Alajede
@ajesamson
Apr 22 2016 11:50
then just add underscore between top and drawer
Ankur sharma
@ankur1163
Apr 22 2016 11:50
ok
because dot cant access keys with spaces
correct?
Samson Alajede
@ajesamson
Apr 22 2016 11:51
yes
thats it
Ankur sharma
@ankur1163
Apr 22 2016 11:51
cool thanks @ajesamson
CamperBot
@camperbot
Apr 22 2016 11:51
ankur1163 sends brownie points to @ajesamson :sparkles: :thumbsup: :sparkles:
:warning: ankur1163 already gave ajesamson points
Samson Alajede
@ajesamson
Apr 22 2016 11:51
you’re welcome
pepperspray
@pepperspray
Apr 22 2016 11:51
hey guys,
i'm stuck with the first challenge. can someone tell me why my bootstrap col isn't working?
http://codepen.io/msnr/pen/MyBogY
Samson Alajede
@ajesamson
Apr 22 2016 11:53
@pepperspray its working
you only have one col
with an offset of 2
what layout do you expect
???
or probably check you nesting
may be you place some element where you do not want them to be
pepperspray
@pepperspray
Apr 22 2016 11:56
i was expecting more space on the left and right
lcthornhill
@lsrus
Apr 22 2016 11:56
@pepperspray you need <div class="col-md-8 col-md-offset-2"> instead of <div="col-md-8 col-md-offset-2"
Samson Alajede
@ajesamson
Apr 22 2016 11:57
@lsrus yes you’re right
i did not see that
pepperspray
@pepperspray
Apr 22 2016 11:57
daaamn you're so right.... i just overlooked it!
thank you, @lsrus
CamperBot
@camperbot
Apr 22 2016 11:57
pepperspray sends brownie points to @lsrus :sparkles: :thumbsup: :sparkles:
:star: 386 | @lsrus | http://www.freecodecamp.com/lsrus
Samson Alajede
@ajesamson
Apr 22 2016 11:57
but at that it is still same
lcthornhill
@lsrus
Apr 22 2016 11:57
@ajesamson @pepperspray :+1:
dryyyyy
@dryyyyy
Apr 22 2016 12:24
Hello everyone, can somebody tell me what's wrong with my code?
http://codepen.io/Dryyyyy/pen/bpKBbK?editors=0011
Coira Ellison
@Coira
Apr 22 2016 12:26
@dryyyyy check your console. this is the call you're making with getJSON "http://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=cc8ff76633686322c331fb7d2c436482"
what are the values of lat and lon?
pepperspray
@pepperspray
Apr 22 2016 12:26
didyou set your vars?
dryyyyy
@dryyyyy
Apr 22 2016 12:29
@Coira lat and long vars are defined on lines 21 and 22
Coira Ellison
@Coira
Apr 22 2016 12:29
but you've added it to var geo before you set them
pepperspray
@pepperspray
Apr 22 2016 12:30
  var geo = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=cc8ff76633686322c331fb7d2c436482';
try that in line 23
  • without the var
dryyyyy
@dryyyyy
Apr 22 2016 12:32
@pepperspray not working
kirbyedy
@kirbyedy
Apr 22 2016 12:33
Screen Shot 2016-04-22 at 15.32.57.png
funny :)
dryyyyy
@dryyyyy
Apr 22 2016 12:35
there is something wrong with the location :)
@kirbyedy anyway, how did you get to that point?
kirbyedy
@kirbyedy
Apr 22 2016 12:36
opened your codepen in firefox :)
location is correct for me
pepperspray
@pepperspray
Apr 22 2016 12:37
how do i run this code correctly in codepen? the console doesnt log my anything...
kirbyedy
@kirbyedy
Apr 22 2016 12:39
btw if you are trying to run this in chrome 50, forget it, wont work :)
my weather app also works in firefox, but not in chrome anymore, since the stupid computer upgraded the chrome
dryyyyy
@dryyyyy
Apr 22 2016 12:40
I just ran it today, then made some fixes and that's how it looks now
kirbyedy
@kirbyedy
Apr 22 2016 12:40
in chrome 49 works
dryyyyy
@dryyyyy
Apr 22 2016 12:41
In FF i get the same white backgound with no data, seems like it can't fetch the data from the json.
kirbyedy
@kirbyedy
Apr 22 2016 12:41
in safari does not work
just tried it
dryyyyy
@dryyyyy
Apr 22 2016 12:43
btw it does not even asks me to share the location.
Coira Ellison
@Coira
Apr 22 2016 12:44
@dryyyyy you've got all the calls in the wrong order. you call getJSON, then you call geolocation. so you're calling getJSON before you've got the user's coords
kirbyedy
@kirbyedy
Apr 22 2016 12:44
chrome 50
Screen Shot 2016-04-22 at 15.44.23.png
cmf89
@cmf89
Apr 22 2016 12:45
Chrome 50 forbids geolocation on non-HTTPS sites
kirbyedy
@kirbyedy
Apr 22 2016 12:46
yep
Coira Ellison
@Coira
Apr 22 2016 12:46
oh, i haven't updated chrome, think i'll hold off on that then
dryyyyy
@dryyyyy
Apr 22 2016 12:51
@Coira got it, thanks a lot.
CamperBot
@camperbot
Apr 22 2016 12:51
dryyyyy sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
:star: 556 | @coira | http://www.freecodecamp.com/coira
Coira Ellison
@Coira
Apr 22 2016 12:52
great!
if you haven't noticed, i removed the if statement because i couldn't see where to match the brackets up. add it back as needed
dryyyyy
@dryyyyy
Apr 22 2016 12:53
yep, thx
Rex Smith Jr.
@rsmith731
Apr 22 2016 13:15
can anyone help with a localhost:4200
alpox
@alpox
Apr 22 2016 13:32
@rsmith731 With a localhost? :D What is the matter?
Jas K
@jask84
Apr 22 2016 13:33

Hi, could anyone tell me if there is a syntax error (or would you require more info) in the following?

numArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var userChoice = $(this).attr('data-name');

 var userChoiceIndex = numArray.indexOf(userChoice);

The issue I am finding is that the the userChoice variable logs correctly to the console, but then when I try to use the .indexOf (i.e. the userChoiceIndex), it gives a value of '-1', although the userChoice is definitely in the numArray. Any ideas?

alpox
@alpox
Apr 22 2016 13:34
@jask84 What type is "userChoice" of?
@jask84 Is it a number, a string...
Jas K
@jask84
Apr 22 2016 13:34
@alpox a number...
alpox
@alpox
Apr 22 2016 13:34
@jask84 What do you get when you log it?
Jas K
@jask84
Apr 22 2016 13:34
@alpox needs to be a string?
alpox
@alpox
Apr 22 2016 13:34
@jask84 Nope
Jas K
@jask84
Apr 22 2016 13:35
@alpox when i log it, i get a number
alpox
@alpox
Apr 22 2016 13:35
Do you have a codepen or something?
alpox
@alpox
Apr 22 2016 13:36
Btw. with this setup and you get a number you could also just do
var userChoiceIndex = userChoice - 1; :-)
kirbyedy
@kirbyedy
Apr 22 2016 13:36
arrays are 0 based isnt it ?
so when the user selects number 3 for example, it will log number 3, but the index of the number 3 is actually 2... no ?
Jas K
@jask84
Apr 22 2016 13:38
@alpox but if my numArray length reduces via splicing each time a box is clicked, then I thought I wouldn't always be able to use var userChoiceIndex = userChoice - 1; . Correct?
Rex Smith Jr.
@rsmith731
Apr 22 2016 13:38
@alpox trying to run ember on my local host but some how its not showing anymore
alpox
@alpox
Apr 22 2016 13:38
@jask84 Hehe you were bit wrong. you get a string. Thats the problem
@jask84 Yeah i don't know what you want to do with it then. So you're right
@jask84 but you have a string. Like: "6"
Jas K
@jask84
Apr 22 2016 13:39
@alpox oh, it is a string? I just realised the number was a different color in the console...
so what would I need to do in order to make it work in the .indexOf?
alpox
@alpox
Apr 22 2016 13:41
@jask84
var userChoice = $(this).attr('data-name');
userChoice = parseInt(userChoice);
Jas K
@jask84
Apr 22 2016 13:41
@alpox make the numbers into strings in the numArray? or use parseInt
@alpox perfect. thanks!
CamperBot
@camperbot
Apr 22 2016 13:41
jask84 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 584 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 22 2016 13:42
@jask84 Np. But you have some other problems with your code still. (With splicing or whatever, i didnt look closely) So you sometimes still get -1 because the number you get is not in the array anymore
Jas K
@jask84
Apr 22 2016 13:43
@alpox yeah it needs work. I am just wondering why that is occurring now... I will look into it
alpox
@alpox
Apr 22 2016 13:43
Okay :D
Jas K
@jask84
Apr 22 2016 13:44
@alpox may be to do with the computer choice - need to use parseInt on that too
thanks again
alpox
@alpox
Apr 22 2016 13:46
@rsmith731 I cant help much there since i cannot test anything, sry ^^
Rex Smith Jr.
@rsmith731
Apr 22 2016 13:47
@alpox ok its fine :)
unless you have screen hero
alpox
@alpox
Apr 22 2016 13:53
@rsmith731 Nope :-)
Rex Smith Jr.
@rsmith731
Apr 22 2016 13:53
@alpox ok :)
Pavel Sokolov
@nevaljawko
Apr 22 2016 14:00
hi! I started to make a portfolio (130 lesson), and I stuck little bit... There are many things I don't know yet. Where do I better begin?
alpox
@alpox
Apr 22 2016 14:09
@nevaljawko Take a close look on Bootstrap
Pavel Sokolov
@nevaljawko
Apr 22 2016 14:14
@alpox ok, thank you
CamperBot
@camperbot
Apr 22 2016 14:14
nevaljawko sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 585 | @alpox | http://www.freecodecamp.com/alpox
Bruce Young
@mutantspore
Apr 22 2016 14:17
@nevaljawko Example code for the navigation (menu) bar is on the Bootstrap site. http://getbootstrap.com/components/#navbar
The sections of your site can each be seperate DIVs and each DIV can have it’s own background image. Take some time to look at portfolio sites on the web. Make some notes on paper as to what you want to say and how you want to present yourself.
Pavel Sokolov
@nevaljawko
Apr 22 2016 14:17
@mutantspore great! thank you a lot!
CamperBot
@camperbot
Apr 22 2016 14:17
nevaljawko sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1439 | @mutantspore | http://www.freecodecamp.com/mutantspore
Martialis39
@Martialis39
Apr 22 2016 14:25
Hellooo! All!
Bruce Young
@mutantspore
Apr 22 2016 14:25
all just stepped out for a minute
Martialis39
@Martialis39
Apr 22 2016 14:25
I feel a bit stuck with the intermediate projects, can anyone recommend any other tutorial for slightly more complicated APIs such as wikipedia?
Thats why I am yelling.
Hoping to still catch him
Matthew Boland
@mattboland
Apr 22 2016 14:26
@mutantspore zing!
Bruce Young
@mutantspore
Apr 22 2016 14:28
@Martialis39 Here’s something that might help with API’s
https://www.youtube.com/watch?v=obaSQBBWZLk
The Wikipedia api is just plain annoying, big and the docs aren’t that good. Just persevere .
@Martialis39 I used their sandbox site until I had what I wanted. though I see that even that has changed since I did it.
Martialis39
@Martialis39
Apr 22 2016 14:30
@mutantspore Thank you sir! Seems just what I wanted.
CamperBot
@camperbot
Apr 22 2016 14:30
martialis39 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1440 | @mutantspore | http://www.freecodecamp.com/mutantspore
Martialis39
@Martialis39
Apr 22 2016 14:30
I dont think Im even at the point to play around with it
I had so much trouble with my weather app
So, pardon the newb and badly worded question
but is it correct that I cannot return a value from .getJSON?
I tried to assign the data parameter to a variable but to no avail, it was undefined outside function scope
Robert Friedman
@robfr77
Apr 22 2016 14:32
On my pomodoro clock when i use clearInterval() it makes the interval run twice as fast instead of stopping it. Anyone ?
Bruce Young
@mutantspore
Apr 22 2016 14:32
@Martialis39 as things like .getJSON are asynchronous you need to access their returned data from within the .getjson call or from a function called from within. That video wil explain it and give you other options.
@robfr77 does your clearInterval reference the original setInterval?
Martialis39
@Martialis39
Apr 22 2016 14:34
@mutantspore Once again, thank you very much!
CamperBot
@camperbot
Apr 22 2016 14:34
martialis39 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: martialis39 already gave mutantspore points
Robert Friedman
@robfr77
Apr 22 2016 14:34
yes, right?
//interval for countdown
function interval() {
  setInterval(countdown, 1000);
} 
 //stop interval
  function stopInterval() {
    clearInterval(interval);
  }
Bruce Young
@mutantspore
Apr 22 2016 14:35

@robfr77 like this

intervalID = setInterval(countdown, 1000);

then later
clearInterval(intervalID);
you are just calling the setInterval again
Robert Friedman
@robfr77
Apr 22 2016 14:39
I am calling stopInterval, but stopInterval all it should do is clearInterval(intervalID)...I don't get it :/
Bruce Young
@mutantspore
Apr 22 2016 14:40
@robfr77 from the clearInterval docs…
intervalID is the identifier of the repeated action you want to cancel. This ID is returned from setInterval().
Robert Friedman
@robfr77
Apr 22 2016 14:40
ok @mutantspore thanks
CamperBot
@camperbot
Apr 22 2016 14:40
robfr77 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1441 | @mutantspore | http://www.freecodecamp.com/mutantspore
Galen
@galencorey
Apr 22 2016 14:48
@Martialis39 Wikipedia's api is intimidating at first, but once you understand it it's great. For the project I recommend spending some time with this page in particular https://www.mediawiki.org/wiki/API:Search, play around with it until you get the right URL that gives you the information you want. You can see the JSON that will come from it by just opening a new tab and trying different URLS. I also found it helpful to use a JSON reader to simplify things a bt, like this one http://jsonviewer.stack.hu/
Galen
@galencorey
Apr 22 2016 15:02
Hello! I am working on the TwitchTV project, and I want to do a getJSON request multiple times to retrieve information from multiple URLs. Naturally I put my request in a for loop, which isn't really working out for me, which seems to be expected based on what I've read online. It seems like I have to use a queue for this, but I'm not very familiar with queues. Does anyone have advice here?
$(document).ready(function() {
  var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "MedryBW"];
  var stati = [];
  for (var i = 0; i < channels.length; i++) {
    $('.centerDiv').append('<div class=\'subDiv\'><h3>' + channels[i] + '</h3></div>');
    $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?', function(data) {
      if (data.error == 'Not Found') {
        stati.push('User Not Found');
      } else if (data.stream == null) {
        stati.push('Offline');
      } else {
        stati.push('Online');
      }
      console.log(stati);
    });
  }
});
Bruce Young
@mutantspore
Apr 22 2016 15:11
@galenderailin .forEach
Juwdohr
@Juwdohr
Apr 22 2016 15:12
@galenderailin Had the same issue can't have the .getJSON in a for loop. had to call a funtion that does all that.
Bruce Young
@mutantspore
Apr 22 2016 15:12
channels.forEach(function (user) { … }
Juwdohr
@Juwdohr
Apr 22 2016 15:13

Doing the Twitch.tv app myself and can't seem to get my Search function to work. Any Help???

function searchUsers() {
  $(".user").css("display", "none");
  $(".status").css("display", "none");
  var input = $(this).val();

  for (var index = 0; index < streamers.length; index++) {
    if (streamers.indexOf(input))
  }

}

Tried various ways of searching. Trying to search through the array of users.

Jordan Carney
@jordan-carney
Apr 22 2016 15:14
Hey guys, I need help understanding the difference in how .ajax and .getJSON utilize callback functions. I set up the .ajax method here and it works as expected: http://codepen.io/subscap/pen/YqjqPG?editors=0010 however when trying to use .getJSON in the same style, it doesn't work??? http://codepen.io/subscap/pen/YqjxMw?editors=0010
Bruce Young
@mutantspore
Apr 22 2016 15:15
@Subscap you’ll need a callback
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=changeQuote&callback=?”);
Jordan Carney
@jordan-carney
Apr 22 2016 15:17
Hmm... i thought the parameter _jsonp handled the callback (doc on API here: http://quotesondesign.com/api-v4-0/)
Bruce Young
@mutantspore
Apr 22 2016 15:18
@Subscap at the bottom of that page in the codepen example
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>&mdash; " + a[0].title + "</p>")
});
Jordan Carney
@jordan-carney
Apr 22 2016 15:18
@mutantspore if you open the .ajax pen in it's own tab it works (not sure why the embed isn't working)
Islam Ibakaev
@dagman
Apr 22 2016 15:18
is there a way to find the most popular portfolio page made by freecodecampers?
Bruce Young
@mutantspore
Apr 22 2016 15:19
@Subscap yes the ajax worked fine as you have jsonp. and the getjson works fine as I have shown. in my snippet and the bigger piece of code from their site
Jordan Carney
@jordan-carney
Apr 22 2016 15:21
@mutantspore I don't think I'm connecting the dots on why the callback= parameter must be added to the .getJSON method vs the .ajax method which doesn't appear to require it?
Bruce Young
@mutantspore
Apr 22 2016 15:22
the .ajax dataType = jsonp is the equivalent to the callback in getjson
this bit dataType: ‘jsonp'
@dagman I think FCC has a list of codePen sites for various FCC projects.
Dardan Demiri
@dardandemiri
Apr 22 2016 15:25
@dagman
Because everyone is posting in codepen, if you search for Portfolio and rank them by Most Popular you will get this results:
http://codepen.io/search/pens?q=portfolio&limit=all&type=type-pens
Order results by: Popularity
Jordan Carney
@jordan-carney
Apr 22 2016 15:26

@mutantspore so .getJSON actually looks for "callback" as a parameter in order to change datatype to jsonp? quote from jquery docs: "JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details."

Bruce Young
@mutantspore
Apr 22 2016 15:28
well yes, but of course it doesn’t have to be jsonp as it will depend on how the api server is setup. It may not require a callback at all. For example the Open Weather Map API doesn’t need it. @Subscap
Jordan Carney
@jordan-carney
Apr 22 2016 15:30
@mutantspore I think my lightbulb is starting to turn on. For .getJSON - in the cases where we know the datatype is jsonp we need to include the callback parameter in the url?
Bruce Young
@mutantspore
Apr 22 2016 15:32
@Subscap yes… but as you said you’ll have to check the particular api docs to see what they require. &callback=? works fine for most but some may be particular.
Jordan Carney
@jordan-carney
Apr 22 2016 15:32
@mutantspore thank you so much for the help
CamperBot
@camperbot
Apr 22 2016 15:32
subscap sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1442 | @mutantspore | http://www.freecodecamp.com/mutantspore
Jordan Carney
@jordan-carney
Apr 22 2016 15:33
@mutantspore my light bulb is on!
Bruce Young
@mutantspore
Apr 22 2016 15:33
:)
Islam Ibakaev
@dagman
Apr 22 2016 15:38
@dardandemiri you are awesome thx!
CamperBot
@camperbot
Apr 22 2016 15:38
dagman sends brownie points to @dardandemiri :sparkles: :thumbsup: :sparkles:
:star: 353 | @dardandemiri | http://www.freecodecamp.com/dardandemiri
Jas K
@jask84
Apr 22 2016 15:43
Hi. Wondering if someone can take a quick look at this. I am on the Tic Tac Toe project and just getting the first bit sorted out. Been looking at the console for hours now lol and can't figure out what is going on. My code seems to allow a computer turn followed by a user turn, then another computer turn followed by a user turn. But then on the third 'iteration', the computer seems to get 2 turns for some reason?! It also shows a '-1' when using indexOf on this iteration for some reason I cannot determine. http://codepen.io/jask/pen/grjGoo?editors=0010
Ronique Ricketts
@RoniqueRicketts
Apr 22 2016 15:43
Hello Everyone. I am currently on my frontend courses and I am so excited.
Zubair Ali
@03aliz
Apr 22 2016 15:47
Hi guys i'm stuck on the twitch api , I want to add the word "online" to a div depending on wether the user is online or offline. I've made two JSON calls but there is nothing happening. here is my code
$(document).ready(function() {
  var apiURL;
  var streamURL;

  var channelArray = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "comster404", "brunofin", "monstercat", "OgamingSC2"] //array of streamers

  for (var i = 0; i < channelArray.length; i++) {

    apiURL = " https://api.twitch.tv/kraken/channels/" + channelArray[i] + "?callback=?";
    streamURL = " https://api.twitch.tv/kraken/streams/" + channelArray[i] + "?callback=?";

    $.getJSON(apiURL, function(data) {

      var logoPic = data.logo;
      var info;
      var name = data.name;
      var status = data.status;
      var link = data.url;
      var streamers;
      if (logoPic === null) {
        logoPic = " https://pixabay.com/static/uploads/photo/2016/04/16/10/33/icon-1332777__180.png";
      } // if no logo pic then replace with this

      if (status === null) {
        status = "Offline";
      }

      if (status == 422) { // if account is closed
        status = "Account Closed";
        logoPic = "https://pixabay.com/static/uploads/photo/2016/04/16/10/33/icon-1332777__180.png";
        var nameArr = data.message.split(" "); //name was undefined so had to split message into array and extract channel name from array.
        name = nameArr[1].replace(/['"]+/g, ''); //used regex to remove single quotes.

      }
      var output = '<div class="' + 'streams">' + '<img src="' + logoPic + '"/>' + '<a href="' + link + '" target=_blank>' + name + '</a>' +
        '<p>' +
        status +
        '</p>' +
        '</div>'

      $("#wrapper").append(output);

      /*need to add the other api data like logos etc to test, then need to figure out how to do the online/offline thing and then need to style data etc...*/

    });

    $.getJSON(streamURL, function(data2) {
      if (data2.stream !== null) {
        (".streams").append("online");
      }
    });

  };

});
Bruce Young
@mutantspore
Apr 22 2016 15:50
@03aliz $(".streams").append("online”);
you left off the $
though it may not be giving you what you wanted anyway
Zubair Ali
@03aliz
Apr 22 2016 15:52
yeh its saying all users are online
Bruce Young
@mutantspore
Apr 22 2016 15:52
@03aliz yes use .forEach rather than your for loop
and teh second api call will need to be within the first
.. maybe already.. just trying to follow it all lol
Zubair Ali
@03aliz
Apr 22 2016 15:54
thanks I'll try now
Juwdohr
@Juwdohr
Apr 22 2016 16:01
Hey guys trying to do a search for the Twitch TV app, can't seem to get it to work any Ideas?
Bruce Young
@mutantspore
Apr 22 2016 16:05
@Juwdohr Hi, I can’t see where the current user stories require a search. I know in the past it did and I just made mine search my users list rather than all of the users in Twitch .
Juwdohr
@Juwdohr
Apr 22 2016 16:06
@mutantspore just trying to search my user list not all of the users in Twitch.
Bruce Young
@mutantspore
Apr 22 2016 16:06
the audio says “search within them” ..
ok
@Juwdohr feel free to look at mine then. Down near the end of the code. I have my returned data in an array called twitchUsersData
http://codepen.io/MutantSpore/pen/NqOOZw?editors=1010
João Alves
@JADSN
Apr 22 2016 16:10
I don't understand how to use Wikipedia API, someone can explain me
Yaroslav
@YVeselovskyi
Apr 22 2016 16:14
Hello :) Who can help me with canvas?)
Nathan
@natertot12
Apr 22 2016 16:20
@JADSN Have you seen this page yet? https://www.mediawiki.org/wiki/API:Main_page
What's the best way to show my github projects on my portfolio? Should I use <iframe>? http://codepen.io/natertot12/full/zvKMBx?editors=0010
Clem
@ctataru
Apr 22 2016 16:38
is there a way to add horizontal and vertical lines to my project that i can use as rulers to line up the arrows here?
http://codepen.io/wise/pen/PNBopg?editors=1100
Jeff
@adzam5
Apr 22 2016 16:47
@ctataru What browser are you using? The Web Developer extension in Chrome has an option to add guide lines to the page
Clem
@ctataru
Apr 22 2016 16:48
@adzam5 ah cool! i'll download it now. thanks
CamperBot
@camperbot
Apr 22 2016 16:48
ctataru sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 422 | @adzam5 | http://www.freecodecamp.com/adzam5
Matthew Boland
@mattboland
Apr 22 2016 16:58
can someone help me think through my countDown function? I am having trouble understanding how to use .setInterval http://codepen.io/MattBoland/pen/VaXPYN?editors=0010
Ken Haduch
@khaduch
Apr 22 2016 17:16
@mattboland - I'm taking a look, unless someone else beats me to it. But one thing I noticed - you should take the <body> tags out of the HTML panel. CodePen puts those in automatically.

@mattboland - one thing that you have to do (and I haven't tried running this to make sure that you do have this problem) is that when you set up setInterval, you get a return value that you can use to later stop the interval time. It doesn't look like you are saving that. Also, you do not need to be using the Date object and functions. That must just get confusing! But if you have it working, that's good.

And I'm trying to adjust the times, and that doesn't seem to be working? And the clock doesn't start... maybe that's where you need help?

Ken Haduch
@khaduch
Apr 22 2016 17:22
but I just reloaded and now I can adjust the times, but the break time value is showing "undefined".... maybe you're editing while I'm trying to look?
Matthew Boland
@mattboland
Apr 22 2016 17:25
@khaduch i was trying to mess with the code so they both timers used one function... did not work but now i have it back to the way it was functioning before. sorry about that.
Michael
@M33x0
Apr 22 2016 17:26
Hi everyone
ALINATSUI
@ALINATSUI
Apr 22 2016 17:29
hey people...I'm working on the random quote generator, and I'm having some problems with CSS....Here's the link to my codepen: http://codepen.io/alinawtsui/pen/mPwYZX
I have stuff that's overlapping and I forget if I have to use "clear" but I must be doing something wrong...
Matthew Boland
@mattboland
Apr 22 2016 17:31
@khaduch with regards to the setInterval. do you mean that I need to have a variable outside the function retaining that value?
Ken Haduch
@khaduch
Apr 22 2016 17:32
@mattboland - that's ok. I think that the way you are trying to do the start operation (via the countdown function is not correct.
@mattboland - yes, you have to somehow keep it outside of the countDown function, as well. If you call countDown every time you have the interval timer triggering, you will continuously start setInterval timer operations until something probably breaks? But it will make your timer go crazy to say the least. So that is the first thing to address.
Matthew Boland
@mattboland
Apr 22 2016 17:35
@khaduch ok, thanks for looking. im still lost so i probably need to think this through some more.
CamperBot
@camperbot
Apr 22 2016 17:35
mattboland sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star: 989 | @khaduch | http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Apr 22 2016 17:37

@mattboland - your click handler for the start button should start the setInterval, and you need to retain that return value to be able to stop the interval timer. You also have to make sure that you do not start multiple timers with multiple clicks of the button - either disable the button when the timer is running, or just check to see that you already have a timer running by checking a status variable, and just skip starting another timer.

Also, your use of the Date operations is really not necessary for this problem. You can just maintain a count of seconds that is decremented with the "tick" of the interval timer, and then you can determine when you are out of seconds, switch to the break time, etc.

Bruce Young
@mutantspore
Apr 22 2016 17:37
@mattboland here is a demo pen I wrote to show the basics of the pomodoro . It’s certainly doesn’t have everything in it and is written in JS with equivalent jQuery commented out. see if it helps.
http://codepen.io/MutantSpore/pen/xwBpxE
Ken Haduch
@khaduch
Apr 22 2016 17:38
@mattboland those are the key things that I would focus on at this point... good luck, ask questions if you get stuck.
Matthew Boland
@mattboland
Apr 22 2016 17:40
@khaduch @mutantspore thanks, yeah i need to let these ideas sink in a bit.
CamperBot
@camperbot
Apr 22 2016 17:40
mattboland sends brownie points to @khaduch and @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: mattboland already gave khaduch points
:star: 1443 | @mutantspore | http://www.freecodecamp.com/mutantspore
Ken Haduch
@khaduch
Apr 22 2016 17:41
@mutantspore - nice helpful example!
Bruce Young
@mutantspore
Apr 22 2016 17:44
@khaduch I did my timer with Canvas but I wanted to see how to do the div fill thing so I did that demo… expanded it a bit and did it in JS and jQuery (for my learning purposes) and then commented it a lot. As I said .. it’s not complete. just meant to be a guide
Ken Haduch
@khaduch
Apr 22 2016 17:51
@mutantspore definitely better to keep it simple, but provide the essentials. It looks like it should be helpful to anyone who focuses on what you've implement. I have a canvas-based implementation as well, but I postponed it when they shifted around the projects.... nice work!
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 22 2016 17:51
``js
(function(){
  function success(position){
    console.log(position.coords.latitude, position.coords.longitude);
    $.ajax({
        url : "api.openweathermap.org/data/2.5/weather",
        data : {
                 "APPID" : "3b404c9cc6b1979fc49b83f8e1a1dfbe",
                 "lat" : "19.05",
                 "lon" : "72.87"
               }
    }).done(function(response){
    console.log("Success : ",response);
  }).fail(function(){
    console.log("error");
  })
  }

  function error(){
    console.log("error");
  }
 navigator.geolocation.getCurrentPosition(success, error);

})();
guys i m getting 404 reply from api please help me any thing wrong in this
Bruce Young
@mutantspore
Apr 22 2016 17:55
@malangaveuday http:// in your api URL
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 22 2016 17:56
oops sorry
ranyehushua
@ranyehushua
Apr 22 2016 17:56
Hi all, my wikiviewer app is almost complete, I am just having trouble figuring out how to extract the first sentence from each search result to include as a preview. Here is my codepen so far - http://codepen.io/yehoosh/pen/qZKRXK - does anyone have some input for me?
Bruce Young
@mutantspore
Apr 22 2016 18:00
@ranyehushua this will make it work though you’ll probably want to do it in a nicer way.
listItem.innerHTML = '<a target="_blank" href="https://en.wikipedia.org/wiki/' + result.title + '"><h4>' + result.title + '</h4></a> <br>' + result.snippet;
Robert Friedman
@robfr77
Apr 22 2016 18:00
@mutantspore my clock is working but if I use my reset, then for the 2nd queue the interval is sped up twice as fast...the reset does tell the interval to clear. it's probably because my reset is nested within my start function. what would you do to address this?
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:02
If you guys could check the final version of this portfolio page for bugs I'd appreciate it http://andrewghc.github.io/
ranyehushua
@ranyehushua
Apr 22 2016 18:03
@mutantspore Hi Bruce, the 'snippet' isn't actually the first sentence of the Wiki article, it's a small description but I was wondering how to get just the very first sentence the way they do on the example codepen
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:05
@ranyehushua If it's not in the data, you can get the first sentence yourself with a regex expression
ranyehushua
@ranyehushua
Apr 22 2016 18:07
@AndrewGHC Thanks! Also, that site looks so clean!!! Great work. I really like how the scrolling moves one whole module at a time instead of continuous scrolling. One question, what is the best way to get the thumbnails for the previews for your projects? I love it!
CamperBot
@camperbot
Apr 22 2016 18:07
ranyehushua sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 352 | @andrewghc | http://www.freecodecamp.com/andrewghc
Bruce Young
@mutantspore
Apr 22 2016 18:08
@ranyehushua i used a different search all together
http://codepen.io/MutantSpore/full/rVRwor/
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:09
@ranyehushua Thanks! The thumbnails were generated using http://mockuphone.com
CamperBot
@camperbot
Apr 22 2016 18:09
andrewghc sends brownie points to @ranyehushua :sparkles: :thumbsup: :sparkles:
Michael Karpinski
@karpimpski
Apr 22 2016 18:09
how can I get a count-down for my JS clock? for now I just want it to start at 25:00 and go down by 1 every second
CamperBot
@camperbot
Apr 22 2016 18:09
:star: 307 | @ranyehushua | http://www.freecodecamp.com/ranyehushua
Michael Karpinski
@karpimpski
Apr 22 2016 18:09
but I don't know how to set the interval at 1 second
Bruce Young
@mutantspore
Apr 22 2016 18:09
@ranyehushua I’m sure it wil be simply a different query.. just hav eto look through the sandbox and play
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:10
@karpimpski setTimeout()
Takes two params, a function & the delay in ms
Michael Karpinski
@karpimpski
Apr 22 2016 18:10
@AndrewGHC so if I had a function called timeDown, I would say setTimeout(timeDown, 1000)?
ranyehushua
@ranyehushua
Apr 22 2016 18:12
@AndrewGHC Thanks :-) @mutantspore I really like the dynamic search results while typing. Awesome work! Thanks for the help guys.
CamperBot
@camperbot
Apr 22 2016 18:12
ranyehushua sends brownie points to @andrewghc and @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: ranyehushua already gave andrewghc points
:star: 1444 | @mutantspore | http://www.freecodecamp.com/mutantspore
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:13
@karpimpski Yes that would work
Michael Karpinski
@karpimpski
Apr 22 2016 18:14
@AndrewGHC and to make it loop, could I put that in a while(time > 0) loop?
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:14
@karpimpski Careful with loops as you'll create new timers on each iteration
Try a recursive approach, and have another function turn the seconds into the format you want to display
Michael Karpinski
@karpimpski
Apr 22 2016 18:15
@AndrewGHC how would you suggest I do it? I know I'll put that inside of a JQuery click function, then I thought after that I would put my setTimeout in a loop and call the function every time
Joseph Chan
@joechan3
Apr 22 2016 18:15
Hello campers... I was wondering if anybody here knows of a good guide on building custom font icons
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:16
@karpimpski When the timer is on, I'd have it call itself when it finished, and simply update the time
Michael Karpinski
@karpimpski
Apr 22 2016 18:17
@AndrewGHC I'm not exactly sure what you mean. could you give me a bit of example code for that?
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:21
var seconds = 60;

var timer = setTimeout(function() {
// Check base case condition, i.e. is the timer > 0 or had this been paused
if (seconds > 0) {
// Decrease time var by one second
seconds--;
// Call timer again, as our base case has not been met
timer();
} else {
// Don't call the function, can do anything else here
}
}, 1000);
@karpimpski That's come out very badly as I typed it in the browser but it's gives you the right idea
Michael Karpinski
@karpimpski
Apr 22 2016 18:22
@AndrewGHC oh I see! don't use a while, but put the function call inside of a setTimeout!
I understand now, thanks for the help
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:22
@karpimpski :thumbsup:
Michael Karpinski
@karpimpski
Apr 22 2016 18:22
@AndrewGHC thanks (you deserve the brownie points :) )
CamperBot
@camperbot
Apr 22 2016 18:22
karpimpski sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 353 | @andrewghc | http://www.freecodecamp.com/andrewghc
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:23
@karpimpski Thanks for the gesture
CamperBot
@camperbot
Apr 22 2016 18:23
andrewghc sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:star: 338 | @karpimpski | http://www.freecodecamp.com/karpimpski
Michael Karpinski
@karpimpski
Apr 22 2016 18:25
@AndrewGHC
var time = 25;
$("#timer").html(time);

$("#document").ready(function(){
  var timer = setTimeout(function(){
    if(time > 0){
      time--;
      $("#timer").html(time);
      timer();
    }
  }, 1000);
});
what am I doing wrong?
(right now I'm just trying to countdown seconds, will add minutes later
it only counts down one time
@AndrewGHC I changed it to a click function, but still basically the same
var time = 25;
$("#timer").html("<span id='time'>" + time + "</span>");

$("#time").click(function(){
  var timer = setTimeout(function(){
    if(time > 0){
      time--;
      $("#timer").html("<span id='time'>" + time + "</span>");
      timer();
    }
    else{

    }
  }, 1000);
});
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 22 2016 18:30
@karpimpski I forgot to name the anonymous function, and include the second parameter on the recursive call
Easy fix
Nathan
@natertot12
Apr 22 2016 18:32
How should I add some of my github projects to my portfolio?
It would be nice to visually see it instead of just having a github button
Bruce Young
@mutantspore
Apr 22 2016 18:36
@natertot12 so simply taking a screen shot of the part of your project you’d like to show off and putting it (edited) in your portfolio is not what you want? . remember anything that’s iframing off somewhere else will have to load in x number of iframes and perhaps it’s not actually the best view of your project anyway.
Nathan
@natertot12
Apr 22 2016 18:37
@mutantspore Ok, maybe screenshot is the best plan. I tried iframe but it was very slow...
@mutantspore Thanks
CamperBot
@camperbot
Apr 22 2016 18:38
natertot12 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1445 | @mutantspore | http://www.freecodecamp.com/mutantspore
Robert Friedman
@robfr77
Apr 22 2016 18:49
I'm having 2 issues on the pomodoro clock. First if I start a timer past 9 minutes then the seconds goes down by 1 for both digits (ie 59 seconds goes to 48 seconds and 48 goes to 37). Second if I start a new countdown after using the reset function, the increment goes double (2 seconds at a time). Anyone can offer advice?
  //Variable assignments
var minutes = 0;
var seconds = 0;
var timer;

  //Increment timer countdown
$(".increment").click(function() {
  minutes++;
  $(".minutes").text(function(a, input) {
    return eval(+input + 1);
  });
  clickStart();
});

  //Decrease timer countdown
$(".decrement").click(function() {
  minutes--;
  $(".minutes").text(function(a, input) {
    return eval(+input - 1);
  });
  clickStart();
});

//on clicking "start", begin countdown
function clickStart() {
  $(".start").click(function() {
    seconds = 0;
    var interval = setInterval(countdown, 1000);

    //on clicking "reset", clear countdown
    $(".reset").click(function() {
      minutes = 0;
     seconds = 0;
     clearInterval(interval); 
     $(".time").empty();
      $(".minutes").empty();
       });
 });
}

  //Countdown function
function countdown() {
  //if minutes and seconds are both equal to 0, stop countdown
   if (minutes === 0 && seconds === 0) {
     $(".time").empty();
     $(".minutes").empty();
     clearInterval(interval);
   }
  //if just seconds = 0
   if (seconds === 0) {
    minutes = eval(minutes - 1);
    seconds = eval(seconds + 59);
  }
  //otherwise decrease seconds by 1
  else {
  seconds = eval(seconds - 1);
  }
  //update timer text with an extra zero if seconds < 10
  if (seconds < 10) {
    $("h2").text(minutes + ":" + "0" + seconds);
  }
  else if (seconds > 10) {
    $("h2").text(minutes + ":" + seconds);
  }
}
Bruce Young
@mutantspore
Apr 22 2016 18:53
@robfr77 don’t count down in mins and secs. only coundown the total secs and convert to display
Robert Friedman
@robfr77
Apr 22 2016 18:54
@mutantspore makes sense
Robert Friedman
@robfr77
Apr 22 2016 19:02
Am I right to nest the click-startcountdown function in the increment/decrement functions?
Nathan
@natertot12
Apr 22 2016 19:05
@robfr77 I don't think there is an advantage in nesting them
Robert Friedman
@robfr77
Apr 22 2016 19:05
I couldnt access the function without doing that though
Nathan
@natertot12
Apr 22 2016 19:06
You don't need the clickStart function
Robert Friedman
@robfr77
Apr 22 2016 19:08
ok
how would i get the reset function to work outside of the increment or decrement functions?
Nathan
@natertot12
Apr 22 2016 19:15
JQuery should run your function whenever you click on the button, it doesn't have to be in your increment decrement function. Here is an example http://codepen.io/natertot12/pen/xwEBbG?editors=0010
Robert Friedman
@robfr77
Apr 22 2016 19:17
okay well thanks at least i know that it can work, thanks @natertot12
CamperBot
@camperbot
Apr 22 2016 19:17
robfr77 sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 444 | @natertot12 | http://www.freecodecamp.com/natertot12
Tiffany Tran
@TiffUX
Apr 22 2016 19:18
is there a page on freecodecamp that's like a library of all possible things for HTML, CSS, jquery? for example what fonts are available.
Bruce Young
@mutantspore
Apr 22 2016 19:19
@TiffUX for fonts you can head off to google fonts https://www.google.com/fonts
Tiffany Tran
@TiffUX
Apr 22 2016 19:21
@mutantspore what about colors, and buttons?
idietmoran
@idietmoran
Apr 22 2016 19:21
@TiffUX use google or adobe fonts, colors are just RGB 256 or hex
Nathan
@natertot12
Apr 22 2016 19:22
@TiffUX http://www.w3schools.com/ has some really good tutorials, and bootstrap is amazing
Tiffany Tran
@TiffUX
Apr 22 2016 19:22
oh okay. i'm working on the portfolio project and would like to know if there's a resource for all of the html,css assets
Bruce Young
@mutantspore
Apr 22 2016 19:22
wel the bootstrap site wil give you the standard bootstrap styles . and this is good for colors. https://www.google.com/design/spec/style/color.html
idietmoran
@idietmoran
Apr 22 2016 19:23
https://developer.mozilla.org/en-US/ is a great resource, and stack exchange if you do searches
Bruce Young
@mutantspore
Apr 22 2016 19:23
@TiffUX the work starts now
Tiffany Tran
@TiffUX
Apr 22 2016 19:23
@natertot12 @idietmoran @mutantspore thanks! i'll check those out!
CamperBot
@camperbot
Apr 22 2016 19:23
tiffux sends brownie points to @natertot12 and @idietmoran and @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1446 | @mutantspore | http://www.freecodecamp.com/mutantspore
:star: 445 | @natertot12 | http://www.freecodecamp.com/natertot12
:star: 321 | @idietmoran | http://www.freecodecamp.com/idietmoran
Nathan
@natertot12
Apr 22 2016 19:25
Also later on in the full stack development they will introduce libraries like chart.js masonry.js and more
StasiekK
@StasiekK
Apr 22 2016 19:39
@mutantspore the best source of colors http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Bruce Young
@mutantspore
Apr 22 2016 19:40
@StasiekK I have plenty of places .. but ty .. just passing on something simple for a new coder
@StasiekK yes I actually use that a lot
Leonardo Gonzalez
@leogonzalez
Apr 22 2016 20:06
Hey guys. I running into some trouble with .ajax and Objects in javascript. The ajax completes the request, I build an Object with the request's results, but i cannot use the objects properties to append in HTML. What am I doing wrong?
http://codepen.io/leogonzalez/pen/ZWjrXN?editors=0010
ALINATSUI
@ALINATSUI
Apr 22 2016 20:23
HELP!! I can't get my jquery to work on Codepen...http://codepen.io/alinawtsui/pen/mPwYZX?editors=1010
CamperBot
@camperbot
Apr 22 2016 20:23
no wiki entry for: i cant get my jquery to work on codepenhttpcodepenioalinawtsuipenmpwyzxeditors1010
codercooooder
@codercooooder
Apr 22 2016 20:24
Thanks for helping again @alpox your help has been invaluable
CamperBot
@camperbot
Apr 22 2016 20:24
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
Nathan
@natertot12
Apr 22 2016 20:24
@ALINATSUI Click on the settings and add jquery
CamperBot
@camperbot
Apr 22 2016 20:24
:star: 586 | @alpox | http://www.freecodecamp.com/alpox
codercooooder
@codercooooder
Apr 22 2016 20:24
really thank you @alpox
CamperBot
@camperbot
Apr 22 2016 20:24
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave alpox points
alpox
@alpox
Apr 22 2016 20:24
@codercooooder You're welcome :-)
ALINATSUI
@ALINATSUI
Apr 22 2016 20:29
@nathan Jquery's already there.
Nathan
@natertot12
Apr 22 2016 20:30
@ALINATSUI Its still not for me....
Leonardo Gonzalez
@leogonzalez
Apr 22 2016 20:30
Hey guys. I'm having trouble with .ajax and Objects in javascript. The ajax completes the request, I build an Object with the request's results, but i cannot use the objects properties to append in HTML. What am I doing wrong?
http://codepen.io/leogonzalez/pen/ZWjrXN?editors=0010
ALINATSUI
@ALINATSUI
Apr 22 2016 20:31
@nathan I deleted the link to the old jquery cdn..what about now?
Nathan
@natertot12
Apr 22 2016 20:32
@ALINATSUI quick add their jquery
ALINATSUI
@ALINATSUI
Apr 22 2016 20:32
@natertot12 I just did, I'm not sure if I"m doing it wrong...I've added it on the bottom of the html page.
Nathan
@natertot12
Apr 22 2016 20:33
@ALINATSUI Don't have it at the bottom of your html, click on the settings go to Javascript and past the link
You can do it that way but you need to put the code in your js file into the html file
ALINATSUI
@ALINATSUI
Apr 22 2016 20:35
@natertot12 Ok, I just added the link in codepen (JS)..
Nathan
@natertot12
Apr 22 2016 20:37
@ALINATSUI It's working for me now. Is it working for you?
Branislav Bugarcic
@BBugarcic
Apr 22 2016 20:38
@leogonzalez In your place I would console.log data that you receive... it looks that you don't get an answer... in my console it shows error "Failed to load resource: the server responded with a status of 404 (Not Found)"... try to see what you receive... and than continue from there...
ALINATSUI
@ALINATSUI
Apr 22 2016 20:39
@natertot12 Nope....When I click the "Click me" button, I get nothing...Do I need to install jquery? But since I included the cdn on codepen, it should not be necessary...
Nathan
@natertot12
Apr 22 2016 20:39
@ALINATSUI In your code your not making any changes except for console logging so look at the console, your jquery is working now
ALINATSUI
@ALINATSUI
Apr 22 2016 20:39
oh wait @natertot12....
Yes, it's printing out in the console, but that's not what I want.
Nathan
@natertot12
Apr 22 2016 20:40
What do you want?
ALINATSUI
@ALINATSUI
Apr 22 2016 20:40
@natertot12 I want it setup so that anyone who clicks on the button, will see a randomly generated quote. But I"m not sure how to set that up.
use the return, instead of console.log?
Nathan
@natertot12
Apr 22 2016 20:41
Use JQuery's .text() or .html()
ALINATSUI
@ALINATSUI
Apr 22 2016 20:41
oh, hmm...I need so much practice with JQuery....
Thanks @natertot12. I'll give that a try.
CamperBot
@camperbot
Apr 22 2016 20:41
alinatsui sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 446 | @natertot12 | http://www.freecodecamp.com/natertot12
Nathan
@natertot12
Apr 22 2016 20:42
@ALINATSUI No problem
Nathan
@natertot12
Apr 22 2016 20:50
In my about me why aren't my images displaying inline? http://codepen.io/natertot12/pen/zvKMBx
Leonardo Gonzalez
@leogonzalez
Apr 22 2016 20:51
Thanks @BBugarcic
CamperBot
@camperbot
Apr 22 2016 20:51
leogonzalez sends brownie points to @bbugarcic :sparkles: :thumbsup: :sparkles:
:star: 377 | @bbugarcic | http://www.freecodecamp.com/bbugarcic
Matthew Robertson
@mrmatt1877
Apr 22 2016 20:53
So I am having an issue with codepen. Everything I do that has worked in the past is not working now for the simon project. I could not get any of the css to display properly. So to test what I was doing wrong I copied all of the code from the example to play with including the links in the head. The issue is that even that is not displaying correctly. What am I doing wrong. http://codepen.io/mrmatt1877/pen/YqjrOx
Branislav Bugarcic
@BBugarcic
Apr 22 2016 20:54
@leogonzalez You're welcome.
Nathan
@natertot12
Apr 22 2016 20:55
@mrmatt1877 You have bootstrap and they don't
Matthew Robertson
@mrmatt1877
Apr 22 2016 20:56
@natertot12 omg. I have been doing this without bootstrap. I guess I added it from habit and didn't even notice. Thank you.
CamperBot
@camperbot
Apr 22 2016 20:56
mrmatt1877 sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 447 | @natertot12 | http://www.freecodecamp.com/natertot12
Nathan
@natertot12
Apr 22 2016 20:56
@mrmatt1877 No problem, its always the small things
Matthew Robertson
@mrmatt1877
Apr 22 2016 20:57
@natertot12 Always!! That's why nothing I was looking up would work either.
Taras Yaremkiv
@Y-Taras
Apr 22 2016 21:25
This message was deleted
Hello everyone. Can't fix an error ( SyntaxError: illegal character } ​​)
$(document).ready(function() {

    var data1Array = [];
    var temp;

    var channelsArray = [
        "freecodecamp", "storbeck", "terakilobyte",
        "habathcx", "RobotCaleb", "MedryBW",
        "thomasballinger", "noobs2ninjas", "beohoff",
        "brunofin", "comster404", "asdfhjklzxv",
        "sheevergaming", "OgamingSC2", "cretetion", "ESL_SC2"
    ];

    function showChannel() {
        $.when($.getJSON(request1), $.getJSON(request2)).then(function(data1, data2) {
            if (data1.stream === null) {
                temp = 'Offline';
            } else if (data1.status == 404) {
                temp = data1.message;
            } else if (data1.status == 422) {
                temp = 'Account Closed';
            } else {
                temp = data1.stream.channel.status;
            }
            $('.container').append('<div class="row">' +
                '<div class="col-lg-2 logo"> <img src="' + data2.logo +
                '" class="img-thumbnail" ></div>' +
                '<div class="col-lg-3 name" >' + data2.name +
                '</div><div class="col-lg-4 bio">' + data2.bio +
                '</div><div class="col-lg-3 status">' + temp +
                '</div></div>');
        });
    }​​ /* an error is pointing to this line*/
    for (var i = 0; i < channelsArray.length; i++) {
        var request1 = 'https://api.twitch.tv/kraken/streams/' +
            channelsArray[i] + '?callback=?';
        var request2 = 'https://api.twitch.tv/kraken/users/' +
            channelsArray[i] + '?callback=?';
        showChannel();
    }
});
alpox
@alpox
Apr 22 2016 21:29
@Y-Taras Yeah one cannot see it somehow... you managed to put there invisible character codes :D
Alex9911
@Alex9911
Apr 22 2016 21:30
Hey guys! I'm at the personal portfolio challenge and seems like I don't know how to begin building it. It's like I forgot everything I learned until now. Do any of you experienced this? Is there a more effective way to learn? I've seen some portfolio examples here but they look more complex than the thing we learned in the challenges. What do you guys recommend ? Should I go back to review the challenges? Or should I use google and youtube?
alpox
@alpox
Apr 22 2016 21:30
@Y-Taras here you see it
Auswahl_003.png
Just copy-pasted
@Alex9911 Go get some tutorials or read documentations about bootstrap (if you want to go with bootstrap).
Taras Yaremkiv
@Y-Taras
Apr 22 2016 21:34
@alpox thanks
CamperBot
@camperbot
Apr 22 2016 21:34
y-taras sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 587 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 22 2016 21:34
@Y-Taras np
anyone know why the city and state isn't working here?
alpox
@alpox
Apr 22 2016 21:38
@Mortiferr Oha... several things :D let be begin from top
Patrick Black
@Mortiferr
Apr 22 2016 21:39
okay thanks, I'm very new to api @alpox
CamperBot
@camperbot
Apr 22 2016 21:39
mortiferr sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 588 | @alpox | http://www.freecodecamp.com/alpox
nmbr13
@nmbr13
Apr 22 2016 21:39
To get the quotes for the Quote Generator zipline is there an API I should be using or do I need to code all of the quotes myself?
alpox
@alpox
Apr 22 2016 21:39
@Mortiferr var getLocation = function(data) { you define your function for getting geolocation data. But you never even call it, so the function doesnt run
Patrick Black
@Mortiferr
Apr 22 2016 21:39
oh shoot
okay I called the function
alpox
@alpox
Apr 22 2016 21:40
@Mortiferr 2. var response = JSON.parse(data); the variable data holds the actual data with javascript object type, you dont have to parse that data
@Mortiferr That can only produce errors
@Mortiferr 3. var getLocation = function(data) { you don't have t specify the input parameter data here (it doesnt hurt you, but makes not much sense :-) )
Patrick Black
@Mortiferr
Apr 22 2016 21:41
oh crap hold on i just accidently deleted something
Alex9911
@Alex9911
Apr 22 2016 21:41
Thanks @alpox
CamperBot
@camperbot
Apr 22 2016 21:41
alex9911 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 589 | @alpox | http://www.freecodecamp.com/alpox
MacKenzie Whalen
@mkwhalen
Apr 22 2016 21:42
I'm having a hard time getting the tweet button to work. Let me know if you can help! Thanks!
http://codepen.io/mkwhalen/pen/jqzEmX
Patrick Black
@Mortiferr
Apr 22 2016 21:43
@alpox okay, I just accidently erased most of my work so ill be back shortly :)
Nathan
@natertot12
Apr 22 2016 21:43
@mkwhalen Its working for me
What's not working about it?
Jonathan Gripshover
@mrgrip
Apr 22 2016 21:47
@mkwhalen because it's tweeting 'randomQuoteMachine()'? I think you need to grab the quote the function is generating for the text attribute rather than the name of the function. Does that make sense?
alpox
@alpox
Apr 22 2016 21:48
@mkwhalen You can set an id to the tweet button a element like id="tweetBtn". Then do this (I added one line to the quote texts)
    quoteList.innerHTML = quotes[index];
    quoteAuthor.innerHTML = quoteA[index];
    document.getElementById('tweetBtn').dataset.text = quotes[index] + ' - ' + quoteA[index];
@mrgrip
// just some variable setup
var city = "";
var state = "";
// gets the location of the user
var getLocation = function(data) {
  $.ajax({
    url: "http://ip-api.com/json",
    error: function() {
      $('.weather-container').html(
        "Something diddy-dun broke. Please try again or email the developer (that's me!) using the email on my profile."
      );
    },
    success: function(data) {
      var response = data;
      console.log(data);
      city = response.city;
      state = response.region;
      $(".city").text(city);
      $(".state").text(state);
    }
  });
};
getLocation();
@Mortiferr Still got it in cache
Patrick Black
@Mortiferr
Apr 22 2016 21:49

@alpox if you have a moment and don't mind helping me: http://codepen.io/Mortiferr/collab/PNBRKL/?editors=1010

I have cp pro so we can collab

@alpox thanks i found it too
CamperBot
@camperbot
Apr 22 2016 21:49
mortiferr sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: mortiferr already gave alpox points
Taras Yaremkiv
@Y-Taras
Apr 22 2016 21:49
@alpox another error, that I cant fix either :
16 TypeError: data1.stream is undefined
temp = data1.stream.channel.status;
alpox
@alpox
Apr 22 2016 21:50
@Mortiferr Well i already made the code work :D which i sent you
Patrick Black
@Mortiferr
Apr 22 2016 21:50
oh
OH i see that, I didn't see it before
thanks again
alpox
@alpox
Apr 22 2016 21:50
:-) np
@Y-Taras try data1[0].stream
Nathan
@natertot12
Apr 22 2016 21:51
In my About Me, why are my images 100% width? And how can I put them inline http://codepen.io/natertot12/pen/zvKMBx?editors=0100
alpox
@alpox
Apr 22 2016 21:51
@Y-Taras But you have some problems with the variable definitions :-)
@Y-Taras
$(document).ready(function() {

    var data1Array = [];
    var temp;

    var channelsArray = [
        "freecodecamp", "storbeck", "terakilobyte",
        "habathcx", "RobotCaleb", "MedryBW",
        "thomasballinger", "noobs2ninjas", "beohoff",
        "brunofin", "comster404", "asdfhjklzxv",
        "sheevergaming", "OgamingSC2", "cretetion", "ESL_SC2"
    ];

    function showChannel(req1, req2) {
        $.when($.getJSON(req1), $.getJSON(req2)).then(function(d1, d2) {
           var data1 = d1[0];
           var data2 = d2[0];
            if (data1.stream === null) {
                temp = 'Offline';
            } else if (data1.status == 404) {
                temp = data1.message;
            } else if (data1.status == 422) {
                temp = 'Account Closed';
            } else {
                temp = data1.stream.channel.status;
            }
            $('.container').append('<div class="row">' +
                '<div class="col-lg-2 logo"> <img src="' + data2.logo +
                '" class="img-thumbnail" ></div>' +
                '<div class="col-lg-3 name" >' + data2.name +
                '</div><div class="col-lg-4 bio">' + data2.bio +
                '</div><div class="col-lg-3 status">' + temp +
                '</div></div>');
        });
    }​​ /* an error is pointing to this line*/
   channelsArray.forEach(function(channel) {
        var request1 = 'https://api.twitch.tv/kraken/streams/' +
            channelsArray[i] + '?callback=?';
        var request2 = 'https://api.twitch.tv/kraken/users/' +
            channelsArray[i] + '?callback=?';
        showChannel(request1, request2);
   });
});
You can try something like that
Taras Yaremkiv
@Y-Taras
Apr 22 2016 21:57
it's allright now. But as always weird. UNtil I use I don'w have to use data1[0]. Everything works using just data1
$.when($.getJSON(request1), $.getJSON(request2)).then(function(d1, d2) {
alpox
@alpox
Apr 22 2016 21:58
I just wanted to point out that you should really pass the variables request1 and request2 to the showchannel function
Patrick Black
@Mortiferr
Apr 22 2016 22:00
@alpox im really sorry to bother you again
alpox
@alpox
Apr 22 2016 22:01
@Mortiferr whats up? :D
Patrick Black
@Mortiferr
Apr 22 2016 22:01
but http://codepen.io/Mortiferr/pen/mPXKzZ?editors=1010 it is still not working (again so sorry to bother)
alpox
@alpox
Apr 22 2016 22:01
@Mortiferr Shows fine for me
@Mortiferr It doesnt show your city?
Patrick Black
@Mortiferr
Apr 22 2016 22:02
@alpox nope doesn't show city or stay
state*
Nathan
@natertot12
Apr 22 2016 22:02
It works for me too
alpox
@alpox
Apr 22 2016 22:03
@Mortiferr May be a problem with your browser then
Patrick Black
@Mortiferr
Apr 22 2016 22:03
maybe
im using chrome so it shouldnt be a problem
let me do some checking
alpox
@alpox
Apr 22 2016 22:04
Check your developer console (F12) for errors
Nathan
@natertot12
Apr 22 2016 22:04
Refresh the page and you may have to click allow for this page to see location
MacKenzie Whalen
@mkwhalen
Apr 22 2016 22:04
@alpox Thank you so much!!
CamperBot
@camperbot
Apr 22 2016 22:04
mkwhalen sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Apr 22 2016 22:04
@natertot12 Nope, that is only for if you use navigator.geolocation
CamperBot
@camperbot
Apr 22 2016 22:04
:star: 590 | @alpox | http://www.freecodecamp.com/alpox
Patrick Black
@Mortiferr
Apr 22 2016 22:04
@natertot12 no, it uses IP
ERR_BLOCKED_BY_CLIENT is the error is says
Nathan
@natertot12
Apr 22 2016 22:04
Oh, gotcha... nevermind
alpox
@alpox
Apr 22 2016 22:04
@mkwhalen You're welcome
Patrick Black
@Mortiferr
Apr 22 2016 22:05
so something with chrome because it works in firefox...
nmbr13
@nmbr13
Apr 22 2016 22:06
@natertot12 your images look like they are inside a div tag which is by default a block level element. That means that it is going to insert a line break after each div. Try and put your images inside a span or change up how they are broken up to get them onto a single line.
alpox
@alpox
Apr 22 2016 22:06
@Mortiferr check if you are using https.. if so you will have to use the https:// variant of the request url
Patrick Black
@Mortiferr
Apr 22 2016 22:07
nope not that @alpox
alpox
@alpox
Apr 22 2016 22:07
@Mortiferr then you should check if you have a blocker plugin installed like adblock
Patrick Black
@Mortiferr
Apr 22 2016 22:07
i was about to say
could be adblock
okay it was adblock
Patrick Black
@Mortiferr
Apr 22 2016 22:08
i wonder how i can fix that
thank you once again @alpox
CamperBot
@camperbot
Apr 22 2016 22:08
mortiferr sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: mortiferr already gave alpox points
alpox
@alpox
Apr 22 2016 22:09
@Mortiferr Np :-)
Brandon
@Daxo
Apr 22 2016 22:16
ust finished my Wikipedia page viewer! http://codepen.io/apeiron/full/zqazqz/
Branislav Bugarcic
@BBugarcic
Apr 22 2016 22:16
@natertot12 Why wouldn't you try with bootstrap's grid columns: col-xs-4 or -sm- or -md-... check documentation (grid system) ... it is an easy solution... and your parent div has row class... in bootstrap's documentation it is suggested to use this classes inside elements with class row... hope this is helpful
Nathan
@natertot12
Apr 22 2016 22:17
@BBugarcic I've already tried that... it doesn't work
It puts them in a line but the images are really small
alpox
@alpox
Apr 22 2016 22:18
@natertot12 I think thats pretty much because of tons of your own css which overwrites the bootstrap css :-)
@natertot12 there is also class="img-responsive" for the images if you need it once.
Islam Ibakaev
@dagman
Apr 22 2016 22:21
today i continued building my super cool portfolio. This is what i've done so far http://codepen.io/dagman/pen/WwKrgX/?editors=0010 A lot of things may be improved though :smile:
Nathan
@natertot12
Apr 22 2016 22:21
If my image captions don't work thats fine, I just thought there may be a way
Branislav Bugarcic
@BBugarcic
Apr 22 2016 22:23
@natertot12 Your img element has width: 30%... remove that and width will be ok.
aareeder
@aareeder
Apr 22 2016 22:25
Could someone please tell me how to find images for my tribute page?
Nathan
@natertot12
Apr 22 2016 22:25
@aareeder I use https://unsplash.com/ its free
@BBugarcic Thank you so much!
CamperBot
@camperbot
Apr 22 2016 22:26
natertot12 sends brownie points to @bbugarcic :sparkles: :thumbsup: :sparkles:
aareeder
@aareeder
Apr 22 2016 22:26
thanks!
CamperBot
@camperbot
Apr 22 2016 22:26
:star: 378 | @bbugarcic | http://www.freecodecamp.com/bbugarcic
aareeder
@aareeder
Apr 22 2016 22:26
thanks @natertot12 !
CamperBot
@camperbot
Apr 22 2016 22:26
aareeder sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 448 | @natertot12 | http://www.freecodecamp.com/natertot12
Branislav Bugarcic
@BBugarcic
Apr 22 2016 22:26
You're welcome. :+1:
alpox
@alpox
Apr 22 2016 22:31
@Daxo You may want to fix your input text field with margin-top: -3px; on its label to compensate the fields border
Brandon
@Daxo
Apr 22 2016 22:33
@alpox thanks!
CamperBot
@camperbot
Apr 22 2016 22:33
daxo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 591 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 22 2016 22:34
@Daxo np
Luis Pedro Juarez Aguilar
@Luispegt
Apr 22 2016 22:39
This message was deleted
aareeder
@aareeder
Apr 22 2016 22:42
So the tribute page is really showing me how much I don't know! Can someone please remind me how to center an image? Do I need to set an element?
Nathan
@natertot12
Apr 22 2016 22:43
Are you using bootstrap?
MacKenzie Whalen
@mkwhalen
Apr 22 2016 22:43
@aareeder text-align: center;
aareeder
@aareeder
Apr 22 2016 22:43
thank you @mkwhalen !
CamperBot
@camperbot
Apr 22 2016 22:43
aareeder sends brownie points to @mkwhalen :sparkles: :thumbsup: :sparkles:
:star: 287 | @mkwhalen | http://www.freecodecamp.com/mkwhalen
Branislav Bugarcic
@BBugarcic
Apr 22 2016 22:44
@dagman Best video on the subject :smile:
Islam Ibakaev
@dagman
Apr 22 2016 22:47
@BBugarcic share only best stuff man :smile:
@BBugarcic what do u think about my unfinished portfolio?
aareeder
@aareeder
Apr 22 2016 22:49
Thanks @dagman!!! That's really helpful!
CamperBot
@camperbot
Apr 22 2016 22:49
aareeder sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:star: 430 | @dagman | http://www.freecodecamp.com/dagman
Islam Ibakaev
@dagman
Apr 22 2016 22:51
@aareeder yw
Branislav Bugarcic
@BBugarcic
Apr 22 2016 22:51
@dagman really cool... made me smile. I love it. :clap:
Islam Ibakaev
@dagman
Apr 22 2016 22:56
@BBugarcic :smile:
skhvan1111
@skhvan1111
Apr 22 2016 23:11
Hello, can someone suggest solution for that:
i want to use http://websygen.github.io/owfont/#css
on codepen
no cdn version found, so do I need upload files somewhere of save on codepen side exists, like simple upload?