These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Feb 2016
Sophanarith Sok
@sok213
Feb 21 2016 00:15
Is anyone working on the React Recipe Box project? I am about 60% done, but I would appreciate it if someone was willing to assist me in completing the project.
Richard Corbett
@reacorbett
Feb 21 2016 00:16
It has come a long way from 24 hours ago.
http://codepen.io/reacorbett/full/EPzmqY/
I can't seem to figure out how to make the image that say richards portfolio to react to resizing of the browser.
Andrea Stringham
@astringham
Feb 21 2016 00:21
add the img-responsive class @reacorbett
looks great, btw
Richard Corbett
@reacorbett
Feb 21 2016 00:22
@astringham thanks.
@astringham wow. i should have known that. Brain dead today.
Andrea Stringham
@astringham
Feb 21 2016 00:27
@reacorbett no worries. I’ve worked on something I already knew for hours before figuring it out on more than one occasion
Mafalda
@otmeek
Feb 21 2016 00:28
@reacorbett that looks so good!
Richard Corbett
@reacorbett
Feb 21 2016 00:29
@otmeek Thanks :). I've been working my but off on it.
CamperBot
@camperbot
Feb 21 2016 00:29
reacorbett sends brownie points to @otmeek :sparkles: :thumbsup: :sparkles:
Mafalda
@otmeek
Feb 21 2016 00:29
I thought the blurry effect was some css magic and then I realised you are using two images. That's so clever
CamperBot
@camperbot
Feb 21 2016 00:29
:star: 353 | @otmeek | http://www.freecodecamp.com/otmeek
Mafalda
@otmeek
Feb 21 2016 00:30
great graphic design skills!
Richard Corbett
@reacorbett
Feb 21 2016 00:31
@otmeek Made the graphics using gimp. Gimp is wonderful for these kind of things.
Alexander Køpke
@alexanderkopke
Feb 21 2016 00:57
I think the graphics skills will impress and help you land jobs :+1:
Ghost
@ghost~56c733f2e610378809c24d2c
Feb 21 2016 01:03
@reacorbett it is nice but the fuzzy to clear sort of hurts my eyes and makes me ill
thybean
@thybean
Feb 21 2016 02:19
Hi, im trying to adjust the margins of a box which inside contains an image, I am attempting to make the sides of the box flush with the sides of pictures, and am able to do so on the right side, but when i try to change the right margin of the box, my image is moved.
How can I avoid this?
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:21
@thybean please share what code you have written so far
thybean
@thybean
Feb 21 2016 02:24
How can i copy the code i wrote in my code to this chat?
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:28
@thybean enclose your code within ``` and then post
thybean
@thybean
Feb 21 2016 02:29
  .title {
    font-family: Palatino;
    font-size: 50px;
    }
  .heading-image {
  height: 500px;
  width: 800px;
  position: relative;
  left: 30px;
  }
  .surrounding-grey-box {
  background-color: #E0E0E0;
  padding: 30px;
  margin: 45px;
  }
 .surround-white-box {
  background-color: white;
  margin-right: 28px;
  margin-left: 
  }

</style>
<body>
<div class='box surrounding-grey-box'>
  <h1 class='text-center title'> Sir Wintston Churchill</h1>
  <h2 font-size: class='text-center'> <i> The British Bulldog</i> </h2>
  <div class='box surround-white-box'>
  <img src='http://megamind.ru/upload/medialibrary/076/0768c8fb308172019b3b3cc70e8ac26f.jpg' class='heading-image'></img>
<h5 class='text-center'> Sir Winston Churchill playing a quick game of "Rock, Paper, Scissors" in London.</h5>
  </div>
<br>
<br>
<br>
<p class='text-center'> Here's a timeline of Sir Winston Churchills' life:</p>
<ul>
  <li> 1943 bla bla bla </li>
</ul>
</div>
</body>
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:31
@thybean the requirement is to have the image in the middle of the box right?
Brett
@BLayman
Feb 21 2016 02:32
Quick question, I'm trying to use a variable to insert a url into my jQuery css function without any luck. It seems to work when I copy and paste the url arguement directly, just not as a variable. Any suggestions?
   backgroundUrl = "url(https://pixabay.com/static/uploads/photo/2015/08/28/18/25/seattle-912274_960_720.jpg)";
     $("body").css("background-image","backgroundUrl")
thybean
@thybean
Feb 21 2016 02:32
The image is by default in the middle of the box, I just wanted the edges of the box essentially gone so that I can have a small box area above and below my image
And the problem is that when I change the margins of the box to "hide" them, the left margin forces my image to move
I also dont know how to make my list centered.
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:35
@thybean quick tip: you can essentially get the same thing done by having a padding to your box and then giving it a border without having a separate box.
can you share the codepen you are doing it in? It's rather hard to understand w/o seeing it.
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:36
@BLayman try
$("body").css("background-image", backgroundUrl)
thybean
@thybean
Feb 21 2016 02:38
@dshgna I also do not know what you mean by giving my box a border?
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:39
@thybean: you should have all the css stylings within css not in a <style> element. Also you have set a fixed width for the image.
@thybean I only understood when I saw the pen. applying a border won't work here.
@thybean try using max-width instead of a fixed width and see. also add the img-responsive class
thybean
@thybean
Feb 21 2016 02:40
Is it really a big deal if I have styles in my html folder? Also what does a fixed width have to do with the image being moved when the left margin is shifted @dshgna
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:42
@thybean its a best practice to have the style, script and content separate. Think about the readability of your code for one thing.
thybean
@thybean
Feb 21 2016 02:42
mmk
Brett
@BLayman
Feb 21 2016 02:43
@dshgna ah, good catch. It's always those little things. Thanks.
CamperBot
@camperbot
Feb 21 2016 02:43
blayman sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 181 | @dshgna | http://www.freecodecamp.com/dshgna
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:44
@thybean give me a sec to get back on the margin issue.
batilc1
@batilc1
Feb 21 2016 02:45
@thybean the idea is to have html css and js all separated nice and well. this way, all your logic is split up into sensible components.
@thybean on the other extreme, you could write js inside html file as well
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:45
@thybean your image shifts because of this css element: position: relative;
thybean
@thybean
Feb 21 2016 02:46
Yea, I just noticed that setting the image as a block and giving it its own margins could help.
Im trying that atm
batilc1
@batilc1
Feb 21 2016 02:46
@thybean but these things make no sense. your file's name is blabla.html, but it contains css / js codes? Would you like your excel to contain powerpoints even though technincally you could?
thybean
@thybean
Feb 21 2016 02:47
@batilc1 Im just beginning to learn these things, I wasnt explained the importance.
batilc1
@batilc1
Feb 21 2016 02:48
@thybean i am not acting you :) just trying to make you understand by thinking bout the issue
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:48
@batilc1 its somewhat amusing how a person reacts to a man vs woman explaining the same thing lol.
batilc1
@batilc1
Feb 21 2016 02:49
@dshgna yeah!, people's response always vary according to gender though :)
thybean
@thybean
Feb 21 2016 02:50
@dshgna I changed my image to this .heading-image { height: 500px; max-width: 800px; display: block; margin-left: auto; margin-right: auto; }
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:50
@batilc1 exactly! thanks for helping out :)
CamperBot
@camperbot
Feb 21 2016 02:50
dshgna sends brownie points to @batilc1 :sparkles: :thumbsup: :sparkles:
:star: 211 | @batilc1 | http://www.freecodecamp.com/batilc1
thybean
@thybean
Feb 21 2016 02:50
.heading-image {
  height: 500px;
  max-width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:50
cool
batilc1
@batilc1
Feb 21 2016 02:51
thanks to you too @dshgna
CamperBot
@camperbot
Feb 21 2016 02:51
batilc1 sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 182 | @dshgna | http://www.freecodecamp.com/dshgna
thybean
@thybean
Feb 21 2016 02:51
So what would I have to do now to ensure that the box does not move the image?
batilc1
@batilc1
Feb 21 2016 02:52
@thybean you could make it an absolutely positioned element as a last resort
thybean
@thybean
Feb 21 2016 02:53
@batilc1 How do I go about that?
And why is it considered a last resort?
batilc1
@batilc1
Feb 21 2016 02:54
@thybean absolute positioning is, although very very useful, breaks down the size of the parent. For example suppose you have a <div> <img/> </div> if you use relative position on img and have it size 300x300, div will be 300x300 as well. If you use absolute position, div will be 0x0
this is just one of the single issues.
basically, position: absolute creates exceptions in your css that you will need to handle manually later on when you build bigger things
thybean
@thybean
Feb 21 2016 02:56
@batilc1 I will try this. Thanks
CamperBot
@camperbot
Feb 21 2016 02:56
thybean sends brownie points to @batilc1 :sparkles: :thumbsup: :sparkles:
Dulshani Gunawardhana
@dshgna
Feb 21 2016 02:56
@thybean the problem with your original code was that you were using relative positioning. With relatvie positioning, because you are used the left attribute, it is shifted 30px left from where it originally should be. More on posiioning here;https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
CamperBot
@camperbot
Feb 21 2016 02:56
:star: 212 | @batilc1 | http://www.freecodecamp.com/batilc1
batilc1
@batilc1
Feb 21 2016 02:56
@thybean wait, you can also do what you want with relative as well (i think)
@thybean if you only set margin-left: auto and remove the margin-right, than your element will always be on the right-most side
thybean
@thybean
Feb 21 2016 02:57
@dshgna Yea I now know that it is better to make the image a block(?), but I am still having troubles with it shifting. Thanks!
CamperBot
@camperbot
Feb 21 2016 02:57
thybean sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 183 | @dshgna | http://www.freecodecamp.com/dshgna
thybean
@thybean
Feb 21 2016 02:57
@batilc1 Ill try both your solutions
batilc1
@batilc1
Feb 21 2016 02:58
@thybean good luck :thumbsup:
thybean
@thybean
Feb 21 2016 02:59
@batilc1 It seems that removing margin-right works well. :)
PowersCoding
@PowersCoding
Feb 21 2016 03:01
Feel I should know what to do next on this but am unsure. Care to set me off on a "next step"? Huge thanks in advance! http://codepen.io/PowersCoding/full/Goboeb/
Pete Considine
@pjconsidine
Feb 21 2016 03:01
hi everyone. does anyone know anything about Jade?
thybean
@thybean
Feb 21 2016 03:05
@PowersCoding I cant help you much with the coding aspect, but Im working on the same project and trying to allign my bullet points closer to the middle.
PowersCoding
@PowersCoding
Feb 21 2016 03:08
@thybean Yeah, not really sure what's up with those bullets!
thybean
@thybean
Feb 21 2016 03:08
@PowersCoding Im trying to find a solution for it right now.
@PowersCoding You still looking on how to align list to the middle?
PowersCoding
@PowersCoding
Feb 21 2016 03:17
@thybean That I am!
Greg Duncan
@GregatGit
Feb 21 2016 03:24
@PowersCoding Instead of Bullets you could have the years and you could try a different color shade background for each line
Richard Corbett
@reacorbett
Feb 21 2016 03:26
f anyone would like me to design buttons or other things for you, let me know. I will do it for free, as long as you credit me for it somewhere in your page.
http://codepen.io/reacorbett/full/EPzmqY/
thybean
@thybean
Feb 21 2016 03:28
@PowersCoding ive found that adding list-style-position: inside;
Makes the bullets stick to the centered text
Although I havent found a way to make all text in line with each other
PowersCoding
@PowersCoding
Feb 21 2016 03:29
This message was deleted
@thybean Where are you placing >> list-style-position: inside; ?
thybean
@thybean
Feb 21 2016 03:30
As a CSS style
You can write it inline or in your css folder,
PowersCoding
@PowersCoding
Feb 21 2016 03:31
Got it. Thanks!
thybean
@thybean
Feb 21 2016 03:31
@PowersCoding And instead of centering your text, you can use margin-left: 250px to "center" your text.
PowersCoding
@PowersCoding
Feb 21 2016 03:35
Nice. In one section (a quote used), I used both margin-left: 250px and margin-right: 250px ... Looks nice
thybean
@thybean
Feb 21 2016 03:35
Yea just tinker around with it to get your desired effect
paulmacovei
@paulmacovei
Feb 21 2016 04:16
hey guys idk why my on click event doesn't work after i clikc the first time :(

function rand_number() {
return (Math.round(Math.random() * 99));
}

function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}

var color = "blue";
var header = "#" + rand_color();

$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});

not sure why it doesnt come out formatted
thybean
@thybean
Feb 21 2016 04:17
I cant help you with this but you can use [code here] to make your code appear nicely.

Matt Yamamoto
@MattYamamoto
Feb 21 2016 04:17
wiki format
CamperBot
@camperbot
Feb 21 2016 04:17

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

paulmacovei
@paulmacovei
Feb 21 2016 04:18

[function rand_number() {
return (Math.round(Math.random() * 99));
}

function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}

var color = "blue";
var header = "#" + rand_color();

$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});
]

'''js
function rand_number() {
return (Math.round(Math.random() * 99));
}

function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}

var color = "blue";
var header = "#" + rand_color();

$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});
'''

CamperBot
@camperbot
Feb 21 2016 04:18
:bulb: to format code use backticks! ``` more info
paulmacovei
@paulmacovei
Feb 21 2016 04:19
function rand_number() {
  return (Math.round(Math.random() * 99));
}

function rand_color() {
  var color = [rand_number(), rand_number(), rand_number()];
  var colors = color.join("");
  colors = colors.toString();
  return colors;
}

var color = "blue";
var header = "#" + rand_color();

$(document).ready(function() {
  $("#new_quote").on("click", function() {
    $("body").css("background-color", header);
  });
});
there we go haha, thanks @thybean @MattYamamoto
CamperBot
@camperbot
Feb 21 2016 04:19
paulmacovei sends brownie points to @thybean and @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 917 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
:star: 130 | @thybean | http://www.freecodecamp.com/thybean
Matt Yamamoto
@MattYamamoto
Feb 21 2016 04:19
@paulmacovei header is a fixed value, you assign it once. so in the click function there is nothing to change.
why not put what you have for header inside the click function. That should work as intended
paulmacovei
@paulmacovei
Feb 21 2016 04:21
perfect, thank you :)
should have caught that haha
Catalin Scripcariu
@CatalinScr
Feb 21 2016 04:29
Hi all, I have just finish the weather app. Any feedback is welcome: http://s.codepen.io/CatalinScr/debug/yeZWNQ
Matt Yamamoto
@MattYamamoto
Feb 21 2016 04:40
@CatalinScr nice and simple, I like it. The weather icon gets pretty small at small screen widths, but that is pretty minor.
thybean
@thybean
Feb 21 2016 04:41
If anyone could review my first project, thatd be nice. :) http://codepen.io/thybean/full/eJwJdz/
paulmacovei
@paulmacovei
Feb 21 2016 04:43
    <div class="container" id="quote_box">
        <h1>Random Quote Machine </h1>
        <p>Twitter Link</p>
        <p>Tumblr Link</p>
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-primary" id="new_quote">
                    <p>Twitter</p></button>
            </div>
            <div class="col-xs-12">
            <div class="button pull-right">
                <button type="button" class="btn btn-primary" id="new_quote">
            <p>New quote</p>
            </div>
</div>
Catalin Scripcariu
@CatalinScr
Feb 21 2016 04:43
@MattYamamoto Thanks Matt for the feedback. The icons have just 50px from the weather Api and if I put them a little smaller they will be pixelate.
CamperBot
@camperbot
Feb 21 2016 04:43
catalinscr sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 919 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
paulmacovei
@paulmacovei
Feb 21 2016 04:43
not sure why that doesn't do buttons on same row lol ^
Matt Yamamoto
@MattYamamoto
Feb 21 2016 04:46
@thybean looks good, the picture is a little large for my taste, but that is probably more of a personal thing. But, the image doesn't stay centered at small screen sizes. Try using a percent for the margin-left for your .heading-image class
thybean
@thybean
Feb 21 2016 04:47
@MattYamamoto Thanks!
CamperBot
@camperbot
Feb 21 2016 04:47
thybean sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 920 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
paulmacovei
@paulmacovei
Feb 21 2016 04:48
nvm i needed to modify col to 6 instead of 12
Matt Yamamoto
@MattYamamoto
Feb 21 2016 04:52
@CatalinScr I meant that at small screen sizes the image gets too small, but I think I understand where you're coming from. I think you could give that image it's own class and style it seperately from the FreeCodeCamp image to better control its size.
Catalin Scripcariu
@CatalinScr
Feb 21 2016 04:56
@MattYamamoto this part I haven't tested. The icon has separate properties in CSS than the image, but I will try to modify with media.
paulmacovei
@paulmacovei
Feb 21 2016 04:58
does anyone have a good guide of how i can use jquery / ajax to pull random quotes from an API or something like that?
don't know where to begin :S
Catalin Scripcariu
@CatalinScr
Feb 21 2016 05:01
Matt Yamamoto
@MattYamamoto
Feb 21 2016 05:03
@CatalinScr better. When you say the image has it's own styles are you referring to the weatherimgclass? I was just refering to the <img> tag itself, you have a width and height on the img tag of 25%.
Catalin Scripcariu
@CatalinScr
Feb 21 2016 05:03
yes
weatherimg is the class for the icon
Matt Yamamoto
@MattYamamoto
Feb 21 2016 05:04
@CatalinScr well the style for img is intefering I believe.
Catalin Scripcariu
@CatalinScr
Feb 21 2016 05:08
@MattYamamoto I remove the image style and I added a class for that img tag. Now that class I'm styling
Matt Yamamoto
@MattYamamoto
Feb 21 2016 05:09
I think that works better. :+1:
Catalin Scripcariu
@CatalinScr
Feb 21 2016 05:13
great
DJ
@qualitymanifest
Feb 21 2016 05:16
@paulmacovei an easier way would be to use an array of quotes and select them randomly
Olivia Legge
@livmaria7891
Feb 21 2016 05:24
Can anyone explain to me how this piece of code works to turn arguments into an array?
var args = Array.prototype.slice.call(arguments);
Ken Haduch
@khaduch
Feb 21 2016 05:32
@paulmacovei - yes, I agree with @qualitymanifest - until you get the API section down, it's a lot easier to set up an array of quotes and use that with random selection. Make it a long enough list so that it's not too boring... :) You can always come back and do the quote API when you have time...
DJ
@qualitymanifest
Feb 21 2016 05:35
yeah and you'll learn how to use APIs a little later anyway. i wouldn't worry about that for the quotes challenge.
Matt Yamamoto
@MattYamamoto
Feb 21 2016 05:42
@livmaria7891 I can try... slice is a method of the Array object, so Array.prototyp.slice get's that function and then you are using .call to feed that function the this value it is supposed to operate on. Normally, if you had an array you could just do arr.slice() which works becuase in arr, in my example, has the slice() method up its prototype chain. arguments is not an array, so you can't do arguments.slice(), so we just force javascript to use that method on the arguments array like object in the manner you posted Array.prototype.slice.call(arguments). And since the output of the slice() method is an array, you now have your arguments in a proper array.
anyone feel free to correct me because I'm like 80% on that. :smile:
Richard Corbett
@reacorbett
Feb 21 2016 05:49
I am having trouble getting my Twitter button to do what i want it to. I am trying to have the image change whenever you have over it. I dont know what I am doing wrong. The button is supposed to be in the bottom left corner of the page. Can someone look at my code and see what I am doing wrong?
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
Olivia Legge
@livmaria7891
Feb 21 2016 05:53
@MattYamamoto Excellent explanation! Thank you!
CamperBot
@camperbot
Feb 21 2016 05:53
livmaria7891 sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 921 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
idietmoran
@idietmoran
Feb 21 2016 05:59

@reacorbett you dont have an image defined for your twitter so it doesn't even appear

       <div class="col-xs-3">
          <a href="#" class="img-responsive" class="twitter"></a>
        </div>

it's currently just a link

@reacorbett the url idk if it works because the res might be too big idk
@reacorbett nevermind i figured it out, try this
.twitter{
  display:block;
  background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');

  height: 132px;
  width: 270px;
}
      <div class="col-xs-3">
          <span class="twitter img-responsive"></span>
        </div>
idietmoran
@idietmoran
Feb 21 2016 06:04
@reacorbett
sorry for spam but change the last one this and it works.
       <div class="col-xs-3">
          <a href="#"><span class="twitter img-responsive"></span></a>
        </div>
Richard Corbett
@reacorbett
Feb 21 2016 06:05
@idietmoran OMG! thank soo much. that works great.
CamperBot
@camperbot
Feb 21 2016 06:05
reacorbett sends brownie points to @idietmoran :sparkles: :thumbsup: :sparkles:
:star: 306 | @idietmoran | http://www.freecodecamp.com/idietmoran
Richard Corbett
@reacorbett
Feb 21 2016 06:35
@idietmoran I got all of them to work but the fcc button. Another thing. they are no longer responsive to resizing. Is there a way around that?
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
idietmoran
@idietmoran
Feb 21 2016 06:36
@reacorbett one sec looking now
@reacorbett
heh i found the issue
.freecc:hover{
  background-image:('http://i1155.photobucket.com/albums/p543/richard_corbett1/fccgraf_active_zpsmqx6ewqb.png');
}
idietmoran
@idietmoran
Feb 21 2016 06:41
@reacorbett you're missing one little word
Richard Corbett
@reacorbett
Feb 21 2016 06:41
@idietmoran url!! I stared at that for a while. I cant beleive i missed it.
idietmoran
@idietmoran
Feb 21 2016 06:42
@reacorbett :D
Richard Corbett
@reacorbett
Feb 21 2016 06:43
@idietmoran do you know why the images are no longer responsive to resizing?
Richard Corbett
@reacorbett
Feb 21 2016 07:09
Is this what is causing the images to stop responding to bootstrap img-response?
.twitter{
display:block;
background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');
height: 132px;
width: 270px;
}
help format
CamperBot
@camperbot
Feb 21 2016 07:11

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Richard Corbett
@reacorbett
Feb 21 2016 07:12
s this what is causing the images to stop responding to bootstrap img-response?
.twitter{
display:block;
background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');
height: 132px;
width: 270px;
}
idietmoran
@idietmoran
Feb 21 2016 07:29
@reacorbett because it's no longer an img element
Richard Corbett
@reacorbett
Feb 21 2016 07:30
Is there a way i can make it responsive to resizing of the browser window and still keep the image change on hover feature?
@idietmoran
idietmoran
@idietmoran
Feb 21 2016 07:32
@reacorbett hmmmmm
@reacorbett you have to make it an img element that change on hover with javascript
that's the only other way I can think of
Richard Corbett
@reacorbett
Feb 21 2016 07:33
Ah ok.
idietmoran
@idietmoran
Feb 21 2016 07:33
@reacorbett or media queries in CSS
Richard Corbett
@reacorbett
Feb 21 2016 07:33
I dont know anything about javascript yet. i will just hold out on that for a while
Ogundele Olumide
@Lumexralph
Feb 21 2016 07:38

Hey guys, now this is how far I have gone with the Pomodoro clock, as usual it's a JSFiddle
please be kind to help check if am on track, how can I stop my plus and minus button from interfering with the countdown ?
My guess, a boolean but can't wrap my head around it yet....please help out thanks.

https://jsfiddle.net/wtwgpmpg/16/

idietmoran
@idietmoran
Feb 21 2016 07:43
@Lumexralph
do something kind of like this i think
// variable to determine if clock is running
var clockLive = true;

$('#plus').click(function() {
     // if clock is not running 
     if(!clockLive){
          // do this
          // your code
     }
})
Ogundele Olumide
@Lumexralph
Feb 21 2016 07:53
@idietmoran thanks man, would work on that and see our it goes, thanks for your time
CamperBot
@camperbot
Feb 21 2016 07:53
lumexralph sends brownie points to @idietmoran :sparkles: :thumbsup: :sparkles:
:star: 310 | @idietmoran | http://www.freecodecamp.com/idietmoran
Caleb Martin
@caleb272
Feb 21 2016 10:30
anyone want to test my half complete portfolio http://codepen.io/thecoder15/pen/EPJMEN?editors=1100
Panagiotis
@bohemian83
Feb 21 2016 10:51
Hello folks...I was wondering if someone can help me with my ScrollSpy troubles. ..
This is my pen. The problem is not the auto scrolling, it is rather, that when I scroll manually, the icons on the top, do not change colour when activated.
cla63
@cla63
Feb 21 2016 11:01
@bohemian83 the hamburger wont open the menu... I think you have missed the bootstrap.js
Panagiotis
@bohemian83
Feb 21 2016 11:07
That's strange. Bootstrap is loaded in my pen. Is there a setting I have to activate when sending the link?
cla63
@cla63
Feb 21 2016 11:09
if I look the pen in the js settings you have added only the jquery
cla63
@cla63
Feb 21 2016 11:09
just quick add ....
greg
@wearenotgroot
Feb 21 2016 11:12
@bohemian83 also data-target should be selecting .class in nav
Panagiotis
@bohemian83
Feb 21 2016 11:12
Ah, I am stupid. Thanks guys. That solved this problem. I have a new one now. xD When I scroll down, once I reach the second page, the glyphicon gets activated and stays activated even when I scroll to the 3rd and 4th pages.
greg
@wearenotgroot
Feb 21 2016 11:12
@bohemian83 data-target=".navbar" for example <----------------------------should change the color or icon when you scroll
cla63
@cla63
Feb 21 2016 11:14
ciao... have a nice coder day bro ;)
greg
@wearenotgroot
Feb 21 2016 11:15
@bohemian83 or #my-nav remember the selectors
Panagiotis
@bohemian83
Feb 21 2016 11:18
@wearenotgroot I actually use .navbar-collapse for the glyphicon list. Shouldn't I target this one? #my-nav is having the same problem as above. The second icon stays activated when I scroll through to the 3rd section.
greg
@wearenotgroot
Feb 21 2016 11:22
@bohemian83 try to adjust the data-offset and see if it helps
Caleb Martin
@caleb272
Feb 21 2016 11:32
could someone tell me how to change the top buttons colors when you hover over them
Coy Sanders
@coymeetsworld
Feb 21 2016 11:32
@caleb272 use CSS
use the hover pseudoclass for the anchor tag
Caleb Martin
@caleb272
Feb 21 2016 11:33
i know i have been trying li: hover and things like that but it doesn’t work
Panagiotis
@bohemian83
Feb 21 2016 11:34
@wearenotgroot No, it doesn't, tried a few combinations.
Coy Sanders
@coymeetsworld
Feb 21 2016 11:36
code?
Pia Lise Selnes
@pialise
Feb 21 2016 11:37
Spent 3 hours not getting anything from my API-call.
Figured out I had mixed id and class in HTML/CSS :worried:
Coy Sanders
@coymeetsworld
Feb 21 2016 11:37
oh I see @caleb272 idk if you can apply hover to a class
greg
@wearenotgroot
Feb 21 2016 11:37
@caleb272 try something like, just an example -------->li:hover, a:hover, li:focus, a:focus{color:blue;background:transparent!important;}, actually li is not needed
Coy Sanders
@coymeetsworld
Feb 21 2016 11:37
you should apply it to an element
don't think you can technically hover over a class
James Winfield
@jamesthemonkeh
Feb 21 2016 11:38
Hello. Can anyone advise me why my background photos are no longer showing on my portfolio task? http://codepen.io/jameswinfield/pen/xZNbxX Please!
greg
@wearenotgroot
Feb 21 2016 11:39
@bohemian83 couldnt figure it out either :worried:
Coy Sanders
@coymeetsworld
Feb 21 2016 11:41
@jamesthemonkeh I can't access the image either, perhaps its a permission issue with dropbox?
Caleb Martin
@caleb272
Feb 21 2016 11:41
.text-color {
  color: $light-green;
}

.text-color:hover {
  background-color: red;
}
should that wokr
work
Coy Sanders
@coymeetsworld
Feb 21 2016 11:42
try to use a hosting image site instead like imgur
greg
@wearenotgroot
Feb 21 2016 11:42
@pialise what you working on?
Coy Sanders
@coymeetsworld
Feb 21 2016 11:42
@caleb272 no I don't think you can add a pseudoclass for a class
Caleb Martin
@caleb272
Feb 21 2016 11:42
o ok
Coy Sanders
@coymeetsworld
Feb 21 2016 11:42
you need to add it to an HTML element, like an anchor tag
like a:hover, or li:hover
Pia Lise Selnes
@pialise
Feb 21 2016 11:43
@wearenotgroot Show Local Weather-page
@wearenotgroot Really frustrating to find that it's all my fault. But I guess I learned a lot :)
James Winfield
@jamesthemonkeh
Feb 21 2016 11:45
@coymeetsworld Will do thanks
CamperBot
@camperbot
Feb 21 2016 11:45
jamesthemonkeh sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 290 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
greg
@wearenotgroot
Feb 21 2016 11:46
@pialise well, machine just do what we ask so :smile:, dont worry you'll get the hang of it
Coy Sanders
@coymeetsworld
Feb 21 2016 11:46
np
Caleb Martin
@caleb272
Feb 21 2016 11:49
can someone look over the code i seem to be able to change the text color on hover but not the background color
greg
@wearenotgroot
Feb 21 2016 11:51
@caleb272 just add background:value on a:hover
it still doesn’t work
Coy Sanders
@coymeetsworld
Feb 21 2016 11:54
@caleb272 your values are not right, there should be no $ sign
either a predefined name like red, or a hex color which precedes with a #, like #FFF;
Caleb Martin
@caleb272
Feb 21 2016 11:55
ya there is a predefined orange
at the top
is there something im missing
Coy Sanders
@coymeetsworld
Feb 21 2016 11:59
ive never seen that before
Caleb Martin
@caleb272
Feb 21 2016 11:59
what
Coy Sanders
@coymeetsworld
Feb 21 2016 11:59
are you sure that's valid CSS?
variable declarations like that
actually, any variable declarations
Caleb Martin
@caleb272
Feb 21 2016 12:00
ya as you see i use them throught the project
even when i do orange instead of $orange it doesn’t work
Coy Sanders
@coymeetsworld
Feb 21 2016 12:00
yeah i guess so
greg
@wearenotgroot
Feb 21 2016 12:01
@caleb272 add !important
@caleb272 to force it
Caleb Martin
@caleb272
Feb 21 2016 12:01
to what
Coy Sanders
@coymeetsworld
Feb 21 2016 12:01
oh @caleb272 its background-color, not background
greg
@wearenotgroot
Feb 21 2016 12:01
@caleb272 background:orange!important
Caleb Martin
@caleb272
Feb 21 2016 12:02
thanks @wearenotgroot that worked
CamperBot
@camperbot
Feb 21 2016 12:02
caleb272 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 913 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Feb 21 2016 12:02
@caleb272 :+1:
Caleb Martin
@caleb272
Feb 21 2016 12:02
@coymeetsworld thanks
CamperBot
@camperbot
Feb 21 2016 12:02
caleb272 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 291 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Caleb Martin
@caleb272
Feb 21 2016 12:05
one more thing when you press on it how the color changes, how do i change that color
Coy Sanders
@coymeetsworld
Feb 21 2016 12:06
think it should be click
or active
click is JS
Caleb Martin
@caleb272
Feb 21 2016 12:08
thanks it was visited
Pedro Figueiredo
@pedronfigueiredo
Feb 21 2016 12:34
Hi, I am two challenges short of getting the FrontEnd Dev Certificate, so I naturally started tbinking about what’s next. I just noticed that Data Vizualization curriculum is incomplete for the moment. Should I start with backend and do Data visualization after it or should I do the proposed order?
Caleb Martin
@caleb272
Feb 21 2016 12:43
^ congrats how long have you been working at it
@pedronfigueiredo
personally i would go to backend unless you like data visualization but then again I’m still working toward my fornt end certificate
*front
Pedro Figueiredo
@pedronfigueiredo
Feb 21 2016 12:45
I started Friday the 22th of January :) @caleb272
@caleb272 can you give me your personal view of what are backend and data visualization respectively?
Caleb Martin
@caleb272
Feb 21 2016 12:47
so about a month nice you have been kicking ass i started 6 days ago and im going into the 2 hour ajax once i get my portfolio done
and im not too sure what you use data visualization i know it would be in the realm of processing user data to find stuff out
but for backend thats like making forms, databases, login stuff its the stuff that runs on the server
i hope that answers your question
Caleb Martin
@caleb272
Feb 21 2016 12:54
@pedronfigueiredo
Pedro Figueiredo
@pedronfigueiredo
Feb 21 2016 13:09
@caleb272 thank you caleb!
CamperBot
@camperbot
Feb 21 2016 13:09
pedronfigueiredo sends brownie points to @caleb272 :sparkles: :thumbsup: :sparkles:
:star: 272 | @caleb272 | http://www.freecodecamp.com/caleb272
Michael Aubrey
@mca62511
Feb 21 2016 13:13
Where does FCC suggest that we learn React from?
virtualmason
@virtualmason
Feb 21 2016 13:20
Gm, on wikipedia viewer (http://codepen.io/virtualmason/pen/dGBbba?editors=0010) am not sure how to read the response back from server to display anything. I can't seem to access info. how do I read this stuff?./*/jQuery11200017717666923999786_1456059964841({"batchcomplete":"","query":{"normalized":[{"from":"coding","to":"Coding"}],"pages":{"40892":{"pageid":40892,"ns":0,"title":"Coding","revisions":[{"contentformat":"text/x-wiki","contentmodel":"wikitext","":"{{wiktionary|coding}}\n'''Coding''' may refer to:\n [[Channel coding]], in coding theory\n [[Line coding]]\n [[Computer programming]], the process of designing, writing, testing, debugging / troubleshooting, and maintaining the source code of computer programs\n The process of [[Statistical classification]] of information\n [[Coding (social sciences)]], refers to an analytical process in which data, in both quantitative form (such as questionnaires results) or qualitative (such as interview transcripts) are categorised to facilitate analysis\n [[Coding (therapy)]], a controversial therapy used to treat addictions\n [[Legal coding]], the process of creating summary or keyword data from a document. It is widely used in the legal profession to create a fast-search index or database of documents for use in litigation\n A [[coding strand]] of DNA is translated into a protein product\n [[Code Blue (emergency code)]], which is a patient in Cardiac Arrest or Respiratory Arrest\n\n==See also==\n [[Code]], a rule for converting a piece of information into another form or representation \n [[Entropy encoding]], a lossless data compression scheme \n [[Source coding]]\n [[Medical coding]]\n [[Secret Coding]], Use to communicate secretly among the persons who knows the code\n\n{{disambiguation}}"}]}}}})
CamperBot
@camperbot
Feb 21 2016 13:20
:bulb: to format code use backticks! ``` more info
Richard
@stormgrass
Feb 21 2016 13:30
@virtualmason that query, it's not a search query, is it?
@virtualmason once you've got a search query, you just access the title the way you'd access anything in an object
virtualmason
@virtualmason
Feb 21 2016 13:38
Thank you stormgrass. I'm taking a look at it
Richard
@stormgrass
Feb 21 2016 13:38
Basically it's what FCC tells us in the few API and JSON challenges.
Not much different than going through the openweathermap API result
Andrew Grabarnick
@leprekon91
Feb 21 2016 14:15
Wiki Viewer: http://codepen.io/leprekon91/pen/qbzOjZ why cant i get the json object?
CamperBot
@camperbot
Feb 21 2016 14:15
no wiki entry for: viewer httpcodepenioleprekon91penqbzojz why cant i get the json object
kirbyedy
@kirbyedy
Feb 21 2016 14:17
@leprekon91 your json is missing a callback
callback=?
Marius Brad
@mbrad26
Feb 21 2016 14:22
Hello world
CamperBot
@camperbot
Feb 21 2016 14:22

welcome to FreeCodeCamp @mbrad26!

Andrew Grabarnick
@leprekon91
Feb 21 2016 14:25
@kirbyedy thanks!!!
CamperBot
@camperbot
Feb 21 2016 14:25
leprekon91 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 513 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Marius Brad
@mbrad26
Feb 21 2016 14:29
Hi guys! I'm a bit stuck on my Weather app. I've dynamically created 2 anchor tags so the user has the possibility to choose between Celsius and Kelvin. The problem is that I can't manage to update the temperature display based on their selection. I can update the temperature on load or on search button but not on the anchor tags. http://codepen.io/mbrad26/pen/eJaGRL?editors=0011
Michael Nazari
@mikenaza
Feb 21 2016 14:31
I'm constantly having trouble trying to center elements. Can someone tell me how to center the social icons on my portfolio page?http://codepen.io/mikenaza/pen/yeWZZx?editors=1100
Panagiotis
@bohemian83
Feb 21 2016 14:32
Did anyone try to combine smooth scroll and scrollspy for the portfolio page?
Marius Brad
@mbrad26
Feb 21 2016 14:33
@mikenaza Try use the Bootstrap grid.
kirbyedy
@kirbyedy
Feb 21 2016 14:36
@mikenaza you have to center the ul
but keep in mind that it will affect your menu items as well, so maybe you should give it an id and then center it
Marius Brad
@mbrad26
Feb 21 2016 14:37
Ok...now I've seen the problem. Wrappe the ul in a div
Michael Nazari
@mikenaza
Feb 21 2016 14:37
@kirbyedy do I use the "text-align" selector?
Ahh ok
kirbyedy
@kirbyedy
Feb 21 2016 14:37
yes, but on the <ul>
Marius Brad
@mbrad26
Feb 21 2016 14:37
Put the ul in a div with class text-center.
Michael Nazari
@mikenaza
Feb 21 2016 14:41
It worked!
@mbrad26 @kirbyedy thanksguys
@mbrad26 @kirbyedy * thank you
CamperBot
@camperbot
Feb 21 2016 14:42
mikenaza sends brownie points to @mbrad26 and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 514 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:star: 281 | @mbrad26 | http://www.freecodecamp.com/mbrad26
Marius Brad
@mbrad26
Feb 21 2016 14:42
You're welcome!
Marius Brad
@mbrad26
Feb 21 2016 14:50
Hi guys! I'm a bit stuck on my Weather app. I've dynamically created 2 anchor tags so the user has the possibility to choose between Celsius and Kelvin. The problem is that I can't manage to update the temperature display based on their selection. I can update the temperature on load or on search button but not on the anchor tags. http://codepen.io/mbrad26/pen/eJaGRL?editors=0011
Christos Kokolios
@KokoChris
Feb 21 2016 14:58
guys some feedback would be nice for my tic tac toe game :D, I will reconstruct the control panel but it will do for now
George
@gxenos
Feb 21 2016 15:03
@KokoChris i see the simon game challenge not the tic tac toe one
Christos Kokolios
@KokoChris
Feb 21 2016 15:03
yeah sorry gxenos :P
George
@gxenos
Feb 21 2016 15:04
so guys i am doing the random quote machine challenge.does anyone know if i should get the quotes from an api or i should just have some quotes in an array?
Christos Kokolios
@KokoChris
Feb 21 2016 15:04
@gxenos how ever you like
George
@gxenos
Feb 21 2016 15:07
@KokoChris if i have the quotes in an array,i am thinking that every time someone hits the button to get a ney quote i should generate a random number that corresponds to a position in the array.is this right?
h4r1m4u
@h4r1m4u
Feb 21 2016 15:09

@mbrad26 the issue is that your click handler is set for an element that you're creating dynamically. (the .celsius class element does not exist in the DOM when the page is initially loaded). your solution is to slightly adjust the click handler:

// change
$(".celsius").on("click", function() {
// to this
$(".temperature").on("click", ".celsius", function() {

more about the problem here, for example: http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements

@mbrad26 the above being said, your current approach is not ideal. when changing the temperature units, you're trying to poll the API again which is unnecessary. you've already called it once and have all the data needed available. during your first API call, save the retrieved weather object into a variable and inside the temperature changing click handler use the temperature from the weather object instead of calling the API again
i gotta run, but hopefully this will point you in the right direction
Christos Kokolios
@KokoChris
Feb 21 2016 15:15
@gxenos this sounds about right:D
Marius Brad
@mbrad26
Feb 21 2016 15:16
@h4r1m4u Thanks
CamperBot
@camperbot
Feb 21 2016 15:16
mbrad26 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1450 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Marius Brad
@mbrad26
Feb 21 2016 15:16
That makes sense.
George
@gxenos
Feb 21 2016 15:17
@KokoChris right,but when i generate the random quote how can i be sure that when someone clicks the button again they dont get the same quote?
BenjaminDowns
@BenjaminDowns
Feb 21 2016 15:31
Anyone able to glance at a codepen for me? I'm having some browser version issues. Some people are reporting seeing scrollbars and I want to make sure I've gotten rid of them. (they aren't appearing on mine.)
Joseph Morse
@jnmorse
Feb 21 2016 15:33
@gxenos you can store the previous quote temporarily and if the next quote is the same get another
George
@gxenos
Feb 21 2016 15:37
@jnmorse good quick fix thanks!
CamperBot
@camperbot
Feb 21 2016 15:37
gxenos sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 407 | @jnmorse | http://www.freecodecamp.com/jnmorse
Brian Kilrain
@bkilrain
Feb 21 2016 15:40
Good evening all - I’m just about finished with my portfolio and there is one last feature I want to get on there: I want the navbar tab to become active depending on where the user has scrolled on my page. I’m pretty sure this is a jQuery maneuver… but I can’t figure out how to get it going. Here is my code: http://codepen.io/bkilrain/pen/eJXorr
Joseph Morse
@jnmorse
Feb 21 2016 15:40
@BenjaminDowns are you talking about where the results are getting displayed? if so if the result is long enough there are scroll bars probably cause of the max-height on the div. also I thought the goal was to display a list of articles?
BenjaminDowns
@BenjaminDowns
Feb 21 2016 15:41

@jnmorse
Cool. If you aren't seeing scroll bars except for within that one div, that's perfect. Somebody else mentioned scroll bars outside of that and along the bottom in their browser, so I tweaked some things.

Yes – I'm doing a modified version. Eventually I'll add the list of articles, but I wanted content to appear too.

Michael Aubrey
@mca62511
Feb 21 2016 15:44
Heya. For my weather app, it isn't asking me for location permission/showing the temperature on my laptop. However it is working fine on my girlfriend's iPhone.
How's it working for everyone else?
Did I do something wrong?
Jett C
@jettcrowson
Feb 21 2016 15:45
It finds my temp
maybe you previously denied your browser access to your location
Joseph Morse
@jnmorse
Feb 21 2016 15:46
@BenjaminDowns there isn't when I view it full screen, but if shrink the window there is. If you want to somehow constrain the content might look at trying use vh(view height) and vw(view width)
George
@gxenos
Feb 21 2016 15:47
@mca62511 what browser are you using?
Michael Aubrey
@mca62511
Feb 21 2016 15:47
I'm using Chrome on a Chromebook
BenjaminDowns
@BenjaminDowns
Feb 21 2016 15:48
@jnmorse Perfect. I don't want to constrain it; I just didn't want scroll bars showing up unnecessarily right away.
Michael Aubrey
@mca62511
Feb 21 2016 15:48
@jettcrowson I thought of that, so I launched it in an incognito window. It didn't offer again.
Goje Samuel Andrei Daniel
@pringon
Feb 21 2016 15:48
hi guys!What does the maximum call stack exceeded error mean?
    moves.push(new move());
    moves[i-1].pos = temp[i];
    if(winO())
      moves[i-1].score = 10;
    else if(winX())
      moves[i-1].score = -10;
    else {
     var temp2 = temp.filter(function(val) {
       return val !== temp[i];
     });
      return select(temp2, "O")
    }
not this
BenjaminDowns
@BenjaminDowns
Feb 21 2016 15:48
@jnmorse thanks again for checking.
CamperBot
@camperbot
Feb 21 2016 15:48
benjamindowns sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 408 | @jnmorse | http://www.freecodecamp.com/jnmorse
BenjaminDowns
@BenjaminDowns
Feb 21 2016 15:48
@pringon That means you got stuck in a recursive loop.
George
@gxenos
Feb 21 2016 15:48
@mca62511 check if you have block the location in the past
Goje Samuel Andrei Daniel
@pringon
Feb 21 2016 15:48
@BenjaminDowns oh, ok thanks
CamperBot
@camperbot
Feb 21 2016 15:48
pringon sends brownie points to @benjamindowns :sparkles: :thumbsup: :sparkles:
:star: 214 | @benjamindowns | http://www.freecodecamp.com/benjamindowns
Joseph Morse
@jnmorse
Feb 21 2016 15:49
@mca62511 If you have httpseverywhere extention, you may want to disable it or uncheck codepen from the drop down, on the extension, it was preventing the ajax call from happing for me some time ago
Jett C
@jettcrowson
Feb 21 2016 15:49
Could someone help me with a small problem on my codepen for the wikipedia viewer? The search seems to work when I'm in the small code view, but in the full view, it does not. http://codepen.io/jettc/pen/NxmEGO
Michael Aubrey
@mca62511
Feb 21 2016 15:49
@gxenos how can I check that?
@jnmorse I do not have that extension, but good thought, thanks.
CamperBot
@camperbot
Feb 21 2016 15:50
mca62511 sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 409 | @jnmorse | http://www.freecodecamp.com/jnmorse
George
@gxenos
Feb 21 2016 15:51
@mca62511 check on the right of the url
BenjaminDowns
@BenjaminDowns
Feb 21 2016 15:51
@jettcrowson That is strange indeed. I just took a look, but nothing stands out to me.
Michael Aubrey
@mca62511
Feb 21 2016 15:51
@gxenos Nothing unusual to the right or left of the url
Jett C
@jettcrowson
Feb 21 2016 15:52
@BenjaminDowns Yes I've looked it over a few times and I see no reason why it shouldn't work
George
@gxenos
Feb 21 2016 15:52
@mca62511 i mean next to the bookmark star
Michael Aubrey
@mca62511
Feb 21 2016 15:52
@gxenos I figured, nothing there but the bookmark star
George
@gxenos
Feb 21 2016 15:53
@mca62511 well,it works for me.do you have another browser to try it to?
Michael Aubrey
@mca62511
Feb 21 2016 15:54
@gxenos I'll boot up my old laptop and try it there. But even if it does work I still want to know why it won't work on my Chromebook
George
@gxenos
Feb 21 2016 15:55
@mca62511 go to chrome settings and check the location settings
@mca62511 Settings > Show advanced settings> Content settings in the privacy section
Michael Aubrey
@mca62511
Feb 21 2016 15:58
I have it set to ask me
And when I checked exceptions, all the codepen.io exceptions were set to allow
I'll try checking the console and see if it is giving me any errors, sorry I should've checked that before asking

Well, Chrome is telling me this in the console,

getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

But I saw that warning before back when it was working.

To be clear, it was working fine a few days ago.
George
@gxenos
Feb 21 2016 16:01
@mca62511 i have no idea whats happening.sorry
Michael Aubrey
@mca62511
Feb 21 2016 16:02
@gxenos Working fine on Google Chrome on my Windows laptop.
@gxenos Well thanks for the effort at least
CamperBot
@camperbot
Feb 21 2016 16:02
mca62511 sends brownie points to @gxenos :sparkles: :thumbsup: :sparkles:
:star: 282 | @gxenos | http://www.freecodecamp.com/gxenos
Michael Aubrey
@mca62511
Feb 21 2016 16:15
Just tried deleting local cached data, no dice
Michael Aubrey
@mca62511
Feb 21 2016 16:20
More weirdness, it doesn't work on my Android phone either
Robert Uivarosi
@URobert
Feb 21 2016 16:36
@mca62511 Hi. Can I get the link?
can someone help me figure out how to align the footer text left a bit so its in line with the container?
and the other left most texts above?
Gabriel
@Zera99
Feb 21 2016 16:39
Question, is there a way in HTML to build an anchor link with text that is somewhere else in the page?
Oh, I can assign it through Javascript.. can't I?
max77p
@max77p
Feb 21 2016 16:41
nvm figured it out
tommy
@tommygebru
Feb 21 2016 16:43
@Zera99 what you referring to is a jump from one part to another, within the same page :smile: http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511
@max77p those are the best problems :wink2:
max77p
@max77p
Feb 21 2016 16:46
@tommygebru haha yea, love it
Gabriel
@Zera99
Feb 21 2016 16:48
@tommygebru No no, I meant change the anchor's href attribute. Did it with Jquery and some string concatenation xP
Edison Brito
@edisonbrito
Feb 21 2016 17:07
Jett C
@jettcrowson
Feb 21 2016 17:12
@BenjaminDowns It works in debug mode though? http://s.codepen.io/jettc/debug/NxmEGO
BenjaminDowns
@BenjaminDowns
Feb 21 2016 17:13

indeed. strange.

(small tip - add target='_blank to your links so they open in a new tab.

oops - target="blank"
(needed both quotation marks)
Eduardo Campaña
@orballo
Feb 21 2016 17:18
hi guys, i found that the first algorithm challenge (reverse a string) is already solved, is it normal?
Rex Schrader
@SaintPeter
Feb 21 2016 17:23
@Orballo If you are using a computer that someone else has used, or if you have viewed someone else's solution, then yes.
@Orballo The solutions are saved in localStorage on your browser
@Orballo You can click the Reset button to clear it.
Michael Aubrey
@mca62511
Feb 21 2016 17:24
still can't get this to show on my Chromebook. Does anyone else have a Chromebook?
George
@gxenos
Feb 21 2016 17:24
hey,does anyone know how to make a link open in a new tab in codepen?
Eduardo Campaña
@orballo
Feb 21 2016 17:24
@SaintPeter maybe I had view another solution, thank you!
CamperBot
@camperbot
Feb 21 2016 17:24
orballo sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2533 | @saintpeter | http://www.freecodecamp.com/saintpeter
Michael Aubrey
@mca62511
Feb 21 2016 17:24
@gxenos <a href="url" target="_blank">Link</a>
the target="_blank" is what does it
George
@gxenos
Feb 21 2016 17:25
@mca62511 thanks!
CamperBot
@camperbot
Feb 21 2016 17:25
gxenos sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 337 | @mca62511 | http://www.freecodecamp.com/mca62511
max77p
@max77p
Feb 21 2016 17:48
can someone help me attach the toggle panel to the right of the picture or help me figure it out?
on the about page...the panel is not complete i just want to get the click to slide the panel thingy attached to the picture
flush with the picture
Doandes Razvan
@Fuzyon
Feb 21 2016 17:56
what do you guys think about my twitch.tv api template so far? :D http://codepen.io/Fuzyon/pen/eJwmVv
Mafalda
@otmeek
Feb 21 2016 18:04
@Fuzyon looks great!
max77p
@max77p
Feb 21 2016 18:05
anyone please?
Doandes Razvan
@Fuzyon
Feb 21 2016 18:06
@otmeek thanks, now to the harder part: building the script, haha
CamperBot
@camperbot
Feb 21 2016 18:06
fuzyon sends brownie points to @otmeek :sparkles: :thumbsup: :sparkles:
:star: 357 | @otmeek | http://www.freecodecamp.com/otmeek
h4r1m4u
@h4r1m4u
Feb 21 2016 18:07
@max77p seems like you figured it out?
Mafalda
@otmeek
Feb 21 2016 18:07
@Fuzyon good luck! I really like that you're adding a search feature. Looking forward to seeing the completed version
Gordon Davidescu
@gordondavidescu
Feb 21 2016 18:11
hey all
I'm having the most unusual problem with a while loop
function myFunction() {
var result = "invalid";
while (result=="invalid")
{    
    var xoro = prompt("Do you want to play as X or O");
    xoro = xoro.toLowerCase();
    if (xoro == "x" || xoro == "o")  {
        document.getElementById("demo").innerHTML =
        "You are playing as " + xoro;
        result = "valid";
    }

    else

    {
    alert("Invalid input");
    }
}
i basically want it so that if you enter x or o, cool
otherwise, nope! you need to try again
but when the while is there, it never even runs a prompt!
faraz
@silentarrowz
Feb 21 2016 18:14
could anyone help me how to get apis. I am doing the weather app and am stuck. dont know how to proceed to get api's. I have managed to get the location and now I want to use the location to get the weather for that location.
max77p
@max77p
Feb 21 2016 18:15
@h4r1m4u only the sliding part, but i can't figure out how to make the toggle panel flush with the right side of the picture
so its attached to the picture
h4r1m4u
@h4r1m4u
Feb 21 2016 18:16
@gordondavidescu you're missing a closing brace to the function:
function myFunction() {
var result = "invalid";
while (result=="invalid")
{    
    var xoro = prompt("Do you want to play as X or O");
    xoro = xoro.toLowerCase();
    if (xoro == "x" || xoro == "o")  {
        document.getElementById("demo").innerHTML =
        "You are playing as " + xoro;
        result = "valid";
    }

    else

    {
    alert("Invalid input");
    }
}
} // ADD THIS
Gordon Davidescu
@gordondavidescu
Feb 21 2016 18:17
@h4r1m4u wow thank you
CamperBot
@camperbot
Feb 21 2016 18:17
gordondavidescu sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1451 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 21 2016 18:17
that being said, don't use "invalid" and "valid". that's what boolean is for
use true and false
Gordon Davidescu
@gordondavidescu
Feb 21 2016 18:17
oh right
heh
h4r1m4u
@h4r1m4u
Feb 21 2016 18:17
:)
Gordon Davidescu
@gordondavidescu
Feb 21 2016 18:17
here's me trying to REINVENT THE DAMN WHEEL
PowersCoding
@PowersCoding
Feb 21 2016 18:18
Just opened up the Personal Portfolio Webpage project. Have to be honest...feel that I don't even know where to start. Have the previous exercises up until now fully prepared one to dive into this project (which seems darn complex)? Maybe something I'm missing?
Gordon Davidescu
@gordondavidescu
Feb 21 2016 18:20
function myFunction() {
var result = false;
while (result===false)
{    
    var xoro = prompt("Do you want to play as X or O");
    xoro = xoro.toLowerCase();
    if (xoro == "x" || xoro == "o")  {
        document.getElementById("demo").innerHTML =
        "You are playing as " + xoro;
        result = true;
    }

    else

    {
    alert("Invalid input");
    }
}

}
}
greg
@wearenotgroot
Feb 21 2016 18:20
@PowersCoding start with the first < then continue :)
PowersCoding
@PowersCoding
Feb 21 2016 18:21
:smile: Thanks @wearenotgroot
CamperBot
@camperbot
Feb 21 2016 18:21
powerscoding sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 917 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Feb 21 2016 18:22
@PowersCoding just take similar approach as the last one but this time more flashy(not too much though)
@PowersCoding read up and practice on bootstrap if you want to use it
PowersCoding
@PowersCoding
Feb 21 2016 18:22
@wearenotgroot But even the nav elements.. Has that been covered previously?
greg
@wearenotgroot
Feb 21 2016 18:23
@PowersCoding ---------->http://getbootstrap.com/components/
@PowersCoding dont think so, but the example is easy enough to follow on the site
PowersCoding
@PowersCoding
Feb 21 2016 18:24
@wearenotgroot Thanks for the link to the components list.
CamperBot
@camperbot
Feb 21 2016 18:24
powerscoding sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: powerscoding already gave wearenotgroot points
greg
@wearenotgroot
Feb 21 2016 18:25
@PowersCoding remember you dont have to finish the portfolio page to do other project :smile: . you can constantly update it as you go
PowersCoding
@PowersCoding
Feb 21 2016 18:25
@wearenotgroot Good to know!
h4r1m4u
@h4r1m4u
Feb 21 2016 18:27

@max77p CSS:

#flip {
    position: absolute;
    transform: rotate(-90deg);
    display: inline-block;
    bottom: 135px;
    left: 155px;
}
.picture {
    padding-top: 150px;
    position: relative;
}

HTML

                <div class="picture">
                  <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">             
                  <div id="flip">
                    <h3>Click to slide the panel right</h3>
                  </div>                    
                </div><!--end of picture-->

(notice that #flip is nested inside .picture now)

max77p
@max77p
Feb 21 2016 18:31
@h4r1m4u thanks...so i actually kind of figured the alignment out
CamperBot
@camperbot
Feb 21 2016 18:31
max77p sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1452 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
max77p
@max77p
Feb 21 2016 18:32
but the actual slide from left to right when user clicks on the panel...when you click, it kind of starts from bottom then comes to right
how do i make it so that it slides from the actual panel? @h4r1m4u
h4r1m4u
@h4r1m4u
Feb 21 2016 18:32
i'm not sure i fully understand. you want it to slide from the 'button' that you click?
Andrew Schmidthuber
@calicode
Feb 21 2016 18:33
what is going wrong here, trying to float the carousel so text wraps around it, but it doesn't even seem to be inside of the jumbotron div
max77p
@max77p
Feb 21 2016 18:33
@h4r1m4u yes, so right now i have it so that when user clicks the "click here to slide right", the content slides right
however, there is a small issue...even though the content slides right, it starts from the bottome then goes right
if you try it, you can see this...its kind of weird
MavinsCode
@MavinsCode
Feb 21 2016 18:34
Hi everyone, I joined freeCodeCamp couple of days back
just completed the Tribute Page
any feedback?
I couldn't get the image to completely fill without the white border, any suggestions?
Nicolas May
@hynso
Feb 21 2016 18:35

I'm having trouble getting .json sources to work in my code... for example when I stringify a JSON URL, some work, some don't

This does NOT work

var jsonLink = "http://thoughtsoncoding.com/api/1.0/random.json";
    $.getJSON(jsonLink, function(json) {
      $(".quote-line").html(JSON.stringify(json));
    });

This does work

var jsonLink = "http://www.freecodecamp.com/json/cats.json";
    $.getJSON(jsonLink, function(json) {
      $(".quote-line").html(JSON.stringify(json));
    });

Any ideas?

h4r1m4u
@h4r1m4u
Feb 21 2016 18:39

@max77p add this. CSS

.title {
    padding-top: 30px;
    display: inline-block;
    max-width: 70%;
    position: absolute;
    left: 346px;
    top: 0px;
}

and nest .title inside the .picture

                <div class="picture">
                  <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">             
                  <div id="flip">
                    <h3>Click to slide the panel right</h3>
                  </div>                    

                  <div class="title">
                  <p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
                    <br> I'm currently part of a small web development
                    <br> team in an upcoming start-up, building web and
                    <br> mobile applications.
                    <br>My passion is to use technology based
                    <br> solutions, to help solve real world challenges.
                    <br> Competences:
                    <br> Languages and Frameworks:
                    <br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
                    <br> Angular.js, Meteor.js.
                    <br> Tools & expertise:
                    <br> Git, Responsive Web Design, Agile
                    <br> Methodologies.</p>
                </div>

                </div><!--end of picture-->
that said, this will be really problematic to get working properly on mobile
max77p
@max77p
Feb 21 2016 18:40
why is that?
h4r1m4u
@h4r1m4u
Feb 21 2016 18:40
because of all the absolute positioning
you can try to play with it and set the position in % instead of px, see how it comes out
but the rotated 'button' just makes the entire layout quite difficult
Andrew Schmidthuber
@calicode
Feb 21 2016 18:41
@hynso first is returning an object, second is an array of objects , i dont think you need to stringify the first, try it
Nicolas May
@hynso
Feb 21 2016 18:43
@calicode nope... just passing json to the html() function didn't work either
h4r1m4u
@h4r1m4u
Feb 21 2016 18:43
@hynso actually the first call fails because of the cross-domain request issue. change it to this:
var jsonLink = "http://thoughtsoncoding.com/api/1.0/random.json?callback=?";
    $.getJSON(jsonLink, function(json) {
      $(".quote-line").html(JSON.stringify(json));
    });
Andrew Schmidthuber
@calicode
Feb 21 2016 18:44
ah yea you need to use jsonp right?
h4r1m4u
@h4r1m4u
Feb 21 2016 18:44
yep
@calicode as to your issue:
.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
    float: left;
}
unless you float the p as well, it still takes 100% width of the jumbotron and hence the floated carousel gets positioned below it
George
@gxenos
Feb 21 2016 18:45
yo guys how can i make the buttons in my pen repsonsive so they look good in any resolution?
Nicolas May
@hynso
Feb 21 2016 18:46
@h4r1m4u @calicode Still nothing
Andrew Schmidthuber
@calicode
Feb 21 2016 18:50
@hynso see what your dev console says if anything then checkout json with padding, might need to refactor a lil bit more. Sorry i've only messed with very basic json.
Panagiotis
@bohemian83
Feb 21 2016 18:55
Possibly stupid question, but I still haven't found a simple answer. How can I vertically align a block of text or a responsive image within a page (page being a <section> in my case)? There has to be a simple solution to this...
Aaron Kazah
@AaronKazah
Feb 21 2016 18:58
Hey guys, I'm planning to release a web application that connects creators with their target market. The MVP(minimal viable product) it's almost finished and I'm looking for a few testers for the app. You can be a programmer, web designer or game developer as long as you have something that you want to display to the world, you'll gain valued feedback on how to improve it. This is something I started off as a personal project and I'm not looking to initially make money off this or anything so please don't ask how I plan to monetize it. I created a brief landing page at http://www.siliconup.com and if you could sign up for the Beta program, I'd highly appreciate it. You could use it to display your freecodecamp work, however I'd hope it's for something more unique, rather than freecodecamp work, so more personal projects of yours. If you want to help me out by becoming a beta tester, I'll include a link at the bottom, you'll be updated weekly on everything and hopefully it turns out well. I need beta testers to help me determine the new features on the website, how it should look and feel and what necessary mechanisms are needed to make it run. If you could share this with your friends, it would be awesome. Also if you have any personal projects, it would be awesome for you to sign up, as once it's goes live (beta) I 'll need you to upload your projects so it can be shared. Link ----- http://www.siliconup.com
h4r1m4u
@h4r1m4u
Feb 21 2016 19:12
@hynso i can't get it to work either. typically you can grab the json file with the JSONP request (which is what the added callback=? does), but this site just gives me a '403 forbidden' error. i don't think it's quite ready for these requests. you could try to drop an email to the guy behind it and ask how you're supposed to grab the JSON file
max77p
@max77p
Feb 21 2016 19:13
@h4r1m4u so i got the look i kind of wanted, but regardless you were right about the mobile
how can i maintain same look as it is right now on desktop when i view it on mobile?
h4r1m4u
@h4r1m4u
Feb 21 2016 19:14
@AaronKazah no offense, but having only a mailchimp signup form for on the landing page is not exactly giving me confidence. it borders on spam/email harvesting to me. i'd suggest you update that page asap if you actually want to get some people sign up, ideally with screenshots and description of your MVP. a short video demonstrating how it works would be even better
@max77p you'll want to look up CSS media queries, so that you can apply different styles/rules to those elements on different screen resolutions
max77p
@max77p
Feb 21 2016 19:17
@h4r1m4u thanks
CamperBot
@camperbot
Feb 21 2016 19:17
max77p sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: max77p already gave h4r1m4u points
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:22
hey all -- i feel a bit overwhelmed by tic tac toe
here's where I am
(aka not far)
I want to be able to make the tiles clickable?
Timofey Votyakov
@tvotyakov
Feb 21 2016 19:28
@gordondavidescu give all tiles some common class, for example, tile and use jquery to handle onclick event like this
$('.tile').on('click', function() {
  // your code
});
h4r1m4u
@h4r1m4u
Feb 21 2016 19:29
@gordondavidescu are you happy to use jquery? if so, import it into your codepen and then
$('#board div').on("click", function() {
  // do something
});
lol, snap
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:33
@tvotyakov and @h4r1m4u you are both beautiful
h4r1m4u
@h4r1m4u
Feb 21 2016 19:34
:D
Timofey Votyakov
@tvotyakov
Feb 21 2016 19:34
:)
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:35
ok check it
shouldn't it... make something happen when you click
like run the alert
in theory?
h4r1m4u
@h4r1m4u
Feb 21 2016 19:38
@gordondavidescu first, you need to actualy invoke the newGame() function. right now you only have it defined. so all the way at the bottom of your code add newGame();
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:38
I call newgame from the button click
it's part of the button click action
you click new game, it asks if you want to be x or o, you answer correctly, it calls newgame()
h4r1m4u
@h4r1m4u
Feb 21 2016 19:39
oh, i'm sorry, i didn't see that
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:39
:)
Timofey Votyakov
@tvotyakov
Feb 21 2016 19:39
@gordondavidescu you are not include jquery.
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:39
oh oops
h4r1m4u
@h4r1m4u
Feb 21 2016 19:39
yeah, @tvotyakov is right
but also, you don't want to nest the click handler inside the playerTurn function. you want it the other way round:
  $('#board div').on("click", function() {
    playerTurn();
});

function playerTurn() {
 // do something
}
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:40
oh good point.
h4r1m4u
@h4r1m4u
Feb 21 2016 19:40
the game will be in a 'waiting state' until the player clicks the tile at which point the click handler will fire
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:41
Too right you are
I've seen a few people's codes and they are humongous
h4r1m4u
@h4r1m4u
Feb 21 2016 19:41
yeah, mine's about 200 or 300 lines i think
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:41
dang
Richard Corbett
@reacorbett
Feb 21 2016 19:44
After making my images(butons at bottom of my page) change on hover, I lost the ability to use bootstrap for responsiveness when resizing browser. Does anyoneknow a work around for this? Someone sudgested using media queries or javascript. But I am not familliar with either of those. Any information would be a great help.
http://codepen.io/reacorbett/pen/EPzmqY
Aaron Kazah
@AaronKazah
Feb 21 2016 19:45
@h4r1m4u thanks dude
CamperBot
@camperbot
Feb 21 2016 19:45
aaronkazah sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1453 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Aaron Kazah
@AaronKazah
Feb 21 2016 19:45
I appreciate it
I'll make the changes soon
h4r1m4u
@h4r1m4u
Feb 21 2016 19:45
:thumbsup:
Aaron Kazah
@AaronKazah
Feb 21 2016 19:45
and it's meant to be stealth, in terms of pictures I was wanted the Beta users to sign up first
and they get to ultimately determine how it looks
@h4r1m4u why mailchimp though, people can unsubscribe if they wish to, and it also requires them to verify their emails. So I don't get their emails if they don't verify it
it would be spam, if I continually send hundreds of emails no?
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:53
so now I can click anywhere and it pops nicely... but every single area clicked is considered equal, which is no good
Matt-HK
@Matt-HK
Feb 21 2016 19:54
hey i'm working on 'build a tribute page' how do i link to the image without looking at the example code?
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:55
to which image are you trying to link?
Nicolas May
@hynso
Feb 21 2016 19:55
@Matt-HK I think the idea is for you to use your own image
Gordon Davidescu
@gordondavidescu
Feb 21 2016 19:55
yeah that as well
Nicolas May
@hynso
Feb 21 2016 19:55
@Matt-HK ... because you're making the tribute to someone you admire
Matt-HK
@Matt-HK
Feb 21 2016 19:56
ah, makes sense thank you
Nicolas May
@hynso
Feb 21 2016 20:00
For random quote generator, why doesn't my button retrieve NEW random quotes? It works the first time, but then stops retrieving new quotes...
http://codepen.io/hynso/pen/JGQbVg
Lisa
@felinemeow
Feb 21 2016 20:20
@bohemian83 I don't know if someone answered your question already but I used the class "center-block" to align my picture in middle
max77p
@max77p
Feb 21 2016 20:23
hey guys when i shrink my window i can't seem to open my navbar
can someone tell me what i missed?
on full screen i can see all the links in my navbar, but when i shrink it, i can't access the links, clicking the navbar doesnt seem to work
I'm about to have a stroke
it suddenly stopped working
it should pop up an alert when you click
Dusan Subally
@Subalee
Feb 21 2016 20:25
@max77p you aren't including bootstrap javascript anywhere
max77p
@max77p
Feb 21 2016 20:26
@Subalee ohhh i have to add that in javascript ic..damn such a simple mistake. thank you!
CamperBot
@camperbot
Feb 21 2016 20:26
max77p sends brownie points to @subalee :sparkles: :thumbsup: :sparkles:
:star: 148 | @subalee | http://www.freecodecamp.com/subalee
Matas
@bonchanm
Feb 21 2016 20:26
I cant make my columns appearnext to each other instead of stacking on top. Any ideas
max77p
@max77p
Feb 21 2016 20:27
@bonchanm try bootstrap grids
Matas
@bonchanm
Feb 21 2016 20:27
Yeah thats what i mean
They stack on top
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:29
anyone
Matt Yamamoto
@MattYamamoto
Feb 21 2016 20:30
@gordondavidescu when I click the "New Game" button I get an alert box.
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:30
it was working like five minutes ago
Dusan Subally
@Subalee
Feb 21 2016 20:30
@gordondavidescu same here
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:30
yes, which should then allow you to click on the grid
Dusan Subally
@Subalee
Feb 21 2016 20:30
i get alert when i click the new game
Panagiotis
@bohemian83
Feb 21 2016 20:30
anyone who can help me with bootstrap vertical alignment?
Matt Yamamoto
@MattYamamoto
Feb 21 2016 20:30
@gordondavidescu you may have clicked the box that prevents alerts from poping up.
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:30
I didn't tho
Dusan Subally
@Subalee
Feb 21 2016 20:31
@bohemian83 try googling vertical align display: table-cell
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:31
you click new game, the alert pops
you type in x or o and it changes the status of turn to "player"
Dusan Subally
@Subalee
Feb 21 2016 20:31
@gordondavidescu yeah the new game alert works, the grid alert doesn't work for me either
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:31
if turn = player, and you click in the grid, it should pop a different alert
Panagiotis
@bohemian83
Feb 21 2016 20:32
@Subalee thanks, I think I tried that a couple of hours ago, but I will try again.
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:32
rather if turn = "player"
CamperBot
@camperbot
Feb 21 2016 20:32
:star: 149 | @subalee | http://www.freecodecamp.com/subalee
bohemian83 sends brownie points to @subalee :sparkles: :thumbsup: :sparkles:
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:32
this is so ridiculous, it was JUST working
i took off the conditional, it STILL doesn't work
clicking in the grid should make it pop an alert
Dusan Subally
@Subalee
Feb 21 2016 20:34
@bohemian83 I usually use that, requires some bit of hacking... there are other options but it all depends.. if you know the height a position aboslute might be an option, i think you can also use display: inline-block; and vertical-align: middle, or flexbox if you don't need to support older stuff
@gordondavidescu So i've tried adding an else to your if with different alert and that works, so i think what the problem is that after you start a game the turn is not set to player?
Matt Yamamoto
@MattYamamoto
Feb 21 2016 20:35
@gordondavidescu check your console, you have an error. player needs to be global or passed into your playerturn() function
Panagiotis
@bohemian83
Feb 21 2016 20:36
The thing is I could use absolutes, but then it would mess up my formatting in the bootstrap grid for smaller sizes.
Matt Yamamoto
@MattYamamoto
Feb 21 2016 20:36
@gordondavidescu as it is when playerTurn() is called the var player is not defined.
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:36
oh you are so right
thanks @MattYamamoto
CamperBot
@camperbot
Feb 21 2016 20:37
gordondavidescu sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 922 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Panagiotis
@bohemian83
Feb 21 2016 20:37
I used padding-top to bring the elements lower, but again, once I make the page smaller it messes up the whole ting
thing
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:37
shoot though
look now
alert("hi " +player);
AGGHGHHHH
I just removed everything conditional from the click
any click in the grid should make it work now
but it's not
Matt Yamamoto
@MattYamamoto
Feb 21 2016 20:40
@gordondavidescu I don't see a change regarding the scope of your player variable (I'm not refering to the string "player"). At line 2 define player in the globla scope, var player;, then at line 5 get rid of the "var" so that you are setting the global variables's value instead player = "z"
Dusan Subally
@Subalee
Feb 21 2016 20:40
yup
Timofey Votyakov
@tvotyakov
Feb 21 2016 20:41
@gordondavidescu you have an issue, because you use global variable player inside your onclick handler, which is not exists.
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:41
YES
I have a hard time with the console because I'm on a tiny chromebook
I just opened it
Dusan Subally
@Subalee
Feb 21 2016 20:42
var turn = "nope";
var player = "z";
function newGame() {
  var result = false;
  turn = "player";
this is what the other guys mean
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:42
Yeah. I feel super silly now.
thanks @Subalee and @tvotyakov
CamperBot
@camperbot
Feb 21 2016 20:43
gordondavidescu sends brownie points to @subalee and @tvotyakov :sparkles: :thumbsup: :sparkles:
:star: 151 | @subalee | http://www.freecodecamp.com/subalee
:star: 236 | @tvotyakov | http://www.freecodecamp.com/tvotyakov
max77p
@max77p
Feb 21 2016 20:43
guys do you use media queries to make your website more responsive to mobile?
Gordon Davidescu
@gordondavidescu
Feb 21 2016 20:43
time to return to full parenting attention so this baby doesn't fling herself off the high chair
Dusan Subally
@Subalee
Feb 21 2016 20:43
@gordondavidescu (y)
@gordondavidescu that was supposed to be a thumbs up, doesn't seem to work here though
hmortensen
@hmor100
Feb 21 2016 20:57
@max77p I use media queries. For some guidelines on what settings to use, twitter bootstrap is a good example.
julianasobreira
@julianasobreira
Feb 21 2016 21:05
Hey guys! I'm working on calculator project but I'm having a hard time. Does anyone knows why when I concat string + dot (.) the dot go to the first position instead of the last position? http://codepen.io/julianasobreira/pen/PZypGQ?editors=0010
Sergey Kosterin
@skosterin88
Feb 21 2016 21:05

Hello to all! Can anyone help me? I'm currently working on the "Campers Leaderboard" project. I'm trying to parse data from http://fcctop100.herokuapp.com/api/fccusers/top/recent using jQuery. Here is the code responsible for this part:

var fccUsersData = [];

$.getJSON("http://fcctop100.herokuapp.com/api/fccusers/top/recent", parseCampersData);

function parseCampersData(campersData){
  for (var i = 0; i < campersData.length; i++){
    fccUsersData.push({
      camperId: i+1,
      camperName: campersData[i].username,
      camperPointsLast30Days: campersData[i].recent,
      camperPointsTotal: campersData[i].alltime
    });
  }

}

But it doesn't work. No result at all. What am I doing wrong? Here is link to my project on CodePen: http://codepen.io/skosterin88/pen/LGawaK

To be more precise: I want the fccUsersData array to be filled with the data which I then will display in my app using ReactJS.
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:11
@julianasobreira you have direction set rtl for the .visor class, which is a parent of your .operation div
@skosterin88 the code you posted is working fine, stick a console.log(fccUsersData); at the end of your parseCampersData() function and you'll see it's all there. The issue you're having is an asynchronous one. I don't know anything about react, so I'm not sure I can help much as I'm not sure how they handle that. There may be a react method that you should use instead of jQuery's $.getJSON()
julianasobreira
@julianasobreira
Feb 21 2016 21:16
Like the code below? This is a part of my atual code css.
.visor { margin: 10px; height: 80px; width: 290px; background-color: #F0F2EB; font-size: 34px; line-height: 80px; text-align: right; padding: 0 10px; vertical-Align: middle; overflow: auto; overflow-y: hidden; direction:rtl; }
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:17
@julianasobreira yeah, get rid of the direction: rtl;
julianasobreira
@julianasobreira
Feb 21 2016 21:18
@MattYamamoto That worked! Thank you. :)
CamperBot
@camperbot
Feb 21 2016 21:18
julianasobreira sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 923 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:20
@julianasobreira I assume you had that there for a reason at some point, but the rtl is a bit strange in it's behavior, so if that effect ends up being something you need I recommend doing it your self by manipulating the array/string in question.
Christian-Peter
@cpheimbach
Feb 21 2016 21:20
Good evening all
I have a question about the pomodoro I work on.
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:21
Christian-Peter
@cpheimbach
Feb 21 2016 21:21
I created an object for the countdown using one method to start the interval while another is supposed to execute the clearInterval
it seems though clearInterval requires a variable that the interval runs in. when I do that it doesn’t work.
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:21
@cpheimbach link to your pen?
Christian-Peter
@cpheimbach
Feb 21 2016 21:22
var countdown = {
    timer: new Date(0),

    showMin: function() {
      return addZero(countdown.timer.getMinutes());
    },
    showSec: function() {
      return addZero(countdown.timer.getSeconds());
    },

    set: function(minutes) {
      this.timer.setTime(minutes * 60 * 1000);
      console.log("Time set: " + countdown.timer);
    },

    start: function() {
      setInterval(function() {
        countdown.timer.setTime(countdown.timer.getTime() - 1000);
      }, 100);
    },

    stop: function() {
      clearInterval(countdown.start);
    }
  };
@MattYamamoto It’s a bit messy outside the object as this is my test pen
already thank you in advance for having a look mate!
julianasobreira
@julianasobreira
Feb 21 2016 21:23
@MattYamamoto Yeah! I was using it because if the user include a really big number will appear a scroll on that direction. But when I type a dot it becomes really strange. I totally forgot about the rtl, haha! I will study a better approach. Again, thanks!
CamperBot
@camperbot
Feb 21 2016 21:23
julianasobreira sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:warning: julianasobreira already gave mattyamamoto points
Christian-Peter
@cpheimbach
Feb 21 2016 21:23
I guess the clearInterval(countdown.start); is not really addressing the variable that setinterval needs
sorry the variable that clearInterval needs
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:26
@cpheimbach correct, that's because countdown.start is the function that is holding the setInterval call. you'll need another object property to hold the ID returned by setInterval I think.
Christian-Peter
@cpheimbach
Feb 21 2016 21:28
ok i tried a simple one and declared within the start function the variable “a” and made this the setInterval. When then using clearInterval(countdown.start.a); it didn’t work either.
Matt Yamamoto
@MattYamamoto
Feb 21 2016 21:31
@cpheimbach so you made the countdown.start an object holding a property a and a method? It's hard to comment without seeing what you did. I think you could just create another propert on your countdown object, timerID, and initialize it to 0 or something. then in your start method you could just
start: function() {
      coundown.timerID = setInterval(function() {
        countdown.timer.setTime(countdown.timer.getTime() - 1000);
      }, 100);
},

stop: function() {
      clearInterval(countdown.timerID);
}
Christian-Peter
@cpheimbach
Feb 21 2016 21:34
ah that is interesting
hold on I work on it and send you an update shortly
@MattYamamoto thank you already for the input!
CamperBot
@camperbot
Feb 21 2016 21:34
cpheimbach sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 924 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Christian-Peter
@cpheimbach
Feb 21 2016 21:41
@MattYamamoto that did work.
I like your style. cheers!
narkeeta
@narkeeta
Feb 21 2016 21:44
This message was deleted
how do you made the code look nice again?
greg
@wearenotgroot
Feb 21 2016 21:46
wiki format
CamperBot
@camperbot
Feb 21 2016 21:46

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

narkeeta
@narkeeta
Feb 21 2016 21:48
Hi, I'm a little confused as to how to call an api and use it in javascript. Can anyone look at my code and tell me how I would make the ".city" class's html change to the city provided from the api I'm trying to call.
$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      lat.toString();
      lon.toString();
      var location = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon;
      $getJSON(location, function(json) {
        $(".city").html();
      });
    });
  }
});
greg
@wearenotgroot
Feb 21 2016 21:50
@narkeeta try and print to console------>console.log(json) and study the json you get
narkeeta
@narkeeta
Feb 21 2016 21:50
okay
greg
@wearenotgroot
Feb 21 2016 21:51
@narkeeta another thing dont forget to add the api key on the url
narkeeta
@narkeeta
Feb 21 2016 21:52
@wearenotgroot what would that be? sorry I'm struggling with the api concept
greg
@wearenotgroot
Feb 21 2016 21:53
@narkeeta didnt you register on openweather and get api key?
Anna Tyrrell
@githesp
Feb 21 2016 21:53
@narkeeta have a look here http://openweathermap.org/appid
narkeeta
@narkeeta
Feb 21 2016 21:54
@wearenotgroot Oh, okay thanks!
CamperBot
@camperbot
Feb 21 2016 21:54
narkeeta sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 924 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
Anna Tyrrell
@githesp
Feb 21 2016 21:54
you need to sign up for an api key which you then use as part of your url in the request
the openweather site gives you examples of what a request url would look like with the key included
Pawan
@pawan92
Feb 21 2016 21:56
so i had initially created the quote generator using an array of quotes but i think with the realligned curriculum they want us to use twitter API or something to generate quotes..can anyone look at my code and see how i can do that? i have no idea..
http://codepen.io/pawan92/pen/zrPwbP
greg
@wearenotgroot
Feb 21 2016 21:57
@pawan92 edit the href of the <a> for the twitter button
narkeeta
@narkeeta
Feb 21 2016 21:58
When I run this code it gives me an input in the console saying getJSON isn't defined, what would be the problem here?
greg
@wearenotgroot
Feb 21 2016 21:58
@pawan92 in the href you add the quotes you generated
narkeeta
@narkeeta
Feb 21 2016 21:58
var location = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +"=a8da1aa951cdecc4c121db10e2455ffd";
      $getJSON(location, function(json) {
        $(".city").html();
        $console.log(json)
      });
greg
@wearenotgroot
Feb 21 2016 21:58
@narkeeta did you get the api key?
Bruce Young
@mutantspore
Feb 21 2016 21:59
@narkeeta do you have Jquery loaded ?
narkeeta
@narkeeta
Feb 21 2016 21:59
@mutantspore yes
greg
@wearenotgroot
Feb 21 2016 21:59
@narkeeta should be added like &appid=your api key
narkeeta
@narkeeta
Feb 21 2016 21:59
@wearenotgroot okay, thank you so much
CamperBot
@camperbot
Feb 21 2016 21:59
narkeeta sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: narkeeta already gave wearenotgroot points
greg
@wearenotgroot
Feb 21 2016 22:00
@narkeeta also the url should have http:// in front
Christian-Peter
@cpheimbach
Feb 21 2016 22:00
a question about style
I declare an object countdown and in the methods I interact with it’s properties via countdown.etc
should I rather use “this”?
or is this only for object constructor?
Pawan
@pawan92
Feb 21 2016 22:01
@wearenotgroot what do you mean
greg
@wearenotgroot
Feb 21 2016 22:01
@pawan92 oh nvm
narkeeta
@narkeeta
Feb 21 2016 22:02
var location = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +"&appid=a8da1aa951cdecc4c121db10e2455ffd";
      $getJSON(location, function(json) {
        //$(".city").html();
        $console.log(json)
Okay I fixed my code a little and im still getting a console message of getJSON not defined
Bruce Young
@mutantspore
Feb 21 2016 22:02
@narkeeta your pen?
greg
@wearenotgroot
Feb 21 2016 22:03
@narkeeta you forgot the . between the $ and getJSON
Bruce Young
@mutantspore
Feb 21 2016 22:04
and console.log doesn’t need a $
greg
@wearenotgroot
Feb 21 2016 22:04
@narkeeta also console.log without the $
narkeeta
@narkeeta
Feb 21 2016 22:04
merci!
thank you all so much, its functioning now
greg
@wearenotgroot
Feb 21 2016 22:07
@pawan92 you already have the tweet button setup correctly :+1: so you are on the clear
@narkeeta YW
Pawan
@pawan92
Feb 21 2016 22:09
@wearenotgroot yea but right now its only cycling through 10 quotes i have manually input. i want to have it get a random new quote from the internet each time
greg
@wearenotgroot
Feb 21 2016 22:09
@pawan92 just search for random quotes api and take your pick
Mark Canning
@Maakux
Feb 21 2016 22:13
Another thing that gets on my tits is when APIs don’t use the correct HTTP response codes!
I find it funny it will say there was a error, yet the status code is 200...
Grrr.
Just noticed I am in the wrong room.
greg
@wearenotgroot
Feb 21 2016 22:15
:smile:
@Maakux it's ok, let the frustration out :smile:
Mark Canning
@Maakux
Feb 21 2016 22:16
:smile:
Mamoudou CAMARA
@nfnxmc
Feb 21 2016 22:18
my z-index does not work and it's so frustrating
Mark Canning
@Maakux
Feb 21 2016 22:18
@mncode The element will need a particular positioning mode.
Dan Stockham
@DanStockham
Feb 21 2016 22:18
What do you guys think of it so far? It's not working just yet, so bear with me: http://codepen.io/DanStockham/pen/LGobvp?editors=1000
Mamoudou CAMARA
@nfnxmc
Feb 21 2016 22:19
absolute, relative like ?
Mark Canning
@Maakux
Feb 21 2016 22:19
@mncode Yes.
@Maakux Depending on your situation, but one of those is needed to set the z-index of the element.
I just said that to myself...
FAIL.
Mamoudou CAMARA
@nfnxmc
Feb 21 2016 22:19
@Maakux parent div must be absolute and child relative ? or what ?
Mark Canning
@Maakux
Feb 21 2016 22:20
@mncode It depends what you are trying to do.
@mncode If you just want to set the z-index of a element, make sure that element’s position is set to absolute or relative.
Mamoudou CAMARA
@nfnxmc
Feb 21 2016 22:20
Ok. thanks you @Maakux
CamperBot
@camperbot
Feb 21 2016 22:20
mncode sends brownie points to @maakux :sparkles: :thumbsup: :sparkles:
:star: 62 | @maakux | http://www.freecodecamp.com/maakux
Mark Canning
@Maakux
Feb 21 2016 22:21
You are welcome.
Dan Stockham
@DanStockham
Feb 21 2016 22:21
@Maakux Is it just you with supplyant or are you part of a team?
Mark Canning
@Maakux
Feb 21 2016 22:22
Part of a team.
I am one of the developers.
Tomas
@Penthious
Feb 21 2016 22:32
Hello, I am struggling to build the simple simon game, what I have so far is that when its simons turn the value of the button that needs to light up is pushed into an array but when i try to have that array repeat it lights up all of the values. Any help will be appreciated.
Mark Canning
@Maakux
Feb 21 2016 22:35
@Penthious Well, you will need some sort of function that cycles through that array, and replays the ‘light’ animation, right?
Granit Hajdini
@nitiblack
Feb 21 2016 22:38
function binaryAgent(str) {
 newArr = []; 

  var arr = str.split(" ");
  //console.log(arr);
  for (i = 0; i < arr.length; i++) {
      console.log(String.fromCharCode(arr[i]));
      newArr.push(String.fromCharCode(arr[i]));
     // console.log(newArr);
  }
  str2 = newArr.join(" ");

  return str2;
}

binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111");
what to do with that
Mark Canning
@Maakux
Feb 21 2016 22:38
function cycle() { for (var i = 0; i <= sequences.length; i++) { // animation here // maybe a brief pause here } }
That is terrible. :smile:
I am trying to get used to the formatting.
var a = 1;
Ah.
Sami
@Sami0
Feb 21 2016 22:39
hey, does any of you know
why some anchors links don't work in firefox but works just fine in chrome?
Mark Canning
@Maakux
Feb 21 2016 22:39
function cycle() {
for (var i = 0; i <= sequences.length; i++) {
lightUp(sequences[i]);
// sleep
}
}
@Sami0 That shouldn’t be the case.
@Sami0 Are they links, or do you have an event listener attached to them?
Timofey Votyakov
@tvotyakov
Feb 21 2016 22:40
@Sami0 it is too common question. try to watch your console. may be you can see answer there.
Tomas
@Penthious
Feb 21 2016 22:41
yes i tried to loop through it with a for loop but the out come is that all the lights flash at once.
Mark Canning
@Maakux
Feb 21 2016 22:41
@Penthious You need to have some kind of pause in there. :)
@Penthious If I knew what language you were using, I might be able to assist with that.
Tomas
@Penthious
Feb 21 2016 22:42
o sorry im on javascript
Mark Canning
@Maakux
Feb 21 2016 22:42
@Penthious Okay, in that case, you could look at setInterval and setTimeout.
These are functions that allow you to specify a certain interval before the code is executed.
Sami
@Sami0
Feb 21 2016 22:43
@Maakux no js , just html and css
Mark Canning
@Maakux
Feb 21 2016 22:43
The differences between the two are simply one is at least called once.
Tomas
@Penthious
Feb 21 2016 22:44
can you give me an example of how i would use them in my loop as I tried a setinteval but the lights would keep flashing in and out.
Sami
@Sami0
Feb 21 2016 22:46
@tvotyakov ok , I will try
Mark Canning
@Maakux
Feb 21 2016 22:47
for (var sequence in sequences) {
    var timer = setInterval(function(sequence) {
        sequence.lightUp(); // call to run the animation
    }, 1000)(sequence); // 1000ms = 1 second
    clearInterval(timer); // next
}
Something like that maybe?
There is probably a better way to do this with animation queues in jQuery.
Tomas
@Penthious
Feb 21 2016 22:49
yes that helps alot! thanks maakux. now just need to find out how to intergrate that into my code lol
Mark Canning
@Maakux
Feb 21 2016 22:50
You might have issues with the closure that is created, but I am pretty sure you can inject variables like that into the local scope of the closure.
@Penthious Would be interested in seeing the end result. :)
Tomas
@Penthious
Feb 21 2016 22:56
once i finish it i will tag u to see my simple simon in action
Arend Groot Bleumink
@arendgb
Feb 21 2016 22:58

  <form class="form-control">
    <input type="text" placeholder="cat photo URL" required>
  </form>

   <button class="btn btn-primary">
    <button type="submit">Submit <i class="fa fa-paper-plane"></i></button>
    </button>
  </form>
</div>

Give the submit button in your form the classes btn btn-primary.
Give the text input in your form the class form-control.

These task are still unchecked, what did I do wrong?

Tomas
@Penthious
Feb 21 2016 22:58
@Maakux it might take me a day or two to finish it though. Im about 60% done with it.
narkeeta
@narkeeta
Feb 21 2016 23:06
Hey everyone, can anyone help me out. I'm trying to make the button element with unit id #unit change my unit variable from "C" to "F" when it is clicked but this isnt working...
var unit = "C"
        $("#unit").on("click", function(){
          if (unit == "C") {
            unit = "F"
          };
          if (unit == "F") {
            unit = "C"
          };
        });

        var temp = 0;
        if (unit == "C") {
          temp = json.main.temp - 274.1504;
          temp = temp.toString().substring(0,4);
        }
        if (unit == "F") {
          temp = json.main.temp - 255.928;
          temp = temp.toString().substring(0,4);
        }
        $(".temp").html(temp + " " + unit);
Timofey Votyakov
@tvotyakov
Feb 21 2016 23:08

@narkeeta unit will bee always "C" here

          if (unit == "C") {
            unit = "F"
          };
          if (unit == "F") {
            unit = "C"
          };

regardless of it equal "C" or "F" in the begining.

narkeeta
@narkeeta
Feb 21 2016 23:09
oh okay I see it now
Mark Canning
@Maakux
Feb 21 2016 23:09
Nice spot.
I would use a ternary operator there to clean it up a little.
Timofey Votyakov
@tvotyakov
Feb 21 2016 23:11
@Maakux I agree, a ternary operator could clean it up.
Mark Canning
@Maakux
Feb 21 2016 23:12
I am pretty sure you could elimate that second group of control structures as well.
narkeeta
@narkeeta
Feb 21 2016 23:14
@Maakux what would the ternary operator be?
Timofey Votyakov
@tvotyakov
Feb 21 2016 23:16
@narkeeta in your case it will looks like unit = unit == 'C' ? 'F' : 'C'
narkeeta
@narkeeta
Feb 21 2016 23:19
@tvotyakov I think I understand that line of code but where would I put it in my code?
Anna Tyrrell
@githesp
Feb 21 2016 23:31
This message was deleted
@arendgb you only need one form element - it can wrap your text input and your submit button - make sure you have both an opening and closing tag!
@arendgb also, you currently seem to be trying to make two buttons, nested one inside the other! Try removing the outer button wrapper and instead adding the classes to the inner button.
Timofey Votyakov
@tvotyakov
Feb 21 2016 23:40
@narkeeta instead of this
          if (unit == "C") {
            unit = "F"
          };
          if (unit == "F") {
            unit = "C"
          };
narkeeta
@narkeeta
Feb 21 2016 23:42
This is my code now, as per advice. However when I click the button in my pen it simple does nothing... is anything wrong?
var unit = "C";
        $("#unit").on("click", function(){
          unit = unit == 'C' ? 'F' : 'C';
        });
        var temp = 0;
        if (unit == "C") {
          temp = json.main.temp - 274.1504;
          temp = temp.toString().substring(0,4);
        }
        if (unit == "F") {
          temp = json.main.temp - 255.928;
          temp = temp.toString().substring(0,4);
        }
        $(".temp").html(temp + " " + unit);
      });
Anna Tyrrell
@githesp
Feb 21 2016 23:48
you will need the rest of the code inside the on click function @narkeeta
otherwise it isn't updating the .temp html when you click the unit button
narkeeta
@narkeeta
Feb 21 2016 23:48
oh okay
Anna Tyrrell
@githesp
Feb 21 2016 23:49
i.e. it looks as though you have an extra function closing in there, just before var temp = 0
because you want all this stuff to happen when you click it
narkeeta
@narkeeta
Feb 21 2016 23:50
okay I changed that and the button works now but the temp only displays after you hit it....how would i make it show before
Anna Tyrrell
@githesp
Feb 21 2016 23:50
you can have the stuff which updates the temp units outside of the onclick as well
narkeeta
@narkeeta
Feb 21 2016 23:50
okay thank you @githesp
CamperBot
@camperbot
Feb 21 2016 23:50
narkeeta sends brownie points to @githesp :sparkles: :thumbsup: :sparkles:
:star: 355 | @githesp | http://www.freecodecamp.com/githesp
Anna Tyrrell
@githesp
Feb 21 2016 23:50
as long as you set the default value outside of the onclick!
I would put the part which gets the temperature and updates the .temp html in a function, then you can call it once in your main code, and once inside the onclick
sorry, bad explanation! Hopefully it makes sense now I've edited it :P @narkeeta
lcthornhill
@lsrus
Feb 21 2016 23:55
Did any other non-USians out there struggle with the phone number validation?
narkeeta
@narkeeta
Feb 21 2016 23:56
@githesp Ive got it working :)
Anna Tyrrell
@githesp
Feb 21 2016 23:56
great!
@lsrus yes, oh my gosh that was frustrating
it seemed so arbitrary as to what was a legit US phone number :P
lcthornhill
@lsrus
Feb 21 2016 23:57
precisely! well, I feel better now