These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Dec 2017
Emil
@aguyinmontreal
Dec 06 2017 01:04
@volkranium For regex, I really suggest reading https://www.regular-expressions.info/tutorial.html page by page; 2 days and you're a regex master :D
Joe
@fendermaniac
Dec 06 2017 02:08
https://codepen.io/fendermaniac/pen/ZaPPNy can anyone help me figure out why the JSON response wont print out on the OpenWeather API?
I've made sure that I've casted the lat and long variables into strings
Joe
@fendermaniac
Dec 06 2017 02:15
it seems like the lat and long are undefined
I created a variable lat and long and assign them the following values on document.ready()
lat = String(position.coords.latitude);
long = String(position.coords.longitude);    
then I concatenate them with the API
Daulis M Gonzalez
@daulis809
Dec 06 2017 03:01
Hello everyone
Ken Haduch
@khaduch
Dec 06 2017 03:01
@fendermaniac - looks like you got it working, at least it seems to be printing the information for my location?
@daulis809 - howdy
Joe
@fendermaniac
Dec 06 2017 03:02
Hey @khaduch, You're right I was able to get it to work. I was calling the api from regular old http and not https
now i need to figure out how to access the inner JSON objects
Ken Haduch
@khaduch
Dec 06 2017 03:03
@fendermaniac :+1:
Joe
@fendermaniac
Dec 06 2017 03:06
do you know how one would access inner JSON? I can pass along data.main, but I want to access data.main.temp
AbrisM
@AbrisM
Dec 06 2017 03:12
Hi could someone explain why no content is showing on the screen? It's suppose to be a table with selectable buttons and pricing with an image https://codepen.io/anon/pen/XzQyoR
Henry
@GitHub-Henry
Dec 06 2017 03:12
@fendermaniac
image.png
Joe
@fendermaniac
Dec 06 2017 03:15
hmm ok
I thought I did define the position
let me double check
@GitHub-Henry that was leftover code from my earlier tests, fixed!
Sorin Ruse
@sorinr
Dec 06 2017 03:21
@fendermaniac your json call returns the right data for me. it's important that user enable geolocation on his browser otherwise you will not get any result.
@fendermaniac you need something like this:
if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
       //here you need a fallbak like getting the location by IP
    }
AbrisM
@AbrisM
Dec 06 2017 03:25
If someone knows why the page isn't displaying feel free to msg me :)
Daulis M Gonzalez
@daulis809
Dec 06 2017 03:27
@fendermaniac try console.log(data); right after your call and inspect the page so you can see the response on the console and have a better uunderstanding
Daulis M Gonzalez
@daulis809
Dec 06 2017 03:43
@AbrisM it worked for me after some changes
@AbrisM you should remove the css styling off the html side, than remove the <style> tag, than remove the </a> closing tag on top of the closing </h1> tag
Sorin Ruse
@sorinr
Dec 06 2017 03:47
@AbrisM your html and css parts should be like this example on codepen
Daulis M Gonzalez
@daulis809
Dec 06 2017 03:47
@AbrisM you also don't need <!DOCTYPE html> on the html window
danielgkang
@danielgkang
Dec 06 2017 04:10
hello! how does one center an image within a div container
Ken Haduch
@khaduch
Dec 06 2017 04:17
@danielgkang - are you using bootstrap, or just writing your own CSS?
Linus Phan
@linusphan
Dec 06 2017 04:24
hey
when using font awesome
is there a way to link it to a url?
instead of downloading the file?
nvm I think i got it
danielgkang
@danielgkang
Dec 06 2017 04:34
@khaduch using bootstrap!
Ken Haduch
@khaduch
Dec 06 2017 04:53
@danielgkang - Version 3 or 4? If it is V 3, on the img add class="center-block" (or if you already have a class="something" make it class="something center-block" - that ought to do it. If you are using Bootstrap V4, then it's different.
Ken Haduch
@khaduch
Dec 06 2017 05:00
@danielgkang - in Bootstrap V4, the new class is mx-auto(replacing the center-block of V3.) Update - the Bootstrap V4 incantation to center an image is class="d-block mx-auto" - you also need the d-block.
danielgkang
@danielgkang
Dec 06 2017 05:07
@khaduch awesome! thanks a bunch that helped
CamperBot
@camperbot
Dec 06 2017 05:07
danielgkang sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3566 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Dec 06 2017 05:15
@danielgkang :+1:
Alper
@alper4
Dec 06 2017 07:09
For the Simon Game project, I used the provided sample sounds, however two of the sounds are the same note https://s3.amazonaws.com/freecodecamp/simonSound1.mp3 and https://s3.amazonaws.com/freecodecamp/simonSound4.mp3, was that intentional or mistake?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 06 2017 08:21
@alper4 The sound different for me O.o
alpox
@alpox
Dec 06 2017 08:32
@alper4 they are pretty much different
Alper
@alper4
Dec 06 2017 09:07
The other two are pretty much different https://s3.amazonaws.com/freecodecamp/simonSound3.mp3 and https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, but 1 and 4 are actually the same note maybe an octave apart or bass frequencies stripped from the latter. Anyway, I'm not here to argue, but it is annoying if you actually used them for testing your game.
Alper
@alper4
Dec 06 2017 09:20
If you know any other free sounds I can use, feel free to inform.
iso
@iso1048
Dec 06 2017 10:34

Hi. Why does $(this) in the code below refer to the window object and not the jQuery object that was clicked?

let wDuration=$('#workTime').text(),
    bDuration=$('#breakTime').text();
window.onload = function(){

  $('.increase, .decrease').on('click', (e)=>changeDuration(e,wDuration,bDuration));

}//window onload

function changeDuration(e,work,breakT){
  console.log(work);
  console.log(e);
  e.target.id.substring(0,4)==='work'?work++ : work--;
  console.log($(this));//window object
  console.log(work);

  $('#workTime').text(work);
  $('#breakTime').text(breakT);

}

Thanks

primuscovenant
@primuscovenant
Dec 06 2017 10:58
@heroiczero thx
CamperBot
@camperbot
Dec 06 2017 10:58
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2096 | @heroiczero |http://www.freecodecamp.org/heroiczero
Stephen James
@sjames1958gm
Dec 06 2017 11:16
@gothamknight because you are not calling changeDuration on an object, so it binds to the window object.
@gothamknight You could do
changeDuration.bind(this)(e, wDuration, bDuration);
Hmm that may not work either, with an arrow function, you might need to make it a non-arrow function so the correct this is bound in the callback
Ashwin
@ashwins93
Dec 06 2017 14:14
@gothamknight well your this refers to the enclosing scope when an arrow function is used
the enclosing scope is window.onload's function
so window is this
i guess
Markus Kiili
@Masd925
Dec 06 2017 14:18
@ashwins93 It is not even inside onload callback. Just a normal function.
Ashwin
@ashwins93
Dec 06 2017 14:20
window.onload = function(){ doesn't this have a scope ? :thought_balloon:
Markus Kiili
@Masd925
Dec 06 2017 14:24
@ashwins93 Yes, but when changeDuration is called and executed, its variable values are determined lexically (determined from how the function declaration sits in the code in respect to other functions). Where it is called from doesn't matter.
Ashwin
@ashwins93
Dec 06 2017 14:25
yeah arrow functions are lexically scoped
that's why i'm asking isn't the arrow function placed inside the curly braces of the outer function ?
i mean arrow functions have lexically scoped this captured at the time of declaration
aka not dynamically bound
Markus Kiili
@Masd925
Dec 06 2017 14:26
@ashwins93 Yes, but nothing here sets this into anything else than window. Normal functions and anonymous functions all have this pointing to window.
And onload callback is anonymous function.
Ashwin
@ashwins93
Dec 06 2017 14:27
yeah so the window is this
the onload resides on the window so this inside onload is window isn't it?
Markus Kiili
@Masd925
Dec 06 2017 14:32
@ashwins93 If you used this inside onload callback, it would point to window, because the callback is called as a method of window object, yes. But here this is not used inside onload callback function.
Ashwin
@ashwins93
Dec 06 2017 14:32
okay its used inside changeDuration
which has its own scope
which resides in global scope
Markus Kiili
@Masd925
Dec 06 2017 14:34
@ashwins93 It is easiest to think that this points to the global object if it is not set to anything else. Just check the MDN this page for the special cases where it is set to something else.
Ashwin
@ashwins93
Dec 06 2017 14:37
hmm i've seen those in the YDKJS book
have to review them
AbrisM
@AbrisM
Dec 06 2017 16:26
https://codepen.io/anon/pen/KyLNjb Hi, does anyone know how to keep the footer at the bottom of the page and also to stop the page from stretching way down? There's few content but the page is over its limits
Marc
@MWBauer
Dec 06 2017 17:17
Morning everyone
AbrisM
@AbrisM
Dec 06 2017 17:17
@MWBauer hello
Marc
@MWBauer
Dec 06 2017 17:20
How's AbrisM
?
@sjames1958gm You here?
Stephen James
@sjames1958gm
Dec 06 2017 17:20
I am here, but not there, and certainly not everywhere.
Marc
@MWBauer
Dec 06 2017 17:21
We need to work on your #everywhere skills, bro
lol
I'm trying to display the actual weather that's being called from the weather site.
gimme a hand?
Stephen James
@sjames1958gm
Dec 06 2017 17:21
Sure
Stephen James
@sjames1958gm
Dec 06 2017 17:22
Looks great - every site should have json displayed
Marc
@MWBauer
Dec 06 2017 17:22
The display is cruddy. Can we clean it up?
I've seen some of the examples on Codepen and I'm blown away
I don't know how much skill or practice these people have had, but it's incredible what some of them have done.
I'm struggling to just make it readable and look good
Stephen James
@sjames1958gm
Dec 06 2017 17:24
As design goes I am not the best.
Isaiah Trembley
@IsaiahCT
Dec 06 2017 17:24
that is really cool
Stephen James
@sjames1958gm
Dec 06 2017 17:24
@MWBauer where I am the weather is clouds, which isn't in your array
Marc
@MWBauer
Dec 06 2017 17:25
But you see how it has the : around everything. Can we do away with that?
I need another image?
ack. brb
Stephen James
@sjames1958gm
Dec 06 2017 17:29
Not sure what the : around means.
I just did this to handle the situation
    if (!URL) URL = images["clear"];
    $("body").css("background-image", `url("${URL}")`);
AbrisM
@AbrisM
Dec 06 2017 17:29
Hello all, just working on a webpage atm :)
Stephen James
@sjames1958gm
Dec 06 2017 17:29
I prefer template strings when making these kinds of strings with embedded quotes
@AbrisM You can get money out of this atm?
:)
@MWBauer So you can build your design in the HTML and then insert the values from the json using js.
Or you can build the HTML in the js.
The first way you can insert values in the HTML and get a better feel for the look.
Marc
@MWBauer
Dec 06 2017 17:38
let's talk about this more.
There's so much going on with the JSON that it's hard for me to follow, what with being a newb and not having even a years exp working on this.
Try the app again. Tell me if cloud works
Marc
@MWBauer
Dec 06 2017 17:46
With that change to the URL it says unexpected identifier
grrrr...off to work. someone fix this for me. lol
j/k
see ya'll later
Stephen James
@sjames1958gm
Dec 06 2017 17:54
@MWBauer clouds not cloud also check your syntax on
$("body").css("background-image", `url("${URL}")`);
function displayWeather(json) {
  console.log(json.weather[0].main.toLowerCase())
  var URL = images[json.weather[0].main.toLowerCase()];
  $("body").css("background-image", `url("${URL}")`);
}
@MWBauer In each editor in codepen there is a dropdown menu (the upsidedown caret)
There is a tidy js menu option, use that to tidy up your indenting and it will be easier to read and reason about
AbrisM
@AbrisM
Dec 06 2017 18:22
@Stephen James Hmm I haven't implemented a money-feature in it. It's psuedo all the way :)
Jean Marco Romero
@volkranium
Dec 06 2017 18:49
@aguyinmontreal Thanks for the resource
CamperBot
@camperbot
Dec 06 2017 18:49
volkranium sends brownie points to @aguyinmontreal :sparkles: :thumbsup: :sparkles:
:cookie: 232 | @aguyinmontreal |http://www.freecodecamp.org/aguyinmontreal
AbrisM
@AbrisM
Dec 06 2017 18:56
https://codepen.io/anon/pen/wPbqYG Hello all, could someone explain why the page isn't showing and the zip not working? :D
Dan Lafferty
@DanLaff
Dec 06 2017 19:03

@AbrisM You're missing a closing bracket in your gettown function

function gettown(Townnames){
     Townnames= parseInt(Townnames);
       if (Townnames<601){
           return "NY"}

            else if (Statenames>601 && Statenames<=795){
            return "PR"
            }

And in that function Statenames is not defined.
In the townresult() function, I'm not sure what you're trying to do in your for loop (check for multiple hyphens?) but you call a variable hyphen that isn't defined - I think you mean hyphencount

Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 06 2017 19:10
@AbrisM You can click on the red !s here to get an information on why it doesn't work. Maybe they will help you :)
AbrisM
@AbrisM
Dec 06 2017 19:15
@itsLaff Yes, I've adding the missing bracket so now it seems to function for Codepen. In the forloop I'm trying to make sure that the user doesn't use a hyphen in the input section
@Otto-AA Yes, I have used that often with codepen and the analyze :)
Dan Lafferty
@DanLaff
Dec 06 2017 19:17

@AbrisM A simpler way to check for a hyphen is to use the .includes() method. zipfield.includes('-') if you only want to check for one hyphen. If you want to check for more than one hyphen to make that invalid, you could do something like: zipfield.split('-').length > 1. No need for a loop and a counter variable.

If you want to validate US Postal Zip Codes, this is the regex: ^[0-9]{5}(?:-[0-9]{4})?$

/^[0-9]{5}(?:-[0-9]{4})?$/.test(zipfield) // true if valid

https://www.safaribooksonline.com/library/view/regular-expressions-cookbook/9781449327453/ch04s14.html

aRtoo
@artoodeeto
Dec 06 2017 19:21
hello guys can i have a feedback on my calculator project? heres the link. https://codepen.io/artoo/pen/gGvvER
Tiago Correia
@tiagocorreiaalmeida
Dec 06 2017 19:47
hey @artoodeeto
didnt used it 2 much but there's 2 things I would change
image.png
block this from happening, and maybe let the user some something to the +previous value that was calculated
Can anyone help with why there are two different colors when I hover over my search results?
AbrisM
@AbrisM
Dec 06 2017 20:35
@KUBIX90 Do you mean the undefine shadow drops?
Mark Kubik
@KUBIX90
Dec 06 2017 20:35
Yeah
AbrisM
@AbrisM
Dec 06 2017 20:36
You have two different colors for your styling sheet

f2eded and .button:hover solid grey

wow that got large :D
and you might want to check out the box-shadow
It's still grey but its a different tint of grey
Try making them the same grey/#
Mark Kubik
@KUBIX90
Dec 06 2017 20:40
Yeah think I've got a few too many tints of grey going on, I'll have a play with it, thanks
A-J Roos
@Asjas
Dec 06 2017 20:43
@KUBIX90 I replaced your hover selector by splitting it into two selectors as such
.search-result:hover{
    background-color:rgba(192,192,192,.5);
    transition:all 500ms ease-out;
}

.search-result:hover * {
  background-color:rgba(192,192,192,.08);
    transition:all 500ms ease-out;
}
The h2 and p is stacking on the article causing it to become darker. It's has nothing to do with f2eded or any of the other grey
Mark Kubik
@KUBIX90
Dec 06 2017 20:44
@Asjas Ahhhh I see thanks very much!
CamperBot
@camperbot
Dec 06 2017 20:44
kubix90 sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @asjas |http://www.freecodecamp.org/asjas
A-J Roos
@Asjas
Dec 06 2017 20:45
No problem :)
Mark Kubik
@KUBIX90
Dec 06 2017 20:46
I did similar to what you did above, but the only thing was I had no idea why it worked, and thought it looked a bit hacky
Have I structured the HTML code OK? Seems a bit of an odd behavior to happen @Asjas
A-J Roos
@Asjas
Dec 06 2017 20:47
It definitely is hacky. If you hover you can still see the inside box for a very short time. Like a split second almost. I'm not sure how to fix it though.
Diego Mayer
@Chrono79
Dec 06 2017 20:48
Can I get some help with some simple css problem?
It's about Bootstrap button groups

https://codepen.io/anon/pen/qVGprK

I want all the buttons to have the same height and one button has a <br / > so the two words show in two lines

A-J Roos
@Asjas
Dec 06 2017 20:49
I'm checking the html you are returning. I am applying a background to my project and it's not causing that same problem
A-J Roos
@Asjas
Dec 06 2017 20:54
@Chrono79 You can set your css as follows
.btn-group {
  display: flex;
}
It grows the size of all elements to the size of the largest
Diego Mayer
@Chrono79
Dec 06 2017 21:00
@Asjas exactly what I was looking for, thanks @Asjas
CamperBot
@camperbot
Dec 06 2017 21:00
chrono79 sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @asjas |http://www.freecodecamp.org/asjas
Dan Lafferty
@DanLaff
Dec 06 2017 21:02

@Chrono79 Another option if you're supporting older browsers:

.btn-group .btn {
  height: 4em;
  line-height: 100%;
}

Or use javascript as mentioned here: https://stackoverflow.com/a/33045465
One note - do not use the <br> tag for creating a new line. Use the <p> element.

Diego Mayer
@Chrono79
Dec 06 2017 21:16
Dunno why, but in the site I'm working that button is seen lower than the rest, thanks @itsLaff too
They all have the same height tho
CamperBot
@camperbot
Dec 06 2017 21:16
chrono79 sends brownie points to @itslaff :sparkles: :thumbsup: :sparkles:
api offline
Kris Baillargeon
@krisb1220
Dec 06 2017 21:19
@Chrono79 have you cleared all default padding and margins?
* { 
   padding: 0;
   margin: 0;
}
Browsers, HTML, and CSS all have default sizes that tend to mess up your layout if you don't clear them in your CSS as the very first statement
A-J Roos
@Asjas
Dec 06 2017 21:21
@krisb1220 Bootstrap ships with normalize.css
Kris Baillargeon
@krisb1220
Dec 06 2017 21:21
Oh really? Hmm, I was just speaking off of personal experience :P No wonder I got hit with 5x issues when I stopped relying on frameworks LOL
A-J Roos
@Asjas
Dec 06 2017 21:23
I just use normalize from the website in my own projects. I'm not relying on frameworks the last 2 months but a reset css helps a lot
Kris Baillargeon
@krisb1220
Dec 06 2017 21:23
Sounds like a good strategy actually :D Thanks @Asjas
CamperBot
@camperbot
Dec 06 2017 21:23
krisb1220 sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @asjas |http://www.freecodecamp.org/asjas
Kris Baillargeon
@krisb1220
Dec 06 2017 21:24
@Chrono79 Another way to debug your layout is with the chrome devtools pointer tool. it's indispensable to me when building responsive UIs
A-J Roos
@Asjas
Dec 06 2017 21:24
pleasure. bootstrap also allows you to use _reboot.scss which is the bootstrap 4 version which you can ship solo in your project
Kris Baillargeon
@krisb1220
Dec 06 2017 21:24
image.png
If you click the pointer icon that's orange on the top left it will allow you to peak through your layout and/or your layout's code with your mouse
Jake
@JakeDVirus
Dec 06 2017 21:26
@Otto-AA @sjames1958gm @thmsdnnr Thanks a lot guys for assisting me. i finally can see the plot here with all implicit operations. so i hardcoded the function1 property of scrollingby replacing this with scrolling.
i presume i did not leave any loose ends here
CamperBot
@camperbot
Dec 06 2017 21:26
neeldvirus sends brownie points to @otto-aa and @sjames1958gm and @thmsdnnr :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @otto-aa |http://www.freecodecamp.org/otto-aa
:star2: 8755 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Kris Baillargeon
@krisb1220
Dec 06 2017 21:26
its like the equivalent of quickly adding and removing borders and backgrounds to visualize your elements. very quick and handy
CamperBot
@camperbot
Dec 06 2017 21:26
:cookie: 423 | @thmsdnnr |http://www.freecodecamp.org/thmsdnnr
Diego Mayer
@Chrono79
Dec 06 2017 21:26
@krisb1220 Thanks Kris, computed styles are almost the same (the width differs, but I don't mind)
CamperBot
@camperbot
Dec 06 2017 21:26
chrono79 sends brownie points to @krisb1220 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @krisb1220 |http://www.freecodecamp.org/krisb1220
Diego Mayer
@Chrono79
Dec 06 2017 21:27
I think I'm going to take the abbreviate one of the words approach for now
amare16
@amare16
Dec 06 2017 21:27
I am trying to know how search input is working ajax with php with database .. so someone has a skill please help me
Kris Baillargeon
@krisb1220
Dec 06 2017 21:32
@amare16 I answered your question in /FreeCodeCamp
iso
@iso1048
Dec 06 2017 22:22
@sjames1958gm @ashwins93 thanks guys
CamperBot
@camperbot
Dec 06 2017 22:22
gothamknight sends brownie points to @sjames1958gm and @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @ashwins93 |http://www.freecodecamp.org/ashwins93
:star2: 8756 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
krj1
@krj1
Dec 06 2017 23:05
I am making a program for a school project and need some help. the point of the program is to run the function t = ln( p / a ) / r which is a form of the A = pe^rt equation the only difference is I am suppose to round at every step. This is superposed to act like a person repetitively multiplying by r witch would be a decimal and this is the code I have so far
html
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>MnM calculator</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <form>
    <h1>enter information</h1>
    <input id="title" type="text" placeholder="number of MnM" />
    <input id="name" type="text" placeholder="Number of MnM eaten" />

    <input type="button" value="save and run" onclick="insert()" />
  </form>
  <div id="display"></div>




</body>
</html>
and JavaScript


var titles  = [];
var names   = [];
var answer = titles[0];
answer = answer.toString();

var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");


var messageBox  = document.getElementById("display");

function insert ( ) {
 titles.push( titleInput.value );
 names.push( nameInput.value );


 clearAndShow();
}

function clearAndShow () {
  // Clear our fields
  titleInput.value = "";
  nameInput.value = "";


  // Show our output
  messageBox.innerHTML = "";

  messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
  messageBox.innerHTML += "Names: " + names.join(", ") + "<br/>";
  messageBox.innerHTML += "Names: " + answer.join(", ") + "<br/>";


} 

/*
 var per = names.value() / 100;
 var total; 
 var i = 0;

 while (i < 4) {
  total = num * per;
  num = num - total;
 num = Math.round(num) ;

    i++;

}
 var answer = i.toString();
*/