These are chat archives for FreeCodeCamp/HelpFrontEnd

31st
Dec 2017
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:00
My URL works fine if I just put it in the browser address bar, but not from CodePen.
Cristian
@GummyGod
Dec 31 2017 00:02
@VaseJS aight man ty
CamperBot
@camperbot
Dec 31 2017 00:02
gummygod sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @vasejs |http://www.freecodecamp.org/vasejs
Cristian
@GummyGod
Dec 31 2017 00:02
How did i do that
VaseJS
@VaseJS
Dec 31 2017 00:02
function palindrome(str) {
var x = str.split('').reverse().join(''); // reverse the string
var y = x.replace(/[\W_]/g, ''); //remove items from reversed string
var palindr = y.toLowerCase(); // turn reversed string to lower case
if ( palindr == str){ // ORIGINAL string (with unremoved characters) to your clean string
return true;
}
else {
return false;
}
}

palindrome("eye");
the order is off and you're comparing it to the original string
fix that and you're golden
Cristian
@GummyGod
Dec 31 2017 00:04
Well,idk how to fix that i guess hahah this is why i m asking
the palindr var should be already transformed bcs var x reverses it then y is doing x + remove the unwanted items then var palindr is y just that it makes everything lowercased
VaseJS
@VaseJS
Dec 31 2017 00:08
k. be back after this call
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:13
GummyGod, maybe this will help: If your original string (str) is "eyE", I think your comparison would be if ( eye == eyE ). Is that what you want?
Cristian
@GummyGod
Dec 31 2017 00:15
nvm i got it
i would transform the result let's say from E_y_e into eye but it would compare E_y_e to eye so this is why it wouldn't pass
Jacob Pieczynski
@JacobPie
Dec 31 2017 00:18
How can I line up the divs in the portfolio so that they are all the same size and line up in two rows of three? https://codepen.io/JakePie/pen/gomBeZ
Cristian
@GummyGod
Dec 31 2017 00:19
@JacobPie u learnt about bootstrap yet?
If so ,use a col-6 for both
elements u want to
or col-6 do something ,,empty col 6 then another col 6 ,etc,u get it,i hope,i'm a reallllllllllly bad teaecher
teacher
Jacob Pieczynski
@JacobPie
Dec 31 2017 00:20
@GummyGod So give all the divs the class of col-md-6?
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:23
Has anyone passed the Wiki API challenge that knows about the "No 'Access-Control-Allow-Origin' header" error?
VaseJS
@VaseJS
Dec 31 2017 00:23
@JacobPie Go here https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp and review the Basic Structure of Bootstrap Grid. This should help you to restructure your current html.
Jacob Pieczynski
@JacobPie
Dec 31 2017 00:26
@VaseJS @GummyGod So I used the classes of col-md-6 on all the divs for the portfolio pieces. Why has nothing changed?
Kevin Kindorf
@kkindorf
Dec 31 2017 00:26
@JacobPie you need to use containers and rows so your columns are laid out correctly
@VaseJS 's resource gives pretty clear examples of what's missing
Jacob Pieczynski
@JacobPie
Dec 31 2017 00:27
@kkindorf @VaseJS @GummyGod Thanks
CamperBot
@camperbot
Dec 31 2017 00:27
jacobpie sends brownie points to @kkindorf and @vasejs and @gummygod :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @kkindorf |http://www.freecodecamp.org/kkindorf
:cookie: 236 | @gummygod |http://www.freecodecamp.org/gummygod
:cookie: 398 | @vasejs |http://www.freecodecamp.org/vasejs
VaseJS
@VaseJS
Dec 31 2017 00:29
@jdsandifer Which browser are you using?
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:30
Chrome Version 63.0.3239.108 (Official Build) (64-bit)
Kevin Kindorf
@kkindorf
Dec 31 2017 00:33
@j.d. sandifer can you post the url to the api? if your using codepen you might just need to stick this: https://crossorigin.me in front of the url
@jdsandifer ^
VaseJS
@VaseJS
Dec 31 2017 00:35
@jdsandifer did you try the api sandbox? https://www.mediawiki.org/wiki/Special:ApiSandbox
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:39
the crossorigin.me trick seemed to cause no errors, but now I'm getting the same basic error with a status 522 message at the end. I think that's new...
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:47
@VaseJS Yes. Just using my ajax URL in the address bar returns the JSON I expect as well.
Status 522 is a timeout error. I guess crossorigin.me is down or something.
Kevin Kindorf
@kkindorf
Dec 31 2017 00:49
@jdsandifer can you share your code
J.D. Sandifer
@jdsandifer
Dec 31 2017 00:57
Got it to work after a little more searching...
In the ajax, needed dataType: "jsonp", crossDomain: true apparently.
in addition to the &format=json in the Wikipedia API call (url).
Had dataType already but didn't capitalize the "T" so that also slowed me down.
Thanks for the ideas everyone!
Marc
@MWBauer
Dec 31 2017 02:44
fa fa-search is not working. What am I doing wrong?
<i class="fa fa-search">Click me</i>
I tried it after a button. I tried it within a button
Ken Haduch
@khaduch
Dec 31 2017 03:09
@MWBauer - any problems loading the CSS file? Maybe they changed the name of that icon? I have that in a Pen that is up on the other screen and it is working. It's just the test within an anchor tag
<button>Button text <i class="fa fa-search"></i></button> made a button with the text "Button text " and then a magnifying glass icon?
Ismail Hozain
@ismailhozain
Dec 31 2017 03:37
@MWBauer did you put in the link for the library?
Henry
@GitHub-Henry
Dec 31 2017 03:39
@MWBauer This Font Awesome tutorial may help
Eunice Park
@eunicode
Dec 31 2017 03:40

Hello all. I have an AJAX / if statement question.

What's the difference between

// VERSION 1 
if (xhrObject.readyState === xhrObject.DONE)
if (xhrObject.status === 200) {
resolve(JSON.parse(xhrObject.responseText));
}

and

// VERSION 2
if (xhrObject.readyState === xhrObject.DONE && xhrObject.status === 200) {
resolve(JSON.parse(xhrObject.responseText));
}

because the first version works while the second version does not

so guys i have a tricky css question
what i want to do is align the water and the header text together and am having trouble sizing the image, cover and contain are not working and 100vh will not be very good for alignign purposes, is there any other method i can use?
Kevin Kindorf
@kkindorf
Dec 31 2017 03:46
@ismailhozain what do you mean by aligning the image and the header text?
do you want the text floating on top of the image?
Ismail Hozain
@ismailhozain
Dec 31 2017 03:47
yes i want the text floating on top of the image
i want to align the surface of the water with the text-shadow
Kevin Kindorf
@kkindorf
Dec 31 2017 03:50
so one thing you could do is remove your height attribute from the image's css
then use position relative in introsection like this:
.introsection{
  position: relative;

}
Ismail Hozain
@ismailhozain
Dec 31 2017 03:51
ok i will try that, but do i keep the width stuff?
oh yeah and do i add it to the image or the entire section?
Kevin Kindorf
@kkindorf
Dec 31 2017 03:53
then you could absolutely center your paragraph text like this:
.name {
  font-family:Cinzel Decorative;
  font-size:96px;
  color:black;
  text-shadow:0px 100px 15px;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  bottom:0;
}
VaseJS
@VaseJS
Dec 31 2017 03:53
if you want to do it with modern css use flexbox
Kevin Kindorf
@kkindorf
Dec 31 2017 03:53
or you could keep the height and width and still apply the same css for your introsection and name class
VaseJS
@VaseJS
Dec 31 2017 03:54
justify-content: center
Ismail Hozain
@ismailhozain
Dec 31 2017 03:54
@kkindorf thanks for the help
CamperBot
@camperbot
Dec 31 2017 03:54
ismailhozain sends brownie points to @kkindorf :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @kkindorf |http://www.freecodecamp.org/kkindorf
Kevin Kindorf
@kkindorf
Dec 31 2017 03:54
or you could use css background image and apply to your introsection div
Ismail Hozain
@ismailhozain
Dec 31 2017 03:55
@VaseJS i dont know flexbox but question does it do the same thing as css grid besause i just finished learning grid
Kevin Kindorf
@kkindorf
Dec 31 2017 03:55
and then your text will always be on top of the image
VaseJS
@VaseJS
Dec 31 2017 03:56
no, but flexbox and grid work together. i don't understand how you can know grid and not flexbox
Ismail Hozain
@ismailhozain
Dec 31 2017 03:56
it was a grid only tutorial
VaseJS
@VaseJS
Dec 31 2017 03:56
on FCC?
Ismail Hozain
@ismailhozain
Dec 31 2017 03:56
no
on scrimba
Kevin Kindorf
@kkindorf
Dec 31 2017 03:56
I don't think you need flexbox if your trying to use bootstrap
VaseJS
@VaseJS
Dec 31 2017 03:56
oh, ok
Ismail Hozain
@ismailhozain
Dec 31 2017 03:56
if you want i can send you the link
VaseJS
@VaseJS
Dec 31 2017 03:56
that's a tragedy @kkindorf
Ismail Hozain
@ismailhozain
Dec 31 2017 03:57
too true
Kevin Kindorf
@kkindorf
Dec 31 2017 03:58
whats a tragedy?
VaseJS
@VaseJS
Dec 31 2017 03:58
not knowing flexbox
Kevin Kindorf
@kkindorf
Dec 31 2017 03:58
who said I didn't know flexbox?
VaseJS
@VaseJS
Dec 31 2017 03:58
not you, just in general
Ismail Hozain
@ismailhozain
Dec 31 2017 03:58
no i dont know it
VaseJS
@VaseJS
Dec 31 2017 03:59
I don't think you need flexbox if your trying to use bootstrap
commenting on that
:D
Kevin Kindorf
@kkindorf
Dec 31 2017 03:59
you dont need flexbox to hover text over an image
Ismail Hozain
@ismailhozain
Dec 31 2017 03:59
by the way thanks for the tutorial @VaseJS
CamperBot
@camperbot
Dec 31 2017 03:59
ismailhozain sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @vasejs |http://www.freecodecamp.org/vasejs
VaseJS
@VaseJS
Dec 31 2017 04:00
@ismailhozain no problem. flexbox is a massive improvement in css and any frontend dev must know it...or your not a front end dev
just a poser :P
Ismail Hozain
@ismailhozain
Dec 31 2017 04:00
okie dokie
got it !
iso
@iso1048
Dec 31 2017 04:37
@ismailhozain I liked this tutorial for flexbox http://flexboxfroggy.com/
Shubham Singh
@imshubhamsingh
Dec 31 2017 05:31
Hey guys I just started learning reactjs and redux, and my friend started learning solidity (blockchain). So we recently made an app based on it. https://github.com/imshubhamsingh/FarmerChain Let me know any suggestion or any feedback you guys want to give
kerafyrm02
@kerafyrm02
Dec 31 2017 05:38
Anyone stuck or need help?
Shubham Sharma
@shubham1604
Dec 31 2017 06:42
YES
yadi zhang
@iamyadi
Dec 31 2017 07:46

Hello ~ anyone help me?
I donot know why this code always return false???
function test(aa) {
var myArray=["A","B"];
mySet = new Set(myArray);
return mySet.has(aa);

}
var result = test("A");
console.log(mySet.has(result));

Sweet Coding :)
@SweetCodingInc
Dec 31 2017 08:09
@iamyadi Your test function returns true.. So your result will be true. On the last line you're doing mySet.has(true). And your mySet doesn't have true in it. Therefore you get false
if you do console.log(result) you will get true
yadi zhang
@iamyadi
Dec 31 2017 08:18
@SweetCodingInc Aha, I understand, thank you very much!
CamperBot
@camperbot
Dec 31 2017 08:18
iamyadi sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 177 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Sweet Coding :)
@SweetCodingInc
Dec 31 2017 09:00
@iamyadi :+1:
Kartik Mudgal
@Sprinting
Dec 31 2017 11:08
does anyone have any idea why my trigger_anim function won't work inside an event listener? If i call it directly it works. when I call it inside an event listener it does not work

let start_session = ()=>{
  let pomodoro = set_up()  
  let _pomodoro_container = pomodoro_container()
  let _session_ui = session_ui()
  let time_init = gms(pomodoro.clock.work.time)
 // console.log(time_init)
  update(pomodoro,time_init.min,time_init.sec)

  //works
 // trigger_anim()

  _pomodoro_container.addEventListener('click',()=>{
  //does not work
    //trigger_anim()
    if(pomodoro.state.state==pomodoro.states.before_start||pomodoro.state.state==pomodoro.states.paused)
      start(pomodoro)
    else pause(pomodoro)
  },false)

  _session_ui.work.up.addEventListener('click',()=>{ 
    let value = (Number(_session_ui.work.div.dataset.work)+1)
    _session_ui.work.div.dataset.work = value
    _session_ui.work.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  _session_ui.work.down.addEventListener('click',()=>{
    let value = (Number(_session_ui.work.div.dataset.work)-1)
    _session_ui.work.div.dataset.work = value
    _session_ui.work.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  _session_ui.break.up.addEventListener('click',()=>{
    let value = (Number(_session_ui.break.div.dataset.break)+1)
    _session_ui.break.div.dataset.break = value
    _session_ui.break.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  _session_ui.break.down.addEventListener('click',()=>{
    let value = (Number(_session_ui.break.div.dataset.break)-1)
    _session_ui.break.div.dataset.break = value
    _session_ui.break.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  return pomodoro
}
let trigger_anim =()=>{
let _pomodoro_container = pomodoro_container()
  insert_style_sheet_with_rule("div._test{transition:background 6s ease}")
  _pomodoro_container.classList.add("_test")
}
the class does get added to the div, but the transition does not trigger
other css proeprties like say, background or border do change
dinesh
@1532j0004kg
Dec 31 2017 11:14
guys any one tell how to use the api of twitchtv , ?
like url of twitch tv?
Kartik Mudgal
@Sprinting
Dec 31 2017 11:16
you'd need a client id
dinesh
@1532j0004kg
Dec 31 2017 11:17
how to get?
Kartik Mudgal
@Sprinting
Dec 31 2017 11:17
for the fcc challege you can use the mock data provided in the description
dinesh
@1532j0004kg
Dec 31 2017 11:18
yes i cant able to understand.
what is said in that.
how to get clientid?
dinesh
@1532j0004kg
Dec 31 2017 11:35
ok
Spacetime
@justinemar
Dec 31 2017 11:40
how would you store the data of users who logged in with google ? like if i will store a post of that user i can store that but the next time he logs in how can i reference that to him is there some kind of token that is unique to that google account?
This is firebase by the way
Tiago Correia
@tiagocorreiaalmeida
Dec 31 2017 11:48
@justinemar you need to save the user data once he loggs in, the apis return an oatuth id
next time he clicks to loggin you check if the user exists
if not you create it
are you using something like passport?
Spacetime
@justinemar
Dec 31 2017 11:51
@tiagocorreiaalmeida no i'm not using passport , so what exactly i will store ?
Tiago Correia
@tiagocorreiaalmeida
Dec 31 2017 11:52
well depends but normally it returns you an oauthID that's unique so you can store that value/other info about the user and next time he clicks on login you an check if he atually exists allready there
you can store the oauthid normally they send the avatar/name and some others information
Spacetime
@justinemar
Dec 31 2017 11:55
@tiagocorreiaalmeida so i will just store that oaauthid along with the unique id generated by push ? then if the user logs back in i can check if that oauthid exists right?
Tiago Correia
@tiagocorreiaalmeida
Dec 31 2017 11:57
@justinemar exactly, when using multiple things like facebook/twitter/google/github I never knew if the oauthid from one social network could match the other so I always stored the network and I would check by oauthid and network just in case :D but yeah if you are using only google no need for such thing
are you using node?
Spacetime
@justinemar
Dec 31 2017 11:59
No i not developing with node, just react js
primuscovenant
@primuscovenant
Dec 31 2017 12:44
@heroiczero thx
CamperBot
@camperbot
Dec 31 2017 12:44
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2122 | @heroiczero |http://www.freecodecamp.org/heroiczero
Tarun Khandelwal
@Delwalt
Dec 31 2017 12:55
Hi Guys.
Anyone there who can help me with my frontend doubts?
Daniel Romero
@Ranacode
Dec 31 2017 13:04
Well, I can try to help you
Shubham Sharma
@shubham1604
Dec 31 2017 14:13
Hey guys. I need some ideas on how to create a toggler from celcius to farenheight and vice versa in the weather app
Tiago Correia
@tiagocorreiaalmeida
Dec 31 2017 14:25
@shubham1604 you can change the value from the tag that displays it or hide/show one
grantknaver
@grantknaver
Dec 31 2017 15:41
hi everyone
Gersho
@Gersho
Dec 31 2017 15:41
:wave: @grantknaver
grantknaver
@grantknaver
Dec 31 2017 15:41
@Gersho happy new year
Gersho
@Gersho
Dec 31 2017 15:42
you too
grantknaver
@grantknaver
Dec 31 2017 15:42
quick question for everyone out there
I am having an issue right now where my window.innerWidth is delivering a number different than what my box model, and client are informing my window width is.
any ideas out there?
*and what my client are
Gersho
@Gersho
Dec 31 2017 15:47
i have no idea, have you tried inspecting the elements of the page to get an idea of what's going on ?
grantknaver
@grantknaver
Dec 31 2017 15:47
sooo many times. hahaha
Gersho
@Gersho
Dec 31 2017 15:48
or put some different background colors to tell the different parts apart ?
grantknaver
@grantknaver
Dec 31 2017 15:48
There is good 20px give
and ya it just will not work
it literally is proabbly the most stumped I have ever been
Gersho
@Gersho
Dec 31 2017 15:50
so that's an issue when you try to place your elements ? everything gets shifted ?
grantknaver
@grantknaver
Dec 31 2017 15:50
it doesn't really happen until flex-wrap kicks in, could that do it?
Gersho
@Gersho
Dec 31 2017 15:51
well try turning off some css until it works D:
grantknaver
@grantknaver
Dec 31 2017 15:51
I try that real quick
Gersho
@Gersho
Dec 31 2017 15:52
the P in CSS stands for Practical
grantknaver
@grantknaver
Dec 31 2017 15:55
hahah
well i turned off flex-wrap, and it will work... I can't beleive flex wrap distorts the box model and messes with pixels
Gersho
@Gersho
Dec 31 2017 15:57
and it'll load 0.00001 ms faster too !
grantknaver
@grantknaver
Dec 31 2017 15:58
sarcastic butt hahaha
kerafyrm02
@kerafyrm02
Dec 31 2017 17:44
annyone need help
grantknaver
@grantknaver
Dec 31 2017 17:58
yea really bad
kerafyrm02
@kerafyrm02
Dec 31 2017 18:20
with what?
@grantknaver What are you stuck on
VaseJS
@VaseJS
Dec 31 2017 18:21
@Gersho P in CSS? I'm at the tail end of this convo but what has a P in it? and what is the issue that has stomped @grantknaver ?
@kerafyrm02 always willing to help
kerafyrm02
@kerafyrm02
Dec 31 2017 18:21
:)
kerafyrm02
@kerafyrm02
Dec 31 2017 18:26
If I'm reading your question up above correctly grantknaver, you're getting an incorrect innerWidth value from client vs box model. Here are some possiblities why:
  1. innerWidth does not account for zoom in. (So if you're zoomed in it will return invalid value).
  2. The parent must be visible. If it is not, jquery will attempt to unhide it then take the measurement then hide it again., but it tends to give inconsistent results. Plus it's an impact on performance.
My suggestion is to use a container with 0 margin and use $(window).width();
But that's advice based on a guess., since I do not know your end goal.
If anyone else needs help please don't hesitate to leave me a message or ask in chat room.
TheRedstoneTaco
@TheRedstoneTaco
Dec 31 2017 19:15
if var has function scope, what scope does let have?
Kudzu
@czhower
Dec 31 2017 19:27
block scope
and var is not only func scope, can be global etc
Nick Ross
@codecampNick
Dec 31 2017 20:01
I have a question about the "Map the Debris” challenge. I was able to pass the challenge but wanted to verify results. I looked up Sputnik’s orbit and it was about once every 98 minutes but the orbital period "(86400 / 60) / 60” comes out to about once every 24 hours. Anyone know why the orbit time vs the orbital period would be different?
Ben Hart
@Benjmhart
Dec 31 2017 20:37
hey there, I have a module that parses markdown and outputs HTML - is there an easy way to coerce it into JSX?
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:25
Even though I increased the height of the message box down in the form, why, when you input text does it go horizontal and not go to a new line when it hits the edge. https://codepen.io/JakePie/pen/gomBeZ
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:26
@JacobPie .
erm
there's something called word-break or something like that
sec
https://www.w3schools.com/cssref/css3_pr_word-wrap.asp .. try this, i didn't solve that kind of a problem for a long time so my memory is not so great on that point
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:29
@mbosnjak01 Hmm. It didn't work
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:29
also
instead of making input "text" for your message
try using textarea tag instead of input
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:31
What would that look like?
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:32
so i just added textarea tag and .message {
height: 300px;
word-break: break-all;
word-wrap: break-word;
}
inside message class

@JacobPie .message {
height: 300px;
text-align: center;
word-wrap: break-word;
margin: 0 auto;
}

<textarea placeholder="Write your message here" required class="message"></textarea>

this might be what you're looking for in the end
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:34
@mbosnjak01 It worked. Thanks
CamperBot
@camperbot
Dec 31 2017 21:34
jacobpie sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
api offline
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:39
Final question: When I use the buttons, it hides part of the section you click to under the nav. How do I change that?
kerafyrm02
@kerafyrm02
Dec 31 2017 21:40
Anyone stuck
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:41
@kerafyrm02 Me lol
Phylicia
@pcampb22
Dec 31 2017 21:41
I am stuck. I have the functionality of my weather application to work; however, the background changing based on temperature is not working. Everyone is seeing a winter background even if the temperature is not in range for that background. Please help. lol https://codepen.io/phyliciacampbell/pen/qpbRRX/
@JacobPie What you stuck on?
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:45
@pcampb22 My when I hit the buttons on my portfolio page they take you so that the nav bar covers half of the element you are going to
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:46
tags are probably just wrongly positioned inside html
and few other html elements
Jacob Pieczynski
@JacobPie
Dec 31 2017 21:47
@mbosnjak01 Where should I put them
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:47
I didn't look it up, but that's just my assumption
kerafyrm02
@kerafyrm02
Dec 31 2017 21:54
sorry was afk
Are you still there @pcampb22
Phylicia
@pcampb22
Dec 31 2017 21:55
@kerafyrm02 Yes, I am still here.
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:55
help him .. xD I tried adding position:static/relative -.. that fixes the problem half way, but then navbar isn't sticky
kerafyrm02
@kerafyrm02
Dec 31 2017 21:55
Ok what are you trying to do
Matej Bošnjak
@mbosnjak01
Dec 31 2017 21:55
inside .topbar class
@JacobPie
kerafyrm02
@kerafyrm02
Dec 31 2017 21:57
??
What are you trying to do? I can help if you explain it to me.
Anyone else stuck?
Phylicia
@pcampb22
Dec 31 2017 21:59
@kerafyrm02 i am lol
kerafyrm02
@kerafyrm02
Dec 31 2017 21:59
What are you trying to do
Phylicia
@pcampb22
Dec 31 2017 22:00
when a user has a temperature in their location of 80 degrees or more, the background will be a clear skies kind of background. when they have a temperature of less than 80 degrees but greater than 40 degrees it will display a different background and when they are in a location with temperatures below 40 degrees it will display a snow background. The issue i am having
it that the weather temperature is accurate but the background won’t change based on temperatures. it stays as a snowy background
@kerafyrm02
kerafyrm02
@kerafyrm02
Dec 31 2017 22:01
link?
kerafyrm02
@kerafyrm02
Dec 31 2017 22:04
@pcampb22 i see a bunch of blank buttons
is that supposed to be like that?
Phylicia
@pcampb22
Dec 31 2017 22:04
No. It will ask you if it can use your location and once you allow access it displays the weather in your local area
It’s been working. I have multiple people testing it in different locations for me. It’s just the background i am having the issue with
@kerafyrm02
kerafyrm02
@kerafyrm02
Dec 31 2017 22:05
ok sec
so only load up you want it to change?
*on load
Phylicia
@pcampb22
Dec 31 2017 22:07
yes. i want the background to reflect the temperature in the area. so if it is 89 degrees in one location, the background shows sunny skies and if it’s 20 dgerees it shows snowy trees
kerafyrm02
@kerafyrm02
Dec 31 2017 22:08
first issue
fTemp is a string
so-- if you do if statement
it evaluates as 1
needs to be an int
Phylicia
@pcampb22
Dec 31 2017 22:09
word. okay. i couldn’t tell if it converted as a string or integer. that makes sense.
kerafyrm02
@kerafyrm02
Dec 31 2017 22:10
js lets you get away with it,. but it's good practice to just convert it
alert(typeof fTemp); //displays the type
else if (fTemp < 80 && fTemp > 40){
            $('body').css('background-image', 'url:(https://wallpaper.pickywallpapers.com/1600x900/cold-weather-in-the-park.jpg)');
         }
basically says between 40 and 80 show cold picture
are you expecting something else?
ok sec-- you have a different issue
kerafyrm02
@kerafyrm02
Dec 31 2017 22:16
I think i found the issue
The code is running x2
The first time it sets to correct bg
then the 2nd time it fails
Phylicia
@pcampb22
Dec 31 2017 22:17
why would it be running 2x?
kerafyrm02
@kerafyrm02
Dec 31 2017 22:19
you have broken JS
Phylicia
@pcampb22
Dec 31 2017 22:19
where?
im currently messing with the code now and trying out different stuff
kerafyrm02
@kerafyrm02
Dec 31 2017 22:20
ya sec-- kinda hard to read this in codepen i hate codepen lol
Phylicia
@pcampb22
Dec 31 2017 22:20
yeah I hate it too. Idk why FCC requires code pen lol i get it’s easy to submit stuff but sucks to read
kerafyrm02
@kerafyrm02
Dec 31 2017 22:21
found it
wConvert is missing bracket
closing bracket
Phylicia
@pcampb22
Dec 31 2017 22:22
LOL! Ha! would you look at that? lol a small error. geeze i was looking at the actual code for the background for forever and it isnt even there the issue lies lmao
kerafyrm02
@kerafyrm02
Dec 31 2017 22:22
actually it was just lined up wrong -- but theres still an issue
bc your if statement shouldnt end there
Phylicia
@pcampb22
Dec 31 2017 22:23
what do you mean
kerafyrm02
@kerafyrm02
Dec 31 2017 22:24
if you set an alert inside of your else statement-- you'd see that block of code is still executing
when it shouldnt
which means js is breaking somewhere else
Phylicia
@pcampb22
Dec 31 2017 22:26
hmm…. im going to sort through this piece by piece
kerafyrm02
@kerafyrm02
Dec 31 2017 22:26
you should get in the habit of lining up your brackets
Phylicia
@pcampb22
Dec 31 2017 22:27
not on codepen though. It’s a lot easier to line things up on what i usually use to code. I usualy code on another application and then just copy and paste my code into codepen.
kerafyrm02
@kerafyrm02
Dec 31 2017 22:27
is all your code supposed to be inside the geolocation thing?
Phylicia
@pcampb22
Dec 31 2017 22:27
yeah. it’s supposed to.
kerafyrm02
@kerafyrm02
Dec 31 2017 22:28
a better way
instead of saying if true
and placing it all in bracets
is to say if false then return
if (true){
 blah blah blah
 blah blah blah
 blah blah
}

vs

if (!true){ return; }
blah blah blah
blah blah blah
see how that works?
removes an unecessary layer
Phylicia
@pcampb22
Dec 31 2017 22:29
not really sure.
kerafyrm02
@kerafyrm02
Dec 31 2017 22:30
each time you wrap a block with if statement you have to indent your code
do you see the differences betweeen 1st example and 2nd?
Phylicia
@pcampb22
Dec 31 2017 22:30
yes
kerafyrm02
@kerafyrm02
Dec 31 2017 22:30
you remove having to keep up where closing bracket goes in 2nd one
you want to use the 2nd method
they are both the same thing
but execute differently
! means (inverse of expression)
This message was deleted
Ok found the issue
lol
easy fix
Phylicia
@pcampb22
Dec 31 2017 22:35
lol
kerafyrm02
@kerafyrm02
Dec 31 2017 22:35
cant do else (expression)
else just executes
and remove the colons
in your url
cant have 'url:(htt' should be 'url(http'
it works now
you should change your else to else if ( ...
or just remove it all together and use else {
Phylicia
@pcampb22
Dec 31 2017 22:38
okay so i changed it but for some reason now on line 42 i get an error saying unexpected identifier lmao
kerafyrm02
@kerafyrm02
Dec 31 2017 22:38
remove the colon
on both if statements
Phylicia
@pcampb22
Dec 31 2017 22:39
lol i did
kerafyrm02
@kerafyrm02
Dec 31 2017 22:41
are you good now?
send me new link
Phylicia
@pcampb22
Dec 31 2017 22:42
nah its not working now
kerafyrm02
@kerafyrm02
Dec 31 2017 22:43
send me new link so i can see what you have
i had it working
kerafyrm02
@kerafyrm02
Dec 31 2017 22:44
ok
    //calculate windspeed
    function wConvert(wind){
     var speed = (2.237 * (wind)).toFixed(1);
     return speed;}

}
change that to this
    //calculate windspeed
    function wConvert(wind){
     var speed = (2.237 * (wind)).toFixed(1);
     return speed;
    }
Phylicia
@pcampb22
Dec 31 2017 22:45
i did that and it still wont work
kerafyrm02
@kerafyrm02
Dec 31 2017 22:45
send me new link with that change-
kerafyrm02
@kerafyrm02
Dec 31 2017 22:46
You still have extra bracket
remove that extra bracket
thats why the codee is yellow
i just put it there. it’s still not working for me even with it removed
no background is loading at all
kerafyrm02
@kerafyrm02
Dec 31 2017 22:47
do this
fTemp = 81;
Phylicia
@pcampb22
Dec 31 2017 22:47
i changed the temperature based on my location
kerafyrm02
@kerafyrm02
Dec 31 2017 22:47
before if statement
iits the image thats bad
Phylicia
@pcampb22
Dec 31 2017 22:48
okay i changed it from fTemp and it works but something is going wrong before then
kerafyrm02
@kerafyrm02
Dec 31 2017 22:49
it's your 2nd image url thats bad
Phylicia
@pcampb22
Dec 31 2017 22:49
Screen Shot 2017-12-31 at 4.48.45 PM.png
okay cool. going to try another picture
kerafyrm02
@kerafyrm02
Dec 31 2017 22:49
yup 81 works and 17 works
but your 2nd image is broken
Phylicia
@pcampb22
Dec 31 2017 22:51
i think i fixed the issue with the image
kerafyrm02
@kerafyrm02
Dec 31 2017 22:51
it appears to be working now
: )
Phylicia
@pcampb22
Dec 31 2017 22:52
omg. thank you for your help. lol this was driving me nuts lol. small errors but i appreciate the help :)
kerafyrm02
@kerafyrm02
Dec 31 2017 22:52
Thank you for serving Sailor.
Phylicia
@pcampb22
Dec 31 2017 22:53
@kerafyrm02 You’re Welcome. Proud to serve :-)
Ken Haduch
@khaduch
Dec 31 2017 23:01
@pcampb22 :+1: Thank you for your service! And Happy New Year to you!