These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Feb 2016
Patrick Black
@Mortiferr
Feb 27 2016 00:01
@Funlovn007 That's because that example uses Bootstrap
Just add some padding on the sides
thanks @Funlovn007
CamperBot
@camperbot
Feb 27 2016 00:01
mortiferr sends brownie points to @funlovn007 :sparkles: :thumbsup: :sparkles:
:star: 132 | @funlovn007 | http://www.freecodecamp.com/funlovn007
Marek Slabicki
@thaniri
Feb 27 2016 00:02
what browser are you using @livmaria7891
i know it doesnt work on firefox, trying to troubleshoot that
Brendan Sweeny
@BrendanSweeny
Feb 27 2016 00:02
@thaniri @livmaria7891 I get this too. The console returns a 403 Forbidden error for the image url. I'm in Chrome
Marek Slabicki
@thaniri
Feb 27 2016 00:02
hmm, im in chrome as well
does this link work for you? http://i.imgur.com/KTGgHr9.png
Olivia Legge
@livmaria7891
Feb 27 2016 00:02
Oh ok ya, it was firefox. I have that set to my default but I realized codeine doesn’t always work the best in firefox.
let me try chrome
Marek Slabicki
@thaniri
Feb 27 2016 00:03
brendan just mentioned it doesnt work in chrome for him either
it works in firefox for me now, without me having changed anything
Olivia Legge
@livmaria7891
Feb 27 2016 00:04
@thaniri Ya, nope. Doesn’t work for me in chrome either
fatimazz
@fatimazz
Feb 27 2016 00:04

Hi guys :smile:
I got to this challenge http://codepen.io/FreeCodeCamp/full/wMQrXV

in the un orderd list the dots are still aligned to the left even the text is centered any
help plz? :worried:

Marek Slabicki
@thaniri
Feb 27 2016 00:05
the list is filling the width of its div
which is 650px
fatimazz
@fatimazz
Feb 27 2016 00:06
so what should i do ?
Marek Slabicki
@thaniri
Feb 27 2016 00:07
you have provided me with no code to work with
no idea what you're even asking about
fatimazz
@fatimazz
Feb 27 2016 00:07
oh sorry

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<body>
<div style="background: #d3d3d3;" class="container text-center">
<h1>Malcolm X</h1>
<h2>The greatest and most influential African Americans in history</h2>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Malcolm_X_NYWTS_2a.jpg/220px-Malcolm_X_NYWTS_2a.jpg" alt="sometext" style="width:800px;height:700px;" class="img-thumbnail">
<figcaption> Malcolm X </figcaption>
</figure>
</div>
<h3>Here's a time line of Malcolm's life:</h3>

<ul>
<li><b>1925</b> - Born as Malcolm Little in University Hospital, Omaha, Nebraska.</li>
<li><b>1931</b> - Enrolled in Pleasant Grove Elementary School (kindergarten).</li>
<li><b>1941</b> - Moves to Boston to live with Ella.
<li><b>1946</b> - Convicted of larceny, breaking and entering, and carrying a weapon. Malcolm is sentenced to eight to ten years in prison. He starts to serve the term in Charlestown Prison.</li>
<li><b>1947</b> - Transferred to Concord Reformatory for fifteen months.</li>
<li><b>1948</b> - Transferred to Norfolk Prison Colony, Massachusetts, where there is a great library.</li>
<li><b>1952</b> - Malcolm is released from prison after six years (instead of eight to ten) and meets Elijah Muhammad in Chicago. It is here that he receives the legendary 'X' from the Nation of Islam.</li>
<li><b>1960</b> - Meets with Fidel Castro for half and hour in Hotel Theresa, Harlem.</li>
</ul>
<div class="text-center">
<blockquote><p>"I'm looking forward to this year's reunion and catching up with everyone."</p><p><small>Michael Tyson</small></p></blockquote>
<p><b>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Malcolm_X" target="_blank">Wikipedia entry</a>.</b></p>
</div>

</div>
</body>

@thaniri they are all centered but the dots of the <ul> are still on the left :worried:
Marek Slabicki
@thaniri
Feb 27 2016 00:13
is this a problem?
they're supposed to be there
the list-style-type hasn't been changed such that they wouldn't be on the left
did you want them in the center?
fatimazz
@fatimazz
Feb 27 2016 00:13
yes it is :/
Marek Slabicki
@thaniri
Feb 27 2016 00:13
did you want them on the right?
do you want them gone?
fatimazz
@fatimazz
Feb 27 2016 00:14
they should be look like this one here
Marek Slabicki
@thaniri
Feb 27 2016 00:14
link me to your codepen
Olivia Legge
@livmaria7891
Feb 27 2016 00:16
@fatimazz You could make the width of the div smaller and align all of the text in it to the left
Marek Slabicki
@thaniri
Feb 27 2016 00:16
you can do list-style-type:none; to get rid of the circles
you could center the ul itself instead of using the bootstrap style rule
im asssuming the bootstrap css file is using text-align:center;
Andrea
@Funlovn007
Feb 27 2016 00:26
@fatimazz - did any of those options work? I think I may have found a solution?
Brendan Sweeny
@BrendanSweeny
Feb 27 2016 00:29
@thaniri It looks like its against the imgur TOS to use it as a cdn
Also, don't use Imgur to host image libraries you link to from elsewhere, content for your website, advertising, avatars, or anything else that turns us into your content delivery network. If you do – and we will be the judge – or if you do anything illegal, in addition to any other legal rights we may have, we will ban you along with the site you're hotlinking from, delete all your images, report you to the authorities if necessary, and prevent you from viewing any images hosted on Imgur.com. We mean it.
fatimazz
@fatimazz
Feb 27 2016 00:30
i tried maria and thaniri but didnt work thx anyway Funlovn let's give it a try
Andrea
@Funlovn007
Feb 27 2016 00:31
@fatimazz - so I had the exact same problem, and when I came here they said create a container;
create a dive around your timeline that says id='content'
then in your css section do

content{

margin: auto;
position: relative;
text-align: left;
width: (play around with this part to get where you want it)
}
sorry # before content
fatimazz
@fatimazz
Feb 27 2016 00:33
@Funlovn007 but they said in the instructions css is not allowed to be used, only bootstrap embedded in the html section :L/
ehekatlOf
@ehekatlOf
Feb 27 2016 00:33
I redid the CSS on my wikipedia page
anybody want to take a look?
Andrea
@Funlovn007
Feb 27 2016 00:34
@fatimazz are you doing the tribute page? under the Basic Front End Elements section?
fatimazz
@fatimazz
Feb 27 2016 00:34
yes
Andrea
@Funlovn007
Feb 27 2016 00:35
This one?
blob
fatimazz
@fatimazz
Feb 27 2016 00:35
yeah
in the video he mentioned that only he used the css for the top of the page :/
Andrea
@Funlovn007
Feb 27 2016 00:35
It doesn't say you can't use CSS, I think you are supposed to try to use all three in example
fatimazz
@fatimazz
Feb 27 2016 00:36
i don't know he said all he build the page with is html and bootstrap
Andrea
@Funlovn007
Feb 27 2016 00:39
Alright, well good luck. :-) I'm sure you will do awesome!
fatimazz
@fatimazz
Feb 27 2016 00:41
thx a lot :smile: wish u the best too
Johnathon Sykes
@seesykescode
Feb 27 2016 00:52

Hey everyone, im working on the Zipline for Local Weather...trying test out geolocation but can't seem to load anything. Apparently Chrome security doesn't allow for File URL's to access geolocation and Edge does prompt for location but I dont get anything. Is this a browser issue? Code issue?

Code is below

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<script>
  if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(position){
       $('#data').html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
     });
   }
</script>

<div id="data">
  <p>you are here:</p>
</div>
</body>
</html>
ima be mad if its a simple typo that I'm just over looking...
lol
Johnathon Sykes
@seesykescode
Feb 27 2016 00:58
derp...i think i may have figured it out :/
Forgot to load Jquery facepalm lol
fatimazz
@fatimazz
Feb 27 2016 00:59
finally it worked thx all :)
Nick Hester
@nickhstr
Feb 27 2016 01:05
Hi everyone! Ok, I need some serious help; I've been trying to get the ajax call for the Wikipedia Viewer project to work, and for the life of me , I can't figure it out.
Here's my codepen link: http://codepen.io/nickhstr/pen/dMyYqy?editors=1010
Does anyone have any insight?
ehekatlOf
@ehekatlOf
Feb 27 2016 01:13
have you tried disabling default submit and using jquery triggers to pass form data?
Nick Hester
@nickhstr
Feb 27 2016 01:15
Thanks for the quick response, @ehekatlOf.
By default submit, do you mean $(someForm).submit(function(){})? if so, yes, and I get the same result. And I'm not quite sure what you mean by jquery triggers.
CamperBot
@camperbot
Feb 27 2016 01:15
nickhstr sends brownie points to @ehekatlof :sparkles: :thumbsup: :sparkles:
:star: 222 | @ehekatlof | http://www.freecodecamp.com/ehekatlof
ehekatlOf
@ehekatlOf
Feb 27 2016 01:17
oh like setting $.ajax to a keydown command
since the API call looks fine
Nick Hester
@nickhstr
Feb 27 2016 01:20
Gotchya, I'll have to give that a shot. Good to hear you think the api call looks good.
ehekatlOf
@ehekatlOf
Feb 27 2016 01:20
well I'm not 100% sure either
I didn't do mine with getJSON
I did it with a standard $.ajax method
but the thing I had the biggest issue with was finding out about &callback=?
Nick Hester
@nickhstr
Feb 27 2016 01:22
That's what I tried at first!
Haha, I knew about the callback parameter as well.
I am so stumped on this! haha
ehekatlOf
@ehekatlOf
Feb 27 2016 01:22
haha sorry I couldn't help more!
Nick Hester
@nickhstr
Feb 27 2016 01:25
What's odd is in another project (on Udacity), they have a similar project, using the Wikipedia api. Same basic idea, only it used jQuery 1.2, a version which supported the "success" property of $.ajax. Now, that's deprecated.
Anyway, I was able to get things working for that project, but I have no clue why this one doesn't work given how similar the two projects are.
Also, I've tested for the event listener (in this case, clicking the "Go!" button) by having it simply write to the html, and that works just fine. And I know the link for the JSON data works, as I've checked to make sure it returns something.
That's why I think it has something to do with how I'm going about getting the JSON data.
ehekatlOf
@ehekatlOf
Feb 27 2016 01:31
oh
got it
it's like I thought
there's something weird with the having default submit enabled
where it refreshes your page
$('form').submit(false);

$(document).ready(function() {
  //Click event listener, sends json request
  $('#search-btn').click(function() {
    var search = $('#searchbox').val();
    var wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + search + '&format=json&callback=?';

    $.getJSON(wikiUrl, function(response) {
      $('#results-heading').text('Results for ' + search + ':');
      var articles = response[1];
      var snippets = response[2];
      var links = response[3];

      for (var i = 0; i < articles.length; i++) {
        $('#results').append(response[2]);
      }
    });
  });
});
just disable default submit in forms
Nick Hester
@nickhstr
Feb 27 2016 01:33
Thank you, @ehekatlOf !
CamperBot
@camperbot
Feb 27 2016 01:33
nickhstr sends brownie points to @ehekatlof :sparkles: :thumbsup: :sparkles:
:warning: nickhstr already gave ehekatlof points
Nick Hester
@nickhstr
Feb 27 2016 01:33
Why does this happen?
ehekatlOf
@ehekatlOf
Feb 27 2016 01:33
hey no problem!
not sure, probably a weird codepen kink
Nick Hester
@nickhstr
Feb 27 2016 01:35
Haha, good to know. That's not the first time Codepen kinks have been at fault, and I suspect it won't be the last!
Heather Kusmierz
@HKuz
Feb 27 2016 01:35
Hi everyone - I hit a snag working on my Wikipedia viewer. I can't seem to access the data that's returned from the API call. I'm using a $.getJSON function - should I use $.ajax instead? Any thoughts are appreciated!
ehekatlOf
@ehekatlOf
Feb 27 2016 01:35
you can use either
quoezil
@quoezil
Feb 27 2016 01:39
hello, im not sure if this is the right room to ask this question but im having trouble with my web url
my website works if I do www.liamhanda.com but if I just use liamhanda.com it doesn't work, im sure its the DNS settings but I can't figure it out
John K.
@glarobats
Feb 27 2016 01:46
Hi,got stuck here with my weather. when I press the "Fahrenheit" button it only changes the value and innerHTML but not the temperature value.What am I doing wrong here?
http://codepen.io/glarobats/full/pgMLPK/
mhm
@mierea
Feb 27 2016 01:49
well for me it also changes the temp
the prob is when i click back to celsius
the button is not working
John K.
@glarobats
Feb 27 2016 01:50
yeah, cannot reverse the process
the if statement seems correct
mhm
@mierea
Feb 27 2016 01:53
ill try fixing it although it might take awhile as im not so good at this
John K.
@glarobats
Feb 27 2016 01:54
any help is appreciated!!!
Marek Slabicki
@thaniri
Feb 27 2016 01:58
consider this piece of code:
document.getElementById("celsius").onclick = function(){
  if(document.getElementById("fahren").disabled = true){
    document.getElementById("temperature").innerHTML = ((document.getElementById("temperature").innerHTML - 32) * (5/9)).toFixed(2);
    document.getElementById("fahren").disabled = false;
    document.getElementById("celsius").disabled = true;
  }
}

document.getElementById("fahren").onclick = function(){
  document.getElementById("temperature").innerHTML = (document.getElementById("temperature").innerHTML * (9/5) + 32).toFixed(2);
  document.getElementById("fahren").disabled = true;
  document.getElementById("celsius").disabled = false;
}
i've got two buttons called celsius and fahren
can anyone help me with images not loading properly?
http://codepen.io/thaniri/full/jWJWVm/
lots of users are saying that images won't load for them, was wondering whats wrong
John K.
@glarobats
Feb 27 2016 02:03
@thaniri creating two buttons was my initial thought but then thought that one button would be more simple... Guess not. :(
I'll give it a try with two buttons
thank you
Marek Slabicki
@thaniri
Feb 27 2016 02:03
i just took a note out of google's book
if you look at their weather app they have two buttons
John K.
@glarobats
Feb 27 2016 02:05
oh ok thx
mhm
@mierea
Feb 27 2016 02:05
@glarobats i found the issue
$('#placeTemp').replaceWith("<div id='placeTemp'>" +Math.round(far) + ' \xB0F'+ "</div>");
John K.
@glarobats
Feb 27 2016 02:05
hit me!!!
mhm
@mierea
Feb 27 2016 02:05
this is what you need
as when u click it
you replace the div entirely
so second time when u use it
there is no placeTemp div
where to put ur values
hope u understand what i mean
John K.
@glarobats
Feb 27 2016 02:06
thank you!
mhm
@mierea
Feb 27 2016 02:06
so in the first
example
ah
u got it
ok
im not so good at explaining stuff either
-.-
i also have a front end issue that i seem to not understand
i am forking a project on codepen.io and trying to make it work
so the menu is tilting
but when clicking to go to another session
then closing the tilt
instead of seeing only 1 section
i am seeing also abit from the previous section on top
John K.
@glarobats
Feb 27 2016 02:11
a little too complicated for my level
mhm
@mierea
Feb 27 2016 02:11
for me also
Lanitta
@DivaWeb
Feb 27 2016 02:11
do I have any javascript people around?
mhm
@mierea
Feb 27 2016 02:11
umm depends
if its not to complicated maybe i will be able to answer your problem
Lanitta
@DivaWeb
Feb 27 2016 02:12
@mierea lol well I am sure it is stupid simple but my brain seems to be just a little to stupid simple for this one lol
@mierea I am working on this lesson I had it finished except for one thing http://www.freecodecamp.com/challenges/golf-code
mhm
@mierea
Feb 27 2016 02:13
which one
DJ
@qualitymanifest
Feb 27 2016 02:14
@DivaWeb paste your code
mhm
@mierea
Feb 27 2016 02:14
and that
Lanitta
@DivaWeb
Feb 27 2016 02:14
@qualitymanifest don't know how to paste code but I listed the link and it has all info
mhm
@mierea
Feb 27 2016 02:14
@DivaWeb copy & paste what code you wrote on that page
Lanitta
@DivaWeb
Feb 27 2016 02:15

@mierea function golfScore(par, strokes) {
// Only change code below this line
if (par - 3 && strokes ==1){
return "Hole-in-one!";
}
else if (par - 2 && strokes == 2){
return "Eagle";
}
else if ( par - 1 && strokes == 3){
return "Birdie";
}
else if( par && strokes== 4){
return "Par";
}
else if( par + 1 && strokes == 5){
return "Bogey";
}
else if( par + 2 && strokes == 6){
return "Double Bogey";

}
else if (par + 3 && strokes >6 ){
return "Go Home!";
}
// Only change code above this line
}

// Change these values to test
golfScore(5,5);

Marek Slabicki
@thaniri
Feb 27 2016 02:15
can anyone let me know if images are loading on this page?
http://codepen.io/thaniri/full/jWJWVm/
DJ
@qualitymanifest
Feb 27 2016 02:15
@DivaWeb you can copy and paste the full URL (it will be really long, because the URL will have your code in it), or yeah just copy and paste your code here.
Willame Barroso
@willamesoares
Feb 27 2016 02:15
Hey everyone, I'm having a problem with the chalenge for creating a portfolio. I have all the page design done and all the div blocks. however whenever I resize the window the "portfolio projects" section is rearranged and the its contents spread all over the underneath div block. Did anyone understand my problem?
Marek Slabicki
@thaniri
Feb 27 2016 02:15
@willamesoares lookup media queries
@qualitymanifest i have all them checked except the one that says 5,5 should equal par.
Willame Barroso
@willamesoares
Feb 27 2016 02:16
@thaniri I have no knwledge about that, but thanks for your answer. I'll take a look at it
CamperBot
@camperbot
Feb 27 2016 02:16
willamesoares sends brownie points to @thaniri :sparkles: :thumbsup: :sparkles:
:star: 171 | @thaniri | http://www.freecodecamp.com/thaniri
Lanitta
@DivaWeb
Feb 27 2016 02:18
@qualitymanifest now according to the rules they set 5,5 can not equal par from what I am reading
DJ
@qualitymanifest
Feb 27 2016 02:19
@DivaWeb for that one (return "Par") you'll just want to see if par and strokes are equal
mhm
@mierea
Feb 27 2016 02:19
@thaniri i can see the pics. the weather app looks really nice actually
so umm, any css wizzard here that can help me fix a minor bug ?
DJ
@qualitymanifest
Feb 27 2016 02:21
far from a wizard, but post your code
so i forked this really cool pen, added the section to make it usable
the issue is that if u click to go on a section from the menu
when tilting effect is closed, instead of seeing 1 section you will see also abit from the previous one
as my design skills are crap and i do not really understand this behaviour (because if i call the sections from the url, they work perfect)
i cant seem to be able to fix it
Marek Slabicki
@thaniri
Feb 27 2016 02:27
the height of the section doesnt fill a screen
it might fill YOUR screen
but a screen with a larger resolution will see more than one section at once
height related things in css can be a nightmare
mhm
@mierea
Feb 27 2016 02:28
now i am thinking that a fix would be to get with js the screen res and override the css
is there a cleaner fix then that?
or better
cleaner sounds weird
lol
Marek Slabicki
@thaniri
Feb 27 2016 02:29
height based media queries would be much better than js
imo its bad form to manipulate css with js or jquery unless its for some interactive reason
can anyone tell me if my images are loading properly here?
http://codepen.io/thaniri/full/xVxEdG/
mhm
@mierea
Feb 27 2016 02:29
@thaniri yes they are
for me at least
Marek Slabicki
@thaniri
Feb 27 2016 02:30
thanks @mierea
CamperBot
@camperbot
Feb 27 2016 02:30
thaniri sends brownie points to @mierea :sparkles: :thumbsup: :sparkles:
:star: 362 | @mierea | http://www.freecodecamp.com/mierea
mhm
@mierea
Feb 27 2016 02:30
and i really like ur design for the weather app
Marek Slabicki
@thaniri
Feb 27 2016 02:31
thanks lol, i consider myself awful with css :)
mhm
@mierea
Feb 27 2016 02:31
you should see me :))
i like the js parts of freecodecamp
but when it comes to ux in general i suck as i dont really have good visual taste
Marek Slabicki
@thaniri
Feb 27 2016 02:34
its just something that needs to be practiced, like anything else
mhm
@mierea
Feb 27 2016 02:36
so @thaniri another question
i assume u said that my sections were sized to 600px
now ive changed that to 100vh
still the same issue
and a section is now filling a screen
btw @thaniri thank you for the media query hint.
CamperBot
@camperbot
Feb 27 2016 02:37
mierea sends brownie points to @thaniri :sparkles: :thumbsup: :sparkles:
:star: 173 | @thaniri | http://www.freecodecamp.com/thaniri
Arely
@Greentypo
Feb 27 2016 02:40
hey guys on Manage Packages with NPM under question number 22. Where we have to complete an "npm test" does anyone know how to do this?
mhm
@mierea
Feb 27 2016 02:42
@Greentypo ive done that one. let me go to c9 and check what was that challenge
Arely
@Greentypo
Feb 27 2016 02:42
Thank you! @mierea i really appreciate it :)
CamperBot
@camperbot
Feb 27 2016 02:42
greentypo sends brownie points to @mierea :sparkles: :thumbsup: :sparkles:
:star: 363 | @mierea | http://www.freecodecamp.com/mierea
mhm
@mierea
Feb 27 2016 02:44
well
that one is pretty much self explanatory
you have to edit the package.json file
as per instructions from the how-to-npm challenge

First, create a file called test.js. It doesn't have to do anything,
really. (This is npm class, not testing class.) But it has to exit
without throwing an error, or else the test fails.

Then, edit your package.json file to make your scripts section look like
this instead:

"scripts": {
"test": "node test.js"
},

Arely
@Greentypo
Feb 27 2016 02:46
i did exactly that and that is why i am stuck
maybe i misspelled i'll keep working on it
mhm
@mierea
Feb 27 2016 02:46
and when you try to verify the challenge
what error u have?
btw
have u created the said files
in the test directory
?
and have u cd'ed to that test directory
before running the how-to-npm verify
?
Arely
@Greentypo
Feb 27 2016 02:48
i did make a test.js but how do i check if it is in the right directory?
mhm
@mierea
Feb 27 2016 02:48
in the console
type pwd
and u will see the current working directory
it should be
/home/ubuntu/workspace/test
now here u should create the test.js file (by either entering the following command: touch test.js in terminal or by manually creating it from the left workspace menu - tree like structure)
also in this test directory
there should be a package.json
if u have followed the how-to-npm so far
and u need to edit this package.json file
not the one in your workspace directory
Arely
@Greentypo
Feb 27 2016 02:51
got it thanks again. You've been a big help
mhm
@mierea
Feb 27 2016 02:51
np
can someone help me with this
how can i adjust the height of my text block on the about page?
mhm
@mierea
Feb 27 2016 02:59
i assume u want to make it the same size as the h3 #flip element?
max77p
@max77p
Feb 27 2016 02:59
@mierea well my final goal is to push the picture below the picture when viewed in mobile...but before i do that, i can't seem to figure out how to adjust the size of the text area besides the width
Travis Boss
@travisboss
Feb 27 2016 03:03
@max77p add padding left to your title
use px though not ems
MIke
@chipotle298
Feb 27 2016 03:04

@chipotle298
hey everyone,
so im attempting to create a "tribute page" and im
trying to mimic the example that Free Code Camp
provides as much as possible (without looking
at its code of course i.e. cheating).

The first thing i want to do is use the following
code within this web site:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_jumbotron&stacked=h
and put it into Code Pen but im not sure what part
of it goes into the CSS part and or the html of Code Pen
website.Can anyone assist?
soo far i have only been able to this:

max77p
@max77p
Feb 27 2016 03:04
@travisboss but if i use px, wouldn't it not show up right on my mobile?
which as you can see, is not really panning out the way i want it to
Travis Boss
@travisboss
Feb 27 2016 03:05
@max77p no, it will show fine you need a fixed distance between your title and flip
@max77p if you really have an issue with px look at loading the site via bootstrap
max77p
@max77p
Feb 27 2016 03:07
@travisboss you say padding left..but when i add that to title, it pushes the text block away from the "click to slide the planel right" text box...but i want it to be flush with it when viewed on big screen
how do i wrap just the title up so that i can move it in a media query down below the picture?
SUSHANTH PATWARI
@suzello
Feb 27 2016 03:08
hey guys how do you add text below image.
iam doing the front end project of creating a portfolio and stuck near the thing where i need to add thumbnail images of my projects
Travis Boss
@travisboss
Feb 27 2016 03:09
@max77p you will need to find the right amount of px to get it to line up, obviously the original is overlapping.
you could also look at rems
Calandra Zellner
@calandraz
Feb 27 2016 03:24
@chipotle298 your html content is placed within the css box...also, your script tags, etc can be placed by clicking on the gear shift
Dan Stockham
@DanStockham
Feb 27 2016 03:35
Is there way I can hide a bootstrap modal in my app till it's called upon?
Scott
@macengr
Feb 27 2016 03:41
If anyone did the Simon game, what font did you use for the LCD display?
MIke
@chipotle298
Feb 27 2016 03:46
thanks! @calandraz
CamperBot
@camperbot
Feb 27 2016 03:46
chipotle298 sends brownie points to @calandraz :sparkles: :thumbsup: :sparkles:
:star: 323 | @calandraz | http://www.freecodecamp.com/calandraz
Calandra Zellner
@calandraz
Feb 27 2016 03:47
Your welcome!
SirSigil
@SirSigil
Feb 27 2016 04:07

hi there :D Could someone explain to me why I can`t wrap getJson simply into a function and call it? ```
function do_sth(i) {

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=42&callback=",
function(obj) {

  var snippet = "";

  var title = obj[i].title;
  var quote = obj[i].content;

  snippet += title + quote;

  $("#quoteBox").html(snippet);
});

};

$("#press").on("click", do_sth(Math.floor(Math.random()*10)));
```

function do_sth(i) {

  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=42&callback=",
    function(obj) {

      var snippet = "";

      var title = obj[i].title;
      var quote = obj[i].content;

      snippet += title + quote;

      $("#quoteBox").html(snippet);
    });
};



$("#press").on("click", do_sth(Math.floor(Math.random()*10)));
Ogundele Olumide
@Lumexralph
Feb 27 2016 05:35
Hi guys, I thought I was almost done with the functionality of my pomodoro timer until I got to a road block of how to make the timer display in mins and secs ' min : secs'......if I should do it my way, I'll get NaN value at some cos i'll want to get it from the DOM, would you be kind to help look my fiddle up.....how can I progress from here, am stuck, your response and solutions means a lot to me...
https://jsfiddle.net/wtwgpmpg/17/
Michael Aubrey
@mca62511
Feb 27 2016 07:20
So, I struggled with the WIkipedia API for like four hours yesterday. Does anyone know of a better explanation of the API?
Bruce Young
@mutantspore
Feb 27 2016 07:33
@mca62511 lol 4 hrs… you have not yet suffered enough!
do you have a pen of what you were working on?
Michael Aubrey
@mca62511
Feb 27 2016 07:35
I do, but I've already changed what I'm doing. I found this https://www.reddit.com/r/FreeCodeCamp/comments/46me96/wikipedia_viewer/ on reddit, and it shows how to do a jsonp request to get the data.
and it uses $.ajax
before I was using $.getJSON . For a while the problem was that I wasn't using a callback, and that was making it show a CORS error
I added &callback=? and that got rid of the CORS error, but for whatever reason the query I was sending wasn't returning an object.
This is the codepen : http://codepen.io/mca62511/pen/bpbQeB?editors=0010
but again it already looks a lot different
and its working now. I just wish I understood better why it was working
Venutom
@Venutom
Feb 27 2016 07:50
Can someone help me? For whatever reason no matter what I type within a <div> in the body section nothing shows up.http://codepen.io/MaryMaryQuiteContrary/pen/ZQgowO
h4r1m4u
@h4r1m4u
Feb 27 2016 07:51
@Lumexralph your clock time is stored in time in seconds. so you just need to convert that into a mm:ss string and display this string in the DOM. you don't (and shouldn't) need to get anything from the DOM. to get minutes, you can divide time by 60 and round down. to get seconds, you can use modulo (time % 60) to get the remainder.
@Venutom it's because you're using the fixed navbar and the text is hidden behind it. add this to your CSS:
body {
  padding-top: 50px;
}
Maulik Darji
@maulikdarji
Feb 27 2016 07:56
@Venutom your text is there behind your navbar, try adding top padding or page brakes; i.e. add <br><br> before <h2> element
Alex Dobre
@Zerelt
Feb 27 2016 08:03
i think I'm literally about to loose my mind ... after finally making this damn json request with react i'm supposed to make it so when you click something it rerenders and shows the leaderboard according to the all time points ... anybody has any hints on this ... because i've tried putting event handlers directly in the function, tried some other weird stuff messing up completely my rednering, i tried putting it in the componentDidMount function ... seriously how are you supposed to do this ?
Bruce Young
@mutantspore
Feb 27 2016 08:04
the datavis room wil probably be more help
rooms
CamperBot
@camperbot
Feb 27 2016 08:04

rooms

See all the FreeCodeCamp rooms at gitter.im/FreeCodeCamp/rooms
Or check this wiki article for a shortlist
Alex Dobre
@Zerelt
Feb 27 2016 08:05
i thought that was for d3 only
Bruce Young
@mutantspore
Feb 27 2016 08:05
it’s for the datavisualtion certificate
Alex Dobre
@Zerelt
Feb 27 2016 08:05
i'll take my desperation and what's left of my sanity there then
thank you
Vincent Capo
@DarkShjnobj
Feb 27 2016 08:07
Hi @Venutom you closed the </head> tag in the wrong place...
anyway, using codepen, all metadata in the head should go in the "Pen Settings" in the "Stuff for <head>" section
Blaze
@Blazephoenix
Feb 27 2016 08:11

http://codepen.io/Blazephoenix_/pen/NNKoyq

The javascript isnt working and I cant seem to figure out why, it'd be great if anyone could help!

Ogundele Olumide
@Lumexralph
Feb 27 2016 08:11
@h4r1m4u okay man, but when I pause the countdown..... How do I continue the countdown without starting with another time?
Bruce Young
@mutantspore
Feb 27 2016 08:12
@Blazephoenix you haven’t included jQuery
@Blazephoenix just add it in teh codepen settings cog JS
Blaze
@Blazephoenix
Feb 27 2016 08:13
@mutantspore Ohh yes! Its working Thanks! :P
CamperBot
@camperbot
Feb 27 2016 08:13
blazephoenix sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1179 | @mutantspore | http://www.freecodecamp.com/mutantspore
h4r1m4u
@h4r1m4u
Feb 27 2016 08:13
@Lumexralph the interval that you create should use the time variable. don't reset or delete the value of time when you pause the clock (clear the interval). that way the newly created interval will continue to count down from where the clock was paused
Ogundele Olumide
@Lumexralph
Feb 27 2016 08:13
That's the main challenge.... I have for posting the question, what I did to solve that initially was to get it from the DOM, how do I solve it?
h4r1m4u
@h4r1m4u
Feb 27 2016 08:14
don't get anything from DOM. your time on the clock is stored in time which is available in your JS code
Ogundele Olumide
@Lumexralph
Feb 27 2016 08:15
Okay.... would work on that and let you know, thanks man
Radhika Chaudhary
@radheyIndia
Feb 27 2016 08:25
@aswathm78 yes i did that on purpose
I am stuck in this code where u have to find whether a given property is present in an array of objects
Ashfaq Hossain
@AshfaqHossain
Feb 27 2016 08:30
I'm working on the tribute page challenge. My page is almost complete. Except the jumbotron thing is not becoming responsive on a smaller screen. There is still huge padding around it and it's not taking full width like the sample page. How can I fix this? Here is my pen http://codepen.io/DeltaOne/full/LNYPLd/
Radhika Chaudhary
@radheyIndia
Feb 27 2016 08:32
function where(collection, source) {
  var arr = [];
  // What's in a name?
  var a,i=0;
$.each(collection, function(index,value)
{
  var prop=Object.keys(source);
  if(collection[index].hasOwnProperty(prop))
      {


      }
});

}


where([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Montague" });
here is my code what i have done yet
BenjaminDowns
@BenjaminDowns
Feb 27 2016 08:33
@radheyIndia It looks like you are trying to use jQuery, but that isn't possible in this environment.
Radhika Chaudhary
@radheyIndia
Feb 27 2016 08:33
what should i do then @BenjaminDowns
BenjaminDowns
@BenjaminDowns
Feb 27 2016 08:34
You are on the right track; just rewrite what you have in vanilla javascript and return the value of the loop.
Radhika Chaudhary
@radheyIndia
Feb 27 2016 08:35
i tried that but it didn't work out
BenjaminDowns
@BenjaminDowns
Feb 27 2016 08:35
Can you post what you tried?
Arunabh
@arunabh15091989
Feb 27 2016 08:56
This message was deleted
the nav bar on left and right are not aligned and i dont understand why?
Michael Aubrey
@mca62511
Feb 27 2016 09:17
Heya, so I've made some progress on my Wikipedia Viewer. Is there any way to make it so that the animation doesn't affect the page length until it is done animating?
So that the cards can fade up, and then only affect the page length when the animation is complete http://codepen.io/mca62511/full/bpbQeB
Hemang Kumar
@hemangsk
Feb 27 2016 09:22
Michael Aubrey
@mca62511
Feb 27 2016 09:30
I ended up doing this, and it basically accomplished what I needed, don't know if it is the most elegant way though,
  $(".wrapper").css({
    "height": "100vh",
    "overflow": "hidden"
  });
  $(".results").animate({
    "opacity": 1,
    "top": "0px"
  }, 500, function() {
    $(".wrapper").css({
      "height": "auto",
      "overflow": "visible"
    });
  });
Ajinkya Hingne
@meajinkya
Feb 27 2016 09:35
I need help with jquery challenge
Avadhut Mainkar
@Avadhut13
Feb 27 2016 09:37
@mca62511 hey i read your earlier message..and i am getting the same problem. It is not working with getJSON. Do you have any idea what the problem is/?
Michael Aubrey
@mca62511
Feb 27 2016 09:37
depends on the problem you're having
you need to at &callback=? to the end in order to get it to stop giving your a CORS error
but other than for that, I kind of hit a dead end in regard to that
Avadhut Mainkar
@Avadhut13
Feb 27 2016 09:38
@mca62511 well it is not giving any error.
Michael Aubrey
@mca62511
Feb 27 2016 09:38
in the console?
classact1
@classact1
Feb 27 2016 09:40
Hey guys. For some reason I can't get two inline elements centered. I tried many combinations of css commands and none of them gets the job done. Any idea?
http://codepen.io/classact1/pen/ZQgdXq?editors=1000
Michael Aubrey
@mca62511
Feb 27 2016 09:42
@classact1 text-align: center; centers things INSIDE the tags. So it is more efficient, in your case, to apply it to the surrounding div.
If you do that it centers all those h1 tags you have.
Avadhut Mainkar
@Avadhut13
Feb 27 2016 09:44
@mca62511 now included callback,but it is not returning anything
Michael Aubrey
@mca62511
Feb 27 2016 09:44
@Avadhut13 What is your console telling you?
btw, as I said, I never got it to work with $.getJSON
its doable, some of the other wiki codepens I've seen uses it
classact1
@classact1
Feb 27 2016 09:45
@mca62511 sometimes I'm just dumb : D btw do you see location temperature and sky values from API when you run the pen?
Michael Aubrey
@mca62511
Feb 27 2016 09:45
but I couldn't get it to work. I ended up using $.ajax
Avadhut Mainkar
@Avadhut13
Feb 27 2016 09:45
that works/
?*
Michael Aubrey
@mca62511
Feb 27 2016 09:46
it worked for me
Avadhut Mainkar
@Avadhut13
Feb 27 2016 09:46
@mca62511 ok i'll try that,thnx!
CamperBot
@camperbot
Feb 27 2016 09:46
avadhut13 sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 343 | @mca62511 | http://www.freecodecamp.com/mca62511
Michael Aubrey
@mca62511
Feb 27 2016 09:46

@classact1 That I do,

Local weather
Wada, JP
-1 °C
Snow

classact1
@classact1
Feb 27 2016 09:47
oh, so it works : ) @mca62511
Michael Aubrey
@mca62511
Feb 27 2016 09:47
That it does :D
classact1
@classact1
Feb 27 2016 09:47
@mca62511 thanks!
CamperBot
@camperbot
Feb 27 2016 09:47
classact1 sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 344 | @mca62511 | http://www.freecodecamp.com/mca62511
Vincent Yan
@envincebal
Feb 27 2016 10:22

Hey guys, I'm on the Objects for Lookup lesson and I can't figure out what I'm doing wrong:

// Setup
function phoneticLookup(val) {
var result = "";

// Only change code below this line
var lookup = {
"alpha": result = "Adams",
"bravo":result = "Boston",
"charlie": result = "Chicago",
"delta":result = "Denver",
"echo":result = "Easy",
"foxtrot":result = "Frank"
};

// Only change code above this line
return result;
}

// Change this value to test
phoneticLookup("charlie");

h4r1m4u
@h4r1m4u
Feb 27 2016 10:39

@envincebal you're trying to assign the property's value into the result variable as part of the lookup object definition. that's not the way to do it. let me give you an example:

// let's have a names object with surnames associated to first names of people
var names = {
  "peter": "smith",
  "john": "doe",
  "simon": "cook"
}
// now let's get some surnames from our object
names["peter"]; // gives "smith"
names["simon"]; // gives "cook"

so to get the value of a property from the object, you use: objectName[propertyName] (or also objectName.propertyName).

this should be enough for you to adjust your function and return the correct value of the property from your lookup object

Anna Sakoyan
@ansakoy
Feb 27 2016 10:39
@envincebal you are not supposed to insert that result=
Vincent Yan
@envincebal
Feb 27 2016 10:46
// Setup
function phoneticLookup(val) {
  var result = "";

  // Only change code below this line
  var lookup = {
    "alpha":"Adams",
    "bravo":"Boston",
    "charlie" :"Chicago",
    "delta": "Denver",
    "echo": "Easy",
     "foxtrot": "Frank"
  };

  // Only change code above this line
  return result;
}

// Change this value to test
phoneticLookup("charlie");
it's still not working
h4r1m4u
@h4r1m4u
Feb 27 2016 10:47
you're not looking up anything. you're just returning result unchanged. it's just an empty string
read through my previous post again
Vincent Yan
@envincebal
Feb 27 2016 10:55
@h4r1m4u but I don't get where result comes into play after the object.
h4r1m4u
@h4r1m4u
Feb 27 2016 10:55
@envincebal use val to get the value of the property from the lookup object, store it in result and return the result
basically you need to finish this line: result = .....
Vincent Yan
@envincebal
Feb 27 2016 10:57
@h4r1m4u Ooooh okay I got it to work. I'm so stupid! Thank you so much!
CamperBot
@camperbot
Feb 27 2016 10:57
envincebal sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1488 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 10:57
yw
Michael Aubrey
@mca62511
Feb 27 2016 11:29
Okay, so my wikipedia searcher is basically finish, however, the autocomplete can get super, super slow if you type too fast
http://codepen.io/mca62511/full/bpbQeB
mhm
@mierea
Feb 27 2016 11:29
neat
looks nice
Michael Aubrey
@mca62511
Feb 27 2016 11:30
thanks
is there any way to like... do .on("input propertychange paste") but only after the input hasn't changed for a second?
like, have it wait until I've stopped typing for a whole second or something.
mhm
@mierea
Feb 27 2016 11:31
not sure
u could add a delay
assuming the user needs x seconds to type
Michael Aubrey
@mca62511
Feb 27 2016 11:31
would that work?
they say it works
Michael Aubrey
@mca62511
Feb 27 2016 11:34
okay, I'll try something like that
mhm
@mierea
Feb 27 2016 11:35
anyone knows why, in the following pen, after changing the page from the menu, when the tilt returns i see a part of the previous section instead of seeing only 1 section? http://codepen.io/mierea/pen/vGYXOX
i am stuck on this for a day now -.-
Michael Aubrey
@mca62511
Feb 27 2016 11:35
@miera Here is a proper thank you so you can get some brownie points
CamperBot
@camperbot
Feb 27 2016 11:35
mca62511 sends brownie points to @miera :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for miera
Michael Aubrey
@mca62511
Feb 27 2016 11:36
let's try that again, thanks @mierea
CamperBot
@camperbot
Feb 27 2016 11:36
mca62511 sends brownie points to @mierea :sparkles: :thumbsup: :sparkles:
:star: 364 | @mierea | http://www.freecodecamp.com/mierea
mhm
@mierea
Feb 27 2016 11:36
yw
i think i will also work on the wikipedia challenge
Michael Aubrey
@mca62511
Feb 27 2016 11:43
@mierea that worked perfectly thank you.
CamperBot
@camperbot
Feb 27 2016 11:43
mca62511 sends brownie points to @mierea :sparkles: :thumbsup: :sparkles:
:warning: mca62511 already gave mierea points
Kenni Gandira Alamsyah
@kenniga
Feb 27 2016 12:07
hello fellas, is there anyone here who ever use font face?
is it possible to put font face into different stylesheet, and then call it back in my main css with @import ?
I just want to make my main.css clean.
Omar Adulbaki Alsarbaji
@omar-sh
Feb 27 2016 12:16
Hi , here is my weather app please check it and give me your opinions , I didn't care a lot about designing :smile: http://codepen.io/omarsh/pen/Rawpqj
Maciej Bembenista
@macbem
Feb 27 2016 12:32
@kenniga use Sass ;)
Kenni Gandira Alamsyah
@kenniga
Feb 27 2016 12:34
@noczesc well, I thought the same thing too
Maciej Bembenista
@macbem
Feb 27 2016 12:35
@kenniga pm'd you
Jamie Draper
@JamieDraper
Feb 27 2016 12:45
Hey room. Has anyone completed the wikipedia viewer app? I'm having some headaches with the API and would be super grateful if I could ask a couple of questions.
Dulshani Gunawardhana
@dshgna
Feb 27 2016 12:45
@JamieDraper Ask on :)
@everyone: I'm searching for a library that has buttons of different shapes. Anyone knows something that remotely matches this description?
Jamie Draper
@JamieDraper
Feb 27 2016 12:52
@dshgna Muchos gracias! :D So I'm trying to grab the title from each search match and the extract property. I figured I could use a generator to iterate through my search results and grab the extract property this way, but for some reason i'm only getting an extract for the first page returned https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&titles=&generator=search&exintro=1&explaintext=1&gsrsearch=Music
Dulshani Gunawardhana
@dshgna
Feb 27 2016 12:56
@JamieDraper Have you tried this for other queries other than music?
@JamieDraper a possible explanation is that in this result, all the other titles list a set of sub titles under them and thus do not have an extract property
@JamieDraper you could also use query=opensearch for an easier way ;)
@JamieDraper but your way is very creative
Jamie Draper
@JamieDraper
Feb 27 2016 13:04
@dshgna I suspect I've misunderstood the behaviour of the generator, but I'm not sure how to get the extracts. Looping through my returned search titles and making a separate ajax request for each one seems like a pretty inefficient
way to go haha
@dshgna I've tried a few different searches yeah. Thanks for the tip off with opensearch ;) So it returns arrays of titles, extracts and links respectively? Then you just match them up?
CamperBot
@camperbot
Feb 27 2016 13:05
jamiedraper sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 190 | @dshgna | http://www.freecodecamp.com/dshgna
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:06
@JamieDraper opensearch does just that exactly
LuciusR11
@LuciusR11
Feb 27 2016 13:06
Anyone know how to add a picture to a button?
Jamie Draper
@JamieDraper
Feb 27 2016 13:07
@dshgna my approach might have been creative but I was probably making extra work for myself. Par for course with me. I've been telling myself the api docs are poorly laid out but I'm probably just not reading it properly
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:09
@JamieDraper takes a bit of figuring out, it does
Jamie Draper
@JamieDraper
Feb 27 2016 13:09
@dshgna Yoda dialect? Thanks for all your help
CamperBot
@camperbot
Feb 27 2016 13:09
jamiedraper sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:warning: jamiedraper already gave dshgna points
Chad Kreutzer
@ChadKreutzer
Feb 27 2016 13:21
So I'm starting the random quote project. What APIs do people usually use for it?
LuciusR11
@LuciusR11
Feb 27 2016 13:27
How can i get a picture from google drive onto my project, I put the url in but it's telling me that it's not legitimate.
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:35
@ChadKreutzer I used andruxnet-random-famous-quotes on Mashape but it requires signing up for an API key
Chad Kreutzer
@ChadKreutzer
Feb 27 2016 13:36
@dshgna thanks. That seems to be the consensus.
CamperBot
@camperbot
Feb 27 2016 13:36
chadkreutzer sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 191 | @dshgna | http://www.freecodecamp.com/dshgna
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:36
@LuciusR11 I remember I couldn't get it done with google drive, but managed with dropbox. Also you can upload to github and access the url through raw-git
LuciusR11
@LuciusR11
Feb 27 2016 13:36
I'll try that, thanks @dshgna.
CamperBot
@camperbot
Feb 27 2016 13:36
luciusr11 sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 192 | @dshgna | http://www.freecodecamp.com/dshgna
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:46
So I was revising my old projects, and am facing a weird problem in my quote machine. I'm using a background image, but the div containing the quote has a white background which I did not put. All help appreciated :)
http://codepen.io/dshgna/pen/jbjEPK
Joseph Morse
@jnmorse
Feb 27 2016 13:53
@dshgna your setting the background on html, which is behind body, and bootstrap sets the body to a white background, so if you change it to body, then no more white.
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:54
@jnmorse that works perfectly! Thanks a lot! You are a pro!
CamperBot
@camperbot
Feb 27 2016 13:54
dshgna sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 430 | @jnmorse | http://www.freecodecamp.com/jnmorse
Dulshani Gunawardhana
@dshgna
Feb 27 2016 13:58
@jnmorse would you have any advice on improving my UI please? I find the buttons out of harmony, but have no idea what to do to them
http://codepen.io/dshgna/pen/jbjEPK?editors=0100
Joseph Morse
@jnmorse
Feb 27 2016 14:08
@dshgna how about something like this? http://codepen.io/jnmorse/pen/vGYmQv its a fork of yours
Dulshani Gunawardhana
@dshgna
Feb 27 2016 14:09
@jnmorse thanks for the suggestion! That looks much nicer. I think I'll incorporate it, but keep the outline there throughout, not just on hover.
CamperBot
@camperbot
Feb 27 2016 14:09
dshgna sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:warning: dshgna already gave jnmorse points
Dulshani Gunawardhana
@dshgna
Feb 27 2016 14:09
UI is both fascinating and annoying at the same time ;(
Joseph Morse
@jnmorse
Feb 27 2016 14:13
@dshgna lol..yeah and I'm not one that generally plans ahead with them. I know there are some that are more focused on design that either draw out what they have in mind first, or do mock up in photoshop or something before they even start the html and styles.
Dulshani Gunawardhana
@dshgna
Feb 27 2016 14:14
I do ui design last :D I made the quote machine like nearly two months ago lol
max77p
@max77p
Feb 27 2016 14:23
anyone active right now?
can someone help me center my picture in about page in the media querie?
Joseph Morse
@jnmorse
Feb 27 2016 14:24
@dshgna I've redone a number of my projects a few times, or 3 like the pomodoro clock heh. The last time I kinda liked someone else's design so I kinda borrowed elements from it, still haven't re-done my profile one, or the wiki project.
Achilleas Papakonstantinou
@AchiPapakon
Feb 27 2016 14:42
Hi, when I resize my web page, from a point onwards my two images aren't center-aligned. I think the problem is in <div class="col-xs-9 col-md-6 ">. Perhaps something with col-xs-offset? I can't figure it though.
mhm
@mierea
Feb 27 2016 14:51
so umm
what do you guys think of my wiki watcher?
all design is borrowed as i suck at it -.-
Dulshani Gunawardhana
@dshgna
Feb 27 2016 14:55
@mierea that's one awesome design you used :D
I'm inspired!
kirbyedy
@kirbyedy
Feb 27 2016 14:57
@mierea why only 3 results ?
Joseph Morse
@jnmorse
Feb 27 2016 14:58
@Astamathtos I'd change col-xs-9 to col-xs-12 and you might want to add center-block to the class on the images
Matt Green
@mattxgreen
Feb 27 2016 15:15
for (var i = 0; i < 3 ; i++) {
            var boxId = i+1;
            var title = data.query.search[i].title;
            var extract = data.query.search[i].snippet;
            var url = "https://en.wikipedia.org/wiki/" + title;
            $(".extract").html(extract);

            html += '<a href="'+ url +'" target="_blank">';
            html += '<div class="box'+ boxId +'">';
            html += '<h3>'+ title +'</h3><br>';
            html += '<p>'+ extract +'</p>';
            html += '<p></p>';
            html += '</div></a>';
        }
@mierea Your js loop is better written like that, and your increment on the boxId = ++i was actually giving you an error you didn't see
With the ++i you are actually changing the value of i at the same time you are assigning the value to boxId
So, I believe on your current pen you are getting the 1st, 3rd, and 5th result rather than 1,2.3 as intended
Actually, 2nd, 4th, and 6th
Yotam Levy
@Heaser
Feb 27 2016 15:24
I'm not sure who to make a tribute page for..
Anyone have any ideas?
Matt Green
@mattxgreen
Feb 27 2016 15:25
ghandi
Yotam Levy
@Heaser
Feb 27 2016 15:26
Ghandi, Great idea! Thanks!
Matt Green
@mattxgreen
Feb 27 2016 15:26
sure thing
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:27
All reviews welcome :)
Matt Green
@mattxgreen
Feb 27 2016 15:28
Looks great
Is it supposed to be beatable?
@dshgna
kirbyedy
@kirbyedy
Feb 27 2016 15:29
it only lets me play 1 game :(
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:29
Thanks @mattxgreen
Yes it is supposed to be beatable
CamperBot
@camperbot
Feb 27 2016 15:29
dshgna sends brownie points to @mattxgreen :sparkles: :thumbsup: :sparkles:
:star: 48 | @mattxgreen | http://www.freecodecamp.com/mattxgreen
kirbyedy
@kirbyedy
Feb 27 2016 15:29
than keep on return me on the choice of X or O
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:29
@kirbyedy as in it doesn't reload? or doesn't keep count of score?
@kirbyedy yes in the win situation?
kirbyedy
@kirbyedy
Feb 27 2016 15:29
no
draw
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:30
@kirbyedy if its not too much trouble, could you share a screenshot of the position?
this was the hardest pen I've done so far and there should be plenty of bugs, I'm afraid
Matt Green
@mattxgreen
Feb 27 2016 15:31
I'm having same issue of a hang on 2nd game
-- Chrome
kirbyedy
@kirbyedy
Feb 27 2016 15:31
well it clears the screen and just keeps on giving me the choice of X or O
yes, the first game is ok, then every next game does not work
Matt Green
@mattxgreen
Feb 27 2016 15:32
same
kirbyedy
@kirbyedy
Feb 27 2016 15:32
chrome
let me try in safari
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:32
@kirbyedy ohhh! thanks for pointing out. I'll check on it
CamperBot
@camperbot
Feb 27 2016 15:32
dshgna sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 555 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:33
@kirbyedy no I'm using chrome too. its a bug. will fix it and get back
thanks to you too @mattxgreen
CamperBot
@camperbot
Feb 27 2016 15:33
dshgna sends brownie points to @mattxgreen :sparkles: :thumbsup: :sparkles:
:warning: dshgna already gave mattxgreen points
Matt Green
@mattxgreen
Feb 27 2016 15:33
cannot select same player (X,O), have to toggle
kirbyedy
@kirbyedy
Feb 27 2016 15:33
safari also gives this screen on load
Matt Green
@mattxgreen
Feb 27 2016 15:33
then it offers choice again when trying to mover
kirbyedy
@kirbyedy
Feb 27 2016 15:34
Screen Shot 2016-02-27 at 17.33.03.png
not like on chrome
Matt Green
@mattxgreen
Feb 27 2016 15:35
I believe you're not resetting your win variable
Achilleas Papakonstantinou
@AchiPapakon
Feb 27 2016 15:36
Can I add col-xs-offset-1 just for up to some size? I want it to deactivate when col-md activates.
Matt Green
@mattxgreen
Feb 27 2016 15:47
@dshgna You may want to start learning about the game loop, it'll help your development: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/
@dshgna but your code looks a lot better than a lot of code I've seen. It's actually readable, and I can follow it pretty easy... nice work!
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:50
@mattxgreen updated version, still having some quirks around the draw situation
http://codepen.io/dshgna/pen/jWoKYY?editors=0011
@mattxgreen thank you for the link. I've never heard about game loops before, and it seems a great pattern!
CamperBot
@camperbot
Feb 27 2016 15:51
dshgna sends brownie points to @mattxgreen :sparkles: :thumbsup: :sparkles:
:warning: dshgna already gave mattxgreen points
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:51
have a lot of work to do on this project :s
Matt Green
@mattxgreen
Feb 27 2016 15:51
@dshgna works for multiple games, but still forced to alternate between X and O
It looks great
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:52
@mattxgreen I still haven't done alternating between the X and O. Did you make yours unbeatable?
Matt Green
@mattxgreen
Feb 27 2016 15:52
One easy thing for you to change now, is having your functions return values to you
I never made one :)
Dulshani Gunawardhana
@dshgna
Feb 27 2016 15:54
oh :D
so you just started off?
Gershon Papi
@papigers
Feb 27 2016 15:55
hey, i have a problem with my bootstrap navbar's collapse button, doesn't seem to work:
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://metakata.altervista.org/wordpress/wp-content/uploads/2015/08/freecodecamp_white.png" height="65px"> Gershon Papi</a>
    </div>

    <div class="collapse navbar-collapse" id="my-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>
Matt Green
@mattxgreen
Feb 27 2016 15:55
Your function checkWin calls gameFinish... functions are better written as isolated(re-usable) code, so I would make the checkWin return true/false then move the logic to the game loop
so if(checkWin) gameFinish();
I'm new to freecodecamp, but not to JS
if(checkWin()){ gameFinish() }
Dan Stockham
@DanStockham
Feb 27 2016 16:01
Is there a reason why they don't show up when there is a win?
Matt Green
@mattxgreen
Feb 27 2016 16:08
@DanStockham I'm having a hard time even getting to where the modal should appear
@DanStockham game told me it was a draw on my firt move as X to top middle
Matt Green
@mattxgreen
Feb 27 2016 16:19
@DanStockham Your game keeps restarting on it's own. Try this on line 50, and watch the console:
if (winConditions() === true) {
          console.log('showing modal')
          $('#win').modal('show');
That should help you troubleshoot... you may also want to look at that game loop link I posted to @dshgna earlier
@DanStockham you need a gameOver state, and you need to clear the board
Igor Šumonja
@igor-sumonja
Feb 27 2016 16:25
hi
having problems with tic tac toe
I'm trying to bind action to mouse click on table cell
It's working fine but I don't know how to pass action back to computer
my code is this
function humanTurn() {
    $( ".field" ).one( "click", function() {
        $(this).html(player);
        boardState[$(this).attr('id')] = player;
        computerTurn();
    });


}
CamperBot
@camperbot
Feb 27 2016 16:26
:bulb: to format code use backticks! ``` more info
Igor Šumonja
@igor-sumonja
Feb 27 2016 16:27
and this function computerTurn get excetuted two or more times during one click
not sure what and I doing wrong
Gershon Papi
@papigers
Feb 27 2016 16:28
hi, any idea how to make a background image transparent with css
Achilleas Papakonstantinou
@AchiPapakon
Feb 27 2016 16:32

I am nesting what I believe is an [img col-xs-6] plus [img col-xs-6] under a [jumbotron col-xs-12].

Why doesn't the second image go under the first when I resize the web page?

<body>
  <div class="container">
    <div class="row col-xs-12 jumbotron">
      <div class="row">
        <div class="col-xs-6">
          <img class="img-responsive" src="http://cdn8.openculture.com/wp-content/uploads/2014/11/Tolkien-publisher-3.jpg">
        </div>
        <div class="col-xs-6">
          <img class="img-responsive" src="http://static.giantbomb.com/uploads/original/0/2848/425335-tolkien_photo_c.jpg">
        </div>
      </div>
    </div>
  </div>
</body>
Dulshani Gunawardhana
@dshgna
Feb 27 2016 16:33
@mattxgreen sorry had a powercut
@mattxgreen so I call checkWin() at two points and I didn't want to repeat the functionality. Perhaps I could use a callback if win?
Matt Green
@mattxgreen
Feb 27 2016 16:35
@dshgna no, you'd only check at one point in the game loop
(per player)
Dulshani Gunawardhana
@dshgna
Feb 27 2016 16:35
@mattxgreen ah
@mattxgreen let me work on it
Achilleas Papakonstantinou
@AchiPapakon
Feb 27 2016 16:36
@papigers check for alpha transarency (alongside RGB is aRGB) w3schools
Caleb Martin
@caleb272
Feb 27 2016 16:50
can someone tell me how to do this is Reg expression spinalCase("thisIsSpinalTap") should return "this-is-spinal-tap"
Matt Green
@mattxgreen
Feb 27 2016 16:51
@dshgna
```
while(!gameOver){
if(turn='cpu'){
make_comp_move();
} else {
playerTurnFunction();
}
if(checkWin() || checkDraw()){
gameOver = true;
}
// above if statement can be simplified to: gameOver = (checkWin() || checkDraw());
turn = (turn === 'cpu') ? 'player' : 'cpu';
}
oops
while(!gameOver){
    if(turn='cpu'){
      make_comp_move();
    } else {
      playerTurnFunction();
    }
    if(checkWin() || checkDraw()){
      gameOver = true;
    }
    // above if statement can be simplified to: gameOver = (checkWin() || checkDraw());
    turn = (turn === 'cpu') ? 'player' : 'cpu';
}
I would do something like that
Dulshani Gunawardhana
@dshgna
Feb 27 2016 16:53
@mattxgreen thanks you! I was stuck in trying to figure out turn
CamperBot
@camperbot
Feb 27 2016 16:53
dshgna sends brownie points to @mattxgreen :sparkles: :thumbsup: :sparkles:
:star: 49 | @mattxgreen | http://www.freecodecamp.com/mattxgreen
Dulshani Gunawardhana
@dshgna
Feb 27 2016 16:54
@mattxgreen figuring out the solution isn't difficult, doing it eloquently is!
Matt Green
@mattxgreen
Feb 27 2016 16:55
agreed, especially in the beginning
key is to try to make a function perform ONE function
You will often find them re-usable when you do it like that
Igor Šumonja
@igor-sumonja
Feb 27 2016 16:55

please help with tic tac toe also
http://codepen.io/igor-sumonja/pen/mPbbNy

problem is it goes until one point then computer make several move at once and everything freeze...

Matt Green
@mattxgreen
Feb 27 2016 16:56
@igor-sumonja I'll take a glance
Igor Šumonja
@igor-sumonja
Feb 27 2016 16:56
I don't know why is this happening... first move or two goes without problem
@mattxgreen thanks...
CamperBot
@camperbot
Feb 27 2016 16:56
igor-sumonja sends brownie points to @mattxgreen :sparkles: :thumbsup: :sparkles:
:star: 50 | @mattxgreen | http://www.freecodecamp.com/mattxgreen
Matt Green
@mattxgreen
Feb 27 2016 17:03
@igor-sumonja something wrong with your do-while loop/condition
browser crashed, gotta go back and see
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:03
yeah I know, it freeze every time
Matt Green
@mattxgreen
Feb 27 2016 17:03
Why are you doing a do-while loop?
I believe you're getting an infinite lop
loop
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:04
to find out which field is empty
Matt Green
@mattxgreen
Feb 27 2016 17:04
one sec
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:04
it goes making random number and then check field array is it empty
I got array boardState in which I fill symbols X or O as we play
currently I don't know how to make AI for computer so I used math random function to place computer move
but it need to have some checking before placing symbol is this field is taken...
Matt Green
@mattxgreen
Feb 27 2016 17:07
So your logic is to pull a random num between 1-9, and check it against your array until you find an empty square?
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:08
yes
that's the idea
Matt Green
@mattxgreen
Feb 27 2016 17:08
ok, first prob is that arrays are 0 indexed
so you actually need 0-8
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:09
move = Math.floor((Math.random() * 8) + 1);
Matt Green
@mattxgreen
Feb 27 2016 17:09
move = Math.floor((Math.random() * 8) );
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:09
how to change then to 0 - 8
Matt Green
@mattxgreen
Feb 27 2016 17:09
you don't need to add 1
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:10
ok fixed that but still freeze
any other idea maybe ?
Matt Green
@mattxgreen
Feb 27 2016 17:11
@igor-sumonja There is something else too though. Do/while loops have slim use cases
a do while loop executes first, THEN checks the condition
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:11
to go with if then condition maybe ?
Matt Green
@mattxgreen
Feb 27 2016 17:12
you want to check the condition first, otherwise you might overwrite a previous move
Let me change the logic a tad
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:12
do {
move = Math.floor((Math.random() * 8) );
idMove = "#" + move;
}
while (boardState[move] !== "E");
but it does not update field until finds empty one
updating of field is later after do while loop
Joseph Davidson
@jojacino
Feb 27 2016 17:13
Hello
Carlos Hernandez
@juancarloshg
Feb 27 2016 17:13
Hey, i'm with the random quote machine challenge and i dont know how to start using APIs... Any recommendation?
Matt Green
@mattxgreen
Feb 27 2016 17:16
@igor-sumonja browser keeps crashing
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:17
@mattxgreen I know it's driving me nuts
and I don't know where is the problem
@mattxgreen If I move do while check it does not crash so problem is there, but I don't know how else to check is field is taken without loop
Ben
@ReductioAbsurdum
Feb 27 2016 17:19
When I build my random quote machine, will I be storing all my quotes on a separate JSON page?
Maulik Darji
@maulikdarji
Feb 27 2016 17:23
@ReductioAbsurdum You can store Quotes in an array, and display random quote from it
Matt Green
@mattxgreen
Feb 27 2016 17:24
@igor-sumonja So, what I'm thinking for the solution is to test the array for which indexes are valid moves, then generate a random number for that quantity of viable moves, and select that one
Llandy3d
@Llandy3d
Feb 27 2016 17:24
about the quote assignment, how does someone goes about obtaining quotes ?
CamperBot
@camperbot
Feb 27 2016 17:24
you need to ask about @someone!
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:24
@Llandy3d just google few...
@mattxgreen I will try that way, but still don't see what wrong with looping until it found empty one...
Matt Green
@mattxgreen
Feb 27 2016 17:28
function getValidMoves(){
  var valid=[];
  for (var i=0;i<boardState.length;i++){
    if(boardState[i] === 'E'){
      valid.push(i);
    }
  }
  return valid;
}
Llandy3d
@Llandy3d
Feb 27 2016 17:28
@igor-sumonja I'm pretty sure I would need to get quotes from an getjson request or similiar
Carlos Hernandez
@juancarloshg
Feb 27 2016 17:29
@Llandy3d do you know how to use those things? I am in the same challenge but I dont think the previous exercises helped much
Joseph Morse
@jnmorse
Feb 27 2016 17:29
@Llandy3d You can just create and a array of quotes to pull from, that is what I did
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:30
@Llandy3d no, just make an array, there is no such requirement in task that you must use API or JSON...
Dulshani Gunawardhana
@dshgna
Feb 27 2016 17:30
@mattxgreen more of a design question here, but what would be a good end case when the user decides to stop playing?
Pete
@petegarvin1
Feb 27 2016 17:31
hey all - let me know what you think of my wiki viewer please :D http://codepen.io/petegarvin1/full/JXjJrx/
Matt Green
@mattxgreen
Feb 27 2016 17:31
    validMoves = getValidMoves();
    move = Math.floor(Math.random() * validmoves.length );
    moveTO(validMoves[move])
@igor-sumonja That clear to ya?
Llandy3d
@Llandy3d
Feb 27 2016 17:32
@juancarloshg the excercise was nice to see how to receive data from another place, althou confusing I admit. but with some googling I will try to get the quotes from here http://forismatic.com/en/api/
Carlos Hernandez
@juancarloshg
Feb 27 2016 17:33
@Spacecamel100 im not sure how this is supposed to work, but if i write Spain for example, a lot of different things appear
Pete
@petegarvin1
Feb 27 2016 17:34
@juancarloshg thats the idea - search suggestions from what you have entered
Joseph Morse
@jnmorse
Feb 27 2016 17:35
@Spacecamel100 You may want to limit how often the api is queried, also if I hit enter after typing something in, I get the codepen error page
Pete
@petegarvin1
Feb 27 2016 17:35
then you click the one you are looking for
Maulik Darji
@maulikdarji
Feb 27 2016 17:35
@Spacecamel100 Direct search leads to 404 Error,
Pete
@petegarvin1
Feb 27 2016 17:35
@jnmorse ok will look into that
@jnmorse how would i limit how often it is queried?
gotta pop out - ill be back :D
Joseph Morse
@jnmorse
Feb 27 2016 17:37
@Spacecamel100 one way would be to use timestamps, and check if certain amount of time has passed before doing a new query
Matt Green
@mattxgreen
Feb 27 2016 17:38
@igor-sumonja Oh, and to answer your question as to why not do the while loop... you open the door for infinite loops, and in theory your random number COULD never hit a valid square. It will definately run more than once per turn often, and that is inefficient code
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:39
@mattxgreen thanks will try to adjust it with your idea of using array of free cells
CamperBot
@camperbot
Feb 27 2016 17:39
igor-sumonja sends brownie points to @mattxgreen :sparkles: :thumbsup: :sparkles:
:warning: igor-sumonja already gave mattxgreen points
Matt Green
@mattxgreen
Feb 27 2016 17:39
@igor-sumonja you could compare it to the same problem on a larger scale of: generate lottery tickets until I get last nights winning number
@igor-sumonja You did get the code, right?
Carlos Hernandez
@juancarloshg
Feb 27 2016 17:41
@Spacecamel100 what i meant is that writting Spain I would get all the different things, but not Spain :P anyway thats a minor thing
Igor Šumonja
@igor-sumonja
Feb 27 2016 17:42
@mattxgreen I thin
validMoves = getValidMoves(); // check for valid position ??
move = Math.floor(Math.random() * validmoves.length );  //  not sure why you are doing math random with length of array ??
moveTO(validMoves[move])  // moves to new position ??
Matt Green
@mattxgreen
Feb 27 2016 17:42
@igor-sumonja sent privately
Dulshani Gunawardhana
@dshgna
Feb 27 2016 17:49
@mattxgreen: small q. So in the player_turn I want to check it the player makes his move before continuing. I was thinking of using a variable for this, but is there a better way?
Llandy3d
@Llandy3d
Feb 27 2016 17:53
can someone check this simple code and point out my mistake ? for some reason it's not showing the text http://codepen.io/Llandy3d/pen/XdWaZW
Dulshani Gunawardhana
@dshgna
Feb 27 2016 17:55
@Llandy3d Have you checked the structure of the data returned?
Llandy3d
@Llandy3d
Feb 27 2016 17:57
@dshgna in the browser it's a json, I'm trying to stringify it to see what I receive on the page, but the 'hello' p doesn't change
Dulshani Gunawardhana
@dshgna
Feb 27 2016 18:00
@Llandy3d you haven't included Jquery. getJSON is a jquery function
Llandy3d
@Llandy3d
Feb 27 2016 18:03
@dshgna you are right, silly mistake. Althou it still doesn't show/change anything mmm
Dulshani Gunawardhana
@dshgna
Feb 27 2016 18:05
@Llandy3d are you getting the data into the browser? log it on the console and see
you don't need to use JSON.stringify bdw
Llandy3d
@Llandy3d
Feb 27 2016 18:08
@dshgna ok the line I get is strange "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. (Reason: CORS header 'Access-Control-Allow-Origin' missing)."
Andrew Charlebois
@andrewchar
Feb 27 2016 18:11
Dulshani Gunawardhana
@dshgna
Feb 27 2016 18:11
@Llandy3d ah...cross origin requests are thrown when you try to access a different domain than you are currently in. You can use jsonp as a solution
http://oscargodson.com/posts/unmasking-jsonp.html
Pete
@petegarvin1
Feb 27 2016 18:23
@juancarloshg haha thanks - minor, but also quite major :D
CamperBot
@camperbot
Feb 27 2016 18:23
spacecamel100 sends brownie points to @juancarloshg :sparkles: :thumbsup: :sparkles:
:star: 280 | @juancarloshg | http://www.freecodecamp.com/juancarloshg
Llandy3d
@Llandy3d
Feb 27 2016 18:23
@dshgna do you think this is supposed to be so complicated ?
Dulshani Gunawardhana
@dshgna
Feb 27 2016 18:24
@Llandy3d it isn't. you have to just change your url a bit
Llandy3d
@Llandy3d
Feb 27 2016 18:24
@dshgna what do you mean with that ?
h4r1m4u
@h4r1m4u
Feb 27 2016 18:25
@Llandy3d change it to this: http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?
then read the wiki article on JSONP to understand what it is and how it works: https://en.wikipedia.org/wiki/JSONP
Dulshani Gunawardhana
@dshgna
Feb 27 2016 18:26
@Llandy3d: as @h4r1m4u said
h4r1m4u
@h4r1m4u
Feb 27 2016 18:26
it's very common and you'll need to use with APIs for the other challenges to avoid the cross-domain request issue
Llandy3d
@Llandy3d
Feb 27 2016 18:27
@h4r1m4u , @dshgna thanks a lot it's working, onto reading now, I felt bad seeing that I would have had to create a callback for the jsonp and so on, but knowing it's not needed is a relief
CamperBot
@camperbot
Feb 27 2016 18:27
llandy3d sends brownie points to @h4r1m4u and @dshgna :sparkles: :thumbsup: :sparkles:
:star: 193 | @dshgna | http://www.freecodecamp.com/dshgna
:star: 1489 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 18:29
@Llandy3d usually adding callback=? into the URL does the trick (it's sort of a standard way to do it). the forismatic API is a little different and needs the jsonp=something parameter. each API is different, so make sure that you read the docs to understand how to use it.
(and no problem, you're most welcome)
Jeremy
@jer244
Feb 27 2016 18:30
Does anyone have a suggestion of a site to store images that you are referencing in your code?
h4r1m4u
@h4r1m4u
Feb 27 2016 18:30
@jer244 dropbox is the best. alternatively http://postimage.org
Jeremy
@jer244
Feb 27 2016 18:31
@h4r1m4u thank you.
CamperBot
@camperbot
Feb 27 2016 18:31
jer244 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1490 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 18:31
np
mjqblade
@mjqblade
Feb 27 2016 18:54
can anyone help in challenge #Ditch Custom CSS for Bootstrap
arrowoodgw
@arrowoodgw
Feb 27 2016 19:00
Hi, I am working on the random quote generator and need some help. When I click the button I have designated to produce a random quote, it works. But it only works the first time. How do I get the function to reset? And how should I go about getting help? Post the code?
mjqblade
@mjqblade
Feb 27 2016 19:00
idk
arrowoodgw
@arrowoodgw
Feb 27 2016 19:01
$('#launch').click(function() {
var rand = Math.floor((Math.random() * quotes.length) + 1)
$('.quote_form p').replaceWith(quotes[rand]);
});
that's my code
h4r1m4u
@h4r1m4u
Feb 27 2016 19:03
@arrowoodgw change this $('.quote_form p').replaceWith(quotes[rand]); to $('.quote_form p').text(quotes[rand]);
what you're doing right now is replacing the entire element with your quote, so the consequent clicks can't locate it in the DOM anymore
the .text() method will change only its text
arrowoodgw
@arrowoodgw
Feb 27 2016 19:05
ahhh ok. let me try really quic
quick
That worked!
Such an easy change as well.
How do I give you some sort of credit for helping?
h4r1m4u
@h4r1m4u
Feb 27 2016 19:07
explain brownie points
CamperBot
@camperbot
Feb 27 2016 19:07

:point_right: brownie points [wiki]

The number beside your picture on Free Code Camp tells you how many Brownie Points you have.

A user profile picture next to a with Brownie Points score

There are three ways you can get Brownie Points:

  1. Complete challenges - you get one point per challenge you complete
  2. Post relevant links on Camper News - you get 1 point for posting a link, and another point for each upvote your link gets
  3. Help other campers in chat - each time you help another camper and they thank you (by typing "thanks @yourname"), you will get a point

Brownie Points help you look like the kind of person who codes a lot, shares relevant links, and helps people.

They also add to your Streak.
:pencil: read more about brownie points on the FCC Wiki

h4r1m4u
@h4r1m4u
Feb 27 2016 19:07
:thumbsup:
arrowoodgw
@arrowoodgw
Feb 27 2016 19:07
thanks @h4r1m4u
CamperBot
@camperbot
Feb 27 2016 19:07
arrowoodgw sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1491 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 19:07
no problem :)
arrowoodgw
@arrowoodgw
Feb 27 2016 19:07
:smile:
Jeremy Roe
@jeremyroe
Feb 27 2016 19:08
Anyone have a moment to look over my weather code? I’m working on my JSONP request but not getting data back and not quite sure what I’m missing. http://codepen.io/jeremyroe/pen/qbzVRO?editors=0010
h4r1m4u
@h4r1m4u
Feb 27 2016 19:11
@jeremyroe you're missing http:// at the beginning of the API URL
Dulshani Gunawardhana
@dshgna
Feb 27 2016 19:11
Any hints on how to get the lightening effect in Simon Game? @h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 19:11
if you omit it, it'll be relative to the domain you're on, i.e. codepen
@dshgna any particular aspect of it?
Dulshani Gunawardhana
@dshgna
Feb 27 2016 19:12
@h4r1m4u I can't figure out how to get it to lighten up
Jeremy Roe
@jeremyroe
Feb 27 2016 19:12
interesting - I didn’t realize JS handled it that way - Thanks @h4r1m4u
CamperBot
@camperbot
Feb 27 2016 19:12
jeremyroe sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1492 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 19:13
@jeremyroe it's not just JS. HTML as such works the same way
@dshgna it's just a CSS change. on hover you make the background a different color
Jeremy Roe
@jeremyroe
Feb 27 2016 19:13
I see - My background is IT where it’s a fully qualified domain is handled as such - will have to change that habit. I’ve changed that though and still don’t seem to be getting any data
h4r1m4u
@h4r1m4u
Feb 27 2016 19:14
depending on how your HTML is structured you can use the :hover pseudoclass @dshgna
Dulshani Gunawardhana
@dshgna
Feb 27 2016 19:14
@h4r1m4u oh! yes I can manage with hover
thanks @h4r1m4u
CamperBot
@camperbot
Feb 27 2016 19:14
dshgna sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1493 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 19:14
@dshgna np!
Lena
@ychamanova
Feb 27 2016 19:14

function multiplyAll(arr) {
var product = 1;
// Only change code below this line

for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++)
product = console.log(arr[i][j]);

}
// Only change code above this line
return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);

Dulshani Gunawardhana
@dshgna
Feb 27 2016 19:14
is it just because I'm at the start, but is simon game actually easier than tic-tac-toe?
Lena
@ychamanova
Feb 27 2016 19:15
could someone tell me how to assign that value to product?
please
i havent been coding for awhile and now i dont remember...
h4r1m4u
@h4r1m4u
Feb 27 2016 19:16
@jeremyroe i'm not entirely sure because i don't geolocation enabled in my browser, but i think the first if should be if (navigator.geolocation) { rather than if("geolocation" in navigator) {
Bruce Young
@mutantspore
Feb 27 2016 19:16
@jeremyroe the getjson has to be inside the geolocate or at least called from inside.
sorry.. .ajax
h4r1m4u
@h4r1m4u
Feb 27 2016 19:16
oh yes, that as well as the geolocation is async
Jeremy Roe
@jeremyroe
Feb 27 2016 19:17
hmm ok - I’ll give it a try - My apiurl seems to be spitting out to console with the latitutde and longitude just fine though which is occurring before my api request
Jeremy Roe
@jeremyroe
Feb 27 2016 19:17
That did fix it though
thanks @mutantspore @h4r1m4u
CamperBot
@camperbot
Feb 27 2016 19:17
jeremyroe sends brownie points to @mutantspore and @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: jeremyroe already gave h4r1m4u points
:star: 1181 | @mutantspore | http://www.freecodecamp.com/mutantspore
h4r1m4u
@h4r1m4u
Feb 27 2016 19:18
@dshgna i probably found the tic tac toe easier - except the minimax AI, that was a pain in the butt
np @jeremyroe
@ychamanova what's that function supposed to do?
Bruce Young
@mutantspore
Feb 27 2016 19:19
@jeremyroe you can wrap the ajax call in a function and call it from the geolocate … looks neater
Lena
@ychamanova
Feb 27 2016 19:19
@h4r1m4u multiply the insides of arrays all by each other and produce result
Jeremy Roe
@jeremyroe
Feb 27 2016 19:19
Good idea @mutantspore
Lena
@ychamanova
Feb 27 2016 19:20
Modify function multiplyAll so that it multiplies the product variable by each number in the sub-arrays of arr
h4r1m4u
@h4r1m4u
Feb 27 2016 19:20
@ychamanova so product * 1 * 2 * 3 * 4 * 5 * 6 * 7?
Lena
@ychamanova
Feb 27 2016 19:20
yeah
Kevin Han
@kevhan94
Feb 27 2016 19:22
Hi can someone please look at my Twitch API code
for some reason, my "get stream" button, only returns freecodecamp's info
h4r1m4u
@h4r1m4u
Feb 27 2016 19:22
@ychamanova ok. in that case something like this should work:
for (var i = 0; i < arr.length; i++) {
   for (var j = 0; j < arr[i].length; j++) {
     product = product * arr[i][j];
  }
}
Kevin Han
@kevhan94
Feb 27 2016 19:22
and no other channels from the array
Lena
@ychamanova
Feb 27 2016 19:25
thanks @h4r1m4u
CamperBot
@camperbot
Feb 27 2016 19:25
ychamanova sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1494 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Bruce Young
@mutantspore
Feb 27 2016 19:28
@kevhan94 try using .forEach instead of for loop.
Andrew Grabarnick
@leprekon91
Feb 27 2016 19:30
function myReplace(str, before, after) {
  str.replace(before,after);
  return str;
}
why is the replace function won't replace?
h4r1m4u
@h4r1m4u
Feb 27 2016 19:34
@leprekon91 .replace() doesn't change the string in place. it returns a new string instead. so you need to save the result of the .replace method into a variable
Andrew Grabarnick
@leprekon91
Feb 27 2016 19:36
@h4r1m4u ohh ok thx
CamperBot
@camperbot
Feb 27 2016 19:36
leprekon91 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1495 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Johnathon Sykes
@seesykescode
Feb 27 2016 19:45

OK, I need a bit of help on my Weather App, Trying to pass my coordinates into the my JSON request but it doesn't seem to be passing when I use my button to get the jSON results. If I console.log it, it passes the correct URL and I can copy and paste that into my browser. So I feel like the URL I built was good but....sorta at a loss.

Here's my pen...

http://codepen.io/johndsykes86/pen/dMyXLo/

Andrew Grabarnick
@leprekon91
Feb 27 2016 19:49
@johndsykes86 "//" before the "api.w..."
h4r1m4u
@h4r1m4u
Feb 27 2016 19:50
@johndsykes86 two things. a) you need to use http:// at the beginning of the URL, b) you're adding single quotes at the beginning and end of the URL
Johnathon Sykes
@seesykescode
Feb 27 2016 19:50
ughhh facepalm
Thanks @leprekon91
CamperBot
@camperbot
Feb 27 2016 19:50
johndsykes86 sends brownie points to @leprekon91 :sparkles: :thumbsup: :sparkles:
:star: 295 | @leprekon91 | http://www.freecodecamp.com/leprekon91
Johnathon Sykes
@seesykescode
Feb 27 2016 19:51
@h4r1m4u I couldn't figure out how to pass double quotes and passing singles seemed to work if i specifically define the URL.
h4r1m4u
@h4r1m4u
Feb 27 2016 19:52
@johndsykes86 why do you need to pass it quotes?
your URL looks like this: 'http://api.openweathermap.org/data/2.5/weather....'
which won't work
Johnathon Sykes
@seesykescode
Feb 27 2016 19:53
i found if I didn't it didn't pull into the JSon request but now that I have some suggestions, ill try it without...
h4r1m4u
@h4r1m4u
Feb 27 2016 19:53
(regardless of whether they're single or double quotes)
when you wrap something in quotes, it's already a string, e.g. var a = "something";. you don't need to add extra quotes to it, i.e. var a = "'" + "something" + "'"; this will set the value of a to 'something' instead of just something
Johnathon Sykes
@seesykescode
Feb 27 2016 19:57
ok cool. Thanks.
thanks @h4r1m4u
CamperBot
@camperbot
Feb 27 2016 19:57
johndsykes86 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1496 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 27 2016 19:58
np
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:15

Working on my Wikipedia viewer...which of these is the better method:
Build up a complicated variable that adds html tags as we go along within the $.getJSON and change the html to that variable at the end, such as:

var searchResults = “<a href=\”” + data[][] + “\” target=_blank class=”result”><h1>” + data[][] + “</h1>”
$("#searchResults").html(searchResults);

OR
lay out my HTML elements that way I want them to be beforehand and give each a specific id and then keep going $("#specificID").html();

<div id="searchResults" class="container-fluid">
  <a id="firstLink" href="#" target="_blank" class="result">
    <h1 id="firstTitle"></h1>
    <p id="firstDescrip></p>
  </a>

  <a id="secondLink" href="#" target="_blank" class="result">
    <h1>canucks flames rivalry</h1>
    <p></p>
  </a>

//etc...//
</div>
Himad Mouhtar
@hmouhtar
Feb 27 2016 20:16
This message was deleted
need help with this, the red container..on resize of my broswer window there is too much space on the left and right side
how do i make it keep its aspect ratio?
sorry let me reword..on resize of the window, container should shrink but there shouldn't be so much left and right white space
how do i fix that?
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:21

@max77p first of all, you have height set as VW, which stands for view width so that won't work. Make height=xVH and width=xVW

x being whatever number you want between 0 and 100

@max77p try height: 90vh; and width: 75vw;
max77p
@max77p
Feb 27 2016 20:23
@amirghafouri ahh ok...but regardless if I resize the window a little smaller, there is white space between the red and the window edge
what i want to accomplish is reduce that white space as much as possible..but padding doesn't seem to work
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:25
if you don't want white space then set it to 100vw?
Dave
@db001
Feb 27 2016 20:25
help steamroller
CamperBot
@camperbot
Feb 27 2016 20:25

:point_right: algorithm steamroller [wiki]

Explanation:

This problem seems simple but you need to make sure to flatten any array, regardless of the level which is what adds a bit of difficulty to the problem.

:pencil: read more about algorithm steamroller on the FCC Wiki

max77p
@max77p
Feb 27 2016 20:27
@amirghafouri if i set it to 100vw then the red covers the entire page. I don't want that, i want to keep the red container 50% of the page, but in center. But when i resize, it adjusts so that i don't get so much white space to the left and right
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:29
so you want it 50% when using a desktop screen but like 80% when using a mobile phone?
max77p
@max77p
Feb 27 2016 20:32
@amirghafouri yes, but i think i know how to accomplish this through media querie, but i am resizing on my desktop screen..but wondering if there is simpler way of making it produce this effect
similar to what happens with http://codepen.io/FreeCodeCamp/full/wMQrXV/
Jacob Schumer
@jacobschumer
Feb 27 2016 20:34
What's vw's relationship to percent? Sorry for jumping in
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:35
@max77p yeah you can use media queries but there's a simply way with bootstrap grid system. Set your container min-height: 100vh; but get rid of width and margin. Go back and look over the bootstrap lessons, you can add classes directly to your element for centering and size on different devices (ie. col-xs-10 col-md-6)
max77p
@max77p
Feb 27 2016 20:36
@amirghafouri ahh ok, yea bootstrap was my other option. I was curious if this could be accomplished with simple margin/padding/position attributes, but i guess not eh? I'll just do bootstrap
MonkeyMaster64
@MonkeyMaster64
Feb 27 2016 20:36
Hi, I am building a webspafe but I'm having some issues with the header
like some one-on-one time?
can anyone offer me some personal help?
I feel like talking in the group about this would get confusing
soooooo....anyone up for it?
Tyler Moeller
@TylerMoeller
Feb 27 2016 20:38
@max77p try this:
.container{
  background-color:red;
  width:50%;
  padding-bottom: 50%;
  margin-left: 25%; /* if you want it centered */
}
MonkeyMaster64
@MonkeyMaster64
Feb 27 2016 20:38
@OmranAbazid ???
you leave the convo?
max77p
@max77p
Feb 27 2016 20:40
@TylerMoeller yea even on resize there is too much white space left and right...so i guess i am going to have to go the media querie or bootstrap route
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:40

@max77p it definitely can be accomplished without bootstrap, I think like this

@media only screen and (max-width: 768px) {
    container {
        width: 80vw;
    }
}

This isn't working but it should be something like this

Tyler Moeller
@TylerMoeller
Feb 27 2016 20:41
@max77p You can adjust the percentages to reduce white-space
.container{
  background-color:red;
  width:90%;
  padding-bottom: 90%;
  margin-left: 5%; /* if you want it centered */
}
But maybe I'm not understanding what you're trying to do :)
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:43
@TylerMoeller he wants different amounts of white space on different size screens
see this guys, open in your browser, full screen it, there is whitespace between the grey container in the middle..which is fine on full screen...but slowly start to resize it to smaller sizes and see how the container adapts
that is exactly what i want to figure out without looking at the code lol
Amir Ghafouri
@amirghafouri
Feb 27 2016 20:45
@max77p just give your container bootstrap col sizes...
max77p
@max77p
Feb 27 2016 20:45
@amirghafouri hey the media querie works as well! thanks! but yea bootstrap would be another way to accomplish this, i am going to try that as well to get a better understanding
CamperBot
@camperbot
Feb 27 2016 20:45
max77p sends brownie points to @amirghafouri :sparkles: :thumbsup: :sparkles:
:star: 263 | @amirghafouri | http://www.freecodecamp.com/amirghafouri
Josiah Anderson
@Josiahdanderson
Feb 27 2016 20:48
Hi all! I'm working on the "Build a Personal Portfolio" challenge right now. I wanted to know from anyone who has completed it if in their experience most of the info you find to complete the challenge is found from external sources. In other words, in order to complete this challenge you had to do a lot of googling and were not able to find all the info you needed here of FCC.
Jeremy
@jer244
Feb 27 2016 20:49
@Josiahdanderson For what it's worth, I'm in the process of working on it and I'm doing a ton of reading of external sources...
max77p
@max77p
Feb 27 2016 20:50
@Josiahdanderson absolutely. The thing about FCC is that it gives you the guidelines, the key points. So for instance you might be reading along on FCC and say you see "margin" this and margin that. Its up to you to google that and learn indepth about it so you have a solid understanding then move on to the next section
Use FCC as a guide and use google to dig deeper
thats how I did my portfolio page...also ask a tonne of questions
on stack and here.
Josiah Anderson
@Josiahdanderson
Feb 27 2016 20:52
@max77p @jer244 thanks! Alright awesome. Just wanted to make sure I was having the same experience as others.
CamperBot
@camperbot
Feb 27 2016 20:52
josiahdanderson sends brownie points to @max77p and @jer244 :sparkles: :thumbsup: :sparkles:
:star: 313 | @max77p | http://www.freecodecamp.com/max77p
:star: 132 | @jer244 | http://www.freecodecamp.com/jer244
Amir Ghafouri
@amirghafouri
Feb 27 2016 21:03
$("#elementID").html("<p>something</p>");
replaces everything in the element with <p>something</p>, how can we add to the element without replacing/overwriting everything that's already there? Is there anything like this:
$("#elementID").html.add("<p>something</p>");
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:19
@amirghafouri I think you're after .append(), read jQuery docs here
RickWisneske
@rwisneske
Feb 27 2016 21:26
I have bootstrap animated navbar-toggle burger icon and it seems the default state isn't the burger icon but the "X" icon. Can anyone take a look and tell me what I'm doing wrong?
http://codepen.io/rwhiskey/pen/ZQZRpM
Llandy3d
@Llandy3d
Feb 27 2016 21:29
Hey, I finished the random quote generator assignment, some feedback would be really appreciated! http://codepen.io/Llandy3d/full/XdWaZW/
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:29
@rwisneske your css is doing that. If you don't want that behavior remove this entire section /* nav-toggle icon transition*/ from your css
RickWisneske
@rwisneske
Feb 27 2016 21:33
@MattYamamoto I want to use the animated navbar-toggle. Do I look into the "transform-orgin" to have the burger nav icon be the default?
Kevin Han
@kevhan94
Feb 27 2016 21:33
Hey guys, I'm at another stuckpoint with the Twitch API, I'm trying to change the visibility of certain streams via Tabs, and the css isn't working for some reason, after I press "get streams", I cant change the visibility of the streams, can someone please help
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:34
@Llandy3d can't say I love the color scheme... but that's a personal thing. My only real critique would be of your use of bootstrap. You're giving your .quote-div a fixed width, which kind of goes against the whole point of using bootstrap. Got to a small sreen size and you'll see it doesn't work so well. You could get rid of the width and use col-sm-4, but I guess it depends on what you are after.
@rwisneske oh, I totally misunderstood what you were after. It's an "x" initially when it should be bars. gotcha.. hang on and I'll take a look
@rwisneske just add collapsed to the button's class so it knows its initial state.
Llandy3d
@Llandy3d
Feb 27 2016 21:40
@MattYamamoto yap, my bad for setting the width while I set a col-md-4 for that, I just needed the height, thanks for pointing it out, I'm not a fan of the color scheme either, but my time is limited so I prefer something acceptably looking and fully working than spending time on making it pretty =p
CamperBot
@camperbot
Feb 27 2016 21:40
llandy3d sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 927 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Kevin Han
@kevhan94
Feb 27 2016 21:46
Please help anyone someone
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:46
@kevhan94 so what are you stuck on? I think you had some issues with your updateList function, but I think you've fixed them... except it should be json._links, though you're only logging that.
Thats what I have right now
My form is updating with the status of the channels as expected
but
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:48
I know, I have your pen, I was just confused on your question...but I think I understand now.
Kevin Han
@kevhan94
Feb 27 2016 21:48
I set the classes to "Online or "Offline"
so that I can toggle hidden/visible
with another button via $(selector).css("visibility, "something);
but its not working
$('#Online').click(function(){
$(".Offline").css("visibility","hidden");
});
that should hide all the divs with the class "Offline" when I press the button
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:50
@kevhan94 in the string that sets the html for each channel you are trying to escape a character that doesn't need to be escaped. Just do this instead .append("<div class='Offline'>Offline </div>");
Rj Ingram
@RjMaJay
Feb 27 2016 21:50
RickWisneske
@rwisneske
Feb 27 2016 21:51
@MattYamamoto thanks!
CamperBot
@camperbot
Feb 27 2016 21:51
rwisneske sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 928 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Kevin Han
@kevhan94
Feb 27 2016 21:51
@MattYamamoto OO ok thanks that fixed it though im not sure why, I thought if you do /' /' that would show as "class = 'something'"
CamperBot
@camperbot
Feb 27 2016 21:51
kevhan94 sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 929 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
Matt Yamamoto
@MattYamamoto
Feb 27 2016 21:56
@kevhan94 well, you only need to escape the quotes if they're the same quotes you use to enclose your string. so " this quote \" would need to be escaped, but this one ' wouldn't" or if you use the opposite enclosing qutoes ' this quote \' would need to be escaped, but this one " wouldn't'
which is convenient since you can just use the opposite style inside the other without having to worry about escaping them
echeon
@echeon
Feb 27 2016 22:04
I am currently working on tic tac toe project. And, I can’t find a way to make the computer wait until the human plays. I’ve been googling but nothing seems to work so far. Anyone any idea?
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:05
@echeon could you use a global var to hold the state? like playerTurn = true
echeon
@echeon
Feb 27 2016 22:08
@MattYamamoto So, you mean I should be running while loop indefinitely until next user input? That might work, I guess. I will try.
RickWisneske
@rwisneske
Feb 27 2016 22:08
@MattYamamoto How would I make all the icon-bars white at the same time on hover? Right now they only hover to white individually. Should I add another div class inside the <button>?
http://codepen.io/rwhiskey/pen/ZQZRpM?editors=1100
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:09
@echeon I mean, it just depends on how you have it all set up. Why no just have the last part of the user's click event just trigger the computers function, which should then just check that global var to see if it's okay to go, or if the player is still in the middle of their turn.
Mark Carpenter Jr
@mcarpenterjr
Feb 27 2016 22:10
Setup the background prop to change on hover
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:11
@rwisneske just fyi I don't see that effect in firefox, but I do in chrome.
echeon
@echeon
Feb 27 2016 22:12
@MattYamamoto I see what you mean. THanks! I will try that.
CamperBot
@camperbot
Feb 27 2016 22:12
echeon sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 930 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
RickWisneske
@rwisneske
Feb 27 2016 22:16
@MattYamamoto Ah I see. I'm using chrome. I'll look into it. Thanks!
CamperBot
@camperbot
Feb 27 2016 22:16
rwisneske sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:warning: rwisneske already gave mattyamamoto points
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:16
@rwisneske try this css selector .navbar-inverse .navbar-toggle:hover .icon-bar
RickWisneske
@rwisneske
Feb 27 2016 22:17
@MattYamamoto cool I'll try that.
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:17
that will capture the hover on the whole toggle and then affect each bar... I think
Dan Stockham
@DanStockham
Feb 27 2016 22:17
Why is it my win modal isn't showing? http://codepen.io/DanStockham/pen/LGobvp?editors=0010
RickWisneske
@rwisneske
Feb 27 2016 22:17
@MattYamamoto Yep did the trick! Thanks!
CamperBot
@camperbot
Feb 27 2016 22:17
rwisneske sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:warning: rwisneske already gave mattyamamoto points
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:19
@DanStockham I get the "It's a draw" alert before the game is over.
Dan Stockham
@DanStockham
Feb 27 2016 22:19
@MattYamamoto Try it now.
Travis Boss
@travisboss
Feb 27 2016 22:22
@DanStockham it does not stat if you won or lost nor can you start over after.
Dan Stockham
@DanStockham
Feb 27 2016 22:23
@travisboss That's my problem. I don't know why the modal isn't popping up.
But I am now realizing the AI() is still playing even though I won.
That maybe the reason why I just get a darkened screen and no modal.
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:24
@DanStockham you're missing a closing html comment tag at line 31 and 46
er.. not tag, rather you're not closing the comment
and fix line 32 too, don't have --!>, use --> only there.
Dan Stockham
@DanStockham
Feb 27 2016 22:26
I got rid of them altogether.
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:28
@DanStockham and to prevent the AI from going after the player wins, just exit the function after the modal shows.
Dan Stockham
@DanStockham
Feb 27 2016 22:31
Now the issue is after the win modal pops up, you click "Play Again" the modal pops up again.
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:38
@DanStockham line 36, you have the wrong selector there. I think you want $('#win')
Dan Stockham
@DanStockham
Feb 27 2016 22:39
@MattYamamoto That actually puts an event listener for the play again button when the win modal pops up.
Amir Ghafouri
@amirghafouri
Feb 27 2016 22:40
@MattYamamoto for the wikipedia viewer, should I use lots of different jquery appends, or just build up a variable with the information I want and do it all at once at the end?
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:40
@DanStockham ? you don't have a modal with an ID of startOver
Dan Stockham
@DanStockham
Feb 27 2016 22:41
@MattYamamoto ... Oops, I feel silly.
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:42
@amirghafouri I assume all the info comes from one API call... in that case I'd only append once, it's more efficient that way since the DOM doesn't have to keep changing.
Amir Ghafouri
@amirghafouri
Feb 27 2016 22:44
@MattYamamoto and it's okay to have messy loops and stuff where we add literal html tags in between data from the api?
Matt Yamamoto
@MattYamamoto
Feb 27 2016 22:45
yeah... I don't see why not. I'm not sure what the strucutre of the returned data looks like so it's hard to suggest the best approach, but a loop would be fine.
Amir Ghafouri
@amirghafouri
Feb 27 2016 22:46
Thanks
Travis Boss
@travisboss
Feb 27 2016 23:11
@DanStockham did you get it to work?
Dan Stockham
@DanStockham
Feb 27 2016 23:11
@travisboss Yeah, everything is working smoothly now.
@travisboss @MattYamamoto thanks
CamperBot
@camperbot
Feb 27 2016 23:11
danstockham sends brownie points to @travisboss and @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 931 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
:star: 272 | @travisboss | http://www.freecodecamp.com/travisboss
wlawler
@wlawler
Feb 27 2016 23:12
Hey guys, I having trouble getting my CSS to turn my h2 elements blue can anyone help me out here
<style>
h2 {color: blue;}
</style>
Alex Dobre
@Zerelt
Feb 27 2016 23:12
you're changing the font-color in the h2 like that
not the background (if that's what you wanted)
wlawler
@wlawler
Feb 27 2016 23:13
the challenge is wanting me to make the font color of h2 elements blue, I thought I was doing that but the test are saying that I'm not
Alex Dobre
@Zerelt
Feb 27 2016 23:14
what challenge is that ?
Kevin Han
@kevhan94
Feb 27 2016 23:15
Hey guys, for those who finished the Twitter API zipline, you have to make two API calls right?
One to check the status of the stream
and One to get the channels Info
Alex Dobre
@Zerelt
Feb 27 2016 23:15
you mean twitch zipline
wlawler
@wlawler
Feb 27 2016 23:15
the 9th challenge HTML5 & CSS section
Alex Dobre
@Zerelt
Feb 27 2016 23:15
yeah i made 2 calls
Kevin Han
@kevhan94
Feb 27 2016 23:15
oh yeah
ok
Dan Stockham
@DanStockham
Feb 27 2016 23:16
Working a lot better now.
The only issue I have is the pieces switching players after a win. But I can make a quick fix for that.
Alex Dobre
@Zerelt
Feb 27 2016 23:16
did you remove the style attribute from your h2 element ? @wlawler
i mean did you remove this : "style="color: red"
from the h2 tag
because that takes precedence over your style so it stays red if it's there
Lanitta
@DivaWeb
Feb 27 2016 23:22
switch (val){
case "a":
answer = "apple";
break;
case "b":
answer = "bird";
break;
case "c":
answer = "cat";
break;
default:
    answer = "stuff";
wlawler
@wlawler
Feb 27 2016 23:23
@Zerelt yes, the style attribute was removed
wlawler
@wlawler
Feb 27 2016 23:26
got it
bitgrower
@bitgrower
Feb 27 2016 23:27
@DivaWeb -- looks good to me ... you may need to reload the page, reboot your browser and/or clear your browser cache ...
Alex Dobre
@Zerelt
Feb 27 2016 23:28
@DivaWeb no .. you have to change one thing in the very last line
bitgrower
@bitgrower
Feb 27 2016 23:28
actually, I just got an error message when I tried to run it ... you should be getting the same error message
Alex Dobre
@Zerelt
Feb 27 2016 23:28
myTest(1) instead of myTest(a)
Lanitta
@DivaWeb
Feb 27 2016 23:29
@Zerelt lol I just tried that and I am not sure why that made a differnerence
Alex Dobre
@Zerelt
Feb 27 2016 23:29
also if you want to test for a b c etc
you have to put them as Strings
myTest('a')
bitgrower
@bitgrower
Feb 27 2016 23:30
when the parser sees an undefined symbol, it looks it up ... a is a symbol & it has no value
Alex Dobre
@Zerelt
Feb 27 2016 23:30
that made a diference because you had to modify that last line like the comment above it said .. since 1 is not a test case
it returned the default
Lanitta
@DivaWeb
Feb 27 2016 23:30
@Zerelt OMG really !!!! lolo
@Zerelt hey thanks a lot because I was racking my brain to make sure the code was correct lololo
CamperBot
@camperbot
Feb 27 2016 23:32
divaweb sends brownie points to @zerelt :sparkles: :thumbsup: :sparkles:
:star: 375 | @zerelt | http://www.freecodecamp.com/zerelt
bitgrower
@bitgrower
Feb 27 2016 23:32
did you not get this error message, @DivaWeb ... "ReferenceError: a is not defined" ?
Lanitta
@DivaWeb
Feb 27 2016 23:35
@bitgrower well I wasn't getting it at first. I was getting the bottom half of the assignment correct but it would not check off the rest of it
bitgrower
@bitgrower
Feb 27 2016 23:36
error messages are your friends ... :) but deciphering them can be an art ...
Lanitta
@DivaWeb
Feb 27 2016 23:36
@bitgrower if I had been getting one that would had been great
bitgrower
@bitgrower
Feb 27 2016 23:38
it shows up in the little black strip right above your test cases ... you might want to put the a back in there so you can see what to look for & where -- in the future
Lanitta
@DivaWeb
Feb 27 2016 23:39
@bitgrower it wasn't there it was checking off half of the items and then nothing else
bitgrower
@bitgrower
Feb 27 2016 23:40
well ... it's kinda hard to go back & duplicate history ... all I'm trying to do is to help you know where to look in the future ...
Lanitta
@DivaWeb
Feb 27 2016 23:49
@bitgrower I am just glad to get if figured lol it was making me bonkers lol
Matthew Bailin
@mdbailin
Feb 27 2016 23:50
Hi guys I'm trying to get my "C_button" to change the temp to C
and right now I just want to make sure the "newTemp" var is working, but for some reason the alert method isn't pulling anything up
this is what I have
bitgrower
@bitgrower
Feb 27 2016 23:51
well consider this anti-bonkers prevention medicine ... :) congrats on getting it figured out ...
Matthew Bailin
@mdbailin
Feb 27 2016 23:51
$("#C_Button").on("click", function(){
var newTemp = parseInt(data.main["temp"]*273.15);
var newTempName = "C";
$('#tempRow').html('');
alert(newTemp);
Lanitta
@DivaWeb
Feb 27 2016 23:54
@bitgrower right lol