FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

HerbiScript

@HerbiScript

'''
$(document).ready(function(){
var url = "https://fcc-weather-api.glitch.me/api/current?";
var api;
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
api = url + "lat=" + pos.coords.latitude + "&" + "lon=" + pos.coords.longitude;
$.getJSON(api, (function(data){
$("#loc").html(data.name + ", " + data.sys.country);
$("#temp").html(data.main.temp + "<button id='C' class='btn btn-default'><b>C</b></button>");
$("img").attr("src", "http://openweathermap.org/img/w/" + setIcon(data.weather[0].id) + ".png");
function setIcon(num){
if (200 <= num && num <= 232){
return "11d";
} else if ((300 <= num && num <= 321) || (520 <= num && num <= 531)){
return "09d";
} else if (500 <= num && num <= 504){
return "10d";
} else if (num == 511 || 600 <= num && num <= 622){
return "13d";
} else if (num == 800){
return "01d";
} else if (num == 801){
return "02d";
} else if (num == 802){
return "03d";
} else if (num == 803 || num == 804){
return "04d";
} else {
return "01d";
}
}
}));
});
}
$(".btn").css("color", "orange");
});
'''

CamperBot

@camperbot

:bulb: to format code use backticks! ``` more info

HerbiScript

@HerbiScript

$(document).ready(function(){
  var url = "https://fcc-weather-api.glitch.me/api/current?";
  var api;
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(pos){
      api = url + "lat=" + pos.coords.latitude + "&" + "lon=" + pos.coords.longitude;
      $.getJSON(api, (function(data){
        $("#loc").html(data.name + ", " + data.sys.country);
        $("#temp").html(data.main.temp + "<button id='C' class='btn btn-default'><b>C</b></button>");
        $("img").attr("src", "http://openweathermap.org/img/w/" + setIcon(data.weather[0].id) + ".png");
        function setIcon(num){
          if (200 <= num && num <= 232){
            return "11d";
          } else if ((300 <= num && num <= 321) || (520 <= num && num <= 531)){
            return "09d";
          } else if (500 <= num && num <= 504){
            return "10d";
          } else if (num == 511 || 600 <= num && num <= 622){
            return "13d";
          } else if (num == 800){
            return "01d";
          } else if (num == 801){
            return "02d";
          } else if (num == 802){
            return "03d";
          } else if (num == 803 || num == 804){
            return "04d";
          } else {
            return "01d";
          }
        }
          }));
     });
   }
  $(".btn").css("color", "orange");
});

Why is my final jQuery statement not effecting the button after it is created in the initial function?

Nate Mallison

@NJM8

@HerbiScript backticks not single quotes, probably the tilde button, top left corner of keyboard

ah got it

HerbiScript

@HerbiScript

My bad, thanks! @NJM8

CamperBot

@camperbot

herbiscript sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:

:cookie: 316 | @njm8 |http://www.freecodecamp.org/njm8

Nate Mallison

@NJM8

getJson is asynchronous

so it sends the request, you get the response from weather api, THEN it creates the button. but that all happens inside the getjson call

The response can take some time.so what the browser sees is
var url

var api

getJson

make button orange

receive json

make button

HerbiScript

@HerbiScript

ahh I see

Nate Mallison

@NJM8

does that make sense?

HerbiScript

@HerbiScript

So youre saying I need to mess with the button inside of the getJSON call?

Eric Weiss

@eweiss17

well you need to 100% make sure it is created before you can mess with it

Nate Mallison

@NJM8

Nope, change it after the call!

http://api.jquery.com/jquery.getjson/

HerbiScript

@HerbiScript

It is made, I have everything working fine. My last user story I need to add is the button that transfers it to Fahrenheit and vic versa

Nate Mallison

@NJM8

checkout .done() about halfway down the page

Eric Weiss

@eweiss17

make an event if the button is clicked?

Nate Mallison

@NJM8

so you'll do

$getJson(
  getMyInfo)
.done(
  gotMyInfo so I can use it);

more or less

that may not work if you copy it. :smile:

HerbiScript

@HerbiScript

hmm ok I think I see what you're getting at. I'll be back if I can't figure it out with all the new info. Thanks for the guidance @NJM8 and @eweiss17 : )

CamperBot

@camperbot

herbiscript sends brownie points to @njm8 and @eweiss17 :sparkles: :thumbsup: :sparkles:

api offline

:cookie: 613 | @eweiss17 |http://www.freecodecamp.org/eweiss17

Eric Weiss

@eweiss17

look here

http://api.jquery.com/jquery.getjson/

that is what he was talking about with .done

Nate Mallison

@NJM8

man I got gipped on some points

lol

Eric Weiss

@eweiss17

how good you are as a dev is proportional to how many points you have

Nate Mallison

@NJM8

:worried: I have a ways to go

Eric Weiss

@eweiss17

there are people in the main fcc channel that have like 2k-3k points

Ravishasthri

@ravi6112

function getLength(str) {
"use strict";

// change code below this line
var leng = {length:str.length};
const {length:len} =leng ;
// change this
// change code above this line

return len; // you must assign length to len in line

}

console.log(getLength('FreeCodeCamp'));

what is the wrong in this code

its not working

function getLength(str) {
"use strict";

// change code below this line
var leng = {length:str.length};
const {length:len} =leng ;
// change this
// change code above this line

return len; // you must assign length to len in line

}

console.log(getLength('FreeCodeCamp'));

ES6: Use Destructuring Assignment to Assign Variables from Objects

Aditya

@ezioda004

@ravi6112 You dont need another variable, the expression on RHS is treated as an object, so you can just do const {length:len} = str; which will evaluate to const len = str.length

Dušan Todorović

@krckyboy

I need to find photos of specific car models. Any suggestions for source of free photos of those kind?

h1tag

@h1tag

@krckyboy try pixabay

grelon

@grelon

Hi all, I'm having trouble positioning divs within a flex container. I want the two divs on top of each other, but they keep appearing inline. Can anyone tell my why, and how I can fix it?

My codepen

what I want:
. . .
. i .
. l .
. . .

what I currently have:
. . . .
. i l .
. . . .

If anything is unclear about my question, please ask to clarify.

Teo

@Teo03

Can someone take a look here: https://github.com/Teo03/game_of_life .
I'am getting this error: Uncaught TypeError: Cannot read property 'grid' of undefined Please help!

Where communities thrive

People

Repo info

Activity