These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Sep 2017
Ismail Hozain
@ismailhozain
Sep 06 2017 01:30
hey guys my pen is going crazy dont know why?
Ismail Hozain
@ismailhozain
Sep 06 2017 01:38
that is among other issues
Tom
@moT01
Sep 06 2017 01:39
the closing tags, at the bottom of the js
i label mine, so i know what one is for what
  }); //end #button.click
}); //end document.ready
Ismail Hozain
@ismailhozain
Sep 06 2017 01:42
ok but it is not changing anything
Tom
@moT01
Sep 06 2017 01:42
make sure they're all there
and correct
that is the problem
Ismail Hozain
@ismailhozain
Sep 06 2017 01:44
i still dont see it
i mean they are all there and im pretty sure correct but i feel like i am looking at the same thing too many times
nvm it worked
though i still don get how to work the outptu
Ismail Hozain
@ismailhozain
Sep 06 2017 02:11
do i use append or what
Tom
@moT01
Sep 06 2017 02:27
@ismailhozain
      for(var i=0; i<info[1].length; i++) {
        $("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
      }
Netrunner21
@Netrunner21
Sep 06 2017 02:44
I'm having an issue getting my internal nav to work
anyone available?
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 06 2017 02:45
hi does anyone in this room have chrome os?
Tom
@moT01
Sep 06 2017 02:45
@Netrunner21
Netrunner21
@Netrunner21
Sep 06 2017 02:45
all of the sudden my nav buttons don't work
Tom
@moT01
Sep 06 2017 02:47
did you change something?
Netrunner21
@Netrunner21
Sep 06 2017 02:47
I've been working on it for three hours
not sure when it stopped working
Tom
@moT01
Sep 06 2017 02:47
what buttons?
Netrunner21
@Netrunner21
Sep 06 2017 02:48
connect and portfolio
Tom
@moT01
Sep 06 2017 02:48
seems to be working for me
hmm, it does seem a little goofy
theyre taking me somewhere, but not to the same spot, seems kinda random
there is an error in the console. but i dont think it has to do with that
maybe it does, not sure
Netrunner21
@Netrunner21
Sep 06 2017 02:49
it works in firefox, and has the issues you just mentioned
strange
not working at all in chrome anymore
Jake
@JakeDVirus
Sep 06 2017 02:51

I am getting a strange quirk.
postion: absolute hides the element even after i added z-index: 99.
the above mentioned statement is on line-138 in the given codepen below.
https://codepen.io/neel111/pen/EvMmgZ

by removing the position: absolute the element show up. Why position: absolute is hidding the element?

Tom
@moT01
Sep 06 2017 02:52
what have you been working on? @Netrunner21
css?
Netrunner21
@Netrunner21
Sep 06 2017 02:52
yeah mostly
some media queries and updating thumbnails for projects
Tom
@moT01
Sep 06 2017 02:54
i see .nav-items in your css, and .nav-item in html
probly not the problem
Netrunner21
@Netrunner21
Sep 06 2017 02:55
yeah they are different
I'll just disable the jQuery smooth scroll for now as it doesn't work right when it works anyway
Tom
@moT01
Sep 06 2017 03:00
@NeelDVirus it doesn't hide the list
it's below
with a white background
nav ul li ul {
    z-index: 99;
    position: absolute;
  background-color:green;
Bryan Jay B. Panesa
@bryanpanesa
Sep 06 2017 03:02
Sup peeps!
Tom
@moT01
Sep 06 2017 03:02
@Netrunner21 yea, im not sure, i would try and think what youve done recently
helps to keep forks so you can go back
github is great for that
get a good working version like you had and fork it when you want to change something
Jake
@JakeDVirus
Sep 06 2017 03:03
@moT01 Oh Fish! Thank you man. i couldn't see that. wasted 2hour in this :D :D
CamperBot
@camperbot
Sep 06 2017 03:03
neeldvirus sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Sep 06 2017 03:04
what wrong cbot
you sick?
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 06 2017 03:04
@moT01 lol
Hi, does anyone have a ChromeOS, or know a way to virtually access a chromeOS?
I need to test my Chrome App
Tom
@moT01
Sep 06 2017 03:05
@NeelDVirus yea, it seems like when you give it that position, the container doesnt expand to fit it anymore
Jake
@JakeDVirus
Sep 06 2017 03:06
@moT01 yeah i wanted it that way. the list will expand while hovering over it. i commented that line below as i was checking out the quirk
Adam Faraj
@adamfaraj
Sep 06 2017 03:10
i need help
haha
i have a huge json file
when a user inputs a value and clicks a button, i need to filter through the json file and grab certain info
idk if i'm making sense
its for a weather app
Tom
@moT01
Sep 06 2017 03:11
how huge
Tom
@moT01
Sep 06 2017 03:12
that's not json
Adam Faraj
@adamfaraj
Sep 06 2017 03:13
@moT01 i know...i have this in a json file
this is just a representation of that file
i'm developing locally
Tom
@moT01
Sep 06 2017 03:14
so what's up
doesnt beat the json file i made
Adam Faraj
@adamfaraj
Sep 06 2017 03:18
@moT01 so when a user types into the input, lets say "New York City" and click the button, it should display weather for NYC
Tom
@moT01
Sep 06 2017 03:19
k
so what's the problem
Adam Faraj
@adamfaraj
Sep 06 2017 03:20
how do i do that. haha
@moT01 this is what i have so far
 var requestForecast = function(response) {
        for (var i=0; i < response.length; i++) {
            if (dom.searchText[0].value == response[i].name) {
                let lat = response[i].coord.lat;
                let lon = response[i].coord.lon
//                break;
            } else { console.log('not eq')}
//            break;
        }
//        console.log(dom.searchText[0].value);
    }
Jake
@JakeDVirus
Sep 06 2017 03:21
@moT01 btw one more thing. i haven't used position: relative to the parent element of the position: absolute and still it is positioning the element relative the the parent element.
I'm being blunt here
Tom
@moT01
Sep 06 2017 03:21
is there a reason your using a file like that? you can get that info from a weather api
Adam Faraj
@adamfaraj
Sep 06 2017 03:21
i'm checking if the value has an equal in the json file, and if it does, make lat and lon that coordinates for that
i think
that's my issue i'm having
Tom
@moT01
Sep 06 2017 03:23
so i dont know how your file is set up, since you showed me a .txt file
but you could maybe something like yourFile["New York"]
that's how you would find it in an object that looks like this...
var myFile = {
 "New York": { 
      Lat: 1323, 
      Lon: 34234,... 
   }
}
Adam Faraj
@adamfaraj
Sep 06 2017 03:25
@moT01 this is just some of the file
[
  {
    "id": 707860,
    "name": "Hurzuf",
    "country": "UA",
    "coord": {
      "lon": 34.283333,
      "lat": 44.549999
    }
  },
  {
    "id": 519188,
    "name": "Novinki",
    "country": "RU",
    "coord": {
      "lon": 37.666668,
      "lat": 55.683334
    }
  },
  {
    "id": 1283378,
    "name": "Gorkhā",
    "country": "NP",
    "coord": {
      "lon": 84.633331,
      "lat": 28
    }
  },
  {
    "id": 1270260,
    "name": "State of Haryāna",
    "country": "IN",
    "coord": {
      "lon": 76,
      "lat": 29
    }
  },
Tom
@moT01
Sep 06 2017 03:25
that's the start of the file?
so it's a giant array
Adam Faraj
@adamfaraj
Sep 06 2017 03:26
yeah, it has 209575 objects
or array items i mean
Tom
@moT01
Sep 06 2017 03:27
you could maybe do a filter there
myArray.filter(item => item.name !== "New York")
not sure if that would work
the caps would matter there
so if someone put in new york, it wouldn't find New York
im wondering why your not using an api to get info
Adam Faraj
@adamfaraj
Sep 06 2017 03:29
Tom
@moT01
Sep 06 2017 03:29
you can make a request to that site, using their api, to get all the info you need
Adam Faraj
@adamfaraj
Sep 06 2017 03:30
@moT01 i'm making a request
Tom
@moT01
Sep 06 2017 03:30
to a file you saved?
Adam Faraj
@adamfaraj
Sep 06 2017 03:30
 if (navigator.geolocation)  { 
        navigator.geolocation.getCurrentPosition(function(position) {
            let lat = position.coords.latitude;
            let lon = position.coords.longitude;
            let api = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=4d8b02dd6a0915262d9f1d723f477f27&units=imperial'; 
            $.ajax({
                method:"GET",
                url: api,
                cache: false,
                datatype: "json"

    //populating HTML with data from ajax call
      }).then(function(data)    {
Tom
@moT01
Sep 06 2017 03:30
so what's with the giant file
Adam Faraj
@adamfaraj
Sep 06 2017 03:31
initially, the app will ask for your location. but if you wanted to check the weather in San Diego while you're in Philadelphia, how would I do that
the browser gets your longitude and latitude from your physical location
i cant physically be in San Diego while i'm in Philly
so the user types in San Diego, US
and pulls the lon and lat from the giant ass file
@moT01 unless there's another way i'm not thinking of?
Tom
@moT01
Sep 06 2017 03:33
yea, there is
Adam Faraj
@adamfaraj
Sep 06 2017 03:34
@moT01 go on...
the q?
Tom
@moT01
Sep 06 2017 03:36
yes
Adam Faraj
@adamfaraj
Sep 06 2017 03:36
@moT01 holy shit, how did i miss that
i'm dumb
Tom
@moT01
Sep 06 2017 03:36
cept you need the country there
Adam Faraj
@adamfaraj
Sep 06 2017 03:36
right
placeholder says city, country
Tom
@moT01
Sep 06 2017 03:36
there's a zip code option as well
need the country for that as well
Adam Faraj
@adamfaraj
Sep 06 2017 03:37
@moT01 i should the read the API document more closely. haha
@moT01 thanks man!
CamperBot
@camperbot
Sep 06 2017 03:37
adamfaraj sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Sep 06 2017 03:38
@NeelDVirus get it figured out?
Jake
@JakeDVirus
Sep 06 2017 03:40
@moT01 Nope. i googled but din't find the specific details so i moved forward assuming it to be unreliable quirk.
did you got anything significant?
Tom
@moT01
Sep 06 2017 03:40
what are you trying to do
Jake
@JakeDVirus
Sep 06 2017 03:42
This message was deleted
@moT01 just clarifying. are you asking me about the recent quirk i mentioned that position: absolute is working even without assigning position: relative to the parent element?
Tom
@moT01
Sep 06 2017 03:43
yes
sounds like you know more about it than i do, ...im not good with those positionings
Jake
@JakeDVirus
Sep 06 2017 03:46
@moT01 i got something.. The parent element of the absolute-positioned element has a float property and in the documentation it is mentioned that position:absolute works on floated elements too. NOw it is making sense indeed and i am getting some relief :D
Neither i am good man. I am just brushing up to refresh my memory
Seong Kim
@ksc23
Sep 06 2017 04:14
sup guys
I'm having a css issue
after I search, the results get cut off on mobile
Seong Kim
@ksc23
Sep 06 2017 04:32
hmm I think it's actually a safari issue not device issue
Rafael Monroy
@rafaelmonroy
Sep 06 2017 04:47
whats up guys, having some trouble getting my json data to tell me whether an twitch use is currently live or offline, i tried passing a url query but I honestly dont know if I am doing it right, the console prints out data but i dont see if I user is live or not
$(document).ready(function(){

  var users = ["ESL_SC2", "freecodecamp","noobs2ninjas"]
  var i=0;
  while (i<users.length){
    $.ajax({
    type: 'GET',
    url: 'https://wind-bow.glitch.me/twitch-api/users/'+users[i]+'?stream_type=live',
    success: function(data) {
      $('#users').append('<li>'+data.display_name+'</li>');
      console.log(data)
     }
    })
    i++
  }  
});
just1witness
@just1witness
Sep 06 2017 04:53
Is display_name on of the keys in the twitch API object? I thought it was user. I might be wrong though, I didn't code that data, I hardcoded it into the html.
One*
I mean I didn't call that data.
Also, $(document).ready() is not recommended anymore. Wrap your code in a function and do $(yourFunctionName) instead.
Adeel Salim
@adeelsalim
Sep 06 2017 05:01
Awesome @ksc23
Rafael Monroy
@rafaelmonroy
Sep 06 2017 05:02
@piteto cool thanks, so no more doccument ready? i saw something about it,i think they called it short code and it was $(function(){<code>}; is that what you’re referring to?
CamperBot
@camperbot
Sep 06 2017 05:02
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Adam Faraj
@adamfaraj
Sep 06 2017 05:03
can someone take a look at my weather app and tell me why my weather icons will not go away when a new icon pops up?
Rafael Monroy
@rafaelmonroy
Sep 06 2017 05:03
@just1witness yeah, i was just messing around with a code to see what info I can, I like to do that to familiarise myself witht that data, also just to practice lol
Jorge
@OrangeKulture
Sep 06 2017 05:03
we need a medic ... cbot is down, i repeat, cbot is down
piteto
@piteto
Sep 06 2017 05:03
@rafaelmonroy They all work (for now), but the only recommended way is $( functionName )
Rafael Monroy
@rafaelmonroy
Sep 06 2017 05:10
@piteto ohh ok, ill make sure to implement this from now on, thanks
CamperBot
@camperbot
Sep 06 2017 05:10
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
piteto
@piteto
Sep 06 2017 05:11
no problem
@adamfaraj That's some complicated caching code you have, I'll see if I can figure out why the icon doesn't change
Adam Faraj
@adamfaraj
Sep 06 2017 05:13
@piteto thanks. everything changes, except the icon
CamperBot
@camperbot
Sep 06 2017 05:13
adamfaraj sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
piteto
@piteto
Sep 06 2017 05:18
@adamfaraj It seems you arne't resetting the icons back to display: none before setting them to display:block
        if (dom.wthr[0].textContent == "Clouds") {
          dom.clouds.css({"display": "block"})
        } else if (dom.wthr[0].textContent == "Rain" || dom.wthr[0].textContent == "Mist") {
          dom.rain.css({"display": "block"})
        } else if (dom.wthr[0].textContent == "Clear") {
          dom.sunny.css({"display": "block"});
        }
Once it's set up as display: block, it never gets set back to display: none
Adam Faraj
@adamfaraj
Sep 06 2017 05:39
@piteto is it not covered by my if else statements?
@piteto how do i reset it
piteto
@piteto
Sep 06 2017 05:44
@adamfaraj Your if/else statements only set it to display: block. They don't set it to display: none.
So, when you search for a new city, all of them have to be set to display: none again
Then your if/else statement can run as usual
Adam Faraj
@adamfaraj
Sep 06 2017 05:51
@piteto before or after my if/else?
@piteto nvm got it
Adam Faraj
@adamfaraj
Sep 06 2017 06:20
why isn't my function executing when i hit "enter"?
dom.searchButton.on('click keypress', requestForecast);
var requestForecast = function(e) {
        if (e.which === 13 || e.type === 'click') {...
krckyboy
@krckyboy
Sep 06 2017 07:52

What kind of CSS tool do I need to use to make the background kinda cut off a bit to make this kind of effect? What is it called, anyway?

https://i.gyazo.com/a2d97c5c6f22d4b53f0e101fbdf4aa00.png

Might be skewed.
krckyboy
@krckyboy
Sep 06 2017 07:54
@hashtagyolo1 Yes, thank you! Want to make some projects for practicing and I always wondered how to make that. Thank you once again.
CamperBot
@camperbot
Sep 06 2017 07:54
krckyboy sends brownie points to @hashtagyolo1 :sparkles: :thumbsup: :sparkles:
api offline
LiciniusRex
@hashtagyolo1
Sep 06 2017 07:55
np
@krckyboy
Ahmed raza
@Raza403
Sep 06 2017 09:30
Hi Need little help, Bug in one line is stopping me complete "Wherefore art thou" challenge. Bug is on line 37 of code which is never true while it should be, I have checked this code through debugger. Here is the code https://repl.it/KjvR/2
dertiuss323
@dertiuss323
Sep 06 2017 09:43
hello guys
i have a problem here
study (title="Ultimate Oscillator Bars [LazyBear]", shorttitle="UOBARS [LazyBear]")
length7 = input(7, minval=1),
length14 = input(14, minval=1),
length28 = input(28, minval=1)
lengthSlope = input(1)
average(bp, tr
, length) => sum(bp, length) / sum(tr, length)
high
= max(high, close[1])
low = min(low, close[1])
bp = close - low

tr = high - low
avg7 = average(bp, tr
, length7)
avg14 = average(bp, tr, length14)
avg28 = average(bp, tr
, length28)
out = 100 (4avg7 + 2*avg14 + avg28)/7
plot(out, color=red, title="UO")
bgcolor(falling(out, lengthSlope) ? red : (rising(out, lengthSlope) ? green : blue), transp=50)
}
Always having error declaration without type
krckyboy
@krckyboy
Sep 06 2017 10:13
Looks like clip-path isn't supported by most browsers. Any better alternatives?
Long Nguyen
@longnt80
Sep 06 2017 12:54
@krckyboy I heard SVG is the alternative with better support
Mukul Agrawal
@mukul09
Sep 06 2017 15:36
could anyone please help me in front end. In the given codepen link I want to make them blink. how can i do that?
https://codepen.io/mukul09/pen/KvYYEG?editors=1010
dinesh
@1532j0004kg
Sep 06 2017 15:37
try with fadein and fadeout...

$(document).ready(function(){

var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

if(navigator.geolocation)
{
getTheLocation();
}

function getTheLocation()
{

img.src getJSON("https://api.apixu.com/v1/current.json?key=0ae3f8564e5642f19da100047172308&q=Paris")
output.appendChild(img);
}
});

what is wrong in this?
Daniel Romero
@Ranacode
Sep 06 2017 15:42
@Ranacode
Hey guys I have one question working with gulp
I want to uglify all the js files inside my directory but I don't want to concat them, just output in separate files in another folder
how can I achieve this without make an individual task for each one?
dinesh
@1532j0004kg
Sep 06 2017 15:46
I dont know about this concept...
I think it will help u...
quickspeedy
@quickspeedy
Sep 06 2017 16:51
I am trying to achieve an overlay color on top of my background image. I corrected the order of the div and still no success. Here is the link to my codepen: https://codepen.io/quickspeedy/pen/LjvrNx
Daniel Feldman
@Feldbot
Sep 06 2017 16:56
Hi, I'm working on the Local Weather API and having a hard time constructing my query string. I have two variables that hold the lat, long, but when I pass them in as data objects in my AJAX call it is coming back undefined. Can anyone help? Here is my codepen: https://codepen.io/Feldbot/pen/MvRZqZ?editors=1011.
Daniel Feldman
@Feldbot
Sep 06 2017 17:07
@quickspeedy I tried just switching the class names on your divs and it seemed to work (lines 20, 21)
quickspeedy
@quickspeedy
Sep 06 2017 17:21
@Feldbot It worked and it is strange since it's not in the correct order. Thank you!
CamperBot
@camperbot
Sep 06 2017 17:21
quickspeedy sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
api offline
Daniel Feldman
@Feldbot
Sep 06 2017 17:22
@quickspeedy Glad that worked :-)
piteto
@piteto
Sep 06 2017 17:25
@Feldbot the ajax call is running before location is determined. Wrap your .ajax call in a function and call that function inside your navigator.geolocation function.
Vignesh Ramesh
@VRamazing
Sep 06 2017 17:25
Hey guys I found a good introductory course and its free https://flatironschool.com/programs/online-bootcamp-prep-course/
Vignesh Ramesh
@VRamazing
Sep 06 2017 17:30
@rafaelmonroy I think to check whether a stream is online or not you have to access this api https://wind-bow.gomix.me/twitch-api/streams/freecodecamp.It returns a stream object which if null means the person is not streaming and hence offline.
piteto
@piteto
Sep 06 2017 17:33
@mukul09 Looks like they are blinking - from looking at your CSS, is this what you're trying to do? https://codepen.io/anon/pen/NvVgXG?editors=0110
amare16
@amare16
Sep 06 2017 17:39
hi guys... in input text box, i want the input text disappear and be replaced by "bubbles" , how can i? i created a bubbles in a div but i need help in input
Daniel Feldman
@Feldbot
Sep 06 2017 17:44
@piteto The call is still coming back undefined... By the way, do you know of a way to display what the fully built URL and query string is so I can check the output?
piteto
@piteto
Sep 06 2017 17:46
@Feldbot Sorry, to be clear, put getWeather(latitude, longitude); inside your showPosition function, after you define latitude and longitude.
Your function that wraps around the ajax also needs to have latitude, longitude in the parentheses so you can pass that data over
To see the fully built url, use your dev tools
F12
Daniel Feldman
@Feldbot
Sep 06 2017 17:58
Thanks piteto, that worked. I have a really hard time still understanding how arguments are passed. I didn't know they could actually be variables that were passed out from the function, I thought they were always placeholder values for things that were being passed around.
Daniel Feldman
@Feldbot
Sep 06 2017 18:11
@piteto I'm still wondering if I needed to create global vars for longitude and latitude. I tried making them local variables in the showPosition function to see if they would get passed to the Ajax call, and it didn't seem to.
piteto
@piteto
Sep 06 2017 18:19
@Feldbot Yeah, those aren't needed with the code you have now. location is async, so the variables won't be global until after your location is available.
intcreate
@intcreate
Sep 06 2017 18:20
does anyone know how I can use the * to remove the margin? It's not working https://codepen.io/anon/pen/OjYjQp
piteto
@piteto
Sep 06 2017 18:24
@intcreate The * is low priority for CSS rules, so it can't override your h1 selector
You would have to use !important
intcreate
@intcreate
Sep 06 2017 18:25
oh
piteto
@piteto
Sep 06 2017 18:26
I guess you could use :root too:
:root * {
  margin: 0;
}
intcreate
@intcreate
Sep 06 2017 18:27
that worked
what is root
piteto
@piteto
Sep 06 2017 18:27
It is the root of the document
intcreate
@intcreate
Sep 06 2017 18:33
ok thanks i used the html * instead
because :root is not supported by some browsers
piteto
@piteto
Sep 06 2017 18:36
Some really old browsers perhaps. http://caniuse.com/#search=%3Aroot
intcreate
@intcreate
Sep 06 2017 18:36
yeah
Daniel Feldman
@Feldbot
Sep 06 2017 18:54
@piteto I have another question maybe you can help me with. I'm still learning how to build query strings, and in the current project it is set up to pass parts of the string as data through Ajax. As I understand it, all the data parts of the call are key/value pairs. How would I append another part of a URL string itself? For example, the instructions say to use https://fcc-weather-api.glitch.me/ as the endpoint, but the route is /api/current?lon=:longitude&lat=:latitude. I wrote my code to have the endpoint URL as https://fcc-weather-api.glitch.me/api/current? so I could then have the data append the query. How would I pass in something like api/current/? to the Ajax call?
piteto
@piteto
Sep 06 2017 19:24
@Feldbot I don't think there's a way to do that with a $.ajax parameter
This may be "controversial"...but if you're worried about the URL getting too long, you can put individual components in an array and join them. I did that for my Wikipedia project

Instead of this:

var url = "https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&formatversion=2&prop=pageimages|extracts&pithumbsize=500&exintro=true&generator=search&gsrsearch=" + encodeURIComponent(searchInput.value) + "&gsrlimit=18";

I did this:

var url = [
  "https://en.wikipedia.org/w/api.php",
  "?action=query",
  "&origin=*",
  "&format=json",
  "&formatversion=2",
  "&prop=pageimages|extracts",
  "&pithumbsize=500",
  "&exintro=true",
  "&generator=search",
  "&gsrsearch=" + encodeURIComponent(searchInput.value),
  "&gsrlimit=18"
].join("");
Daniel Feldman
@Feldbot
Sep 06 2017 19:27
@piteto Thanks for looking, and for the heads up! Moving on to the Wikipedia challenge soon and am dreading that after looking at their API docs. Using .join is a neat way to do that. I was looking at jQuery's $.param() method which does similarly.
CamperBot
@camperbot
Sep 06 2017 19:27
feldbot sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 06 2017 19:40
Yo guys, im kinda really new here, and a friend told me about the chat of freecodecamp, thing is im learning to html/css/bootstrap and trying with a downloaded template, but im having troubles to make a text curvy or italic on a <p> so i've tried using <i> and also <em> on it, and it won't show the selected text on italic. Somebody could guide me on what might be wrong, please please ? THANK YOU A LOT!
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Sep 06 2017 19:43
@diegoignacious What happens if you make <p style="font-style: italic;">My paragraph</p>?
diegoignacious
@diegoignacious
Sep 06 2017 19:43
oh, let's see !
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Sep 06 2017 19:44
@diegoignacious (But that is not the way it should be done then, I just want to know it ^^)
diegoignacious
@diegoignacious
Sep 06 2017 19:45
f*ck, it did it!
but there is another trouble
image.png
that red text
it should next to "unos jovenes"
im Chilean btw, thats why the spanish text
but, it seems it's getting better, because at least it prints on italic
@Otto-AA thanks! , would you know how can i make it on the same line ?
CamperBot
@camperbot
Sep 06 2017 19:48
diegoignacious sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 06 2017 19:50
this is my code
<section id="skill_sec" class="col-lg-10 col-md-11 col-sm-11 center-div skills-wrap sec-pad-top sec-pad-bottom-xs">
<h6>technical skills</h6>
<p class="wow fadeInUp" data-wow-duration=".4s">La busqueda empieza a unos jovenes <p style="font-style: italic;">muy jovenes</p>, cuando por mera egolatría, quise <em>sprintear</em> mis frags en aquél codiciado shooter <strong>cs1.6</strong> descargando y manipulando por primera vez un software de edición ; <b>Adobe Photoshop CS.</b> El tiempo libre y el hambre de crear me llevó a practicar, observar <em>sobre todo observar</em>, a leer y a cobrar por mis primeros "humildes" trabajos <strike>por no decir horri..ejem inexpertos, incoherentes y saturados, con organizadores de fiestas de dudosa reputación que se dedicaban a <em>poncear</em> un domingo a las tres de la tarde</strike>,<em><a href=http://www.flickr.com/diegoignaciophotos>si quiere llorar con mi talento de aquellos años, click aquí</a></em> </p>
sorry, dont know how to send it like a code frame, don't ban me please :(
piteto
@piteto
Sep 06 2017 19:54
@diegoignacious use <span> instead of <p>
diegoignacious
@diegoignacious
Sep 06 2017 19:56
HOLY SH*T ! , im so excited right now
image.png
it did it !
thank you @piteto , im starting to believe on humanity again
CamperBot
@camperbot
Sep 06 2017 19:57
diegoignacious sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 06 2017 19:58
every time i was stuck, i got bored and i used to quit onthis sh*t, but now i have the feeling that i'm not alone. THANKYOU! @piteto
CamperBot
@camperbot
Sep 06 2017 19:58
diegoignacious sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 06 2017 19:58
thankyou also @Otto-AA
quickspeedy
@quickspeedy
Sep 06 2017 20:10
Hello, I just added an overlay div on top of the background image, however there is a problem with the positioning for overlay div. It's not positioned correctly. I tried to use top and left, but no luck. Any help would be appreciated. https://codepen.io/quickspeedy/pen/Mvdmxw
Johnny
@jtan3
Sep 06 2017 20:16
@quickspeedy you want the overlay to cover the image?
quickspeedy
@quickspeedy
Sep 06 2017 20:18
@jtan3 Yes. The overlay div is not positioned correctly on the image.
Johnny
@jtan3
Sep 06 2017 20:19
@quickspeedy move <div class="overlay"> and put it under <div class='bg>
@quickspeedy look up z-index to make your text be in front of the overlay
quickspeedy
@quickspeedy
Sep 06 2017 20:26
@jtan3 I tried but now there is a white space between the nav and the image. The image is brighter which it shouldn't happen.
Johnny
@jtan3
Sep 06 2017 20:27
   <div class="bg">
        <div class="overlay">
        <h1 class="text-center title">Web Developer</h1>
        <h3 class="text-center subtitle">-- Daniel Saavedra --</h3>

        </div>
      </div>
@quickspeedy
quickspeedy
@quickspeedy
Sep 06 2017 20:27
@jtan3 My apology, I got it. I must it move the bg under the overlay. Works now.
@jtan3 Thank you!
CamperBot
@camperbot
Sep 06 2017 20:29
quickspeedy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
api offline
quickspeedy
@quickspeedy
Sep 06 2017 20:37
@jtan3 I tried the z-index for the title and subtitle and it seems to not work. Here is the updated code: https://codepen.io/quickspeedy/pen/Mvdmxw
Johnny
@jtan3
Sep 06 2017 20:40
@quickspeedy did you read z-index?
@quickspeedy you want the text to be in front of the overlay.
quickspeedy
@quickspeedy
Sep 06 2017 20:41
Yes I did, it had to do with the layer and you can assign number to the layer as the larger number will be front correct?
@jtan3
So I assigned title and subtitle as z-index 5 and overlay as z-index 1. Seems to not do anything, but if I changed the overlay and image div. It worked.
Johnny
@jtan3
Sep 06 2017 20:43
I changed the color of the and z-index of the h1 @quickspeedy
@quickspeedy its still kinda of hard to read with the overlay
quickspeedy
@quickspeedy
Sep 06 2017 20:47
I tried to change the color but it has not effect. @jtan3 Am I allowed to upload a picture to show my problem?
Johnny
@jtan3
Sep 06 2017 20:48
@quickspeedy why do you need an overlay?
quickspeedy
@quickspeedy
Sep 06 2017 20:48
I need the overlay to help darken the background image. @jtan3
Or to add gradient to the image for the future.
Johnny
@jtan3
Sep 06 2017 20:49
@quickspeedy the overlay div is connect to your text. So everything you do to the overlay the text is affected too.
@quickspeedy not sure how to fix it.
quickspeedy
@quickspeedy
Sep 06 2017 20:51
@jtan3 I see. I appreciate your help!
Cory Harkins
@cjharkins
Sep 06 2017 20:52
Having trouble with a null value on an http request, anyone have a minute to look over what I'm doing wrong?
Johnny
@jtan3
Sep 06 2017 20:54
@cjharkins you can just ask your question. I'm sure someone will try to help.
quickspeedy
@quickspeedy
Sep 06 2017 20:55
@jtan3 Will do thank you!
CamperBot
@camperbot
Sep 06 2017 20:55
quickspeedy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
api offline
My $.get(stream) won't populate users on fail
The object returns null
I've tested inside the callback for null, to display one message or the other
piteto
@piteto
Sep 06 2017 21:04
@cjharkins the api call doesn't fail when the user isn't streaming
if the api call failed, you could run code inside .fail()
Cory Harkins
@cjharkins
Sep 06 2017 21:08
When I test for null inside the callback to run the alternate message, the users don't populate
piteto
@piteto
Sep 06 2017 21:09
@cjharkins change your streams url to an invalid url and you'll see that .fail() will fire. you need to test for online/offline inside the success function
For example: const stream = "https://wind-bow.glitch.me/twitch-api/streamsssssssss/" + arr;
Cory Harkins
@cjharkins
Sep 06 2017 21:17

I'm still not sure what to test for within callback, I do

if (streamData === null) {
  do the alternate;
}

and I still get nothing

piteto
@piteto
Sep 06 2017 21:19
Look at streamData.stream
Cory Harkins
@cjharkins
Sep 06 2017 21:19
test against that?
I updated equality to streamData.stream === null and still got nothin
piteto
@piteto
Sep 06 2017 21:24
@cjharkins Hit F12 and look at your dev tools for errors to debug
Uncaught TypeError: Cannot read property 'game' of null
You're trying to use streamData.stream before checking whether or not it's null
Cory Harkins
@cjharkins
Sep 06 2017 21:29
You rock!
Thank you!
@piteto thank you!
CamperBot
@camperbot
Sep 06 2017 21:29
cjharkins sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
piteto
@piteto
Sep 06 2017 21:30
:)
Keegan
@Keggatron
Sep 06 2017 21:58

Hey everyone,
I'm having an issue with one of the API problems. Anyway I'm unable to get the the variables from my code to work in the rest of the code.

var navigator = '';

var latitude, longitude, url
function getVars(){
    navigator.geolocation.getCurrentPosition(function(position){
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude

    });
    console.log(url)
}

function getJson(json){

        $.getJSON(url, function(json) {
        $("#city").html(json.name + ", "+json.sys.country );
        });

}


$(document).ready(function(){
    getVars();
    console.log(latitude, longitude)
    getJson();
})

So when I run the page I get three undefined's for the console.logs that I ran. But then after everything has run, if I input latitude or longitude on the Chrome console, it will actually return those values. Can anyone think of the issue?

Thanks,

Christopher McCormack
@cmccormack
Sep 06 2017 22:02
@Keggatron yup both of those calls are asynchronous, so by the time your getVars function completes the other code has already run. You can try nesting your getJSON within your getVars function, or use promises or callbacks
you can just move your getJson function call to the inside of your getVars function, passing the url as the argument and modify the parameter in getJson to url or whatever
Keegan
@Keggatron
Sep 06 2017 22:07
So something like this:
var latitude, longitude, url
function getVars(){
    navigator.geolocation.getCurrentPosition(function(position){
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude

    });
    getJson(url);
}
@cmccormack sorry
Christopher McCormack
@cmccormack
Sep 06 2017 22:09
@Keggatron close , the function call has to be within your getCurrentPosition callback
That way it will only call getJson once the ajax call for the location has returned, instead of immediatly after you start the call
Keegan
@Keggatron
Sep 06 2017 22:10
@cmccormack seriously? That was it eh. Thanks a bunch bud. Took me a while to try that , such a simple thing I probably should have tried.
CamperBot
@camperbot
Sep 06 2017 22:10
keggatron sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
Christopher McCormack
@cmccormack
Sep 06 2017 22:11
@Keggatron Just about everyone has issues with asynchronous calls in the beginning
Keegan
@Keggatron
Sep 06 2017 22:11
So why does even if I call the getVars function first, why would the the getJson function complete before it?
Christopher McCormack
@cmccormack
Sep 06 2017 22:13
if you call them both asynchronously, your getJson function will fail as the url will be undefined
Which one completes first is entirely up to how fast the ajax call can be completed, but because you can't know that ahead of time you have to set up your code to react only to the response
Keegan
@Keggatron
Sep 06 2017 22:18
Great thanks again!
Christopher McCormack
@cmccormack
Sep 06 2017 22:18
np
Ivan Ngundela
@ingundela
Sep 06 2017 22:39
hello everyone....I need some advice, what's the recommended container max-width in a website? I usually use max-width of 1200px... is this correct?
intcreate
@intcreate
Sep 06 2017 22:42
How can i make the earth spin/rotate? https://jsfiddle.net/La3qbr0v/
piteto
@piteto
Sep 06 2017 22:51
@intcreate it's a 2d picture, probably best to use a video or animated image. If you want a 2D spin, though: https://jsfiddle.net/La3qbr0v/2/
@ingundela The recommendation depends entirely on your website content and customer requirements