These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Apr 2017
Mohamed Derhalli
@derhallim
Apr 15 2017 00:00
why [] ?
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:00
Idk.. some example from dark sky API
I mean I thought I had to.
d21/latitude,longitude',
Like that?
or position.coords.lat and longitude..
var variable = value;
right?
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:07
:zzz:
Gulsvi
@gulsvi
Apr 15 2017 00:21
:bulb:
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:25
So why wont "Temperature" change..
ooh...
Ok I added TempC class to that element "Temperature"
Still..
Pagnito
@Pagnito
Apr 15 2017 00:31
@SkyCoder01 hey do you know why prepending an element might cause my search foreach loop not work cuz it cant find the elements that are inside the selector to which i prepended to
Gulsvi
@gulsvi
Apr 15 2017 00:32
I'd have to see the code @Pagnito
Pagnito
@Pagnito
Apr 15 2017 00:33
http://codepen.io/Pagnito/pen/vxbVgj?editors=0010 lines 516 is my search and 435 is add user prepend
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:33
You wrote 500+ lines
Nice..
Pagnito
@Pagnito
Apr 15 2017 00:34
@MathematicsCoding i see it as a flaw to be honest lol, im sure if i was better id write much less lines >.<
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:35
Yeah.
you can always tidy these codes to make them looks better
Pagnito
@Pagnito
Apr 15 2017 00:35
@MathematicsCoding yea i put comments in places and spaced out things to make it as comprehendable as possible
What do you think about designs? but Im working on temperature i cant figure out why they wont update..
@SkyCoder01 oh yeah I havent fix this font-style yet..
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:43
I got it... font-family not font-style
Damn they are so much better than before
Gulsvi
@gulsvi
Apr 15 2017 00:46
@Pagnito To help debug, add a console.log to your .each function to see what you're looping through:
      $('.streams').children().each(function(index, item){
        console.log(item);
Rashid A. Shamsi
@RashidShamsi
Apr 15 2017 00:47
hey, im new here
i need some help in first project i.e personal portfolio
i am trying to use bootstrap class navbar but it is not properly visible in codepen
Gulsvi
@gulsvi
Apr 15 2017 00:49
@RashidShamsi There are two versions of bootstrap. We learn Bootstrap 3 in Free Code Camp, but Codepen add Bootstrap 4 by default.
Rashid A. Shamsi
@RashidShamsi
Apr 15 2017 00:49
so may i add bootstrap cdn mannualy?
Gulsvi
@gulsvi
Apr 15 2017 00:49
Yes @RashidShamsi https://www.bootstrapcdn.com/
Mohamed Derhalli
@derhallim
Apr 15 2017 00:50
@MathematicsCoding hey
Rashid A. Shamsi
@RashidShamsi
Apr 15 2017 00:50
okay thanks
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:50
@derhallim yo
I will be back soon brb
Mohamed Derhalli
@derhallim
Apr 15 2017 00:50
okay!
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:59
Back
Pagnito
@Pagnito
Apr 15 2017 00:59
@SkyCoder01 yea i did that with https://quake.bethesda.net/en
oops hold on lol
Saboor Malik
@MathematicsCoding
Apr 15 2017 00:59
can a single element have two classes?
Pagnito
@Pagnito
Apr 15 2017 00:59
console.log($('.streams').children());
@SkyCoder01 it works tho, until i prepend a user
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:00
like this
<h1 class="" class=""></h1>
Never mind it works
No need to answer..
I had to because font-family class made the font-awesome not able to show up
It worked but will it cause some problems?
Brb again
Johnny
@jtan3
Apr 15 2017 01:02
@MathematicsCoding
class="btn circle"
@MathematicsCoding every word is a class
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:06
I dont mean that
Jorge
@OrangeKulture
Apr 15 2017 01:06
hey guys
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:07
Is it called class attribute?
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:12
Can I change variable font?
Is it possible?
@OrangeKulture Yo
Jorge
@OrangeKulture
Apr 15 2017 01:15
whats happening .. all good?
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:15
Yeah..
I forgot about font style until today and I fixed it
The problem was font-style and i realized I had to change it to font-family lol
Is it possible to change font awesome symbol size?
By using font-size
Johnny
@jtan3
Apr 15 2017 01:20
@MathematicsCoding yes
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:20
Thanks even I tested.. @jtan3
CamperBot
@camperbot
Apr 15 2017 01:20
mathematicscoding sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @jtan3 |http://www.freecodecamp.com/jtan3
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:24
  <a href="www.freecodecamp.com/mathematicscoding" class ="fa fa-free-code-camp g fonts"></a>
What is wrong with that code I posted above?
Well its "codepen's fault"
Johnny
@jtan3
Apr 15 2017 01:27
@MathematicsCoding can you explain your problem?
Moisés Man
@moigithub
Apr 15 2017 01:27
add https://
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:28
@moigithub I did then it went blank..
Moisés Man
@moigithub
Apr 15 2017 01:28
and target="_blank"
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:28
Oh I forgot about that..
.
Well thanks
Moisés Man
@moigithub
Apr 15 2017 01:30
codepen dont allow u to link to external sites.. thats why target=_blank
and https:// should be added else it will taken as relative address .. ie codepen.io/adsfsadf/www.freecodecamp
Saboor Malik
@MathematicsCoding
Apr 15 2017 01:50
wtf?
I was creating a facebook account after that then account is already disabled as their pre-cautious...
What do you think about these buttons bottom? should I make them circle? or just leave it
And I have one more question
When I try codepen on my phone and why wont it able to get my location?
Saboor Malik
@MathematicsCoding
Apr 15 2017 02:21
cbot do you know?
CamperBot
@camperbot
Apr 15 2017 02:21
you called?
Saboor Malik
@MathematicsCoding
Apr 15 2017 02:21
cbot yes
CamperBot
@camperbot
Apr 15 2017 02:21
you called?
Saboor Malik
@MathematicsCoding
Apr 15 2017 02:22
Ok this bot is useless
Patrick Koidal
@Koitis
Apr 15 2017 02:31
So, I feel like a dummy. I've hit a bit of a brick wall on the personal portfolio project.
I've looked at other's submissions, and it seems like I either A) skipped a large chunk of bootstrap/didn't commit it to memory very well or B) people did some outside research extensively before doing theirs that I am missing.
iso
@iso1048
Apr 15 2017 02:54
could someone help me out with the random quote machine project?
Mohamed Derhalli
@derhallim
Apr 15 2017 02:55
@MathematicsCoding testing the camper bot now?
:'(
Saboor Malik
@MathematicsCoding
Apr 15 2017 02:56
lol
Mohamed Derhalli
@derhallim
Apr 15 2017 02:56
what do u need man?
Sorin Ruse
@sorinr
Apr 15 2017 02:56
. @Koitis `or both A+B :) you don't need to use bootstrap for ur portfolio. i would recommend to make a rough layout of what u wanna present and after start styling in pure css your layout. look also for inspiration over the web
Saboor Malik
@MathematicsCoding
Apr 15 2017 02:56
@derhallim I havent still fix this... temperature thing
Mohamed Derhalli
@derhallim
Apr 15 2017 02:57
what do u need to fix?
nice design bt
btw
Saboor Malik
@MathematicsCoding
Apr 15 2017 02:57
I checked browser console and it says request have been blocked
thanks
Check the url in function
For temperature..
Do I need to find another url for https request...
Sorin Ruse
@sorinr
Apr 15 2017 03:02
@MathematicsCoding my advice is to choose another font but spirax(coursive font). it doesn't look great on the bg u have. i would choose a sans serif font for that bg that is nice
Mohamed Derhalli
@derhallim
Apr 15 2017 03:03
try this
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:03
https://github.com/Rob--W/cors-anywhere/
That one?
then add latitude and longitude at the end?
jeez 16 errors
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:10
@derhallim why are you inactive again :(
Mohamed Derhalli
@derhallim
Apr 15 2017 03:11
am here
sorry
mention me in messages so i notice :joy:
yea that one
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:12
Hm..
Mohamed Derhalli
@derhallim
Apr 15 2017 03:12
u add the link, then append the url
i used it to get data from openweatherapi
which is the 1 recommended by FCC
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:12
https://github.com/Rob--W/cors-anywhere/position.coords.latitude, position.coords.longitude
Like that?
Or the var that have these value in it?
Mohamed Derhalli
@derhallim
Apr 15 2017 03:14
yea
nooooooooooo
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:14
...
Mohamed Derhalli
@derhallim
Apr 15 2017 03:14
like that
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:14
How do I do it then...
it's a wrapper
to ur web service call
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:15
oh
Then add latitude and longitude?
@derhallim
...
Mohamed Derhalli
@derhallim
Apr 15 2017 03:18
yea man
same as ur url
but prefix it with that url
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:18
Nothing works
How?
Mohamed Derhalli
@derhallim
Apr 15 2017 03:18
:joy: not sure why
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:18
lo
l
39 errors
@derhallim !!!!
Shiv M
@shivsagar1
Apr 15 2017 03:21
Does anyone know how create or rename the ".env" file after copying the .env.sample. I am not able to rename, i am getting an error as "i need to type a file name "
in windows
Mohamed Derhalli
@derhallim
Apr 15 2017 03:23
yea man
am looking at the code
give me a moment
yea
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:24
...
Mohamed Derhalli
@derhallim
Apr 15 2017 03:26
what's this
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:26
what...
It what you told me...
Mohamed Derhalli
@derhallim
Apr 15 2017 03:26
nope
Mohamed Derhalli
@derhallim
Apr 15 2017 03:27
this is the url u had in ur page
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:27
Yeah
Mohamed Derhalli
@derhallim
Apr 15 2017 03:27
i gave u herokuapp
but ur using this
go to this page...
........
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:27
Not found..
Mohamed Derhalli
@derhallim
Apr 15 2017 03:27
exactly
haha
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:27
lol
Mohamed Derhalli
@derhallim
Apr 15 2017 03:27
man use the openweatherapi
as recommended by FCC
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:27
remove api.darksky.net that it?
Mohamed Derhalli
@derhallim
Apr 15 2017 03:28
no
u need to see how the new api works
not just changing the url
like that
replace the 35 and 139 with ur lat and lon
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:29
Yeah
But I wanna test it with 35 and 139 first
But nothing happen
still
Johnny
@jtan3
Apr 15 2017 03:31
api.openweathermap.org/data/2.5/weather?lat=35&lon=139' + '°' @MathematicsCoding add http:// and delete the "+" degree sign
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:31
okay
 $(".geo").html(lat + latitude + '<br>' + lon + longitude);

      $('#TempC').on("click", function() {
        $.getJSON('https://api.openweathermap.org/data/2.5/weather?lat=latitude&lon=longitude', function(json) {
          $('.TempC').html(JSON.stringify(json));
        });
Wait http:?
Mohamed Derhalli
@derhallim
Apr 15 2017 03:33
yea, u need to use heroku
u need to get app id
as well
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:33
...
app id?
Brb :(
Johnny
@jtan3
Apr 15 2017 03:34
did you read the openweatherapi docs?
Pagnito
@Pagnito
Apr 15 2017 03:43
how come it says my pens are public but when i try to show em to someone on their computer or phone and i search for it, its no where to be found
nvm i was typing sometthing wrong
Saboor Malik
@MathematicsCoding
Apr 15 2017 03:57
@jtan3 no but I will..
I did everything but "Temperature API" so Im going to take a break
Cya
Feel free to leave a message :p
Ashan Mohammed
@AshanMohammed
Apr 15 2017 04:02
Hello,
Hello! My bootstrap links doesn't work. Can anybody help?
<ul class="secondnav">
       <li><a href="#">Home &nbsp; | &nbsp; </a></li>
       <li><a href="#">Location &nbsp; | &nbsp;</a></li>
       <li><a href="#">Categories | &nbsp;</a></li>
       <li><a href="#">Contact Us | &nbsp;</a></li>
       <li><a href="#">add</a></li>
     </ul>
.secondnav{
    float: right;
    margin-right: 20px;
}

.secondnav li{
  list-style: none;
  display: inline;
}

.secondnav a{
 color: white; 
}

.secondnav a:hover{
    text-decoration: none;
    color: rgb(200,200,200);
}
Johnny
@jtan3
Apr 15 2017 04:10
@AshanMohammed are you working on codepen?
@AshanMohammed when you say not working.. did you want your links to jump to different parts of your page?
iso
@iso1048
Apr 15 2017 04:21
Could I get some help with the random quote machine challenge?
Johnny
@jtan3
Apr 15 2017 04:21
@gothamknight sure i'll try
iso
@iso1048
Apr 15 2017 04:24
@jtan3 cool. When i click the twitter button, the prefilled text is not from the current quote, but the next quote. how can i fix this. http://codepen.io/gothamknight/pen/KmKPov
Johnny
@jtan3
Apr 15 2017 04:30
@gothamknight i think the twitter button needs its own click function
iso
@iso1048
Apr 15 2017 04:31
@jtan3 then how could I make it that the same random number is generated, seeing as the random number is generated inside the click function i currently have?
Saboor Malik
@MathematicsCoding
Apr 15 2017 04:33
$(document).ready(function() {
  var lat = "Latitude: ";
  var lon = "Longitude: ";

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;

      $(".geo").html(lat + latitude + '<br>' + lon + longitude);

      $('#TempC').on("click", function() {
        $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=position.coords.latitude&lon=position.coords.longitude', function(json) {
          $('.TempC').html(JSON.stringify(json));
        });
      });
    });
  }
});
Johnny
@jtan3
Apr 15 2017 04:34
@gothamknight try putting the random number outside?
Saboor Malik
@MathematicsCoding
Apr 15 2017 04:34
well?
iso
@iso1048
Apr 15 2017 04:35
@jtan3 that was an error i had earlier. doing that meant that when the button is clicked the first time, it changes quote. but when clicked again, the quote does not change since the random number would only be generated once.
Linda Thompson
@lindakatcodes
Apr 15 2017 04:37
I've got a question. I'm working on the survey form, and I want to set it so that after someone submits the form, a modal pops up. I'm using the HTML5 tag <dialog> for the modal. If I have my submit button set as type="button", it works just like I want....except that none of the HTML5 validation stuff works, as it's trigged by submit. If I set the button type to submit, I get the validation...but my modal never pops up. I'm sure it has something to do with submit resetting the form....but I've tried adding a way for it to wait until the document is loaded and triggering a hidden button to click that triggers the modal and that doesn't work either. Can anyone take a peek at my pen and see if you can see what I'm missing? Any ideas? I'm getting nowhere.
Johnny
@jtan3
Apr 15 2017 04:45
@gothamknight can you write a function that just updates the numbers? and use that function for your click function?
Pagnito
@Pagnito
Apr 15 2017 04:47
does anyone know if there is a fundamental diffirence between append and prepend besides the where the push the element to. Because if i use append, my other search function recognizes the "id" in the pushed parent div and if i use prepend, it no longer does and my search function as if has nothin to fire off on, even tho console.log children shows they are still in the DOM
Johnny
@jtan3
Apr 15 2017 04:47
@gothamknight so 2 functions. One for updating the random number and one for the clicks
Saboor Malik
@MathematicsCoding
Apr 15 2017 04:49
@jtan3 Can you take a look at my JS code?
iso
@iso1048
Apr 15 2017 04:53
@jtan3 thanks for the help dude but I solved the problem - stupid mistake by me where I had given the twitter button the class "btn" also, which was the selector for the click event.
CamperBot
@camperbot
Apr 15 2017 04:53
gothamknight sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Apr 15 2017 05:03
@MathematicsCoding have you tried ip-api.com before?
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:04
no never heard of it
Johnny
@jtan3
Apr 15 2017 05:04
@MathematicsCoding naivgator.geolcations need https:// but openweather wants http:// for the free version
@MathematicsCoding ip-api.com gets your lat/lon from your ip address
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:08
oh
So I add ip-api.com to it?
Johnny
@jtan3
Apr 15 2017 05:09
@MathematicsCoding try getting lat/lon from that instead of navigator.geolocation
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:09
Okay
I dont understand... I have to delete navigator.geolocation?
Why do I need ip-api...
Oh sorry I forgot about what you said ...
https and http thingy
Johnny
@jtan3
Apr 15 2017 05:13
do you know how to use dev tools? @MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:14
But I wanna keep navigator.geolocation
I know how to check console
browser console
Johnny
@jtan3
Apr 15 2017 05:14
check what error it says in console
then google that error
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:15
google mixed content?
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:18
I see...
Do I have to change my link to http too?
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:29
Im going to use dark sky API instead
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:36
I dont know how to find new key...'
Johnny
@jtan3
Apr 15 2017 05:38
@MathematicsCoding did you have a key before?
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:39
no
Well I just got one when I signed up for one
But why must they be secret?
Johnny
@jtan3
Apr 15 2017 05:40
google api keys. I'm not sure .
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:40
Well can I add that key to codepen then?
is it ok?
Johnny
@jtan3
Apr 15 2017 05:41
you did it with openweathermap
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:41
eh..
How do I add latitude and longitude?
just /latitude, longitude?
Johnny
@jtan3
Apr 15 2017 05:44
Read the docs. I never used dark sky.
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:44
@jtan3 same as before
Johnny
@jtan3
Apr 15 2017 05:45
@MathematicsCoding follow the example they give in the docs
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:45
yeah I did same thing
https://api.darksky.net/forecast/[key]/[latitude],[longitude]
Johnny
@jtan3
Apr 15 2017 05:46
the one below it
Saboor Malik
@MathematicsCoding
Apr 15 2017 05:47
o
Okay done
Well its saying not found
Johnny
@jtan3
Apr 15 2017 05:56
what do you mean not found?
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:00
Never mind that
Johnny
@jtan3
Apr 15 2017 06:00
@MathematicsCoding i just looked at darksky docs. It includes latitude/longitude in their own api
@MathematicsCoding you don't even need to use navi.geolocation
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:00
oh...
$(document).ready(function() {
  var lat = "Latitude: ";
  var lon = "Longitude: ";

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      var temperature;
      $(".geo").html(lat + latitude + '<br>' + lon + longitude);
      var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;  
      $('.TempC').on("click", function() {  
        $.getJSON(url, function(weatherData) {
          temperature = weatherData.list['0'].main.temp;
        });
      });
    });
  }
});
What to do..
Johnny
@jtan3
Apr 15 2017 06:01
@MathematicsCoding read what i just said
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:02
navi.geolocation not needed
Johnny
@jtan3
Apr 15 2017 06:02
did you apply it?
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:02
So I just remove it?
Johnny
@jtan3
Apr 15 2017 06:02
just try to get data out of your darksky api
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:03
$(document).ready(function() {
  var lat = "Latitude: ";
  var lon = "Longitude: ";

      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      var temperature;
      $(".geo").html(lat + latitude + '<br>' + lon + longitude);
      var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;  
      $('.TempC').on("click", function() {  
        $.getJSON(url, function(weatherData) {
          temperature = weatherData.list['0'].main.temp;
        });
      });
    });
Oh sorry... I went ahead
Pagnito
@Pagnito
Apr 15 2017 06:09
is there a way to go thru .each and if either elements are the same or have same ids remove athe copies
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:10
Im too tired to think
Pagnito
@Pagnito
Apr 15 2017 06:11
me too
but i dont wanna wake up to the same problem tomorrow lol
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:11
Same here lol
Pagnito
@Pagnito
Apr 15 2017 06:11
lol
Kuriakin Zeng
@kuriakinzeng
Apr 15 2017 06:14
React Redux question for building a Roguelike game challenge. Suppose my state has Player (which contains coordinates of the player on the Map), and Map (which contains all coordinates). And I keep them separated in their own reducers. The Reducer for Player needs access to Map state to determine the value of its coordinate. What's the best way to solve this issue?
Pagnito
@Pagnito
Apr 15 2017 06:16
@kuriakinzeng im not sure if this is right, but i tihnk youre in the wrong chatroom, i think each section has its own chatroom, i think you need to go to data visualisation help chat room
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:17
Yea...
That have nothing to do with FrontEnd
Kuriakin Zeng
@kuriakinzeng
Apr 15 2017 06:17
I see thanks
Pagnito
@Pagnito
Apr 15 2017 06:17
np
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:18
@Pagnito can you check my JS code in my weather app?
Pagnito
@Pagnito
Apr 15 2017 06:20
@MathematicsCoding k whats wrong with it?
Pagnito
@Pagnito
Apr 15 2017 06:21
still not getting the api back?
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:21
yeah...
At least I know how to find key, how to add latitude and longitude to its url
Pagnito
@Pagnito
Apr 15 2017 06:22
k, i havent done alot of debuggin for people, but ima give it my best shot
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:22
okay
Pagnito
@Pagnito
Apr 15 2017 06:30
got some good news
lol
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:31
lol
let hear it :)
Pagnito
@Pagnito
Apr 15 2017 06:31
k so cross origin bullshit, i cant remember, what it is and i gotta look into it lol, but i know when i was dealin with it i had to use dataType jsonp
$('.TempC').on("click", function() {
$.ajax({
url: url,
dataType: "jsonp",
success: function(weatherData) {
console.log(weatherData)
temperature = weatherData.list['0'].main.temp;
}
});
});
u gotta go from json to ajax and call for jsonp
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:32
hm..
oh i dunno why but it didnt save what i changed
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:33
lol
Just copy entire JS code..
Pagnito
@Pagnito
Apr 15 2017 06:33
but yea if u change that it will give u the response
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:33
Okay
Under $('.TempC').on("click", function()?
url: url what did they do?
Pagnito
@Pagnito
Apr 15 2017 06:35
so url is what url u r gonna use, like the first arguement in json
its just that u put ur url in url var so it looks confusing
if u put ur url in lets say putarel it would be url: putarel
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:36
huh..
$(document).ready(function() {
      var lat = "Latitude: ";
      var lon = "Longitude: ";
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
          var temperature;
          $(".geo").html(lat + latitude + '<br>' + lon + longitude);
          var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;
          $('.TempC').on("click", function() {
              $.ajax({
                  url: url,
                  dataType: "jsonp",
                  success: function(weatherData) {
                    console.log(weatherData)
                    $.getJSON(url, function(weatherData) {
                      temperature = weatherData.list['0'].main.temp;
                    });
                  });
              });
          }
        });
Missing brackets or something?
Pagnito
@Pagnito
Apr 15 2017 06:40
yea ur missing the bracket for success
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:40
} or });?
Pagnito
@Pagnito
Apr 15 2017 06:40
} after temp;
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:40
okay
still lol
Pagnito
@Pagnito
Apr 15 2017 06:41
and the response is an object, i think u need to use . to access properties, im not sure if [] can b used
temperature = weatherData.currently.apparentTemperature;
console.log(temperature)
$('.TempC').html(temperature)
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:41
Well someone did use them in an example project
Pagnito
@Pagnito
Apr 15 2017 06:42
and as far as i know its good practice to start ur variable names with a lowercase
so instead of TempC
use tempC
feels good to give back lol, this dude SkyCoder has done so much debugging for me, i cant never thank him enough
yea and those example projects often have alot of bugs in them
sometimes im surprised they use them as examples
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:44
I think I messed up with brackets...
Pagnito
@Pagnito
Apr 15 2017 06:44
lemme see
link me again
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:44
  }
                });
            });
        });
    });
    }
});
Pagnito
@Pagnito
Apr 15 2017 06:46
yea hold on, i think this one might be a bit more difficult then the api call lol
i hate messing up brackets
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:46
Me too..
No worries I figured it out @Pagnito
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:51
Its easy to fix it... Like red "!" type }); first then enter if still red then } first work? do it next etc...
You know?
Pagnito
@Pagnito
Apr 15 2017 06:52
not sure what u saying
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:52
..
} --> Error! change it to }); Working! next..
}); --> working! next...
Pagnito
@Pagnito
Apr 15 2017 06:53
like red?
are u getting ur api response now?
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:53
Nope..
$(document).ready(function() {
  var lat = "Latitude: ";
  var lon = "Longitude: ";
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      var temperature;
      $(".geo").html(lat + latitude + '<br>' + lon + longitude);
      var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;
      temperature = weatherData.currently.apparentTemperature;
      console.log(temperature)
      $('.tempC').on("click", function() {
        $.ajax({
          url: url,
          dataType: "jsonp",
          success: function(weatherData) {
            console.log(weatherData)
            $.getJSON(url, function(weatherData) {
              temperature = weatherData.list['0'].main.temp;
            });
          }
        });
      });
    });
  }
});
Pagnito
@Pagnito
Apr 15 2017 06:54
u gotta remose ur json call
ur alrdy making the ajax call
ur latitude and longitude arent working
it happened to me last time, when it was really late at night, my geolocation wouldnt give me my lat and long, i woke up the next day and it all worked

$(document).ready(function() {
var lat = "Latitude: ";
var lon = "Longitude: ";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {

    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
  console.log('hi');
    var temperature;
    $(".geo").html(lat + latitude + '<br>' + lon + longitude);
    var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;

    $('.TempC').on("click", function() {
        $.ajax({
            url: url,
            dataType: "jsonp",
            success: function(weatherData) {
              console.log(weatherData)
              temperature = weatherData.currently.apparentTemperature;

                  temperature = weatherData.list['0'].main.temp;
                }

            });
        });
    });

}
});

copy what i just put, i dunno why it doesnt all go into the black box
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:56
What did you change?
Pagnito
@Pagnito
Apr 15 2017 06:57
$(document).ready(function() {
var lat = "Latitude: ";
var lon = "Longitude: ";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log('hi');
var temperature;
$(".geo").html(lat + latitude + '<br>' + lon + longitude);
var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;
$('.TempC').on("click", function() {
$.ajax({
url: url,
dataType: "jsonp",
success: function(weatherData) {
console.log(weatherData)
temperature = weatherData.currently.apparentTemperature;
}
});
});
});
}
});
i removed the json call u made within the ajax call
json is the same ajax
json is a short version of ajax
just with less capability
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:57
huh...
I copied what you did and no respone..
Pagnito
@Pagnito
Apr 15 2017 06:58
yea i dont have one either
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:58
It looks like exactly code..
Pagnito
@Pagnito
Apr 15 2017 06:58
its because ur geolocation isnt working
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:58
How did you do it before?
Pagnito
@Pagnito
Apr 15 2017 06:58
its not working on my end eitther
same way
this happened to me last time and i was stressing for hours
cuz everything was right
Saboor Malik
@MathematicsCoding
Apr 15 2017 06:58
how is geolocation not working?
Pagnito
@Pagnito
Apr 15 2017 06:59
try to console.log ur long ot lat
or
at certain hours of the night, geolocation doesnt work for some reaosn
just save the code i gave u and open it tomorrow and it should work
if not just holler at me tomorrow
CamperBot
@camperbot
Apr 15 2017 07:01
holler back!
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:01
okay thanks @Pagnito
CamperBot
@camperbot
Apr 15 2017 07:01
mathematicscoding sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Apr 15 2017 07:01
np
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:01
So time affect it?
:(
Pagnito
@Pagnito
Apr 15 2017 07:01
yea for some reason
this happened to me last time, and i was stressing out for hours lol
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:02
lol
ok so imagine if it really worked
Pagnito
@Pagnito
Apr 15 2017 07:02
k sup
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:02
WIll I get celsius or fahrenheit
Pagnito
@Pagnito
Apr 15 2017 07:02
you should get both
Bas
@Aliaselias
Apr 15 2017 07:02
Ajax and json are in no way the same
Pagnito
@Pagnito
Apr 15 2017 07:02
as far as i know json is a short version of ajax
please tell me more tho
Bas
@Aliaselias
Apr 15 2017 07:03
jSON is a form of data
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:03
@Pagnito but fahrenheit doesnt have tempC class?
Bas
@Aliaselias
Apr 15 2017 07:03
You submit, js just has a special function for it
Pagnito
@Pagnito
Apr 15 2017 07:04
im not talking about the data
i was talking about $.json and $.ajax
Bas
@Aliaselias
Apr 15 2017 07:04
Yes
Pagnito
@Pagnito
Apr 15 2017 07:04
i mean getsjson
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:04
lol
Pagnito
@Pagnito
Apr 15 2017 07:05
@MathematicsCoding sorry, what do u mean doesnt have tempC class
Bas
@Aliaselias
Apr 15 2017 07:05
It's a ajax reqeust for Receiving/ sending JSON objects
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:05
you know that element with the word "Fahrenheit"
Pagnito
@Pagnito
Apr 15 2017 07:05
@Aliaselias yea so how is it not the same
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:06
you should get both
sorry I thought you meant buttons
Bas
@Aliaselias
Apr 15 2017 07:06
Because javascript might have this function
But you shouldnt be confused on what JsOn is
Pagnito
@Pagnito
Apr 15 2017 07:07
@Aliaselias still not sure what ur sayn, i know json is a format, i was talking about getjson and ajax, did i confuse u because i didnt add 'get'
Bas
@Aliaselias
Apr 15 2017 07:07
Json is in no way an ajax request, it's a date format
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:07
xD
Bas
@Aliaselias
Apr 15 2017 07:07
You might understand
Pagnito
@Pagnito
Apr 15 2017 07:07
@MathematicsCoding u should get both in the object
@Aliaselias i get what ur saying lol
@Aliaselias again, i was talking about $.getJSON not json itself
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:08
But how? if I want fahrenheit I would have to multiply 9/5 then add 32...
Pagnito
@Pagnito
Apr 15 2017 07:08
@MathematicsCoding i mean u can do that, but ur response should give u both properties
Bas
@Aliaselias
Apr 15 2017 07:08
I feel you man, just making sure others don't get confused
Pagnito
@Pagnito
Apr 15 2017 07:09
@Aliaselias true, true hehe
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:09
@Aliaselias well can you check out my JS code then?
:p
Bas
@Aliaselias
Apr 15 2017 07:09
I'm on my phone
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:09
...
Bas
@Aliaselias
Apr 15 2017 07:09
But i'll try
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:09
okay
$(document).ready(function() {
  var lat = "Latitude: ";
  var lon = "Longitude: ";
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      console.log('hi');
      var temperature;
      $(".geo").html(lat + latitude + '<br>' + lon + longitude);
      var url = "https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed/" + latitude + ',' + longitude;
      $('.tempC').on("click", function() {
        $.ajax({
          url: url,
          dataType: "jsonp",
          success: function(weatherData) {
            console.log(weatherData)
            temperature = weatherData.currently.apparentTemperature;
          }
        });
      });
    });
  }
});
You know I had no idea what you guys were talking about,... I guess I have to review json and ajax again lol
Pagnito
@Pagnito
Apr 15 2017 07:12
yea its def a good idea, i def have to review it myself, i wanna get to know ajax alot more thorough
there is fetch now too
i guess its been around for a year or something i dunno
people are saying its the future of calling for data
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:13
oh
Pagnito
@Pagnito
Apr 15 2017 07:13
dont worry about it tho lol
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:13
lol
Pagnito
@Pagnito
Apr 15 2017 07:13
just get to know ajax for now
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:13
Okay
I just want to know about Javascript through book or something asap
Pagnito
@Pagnito
Apr 15 2017 07:13
im sure people will b using ajax for a while even when fetch is most prevalent
yea i feel u, i think best way is to just keep building and when ur stuck go on mdn w3schools and other sites like that and look for tools u can use
and u never know what ull find that u havent been introduced to yet that u can use in ur problems
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:15
I feel like I can finish JS courses on codecademy lol but I felt like they are too easy..
Bas
@Aliaselias
Apr 15 2017 07:15
Google(stackoverflow) is definitely your best friend learning how to program
Pagnito
@Pagnito
Apr 15 2017 07:15
yea codecademy is waaaay too easy
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:15
@Aliaselias Yeah did you spot any problem tho?
Pagnito
@Pagnito
Apr 15 2017 07:16
@Aliaselias i usually always find myself on forums there but i never looked into their library, do they have one
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:16
Like API library?
How to use them? or something?
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:17
Howdy, I am needing some help on my first project. I am trying to center an image with a same sized caption on the bottom but it is sitting firmly on the left. Here is my code: <div style="width:327px; text-align:center;"><img class="center-block" src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Tolkien_1916.jpg" alt="J.R.R. Tolkien in 1916" width="327" height="473" style="padding-bottom 0.5em;">Tolkien in 1916. He is wearing a WWI British army uniform.
</div>
Pagnito
@Pagnito
Apr 15 2017 07:17
@MathematicsCoding just a libaray of all the tools that a certain language provides, references or w/e they call em
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:17
@Beoron You want background image to be fit on page?
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:18
I want the image and caption centered. I am running a container-fluid div over all of that too
What is stackoverflow? I have never looked at that?
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:19
Well like you can go there to learn how to code
Any language
its a site..
Not learn how to code like how to write code how its works something like that
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:20
huh, that's interesting. I will have to look into that
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:20
Like I would go there how to get background image to be fit on page and they would tell me this
body {background-image: url(url);
background-position: covers;
Some thing like that
There is also MDN
For short
Mozilla Developer Network
its already tomorrow for me :(
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:22
What is a background image vs a regular image?
SaiChand Duppala
@saichandd
Apr 15 2017 07:22
i think its background-position: cover;
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:22
yeah thought so :p
@Beoron well image just any sized image? and background image is like completed size image on background
SaiChand Duppala
@saichandd
Apr 15 2017 07:23
@Beoron background image the background image
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:23
yeah..
Pagnito
@Pagnito
Apr 15 2017 07:23
well im going to sleep, g night
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:23
Night @Pagnito
@theNuclearman did you do weather app?
about @Pagnito
CamperBot
@camperbot
Apr 15 2017 07:23
:cookie: 202 | @pagnito |http://www.freecodecamp.com/pagnito
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:23
about @theNuclearman
CamperBot
@camperbot
Apr 15 2017 07:23
:cookie: 252 | @thenuclearman |http://www.freecodecamp.com/thenuclearman
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:23
interesting lol
SaiChand Duppala
@saichandd
Apr 15 2017 07:23
@MathematicsCoding yep
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:24
Can you help?
SaiChand Duppala
@saichandd
Apr 15 2017 07:24
shoot
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:24
What wrong?
SaiChand Duppala
@saichandd
Apr 15 2017 07:24
I meant ask you question :P
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:24
lol
Well can you help?
I dont know what is wrong with my JS code
SaiChand Duppala
@saichandd
Apr 15 2017 07:25
yeah, ask your question, but I don't know jquery
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:25
Mozilla Devel
oops
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:26
The code you copied above, what language is that even? When I put it in the html editor it is just white
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:26
No they are for css
SaiChand Duppala
@saichandd
Apr 15 2017 07:26
did you do the API call?
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:26
background-image: url('link..');
@Beoron like that in css
body element
@theNuclearman I did but no response
SaiChand Duppala
@saichandd
Apr 15 2017 07:28
what does it say, does it give any CORS error?
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:28
I dont see any error
Just button nothing changes
Button is supposed to change...
to temperature
SaiChand Duppala
@saichandd
Apr 15 2017 07:29
i'll try checking, but I don't know jquery, i'll try my best
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:30
Okay
If you couldn't thats fine I was going to save it for tomorrow lol
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:31
@MathematicsCoding That puts the image repeating over and over again behind everything. I just want the image one time in the center of the page with a caption under it. Not sure if I am missing something
SaiChand Duppala
@saichandd
Apr 15 2017 07:31
whats that long thing in that api call? https://api.darksky.net/forecast/faee6fb764b6a6eb77248cdaaf3df1ed
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:32
@Beoron oh add no-repeat
background-image: url() no-repeat;
I think
SaiChand Duppala
@saichandd
Apr 15 2017 07:33
oh thats the key
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:33
@theNuclearman the random number? the key
Yeah
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:33
@MathematicsCoding hmm now the image seems to be gone. I just have the lefthand one from the html code I posted earlier
SaiChand Duppala
@saichandd
Apr 15 2017 07:34
are u parsing the data?
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:34
@Beoron Post that css code
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:34
@MathematicsCoding background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b4/Tolkien_1916.jpg") no-repeat; background-position: cover;
SaiChand Duppala
@saichandd
Apr 15 2017 07:35
@Beoron give a space before no-repeat
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:35
body {
background-image: url('url') no-repeat;
background-position: cover;}
Oops forgot }
SaiChand Duppala
@saichandd
Apr 15 2017 07:37
did you see this error?
Mixed Content: The page at 'https://codepen.io/MathematicsCoding/pen/rmNdrg?editors=1010' was loaded over HTTPS, but requested an insecure image 'http://wallpapercave.com/wp/qQa5Pd7.jpg'. This content should also be served over HTTPS.
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:37
Yeah
I dont know how to fix that..
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:38
Hmmmm I don't know then. It is not working
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:38
@Beoron Did you do that in css?
Might I see your codepen?
Yeah, and if I take out no-repeat the image is there a lot, but adding no-repeat makes it disappear
SaiChand Duppala
@saichandd
Apr 15 2017 07:41
add background-repeat : no-repeat;
remove no repeat from that line
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:42
yea
and all of these inside style tags are supposed to be inside css
styles tags = CSS
no tags too
Codepen put them for you
Imagine <style> tags is there
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:43
so all of the stuff in my <style> should be in the css code area?
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:43
Yep
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:43
ahhhh
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:43
You dont need style tags inside css since codepen already put them for you
And I know why image isnt working
I think you cannot have two body...
elements
Maybe just remove <body> and </body> inside html then try css codes

You can always do this

<body background="url">

But they can cause problems later

Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:46
The image is there now after making the no-repeat change. I now need to move it below my text and add a caption
Saboor Malik
@MathematicsCoding
Apr 15 2017 07:47
Good
Okay Good luck with your project :)
Good night
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:47
@MathematicsCoding Thanks!
CamperBot
@camperbot
Apr 15 2017 07:47
beoron sends brownie points to @mathematicscoding :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @mathematicscoding |http://www.freecodecamp.com/mathematicscoding
Jeremy Adams
@JeremyDAdams
Apr 15 2017 07:48
@theNuclearman Thanks as well!
CamperBot
@camperbot
Apr 15 2017 07:48
beoron sends brownie points to @thenuclearman :sparkles: :thumbsup: :sparkles:
:cookie: 253 | @thenuclearman |http://www.freecodecamp.com/thenuclearman
NewGismo
@NewGismo
Apr 15 2017 10:56

Hi, I m doing the Portfolio Project.
I wrote some code in VSCode where I integrated a slider. However this sliders does not work on codepen.
Could someone help me out how to fix this?

codepen

Mohamed Derhalli
@derhallim
Apr 15 2017 11:33
@NewGismo i can check that :P
NewGismo
@NewGismo
Apr 15 2017 11:33
@derhallim it s ok thx :P
CamperBot
@camperbot
Apr 15 2017 11:33
newgismo sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @derhallim |http://www.freecodecamp.com/derhallim
Samir Sakanovic
@SagiSan
Apr 15 2017 11:42
anyone who can help me with input event in js?
PedroCSilva
@PedroCSilva
Apr 15 2017 11:53
yes?
just ask the question instead of asking if you can ask it
Samir Sakanovic
@SagiSan
Apr 15 2017 12:22
I want to get the value of input event..not the input box...for example...when I type..test in input...thats 4 events..t e s t...but when I log value..i get..t ...te...tes...test..its getting input box value...not the event itself...and I wanna use on input event..not on key press...because input covers paste event also
PedroCSilva
@PedroCSilva
Apr 15 2017 12:24
link for codepen pls
Samir Sakanovic
@SagiSan
Apr 15 2017 12:38
@PedroCSilva nevermind..figured it out...but now I need to restrict textarea with deleting...text inside textarea can only be deleted by count of 1...what I mean is..selecting text and deleting should be disabled...only using delete and backspace should be available..and char by char..not by selection...understand?
Sorin Ruse
@sorinr
Apr 15 2017 13:30
@thodorisanta check if the cell has value and prevent rewriting
Spyrantis Theodoros
@thodorisanta
Apr 15 2017 13:57
so i have this 3x3 table with values like X and O in it. HOW can i empty every cell of the bable(make it equal to "") with javascript?
<table id='board'>
        <tr>
          <td class="game">X</td><td class="game">O</td><td class="game">X</td>
        </tr>
        <tr>
          <td class="game">X</td><td class="game">O</td><td class="game">X</td>
        </tr>
        <tr>
          <td class="game">X</td><td class="game">O</td><td class="game">X</td>
        </tr>
      </table>
Gulsvi
@gulsvi
Apr 15 2017 14:01
@thodorisanta You can loop through all the elements with the class "game" and set their text to "":
const gameTiles = document.getElementsByClassName('game');
Array.from(gameTiles).filter(element => element.textContent = "");
Or with jQuery: $('.game').text('');
Muhammad Hasham
@MohammadHasham
Apr 15 2017 14:10
can anyone help me with setting up environment for react?
Roxroy
@roxroy
Apr 15 2017 14:11
@MohammadHasham , which react challenge are you on?
Muhammad Hasham
@MohammadHasham
Apr 15 2017 14:12
@roxroy actually i am starting to learn it for that i am setting up the environement locally on my machine.But i am facing some difficulty
Raphael
@RaphyWaffy
Apr 15 2017 14:15
Hello, wondering if anyone can inform me. Have a domain name on 123 reg but my website is hosted on GoDaddy. Ih vae the nnameservers directed to GoDaddy now, just want to make sure, so I still need to pay for the domain name on 123reg?
Gulsvi
@gulsvi
Apr 15 2017 14:16
@RaphyWaffy That's a question for GoDaddy/123Reg customer support. :) This room is for help with Free Code Camp Front End Development projects :)
Raphael
@RaphyWaffy
Apr 15 2017 14:18
@SkyCoder01 Fair enough, just thought someone may be able to help here :(
Roxroy
@roxroy
Apr 15 2017 14:18
@MohammadHasham , I did my react projects in codepen. However, now, I am in the at same spot as you are. I am now doing the setup for the voing app and will be using react for the front end and nodes for the backend. I have been checking too , this is the one I am looking into using as a guide.
gulptech
@gulptech
Apr 15 2017 14:57
@RaphyWaffy yes you need to pay for the name on 123reg...unless you transfer it..then you need to pay godaddy for it(the transfer has a fee but adds 1 year to the expiration)
And don't forget to look for discount codes :)
Gabriel
@revolvingwinds
Apr 15 2017 15:13
I am confused as to why there are three different panels "html" "css" and "javascipt"
I was used to just working with one on the challenges and now I don't know how to write code on three different panels!
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:15
@revolvingwinds because in a real project you separete your code an different file , file for html, file for CSS and file for javascript
it's for organization you code, to be easy to read
nickolagr
@nickolagr
Apr 15 2017 15:16
hello. does anyone can help me how to close php connection in XAMPP without total exit from the command panel (CTRL+C doesn't work)?
Gulsvi
@gulsvi
Apr 15 2017 15:17
@revolvingwinds You'll notice a big step up in difficulty between some of the projects. In Codepen, everything between your <body> tags goes in the HTML panel. Everything between your <style> tags goes in the CSS panel, and everything between your <script> tags goes in the JS panel.
As Anas mentioned, it's a good practice for organizing your code into separate files.
CamperBot
@camperbot
Apr 15 2017 15:18
@SkyCoder01 :8ball: cannot predict now :sparkles:
dndln
@dndln
Apr 15 2017 15:26
Hi - I'm working on the tribute page, could use a few pointers - https://codepen.io/dndln/pen/dWPEwQ
How do I center that image? And the javascript doesn't seem to be working
thanks in advance
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:28
@dndln img {display: block;margin: 0 auto;}
Ernandas
@ErnandasP
Apr 15 2017 15:28
Hello, my code works in Sublime text, but it doesn't work in codepen. Navigation bar doesn't show up in codepen. Code: <nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">ErnandasP</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a><li>
</ul>
</div>
</nav>
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:29
change behavior of img to be like a div and center it with margin-right, margin-left auto
dndln
@dndln
Apr 15 2017 15:29
@Aka-Dev do I delete the bootstrap classes of img-responsive center-block?
they dont seem to be working anyway
Ernandas
@ErnandasP
Apr 15 2017 15:31
img {
display: block;
margin-left: auto;
margin-right: auto;
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:31
@dndln add code to class center-block if you want
dndln
@dndln
Apr 15 2017 15:31
@ErnandasP thanks it worked!
CamperBot
@camperbot
Apr 15 2017 15:31
dndln sends brownie points to @ernandasp :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @ernandasp |http://www.freecodecamp.com/ernandasp
dndln
@dndln
Apr 15 2017 15:32
ooh is that automatic
thanks @Aka-Dev
CamperBot
@camperbot
Apr 15 2017 15:32
dndln sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
:cookie: 191 | @aka-dev |http://www.freecodecamp.com/aka-dev
dndln
@dndln
Apr 15 2017 15:32
okay problem 2: the javascript at the top of my html doesnt seem to be working
I tried putting it in the js window but it didnt work either
I've linked jQuery in the codepen settings
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:35
@dndln
$( document ).ready(function() {
// your code here
});
dndln
@dndln
Apr 15 2017 15:40
I've put this in the javascript box
<script>
$(document).ready(function() {
  $('.name').css('color', 'red')
});
</script>
but it doesnt seem to be overwriting the bootstrap text-primary class
(meant to turn 'Elon Musk' red)
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:42
@dndln add class red-text that have color: red; it's better
and add the class to your element
dndln
@dndln
Apr 15 2017 15:42
yeah that's probably better; i just wanted to get jQuery working
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:43
@dndln you must add class name to your h1
dndln
@dndln
Apr 15 2017 15:43
not sure why isnt
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:45
@dndln You don't need to add <script> tag to a js file
remove script tag of your panel js
dndln
@dndln
Apr 15 2017 15:46

oh, thanks!
okay, html:

  <h1 class='container-fluid text-primary text-center red-text'>Elon Musk</h1>

js:

$(document).ready(function() {
  $('.red-text').css('color', 'red')
});
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:47
@dndln
.text-primary {
color: #0275d8!important;
}
you can't change the color because .text-primary have important
remove .text-primary
dndln
@dndln
Apr 15 2017 15:48
ahh thanks, is that in the bootstrap file?
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:48
@dndln yes
dndln
@dndln
Apr 15 2017 15:50
okay, got it working! Thanks again @Aka-Dev!
CamperBot
@camperbot
Apr 15 2017 15:50
:warning: dndln already gave aka-dev points
dndln sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
Anas Abdennaim
@Aka-Dev
Apr 15 2017 15:52
@dndln You're welcome
Ignacio Tonoli
@tonoli
Apr 15 2017 15:52
Hi guys I'm building my random quote machine
and I have an issue with the fact that when I click on the button sometimes I have the same sentence. (That's because I created a var i = Math.random (1rst Quote to last quote))
I don't know if you see what I mean
Moisés Man
@moigithub
Apr 15 2017 15:59
@tonoli easier if u show ur code...
Nicolas Ramirez
@kamatheuska
Apr 15 2017 16:02
hi there! I want to make a directory on my website...kind of like a filesystem, any idea how?
Ignacio Tonoli
@tonoli
Apr 15 2017 16:23
$(document).ready(function(){
  $("button").click(function(){
     var quote = ["Hello World!", "Hello 42!", "Hello Ignacio!","Blabla"];
     var movie = ["World", "Charly", "Moi", "Car"];
     var i = Math.floor((Math.random() * quote.length) + 1);
     $('#quote').html(quote[i]);
     $('#movie').html(movie[i]);
    console.log(i);
  });
});
Will Foster
@Will5592
Apr 15 2017 16:43
Anyone know what the default value in Ajax calls is for get and post? I.E. What the default is if neither a specified
Raghu Madhavan
@raghumadhavan
Apr 15 2017 16:49
@Will5592 get
Will Foster
@Will5592
Apr 15 2017 16:50
thanks
Linda Thompson
@lindakatcodes
Apr 15 2017 16:53
@tonoli It might help if once you get your random quote (i), you store that in a variable. Then, the next time you run the random function, check if that response matches your last one. If so, pull again until you get a new one.
Will Foster
@Will5592
Apr 15 2017 16:55
Another fun question... Anyone know why with the Wikipedia API, you HAVE to specify the dataType in the Ajax request? If you leave it blank rather than dataType= "json", you get an error, saying that there is no access control allow origin header present
Sorin Ruse
@sorinr
Apr 15 2017 16:57
@Will5592 api calls must follow the pattern provided by the api provider if you want to get back some results :)
@Will5592 reading their docs will help u understand how to make the calls
Will Foster
@Will5592
Apr 15 2017 17:00
Ok thanks
The Wiki Api documentation is a small book in itself :'(
Sorin Ruse
@sorinr
Apr 15 2017 17:01
@Will5592 search for the parts that interests u
Will Foster
@Will5592
Apr 15 2017 17:04
@sorinr I have/am doing, it's a labyrinth lol. There doesn't seem to be a direct answer to my question either, so I've moved back to trying to google it
Sorin Ruse
@sorinr
Apr 15 2017 17:05
@Will5592 acctually, in my oppinion, that challenge is more on learning to read the docs rather then making a simple ajax call
@Will5592 i agree their docs are stuffy
Roxroy
@roxroy
Apr 15 2017 17:12
@tonoli , are you still seeing the issue, or are you now getting a new quote with each click?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:18
Hey can someone help with my weather app..
V Arun Kumar
@arunvkumr
Apr 15 2017 17:19
@MathematicsCoding Share your pen.. and what help you need?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:19
I cant get the button for temperature to update
V Arun Kumar
@arunvkumr
Apr 15 2017 17:20
@MathematicsCoding you mean it's not showing the temp right?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:20
yes
V Arun Kumar
@arunvkumr
Apr 15 2017 17:24
@MathematicsCoding weatherData.currently.apparentTemperature;, apparentTemperature is not part of the currently object. it's just temperature. weatherData.currently.temperature;
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:24
So var temperature = apparentTemperature;?
Then weatherData.currently.temperature;
Pagnito
@Pagnito
Apr 15 2017 17:25
saboor did ur app work today?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:25
Nope
Im this close...
Pagnito
@Pagnito
Apr 15 2017 17:25
hold on
V Arun Kumar
@arunvkumr
Apr 15 2017 17:25
@MathematicsCoding no need of apparentTemperature,
just temperature = weatherData.currently.temperature;.
Pagnito
@Pagnito
Apr 15 2017 17:26
im get on my laptop
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:26
okay
That it? @arunvkumr
How am I supposed to get temp from that api call then..
Its apparentTemperature in that url to get temperature
Pagnito
@Pagnito
Apr 15 2017 17:27
@MathematicsCoding gimme the link again
V Arun Kumar
@arunvkumr
Apr 15 2017 17:28
@MathematicsCoding its not in the object. object only has temperature.. apperentTemperature is not defined so how would you get the data?
@MathematicsCoding you know that right you are console logging so the temperature is showing in the console not on the web page?
Pagnito
@Pagnito
Apr 15 2017 17:29
@MathematicsCoding you have to put https:// in ur code pen url
ur geolocation didnt work on a insecure call
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:29
What? my site already have https
Pagnito
@Pagnito
Apr 15 2017 17:30
@MathematicsCoding no i mean u have to put it in ur browser
@Pagnito the codepen itself has to open thru https
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:30
browser console?
Pagnito
@Pagnito
Apr 15 2017 17:30
@MathematicsCoding no just the browser url itself
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:31
Yeah it already have https?
Pagnito
@Pagnito
Apr 15 2017 17:31
@Pagnito where u type in codepen.io
Ignacio Tonoli
@tonoli
Apr 15 2017 17:31
@lindakatcodes @roxroy Thnak you!
Pagnito
@Pagnito
Apr 15 2017 17:31
@Pagnito when i clicked ur link it didnt, i changed it to https and i got a api response
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:31
Well mine do...
V Arun Kumar
@arunvkumr
Apr 15 2017 17:31
@MathematicsCoding yea.. in console this what the url is returning...
V Arun Kumar
@arunvkumr
Apr 15 2017 17:31
blob
Pagnito
@Pagnito
Apr 15 2017 17:31
try that one
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:32
@arunvkumr apparentTemperature is right there
Pagnito
@Pagnito
Apr 15 2017 17:32
@MathematicsCoding try the link i just gave u
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:33
oh I didnt see the temperature in it @arunvkumr
@Pagnito look my site already have https
I could get my coordinates..
Pagnito
@Pagnito
Apr 15 2017 17:33
yea when i click C button i get a response
V Arun Kumar
@arunvkumr
Apr 15 2017 17:33
@MathematicsCoding yea temperature is there why apperantTemperature and check your codepen console it returns the temp
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:34
hm
Pagnito
@Pagnito
Apr 15 2017 17:34
make sure u check fpr it in the console
cuz u dont have anything writing the temp response into ur DOM
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:35
How did you get a response?
Even I have https in browser
Pagnito
@Pagnito
Apr 15 2017 17:35
i just clicked ur TempC buton
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:35
yea
V Arun Kumar
@arunvkumr
Apr 15 2017 17:35

blob

@MathematicsCoding when i click on the C or F button this is what it shows

Saboor Malik
@MathematicsCoding
Apr 15 2017 17:35
I clicked nothing happened
Pagnito
@Pagnito
Apr 15 2017 17:35
do u have ur console open
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:35
console... I thought you are talking about browser console...
How do I have console open? xD
Pagnito
@Pagnito
Apr 15 2017 17:36
@MathematicsCoding do u have chrome?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:36
nvm found it
yeah
Yeah temperature showed up
62 F
Pagnito
@Pagnito
Apr 15 2017 17:37
did u open ur console?
the chrome one?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:37
browser console or codepen console?
Pagnito
@Pagnito
Apr 15 2017 17:37
@MathematicsCoding click up top view/developer/ developer tools
V Arun Kumar
@arunvkumr
Apr 15 2017 17:37
@MathematicsCoding there you go.. now just add $('id or className').html(temperature); it should show in the webpage
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:37
Oh browser console
Pagnito
@Pagnito
Apr 15 2017 17:37
browser
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:37
They showed up..
Pagnito
@Pagnito
Apr 15 2017 17:38
word, so u got all the data now?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:38
Well they did show up before... Now I realized it was a temperature.. I thought It was random number
@arunvkumr inside success function?
I want the button turn into temperature
You know?
V Arun Kumar
@arunvkumr
Apr 15 2017 17:38
@MathematicsCoding yup, right below the console.log(temperature)
@MathematicsCoding you can try an if else statement with boolean condition and swtich the value of boolena whenever the button is click. and based on that show 'C' or 'F'.
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:39
finally..
Pagnito
@Pagnito
Apr 15 2017 17:40
@MathematicsCoding haha
@MathematicsCoding well, im signing off, i gotta go wathc some anime with the sis, u need any other help?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:40
So that is fahrenheit?
@Pagnito okay thanks
CamperBot
@camperbot
Apr 15 2017 17:40
mathematicscoding sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 203 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Apr 15 2017 17:40
np
V Arun Kumar
@arunvkumr
Apr 15 2017 17:41
@MathematicsCoding yea.. thats F.
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:49
Yeah
  • 32) × 5/9
Right?
  • 32 not multiply
Wtf
Jim Tryon
@jimtryon
Apr 15 2017 17:50
is this for C to F?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:50
Subtract 32..
No
F to C
Because I got F then I need to make it to C
Jim Tryon
@jimtryon
Apr 15 2017 17:51
You want to go the other way...(°F - 32) x 5/9 = °C
Order of operations is important when you do the temp conv
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:52
Okay..
So for this project I would have to do this?
(temperature-32) * 5/9?
Spyrantis Theodoros
@thodorisanta
Apr 15 2017 17:53
im doing the tic tac toe project and i need to make a function that will change if theres a winner.how can i do this? i made an array with the winning moves [1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [7, 5, 3] but i dont know how to use it. i also used a table for the tic tac toe. but how can i check if a winning compination is filled with X's or O's? like i need to check that the 1,2,3 places of the table is X's :/
http://codepen.io/oshikurou/pen/dvEOOX?editors=1011
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:55
so for 67 F that would be 30 C?
Right?
Sorry I meant 62...
Then it changes to 30 C but it supposed to be 16 C
gulptech
@gulptech
Apr 15 2017 17:59
62 - 32 is 30 are you forgetting the *5 / 9 ?
Saboor Malik
@MathematicsCoding
Apr 15 2017 17:59
No I did that
(temperature-32) * 5/9?
or (temperature-32*5/9)?
gulptech
@gulptech
Apr 15 2017 18:00
(62 - 32) * 5 / 9 is 16.666
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:01
Yeah
I did that in code but it return 30...
gulptech
@gulptech
Apr 15 2017 18:01
then you typed it wrong
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:02
Nope.
$('.tempC').html(temperature -32) * 5 / 9;
temperature = 62
gulptech
@gulptech
Apr 15 2017 18:02
html((temperature -32) * 5 / 9)
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:02
...
gulptech
@gulptech
Apr 15 2017 18:03
this is what was printing $('.tempC').html(temperature -32)
V Arun Kumar
@arunvkumr
Apr 15 2017 18:03
@MathematicsCoding its only calculating (temp - 32) not (temp - 32)*5/9. put the entire conversion inside brackets
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:04
Yeah
Thanks @gulptech
CamperBot
@camperbot
Apr 15 2017 18:04
mathematicscoding sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 243 | @gulptech |http://www.freecodecamp.com/gulptech
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:04
so How do I have last two number of deciaml only?
Like 45.55 not 45.55555555
Or just whole number instead... math.round?
Roxroy
@roxroy
Apr 15 2017 18:05
@MathematicsCoding , try var num = 5.56789; var n = num.toFixed(2);
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:05
Whats (2) for?
V Arun Kumar
@arunvkumr
Apr 15 2017 18:06
@MathematicsCoding taking the fraction part upto 2 decimal places.
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:06
$('.tempC').html((temperature.toFixed(2) -32) * 5 / 9);
V Arun Kumar
@arunvkumr
Apr 15 2017 18:07
@MathematicsCoding ((temperature -32) * 5 / 9).toFixed(2); or use a seperate variable
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:07
Okay
Roxroy
@roxroy
Apr 15 2017 18:07
@MathematicsCoding , no . you want to apply to fixed to the calculated number..
Ignacio Tonoli
@tonoli
Apr 15 2017 18:08
$(document).ready(function(){
  var j = -1;
  $("button").click(function(j){
     var quote = ["Hello World!", "Hello 42!", "Hello Ignacio!","Blabla"];
     var movie = ["World", "Charly", "Moi", "Car"];
     var i = j;
    while(i === j){
     i = Math.floor((Math.random() * quote.length) + 1);
    }
     $('#quote').html(quote[i]);
     $('#movie').html(movie[i]);
    j = i;
    return j;  
  });
});
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:08
$('.tempC').html((temperature -32) * 5 / 9).toFixed(2);
V Arun Kumar
@arunvkumr
Apr 15 2017 18:09
@MathematicsCoding toFixed(2) should be inside the html.. like
$('.tempC').html( ((temperature -32) * 5 / 9).toFixed(2));
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:09
..
Ignacio Tonoli
@tonoli
Apr 15 2017 18:09
Hi guys I don't figure out what is wrong and why I still have the same quote twice sometimes. I think I don't manage to stock the right way "j"
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:09
Thanks @arunvkumr
CamperBot
@camperbot
Apr 15 2017 18:09
mathematicscoding sends brownie points to @arunvkumr :sparkles: :thumbsup: :sparkles:
:cookie: 590 | @arunvkumr |http://www.freecodecamp.com/arunvkumr
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:10
But if I want just whole number instead then .toFixed(0)?
yeah it works
V Arun Kumar
@arunvkumr
Apr 15 2017 18:11
@MathematicsCoding :+1:, Now add 'Fahrenheit' functionality and on button click it should switch to 'C' and 'F'.
gulptech
@gulptech
Apr 15 2017 18:11
you could just ask for Celsius adding + "?units=si" or + "?units=ca" to the url
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:11
$('.tempC').html( ((temperature -32) * 5 / 9).toFixed(0)) + '°';
I want to add degree sign
gulptech
@gulptech
Apr 15 2017 18:13
move last ) to the the end
V Arun Kumar
@arunvkumr
Apr 15 2017 18:13
@MathematicsCoding move + '°' inside the html that should work.. (......toFixed(0) + '°');
Roxroy
@roxroy
Apr 15 2017 18:13
@MathematicsCoding , I think it is °
gulptech
@gulptech
Apr 15 2017 18:14
$('.tempC').html( ((temperature -32) * 5 / 9).toFixed(0) + '°C');
i like how it chages the html code :)
Ignacio Tonoli
@tonoli
Apr 15 2017 18:19
Hi guys someone has an idea about what is wrong with my code?
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:20
sorry guys had a internet problem
Now I got C
How do I switch C to F then C then F...
gulptech
@gulptech
Apr 15 2017 18:25
you already have F (temperature)
just print that F
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:26
Another html function?
gulptech
@gulptech
Apr 15 2017 18:26
ya
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:27
Hm i did that and it only shows fahrenheit that it
Maybe I didnt click twice..
gulptech
@gulptech
Apr 15 2017 18:27
let me look
why not have both C and F there at same time and update on 1 click
Gilbert
@gilbertp97
Apr 15 2017 18:28
hello
i need help coders
V Arun Kumar
@arunvkumr
Apr 15 2017 18:28
@MathematicsCoding try implementing a if else when ever you click the button change a value either from 0 to 1 or 1 to 0 or true to false or false to true and using the value as condition show either 'C' or 'F'.
Gilbert
@gilbertp97
Apr 15 2017 18:28
var todoList = {
    todos: [],
    displayTodos(){
        console.log('My Todos', this.todos);
    },
    addTodo: function(todoText) {
        this.todos.push({
            todoText: todoText,
            completed: false
        });
        this.displayTodos();
    },
    changeTodo: function(position, todoText){
        this.todos[position].todoText = todoText;
        this.displayTodos();
    },

    deleteTodo: function(position){
        this.todos.(position,1);
        this.displayTodos();

    }
};
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:28
@gulptech well you know only last code works?
Gilbert
@gilbertp97
Apr 15 2017 18:29
todoList.addTodo("hi");
for example it will say it fails if i try to write that
says todoList is not defined
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:30
@arunvkumr I dont know how to do that
gulptech
@gulptech
Apr 15 2017 18:30
@MathematicsCoding many ways to accomplish it.. @arunvkumr gave you a good way
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:32
console.log(temperature)
            $('.tempC').html( ((temperature -32) * 5 / 9).toFixed(0) + '°');
            if (temperature=temperature -32*5/9) {
              $('.tempC').html(temperature);
            }
I guess that wont work
Because of -32*5/9)
V Arun Kumar
@arunvkumr
Apr 15 2017 18:34
@MathematicsCoding this is what i did in my project..
var switch = false;
....
$('.btn').on('click', function(){
...// your code
switch = (switch == false); // or simply switch = !switch
if(switch)
$('.tempC').html( ((temperature -32) * 5 / 9).toFixed(2) + '°C');
else
$('.tempC').html( temperature.toFixed(2) + '°F');
});
....// rest of your code
gulptech
@gulptech
Apr 15 2017 18:36
you can add a 2nd button and update that button (i have not seen the project specs)
$('#tempC').html( ((temperature -32) * 5 / 9).toFixed(0) + '°');
$('#tempF').html(temperature.toFixed(0) + '°');
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:36
Hm
I will try that
gulptech
@gulptech
Apr 15 2017 18:37
i used id instead of class for html
and like @arunvkumr the click on the btn (although i used a new class called temp)
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:39
Can I used id tempF then class tempC same time?
gulptech
@gulptech
Apr 15 2017 18:39
here is a fork of you code --> https://codepen.io/gulptech/pen/eWNNoG
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:40
What does fork do?
gulptech
@gulptech
Apr 15 2017 18:40
copies your code
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:41
oh
I dont want two buttons I could do that but I prefer just one instead of two
gulptech
@gulptech
Apr 15 2017 18:43
then you need a way to pick C or F
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:44
Yeah.. im trying
 console.log(temperature)
            $('.tempC').html( ((temperature -32) * 5 / 9).toFixed(0) + '°');
            $('#tempF').html((temperature).toFixed(0) + '°');
I tried with id and one class on button element same time
V Arun Kumar
@arunvkumr
Apr 15 2017 18:44
@MathematicsCoding here... this is what i have been talking about using toggle method..
https://codepen.io/arunkumrv/pen/YVXXbg?editors=0010
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:45
Only tempC works
tempF*
V Arun Kumar
@arunvkumr
Apr 15 2017 18:46
@MathematicsCoding Single btn click switches between the temps
var btn = false;
....
$('.tempC').on('click', function(){
...// your code
btn = !btn
if(btn) // show in C, if btn is true
$('.tempC').html( ((temperature -32) * 5 / 9).toFixed(2) + '°C');
else // show in F, if btn is false
$('.tempC').html( temperature.toFixed(2) + '°F');
});
....// rest of your code
gulptech
@gulptech
Apr 15 2017 18:47
but you still need a way to control btn (a slider/toggle) to be functional
V Arun Kumar
@arunvkumr
Apr 15 2017 18:48
@gulptech what do you mean? i didn't get you.
gulptech
@gulptech
Apr 15 2017 18:48
how do you select C on your page ?
or F
u have it hard coded in the script
ok..u have the !btn
V Arun Kumar
@arunvkumr
Apr 15 2017 18:50
@gulptech by default it shows either one of those, in this code its 'C' on clicking it, it shows 'F'. you can switch the statements of if and else on which you want 'F' or 'C'.
gulptech
@gulptech
Apr 15 2017 18:51
I missed the change of btn state :)
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:53
            var btn = false;
            btn = !btn;
            if (btn)
            $('.tempC').html( ((temperature -32) * 5 / 9).toFixed(0) + '°C');
          else  $('#tempF').html((temperature).toFixed(0) + '°F');
          }
V Arun Kumar
@arunvkumr
Apr 15 2017 18:53
@gulptech yea !btn works, but its not the "professional way", it can also be written as
btn = (btn === false); this make more sense like whats happening in the code.
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:53
okay
Done
C only..
How do I change it to F?
V Arun Kumar
@arunvkumr
Apr 15 2017 18:55
@MathematicsCoding put the var btn = false; outside the click function, add it below var url = ....
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:55
okay
it works thanks @arunvkumr @gulptech
CamperBot
@camperbot
Apr 15 2017 18:56
mathematicscoding sends brownie points to @arunvkumr and @gulptech :sparkles: :thumbsup: :sparkles:
:warning: mathematicscoding already gave gulptech points
:warning: mathematicscoding already gave arunvkumr points
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:56
really?
V Arun Kumar
@arunvkumr
Apr 15 2017 18:56
@MathematicsCoding :+1:
Saboor Malik
@MathematicsCoding
Apr 15 2017 18:56
But why var btn = false;? if there is btn = !btn;
two false = true?
Well I got to understand how they works...
V Arun Kumar
@arunvkumr
Apr 15 2017 19:00
@MathematicsCoding !btn is the key to this method, this actually is the reason for the toggling functionality.
! (false) = true this can also be written as (false === false) which is true and ! (true) = false this can also be written as (false === true) which is false. and to do the toggling we need an initial value that's why var btn = false;.
gulptech
@gulptech
Apr 15 2017 19:01
you define btn outside of function so it is not redefined to false every time you click the button
V Arun Kumar
@arunvkumr
Apr 15 2017 19:01
yup forgot to mention that...
Saboor Malik
@MathematicsCoding
Apr 15 2017 19:01
oh I see
thanks
Im going back to random quote machine to fix and improve
V Arun Kumar
@arunvkumr
Apr 15 2017 19:02
i gtg, its very late here.. gn :smile:
gulptech
@gulptech
Apr 15 2017 19:02
Going back to Golf Code myself :)
Mohamed Derhalli
@derhallim
Apr 15 2017 19:26
to position an image somewhere
don't we make the parent position relative?
then the image position absolute, and do top/left ?
Anthony Pierson
@Donald-Tho
Apr 15 2017 20:00
for the tribute page do you make it exactly the same or do you have to create another tribute about another person?
kickkick479
@kickkick479
Apr 15 2017 20:27
@mblmarlon I recommend you to use bootstrap glyphicons for facebook, liked-in and github. Look at http://marcoceppi.github.io/bootstrap-glyphicons/.
Mohamed Derhalli
@derhallim
Apr 15 2017 20:30
@kickkick479 how do u center the image in the middle here
i wanna make it between the 4 images
kickkick479
@kickkick479
Apr 15 2017 20:32
@mblmarlon I tested and figured out it does not work as I assumed. But <span class="fa fa-facebook"> represents facebook icon.
@derhallim let me see.
Mohamed Derhalli
@derhallim
Apr 15 2017 20:34
@kickkick479 my understanding, is that u have parent with position: relative
and the image inside with position absolute
but the top / left are not working
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:35
@derhallim hey
Mohamed Derhalli
@derhallim
Apr 15 2017 20:35
@MathematicsCoding sup
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:35
I finished weather app wanna see it?
Mohamed Derhalli
@derhallim
Apr 15 2017 20:35
yea sure
show me
Mohamed Derhalli
@derhallim
Apr 15 2017 20:36
what's this:
Error? Follow the directions below
Location access required
Https:// required
No Copying!
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:36
Directions
If you are not able to get your coordinates and other stuff..
Mohamed Derhalli
@derhallim
Apr 15 2017 20:36
remove it, it looks like an error
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:37
...
Mohamed Derhalli
@derhallim
Apr 15 2017 20:37
plus it's red color on that background, which is hard to read unless u highlight it
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:37
yeah..
Once I remove it then?
Mohamed Derhalli
@derhallim
Apr 15 2017 20:37
plus, end users and regular users don't know what the latitude and longitude are, they will see these: 43345345 in their face, will confuse them
remove the coordinates, and the red message, replace it with city name
and an icon
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:38
...
Mohamed Derhalli
@derhallim
Apr 15 2017 20:38
if it's raining, show rain, if it's cloudy, show cloud
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:38
Yeah I know
Mohamed Derhalli
@derhallim
Apr 15 2017 20:38
some stuff that are interesting for users, instead of coordinates and red message
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:38
Idk how to add icon
Mohamed Derhalli
@derhallim
Apr 15 2017 20:38
that's my opinion
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:38
okay
Mohamed Derhalli
@derhallim
Apr 15 2017 20:38
there's a site
which api are u using
ur back to using https://api.darksky.net ? :joy: . ......................................................
.................
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:39
yeah
so?
I didnt like mixed content so...
Mohamed Derhalli
@derhallim
Apr 15 2017 20:40
i dont think it has icons
told u to use openweatherapi
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:40
nah..
Mohamed Derhalli
@derhallim
Apr 15 2017 20:40
the one recommended by FCC
...........
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:40
I dont want icons
Mohamed Derhalli
@derhallim
Apr 15 2017 20:40
or even underground api
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:40
They have like "Sunny" "rainy" something
Mohamed Derhalli
@derhallim
Apr 15 2017 20:41
they give u back weather code
that code is icon code
so u just apply it to <i> and it will display the weather icon
will provide u with city name
i don't think the 1 ur using now has city name
does it?
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:42
:(
Mohamed Derhalli
@derhallim
Apr 15 2017 20:42
u didn't listen to me .............. no comment
:joy:
.......................
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:42
:worried:
dark sky dont have icon so..
Do they?
Mohamed Derhalli
@derhallim
Apr 15 2017 20:43
no ..
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:43
yeah..
Mohamed Derhalli
@derhallim
Apr 15 2017 20:43
and they don't display city name i believe ..
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:43
Skycoder used dark sky too he did display city name somehow...
Mohamed Derhalli
@derhallim
Apr 15 2017 20:43
nope
he used underground weather
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:43
What?
Mohamed Derhalli
@derhallim
Apr 15 2017 20:44
which has icons, etc..
similar to openweather api
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:44
Why does his project says "Powered by Dark Sky"
Mohamed Derhalli
@derhallim
Apr 15 2017 20:44
send me link to it
he told me he used underground though
or maybe that was another guy who told me so
can't remember
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:44
He did use dark sky... I checked
Mohamed Derhalli
@derhallim
Apr 15 2017 20:45
send me link to his codepen
Mohamed Derhalli
@derhallim
Apr 15 2017 20:46
yea
Saboor Malik
@MathematicsCoding
Apr 15 2017 20:47
yea
yea?
You know you said regular users might not understand whats latitude and longitude but they can google coordinates...
I added coordinates above them
So..
I removed red texts and I changed "Error" to "Https: required"
Thanks for these option... @derhallim
CamperBot
@camperbot
Apr 15 2017 20:50
mathematicscoding sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 15 2017 20:54
:D
@MathematicsCoding by the time the user goes and copy pastes the coordinates from ur site, he can just google: weather today
and see his weather
u wanna give them easy experience, not give them stuff and copy paste etc..
@kickkick479 did u figure it out?
kickkick479
@kickkick479
Apr 15 2017 21:05
@derhallim Sorry i lost my net connection and it's tough for me.
The parent element, dic.row, height stay 0. That makes all difficult.
Pagnito
@Pagnito
Apr 15 2017 21:16
damn, been trying to solve this problem for 2 days now. Im tryin to make a search function. but the div thats holding my elements has copies of itself with diffirent classes "online and "offline" to call upon when i click offline and online buttons. but if i search for a certain user, it shows all copies, i cant find a way to loop thru the visible users and hide all except one copy of each
at this point i feel like there isnt a way to do this in javascipt
Josh Beyer
@Joshbeyer
Apr 15 2017 21:23
Does anyone want to group up and build a few websites together? I am using bourbon, sass, pug, js, and jquery. And using github for version control/repo. I am open to using other technologies aswell, these are just what I am efficient with currently. This is the site I am currently working on.and it's the first site going into my portfolio. https://tempuplod.000webhostapp.com/ If you are behind me in knowledge I do not mind bringing you up to speed and hopefully we can learn from each other through the process and end up with a nice portfolio. I am on central america time, and am coding pretty much 24/7. I don't expect you to put in the same amount of time obviously, just as long as you are commited to building and finishing projects then we are good. If you are interested feel free to private message me to discuss further.
Saboor Malik
@MathematicsCoding
Apr 15 2017 21:26
..
Mohamed Derhalli
@derhallim
Apr 15 2017 21:31
it's alright, thanks @kickkick479
CamperBot
@camperbot
Apr 15 2017 21:31
derhallim sends brownie points to @kickkick479 :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @kickkick479 |http://www.freecodecamp.com/kickkick479
Mohamed Derhalli
@derhallim
Apr 15 2017 21:32
@MathematicsCoding ur in :love_letter: with ....
Saboor Malik
@MathematicsCoding
Apr 15 2017 21:33
with who?
I'm working on wikipedia viewer
Isabelle
@isabellemao
Apr 15 2017 21:39
I'm on the "Show The Local Weather" project, and I'm stuck on the weather API part.
Codepen link: https://codepen.io/isabellemao/pen/oZRmMz
This line in particular: $.getJSON(url, function(data) { console.log("weather loaded"); }) (30-32 js)
Some help please?
Amit Patel
@AmitP88
Apr 15 2017 21:40
hey guys, when you view the site on laptop/desktop view, does the specials carousel cell appear to be cuttoff from the bottom? https://amitp88.github.io/Khmer-Family-Cafe/
Kiliffin James
@kiliffinjames
Apr 15 2017 21:40

Hello everyone, I have some issues with codepen. Boostrap features aren't working though it has been added. I wanted to create a navigation with the .nav nav-pills class but nothing will show.

Please any help? what could be the problem. I am building a portfolio website.

here is my code:

<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width-device=width, iniatial scale=1.0">
<title>My portfollio</title>

<head>

<body>

<div class="container-fluid">
<ul class="nav nav-pills">
<li class"pull-left"><a href="#">WebLyt</a></li>
<li class="pull-right"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</div>
</body>

</html>

Saboor Malik
@MathematicsCoding
Apr 15 2017 21:48
hey can input element have href attribute?
Saboor Malik
@MathematicsCoding
Apr 15 2017 21:56
How do I make a text-box where I can search anything in it then wikipedia link show up?
..
Illunis
@Illunis
Apr 15 2017 21:59
Anthony Pierson
@Donald-Tho
Apr 15 2017 22:01
For the tribute I tried to replicate the example as closely as possible without actually copying the source code. Was I supposed to do this or is a unique topic required
I asked earlier but I can't find the message
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:02
Create your own page..
Anthony Pierson
@Donald-Tho
Apr 15 2017 22:03
no need to be rude "....." the amount of sass in those ellipses lol
Kiliffin James
@kiliffinjames
Apr 15 2017 22:05
@Illunis Ok will try that. Thanks
CamperBot
@camperbot
Apr 15 2017 22:05
kiliffinjames sends brownie points to @illunis :sparkles: :thumbsup: :sparkles:
:cookie: 261 | @illunis |http://www.freecodecamp.com/illunis
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:21
Is anyone on?
Can anyone help me with wikipedia viewer?
...
Pagnito
@Pagnito
Apr 15 2017 22:31
how do i say if (element == previous element) hide that element, in a each loop.
if($(item).is($('.g:visible:eq(-1)').prevAll(':visible')))
this is what i got but its not wroking how i want it
Colin
@colinhickey
Apr 15 2017 22:34
@Illunis thanks for that, I had the same problem
CamperBot
@camperbot
Apr 15 2017 22:34
colinhickey sends brownie points to @illunis :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @illunis |http://www.freecodecamp.com/illunis
nadir199
@nadir199
Apr 15 2017 22:36
hello
i have this problem while trying to get data with $.ajax from the wiki api
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:39
@Pagnito hey
Pagnito
@Pagnito
Apr 15 2017 22:39
@MathematicsCoding sup
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:39
Can you help me with wikipedia viewer?
Pagnito
@Pagnito
Apr 15 2017 22:39
@MathematicsCoding what the prolem
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:40
With search box
Pagnito
@Pagnito
Apr 15 2017 22:40
link
Pagnito
@Pagnito
Apr 15 2017 22:40
dope design
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:40
Thanks
Pagnito
@Pagnito
Apr 15 2017 22:42
what are you tryin to do with this
$('#search').html(wikiUrl, function() {
});
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:42
well..
I guessed.. I just want to search anything in box then the link show up
You know?
For example you search "cat" then wiki link with that search result show up
Pagnito
@Pagnito
Apr 15 2017 22:44
when u use html $('selector')
is wher u put the html into
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:44

search to selector?

...
Pagnito
@Pagnito
Apr 15 2017 22:45
so instead of using $('#search') u use the id for the div u want to write the results into
its self explanatoy
its what u use to select which element to manipulate
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:45
oh
id = "selector"?
Pagnito
@Pagnito
Apr 15 2017 22:46
so if i want to put cat into div id="animals"
i say $('#animals').html('cat')
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:46
oh
I understand
nadir199
@nadir199
Apr 15 2017 22:46
@nadir199
hello
i have this problem while trying to get data with $.ajax from the wiki api Access Control Allow Origin
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:47
What about wikiUrl?
Pagnito
@Pagnito
Apr 15 2017 22:47
just put it wher u put it, except remove the function
html method doesnt have that capability
to put a function into it
it can write into DOM what u put inside the paranthesis
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:49
I have problem..
Pagnito
@Pagnito
Apr 15 2017 22:49
sup
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:49
$('.searchbox').on("click", function() {
    $('#selector').html(wikiUrl) {}
  });
});
No function right?
Pagnito
@Pagnito
Apr 15 2017 22:49
lol
remove that function
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:49
Yeah
Pagnito
@Pagnito
Apr 15 2017 22:50
and u dont have to the #slector
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:50
I will add it
Pagnito
@Pagnito
Apr 15 2017 22:50
first create a html div to use as results
and name it what u want
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:51
name any id you mean?
I need to fix this brackets...
 $('.searchbox').on("click", function() {
    $('#selector').html(wikiUrl() {  
    });
  });
});
'selector' inside that ()?
Pagnito
@Pagnito
Apr 15 2017 22:54
like i was saying if i want to make a div that will have a list of my pets ill make a div <div id="animals></div>
and say $('#animals).html('cat')
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:54
yea
Pagnito
@Pagnito
Apr 15 2017 22:54
and my string 'cat' will print into animals div
$('.searchbox').on("click", function() {
$('#selector').html(wikiUrl)
});
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:55
Will that work with input box?
  $('.searchbox').on("click", function() {
    $('#selector').html('selector') {
    });
Well that is what I have right now
Pagnito
@Pagnito
Apr 15 2017 22:55
$('.searchbox').on("click", function() {
$('#selector').html('selector')
});
remoe that bracket that i just removed
Saboor Malik
@MathematicsCoding
Apr 15 2017 22:56
there..
oh
okay done
That solve brackets problem too..
What I do with wikiUrl?

Pagnito
@Pagnito
Apr 15 2017 23:00
depends
the way ur doin it will only give one result
but if u want to do it right, you have to call the api with your input
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:01
each search result?
Pagnito
@Pagnito
Apr 15 2017 23:01
yea
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:01
Thats fine..
Pagnito
@Pagnito
Apr 15 2017 23:01
everytime u hit the search button you need to call api to put out multiple results
right now dont even have the right api link
right now u dont even have the right api link*
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:03
  $('.searchbox').on("click", function(wikiUrl) {
    $('#selector').html('selector')
    });
wikiUrl's value is not right?
Pagnito
@Pagnito
Apr 15 2017 23:04
yea that is just the link to their main page
all http requests have commands in their url
and keywords as to which direction u want ur call to go to
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:05
..
Pagnito
@Pagnito
Apr 15 2017 23:05
i know it all sounds confusing as fck right now
dude when i was going thru this, i was going nuts
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:05
lol
Pagnito
@Pagnito
Apr 15 2017 23:05
this challenge is the hardest part is findin the api link
i would give it to u, but i would be doing u a dis service to just give it away
what i can do tho, is give u a video u can watch which pretty much gives it away but gives u a good explanation to understand what i mean
hold on
i go to this guys channel whenever i really hit the wall
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:08
okay
Do I have to use .getJSON method?
Pagnito
@Pagnito
Apr 15 2017 23:08
i think u can, im not sure, i cant remember, it doesnt really matter, if getJSON doesnt work, just use ajax
i like to use ajax, it looks confusing at first, but once u use it a few times, u wont rly want to use getjson much cuz error handling is easier with ajax
with getjson there isnt really any error handling
u have to set set
settimeout function
basically it gives the getjson a ceertain amount of time to work, and if it doesnt , then timeout happens and it cancels the request and print w/e u want it to like "sorry cant get ur info"
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:10
Up to part 4 right?
for that project
Pagnito
@Pagnito
Apr 15 2017 23:11
part4?
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:11
That channel
Part 0, 1, 2 etc
Pagnito
@Pagnito
Apr 15 2017 23:11
oh, i dunno watch however many parts u need
i only watched 0
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:11
okay
i'll watch brb
Pagnito
@Pagnito
Apr 15 2017 23:11
depends which parts of javascript u have waknesses in
Gabriel
@revolvingwinds
Apr 15 2017 23:18
I am trying to make the background color of my horizontal nav bar stretch the entire page, right now it is only covering the three links I have in my nav bar. Can anybody help?
Pagnito
@Pagnito
Apr 15 2017 23:19
lemme see the link
@revolvingwinds
Pagnito
@Pagnito
Apr 15 2017 23:22
first advise i wnna give u is stack ur css

body{
font-family: 'Lato', sans-serif;}

navlist{

list-style-type:none;
margin:5px;padding:5px;
overflow:hidden;}
li{
float:right;}

nav1{

display: block;
padding: 8px;
background-color: #0328a0;
color:white;}

nav2{

display: block;
padding: 8px;
background-color: #0328a0;
color:white}

nav3{

display: block;
padding: 8px;
background-color: #0328a0;
color:white;
}

it becomes MUCH easier to read
but yea im look right now
@revolvingwinds u gave ur links backgrounds, u should give ur <ul id="navlist"> the background
and stretch it to width:100%
Gabriel
@revolvingwinds
Apr 15 2017 23:24
@Pagnito I am brand new to coding so this is very challenging for me. I had to look up how to even create a nav bar, so I don't really understand your advice >.<
@Pagnito when you say stack are you just talking about how the code is viewed in CSS?
Pagnito
@Pagnito
Apr 15 2017 23:26
@revolvingwinds yea
@revolvingwinds see how i copied ur css code but stacked
Gabriel
@revolvingwinds
Apr 15 2017 23:26
So stacking means using the "tab" button I'm assuming
Pagnito
@Pagnito
Apr 15 2017 23:27
@revolvingwinds nah, after every attribute u give to the element, just press enter to go to the next line
Pagnito
@Pagnito
Apr 15 2017 23:27
the editor itself is programmed for u to stack it
Gabriel
@revolvingwinds
Apr 15 2017 23:27
@Pagnito got it now!
Pagnito
@Pagnito
Apr 15 2017 23:27
and it will tab everything for u
@revolvingwinds not everything but most of the time it will
Gabriel
@revolvingwinds
Apr 15 2017 23:28
@Pagnito is there a way to PM you directly
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:29
hover over to his profile picture
Pagnito
@Pagnito
Apr 15 2017 23:29
@revolvingwinds i dunno, i dont think so to be honest, but im on here everyday, just holler if anything
CamperBot
@camperbot
Apr 15 2017 23:29
holler back!
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:29
@Pagnito well?
Pagnito
@Pagnito
Apr 15 2017 23:30
@MathematicsCoding what do u expect ur code to do so far
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:30
..............
Pagnito
@Pagnito
Apr 15 2017 23:30
@MathematicsCoding oh yea the api lol
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:30
lol
Pagnito
@Pagnito
Apr 15 2017 23:30
@MathematicsCoding holdo n
Gabriel
@revolvingwinds
Apr 15 2017 23:30
Poor @Pagnito hahaha getting pinged by errbody
Pagnito
@Pagnito
Apr 15 2017 23:31
@revolvingwinds its cool, haha u have no idea how much help i recieved by one single person that is my savior, they call the One, SkyCode01
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:31
lol
Who's SkyCode01? SkyCoder01 is the best
Pagnito
@Pagnito
Apr 15 2017 23:31
that guys helped me aALOT lol
yea skycoder is the man
yea ur api url is sitll the same
Gabriel
@revolvingwinds
Apr 15 2017 23:32
so its @SkyCoder01
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:32
Didnt I change the url?
Pagnito
@Pagnito
Apr 15 2017 23:33
nah
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:33
I did...
Gabriel
@revolvingwinds
Apr 15 2017 23:33
@MathematicsCoding yup I just wanted to pull him up to follow him
Pagnito
@Pagnito
Apr 15 2017 23:33
ur changed the random one
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:33
shit
yea
Pagnito
@Pagnito
Apr 15 2017 23:34
@revolvingwinds but yea just holler at me whenver, ill do my best to help u
CamperBot
@camperbot
Apr 15 2017 23:34
holler back!
Pagnito
@Pagnito
Apr 15 2017 23:34

@revolvingwinds #navlist{
list-style-type:none;

overflow:hidden;
background:blue;
width:100%;
}

Saboor Malik
@MathematicsCoding
Apr 15 2017 23:34
there you go..
Gabriel
@revolvingwinds
Apr 15 2017 23:35
What display do you guys recommend in codepen also @Pagnito were you able to figure out how I can get the blue background to stretch the entire horizontal part of the page?
@Pagnito nevermind ha
Pagnito
@Pagnito
Apr 15 2017 23:35
@revolvingwinds hehe
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:35
@Pagnito i changed
Pagnito
@Pagnito
Apr 15 2017 23:36
@MathematicsCoding stilll not right >.<
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:36
what..
Pagnito
@Pagnito
Apr 15 2017 23:37
u should start with
Gabriel
@revolvingwinds
Apr 15 2017 23:37
@Pagnito that did not work
Pagnito
@Pagnito
Apr 15 2017 23:37
and now u need to give it action
@revolvingwinds link
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:37
yeah
Pagnito
@Pagnito
Apr 15 2017 23:37
i forgot what the question mark means in the url fck
but anyways
there is a shit load of diffirent actions
action=opensearch&search=
so
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:38
Yeah I chose opensearch
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:38
That right one?
Gabriel
@revolvingwinds
Apr 15 2017 23:38
@Pagnito that did not work, and what do you mean I need to give the link action
Pagnito
@Pagnito
Apr 15 2017 23:38
yea but in the wrong part
@revolvingwinds i was talkong to saboor lol sorry
@revolvingwinds give me link to ur page again
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:39
lol
Pagnito
@Pagnito
Apr 15 2017 23:40
@MathematicsCoding but yea u put opensearch in the worng part of the url
Is that right?
thats what i used
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:40
oh
Gabriel
@revolvingwinds
Apr 15 2017 23:40
@Pagnito ok so I did something
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:40
var inputStuff1?
Pagnito
@Pagnito
Apr 15 2017 23:40
inputStuff is the id of my input
Gabriel
@revolvingwinds
Apr 15 2017 23:41
I added the width attribute to "#navlist" like you told me to and that didnt work
Pagnito
@Pagnito
Apr 15 2017 23:41
so u store the value of the input into a variable, which i called inputStuff1 and add into he url
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:41
so for me id selector?
selector*
Gabriel
@revolvingwinds
Apr 15 2017 23:42
then I added it to "li" element and it did, but now my buttons are not floating next to each other like before
@Pagnito then I added it to "li" element and it did, but now my buttons are not floating next to each other like before
@Pagnito what I don't get is why there is still a white border
nadir199
@nadir199
Apr 15 2017 23:44
Hey,i'm getting a "Access-Control-Allow-Origin" error when trying to get data from wiki api using $.ajax or $.getJSON
flansolo
@flansolo
Apr 15 2017 23:44
use https
Pagnito
@Pagnito
Apr 15 2017 23:45
@revolvingwinds ok so take background color away from ur buttons
nadir199
@nadir199
Apr 15 2017 23:45
for the link?
Pagnito
@Pagnito
Apr 15 2017 23:45
@revolvingwinds give that backgroun color to the same element that has width:100%
flansolo
@flansolo
Apr 15 2017 23:45
in your api call @nadir199
nadir199
@nadir199
Apr 15 2017 23:46
oh, how
Pagnito
@Pagnito
Apr 15 2017 23:46
@revolvingwinds when u use unordered list, it makes a list which is eseentially a stacked element
@Pagnito but u can use display:inline-block; to display the list inline, tho in ur code it doesnt seem to work right now, im tryin to find out why
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:53
I give uop
up
flansolo
@flansolo
Apr 15 2017 23:54
i give down
Pagnito
@Pagnito
Apr 15 2017 23:54
@revolvingwinds if u want ur ul list to display in line
@revolvingwinds li{
display:inline-block;
}
make sure u use li {
not id or class
do this tho

navlist li{

display:inline-block;
}
Saboor Malik
@MathematicsCoding
Apr 15 2017 23:56
I'm selling this laptop
Pagnito
@Pagnito
Apr 15 2017 23:56
in case u make another list in ur page

navlist li{

display:inline-block;
}
Gabriel
@revolvingwinds
Apr 15 2017 23:57
@Pagnito thanks I wasn't sure what the difference between inline and floating was
CamperBot
@camperbot
Apr 15 2017 23:57
revolvingwinds sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 204 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Apr 15 2017 23:57
damn forgot i still havent solved my own bug T.T now getting back to my code is depressing lol
@revolvingwinds np