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
Ben 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
ahmdqader
@ahmdqader
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?
JD Tadlock
@jdtdesigns
May 11 2017 22:13
@JosepSalvia What's the issue?
Josep Maria Salvia Hornos
@josalhor
May 11 2017 22:13

copy-pasterino: @JosepSalvia
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
https://codepen.io/IloveZelda/pen/VbrMgP?editors=1100

Matt
@mdmpdx
May 11 2017 22:15
@SkyCoder01 I'll be converting the timestamp from my JSON data into pieces as you've shown it, but it's inside of a FOR loop to go through the array of streams -- it's assigning the value once per loop, will that work with const since it's not being reassigned after the declaration? I assume each time the FOR loop runs, it is newly declared
Will Foster
@Will5592
May 11 2017 22:15
@SkyCoder01 I read through your stuff, and followed the advice of another person, moving the url2 link inside the success function of the second Ajax call, but it didn't solve it and I'm really stuck with it now. (sorry this is from a while ago I know)
markom93
@markom93
May 11 2017 22:16
Hey guys, having some trouble with the random quote machine challenge. Everything works mostly as intended when i run it locally, but as soon as i paste it on codepen it craps out and doesn't show stuff as intended. https://codepen.io/markom93/full/OmvZJZ/ anyone care to weigh in_
Matt
@mdmpdx
May 11 2017 22:18
@markom93 are you intending to use Bootstrap 3 or 4? Your CodePen is set to BS4
Gulsvi
@gulsvi
May 11 2017 22:18
@mdmpdx Yes, that will work fine.
@Will5592 If you can share your codepen, I can take a closer look
markom93
@markom93
May 11 2017 22:20
@mdmpdx didn't even entertain the possibility it was a version missmatch, thank you very much
CamperBot
@camperbot
May 11 2017 22:20
markom93 sends brownie points to @mdmpdx :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @mdmpdx |http://www.freecodecamp.com/mdmpdx
Will Foster
@Will5592
May 11 2017 22:21
@SkyCoder01 Sure, thanks. Link : http://codepen.io/Will5592/pen/zwwMOp?editors=1011
CamperBot
@camperbot
May 11 2017 22:21
will5592 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1368 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Matt
@mdmpdx
May 11 2017 22:21
@markom93 no problem. I have fallen into this trap many times ;)
Will Foster
@Will5592
May 11 2017 22:22
@SkyCoder01 I've added a few random things into the ajax sucess (like logging to the console the number the loop is at), just to try and figure out what's going on. Before the Ajax call it iterates through the numbers and names in the array with no proble (0-9) but once inside the Ajax calls, it goes to pot...
alpox
@alpox
May 11 2017 22:25
@Will5592 Exchange var i with let i in the for loop
Gulsvi
@gulsvi
May 11 2017 22:25
@Will5592 From a quick glance, I see you're still using a for loop, which is giving you "undefined" in your getJSON calls.
nvm....
alpox
@alpox
May 11 2017 22:26
@Will5592 Should fix it
alpox
@alpox
May 11 2017 22:26
@SkyCoder01 You are right, changing to something else than a for would work too, but this is the easiest fix :D
Gulsvi
@gulsvi
May 11 2017 22:27
let, IIFE, or forEach are all great solutions to this common problem
Though, I've never like IIFE's all that much :p
Josep Maria Salvia Hornos
@josalhor
May 11 2017 22:27
@jdtdesigns any ideas?
alpox
@alpox
May 11 2017 22:28
@SkyCoder01 What shortcut is that :D
Ah i see... I just didn't know the name
I would always try to come around that, its ugly as hell :D
Will Foster
@Will5592
May 11 2017 22:30

@alpox @SkyCoder01 Yeah I did have a read earlier, but unfortunately didn't really get it (or at least how it was applicable to this) :/

I've tried changing it to let, but it still just gets the 'online' people, and the remaining 8 all end up as the final person in the array

Gulsvi
@gulsvi
May 11 2017 22:30
Immediately Invoked Function Expression, agree. Ugly :)
Josep Maria Salvia Hornos
@josalhor
May 11 2017 22:31
someone else may try to help me out?
EJ Nevarez
@nevarezej
May 11 2017 22:32
Hello all im stuck/ confused..
im need to "Build a Tribute Page" first Front end page im supposed to build.. question i have is do i have to do the tribute page they have created and just re-do it? or i pick a person and do whatever i want?
Will Foster
@Will5592
May 11 2017 22:34
@nevarezej Nah you can do anyone, doesn't have to be the one they did it. As long as your meet the criteria they tell you, it can look however you like and be about whoever you want
Josep Maria Salvia Hornos
@josalhor
May 11 2017 22:34
@nevarezej I did the same person and copy-pasted the text, it really doesn't matter, the point is to understand and learn html and css
EJ Nevarez
@nevarezej
May 11 2017 22:35
thank you
Josep Maria Salvia Hornos
@josalhor
May 11 2017 22:36
This is the thrid time I'm posting this, I don't want to spam but I'm seriusly stock here.
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
https://codepen.io/IloveZelda/pen/VbrMgP?editors=1100
becksphoto
@becksphoto
May 11 2017 22:36
Hey guys anyone else having a problem loading Bootstrap into code pen ?
Will Foster
@Will5592
May 11 2017 22:36
@SkyCoder01 Also, if I wanted to do a forEach I'd have to create an array of urls to iterate through?
Gulsvi
@gulsvi
May 11 2017 22:37
@Will5592 If you use let instead of var in your for loop, it will be the same as using a forEach. No need to change anything but the var
I think one issue you're hitting is that when you ask for a non-existent user, you actually get a 404 error back from the API. This might be one reason it's easier to use the link that free code camp gives us in the challenge.
Will Foster
@Will5592
May 11 2017 22:38
@SkyCoder01 Yeah I changed it to let, but it still has an issue, where it will find the first two people (who are online), but then it will just search the remaining 8 times for the final person in the array
Gulsvi
@gulsvi
May 11 2017 22:39
Failed to load resource: the server responded with a status of 404 ()
^^ That shows up several times in the logs
Garo
@Garabed96
May 11 2017 22:39
$('#theDiv').prepend('<br><img id="theImg"  src= + data.logo + />');
anyone know why that won't load my imgs into codepen?
for the twitch app
Will Foster
@Will5592
May 11 2017 22:39
@SkyCoder01 Yeah I'd thought about using that wind-bow thing, but I figured that because this is how the new twitch api worked, I might as well learn to use that because I won't always have a nice helpful api made for me :)
Perhaps I'm being stubborn though...
Gulsvi
@gulsvi
May 11 2017 22:40
It's a good experience in debugging :)
Will Foster
@Will5592
May 11 2017 22:40
As for the 404 errors, when I load that page in my browser (https://api.twitch.tv/kraken/channels/comster404?client_id=rpfs7beif6qpx6onvhq5m84jnx949t), you still get a json response, it just has some different into in it
Gulsvi
@gulsvi
May 11 2017 22:40
At this point, though, how much is it helping you learn? :)
Will Foster
@Will5592
May 11 2017 22:41
@SkyCoder01 It's just winding me up tbh... lol
Gulsvi
@gulsvi
May 11 2017 22:41
I didn't use the full API with my Twitch project, just the wind-bow. I can try switching out the URLs to see if it fixes anything
RonnyNovik
@RonnyNovik
May 11 2017 22:41
How can i add a block of paragraph on a picture?
Garo
@Garabed96
May 11 2017 22:41
use that bro, no errors
Will Foster
@Will5592
May 11 2017 22:42
@Garabed96 if you change the user from freecodecamp to comster404 though, you get the same response as in the link I just showed to SkyCoder
Gulsvi
@gulsvi
May 11 2017 22:42
@Will5592 See, it works great if you do this for your URLs :)
    var url = "https://wind-bow.glitch.me/twitch-api/streams/" + channelsArr[i];
    var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + channelsArr[i];
Garo
@Garabed96
May 11 2017 22:42
why do you need comster404
and is that a channel or a stream
Will Foster
@Will5592
May 11 2017 22:43
@Garabed96 To prove that I can display non-existent channels. It's neither :)
Gulsvi
@gulsvi
May 11 2017 22:43
@Garabed96 It's in the instructions for the challenge - one of the non-existent users
becksphoto
@becksphoto
May 11 2017 22:44
I wish I could progress, my HTML is fine but the fact that Bootstrap isn't actually loading means that I can't preview my Pen - any tips to progress thanks. I've loaded the Bootstrap in CSS under the quick add option as directed.
Will Foster
@Will5592
May 11 2017 22:44

@SkyCoder01 I tried that, weirdly, it now displays the names in the consoles instead of the errors, so it's step forward... I wonder why though, maybe the wind-bow option displays the errors as JSON, as oppose to errors, if that makes sense? (even though what is displayed is the same...

Still getting a problem where the final 8 are using comster404 though, instead of the proper array

Garo
@Garabed96
May 11 2017 22:45
oh ma bad lol, I'm still on the first challenge of that ahha
Gulsvi
@gulsvi
May 11 2017 22:46
@Will5592 Yes, that's what I was trying to explain earlier - the actual Twitch API responds with an actual error
You'll need to use .fail() to catch it and handle appropriately in your .ajax
Will Foster
@Will5592
May 11 2017 22:47
@SkyCoder01 Right I see ok, not ,error: function {...}
Garo
@Garabed96
May 11 2017 22:47
@becksphoto your question is very vague
Gulsvi
@gulsvi
May 11 2017 22:47
I think that works too @Will5592. I use something like:
    $.ajax({
      type: "GET",
      url: url
    }).done(function(data) {
      // success
    }).fail(function(err) {
      // error
    })
Will Foster
@Will5592
May 11 2017 22:48
@SkyCoder01 I missed that message I think, about the error. It's a bit confusing (until it's explained) because with the JSON viewer I am using in chrome, the call to the twitch api and the wind-bow api are exactly the same lol
Garo
@Garabed96
May 11 2017 22:48
@Will5592 ayyo did you use png in your codepen, does that work to link the icon?
Gulsvi
@gulsvi
May 11 2017 22:48
lol, yeah, the debug console in the developer tools is also needed
becksphoto
@becksphoto
May 11 2017 22:48
@Garabed96 I have just started within the codepen and it directs me to load bootstrap from the CSS setting and then add a class to the <h1> command - I did that but on typing my Html code is perfect but the preview is showing only code - hope that makes sense. Just wondering why bootstrap isn't functioning.
Garo
@Garabed96
May 11 2017 22:49
link your code @becksphoto
becksphoto
@becksphoto
May 11 2017 22:50
<h1> class="text-primary">Diane Arbus</h1>
simple
Will Foster
@Will5592
May 11 2017 22:50
@Garabed96 I think I just used '<img src="' + data.stream.channel.logo + '"></img>'
Although I've since taken that element out until I get get the responses working, the adding it to the HTML was the easy bit for me :) It's the other stuff I can't figure out lol
@SkyCoder01 yeah I do try and use that in conjunction with the codepen console, I like CDT a lot now (Used to hate them)...
As for my pen, I am still having issues lol, but I think I'll have to pick this up tomorrow lol. Thanks for your help dude!
CamperBot
@camperbot
May 11 2017 22:52
will5592 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: will5592 already gave skycoder01 points
becksphoto
@becksphoto
May 11 2017 22:53
I can work on the project in SublimeText and try to work out why bootstrap isn't working in my quick add in the CSS settings - as it's little frustrating.
Will Foster
@Will5592
May 11 2017 22:53
@becksphoto Your class is outside the <>s
Garo
@Garabed96
May 11 2017 22:54
<h1 class="text-primary">
becksphoto
@becksphoto
May 11 2017 22:54
ah gotcha :D
Garo
@Garabed96
May 11 2017 22:54
as will said, its supposed to be inside those triangle brackets
becksphoto
@becksphoto
May 11 2017 22:54
thanks @Garabed96
CamperBot
@camperbot
May 11 2017 22:54
becksphoto sends brownie points to @garabed96 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @garabed96 |http://www.freecodecamp.com/garabed96
LeSean Johnson
@leseanbiz
May 11 2017 22:55
anyone got a minute to help with the api for the wiki viewer project?
Garo
@Garabed96
May 11 2017 22:55
usually its better to link your code @becksphoto that way its easier to see the mistake
@Will5592 thank you
CamperBot
@camperbot
May 11 2017 22:55
garabed96 sends brownie points to @will5592 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @will5592 |http://www.freecodecamp.com/will5592
Garo
@Garabed96
May 11 2017 22:56
@Will5592 but why .stream.channel... its data.logo for me using https://wind-bow.glitch.me/twitch-api/channels/freecodecamp1
@leseanbiz link it maybe I can help, did you use ajax by any chance
becksphoto
@becksphoto
May 11 2017 22:57
Indeed! hehe
LeSean Johnson
@leseanbiz
May 11 2017 22:57
no, i was just going to use getJSON
i really havent even gotten that far
Garo
@Garabed96
May 11 2017 22:58
ok shoot
what's the q
LeSean Johnson
@leseanbiz
May 11 2017 22:59
two things, the API sandbox doesn't allow me to input a test value for "title". also, what do i use to display the list of possible results? I see the API returns like 50 results, i'm thinking showing 10 would be enough. is there a library that makes that a bit easier or should i be planning to generate HTML for each result?
heres the pen so far if that helps but theres not much there yet.
Garo
@Garabed96
May 11 2017 23:01
@leseanbiz for your second question 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+ theWord +'&limit=25&namespace=0&format=json'
you see limit=25 that sets the amount of results to 25, you would do limit=10 for 10.
thats the url I linked
LeSean Johnson
@leseanbiz
May 11 2017 23:03
where are you seeing that as an option. i mean the 'search=' option. the only option i have seen is the 'title='.
i must be missing some part of the documentation
njordomir
@njordomir
May 11 2017 23:06
Hey guys, would you consider my current weather app acceptable (despite the current absense of the F to C toggle)? I'm trying to learn to code, so I don't want to pour hours into graphic design non-production projects like this. https://codepen.io/Njordomir/pen/Mmryqz
Garo
@Garabed96
May 11 2017 23:08
@leseanbiz I didn't use the api sandbox it was confusing as hell, not to mention a waste of time. As for where I got it, I don't remember and it doesn't matter :smile: just use it. 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+ theWord +'&limit=25&namespace=0&format=json'
MROB0T
@MROB0T
May 11 2017 23:08
i need help with the js how do i keep the animated shake keep shaking continuously?
LeSean Johnson
@leseanbiz
May 11 2017 23:09
@njordomir im not sure it does. its got all of the backgrounds showing at once, no icon, no temperature, the block for 'powered by dark sky' is in the upper part of the page. i relate to your statement but nobody is going to like it if it looks like ass, not even you.
Garo
@Garabed96
May 11 2017 23:09
copy paste that into your web ui's url with theword changed to an actual word and you'll see it produces answers
LeSean Johnson
@leseanbiz
May 11 2017 23:09
@Garabed96 yeah, that looks like it because the API documentation and sandbox dont seem to function for shit. ill save that link, thanks so much!
CamperBot
@camperbot
May 11 2017 23:09
leseanbiz sends brownie points to @garabed96 :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @garabed96 |http://www.freecodecamp.com/garabed96
iso
@iso1048
May 11 2017 23:10
@njordomir designlooks good (im still working on the weather app). you could add the attribute target="_blank" to the darksky link so that it opens in a new tab.
Garo
@Garabed96
May 11 2017 23:10
@njordomir https://codepen.io/CapGaro/pen/YZYqmo?editors=0011
that's mine its fully functional, shit design and not dynamic though, for reference :smile:
the bare minimum you have to do is make it functional, it should work on phones and smaller screens too, but to hand it in it just needs to complete all the user stories..
njordomir
@njordomir
May 11 2017 23:23
@Garabed96 Looks fine to me. It's a simple design, and it probably looks less "spacious" on a mobile device. I like the way your code handles the C to F conversion. You might be interested in how the icons worked on mine. I got some help with it last night. Apparently, these icons, https://erikflowers.github.io/weather-icons/ , are compatible with the dark sky api, so all I have to do is prepend wi-forcastio onto the text of the json.current.icon endpoint. It saved me the pain and suffering of writing a switch covering every possible icon.
Estevao Oliveira
@Steve30s
May 11 2017 23:27
What happen after we finish and submit our challenge ?
Gulsvi
@gulsvi
May 11 2017 23:30
@njordomir I'm not seeing an icon in your weather app right now. Maybe you're updating it - I also had to add jQuery.
FWIW, Skycons are built to work with Dark Sky and are still maintained: https://darkskyapp.github.io/skycons/
@Steve30s You get to do more challenges :)
alpox
@alpox
May 11 2017 23:32
@SkyCoder01 "I also had to use jQuery" i really hope i wont have to hear that from coworkers working on the same peoduct as me xD
add*
Gulsvi
@gulsvi
May 11 2017 23:32
lol, some people say it's a swear word at my JS meetups
Estevao Oliveira
@Steve30s
May 11 2017 23:32
@SkyCoder01 Yes I do :) - I just want to know, if they correct them, or if we get feedback from the challenge etc... :)
Gulsvi
@gulsvi
May 11 2017 23:33
@Steve30s You'll only get feedback from us here :) and you can ask people on the free code camp forums and over at: https://gitter.im/FreeCodeCamp/CodeReview
alpox
@alpox
May 11 2017 23:34
@SkyCoder01 well i guess i can live with it as dependency if it doesnt appear anywhere in my code except in other dependencies :D
Estevao Oliveira
@Steve30s
May 11 2017 23:34
allright. :)
@SkyCoder01 Can I get a feedback from you ? here it is. https://codepen.io/Steve30s/pen/gWeeZX
:)
alpox
@alpox
May 11 2017 23:36
@Steve30s looks good on mobile. The picture could be centered on wider screens though :)
A little more space between the main title and the comment to the picture would also do well
Estevao Oliveira
@Steve30s
May 11 2017 23:37
You checked from your mobile ? @alpox
alpox
@alpox
May 11 2017 23:37
But overall, good job!
@Steve30s yes. Das im about to go to bed so i only check it from mobile now :)
Hmm darn autocorrection :D
Estevao Oliveira
@Steve30s
May 11 2017 23:38
I see. Interesting. I haven't checked from my mobile.
Gulsvi
@gulsvi
May 11 2017 23:39
@Steve30s I'll give feedback if you can explain what this line of code does :)
<div class="col-xs-12 col-sm-10 col-sm-offset-1 cold-md-8 col-md-offset-2">
alpox
@alpox
May 11 2017 23:39
@Steve30s you should alwayw check your site with at least 2 major browsers - firefox and chrome. As well as for responsiveness. (smaller screens)
Estevao Oliveira
@Steve30s
May 11 2017 23:39
@SkyCoder01 :)
alpox
@alpox
May 11 2017 23:39
In the browsers development tools you find good utility for viewing the page as if you were on mobile
@SkyCoder01 thats badass xD
Matt
@mdmpdx
May 11 2017 23:41
I'm having some trouble with the Twitch JSON API... I've got it accessing the JSON using the workaround and it's displaying some content. However, it isn't properly iterating through the array and just seems to be displaying the same username every time. I am unsure that I have the structure of the JS correct to achieve what I want...
var arr = [1,2,3,4,5];

for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i);
  })  
}
alpox
@alpox
May 11 2017 23:45
@mdmpdx you can also use let instead of var to initialize your iteration variable
Matt
@mdmpdx
May 11 2017 23:45
@alpox what are the pros and cons of using one vs the other?
alpox
@alpox
May 11 2017 23:46
@mdmpdx the major difference is that var is defined in functionscope while let is defined in blockscope. You see the difference quite well when you use @SkyCoder01 example code and let it run once with var and once with let
@mdmpdx This might make it bit more clear:
if(true) { // Start block
    var foo =  "bar";
} // End block
console.log(foo); // Logs "bar"
if(true) { // Start block
    let foo = "bar";
} // End block
console.log(foo); // Error - variable not defined
Matt
@mdmpdx
May 11 2017 23:49
@alpox i see.... so the main benefit is in the event that you use multiple counters and don't want them getting confused?
alpox
@alpox
May 11 2017 23:50
@mdmpdx Well if you use var inside of the iteration with for, you actually always have only 1 variable which gets increased. If you do calls which come back later (asynchronous), the loop will have finished and that variable will have the state it has after the last iteration. (Always the same one)
If you use let instead, there are as many variables as there are iterations - one variable is only defined in its own block of code
Cory Johnson
@CygnusSW
May 11 2017 23:52
Correct me if I'm wrong on the details @alpox, but my understanding is that let is essentially block scoped (any "{}"), where as var is function scoped (the nearest "function(){}" or the global object/namespace.
alpox
@alpox
May 11 2017 23:53
@Rom2711 I won't correct you since you're totally right
Its what i said before :point_up: 12. Mai 2017 01:46
Cory Johnson
@CygnusSW
May 11 2017 23:53
Don't mind my eyesight :)
Estevao Oliveira
@Steve30s
May 11 2017 23:54
@alpox How to open the page I created on mobile without using the pen website.? I want to open the page itself. https://codepen.io/Steve30s/pen/KmorBG
iso
@iso1048
May 11 2017 23:54
@SkyCoder01 could you remind me of the api you used to get location (city, country) data please?
alpox
@alpox
May 11 2017 23:55
@Steve30s You cannot - you'd have to verify your email address first :D
Then you can use the full-screen view
(Or debug view)
Gulsvi
@gulsvi
May 11 2017 23:55
@gothamknight A cheap and easy way to do it is with: https://ipinfo.io/json, but can be inaccurate. To do it with latitude/longitude, use Google's Reverse Geocode API
Estevao Oliveira
@Steve30s
May 11 2017 23:56
@alpox :)
iso
@iso1048
May 11 2017 23:56
yeah didnt want to use ip for that reason.
alpox
@alpox
May 11 2017 23:57
@gothamknight Well you gotta use your ip if you don't have a GPS or Mobile antenna :D
Googles reverse geocode api just takes the lat/lon from the ip you got through ipinfo and tells you what place you are at (At least i understood it like that)
Gulsvi
@gulsvi
May 11 2017 23:58
It reverse geocodes whatever lat/lon you send it
alpox
@alpox
May 11 2017 23:58
Ya exactly
But its nasty to use isn't it? @SkyCoder01 i thought you'd have to integrate a map only for using it
iso
@iso1048
May 11 2017 23:59
@alpox @SkyCoder01 are you both saying the same thing?
alpox
@alpox
May 11 2017 23:59
@gothamknight We are :D
Gulsvi
@gulsvi