These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Sep 2016
Irene
@ideposoy
Sep 03 2016 00:01
I need help please. I'm creating a tribute page. I got my texts to center but I can't get them to wrap. I've tried several suggestions I found online but none of them worked :-(
Anshul Jain
@ajain706
Sep 03 2016 00:06
@ideposoy can you post your linl
link'
Lamine
@mlhamoudi
Sep 03 2016 00:23
Hello Guys, I'm building the tribute page project, and I wanted your feedback: http://codepen.io/mlhamoudi/full/WGNJOO/
Marc Droz
@b1tc0de
Sep 03 2016 00:24
hi saviors i need your help once again, i have an .svg on my portfolio and i want to arrage text to the right side of the .svg http://codepen.io/b1t/pen/yJdwrP?editors=1100
Margaret
@Margaret2
Sep 03 2016 00:37
@mlhamoudi nice job, now you just need a link for further info
Lamine
@mlhamoudi
Sep 03 2016 00:38
Thanks for your feedback @Margaret2
Steve Rybka
@steevka
Sep 03 2016 00:38
@b1tc0de I would use bootstrap columns to accomplish this
CamperBot
@camperbot
Sep 03 2016 00:38
mlhamoudi sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @margaret2 |http://www.freecodecamp.com/margaret2
Stephen
@stephepush
Sep 03 2016 00:51
@nsloc22 , lol thanks
CamperBot
@camperbot
Sep 03 2016 00:51
stephepush sends brownie points to @nsloc22 :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @nsloc22 |http://www.freecodecamp.com/nsloc22
comaeternal
@comaeternal
Sep 03 2016 01:29

var count = 0;

function cc(card) {
  // Only change code below this line

  switch(card) {
    case 2:
      count += 1;

    case 3:
      count += 100;

  }

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

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3);
can someone explain why this returns 201? How so? I don't understand
Stephen James
@sjames1958gm
Sep 03 2016 01:30
@comaeternal There is no break between cases so when card is 2 count += 1 and count += 100
comaeternal
@comaeternal
Sep 03 2016 01:32
how does that add to 201? What does the math look like?
I added break to each case and it came up to 101 which is what I wanted originally.
Stephen James
@sjames1958gm
Sep 03 2016 01:34
@comaeternal with card === 2 it is count += 1 then count += 100 then with card === 3 count +=100 which is 201
comaeternal
@comaeternal
Sep 03 2016 01:35
now it makes sense. Thanks!!
Stephen James
@sjames1958gm
Sep 03 2016 01:36
@comaeternal :)
comaeternal
@comaeternal
Sep 03 2016 01:36
@sjames1958gm yeeess
Marc Droz
@b1tc0de
Sep 03 2016 02:09
thanks @steevka
CamperBot
@camperbot
Sep 03 2016 02:09
b1tc0de sends brownie points to @steevka :sparkles: :thumbsup: :sparkles:
:cookie: 132 | @steevka |http://www.freecodecamp.com/steevka
Aaron
@apalm1341
Sep 03 2016 02:15
hey all
I need help with setting up my form
I am trying to do that through formspree because formspree is awesome
It says that I am supposed to add a name attribute to every field.
How do I do this and does?
*meant to say how do I do this?
Oliver Bennett
@omwbennett
Sep 03 2016 02:28
Does anyone know how to get API calls working with Codepen?
pedrofreire
@pedrofreire
Sep 03 2016 02:31
I'm having the same issue now, getJSON doesn't work
DJ
@qualitymanifest
Sep 03 2016 02:33
@omwbennett @pedrofreire paste your codepens
Oliver Bennett
@omwbennett
Sep 03 2016 02:34
hmm just read this: FreeCodeCamp/FreeCodeCamp#7853
did as the guy said and tried calling a different url and it seems to be working now
pedrofreire
@pedrofreire
Sep 03 2016 02:54
Don't think that'll work for me :/ besides, I'm not in the weather challenge
I can get the correct json through the browser
DJ
@qualitymanifest
Sep 03 2016 02:56
@pedrofreire prepend https://crossorigin.me/ to your wikipedia URL
pedrofreire
@pedrofreire
Sep 03 2016 03:03
Seems it's working. I find these security issues like this cross-origin one difficult to grasp. @qualitymanifest Thank you! (:
CamperBot
@camperbot
Sep 03 2016 03:03
pedrofreire sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1394 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
DJ
@qualitymanifest
Sep 03 2016 03:04
@pedrofreire cool. don't worry about them too much for now, as long as you can find a fix
Norvin Burrus
@ndburrus
Sep 03 2016 03:08
Aaron
@apalm1341
Sep 03 2016 03:11
can someone help me with my form?
I am trying to make it active/working
I am trying to use formspree and it says that I am supposed to add a name attribute to every field
I am unsure of how to go about doing this
Norvin Burrus
@ndburrus
Sep 03 2016 03:15
@pedrofreire these may be useful: :sparkles:
Dan Logajan
@hiltydiggs
Sep 03 2016 03:18
<input name="my-element">
faraz
@silentarrowz
Sep 03 2016 03:35
could anyone tell me how to achieve this effect ?? http://res.cloudinary.com/whizzy/image/upload/v1472872426/img-effect.jpg
Alex
@Sevohan
Sep 03 2016 03:52
Hey everyone, I'm stuck at one of my last steps in my Quote engine project. I'm trying to make it so my tweet button automatically posts my quote. I know that I should be referencing the id of my href but I'm not entirely sure how to do that so it works.
Stephen
@stephepush
Sep 03 2016 03:52
I'm trying to make my random quote generator show "unattributed" if a quote has no cited author. I've been scouring stackoverflow for a solution and none of them seem to work. Here's one solution I've tried:
 $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?', function(data) {
    $('#quote').append("<p>" + data.quoteText + "</p>");
    $('#author').append("<p>" + "-" + data.quoteAuthor + "</p>");
    $('#author:empty').text("Unattributed");
@Sevohan, your tweet button isn't working
but otherwise, good job!
Alex
@Sevohan
Sep 03 2016 03:54
@stephepush Yeah that's what I came here to try to figure out
Stephen
@stephepush
Sep 03 2016 03:55
@Faraz, there are probably a ton of ways to do that. You could contain all of the content into a container div and then z-index over another div witha green border, maybe? There's prbably a framework that can do that all easily, lol
@Sevohan, oh sorry, its been a long day and i didn't see the text about your codepen, lol
let me see if I can help...
Alex
@Sevohan
Sep 03 2016 03:56
@stephepush No problem lol been stuck on it for a bit now
Stephen
@stephepush
Sep 03 2016 03:57
@Sevohan , this is what I did:
var submitQuote = $('.twitter-share-button').attr('href', tweetQuote);
does that help at all?
faraz
@silentarrowz
Sep 03 2016 03:58
@stephepush ok, that's a nice idea. will try doing that
thanks @stephepush
CamperBot
@camperbot
Sep 03 2016 03:59
silentarrowz sends brownie points to @stephepush :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @stephepush |http://www.freecodecamp.com/stephepush
Alex
@Sevohan
Sep 03 2016 04:05
@stephepush I still feel like I'm missing something. I'm not getting anything to work
Stephen
@stephepush
Sep 03 2016 04:09
@Alex, so after looking at your code, and looking at mine (I haven't touched my quotegener in a few months, I'm working on improving it right now), you didn't code a way for twitter to properly read the quote
you have to add "%20" between each word in a string statement for twitter to read the string

This is what I did:

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

Feel free to take a look at my random quote generator:
http://codepen.io/stephepush/pen/dXQKjW

Alex
@Sevohan
Sep 03 2016 04:12
@stephepush encodeURIComponent should be doing that if you bring up the dev controls I have the whole thing logged to the console. Unless I'm mistaken I thought the only thing that I'm still struggling with is how to translate that over to the href
Stephen
@stephepush
Sep 03 2016 04:13
Oh, well til, lol
hmm, why request the api's json twice?
@Sevohan ^
Alex
@Sevohan
Sep 03 2016 04:16
Once for the page load and once for a new quote
Stephen
@stephepush
Sep 03 2016 04:22
hmm
@Sevohan , you did a lot of stuff I haven't seen before. Maybe I don't have the expertise to help you. Sorry I couldn't be of better assistance :(
Alex
@Sevohan
Sep 03 2016 04:26
I believe I figured out what the issue was. I was told to use the code from twitter to get my button to work but it was making all the rest not work propperly
I have it working now but it doesn't look as nice so I'll come back later when I can understand the code twitter is giving me.
Stephen
@stephepush
Sep 03 2016 04:28
okay, cool
Alex
@Sevohan
Sep 03 2016 04:28
Thank you @stephepush for helping me come the the realization
CamperBot
@camperbot
Sep 03 2016 04:28
sevohan sends brownie points to @stephepush :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @stephepush |http://www.freecodecamp.com/stephepush
Stephen
@stephepush
Sep 03 2016 04:28
you're welcome @Sevohan
Sorin Ruse
@sorinr
Sep 03 2016 04:31
@Sevohan for an empty author you can:
  if(author !==''){
    $('h2').append('<em>-</em>' + author);
  }else{
    $('h2').append('<em>-Unknown</em>');
  }
ZZPot
@ZZPot
Sep 03 2016 04:37
how to stop playing <audio>?
Sorin Ruse
@sorinr
Sep 03 2016 04:39
@ZZPot try <audio controls muted>
ZZPot
@ZZPot
Sep 03 2016 04:41
@sorinr in js please
Sorin Ruse
@sorinr
Sep 03 2016 04:42
@ZZPot something like: $('audio').attr('muted', 'muted');
ZZPot
@ZZPot
Sep 03 2016 04:42
if it same audio object?
Sorin Ruse
@sorinr
Sep 03 2016 04:43
what do u mean?
ZZPot
@ZZPot
Sep 03 2016 04:43
sounds[i].pause(); sounds[i].currentTime = 0; <- doesn't work
double press should make double noise
Sorin Ruse
@sorinr
Sep 03 2016 04:44
@ZZPot the above statement adds the attribute "muted" to your audio tag. try it
ZZPot
@ZZPot
Sep 03 2016 04:45
even if it's muted it still "playing" and doesn't allow play it again with no mute
Sorin Ruse
@sorinr
Sep 03 2016 04:47
ok. so you want to pause the audio
@ZZPot if you want to pause the audio you should do something like: $('audio').pause();
ZZPot
@ZZPot
Sep 03 2016 04:52
audio.pause() work VERY slow
Sorin Ruse
@sorinr
Sep 03 2016 04:53
then try this trick: mediaElement.removeAttribute("src");
so it stops downloading the audio file
ZZPot
@ZZPot
Sep 03 2016 04:54
audio should be dowloaded always.
it's a simon game
it should be shutted before next sound sample begin playing, even if it's same sample
Roshan Syed
@RoshanSyed
Sep 03 2016 04:56
This message was deleted
Sorin Ruse
@sorinr
Sep 03 2016 04:56
audio.stop() ?
ZZPot
@ZZPot
Sep 03 2016 04:58
@sorinr there is no such method
Sorin Ruse
@sorinr
Sep 03 2016 05:03
sorry. no more ideas
james
@James781004
Sep 03 2016 05:28
hey guys, I have a question here
Darth Skywalker
@adityaparab
Sep 03 2016 05:29
yes?
james
@James781004
Sep 03 2016 05:29
Is it possible to for me finish the project like "personal portfolio" without finishing all the challenge before head?
ZZPot
@ZZPot
Sep 03 2016 05:30
yep
james
@James781004
Sep 03 2016 05:31
I mean I'm now just done with "JQuery" sessions
Am I able to handle the project like "personal portfolio" without learning the rest of sessions?
rajatag
@rajatag
Sep 03 2016 05:36
need help
how to put an image next to the written text
??
anyone??
ZZPot
@ZZPot
Sep 03 2016 05:38
@rajatag what you mean?
bla-bla<img src="porn.jpeg">
here you are
rajatag
@rajatag
Sep 03 2016 05:38
bla-bla ??
ZZPot
@ZZPot
Sep 03 2016 05:38
it's text
rajatag
@rajatag
Sep 03 2016 05:39
oh
lemme try
:D
thank you
ZZPot
@ZZPot
Sep 03 2016 05:39
lel
rajatag
@rajatag
Sep 03 2016 05:40
Thank You @ZZPot :D :D
CamperBot
@camperbot
Sep 03 2016 05:40
rajatag sends brownie points to @zzpot :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @zzpot |http://www.freecodecamp.com/zzpot
Muhammad Hasham
@MohammadHasham
Sep 03 2016 06:21
Can anyone help me with JS calculator that how can i make the CE button?
@camperbot @adityaparab @James781004 @sorinr
natural data corruption
@primaveraentalca
Sep 03 2016 06:51
hi guys, i'm building the local weather app. i have a working prototype already, but i feel it would be better if i put all the functions separated. my problem is i can't make the coordenates available from outside the success function. any advice?
function success(position) {
  var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  var apiKey = 'blablabla';
  var url = 'https://api.forecast.io/forecast/';
  var data;
  $.getJSON(url + apiKey + "/" + pos.lat + "," + pos.lng + "?callback=?", function(data) {
    switch (data.currently.icon) {
      case "clear-day":
        var icon = "wi-day-sunny";
        break;
      case "clear-night":
        var icon = "wi-night-clear";
        break;
      case "rain":
        var icon = "wi-rain";
        break;
      case "snow":
        var icon = "wi-snow";
        break;
      case "sleet":
        var icon = "wi-sleet";
        break;
      case "wind":
        var icon = "wi-strong-wind";
        break;
      case "fog":
        var icon = "wi-fog";
        break;
      case "cloudy":
        var icon = "wi-cloudy";
        break;
      case "partly-cloudy-day":
        var icon = "wi-day-cloudy";
        break;
      case "partly-cloudy-night":
        var icon = "wi-night-partly-cloudy";
        break;
    }
    var tempI = '<i class="wi ' + icon + '"></i>'
    var tempF = Math.round(data.currently.temperature) + '°F';
    var tempC = Math.round((data.currently.temperature - 32) * (5 / 9)) + '°C';

    function swapTemp(){
      if (document.getElementById("temp").innerHTML == tempC) {
        document.getElementById("temp").innerHTML = tempF;
      } else if (document.getElementById("temp").innerHTML == tempF) {
        document.getElementById("temp").innerHTML = tempI;
      } else {
        document.getElementById("temp").innerHTML = tempC;
      }
    }
    document.getElementById("temp").addEventListener("click", swapTemp, false);
    document.getElementById("temp").innerHTML = tempI;
  });
}
function error() {
  document.getElementById("temp").style.fontSize = '300%';
  document.getElementById("temp").innerHTML = 'error: geolocation failed.<br>are you using https?';
}
navigator.geolocation.getCurrentPosition(success,error);
mverselle
@mverselle
Sep 03 2016 07:00
Hey all....does jquery work in codepen?
natural data corruption
@primaveraentalca
Sep 03 2016 07:01
@mverselle yes it does, in fact there's an easy way of adding jquery to your pens from the settings panel.
mverselle
@mverselle
Sep 03 2016 07:02
I went to the 'quick add' and chose JQuery. then save and close. is that all that is needed?
natural data corruption
@primaveraentalca
Sep 03 2016 07:04
yes, now you can start calling your elements with the jquery selector like this $(element)
mverselle
@mverselle
Sep 03 2016 07:04
okay thank you
natural data corruption
@primaveraentalca
Sep 03 2016 07:06
@mverselle you're welcome
Alfarhan Zahedi
@alfarhanz
Sep 03 2016 07:28
Hbbvjq
The nhnjnrb
CDC b
Muhammad Hasham
@MohammadHasham
Sep 03 2016 08:06
Please give your review and critique
http://codepen.io/Mohammad_Hasham/full/ozNpwA/
Henrik Christensen
@henrikac
Sep 03 2016 09:03
Hi :-)
I'm doing the local weather challenge and using JS navigator.geolocation.getCurrentPosition to get the location of the user, but when I try it out in chrome it says it can't track my location (working fine in IE) - any idea how to fix this?
Henrik Christensen
@henrikac
Sep 03 2016 09:10
@MohammadHasham I like the design :-) But I notice if you click "2000 + 500 = 2500" (that's okay) but if you then want to divide it by 5 your calculator does this "2000 + 500 / 5 = 2100" instead of just taking the first result (2500) and divide it by 5 which sould be 500 and not 2100 :-)
Eduard Bondarenko
@eduardbcom
Sep 03 2016 09:23
Screen Shot 2016-09-03 at 12.22.29 PM.png
@MohammadHasham
good job though
just add sort of horizontal scroll
Greg Duncan
@GregatGit
Sep 03 2016 10:12
Henrik Christensen
@henrikac
Sep 03 2016 10:17
@GregatGit I tried that but no matter what I did I couldn't get it to work using the XMLHttpRequest
@GregatGit But this is what happens when having a long break away from the keyboard and then forgot a lot - Now having to learn most of it again :-P
Muhammad Hasham
@MohammadHasham
Sep 03 2016 10:22
@eduardbcom That means alot to me!
@regnis1695 @eduardbcom Thanks i'll make the changes
CamperBot
@camperbot
Sep 03 2016 10:22
mohammadhasham sends brownie points to @regnis1695 and @eduardbcom :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @regnis1695 |http://www.freecodecamp.com/regnis1695
:cookie: 19 | @eduardbcom |http://www.freecodecamp.com/eduardbcom
Greg Duncan
@GregatGit
Sep 03 2016 10:24
@regnis1695 Are you using jQuery for this?
Henrik Christensen
@henrikac
Sep 03 2016 10:25
@GregatGit Nope, trying without jQuery for this challenge
Muhammad Hasham
@MohammadHasham
Sep 03 2016 10:29
@regnis1695 Can you check it now
http://codepen.io/Mohammad_Hasham/full/ozNpwA/
Henry Cabello
@hacu9
Sep 03 2016 10:30
Why does the dropdown menu gets away from the UL?
Henrik Christensen
@henrikac
Sep 03 2016 10:33
@MohammadHasham seems to be doing the math right now :-) Great Job!
Muhammad Hasham
@MohammadHasham
Sep 03 2016 10:33
@regnis1695 Thanks!
CamperBot
@camperbot
Sep 03 2016 10:33
mohammadhasham sends brownie points to @regnis1695 :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave regnis1695 points
Muhammad Hasham
@MohammadHasham
Sep 03 2016 10:42
Can anyone help me to make my website responsive?
actually the js calculator
Pradnya Joshi
@pradxj07
Sep 03 2016 10:57
@apalm1341 , I am sorry, I could not reply yesterday. I am not sure if you got further help. I just took at a look the media queries you mentioned. You need to have some css specific to each size width. E.g. if you want each of your porftfolio projects to span across on small screens, you need to specify how the class should be under the specifc media queriy. You could say ```@media (max-width: 320px) { .proj { display: block;}} where .proj is the class you apply to each portfolio projects.
Ahmad Ali
@microcyberz
Sep 03 2016 11:00
@MohammadHasham come on bootstrap it
Muhammad Hasham
@MohammadHasham
Sep 03 2016 11:01
@microcyberz Yeah i did that :smile:
Ahmad Ali
@microcyberz
Sep 03 2016 11:01
@MohammadHasham you already did
@MohammadHasham yaar footer ko chipkaya hua na rakh :D
Muhammad Hasham
@MohammadHasham
Sep 03 2016 11:03
okay theek hogaya @microcyberz
from where ?
Konstantinos Dimou
@Dimou
Sep 03 2016 11:14
I find the Personal Portfolio Webpage advanced to do after the jQuery session. I have no idea how to navigate with the menus right now. Am I supposed to do it now ?
Lamine
@mlhamoudi
Sep 03 2016 11:35
Hello Guys, I'm working on the tribute page project, and I wanted your feedback. Cheers!
http://codepen.io/mlhamoudi/full/WGNJOO/
Muhammad Hasham
@MohammadHasham
Sep 03 2016 11:41
blob
How can i limit it the grey area only
http://codepen.io/Mohammad_Hasham/full/ozNpwA/
Kuba Rdzak
@qubkon
Sep 03 2016 12:15
@mlhamoudi I'd move '1955-2011' part to a next line and perhaps make it smaller than 'Steve Jobs'.
Les Wright
@leswright
Sep 03 2016 12:59
@mlhamoudi nice job so far. Scary picture of Jobs, I'd just keep the apple pic.
Matthew Allen
@unscodst
Sep 03 2016 13:35
@MohammadHasham On your .display change overflow to hidden. This will remove the sliding bar
Daniel
@DanielMW34
Sep 03 2016 15:11
RE: the TwitchTV API ... what is the purpose of the word "kraken" inside this API call? Is that a username or something?
"https://api.twitch.tv/kraken/streams/test_channel"
Stephen James
@sjames1958gm
Sep 03 2016 15:12
@DanielMW34 Just a pathname they selected - probably an inside joke (as in "Release the Kraken")
Daniel
@DanielMW34
Sep 03 2016 15:12
@sjames1958gm "They" being TwitchTV developers who designed the API ?
Matthew Allen
@unscodst
Sep 03 2016 15:13
@DanielMW34 Yes it's just something Twitch madeup. Probably what they call their search engine or something internal
Daniel
@DanielMW34
Sep 03 2016 15:13
@sjames1958gm @unscodst Gotcha. So it shall be included in my API call. Thank you both.
CamperBot
@camperbot
Sep 03 2016 15:13
danielmw34 sends brownie points to @sjames1958gm and @unscodst :sparkles: :thumbsup: :sparkles:
:cookie: 6 | @unscodst |http://www.freecodecamp.com/unscodst
:star2: 3056 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 03 2016 15:14
@DanielMW34 Yes.
Joel Santos
@St3ps
Sep 03 2016 15:21
Hey, can anyone tell me what exactly this line of code means?
return Math.floor((Math.random()*4)+1);
Like, this makes sure the value is never below 1 and is never over 4, is that it?
Moisés Man
@moigithub
Sep 03 2016 15:23
The Math.random() function returns a floating-point, pseudo-random number in the range (0, 1) that is, from 0 (inclusive) up to but not including 1 (exclusive)
@St3ps
soo the max num u will get is
round this down ((0.999999999999999 * 4 )+1 )
Stephen James
@sjames1958gm
Sep 03 2016 15:23
@St3ps Correct it makes the size of the range almost 4 and starting at 1
@St3ps I think it means just under 5 not 4
Matthew Allen
@unscodst
Sep 03 2016 15:24
@St3ps I believe it's taking a random number and multiplying it by 4 and then adding 1. So technically you are correct that it will make sure the number is above 1
Joel Santos
@St3ps
Sep 03 2016 15:26
@unscodst @sjames1958gm @moigithub alright got it. thanks guys :)
CamperBot
@camperbot
Sep 03 2016 15:26
st3ps sends brownie points to @unscodst and @sjames1958gm and @moigithub :sparkles: :thumbsup: :sparkles:
:cookie: 7 | @unscodst |http://www.freecodecamp.com/unscodst
:star2: 3057 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
:star2: 2092 | @moigithub |http://www.freecodecamp.com/moigithub
Matthew Allen
@unscodst
Sep 03 2016 15:26
What you're really doing is setting the range, 0 to * in this case 0 to 4
Kumar Nitesh
@knitesh
Sep 03 2016 15:27
check out html email editing in Gmail: https://youtu.be/mEbicMgvf18
TrayBanks
@TrayBanks
Sep 03 2016 15:42
Can anyone tell me why I still have the background visible in my code? and how to do I get to be covered up?
https://codepen.io/TrayBanks/pen/NRKvGg
Kumar Nitesh
@knitesh
Sep 03 2016 15:45
@TrayBanks You can modify .container-fluid{
margin: 0;
padding:0;
}
and add height: 100%; to pageone class
Matthew Allen
@unscodst
Sep 03 2016 15:46
@TrayBanks on which part? You have a url image on your .pageone class. Remvoe that to remove the image
Joël Poulin
@poulinjoel
Sep 03 2016 15:47
Hi guys, does anyone knows about a good free website where you can edit an HTML design, like a div layout and get the code from it?
Matthew Allen
@unscodst
Sep 03 2016 15:47
Or change your opacity's if you want to keep the stars but have the elements on top of it solid
sfmajors373
@sfmajors373
Sep 03 2016 15:50
Hi everyone! I have been working on the "Quote Generator" project and in the process of ridding my code of syntax errors, my button is now no longer able to be clicked. It is gray-ed out. Does anyone have any idea what I might have done? https://codepen.io/sfmajors/pen/bwbPqG
TrayBanks
@TrayBanks
Sep 03 2016 15:50
@knitesh thanks
CamperBot
@camperbot
Sep 03 2016 15:50
traybanks sends brownie points to @knitesh :sparkles: :thumbsup: :sparkles:
:cookie: 159 | @knitesh |http://www.freecodecamp.com/knitesh
Muhammad Hasham
@MohammadHasham
Sep 03 2016 15:52
How can i optimize things in such a way that the user don't has to scroll the page to view th full calculator instead it should be on the same page
http://codepen.io/Mohammad_Hasham/full/ozNpwA/
How can i optimize things in such a way that the user don't has to scroll the page to view th full calculator instead it should be on the same page
http://codepen.io/Mohammad_Hasham/full/ozNpwA/
Stephen
@stephepush
Sep 03 2016 16:01
@primaveraentalca, you really don't need to have all of those functions
Sayed Afif
@sayedafif
Sep 03 2016 16:04
For some reason the font doesn't work. and how do i hide a glyphicon icon. its not working. i want to work on that hiding and showing
http://codepen.io/sayedafif/pen/KgKLXb
Kuba Rdzak
@qubkon
Sep 03 2016 16:06
@sayedafif I don't know what glyphicon is so no help on that and about font... try to @import it into CSS
Stephen
@stephepush
Sep 03 2016 16:08

@primaveraentalca, you can get rid of all those lines in that switch statement by calling for the id from the api, and then concatenating the id to a string within a variable and then putting that variable in a jquery statement to dynamically change an id or class:

      var id = data.weather[0].id;
      var descr = data.weather[0].description;
      var imageUrl = "wi wi-owm-" + id;
     $('#weather-img').html("<i class='" + imageUrl + "'></i>");

That frees your api call up from being within the scope of only one function so that you can apply it globally.

Kumar Nitesh
@knitesh
Sep 03 2016 16:15
@sayedafif Bootstrap is overwriting your CSS, and you also using h1 in css as class, whereas it is a tag, so change your css to h1{
font-family: 'Overlock',cursive !important ;
}
@sayedafif and in JS use $(function(){
$("#tick").hide();
});
Sayed Afif
@sayedafif
Sep 03 2016 16:21
@knitesh hey. thanks man. tag wasnt working so had tried the . before h1.
CamperBot
@camperbot
Sep 03 2016 16:21
sayedafif sends brownie points to @knitesh :sparkles: :thumbsup: :sparkles:
:cookie: 160 | @knitesh |http://www.freecodecamp.com/knitesh
Sayed Afif
@sayedafif
Sep 03 2016 16:21
@knitesh another brownie for you.
thanks for the hide function. i thought i had to put it inside document.ready
Kumar Nitesh
@knitesh
Sep 03 2016 16:22
:)
you already using jquery... so use sort function
or use $( document ).ready()
Sayed Afif
@sayedafif
Sep 03 2016 16:23
ya i got it @knitesh
thanks
CamperBot
@camperbot
Sep 03 2016 16:23
sayedafif sends brownie points to @knitesh :sparkles: :thumbsup: :sparkles:
:warning: sayedafif already gave knitesh points
Sorin Ruse
@sorinr
Sep 03 2016 17:02
@sayedafif font its not working because you are loading only weight 900 that is for bold. try loading also 400,500,700
Will Khaine
@mankaine
Sep 03 2016 17:34
hi yall
I need some help in JS

passing a value

var geoLat = 0;

function getGeoLocations() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      return position.coords.latitude;
    });
  }
}

console.log(getGeoLocations());

so this is returning undefined. any ideas on how to get it to return the value of position.coords.latitidue?

vínαч puppαl
@vinaypuppal
Sep 03 2016 17:52
@mankaine We cannot return from an asynchronous call inside a synchronous method.
@mankaine use console.log inside callback of navigator.geolocation.getCurrentPosition to get position data
Will Khaine
@mankaine
Sep 03 2016 18:08
@vinaypuppal so if the coordinate needs to be saved to be used later, would the only other way be to run the code that uses the coordinate inside the if statement? it seems really...off
mjqblade
@mjqblade
Sep 03 2016 18:18
:warning:
Sayed Afif
@sayedafif
Sep 03 2016 18:27
why isn't this ajax call working? the search button does not return anything. just for testing i tried to console.log() but still its not working
http://codepen.io/sayedafif/pen/KgKLXb?editors=0010
Will Khaine
@mankaine
Sep 03 2016 18:30
@vinaypuppal also, thanks :)
CamperBot
@camperbot
Sep 03 2016 18:30
mankaine sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 03 2016 18:34
@mankaine you need to run weather fetching code inside that callback only. Write some function like fetchWeather and call inside that callback like fetchWeather(position) and use lat and lon inside fetchWeather function to get weather data
@sayedafif in html you have inputSuccess this id and in JS u used this inputSucess id to reference search input
vínαч puppαl
@vinaypuppal
Sep 03 2016 18:42
@sayedafif and fix this $(document).ready(function(){.... document should be wrapped inside $()

@sayedafif and prevent default form submit event like below

$("#search").click(function(e){
  e.preventDefault();
 //rest of your code
});

Fix all these then that console.log will work

Oliver Coop
@ocoop
Sep 03 2016 19:04

Hi All, really would appreciate some help, can't seem to figure out this issue!

The issue is that my banner (a css background-image) won't line up correctly with the rest of my site... I have got it to the point where it does line up on full screen mode by shrinking the image and using margin-left padding but this then causes the image to be knocked the other way when using a smaller screen.

https://codepen.io/olicooponline/pen/PGoLXr

vínαч puppαl
@vinaypuppal
Sep 03 2016 19:19
@ocoop just remove .container class on div inside #banner and i have removed few styles on #banner and #profile-pic classes checkout my forked pen for reference here
Oliver Coop
@ocoop
Sep 03 2016 19:20
@vinaypuppal thanks puppal! i'd be embarrased to admit how long I have spent trying to solve this
CamperBot
@camperbot
Sep 03 2016 19:20
ocoop sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 479 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 03 2016 19:22
@ocoop All that problem was because of bootstraps .container class you added
vínαч puppαl
@vinaypuppal
Sep 03 2016 19:28
@ocoop And add bootstrap.js in js panel of codepen to get mobile nav toggle button to work
Oliver Coop
@ocoop
Sep 03 2016 19:29
@vinaypuppal thanks vinay, still doesnt work though :/
CamperBot
@camperbot
Sep 03 2016 19:29
ocoop sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: ocoop already gave vinaypuppal points
vínαч puppαl
@vinaypuppal
Sep 03 2016 19:31
@ocoop oh okayjust saw your html you are not using bootstrap nav component http://getbootstrap.com/components/#navbar
Oliver Coop
@ocoop
Sep 03 2016 19:32
@vinaypuppal when I remove the containers, it creates a gap between the banner and Nav pushing everything down. and no? should I be doing so, if so how?
vínαч puppαl
@vinaypuppal
Sep 03 2016 19:33
@ocoop remove margin-top from profile-pic
vínαч puppαl
@vinaypuppal
Sep 03 2016 19:35

and remove few styles from #banner class also

margin-left: 15px;
  position: static;
  width: auto;
  max-width: 1170px;

You dont need these styles

Oliver Coop
@ocoop
Sep 03 2016 19:36
@vinaypuppal YOU DID IT!
thanks man!
@ndburrus thanks, i will be sure to read them :smile:
CamperBot
@camperbot
Sep 03 2016 19:36
ocoop sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2106 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Sep 03 2016 19:37
@ocoop you're welcome enjoy! :palm_tree:
kirk tuggle
@iamtuggle
Sep 03 2016 19:39
@ndburrus can you take a look at my portfolio project please, i can't figure out why there is too much space between each section.
Mo Zargham
@Mozar10
Sep 03 2016 19:53
Hi all
I am having some trouble with the Twitch.tv app
Eden-Zeev Einav
@edenzeev
Sep 03 2016 19:54
whats the issue?
Mo Zargham
@Mozar10
Sep 03 2016 19:54
particularly because the stream API call returns null if stream is offline and there is no way to get the logo... Unless I query the channel and in that way there is no way to tell which user is online or offline it returns the same JSON either way
Norvin Burrus
@ndburrus
Sep 03 2016 19:54
@iamtuggle i'm a newb... learning, but i can look :)
Mo Zargham
@Mozar10
Sep 03 2016 19:54
my question is, show I be doing 2 different API calls one for the stream and one for the channel and merge them together? or is there another way?
kirk tuggle
@iamtuggle
Sep 03 2016 20:05
@ndburrus okay.
Mo Zargham
@Mozar10
Sep 03 2016 20:08
@ndburrus This requires using node js?
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:08
@Mozar10 Yes i did two requests one for getting Streams info and another for getting User info
Norvin Burrus
@ndburrus
Sep 03 2016 20:08
@Mozar10 it's a methodolgy :) (using node.js, yes :+1: ) you can see if you like it.
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:08
if stream is null in response then Channel is offline @Mozar10
Mo Zargham
@Mozar10
Sep 03 2016 20:10
@vinaypuppal right, I was thinking of doing 2 separate ones
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:11
@Mozar10 yes you need to do second req to fetch user avatar, bio ...etc if you want to show in your UI
Mo Zargham
@Mozar10
Sep 03 2016 20:12
@vinaypuppal right but I am creating a new DIV element in the callback function of the first API call which is not accesssible in the callback function of the second api call
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:12
@ndburrus by Streams he mean Twitch Streams not Node.js Streams :smile:
Norvin Burrus
@ndburrus
Sep 03 2016 20:12
@vinaypuppal :+1:
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:15
@Mozar10 what i am saying may create callback hell
First Fetch stream info and inside call back of this req fetch user info then inside callback of this req update UI with two responses you got.
To to prevent callback hell use Jquery promises .
Mo Zargham
@Mozar10
Sep 03 2016 20:18
so only create the new UI elements within the second nested callback ?
@vinaypuppal
Henry Cabello
@hacu9
Sep 03 2016 20:18
http://codepen.io/cabello986/pen/rrNpBG?editors=1000 Guys why wont the background show when i change to full screen? (Its fom a different pen)
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:18
@Mozar10 yes that way you have access to both responses
Mo Zargham
@Mozar10
Sep 03 2016 20:19
@vinaypuppal thanks
CamperBot
@camperbot
Sep 03 2016 20:19
:cookie: 480 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
mozar10 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
Hebert Phillipe
@hiltypro
Sep 03 2016 20:21

Hi guys, I finally finished my pomodoro clock.

I used this project to test some things that I'm learning, like Sass, svg animation and :before/:after pseudo selectors.

Any feedback is appreciated! =D
http://codepen.io/hilty/full/rrBdLj/

kirk tuggle
@iamtuggle
Sep 03 2016 20:25
@ndburrus i just figured it out!
Norvin Burrus
@ndburrus
Sep 03 2016 20:26
@ndburrus nice work! :palm_tree:
kirk tuggle
@iamtuggle
Sep 03 2016 20:26
@ndburrus lol, but now my links in the connect section are gone. lol
Norvin Burrus
@ndburrus
Sep 03 2016 20:26
@iamtuggle hehe.. back to work :)
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:27
@hacu9 just copy paste css from that pen into your pen it will work instead of specifying link to that pen
kirk tuggle
@iamtuggle
Sep 03 2016 20:27
@ndburrus yup. :smile:
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:29
@iamtuggle i noticed you added lot of padding between different sections of your Page . is that intentional??
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:34
@hiltypro Nice design and nice timer animation. And btw i used same font in my project for Pomodoro Clock text :smile: But as a side note i also added Pause/Resume and Reset buttons. I noticed you added Pause/Resume when we click on Timer, you can also add Reset button if you want. Rest all looks good.
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:40
@hiltypro And one more thing after finishing Session Time provide some Response to user like Sound to notify them its break time And then start Break time. Also notify after Finishing Break Time.
Hebert Phillipe
@hiltypro
Sep 03 2016 20:41

@vinaypuppal
Hi Puppal, Thanks for your feedback! =D
Indeed, this is a good feature to add. I will do it soon!

Again, thanks for the feedback!

CamperBot
@camperbot
Sep 03 2016 20:41
hiltypro sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Islam Ibakaev
@dagman
Sep 03 2016 20:53
hey guys how can i import normalize.css from node_modules into index.js
i mean this isn't working import './node_modules/sanitize.css/sanitize'
vínαч puppαl
@vinaypuppal
Sep 03 2016 20:55
@dagman Are you using Webpack to process JS ?? If so it should work if have configured webpack correctly
Islam Ibakaev
@dagman
Sep 03 2016 21:12
@vinaypuppal is it correct?
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');


// App files location
const PATHS = {
  app: path.resolve(__dirname, '../src/js'),
  styles: path.resolve(__dirname, '../src/styles'),
  build: path.resolve(__dirname, '../build')
};

const plugins = [
  // Shared code
  new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.bundle.js'),
  // Avoid publishing files when compilation fails
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
  }),
  new webpack.optimize.OccurenceOrderPlugin()
];

module.exports = {
  env : process.env.NODE_ENV,
  entry: {
    app: path.resolve(PATHS.app, 'main.js'),
    vendor: ['react']
  },
  output: {
    path: PATHS.build,
    filename: 'js/[name].js',
    publicPath: '/'
  },
  stats: {
    colors: true,
    reasons: true
  },
  resolve: {
    // We can now require('file') instead of require('file.jsx')
    extensions: ['', '.js', '.jsx', '.css', '.scss']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel'],
        include: PATHS.app
      },
      {
        test: /\.(scss|css)$/,
        loaders: [
          "style",
          "css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]",
          "sass?sourceMap&outputStyle='expanded'",
          "postcss"
        ],
        include: [PATHS.app, PATHS.styles]
      },
      // Inline base64 URLs for <=8k images, direct URLs for the rest
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      }
    ]
  },
  plugins: plugins,
  postcss: function () {
    return [autoprefixer({
      browsers: ['last 2 versions']
    })];
  },
  devServer: {
    contentBase: path.resolve(__dirname, '../src'),
    port: 3000,
    historyApiFallback: true
  },
  devtool: 'eval'
};
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:16
@dagman dont know, I just know we need css-loader and style-loader webpack plugins to process CSS files imports inside JS files. I usually use https://github.com/HenrikJoreteg/hjs-webpack which abstracts all these things. I just hate configuring Webpack. If you want you can use hjs-webpack it supports what your doing
asaki444
@asaki444
Sep 03 2016 21:19
hey @all i am getting hung up on adding an audio file!
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:22
@asaki444 can you be more specific on what the issue is??
asaki444
@asaki444
Sep 03 2016 21:25
@vinaypuppal i wanted to add audio to my project when the break time begins, but I am finding difficulties getting an audio file in url format , or to add an audio file to codepen
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:28
@asaki444 create audio instance var audio = new Audio(audio_url) and play like audio.play()
Gatreek92
@Gatreek92
Sep 03 2016 21:36
Hey guys a quick question right here , how to work with getCurrentPosition on codepen ? it show me this error message on the console "getCurrentPosition() and watchPosition() no longer work on insecure origins."
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:37
@asaki444 https://notificationsounds.com/notification-sounds Actually my link is not working download few sounds from abv link and upload in your dropbox and use that URL
Dylan
@dhcodes
Sep 03 2016 21:37
@Gatreek92 location over HTML5 won't work in chrome because chrome requires https:// for location now
well, it will if you change the url to https:// yourcodepenlink
asaki444
@asaki444
Sep 03 2016 21:37
@vinaypuppal awesome! thanks i will check those out
CamperBot
@camperbot
Sep 03 2016 21:37
asaki444 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Dylan
@dhcodes
Sep 03 2016 21:38
@Gatreek92 but openweather won't work with https://
so ultimately you should use ip location as a workaround
or another ip location provider
then it will work with chrome
alternatively, you could find a weather api that uses https://
ex. forecast.io (but it won't come with city/state so you'd have to parse that from the html5 location data). Sorry for rambling
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:40
@Gatreek92
u can use open weather api with geolocation, by folllowing these steps
  • Load u r codepen over https https://your-pen-url
  • Since open weather api doesnot support https u need to use https://crossorigin.me as proxy server
  • Like https://crossorigin.me/http://api.openweatherapi.com/....
    or use IP-API or use https://forecast.io/ which supports https
Gatreek92
@Gatreek92
Sep 03 2016 21:42
@vinaypuppal @dhcodes thanks for your help guys :+1: :+1:
So now i need to load my codepen link on the https:// and then add https://crossorigin.me to the openweatherapi link right ?
CamperBot
@camperbot
Sep 03 2016 21:42
gatreek92 sends brownie points to @vinaypuppal and @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 1380 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Sep 03 2016 21:43
right
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:43
@dhcodes i used forecast.io and geolocation -> then with lat and lon i used google geocoder API to fetch user city/address
@dhcodes another way :smile:
Dylan
@dhcodes
Sep 03 2016 21:44
oh yeah i know, but how straight forward is the geocoder api documentation?
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:47
@dhcodes yeah that may be difficult to search. This is API link i used https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&sensor=true Did a udacity course previously got it from there.
Dylan
@dhcodes
Sep 03 2016 21:47
gotcha. I just know that when I started looking at getting city/state from geocoder, I just didn't feel it was worth the time ;) Now I'd probably be better at understanding the docs
I'll check it out. I need to make a new weather app for kicks
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:48
@dhcodes :+1:
texyh
@texyh
Sep 03 2016 21:49
Please why does my front end projects with api eg wiki search,random quote,refuse to work when hosted as an application on a server.
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:49
@texyh any errors in chrome console??
Dylan
@dhcodes
Sep 03 2016 21:50
@texyh did you move everything in each pane of codepen to its own file and then reference them correctly?
<link rel =
vínαч puppαl
@vinaypuppal
Sep 03 2016 21:50
@texyh probably a link to your hosted project would help in debugging
Dylan
@dhcodes
Sep 03 2016 21:50
<script src =
texyh
@texyh
Sep 03 2016 21:59
@vinaypuppal http://andruxnet-random-famous-quotes.p.mashape.com/cat=?callback=jQuery22405477458278925404_1472939551354&_=1472939551355 Failed to load resource: the server responded with a status of 426 ()
Dylan
@dhcodes
Sep 03 2016 22:05
looks like it's recommending you switch to a diff. version of http
at least that's what 426 is
maybe try https?
@texyh
kirk tuggle
@iamtuggle
Sep 03 2016 22:16
i just finished the portfolio project and would like some feedback on it before i submit it. thanks https://codepen.io/iamtuggle/full/wzwpPA/
Alexandro Pequeno
@Argestis
Sep 03 2016 23:12
Hi, guys. Does anyone know how to target an input, but like if is the third or the second on a list?
patricia grace
@patriciagrace
Sep 03 2016 23:14
Nice @iamtuggle I would check the spelling of "technology", but otherwise this is good. Viewing your profile reminds me that I forgot to make my header navigation stick when scrolling...I need to work on that. https://codepen.io/patricia_grace/full/xExmwa/
Chase
@Belax8
Sep 03 2016 23:20
@Argestis you could give it an 'id'
Like id="input-3"
Alexandro Pequeno
@Argestis
Sep 03 2016 23:22
omg,
thank you!
Chase
@Belax8
Sep 03 2016 23:23
Anytime @Argestis
patricia grace
@patriciagrace
Sep 03 2016 23:26
@Argestis You could use nth-child(n) css selector. For instance, in an unordered list, this code selects every <li> element that is the 2nd child of its parent. https://codepen.io/patricia_grace/pen/JRojjW But, yes, as @belax8 noted, making an id would just apply to that one instance.
Alexandro Pequeno
@Argestis
Sep 03 2016 23:29
I tried like that before but for some reason wasn't working :c
But when I assigned the ID everything worked just fine :dancer:
thank you guys!
patricia grace
@patriciagrace
Sep 03 2016 23:35
:)