These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Feb 2017
berndbausch
@berndbausch
Feb 14 2017 00:15
Dear community. Trying to complete the "Random Quote" challenge #259, I am at a loss why I can't send a string to Twitter. I generate this HTML code:
'''<form target='_blank' action='https://twitter.com/intent/tweet?text=bla'><button id='tweet-btn' class='btn btn-primary'>Tweet the quote</button></form>'''
CamperBot
@camperbot
Feb 14 2017 00:15
:bulb: to format code use backticks! ``` more info
berndbausch
@berndbausch
Feb 14 2017 00:15
OK let me try again. Trying to complete the "Random Quote" challenge #259, I am at a loss why I can't send a string to Twitter. I generate this HTML code:
<form target='_blank' action='https://twitter.com/intent/tweet?text=bla'><button id='tweet-btn' class='btn btn-primary'>Tweet the quote</button></form>
But, Twitter only receives the part before the question mark.
When I enter the URL directly into the browser, I get the expected result - a twitter window with "bla" in it. When I submit the URL via the form, I get an empty twitter window. What am I missing?
Adel
@AdelMahjoub
Feb 14 2017 00:19
@ICodeWateverIFeelLikeCoding because input is an inline element, set a width and margin-auto to the div that contains the input field
berndbausch
@berndbausch
Feb 14 2017 00:19
Adel
@AdelMahjoub
Feb 14 2017 00:19
@ICodeWateverIFeelLikeCoding or set the display of the input field to block
Tiffany Grevious
@DevchamploO
Feb 14 2017 00:36
When a player clicks a square it logs several repeats and logs it as incorrect. Why?
http://codepen.io/DevchamploO/pen/KrRpqq
Gulsvi
@gulsvi
Feb 14 2017 00:42
@berndbausch Try a different approach. Remove the form and the button. If your tweet text was "helloWorld", your URL would be: https://twitter.com/intent/tweet?text=helloWorld
What's the easiest way, in HTML, to allow someone to go to that link?
Get that working first, and then style it like a button
berndbausch
@berndbausch
Feb 14 2017 00:42
<a href>
I thought of that, but how do I style this like a button?
Gulsvi
@gulsvi
Feb 14 2017 00:43
You add the same classes you used on the <button> tag. class="btn btn-primary"
berndbausch
@berndbausch
Feb 14 2017 00:43
Thanks. (rolling up the sleeves)
Gulsvi
@gulsvi
Feb 14 2017 00:43
<a class="btn btn-primary" href="link to twitter">Tweet the quote</a>
berndbausch
@berndbausch
Feb 14 2017 00:44
Still I would like to understand what's wrong with my code. Can't sleep at night because of it :)
Thanks @SkyCoder01, seems to work.
CamperBot
@camperbot
Feb 14 2017 00:46
berndbausch sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 192 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 14 2017 00:46
I'm still learning, but I think if you want a <form> to do a certain action, you need to use a submit function in javascript
I could be wrong there, so don't quote me on that. (no pun intended :))
berndbausch
@berndbausch
Feb 14 2017 00:47
<form> should work without Javascript. It has existed since the early times of HTML. And I will add your quote to my product :)
Gulsvi
@gulsvi
Feb 14 2017 00:47
lol
If you have more than one button in a form though, how do you tell one of the buttons to submit and the other to clear the contents of a text field, for example?
maybe that's what type="submit" is for on the button?
berndbausch
@berndbausch
Feb 14 2017 00:48
I guess the HTML <form> is limited. In any case, my knowledge of these matters is.
Muhammad Muhktar Musa
@mcube25
Feb 14 2017 01:57
please how do i support multi character numbers in my calculator excercise
Steven
@Ironwrangler
Feb 14 2017 02:10
Good evening everyone
Nicholas Liu
@jumpship91
Feb 14 2017 02:23
@jumpship91
can someone tell me why "function(data)" works? Where is it getting the "data"?
http://codepen.io/Jumpship91/pen/GrvJOL
Tyler Moeller
@TylerMoeller
Feb 14 2017 02:25
@jumpship91 It's getting the data from this page: https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
Open that URL in your browser to see it in plain text
Nicholas Liu
@jumpship91
Feb 14 2017 02:26
@TylerMoeller what is telling my page that the response is "data"?
versus any other variable
Tyler Moeller
@TylerMoeller
Feb 14 2017 02:27
Hmm, just a second, I'll try to explain
var data = 'hello';
function sayHello(data) {
  console.log(data); // this outputs 'hello'
}
It's the same as that above, only $.ajax is going to the URL you give it and assigning the data at the URL to data instead of you creating your own variable
Nicholas Liu
@jumpship91
Feb 14 2017 02:29
@TylerMoeller ahhh, gotcha. So ajax is assigning behind the scene.
Tyler Moeller
@TylerMoeller
Feb 14 2017 02:30
Yes, ajax does a lot of magic behind the scenes - one important part is that it waits until it gets a response back from the website before processing any of the code inside function(data) {}
@jumpship91 That will be important when you get to the weather challenge - because you'll have to get location, wait for the response, and then get weather for that location
Nicholas Liu
@jumpship91
Feb 14 2017 02:30
thanks Tyler! One more question....doesn't this API give a JSON response? Why is it working even though I am breaking the same origin policy?
Tyler Moeller
@TylerMoeller
Feb 14 2017 02:31
That API gives an array back actually
But some APIs will return JSON
The cross-origin/same-origin policy is also different for different APIs - it all depends on how they set it up
Nicholas Liu
@jumpship91
Feb 14 2017 02:33
@TylerMoeller makes sense now. Thanks!!!
CamperBot
@camperbot
Feb 14 2017 02:33
jumpship91 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1485 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
CJ
@CJ2340392
Feb 14 2017 02:33
Hi all,how to select the checkbox and change the text color?http://codepen.io/a2340392/pen/jydyWj
Tyler Moeller
@TylerMoeller
Feb 14 2017 02:33
No problem - have fun with your quote machine :+1:
@CJ2340392 Unfortunately, checkbox styling can be complicated. Maybe read through this answer for some ideas: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
CJ
@CJ2340392
Feb 14 2017 02:40
@TylerMoeller Thanks
CamperBot
@camperbot
Feb 14 2017 02:40
cj2340392 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1486 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ThurstianTsui
@ThurstianTsui
Feb 14 2017 03:21

Hi everyone: I'm having trouble with my first HTML project (creating a tribute page). http://codepen.io/ThurstianTsui/pen/EZGjVx

I have two main issues right now:

  1. I can't seem to manipulate the image properly. I've tried to use bootstrap to round the corner / create a circle image with img-rounded and img-circle. I've also tried to center the image but haven't been to make it work.
  2. I've been struggling to bold certain parts of a sentence. The way I've been doing it in the code is with <p class="text-center"><strong>Bold Test</strong> A shining pillar in the NBA community</p>. However, the formatting has no change.

Can anyone shed some light on what I should be doing differently?

Matthew Long
@MattLong87
Feb 14 2017 04:09
@ThurstianTsui I don't know anything about img-rounded or img-circle, but in the exercises they just had us use border-radius:50%;
Harley Kruse
@HamishAus
Feb 14 2017 04:26
Why don't you use css to style certain classes bold? @ThurstianTsui
Why is every button opening the same link?
ik why its doing that, but don't know how to fix it
Gulsvi
@gulsvi
Feb 14 2017 04:50
@Athabasco Wrap each of your .articles in a hyperlink (<a></a>) rather than registering a click even handler for each one.
<button> and <input> are meant for submitting information. <a> is meant for following a link.
Chase
@Athabasco
Feb 14 2017 04:51
@SkyCoder01 alright
Chase
@Athabasco
Feb 14 2017 05:16
@SkyCoThank you. it is working now.
@SkyCoder01 I know what they do, but window.open wasn't the way
now the search only works once
R^2
@iriquoi
Feb 14 2017 05:25
can some one help me with this please
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>

<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</nav>
its just not working?!
it lines all my hrefs in the midle bootstrap never does its thing?
Chase
@Athabasco
Feb 14 2017 05:29
@iriquoi try it without quotations
just href=#
R^2
@iriquoi
Feb 14 2017 05:33
That's so funky...it just doesn't do anything...??
it lines up every thing in the midle
I guess ill keep trying thank for your response @Athabasco
CamperBot
@camperbot
Feb 14 2017 05:34
iriquoi sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @athabasco |http://www.freecodecamp.com/athabasco
this is what I get!! aHHH!!!
BryantWood
@BryantWood
Feb 14 2017 05:39
I think part of the issue is bootstrap in codepen. Add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> and you atleast get the header. Still weird centering
R^2
@iriquoi
Feb 14 2017 05:40
I wonder if its a bug?
Ill do more research
any ideas on why "thumbnail" isnt doing anything and why my image isn't snapping to size?
Ashan Mohammed
@AshanMohammed
Feb 14 2017 05:53
Hello! Why can't i change the color of my h1 tag here?
 <div class="container-fluid row mainsection">
      <div class="col-lg-6" id="sec1">
         <h1 class="text-center" id="cololoo">South Africa…It’s here!</h1>    
      </div>

      <div class="col-lg-6" id="sec2">

      </div>
  </div>
R^2
@iriquoi
Feb 14 2017 05:57
@BryantWood this is what you need to do
remove bootstrap from the css settings
and paste this on your html stuff for head settings
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
BryantWood
@BryantWood
Feb 14 2017 06:00
are we doing something wrong or is codepen just off?
I feel like we shouldnt be having to put in JS for bootstrap to do its thing.
R^2
@iriquoi
Feb 14 2017 06:02
apparently some things are not supported on bootstrap 4
keep a copy of the links and youll be fine
let me know if it worked so I know.
it wont let me save but I know it worked :smile:
mazury
@mazury
Feb 14 2017 06:13
Hello, anyone knows why this works in chrome, opera, edge, but not in Firefox?? http://codepen.io/anon/pen/EZrXqo?editors=0010
R^2
@iriquoi
Feb 14 2017 06:17

@AshanMohammed like this <div class="container-fluid row mainsection">
<div class="col-lg-6" id="sec1">
<h1 style="color:red" class="text-center" id="cololoo">South Africa…It’s here!</h1>
</div>

  <div class="col-lg-6" id="sec2">

  </div>

</div>

BryantWood
@BryantWood
Feb 14 2017 06:18
hey @iriquoi , that worked. Sorry, got caught up in trying to clean things up.
Thanks for your help.
R^2
@iriquoi
Feb 14 2017 06:18
no problem
Jonathan Doron
@JonathanDn
Feb 14 2017 07:55

HELP WITH D3 - anyone here could go through my code and explain to me what have I done wrong that my circles are not fixed to the x axis?

https://jsfiddle.net/8gnx5nns/227/

@alpox Hey, I wanted the circles to stick to the xAxis when scrolling right and left. And also when Zooming in to re-render at their position(x)
Monesul Haque
@mones-cse
Feb 14 2017 08:20
@JonathanDn are you expecting output something like this ?
blob
Jonathan Doron
@JonathanDn
Feb 14 2017 08:25

@mones-cse There are 2 behaviors:

  1. scrolling left and right - I expect the green circles to stay where they we're originally rendered for example if one of the circles was rendered on 9:30 am it should stay there on the x Axis even when moving right or left.

  2. zoom - when zooming in and out - I expect the 9:30 green circle to re-render itself back to 9:30 on the new resolution of the x Axis

buiphuking
@buiphuking
Feb 14 2017 08:29
anybody explain me why we should put GOOGLE PLUS into web?
Zhanibek
@zhann1982
Feb 14 2017 08:45
Hello, friends! I am writing code for Random Quote Machine. I have problem with quotes that exseed 140 characters. Can you give me an advice how to get only short quotes?
Alien
@AlienAvatar
Feb 14 2017 08:48
Hello everyone,i'm already complete assignment.what do you think of the Webpage?give me some advice.thanks http://codepen.io/AlienAvatar/pen/YNBrox
Zhanibek
@zhann1982
Feb 14 2017 08:51
Hello, friends! I am writing code for Random Quote Machine. I have problem with quotes that exseed 140 characters. Can you give me an advice how to get only short quotes?
Brandon
@bd1887
Feb 14 2017 08:56
@zhann1982 There might be a way to ask for only short quotes from the api. I'm not sure which you're using to pull quotes from.
Alien
@AlienAvatar
Feb 14 2017 08:57
@zhann1982 Could you show me your bug code?what problem with you?
Brandon
@bd1887
Feb 14 2017 08:57
@zhann1982 Otherwise, you could use .length to check the length of the quote and if it's too long, make another ajax request for a new quote
Mahmoud Ahmed
@Lartwel
Feb 14 2017 09:06
What's wrong here with cloning nodes?
 function generateFaces(){
    var x=0, y=0;
        var numberOfFaces =3;
        var theLeftSide=document.getElementById("leftSide");
        var theRightSide=document.getElementById("rightSide");

  numberOfFaces = numberOfFaces + Math.floor(Math.random()*6);

           for(var i=numberOfFaces;i>0;i--){
                var x=Math.floor(Math.random()*400);
                var y=Math.floor(Math.random()*400);
                var img_tag=document.createElement("img");
                img_tag.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                img_tag.style.left=x +'px';   //left 0>>400px
                img_tag.style.top=y +'px';     //right 0>>400px
                 var leftSideImages=theLeftSide.appendChild(img_tag);

               /*problems start here*/
                var xx=document.createElement('div');
                xx=leftSideImages.cloneNode(true);
                theRightSide.appendChild(xx);


               x=x+10; y=y+10; 

            }}
Zhanibek
@zhann1982
Feb 14 2017 09:26
@bd1887 @AlienAvatar Thank you all. I will try to request shorter quotes
CamperBot
@camperbot
Feb 14 2017 09:26
zhann1982 sends brownie points to @bd1887 and @alienavatar :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for alienavatar
:cookie: 341 | @bd1887 |http://www.freecodecamp.com/bd1887
Radek
@radekjohn
Feb 14 2017 10:04
Hi, I am trying to call ajax inside for loop, this way:
but the loop does not work. anybody knows why?
Clyde Lobo
@oppiniated
Feb 14 2017 10:07
It's working. Your URL is wrong. You keep on appending to the url variable hence it gets so long.
Radek
@radekjohn
Feb 14 2017 10:11
@oppiniated yes, i see. but how do i reset the url before using it again? i tryed to ad url = ""; on the end of the loop, but it makes "" from all items of the list
Clyde Lobo
@oppiniated
Feb 14 2017 10:13
That's so trivial. Instead of doing url = url + users[i]; you can do var tmpURL = url + users[i]; and use tmpURL with the ajax call
Radek
@radekjohn
Feb 14 2017 10:15
@oppiniated Oh, does not seem trivial to me :-)
@oppiniated thanks a lot. I will try it
CamperBot
@camperbot
Feb 14 2017 10:15
radekjohn sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 569 | @oppiniated |http://www.freecodecamp.com/oppiniated
Radek
@radekjohn
Feb 14 2017 10:16
see you
Clyde Lobo
@oppiniated
Feb 14 2017 10:18
@radekjohn The more you code, the better you will get. Also remember, you should also look at code from others. How other's write code.
Radek
@radekjohn
Feb 14 2017 10:21
@oppiniated I thing i ma actually getting worse :-)
Chadd Williams
@chaddd980
Feb 14 2017 10:41
hey guys. so i have a function that is supposed to iterate through an array of mp3 links and play the sound. however the play() requests are getting interrupted by the next one in the loop, so only the last one ever plays. i’ve tried creating a function within the loop and then calling it, and i tried using setTimeout and nothing seems to work. If anyone had any insight that’d be great (i’m using react, but i don’t really think that matters for this)
  randomCry() {
    var self = this
    for (let i = 0; i < this.state.randomSound.length; i++) {
      var randomPokemon = this.state.randomSound[i]
      var audio = self.state.audio
      audio.src = randomPokemon
      audio.play();
    }
  }
Jonathan Doron
@JonathanDn
Feb 14 2017 10:48
D3.JS HELP please - this is my fiddle https://jsfiddle.net/8gnx5nns/233/ I don't understand why my green circles are not appending on top of the x axis in their right position x. Could anyone help ?
Brandon
@bd1887
Feb 14 2017 11:04
@chaddd980 Do you have it up on Codepen?
AlejoFCC
@AlejoFCC
Feb 14 2017 11:08
Good morning! I am using a Mac, and trying to insert an image from my Mac in my portfolio challege, but all i have tried it is wrong. Someone can tell me how to do it? I am stuck, I didn't find any clear on internet. Thank you.
Chadd Williams
@chaddd980
Feb 14 2017 11:09
no i don’t @bd1887
kirbyedy
@kirbyedy
Feb 14 2017 11:14
@AlejoFCC I guess you will have to upload it somewhere on the internet in order to be publicly accessible
@AlejoFCC for example: https://postimage.io/
AlejoFCC
@AlejoFCC
Feb 14 2017 11:16
@kirbyedy Thank you. I will try to use links from my google drive account or google photos. It could work.
CamperBot
@camperbot
Feb 14 2017 11:16
alejofcc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
kirbyedy
@kirbyedy
Feb 14 2017 11:19
@AlejoFCC make sure those images from the google photos are publicly accessible
AlejoFCC
@AlejoFCC
Feb 14 2017 11:20
@kirbyedy I can't from Drive. I will try with Photos. Thank you.
CamperBot
@camperbot
Feb 14 2017 11:20
alejofcc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1782 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
dsillydude
@dsillydude
Feb 14 2017 12:37
@AlejoFCC your own photo?
there is this site with cool photos you could use
OmarMoh
@OmarMoh
Feb 14 2017 12:54
or just use imgur
Tiboski
@Tiboski
Feb 14 2017 13:04
Hello everyone,
is there anyone with codepen xp who got a few minutes for me?
Radek
@radekjohn
Feb 14 2017 13:10
Hi guys, I am trying to use ajax inside a for loop and it does not work for me. Here is what I have:
kirbyedy
@kirbyedy
Feb 14 2017 13:11
@Tiboski what is the problem ?
Radek
@radekjohn
Feb 14 2017 13:12
Does anybody here know why the loop is not looping? When i try to let it just write user names, it works ok. The problem seems to be in ajax call
taltmann42
@taltmann42
Feb 14 2017 13:13
@radekjohn check the console:
error:"forbidden"
msg:"unaccepted route: streams/ - see https://wind-bow.gomix.me/ for infos"
Radek
@radekjohn
Feb 14 2017 13:15
@taltmann42 well, i can call the ajax for each user separately. I just wantet do do it in more legant way
@taltmann42 thanks
CamperBot
@camperbot
Feb 14 2017 13:16
radekjohn sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 504 | @taltmann42 |http://www.freecodecamp.com/taltmann42
kirbyedy
@kirbyedy
Feb 14 2017 13:17
@radekjohn maybe you could try to use forEach()
taltmann42
@taltmann42
Feb 14 2017 13:18
@radekjohn ahh, i see the problem now
Radek
@radekjohn
Feb 14 2017 13:18
@kirbyedy hm, maybe. thanks
CamperBot
@camperbot
Feb 14 2017 13:18
radekjohn sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1783 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Radek
@radekjohn
Feb 14 2017 13:18
@taltmann42 where?
taltmann42
@taltmann42
Feb 14 2017 13:18
@radekjohn you're giving the parameter url to the API, but url is an just the urlPrep plus an empty string (user) at that point
you then set user in the for-loop but that doesn't change the url
So you're firing 8 requests to /streams not, 8 different requests with the user in the url
Matthew
@Krimsonmedic
Feb 14 2017 13:21
I'm stuck on the random quote generator
any hints on why my button doesn't work?
Radek
@radekjohn
Feb 14 2017 13:22
@taltmann42 so I have to set set url inside the ajax function?
taltmann42
@taltmann42
Feb 14 2017 13:24
@radekjohn update the url in the for-loop before you pass it to the ajax
Radek
@radekjohn
Feb 14 2017 13:25
@taltmann42 This way?
kirbyedy
@kirbyedy
Feb 14 2017 13:27
@Krimsonmedic where is that id floaty ?
Radek
@radekjohn
Feb 14 2017 13:27
@taltmann42 probably no
taltmann42
@taltmann42
Feb 14 2017 13:27
@radekjohn well it shows results now
@radekjohn the problem you just encountered is quite common, and has to do with javascript closures
@radekjohn the ajax-callback get's called way after the for-loop finished, because the server has to provide you with the information. By the time the callback get's finally called, you refer to user inside the callback for example. The loop itself has finished so in the variable user is only the last entry
@radekjohn a simple way to solve this is to have a function e.g. getStreamData(user).
This function then builds the url with the user parameter and makes the ajax call. You simply call this function in your for-loop. That works because in that case each instance of user is in its own context
Radek
@radekjohn
Feb 14 2017 13:32
@taltmann42 I think I understand. I will lokk at it and try it. thanks a lot
CamperBot
@camperbot
Feb 14 2017 13:32
radekjohn sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: radekjohn already gave taltmann42 points
Radek
@radekjohn
Feb 14 2017 13:34
see you, guys
Paul Freeman
@pfreema1
Feb 14 2017 13:39
could anyone explain to me the "media breakpoint" concept with bootstrap?
is it basically the container will arrange itself differently according to window size?
fixed it, still not working
@kirbyedy
taltmann42
@taltmann42
Feb 14 2017 13:43
@Krimsonmedic first, there's invalid HTML: <div class = "jumbotron text-center>"
then, i don't think onlick would do anything ;)
Matthew
@Krimsonmedic
Feb 14 2017 13:45
That's bootstrap tho, which I have loaded?
taltmann42
@taltmann42
Feb 14 2017 13:46
@Krimsonmedic no the syntax itself is wrong, the > is still in the class-string
Matthew
@Krimsonmedic
Feb 14 2017 13:46
Ah, ok
fixed, but still..the button doesn't seem to call my function
taltmann42
@taltmann42
Feb 14 2017 13:47
And javascript is case-sensitive, math doesn't exist, it should be Math
and there's still onlick
Matthew
@Krimsonmedic
Feb 14 2017 13:48
oh my lord
taltmann42
@taltmann42
Feb 14 2017 13:48
:grin:
Matthew
@Krimsonmedic
Feb 14 2017 13:48
@taltmann42 thank you.... that was it
CamperBot
@camperbot
Feb 14 2017 13:48
krimsonmedic sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 505 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Matthew
@Krimsonmedic
Feb 14 2017 13:49
well, I sure wasn't licking the button
crap...how do I get the button to come back?
like to be able to click it multiple times
taltmann42
@taltmann42
Feb 14 2017 13:50
you set the html to the element with the id quoteDisplay, but the button is also in that div, so it gets overwritten
<3
PipsChips
@PipsChips
Feb 14 2017 13:53
Hi! Could someone pls help me with my 'Wiki viewer' project. I'm trying to get my search results using jQuery's 'autocomplete', but I'm stuck defining my 'source'...
http://codepen.io/PipsChips/pen/zNLMyV
taltmann42
@taltmann42
Feb 14 2017 13:53
@Krimsonmedic :thumbsup:
achudoz
@achudoz
Feb 14 2017 13:53
This is a public announcement from the hair-pulling prevention center.
I have been trying to centre my elements with the tools introduced by freecodecamp (mostly vanilla css and bootstrap, right?) and it is hell. Please note that your nightmarish vertical-alignment issues can be solved by just adding this class.

Save yourself those hours of endless CSS fiddling and just use Flexbox.
.vertical-align {
    display: flex;
    align-items: center;
}
it works perfectly and I will probably never again use anything else
taltmann42
@taltmann42
Feb 14 2017 13:53
@achudoz and then you get a client who demands IE8 support :P
Lorrie Pearson
@Lorrie01
Feb 14 2017 13:53
@Krimsonmedic nice job with your quote machine...works beautifully
Matthew
@Krimsonmedic
Feb 14 2017 13:54
@Lorrie01 ty!
CamperBot
@camperbot
Feb 14 2017 13:54
krimsonmedic sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @lorrie01 |http://www.freecodecamp.com/lorrie01
Matthew
@Krimsonmedic
Feb 14 2017 13:54
@achudoz what does flex do specifically?
achudoz
@achudoz
Feb 14 2017 13:54
@taltmann42 ha, I recon that before I would ever get any clients, that will be a dead breed of a browser
taltmann42
@taltmann42
Feb 14 2017 13:56
@achudoz I'd say it already is :grin:
@Krimsonmedic I always go to this site when using flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
achudoz
@achudoz
Feb 14 2017 13:57
display: flex makes the div element into a flexible box - it is pretty much what you imagine from its name. align-items: center aligns the elements in the center of the div. It is this simple
I just applied this class on my "row" div and it solved all the BS that I was being frustrated with for previous two hours
Tiboski
@Tiboski
Feb 14 2017 14:07
@kirbyedy are u still here mate?
kirbyedy
@kirbyedy
Feb 14 2017 14:09
:cactus:
Alan
@alant90
Feb 14 2017 14:35
can someone help me with angular syntax? how do I display the properties that are nested within an object within an array within a JSON object, like here with the weather data under the icon? i only want to select the result under ID. link: http://codepen.io/alant90/pen/egPpLj
piquantdesigner
@piquantdesigner
Feb 14 2017 14:46
hey guyz m stuck at the first page can anyone help?
anyone?
Fabricio Leal
@pharaohlxvi
Feb 14 2017 14:48

Hi! I can't figure out why my code doesn't work. I wonder if any of you could help me. I'm trying to complete the "local weather" project. When I run the code I get the following error:

""jQuery.Deferred exception: navigation is not defined" "@pen.js:13:5
g/</j@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
" undefined"

I'm only starting this project. Here's my pen:

If I copy and paste the API URL to the browser it runs fine.
I mean "copy and paste" with random lat/long, or by city name, but with the same key.
Drbathound
@Drbathound
Feb 14 2017 15:02
what's a good place to start on the portfolio page
Fabricio Leal
@pharaohlxvi
Feb 14 2017 15:05
@Drbathound I think as soon as you know who your page will be about you should focus on the HTML content (H1, H2, P, DIV, etc). Write some stuff, add the title, maybe a few pictures. Only after that initial content writing i would focus on the styling.
Drbathound
@Drbathound
Feb 14 2017 15:06
@pharaohlxvi ok thx
CamperBot
@camperbot
Feb 14 2017 15:06
drbathound sends brownie points to @pharaohlxvi :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @pharaohlxvi |http://www.freecodecamp.com/pharaohlxvi
Fabricio Leal
@pharaohlxvi
Feb 14 2017 15:06
Sorry, It's supposed to be a personal portfolio, right? So I guess you know who the page will be about. My bad :)
Drbathound
@Drbathound
Feb 14 2017 15:07
@pharaohlxvi :smile:
johnnydemol
@johnnydemol
Feb 14 2017 15:09
Hey guys,
I'm wondering why this piece of code is not working. I'm starting with the wikipedia challenge, so I figured let's see if I can get this api to work first. http://codepen.io/svenhendrikx/pen/qRgdvR
small typo in the first one but it doesn't work anyway
Fabio
@Gentarozzo
Feb 14 2017 15:17
Hello I need some help to make a responsive inline box with images
Anyone here? :)
Max
@Illu
Feb 14 2017 15:26
@johnnydemol check your callback at the end of your api URL
Yogesh Kumar
@yogesh-captain
Feb 14 2017 15:37
Hi
I am working on this and using bootstrap css framework for styling
but I don't know how some bootstrap styles are not working
I am making the header with bootstrap navbar classes but it's not working in codepen while working fine on my local machine
runnerbill75
@runnerbill75
Feb 14 2017 15:50
Hello, I currently have an unordered list aligned with right side of page, I am trying to insert a pargraph on right side of screen next to <p>, can i use td <colspan> to do this?
Brandon
@bd1887
Feb 14 2017 15:50
@johnnydemol Got it to work this way:
var searchTerm = 'albert einstein';

var searchUrl = "//en.wikipedia.org/w/api.php?action=opensearch&search="+searchTerm+"&limit=100&format=json&callback=?";

$.getJSON(searchUrl, function(json) {
  $("#div1").html(JSON.stringify(json));
});
singleincome
@singleincome
Feb 14 2017 15:50
Hello
runnerbill75
@runnerbill75
Feb 14 2017 15:51
sorry i meant to say align <p> on "left" side of screen
singleincome
@singleincome
Feb 14 2017 15:52
I have a question :o:

I would like this: http://codepen.io/firstinten/full/JExeQp/

to emulate this: https://coolors.co/77878b-b4b8c5-85969f-1b2223-dce8e4

where my div elements fit the page. Any guidance appreciated!

Brandon
@bd1887
Feb 14 2017 15:54
@yogesh-captain Hi Yogesh. Did you remember to add bootstrap in the Codepen settings?
Settings --> CSS --> Add External CSS --> "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" --> Save & Close
Tyler Moeller
@TylerMoeller
Feb 14 2017 15:54
@runnerbill75 <td> is a <table> element and a <table> is meant for data not content necessarily. It sounds like a good case for the bootstrap grid. One column on the left, another on the right.
Pranav Bhaskar
@CoderPrans
Feb 14 2017 15:55
Guys ive run into a weired situation.
navigator.geolocation works on chrome only if you run codepen under https,
but https doesn't allow to fetch json data from api.openweathermap.org.
my code is working on forefox but not in chrome. What do I do?
runnerbill75
@runnerbill75
Feb 14 2017 15:55
ok thank you @TylerMoeller
CamperBot
@camperbot
Feb 14 2017 15:55
runnerbill75 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1487 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Brandon
@bd1887
Feb 14 2017 16:00

@singleincome Hi. Something like this?

.container {
    padding: 0;
    height: 100vh;
    width: 100%;
    display: table;
    table-layout:fixed;
}

.div1 { //Style the other divs with the same width and padding
    border-style: solid;
    border-color: black;
    position: relative;
    width: 20%; 
    padding: 0; 
    background-color: #FFF;
    display: table-cell;
    overflow: hidden;
}

You can also remove the borders to make it more like the link you posted

singleincome
@singleincome
Feb 14 2017 16:02
@bd1887 For some reason, that broke my code hahaha
@bd1887 Oh, wait. There we go. Almost there: http://codepen.io/firstinten/full/JExeQp/
singleincome
@singleincome
Feb 14 2017 16:09
Oh wait I get it now.
Fabricio Leal
@pharaohlxvi
Feb 14 2017 16:10
Guys, please any idea what I'm doing wrong here?
http://codepen.io/pharaohlxvi/pen/ygQddz
The error I get at the console is
"jQuery.Deferred exception: navigation is not defined" "@pen.js:13:5
g/</j@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
" undefined
Clyde Lobo
@oppiniated
Feb 14 2017 16:10
@pharaohlxvi navigation is undefined
Brandon
@bd1887
Feb 14 2017 16:11
@singleincome Can I suggest a few other changes to the code. IDs should all be unique. And if several divs share a class, you should put that CSS in that class's styling only. You don't need to repeat it. Try copying and pasting this:
//HTML
<div class = "container">
    <div class = "col" id ="div1"> #F1FFFA</div>
    <div class="col" id ="div2">#1B2223</div>
    <div class="col" id="div3">#B4B8C5</div>
    <div class="col" id = "div4">#85969F</div>
    <div class="col" id="div5"> #77878B</div>
</div>
.container {
    padding: 0;
    height: 100vh;
    width: 100%;
    display: table;
    table-layout:fixed;
    font-family: segoe;
    font-size: 20px;
    color: black;
}

.col {
    border-style: none;
    position: relative;
    width: 20%; 
    padding: 0; 
    display: table-cell;
    overflow: hidden;
}

#div1 { 
    background-color: #FFF;
}

#div2 {
    background-color: #1B2223;
}

#div3 { 
    background-color: #B4B8C5;
}

#div4 { 
    background-color: #85969F;
}

#div5 {
 background-color: #77878B;
}
Clyde Lobo
@oppiniated
Feb 14 2017 16:11
@pharaohlxvi You check for navigator.geolocation and then use navigation
Fabricio Leal
@pharaohlxvi
Feb 14 2017 16:12
@oppiniated Duh! Thank you very much! How did I miss that?
CamperBot
@camperbot
Feb 14 2017 16:12
pharaohlxvi sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 574 | @oppiniated |http://www.freecodecamp.com/oppiniated
h1tag
@h1tag
Feb 14 2017 16:12
@pharaohlxvi check the console next time
Fabricio Leal
@pharaohlxvi
Feb 14 2017 16:13
@fortMaximus I did! And still missed it. Guess I have to pay closer attention from now on. Thanks.
CamperBot
@camperbot
Feb 14 2017 16:13
pharaohlxvi sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 14 2017 16:13
:+1:
Brandon
@bd1887
Feb 14 2017 16:14
@singleincome Looks like you got it...
Tyler Moeller
@TylerMoeller
Feb 14 2017 16:16
@CoderPrans Everyone hits that problem unfortunately, here's some background: FreeCodeCamp/FreeCodeCamp#7853
singleincome
@singleincome
Feb 14 2017 16:20
@bd1887 Thanks for the tip! I copied your code but it doesn't fit the page like I was aiming for.
CamperBot
@camperbot
Feb 14 2017 16:20
singleincome sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @bd1887 |http://www.freecodecamp.com/bd1887
singleincome
@singleincome
Feb 14 2017 16:22
@bd1887 Definitely saves time. Just trying to figure out why it looks like this:
Gulsvi
@gulsvi
Feb 14 2017 16:23
@yogesh-captain Open your CSS settings in codepen and make sure you're using the same version of bootstrap as you are on your local machine. Codepen changed the default bootstrap version you get with the quick-add menu to a new pre-release with different class names.
Brandon
@bd1887
Feb 14 2017 16:26

@singleincome You forgot to add a "." before ".container"

.container {
    padding: 0;
    height: 100vh;
    width: 100%;
    display: table;
    table-layout:fixed;
}

It's the little things :-/

singleincome
@singleincome
Feb 14 2017 16:27
@bd1887 :warning:
@bd1887 omg. @_@
Brandon
@bd1887
Feb 14 2017 16:27
@singleincome haha
Yogesh Kumar
@yogesh-captain
Feb 14 2017 16:28
Hi @bd1887 , Yes I have added the bootstrap
@bd1887 other style like container, text-info etc are working
Gulsvi
@gulsvi
Feb 14 2017 16:29
@yogesh-captain There are different versions of bootstrap, some class names are the same, others are different across the different versions.
Yogesh Kumar
@yogesh-captain
Feb 14 2017 16:32
Hi @SkyCoder01
@SkyCoder01 Thank you. I have changed the bootstrap version and it's working fine now. Thanks a lot :)
CamperBot
@camperbot
Feb 14 2017 16:32
yogesh-captain sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 195 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 14 2017 16:33
Good news :)
Brandon
@bd1887
Feb 14 2017 16:35
Oh good. A new version of Bootstrap to learn :worried:
Gulsvi
@gulsvi
Feb 14 2017 16:36
I know :( I just learned bootstrap 3 like two months ago
hope it's easy to move to the next one
Dean Hollstrom
@DeanHollstrom
Feb 14 2017 16:50
Hi guys. Just working on the portfolio section. How can I center a h2 and buttons vertically? I have them aligned horizontally but theyre sitting along the top of the div
Brandon
@bd1887
Feb 14 2017 16:53
@DeanHollstrom Do you have it up on Codepen?
Dean Hollstrom
@DeanHollstrom
Feb 14 2017 16:53
I dont. Ill throw it on there and post it
Brandon
@bd1887
Feb 14 2017 16:57
@DeanHollstrom It's the nav buttons at the top that you don't like?
runnerbill75
@runnerbill75
Feb 14 2017 16:57
I have a bootstrap question, I currently have bootstrap grid element with two colums. In first I have a pargraph of text. In second column I would like to insert an unordered list, does anyone know how to do this?
Dean Hollstrom
@DeanHollstrom
Feb 14 2017 16:58
No, the actual <buttons> under the h2. I want to center them both horizontally and vertically within the div
runnerbill75
@runnerbill75
Feb 14 2017 16:58
Dean Hollstrom
@DeanHollstrom
Feb 14 2017 16:58
@runnerbill75 use the <ul> tag with <li> for each item in the list
runnerbill75
@runnerbill75
Feb 14 2017 16:59
yes, I have the list created, if you look at my pen, I am essentially trying to move <ul> up so it's on right side next to paragraph
Dean Hollstrom
@DeanHollstrom
Feb 14 2017 17:00
Youll have to use the float command in css @runnerbill75 :)
achudoz
@achudoz
Feb 14 2017 17:01
@runnerbill75 the <div> with the list is outside your bootstrap row and column
Brandon
@bd1887
Feb 14 2017 17:01
@DeanHollstrom They're centered horizontally right now. When you say vertically, you mean you want them to stack? Or you want them to be at the center of the page?
achudoz
@achudoz
Feb 14 2017 17:02
@runnerbill75 also your second column is col-md-8, just as the first one
Dean Hollstrom
@DeanHollstrom
Feb 14 2017 17:02
I know they are centered horizontally, its the vertical I have an issue with. I want them dead center of the page, but Im not sure thats even possible with css. This is an example https://gyazo.com/2c906dea33f9082b23102554b2c087cd @bd1887
runnerbill75
@runnerbill75
Feb 14 2017 17:03
ok thanks @achudoz , so I need to change second column to something different?
CamperBot
@camperbot
Feb 14 2017 17:03
runnerbill75 sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @achudoz |http://www.freecodecamp.com/achudoz
AlejoFCC
@AlejoFCC
Feb 14 2017 17:03
Hello! I am doing the portfolio challenge and when I try to make the header fixed I get it but when i move the rest of elements I can see some over my header and others under my header. Any idea to solve this?
achudoz
@achudoz
Feb 14 2017 17:04

@runnerbill75 you have to change the columns so their combined width is no more than 12.
e.g .
```

<div class="row">
<div class ="col-md-8">
</div>
<div class="col-md-4">
</div>

</div>
then they will be next to each other
whatever you want to have in one row can not have the sum of the col-md-x more than 12
that is the way bootstrap is hardwired
runnerbill75
@runnerbill75
Feb 14 2017 17:06
ok, thanks for your help.
Brandon
@bd1887
Feb 14 2017 17:18
@achudoz Ok here's maybe how you might do something like that.
  <h2>Tomahawk Digital Designs</h2>
    <div id="button-wrapper" class="container container-fluid">
      <button><i class="fa fa-twitter fa-fw" aria-hidden="true"></i>&nbsp; Twitter</a></button>
      <button><i class="fa fa-github fa-fw" aria-hidden="true"></i>&nbsp; Github</a></button>
      <button><i class="fa fa-linkedin fa-fw" aria-hidden="true"></i>&nbsp; LinkedIn</a></button>
      <button><i class="fa fa-free-code-camp fa-fw" aria-hidden="true"></i>&nbsp; Free Code Camp</a></button>
    </div>
#button-wrapper {
    text-align: center;
    background-color: yellow;
    position: absolute;
    top: 45%;
}
@achudoz What took so long is it's doing something funny on small screens and I'm not sure why... Some invisible padding somewhere
Samuel Kachisa
@Rizamoyi
Feb 14 2017 17:39
hey guys how can i center my images and texts in jumbotron bootstrap
Anyone help please
Gulsvi
@gulsvi
Feb 14 2017 17:46
@Rizamoyi In codepen, click Settings, Click CSS, and use this link to bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
After that, for text, use the text-center class and for images, use the center-block class.
<img class="center-block img-responsive" src="https://some image url">
Or for a pure css/html approach see the link above
Anton Bergman
@Bergmam
Feb 14 2017 18:08
Hi guys, could someone help me making API calls for "build a random quote machine"? My codepen worked yesterday, but when running it today I get
"Mixed Content: The page at 'https://codepen.io/bergmam/pen/zNeGMv' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=jQuery21306126836037503005_1487127134778&_=1487127134781'. This request has been blocked; the content must be served over HTTPS."
Could someone help me understand why it worked yesterday and not today? :P
Muhammad Hasham
@MohammadHasham
Feb 14 2017 18:39
How can i get this effect?shall i make a container for the stuff above the border and adjust that with z-index or is there something else?
http://res.cloudinary.com/whizzy/image/upload/v1472872426/img-effect.jpg
Muhammad Hasham
@MohammadHasham
Feb 14 2017 18:41
@mml3b you have to pass value to the function
and then assign that to a variable
Mostafa Masri
@thefakeweed
Feb 14 2017 18:42

i did it
// Example
var changed = 0;

function change(num) {
return (num + 5) / 3;
}

changed = change(10);

// Setup
var processed = 2;

function processArg(num) {
processed=processArg;

return (num + 3) / 5;

}

// Only change code below this line

Muhammad Hasham
@MohammadHasham
Feb 14 2017 18:43
you have to give that value to the function actually
not to the variable
@mml3b
Eric Weiss
@eweiss17
Feb 14 2017 18:44
@mml3b change only code under the line it says to
@mml3b reset it, and call the function with a number that gives you the answer of 2
Mostafa Masri
@thefakeweed
Feb 14 2017 18:45
DO I change the processed variable from 0 to 2 ?
Eric Weiss
@eweiss17
Feb 14 2017 18:45
no
they are just initializing it
have processed be equal to the function with a parameter that causes the return value to be 2
Mostafa Masri
@thefakeweed
Feb 14 2017 18:48
im lost
Muhammad Hasham
@MohammadHasham
Feb 14 2017 18:48
just stickto the basics
suppose there is a function
Mostafa Masri
@thefakeweed
Feb 14 2017 18:49
how can i call a function ?
Muhammad Hasham
@MohammadHasham
Feb 14 2017 18:49
function add(x,y){
 return x+y;
}
//result is 4
add(2,2);
@mml3b
you gave two values to add function those values just went to the function body and we added them up.
i hope that makes sense yo you
Eric Weiss
@eweiss17
Feb 14 2017 18:50
you can do something like
answer = add(2, 2);
to have the return value of the function be a value, (processed in the problem)
Muhammad Hasham
@MohammadHasham
Feb 14 2017 18:51
@mml3b yes! the value returned from the function can be stored in a variable.
runnerbill75
@runnerbill75
Feb 14 2017 18:53
I have a question regarding bootstrap grid system, I am trying to figure out how to increase space between two columns...
Eric Weiss
@eweiss17
Feb 14 2017 18:54
did you check out the documentation?
runnerbill75
@runnerbill75
Feb 14 2017 18:56
I read a little about col-offset, but it didn't make much sense to me..
Eric Weiss
@eweiss17
Feb 14 2017 18:56
i can check it out real quick, do you still have the page you looked at? can you link it?
runnerbill75
@runnerbill75
Feb 14 2017 18:57
Essentially I am trying to create a little more space betwen my paragraph and my <ul>
Eric Weiss
@eweiss17
Feb 14 2017 18:58
okay i'll see what i can do
Tyler Moeller
@TylerMoeller
Feb 14 2017 18:58
@runnerbill75 Think of a bootstrap row like a spreadsheet row with 12 cells inside.
runnerbill75
@runnerbill75
Feb 14 2017 18:58
ok
Tyler Moeller
@TylerMoeller
Feb 14 2017 18:59
One cell would be: <div class="col-xs-1"></div>
runnerbill75
@runnerbill75
Feb 14 2017 18:59
yep
Tyler Moeller
@TylerMoeller
Feb 14 2017 18:59
For two cells, change the 1 to a 2... I think you get that part
runnerbill75
@runnerbill75
Feb 14 2017 18:59
I currently have first col set to 8, other set to 4
Tyler Moeller
@TylerMoeller
Feb 14 2017 18:59
to offset it, put an empty cell between, use the offsets like you were reading about
<div class="col-xs-1"></div>
<div class="col-xs-1 col-xs-offset-1"></div>
<div class="col-xs-1"></div>
That would be 3 cells with about 1 cell worth of margin between the first and second cells
runnerbill75
@runnerbill75
Feb 14 2017 19:00
ok that's where i was confused i thought offset had to be the same as # of columns like in the example
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:01
The total number still has to add up to 12
Or, I should say, it can't be greater than 12
Cells fill in from left to right in each row
runnerbill75
@runnerbill75
Feb 14 2017 19:02
ok thank you, I will try that
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:04
The best way, for me anyway, to learn the grid was to play around with it. Start with something like this pen: http://s.codepen.io/TylerMoeller/pen/VPgOob
And change the numbers around to see what happens - as long as you don't go over 12
runnerbill75
@runnerbill75
Feb 14 2017 19:04
Awesome, I will take a look.
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:05
When you're feeling more adventurous, this pen has a bunch of different examples of what you can do with the grid: http://s.codepen.io/TylerMoeller/pen/qNrbok?editors=1000
Resize your browser to see what happens with the different xs, sm, md columns
Tony
@FreakishLancer
Feb 14 2017 19:06
Hey guys. I'm having a little trouble with my Tic-Tac-Toe project. After I clear the board, the browser freezes (for 10 seconds, then you have to disable the pen) if I try to put a symbol on the new empty one. Can anyone help? http://codepen.io/Freaklancer/pen/xgMbPm
Jasmin Parent
@charlesdarkwind
Feb 14 2017 19:08
What would be the correct way to write this click event
$("#quoteBtn").click(function() {
         $('#quoteText').html(parsed_data.quote);
         $('#authorText').html("- " + parsed_data.author);
       });
Eric Weiss
@eweiss17
Feb 14 2017 19:08
yeah it froze my tab too
Moisés Man
@moigithub
Feb 14 2017 19:08
ello ...any1 knows angular 1.x ?
have problems with "deep linking" (or whatever its called)
using ngRoute.. when navigate ie /product/details/123 it shows fine on client
but if try to bookmark/reload-refresh browser it breaks (cuz that route dont exist on server)
using html5mode (so no hash-bang links)
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:10
@FreakishLancer I want to help, but would need to study your code for a bit. Can you add more code comments to help walk through everything you're doing?
Feeling lazy atm :)
@charlesdarkwind Your click code is fine, but make sure parsed_data is in scope
Eric Weiss
@eweiss17
Feb 14 2017 19:11
i need some css help in my pen, i can't figure out how to center the text within my table http://codepen.io/eweiss17/pen/EyqBBG
Jasmin Parent
@charlesdarkwind
Feb 14 2017 19:11
@TylerMoeller
var parsed_data = $.parseJSON(data); //parse the data so its usable
       $("#quoteBtn").click(function() {
         $('#quoteText').html(parsed_data.quote);
         $('#authorText').html("- " + parsed_data.author);
       });
its right over it
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:13
@charlesdarkwind What do you get in your console when you do console.log(parsed_data.quote)
Tony
@FreakishLancer
Feb 14 2017 19:13
@TylerMoeller Not sure how to best explain. I will try though. I made a function clearBoard() which seems to set everything to the original state upon loading the game (currently when the spotsTaken are 9), but after I call it, nothing is able to be drawn on the board anymore.
taltmann42
@taltmann42
Feb 14 2017 19:15
@FreakishLancer pretty sure that's the culprit
while ($(randomCell).prop("hasSign") !== undefined) {
Anoop Chandran
@iamanoopc
Feb 14 2017 19:15
Hi All
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:16
@eweiss17 Could you add a class to your td element and use CSS to center your text?
Anoop Chandran
@iamanoopc
Feb 14 2017 19:16
have a question regarding javascript promises..
Tony
@FreakishLancer
Feb 14 2017 19:16
@taltmann42 Can you explain why? It seems that that shouldn't be a problem since when I clear the board I set all cells' hasSign property to undefined.
Jasmin Parent
@charlesdarkwind
Feb 14 2017 19:16
@TylerMoeller aah I got it to work but its always showing to first quote it gets instead of returning a random one from the api
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:17
@charlesdarkwind Yeah, it seems like your code should display the quote text. Does it also need to call your getJSON or ajax function though to get a new quote or do you have a different button for that?
taltmann42
@taltmann42
Feb 14 2017 19:18
@FreakishLancer currently debugging, I'll let you know when I find something
Eric Weiss
@eweiss17
Feb 14 2017 19:18
@TylerMoeller i was trying to use align-text: center; and vertical-align: middle, but it doesn't help. I believe the image is messing with it.
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:19
@eweiss17 This works for me:
Line 48 add the class centered to your td element: <td class="active centered">
In your CSS:
.centered {
  text-align: center;
}
Jasmin Parent
@charlesdarkwind
Feb 14 2017 19:20
@TylerMoeller I think I need to change the order of my code or add a function make a new request on click instead of showing the same value of the same request
taltmann42
@taltmann42
Feb 14 2017 19:20
@FreakishLancer i have a guess... that's a tough one, i think jQuery is looking internally, if the second argument is undefined if it is, do nothing, otherwise set it to that value
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:20
Do that for all your <td> elements @eweiss17 (offline/online users)
Eric Weiss
@eweiss17
Feb 14 2017 19:21
@TylerMoeller I don't see it being changed, it looks the same
Tony
@FreakishLancer
Feb 14 2017 19:21
@taltmann42 I just did some more console logging. I don't know if it's related, but when I console log the property of the cell even after trying to set it to undefined, I get true.
So it seems I need to find a way to set the property to undefined properly because the syntax I'm using may be wrong.
taltmann42
@taltmann42
Feb 14 2017 19:22
yep that's what I meant
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:22
@eweiss17 These look centered to me: http://codepen.io/TylerMoeller/pen/wgNLdR?editors=0110
Or do you want both the text AND the image centered? maybe I'm misunderstanding
taltmann42
@taltmann42
Feb 14 2017 19:23
your syntax is fine, but jquery has to distinguish between the prop method to get a prop and to set a prop and I guess they did something like
if(prop2 === undefined) {
  //get property
}else{
  //set property
}
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:23
Your question was about centering the text inside your table from above
taltmann42
@taltmann42
Feb 14 2017 19:23
@FreakishLancer so I guess you could try using false instead of undefined
Eric Weiss
@eweiss17
Feb 14 2017 19:23
@TylerMoeller yeah , i was able to do that previously, i do want it to be on the left side
i want it vertically centered. Does that make sense? you see how the image is in the middle perfectly, but the text is more to the top
Tony
@FreakishLancer
Feb 14 2017 19:25
@taltmann42 I fixed my problem! So instead of undefined, I just changed the undefined check to === true and set the values when cleraing the board to false.
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:25
Well, a table is really for data, not for images and text. You can certainly make it work that way, but I'd recommend using a different approach if you're up for it
taltmann42
@taltmann42
Feb 14 2017 19:25
@FreakishLancer yep here it is https://github.com/jquery/jquery/blob/master/src/attributes/prop.js
if ( value !== undefined ) {
Tony
@FreakishLancer
Feb 14 2017 19:25
@taltmann42 Thanks.
CamperBot
@camperbot
Feb 14 2017 19:25
freakishlancer sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 14 2017 19:25
@FreakishLancer right otherwise jquery thinks there is no second argument defined.. which.. well.. it actually isn't as you set it to undefined :P
Tony
@FreakishLancer
Feb 14 2017 19:25
:O
Baillie O'Grady
@baillieogrady
Feb 14 2017 19:26
any slight tips on the roman numerals task, i've tried just struggling when it comes to returning a number other then the generic amounts like 1, 5, 10 etc... thanks in advance
Eric Weiss
@eweiss17
Feb 14 2017 19:26
I guess a cheesy solution would just make the text as big as the image
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:28
A better way would be to separate the text and the image in different elements. You have text next to a floating image right now.
I think you really just need to not use a <table> for your display :p
Eric Weiss
@eweiss17
Feb 14 2017 19:31
it looks way worse if i switch that off
plus i like the way it looks right now
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:32
Right, you'd have to try a completely different approach. Design the HTML and CSS in a separate pen first, and then incorporate into your twitch app. With .html() it's just a matter of copying/pasting your updated html
Everything you're doing is dynamically generated based on the user list

When you don't use a table, you can make it as simple as:

<div class="user-row">
  <span class="status-text">Some twitch user's status goes here</span>
  <img src="https://placehold.it/300">
</div>

With this CSS:

img {
  vertical-align: middle;
  border-radius: 50%;
  max-width: 100px;
}
runnerbill75
@runnerbill75
Feb 14 2017 19:37
Hi @TylerMoeller I went into the pen you provided and set it up exactly how i wanted it, but for some reason not working when i try to use on my pen, do you think you could take a look? https://codepen.io/runnerbill75/full/WRYzoQ/
Eric Weiss
@eweiss17
Feb 14 2017 19:38
@TylerMoeller alright thanks for the help, i'm going to have to re evaluate my life decisions on tables
CamperBot
@camperbot
Feb 14 2017 19:38
eweiss17 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1488 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:38
lol :) @eweiss17
@runnerbill75 Your codepen is using a pre-release alpha version of bootstrap 4. Replace your CSS settings link to bootstrap with: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The grid offsetting documents you were reading earlier do not apply to bootstrap 4
runnerbill75
@runnerbill75
Feb 14 2017 19:39
oh ok
thanks
runnerbill75
@runnerbill75
Feb 14 2017 19:51
Ok I replaced bootsrap link with 3.3.7 version, for some reason columns are gone now..
Sorry, I'm a bit confused at the moment.
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:56
@runnerbill75 The columns look good to me - you are using "md" , so when the screen goes narrower than 992px the columns collapse into one
That's what the xs, sm, md, lg refers to: http://getbootstrap.com/css/#grid-options
runnerbill75
@runnerbill75
Feb 14 2017 19:57
so should i use different size?
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:58
That's just a matter of design preference
runnerbill75
@runnerbill75
Feb 14 2017 19:58
oh ok
Tyler Moeller
@TylerMoeller
Feb 14 2017 19:58
It depends on how you want your page to look on smaller devices
runnerbill75
@runnerbill75
Feb 14 2017 20:03
changed from m to xs, looks great!! Thanks again @TylerMoeller !
CamperBot
@camperbot
Feb 14 2017 20:03
runnerbill75 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1489 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Radek
@radekjohn
Feb 14 2017 20:04
Hi, anybody knows, why my function showOnline (at the end of JavaScrip part) does not work? http://codepen.io/radekjohn/pen/QdzVJa
is it because it is dealing with stuff created by Javscript?
Tyler Moeller
@TylerMoeller
Feb 14 2017 20:11
@radekjohn I think you want to target .offline instead of #offline and you can't call a subfunction of another function, so you'll need to move showOnline() outside of your document.ready function.
Radek
@radekjohn
Feb 14 2017 20:13
@TylerMoeller yes! thanks
CamperBot
@camperbot
Feb 14 2017 20:13
radekjohn sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1490 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Michael Scott
@MichaelScott50
Feb 14 2017 20:16
hi i was wondering if someone could help me with a embed question
I am using an embed tag to link to a work i have done for my portfolio
but i also want it to have a link to that page, any ideas?
also the embed tag dosent seem to show up in the codepen
Nick
@Threat-Hunter
Feb 14 2017 20:28
Hello All,
I just reached the "Create a Bootstrap Button" lesson and I am having trouble figuring out how to pass the lesson. I've tried nesting the button inside a <form> element. Also tried setting it up outside of a form element below the img element.
What am I doing wrong?

I've been coding it as such:

<label><input type="button" class="btn" name="like-button"> Like</label>

John Nunns
@johnnunns
Feb 14 2017 20:31
Anyone here familiar with the set() method in java?
js**
alpox
@alpox
Feb 14 2017 20:32
@johnnunns I don't think there is one unless you create one
Moisés Man
@moigithub
Feb 14 2017 20:32
es6
John Nunns
@johnnunns
Feb 14 2017 20:32
Yeah I'm struggling as to why it's not working in this probelm
return set
haha oops let me copy the right thing haha
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 
  var x =text.split("");
  for(var i =0; i<x.length; i++){

    var mySet = new Set();
    if(!mySet.has(x[i])) {
      set =mySet.add(x[i])

    }

    console.log(set)
  }


}

isIsogram('olkskdjf')
alpox
@alpox
Feb 14 2017 20:33
Thats no function then @moigithub that would be a setter creatior
@johnnunns Ah big letter S then this is a Set class -> https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Set
John Nunns
@johnnunns
Feb 14 2017 20:33
I'm logging 8 empty objects currently
oh sorry
my code hasn't been finished I just ran into a little road block here and wasnt sure if I was using Set() correctly
alpox
@alpox
Feb 14 2017 20:35
@johnnunns Thats because you log the variable set to which you assigned the returnvalue of add: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add where there is no
The function add doesn't return anything.
You'd better do:
var mySet = new Set();
    if(!mySet.has(x[i])) {
      mySet.add(x[i]);
    }

    console.log(mySet);
John Nunns
@johnnunns
Feb 14 2017 20:36
var mySet = new Set();
    if(!mySet.has(x[i])) {
      mySet.add(x[i])

    }

    console.log(mySet)
  }
oh you just typed that
I just did that and still logging the same thing though
8 empty objects
Willina Clark
@lclc68lclc
Feb 14 2017 20:37
When I click the tweet button, I get the link to my codepen and not the tweet. Can someone help?
https://codepen.io/lclc68lclc/pen/EZLYae?editors=0010#0
alpox
@alpox
Feb 14 2017 20:37
@johnnunns Did you clear your console and executed the code again?
John Nunns
@johnnunns
Feb 14 2017 20:38
I refreshed it now
still printing 8 empty {}
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 
  var x =text.split("");
  for(var i =0; i<x.length; i++){

    var mySet = new Set();
    if(!mySet.has(x[i])) {
      mySet.add(x[i])

    }

    console.log(mySet)
  }


}

isIsogram('olkskdjf')
Moisés Man
@moigithub
Feb 14 2017 20:39
cuz u redeclaring ur mySet variable everytime the for loops
John Nunns
@johnnunns
Feb 14 2017 20:40
ok moved the new set() above the for loop
Moisés Man
@moigithub
Feb 14 2017 20:40
but i think.. it still shold hvae 1 item not 8 empty
John Nunns
@johnnunns
Feb 14 2017 20:40
still 8 empty
Moisés Man
@moigithub
Feb 14 2017 20:41
r u sure ??
where u testing ?? codepen ? or somethign
John Nunns
@johnnunns
Feb 14 2017 20:41
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 
  var x =text.split("");
  var mySet = new Set();
  for(var i =0; i<x.length; i++){


    if(!mySet.has(x[i])) {
      mySet.add(x[i])

    }

    console.log(mySet)
  }


}

isIsogram('olkskdjf')
inside repl.it
Moisés Man
@moigithub
Feb 14 2017 20:41
click run button ? :P
John Nunns
@johnnunns
Feb 14 2017 20:41
haha
{}
{}
{}
{}
{}
{}
{}
{}
=> undefined
Moisés Man
@moigithub
Feb 14 2017 20:42
share link
Gulsvi
@gulsvi
Feb 14 2017 20:42
@MichaelScott50 <embed> will capture all your mouse clicks. You could place a link beneath it though.
John Nunns
@johnnunns
Feb 14 2017 20:42
it's a prep course you'd have to have login info for unfortunately :(
Gulsvi
@gulsvi
Feb 14 2017 20:42
@Threat-Hunter I don't see a <button> element or a <form> element in your sample code
Moisés Man
@moigithub
Feb 14 2017 20:42
make sure u check on browser console.. not codepen console
John Nunns
@johnnunns
Feb 14 2017 20:42
An isogram is a word that has no repeating letters, consecutive or non-consecutive. 

Write and test a function that determines whether a string is an isogram. 

Notes:
* Assume your input is only letters.
* Assume the empty string is an isogram. 
* Ignore case.
* Follow the pseudocode exactly!

Starter Code :
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 
}
these are the instructions
is that code running for you elsewhere?
alpox
@alpox
Feb 14 2017 20:43
@johnnunns Well where do you run your code
John Nunns
@johnnunns
Feb 14 2017 20:43
on the repl.it site
Nick
@Threat-Hunter
Feb 14 2017 20:43

@SkyCoder01

<form action="/like-cat-photo">
<label><input type="button" class="btn" name="like-button"> Like</label>
</form>

alpox
@alpox
Feb 14 2017 20:44
@johnnunns Yea they show it totally wrong in their console. Don't trust their output. Use the browsers dev console
@johnnunns Btw. you will want to put the set instantiation before the for loop
Nick
@Threat-Hunter
Feb 14 2017 20:44
@SkyCoder01 that was the full code I put in
@SkyCoder01 I think I see what you are saying now. So "button" is an actual element
Gulsvi
@gulsvi
Feb 14 2017 20:45
@Threat-Hunter Yes, it was a slight hint ;)
John Nunns
@johnnunns
Feb 14 2017 20:45
yeah that's interesting it does run in my dev tools
well that's slightly a relief because I was really confused
@alpox instantiation means?
alpox
@alpox
Feb 14 2017 20:45
@johnnunns the creation of the set
and variable declaration
Means the var mySet = new Set();
John Nunns
@johnnunns
Feb 14 2017 20:46
oh right yes I fixed that
yeah looks as though it's running fine
Nick
@Threat-Hunter
Feb 14 2017 20:47
@SkyCoder01 you rock! thanks for the help
CamperBot
@camperbot
Feb 14 2017 20:47
threat-hunter sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 198 | @skycoder01 |http://www.freecodecamp.com/skycoder01
ThurstianTsui
@ThurstianTsui
Feb 14 2017 20:48
@TylerMoeller You answered someone else's question earlier by telling them codepen was running Bootstrap 4.0 and recommended that they backload to 3.3.7 instead. I just want to say thank you because you solved every single one of my headaches in the past 3 days!
CamperBot
@camperbot
Feb 14 2017 20:48
thurstiantsui sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1491 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
alpox
@alpox
Feb 14 2017 20:50
@johnnunns btw you dont have to convert text to an array there
John Nunns
@johnnunns
Feb 14 2017 20:50
no need for the split?
alpox
@alpox
Feb 14 2017 20:50
@johnnunns yup, just use the variable text instead of x
Moisés Man
@moigithub
Feb 14 2017 20:51
@johnnunns since Set store UNIQUES values. u could omit the loop.. and use split :P
new Set('olkskdjf'.split(""))
John Nunns
@johnnunns
Feb 14 2017 20:51
you guys just threw 2 different opposite options at me! Too much! :)
alpox
@alpox
Feb 14 2017 20:52
@moigithub @johnnunns Actually return new Set(text); in the function body would already be enough :D
Tyler Moeller
@TylerMoeller
Feb 14 2017 20:52
@ThurstianTsui :) lots of people have had headaches from that. Glad I could help
Moisés Man
@moigithub
Feb 14 2017 20:52
didnt tested that one.. was going to
John Nunns
@johnnunns
Feb 14 2017 20:54
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 

  var mySet = new Set();
  for(var i =0; i<text.length; i++){


    if(!mySet.has(text[i])) {
      mySet.add(text[i])

    }


  }
  return mySet
  console.log(mySet.length)


}

isIsogram('olksdddjf')
getting an error here
Moisés Man
@moigithub
Feb 14 2017 20:54
return exit the function
console.log wont be reached
alpox
@alpox
Feb 14 2017 20:54
But i think the function was not yet finished @johnnunns @moigithub it seems that the task was to test if the text was an isogram... so probably more
return new Set(text).size === text.length;
John Nunns
@johnnunns
Feb 14 2017 20:55
right I was going to nest and if statement in my if statement
that's probably the long way but it's a way I understand
alpox
@alpox
Feb 14 2017 20:55
@johnnunns Yea its good to test that way first
There are always plenty of ways to solve a problem
John Nunns
@johnnunns
Feb 14 2017 20:59
Yeah I'm finding this to be very true @alpox
having a little trouble here though, I'll walk you through what I think is going on and maybe some hints to get me out of it if you guys don't mind @alpox @moigithub
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 

  var mySet = new Set();
  for(var i =0; i<text.length; i++){


    if(!mySet.has(text[i])) {
      mySet.add(text[i])
      if(mySet.length === text.length){
        return text + "is an isogram"
      }

    }else{
      return "not an isogram"
    }


  }




}

isIsogram('olksdjf')
Moisés Man
@moigithub
Feb 14 2017 21:01
u returning "too soon"
u should evaluate only after u add everything inside the set
John Nunns
@johnnunns
Feb 14 2017 21:01
right it's not allowing the for loop to complete
Moisés Man
@moigithub
Feb 14 2017 21:01
yep
John Nunns
@johnnunns
Feb 14 2017 21:01
so inside that nested if statement should I create a variable equal to that?
Moisés Man
@moigithub
Feb 14 2017 21:02
nope.. put that outside the loop
alpox
@alpox
Feb 14 2017 21:02
@johnnunns just put the else with not an isogram out of the loop
Moisés Man
@moigithub
Feb 14 2017 21:04
i think u shoudl move the if/else out
(not only else)
(... but i dont know what a isogrm is n to lazy to check :P )
John Nunns
@johnnunns
Feb 14 2017 21:04
isogram is a string with no repeated characters
so maybe the nested if shouldn't be nested it should be out
alpox
@alpox
Feb 14 2017 21:08
@moigithub @johnnunns Well it doesn't really matter much - moving both out is surely cleaner and takes less computation time but else than that it would clearly work when only taking out the else since it can be an isogram only when the lengths are the same which will be in only one case
John Nunns
@johnnunns
Feb 14 2017 21:09
function isIsogram(text) {
  // add each char to a set
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
  // note: a set drops dup values
  // thus, to see if all the chars were unique,
  // check length of text and the size of the set 

  var mySet = new Set();

  for(var i =0; i<text.length; i++){
    if(!mySet.has(text[i])) {
      mySet.add(text[i])
         }
  }
   if(mySet.length === text.length){
        return text + "is an isogram"
      }
  }

isIsogram('olksdjf')
getting an undefined here
taltmann42
@taltmann42
Feb 14 2017 21:09
@johnnunns when a text is not an isogram, you don't return anything, and then it defaults to undefined
John Nunns
@johnnunns
Feb 14 2017 21:09
olksdjf should be an isogram though
taltmann42
@taltmann42
Feb 14 2017 21:10
right.. :D give me a sec
John Nunns
@johnnunns
Feb 14 2017 21:10
so those lengths should be equal? I thought :)
alpox
@alpox
Feb 14 2017 21:10
@johnnunns .length is no property of mySet which ends in undefined. Use .size for the set instead
Moisés Man
@moigithub
Feb 14 2017 21:11
sets dont have length property
John Nunns
@johnnunns
Feb 14 2017 21:11
mannnn. You think you've learned something haha
then just find out it doesn't apply
.size worked fine
is that exclusive to sets, or just objects in general? now I've forgotten if you can take the length of any object
taltmann42
@taltmann42
Feb 14 2017 21:12
objects usually don't have length unless you provide it with a length-key on your own
alpox
@alpox
Feb 14 2017 21:12
@johnnunns This applies only to set
John Nunns
@johnnunns
Feb 14 2017 21:12
gotcha, it even says in the direction check the length and SIZE
alpox
@alpox
Feb 14 2017 21:12
@johnnunns For arrays and strings its .length
John Nunns
@johnnunns
Feb 14 2017 21:12
just didn't catch that as a key word
@alpox @taltmann42 @moigithub thanks guys
CamperBot
@camperbot
Feb 14 2017 21:13
johnnunns sends brownie points to @alpox and @taltmann42 and @moigithub :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @taltmann42 |http://www.freecodecamp.com/taltmann42
:star2: 2694 | @moigithub |http://www.freecodecamp.com/moigithub
:cookie: 769 | @alpox |http://www.freecodecamp.com/alpox
taltmann42
@taltmann42
Feb 14 2017 21:15
you could also check if it's an isogram without a set, using indexOf and lastIndexOf
Moisés Man
@moigithub
Feb 14 2017 21:15
i have no good memory to remember all the properties methods n whatever.. so most of times.. i open browser devtools... and test there
ie: a="";
then when u write a. it opens a list of methods/properties available for strings (cuz a="" on this example)
(too lazy to check documentation)
autocomplete (or whatever its called) is nice :)
alpox
@alpox
Feb 14 2017 21:18
@moigithub intellisense - i usually use mdn anyway though since i don't trust the intellisenses for javascript :D they often tell you crap
Tony
@FreakishLancer
Feb 14 2017 21:20
I'm trying to figure out how to check for win solutions in Tic-Tac-Toe. Is this a good data structure?
const boardData = {
    "cellTypes": {
        0: "corner", 1: "edge",   2: "corner",
        3: "edge",   4: "center", 5: "edge",
        6: "corner", 7: "edge",   8: "corner"
    },
    "winCombos": {
        0: ["corner", "edge", "corner"],
        1: ["corner", "center", "corner"],
        2: ["edge", "center", "edge"]
    }
};
Jasmin Parent
@charlesdarkwind
Feb 14 2017 21:21

Im trying to make a twitter button that opens with some text but its always filled with the link of my codepen :(
html:

<a class="tweet" href="https://twitter.com/share" data-text="" target="_blank"><button class="btn btn-primary">Tweet this!</button></a>

jquery:

$('.tweet').attr('data-text', "Hi");

feelsbadman

aRtoo
@artoodeeto
Feb 14 2017 21:34
happy valentines everyone
Jasmin Parent
@charlesdarkwind
Feb 14 2017 21:39
@moi238 thanks for that, ill look into it
CamperBot
@camperbot
Feb 14 2017 21:39
charlesdarkwind sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @moi238 |http://www.freecodecamp.com/moi238
Haseeb Arshad
@haseebuchiha
Feb 14 2017 21:41
Could someone please guide me as to how to use imgs in codepen.io?
0livier1O1
@0livier1O1
Feb 14 2017 21:49
Hey guys, need some help with the quote generator. It seems like there are some issues with my buttons. They’re not clickable, and the twitter button should work (just open another window but it doesn’t work). Also the css pointer and hover properties doesn’t work. Thank you in advance for the help, greatly appreciate it :smile: (it’s just a trial, I know it looks like the example) http://codepen.io/0livier1O1/full/QdoWNo/
Jakov Horvat
@Yaaqovv
Feb 14 2017 21:53
hey
John Nunns
@johnnunns
Feb 14 2017 21:58
hey guys having a rough day of coding today need some more help
working with skeleton codes
function findMaxRepeatCountInWord(word) {
  return word.split("")// Break up individual words into individual letters.
   .reduce(function(result, letter){
    var regexp = new RegExp(letter, 'g')
    result[letter] = word.match(regexp).length
    return result;
  }, [])
  return word;
  // Count the instances of each letter
  // Iterate all the counts and find the highest
  // Return this word's max repeat count
}
Jakov Horvat
@Yaaqovv
Feb 14 2017 21:59
im working rn on twitch tv json api project. do you know how ONLY offline users can appear on a screen after user press "Offline" button? code is here, help me pleaseee http://codepen.io/Yaaqov/pen/LxXKrg
John Nunns
@johnnunns
Feb 14 2017 22:00
yikes I keep posting my question on here and deleting it because by typing it out I figured out the answer :) haha
Jakov Horvat
@Yaaqovv
Feb 14 2017 22:00
good for you
Ryan Matthews
@Ryntak94
Feb 14 2017 22:02
can anyone give me a hand with my last two intermediate algorithm challneges
Adam
@GoingAllTheWayUp
Feb 14 2017 22:11
https://www.freecodecamp.com/challenges/make-object-properties-private
what does setGear do and what does getGear mean?
Ilona
@ilonchik
Feb 14 2017 22:13
Hi, can you please help me here. I have problems with my weather app. I can't get the weather from the json
http://codepen.io/ilonavardanyan/pen/oBPxLq?editors=1011
John Nunns
@johnnunns
Feb 14 2017 22:14
@GoingAllTheWayUp setGear is a function to change the gear, getGear is a function to return the current gear
Adam
@GoingAllTheWayUp
Feb 14 2017 22:16
I I was thinking that, but the examples used this arggument called change. I am not sure what/how this setGear is supposed to be "set" so I did this.setGear = function () { gear++; }; this.getGear = function () { return gear; };

my whole code ```
var Bike = function() {

// Only change code below this line.
var gear;
this.setGear = function () {
gear++;
};
this.getGear = function () {
return gear;
};
};
var myBike = new Bike();
```

I am missing a key element i think
how is it setting the gear?
what does that mean?
in the example they pass an argument through a public method
Adam
@GoingAllTheWayUp
Feb 14 2017 22:22

var Bike = function() {

// Only change code below this line.
var gear = 0;
this.setGear = function (change) {
gear += change;
};
this.getGear = function () {
return gear;
};
};
var myBike = new Bike();

I don't understand how you pass a value to change in that public method, do i place it in Bike();
John Nunns
@johnnunns
Feb 14 2017 22:25
can you post which one is your code
and remember ``` above and below
@GoingAllTheWayUp
just post whatever you have right now
Jack Lyons
@JackEdwardLyons
Feb 14 2017 22:27
hey guys i have some css problems and wondering if someone could help!
i've done basically all the JS
taltmann42
@taltmann42
Feb 14 2017 22:27
@ilonchik the API-call returns this error: Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.
Jack Lyons
@JackEdwardLyons
Feb 14 2017 22:27
but im trying to make a spotify search app
i would like the boxes to line up in rows of three, if possible
Ilona
@ilonchik
Feb 14 2017 22:28
@taltmann42 thank you
CamperBot
@camperbot
Feb 14 2017 22:28
ilonchik sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 14 2017 22:29
@JackEdwardLyons you can give the boxes a width of 33.3333% and then use either float:lefton the boxes or display:flex; flex-wrap:wrap on the container
Adam
@GoingAllTheWayUp
Feb 14 2017 22:30
var Bike = function() {

  // Only change code below this line.
var gear = 0;
  this.setGear = function (shift) {
    gear += shift;
  };
   this.getGear = function () {
     return gear;
   };
};

var myBike = new Bike();
4 of 6 tasks ok
myBike.getGear() should return 1 after calling myBike.setGear(1). fails
taltmann42
@taltmann42
Feb 14 2017 22:31
@GoingAllTheWayUp you don't want to add the gear, you want to set/assign the gear
Adam
@GoingAllTheWayUp
Feb 14 2017 22:31
When i do == instead I only pass 3 tasks
taltmann42
@taltmann42
Feb 14 2017 22:32
@GoingAllTheWayUp because that's a comparison operator, not assignment
Adam
@GoingAllTheWayUp
Feb 14 2017 22:32
OK, i see
@taltmann42 thanks
CamperBot
@camperbot
Feb 14 2017 22:32
goingallthewayup sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 518 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Adam
@GoingAllTheWayUp
Feb 14 2017 22:32
I get confused with = == and ===
taltmann42
@taltmann42
Feb 14 2017 22:34
@GoingAllTheWayUp = assigns the thing to the right of it to the thing to the left of it (a=5 assigns 5 to a). == and === check if the left value and the right value is the same. Difference is, that == doesn't check the type, so 5=="5" is true, and 5==="5" is false because one is of type number and one of type string
John Nunns
@johnnunns
Feb 14 2017 22:42
@GoingAllTheWayUp do you have it adam? sorry I didn't respond didn't get a tag from you so I've b een working on something else
Adam
@GoingAllTheWayUp
Feb 14 2017 22:43
ok cool. thank you, @johnnunns I am getting a better picture now
CamperBot
@camperbot
Feb 14 2017 22:43
goingallthewayup sends brownie points to @johnnunns :sparkles: :thumbsup: :sparkles:
:cookie: 183 | @johnnunns |http://www.freecodecamp.com/johnnunns
John Nunns
@johnnunns
Feb 14 2017 22:44
yeah i think just understanding the += would only add to the gear. so if you have a 6 gear bike, and you ran your previous function, let's say, setGear(4), it would add 4 to the gear already set at 6
which would be impossible @GoingAllTheWayUp
that's if the gear was set at 6 before*
Adam
@GoingAllTheWayUp
Feb 14 2017 22:47
I did not understan the bike concept I understood the car's speed in the example but this bike gears went over myhead
Fabio
@Gentarozzo
Feb 14 2017 22:48

Can someone help me with this?

$.ajax({
type: "GET",
url: "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Jimi_Hendrix&callback=?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (pagina){
var trovato = pagina.query.pages;
console.log(pagina)
$.each(trovato, function(i,j){
$("#risultati").append("<li>" + trovato.pageid+ "</li>")
})

       },
    error: function (errorMessage) {
    }
});
I got 10 undefined from this ajax call
Haseeb Arshad
@haseebuchiha
Feb 14 2017 22:52
How to add picture in codepen.io?
Can you please tell me
?
Fabio
@Gentarozzo
Feb 14 2017 23:00
@haseebuchiha what kind of?
John Nunns
@johnnunns
Feb 14 2017 23:06
function findMaxRepeatCountInWord(word) {
  var x = word.split("")// Break up individual words into individual letters.
   .reduce(function(result, letter){
    var regexp = new RegExp(letter, 'g')
    result[letter]= word.match(regexp).length

    return result;
  }, {})

  return x

  // Count the instances of each letter
  // Iterate all the counts and find the highest
  // Return this word's max repeat count
}
So I have the counts of individual letters here, now I'm trying to iterate through them all and compare which letter repeats itself the most
I wanted to use a for loop, but trying to print x[0] doesn't work, it'd have to be like x."whatever letter in the word" to produce the count
so how do I compare that value to the others?
IronDreamer0328
@IronDreamer0328
Feb 14 2017 23:09
how does the build a tribute page challenge work
R^2
@iriquoi
Feb 14 2017 23:10
<vid></vid>
*i
sorry guys new guy how do I use the markdowns??
Adam
@GoingAllTheWayUp
Feb 14 2017 23:22
https://www.freecodecamp.com/challenges/condense-arrays-with-reduce
Why have a 0 after the function inside the reduce method?
var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal - currentVal;
}, 0);
Gulsvi
@gulsvi
Feb 14 2017 23:29
@GoingAllTheWayUp It's the starting 'prveiousVal' as it goes through the array
var array = [5, 10, 20];

var singleVal = array.reduce(function(previousVal, currentVal) {
  console.log('prev: ', previousVal);
  console.log('curr: ', currentVal);  
  return previousVal - currentVal;
}, 0);

console.log(singleVal);
Try this and change the 0 to see what happens:
Adam
@GoingAllTheWayUp
Feb 14 2017 23:31
its the offset.
@SkyCoder01 thanks
CamperBot
@camperbot
Feb 14 2017 23:31
:cookie: 199 | @skycoder01 |http://www.freecodecamp.com/skycoder01
goingallthewayup sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Adam
@GoingAllTheWayUp
Feb 14 2017 23:37
callback functions are predifined or strict to their respective method?like myArray.sort(),reduce(), etc.
Is the callback specific,as in, are the formulas used characteristics of the method?
Thomas Mullen
@t-mullen
Feb 14 2017 23:42
@GoingAllTheWayUp The 0 is the initialValue. The value to use as the first argument to the first call of the callback.
@GoingAllTheWayUp Not sure what you mean by "predefined or strict to their respective method"...
Adam
@GoingAllTheWayUp
Feb 14 2017 23:44
I do see that, @RationalCoding . IM talkingthe formula in the callback function like in return here
var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal - currentVal;
}, 0);
Thomas Mullen
@t-mullen
Feb 14 2017 23:44
Yes, what about the callback?
Some methods have callbacks and some don't. They take different things as parameters too, if that's what you mean.
The only way to know what arguments a method takes is to look at the docs for that method.
Adam
@GoingAllTheWayUp
Feb 14 2017 23:46
Why does return not just return the final value why do you have to do the formula with it?
Like why even have to type the function out? seems redundent.
im just not sure how it all works, and im just think out loud
Gulsvi
@gulsvi
Feb 14 2017 23:49
You have to type it out to tell it how to reduce the array
Adam
@GoingAllTheWayUp
Feb 14 2017 23:49
I have another question.. then
Gulsvi
@gulsvi
Feb 14 2017 23:50
You might see it more concise like:
var singleVal = array.reduce((a,b) => {return a - b;}, 0);
Adam
@GoingAllTheWayUp
Feb 14 2017 23:50
is there another way to reduce or sort etc.? like verbose way?
is this method a pre configured computaion like a short cut
Gulsvi
@gulsvi
Feb 14 2017 23:51
Yeah, it's called a higher order function. You could use a for() loop too
Adam
@GoingAllTheWayUp
Feb 14 2017 23:53
It could this change in the future ? how we use methods I mean ? @SkyCoder01
Gulsvi
@gulsvi
Feb 14 2017 23:54
I don't know, just started learning this all a month ago :p
Adam
@GoingAllTheWayUp
Feb 14 2017 23:54
nice! good job!
Gulsvi
@gulsvi
Feb 14 2017 23:55
Thanks :) still a lot to learn though
Adam
@GoingAllTheWayUp
Feb 14 2017 23:57
me too, togeather our powers combined
about how many of these lessons do you try and complete at any given time or day or week?
Gulsvi
@gulsvi
Feb 14 2017 23:59
I've been trying to do at least one a day while working on front-end projects