These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
May 2017
Matt
@mdmpdx
May 11 2017 00:01

Working on Wikipedia app and trying to get my form working properly for 2 different views... I used this code:

  if (document.getElementById('resultsView').style.display = 'none') {
    var input = document.getElementById("userInput1").value;
  } else {
     var input = document.getElementById("userInput2").value;   
  }

to basically use the form input displayed (there is the initial form, centered on the page, and then another form in the navbar which was displaying with results, until I tried to get this working) https://codepen.io/mdmpdx/pen/VbQOWO

I'm wondering how to correct the issue, when you search and it goes blank -- console isn't telling me anything
Josep Maria Salvia Hornos
@josalhor
May 11 2017 00:05
@mdmpdx can't get it working
it's quite probably my fault somehow, it looks like that method can work, will try again tomorrow, thanks @mdmpdx
CamperBot
@camperbot
May 11 2017 00:05
josepsalvia sends brownie points to @mdmpdx :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @mdmpdx |http://www.freecodecamp.com/mdmpdx
Gulsvi
@gulsvi
May 11 2017 00:06
@JosepSalvia This is the flexbox way: https://codepen.io/skycoder/pen/KmoPjQ?editors=1100
No bootstrap in that pen
Spencer Bartlett
@sbmercury
May 11 2017 00:06

Working on my random quote machine trying to convert json to html, the json is loading in fine (console.log is printing exactly what I'd expect but the page just says undefined, not the data I'm expecting

                            var html = "";
                                html += "<h1 class='quote'>";
                                console.log(json);
                                html += json["quote"];
                                html+= "</h1>";
                                $(".message").html(html);

here's a sample of the json it's working with: {"quote":"Talent does what it can; genius does what it must.","author":"Edward George Bulwer-Lytton","category":"Famous"}

yash5657
@yash5657
May 11 2017 00:15
@astrogeek74 yeah it looks like this 0000 0001 4275 6431 0000 1000 0000 0800
0000 1000 0000 0087 0000 0000 0000 0000
0000 0000 0000 0000 0000 0000 0000 0800
0000 0800 0000 0000 0000 0000 0000 0000
0000 0000 0000 0002 0000 0000 0000 0004
0000 0001 0000 1000 3153 636f 6d70 0000
John Edwards
@javajohnHub
May 11 2017 00:18
Anyone have some sweet jquery pen they want to share
Matt
@mdmpdx
May 11 2017 00:26
Still stumped by the way this is behaving... I have the wiki search working and displaying results, but if you search again from the navbar, it just turns up a blank page https://codepen.io/mdmpdx/pen/VbQOWO
Scott Daves
@astrogeek74
May 11 2017 00:35
@yash5657 I have never seen one created like that. all CSS files have to be built such that the browser knows how to read them, unless they're running some majic where the file exists in binary format, and another tool such as js, php, etc., is reading the file and rendering it to the browser.
iso
@iso1048
May 11 2017 00:36
@SkyCoder01 i do not understand how to get the weather icons on the page
yash5657
@yash5657
May 11 2017 00:40
@astrogeek74 that's right, I was so surprised to see css file like that
@astrogeek74 thanks for checking in though :)
CamperBot
@camperbot
May 11 2017 00:42
yash5657 sends brownie points to @astrogeek74 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @astrogeek74 |http://www.freecodecamp.com/astrogeek74
JD Tadlock
@jdtdesigns
May 11 2017 01:11
@mdmpdx if(document.getElementById('resultsView').style.display = 'none') is your problem
should be if(document.getElementById('resultsView').style.display == 'none')
you can set states of variables and elements in an if condition while checking that condition
also, your if statement will probably not work since you're setting the var inside the if block
if blocks will have their own scope
Matt
@mdmpdx
May 11 2017 01:17
@jdtdesigns setting it to if(document.getElementById('resultsView').style.display == 'none') causes it to not display results at all
JD Tadlock
@jdtdesigns
May 11 2017 01:18
your logic will trickle down :P
need to do a little refactoring and it'll work
Matt
@mdmpdx
May 11 2017 01:18
i've moved the var input declaration outside of the if, but the value assignment needs to happen in the condition
JD Tadlock
@jdtdesigns
May 11 2017 01:21
i can give you a way if you need it @mdmpdx
Matt
@mdmpdx
May 11 2017 01:21
i'm mainly keen to understand why the way i have it is not working... it works once, but then not a second time
JD Tadlock
@jdtdesigns
May 11 2017 01:22
var results_loaded = false;

function getNewResults() {
  var url, data,
        displayResults = document.getElementById("displayResults"),
        results = [],  input, 
        resultView  = document.getElementById('resultsView'),
        input1 = document.getElementById('userInput1'),
        input2 = document.getElementById('userInput2');

  if  ( !results_loaded ) {
    input = input1.value;
    results_loaded = true;
  } else input = input2.value;
you don't need to use the var keyword everytime
you can just separate with a comma
Matt
@mdmpdx
May 11 2017 01:24
I see, thanks @jdtdesigns ... this makes sense
CamperBot
@camperbot
May 11 2017 01:24
mdmpdx sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 927 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
May 11 2017 01:25
welcome ;)
Matt
@mdmpdx
May 11 2017 01:25
that's good to know as well re: var, i'm still learning so it's good to learn efficiency
JD Tadlock
@jdtdesigns
May 11 2017 01:25
you learn something every day and sometimes twice a day lol
Matt
@mdmpdx
May 11 2017 01:30
@jdtdesigns :laughing: :+1:
JD Tadlock
@jdtdesigns
May 11 2017 01:30
@mdmpdx You also shouldn't declare var's inside a for loop. Declare them before as a null value or undefined and then set them inside the for.
just how you did above the if
MROB0T
@MROB0T
May 11 2017 01:31
hey i need help i want to know how to make it were a picture wont double like so
https://codepen.io/MR0B0T/pen/qmoBbB
if you scroll down far enough you will see it
JD Tadlock
@jdtdesigns
May 11 2017 01:33
@MROB0T background-repeat: no-repeat;
Gulsvi
@gulsvi
May 11 2017 01:34
@gothamknight It looks like you have the JSON for the icon figured out. Next steps:
  1. Add the JS Library for the icons: https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js
  2. Replace your icon div with a canvas element: <canvas id="weather-icon" width="64" height="64">loading...</canvas>
  3. Add the skycon in your code:
    var skycons = new Skycons({color: 'black'});
    skycons.add(document.getElementById('weather-icon'), json.currently.icon);
    skycons.play();
Change the width, height, and color as needed.
iso
@iso1048
May 11 2017 01:39
@SkyCoder01 when you say add the js library, do i paste the url into the js settings where is says "add external js?"
Gulsvi
@gulsvi
May 11 2017 01:39
@gothamknight Yes, just like adding the jQuery library
iso
@iso1048
May 11 2017 01:39
@SkyCoder01 cool. thanks again.
CamperBot
@camperbot
May 11 2017 01:39
gothamknight sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1351 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 11 2017 01:40
@jdtdesigns Don't variable declarations get pushed up to the function scope? Haven't heard that we should not use var inside a for loop before.
I'm too lazy to read above so may be missing some context :p
@MROB0T This article helped me get full screen background images looking better: https://css-tricks.com/perfect-full-page-background-image/
Ken Haduch
@khaduch
May 11 2017 01:52
@SkyCoder01 - I would take a guess that using a var inside a for loop might have some ramifications as the variable is probably created for each iteration of the loop, although I don't think that I've heard that spelled out, it's an intuitive guess. I usually try to avoid that, declare them outside the loop or in the loop initialization.
JD Tadlock
@jdtdesigns
May 11 2017 01:53
@SkyCoder01 It's a controversy in the js world. I've been blasted by seasoned devs for locally scoping vars in loops. The 'old' thought is, declaring the variable over and over vs once. This is a wive's tale since vars are instantiated before the code even runs and only exist once, but the value can be changed. There isn't anything wrong with inner declarations per say, but if you get a job under a senior dev, they will more than likely call you a noob for locally scoping them lol.
Muhammad Hussain
@ReactorboY
May 11 2017 01:54
hey can anyone help me out ??
JD Tadlock
@jdtdesigns
May 11 2017 01:56
@ReactorboY You pop a tire, need lunch money? We need details lol
Ken Haduch
@khaduch
May 11 2017 01:56
@ReactorboY - you don't have to ask - just post your question and code or link.
@jdtdesigns :)
Muhammad Hussain
@ReactorboY
May 11 2017 01:57

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Responsive</title>
<script src="js/jquery.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.min.js" charset="utf-8"></script>
</head>
<body>
<h3 class="text-center text-primary">jQuery Playground</h3>
</body>
</html>

text-primary is not working while text-center is working whne bootstrap set up locally
MROB0T
@MROB0T
May 11 2017 01:58
thanks @jdtdesigns
CamperBot
@camperbot
May 11 2017 01:58
mrob0t sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 928 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
MROB0T
@MROB0T
May 11 2017 01:58
and thanks @SkyCoder01
CamperBot
@camperbot
May 11 2017 01:58
mrob0t sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1352 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@OrangeKulture
May 11 2017 02:08
hey guys
Muhammad Hussain
@ReactorboY
May 11 2017 02:14
animated shake is not working.. what to do ??
MROB0T
@MROB0T
May 11 2017 02:15
@MROB0T
I've run into a problem i need to know how to keep the picture without repeating on the whole page
https://codepen.io/MR0B0T/pen/qmoBbB
JD Tadlock
@jdtdesigns
May 11 2017 02:17
@MROB0T background-attachment: fixed;
MROB0T
@MROB0T
May 11 2017 02:18
finally thank you @jdtdesigns
CamperBot
@camperbot
May 11 2017 02:18
mrob0t sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: mrob0t already gave jdtdesigns points
MROB0T
@MROB0T
May 11 2017 02:18
so many people would not get what i wanted lol
JD Tadlock
@jdtdesigns
May 11 2017 02:20
welcome @MROB0T
MROB0T
@MROB0T
May 11 2017 02:33

is there something wrong with this
@MROB0T
$(document).ready(function() {
$("#target1").addClass("animated bounce");
});
im trying to add it to this

<h2 id="target1"class="text-primary text-center target"> Albert Einstein's Timeline and Accomplishments</h2>

JD Tadlock
@jdtdesigns
May 11 2017 02:34
@MROB0T post your pen
Anything lol
iso
@iso1048
May 11 2017 02:37
@SkyCoder01 how can i offset div elements within a row in bootstrap4?
Daniel
@DanJP2016
May 11 2017 02:38
@MROB0T you put it in the css block, that needs to go in the javascript section and it should work
MROB0T
@MROB0T
May 11 2017 02:38
oh lol ik it felt in a weird spot
JD Tadlock
@jdtdesigns
May 11 2017 02:38
@MROB0T Your html gave me cancer lol
MROB0T
@MROB0T
May 11 2017 02:39
ik
:(
JD Tadlock
@jdtdesigns
May 11 2017 02:40
@MROB0T You need to add jQuery (Settings->JS->Quick Add->jQuery) and animate css (Settings->CSS->type animate into one of the inputs->choose animate css)
Augusto
@hackedWifi
May 11 2017 03:08
is anybody doing the twitchtv challenge. I cant get responses from https://wind-bow.gomix.me
Matt Young
@YoungMatthewM
May 11 2017 03:19
@hackedWifi switch it from gomix to glitch
I know it doesn't say anywhere in the documentation, but it worked for me
I think gomix does a redirect that gets caught up in CORS
iso
@iso1048
May 11 2017 03:26
@SkyCoder01 never mind.
Augusto
@hackedWifi
May 11 2017 03:28
@YoungMatthewM this is why I dislike following the instruction on this videos. They are outdated . Do you mind to elaborate about glitch?
Matt Young
@YoungMatthewM
May 11 2017 03:32
@hackedWifi oh, just change the domain in your call to https://wind-bow.glitch.me
and you can use the browser to see what the responses look like for each kind of call
Augusto
@hackedWifi
May 11 2017 03:39
thank you @YoungMatthewM
CamperBot
@camperbot
May 11 2017 03:39
hackedwifi sends brownie points to @youngmatthewm :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @youngmatthewm |http://www.freecodecamp.com/youngmatthewm
Enitan Evil
@ekevjn
May 11 2017 03:56
hi hoa
CodingDoc
@CodingDoc
May 11 2017 04:06
Can someone help me out. Working on the profile lookup section in javascript and I can't seem to get it to work. Here is my code:

function lookUpProfile(firstName, prop){
// Only change code below this line
for (i = 0; i < contacts.length; i++){
if (contacts[i].firstName === firstName && contacts[i].hasOwnProperty(prop)){
return contacts[i].prop;
}
} return "No such contact";
// Only change code above this line
}

//

Jorge
@OrangeKulture
May 11 2017 04:10
you have to return no contact OR no property @CodingDoc
CodingDoc
@CodingDoc
May 11 2017 04:11
i dont follow
Jorge
@OrangeKulture
May 11 2017 04:12
the challenge says that when you pass in the arguments, you have to return no such contact if no contact exists, or, no such property, if the contact does exist, but doesnt have the property
CodingDoc
@CodingDoc
May 11 2017 04:12
oh...
is the rext ok?
rest*
Jorge
@OrangeKulture
May 11 2017 04:14
well the idea you got is definitely in the right direction .. loop through contacts, if contact [i] === first name, then you should check if the contact has the property
if you reach the end of the array with no matches, return no such contact
Pagnito
@Pagnito
May 11 2017 04:16
@jdtdesigns hey r u on?
CodingDoc
@CodingDoc
May 11 2017 04:20
Ah, I shouldn't have nested them both in the if-else
iso
@iso1048
May 11 2017 04:27
@SkyCoder01 in your weather app, how do you keep that black horizontal panel at the bottom of the page?
prashant12121
@prashant12121
May 11 2017 04:28
hi , why would my home , contacts and about button not work while portfolio works http://codepen.io/prashant85/pen/oWoeqV?editors=1000
Bill Hefty
@bhefty
May 11 2017 04:36
@prashant12121 Your other divs show id="#home" instead of id="home". Drop the # in the actual div and you should be good
Also your first <li> in the nav has the href instead of the <a>
CodingDoc
@CodingDoc
May 11 2017 04:37
function lookUpProfile(firstName, prop){
// Only change code below this line
for (i = 0; i < contacts.length; i++){
if (contacts[i].firstName === firstName){
if (contacts[i].hasOwnProperty(prop)){
return contacts[i].prop;
}return "No such property";
}
} return "No such contact";
// Only change code above this line
}
getting the proper endings now, however I'm still not getting anything with values that are actually present
Hoang Thanh Tu
@hoangthanhtu
May 11 2017 04:39
@CodingDoc return contacts[i].prop; << this line is incorrect
CodingDoc
@CodingDoc
May 11 2017 04:39
please explain
Hoang Thanh Tu
@hoangthanhtu
May 11 2017 04:39
because prop is an argument, it is not properties of contacts
change it to return contacts[i][prop];
CodingDoc
@CodingDoc
May 11 2017 04:40
was just about to ask that
hha
Thanks @hoangthanhtu and @OrangeKulture , I have been stuck on this question for a few days and it has been driving me crazy. Simple syntax errors on my part.
CamperBot
@camperbot
May 11 2017 04:40
codingdoc sends brownie points to @hoangthanhtu and @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @orangekulture |http://www.freecodecamp.com/orangekulture
:cookie: 293 | @hoangthanhtu |http://www.freecodecamp.com/hoangthanhtu
Gulsvi
@gulsvi
May 11 2017 04:41

@gothamknight I use flex for my sticky footer. Wrap everything in <main></main> and then put <footer></footer> after it:

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

Learned it from here: http://materializecss.com/footer.html

Jorge
@OrangeKulture
May 11 2017 04:41
welcome! @CodingDoc
Hoang Thanh Tu
@hoangthanhtu
May 11 2017 04:41
@CodingDoc you're welcome
Gulsvi
@gulsvi
May 11 2017 04:42
@prashant12121 Your ID values should not start with a #. For example: id="#home" should be id="home"
Sam Griffen
@ssgriffen
May 11 2017 04:51
Does anyone know if you can use Angular Material with Angular 2?
prashant12121
@prashant12121
May 11 2017 05:10
thanks @bhefty that worked
CamperBot
@camperbot
May 11 2017 05:10
prashant12121 sends brownie points to @bhefty :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @bhefty |http://www.freecodecamp.com/bhefty
prashant12121
@prashant12121
May 11 2017 05:12
yeah @SkyCoder01 bhefty mentioned it above thanks anyway
CamperBot
@camperbot
May 11 2017 05:12
prashant12121 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1354 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Nikhil
@jerof
May 11 2017 05:12
hello! back to coding after a year! excited :fire:
Vibhaas
@vibhaas
May 11 2017 05:14
@jerof hi
electricpen
@electricpen
May 11 2017 05:46
I have a question which I am hoping has a good answer so I don't have to rewrite too much of my project =/
Vibhaas
@vibhaas
May 11 2017 05:47
@electricpen ok..
electricpen
@electricpen
May 11 2017 05:47
I am working on the twitch project and got most of the way through it when I realized I can't seem to detect the nonexistent entries
I am using the actual twitch api since I had a key...
@vibhaas
function test(data){
  console.log(data);
}

$(document).ready(function() {
  var clientID = "client_id=c8b91gyf50xm0vz2som3369elbntsy";
  var val = "comster404";
  var url = "https://api.twitch.tv/kraken/channels/" + val + "?" + clientID;
  $.getJSON(url, test);
});
this should theoretically return an object with like a 404 status or something
if you swap out the 'val' variable with an actual twitch channel name
it seems to work
but doesn't work for the dead accounts, console doesn't log anything at all
electricpen
@electricpen
May 11 2017 05:54
@vibhaas hmmm but they are basically saying to make the exact same api call that I already am
Vibhaas
@vibhaas
May 11 2017 05:54
@electricpen could you send the link of the pen?
electricpen
@electricpen
May 11 2017 05:55
is what it suggests
that is exactly what is in my code above
that isn't my whole project, the actual entire project has other issues as well but I can link that if you want
I was trying to isolate this specific issue first
Vibhaas
@vibhaas
May 11 2017 05:59
@electricpen console says: Failed to load resource: the server responded with a status of 404 ()
@electricpen
$.getJSON("example.json", function() { alert("success"); }) .success(function() { alert("second success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });
write your code in the .error
electricpen
@electricpen
May 11 2017 06:03
so it isn't going to just return an object like normal, I have to place it in an error function?
Vibhaas
@vibhaas
May 11 2017 06:03
yep.. it seems so
electricpen
@electricpen
May 11 2017 06:05
@vibhaas ok I'm going to show you the entire pen now for the other problem - I can fix that part later now that I know what is wrong
as you can see only the live channels get their status written
There is an if statement controlling what is written but only the live half of it is actually working
@vibhaas
if (streaminfo.stream === null) {
      $(streamName).append(streamOffline);
    } else {
      $(streamName).append(streamOnline);
    }
thats the if statement
only the online part works
Fuad Ragib
@RagibFuad
May 11 2017 06:08
bootstrap's offset class is not working here in codepen.io but it's working in my editor. what's wrong?my code on codepen https://codepen.io/ragib/details/wdmKRX/ please help me
electricpen
@electricpen
May 11 2017 06:09
if I switch the append targets it prints the offline message in the online streams and blank for the offline ones
so I know that the statement works
just the if statement is not triggering on the null comparison I guess
Vibhaas
@vibhaas
May 11 2017 06:11
@RagibFuad see the bootstrap version
@electricpen i used
      if (data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "Account Closed";
        status = "offline";
      } else {
        game = data.stream.game;
        status = "online";
      }
electricpen
@electricpen
May 11 2017 06:14
thats basically the same as mine minus the undefined part since I can't do that with the actual twitch api apparently
@vibhaas but for some reason the offline portion of the logic isn't triggering
@vibhaas even though I use the exact same ' if (data.stream === null)' comparison
xyedabz
@xyedabz
May 11 2017 06:15
do you people copy paste codes from sources or memorize everything ?
Vibhaas
@vibhaas
May 11 2017 06:16
@electricpen
  // for each channel 
  $.getJSON(https://wind-bow.gomix.me/twitch-api/streams/' + channel + '?callback=?", function(data) {
      var game,
          status;
      if (data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "Account Closed";
        status = "offline";
      } else {
        game = data.stream.game;
        status = "online";
      }
     // more code here...
@xyedabz mostly memorise.. copy paste for huge codes like more than 5 lines
@electricpen
  // for each channel 
  $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + channel + '?callback=?", function(data) {
      var game,
          status;
      if (data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "Account Closed";
        status = "offline";
      } else {
        game = data.stream.game;
        status = "online";
      }
     // more code here...
forgot to write ' in the url
electricpen
@electricpen
May 11 2017 06:19
yeah I can't figure out why mine doesn't work from looking at that, the if statement is structured exactly the same, you are just using variable flags inside the if statement where I manipulate the DOM immediately
even if I just put console.log in the if statement the null statement doesn't print
@vibhaas oh well I guess I'll see if I can figure it out in the morning, but its really weird since our if statements are identical
Vibhaas
@vibhaas
May 11 2017 06:21
@electricpen i am not sure why that is happening.. im sry i could help you..
electricpen
@electricpen
May 11 2017 06:22
thanks for trying, and you did help with the first question! =) @vibhaas
CamperBot
@camperbot
May 11 2017 06:22
electricpen sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @vibhaas |http://www.freecodecamp.com/vibhaas
Vibhaas
@vibhaas
May 11 2017 06:22
:smile:
Fuad Ragib
@RagibFuad
May 11 2017 06:27
@vibhaas thank you
CamperBot
@camperbot
May 11 2017 06:27
ragibfuad sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @vibhaas |http://www.freecodecamp.com/vibhaas
Vibhaas
@vibhaas
May 11 2017 06:27
@RagibFuad np
iso
@iso1048
May 11 2017 07:20
@SkyCoder01 i did what you said but it did not seem to do anything. I sent you a pm.
Ashish verma
@ashish1500616
May 11 2017 07:31
hey any1 buliding tic tac toe game??
@rohitdesigner srry rohit But I dont have much knowledge with NodeJs.
hello developers.?
can any1 guide me through building a tictactoe game.
Thomas
@sjurs1
May 11 2017 07:34
How did you guys start going about the quote generator?
Marianissimus
@Marianissimus
May 11 2017 07:35
@sjurs1 well, if you can't find a decent working api, you can do as I did: make your own
Ashish verma
@ashish1500616
May 11 2017 07:36
@sjurs1 1.Design a page.
2.find an api to fetch quote each time it's requested.
3.collaborate the api with your page.
Marianissimus
@Marianissimus
May 11 2017 07:36
@sjurs1 create a collection of quotes, store it in a json file, and then use it in your app
Thomas
@sjurs1
May 11 2017 07:36
Thanks @Marianissimus @ashish1500616 , I'm off!
CamperBot
@camperbot
May 11 2017 07:36
sjurs1 sends brownie points to @marianissimus and @ashish1500616 :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @marianissimus |http://www.freecodecamp.com/marianissimus
:cookie: 308 | @ashish1500616 |http://www.freecodecamp.com/ashish1500616
Ashish verma
@ashish1500616
May 11 2017 07:37
hey any developer from ,patna India.
None.😌
shivam gupta
@shivamg11000
May 11 2017 07:41
@ashish1500616 I am from delhi
Ashish verma
@ashish1500616
May 11 2017 07:42
@shivamg11000 hello .nice to know that.
Vibhaas
@vibhaas
May 11 2017 07:42
@shivamg11000 my native place is varanasi, but i live in bangalore
@ashish1500616
Ashish verma
@ashish1500616
May 11 2017 07:44
@vibhaas great vibhaas. ,how far u all have completed freecodecamp challenges.
shivam gupta
@shivamg11000
May 11 2017 07:44
Its rare to see a champ like you at such a age to aspire for programming in India
@vibhaas
Vibhaas
@vibhaas
May 11 2017 07:44
@shivamg11000 :smile:
Ashish verma
@ashish1500616
May 11 2017 07:46
@vibhaas yeah congrats keep doing,.
shivam gupta
@shivamg11000
May 11 2017 07:47
@vibhaas Your portfolio design is decent
Vibhaas
@vibhaas
May 11 2017 07:47
k im gonna have food..
@shivamg11000 thanks :+1:
CamperBot
@camperbot
May 11 2017 07:47
vibhaas sends brownie points to @shivamg11000 :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @shivamg11000 |http://www.freecodecamp.com/shivamg11000
Vibhaas
@vibhaas
May 11 2017 07:48
@shivamg11000 plus the mail me a message feature works, did u check that?
shivam gupta
@shivamg11000
May 11 2017 07:49
@vibhaas I will send you some mail
Vibhaas
@vibhaas
May 11 2017 07:50
ok send
did u send?
i dont think u did.
shivam gupta
@shivamg11000
May 11 2017 07:52
The send button not working?
SENT
Working
Status: 200
Vibhaas
@vibhaas
May 11 2017 07:52
ok.. it will auto-reply also.. check that
shivam gupta
@shivamg11000
May 11 2017 07:53
@vibhaas Autoreply at my mail?
Vibhaas
@vibhaas
May 11 2017 07:53
u sent 3 times!! :smile: Hey Vibhaas, you are talented. Keep learning. Stay amazed, stay hungry -Steve Jobs
@shivamg11000 yeah it auto-replys at the email u provided
shivam gupta
@shivamg11000
May 11 2017 07:54
OK the button does not respond for few seconds.
Vibhaas
@vibhaas
May 11 2017 07:54

You got a new message from Shivam gupta (shivamg11000@gmail.com):

Phone NO is: 9990809011

MESSAGE:
Hey Vibhaas, you are talented. Keep learning. Stay amazed, stay hungry -Steve Jobs

On your Portfolio page.

@shivamg11000 yeah it takes sometime to work..
shivam gupta
@shivamg11000
May 11 2017 07:54
@vibhaas What languages you used to make this site.
Vibhaas
@vibhaas
May 11 2017 07:54
js, css, html
shivam gupta
@shivamg11000
May 11 2017 07:55
and the contace form
contact
bootstrap
Vibhaas
@vibhaas
May 11 2017 07:55
the mail is using js see: http://www.emailjs.com/?src=email-footer
mailjs
its limited 200/ a month or something.. but i dont have that many mails so no prob for me
shivam gupta
@shivamg11000
May 11 2017 07:56
ok
Prabhat
@Prabhat98
May 11 2017 08:00
Hey Guys !! Is it necessary that the tribute page has to be upon a renowned personality?
shivam gupta
@shivamg11000
May 11 2017 08:01
not necessary, People have made tribute for programming languages also I saw
Batman
@Prabhat98
Prabhat
@Prabhat98
May 11 2017 08:01
Do you have examples of tribute pages ?
Vibhaas
@vibhaas
May 11 2017 08:01
@Prabhat98 nope.. i am not sure but i think i saw a guy do it for his wife and some for languages
Prabhat
@Prabhat98
May 11 2017 08:02
Examples from where I can get the idea from..
shivam gupta
@shivamg11000
May 11 2017 08:02
i dint work on my tribute page well its :shit: http://codepen.io/vibhaas/pen/vGvGWo
Prabhat
@Prabhat98
May 11 2017 08:03
@shivamg11000 cool .... @vibhaas thank you
CamperBot
@camperbot
May 11 2017 08:03
prabhat98 sends brownie points to @shivamg11000 and @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @shivamg11000 |http://www.freecodecamp.com/shivamg11000
:cookie: 331 | @vibhaas |http://www.freecodecamp.com/vibhaas
Prabhat
@Prabhat98
May 11 2017 08:05
I am thinking of making it on Brock lesnar
he is my favorite
shivam gupta
@shivamg11000
May 11 2017 08:05
A tribute to Kejriwal, thats funny
@vibhaas
Prabhat
@Prabhat98
May 11 2017 08:05
@shivamg11000 LOL
Vibhaas
@vibhaas
May 11 2017 08:05
@shivamg11000 defensifly whats funny in that?
Prabhat
@Prabhat98
May 11 2017 08:06
Can I complete making tribute page in couple of hours if I have the idea ready?
shivam gupta
@shivamg11000
May 11 2017 08:06
@vibhaas Its a joke
Vibhaas
@vibhaas
May 11 2017 08:06
@Prabhat98 took me 45 min
@shivamg11000 if u say so
@shivamg11000 im not here to argue
shivam gupta
@shivamg11000
May 11 2017 08:07
The person Kejriwal himself is joke, It is not about tribute page
Vibhaas
@vibhaas
May 11 2017 08:08
@shivamg11000 i understood u the first time
shivam gupta
@shivamg11000
May 11 2017 08:08
@vibhaas Sure you are smart
Prabhat
@Prabhat98
May 11 2017 08:08
@vibhaas but it says 50 hours in te map
Vibhaas
@vibhaas
May 11 2017 08:09
@Prabhat98 IDC
shivam gupta
@shivamg11000
May 11 2017 08:09
You can take as long as you want. @Prabhat98
Vibhaas
@vibhaas
May 11 2017 08:09
@Prabhat98 it was basics.. and i was not wanting to waste my time
@Prabhat98 been working on web dev before i joint fcc.. 2 years before
Vibhaas
@vibhaas
May 11 2017 08:17
@carlosfrontend yours is nice :+1:
Carlos Pulido
@carlosfrontend
May 11 2017 08:18
i'm glad u like it @vibhaas :+1:
Vibhaas
@vibhaas
May 11 2017 08:21
@carlosfrontend :smile:
Manar Kurmanov
@manar-mk
May 11 2017 08:27
guys, what do use for input masking in ng2?
Alexander Domikov
@AlexanderDom
May 11 2017 08:34
here's mine if it interests someone ;) http://codepen.io/AlexanderDom/pen/oxOQWQ
Rudrangshu Nandi
@Rud156
May 11 2017 08:44
Anyone knows any good tutorial for Aurelia JS. I want to learn the framework but didn't find any complete tutorial for it.
Prabhat
@Prabhat98
May 11 2017 08:54
@carlosfrontend are you there?
Carlos Pulido
@carlosfrontend
May 11 2017 08:55
yes @Prabhat98
alpox
@alpox
May 11 2017 09:00
@Rud156 I think their own website is quite good to comprehend
@Rud156 If you need some help with it, aurelia has an own gitter channel
Thomas
@sjurs1
May 11 2017 09:02

Hi guys. I'm underway designing my quote generator and I want to have my twitter icon and quote button on the same line, but I just can't get away from it as it seems the twitter button spans the whole row.

https://codepen.io/sjurs1/pen/QvmNBg

Prabhat
@Prabhat98
May 11 2017 09:08
@carlosfrontend How did you put in those twitter and linkedin icons?
Hey Guys !! The tribute page project after completion , will it be automatically be uploaded to my GitHub account or will I have to do it manually?
Prabhat
@Prabhat98
May 11 2017 09:15
Please Tell
iso
@iso1048
May 11 2017 09:15
@sjurs1 try applying display: inline-block; to the buttons. in css
RaghavaKotala
@raghavendrakuttala
May 11 2017 09:24
@Prabhat98 i guss you need to do manually.
Carlos Pulido
@carlosfrontend
May 11 2017 09:26
@Prabhat98 font-awesome
Mark Warren
@iam6e6f626f6479
May 11 2017 09:27

Can someone look at my Tribute page and let me know why the picture don't show up on my iPhone?

http://codepen.io/iam6e6f626f6479/pen/wdyNmo

Marianissimus
@Marianissimus
May 11 2017 09:28
@iam6e6f626f6479 they don't work on any device. As it seems: "imgur.com quite specifically does not work with codepen, because they block the codepen referer."
Carlos Pulido
@carlosfrontend
May 11 2017 09:29
problem i think is http vs https
Mark Warren
@iam6e6f626f6479
May 11 2017 09:29
@Marianissimus Thanks I will try another service
CamperBot
@camperbot
May 11 2017 09:29
iam6e6f626f6479 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
May 11 2017 09:29
you're welcome
Thomas
@sjurs1
May 11 2017 09:37
@gothamknight I tried assigning display: inline-block; to the .btn class, but it did nothing for me
iso
@iso1048
May 11 2017 09:37
@sjurs1 link the pen.
Mark Warren
@iam6e6f626f6479
May 11 2017 09:42
What is a good service to host my pictures from that will work on codepen?
iso
@iso1048
May 11 2017 09:44
@sjurs1 not too sure yet. by the way, you can get the twitter icon in the square directly, rather than having two fa icons.http://fontawesome.io/icon/twitter-square/
Thomas
@sjurs1
May 11 2017 09:46
@gothamknight Thanks for that, good tip.
CamperBot
@camperbot
May 11 2017 09:46
sjurs1 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @gothamknight |http://www.freecodecamp.com/gothamknight
Hoang Thanh Tu
@hoangthanhtu
May 11 2017 09:47
iso
@iso1048
May 11 2017 09:47
@iam6e6f626f6479 someone recommended http://cloudinary.com/ to me. i've used it once
Thomas
@sjurs1
May 11 2017 09:49
Yeah I don't understand, I don't know why it would alter the position of my other button
Muhammad Hussain
@ReactorboY
May 11 2017 09:50
can anyone help me in this, how to add padding using bootstrap https://codepen.io/ReactorboY/pen/OmvRGe
iso
@iso1048
May 11 2017 09:53
@sjurs1 well the twitter icon is just an icon at the moment. You'll want to nest the <i></i> in an a element.
blob
i muddled with the html, but hopefully you get the idea and can clean it up
Muhammad Hussain
@ReactorboY
May 11 2017 09:55
not even a single person helped me :(
Thomas
@sjurs1
May 11 2017 09:56
@gothamknight It's in an <a> element with the class="btn". But yes! That's solved it! Stashing them together in a single div element... I swear sometimes I go completely blind to my code
@gothamknight Thank you again!
CamperBot
@camperbot
May 11 2017 09:57
sjurs1 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:warning: sjurs1 already gave gothamknight points
njordomir
@njordomir
May 11 2017 09:58
Can anyone recommend a good set of weather icons I can include in my project similarly to how the font-awesome stuff works?
Shiyas Vp
@shiyasvp92
May 11 2017 10:00
njordomir
@njordomir
May 11 2017 10:01
Thanks @vibhaas @shiyasvp92 I don't quite know my way around all the resources yet, but I'm getting the hang of things.
CamperBot
@camperbot
May 11 2017 10:01
njordomir sends brownie points to @vibhaas and @shiyasvp92 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @vibhaas |http://www.freecodecamp.com/vibhaas
:cookie: 35 | @shiyasvp92 |http://www.freecodecamp.com/shiyasvp92
njordomir
@njordomir
May 11 2017 10:04
Where do you guys host weather icons and such. Should I just fork over the dough for a codepen pro account?
Vibhaas
@vibhaas
May 11 2017 10:05
wait...
Mark Warren
@iam6e6f626f6479
May 11 2017 10:32

OK I created an account on http://cloudinary.com/ and now my pictures do show up on the iPhone through codepen. Please take a look at my completed Tribute Page.

http://codepen.io/iam6e6f626f6479/pen/wdyNmo

Markus Gihady Azer
@MarkusAzer
May 11 2017 10:37
Good day everyone, i got problem, well i were trying to create an awesome portfolio, but when i fed up i took this code from ready one, to compare
well can anybody tell me whats wrong
the source one https://codepen.io/ThiagoFerreir4/pen/eNMxEp
the copied one https://codepen.io/MarkusAzer/full/LydbJv/
the wired thing, the copied one doesnt act same as the source one!!!!
iso
@iso1048
May 11 2017 10:38
@MarkusAzer maybe different versions of bootstrap are being used. and dont copy code
Vibhaas
@vibhaas
May 11 2017 10:38
@gothamknight :+1:
codepen, by default uses bootstrap 4 alpha
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:39
i copied code to see if there is sth wrong or iam doing something wrong!!
Vibhaas
@vibhaas
May 11 2017 10:40
image.png
image.png
add the css/js (same versions too) libraries
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:42
ah, thanks bro, well back to my original code :)
iso
@iso1048
May 11 2017 10:42
@MarkusAzer i see. my bad then.
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:43
@gothamknight Still Thanks bro, you were trying to help :)
CamperBot
@camperbot
May 11 2017 10:43
markusazer sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @gothamknight |http://www.freecodecamp.com/gothamknight
Vibhaas
@vibhaas
May 11 2017 10:44
gosh no brownies for me? :worried: did i do something wrong? @MarkusAzer
iso
@iso1048
May 11 2017 10:45
@vibhaas thanks
CamperBot
@camperbot
May 11 2017 10:45
gothamknight sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @vibhaas |http://www.freecodecamp.com/vibhaas
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:46
@vibhaas Nope bro, you just answered my problem, thanks
CamperBot
@camperbot
May 11 2017 10:46
markusazer sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @vibhaas |http://www.freecodecamp.com/vibhaas
Vibhaas
@vibhaas
May 11 2017 10:46
:smile:
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:47
ah, what the hack is these brownies!
Vibhaas
@vibhaas
May 11 2017 10:47
got an extra brownie @gothamknight thanks.. some for you to
CamperBot
@camperbot
May 11 2017 10:47
vibhaas sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @gothamknight |http://www.freecodecamp.com/gothamknight
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:48
ah its when you say thanks
Vibhaas
@vibhaas
May 11 2017 10:48
@MarkusAzer yep
Markus Gihady Azer
@MarkusAzer
May 11 2017 10:50
wow, its working
Vibhaas
@vibhaas
May 11 2017 10:51
@MarkusAzer :+1:
check mine at: http://www.vibhaas.net
Nicolas Crumrine
@CrumrineCoder
May 11 2017 11:50
How does one have words appear one at a time on a page rather than generate all at once?
Like a video game textbox
Jesse Jafa
@awareness481
May 11 2017 11:57

I want every paragraph to have an id like this

<p id ="status" + i //the value of i from the for loop

but every paragraph just has the id of

status10

I think it might have to do something with the asynchronicity of ajax but I cant seem to find a way to fix it
http://s.codepen.io/tstusr/debug/WjRJvL/nqkwveGGQgjA

Henry
@GitHub-Henry
May 11 2017 12:00
@vibhaas less than a week to complete data visualization. how is that done when there are three sections that say coming soon? did you get the cert without those three sections?
curious how that works
Jesse Jafa
@awareness481
May 11 2017 12:04
You only need to complete the challenges with the asterisk * @GitHub-Henry
Vibhaas
@vibhaas
May 11 2017 12:04
@GitHub-Henry yeah that stumpted me at first but i took tutorials on those topics by a fcc forum article..
Jesse Jafa
@awareness481
May 11 2017 12:04
Usually learning challenges are not required to be completed for the certs
Vibhaas
@vibhaas
May 11 2017 12:05

You only need to complete the challenges with the asterisk * @GitHub-Henry

Usually learning challenges are not required to be completed for the certs

:+1: @tstusr441

Henry
@GitHub-Henry
May 11 2017 12:07
@tstusr441 @vibhaas thanks
CamperBot
@camperbot
May 11 2017 12:07
github-henry sends brownie points to @tstusr441 and @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @vibhaas |http://www.freecodecamp.com/vibhaas
:cookie: 301 | @tstusr441 |http://www.freecodecamp.com/tstusr441
Henry
@GitHub-Henry
May 11 2017 12:08
@vibhaas good job on getting your data visualization cert in a under a week
Vibhaas
@vibhaas
May 11 2017 12:09
@GitHub-Henry thanks
CamperBot
@camperbot
May 11 2017 12:09
vibhaas sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @github-henry |http://www.freecodecamp.com/github-henry
Vibhaas
@vibhaas
May 11 2017 12:09
what it still sent the brownie? rly?
Jesse Jafa
@awareness481
May 11 2017 12:11
Don't be sad mate, here's one for you. thanks @vibhaas
CamperBot
@camperbot
May 11 2017 12:11
tstusr441 sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @vibhaas |http://www.freecodecamp.com/vibhaas
Jesse Jafa
@awareness481
May 11 2017 12:11
Don't tell the mods
h1tag
@h1tag
May 11 2017 12:11
:smile:
Vibhaas
@vibhaas
May 11 2017 12:13
@tstusr441 :grinning:
lazzlo
@lazzlo
May 11 2017 12:14
Hey guys. I would appreciate some help, please. This code was working earlier when I pressed the button but not it does nothing. And I am pretty sure I didn't change anything.
http://codepen.io/Lazzlo/pen/dWdREz
Vibhaas
@vibhaas
May 11 2017 12:19
@Lazzlo it works for me
lazzlo
@lazzlo
May 11 2017 12:25
Really? Weird
John Edwards
@javajohnHub
May 11 2017 12:52
Works for me too
njordomir
@njordomir
May 11 2017 12:53
Other than the lack of a celcius/fahrenheit toggle, would you consider my weather project acceptable to move on? I'll add the toggle after I get some sleep. Also, I'm not really a graphic designer, as you can probably tell. https://codepen.io/Njordomir/pen/Mmryqz?editors=1111
njordomir
@njordomir
May 11 2017 13:04
@Lazzlo you may have edited it by now, but I'm seeing a javascript error. You've probably experienced them before, so just tap that annoying little circle exclamation point warning in the bottom right and figure out what line it is!
gulptech
@gulptech
May 11 2017 13:10
@njordomir I would say no...your weather is not complete...you don't even have jquery loading
njordomir
@njordomir
May 11 2017 13:12
@gulptech I appreciate the response. Could you elaborate? I'm using jQuery to post the temp, conditions, and icon. Is that not showing up for you, or did you mean something else?
gulptech
@gulptech
May 11 2017 13:13
@njordomir in the project settings under javascript...select jquery in the drop down list...then try running your code...you will see other problems.
njordomir
@njordomir
May 11 2017 13:17
@gulptech Oops, I made edits without being logged in. But it looks like I'm having issues anyway. I just want to get to more algorithms :P
Rudrangshu Nandi
@Rud156
May 11 2017 13:18
@alpox Thanks
CamperBot
@camperbot
May 11 2017 13:18
rud156 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1033 | @alpox |http://www.freecodecamp.com/alpox
JD Tadlock
@jdtdesigns
May 11 2017 13:30
@Pagnito On now
@Lazzlo val r = JSON.parse(... should be var r = JSON.parse(..
lazzlo
@lazzlo
May 11 2017 13:34
@jdtdesigns Thanks mate but the problem was something else
CamperBot
@camperbot
May 11 2017 13:34
lazzlo sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 929 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Pagnito
@Pagnito
May 11 2017 13:35
@jdtdesigns ended up solving it, thanks as always tho
CamperBot
@camperbot
May 11 2017 13:35
pagnito sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 930 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
May 11 2017 13:36
Lol, one of your issues though. ;)
@Lazzlo
quarkmonkey
@quarkmonkey
May 11 2017 13:40
Hi all. Quick one - how do I make a nav bar anchor to the bottom of the page with Bootstrap?
(as in a full-width nav bar)
Segun Ajala
@ajalasegun1
May 11 2017 13:43
@Marianissimus I left it for a few days because i've been busy. I tried it today and it worked. Many thanks
CamperBot
@camperbot
May 11 2017 13:43
ajalasegun1 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @marianissimus |http://www.freecodecamp.com/marianissimus
quarkmonkey
@quarkmonkey
May 11 2017 14:03
@jdtdesigns Cheers. Worked like a charm!
Jasmine J
@Kitana16
May 11 2017 14:08
How can i get the FreeCodeCamp Logo & link on my portfolio
Jasmine J
@Kitana16
May 11 2017 14:12
@jdtdesigns :smile: Thank You Soooo Much !
CamperBot
@camperbot
May 11 2017 14:12
kitana16 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 931 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
May 11 2017 14:15
@Kitana16 Welcome ;)
quarkmonkey
@quarkmonkey
May 11 2017 14:33
Anyone know why one of my rows has disappeared on this?
There’s a header row (id=“header”) which has vanished since I made the navbar fixed to the top. Is it behind the nav bar? How can I ‘push’ it out from underneath?
quarkmonkey
@quarkmonkey
May 11 2017 14:39
I've fixed it by putting a margin above the header bar now, but not convinced that's the most elegant solution.
gulptech
@gulptech
May 11 2017 14:43
@quarkmonkey i normally add padding-top to the body when using the fixed top navbar
RonnyNovik
@RonnyNovik
May 11 2017 14:59
How can i solve the problem with the animation just continues over the portfolio section? http://codepen.io/roninovik/pen/WjodeW
playingwithinfinity
@playingwithinfinity
May 11 2017 15:02
What are some good front end projects other than the FreeCodeCamp ones?
JD Tadlock
@jdtdesigns
May 11 2017 15:21

Streaming "Creating an auto poster for Facebook and Gitter [Node/Express/Pug/Apis]"

https://www.liveedu.tv/jddesign/REade-facebookgitter-post-nodeexpressapis/

Adam Simonini
@adamsimonini
May 11 2017 15:26

Good morning all.

I'm on this challenge: https://www.freecodecamp.com/challenges/symmetric-difference

I'm not sure how implement .reduce to solve the problem. Can anyone point me in the right direction?

Nikki L.R.
@nikkilr88
May 11 2017 15:28
Could anyone help me out with a problem I am having with my TicTacToe game?
Gulsvi
@gulsvi
May 11 2017 15:29

@gothamknight Your HTML would need to be like this for that CSS to work:

<body>
  <main></main>
  <footer></footer>
</body>

not:

<main>
  <body>
  <footer></footer>
  </main>
</body>

https://www.w3schools.com/html/html5_semantic_elements.asp

@quarkmonkey Bootstrap recommends adding 70px of padding to the top of your body element when using the navbar-fixed-top class:
body {
  padding-top: 70px;
}

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
electricpen
@electricpen
May 11 2017 15:41
I have a problem with my twitch app
It is only printing online streamer details and not offline ones
Mark Warren
@iam6e6f626f6479
May 11 2017 15:42

I would like some feedback on my Tribute Page. I know it passes the hurdles to move on, I would like to know if there is a better way to handle the .css I have written.

https://codepen.io/iam6e6f626f6479/pen/wdyNmo

any idea why the descriptive text is not working on the offline streams?
my if statement for it is the following
   if (streaminfo.stream === null) {
      $(streamName).append(streamOffline);
    } else {
      $(streamName).append(streamOnline);
    }
the streamOffline print statement works because if I switch streamOnline and streamOffline I get the offline message for online streamers
so it just isn't firing somehow for the first if condition
Gulsvi
@gulsvi
May 11 2017 15:46
@electricpen It's because you're trying to set streamOnline when streaminfo.stream.game doesn't exist for some users. Do this instead:
    if (streaminfo.stream === null) {
      $(streamName).append(streamOffline);
    } else {
      var streamOnline = $(
        "<li><p>streaming: " + streaminfo.stream.game + "</p></li>"
      );      
      $(streamName).append(streamOnline);
    }
or skip the variable declaration, and just do:
    if (streaminfo.stream === null) {
      $(streamName).append(streamOffline);
    } else {
      $(streamName).append("<li><p>streaming: " + streaminfo.stream.game + "</p></li>");
    }
electricpen
@electricpen
May 11 2017 15:48
oh ok, I thought that wouldn't work I think some online tutorial I read said you always had to assign those to variables before you could use append
Chris
@bestintown23
May 11 2017 15:49
how could i align my text to be on the left side of the page? http://codepen.io/bestintown23/pen/OmQrRr
Gulsvi
@gulsvi
May 11 2017 15:51
@iam6e6f626f6479 Good work - your CSS is similar to what bootstrap would use in their grid system, but you would need to incorporate media queries to make it responsive at smaller screen sizes. If you want to do it in pure HTML/CSS, remove the bootstrap library from your project. Otherwise, take advantage of their grid system. It's a good system to learn regardless.
quarkmonkey
@quarkmonkey
May 11 2017 15:51
@SkyCoder01 Cheers. Will try this.
oskarz53
@oskarz53
May 11 2017 15:52
Hello everyone! I'm making a website and struggling a bit with the design so wondering of someone here could give their opinion on the design and placement of things on the page. Sorry if I'm supposed to ask questions like this in here
Pedro Pineda
@pedropda
May 11 2017 15:52
why is my javascript not retrieving json data from api? https://codepen.io/pedropda/pen/wdmPzq
electricpen
@electricpen
May 11 2017 15:53
@SkyCoder01 that worked, thanks!
CamperBot
@camperbot
May 11 2017 15:53
electricpen sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1355 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Mark Warren
@iam6e6f626f6479
May 11 2017 15:53
@SkyCoder01 Thanks I will look at media queries and update.
CamperBot
@camperbot
May 11 2017 15:53
iam6e6f626f6479 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1356 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 11 2017 15:53
@electricpen .append() and .html() can have html added directly to them. Very convenient methods. :)
With template literals, it looks just like your normal HTML:
$('#myElementId').html(
  `<div class="row">
    <div class="col-xs-6">
      Some text
    </div>
    <div class="col-xs-6">
      Some text
    </div>
   </div>`
);
@pedropda All of the resources you are requesting are using http: (jquery, bootstrap.js, and ip-api.com). So, you have to load your pen over HTTP for it to work. I'd recommend using HTTPS everywhere instead. https://ipinfo.io/json is a good alternative to ip-api.com that works over HTTPS.
obelix09
@obelix09
May 11 2017 15:59

Hi im trying to put my media thumbnails in the middle under my text in the contact section.. can anyone help me!

https://codepen.io/obelix09/pen/LyOejX

Carlos Pulido
@carlosfrontend
May 11 2017 16:01
find cards in bootstrap documentation @obelix09
CamperBot
@camperbot
May 11 2017 16:01
find cards in bootstrap documentation @obelix09
nothing found
obelix09
@obelix09
May 11 2017 16:01
@carlosfrontend i dont know what that means..
thanx
ill check it out
Carlos Pulido
@carlosfrontend
May 11 2017 16:02
:+1:
Gulsvi
@gulsvi
May 11 2017 16:05
@obelix09 You mean that you want your social media icons at the bottom?
Pedro Pineda
@pedropda
May 11 2017 16:07
@SkyCoder01 Thanks a lot!
CamperBot
@camperbot
May 11 2017 16:07
pedropda sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1357 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Mark Warren
@iam6e6f626f6479
May 11 2017 16:09

@SkyCoder01 As far as media queries for my .css is there more to it than just adding the following .
@media only screen and (min-width : 320px) {
}

https://codepen.io/iam6e6f626f6479/pen/vmRpKp

electricpen
@electricpen
May 11 2017 16:11
Ok this is kind of weird
I added links to my twitch page
Paweł Rokosz
@PawelRokosz
May 11 2017 16:11
Hey, I have problem with Show the Local Weather project. I can't understand how to use API's. I've read some info about API's, then I checked topics related with API's on StackOverflow, then I read docs from https://openweathermap.org. How to use the data? All I have is this:
electricpen
@electricpen
May 11 2017 16:11
and it opens the link in a new tab like I expect
but the page doesn't load
if I copy-paste the address to a new tab
it loads...
Gulsvi
@gulsvi
May 11 2017 16:12
@iam6e6f626f6479 Yes, much more to it than that. This is why I think it's easiest to start by learning the bootstrap grid system, get familiar with it, then dive into their CSS file to see how they do it so you can figure out how to do it from scratch. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css
electricpen
@electricpen
May 11 2017 16:13
    var channelName = $("<li><a href="+streamer.url+" target='_blank'><h4>" + name + "</h4></a></li>");
    $(personID).append(channelName);
Gulsvi
@gulsvi
May 11 2017 16:14
@electricpen It's a security restriction - Twitch doesn't let you open their page from inside an iframe, like your codepen page. Open your page in Debug view and it should work fine.
electricpen
@electricpen
May 11 2017 16:15
oh
so many undocumented things to learn =(
thanks @SkyCoder01
CamperBot
@camperbot
May 11 2017 16:16
electricpen sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: electricpen already gave skycoder01 points
Gulsvi
@gulsvi
May 11 2017 16:16
@PawelRokosz Since Open Weather Map is called over HTTP, you need to open your codepen page over HTTP: http://codepen.io/PRokosz/pen/EmbywZ?editors=0012
Soon codepen will be moving to HTTPS, the recommended weather API should be updated... You might want to try weather underground or Dark Sky weather APIs instead. They work over HTTPS and are both free.
@electricpen Yeah, I hit that problem with my twitch app too :/
electricpen
@electricpen
May 11 2017 16:18
I like your twitch app btw, very pretty design @SkyCoder01
Gulsvi
@gulsvi
May 11 2017 16:18
Thank you! @electricpen
CamperBot
@camperbot
May 11 2017 16:18
skycoder01 sends brownie points to @electricpen :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @electricpen |http://www.freecodecamp.com/electricpen
electricpen
@electricpen
May 11 2017 16:18
I had some ideas about expanding mine so I wanted to save some screen space for the ability to open chat and video windows embedded on the page but I probably won't try to do that until later
Gulsvi
@gulsvi
May 11 2017 16:19
It's easy to get caught up adding lots of features :)
electricpen
@electricpen
May 11 2017 16:19
yeah I think I'm going to finish the program first before going back and doing excessive tinkering lol
incidentally someone else answered this for me last night but wasn't sure about it, maybe you would know
I am using the official twitch api and not the recommended workaround
and I can't seem to get a JSON object back for nonexistent accounts
so the only way to print the proper response on my page is to embed the function into an alert off the JSON call
obelix09
@obelix09
May 11 2017 16:21
@SkyCoder01 no i just want them under the text..
Gulsvi
@gulsvi
May 11 2017 16:22
Yeah, that's part of the challenge :) I forget if it's the stream JSON or the channels JSON, but one of them returns "user does not exist" or gives you a 404 error @electricpen
electricpen
@electricpen
May 11 2017 16:22
does that seem right to you or is there a way to get the JSON object back with the 404 status so I can handle it in my regular function with the rest of the conditions
because right now those accounts don't return objects at all for me
they both return 404 if I enter the api url straight into the browser
an object with 404 status
but JSON doesn't return the object as far as I can tell
getJSON*
Gulsvi
@gulsvi
May 11 2017 16:24
@electricpen The JSON is similar with the Free Code Camp mirror, see this one: http://wind-bow.glitch.me/twitch-api/channels/brunofin
Open that in your browser and you'll see status = 404
electricpen
@electricpen
May 11 2017 16:24
yeah
and the same thing happens if I enter the equivalent for twitch
if I enter it in the browser
but when I call it in my code I get nothing
I put a console.log at the very top of my function and it doesn't write the object for that account
even though it is returning all the other accounts fine
Gulsvi
@gulsvi
May 11 2017 16:25
You probably need to check for that first - because as soon as you request a property that doesn't exist, your code will have an error and stop running
This is why we had to move the one line inside the else part of your if/else above
electricpen
@electricpen
May 11 2017 16:26
yeah
I realize that now
Gulsvi
@gulsvi
May 11 2017 16:26
    if (/* test if not existent or closed */) {
      // process non-existent / closed channels
    } else if (/* test if offline */) {
      // process offline channels
    } else {
      // process online channels
    }
electricpen
@electricpen
May 11 2017 16:26
but this is my function call
function streamerEntry(streamer) {
    //Test output to see object format
    // Assign html elements to variables to be inserted on page
    console.log(streamer);
    var name = streamer.name;
    var channelName = $("<li><a href="+streamer.url+" target='_blank'><h4>" + name + "</h4></a></li>");
    var personID = "#" + name;
    var bar = $(
      '<li><div class="listitem"><ul class="listing" id=' +
        name +
        "></ul><\/div><\/li>"
    );

    //Give a default twitch logo to sad streamers with no logo
    if (streamer.logo !== null) {
      var personLogo = $(
        "<li><img src=" + streamer.logo + ' alt=logo class="icon"></li>'
      );
    } else {
      var personLogo = $(
        '<li><i class="fa fa-twitch fa-3x icon" aria-hidden="true"></i></li>'
      );
    }

    //.append the html elements created above into the webpage
    $(".streamerList").append(bar);
    $(personID).append(personLogo);
    $(personID).append(channelName);

    var streamURL =
      "https://api.twitch.tv/kraken/streams/" + name + "?" + clientID;
    //call getJSON for live stream information
    $.getJSON(streamURL, streamUpdate);
  };
the console.log is before everything else
and it never prints the 404 object
I put it there just to see what was going on
both brunofin and the 404 guy are in my streamer array
Gulsvi
@gulsvi
May 11 2017 16:31
@electricpen Hmmm, maybe the Twitch API is behaving differently like you said. I just tried to debug and it looks like you have to catch the failure in your getJSON
electricpen
@electricpen
May 11 2017 16:31
yeah thats what I said
I can get it with a JSON alert
but I was wondering if there was a way to get it to give me the object so I can handle it in my function with the other conditions
Gulsvi
@gulsvi
May 11 2017 16:31
$.getJSON(url, streamerEntry).fail(streamerEntry);
electricpen
@electricpen
May 11 2017 16:31
since that seems to be the standard way
Gulsvi
@gulsvi
May 11 2017 16:31
Use .fail()
that way the errors go to that function too
Probably not the best way - you should have an error handling function, but by doing that, I see the 404 message logged
electricpen
@electricpen
May 11 2017 16:32
yeah I will make a seperate function
guess its just one difference between the actual twitch api and the workaround
I was thinking I might make this into something for personal use so I used the real api, silly me
Gulsvi
@gulsvi
May 11 2017 16:33
Or use .always() and you can process errors + successes all at once: $.getJSON(url).always(streamerEntry);
lol, using the real API is brave :p
You can do much more though, so probably a good learning experience
electricpen
@electricpen
May 11 2017 16:34
I guess .always would make my code shorter, not sure which is more readable
my code in general is not very readable atm since I used var everywhere thanks to that dumb tutorial that told me I couldn't assign html directly with append haha
Gulsvi
@gulsvi
May 11 2017 16:35
lol :)
Your code is half as many lines as mine though - I think I can do some optimization too.
electricpen
@electricpen
May 11 2017 16:36
yeah I peeked at yours
it looks cool though
Gulsvi
@gulsvi
May 11 2017 16:37
@obelix09 Your code is missing some parts of the bootstrap grid system. Some rows and columns are missing. Try something like this perhaps and then modify as needed:
    <div class="container-box">
      <div class="row">
        <div class="col-12 col-md-6" id="fill-out">
          <form action="/action_page.php">
            <ul>
              <li><label for="fname">First  Name</label></li>
              <li><input type="text" id="fname" name="firstname" placeholder="Your name.."></li>
              <li><label for="fname">Last Name</label></li>
              <li><input type="text" id="lname" name="lastname" placeholder="Your name.."></li>
              <li><label for="dimension">Dimension</label></li>
              <li>
                <select id="dimension" name "dimension">
                  <option value="2nd dimension">2nd dimension</option>
                  <option value="3rd dimension">3rd dimension</option>
                  <option value="4th dimension">4th dimension</option>
                  <option value="5th dimension">5th dimension</option>
                  <option value="higher dimension">Higher dimension</option>
                  </select>
              </li>
              <li><label for="message">Message</label></li>
              <li><textarea id="message" name="message" placeholder="Write something.." style="height:120px"></textarea></li>
              <input type="submit" value="Send">
            </ul>
          </form>
        </div>
        <div class="col-12 col-md-6" id="contact-stuff">
          <p>If you have some information you need to put out into the cosmos, please fill out this form and the universe might answer you.</p>
        </div>
      </div>
      <div class="row text-center">
        <div class="col">
          <a href="#" class="fa fa-facebook"></a>
          <a href="#" class="fa fa-twitter"></a>
          <a href="#" class="fa fa-snapchat"></a>
          <a href="#" class="fa fa-instagram"></a>
        </div>
      </div>
    </div>
@electricpen I'll keep working on it :) code is always evolving as I learn more haha
kfobert
@kfobert
May 11 2017 16:57
So I completed the tribute page and have clicked on to the Personal Portfolio Webpage and all of a sudden I have to pay to use codepen
Gulsvi
@gulsvi
May 11 2017 16:58
@kfobert You do not have to pay for codepen
There are some nice features if you do decide to pay, but it is not necessary
kfobert
@kfobert
May 11 2017 16:59
it says I have "used 1 out of your 1 allowed projects. "
Ken Haduch
@khaduch
May 11 2017 16:59
@kfobert there is a free level of codepen service, and they also have a "Pro" level that gives you some added features. I think that most people opt to just use the free service, which will let you write and post your code, which is mostly what you need.
@kfobert - you don't want "Projects" just open a new "Pen"...
Gulsvi
@gulsvi
May 11 2017 16:59
@kfobert Create a New "Pen", not a "Project"
https://codepen.io/pen/
kfobert
@kfobert
May 11 2017 17:00
ah, I see
Vamp
@the-vampiire
May 11 2017 17:00

x-post from help JS:

hey guys I got my pomodoro clock running. was wondering if you could have a look and see if you can find any bugs. also looking for UI advice to make it prettier. I am more engineer than artist :cry:
https://codepen.io/thevampiire/pen/vmRdKP

kfobert
@kfobert
May 11 2017 17:04
Thanks, btw
Ken Haduch
@khaduch
May 11 2017 17:09
it looks okay - very plain, though. It would be+ good to at least center it on the screen, make a separate display for the time, maybe some interesting graphics like a progress bar or something. A sound for the end of the time period would be a good thing, unless you're going to sit there and just watch the clock running... :) (Unless just not hearing it.) But it seems to work pretty well. Oh, it looks like your loading a sound using a resource that isn't available on CodePen, so you might have that covered if you can get a web-accessible link
Lallo Vigil
@lalov1
May 11 2017 17:16

I have a lot of problems with API's. If I paste the URL I'm using with the jQuery AJAX it works: http://api.walkscore.com/score?format=json&lat=39.733372&lon=-104.98264&wsapikey=306adcd004f1383f355c5bfc75089722

Then when I try to use it in the code like this:

            $.ajax({
                url: 'http://api.walkscore.com/score?format=json',
                headers: {
                    'Accept': 'application/json'
                },
                type: 'GET',
                dataType: 'json',
                jsonpCallback: 'callback',
                data: {
                    'lat': searchLat,
                    'lon': searchLng,
                    'wsapikey': '306adcd004f1383f355c5bfc75089722'
                }
            }).done(function (data) {
                console.log(data);

            });

I get the following error:
XMLHttpRequest cannot load http://api.walkscore.com/score?format=json&lat=39.733372&lon=-104.98264&wsapikey=306adcd004f1383f355c5bfc75089722. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Matt
@mdmpdx
May 11 2017 17:17
good morning all... beginning the Twitchtv JSON API project and wondering if anyone knows where I can find the content that was hosted here: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel
is this intended to link to the full documentation of Twitch API or something more specific? I've found an updated v5 API documentation page but am not sure if that's what FCC's hint had in mind
Ken Haduch
@khaduch
May 11 2017 17:19
@mdmpdx - you can try to start at the top and look to see if they've updated it. https://github.com/justintv/
the thing is that these APIs and sites change - the old version might not be applicable anymore.
Cengiz Gonen
@cetico
May 11 2017 17:19
@lalov1 try changing format=json to format=jsonp and/or http to https
@lalov1 oh, and datatype to jsonp
Ken Haduch
@khaduch
May 11 2017 17:20
@mdmpdx - looks like they redirect you to https://dev.twitch.tv/docs - that's probably what you have, and what you'll most likely need to access the site, if they have made significant changes.

@mdmpdx - and their note:

Note: The default version of the API is V3 until Feb. 14, 2018. However, V3 is scheduled to be deprecated (2017) and removed altogether (2018), so we strongly recommend you migrate to V5 now.

It looks like they would recommend using V5.

Matt
@mdmpdx
May 11 2017 17:22
@khaduch yes that's what I found via web search, and wanted to verify that it's indeed the right thing to use. This is the 2nd project in the 4 intermediate level projects where the instructions send users to the wrong place
but I also understand APIs change etc -- just wanting to not get started using something that's patently wrong ;)
Ken Haduch
@khaduch
May 11 2017 17:23
@mdmpdx - changes happen to the sites, and I'll bet that people are busier updating the beta site information than they are maintaining the old version, but that's just a guess.
it looks like V5 is the future, and it is supported - I would say to go for it...
Matt
@mdmpdx
May 11 2017 17:31
thanks @khaduch
CamperBot
@camperbot
May 11 2017 17:31
mdmpdx sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2856 | @khaduch |http://www.freecodecamp.com/khaduch
Chris
@bestintown23
May 11 2017 17:33
Should i put social media icons on the left or right side of the page? and why? http://s.codepen.io/bestintown23/debug/OmQrRr/mWAoNbxLBRwr
Ken Haduch
@khaduch
May 11 2017 17:33
@mdmpdx - you're welcome.
Margarita A.
@1line-at-atime
May 11 2017 17:33
Hi guys! I need help deciding what Tribute Page to build for my Front End Development Project👩‍💻 Please VOTE and help me decide - https://twitter.com/margiesbigday/status/862514257874702336
Ken Haduch
@khaduch
May 11 2017 17:37
@1line-at-atime - I voted - Grace Hopper is a good choice. I'm surprised that the dead raccoon is not really getting much traction... ;)
Margarita A.
@1line-at-atime
May 11 2017 17:39
@khaduch Thanks for voting, I really appreciate it. Great choice. I agree about the raccoon. He was a Twitter sensation back in the day.
CamperBot
@camperbot
May 11 2017 17:39
1line-at-atime sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2857 | @khaduch |http://www.freecodecamp.com/khaduch
Benjamin Gummelt
@Camaromelt
May 11 2017 17:42
szechuan sauce!
Georg
@xSchoschi
May 11 2017 17:43
Hey fellow coders =D! I'm currently at my first challenge in front end and I've been wondering how to project a light grey layer onto the white background so it looks something like this: https://codepen.io/freeCodeCamp/full/NNvBQW
Ken Haduch
@khaduch
May 11 2017 17:47
@xSchoschi - if you are using Bootstrap V3, there is a class called "jumbotron" that you can use, just set your code to have a <div class="jumbotron"> put your content in here </div> and it should do that same effect. (I'm not sure if Bootstrap V4 changed that at all, they have changed a lot of things.) So try that and see if you get the effect your want, and make sure that you load Bootstrap.css in the CSS external links.
Bootstrap V3 link for the CSS is: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Georg
@xSchoschi
May 11 2017 17:49
thanks m8
gonna try it out
Ken Haduch
@khaduch
May 11 2017 17:51
@xSchoschi - the reason that I would recommend Bootstrap V3 is that the lessons are based on that, and the changes in V4 are quite numerous. You can use V4, but have to account for the differences between 3 (which you might be familiar with) and V4. There is a migration page: https://v4-alpha.getbootstrap.com/migration/ that you can refer to if you decided to go the V4 route.
Georg
@xSchoschi
May 11 2017 17:57
@AimanShakeel1008 sry my bad ... should've look at that first. but i actually like the "jumbotron" method better now that i've tried it
electricpen
@electricpen
May 11 2017 17:58
so I have a question that is sort of general but I can give a specific example in my code if it helps make it clearer
Sky
@freecampcoder007
May 11 2017 17:58
Hello all. I am new to freecodercamp.
Aiman Shakeel
@AimanShakeel1008
May 11 2017 17:58
in smaller screen it is not proper
how to do that?
electricpen
@electricpen
May 11 2017 17:59
I am working on finishing up the twitch project and I am using the actual twitch api
when you call the function with getJSON to get the channel object from twitch
if the channel does not exist then it doesn't have an object element with the name of the channel
is there a way to pass an extra variable to the function with the name so you can manipulate it?
because once you go to the callback function from getJSON you no longer have the array value with the streamer name
I have had a similar problem in various other projects too which I found workarounds for but since it seems to pop up kind of frequently I was wondering how you deal with passing variables to nested functions if you still need the data from the previous function for the logical processing
Gulsvi
@gulsvi
May 11 2017 18:09
@electricpen You send the data you need as an argument to another function.
$.getJSON(url, function(data) {
  var foo = data.prop1.val1;

  displayData(foo);
});

function displayData(foo) {
  console.log(foo);
}
electricpen
@electricpen
May 11 2017 18:14
incidentally I'm not sure why but whenever I try to pass data in my getJSON function my code doesn't work
so I can do
$.getJSON(url, function);
but if I do
$.getJSON(url, function(data));
it doesn't work
even an empty function() breaks my code usually
inside of getJSON
@SkyCoder01 is that normal? or am I doing something wrong?
Gulsvi
@gulsvi
May 11 2017 18:17
@electricpen This is correct: $.getJSON(url, function);
electricpen
@electricpen
May 11 2017 18:18
@SkyCoder01 so my problem in the twitch project specifically is when I get to the function, the object I have only has 404 and error as its elements
so I don't have a name value to print to the html to say which channel doesn't exist
Gulsvi
@gulsvi
May 11 2017 18:18
You should be able to get that from your forEach function
electricpen
@electricpen
May 11 2017 18:18
and I can't seem to pass the name to the function, even if I make the variable global
Gulsvi
@gulsvi
May 11 2017 18:19
I think it was val you used for that
electricpen
@electricpen
May 11 2017 18:19
Yes but at the forEach function I don't know that the streamer doesn't exist yet
since I haven't called the JSON object
one I call the JSON object I'm in the callback function and no longer have access to val
since it is in the previous function?
I'm not sure that makes sense
Gulsvi
@gulsvi
May 11 2017 18:20
Could you do this?
    $.getJSON(url).always(function(data) {
      streamerEntry(data, val);
    });
Then your streamerEntry function would need to take a second argument, like:
  function streamerEntry(streamer, val) {
Matt
@mdmpdx
May 11 2017 18:22
Has anyone who worked on the Twitch API project used the actual API, or is everyone mainly working around to use the https://wind-bow.gomix.me/twitch-api URL? I'm confused
@electricpen how did you get your Twitch client ID?
electricpen
@electricpen
May 11 2017 18:28
@mdmpdx do you have a twitch acount?
@SkyCoder01 that appears to have worked, thanks again
CamperBot
@camperbot
May 11 2017 18:28
electricpen sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1358 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Matt
@mdmpdx
May 11 2017 18:29
@electricpen yes I just created one... and I've gone here to get a license ID: https://www.twitch.tv/settings/connections
electricpen
@electricpen
May 11 2017 18:29
@mdmpdx scroll to the very bottom and click register your application
Matt
@mdmpdx
May 11 2017 18:29
But it's not clear to me how to make this happen. If I choose the bottom most option to register an application, I'm not sure what the redirect URL would even be
electricpen
@electricpen
May 11 2017 18:29
@mdmpdx you'll have to fill out some info on what your app does
@mdmpdx and then you should get your key
Matt
@mdmpdx
May 11 2017 18:30
redirect URL = codepen?
electricpen
@electricpen
May 11 2017 18:30
localhost
I think it is in the instructions
if you were making a real app you would need something else but for this project you can just put that
Matt
@mdmpdx
May 11 2017 18:30
yes, although i assumed localhost would be working with MAMP/locally only
since CodePen is all done online via https I thought that might require some distinction
Gulsvi
@gulsvi
May 11 2017 18:32
Most everyone is using the mirror provided by Free Code Camp @mdmpdx - the actual Twitch API is only needed if you want to use some advanced features not provided at the channels, users, or streams endpoints.
electricpen
@electricpen
May 11 2017 18:32
yeah i wouldn't really recommend the official twitch app @mdmpdx
Matt
@mdmpdx
May 11 2017 18:32
ok
electricpen
@electricpen
May 11 2017 18:33
it made this unnecessarily complicated lol
Matt
@mdmpdx
May 11 2017 18:40
thanks @electricpen + @SkyCoder01
CamperBot
@camperbot
May 11 2017 18:40
mdmpdx sends brownie points to @electricpen and @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1359 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 267 | @electricpen |http://www.freecodecamp.com/electricpen
electricpen
@electricpen
May 11 2017 18:41
ok I guess I'm done with this thing for now, gonna pass on adding more stuff to it until I finish the front end certificate i guess lol
Will Foster
@Will5592
May 11 2017 18:48

Anyone able to help with my code below? It runs the first ajax call no problem, and returns the names of the online streamers, but then it seems to get stuck.

If I include the two accounts that don't exist in the array (Brunofin and Comster 404), it just logs "doesn't exist" and undefined. (after doing the two online people).

OR

If I remove the two accounts that don't exist, so just have an array with existing on and offline streamers, it will log the two online people, then get stuck and just log 'noobs2ninjas' and 'offline' 6 times, instead of all the remaining names...

$(document).ready(function() {
  var channelsArr = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "freecodecamp",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas",
    "brunofin",
    "comster404"
  ];

  for (var i = 0; i < channelsArr.length; i++) {
    var url =
      "https://api.twitch.tv/kraken/streams/" +
      channelsArr[i] +
      "?client_id=rpfs7beif6qpx6onvhq5m84jnx949t";
    var url2 =
      "https://api.twitch.tv/kraken/channels/" +
      channelsArr[i] +
      "?client_id=rpfs7beif6qpx6onvhq5m84jnx949t";

    $.ajax({
      type: "GET",
      url: url,
      success: function(data) {
        if (data.stream !== null) {
          console.log(data.stream.channel.display_name);
          console.log("online---------");
        } else {
          $.ajax({
            type: "GET",
            url: url2,
            success: function(data2) {
              console.log(data2.display_name);
              console.log("offline");            
            },
            error: function(data2) {
              console.log("doesn't exist");
              console.log(data2.error);
            }
          });
        }
      }
    });
  }
});
Charlysa Eubanks
@charlysae
May 11 2017 18:56
Hi! Using codepen, are you supposed to insert google font lunks into the css library or the html library?
google font links*
electricpen
@electricpen
May 11 2017 18:57
@charlysae You put it into the head section
if you click on the gear by the HTML pane
at the bottom of the window it says something like "stuff for head"
it goes in there
@Will5592 the reason it isn't printing names is because the object you get from url2 doesn't use display_name as an object property
Charlysa Eubanks
@charlysae
May 11 2017 19:01
@electricpen Thank you!
CamperBot
@camperbot
May 11 2017 19:01
charlysae sends brownie points to @electricpen :sparkles: :thumbsup: :sparkles:
electricpen
@electricpen
May 11 2017 19:01
the else statement will never print names
CamperBot
@camperbot
May 11 2017 19:01
:cookie: 269 | @electricpen |http://www.freecodecamp.com/electricpen
electricpen
@electricpen
May 11 2017 19:02
it uses display_name
Charlysa Eubanks
@charlysae
May 11 2017 19:03
How do I get the font to apply to my text? I have it in the css library under body
electricpen
@electricpen
May 11 2017 19:05
@Will5592 hmmm you're right I read it wrong
@charlysae font-family:
Charlysa Eubanks
@charlysae
May 11 2017 19:07

body(
margin-top:60px;
font-family: 'Galada', cursive;

)

Am I formatting it correctly?
Ken Haduch
@khaduch
May 11 2017 19:09
@charlysae - how are you adding that font - is it a codepen project? And can you post the link? But it looks like you used parentheses in your CSS, at least the way you entered it in the post - they should be curly brackets { and } surrounding the CSS attributes.
and the URL should be in the CSS external libs, I saw your question above.
This message was deleted
Gulsvi
@gulsvi
May 11 2017 19:10

To expand a bit on Ken's advice:

body {
  font-family: 'Galada' , cursive;
}

https://www.w3schools.com/cssref/pr_font_font-family.asp
@charlysae

electricpen
@electricpen
May 11 2017 19:12
@Will5592 not exactly sure why your code is doing that, but I'm a noob - might want to ask @SkyCoder01
Charlysa Eubanks
@charlysae
May 11 2017 19:13
@khaduch It's the Tribute Page project. Here's the link : http://codepen.io/charlysae/pen/xdYKQo
@khaduch Thanks for your advice. The font works now. Now I need the bullets to be centered.
CamperBot
@camperbot
May 11 2017 19:15
charlysae sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2858 | @khaduch |http://www.freecodecamp.com/khaduch
Will Foster
@Will5592
May 11 2017 19:18
@electricpen @SkyCoder01 Not sure if you saw my post a bit further up SkyCoder, but if you had any idea, I'd appreciate it
Eduar Tua
@eduartua
May 11 2017 19:18
Hi, @charlysae Nice page. I will suggest for a better experience to center the content. Look how I can see it
Screenshot from 2017-05-11 14-17-28.png
Azúcar
Charlysa Eubanks
@charlysae
May 11 2017 19:20
@eduartua Thank you! Yes, I'm trying to figure out how to center it.
CamperBot
@camperbot
May 11 2017 19:20
charlysae sends brownie points to @eduartua :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @eduartua |http://www.freecodecamp.com/eduartua
RonnyNovik
@RonnyNovik
May 11 2017 19:22
http://codepen.io/roninovik/pen/WjodeW why the var triggered doesnt stop the animation from keep sliding down?
Gulsvi
@gulsvi
May 11 2017 19:22
@Will5592 The trick to that API is determining what an offline/online/non-existent account looks like when you pull up their JSON from the three endpoints. If you request a property that doesn't exist in the JSON, your code will fail.
So, when you look for the user 'brunofin' in your second ajax call, it appears your code will fail when looking up data.stream.channel.display_name because there is no data.stream at the /channels/ endpoint (your url2 URL)
Gulsvi
@gulsvi
May 11 2017 19:29
@Will5592 Another issue you will run into soon is calling asynchronous functions inside a for loop. Use a .forEach() to process your array instead. Here's some background on that: http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
Eduar Tua
@eduartua
May 11 2017 19:40
Just a clue, if you are using nested div you can use the text-center class
@charlysae
Will Foster
@Will5592
May 11 2017 19:46
@SkyCoder01 Thanks for the info, I have been trying to do exactly that with determining the different accounts, I've got a /channels and a /streams tab open, for an online person, an offline and a non existent person, I was assuming they would happen in order... but that doesn't seem to be the case.
CamperBot
@camperbot
May 11 2017 19:46
will5592 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1360 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Trevor Yilk
@tayilk
May 11 2017 19:46
how can I store values in a variable returned from a jquery get call
$.getJSON('https://ipinfo.io', function(data){ console.log(data) })
like how would i store the stuff that's in "data"
Johnny
@JohnnyBizzel
May 11 2017 19:52

@tayilk var newVariable = data.whatever;

(inside the callback func)

Chris Norman
@chrisndeca
May 11 2017 19:53
I am confused. Just stating on the second codepen.io lesson. And in the instructions it says "Use whichever libraries you need". How are we supposed to know what libraries there are? Did I miss the lesson where they said "ok, now stop and read all the documentation for all of these libraries".
Nikki L.R.
@nikkilr88
May 11 2017 19:55
Could anyone help me out? iframe error - Wikipedia viewer https://forum.freecodecamp.com/t/wikipedia-viewer-iframe-error/114696
Gulsvi
@gulsvi
May 11 2017 20:02
@chrisndeca There are thousands, if not hundreds of thousands of javascript and CSS libraries out there. It basically means, think of what you want your website to look like and use any library you want to achieve that. You don't have to use a library at all if you don't want to.
Estevao Oliveira
@Steve30s
May 11 2017 20:07
What is the main function of the class="container" ..?
Gulsvi
@gulsvi
May 11 2017 20:09
@tayilk You get a json object back from that API, so you use dot notation: https://www.freecodecamp.com/challenges/accessing-objects-properties-with-the-dot-operator
For that API, it would look like:
$.getJSON("https://ipinfo.io/json", function(data) {
  console.log(data);

  var city = data.city;
  var country = data.country;
  var hostname = data.hostname;
  var ip = data.ip;
  var [lat, lon] = data.loc.split(',');
  var org = data.org;
  var postal = data.postal;
  var region = data.region;

  $('body').append(city + ', ' + region + ': ' + lat + ', ' + lon)
});
Chris Norman
@chrisndeca
May 11 2017 20:10
@SkyCoder01 thanks. It still feels like being thrown into the deep end just a bit.
CamperBot
@camperbot
May 11 2017 20:10
chrisndeca sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1361 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 11 2017 20:11
@chrisndeca The portfolio is a big step up in difficulty. You are welcome to skip it and move on to the javascript challenges. In the next version of Free Code Camp, the portfolio will be the last project you create.
Eduar Tua
@eduartua
May 11 2017 20:12
What is a good approach to change the icon in the weather app? According to the temperature or another variable?
Gulsvi
@gulsvi
May 11 2017 20:12
@Steve30s The .container class adds 15px of padding on each side and centers itself on the screen with auto margins: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@eduartua I think Weather Underground gives you the icon to use. If you don't want to use their icons, you can use temperature if you want, or create a map of icon codes to weather conditions.
Lots of options :)
Eduar Tua
@eduartua
May 11 2017 20:14
Than you @SkyCoder01
Estevao Oliveira
@Steve30s
May 11 2017 20:14
@SkyCoder01 very good. !! thanks
CamperBot
@camperbot
May 11 2017 20:14
steve30s sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1362 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Trevor Yilk
@tayilk
May 11 2017 20:14
@JohnnyBizzel I want to be able to use the data outside of the callback
Luis Alcazar
@alcazluis
May 11 2017 20:15
Hey Guys thanks in advance for the help you may offer.
I am trying to build my "Tribute Page"
I have a question about images

when I insert my...

<div class="thumbnail"><img src="http://honeycuttshollywood.com/wp-content/uploads/2015/10/steve-jobs-fassbender.jpg">

I can't get it to center on the page
Gulsvi
@gulsvi
May 11 2017 20:16

@nikkilr88 Can you provide a codepen link to your project? I can help investigate. The one I see is stunning :) and pulls up a nice iframe of the article. It gives this error:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

Which is due to this issue: https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document

Luis Alcazar
@alcazluis
May 11 2017 20:16
or on the gray background created by my container
the image set on the example given from codepen fits nicely on the desktop screen and on a mobile screen
but my picture is either too small or too big
I tried using a high res pic and then switched it for a low res pic
and the high res comes out of the page on the mobile
and the low res does not center on the desktop
so either way I lose somehow
Chris Norman
@chrisndeca
May 11 2017 20:18
@SkyCoder01 Skipping over to JS is exactly what I did!
Luis Alcazar
@alcazluis
May 11 2017 20:18
any ideas?
oh wait.. it does not center on my jumbotron element
Gulsvi
@gulsvi
May 11 2017 20:19
@alcazluis the img-responsive class makes images scale to the size of the window. If it's a small image though, it won't get any larger than it's native resolution. text-center will center contents on your screen. Offset columns also can help: http://getbootstrap.com/css/#grid-offsetting
If you are using codepen, make sure you have added Bootstrap 3, this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Nikki L.R.
@nikkilr88
May 11 2017 20:20
@SkyCoder01 Thank you! Here it is http://codepen.io/nikkilr88/pen/RVQzXx
CamperBot
@camperbot
May 11 2017 20:20
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1363 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Nikki L.R.
@nikkilr88
May 11 2017 20:20
I am getting this "
VM163:23 This page is using the deprecated ResourceLoader module "jquery.ui.core".
Please use "mediawiki.ui.button" or "oojs-ui" instead."
Luis Alcazar
@alcazluis
May 11 2017 20:20
right! I used img-responsive and the center-block classes
Gulsvi
@gulsvi
May 11 2017 20:21
@alcazluis Click "Settings" and then click "CSS", add the link to bootstrap 3: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Codepen adds bootstrap 4 by default, which doesn't use those class names.
Luis Alcazar
@alcazluis
May 11 2017 20:21
I added bootstrap through the settings options from code pen
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssy to manually add this other link you give me instead @SkyCoder01
thanks
Gulsvi
@gulsvi
May 11 2017 20:22

@nikkilr88 I'm not seeing those errors - which browser are you using? I'm just getting this error:

load.php?debug=false&lang=en&modules=jquery%2Cmediawiki|mediawiki.legacy.wikibits&only=scripts&skin…:176 SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

Nikki L.R.
@nikkilr88
May 11 2017 20:22
@SkyCoder01 Turns out it was the Wikipedia page, not my app... Haha
Gulsvi
@gulsvi
May 11 2017 20:22
^^ That error is a result of me blocking cookies :)
Nikki L.R.
@nikkilr88
May 11 2017 20:22
image.png
Gulsvi
@gulsvi
May 11 2017 20:22
Ahhhh, okay @nikkilr88 Your wikipedia viewer is INCREDIBLE :)
Luis Alcazar
@alcazluis
May 11 2017 20:22
@SkyCoder01 it was the bootstrap link
Gulsvi
@gulsvi
May 11 2017 20:23
@alcazluis :) Glad you solved it
Nikki L.R.
@nikkilr88
May 11 2017 20:23
@SkyCoder01 Thanks for having a look! :D :D :D
CamperBot
@camperbot
May 11 2017 20:23
nikkilr88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave skycoder01 points
Luis Alcazar
@alcazluis
May 11 2017 20:23
thanks @SkyCoder01
CamperBot
@camperbot
May 11 2017 20:23
alcazluis sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1364 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Apoorv Mishra
@apoorv-mishra
May 11 2017 20:25
windows, macOS, linux, unix....all of them are types of OSs
Garo
@Garabed96
May 11 2017 20:28
guys for the twitch app, do we need to make it so when someone enters the channel name into a search bar it produces their results
while having the preset array of users already in the interface?
Chris
@bestintown23
May 11 2017 20:32
how to put soundcloud logo below countdown timer? http://codepen.io/bestintown23/pen/OmQrRr?editors=1100
Benny
@BenYoshi
May 11 2017 20:43
does anyone here know how to center a div vertically? I'm working on the random quote machine btw.
electricpen
@electricpen
May 11 2017 20:43
@Garabed96 The search bar is just a filter for the channels already in the array
so if they type in someone who isn't in the array your result should be blank
if they type in say the later 'a' then it should only show channels starting with the letter a
ahmedabdulqader
@ahmedabdulqader
May 11 2017 20:45
Hello, anyone have working Random quotes machine API?
electricpen
@electricpen
May 11 2017 20:45
er meant to type letter instead of later
Trevor Yilk
@tayilk
May 11 2017 20:46
@BenYoshi try margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
Apoorv Mishra
@apoorv-mishra
May 11 2017 20:47
Sparse is better than dense.
how can make the image fits in the gray background
Jumbotron
Benny
@BenYoshi
May 11 2017 20:52
@tayilk it's not working, here's my code: https://codepen.io/BenYoshi/pen/yMaKQq
how would i do it exactly?
phly104
@phly104
May 11 2017 20:53
I'm about to start the tribute page but I don't even now where to begin. Are we supposed to research and write the content as well?
Benny
@BenYoshi
May 11 2017 20:53
yeah
phly104
@phly104
May 11 2017 20:54
ok thanks
does it have to have to same bullet point format?
Chris Norman
@chrisndeca
May 11 2017 20:57
On the Javascript lesson about converting celsius to fahrenheit I used the following line to solve the problem, but I am not sure if there was a longer version of this that the lesson was trying to teach... fahrenheit = (celsius *= 9/5) + 32;
Anybody know?
Gulsvi
@gulsvi
May 11 2017 21:00

@BenYoshi Remove position: fixed from your .box class and use Bootstrap's flexbox utilities:

  <div class="container d-flex h-100">
    <div class="row align-self-center">
      <div class="box col-md-4 offset-md-4">
        <div class="quote-box">

You'll likely also need to add this to your CSS:

body,html {
  height: 100%;
}
chiehlu
@chiehlu
May 11 2017 21:00
Hi all, I am at the "Build a Tribute Page" project
How could I specify a font type (I want to use "Arial") for my unordered list element?
Alan Saber
@Alan95
May 11 2017 21:05
@chiehlu font-family
for example: font-family: "Times New Roman", Georgia, Serif;
Estevao Oliveira
@Steve30s
May 11 2017 21:06
how can make the class="Jumbotron" fits my image ?
chiehlu
@chiehlu
May 11 2017 21:06
@Alan95 Thanks! It works well
CamperBot
@camperbot
May 11 2017 21:06
chiehlu sends brownie points to @alan95 :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @alan95 |http://www.freecodecamp.com/alan95
BrianWilliams28
@BrianWilliams28
May 11 2017 21:07
hey there gents, could someone give me a tip on how to make my twitter button work better for the quote machine? when it's clicked it makes the page go blank for some reason.
https://codepen.io/BrianWilliams28/pen/QvavXB
Estevao Oliveira
@Steve30s
May 11 2017 21:07
Is there other class similar to Jumbotron ?
Alan Saber
@Alan95
May 11 2017 21:07
@steve30s what do you mean by fitting the image?
Estevao Oliveira
@Steve30s
May 11 2017 21:08
Alan Saber
@Alan95
May 11 2017 21:09
@steve30s ur image is inside the jumbotron for me, u justn eed to center ur image
iso
@iso1048
May 11 2017 21:09
@BrianWilliams28 add target="_blank" to the opening a tag
Alan Saber
@Alan95
May 11 2017 21:09
try the .img-responsive class on ur img so it fits even on small screens
Estevao Oliveira
@Steve30s
May 11 2017 21:09
@Alan95 its because the image is bigger than the Jumbotron.
okay.
Gulsvi
@gulsvi
May 11 2017 21:10
@Steve30s There's something wrong here, if you take a closer look:
<img src="https://media1.britannica.com/eb-media/50/136250-004-46BB7BC1.jpg"</img>
Tyler
@nmbrgts
May 11 2017 21:10
Hey, I have a browser related question. So I've come to understand that chrome caches http requests for repeat requests despite setting cache-control to no-store? This has caused some trouble for me working on the random quote generator since my script runs the same request for each new quote. I've worked around this by adding a number field to the query string of my api url and incrementing it with each request. This solution works fine but feels hacky, there a better work around for this?
BrianWilliams28
@BrianWilliams28
May 11 2017 21:10
@gothamknight thanks that made it work! can you explain what _blank does?
CamperBot
@camperbot
May 11 2017 21:10
brianwilliams28 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @gothamknight |http://www.freecodecamp.com/gothamknight
Gulsvi
@gulsvi
May 11 2017 21:12
@nmbrgts If you are using ajax or getJSON, you can set cache: false. Other methods have different approaches, but it depends on your code.
Estevao Oliveira
@Steve30s
May 11 2017 21:12
@SkyCoder01 is it a missing a ">"?
Gulsvi
@gulsvi
May 11 2017 21:12
@Steve30s Yes :) and you have a </img> which is not needed for images.
(no closing tag for images)
Estevao Oliveira
@Steve30s
May 11 2017 21:12
hummm.
Gulsvi
@gulsvi
May 11 2017 21:13
It won't center your image, but it's just an issue I noticed. The main problem is that your HTML is for Bootstrap 3, but your codepen project has Bootstrap 4 added in the settings.
iso
@iso1048
May 11 2017 21:14
@BrianWilliams28 makes the link in the anchor element open in a new tab. Thats all i know about that.
BrianWilliams28
@BrianWilliams28
May 11 2017 21:14
@gothamknight cheers
Alan Saber
@Alan95
May 11 2017 21:14
i hope fcc is gonna update soon, cuz everyone here is learning bootstrap 3 including me :D
Estevao Oliveira
@Steve30s
May 11 2017 21:14
@SkyCoder01 okay . let me change.
I have to change to bootstrap3 right ?
Charlysa Eubanks
@charlysae
May 11 2017 21:16
How can I center the content of my tribute page?http://codepen.io/charlysae/pen/xdYKQo
Gulsvi
@gulsvi
May 11 2017 21:16
Yes @Steve30s Just like in the example project's codepen settings
afani martin
@whiz25
May 11 2017 21:17
@charlysae try to set margin-left and margin-right to auto
Alan Saber
@Alan95
May 11 2017 21:17
@Steve30s if changed to bootstrap, add the class img-responsvie to ur img and not to ur div element
Benny
@BenYoshi
May 11 2017 21:18
does anyone know if there's a good api to fetch quotes for the quote-machine? Or should I just make my own?
Matt
@mdmpdx
May 11 2017 21:18
@BenYoshi check out api.forismatic.com
Benny
@BenYoshi
May 11 2017 21:19
says 403 forbidden
Estevao Oliveira
@Steve30s
May 11 2017 21:19
@Alan95 class="img-responsive". like that ? I can't find where to change bootstrap4 for 3
Benny
@BenYoshi
May 11 2017 21:20
thanks
Matt
@mdmpdx
May 11 2017 21:20
@BenYoshi welcome. forismatic is over http so you'll need to workaround the security issues by using jsonp
Alan Saber
@Alan95
May 11 2017 21:21
@steve30s yes thats a method for b3. in b4 its img-fluid i think.
Gulsvi
@gulsvi
May 11 2017 21:21
@mdmpdx slight correction, JSONP is not about mixing HTTP/HTTPS. That's mixed content.
Estevao Oliveira
@Steve30s
May 11 2017 21:21
I see. what you saying now.
Gulsvi
@gulsvi
May 11 2017 21:21
codepen will enforce HTTPS next month, so any resources that use HTTP will break
(without any workaround)
Matt
@mdmpdx
May 11 2017 21:22
ok, so forismatic will no longer work, period?
Gulsvi
@gulsvi
May 11 2017 21:22
Correct. Anyone using forismatic on codepen will need to switch to a new API if they want a working quote machine
Matt
@mdmpdx
May 11 2017 21:22
in that case, seems like writing one's own JSON quotes table is the way to go.
Estevao Oliveira
@Steve30s
May 11 2017 21:22
however the image remains the same. I will try to change in the end. Mean time I will try to finish the rest of of the project.
Gulsvi
@gulsvi
May 11 2017 21:22
Or, use a Quote API that works over HTTPS
Matt
@mdmpdx
May 11 2017 21:23
Are completed FCC projects reviewed at the end of the curriculum for correctness? I.e. if it works now and breaks 2 months from now, is that a do-over
Gulsvi
@gulsvi
May 11 2017 21:23
No one reviews your projects unless they are reported for plagiarism
Matt
@mdmpdx
May 11 2017 21:24
ok
Gulsvi
@gulsvi
May 11 2017 21:24
Your certificate is what you make of it, looks good on a refrigerator :)
Alan Saber
@Alan95
May 11 2017 21:24
@steve30s as sky said u need to change to b3 . do it at settings ->css -> quick add b3-link
Gulsvi
@gulsvi
May 11 2017 21:25
There is no b3 link :(
Benny
@BenYoshi
May 11 2017 21:25
@SkyCoder01 so do you have a api that works over https?
*an
Alan Saber
@Alan95
May 11 2017 21:25
how can he demote to b3 then
@Steve30s do img-fluid it works for me on ur project
Gulsvi
@gulsvi
May 11 2017 21:25
Manually copy/paste the link to Bootstrap 3: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
img-fluid is Bootstrap 4
img-responsive is Bootstrap 3
Alan Saber
@Alan95
May 11 2017 21:26
ye thats what i meant :P my english is terrific sometimes
Gulsvi
@gulsvi
May 11 2017 21:26
@BenYoshi Quotes On Design is one that a lot of people use: https://quotesondesign.com/api-v4-0/
Estevao Oliveira
@Steve30s
May 11 2017 21:26
thanks ... :)
Gulsvi
@gulsvi
May 11 2017 21:27
@Alan95 Your english is perfect :)
Benny
@BenYoshi
May 11 2017 21:27
thank ye sir
Gulsvi
@gulsvi
May 11 2017 21:27
@BenYoshi, did you see my comment above about vertical centering?
Alan Saber
@Alan95
May 11 2017 21:27
i am trying haha
Estevao Oliveira
@Steve30s
May 11 2017 21:27
@Alan95 it worked super perfect. thanks man.
CamperBot
@camperbot
May 11 2017 21:27
:cookie: 306 | @alan95 |http://www.freecodecamp.com/alan95
steve30s sends brownie points to @alan95 :sparkles: :thumbsup: :sparkles:
Alan Saber
@Alan95
May 11 2017 21:27
wish i would knew french !
Gulsvi
@gulsvi
May 11 2017 21:27
I wish I knew german :p
Alan Saber
@Alan95
May 11 2017 21:28
are u french?
Gulsvi
@gulsvi
May 11 2017 21:28
Canadian
close enough :/
Alan Saber
@Alan95
May 11 2017 21:28
german has really hardg rammar
Gulsvi
@gulsvi
May 11 2017 21:28
lol :)
Alan Saber
@Alan95
May 11 2017 21:29
i remember how u helped me on my api projects 1month ago xD i finally did my frontend cert. :D
do urememebr
Gulsvi
@gulsvi
May 11 2017 21:29
Congrats :)
Yes, I don't think you have been here for a few weeks
Data Visualization now?
Alan Saber
@Alan95
May 11 2017 21:30
i was coding in my cave
well i got a webdev traineejob starting next week so i dont know yet. but react seems really cool and i started learning it
Gulsvi
@gulsvi
May 11 2017 21:31
Good news :) congratulations
Alan Saber
@Alan95
May 11 2017 21:31
thank you :) @SkyCoder01
CamperBot
@camperbot
May 11 2017 21:31
alan95 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1365 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Trevor Yilk
@tayilk
May 11 2017 21:32
can anyone tell me why my getjson call to the openweathermap api isn't working?
Tyler
@nmbrgts
May 11 2017 21:33
@SkyCoder01 I'm using the fetch with cache : "no-store" am I wrong to think that this is equivalent? The spec for this mode states: "no-store" Fetch behaves as if there is no HTTP cache at all. This behaves the way I expect on firefox but, not on chrome. Here is my pen: http://codepen.io/nmbrgts/pen/LyOPVY?editors=0011
I've commented out the part that compensates for this issue with chrome as well as a recursive call to the update function. You'll see that in chrome the request is cached despite the "no-store" setting. This is in the getNewQuote member of App on line 76.
The url and options object are stored in App's state on the lines above getNewQuote
Gulsvi
@gulsvi
May 11 2017 21:34
@nmbrgts I had that exact same problem with that API using fetch. I don't think cache: no-store is supported in all browsers yet. It worked sometimes and then didn't work other times. The fix for me was to add Date.now() to the end of the URL. It seems like an acceptable workaround - many websites do this to prevent browser caching of images.
Timestamps also used on files too
Tyler
@nmbrgts
May 11 2017 21:38
@SkyCoder01 Thanks for the insight!
CamperBot
@camperbot
May 11 2017 21:38
nmbrgts sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1366 | @skycoder01 |http://www.freecodecamp.com/skycoder01
AJ Robisch
@AJFelidae
May 11 2017 21:39

Hi, is the CSS selectors challenge on beta.freecodecamp.com bugged? Here is my relevant code: ```<style>
h2 {
color: blue;
}
</style>

<h2>CatPhotoApp</h2>```

The part where it says "your h2 element should be blue" does not check, even though it shows up as blue.
Or am i missing something else?
Matt
@mdmpdx
May 11 2017 21:43
in my JSON data from the twitch/wind-bow API I am getting in the object: created_at: "2017-05-11T17:55:07Z" I'm keen on converting this into a more legible time to display per channel. I'm not sure what format that's in to know where to start on converting it... is there a shorthand to describe that way of displaying time/datestamp?
Alan Saber
@Alan95
May 11 2017 21:50
@Aviendhaast name of challenge?
Josep Maria Salvia Hornos
@josalhor
May 11 2017 21:56
Hi guys, I'm still fixing the same problem I had yesterday fixing vertical aligment.
I've - more or less - figured out how vertocal aligment works, but I'm running into another problem at this point:
I have two divs, one inside the other, between the two I have text
I want the second div to fit the rest of the first one so it can align what's vertically inside it, however, when I set height 100% it overflows the div, applying overflow:hidden doesn't seem to work the way I expect
The part in the end that says "Around the web" with four buttons
Miguel T Rivera
@mtrivera
May 11 2017 21:58
@mdmpdx You could use a regular expression to get the time: /\d{2}:\d{2}:\d{2}/
Matt
@mdmpdx
May 11 2017 21:59
@mtrivera i'm not sure i understand
Gulsvi
@gulsvi
May 11 2017 22:03
@mdmpdx Lots of ways to do it I think. date.parse() converts it to a UTC string, and then toLocaleTime/Datestring() methods will convert it to the user's locale:
const timestamp = '2017-05-11T17:55:07Z',
      date = new Date(Date.parse(timestamp)).toLocaleDateString(),
      time = new Date(Date.parse(timestamp)).toLocaleTimeString(),
      converted = date + ' ' + time;

console.log(converted) // 5/11/2017 10:55:07 AM
Matt
@mdmpdx
May 11 2017 22:05
thanks @SkyCoder01 , that is a great link. I'd been googling but was unsure how to describe what i wanted to do properly
CamperBot
@camperbot
May 11 2017 22:05
mdmpdx sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1367 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 11 2017 22:05
I think what @mtrivera is saying is that you can extract what you want from the string:
2017-05-11T17:55:07Z
year is 2017, month is 05, day is 11, time is 17:55, timezone is zulu? I'm guessing.
Garo
@Garabed96
May 11 2017 22:08
https://codepen.io/CapGaro/pen/aWVZyJ
anyone know how to reduce the image size and if its possible to do it in jquery
Matt
@mdmpdx
May 11 2017 22:09
thanks @SkyCoder01 , i'm curious what the const is for, as opposed to var? I've found some discussions but people seem to debate it
CamperBot
@camperbot
May 11 2017 22:09
mdmpdx sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: mdmpdx already gave skycoder01 points
Gulsvi
@gulsvi
May 11 2017 22:10
@mdmpdx const is like var but it can't be reassigned. In ES6, var isn't really needed any more. I use const whenever possible, and let if I ever need to reassign the variable.
For example, this is an error:
const myString = 'hello';
myString = 'hello world';
Josep Maria Salvia Hornos
@josalhor
May 11 2017 22:11
someone?