These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Apr 2016
zackluckyf
@zackluckyf
Apr 30 2016 00:08
So I made it to the second round of an interview process and am now going to be remotely paired to do some coding. The interviewer told me he was mainly going to check into javascript functions and objects. I was thinking about just drilling the FCC algorithms again but wanted to get thoughts on if I should do anything additionally? Unfortunately it's on Monday and I work tomorrow and Sunday so time is limited. I'm open to ideas though!
Nick Burress
@4trio19
Apr 30 2016 00:09
I'm with ya Zack. I have a similar deal going, but I'm supposed to "quote" the company for my work
Panicking about what to charge them
I would watch some videos on Youtube about functional JS. There is a guy that does fantastic ones, lemme go check what his channel is
Aryan
@aryandua
Apr 30 2016 00:12
I have a <h1> element and a p below it. For some reason there is a lot of empty space between them. Why is this happening???
zackluckyf
@zackluckyf
Apr 30 2016 00:14
@burressdesign Thanks for the advice man! Ill check out those videos tonight. Try to find a market rate and go with that, if you can look them up on glass door that might give you a good starting spot.
Dylan
@dhcodes
Apr 30 2016 00:20
bookmarked. Thanks @burressdesign
CamperBot
@camperbot
Apr 30 2016 00:20
dhcodes sends brownie points to @burressdesign :sparkles: :thumbsup: :sparkles:
:star: 403 | @burressdesign | http://www.freecodecamp.com/burressdesign
Nick Burress
@4trio19
Apr 30 2016 00:20
You're welcome. That dude is super entertaining and smart as hell
I think he works for Spotify
CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:21
This stuff is going way over my head
I found like two lines of information on APIs in the 3 JavaScript books I checked out from the library, nothing that actually told me anything.
help ajax
CamperBot
@camperbot
Apr 30 2016 00:25
no wiki entry for: ajax
CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:25
help api
CamperBot
@camperbot
Apr 30 2016 00:25

:point_right: capitalize first letter of string [wiki]

Capitalize the First Letter of a String

To capitalize the first letter of a random string, you should follow these steps:

  1. Get the first letter of the string;
  2. Convert the first letter to uppercase;
  3. Get the remainder of the string;
  4. Concatenate the first letter capitalized with the remainder of the string and return the result;

1. Get the First Letter of the String

You should use charAt(http://github.com/FreeCodeCamp/FreeCodeCamp/wiki/) method, at index 0, to select the first character of the string.

var string = "freeCodecamp";

string.charAt(0); // Returns "f"

NOTE: charAt is preferable than using [ ] (bracket notation) as str.charAt(0) returns an empty string ('') for str = '' instead of undefined in case of ''[0].
:pencil: read more about capitalize first letter of string on the FCC Wiki

CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:25
help API
CamperBot
@camperbot
Apr 30 2016 00:25

:point_right: capitalize first letter of string [wiki]

Capitalize the First Letter of a String

To capitalize the first letter of a random string, you should follow these steps:

  1. Get the first letter of the string;
  2. Convert the first letter to uppercase;
  3. Get the remainder of the string;
  4. Concatenate the first letter capitalized with the remainder of the string and return the result;

1. Get the First Letter of the String

You should use charAt(http://github.com/FreeCodeCamp/FreeCodeCamp/wiki/) method, at index 0, to select the first character of the string.

var string = "freeCodecamp";

string.charAt(0); // Returns "f"

NOTE: charAt is preferable than using [ ] (bracket notation) as str.charAt(0) returns an empty string ('') for str = '' instead of undefined in case of ''[0].
:pencil: read more about capitalize first letter of string on the FCC Wiki

CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:25
help local weather
CamperBot
@camperbot
Apr 30 2016 00:25
no wiki entry for: local weather
CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:25
help show the local weather
CamperBot
@camperbot
Apr 30 2016 00:25
no wiki entry for: show the local weather
CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:26
f you camper bot
stevenliu409
@stevenliu409
Apr 30 2016 00:28
Hi guys is there a way to change the template in a custom directive based on a value in a controller for angularjs?
for example, for the current weather zipline, I have a custom directive for displaying the weather icon
and I have a controller to fetch weather data using the openweather api
Tulio Natale
@tuliodnw
Apr 30 2016 00:30
hello people im doing the quotes random generator challenge, and im having a hard time seeing how can i implement the api, im planing to use http://quotesondesign.com/the-api/, could someone help me?
CaffeineQueen
@CaffeineQueen
Apr 30 2016 00:33
I don't think any of us know what we're doing
stevenliu409
@stevenliu409
Apr 30 2016 00:36
@tuliodnw i think APIv4 is easier to use. Can you use that one?
Tulio Natale
@tuliodnw
Apr 30 2016 00:41
@stevenliu409 i can, after i add the endpoint how do i advance, how can i call it
stevenliu409
@stevenliu409
Apr 30 2016 00:45
can you show me what you have?
stevenliu409
@stevenliu409
Apr 30 2016 00:48
hmm looks like its working? what is the problem again
sorry :S
like once you get call the json method, it calls the anonymous callback function
Tulio Natale
@tuliodnw
Apr 30 2016 00:51
i will make now a button but dont know how to get a new one
stevenliu409
@stevenliu409
Apr 30 2016 00:51
oh
can’t you wrap it in a function and call that function in a button click
wrap your getjson function
Tulio Natale
@tuliodnw
Apr 30 2016 01:00
@stevenliu409 with a <script>?
stevenliu409
@stevenliu409
Apr 30 2016 01:12
something like this
I’m logging it in the console
but you can get the data and set it up yourself
@tuliodnw
Tulio Natale
@tuliodnw
Apr 30 2016 01:16
yep, thanks @stevenliu409 im just revisting my code that i broke it and now it wont show me the quote qq, im gonna go eat but thanks for all
CamperBot
@camperbot
Apr 30 2016 01:16
tuliodnw sends brownie points to @stevenliu409 :sparkles: :thumbsup: :sparkles:
:star: 308 | @stevenliu409 | http://www.freecodecamp.com/stevenliu409
stevenliu409
@stevenliu409
Apr 30 2016 01:17
i think the reason why you werent getting a new quote was because it was being cached. If the cached option was false you could get a new quote
@tuliodnw haha no problem, sorry it took so long to answer because I was trying to figure out the problem as well
Ken Truong
@kjjtruong
Apr 30 2016 01:26
Hey everyone! got a question. I'm trying to animate an element with jQuery's .animate() when clicking a button. Not sure why it's not working. Can someone help take a quick look to see what I may be doing wrong?
Frank XC
@tenkdayz
Apr 30 2016 01:42
@kjjtruong $("form").animate({ marginTop:"+=50px" });
CaffeineQueen
@CaffeineQueen
Apr 30 2016 01:43
Weather thingy reports in Kelvin, correct?
Ken Truong
@kjjtruong
Apr 30 2016 01:44
@tenkdayz Thanks!
CamperBot
@camperbot
Apr 30 2016 01:44
kjjtruong sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 465 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Ken Truong
@kjjtruong
Apr 30 2016 01:44
actually i just got it to work with $("form").animate({"top":"+=50px" });
as well
I had to change the position of my form to relative
Frank XC
@tenkdayz
Apr 30 2016 01:45
@kjjtruong from what I
what I've seen you dont have to surround the property with ""
but I guess you can
Ken Truong
@kjjtruong
Apr 30 2016 01:49
from position: static
Ulan
@NextgenerationKG
Apr 30 2016 02:21
Hi all. I am in Build a tribute Page. I have to make it without any help only with previous knowledge?
Edward Hilgendorf
@edhilgendorf
Apr 30 2016 02:47
Hi everyone,I am a little stuck with the Random Quote Generator for sending out the tweet. Does anyone know if it is possible to use the tweet link, and just modify the href attribute with .attr() to add the text value from the quote? I can't get it to populate the tweet and I am unsure why
@NextgenerationKG you can use what you learned from the previous lessons, HTML and CSS
Brandon Lee
@brandonlee781
Apr 30 2016 02:52
Hey everyone, got a quick question. I'm trying to use Objects in my latest project. Is it possible to declare a constructor function INSIDE an object literal? If I want to an object to have a bunch of properties that are also objects, can the constructor be a property of it as well?
Ken Truong
@kjjtruong
Apr 30 2016 02:57
@edhilgendorf that's what I did with mine.
@edhilgendorf maybe you're not properly grabbing the text/data
?
Edward Hilgendorf
@edhilgendorf
Apr 30 2016 03:05
@kjjtruong I got the quote and am able to append it to the site
not just able to change href attribute to the correct link that includes the quote
Did you use URIencode function?
Seems like it should be simple enough
  $("#tweeter").attr("href", "https://twitter.com/intent/tweet?text="+quoteEncoded+"");
This is inside my success function from the ajax callback
Dylan
@dhcodes
Apr 30 2016 03:09
can anyone help point me with a simon question?
you likely will need to have completed the simon project
Ken Truong
@kjjtruong
Apr 30 2016 03:16
@edhilgendorf yup! same thing and same place
Edward Hilgendorf
@edhilgendorf
Apr 30 2016 03:17
I just got it to work
I had to remove the twitter class from the button
I dont know why
I think the javascript snippet modifies it
Carrie A
@tuningmind
Apr 30 2016 05:15
I'd love some constructive criticism on my wikipedia viewer. I know my code and design is all over the place but I've been looking at it too long. https://codepen.io/tuningmind/full/NNOava/
it's all working, at least
Michael Karpinski
@karpimpski
Apr 30 2016 05:17
http://codepen.io/karpimpski/pen/aNRXOR do any of you guys know why this isn't making rows?
I want a 16x16 grid
Carrie A
@tuningmind
Apr 30 2016 05:21
@karpimpski The inside loop needs to reference each newly created div
instead you have it appending to the same place you have the outside loop appending to, the board
Michael Karpinski
@karpimpski
Apr 30 2016 05:22
@tuningmind that's the point. every time I reach 16 in one row, it ends that row. then it goes back to the loop and creates a new row
Carrie A
@tuningmind
Apr 30 2016 05:22
but you haven't done anything to instantiate individual rows in the board
Michael Karpinski
@karpimpski
Apr 30 2016 05:23
@tuningmind I'm using Bootstrap, so the class adds a new row, and I have it create a new row at the beginning of each loop
Carrie A
@tuningmind
Apr 30 2016 05:23
hm, let me look at it again
Michael Karpinski
@karpimpski
Apr 30 2016 05:23
@tuningmind I got it, I just had to make the boxes have a display of inline-block
Carrie A
@tuningmind
Apr 30 2016 05:25
oh, that is really interesting, I was not expecting that
@karpimpski would you take a quick look at my wikipedia viewer and see what you think?
Michael Karpinski
@karpimpski
Apr 30 2016 05:28
@tuningmind wow, that design is really fantastic!
@tuningmind one thing, you should add the title of the wiki article, not just the description
Carrie A
@tuningmind
Apr 30 2016 05:28
oh, that's right, forgot about that
Michael Karpinski
@karpimpski
Apr 30 2016 05:29
@tuningmind also, maybe make Wikipedia Viewer have caps? just a suggestion, obviously that's up to you
Carrie A
@tuningmind
Apr 30 2016 05:29
oh, that's easy enough. I was planning to import a font from dafont.com that happens to be all caps. you don't happen to know how to do that on codepen, do you?
Michael Karpinski
@karpimpski
Apr 30 2016 05:30
@tuningmind could you possibly take another look at my CSS and give me tips on how to reduce the space between my rows? not sure if you know a lot about Bootstrap
and I do! let me just look up the syntax real quick
Carrie A
@tuningmind
Apr 30 2016 05:30
cool, yes, I'll take a look at yours
Michael Karpinski
@karpimpski
Apr 30 2016 05:31
@tuningmind
<link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=your-font">
I'm not sure if that would help with your site, but that's google
let me see about that specific site
btw you put that in your head tag, or in CodePen you would put that in the CSS links
Carrie A
@tuningmind
Apr 30 2016 05:32
kk. I think your row problem may relate to overriding the bootstrap row class
Michael Karpinski
@karpimpski
Apr 30 2016 05:33
@tuningmind yeah, that's definitely what it is. I'm not quite sure how to switch that though, because I've tried both padding and margin
also, for dafont it looks like you have to download the font. you should just try to use a Google one, you can't upload files like that to CodePen
Carrie A
@tuningmind
Apr 30 2016 05:33
yeah, it's a specificity problem, so whatever you're doing with padding and margin is not being applied
ah. I'll have to see if Google has the font I want. Thanks for checking that out!
Michael Karpinski
@karpimpski
Apr 30 2016 05:34
@tuningmind I think I'll add another class then. should that work? addClass="row myRow" and then give myRow the padding amd margin I want?
Carrie A
@tuningmind
Apr 30 2016 05:34
depends on the specificity of the class you're writing
I'll do some googling while you try it
Michael Karpinski
@karpimpski
Apr 30 2016 05:36
@tuningmind just had to apply a negative space in the row class, apparently it's 0px by default
Carrie A
@tuningmind
Apr 30 2016 05:36
maybe use the bootstrap class as the first selector and then extend it...oh
heh
sweet
Michael Karpinski
@karpimpski
Apr 30 2016 05:40
@tuningmind yeah, thanks for your help!
CamperBot
@camperbot
Apr 30 2016 05:40
karpimpski sends brownie points to @tuningmind :sparkles: :thumbsup: :sparkles:
:star: 288 | @tuningmind | http://www.freecodecamp.com/tuningmind
Carrie A
@tuningmind
Apr 30 2016 05:40
cool, thanks to you too
wait, gotta do that right
@karpimpski thanks
CamperBot
@camperbot
Apr 30 2016 05:40
tuningmind sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:star: 351 | @karpimpski | http://www.freecodecamp.com/karpimpski
prashant
@findname
Apr 30 2016 05:49
function mutation(arr) {
  arr[0]=arr[0].toLowerCase();
  arr[1]=arr[1].toLowerCase();

 // if(arr[0].indexOf(arr[1])!==-1||arr[0].split("").reverse().join("").indexOf(arr[1])!==-1)
   // return true;


   var brr=arr[0].split("");
    var crr=arr[1].split(""); 

    for(var j=0;j < crr.length;j++)  
    { 
        if(arr.indexOf(crr[j])==-1)
          return false;
      }

  return true;  
}

mutation(["Hello", "hey"]);
whats wrong here anyone
Michael Karpinski
@karpimpski
Apr 30 2016 05:49
does anybody know about GitHub and willing to help me solve a problem?
@findname try making your if statement < 0
or === -1
prashant
@findname
Apr 30 2016 05:53
@karpimpski still not testcases are not validated right
made them ===
Michael Karpinski
@karpimpski
Apr 30 2016 05:55
@findname use toLowerCase()
JS displays H and h differently
oh you did, i didn't see
i thought you commented it out
@findname you have a typo
if(arr.indexOf(crr[j])==-1) should be if(brr.indexOf(crr[j])==-1)
prashant
@findname
Apr 30 2016 05:58
@karpimpski thanks ,worked fine now
CamperBot
@camperbot
Apr 30 2016 05:58
findname sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:star: 352 | @karpimpski | http://www.freecodecamp.com/karpimpski
Michael Karpinski
@karpimpski
Apr 30 2016 05:59
@findname no problem!
Carrie A
@tuningmind
Apr 30 2016 05:59
@karpimpski what's your github problem?
Michael Karpinski
@karpimpski
Apr 30 2016 06:01
@tuningmind well my sketch app isn't running correctly in the GitHub preview. the grid doesn't load
Carrie A
@tuningmind
Apr 30 2016 06:02
which exercise are you working on?
Michael Karpinski
@karpimpski
Apr 30 2016 06:04
@tuningmind I'm working on The Odin Project, it's not with FCC but I thought this would be a good place to ask
Carrie A
@tuningmind
Apr 30 2016 06:04
oh, okay. I'm not getting the context so I thought I'd look at it. Can you share the link for the project from Odin?
it should function like my CodePen I shared with you, with JS loading the grid
Carrie A
@tuningmind
Apr 30 2016 06:07
it should? I have not seen that behavior on github. I'd like to see where it is on your github.
found it
Michael Karpinski
@karpimpski
Apr 30 2016 06:08
@tuningmind other similar projects have worked on GitHub, and my JS works perfectly on PC and CodePen
Carrie A
@tuningmind
Apr 30 2016 06:08
so you're expecting the grid you've made so far to show on the github repo page?
Michael Karpinski
@karpimpski
Apr 30 2016 06:09
@tuningmind yeah, it's the same exact code as the code on my PC
Carrie A
@tuningmind
Apr 30 2016 06:09
it can be the same code, but github is not set up to "run" it
what is PC?
Michael Karpinski
@karpimpski
Apr 30 2016 06:09
@tuningmind I'm using Linux, I pushed my files directly to Git
Carrie A
@tuningmind
Apr 30 2016 06:10
yes, that doesn't run the code, that is just a place to store it, same as in your own directory
do you mean PC as in your local PC?
Michael Karpinski
@karpimpski
Apr 30 2016 06:10
@tuningmind yeah. GitHub can run code, you just use the GitHub preview site
Carrie A
@tuningmind
Apr 30 2016 06:11
where is that?
it loads my CSS and JavaScript, as seen with the button and clicking it
Carrie A
@tuningmind
Apr 30 2016 06:11
oh, cool!
Spencer Kuzara
@kodaxx
Apr 30 2016 06:11
Can anyone help with wiki viewer project? I felt like I knew what I was doing - but when I make the API request, sometimes I get success, and sometimes nothing. Can someone check and make sure it's not my code? Is it possible that it is the API? Using just URL's in my browser it seems to work fine, but using ajax to generate urls...its like it just ignores my button press sometimes..not sure
Carrie A
@tuningmind
Apr 30 2016 06:12
@kodaxx can you post a link?
Michael Karpinski
@karpimpski
Apr 30 2016 06:12
@tuningmind yeah, it's a nice tool! I use that to submit my code to Project Odin, but mine's not working and everybody else's did on their submissions
Michael Karpinski
@karpimpski
Apr 30 2016 06:12
@kodaxx if you don't get it, I'll try to help after this project. besides that, I really love your design!
Spencer Kuzara
@kodaxx
Apr 30 2016 06:13
Just started the JS, so the site is not functional yet - but using the console in chrome
Carrie A
@tuningmind
Apr 30 2016 06:13
@karpimpski do you have jquery linked? there's an error in the page saying $ is not defined
Michael Karpinski
@karpimpski
Apr 30 2016 06:13
@tuningmind yeah, I use jQuery for my button click
Carrie A
@tuningmind
Apr 30 2016 06:14
hm, it's saying it's insecure. so since you're opening from another side, you're running into either CORS or mime types
Michael Karpinski
@karpimpski
Apr 30 2016 06:15
@tuningmind yeah, I switched it to https gonna see what happens
Carrie A
@tuningmind
Apr 30 2016 06:15
kk
Spencer Kuzara
@kodaxx
Apr 30 2016 06:16
@karpimpski thanks! Now if only I could get it to work all the time....
CamperBot
@camperbot
Apr 30 2016 06:16
kodaxx sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:star: 353 | @karpimpski | http://www.freecodecamp.com/karpimpski
Spencer Kuzara
@kodaxx
Apr 30 2016 06:16
I think it is correct, because I do get the success message once in awhile. I'm just not sure why it won't work half the time
Michael Karpinski
@karpimpski
Apr 30 2016 06:17
@tuningmind there was some function to make HTTP sites secure by running them through some other site, but I forget what it is
Carrie A
@tuningmind
Apr 30 2016 06:18
@kodaxx one thing you've done different from when I was working on it is you have properties selected for your data. I did all that selection after the data was returned. I wonder if you're running into something with that?
@karpimpski hm, that sounds interesting
Spencer Kuzara
@kodaxx
Apr 30 2016 06:18
I've tried taking that out, no change in success rate
@tuningmind
Also, it DID work with that there...not sure why now it's being picky. Did you have to identify your client? Or whatever this API docs are babbling about? lol @tuningmind
Carrie A
@tuningmind
Apr 30 2016 06:20
lol, no I didn't, but it took a lot of fiddling to get it to work. I'm looking at mine again to see if I can reconstruct it
Spencer Kuzara
@kodaxx
Apr 30 2016 06:21
Okay, like I said..I thought I was doing things correctly - and it did work! But for some reason now, it's not.. @tuningmind thanks again
CamperBot
@camperbot
Apr 30 2016 06:21
kodaxx sends brownie points to @tuningmind :sparkles: :thumbsup: :sparkles:
:star: 289 | @tuningmind | http://www.freecodecamp.com/tuningmind
Carrie A
@tuningmind
Apr 30 2016 06:23
@kodaxx what happens if you add jsonp: "callback" to your ajax object?
Spencer Kuzara
@kodaxx
Apr 30 2016 06:23
I did not read that part of API, not sure what you mean?
Carrie A
@tuningmind
Apr 30 2016 06:24
because I think what needs to happen is that when the dataType is declared as jsonp, you have to also tell it what you want to do with the jsonp, and the success function you provide is the callback.
so the callback may unpack the p from the jsonp
$.ajax({
  dataType: "jsonp",
  url: URL,  
  jsonp: "callback",
  success: function (data) { ...
oh, my gpu is acting up, I have to shut down.
Spencer Kuzara
@kodaxx
Apr 30 2016 06:27
Oh hmm
I'm confused on that one lol I better look at it harder
It's really just that I can't get the server to respond to me consistently
Michael Karpinski
@karpimpski
Apr 30 2016 06:29
@tuningmind https://htmlpreview.github.io/?https://github.com/karpimpski/Etch-a-sketch/blob/master/index.html I got it working! just had to install the jQuery file and put it in my file
Santiago Morán
@SERJH
Apr 30 2016 06:37
@SERJH
Can anyone answer me a question about targeting with script?
$(".target:nth-child(3)").addClass("animated bounce");
shouldent that line target the third chil element of any element who has a "target" class?
child*
Michael Karpinski
@karpimpski
Apr 30 2016 06:38
@SERJH idk too much about that, but try 2
CSS may start at 0 like JS does
oh you're actually using jQuery, didn't notice. yeah, 2 should target the 3rd element
Santiago Morán
@SERJH
Apr 30 2016 06:39
yes, I mean, my code works fine, my problem is that I don't understand it
this is the code that it targets:
Michael Karpinski
@karpimpski
Apr 30 2016 06:40
@SERJH in JS most numbers are really the number minus 1, as JS starts at 0 and not 1
so that should target the 4th child, while using 2 should target the 3rd child
Santiago Morán
@SERJH
Apr 30 2016 06:41
<div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6">
Michael Karpinski
@karpimpski
Apr 30 2016 06:42
@SERJH none of those have a class of target
oh, the buttons do, my bad
Santiago Morán
@SERJH
Apr 30 2016 06:42
but why does it target the childs of <div class="well" id="left-well">
if div doesnt have a target class assigned
Michael Karpinski
@karpimpski
Apr 30 2016 06:43
@SERJH does it target everything in that div?
Santiago Morán
@SERJH
Apr 30 2016 06:44
it targets the button number 3
Michael Karpinski
@karpimpski
Apr 30 2016 06:44
@SERJH actually, it should do that. the jQuery class refers to CSS, where 3 actually means 3
@SERJH so yeah, everything's working fine with that code. all it does is basically add a CSS identifier .target:nth-child(3)
Santiago Morán
@SERJH
Apr 30 2016 06:48
yes i know but why look for div childs if div doesnt have a target class
shouldnt it search for the button childs? (if they had)
Michael Karpinski
@karpimpski
Apr 30 2016 06:51
@SERJH no, it looks for any .target that is the 3rd child of anything
Santiago Morán
@SERJH
Apr 30 2016 06:51
thanks
I misread I guess, my english isn't close to perfect yet :P
Michael Karpinski
@karpimpski
Apr 30 2016 06:52
@SERJH no problem. I know there's a way to do what you're talking about, but I forget the syntax
@SERJH hey, I didn't know English wasn't your first language. it's fine!
Rasheed Bustamam
@abustamam
Apr 30 2016 06:52
Hello everyone! I created a React Boilerplate because most boilerplates I found were either too opinionated or had an express server (c'mon, all I want is a front-end thing I can deploy to github...) Check it out here https://github.com/abustamam/react-boilerplate hope it helps! :)
Santiago Morán
@SERJH
Apr 30 2016 06:53
Yeah i get kind of lost sometimes trying to understand 100% of what the explanation says but it's fine
it just takes a little more time :)
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 07:10
f
ricoNomad
@NovaShark
Apr 30 2016 07:24
Hi everyone. I'm curious. I can't seem to get a fixed navbar in codepen. Is there something special that needs to be added other than getbootstrap?
Mauricio
@maudevelop
Apr 30 2016 07:34
Hey guys do you know of any react tutorials or how to set it up? I've seen many older tutorials using jsx transformer instead of babel and etc i'm just kinda lost on all that, whhere would i be able to start?
negyvenketto
@negyvenketto
Apr 30 2016 07:52
@NovaShark try adding the bootstrap to the javascript as well
@NovaShark i think i had the same problem and that was what fixed it
Spencer Kuzara
@kodaxx
Apr 30 2016 08:07
I absolutely cannot get Wikipedia API to respond consistently. It will respond every once in awhile (seemingly random) without changing any code. Not sure whats wrong but, I commented it out and tried another way - same thing. I then commented that block out as well and tried another way....no surprise..SAME THING. Anyone have any idea what is going on?
Bruce Young
@mutantspore
Apr 30 2016 08:21
@kodaxx you are using a Form. That causes a page reload when it’s submitted. to stop that default behaviour and give you control you can do this event.preventDefault();
here is a fork of your work with that added
http://codepen.io/MutantSpore/pen/PNyMdY?editors=1010
Spencer Kuzara
@kodaxx
Apr 30 2016 08:23
@mutantspore OMG YOU ARE A GENIUS! THANK YOU
CamperBot
@camperbot
Apr 30 2016 08:23
kodaxx sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1473 | @mutantspore | http://www.freecodecamp.com/mutantspore
Spencer Kuzara
@kodaxx
Apr 30 2016 08:23
How did you know?
Bruce Young
@mutantspore
Apr 30 2016 08:24
well I have been making forms since 1994 AND it comes up in this project several times a day lol. you are in good company
you may need .preventDefault() for other reasons too
there are other ways around it.. you could just not use the word “form” and make the section a div
Spencer Kuzara
@kodaxx
Apr 30 2016 08:26
Man, that was genius! Now I know. It's good knowledge. I was breaking my noggin trying to figure it out
You can see from the commented out sections that I tried several ways
Bruce Young
@mutantspore
Apr 30 2016 08:27
yes the problem is not alway were you are looking
that’s why seeing someone’s Pen is far better than trying to work out what’s wrong from a section of code they post
Spencer Kuzara
@kodaxx
Apr 30 2016 08:27
If it comes up so often, maybe it should be taught in the JSON API section? lol
It is a handy bit of knowledge
I wonder if that's the problem with my weather app
Works sometimes and sometimes it doesn't
Bruce Young
@mutantspore
Apr 30 2016 08:28
does your weather app not work in Chrome but in other browsers?
Spencer Kuzara
@kodaxx
Apr 30 2016 08:30
I don't ever try other browsers - but maybe I should
Why, is that a common thing also?
Marcel Schulz
@MarcelSchulz
Apr 30 2016 08:31
Chrome for example blocks geolocation on unsecure pages since the latest v50 release
Bruce Young
@mutantspore
Apr 30 2016 08:31
well if you are using the geolocate , Google have stopped it from working in the latest Chrome unless you uses your page as https://
Spencer Kuzara
@kodaxx
Apr 30 2016 08:31
Oh, well it sometimes works in Chrome
It seems to be working in Chrome and Firefox right now
Bruce Young
@mutantspore
Apr 30 2016 08:32
but if you do that .. you can’t call teh free Open Weather api as https://
ok. good
Spencer Kuzara
@kodaxx
Apr 30 2016 08:32
Its weird because I haven't changed the code at all lol
Bruce Young
@mutantspore
Apr 30 2016 08:33
if you call your codepen page as https:// and try then to load the weather api via http:// you wil end up with a security issue
Spencer Kuzara
@kodaxx
Apr 30 2016 08:33
That one may be a problem with the API not responding properly...maybe some kind of limiting on free API keys?
I mean, is that a thing? free key limits?
Bruce Young
@mutantspore
Apr 30 2016 08:34
yes but it would be hard to hit it.
wel they do’t like you calling the api a lot from the same device … for the same place
Spencer Kuzara
@kodaxx
Apr 30 2016 08:36
I bet that's it
Now I've got to figure out what to do with this wikipedia JSON data now that I've got it lol
Bruce Young
@mutantspore
Apr 30 2016 08:36
you are allowed 60 calls per min but supposedly only 1 call per 10 mins from the same device/key/place per min
Spencer Kuzara
@kodaxx
Apr 30 2016 08:37
It contains HTML which I've never seen before
Bruce Young
@mutantspore
Apr 30 2016 08:37
yes… :)
@kodaxx well you can request many true of data . have a play with teh “sandbox” to get what you want
Spencer Kuzara
@kodaxx
Apr 30 2016 08:39
I did see that, and have only requested the titlesnippet and article snippets
Not sure how I'm going to put them on the page yet
I love how the curriculum is a great mix of 'handholding' and 'sink or swim'
Bruce Young
@mutantspore
Apr 30 2016 08:40
you’ll either have to ask for an article ID or mess with the Title to form a URL to get to the page
Spencer Kuzara
@kodaxx
Apr 30 2016 08:41
Oh, article ID can give me the URL?
Bruce Young
@mutantspore
Apr 30 2016 08:41
Wikipedia API is a mess. I did spend quite awhile playing with teh sanbox and ended up using a completely different search
ceciliayang213
@ceciliayang213
Apr 30 2016 08:41
Hi! Can someone take a look at my wikipedia viewer? I can't get the userInput to be part of the url unless I hard code the value of the userInput.
Spencer Kuzara
@kodaxx
Apr 30 2016 08:42
I can help :)
Bruce Young
@mutantspore
Apr 30 2016 08:42
can we see your Pen?
Spencer Kuzara
@kodaxx
Apr 30 2016 08:42
Maybe anyway, I'm at the same point right now
Bruce Young
@mutantspore
Apr 30 2016 08:42
heheh lol go for it
Spencer Kuzara
@kodaxx
Apr 30 2016 08:42
I'd like to try
Bruce Young
@mutantspore
Apr 30 2016 08:43
@ceciliayang213@kodaxx wil give you a hand
ceciliayang213
@ceciliayang213
Apr 30 2016 08:43
I haven't put it in pen yet, but there is my .html
<div ng-controller="MainController">
<div>
<form id="myForm" name="myForm" ng-submit="getInput()">
<input id="user" name="user" type="text" ng-model="userInput" placeholder="search">
<button class="btn btn-info" type="submit">Go!</button>
</form>
</div>
<div class="panel panel-default" ng-repeat="result in results">
<div class="panel-heading">
<a ng-href="https://en.wikipedia.org/?curid={{result.pageid}}"><h1>{{result.title}}</h1></a>
</div>
<div class="panel-body">
<p>{{result.extract}}</p>
</div>
</div>
</div>
Spencer Kuzara
@kodaxx
Apr 30 2016 08:44
@ceciliayang213 Are you familiar with jQuery?
Randy Goldsmith
@Dueldrawer8
Apr 30 2016 08:44
how do i format the time into my function if i did timeConversion(61) it would return 1:01 (1 hour and 1 minute) instead of 1.1?
function timeConversion(minutes){ 

    var hours = Math.round(minutes / 60);
    if(minutes > 59){
        minutes = minutes % 60;
        return hours + ":"  + minutes;
    }
    else if(minutes < 10){
        return "0:0" + minutes;
    }
    else{
        return "0:" + minutes;
    }

}
Spencer Kuzara
@kodaxx
Apr 30 2016 08:44
@ceciliayang213 Are you using Angular???
Marcel Schulz
@MarcelSchulz
Apr 30 2016 08:44
can we see your controller, too?
ceciliayang213
@ceciliayang213
Apr 30 2016 08:45
and this is my .js

var app = angular.module('wikiApp', []);

app.factory('wikiService', function($http) {

var wikiService={};


wikiService.get=function(userInput) {

    return $http.jsonp('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=6&prop=extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='+userInput+'&callback=JSON_CALLBACK');

};
return wikiService;

});

app.controller('MainController', function($scope, wikiService) {

var getInput=function(){
    $scope.userInput=""; 

};

wikiService.get('cat').then(function(response) {


    console.log(response);

    $scope.wikiData=response.data.query.pages;
    $scope.results=[];


    angular.forEach($scope.wikiData, function(value, key){
        $scope.results.push($scope.wikiData[key]);
        $scope.ids.push($scope.wikiData[key].pageid);
        $scope.titles.push($scope.wikiData[key].title);
    });



});

});

Spencer Kuzara
@kodaxx
Apr 30 2016 08:46
$('#user').val(); should use jQuery to target your input form value
I'm not sure about angular at all, I've not gotten to that yet..you must have some experience with it though, seeing as you've coded that
ceciliayang213
@ceciliayang213
Apr 30 2016 08:48
@kodaxx I am learning jQuery and angular JS at the same time. And I'm trying to solve this challenge using Angular JS.
Spencer Kuzara
@kodaxx
Apr 30 2016 08:48
In your JS, you should be able to target your form value using that line^^ and store it in a variable. Then you can use that variable in your API request
Marcel Schulz
@MarcelSchulz
Apr 30 2016 08:48
where are you getting the value from your $scope.userInput? cant find that
Bruce Young
@mutantspore
Apr 30 2016 08:49
I don’t know enough Angular but the issue is that your form causes a page reload..
ceciliayang213
@ceciliayang213
Apr 30 2016 08:50
@MarcelSchulz I thought by using $scope.userInput="", the value of ng-model will be passed into it?
Marcel Schulz
@MarcelSchulz
Apr 30 2016 08:50
yeah, right now you’re not fetching the users input anywhere, are you?
ceciliayang213
@ceciliayang213
Apr 30 2016 08:52
@MarcelSchulz no... I spent hours on this, trying to figure out what I've been missing
@MarcelSchulz any advice?
Marcel Schulz
@MarcelSchulz
Apr 30 2016 08:54
Well, I'd say you'd want to get the model's value first and then do the request to get wikipedia api with the right input string
ceciliayang213
@ceciliayang213
Apr 30 2016 09:02
@MarcelSchulz I think that's where the problem is. Thanks!
CamperBot
@camperbot
Apr 30 2016 09:02
ceciliayang213 sends brownie points to @marcelschulz :sparkles: :thumbsup: :sparkles:
:star: 8 | @marcelschulz | http://www.freecodecamp.com/marcelschulz
ceciliayang213
@ceciliayang213
Apr 30 2016 09:02
@kodaxx And I am going to try your suggestion. Thank you!
Randy Goldsmith
@Dueldrawer8
Apr 30 2016 09:03
why does this return undefined?
function timeConversion(minutes){ 
    var minute
    if(minutes > 59){
        var hours = Math.round(minutes / 60);
        minute = minutes % 60;
    }
    else if (minutes < 10){
        minute = "0" + minutes;
    }

       return hours + ":" + minute;
}
ceciliayang213
@ceciliayang213
Apr 30 2016 09:05
@mutantspore I'll look at the form and figure out what went wrong. Thanks.
CamperBot
@camperbot
Apr 30 2016 09:05
ceciliayang213 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1474 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 30 2016 09:07
@ceciliayang213 I don’t know enough Angular but if you were using jQuery you’d need to add in event.preventDefault(); to stop the clicking of submit on the form from causing a page reload. I put the code you put here into a pen and it does cause a page reload
@ceciliayang213 ok looking at ng-submit it seems that it does take that into account ..
"Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page),"
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:13
@Dueldrawer8 fixed:
function timeConversion(minutes){ 
    var minute;
    var hours = 0;
    if(minutes > 59){
        hours = Math.round(minutes / 60);
        minute = minutes % 60;
    }
    else if (minutes < 10){
        minute = "0" + minutes;
    }
    else minute = minutes;

       return hours + ":" + minute;
}
Ahmed A.
@janusnjanus
Apr 30 2016 09:17
hi y'all, how can i make the header image background undivided ? i put in in the jumborton, and i guess since i have several div it get sliced ... https://codepen.io/janusjanus/pen/oxadmm?editors=1100
what i want to do is make the image stretch all over the top part ?
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:18
@Dueldrawer8 it was the flow of the program. only for times greater than 59 did both minute and hours get assigned anything other than undefined. and only for times less than 10 did minutes get it.. But from 59 to 10, neither of them ever got assigned values and times under 10 hours never did.
Randy Goldsmith
@Dueldrawer8
Apr 30 2016 09:20
@ChadKreutzer thanks
CamperBot
@camperbot
Apr 30 2016 09:20
dueldrawer8 sends brownie points to @chadkreutzer :sparkles: :thumbsup: :sparkles:
:star: 589 | @chadkreutzer | http://www.freecodecamp.com/chadkreutzer
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:21
no prob.
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:28
@janusnjanus I'm not seeing the image at all.
Ahmed A.
@janusnjanus
Apr 30 2016 09:30
@ChadKreutzer thats weird it is displayed for me ?
i mean visible ?
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:34
@janusnjanus I dunno. it might have been a problem with permissions. I got it working:
background-image: url("http://s32.postimg.org/d66u97kcz/Screen_Shot_2016_04_30_at_1_01_58_PM.png");
  background-repeat: no-repeat;
  background-size: cover;
change your url to that and add those other properties to the css.
Ahmed A.
@janusnjanus
Apr 30 2016 09:37
so by adding background-repeat and background-size that solved the problem
thank you
@ChadKreutzer got it thank you
CamperBot
@camperbot
Apr 30 2016 09:38
janusnjanus sends brownie points to @chadkreutzer :sparkles: :thumbsup: :sparkles:
:star: 590 | @chadkreutzer | http://www.freecodecamp.com/chadkreutzer
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:39
also, just so you know, you didn't need to create a background_header class or a white_text class if you were just using that image and font color in the jumbtron. you could have just done it thus:
.jumbotron {
  background-image: url("http://s32.postimg.org/d66u97kcz/Screen_Shot_2016_04_30_at_1_01_58_PM.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #000000;
  color: #FFFFFF;
}
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:44
@janusnjanus
Mayur Kulkarni
@maykulkarni
Apr 30 2016 09:48
what do you guys think about my random quote machine
http://codepen.io/mayur3086/pen/grBBpa
Chiara
@chiara-f
Apr 30 2016 09:50
@mayur3086 hey! visually it looks gorgeous! but the functionality of the "random quote" doesn't seem to work (ie the text never changes) :confused:
kirbyedy
@kirbyedy
Apr 30 2016 09:50
it works for me
the tweet button does not dough :)
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:52
^^ ditto on the tweet. also, the font is already not the easiest font to read. when you couple that with some of the color choices (lime green) it can get pretty hard to read.
Stephen James
@sjames1958gm
Apr 30 2016 09:52
@mayur3086 Some of the color combinations are not good. The buttons could be better positioned maybe spread out more evenly rather than shifted to the right.
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 09:54
@mayur3086 perhaps use this: http://paletton.com/ enter in the color you want for the background and try "add complementary" and if you like it, use that color for the font.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 09:55
@chiara-f are you using chrome?
@chiara-f the API i m using has some security issues with chrome, try using firefox it works perfect
Chiara
@chiara-f
Apr 30 2016 09:55
@mayur3086 unfortunately i am on firefox
Mayur Kulkarni
@maykulkarni
Apr 30 2016 09:56
@chiara-f it works perfectly at my place :-(
Chiara
@chiara-f
Apr 30 2016 09:57
@chiara-f i tried diasbling my https everywhere add on and now it works
*disabling
kirbyedy
@kirbyedy
Apr 30 2016 09:57
tried it on firefox, works, but it has some strange delay
first the color changes, than I have to wait like 2 seconds, then the quote changes
hmmm...
Mayur Kulkarni
@maykulkarni
Apr 30 2016 09:58
@kirbyedy internet slow?
@kirbyedy because it fetches the quote from their site
kirbyedy
@kirbyedy
Apr 30 2016 09:58
well it works good on chrome, so I dont think that is an issue
Chiara
@chiara-f
Apr 30 2016 09:58
Untitled.jpg
@mayur3086 i get a green stripe at the bottom... ?
Mayur Kulkarni
@maykulkarni
Apr 30 2016 09:59
@chiara-f It happens when you change the quote and then change the dimensions of the window
@chiara-f if you make the view fullscreen and then keep clicking change, it will work fine. Strange bug.
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:00
@chiara-f @mayur3086 I did too in editor view. in debug view it works fine.
Chiara
@chiara-f
Apr 30 2016 10:01
@ChadKreutzer aha. maybe it's a codepen thing. @mayur3086 have you tried viewing it outside of codepen? does it present the same issue?
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:01
@chiara-f outside of codepen it works fine
how do I change the color of buttons?
StackOverflow tells me to change
```
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2;
}
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:02
@mayur3086 I do have to say though, if your twitter button as coded doesn't want to play well with chrome, it would be best to treat that like a bug.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:03
@ChadKreutzer I'm working on the tweet button, looking for a way to change the anchor text
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:04
This message was deleted
nevermind that last one.

@mayur3086 this:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #FFFFFF;
}

is designed to change bootstraps default btn-primary class and you aren't using it in your html.

Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:07
@ChadKreutzer How do I make it change like the background? Do I need to make a custom bootstrap?
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:08
@mayur3086 instead, try this:
#myButton {
     background-color: <whatver color you want>;
}
@mayur3086 are you wanting the button to change color each time along with the font and the background?
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:12
@ChadKreutzer yeah
@ChadKreutzer your code works fine, I'll create 4 classes and then use jQuery to add and remove classes
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:16

that works too. or this works too:
HTML :

<div id="myButton" class=" btn  ">Change</div>
        <div id="twitter" class=" btn ">Tweet</div>

CSS:

#myButton {
    margin-top: 5px;
    float: right;
    margin-bottom: 5px;
    background-color: #568203;
}

#twitter {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #568203;
}

JS:

$('body').animate({backgroundColor: colors[i]}, 'slow');
    $('#texty').css("color", colors[i]);
    $('#myButton').css("background-color", colors[i]);
    $('#twitter').css("background-color", colors[i]);
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:17
@ChadKreutzer perfect! thanks
CamperBot
@camperbot
Apr 30 2016 10:17
mayur3086 sends brownie points to @chadkreutzer :sparkles: :thumbsup: :sparkles:
:star: 591 | @chadkreutzer | http://www.freecodecamp.com/chadkreutzer
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:19
@mayur3086 even better, combine the two jQuery into one:
$('#myButton, #twitter').css("background-color", colors[i]);
don't forget to consider using paletton.com to add some interest to your page and make the text easier to read.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:22
@ChadKreutzer great! I'll sure check that
Marcel Schulz
@MarcelSchulz
Apr 30 2016 10:25
better use css instead of jquery whenever you can
Using jquery makes it unnessecarily heavy
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:26
he's using the jquery to change the color on each button click.
Marcel Schulz
@MarcelSchulz
Apr 30 2016 10:29
don’t you think the creating classes and randomingly assigning them would be a better practice?
… at least as long as he doesn’t need it to have all possible color combinations
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:30
he had an existing framework. I was just working within that rather than rewriting his whole thing. ;)
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:32
@ChadKreutzer how do I add href to the bootstrap btn like using anchor
Marcel Schulz
@MarcelSchulz
Apr 30 2016 10:32
ha okay, it just always causes me headaches when i see css manipulations in jquery :D
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:32
@ChadKreutzer or should I just leave the button alone and write jQuery to make a href request?
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:33
I'm not sure I follow what you are asking.
@mayur3086 are you wanting to make add an href to one of your existing buttons?
Mayur Kulkarni
@maykulkarni
Apr 30 2016 10:42
@ChadKreutzer I've added the twitter functionality. But when you click on the twitter button, it adds <p> </p> in the twitter
@ChadKreutzer how do I avoid it?
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:52
@mayur3086 it looks like the <p></p> tags are built in to the api you are using (in fact, because of that, you are probably adding some unnecessary tags when you build your expression) you may have to use regex to strip them out.
@mayur3086 or even easier use String.slice() to chop off the first 3 and last 4 characters.
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 10:58
@mayur3086 change your curr like this:
curr = a[intg].content.slice(3, -6) + "\n--" +a[intg].title ;
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:00
@ChadKreutzer ```
for (var i = 0; i < curr.length; i++) {
            if (curr[i] == "<" && curr[i + 1] == "p" && curr[i + 2] == ">") {
                i += 2;
                continue;
            } else if (curr[i] == "<" && curr[i + 1] == "/" && curr[i + 2] == "p" && curr[i + 3] = ">") {
                i += 3;
                continue;
            }
                filtered.push(curr[i]);
        }
hahaha I wrote some cheesy logic that failed badly
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:02
@mayur3086 no. that's the way your learn. even if it had worked you would have learned something.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:03
@ChadKreutzer my for loop looks correct though doesnt work
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:03
@mayur3086 part of it is that curr is a string and you are wanting to treat it like an array.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:04
@ChadKreutzer but if there's a string lets say var myString = "Mayur" and if I do myString[1] so it should output 'a' right?
@ChadKreutzer Strings are nothing but array of characters right?
Adam El-Naggar
@adamelnaggar
Apr 30 2016 11:06

Hey, so I've created this little meditation timer web app and it works as it should on desktop browsers. It's responsive and works on mobile also, however when the timer starts and finishes it's supposed to play html5 audio. This won't work on mobile, I've tested it on iOS Safari/Chrome and Chrome for Android.

I have the audio set to play with setTimeout functions after the click to begin the timer. Is there anyway I can get something like this to work and play on mobile? I'm struggling to find any solution that will work.

Here is the app: http://automatecutback.co.uk/breathe/

Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:07
No. strings are immutable. you would have to do curr = curr.split(""); before the loop and curr = curr.join(""); after the loop.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:07
@adamelnaggar amazing app!
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:07
have you done the algorithim challenges?
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:07
@ChadKreutzer yeah I did them all
@ChadKreutzer I come from Python and Java background so all concepts are messed up in my brain
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:09
@mayur3086 that's alright. I came from a C++ background. I got so frustrated at first with how forgiving and unstructured JS is.
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:10
@ChadKreutzer yeah everything is so messy, it's so easy and structured in Java
Adam El-Naggar
@adamelnaggar
Apr 30 2016 11:11
@mayur3086 thanks, it's annoying that I can't get the audio to work for mobile though :worried:
CamperBot
@camperbot
Apr 30 2016 11:11
:star: 275 | @mayur3086 | http://www.freecodecamp.com/mayur3086
adamelnaggar sends brownie points to @mayur3086 :sparkles: :thumbsup: :sparkles:
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:13
@adamelnaggar bdw a suggestion, the up and down arrows on the timer section, I should get a hand cursor when I hover on them, instead im getting a typing cursor
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:13
@mayur3086 I have found https://developer.mozilla.org to be invaluable
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:13
@ChadKreutzer oh you work on firefox too?
Theodore P.
@Ierofantis
Apr 30 2016 11:14
can anyone help me and review my simon says code and guide me?I am stuck
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:14
@ChadKreutzer I tried contributing to firefox but it's just too complicated to start contributing too
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:14
no. but javascript 'belongs' to Mozilla. thus the definitive JS reference lives there.
Adam El-Naggar
@adamelnaggar
Apr 30 2016 11:14
@mayur3086 great idea will fix it :smile:
Tanmay Agrawal
@tanmay7270
Apr 30 2016 11:32
Hello Everyone. I need help with my portfolio page.
http://codepen.io/tanmay7270/pen/pyPmLm?editors=1000
Here, in the code under the comment "Social Network Buttons".
Those buttons are meant to be placed below "front end developer" and they were until today I opened it and they just vanished
though the code is untouched and I can't seem to find any problem in it. Please help
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:45
@tanmay7270 the two button are right there, you can view it using ctrl+A
@tanmay7270 the icons are missing
@tanmay7270 did you copy paste the code from somewhere?
Chiara
@chiara-f
Apr 30 2016 11:47
hello everyone. so I'm trying to code a webpage in Russian and i don't know why it's not working. i usually use atom.io as a text editor. but anytime i type something in Russian it gets converted into question marks every time i hit save
Tanmay Agrawal
@tanmay7270
Apr 30 2016 11:47
No, I wrote it myself, it was weeks ago, and it was there until today.
Chiara
@chiara-f
Apr 30 2016 11:47
Untitled.jpg
and i know that atom.io can work with cyrillic, i just don't know how
Marcel Schulz
@MarcelSchulz
Apr 30 2016 11:49
Screen Shot 2016-04-30 at 13.48.29.png
have you tried changing the charset in the lower right corner where it says “utf8” on my screenshot?
Chiara
@chiara-f
Apr 30 2016 11:51
@MarcelSchulz you absolute genius you!
it was right under my nose!
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:51
@tanmay7270 read this tutorial https://lipis.github.io/bootstrap-social/ and follow each step carefully
Chiara
@chiara-f
Apr 30 2016 11:52
@MarcelSchulz thanks!
CamperBot
@camperbot
Apr 30 2016 11:52
chiara-f sends brownie points to @marcelschulz :sparkles: :thumbsup: :sparkles:
:star: 9 | @marcelschulz | http://www.freecodecamp.com/marcelschulz
Mayur Kulkarni
@maykulkarni
Apr 30 2016 11:52
@tanmay7270 recheck if you have included the necessary files in the project
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:52
@tanmay7270 I moved the whole social section to the actual contact section and they showed up. but boy are they tiny.
Tanmay Agrawal
@tanmay7270
Apr 30 2016 11:53
thanks @mayur3086
CamperBot
@camperbot
Apr 30 2016 11:53
tanmay7270 sends brownie points to @mayur3086 :sparkles: :thumbsup: :sparkles:
:star: 276 | @mayur3086 | http://www.freecodecamp.com/mayur3086
Tanmay Agrawal
@tanmay7270
Apr 30 2016 11:53
@ChadKreutzer Lol, but I want em on the Home as well
and big
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 11:54
@tanmay7270 on a hunch, after seeing what they looked like down in contacts, I tried undoing what I had done and sure enough: they are there. they are just white on white so you can't see them.
Tanmay Agrawal
@tanmay7270
Apr 30 2016 11:56
They were white before too. They were visible and they were BIG.
They just disappeared today.
I'll just import everything again and write the section again
I figured it, they just moved to a different white background
Tanmay Agrawal
@tanmay7270
Apr 30 2016 12:07
JUST HAD TO MOVE ONE </div> to get it under "home" page.
thanks @ChadKreutzer
CamperBot
@camperbot
Apr 30 2016 12:07
tanmay7270 sends brownie points to @chadkreutzer :sparkles: :thumbsup: :sparkles:
:star: 592 | @chadkreutzer | http://www.freecodecamp.com/chadkreutzer
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 12:08
@tanmay7270 much better
Tanmay Agrawal
@tanmay7270
Apr 30 2016 12:08
and big too :D
Chad Kreutzer
@ChadKreutzer
Apr 30 2016 12:10
indeed
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:10
Hi I need help aligning an image with text next to it.

'code'

<div class="row">
<div class="col-xs-6">
<img src="https://static.pexels.com/photos/42387/pexels-photo-42387-large.jpeg" style="float:left;">
</div>
<div class="col-xs-6">
<h2 style="text-align:center; float:right;">Design</h2>
<p style="text-align:center; float:right;">Visual & Digital design is the way I communicate. What started as a hobby, developed later into an unstoppable passion. I handcode HTML and CSS, creating effecient and relevent websites.</p>
</div>
</div><!-- end of row-->

for some reason, this is not working and im not sure what it is
Tanmay Agrawal
@tanmay7270
Apr 30 2016 12:12
This message was deleted
This message was deleted
This message was deleted
the doer
@ewathedoer
Apr 30 2016 12:14
@mahmoudahmedalaa if you wanna learn more on floats also this episode of dev tips is pretty useful on floats https://www.youtube.com/watch?v=xFGBNv2KeVU
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:14
img is self closing for HTML 5, so with or without it doesnt patter
I tried using float @ewathedoer , doesnt produce the wanted outcome
Tanmay Agrawal
@tanmay7270
Apr 30 2016 12:16
@mahmoudahmedalaa Right, my bad :smile: . Thanks
CamperBot
@camperbot
Apr 30 2016 12:16
:star: 131 | @mahmoudahmedalaa | http://www.freecodecamp.com/mahmoudahmedalaa
tanmay7270 sends brownie points to @mahmoudahmedalaa :sparkles: :thumbsup: :sparkles:
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:16
'code'
img {
opacity: 0.6;
filter: alpha(opacity=40); / For IE8 and earlier /
width: 700px;
height: auto;
}
'code'
This is the CSS i applied for the img elements
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:21
anyone?
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:24
do you have a codepen for this @mahmoudahmedalaa ?
Jacob Bogers
@jacobbogers
Apr 30 2016 12:25
hellloooo
Andrew Charlebois
@andrewchar
Apr 30 2016 12:26
@mahmoudahmedalaa what is not working for you
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:27
What I am trying to do is place an image on the left and text on the right, then below it text on the left and image on the right
So I used the <div row> and I used Bootstapr's col-md-6 for image then col-md-6 for text. but I cant get them to be next to each other
You can see it in the html, under the about section.
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:29
the col-md-6 are set to 100% width for some reason, seems like bootstrap is not loading properly, let’s check
Andrew Charlebois
@andrewchar
Apr 30 2016 12:30
you dont have bootstrap in your options
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:31
he’s linked it in the head though
Andrew Charlebois
@andrewchar
Apr 30 2016 12:31
and you need to use a div class container
look at the consol log
its not working
404
i just included bootstrap in options and wrapped with class container and it works
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:32
well yeha, sorry was wrong
you need to select bootstrap from the css options to include it
no need to wrap in another container though
it’s already in a div.row
Andrew Charlebois
@andrewchar
Apr 30 2016 12:33
oh? thought rows had to be wrapped with container
been a while ive used bootstrap
ive been using my own little responsive grid system i customized. been working out nicely.
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:34
which one do you use?
I’m constantly looking for the one perfect grid system
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:35
I thought I already included it in my settings. For some reason it was not selected again. I just selected it and it works, although my fonts are a bit off now
Andrew Charlebois
@andrewchar
Apr 30 2016 12:35
its called responsive grid system. and i just customized the syntax and breakpoints and changed margins and such that they had
mahmoudahmedalaa
@mahmoudahmedalaa
Apr 30 2016 12:36
Thanks @MarcelSchulz @andrewchar
CamperBot
@camperbot
Apr 30 2016 12:36
mahmoudahmedalaa sends brownie points to @marcelschulz and @andrewchar :sparkles: :thumbsup: :sparkles:
:star: 412 | @andrewchar | http://www.freecodecamp.com/andrewchar
:star: 10 | @marcelschulz | http://www.freecodecamp.com/marcelschulz
Andrew Charlebois
@andrewchar
Apr 30 2016 12:37
apparently a good one to use is pure. i have not tried it
made by yahoo i think?
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:37
I’m currently messing around with http://getskeleton.com/
it’s dead lightweight
Andrew Charlebois
@andrewchar
Apr 30 2016 12:38
i just checked bootstrap to make sure about this info and its saying you need to wrap rows with container
reason : for proper alignment and padding. i guess that doesnt make such a big deal if your not picky.
ahh yes i looked into that one
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:39
well, in theory you would have to do that if you’re willing to go full-bootstrap
Andrew Charlebois
@andrewchar
Apr 30 2016 12:39
i was going to use it but decided i would stick with what i customized lol
Marcel Schulz
@MarcelSchulz
Apr 30 2016 12:39
It doesnt make a technical difference though and I prefer not to use all of bootstrap since its pretty heavy
Andrew Charlebois
@andrewchar
Apr 30 2016 12:40
yeah ive shied away from it for that reason
CaffeineQueen
@CaffeineQueen
Apr 30 2016 12:50
Is there a list of all possible main weather conditions for OpenWeather?
Jacob Bogers
@jacobbogers
Apr 30 2016 12:55
hello
Caff yes there is
it is coded,
if you see a json reply from openweather you can see what kind of condition, "partly cloudy" etc, it has numeric codes
its all explained in the online doc of the api
Bruce Young
@mutantspore
Apr 30 2016 13:00
CaffeineQueen
@CaffeineQueen
Apr 30 2016 13:01
Thank you, @mutantspore
CamperBot
@camperbot
Apr 30 2016 13:01
caffeinequeen sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1475 | @mutantspore | http://www.freecodecamp.com/mutantspore
Mason Rojik
@Mason-Rojik
Apr 30 2016 13:42
any change someone could look at this challenge "Sum All Primes" if fails at sumPrimes(977) should return 73156.
function sumPrimes(n) {
var sum=0;  
var arr=[];  
function isPrime(num) {
    if(num < 2) return false;
    for (var i = 2; i < num; i++) {
        if(num%i===0)
            return false;
    }
    return true;
}
for(var i = 0; i < n; i++){
    if(isPrime(i)) sum +=(i);

}
return sum;

// return prime;

}
Zito Relova
@zitorelova
Apr 30 2016 13:43
hey guys need help
how do you put the navbar on the portfolio page
Mason Rojik
@Mason-Rojik
Apr 30 2016 13:46
Zito Relova
@zitorelova
Apr 30 2016 13:47
thanks
Ahmed A.
@janusnjanus
Apr 30 2016 14:01
@Mason-Rojik on the same subject <navbar> how could i make the icons on the right side, i have navbar options for the page on the left and i want the social media icons on the right https://codepen.io/janusjanus/pen/oxadmm?editors=1100
aligned to the navbar items not under it !?
Ahmed A.
@janusnjanus
Apr 30 2016 14:25
@Mason-Rojik sorry should've looked at the link you provided before asking, got it .... thank you
CamperBot
@camperbot
Apr 30 2016 14:25
janusnjanus sends brownie points to @mason-rojik :sparkles: :thumbsup: :sparkles:
:star: 299 | @mason-rojik | http://www.freecodecamp.com/mason-rojik
Brandon
@Daxo
Apr 30 2016 14:49
Hey everybody! I’ve been trying to figure this issue out for an hour and I’m stumped… I’m working on the twitch API project and I can’t get the right name value when I call the array of streamers inside my API call. It works fine outside the API but inside the $.getJSON it just calls the last value http://codepen.io/apeiron/pen/GZYJvN?editors=0001
I think it might be an async error but I can’t seem to figure it out
Jacob Bogers
@jacobbogers
Apr 30 2016 14:53
twitch api?
what is that?
Moisés Man
@moigithub
Apr 30 2016 15:00
@Daxo twich uses 2 API endpoints channels and streams
Zac Clemans
@zaclem01
Apr 30 2016 15:03

So I'm having trouble getting my tooltip to show up in the D3 map project. I see in the inspector that the div is there with the correct info, but it's hidden under the svg paths for the country, and I can't figure out how to bring it up. Any thoughts?

Version without tooltips: http://codepen.io/thalpha/pen/wGxEyo?editors=1010

Version with tooltips: http://codepen.io/thalpha/pen/EKOxwV (this one makes transitions buggy as well).

one sec, fixing something
Moisés Man
@moigithub
Apr 30 2016 15:04
@zaclem01 u could use z-index to put it above the others elements
Zac Clemans
@zaclem01
Apr 30 2016 15:06
I tried with the div, and it didn't seem to help. As I understand, svg elements don't have z-index, so I unfortunately can't use that either.
unless I did it wrong which is a possibility
Moisés Man
@moigithub
Apr 30 2016 15:07
.tooltip{
   z-index: 9999;
}
so the div goes on top @zaclem01
Oleg Korol
@olegkorol
Apr 30 2016 15:07
Hi everyone! I am a little bit stuck writing a small script for this challenge https://www.freecodecamp.com/challenges/mutations
The script that I wrote works 99% of time but in some cases it just fails and I do not see why... Maybe someone could have a quick look at it and tell me what is wrong?
The script itself: http://jsbin.com/johehi/edit?html,console
Thanks a lot in advance!
PS: it just fails for --> mutation(["mary", "aarmy"])
Zac Clemans
@zaclem01
Apr 30 2016 15:09
edited and still doesn't want to show @moigithub
Moisés Man
@moigithub
Apr 30 2016 15:10
@olegkorol if u access each character of
check = string.indexOf(mustHave[i]); mustHave[i]
then ur loop should be
for (var i=0; i<string.length; i++) { based on mustHave too (NOT string)
cuz mustHave and string have diff lenght.. so i will be different
Zac Clemans
@zaclem01
Apr 30 2016 15:11
I can even highlight where it should be and copy/paste, but it isn't visible for some reason
Moisés Man
@moigithub
Apr 30 2016 15:13
@zaclem01 open devtools (F12) console..n check if u have any errors...
Oleg Korol
@olegkorol
Apr 30 2016 15:13
@moigithub Oh, thanks a lot! I failed to see that mistake ;)
CamperBot
@camperbot
Apr 30 2016 15:13
olegkorol sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star: 1030 | @moigithub | http://www.freecodecamp.com/moigithub
Oleg Korol
@olegkorol
Apr 30 2016 15:13
It works now :)
Zac Clemans
@zaclem01
Apr 30 2016 15:14
@moigithub other than the typical recursion errors on codepen and d3 mutation warnings, nothing from my end. :worried:
Moisés Man
@moigithub
Apr 30 2016 15:15
i see on ly a black map... on my screen
Zac Clemans
@zaclem01
Apr 30 2016 15:15
refresh, I had my async calls set up improperly
I had to go through and fix a minute ago
Brandon
@Daxo
Apr 30 2016 15:16
@moigithub I’m not even trying to call the API(that part works perfectly) I’m trying to call the value of the array of streamers that I definied outside my for loop and it won’t access them correctly within the API call
When you call the API for a streamer that isn’t online, it doesn’t return a name so I can’t pass an API value when I want to show that streamer as offline
Moisés Man
@moigithub
Apr 30 2016 15:22
@Daxo ahh u mean the console.log(streamerName); inside the getJSON callback...
Brandon
@Daxo
Apr 30 2016 15:23
@moigithub yes, sorry! Should have clarified ><
Moisés Man
@moigithub
Apr 30 2016 15:24
yes.. it will hold only last value (cuz the variable getting overrided inside the for/loop... so when the callback returns (async) ... it will only show the last value
@Daxo but u can extract data from the JSON returned object... probably try /streams api first.. then /channels
Brandon
@Daxo
Apr 30 2016 15:34
Oooooohhhhh
@moigithub thanks! didn’t think of that
Come on camper bot!
Jackson Leb
@JackLeb130111
Apr 30 2016 15:34
does anyone know why my JQuery wont execute:

Html: //<html>

<head>
<title>Jackosn's simple drawing program</title>


<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

</head>

<body>

<button class = "reset"><i class="fa fa-retweet" aria-hidden="true"></i> RESET </button>
<button class = "red"><i class = "fa fa-circle red_Circle" aria-hidden="true"></i> RED </button>
<button class = "blue"><i class = "fa fa-circle blue_Circle" aria-hidden="true"></i> BLUE </button>
<button class = "yellow"><i class = "fa fa-circle yellow_Circle" aria-hidden="true"></i> YELLOW </button>
<button class = "black"><i class = "fa fa-circle black_Circle" aria-hidden="true"></i> BLACK </button>
<h1 class = "col-xs-12 instruction"> Keep strokes smooth to prevent jagged lines </h1>
<div class = "parent"></div>

</body>

</html>

Stephen James
@sjames1958gm
Apr 30 2016 15:35
Unpaid jquery tax?
Jackson Leb
@JackLeb130111
Apr 30 2016 15:35

CSS: //body {
background-color: #000000;
display: hidden;
}

div.pixel {
height: 12px;
width: 12px;
background-color: white;
display: inline-block;
margin-bottom: 0px;
display: grid;
}

.instruction {
color: #093480;
}

div.parent {
line-height: 6px;
}

.red_Circle {
color: red;
}

.blue_Circle {
color: blue;
}

.yellow_Circle {
color: yellow;
}

.black_Circle {
color: black;
}

JQuery:

//$(document).ready(function() {
$('div').mouseenter(function() {
$(this).css('background-color', '#000000');

});

});
$('.red').click(function() {
$('div').mouseenter(function() {
$(this).css('background-color', 'red');
$('.blue').click(function() {
$('div').mouseenter(function() {
$(this).css('background-color', '#0000FF');
$('.yellow').click(function() {
$('div').mouseenter(function() {
$(this).css('background-color', '#FFFF00');
$('.black').click(function() {
$('div').mouseenter(function() {
$(this).css('background-color', '#000000');
});
});
});
});
});
});
});
});

$('.reset').click(function() {
$('div').css('background-color', 'white')

});

function generate(){
for(var i=0;i<20000;i++){
$(".parent").append($("<div class='pixel'></div>"))
}
}
generate();

Alex
@rollsthomas
Apr 30 2016 15:41
@JackLeb130111 use the backticks to close your code to display it better when posting your code. You can find the Markdown help button at the bottom right.
Jackson Leb
@JackLeb130111
Apr 30 2016 15:42

HTML: ''' <html>

<head>
<title>Jackosn's simple drawing program</title>


<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

</head>

<body>

<button class = "reset"><i class="fa fa-retweet" aria-hidden="true"></i> RESET </button>
<button class = "red"><i class = "fa fa-circle red_Circle" aria-hidden="true"></i> RED </button>
<button class = "blue"><i class = "fa fa-circle blue_Circle" aria-hidden="true"></i> BLUE </button>
<button class = "yellow"><i class = "fa fa-circle yellow_Circle" aria-hidden="true"></i> YELLOW </button>
<button class = "black"><i class = "fa fa-circle black_Circle" aria-hidden="true"></i> BLACK </button>
<h1 class = "col-xs-12 instruction"> Keep strokes smooth to prevent jagged lines </h1>
<div class = "parent"></div>

</body>

</html> '''

CamperBot
@camperbot
Apr 30 2016 15:42
:bulb: to format code use backticks! ``` more info
Jackson Leb
@JackLeb130111
Apr 30 2016 15:42
oh haha did the wrong punctuation
sry bout dat
Alex
@rollsthomas
Apr 30 2016 15:43
@JackLeb130111 to be honest, I just learned it yesterday myself. I did the wrong punctuation as well at first.
Jackson Leb
@JackLeb130111
Apr 30 2016 15:44

<head>
  <title>Jackosn's simple drawing program</title>


  <link rel='stylesheet' type='text/css' href='stylesheet.css' />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script type='text/javascript' src='script.js'></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

</head>

<body>

  <button class = "reset"><i class="fa fa-retweet" aria-hidden="true"></i> RESET </button>
  <button class = "red"><i class = "fa fa-circle red_Circle" aria-hidden="true"></i> RED </button>
  <button class = "blue"><i class = "fa fa-circle blue_Circle" aria-hidden="true"></i> BLUE </button>
  <button class = "yellow"><i class = "fa fa-circle yellow_Circle" aria-hidden="true"></i> YELLOW </button>
  <button class = "black"><i class = "fa fa-circle black_Circle" aria-hidden="true"></i> BLACK </button>
  <h1 class = "col-xs-12 instruction"> Keep strokes smooth to prevent jagged lines </h1>
  <div class = "parent"></div>

</body>

</html>

``` body {
background-color: #000000;
display: hidden;
}

div.pixel {
height: 12px;
width: 12px;
background-color: white;
display: inline-block;
margin-bottom: 0px;
display: grid;
}

.instruction {
color: #093480;
}

div.parent {
line-height: 6px;
}

.red_Circle {
color: red;
}

.blue_Circle {
color: blue;
}

.yellow_Circle {
color: yellow;
}

.black_Circle {
color: black;
}```

``` body {
background-color: #000000;
display: hidden;
}

div.pixel {
height: 12px;
width: 12px;
background-color: white;
display: inline-block;
margin-bottom: 0px;
display: grid;
}

.instruction {
color: #093480;
}

div.parent {
line-height: 6px;
}

.red_Circle {
color: red;
}

.blue_Circle {
color: blue;
}

.yellow_Circle {
color: yellow;
}

.black_Circle {
color: black;
} ```

damn it

CSS: ``` body {
background-color: #000000;
display: hidden;
}

div.pixel {
height: 12px;
width: 12px;
background-color: white;
display: inline-block;
margin-bottom: 0px;
display: grid;
}

.instruction {
color: #093480;
}

div.parent {
line-height: 6px;
}

.red_Circle {
color: red;
}

.blue_Circle {
color: blue;
}

.yellow_Circle {
color: yellow;
}

.black_Circle {
color: black;
} ```

Alex
@rollsthomas
Apr 30 2016 15:49
body {
background-color: #000000;
display: hidden;
}
div.pixel {
height: 12px;
width: 12px;
background-color: white;
display: inline-block;
margin-bottom: 0px;
display: grid;
}
.instruction {
color: #093480;
}
div.parent {
line-height: 6px;
}
.red_Circle {
color: red;
}
.blue_Circle {
color: blue;
}
.yellow_Circle {
color: yellow;
}
.black_Circle {
color: black;
use shift+enter for line break.
Islam Ibakaev
@dagman
Apr 30 2016 16:12
hey guys check out my super animated button http://codepen.io/dagman/full/RaemXK/
Tulio Natale
@tuliodnw
Apr 30 2016 16:35

hello people im doing the quote api challenge, im getting the data in console, but i dont know how to show it in the html, pls, help wanted

http://codepen.io/tuliodnw/pen/grBqgr?editors=0011

@dagman really pretty
Christian Todd
@chrstntdd
Apr 30 2016 17:34
So I'm working on the tribute page and I wanted to incorporate a bootstrap carousel, but I cant seem to get the arrows to function properly due to the use of the href tag. adding the target="_blank" attribute didnt alleviate the issue. Anyone ever run into this issue?
Christian Todd
@chrstntdd
Apr 30 2016 17:52
@chrstntdd AHA! I found the solution. All I needed to do was add role="button" to my list of attributes. Thank you, me.
CamperBot
@camperbot
Apr 30 2016 17:52
sorry chrstntdd, you can't send brownie points to yourself! :sparkles: :sparkles:
max77p
@max77p
Apr 30 2016 18:00
$.ajax({
  url: '//en.wikipedia.org/w/api.php',
  data: { action: 'query', generator:'allpages', gaplimit:'4', grapfrom:'T', prop:'links', format: 'json' },
  dataType: 'jsonp',
  success: function (x) {
    console.log(x);
  }
});
can somone tell me what i am doing wrong
here
trying to console.log 4 pages that start with T
Spencer Kuzara
@kodaxx
Apr 30 2016 18:04
@ceciliayang213 Did that work?
ok so this code works in terms of pulling 10 searches for 'Madrid'
i know in order to make an url i would have to put whatever is in 'title' next to normal wiki link
or add to it
but i am wondering if there is easier way to just pull the url from the api?
anyone please
Edward Hilgendorf
@edhilgendorf
Apr 30 2016 18:13
Anyone know why I might be able to view JSON with API Key and Parameters in my browser, but it 404's when it tries to pull from CodePen?
I don't believe it is HTTPS
Brandon
@Daxo
Apr 30 2016 18:21
@max77p In the api you can use “generator” instead of search
max77p
@max77p
Apr 30 2016 18:22
@Daxo i am not sure i understand the difference
Brandon
@Daxo
Apr 30 2016 18:22
generator has a page id value that you can just put at the end of wikipedia.com/####
max77p
@max77p
Apr 30 2016 18:22
ohhh ic ok
Brandon
@Daxo
Apr 30 2016 18:22
I don’t quite understand the difference other than it has that value lol
max77p
@max77p
Apr 30 2016 18:23
just for understanding purposes if i wanted to do it the way i have it right now how would it work?
i can't seem to pull the "fullurl" parameter
Brandon
@Daxo
Apr 30 2016 18:23
I did it the way you had it now
Brandon
@Daxo
Apr 30 2016 18:23
I don’t think there is one
so
Brandon
@Daxo
Apr 30 2016 18:24
you can just put the text at the end of the URL and it’ll work
max77p
@max77p
Apr 30 2016 18:24
yes that one i get, but i don't want to deal with the whole having to convert space and what not
the id or fullurl is probably best way, but just for education purpose, i can't seem to get the fullurl part working
any idea?
from that link
Brandon
@Daxo
Apr 30 2016 18:25
you don’t have to
Brandon
@Daxo
Apr 30 2016 18:25
or at least I don’t think so
Lokesh
@lokesh541
Apr 30 2016 18:25
This message was deleted
Brandon
@Daxo
Apr 30 2016 18:26
@max77p I did it without ID
you don’t even have to convert the spaces
Lokesh
@lokesh541
Apr 30 2016 18:26
incrementing session length is not working can any one help http://codepen.io/lokesh541/pen/zraaeX
Brandon
@Daxo
Apr 30 2016 18:26
@max77p wikipedia is smart enough to convert it for you if you just pass the plain text
max77p
@max77p
Apr 30 2016 18:27
@Daxo oh you are right haha
Brandon
@Daxo
Apr 30 2016 18:27
try it yourself: “ https://en.wikipedia.org/wiki/Portugal–Spain border"
yep
Jackson Leb
@JackLeb130111
Apr 30 2016 18:31
Can anyone help/tell me how to make my program less taxing on my computer, it sometimes crashes just for simple actions
max77p
@max77p
Apr 30 2016 18:31
for practice sake i am just trying to make this work, but i can't
getting url from search 'Madrid'
ideas?
@Daxo
Brandon
@Daxo
Apr 30 2016 18:32
@max77p what do you mean?
you need to take the title and construct it yourself
max77p
@max77p
Apr 30 2016 18:33
@Daxo but according to this https://www.mediawiki.org/wiki/API:Info
i can get 'url'
unless i am wrong
Brandon
@Daxo
Apr 30 2016 18:34
yeah I couldn’t make it work when I did it
although it does look like its part of the inprop url value
also you gotta say “Thanks @username” for people to get brownie points :)
CamperBot
@camperbot
Apr 30 2016 18:36
daxo sends brownie points to @username :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for username
max77p
@max77p
Apr 30 2016 18:36
@Daxo haha thanks...k ill just do the id way, but going to have to try the fullurl way letter to master this
CamperBot
@camperbot
Apr 30 2016 18:36
max77p sends brownie points to @daxo :sparkles: :thumbsup: :sparkles:
:star: 288 | @daxo | http://www.freecodecamp.com/daxo
max77p
@max77p
Apr 30 2016 18:37
@Daxo if you figure it out before me, would love to know how you did it, thanks!
CamperBot
@camperbot
Apr 30 2016 18:37
max77p sends brownie points to @daxo :sparkles: :thumbsup: :sparkles:
:warning: max77p already gave daxo points
Jeremy Benson
@jb840w
Apr 30 2016 18:45
hey all, having trouble figuring out a simple way to limit the number of digits in my calculator display. Any thoughts? http://codepen.io/jb840w/pen/WwaPzX/?editors=0100
Jackson Leb
@JackLeb130111
Apr 30 2016 19:26
@JackLeb130111
Can anyone help/tell me how to make my program less taxing on my computer, it sometimes crashes just for simple actions
http://codepen.io/JackLeb130111/pen/xVyYjv
Eldar Tinjić
@EldarT90
Apr 30 2016 20:02
```js
function restart() {
  setTimeout(function(){ 
    $(".field").html("");
      $(".winningMessage").css("z-index", "-1");   document.getElementsByClassName('field').style.pointerEvents = 'auto';     
  }  , 2000 )
}
```
why is my clickability not returned
Aleksander
@truetheris
Apr 30 2016 20:55
why i can't see users with account cloesed https://codepen.io/truetheris/full/VaEoyE/
John Sevilla
@jsevilla274
Apr 30 2016 21:00
anyone particularly knowledgeable of ajax?
Tyler
@tylergross
Apr 30 2016 21:09
@jsevilla274 what question do you have?
Dylan
@dhcodes
Apr 30 2016 21:09
@jb840w each time you push a button, maybe it could check something like: if (!screen.length > 10) {
that way it only adds the value if the screen.length is not greater than 10
@truetheris users without an account should return a different status code so you can use an if statement to apply something to users with that status code
check the json you are returning for it
John Sevilla
@jsevilla274
Apr 30 2016 21:13
@tylergross lets say i've made multiple ajax requests at once, and at the very last loaded ajax request I want to execute a function. How would i pull this off?
Tyler
@tylergross
Apr 30 2016 21:14

@jsevilla274 I did this when i used my weather app, i used one ajax request to pull the users IP address and then I used another ajax request to pull the weather directly after the first request

jQuery(document).ready(function($) {
$.ajax({
  url : "http://api.wunderground.com/api/38195373fe1adfb8/geolookup/q/autoip.json",
  dataType : "jsonp",
  success : function(parsed_json) {
  var state = parsed_json['location']['state'];
  var city = parsed_json['location']['city'];
  city = city.replace(" ", "_");
  urli = "http://api.wunderground.com/api/38195373fe1adfb8/conditions/q/"+state+"/"+city+".json";

$.ajax({
  url : urli,
  dataType : "jsonp",
  success : function(parsed_jsons) {
  var curImage = parsed_jsons['current_observation']['icon_url'];
  var curWeather = parsed_jsons['current_observation']['weather'];
    $("#images").html(curWeather + " <img src='"+curImage+"'>");
  var temperatureF = parsed_jsons['current_observation']['temp_f'];
  temperatureF += "ºF";
  var temperatureC = parsed_jsons['current_observation']['temp_c'];
  temperatureC += "ºC";
    $(".temperature").html("<a href='#'>"+temperatureF + "</a>");
  var cityName = parsed_jsons['current_observation']['display_location']['city'];
    $(".cityname").html(cityName);
    $(".temperature").click(function () {
               var text = $('.temperature').text();
               $(this).text(text == temperatureC ? temperatureF : temperatureC);
        });
      }        
  });




      }        
  });



});

probbably not the right way but it worked

not really sure if that's what you're asking or not are you trying to check when all requests are finished loading?
Bobby McDonald
@BobbyMcWho
Apr 30 2016 21:15
Can anyone audit my code and advise why UTF characters are not appearing correctly?
John Sevilla
@jsevilla274
Apr 30 2016 21:17
@tylergross thank you, i found the answer to my problem but your response also gives me some more insight
CamperBot
@camperbot
Apr 30 2016 21:17
jsevilla274 sends brownie points to @tylergross :sparkles: :thumbsup: :sparkles:
:star: 358 | @tylergross | http://www.freecodecamp.com/tylergross
fijeko
@fijeko
Apr 30 2016 21:45
@JackLeb130111 you have a loop of 8100 iteration Try to check off auto update preview in settings, and try mosuemove event ,
Scott
@macengr
Apr 30 2016 21:54
I am getting frustrated with Simon. I can't get the game to stop and wait for the player to enter a sequence. I'd appreciate anyone taking a look and giving me some ideas: http://codepen.io/macengr/pen/vLqgem
Bobby McDonald
@BobbyMcWho
Apr 30 2016 21:57
OH goodness
it had me stuck with prompt slol
Stephen James
@sjames1958gm
Apr 30 2016 21:59
@EldarT90 You still around?
Michael Karpinski
@karpimpski
Apr 30 2016 22:06
@macengr I'll look more deeply in a second, but I put an event listener in and didn't play the game until then
@macengr yeah, only have one play after start click. then, don't play until the player clicks
Michael Karpinski
@karpimpski
Apr 30 2016 22:12
@macengr another problem is you declare i in your click function, but use it in other places. if you want the value to carry over you have to make it global
nevermind, you have it all in the one function for some reason
Tulio Natale
@tuliodnw
Apr 30 2016 23:01
can someone help me to put te quotations mark in the same line as the string
Samuel Mandell
@smandell
Apr 30 2016 23:10
anyone available to help troubleshoot a JS issue with me for the Random Quote Machine project?
on my $.ajax() call I'm setting datatype: 'json' but it's still passing a string to my success()
and I have no idea why...
I know that I can call JSON.parse() on that string to get the JSON object, but I want to understand why that datatype flag is not being respected
so
$.ajax({
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
type: 'GET',
datatype: 'json',
success: function(result) {
//result will be a string and not a JSON object...
}
Moisés Man
@moigithub
Apr 30 2016 23:17
@smandell i think its dataType (case sensitive ,uppercase T)
Santiago Morán
@SERJH
Apr 30 2016 23:19
Hey guys how do I enter a text inside of an element's border?
Samuel Mandell
@smandell
Apr 30 2016 23:28
@moigithub - that did it... geez i missed compilers...
need help here, i can't seem to pull pageid using generator in my api call
what am i doing wrong?\
d wilder
@alhazen1
Apr 30 2016 23:32
@SERJH I think you might do better with a div in a div - box in a box. The outer box would become the 'border'.
robynsmith
@robynsmith
Apr 30 2016 23:36
Hello all
I’m looking for some tips on the tictactoe project
What should I use for the GUI part of it? I’m doing some research and there are drawing libraries that use jquery and there is canvas
Anotehr strategy is using buttons
Anyone have any ideas?
max77p
@max77p
Apr 30 2016 23:50
anyone free to help? thanks! trying to figure out how to get pageids output in my api call for wiki
Scott
@macengr
Apr 30 2016 23:58
@robynsmith I used bootstrap and CSS