These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Jul 2016
Michael Bomholt
@bomholtm
Jul 03 2016 00:05
hey i really would appreciate if someone from america could test if my °F / °C toggle is working for them https://s.codepen.io/bomholt/debug/zqgoOe
for you the "app" should display °F on itstelf and then toggle between °F and °C
Bruce Young
@mutantspore
Jul 03 2016 00:10
@bomholt yes it does that for me
Michael Bomholt
@bomholtm
Jul 03 2016 00:12
@mutantspore thanks =)
CamperBot
@camperbot
Jul 03 2016 00:12
bomholt sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1737 | @mutantspore |http://www.freecodecamp.com/mutantspore
jake-thewoz
@jake-thewoz
Jul 03 2016 00:16
@bomholt Nice! I had trouble using forecast.io on mine, so I switched to a different one. Great design! You might want to make it so that it changes the weekly forecast to celsius/farenheit when you change it on the current temp.
Michael Bomholt
@bomholtm
Jul 03 2016 00:18
@jake-thewoz hahaha totally forgot about that -_- thanks ^^
CamperBot
@camperbot
Jul 03 2016 00:18
bomholt sends brownie points to @jake-thewoz :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @jake-thewoz |http://www.freecodecamp.com/jake-thewoz
Michael Bomholt
@bomholtm
Jul 03 2016 00:19
need to change and improve some thing still and that is one for sure haha
Randy Goldsmith
@Dueldrawer8
Jul 03 2016 00:53
function rot13(str) {
     var newString = "";
  for(var i = 0; i < str.length; i++){
     newString += str.charCodeAt(i);
     if(newString[i] < 65 || newString[i] > 90){
        return String.fromCharCode(newString[i]);
      }
      else if(newString[i] < 78){
        return String.fromCharCode(newString[i] + 13);
      }
      else{
          return String.fromCharCode(newString[i] - 13);
        }

    }
} //function
```
why does my code go into the first if statement when the first letter is S?
rot13("SERR PBQR PNZC");
Greg Duncan
@GregatGit
Jul 03 2016 01:23
@Dueldrawer8 do you know how to use the chrome debugger for these?
George Phalen
@gphalen
Jul 03 2016 01:25
Could anyone take a look at my TwitchTV project? It works most of the time, but sometimes adds things to the wrong array.
Greg Duncan
@GregatGit
Jul 03 2016 01:26
@gphalen can you pen your pen up?
Randy Goldsmith
@Dueldrawer8
Jul 03 2016 01:26
@GregatGit yes.. i eventually got help
completed it
@GregatGit how long did it take you to complete intermediate algos
George Phalen
@gphalen
Jul 03 2016 01:27
@GregatGit yep, thanks. http://codepen.io/gphalen/pen/akWpgO
CamperBot
@camperbot
Jul 03 2016 01:27
gphalen sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 648 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 03 2016 01:27
@Dueldrawer8 awhile - I kept coming back to them
@Dueldrawer8 do you know how to run a code snippet in the chrome debuger?
Randy Goldsmith
@Dueldrawer8
Jul 03 2016 01:28
@GregatGit i don't believe i do
i just copy and paste code into chrome and console.log values most of time and it tells me where errors are
Greg Duncan
@GregatGit
Jul 03 2016 01:29
@Dueldrawer8 can really help you figure out where your code is going wrong quickley
@gphalen first thing you need to do is hit the tidy button on the js panel (top right) then delete all the extra lines - it is spacing your code to far apart
@Dueldrawer8 I can show you how to look through your code on the debugger if you want
George Phalen
@gphalen
Jul 03 2016 01:33
@GregatGit ok, sorry, I did some maintenance on the tidiness recently but it's still imperfect.
Mert Barış
@mertbaris
Jul 03 2016 01:35

Hey guys, I'm dealing with the Weather Project from Freecodecamp. I wrote the code, but having problems with the output, maybe due to my code or due to my browser. I don't know what the problem is, in fact! I need your help :)

'''
$(document).ready(function() {
if(!navigator.geolocation) {
alert("Your browser doesn't support geolocation!");
} else {
navigator.geolocation.getCurrentPosition(success, error);
}

// if browser supports, success function is used. latitude and longitude are taken.
function success(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;

var json, rawJson;                

// AJAX Request for Weather API. Data is transformed into JSON Object, then to Javascript object
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lng + "&APPID=bbc1be975abac3c4b7ea1259cae3c5e", function(data) {
  rawJson = JSON.stringify(data);
  json = JSON.parse(rawJson); 

  // city,date, weather to target at with jQuery
  var city = json.name;
  var weather = json.weather[0].description;
  var temperature = json.main.temp;

  // add content into HTML through jQuery
  $("#output").html(city);
  $(".date").html(weather);
  $(".temperature").html(temperature);  
});

}
});
'''

Randy Goldsmith
@Dueldrawer8
Jul 03 2016 01:35
@GregatGit i just googled it, ive some experience but just never really use it. I may ask for help along the way if i use for these others algos
CamperBot
@camperbot
Jul 03 2016 01:35
:bulb: to format code use backticks! ``` more info
Mert Barış
@mertbaris
Jul 03 2016 01:35
oops
Greg Duncan
@GregatGit
Jul 03 2016 01:37
@Dueldrawer8 It allows you to step through the code line by line and check the value of your variable so you can see the value of str.charCodeAt(i) at the first, then second iteration
Himad Mouhtar
@hmouhtar
Jul 03 2016 01:37
Hi!! I'm having a trouble with a CORS in my json request
(after putting 'new quote')
Greg Duncan
@GregatGit
Jul 03 2016 01:38
@gphalen so what it being added that shouldn't
George Phalen
@gphalen
Jul 03 2016 01:39
@gregatgit accounts that are currently streaming will end up in stream2, which is intended for accounts that aren't streaming.
@gregatgit it doesn't happen every time, so it's frustrating to troubleshoot
Greg Duncan
@GregatGit
Jul 03 2016 01:40
@gphalen what line is stream2
@gphalen i just found it
George Phalen
@gphalen
Jul 03 2016 01:41
@gregatgit declared on line 3, added to on line 73
Greg Duncan
@GregatGit
Jul 03 2016 01:44
@gphalen You have made this app way to complicated -
George Phalen
@gphalen
Jul 03 2016 01:47
@GregatGit any suggestions to simplify?
Greg Duncan
@GregatGit
Jul 03 2016 01:49
@gphalen
1 - See if channel is online/offline - https://api.twitch.tv/kraken/streams/
2 - if online you can get all the data from that api call
3 - if offline - https://api.twitch.tv/kraken/channels/
-all info for offline channels can be gotten from this api call
@gphalen make sure your for loops look like this
for (var i = 0; i < members.length; i++)
or
for (var i in members)
Hey all, I am more or less done with my calculator, but for some odd reason the input form and the clear button don't want to line up with the rest of the buttons.
Any ideas on how to fix this?
George Phalen
@gphalen
Jul 03 2016 01:52
@GregatGit you mean, with the variable set to 0 within the loop?
Greg Duncan
@GregatGit
Jul 03 2016 01:52
@gphalen yes- you have to have a good reason not to- that way if you have lots of loops you can always use i
George Phalen
@gphalen
Jul 03 2016 01:54
@gregatgit OK. And, I imagine that you want me to ditch the memChannel array? I've lost the code, but I tried a bunch of different ways to create a separate array for items that were in Members but weren't online or offline, and none of them worked.
Greg Duncan
@GregatGit
Jul 03 2016 01:54
@gphalen yes - ditch it
@gphalen first check if its online https://api.twitch.tv/kraken/streams/
monstercat is good - because its always online
George Phalen
@gphalen
Jul 03 2016 01:57
@GregatGit OK, I forked and made a new code pen without memChannel and with monster cat.
Greg Duncan
@GregatGit
Jul 03 2016 02:00
@gphalen here is your starting point
$(document).ready(function() {
  var members = ["Twitch", "ESL_SC2", "OgamingSC2", "storbeck", "RobotCaleb", "FreeCodeCamp", , "noobs2ninjas", "sheevergaming", "comster404", "thomasballinger", "terakilobyte", "Test_channel", "brunofin", "xbox", "Nathanias", "cretetion", "habathcx", "monstercat"];

  for (var i in members){

  }  
});
@gphalen delete the rest for now
keep it simple
Hey all, I am more or less done with my calculator, but for some odd reason the input form and the clear button don't want to line up with the rest of the buttons.
Any ideas on how to fix this?
I'm hoping my problem is as simple as it sounds lol. Just can't seem to line them up atm.
George Phalen
@gphalen
Jul 03 2016 02:04
@GregatGit Well, I feel like the portion that prints the streaming users can stay the same. That part always works and it's pretty simple.
 for (var j=0 in members)
    $.getJSON('https://api.twitch.tv/kraken/streams/' + members[j], function(data) {

      //Push list of users that are currently streaming into array.

      body.append("<br>" + data.stream.channel.display_name.link("https://www.twitch.tv/" + data.stream.channel.display_name) + "is currently streaming" + data.stream.game + data.stream.channel.status + "on Twitchtv." + "<br>");

          stream.push(data.stream.channel.display_name);


    })
Greg Duncan
@GregatGit
Jul 03 2016 02:05
@gphalen replace your html with this
<div class="container">
  <div>
    <h1>Twitch</h1>
  </div>
  <div id="myChannels"></div>
</div>
@gphalen don't use j - use i and remove the middle part (you still have your other pen to reference)
so delete all this
//Push list of users that are currently streaming into array.
      body.append("<br>" + data.stream.channel.display_name.link("https://www.twitch.tv/" + data.stream.channel.display_name) + "is currently streaming" + data.stream.game + data.stream.channel.status + "on Twitchtv." + "<br>");
          stream.push(data.stream.channel.display_name);
the very first thing you have to do is check the status
George Phalen
@gphalen
Jul 03 2016 02:12
@gregatgit, by "check the status" do you mean like this?
Greg Duncan
@GregatGit
Jul 03 2016 02:12
so in a new window look at the responses you can get from https://api.twitch.tv/kraken/streams/ try monstercat - freecodecamp (if its offline) - and make up one to see the different results you get
Matthew Bailin
@mdbailin
Jul 03 2016 02:12
Hey all, I am more or less done with my calculator, but for some odd reason the input form and the clear button don't want to line up with the rest of the buttons.
Any ideas on how to fix this?
I'm hoping my problem is as simple as it sounds lol. Just can't seem to line them up atm.
George Phalen
@gphalen
Jul 03 2016 02:12
  if (data.stream!=null)
    stream.push(data.stream.channel.display_name);
gdalrymple9
@gdalrymple9
Jul 03 2016 02:12

19:09
Hi everyone, I'm working on jQuery right now. I am unable to pass and I'm not sure what I'm doing wrong. Here are my requirements: Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.
Only use jQuery to add these classes to the element. Here is what I've coded so far: <script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
$(".well").ready(function() { $(".text-primary").addClass("animated shake");
});
</script>
<!-- Only change code above this line. -->

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>

Matthew Bailin
@mdbailin
Jul 03 2016 02:14
@gdalrymple9 Can you write this in pretty code? Also, can you use jQuery UI, or does it have to be just jQuery?
Greg Duncan
@GregatGit
Jul 03 2016 02:15
@gphalen have a look at the responses - they can be quite different
gdalrymple9
@gdalrymple9
Jul 03 2016 02:18
@mdbailin not exactly sure what you mean...I just started learning jQuery today. I'm doing it with the level done by FreeCodeCamp.
Greg Duncan
@GregatGit
Jul 03 2016 02:18
@gphalen once you do get the data you need - look at the freecodecamp tutorials how we built html blocks with cat pictures
George Phalen
@gphalen
Jul 03 2016 02:21
@gregatgit is this what you meant by checking the status? I've added this if statement before, but it always seemed to turn out the same with or without it.
if (data.stream!=null){
   container.append("<br>" + data.stream.channel.display_name.link("https://www.twitch.tv/" + data.stream.channel.display_name) + "is currently streaming" + data.stream.game + data.stream.channel.status + "on Twitchtv." + "<br>");
      stream.push(data.stream.channel.display_name);
    }
Matthew Bailin
@mdbailin
Jul 03 2016 02:26
@gdalrymple9 I would try enabling jQuery UI in codepen and see if that does the trick
If I remember right, the methods you described are from that stack
and make your code look pretty too so I can take a closer look
Kyle Strem
@kkdelux
Jul 03 2016 02:54

Can some help explain to me why, when using this code, does my game animate all the elements at once instead of one at a time. Thank you!

animateBoard: function (board) {
    board.forEach(function (val) {
        $('#' + val).addClass('light');
        sounds[val].play();
        setTimeout(function () {
           $('#' + val).removeClass('light');
        }, 500);
    });
}

See the whole project for context http://codepen.io/kkdelux/pen/ZOLoGQ

Greg Duncan
@GregatGit
Jul 03 2016 02:58
@kkdelux do all your sounds play and light up at once?
Kyle Strem
@kkdelux
Jul 03 2016 02:59
@GregatGit yes, and all the buttons light up at once as well
Greg Duncan
@GregatGit
Jul 03 2016 03:00
@kkdelux you have to increase the delay (500) every time
Kyle Strem
@kkdelux
Jul 03 2016 03:00
@GregatGit okay, do you know why that is by chance?
Greg Duncan
@GregatGit
Jul 03 2016 03:02
@kkdelux if something is delayed js doesn't stop - it goes onto the next thing, which just happens to be another fucntion with a delay.
Hey all, I am more or less done with my calculator, but for some odd reason the input form and the clear button don't want to line up with the rest of the buttons.
Any ideas on how to fix this?
I'm hoping my problem is as simple as it sounds lol. Just can't seem to line them up atm.
Greg Duncan
@GregatGit
Jul 03 2016 03:04
This message was deleted
Kyle Strem
@kkdelux
Jul 03 2016 03:04

@GregatGit ahh okay. I tried

animateBoard: function (board) {
    board.forEach(function (val) {
      $('#' + val).addClass('light');
      sounds[val].play();
      setTimeout(function () {
        $('#' + val).removeClass('light');
      }, 500 * (val + 1));
    });
  }

But that doesn't seem to work either

Greg Duncan
@GregatGit
Jul 03 2016 03:06
This message was deleted
@kkdelux
animateBoard: function (board) {
   var myDelay = 1;
    board.forEach(function (val) {
      $('#' + val).addClass('light');
      sounds[val].play();
     myDelay++;
      setTimeout(function () {
        $('#' + val).removeClass('light');
      }, 500 * myDelay);
    });
  }
Kyle Strem
@kkdelux
Jul 03 2016 03:13

@GregatGit

animateBoard: function (board) {
    var myDelay = 0;
    board.forEach(function (val) {
      $('#' + val).addClass('light');
      sounds[val].play();
      myDelay++;
      setTimeout(function () {
        $('#' + val).removeClass('light');
      }, 500 * myDelay);
    });
  }

Still playing simultaneously
http://codepen.io/kkdelux/pen/ZOLoGQ?editors=1111

Greg Duncan
@GregatGit
Jul 03 2016 03:15
@kkdelux how do you get it play on your board?
Kyle Strem
@kkdelux
Jul 03 2016 03:16
@GregatGit switch it to on and then hit the start button
Hey all, I am more or less done with my calculator, but for some odd reason the input form and the clear button don't want to line up with the rest of the buttons.
Any ideas on how to fix this?
I'm hoping my problem is as simple as it sounds lol. Just can't seem to line them up atm.
buiphuking
@buiphuking
Jul 03 2016 03:19
@kkdelux
i'm stuck with audio, your code is cool
Kyle Strem
@kkdelux
Jul 03 2016 03:20
@mdbailin just restyle it with css
Matthew Bailin
@mdbailin
Jul 03 2016 03:20
@kkdelux Great idea! Could you perhaps explain further?
Greg Duncan
@GregatGit
Jul 03 2016 03:22
@kkdelux
animateBoard: function (board) {
    var myDelay = 0;
    board.forEach(function (val) {
      myDelay++;
      setTimeout(function () {
        $('#' + val).removeClass('light');
        console.log("myDelay = " + myDelay);
        $('#' + val).addClass('light');
      sounds[val].play();
      }, 750 * myDelay);
    });
  },
Kyle Strem
@kkdelux
Jul 03 2016 03:22
@mdbailin
#answer{
  width:130px;
  border-radius:5px;
  margin-left:22px;
}
Greg Duncan
@GregatGit
Jul 03 2016 03:24
@kkdelux you didn't have the play() in the delay function
Tushar Mehta
@tushar-mehta
Jul 03 2016 03:25

@kirbyedy Hey thanks for your feedback for my following codepen:
http://codepen.io/tushar-mehta/pen/jAmGdm

Regarding carousel, What behaviour you get ? Which browser you are using? Does it throw any error on the page ?

CamperBot
@camperbot
Jul 03 2016 03:25
tushar-mehta sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1183 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Matthew Bailin
@mdbailin
Jul 03 2016 03:26
@kkdelux Thanks!
CamperBot
@camperbot
Jul 03 2016 03:26
mdbailin sends brownie points to @kkdelux :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @kkdelux |http://www.freecodecamp.com/kkdelux
Tushar Mehta
@tushar-mehta
Jul 03 2016 03:26
@dsonnn Are you using any framework like bootstrap? If so you can use class text-center to center an image ?
Kyle Strem
@kkdelux
Jul 03 2016 03:28

@GregatGit your's wasn't working so I tried adding a second timeout to the top half

animateBoard: function (board) {
    var myDelay = 0;
    board.forEach(function (val) {
      setTimeout( function () {
        $('#' + val).addClass('light');
        sounds[val].play();
      }, (500 * myDelay));
      myDelay++;
      setTimeout(function () {
        $('#' + val).removeClass('light');
      }, 500 * myDelay);
    });
  },

This seems to work well

@GregatGit Thank you for the help
CamperBot
@camperbot
Jul 03 2016 03:29
kkdelux sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 649 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 03 2016 03:30
@kkdelux probably a simple for loop would do and you could use the i instead of myDelay
@kkdelux :+1:
Kyle Strem
@kkdelux
Jul 03 2016 03:31
@GregatGit Yeah I might refactor it later but since it's working I can not go onto handling the player presses for wins and losses
George Phalen
@gphalen
Jul 03 2016 03:31
@GregatGit this version seems to always put things in the right array, but it prints everything twice
Greg Duncan
@GregatGit
Jul 03 2016 03:33
@gphalen line 23 //Push list of users that are currently streaming into array. ? What is your thinking here?
George Phalen
@gphalen
Jul 03 2016 03:35
@gregatgit Only users that are currently streaming pass through the JSON request. Adding an if statement like "if (data.stream!=null)" doesn't seem to add anything
buiphuking
@buiphuking
Jul 03 2016 03:38
someone finished simon game plz give me some advice !!!!!!!!!!!
Greg Duncan
@GregatGit
Jul 03 2016 03:38
@gphalen for now make a smaller array with just 3 channels - one online - one offline - one nonsense one (just call it members and comment out the other one)
George Phalen
@gphalen
Jul 03 2016 03:39
@GregatGit I don't think I understand. I have arrays intended for online and offline, respectively.
Greg Duncan
@GregatGit
Jul 03 2016 03:40
@gphalen var members = ['freecodecamp', 'monstercat', 'thisShouldntWork'];
George Phalen
@gphalen
Jul 03 2016 03:41
@GregatGit oh, sorry, i get it
Greg Duncan
@GregatGit
Jul 03 2016 03:43
@gphalen go to private message section
Sorin Ruse
@sorinr
Jul 03 2016 04:48
hi there. here is my "final" version of twitch app: http://s.codepen.io/sorinr/debug/EymkWr Can you please give me some feedback on it?
Coy Sanders
@coymeetsworld
Jul 03 2016 05:21
nice work @sorinr, looks really good
one thing though I would recommend is if you can mute the video when you have it in PIP so you don't have 2 streams playing sound at same time that would be great
not sure if that can be done though
Sorin Ruse
@sorinr
Jul 03 2016 05:28
@coymeetsworld it can be done manually or i can have it muted by default when loading. thank you for your feedback
CamperBot
@camperbot
Jul 03 2016 05:28
sorinr sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1231 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
ENG-AHMEDSALAH
@ENG-AHMEDSALAH
Jul 03 2016 05:31
hello!!
Sorin Ruse
@sorinr
Jul 03 2016 05:32
@ENG-AHMEDSALAH hi
Coy Sanders
@coymeetsworld
Jul 03 2016 05:32
i would recommend muting it by default @sorinr, just so user doesn't have to make a change they are almost always going to make. yw for the feedback
Sorin Ruse
@sorinr
Jul 03 2016 05:46
@coymeetsworld just added muted="true" for the pip but its not working. i'll try to do it by js
Jenish
@jenishm
Jul 03 2016 06:02
Hello friends, Instead of putting a icon ref from web, can I download the .svg file and give the reference. Currently I have used codyhouse "url("http://codyhouse.co/demo/login-signup-modal-window/img/cd-icon-email.svg");"
Sorin Ruse
@sorinr
Jul 03 2016 06:07
@jenishm why not using font awasome ?
Jenish
@jenishm
Jul 03 2016 06:10
@sorinr Thanks for the suggestion, I checked their website and the collection is great! Will sure use this
CamperBot
@camperbot
Jul 03 2016 06:10
jenishm sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 424 | @sorinr |http://www.freecodecamp.com/sorinr
Jenish
@jenishm
Jul 03 2016 06:10
@sorinr can i can I give ref after downloading the icons
Sorin Ruse
@sorinr
Jul 03 2016 06:12
@jenishm you don't need to download them. just link the library into your pen's css and use it like <i class="fa fa-envelope"> or the name of the icon font you want
Jenish
@jenishm
Jul 03 2016 06:14
@sorinr Thank you, I will try this now
CamperBot
@camperbot
Jul 03 2016 06:14
jenishm sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: jenishm already gave sorinr points
Coy Sanders
@coymeetsworld
Jul 03 2016 06:22
yeah wasn't sure if there was a way to do it @sorinr, im actually starting to redesign my twitch project I haven't seen that option
Sorin Ruse
@sorinr
Jul 03 2016 06:23
@coymeetsworld they say here: https://github.com/justintv/Twitch-API/blob/master/embed-video.md that the option is but for some reason for me its not working
Coy Sanders
@coymeetsworld
Jul 03 2016 06:29
i can take a look if you want to post your code @sorinr
Sorin Ruse
@sorinr
Jul 03 2016 06:32
@coymeetsworld its http://codepen.io/sorinr/pen/EymkWr but the player its not working for sandbox issues. To test it you have to use the debug version
Coy Sanders
@coymeetsworld
Jul 03 2016 06:36
both videos were muted when I tried @sorinr
the main screen and pip
Sorin Ruse
@sorinr
Jul 03 2016 06:37
@coymeetsworld but i have muted="true" only on pip. i don't know why behaves like that
Coy Sanders
@coymeetsworld
Jul 03 2016 06:41
yeah i see that, strange
maybe trying setting volume through javaScript: setMuted function maybe if its on pip
Sorin Ruse
@sorinr
Jul 03 2016 06:48
@coymeetsworld i will probably have to switch from non-interactive embed to Interactive Embed to use the js functionality. that will go into next version that will also be mobile responsive :)
Coy Sanders
@coymeetsworld
Jul 03 2016 06:48
ah ok, well I guess having both muted is not the worst thing either. I would say thats better than having them both have sound at same time :) @sorinr
Sorin Ruse
@sorinr
Jul 03 2016 06:51
@coymeetsworld u r right. maybe its better both muted on load and manually unmute the stream u want
Coy Sanders
@coymeetsworld
Jul 03 2016 06:54
yeah
vichus1995
@vichus1995
Jul 03 2016 06:58
hey guys. know any good tutorials on responsive design?
isstreetz
@isstreetz
Jul 03 2016 07:18
Hey guys I'm working on my tribute page and I would like to now how to add margins correctly to my page
I have almost everything except from that.
Chris Cullen
@123xylem
Jul 03 2016 07:35

function permAlone(str) {
  var duplicates;
 str=str.split("");

  var search=str.forEach(function(x){
     duplicates=0;
 var stop=str.length;
   while(stop>1&& str.lastIndexOf(x)!== -1){//THIS LINE NEEDS TWEAKING
     duplicates++;
     stop--;

   }
     return duplicates;
  }); 



    function factorial(n) {

        if (n === 0) {
            return 1;
        }

        return n * factorial(n - 1); //HERE WE HAVE MAX FACTORIAL OF n BUT I cant return yet before I DIVIDE SO
    }

    function divide(n) { //HERE I MAKE THE DIvision part of the function
        return n * factorial(n - 1)/(n - duplicates);
    }

    return duplicates;
    //divide(factorial(str.length));

}

permAlone('aabb');
Could you help with my duplicatesFunction. It currently is retungin 3 for aabb but should be 2 duplicates only.!
Norvin Burrus
@ndburrus
Jul 03 2016 07:45
@vichus1995 this may be helpful:
sigursiguros
@sigursiguros
Jul 03 2016 07:49
thanks @ndburrus
CamperBot
@camperbot
Jul 03 2016 07:49
sigursiguros sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:warning: sigursiguros already gave ndburrus points
Nathaniel Nasarow
@Torgian
Jul 03 2016 08:06
hey all
any possibility getting a code review of my weather app? mostly on the javascript / jQuery side of things
Christian-Peter
@cpheimbach
Jul 03 2016 08:31
Hi all, I am starting to apply a model / view / controller structure on the tic tac toe challenge. I feel that I code myself a bit into a hole but wonder if you guys mind to review my work in progress code:
thank you!
@Torgian hold on a sec I’ll give it a look.
@Torgian first I like the animation and cycling theme.
A small addition: It would be great to see my location on this page. As a user it is good to have a confirmation that my location was detected correctly. Next I have a look into your code.
Ah, I see you have the ambition to display the city but somhow it wasn’t displayed. (I saw by your HTML but need to dive in JS next to see what happend)
Christian-Peter
@cpheimbach
Jul 03 2016 08:41
ok that is a good code and clear and self descripive
descriptive
You did the same I did at the time when I did the weatherapp and it is potential of call back hell.
so basically it means that all design and display changes that are depending on the API response are made within the ajax callback
you can find more here: http://callbackhell.com/
John Alcher
@alchermd
Jul 03 2016 09:11
Hey fellas. Anyone here who have done the wiki viewer project? Can you give a brief overview on what the API call looks like?
I'm having a hard time understanding the documentation. Basically I want my search bar to work the same as the search bar on the wikipedia site...
vichus1995
@vichus1995
Jul 03 2016 09:54
thanks @ndburrus
CamperBot
@camperbot
Jul 03 2016 09:54
vichus1995 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 800 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Jul 03 2016 09:55
@vichus1995 you're welcome! enjoy :palm_tree:
Chris Cullen
@123xylem
Jul 03 2016 10:25
function permAlone(str) {
  var duplicates;
 str=str.split("");

  var search=str.forEach(function(x){

    duplicates=0;

    var stop=str.length;

    while(stop>=0)
    {stop--;

     if(str.lastIndexOf(x)!== -1){//THIS LINE NEEDS TWEAKING
     duplicates++;

     }
   }
     return duplicates;
  }); 



    function factorial(n) {

        if (n === 0) {
            return 1;
        }

        return n * factorial(n - 1); //HERE WE HAVE MAX FACTORIAL OF n BUT I cant return yet before I DIVIDE SO
    }

    function divide(n) { //HERE I MAKE THE DIvision part of the function
        return n * factorial(n - 1)/(n - duplicates);
    }

    return duplicates;
    //divide(factorial(str.length));

}

permAlone('aabb');
Anyone know why my duplicates function at the top isnt giving 2 duplicates on return/?
Dan Amoroso
@Dansvidania
Jul 03 2016 10:55
Hello guys
I am having some problem with the local weather app
seems like I can only access the geolocation api over https but I have no idea how to do that
SarthakAdhikari
@SarthakAdhikari
Jul 03 2016 11:40
Hello.
Anyone here?
Chris Cullen
@123xylem
Jul 03 2016 11:54

function permAlone(str) {
  var duplicates;
 str=str.split("");



    var doops = str.filter(function (x, i, a) { 
      return a.indexOf(x) !== i; });//Here we find duplicates


      duplicates=doops.length;//make duplicates == how many duplicates

    function factorial(n) {

        if (n === 0) {
            return 1;
        }

        return n * factorial(n - 1); //HERE WE HAVE MAX FACTORIAL OF n --- n!
    }

    function divide(n) { 
        return n*n/n-duplicates;
      //HERE IM trying to say return the max factor n!. But divide it by n-r! Is it possible to do this?
    }

    return divide(factorial(str.length));

    //here i call both functions

}

permAlone('aab');
Theoretical QUICK QUESTION: IS it possible to mathematically state n! /n-r! ? I try at the bottom... Could you advise me please!
Hamza Nasim
@HamzaNasim
Jul 03 2016 12:19
heyy!!!
Yamen Daher
@yamenda
Jul 03 2016 12:36
hello guys
i'm trying to solve (Build a Random Quote Machine)
i need to store information like database
Islam Ibakaev
@dagman
Jul 03 2016 12:38
@yamenda you don't need database for this task
@yamenda just use whatever quote api
to get a random quote
just don't overcomplicate things
Yamen Daher
@yamenda
Jul 03 2016 12:39
thank you very much ^_^
Chris Cullen
@123xylem
Jul 03 2016 12:53

function permAlone(str) {
  var duplicates;
 str=str.split("");

  var doops = str.filter(function (x, i, a) { 
      return a.indexOf(x) !== i; });//Here we find duplicates


      duplicates=doops.length;//make duplicates == how many duplicates

  function factorial(n) {

        if (n === 0) {
            return 1;
        }

        return n * factorial(n - 1); //HERE WE HAVE MAX FACTORIAL OF n --- n!
        }

  var options=str.length-duplicates;

    function divide(n) { 
        return n*factorial(n-1)/( n*factorial(n-1)*options);  // THE FORMULAE IS   n!/(n-r)!
      //HERE IM trying to say return the max factor n!. But divide it by n-r! Is it POSSIBLE to do this?
    }

    return divide(factorial(str.length));
    //here i call both functions
   }

permAlone('abab');
CALLING ALL MATHS BRAINS Is what Im trying to do here POSSIBLE???
deepakSpatil
@deepakSpatil
Jul 03 2016 13:50
How to target elements in angular JS...like the way we do in jquery ...$(this).find(ul).hide();.....somehting like this how to do in angular js? without jquery.
avonemme
@avonemme
Jul 03 2016 14:25
@deepakSpatil that question is better suited for data vis. or back end chat rooms
btw anyone know how I can use jquery to animate an element for a certain amout of time
Christian-Peter
@cpheimbach
Jul 03 2016 14:42
Hi guys,
i’d like to share a WIP as I feel my code is not really right. Please give me feedback about my tic tac toe structure.
I don’t want to end up in a hole that is not helpful for me
deepakSpatil
@deepakSpatil
Jul 03 2016 14:55

blob

I am getting this error ....TypeError: this.querySelector is not a function Angular js

coffeebeanzz
@coffeebeanzz
Jul 03 2016 15:05
Thanks @cpheimbach good link!
CamperBot
@camperbot
Jul 03 2016 15:05
coffeebeanzz sends brownie points to @cpheimbach :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @cpheimbach |http://www.freecodecamp.com/cpheimbach
Samson Alajede
@ajesamson
Jul 03 2016 15:30
@cpheimbach i couldn’t play after select O or X
clicking the box shows nothing
Christian-Peter
@cpheimbach
Jul 03 2016 15:32
@ajesamson yes it is a work in progress at this point I'm trying to understand whether my JS structure is on the right path or not. I'm far from finish indeed but something tells me the project is not structured well
@ajesamson thank you for checking though!!
CamperBot
@camperbot
Jul 03 2016 15:33
cpheimbach sends brownie points to @ajesamson :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @ajesamson |http://www.freecodecamp.com/ajesamson
Samson Alajede
@ajesamson
Jul 03 2016 15:33
you’re welcome
just finished mine some days ago
avonemme
@avonemme
Jul 03 2016 15:51
Hey everyone, can someone help me with my Simon game. The displaySequence function is doing all of the animating at once, how do I make it animate each cell one by one , click on the start button http://codepen.io/avonemmme/pen/RRgNYQ
Samson Alajede
@ajesamson
Jul 03 2016 15:53
@avonemme still trying to figure out my UI
like your UI concept
totally different from that in the sample.
for your question
it will be advisable you store the location in an array
iterate through the array while animating each one after the other
hope this help a little
avonemme
@avonemme
Jul 03 2016 15:55
@ajesamson thats exatly what i am doing, the thing is that it iterates so fast that all of the iterations happen at the same time if you know what I mean lol
@ajesamson but here is your brownie, thanks
CamperBot
@camperbot
Jul 03 2016 15:55
avonemme sends brownie points to @ajesamson :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @ajesamson |http://www.freecodecamp.com/ajesamson
Samson Alajede
@ajesamson
Jul 03 2016 15:55
the just use delay
or settimeout
avonemme
@avonemme
Jul 03 2016 15:56
how do i do that?
Samson Alajede
@ajesamson
Jul 03 2016 15:56
check this out
or this
avonemme
@avonemme
Jul 03 2016 15:57
thanks alot
Samson Alajede
@ajesamson
Jul 03 2016 15:58
:smile:
avonemme
@avonemme
Jul 03 2016 15:59
@ajesamson how long have you been working on your simon game so far?
Samson Alajede
@ajesamson
Jul 03 2016 15:59
2 - 3 days
but not taking it too serious so far
because i am trying to figure out
how to make the round game board
im kind of stuck with making it responsive
on page resize
avonemme
@avonemme
Jul 03 2016 16:01
like you want the actual gameboard to increase in size?
Samson Alajede
@ajesamson
Jul 03 2016 16:01
the implementation of the game should not be that difficult
exactly
whenever the browser is resized
avonemme
@avonemme
Jul 03 2016 16:01
i see
that is what i have done so far
i was thinking of using SVG but i don’t know graphics that much
used css so far
hope to figure it today possibly
avonemme
@avonemme
Jul 03 2016 16:04
oh jeez
@ndburrus thanks
CamperBot
@camperbot
Jul 03 2016 16:04
avonemme sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 805 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Jul 03 2016 16:06
@avonemme you're welcome! enjoy :paperclip:
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:09
How can I have background color with padding?
Robert
@Brayn7
Jul 03 2016 16:09
@ajesamson you trying to get four circles inside one big circle?
Samson Alajede
@ajesamson
Jul 03 2016 16:10
@Brayn7 excatly
This message was deleted
avonemme
@avonemme
Jul 03 2016 16:10
@meetmangukiya background-color covers the whole page, why would you need padding for it?
Robert
@Brayn7
Jul 03 2016 16:11
you need to make a main div with four nested divs. then have the main div be position absolute and the nested divs position relative. @ajesamson
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:11
@avonemme ohh... I think I mixed it up with margin then
I want to create a rectangle of the size of contents within the div
Samson Alajede
@ajesamson
Jul 03 2016 16:12
@Brayn7 ok
im actually using bootstrap
Robert
@Brayn7
Jul 03 2016 16:12
@ajesamson if you want a example ill make or find one for you.
avonemme
@avonemme
Jul 03 2016 16:12
@meetmangukiya try wrapping all the contents of your webpage in a div and the giving that div a backgorund-color
Samson Alajede
@ajesamson
Jul 03 2016 16:13
@Brayn7 il be glad
avonemme
@avonemme
Jul 03 2016 16:13
send me your codepen link so i can see what you are trying to do
Samson Alajede
@ajesamson
Jul 03 2016 16:13
@Brayn7 thanks
CamperBot
@camperbot
Jul 03 2016 16:13
ajesamson sends brownie points to @brayn7 :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @brayn7 |http://www.freecodecamp.com/brayn7
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:14
avonemme
@avonemme
Jul 03 2016 16:16
ok i see and what are you trying to do with it
Samson Alajede
@ajesamson
Jul 03 2016 16:18
@meetmangukiya you don’t really need all the html tags there
just assume you are inside the body tag
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:18
ok @ajesamson
Samson Alajede
@ajesamson
Jul 03 2016 16:18
also you margin is having space between the px
check this
#rectangle{
    margin: 25px;
    background-color: #192735;
}
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:19
@ajesamson where'd I add the title then?
Samson Alajede
@ajesamson
Jul 03 2016 16:20
i have not tried actually with adding title
to most of my work
as long as i saved the work with project name
using the provided section by codepen
at the upper left section of your page
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:22
ok
Also, I am not that good with coloring, I always mess up the coloring part, even in the drawing classes in the school :P . I'd like some advice from you people.
Samson Alajede
@ajesamson
Jul 03 2016 16:25
@shusil123 thanks
CamperBot
@camperbot
Jul 03 2016 16:25
ajesamson sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 613 | @shusil123 |http://www.freecodecamp.com/shusil123
Wendy Medeiros
@wendyr21
Jul 03 2016 16:26
can anyone explain to me why a file that resides on my own domain takes a long time to load. i dl date.js to my web server and it just took so long.. i am having issues with load time and am not really sure what my biggest problem is :(
i also may or maynot have too many js file that are not being uitilized correctly lol trying to use angular but completely 150% new to it
Robert
@Brayn7
Jul 03 2016 16:36
@ajesamson http://codepen.io/Brayn/pen/pbwjzw here is one way you could do it. might be able to to display table on main and table cells on children if you wanted to try that.
Samson Alajede
@ajesamson
Jul 03 2016 16:41
seen @Brayn7
responsive as well
will play around it
thanks @Brayn7
CamperBot
@camperbot
Jul 03 2016 16:42
ajesamson sends brownie points to @brayn7 :sparkles: :thumbsup: :sparkles:
:warning: ajesamson already gave brayn7 points
Robert
@Brayn7
Jul 03 2016 16:43
@ajesamson you could make it responsive with media queries
@ajesamson just the height is a problem
Samson Alajede
@ajesamson
Jul 03 2016 16:43
got it
Meet Mangukiya
@meetmangukiya
Jul 03 2016 16:55
not so beautiful Tribute Page http://codepen.io/meetmangukiya/full/aZpRaM/
Please review
Ralph Nahra
@Rallph
Jul 03 2016 17:01
@meetmangukiya it looks like you don't have a link leading to a place where you can learn more
Meet Mangukiya
@meetmangukiya
Jul 03 2016 17:01
@Rallph yeah.. thanks for pointing out. Will add right away
CamperBot
@camperbot
Jul 03 2016 17:01
meetmangukiya sends brownie points to @rallph :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @rallph |http://www.freecodecamp.com/rallph
NamanJain2050
@NamanJain2050
Jul 03 2016 17:02
@ndburrus thanks alot
CamperBot
@camperbot
Jul 03 2016 17:02
namanjain2050 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 807 | @ndburrus |http://www.freecodecamp.com/ndburrus
Anna
@AnnaRedPanda
Jul 03 2016 17:02
Hello, I have inserted getJSON in "for" cycle, but getJSON works only for the last element of the cycle. what am I doing wrong? http://codepen.io/AnnaRedPanda/pen/zBzGRP?editors=1111
Norvin Burrus
@ndburrus
Jul 03 2016 17:02
@NamanJain2050 you're welcome! :palm_tree:
Anna
@AnnaRedPanda
Jul 03 2016 17:02
This message was deleted
Norvin Burrus
@ndburrus
Jul 03 2016 17:05
@AnnaRedPanda this may be helpful:
Marc Vesper
@marcvesper
Jul 03 2016 17:05
new, done quite a few of the projects so far now. is it normal for people to find the interactivity/ functionality/ javascript to be fun and rewarding, while stuff like the actual page layout/ visual design to be both difficult and tiresome? does that tend to change over time as it becomes second-nature, or is it an indication that front-end might not be where i should be looking to ultimately specialise?
Ralph Nahra
@Rallph
Jul 03 2016 17:07
i find the layout stuff annoying too
hey guys does my personal portfolio page have to look good?
greg
@wearenotgroot
Jul 03 2016 17:11
@Rallph probably? :smile:
@Rallph you can always update and improve it later
@Rallph also you dont need to rush things, just do it on your own phase
Ralph Nahra
@Rallph
Jul 03 2016 17:13
it's just a bit overwhelming, like i don't even know where to start
greg
@wearenotgroot
Jul 03 2016 17:14
@Rallph just make yourself familiar with html and js first
Ralph Nahra
@Rallph
Jul 03 2016 17:16
@wearenotgroot yeah i havent gotten on in a while so im redoing the html and jquery exercises now
Jenish
@jenishm
Jul 03 2016 17:16
Hello Friends, I haven't saved html form data so far. Can someone please guide about how to save the html form elements like first name, last name, password, email to sql database using javascript or jquery?
greg
@wearenotgroot
Jul 03 2016 17:16
@Rallph remember you are welcome to watch and read tutorials outside freecodecamp(there is lots of them out there)
Ralph Nahra
@Rallph
Jul 03 2016 17:17
@wearenotgroot ok thanks
CamperBot
@camperbot
Jul 03 2016 17:17
rallph sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1200 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Jul 03 2016 17:18
@Rallph the important part is to try and experience it for yourself, so experiment and get your hands dirty :)
Meet Mangukiya
@meetmangukiya
Jul 03 2016 17:24
How do we change the size of the image so that the aspect ratio of the image remains the same?
Meet Mangukiya
@meetmangukiya
Jul 03 2016 17:33
I got it
Aaron Taylor
@aarontaylor
Jul 03 2016 17:39
@Rallph it is so easy to get lost int he details. I found that buy just trying to get a basic layout first.. Nothing fancy. Just the minimal and then break that down into small sections.. I was able to tackle it.
Then I added a little bit more and have gone back a few times already to update it. Of course it is still not done and where I want it, but I understand how frustrating it can be to look at the whole assignment up front and get overwhelmed and not know where to start
If it helps I started with a very basic HTML template too .. just the most basic head/body layout.. then added divs to where I wanted to break it up..then I did a little more. Later I found a nice portfolio template, but I only used parts of it. The parts I understood. Still a harder project at the beginning than you would think, but that is programming for you.
DevD
@devd16689
Jul 03 2016 17:47
Any free lancer to help me out on a project?
Client Side tech: HTML CSS JavaScript Jquery
ServerSide: PHP
Database:MySql
?
omkar88
@omkarkothavale88
Jul 03 2016 17:49
@devd16689 whats the project by the way
DevD
@devd16689
Jul 03 2016 17:50
@omkarkothavale88 can you mesg in private?
?
omkar88
@omkarkothavale88
Jul 03 2016 17:54
ok... where
DevD
@devd16689
Jul 03 2016 17:55
@omkarkothavale88 i pinged you in private
Or do u have gtalk
gmail
Wendy Medeiros
@wendyr21
Jul 03 2016 18:14
how does one check if someone replied if you left the window and didnt see it for a while
omkar88
@omkarkothavale88
Jul 03 2016 18:19
is it posible to join these chat rooms on android phones
DevD
@devd16689
Jul 03 2016 18:20
search for gitter in playstore
its there
omkar88
@omkarkothavale88
Jul 03 2016 18:21
@devd16689 is it possible to complete the fcc courese on d phone?
DevD
@devd16689
Jul 03 2016 18:21
Not sure of it
omkar88
@omkarkothavale88
Jul 03 2016 18:22
dilemma...i may not be having wi-fi from nex week...thus,making sure if i can stay in fcc...
Hristijan Gjorgjievski
@hristijankiko
Jul 03 2016 18:29
How do you guys like my quote machine?
Aaron Taylor
@aarontaylor
Jul 03 2016 18:29
@omkarkothavale88 i have never tried it on the phone, but I imagine it would work OK in the Chrome browser on a phone. How practical it is though I don't know.
@hristijankiko I like the layout an the shadow on the text. Works fast and well for me.
Hristijan Gjorgjievski
@hristijankiko
Jul 03 2016 18:30
@aarontaylor Thanks :)
CamperBot
@camperbot
Jul 03 2016 18:30
hristijankiko sends brownie points to @aarontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @aarontaylor |http://www.freecodecamp.com/aarontaylor
Aaron Taylor
@aarontaylor
Jul 03 2016 18:30
Since the text pops out and isn't flat, I would expect the buttons to be less flat too
@hristijankiko thank you for the points!
CamperBot
@camperbot
Jul 03 2016 18:30
aarontaylor sends brownie points to @hristijankiko :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @hristijankiko |http://www.freecodecamp.com/hristijankiko
Aaron Taylor
@aarontaylor
Jul 03 2016 18:30
But yes I like how it lays out and looks. Great job!
Damian Collier
@damianpcollier
Jul 03 2016 18:31

Hi
See attached codepen.
I'm trying to freeze a header at the top of the page as part of the portfolio challenge.
I've tried all sorts of researched methods and cannot get anything to work
If you look at this, I've stripped it right back to a basic header and one word content
It scrolls and the green header remains BUT the text starts behind the header.
All I want to do is have a fixed header and then get in with the rest of the page under this header. Just can't get it working.
Any thoughts please

Thanks

http://codepen.io/collierd/pen/mEwZjA

Hristijan Gjorgjievski
@hristijankiko
Jul 03 2016 18:40
@damianpcollier You could just add margin-top to your container
@damianpcollier margin-top: 30px to your body
Damian Collier
@damianpcollier
Jul 03 2016 18:53
Thanks @hristijankiko that seems to work. How does margin-top:30 work though?
Surely this would apply to my header as well as this is inside body
CamperBot
@camperbot
Jul 03 2016 18:53
damianpcollier sends brownie points to @hristijankiko :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @hristijankiko |http://www.freecodecamp.com/hristijankiko
@wendyr21 it (your screen) will have a message indicating how many mentions (of your name/id) there were in your absence... if you logged out without scrolling to it you'd get an email copy notification... :panda_face:
Lorian
@glowlo
Jul 03 2016 19:20
hi all! I've just reached the part of the learning where I am to design a tribute page...I haven't typed a single word. I grasped the concepts well...even took notes...my problem is that I'm very methodical...I need some help identifying a step by step process for development. I understand that each project will be different...but does anyone have a good starting point? Like do you always start with HTML, or do you create your classes first, etc...
Aaron Taylor
@aarontaylor
Jul 03 2016 19:21
@glowlo I started (assuming you have someone for a tribute) by outline on paper how I want the site to look
Lorian
@glowlo
Jul 03 2016 19:22
also...I don't get Boostrap...when the program was telling me what classes to use, that was fine, but how do i access the library of classes on boostrap to know what is available for myself...I'm on the website, but I cannot identify thelocation of classes and what they do
Aaron Taylor
@aarontaylor
Jul 03 2016 19:22
Then I put a basic HTML template together (HEAD/BODY/DIVS FOR AREAS I identified)
Lorian
@glowlo
Jul 03 2016 19:22
ok
Aaron Taylor
@aarontaylor
Jul 03 2016 19:22
This helped me a lot @glowlo http://getbootstrap.com/
Lorian
@glowlo
Jul 03 2016 19:22
awesome...thanks @aarontaylor
Aaron Taylor
@aarontaylor
Jul 03 2016 19:22
I had to look up stuff there all the time. I would google things like bootstrap text classes
Lorian
@glowlo
Jul 03 2016 19:23
ok
Aaron Taylor
@aarontaylor
Jul 03 2016 19:23
And that would popup and have the classes and examples of what they did. It helps termendously
You are welcome!
So I was going to say I did nothing fancy for my tribute page, but as I saw interesting techniques or other things, I tried to incorporate and if it looked good I left it in.
But definitely the most simple basic thing to start with nothing fancy
Damian Collier
@damianpcollier
Jul 03 2016 19:27
Thanks @ndburrus I'll take a look
In the meantime, see version 2.
My version 1 with padding-top:30px works but when I put rows in it stops working.
I've tried adding row {padding-top: 50px;} that does nothing
Really struggling with these headers!
http://codepen.io/collierd/pen/mEwZjA
CamperBot
@camperbot
Jul 03 2016 19:27
damianpcollier sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 812 | @ndburrus |http://www.freecodecamp.com/ndburrus
avonemme
@avonemme
Jul 03 2016 19:36
If you guys could take a look at this code and find why the game is working i would be very grateful: http://codepen.io/avonemmme/pen/RRgNYQ?editors=1111
Ahmad Ali
@microcyberz
Jul 03 2016 19:38
https://codepen.io/microcyberz/pen/GqERVm?editors=1011 I have used alert on line 16 for testing. it is supposed to give different results on each click but it gives same result again and again, any help?
Trenton Stiles
@blzre
Jul 03 2016 19:46
How do you use font-awesome on Codepen so I can use the social media icons?
I'm trying to do the random quote generator and I have no idea how to get the tumblr and twitter icons in my buttons. I can get the regular bootstrap icons to come up...
gemaderus
@gemaderus
Jul 03 2016 20:00
@blzre and use the font classes in your html, example: <span class="fa fa-comments-o"></span>
Alex Myers
@qckpckt
Jul 03 2016 20:02
hi all. I’m working on the twitch tv project, and I’m getting errors when from my api call. here is the url I’m using:
https://api.twitch.tv/kraken/streams&channel=Yogscast,freecodecamp,TrumpSC,nl_Kripp,Day9tv,bmkibler?callback=?
Alex Myers
@qckpckt
Jul 03 2016 20:24
OK. I modified my request, and now I get this: ```SyntaxError: Unexpected token ':'. Parse error
if I click on the error I get taken to a page which displays the a JSON object for the one steamer in the list that’s live. I cannot see an out of place colon anywhere though.
Ken Haduch
@khaduch
Jul 03 2016 20:30
@blzre - an even easier way - go into the CSS config box (the gear icon in the CSS panel) and go to one of the external resource slots, type font-awesome, and it should put a quick add URL there, just select that. It's the easiest way on CodePen
This is my codepen link of my first project
I need feedbacks
Ken Haduch
@khaduch
Jul 03 2016 20:33
@qckpckt - this URL in a browser tab gets a return: https://api.twitch.tv/kraken/streams?channel=Yogscast
Vinay Singh
@CodHands
Jul 03 2016 20:33
If I can do better , then please do let me know
ENG-AHMEDSALAH
@ENG-AHMEDSALAH
Jul 03 2016 20:33
@sorinr hi!!
Ken Haduch
@khaduch
Jul 03 2016 20:34
@qckpckt - and this https://api.twitch.tv/kraken/streams?channel=Yogscast,freecodecamp,TrumpSC,nl_Kripp,Day9tv,bmkibler gets a long list of returned elements, so the ? after the URL seemed to make the difference.
@blzre - and @gemaderus was correct about the syntax, although I usually see it as <i class="fa fa-whatever-icon"></i>, although a <span> probably works.
Fredo
@ajay1731
Jul 03 2016 20:42

would anyone mind providing some feedback and also if it is ready to turn in? I am not sure how to do page navigation but the video doesn't make it a requirement, just the checkboxes. <p data-height="265" data-theme-id="dark" data-slug-hash="GqEomO" data-default-tab="html,result" data-user="ajay1731" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/ajay1731/pen/GqEomO/">GqEomO</a> by Alfredo (<a href="http://codepen.io/ajay1731">@ajay1731</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

woops

<p data-height="265" data-theme-id="dark" data-slug-hash="GqEomO" data-default-tab="html,result" data-user="ajay1731" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/ajay1731/pen/GqEomO/">GqEomO</a> by Alfredo (<a href="http://codepen.io/ajay1731">@ajay1731</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

gemaderus
@gemaderus
Jul 03 2016 20:43
@khaduch you can use whatever you want <i></i> or <span></span>. <i> is better for semantic
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 21:10

I've difficulty understanding FCC code (that is not running /executing) that appears at "https://www.freecodecamp.com/challenges/convert-json-data-to-html" and the entire code is:


<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        json.forEach(function(val) {
          var keys = Object.keys(val);
          html.forEach(function(key) {
            html += "<b>" + key + "</b>: " + val[key] + "<br>";
          });
          html += "</div><br>";
        });


        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

Just answer me what will happen after pressing the button:
1) is screen going to be populated only with the last json element ? , or
2) is screen going to be populated with all json elements ?

Ken Haduch
@khaduch
Jul 03 2016 21:12
@gemaderus - hello - that's good to know. I've always seen <i> in the examples on the font-awesome page, so that was my first thought. Semantics is a good thing to keep in mind, too.
@Annis-Monadjem - I think that it should show all elements, because you have a variable html, and you are using +=, which should just append to the contents of that variable on subsequent executions of that code. Although looking at it again html.forEach might not work, since html is not declared as an Array object. So it might just give an error? Maybe val.forEach would work...
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 21:19

@khaduch: I've passed the FCC waypoint for it and got credit for it (so I'm assuming it works!) But since cannot see results - still asking you. My concern is over the piece :

      $.getJSON("/json/cats.json", function(json) {
        var html = "";

and so my question is whether html doesn't initialize each time a new json element is processed by $.getJSON( ... ? What do you think?

Stephen
@stephepush
Jul 03 2016 21:20
I can't figure out how to change the value of author key when the api I'm using doesn't send an 'author' of a quote.
$(document).ready(function() {
        $.getJSON( 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?' , function(data){
            $('#quote, #author').empty();
            if (data.quoteAuthor === " " || ""){
                data.quoteAuthor = "Unattributed";
            };
            $('#quote').append("<p>" + data.quoteText + "</p>");
            $('#author').append("<p>" + "-" + data.quoteAuthor + "</p>");
            var twitterLinkRoot = "https://twitter.com/intent/tweet?text=" 
            /*this variable is the raw link from the html twitter button. Up next the parameters, in this case, the words of a generated                   quote, will be parsed and added in param form so that the user can tweet their favorite quotes*/

            var tweetQuote = data.quoteText + " " + data.quoteAuthor;

            var tweetQuote = twitterLinkRoot + tweetQuote.split(" ").join('%20');
            $('.twitter-share-button').attr('href',tweetQuote);
        });
    });


$(document).ready(function() {
    $('#newQuote').click(function() {
        $.getJSON( 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?' , function(data){
            $('#quote, #author').empty();
            $('#quote').append("<p>" + data.quoteText + "</p>");
            $('#author').append("<p>" + "-" + data.quoteAuthor + "</p>");
            var twitterLinkRoot = "https://twitter.com/intent/tweet?text=" 
            /*this variable is the raw link from the html twitter button. Up next the parameters, in this case, the words of a generated                   quote, will be parsed and added in param form so that the user can tweet their favorite quotes*/

            var tweetQuote = data.quoteText + " " + data.quoteAuthor;

            var tweetQuote = twitterLinkRoot + tweetQuote.split(" ").join('%20');
            $('.twitter-share-button').attr('href',tweetQuote);
        });
    });
});
Stephen
@stephepush
Jul 03 2016 21:28
@Annis-Monadjem , what relationship would HTML have with the line above it?
var html
Expiratio
@Expiratio
Jul 03 2016 21:33
@stephepush I think i would do something like this
if (data.quoteAuthor isn't empty or undefined) {
var author = data.QuoteAuthor;
} else {
var author = "Unattributed";
}
forgive the pseudocode
Stephen
@stephepush
Jul 03 2016 21:35
no probs on the pseudocode, @Expiratio , thanks
CamperBot
@camperbot
Jul 03 2016 21:35
stephepush sends brownie points to @expiratio :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @expiratio |http://www.freecodecamp.com/expiratio
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 21:35
@stephepush: what i'm reading from the code is that html is probably re-initiated each time $.getJSON reads another JSON element from JSON array. Is my understanding correct ?
matthew3454
@matthew3454
Jul 03 2016 21:37
I'm still working on Use the Twitchtv JSON API and I can't figure out why it won't run. Is the problem that one of my urls are wrong? Any help is appreciated: http://codepen.io/codeabode20/pen/JKWGbJ?editors=0010
Stephen
@stephepush
Jul 03 2016 21:38
@Annis-Monadjem , it depends on whether or not that var was declared to mean a line of jQuery
is your line from a FCC execise?
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 21:38
@Stephen: yes it is from FCC exercise (but it was not running for me)
Evan W Paige
@EWPS07
Jul 03 2016 21:40
Hi all! I've been banging my head for the last few days over html5 audio. My sound clips are working on firefox(desktop and mobile), chrome(desktop ) not mobile, safari(neither), and native android browser also not working. From what I've read, I've got the right formats included but something is obviously still wrong. I feel that it's possible that there could be a security issue with http/https and codepen but I can't be sure. Has anyone worked with html5 audio? Know of any good resources to check out with good up to date info? Is there a better option for implementing audio that you would recommend?
Toni Shortsleeve
@KoniKodes
Jul 03 2016 21:41
@matthew3454 Try to add the bootstrap js below your jquery settings.
Stephen
@stephepush
Jul 03 2016 21:44
@Annis-Monadjem I would say it does reinitialize on each reload
the html variable is dependent on the json data coming from the api
and it is within scope of the function concerning the api
api json data
Expiratio
@Expiratio
Jul 03 2016 21:46
@EWPS07 I never used audio, but maybe you could try using a different format for your file. This might help https://en.wikipedia.org/wiki/HTML5_Audio#Supported_audio_coding_formats
Stephen
@stephepush
Jul 03 2016 21:47
@Annis-Monadjem, have you done any of the api projects?
Evan W Paige
@EWPS07
Jul 03 2016 21:47
@Expiratio Thanks! I'll head over there and check it out!
CamperBot
@camperbot
Jul 03 2016 21:47
ewps07 sends brownie points to @expiratio :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @expiratio |http://www.freecodecamp.com/expiratio
matthew3454
@matthew3454
Jul 03 2016 21:48
@KoniKodes I'll try it thanks
CamperBot
@camperbot
Jul 03 2016 21:48
matthew3454 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @konikodes |http://www.freecodecamp.com/konikodes
Toni Shortsleeve
@KoniKodes
Jul 03 2016 21:49
@matthew3454 Thank you for the brownie.. Also you may want to place the var = following after you open the document. FYI - It is offline until after July 5...
CamperBot
@camperbot
Jul 03 2016 21:49
konikodes sends brownie points to @matthew3454 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @matthew3454 |http://www.freecodecamp.com/matthew3454
matthew3454
@matthew3454
Jul 03 2016 21:51
@KoniKodes Does this mean there isn't anything significantly wrong with my code, and that the only reason nothing shows up is because Twitchtv is offline?
Toni Shortsleeve
@KoniKodes
Jul 03 2016 21:53
@matthew3454 Unfortunately, no. Your Display header should say that FCC is Offline - instead of online. It's always a good idea to bring in the bootstrap js when you are bootstrap css. And you have your doc. ready before naming a global var.
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 21:53

@stephepush - No i have not done any api projects. Still trying to make sense of this exercises before doing api projects. From what you are saying it appears to me that you are implying that on pressing the button the screen should populate with all json elements (not just the properties of it's last element) ? But this i cannot understand especially because

....
 $.getJSON("/json/cats.json", function(json) {
        var html = "";
        ....
 });
$(".message").html(html);
....

is implying that html should re-initialize each time a new element in the json array is read. Am I missing on something @stephepush ?

Toni Shortsleeve
@KoniKodes
Jul 03 2016 21:53
@KoniKodes should have doc ready...
Expiratio
@Expiratio
Jul 03 2016 21:56
@Annis-Monadjem do you mind if I ask what challenge?
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 21:57
@Expiratio: https://www.freecodecamp.com/challenges/convert-json-data-to-html
mr4199
@mr4199
Jul 03 2016 22:01
This message was deleted
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:05

@Expiratio: greatly appreciated any suggestions. In the simplified code:

....
 $.getJSON("/json/cats.json", function(json) {
        var html = "";
        ....
 });
$(".message").html(html);
....

my understanding is that variable json refers to successive elements of JSON cat.json array. So, i conclude from above code that screen should populate with only last cat.json element (not all elements) because html is at each turn initialized to empty string "". But this is not what I was told above. So I'm not sure if I understand how this codes functions. Please explain.

Expiratio
@Expiratio
Jul 03 2016 22:07
let me see, its been a while
greg
@wearenotgroot
Jul 03 2016 22:07
@Annis-Monadjem have you heard about asynchronous functions`?
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:10
@Expiratio: to continue with above analysis of the code. On processing each element of the cat.json array the $(".message").html(html); is sent to screen. Once entire code is run and bec html is initialized each time, on the final run $(".message").html(html); only will show cat.json properties of only last element. Am I correctly reading this code ?
Expiratio
@Expiratio
Jul 03 2016 22:10
@Annis-Monadjem i think you're right, every time you press the button html should be reset
Tyler Moeller
@TylerMoeller
Jul 03 2016 22:10
@Annis-Monadjem .getJSON gets the json hosted at: https://www.freecodecamp.com/json/cats.json
The HTML variable starts out empty, then you loop through the JSON to output all of it to the page.
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:11
@wearenotgroot : Asynchronous function - no tell me more about it please (don't remember it on FCC).
Toni Shortsleeve
@KoniKodes
Jul 03 2016 22:12
@matthew3454 I've sent a private message...
Expiratio
@Expiratio
Jul 03 2016 22:12
@Annis-Monadjem can you post the whole code?
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:12
@Expiratio : The whole code is:

<script>
  $(document).ready(function() {

      $("#getMessage").on("click", function() {
           $.getJSON("/json/cats.json", function(json) {

          var html = "";
          // Only change code below this line.

          json.forEach(function(val) {
              var keys = Object.keys(val);
              html += "<div class = 'cat'>";
              keys.forEach(function(key) {
                  html += "<b>" + key + "</b>: " + val[key] + "<br>";
              });
              html += "</div><br>";
          });

          // Only change code above this line.

            $(".message").html(html);

           });
      });
});
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>
@TylerMoeller : that is exactly what I'm not understanding while trying to read through the code (see above). Perhaps you can explain me ?
Tyler Moeller
@TylerMoeller
Jul 03 2016 22:14
@Annis-Monadjem It's using a forEach, which basically loops through the JSON and appends it to the html variable with +=
Expiratio
@Expiratio
Jul 03 2016 22:15
@Annis-Monadjem you said "On processing each element of the cat.json array the $(".message").html(html); is sent to screen." but it actually processess all the elements before printing them
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:18

@Expiratio @TylerMoeller : I'm reading it like this:
1) This runs on each cat.json element properties (val refers to the property):

json.forEach(function(val) {
              var keys = Object.keys(val);
              html += "<div class = 'cat'>";
              keys.forEach(function(key) {
                  html += "<b>" + key + "</b>: " + val[key] + "<br>";
              });
              html += "</div><br>";
          });

while
2) This one runs on each cat.json element:

$.getJSON("/json/cats.json", function(json) {

          var html = "";

Am i reading this code correctly ?

Tyler Moeller
@TylerMoeller
Jul 03 2016 22:19
@Annis-Monadjem Almost, for #2, it pulls down all of the data at https://www.freecodecamp.com/json/cats.json. The entire JSON object, not one bit at a time. It only runs once.
#1, you are correct. That's what's looping through all the data captured with your $.getJSON - all three of the elements
Andrey Tvorozhkov
@xenx
Jul 03 2016 22:22
Hey! Can you help me with http://xenx.ml/?
Expiratio
@Expiratio
Jul 03 2016 22:22
val in that case is referring to each object in the cats.json array
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:24
@TylerMoeller : Ok. Then it runs #1 first loop, next runs
$(".message").html(html);
next runs
var html = ""; and before the next loop html variable is cleared out. So how is it possible that html contains properties of all cat.json elements ?
Tyler Moeller
@TylerMoeller
Jul 03 2016 22:25
@Annis-Monadjem Not quite, it doesn't run $(".message").html(html); until it has looped through all of the JSON. It would be helpful to view it with some logging - do you know how to use the developer tools in your browser?
If so, add a console.log(html) to the end of the forEach:
      // Only change code below this line.
      json.forEach(function (val) {
        var keys = Object.keys(val);
        html += "<div class = 'cat'>";
        keys.forEach(function (key) {
          html += '<b>' + key + '</b>: ' + val[key] + '<br>';
          console.log(html)
        });
Expiratio
@Expiratio
Jul 03 2016 22:26
Yeah, as Tyler said, you can see $(".message").html(html); is outside the forEach loop
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:28

@TylerMoeller : hold on, I'm not able to run this code locally on my machine bec of

           $.getJSON("/json/cats.json", function(json) {

i.e. bec of "/json/cats.json" unless you tell me how to do it please?

Tyler Moeller
@TylerMoeller
Jul 03 2016 22:28
@Annis-Monadjem Unfortunately, you can only run that code from freecodecamp.com. They disable other domains from accessing it.

@Annis-Monadjem This is a simplified view of how the code works:

var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function (val) {
  sum += val;
});

console.log(sum);

Sum is 6 in the end.

Assume arr is your json object and sum is your html variable
matthew3454
@matthew3454
Jul 03 2016 22:37
@KoniKodes I moved the var= following and added js bootstrap: http://codepen.io/codeabode20/pen/JKWGbJ?editors=0010
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:41
@TylerMoeller : the simplified code you sent me I understand well. I also ran the developer's tool on my browser and see what you are telling me. But still I cannot come in terms with understanding how that is working in the code.
Greg Duncan
@GregatGit
Jul 03 2016 22:45
@jwoo92 Thanks for the list - I'm checking it out now
CamperBot
@camperbot
Jul 03 2016 22:45
gregatgit sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @jwoo92 |http://www.freecodecamp.com/jwoo92
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 22:46
@TylerMoeller: Thanks, yes now I understand it. Thanks alot man, that was really very very helpful!
CamperBot
@camperbot
Jul 03 2016 22:46
annis-monadjem sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 639 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jul 03 2016 22:48
@Annis-Monadjem Glad you got it. This is another way to run it locally and see what's happening with the html variable:
var json = [
{
  id: 0,
  imageLink: 'https://s3.amazonaws.com/freecodecamp/funny-cat.jpg',
  codeNames: [
    'Juggernaut',
    'Mrs. Wallace',
    'Buttercup',
  ],
},
{
  id: 1,
  imageLink: 'https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg',
  codeNames: [
    'Oscar',
    'Scrooge',
    'Tyrion',
  ],
},
{
  id: 2,
  imageLink: 'https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg',
  codeNames: [
    'The Doctor',
    'Loki',
    'Joker',
  ],
},
];

var html = '';

// Only change code below this line.

json.forEach(function (val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function (key) {
    html += '<b>' + key + '</b>: ' + val[key] + '<br>';
    console.log(html + '\n\n');
  });

  html += '</div><br>';

  console.log('Final HTML Output: ', html);
});
falconpunch12
@falconpunch12
Jul 03 2016 22:51
anyone available for a quick question?
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:02
@TylerMoeller: I'm running that in browser but it doesn't work for me. I'm just not able to get why it is not rendering as it should. Maybe you can still help me with this one.
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:03
@matthew3454 In js line 7(?) if (data1.stream === "null") { -- remove the quotes around null. Otherwise JS is looking for a string.
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:03
@TylerMoeller: I open any browser, refresh screen, check on Ctrl-Shift-I / F12 on both Chrome and on Slimjet and none report the console output. Any clues?
@TylerMoeller : I get the concept though. I just would like to see how i can run it successfully ?
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:05
@Annis-Monadjem I'm noticing that now too - it used to report it in the console, but they seem to be preventing it for some reason with this exercise. If you run that code locally, from the command line, for example, you will see the output.
falconpunch12
@falconpunch12
Jul 03 2016 23:05
can someone please look at my code - http://codepen.io/falconpunch/pen/JKJYbz?editors=1100
im trying to get the navbar items to highlight as you scroll through the page
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:06
I messaged you the other error that may help...
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:07
@hushangnaim This may be helpful: http://getbootstrap.com/javascript/#scrollspy
Be sure to also add Bootstrap to the JS section in your codepen settings
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:07
@TylerMoeller : that's what is not working for me - locally i'm not able to execute it and see the console.log output. So I run the local code you wrote me and it is not outputting anything. Any ideas please?
falconpunch12
@falconpunch12
Jul 03 2016 23:08
@TylerMoeller thank you
CamperBot
@camperbot
Jul 03 2016 23:08
hushangnaim sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 640 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:08
@Annis-Monadjem What program are you using to run it from the command line?
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:09
@TylerMoeller : I'm using vim as my editor and Slimjet, Firefox and alternatively Chrome as browsers.
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:09
@Annis-Monadjem I think what @TylerMoeller is saying is that you need to go your JS settings on codepen and add Bootstrap.js from the dropdown.
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:10
@Annis-Monadjem I think vim needs a plugin to run javascript. I just use node.js and run node myFileName.js from the command line
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:11

@KoniKodes - oh I thought that @TylerMoeller send me the code:

var json = [
{
  id: 0,
  imageLink: 'https://s3.amazonaws.com/freecodecamp/funny-cat.jpg',
  codeNames: [
    'Juggernaut',
    'Mrs. Wallace',
    'Buttercup',
  ],
},
{
  id: 1,
  imageLink: 'https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg',
  codeNames: [
    'Oscar',
    'Scrooge',
    'Tyrion',
  ],
},
{
  id: 2,
  imageLink: 'https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg',
  codeNames: [
    'The Doctor',
    'Loki',
    'Joker',
  ],
},
];

var html = '';

// Only change code below this line.

json.forEach(function (val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function (key) {
    html += '<b>' + key + '</b>: ' + val[key] + '<br>';
    console.log(html + '\n\n');
  });

  html += '</div><br>';

  console.log('Final HTML Output: ', html);
});

to be ran locally ???

Tyler Moeller
@TylerMoeller
Jul 03 2016 23:11
@Annis-Monadjem Yes, run that locally. It outputs the following:
<div class = 'cat'><b>id</b>: 0<br>


<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br>


<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br>


Final HTML Output:  <div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp
/funny-cat.jpg<br><b>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br>
<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b>: 1<br>


<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b>: 1<br><b>imageLink
</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br>


<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b>: 1<br><b>imageLink
</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br><b>codeNames</b>: Oscar,Scrooge,Tyrion<br>


Final HTML Output:  <div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp
/funny-cat.jpg<br><b>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b
>: 1<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br><b>codeNames</b>: Oscar,Scro
oge,Tyrion<br></div><br>
<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b>: 1<br><b>imageLink
</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br><b>codeNames</b>: Oscar,Scrooge,Tyrion<br></div>
<br><div class = 'cat'><b>id</b>: 2<br>


<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b>: 1<br><b>imageLink
</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br><b>codeNames</b>: Oscar,Scrooge,Tyrion<br></div>
<br><div class = 'cat'><b>id</b>: 2<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/mischievous-cat
.jpg<br>


<div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg<br><b
>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b>: 1<br><b>imageLink
</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br><b>codeNames</b>: Oscar,Scrooge,Tyrion<br></div>
<br><div class = 'cat'><b>id</b>: 2<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/mischievous-cat
.jpg<br><b>codeNames</b>: The Doctor,Loki,Joker<br>


Final HTML Output:  <div class = 'cat'><b>id</b>: 0<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp
/funny-cat.jpg<br><b>codeNames</b>: Juggernaut,Mrs. Wallace,Buttercup<br></div><br><div class = 'cat'><b>id</b
>: 1<br><b>imageLink</b>: https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg<br><b>codeNames</b>: Oscar,Scro
oge,Tyrion<br></div><br><div class = 'cat'><b>id</b>: 2<br><b>imageLink</b>: https://s3.amazonaws.com/freecode
camp/mischievous-cat.jpg<br><b>codeNames</b>: The Doctor,Loki,Joker<br></div><br>
That should help give an idea of what's going on in each of the loops.
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:14
@TylerMoeller : Wow you are genius man! I like that! It is working for me too.
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:15
:clap: Glad it's working for you now. :)
George Phalen
@gphalen
Jul 03 2016 23:15
Can anyone help with the TwitchTV project? I can access the status of an inactive account, but not the message, which is what I need.http://codepen.io/gphalen/pen/WxOZvZ
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:16
@TylerMoeller : Thanks Tyler you're very helpful!
CamperBot
@camperbot
Jul 03 2016 23:16
annis-monadjem sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: annis-monadjem already gave tylermoeller points
George Phalen
@gphalen
Jul 03 2016 23:18
error is on line 89
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:19
@TylerMoeller: Just a quick question. I like to follow the the project rules by not reading solutions before I complete my project. I'm embarking on "Random Quote Machine". Is there any area I need to read before (i.e. beside FCC ) to succeed on this project?
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:19
@gphalen I see 74 lines of code. What message are you referring to? JSON should return something like stream: null
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:19
@gphalen The message says the account is "Not Currently Streaming" so that would make them Offline. And the No Account Guys are showing up in your console.log.
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:20
@Annis-Monadjem That exercise you just did is a good primer for using an API to get quotes. You'll use a getJSON method and present the quote in HTML. In general, I think Eloquent Javascript is a good read for anyone trying to get better at JavaScript: http://eloquentjavascript.net
George Phalen
@gphalen
Jul 03 2016 23:21
@TylerMoeller only 74? that's weird. the issue is the "fail" function at the very bottom. I can access err.status but not err.message. "status" and "message" are both in the JSON for inactive accounts, so I'm confused.
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:21
@gphalen Sorry, I hit tidy code so I could read it better and it shrinks it down to 74
George Phalen
@gphalen
Jul 03 2016 23:22
oh, sorry, should have tidied it before posting
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:22
@gphalen perhaps if you change the append to be status="Account Closed"
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:22
@gphalen That .fail() will only return failures if the .getJSON doesn't succeed
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:22
A thousand Thanks @TylerMoeller
CamperBot
@camperbot
Jul 03 2016 23:22
annis-monadjem sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: annis-monadjem already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jul 03 2016 23:22
Happy to help @Annis-Monadjem
George Phalen
@gphalen
Jul 03 2016 23:23
@TylerMoeller I know. There are two inactive accounts in the members array, so there are two failures.
@KoniKodes like, err.message+"Account Closed"?
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:24
@gphalen "FreeCodeCamp", , "noobs2ninjas", - it doesn't like that extra comma. Yes, just like that :-)
George Phalen
@gphalen
Jul 03 2016 23:25
@KoniKodes thanks, I removed extra comma, but still not seeing the message :/
CamperBot
@camperbot
Jul 03 2016 23:25
gphalen sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @konikodes |http://www.freecodecamp.com/konikodes
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:28
@gphalen Thank you for the brownie. You will find the message for both on the console as a 402/404 error. It could not load because it doesn't exist. So, you may want to check for those server response errors and then call them err.message --- StreamerName Account Closed
CamperBot
@camperbot
Jul 03 2016 23:28
konikodes sends brownie points to @gphalen :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @gphalen |http://www.freecodecamp.com/gphalen
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:29
@TylerMoeller : I'm still perplexed with this "Build a Random Quote Machine" because the API in the case of the cat.json is coming from some FCC site. While I'm not sure what I'm expected to do in the Random Quote Machine. Is it that I should around the internet for some sites that hold json type objects with quotes? Or should I create in my code a sample .json object with quotes and place it on codepen. Please comment.
George Phalen
@gphalen
Jul 03 2016 23:30
@KoniKodes sorry, how do I see the console?
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:31
@Annis-Monadjem Both will work because the practice is to work with JSON. If you find a site that you like, then you can use the api to pull in the quotes. However, if you only find one quote on 5-10 sites, then put them in an array and use JSON.
Annis Monadjem
@Annis-Monadjem
Jul 03 2016 23:31
@KoniKodes: got it and thanks @KoniKodes
CamperBot
@camperbot
Jul 03 2016 23:31
annis-monadjem sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @konikodes |http://www.freecodecamp.com/konikodes
matthew3454
@matthew3454
Jul 03 2016 23:32
@KoniKodes yes maam
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:34
@KoniKodes I'm sorry, I found it in the Chrome inspector Console. It should show up in your console if you make a call for the error and console.log() the info. That console access is from the bottom of your editor view. I tend to inspect everything because codes don't always work right the first time.
@matthew3454 :-) Did it work?
matthew3454
@matthew3454
Jul 03 2016 23:34
@KoniKodes It did!! Thanks!
CamperBot
@camperbot
Jul 03 2016 23:34
matthew3454 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @konikodes |http://www.freecodecamp.com/konikodes
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:34
@gphalen I'm sorry, I found it in the Chrome inspector Console. It should show up in your console if you make a call for the error and console.log() the info. That console access is from the bottom of your editor view. I tend to inspect everything because codes don't always work right the first time.
@matthew3454 Great! Can't wait to see your final output.
@matthew3454 Thank you for the brownies.
CamperBot
@camperbot
Jul 03 2016 23:37
konikodes sends brownie points to @matthew3454 :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @matthew3454 |http://www.freecodecamp.com/matthew3454
Toni Shortsleeve
@KoniKodes
Jul 03 2016 23:37
Off to prepare dinner. I hope everyone enjoys great fireworks this weekend :-)