These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Feb 2017
jdl2017
@jdl2017
Feb 22 2017 00:00
Good call
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:02
<script>
  $(document).ready(function() {

  var coordinates = $.getJSON("https://ipinfo.io/json", function(json) {
  $(".message").html(JSON);
});
@SkyCoder01 what is wrong am I doing
jdl2017
@jdl2017
Feb 22 2017 00:02
@moigithub got it
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:03
<script>
  $(document).ready(function() {

  var coordinates = $.getJSON("https://ipinfo.io/json", function(json) {
  $(".message").html(JSON);
});

      // Only change code above this line.
    });

  });
</script>
sorry this is my code
Mac
@itchick85
Feb 22 2017 00:05
Im almost to the last part of my portfolio page and wondering how all of a sudden my background on my last page is doing something weird any idea why? http://codepen.io/itchick85/pen/vgvrBX
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:07
can someone help me with Json Jquery plz
Nicholas Steffen
@nicksteffen94
Feb 22 2017 00:15
does anyone know of a good library of quotes to use for the random generator project?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:21
<script>
    $(document).ready(function() {

      var coordinates = $.getJSON("http://ip-api.com/json", function(json) {
      console.log("Latitude is: " + $json.lat);
    });

          // Only change code above this line.
        });

      });
</script>


<div class="container-fluid">
    <div class="row text-center">
        <h2>Local Weather</h2>
        <h3> json.lat </h3>

    </div>

</div>
<div class="row text-center">
    <div class="col-xs-12">
        <button id="getMessage" class="btn btn-primary">
        Get Weather
      </button>
    </div>
</div>
</div>
guys can you plz tell me why I am not getting latitude?
Moisés Man
@moigithub
Feb 22 2017 00:26
@pshiwakoti1 check ur browser devtools console
IF u have any errors
(F12 on most browsers to open devtools)
@pshiwakoti1 also.. ur variable function(json) { <-- is named json.. NOT $json
Chiu Yong
@chiuyong
Feb 22 2017 00:28
hello
Can some veteran, experienced with web dev , help me?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:30
@moigithub I am using CodePen for development
Chiu Yong
@chiuyong
Feb 22 2017 00:31
Is there any veteran, experienced with web dev, that can help me?
Moisés Man
@moigithub
Feb 22 2017 00:31
codepen have its own "console" version.. but errors dont show there.. u need to open ur Browser console @pshiwakoti1
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:31
ok
hi @moigithub I opened the dev tool but I don't know how to read the error message. Where is it displayed?
Moisés Man
@moigithub
Feb 22 2017 00:34
there are many tabs when u open devtools..
one of em is called console
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:34
ok
Moisés Man
@moigithub
Feb 22 2017 00:36
errors usually shows on red text..
and warnings on yellow
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:37
```
s.codepen.io/boomerang/iFrameKey-e9a4b15c-d399-e669-d8fd-890fc3cdfaab/index.html:7 Uncaught ReferenceError: $ is not defined
s.codepen.io/boomerang/iFrameKey-3a638d8e-c8ef-6f14-0933-c4a3d583076d/index.html:18 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-0a68c9cf-0958-f09e-bb0a-44e070749c02/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-c04407cc-f661-54b3-f9d8-910a87e24d06/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-c8479860-ad23-3b53-028d-e4c63ee7ca42/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-ab7a3f50-3a3b-0a60-e7ae-6dfb09eaf87b/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-73acd43c-3acc-ed16-347b-2821a9f45c6b/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-e25bf866-6727-363c-9445-dda6c491a625/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-2a4ef54c-964b-aa67-fd3b-19d92bed2a9c/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-c117d50b-e680-9b53-921c-cdaa956996c6/index.html:9 Uncaught SyntaxError: Unexpected token .
s.codepen.io/boomerang/iFrameKey-c8acd110-1e24-29c1-a360-cbd570e8cb43/index.html:9 Uncaught SyntaxError: Unexpected token .
s.codepen.io/boomerang/iFrameKey-d4ded61e-0919-bd05-9033-9a20563adf13/index.html:9 Uncaught SyntaxError: Unexpected token .
s.codepen.io/boomerang/iFrameKey-8ef1fbee-f8c0-da91-1a2b-faf4a301ca91/index.html:9 Uncaught SyntaxError: Unexpected token .
s.codepen.io/boomerang/iFrameKey-7a120214-5877-8507-5a06-db4e6c32f9b8/index.html:9 Uncaught SyntaxError: Unexpected identifier
s.codepen.io/boomerang/iFrameKey-5a189a60-5883-8daa-c560-754b13d68677/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-7094dd02-c5fc-88c8-8156-5dbfa7a55988/index.html:12 Uncaught SyntaxError: Unexpected token <
s.codepen.io/boomerang/iFrameKey-e7435eb9-e6c3-bd3e-904d-ce009b06f65b/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-29553ae3-9abf-bb1e-5d87-e5dc1faaa2af/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-bbd68c30-5f01-9b85-f0f5-f407b46f9be5/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-d8416bbf-3644-8179-8b2b-a7179deee4d9/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-63402783-7ee3-ef1a-c399-5027f1efe4bd/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-b85b427f-39c8-3439-7e98-596943c55dd4/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-336347e8-2e0a-cc15-f9a0-6940c93e5816/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-e274d7e9-c92b-2a3a-78fd-f9305b58692b/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-514e49df-4cfb-f2ce-579c-899873b8a5b9/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-10549dc2-2120-ca04-8211-476099e24b52/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-0253b0c1-a0e3-4b1e-1402-a1ced6e0d19d/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-9156aac5-6b03-6e54-24d7-0bb070bb7e2d/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-c324a799-abdf-75da-af08-f724c11ae0a8/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-659f01af-4032-8bcf-77ce-7d93763445e1/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-090c84c4-d2b6-bde7-167c-519f6e631f07/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-ae1b1834-bc38-78d1-e6c6-1355f0676c70/index.html:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-8e938bcd-99c0-abdb-a9d1-5ce9194eb72d/index.html:16 Uncaught
these are the errors I am getting
Moisés Man
@moigithub
Feb 22 2017 00:37
first error..means u need to include jquery module on ur codepen
on ur codepen... click on the cogwheel
then goto JS section
below u will find a drop down (quick add) menu
select jquery and save/close
the other error.. tells u have mismatched open/closing brackets
for every open ( u need to have a closing )
same thing for other kind of brackets ([{< >}])
Gulsvi
@gulsvi
Feb 22 2017 00:41
@nicksteffen94 Lots of people use https://quotesondesign.com/api-v4-0/
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:42
 s.codepen.io/boomerang/iFrameKey-214cfc15-9019-abec-ec2e-594c5ac66994/index.html?editors=1111:16 Uncaught SyntaxError: Unexpected token }
s.codepen.io/boomerang/iFrameKey-90e21303-62dd-0da7-1af7-7c751e32d33e/index.html?editors=1111:11 Uncaught SyntaxError: Unexpected end of input
s.codepen.io/boomerang/iFrameKey-d19ee11b-935f-676f-3bb0-d4535f8d6af1/index.html?editors=1111:11 Uncaught SyntaxError: Unexpected end of input
s.codepen.io/boomerang/iFrameKey-65feba4a-be89-a3bb-2ff5-2e922c5ff67b/index.html?editors=1111:13 Uncaught SyntaxError: missing ) after argument list
s.codepen.io/boomerang/iFrameKey-d5f4cc65-4f69-67b3-a067-0a6fa245f972/index.html?editors=1111:13 Uncaught SyntaxError: missing ) after argument list
s.codepen.io/boomerang/iFrameKey-1b908a58-c096-3059-e590-8b4a9c2e3217/index.html?editors=1111:13 Uncaught SyntaxError: missing ) after argument list
s.codepen.io/boomerang/iFrameKey-7aa63e46-a972-6d05-20c6-3b8a68daec10/index.html?editors=1111:7 Uncaught ReferenceError: $ is not defined
(anonymous) @ s.codepen.io/boomerang/iFrameKey-7aa63e46-a972-6d05-20c6-3b8a68daec10/index.html?editors=1111:7
index.html:7 Uncaught ReferenceError: $ is not defined
    at index.html:7
index.html?editors=1111:7 Uncaught ReferenceError: $ is not defined
    at index.html?editors=1111:7
(anonymous) @ index.html?editors=1111:7
index.html?editors=1111:14 Uncaught SyntaxError: Unexpected token }
index.html?editors=1111:7 Uncaught ReferenceError: $ is not defined
    at index.html?editors=1111:7
(anonymous) @ index.html?editors=1111:7
these are the erros I am getting right now
i added Jquery like you told me before
Moisés Man
@moigithub
Feb 22 2017 00:43
can u share ur codepen link ?
Tony Hudson
@ngohungphuc
Feb 22 2017 00:44
put on github or codepen so everyone can help you @pshiwakoti1
@ngohungphuc can you see my code now?
Moisés Man
@moigithub
Feb 22 2017 00:46
@pshiwakoti1 ok.. move everything u have inside ur <script> tag
to the script section/panel on codepen
Tony Hudson
@ngohungphuc
Feb 22 2017 00:47
@pshiwakoti1 yeah I can see your code
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:47
ok
I moved it
Tony Hudson
@ngohungphuc
Feb 22 2017 00:48
Mixed Content: The page at 'https://codepen.io/pshiwakoti1/pen/XpvdYz?editors=1111' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.
here is what I get
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:49
@ngohungphuc what do I do now
Tony Hudson
@ngohungphuc
Feb 22 2017 00:50
just a minute
Moisés Man
@moigithub
Feb 22 2017 00:50
Mixed content error means.. ur codepen url is HTTPS (secure connections)
but the content u trying to get.. comes from http (unsecure).. so u cant mix that
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:50
what to do now
Moisés Man
@moigithub
Feb 22 2017 00:50
(one way) is remove the s from https (on ur browser address bar)
http://codepen.. etc (without s)
Moisés Man
@moigithub
Feb 22 2017 00:52
u can remove the <script> tag from the JS section
no needed on codepen
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:52
now Im getting latitude 37.77 on the console
if I wana display on browser what do i have to do
Tony Hudson
@ngohungphuc
Feb 22 2017 00:53
easy
just append to some div or text
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 00:53
ok
thanks
Tony Hudson
@ngohungphuc
Feb 22 2017 00:54
$(document).ready(function() {

  var coordinates = $.getJSON("http://ip-api.com/json", function(json) {
  console.log("Latitude is: " + json.lat);
     $("p").html(json.lat);
});

});
<div class="container-fluid">
<div class="row text-center">
<h2>Local Weather</h2>
<h3> json.lat </h3>
<p></p>
</div>
here goes
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 01:00
its not displaying in html page
Tony Hudson
@ngohungphuc
Feb 22 2017 01:00
hmmm I'm just tested on code pen everything work fine
f12 go to console tab
see if any error there
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 01:01
@ngohungphuc what does the line do: $("p").html(json.lat);
Tony Hudson
@ngohungphuc
Feb 22 2017 01:01
is just write a text to your browser
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 01:01
Mixed Content: The page at 'https://codepen.io/pshiwakoti1/pen/XpvdYz?editors=1111' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
Tony Hudson
@ngohungphuc
Feb 22 2017 01:01
check in jquery document for further
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 01:04
I removed http s part and it worked fine
But I am not sure now how to add caption before latitude
I want to say latitude is 37.77
Tony Hudson
@ngohungphuc
Feb 22 2017 01:09
<p id="lat"> Latitude is :</p>
<p id="lon"> Lon is :</p>
$("#lat").html(json.lat);
$("#lon").html(json.lon);
Moisés Man
@moigithub
Feb 22 2017 01:09
u can create a html structure on ur page.. and set an id..
ie:
<p>Latitude is: <span id="lat">00</span></p>
then use that id on ur selector
$("#lat").html(json.lat);
iso
@iso1048
Feb 22 2017 01:53
how do i align an image in the centre of a div element?
Gulsvi
@gulsvi
Feb 22 2017 01:58
@gothamknight Show us your code that isn't working
iso
@iso1048
Feb 22 2017 02:01
blob
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5"><a href="http://codepen.io/gothamknight/full/qaNyAv" target="_blank"><img src="https://scontent-syd2-1.xx.fbcdn.net/v/t35.0-12/16910976_1954849028069332_1597717425_o.png?oh=c0d6e6abea0d56d2b719ab782ee60f8a&oe=58AF3D5B" alt="Tribute page by GothamKnight" class="tributepage-image portfolioimages-border"></a></div>
<div class="col-md-5"><a href=# target="_blank"><img src="https://scontent-syd2-1.xx.fbcdn.net/v/t35.0-12/16931177_1954856464735255_295668836_o.png?oh=64ef5f25125018c85cd2d0850b6981f1&oe=58AF3A6A" alt="Blank" class="greyblank-image portfolioimages-border"</div>
<div class="col-md-1"></div>
So the images are just placed randomly and i do not know how to change it
Gulsvi
@gulsvi
Feb 22 2017 02:04
@gothamknight It looks better if you go to Settings -> CSS and use Bootstrap 3 instead of Bootstrap4 Alpha: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Then you can add the center-block class to your images to center them
iso
@iso1048
Feb 22 2017 02:05
where do i add the code you supplied?
Gulsvi
@gulsvi
Feb 22 2017 02:06
@gothamknight The class or the bootstrap link?
Mac
@itchick85
Feb 22 2017 02:18
Trying to figure out what is going on with the bottom half of my portfolio input please?
http://codepen.io/itchick85/pen/vgvrBX
Vered Rekanati
@veredrec
Feb 22 2017 02:23
@itchick85 I think it something with the divs, I think you didn't close some of them.
@itchick85 I usually write in a comment next to each closing div what it closes. It's helpful when you have a lot of divs.
Mac
@itchick85
Feb 22 2017 02:25
there closed
Vered Rekanati
@veredrec
Feb 22 2017 02:28
@itchick85 If I saw correctly 3 of them (towards the end) are not closed. Worth checking :)
@itchick85 Maybe you can also check the height of the pages, maybe that's what causes the bottom half look.
Aftab Parvez
@aftabparvez
Feb 22 2017 02:36
Hey! Does anyone know where I can find forms to recreate and practice?
Tyler Moeller
@TylerMoeller
Feb 22 2017 02:39
@aftabparvez Try codepen, search for "form" and sort by popularity. There are some nice forms out there.
Aftab Parvez
@aftabparvez
Feb 22 2017 02:39
Thanks @TylerMoeller
CamperBot
@camperbot
Feb 22 2017 02:39
aftabparvez sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1506 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Aftab Parvez
@aftabparvez
Feb 22 2017 02:44
Wow! These look amazing. Thanks for the help Tyler!!
Pantamia
@Pantamia
Feb 22 2017 02:47
I am doing the personal portfolio webpage and I went to see the example and i changed the last 2 letters of the examples webpage URL to something and clicked enter, then it tried to download malware how is that possible????
can somebody tell me why Im having problem
Aftab Parvez
@aftabparvez
Feb 22 2017 02:49
On the last line in Javascript there’s a typo
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 02:49
oh ok
Aftab Parvez
@aftabparvez
Feb 22 2017 02:49
You need to remove one “var” @pshiwakoti1
var var remainingURL to var remainingURL
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 02:50
i got it
Tyler Moeller
@TylerMoeller
Feb 22 2017 02:50
no problem, @aftabparvez Have fun :) show us what you come up with
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 02:50
thanks
@aftabparvez can you tell me if my latitude and longitude variables are set right
Pantamia
@Pantamia
Feb 22 2017 02:51
anyone know why that if you change the last 2 letters in a codepen.io link, it brings you to a malware page ? ;o
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 02:54
hello @aftabparvez
anyone else can u plz let me know if my latitude and longitude variables are set right. is that the way to assign jquery data into a variable?
Tyler Moeller
@TylerMoeller
Feb 22 2017 02:56
@pshiwakoti1 with getJSON, you have to do everything inside the callback:
$(document).ready(function() {
  $.getJSON(url, function(json) {
      // the "json" variable can only be used here
    });
  // here the "json" variable is undefined
});
// here the "json" variable is also undefined
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 02:56
oh i see
i got it
why am i getting error now @TylerMoeller
can u look at my codepen
i moved my urls insde the CallBack
is that what Im supposed to do?
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:00
@pshiwakoti1 This is what I see:
$(document).ready(function() {

    var coordinates = $.getJSON("http://ip-api.com/json", function(json) {
        $("p1").html(json.lat);
        $("h1").html(json.lon);
    });

    var url1 = "http://api.openweathermap.org/data/2.5/weather?lat=";
    var latitude = json.lat;
    var url2 = "&lon=";
    var longitude = json.lon;
    var remainingURL = "&appid=34a4cf171b5fa89cd0ea82794d903fdb&units=metric";

});
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:00
ok thanks
what is that two lines do?
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:01
Everything has to be done inside your callback
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:01
p1 ad and h1
will it print it on html page?
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:02
@pshiwakoti1 It's the jQuery .html() method that we learned here: https://www.freecodecamp.com/challenges/change-text-inside-an-element-using-jquery
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:03
I can define javascript varaibles inside document.ready function right
im finding jquery difficult
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:08
jQuery is a library built with javascript in the end :) It never hurts to go through some of the challenges again if you're running into problems.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:11
so looking at my present codepen can u tell me if my latitude and longtitude variables will get the right values from the api?
will the assignment statements work?
how do I display my url link to my page? can you please suggest?
hi @TylerMoeller will you plz help
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:27
Access to Font at 'https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'http://codepen.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://codepen.io' that is not equal to the supplied origin. Origin 'http://codepen.io' is therefore not allowed access.
bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
    at bootstrap.min.js:7
    at bootstrap.min.js:7
    at bootstrap.min.js:7
im getting these errors
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:28
@pshiwakoti1 If I understand correctly, you are trying to show the URL you built with $('url').show();?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:28
yes
why am i getting those errors? looks like its from Bootstap
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:30
@pshiwakoti1 I think you need to read the jQuery documentation more :(
Check out the demo here: http://api.jquery.com/show/
@pshiwakoti1 Have you tried searching google for those errors?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:30
not yet
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:31
I am not familiar with the error, personally, but If I look at google, there are several possible answers
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:31
im reading what show() does
can u pls tell me why im getting those errors
i inserted BootStrap in my pincode
from the settings
Is that why?
should I remove it?
Tyler Moeller
@TylerMoeller
Feb 22 2017 03:33
@pshiwakoti1 I would have to debug it to find out. I don't have the answer
iso
@iso1048
Feb 22 2017 03:33
@SkyCoder01 the bootstrap link
Gulsvi
@gulsvi
Feb 22 2017 03:35
@gothamknight Click the "Settings" button in codepen. Click "CSS" and then copy/paste the URL to bootstrap.css
@pshiwakoti1 .show() is for showing a hidden element
.html(), .text(), .append(), .prepend() are all methods that will let you write to the page
Ken Haduch
@khaduch
Feb 22 2017 03:48
@pshiwakoti1 - those errors about Tether are due to a change in Bootstrap v4 where that tether library is required for the tooltips to work. (If you haven't found that.) I think that there must be a link that you can add to your JS settings to get it?
@pshiwakoti1 - if you go to your JS panel, add another resource, and go to the new textbox and type "tether", it will pop up a URL, just click on that and you should get it into your resource, and it should solve that problem?
@pshiwakoti1 - of course, if you don't need bootstrap.js for that particular project, you could just remove it.
Thanks @khaduch :)
CamperBot
@camperbot
Feb 22 2017 03:51
tylermoeller sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2513 | @khaduch |http://www.freecodecamp.com/khaduch
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 03:56
I will remove Bootstrap
danraybernard
@danraybernard
Feb 22 2017 03:58
Can someone help me figure out how to make the text "hey" appear over to the right of my navbar links? I had it...and then my comp crashed and forgot to save.
<nav class="container navbar navbar-inverse navbar-static-top"> <div style="width:50px float:right"> hey</div> <div style="float:left"><ul> <li><a href=#page1>About</a> </li> <li><a href="#page2">dsfdfdsf</a></li> <li><a href="">dsfsfsfe</a></li> <li><a href="">fsdfesfsef</a></li> </ul></div> </nav>
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:00
hi @khaduch can you please look at my code? http://codepen.io/pshiwakoti1/pen/XpvdYz
I believe if someone clicks on my My waether link, then it will return a json data.
I don't know what to do from here on
should I store it in a variable and access properties?
Mike Baker
@Bakermg
Feb 22 2017 04:11
help
Tom
@moT01
Feb 22 2017 04:12
@pshiwakoti1 that's probly one way to go, ...i would say to do it like you did when you got the ip stuff
whats up mike
Mike Baker
@Bakermg
Feb 22 2017 04:13
need some help on the record collection function to update object
Tom
@moT01
Feb 22 2017 04:14
pick what you want to set the value of and set it?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:14
can i define more than 1 ready function in jquery?
Tom
@moT01
Feb 22 2017 04:14
object[0].name = "me" ?
Mike Baker
@Bakermg
Feb 22 2017 04:14
how to set the value from the args from the function
Tom
@moT01
Feb 22 2017 04:15
@pshiwakoti1 i have never seen it, ...probly not good practice but i guess it may be possible
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:15
ok
Tom
@moT01
Feb 22 2017 04:15
lemme find the challenge @Bakermg
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:16
What I am getting stucked is how to call a url and store the result in a variable?
Mike Baker
@Bakermg
Feb 22 2017 04:16
you can put as many functions as you want in $('document').ready
Ken Haduch
@khaduch
Feb 22 2017 04:16
@pshiwakoti1 - I don't have much time to work on this, but your "link" that you are displaying is not clickable - you are not really generating a valid anchor tag. What you are currently generating is a link that has no href= value - <a href="">http://api.openweathermap.org/data/2.5/weather?lat=XXXXX&amp;lon=-XXXX&amp;appid=XXXXXX&amp;units=metric</a> is the code (with the coordinates and API key X'ed out) - you have to put the URL into the href attribute for it to be clickable. But you really don't want to do that, although it might be a good step to show you the return data.
Mike Baker
@Bakermg
Feb 22 2017 04:17
how are you calling the url
here is my pencode Mike
I need some guidance how to procced forward from here on
Ken Haduch
@khaduch
Feb 22 2017 04:19
@pshiwakoti1 - if you change the code for setting the URL into your anchor to this: $('a').attr("href", url);, then you can click on the link and it will bring up the weather for that particular location - the JSON data will appear in the browser window.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:19
I want to store it in avariable and only show some of the properties
can I do that
Tom
@moT01
Feb 22 2017 04:20
@Bakermg so what's the problem?
Ken Haduch
@khaduch
Feb 22 2017 04:20
@pshiwakoti1 - the next step is to make a $.getJSON request to get the weather info from the site - it will return the data and you can extract the appropriate information from it.
Tom
@moT01
Feb 22 2017 04:20
i think what i said was pretty accurate, ...there's a series of tests you will need to do to find out how you want to update the object
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:22
I got the data on my browser @khaduch thanks
CamperBot
@camperbot
Feb 22 2017 04:22
pshiwakoti1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2514 | @khaduch |http://www.freecodecamp.com/khaduch
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:22
But I don't want to show this to the user
I want to store it in avariable before it gets displayed
when the user clicks a link I want to show maybe 4 properties of weather
Ken Haduch
@khaduch
Feb 22 2017 04:23
@pshiwakoti1 - yes, so you need to change your JavaScript code to make a request using $.getJSON or something similar.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:24
before I do $('a').attr("href", url); should I call $.getJSON
Mac
@itchick85
Feb 22 2017 04:25
There is some strange thing my portfolio page is doing need help nothing I tried so far has fixed the issue. http://codepen.io/itchick85/pen/vgvrBX
Johnny
@jtan3
Feb 22 2017 04:27
@itchick85 what's the problem?
Ken Haduch
@khaduch
Feb 22 2017 04:28

@pshiwakoti1 - you can use code similar to this:

  function getWeather() {
    $.ajax({
      url: "http://api.openweathermap.org/data/2.5/weather",
      //jsonp: "jsonp",
      dataType: "jsonp",
      data: {
        //id: "2172797",
        APPID: "YOUR_APPID_HERE",
        lat: latitude,
        lon: longitude,
        units: "metric" // get units in Celsius
      }
    }).done(function(data) {
      console.log("data = " + data);
      console.log("JSON String data =" + JSON.stringify(data));
      $("#msg").text(JSON.stringify(data));
    });
  }

Although I haven't tried that exact incantation lately, what it does is to take the latitude and longitude values, along with your APPID (you have to tweak those settings as appropriate) and it should return the JSON data as data in the .done function. (You might want to review the details of this function on the jQuery site - http://api.jquery.com/jQuery.ajax/)

You can then extract the data, which you have to figure out the particulars of, but it will be a JSON object that will have the values as you saw in your browser when you clicked the link. Then you can write those out to the HTML document as you wish.

CamperBot
@camperbot
Feb 22 2017 04:28
khaduch sends brownie points to @pshiwakoti1 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @pshiwakoti1 |http://www.freecodecamp.com/pshiwakoti1
Mac
@itchick85
Feb 22 2017 04:28
the image for page four not showing then my footer is mess up @jtan3
Johnny
@jtan3
Feb 22 2017 04:35
@itchick85 you need to check your closing divs
@itchick85 page3 is missing its closing div
Mac
@itchick85
Feb 22 2017 04:37
@jtan3 where tho because they all look closed
Johnny
@jtan3
Feb 22 2017 04:37
@itchick85 if you click on the div with page3
Ken Haduch
@khaduch
Feb 22 2017 04:37
@itchick85 - use the "Tidy HTML" option in the HTML panel (on the right) and then look at the indentations of the different sections. There are a few missing </div> tags near the bottom. Clean those up and it looks better.
Johnny
@jtan3
Feb 22 2017 04:38
@itchick85 it should highlight the closing div
@itchick85 i think you nested page4 section in page3
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:43
@khaduch I tried to use your function
and I called it from my html button
It doesn't display anything
can you please look at my CodePen
Ken Haduch
@khaduch
Feb 22 2017 04:51
@pshiwakoti1 - I'll spend a couple minutes, because I'm on my way to bed... but I came back to see if I could check out what you have.
@pshiwakoti1 -= you actually have to call the function getWeather to have it return any information. Call it after you get the return from your location code.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:57
ok @khaduch thanks for your help.
CamperBot
@camperbot
Feb 22 2017 04:57
pshiwakoti1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: pshiwakoti1 already gave khaduch points
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 04:57
Im trying the way you told me to do
can you please clarify what you mean by you actually have to call the function getWeather to have it return any information. Call it after you get the return from your location code.
playingwithinfinity
@playingwithinfinity
Feb 22 2017 04:59
I just don't get Minimax!
Ken Haduch
@khaduch
Feb 22 2017 05:02
@pshiwakoti1 - there have to be some changes. The scope of the variables "latitude" and "longitude" are local to your initial $.getJSON function, so I made a change to the function to pass those values to it. I forked a copy of your pen with the changes - just to make it easier because I'm fading out... Here is the link - you can see where I added the call getWeather(latitude, longitude); after your location callback runs. Then I added a div in your HTML panel with the ID of "msg", because my function is dumping the raw weather data out there. You have to take it from there.
@playingwithinfinity - I haven't gotten into it, yet, but there was this article that came up in the freecodecamp email a day or two ago: https://medium.freecodecamp.com/how-to-make-your-tic-tac-toe-game-unbeatable-by-using-the-minimax-algorithm-9d690bad4b37#.d08xira9g - it looks like it might be helpful, if you haven't seen it?
at least I hope that helps...
khaduch @khaduch - and now going offline for the night... happy coding all!
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:28
can someone else help me?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:45
anyone here
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:45
Goodnight campers, I'm trying to concatenate numbers in the input bar, doing the calculator project. I can't find the way to make that happen in a coherent way though. It looked pretty straight forward, but every time I press a button the input shows "undefined" before the number. Weird stuff.
https://codepen.io/francodanussi/pen/JEgVYo
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:46
can anyone help?
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:46
@pshiwakoti1 what are you doing? Can I help you?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:46
Franco look at my CodePen
im trying to display the temperature data from Open Weather api I extracted from
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:47
Yes, I opened it.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:47
does my code make sense?
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:47
your getWeather() method?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:47
what about it
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:48
Tell me where I should look
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:48
I want to know how to display in html section
I believe I have the weather data ready
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:49
yes
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:49
someone helped me write getWeather() funcition
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:49
You got that right, I'm looking the JSON returned
Ok. You 've got to access the temp property and set it to an html with JQuery or with querySelector
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:51
whats that mean
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:52
You should declare a div in html, and assign that an id, then in javascript declare the innertext of that div equal to the JSON temp property
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:52
oh ok Let me do that. I will be right back
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:52
Ok
document.querySelector('.weather').innerText = data.weather[0].main;
you can use that as an example, but of course following your id and your JSON structure
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:55
document.querySelector('.temp').innerText = data.weather[0].main;
would that work. I have div class=temp in hteml
do I give #
can you please look at my code now?
Franco Javier Danussi
@francodanussi
Feb 22 2017 05:56
Let me see
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 05:59
are you there
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:00
Yes
Your codepen has not changed according to my browser, have you saved your progress?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:00
yes I have
let me give you the url
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:02
Ok
first
if you used ID then you should call the querySelector("#temp")
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:02
ok
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:03
Second, check the structure of your JSON, how would you access the temp property?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:03
Im getting mixed content error on my console
main.temp would give me temperature
looking at the OPen Weather API
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:05
Are you sure? check the results of your calls with alerts in your console, or with console.log
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:05
yes
Im getting mixed content errors in my console
how do I get rid of that?
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:08
I can't see that
console.log your data, the entire JSON
and then access step by step to the desired value
that's a good way to debug
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:09
ti doesnt show anything on the console
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:10
Make sure that you can see your JSON in the console, and then make sure that you are giving the proper instructions
Ok, then you can try opening the generated URL in a blank a page so you can check the JSON
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:10
I was getting the json data earlier on my browser
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:11
I noticed that
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:11
But now all of a sudden I can't see it
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:12
Try to get the JSON again
Chris Cullen
@123xylem
Feb 22 2017 06:12
I Get this error when I try to load my paper.js Examples from a fresh download with no modifications...IVE tried dloading 3 different versions but still no worky.
Any help!!!??
Failed to load resource: net::ERR_FILE_NOT_FOUND paper-full.js ---- style.css
Franco Javier Danussi
@francodanussi
Feb 22 2017 06:16
@pshiwakoti1 Wish you good luck, I'm going to bed. Erase the changes and get the JSON again, then try to assign the content to the html with JQuery or QuerySelector, you are almost there
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:21
@pshiwakoti1 it has to do with https security
the previews both work here :smile: but if you got to the http:// version you should be able to do everything
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:26
yes I am doing without https
just http url
@donofriov will you please let me know why I am not able to see data on my browser. I was seeeing it before
that isn’t what you want
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:28
it worked
but Im not able to filter out the json data
how do I display in html
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:28
that url definitely doesn’t work
I would suggest simplying your second api call down
you use .getJSON to make your first request, but .ajax for your second one
why not just use .getJSON again?
mscirocco8
@mscirocco8
Feb 22 2017 06:30
hey im having trouble with boostrap. Im trying to get my bulletpointed facts to be centered so i made 3 divs in a div row but my center row goes all the way to the left side bc the first and third divs have nothing in them
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:31
do you want the 3 divs to be side by side, or on top of each other?
mscirocco8
@mscirocco8
Feb 22 2017 06:32
i want to have a div 3 col wide with nothing in it, a 6 col wide div where I can put text and a list in it, and a 3 col wide div with nothing in it
like so that the text is centered in a middle column on the screen
Johnny
@jtan3
Feb 22 2017 06:32
@mscirocco8 do you mind posting your link?
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:32
ok cool, you can use offset
so you actually don’t even need the first and third div
you can do a col-6 offset- 3 on the one div and it should center it
may not be the exact right numbers, but play around with that and see where you end up
mscirocco8
@mscirocco8
Feb 22 2017 06:33
kk
oh it worked tysm @donofriov
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:34
@donofriov it worked. I am able to get Rain data
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:34
no problem!
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:34
But I still don't know how to filter out the data from API
for each data do I have to do document.querySelector('#temp').innerText = data.weather[0].main;
off course last parameter will change
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:35
can you save your pen so I can see the updated code?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:35
sure
pls don't access htts
use http
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:35
i am but just need you to save real quick
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:36
saved
Albert L. C.
@sirus3020
Feb 22 2017 06:36
guys how can i push an object to an array if the object name is from another array?

var streamerStatus = [];
var streamers = ['x', 'y', 'z'];

for (var i = 0; i < streamers.length; i++){
streamerStatus.push({streamers[i]: 'true'});
}

Vincent D'Onofrio
@donofriov
Feb 22 2017 06:40
@pshiwakoti1 i don’t see your code working on codepen.. so it’s really difficult to help you debug
Chris Cullen
@123xylem
Feb 22 2017 06:40

GET file:///C:/Users/Chris/Documents/Coding/Sublime/Interactive/Assets/paper.js-develop/paper.js-develop/dist/paper-full.js net::ERR_FILE_NOT_FOUND

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title></title>

<script  src="Assets/paper.js-develop/paper.js-develop/dist/paper-full.js"></script> //THIS FILE!!!!!
</head>
<body>
<h1>Hi</h1>
</body>
</html>

WHy cant my html find my paper-full.js file!?/?

Vincent D'Onofrio
@donofriov
Feb 22 2017 06:40
oh wait it’s working now! @pshiwakoti1 weather[0].main is correct
for me it says Fog on your page now
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:41
ok great
but Im not good at json
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:41
you have exactly what you need :)
.getJSON is a lot simpler than .ajax in my opinion
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:42
how do I access other objects ? I want to display lot more properties
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:42
@123xylem what directory is your html file in
@pshiwakoti1 data is your starting point
so everything is going to be data. something
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:43
ok
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:43
you’ll notice that in the JSON response, weather has two sets of braces before the next code
Chris Cullen
@123xylem
Feb 22 2017 06:43
@donofriov C:\Users\Chris\Documents\Coding\Sublime\Interactive\index.html
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:44
that means it has an object that you have to sort through which is what you need [0]
but if you were lookin at main (that includes temp/pressure/etc.) it doesn’t have that
so you can get things in there by data.main.temp
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:45
cool i got next data too
mscirocco8
@mscirocco8
Feb 22 2017 06:45
is there a boostrap option that allows me to pick any color I want?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:45
Let me explore now, I will figure out
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:45
:thumbsup:
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:46
@donofriov thanks a lot for your guidance
CamperBot
@camperbot
Feb 22 2017 06:46
:cookie: 285 | @donofriov |http://www.freecodecamp.com/donofriov
pshiwakoti1 sends brownie points to @donofriov :sparkles: :thumbsup: :sparkles:
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:46
you are so helpful
1 more thing I forgot to ask you
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:46
@mscirocco8 yeah checkout the bootstrap docs, they have a lot of good stuff there https://v4-alpha.getbootstrap.com/getting-started/introduction/
@123xylem looking now
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:47
before rain, I want to show some captions like "Humidity" or something similar. How do I write those? do I have to do that in html code?
like right now I have 10.41 but I want to display 10.41 Celcisou? how do i do that?
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:49
@123xylem sorry not sure what’s happening, that looks exactly right :(
yeah @pshiwakoti1 that’s something you want to add in html
you can use javascript to search for the html to append the text to
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 06:50
i added within my div element but can't see it
Chris Cullen
@123xylem
Feb 22 2017 06:51
@donofriov btw when i dloaded paper.js it wouldnt find its own files when i tried to run the example.html files it comes with on download
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:52
it looks like you downloaded a devlopment version which sometimes they can have bugs
and clicking the first one
paperjs-v0.10.2.zip
then unzip and go into and example and double click
should be working out of the box
@pshiwakoti1 you’re getting it now! take a time to tinker around and try to figure it out before asking questions. It makes it so much more rewarding :)
also did you run through all of the FCC challenges before attempting these projects? There’s a lot of information in those that can be used to help you compelte the projects
Chris Cullen
@123xylem
Feb 22 2017 06:56
@donofriov yea i tried .1 and even off github.. didnt work out tof the box for me tho!
Vincent D'Onofrio
@donofriov
Feb 22 2017 06:59
oh man i think is ee it
try Assets/paperjs-develop/paper.js-develop/dist/paper-full.js
in your index.html file
@123xylem /\
Chris Cullen
@123xylem
Feb 22 2017 07:07
@donofriov i took that dot out on purpose as someones said that could be the problem
when i renamed it
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:07
the name of the files and path have to be exactly the same
if you took the dot out in the folder name, then you ahve to do the same in html file
Chris Cullen
@123xylem
Feb 22 2017 07:09
@donofriov yea i know
tried them both ways
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:10
did you try taking the dots out of both folder names?
Chris Cullen
@123xylem
Feb 22 2017 07:10
@donofriov could only change the name of one
the other was a zip file i couldnt rename
maybe the problem is something to do with extraction
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:11
yeah it definitely looks like that
you don’t need to have all those folders in there
if you download fresh from their site
it should download to your download folder, right? then you can right click to unzip?
after doing that you should be able to go to the example folder and double click on any of the examples and it should work
Chris Cullen
@123xylem
Feb 22 2017 07:12
@donofriov k il try dload again
@donofriov u r a genius
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:14
:+1: :thumbsup:
woot woot
Chris Cullen
@123xylem
Feb 22 2017 07:14
@123xylem thanks
CamperBot
@camperbot
Feb 22 2017 07:14
sorry 123xylem, you can't send brownie points to yourself! :sparkles: :sparkles:
Chris Cullen
@123xylem
Feb 22 2017 07:14
@donofriov thanks
CamperBot
@camperbot
Feb 22 2017 07:14
123xylem sends brownie points to @donofriov :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @donofriov |http://www.freecodecamp.com/donofriov
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:17
no problem!
now if you want to add them to a project you are working on, just drop them into a js folder in your project and that should make it easy enough to figure out the path for index.html
Akash.D
@Akashd7
Feb 22 2017 07:23
hi guys
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:23
:wave:
this is my tribute page
the problem is that i cant center the image
can anyone please help me?
thanks :)
kirbyedy
@kirbyedy
Feb 22 2017 07:26
@Akashd7 for start change your bootstrap library from 4.0 to this one
to avoid future problems
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:26
// 20170221232339
// http://api.openweathermap.org/data/2.5/weather?lat=37.7697&lon=-122.3933&appid=34a4cf171b5fa89cd0ea82794d903fdb&units=metric

{
  "coord": {
    "lon": -122.42,
    "lat": 37.77
  },
  "weather": [
    {
      "id": 802,
      "main": "Clouds",
      "description": "scattered clouds",
      "icon": "03n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 10,
    "pressure": 1024,
    "humidity": 76,
    "temp_min": 7,
    "temp_max": 14
  },
  "visibility": 16093,
  "wind": {
    "speed": 3.6,
    "deg": 290
  },
  "clouds": {
    "all": 40
  },
  "dt": 1487746680,
  "sys": {
    "type": 1,
    "id": 478,
    "message": 0.0081,
    "country": "US",
    "sunrise": 1487774984,
    "sunset": 1487815013
  },
  "id": 5391959,
  "name": "San Francisco",
  "cod": 200
}
Akash.D
@Akashd7
Feb 22 2017 07:27
ok doing that
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:27
this is my weather JSON data. IF i wana access city, how do i do that? is variable.name gonna be ok?
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:27
@kirbyedy @akashd7 no need to change to 3.3.6. bootstrap 4 will be the new standard. so now is better than ever to build with the new version
kirbyedy
@kirbyedy
Feb 22 2017 07:27
@Akashd7 using that library will also solve your problem, as far as I can see :)
Akash.D
@Akashd7
Feb 22 2017 07:28
woahg thanks
it worked
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:28
@donofriov you are still there. can i ask you that question
kirbyedy
@kirbyedy
Feb 22 2017 07:28
@donofriov at the moment bootstrap 4 is in the alpha stage, so problems might occur, but if you can help him solve the problem he is facing using bs 4 that will be great
Akash.D
@Akashd7
Feb 22 2017 07:29
@donofriov will try the new library too
@kirbyedy thanks again :)
CamperBot
@camperbot
Feb 22 2017 07:29
akashd7 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1827 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:31
yeah very good point @kirbyedy
adding these classes to an img for bootstrap 4 work as well :)
<img class="mx-auto d-block"
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:34
hi vincent will you please look at my CodePen? http://codepen.io/pshiwakoti1/pen/YZKPRx?editors=1112
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:34
@pshiwakoti1 do you want to get your city from your first api or the second api?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:34
second api
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:34
what’s the name of the field in the second api?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:34
name
data.name doesn't do it
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:35
hmm really?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:35
yes
there are few variables that are not displaying
maybe I did it incorrectly
Will you please check for me?
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:36
data.name works for me :)
you are on the right track!
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:36
Why its not showing in my then
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:36
can you send me the line where you tried data.name, it may be a typo in your queryselector
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:37
document.querySelector('#temp1').innerText = data.weather[0].main; document.querySelector('#temp2').innerText = data.main.temp; document.querySelector('#temp3').innerText = data.weather[0].pressure; document.querySelector('#temp4').innerText = data.coord.lon; document.querySelector('#temp5').innerText = data.coord.lat;
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:37
right
so now you need to make one for data.name
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:37
i tried that
didn't work
but not all these above variables are priting values
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:38
try the line again and paste it here
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:38
only 2 of them are
kirbyedy
@kirbyedy
Feb 22 2017 07:39
@pshiwakoti1 those lines have error
temp3 temp4 temp5
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:40
document.querySelector('#temp6').innerText = data.name;
kirbyedy
@kirbyedy
Feb 22 2017 07:40
you defined them as a class in your html, yet you are referring to them as they were id in your js
that # means ID in html, which you dont have
you have a class defined on them
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:41
so that’s correct @pshiwakoti1 but like @kirbyedy you need to make sure they are aligning with what you are writing in your HTML
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:41
How to correct it
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:42
the # in your querySelector means you are looking for an id, but your div is set to class=“temp3”
kirbyedy
@kirbyedy
Feb 22 2017 07:42
@pshiwakoti1 this is wrong as well: data.weather[0].pressure;
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:42
oops good catch @kirbyedy
i didn’t read close enough
that’s coming back as undefined after you updated your div to id=“temp3” because pressure isn’t under weather in your JSON response
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:43
i changed it to data.weather.pressure
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:43
but it’s under “main"
Oladapo Ademola
@Aoladapo
Feb 22 2017 07:43
Good Morning, please i need assist with this, having trouble using jquery to set the css esp the background below is the code

///<body>
<script>
$(document).ready(function(){
$(".container").css("background-color","gray");

});

</script>
<div class="container">
<header>
<div class="">
<h1>Chief Obafemi Awolowo</h1>
<img src="https://cdn.gdn.ng/wp-content/uploads/2016/08/awolowo-640x360.jpg" align="middle">
<h4 id="tribute name">Chief Obafemi Awolowo (1909-1987) was a Nigerian nationalist, a political leader, and a principal participant in the struggle for Nigerian independence</h4>

            </div>
        </header>

            <div class="list">
                <ul>
                  <li><b>1909</b> Born in Ikenne, Western State, Nigeria</li>
                  <li><b>1944</b> Completed a University of London Correspondence course for bachelor of commerce degree </li>
                  <li><b>1944 - 1946</b> Completed a University of London course in Law degree </li>
                  <li><b>1947</b> Returned to Nigeria to practice Law and based in Ibadan </li>
                  <li><b>1950 - 1951</b> Founded and organised The Action Group Political Party that called for the immediate termination of the british rule  </li>
                  <li><b>1954</b> Became the first premier of the western region</li>

                </ul>
            </div>
          <div class="citation">
            <cite>"I have come to learn, from personal experience, that failure and defeat always serve as springboards for greater achievements for I, whom who never acknowledges their potency, and who is prepared to meet the challenges posed by' them - for they always pose challenges.<span>Chief Obafemi Awolowo</span></cite>
          </div>

        <footer>
          <p>Read more about Chief Obafemi Awolowo <a href="https://en.wikipedia.org/wiki/Obafemi_Awolowo" target="_blank">HERE</a>

        </footer>
</div>

</body>

Vincent D'Onofrio
@donofriov
Feb 22 2017 07:44
so you want to be looking for data.main.pressure
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:44
I got it @donofriov
now Im getting all values
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:45
@pshiwakoti1 did you go through the API challenges on FreeCodeCamp?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:45
I don't know how to put captions to each data
yes I did
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:45
and all the HTML and CSS stuff too?
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:45
yes I have
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:45
You should references all of those because they help you put together everything you need for these projects
for example you could do something like this
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 07:46
sure @donofriov thanks for your help
CamperBot
@camperbot
Feb 22 2017 07:46
pshiwakoti1 sends brownie points to @donofriov :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @donofriov |http://www.freecodecamp.com/donofriov
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:46
<h2>Weather:</h2><p id=“temp1”></p>
so your caption is the h2 value
and then your data is being fed into the paragraph after it
you don’t always have to use divs
@Aoladapo your code looks correct, are you pulling in jQuery to codepen?
Oladapo Ademola
@Aoladapo
Feb 22 2017 07:52
@donofriov im trying to use jquery to style my page but not working so i dont know what im doing wrong
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:52
follow my video above
oh i’m sorry
you’re not using codepen
one sec
or are you? @Aoladapo
jQuery isn’t available by default. it’s a javascript library
Oladapo Ademola
@Aoladapo
Feb 22 2017 07:54
thanks @donofriov got it
CamperBot
@camperbot
Feb 22 2017 07:54
aoladapo sends brownie points to @donofriov :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @donofriov |http://www.freecodecamp.com/donofriov
Vincent D'Onofrio
@donofriov
Feb 22 2017 07:55
:thumbsup: awesome
playingwithinfinity
@playingwithinfinity
Feb 22 2017 08:15
Can someone help me with the MiniMax algorithm? I used this link but I just don't get it. https://medium.freecodecamp.com/how-to-make-your-tic-tac-toe-game-unbeatable-by-using-the-minimax-algorithm-9d690bad4b37#.fi4d1u8ss
Nithin B Chandran
@beingnin
Feb 22 2017 08:36
im stuck with weather app. I managed to find the current location using an location api, but cant store the location value to global var in order to append it on weather api url pls help
Marianissimus
@Marianissimus
Feb 22 2017 08:38
@beingnin I'm there, too. It seems that the solution is a function nested inside the current location function, so that it gets the local values.
Nithin B Chandran
@beingnin
Feb 22 2017 08:39
i tried almost everything. tried to return the value using a function and store the var with that return value. but no use
Marianissimus
@Marianissimus
Feb 22 2017 08:39
@beingnin global values will not work, since it's a asynchronouscall (updated in real time). Guys, can you elaborate on this?
Vincent D'Onofrio
@donofriov
Feb 22 2017 08:40
nesting your calls is a good way to go
Nithin B Chandran
@beingnin
Feb 22 2017 08:42
@Marianissimus my code here:

var loc = getCity();

    /*The API don't work in https*/
    $(document).ready(
    function () {            

        console.log('http://api.openweathermap.org/data/2.5/weather?q=' + loc + '&APPID=a9d7d3831db421de7c057c04e495dd4f');
        $.ajax({

            type: 'GET',
            url: 'http://api.openweathermap.org/data/2.5/weather?q=' + loc + '&APPID=a9d7d3831db421de7c057c04e495dd4f',
            success: function (data) {

                $('#desc').html(data.weather[0].description);
                $('#temp').html(data.main.temp);
            }

        });
    })

/Get current city/
function getCity() {
var x = '';
$.ajax({
type: 'GET',
url: ('http://freegeoip.net/json/'),
success: function (data) {
x=data.city;

            }
        });
    return x;
    }
Vincent D'Onofrio
@donofriov
Feb 22 2017 08:42
so .getJSON(locator url, function(json) { some code .getJSON(weather url, function(json2){ )
if you click on this http://freegeoip.net/json/
do you see a city in the data?
Nithin B Chandran
@beingnin
Feb 22 2017 08:43
@donofriov thanks for the idea. lemme try.
CamperBot
@camperbot
Feb 22 2017 08:43
beingnin sends brownie points to @donofriov :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @donofriov |http://www.freecodecamp.com/donofriov
Vincent D'Onofrio
@donofriov
Feb 22 2017 08:44
@beingnin your code looks pretty good, it might be a data issue
well i mean for the second appi call at least
you should be getting your lat / lon first using your geo api call
then you can get city as well as all the other info you need from the weather api
Nithin B Chandran
@beingnin
Feb 22 2017 08:46
@donofriov k
Josh
@joshfilippi
Feb 22 2017 09:15

could anyone help me center my tick-tac-toe board? I've explored all the options I know of and found no solutions googling the problem.

https://codepen.io/JoshFilippi/pen/EZBQvQ

When opened on a bigger screen it isn't centered
kirbyedy
@kirbyedy
Feb 22 2017 09:18
@joshfilippi that might be related with your bootstrap library
instead of that 4.0 which is in the alpha stage
Josh
@joshfilippi
Feb 22 2017 09:24
@kirbyedy Thanks, but still not centered
CamperBot
@camperbot
Feb 22 2017 09:24
joshfilippi sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1828 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Nithin B Chandran
@beingnin
Feb 22 2017 09:24
@beingnin thanks a lot. it worked. one more thing.. how can we then store a json data to use in some other functions in cases such that we cannot use nested functions??
Anemnesea
@Anemnesea
Feb 22 2017 10:32
Hello, Can someone please help me out with my code? I can't seem to get the Find local news <div> to float to the right.
Zhu Wei
@zhuwei12
Feb 22 2017 10:39
I'm stuck in buliding a random quote machine...My question is ,how can I find a json in a html?or I need to make one by myself?
if then,how to make a json and put it into the website?
how can i use it?
I don't understand....
kirbyedy
@kirbyedy
Feb 22 2017 10:43
@zhuwei12 it is up to you, you can either create an array of quotes on your own, and place it inside your javascript section
or make a json file and host it somewhere
or you can use an quote api that will give you access to random quotes
there is many around, search the internet
one of the populars are forismatic and quotes on design
Zhu Wei
@zhuwei12
Feb 22 2017 10:46
So I can find one quote api in the internet
Dany Din
@danydin
Feb 22 2017 10:46
@Anemnesea i suggest in small screen to use hambruger navbar to collapse it and then show it as a dropdown nav-menu
Nithin B Chandran
@beingnin
Feb 22 2017 10:47
@zhuwei12 you can start with this:
var qoutes={object:{qoute: Its easy to code,author:God},
{qoute: Its not easy to code,author:Me}}
Zhu Wei
@zhuwei12
Feb 22 2017 10:49
then can I use the getJSON function to use it? @beingnin
Dany Din
@danydin
Feb 22 2017 10:49
no @zhuwei12
in that case u use for loop to itetrate through all the objects and display them
siaka tayou karl william
@theabstact237
Feb 22 2017 10:49

@theabstact237
Hello world
right now im having problem to slide my carousel's images
please need some helps
here is the code
<section class="container">

<header class="row">
<div class="col-md-12 col-col">
<div id="b" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="b" data-slide-to="0" class="active"></li>
<li data-target="b" data-slide-to="1" ></li>
<li data-target="b" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active ">
<img src="karl.jpg" style="width:700px;height:600px" >
</div>
<div class="item ">
<img src="sandra.jpg" >
</div>
<div class="item ">
<img src="crowd.jpg" >
</div>

</div>
</div>
<a class="left carousel-control" href="#b" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#b" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


</header>

</section>

Dany Din
@danydin
Feb 22 2017 10:49
share codepen ^
siaka tayou karl william
@theabstact237
Feb 22 2017 10:52
hello?!
Can someone help me ?
tareq4
@tareq4
Feb 22 2017 10:53
He said share it from codepen
@theabstact237
siaka tayou karl william
@theabstact237
Feb 22 2017 10:54
oooohhh thank you! @tareq4 and @danydin
CamperBot
@camperbot
Feb 22 2017 10:54
theabstact237 sends brownie points to @tareq4 and @danydin :sparkles: :thumbsup: :sparkles:
:warning: @tareq4's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:cookie: 337 | @danydin |http://www.freecodecamp.com/danydin
Zhu Wei
@zhuwei12
Feb 22 2017 10:54
Oh,I see. if I use getJSON function,I must have a quote api.
or I just use for loop
Dany Din
@danydin
Feb 22 2017 10:57
yes for getJSON you indeed need to use api
@zhuwei12
curiousNoob
@curiousNoob
Feb 22 2017 11:00
hey guys
how long do you plan to spend on this project?
Dany Din
@danydin
Feb 22 2017 11:52
@curiousNoob which one
opps sorry wrong link
anyone can help me see why is my code not working?
Dany Din
@danydin
Feb 22 2017 11:56
console.log(json1) to see if its reads the callback
@FL8Liew
FL8Liew
@FL8Liew
Feb 22 2017 11:57
what do u mean by reads the callback?
Dany Din
@danydin
Feb 22 2017 11:58
if it's recgonize it
or it gives an error in the url
FL8Liew
@FL8Liew
Feb 22 2017 11:58
i added but there's still nothing appear on the screen
Dany Din
@danydin
Feb 22 2017 11:59
its in the console log
ok i see it should be fine
its working
FL8Liew
@FL8Liew
Feb 22 2017 12:01
its working? lol?
Dany Din
@danydin
Feb 22 2017 12:01
yes
FL8Liew
@FL8Liew
Feb 22 2017 12:01
i try refreshing lol
lol it worked ==
just now its not
lol
Dany Din
@danydin
Feb 22 2017 12:02
yea i've checked the callback u wrote it correct
so its wokrng 100% it may take sometime due to the api load time
FL8Liew
@FL8Liew
Feb 22 2017 12:02
@danydin thanks!
CamperBot
@camperbot
Feb 22 2017 12:02
fl8liew sends brownie points to @danydin :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @danydin |http://www.freecodecamp.com/danydin
Dany Din
@danydin
Feb 22 2017 12:04
np
Spyrantis Theodoros
@thodorisanta
Feb 22 2017 12:18
hi. Im working on the calculator project :grinning:
I've currently done some things to my project but it still doesn't work. Can you take a look in my JS code?
http://codepen.io/oshikurou/pen/jyKLyg?editors=1011
Ilona
@ilonchik
Feb 22 2017 12:28
HI there, I can't finish my weather app project, and I don't know where is the problem, can you please have a look at js code?
https://codepen.io/ilonavardanyan/pen/oBPxLq
kirbyedy
@kirbyedy
Feb 22 2017 12:44
@ilonchik this is your console log error:
Mixed Content: The page at 'https://xxxx was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=3.6745419&lon3.0000839&APPID=fd082a0f30a69a7d7498086e294ea05e'. This request has been blocked; the content must be served over HTTPS.
basically it is a problem of the weather api in the combination with geolocation
so you either have to change the api which is going to use secure https:// connection, or you will get the users location from his ip location which is going to use http:// unsecure connection
Ilona
@ilonchik
Feb 22 2017 12:47
@kirbyedy so if I don't change the api how should I overcome this error?
kirbyedy
@kirbyedy
Feb 22 2017 12:48
by using the iplocation of the user and not the geolocation you are using now
this one for example: http://ip-api.com/
Prateek Gogia
@reeversedev
Feb 22 2017 12:49
Can anyone please help me with 'Show the Local Weather' challenge
Nicholas
@nick88p
Feb 22 2017 12:49
Hi all, I am currently modifying a Theme and I can't figure out how to center the html title tag
Ilona
@ilonchik
Feb 22 2017 12:49
@kirbyedy ok, thank you, will try this way)
CamperBot
@camperbot
Feb 22 2017 12:49
ilonchik sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1832 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Nicholas
@nick88p
Feb 22 2017 12:49
Can anyone help? Please.
Hi all, I am currently modifying a Theme and I can't figure out how to center the html title tag. I should add: It looks like you can't do that with css?
Prateek Gogia
@reeversedev
Feb 22 2017 12:51
@nick88p Are you using bootstrap?
Nicholas
@nick88p
Feb 22 2017 12:51
I tried that as well, didn't work
I also tried jquery, didn't work either
And when googling, all I can find is that apparently you can't change the title ... which is weird, because you find centered titles on many homepages
Prateek Gogia
@reeversedev
Feb 22 2017 12:53
Show your code
siaka tayou karl william
@theabstact237
Feb 22 2017 12:53
@tareq4 it still doesnt work
@danydin it still doesnt work
Nicholas
@nick88p
Feb 22 2017 12:54
I don't have the theme code. It's sth like <title>my page title</title>
And then I am trying to target it with CSS:
title {}
Prateek Gogia
@reeversedev
Feb 22 2017 12:54
try adding the class "text-center"
siaka tayou karl william
@theabstact237
Feb 22 2017 12:54

Hello world
right now im having problem to slide my carousel's images
please need some helps
here is the code

<section class="container">
<header class="row">
<div class="col-md-12 col-col">
<div id="b" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="b" data-slide-to="0" class="active"></li>
<li data-target="b" data-slide-to="1" ></li>
<li data-target="b" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active ">
<img src="karl.jpg" style="width:700px;height:600px" >
</div>
<div class="item ">
<img src="sandra.jpg" >
</div>
<div class="item ">
<img src="crowd.jpg" >
</div>

</div>
</div>
<a class="left carousel-control" href="#b" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#b" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


</header>
</section>

Nicholas
@nick88p
Feb 22 2017 12:55
I tried that. Doesn't work
Prateek Gogia
@reeversedev
Feb 22 2017 12:55
This one is from bootstrap though.
Matthew
@Krimsonmedic
Feb 22 2017 12:55
class="text-center"
Nicholas
@nick88p
Feb 22 2017 12:55
I addded the cdn and all, didn't work unfotunately
idk why
siaka tayou karl william
@theabstact237
Feb 22 2017 12:55
plus im codin it on codepen.io
help?
someone?
Matthew
@Krimsonmedic
Feb 22 2017 12:55
<title class="text-center">My title</title>
Nicholas
@nick88p
Feb 22 2017 12:56
hmm ... the problem is I can't access the source file from my wp theme
So I need to add it in a second step
via a plugin
in other words, I can't change the html. I need to target the title tag via css or js
siaka tayou karl william
@theabstact237
Feb 22 2017 12:57

Hello world
right now im having problem to slide my carousel's images
please need some helps
here is the code

<section class="container">
<header class="row">
<div class="col-md-12 col-col">
<div id="b" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="b" data-slide-to="0" class="active"></li>
<li data-target="b" data-slide-to="1" ></li>
<li data-target="b" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active ">
<img src="karl.jpg" style="width:700px;height:600px" >
</div>
<div class="item ">
<img src="sandra.jpg" >
</div>
<div class="item ">
<img src="crowd.jpg" >
</div>

</div>
</div>
<a class="left carousel-control" href="#b" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#b" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


</header>
</section>

Matthew
@Krimsonmedic
Feb 22 2017 12:58
$(".title).addClass("text-center"); ?
without the question mark of course
Make sure Jquery is added
title should be in "" I missed one
Nicholas
@nick88p
Feb 22 2017 13:00
.title ?
I don't have a title class specified
all I have is <title>asdf</title> and I can't change that code
so wouldn't I have to target the title tag itself ... but I don't think that's possible
Matthew
@Krimsonmedic
Feb 22 2017 13:01
What are you asking then? maybe I missed something, I thought you wanted to center your title, but it wasn't working in HTML?
Nicholas
@nick88p
Feb 22 2017 13:02
No, I don't have access to the HTML
Not directly anyway. I am using a free wordpress theme and need to manipulate it via plugin
AGUGUO CHINENYE
@aguguo
Feb 22 2017 13:02
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.
Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
Nicholas
@nick88p
Feb 22 2017 13:02
All I have is css + js
Thanks for your help btw.
AGUGUO CHINENYE
@aguguo
Feb 22 2017 13:03
please i dont understand this stage, can someone help me
Matthew
@Krimsonmedic
Feb 22 2017 13:03
Try the Jquery, I think that's how you change an element's class... I'm not positive but I think it treats HTML elements as classes even if they aren't designated as that
Nicholas
@nick88p
Feb 22 2017 13:03
I tried that before. Didn't work.
idk, weird
Matthew
@Krimsonmedic
Feb 22 2017 13:05
I'm not sure then, without being able to add an identifier to it via the HTML, then targeting it like that.. I don't know
achudoz
@achudoz
Feb 22 2017 13:05
Oh man it is so annoying how codepen handles some things for you (even forbids you to handle them yourself) and that makes you forget about other things. When I am doing the challenges, the first stuckness is always that I forget to add jQuery and then spend 10 -30 minutes annoyed why it doesn't work even though everything seems to be in order.
Nicholas
@nick88p
Feb 22 2017 13:06
ok, thx man
Matthew
@Krimsonmedic
Feb 22 2017 13:06
w3 schools says do it without the . at the front
achudoz
@achudoz
Feb 22 2017 13:06
But I have a question. What are the (dis)advantages of using $.ajax and $.getJSON. They seem to be doing the same thing.
Nicholas
@nick88p
Feb 22 2017 13:06
@Krimsonmedic thank you
CamperBot
@camperbot
Feb 22 2017 13:06
:cookie: 265 | @krimsonmedic |http://www.freecodecamp.com/krimsonmedic
nick88p sends brownie points to @krimsonmedic :sparkles: :thumbsup: :sparkles:
Matthew
@Krimsonmedic
Feb 22 2017 13:06
so $("title").addClass("text-center);
Nicholas
@nick88p
Feb 22 2017 13:07
yeah, did that, thx
achudoz
@achudoz
Feb 22 2017 13:15
@kirbyedy ok, I guess that answers my question. I however don't see how .getJSON is so much easier. I was using it up until now and now trying to .ajax for the first time and it just seems so much easier to read and to construct than stitching together an url in .getJSON. But I guess I might very well change my opinion when I get more experience with both.
@kirbyedy thanks
CamperBot
@camperbot
Feb 22 2017 13:15
achudoz sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1833 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
João Palma
@joaowd
Feb 22 2017 13:18
hello there
need a little help with bootstrap
Adam
@GoingAllTheWayUp
Feb 22 2017 13:22
when doing the Show the Local Weather what should we access to gain the location as avalue to input into the openweathermap.org API?
Adrian Pachzelt
@GrazingScientist
Feb 22 2017 13:22
Could somebody please tell me what a "Jekyll version" of a bootstrap theme is? For example: https://github.com/BlackrockDigital/startbootstrap-freelancer-jekyll
Yoerivw
@Yoerivw
Feb 22 2017 13:27
hey guys, My twitch viewer project works fine it displays the information but the links you click won't go all the way through to the channel although if you type in the normal channel it does can anyone just have a look please :) thank you in advance http://codepen.io/yoerivw/full/YGNbLQ/
achudoz
@achudoz
Feb 22 2017 13:27
@GoingAllTheWayUp look at the geolocation leson of the JSON/AJAX unit right before these challenges. the code for that is right there
kirbyedy
@kirbyedy
Feb 22 2017 13:28
@Yoerivw are you pointing to the correct link ?
freecodecamp link works for example
achudoz
@achudoz
Feb 22 2017 13:29
@GoingAllTheWayUp or you can use this API : http://ip-api.com/json/?callback=?
Yoerivw
@Yoerivw
Feb 22 2017 13:29
@kirbyedy it seems it is the right link, I just can't get through to the real channel when I click
not even FCC link
kirbyedy
@kirbyedy
Feb 22 2017 13:29
I clicked on the freecodecamp and it went
Yoerivw
@Yoerivw
Feb 22 2017 13:29
@Yoerivw maybe it is something on my browser let me try another browser :)
kirbyedy
@kirbyedy
Feb 22 2017 13:29
the other channel not
Cengiz Gonen
@cgonen
Feb 22 2017 13:30
@Yoerivw should be working now, i think it was server related.
wait, this is really odd.
If i right click the link and open in new tab, it works.
Yoerivw
@Yoerivw
Feb 22 2017 13:33
yes mine too, maybe it could have something to do with the way I target it to another tab ?
with the target=_blank statement ?
achudoz
@achudoz
Feb 22 2017 13:34
@Yoerivw it works when rightclick/open in new tab. and you ARE using target="_blank" so i guess it should work. I heard that codepen has issue with opening links, so it might be it
Yoerivw
@Yoerivw
Feb 22 2017 13:36
ok, thank you for the help in checking ! I'll try and see if there isn't an option to open links in new tabs except just new windows.
achudoz
@achudoz
Feb 22 2017 13:38
@Yoerivw what I sometimes do is that I created a free webhosting account and when I am convinced that something should work but might be an issue of codepen, I try to run it over there. Plus it trains you to remember and use <doctype>,<meta>, <script>, etc. which you never use in codepen
Adam
@GoingAllTheWayUp
Feb 22 2017 13:39
@achudoz thank
CamperBot
@camperbot
Feb 22 2017 13:39
goingallthewayup sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @achudoz |http://www.freecodecamp.com/achudoz
Yoerivw
@Yoerivw
Feb 22 2017 13:40
@achudoz Yes, thanks for the tip, I have a local one downloaded, XAMPP, I tried other projects and it might be an issue with codepen because there's don't work either.
CamperBot
@camperbot
Feb 22 2017 13:40
yoerivw sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @achudoz |http://www.freecodecamp.com/achudoz
Thomas Honeyman
@thomashoneyman
Feb 22 2017 13:52
Hi folks! I’ve been trying to learn a little about charts in ChartJS. Specifically, I want to add a linear gradient to a line chart. I found a few working examples using ChartJS v1.2, but the library is now on ChartJS v2.4. So I adapted those examples making sure only to change the most necessary information for the new API, and I just cannot figure out why I’m not able to show a gradient. The v1 API is not different in this regard from the v2 API (neither one explicitly offers the ability).
I’ve given my code here, plus a link to the working example with v1.2
Does anyone have ideas on why this might not work?

The major change is here:

var chart = new Chart(chart, {type: 'line', data: data});

in mine, vs. originally:

var chart = new Chart(chart).Line(data);

in the original working version (using the old API), as you can see in this Pen

http://codepen.io/grayghostvisuals/pen/gpROOz

achudoz
@achudoz
Feb 22 2017 14:01
Hi, I am doing the twitch.tv challenge and I am getting strange behavior. I am just pulling a single piece of information and displaying it in the console. sometimes it works fine and sometimes it doesn't work at all, even though the code remains unchanged. I am also getting a lot of "too much recursion errors" in the firefox console. Can you see what is wrong with it?
http://codepen.io/achudoz/pen/VPoyEM?editors=1011
achudoz
@achudoz
Feb 22 2017 14:07
and now I am getting "getPreventDefault()is obsolete. Rather use defaultPrevented." I am not using that at all. That is just weird. all these random errors. Maybe it has nothing to do with my code inside codepen but rather with codepen itself.
Yoerivw
@Yoerivw
Feb 22 2017 14:11
@achudoz use the different api call maybe
I know they had some trouble with the first one
achudoz
@achudoz
Feb 22 2017 14:13
@Yoerivw yeah but it was because they started to use ID keys. I got the key so that should not be a problem. Also most of the time I am getting the data. It's just that sometimes the call just does not go through or something. eh I will just try to fiddle with it and it will work properly eventually :D
kirbyedy
@kirbyedy
Feb 22 2017 14:14
make sure your codepen link starts with https:// so you wont run into mixed content error
achudoz
@achudoz
Feb 22 2017 14:14
@Yoerivw but thanks for looking at it
CamperBot
@camperbot
Feb 22 2017 14:14
achudoz sends brownie points to @yoerivw :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @yoerivw |http://www.freecodecamp.com/yoerivw
Alo
@aloRanking
Feb 22 2017 14:18
pls i need help on my wikipedia viewer...i dont knw why the API isnt working.. http://codepen.io/aloRanking/pen/pRMXJP
Ken Haduch
@khaduch
Feb 22 2017 14:19
@achudoz - I just tried your pen running in FireFox on Windows, and I'm not seeing any problems there, clicking it 10 or 15 times seems to work fine. Which browser / OS are you using?
kirbyedy
@kirbyedy
Feb 22 2017 14:22
@aloRanking does not work for me on chrome
but it says you are missing the jquery
I mean your console.log error
Alo
@aloRanking
Feb 22 2017 14:24
@kirbyedy i dont get it.
Zhu Wei
@zhuwei12
Feb 22 2017 14:25
Why can't the API in the official website work?
kirbyedy
@kirbyedy
Feb 22 2017 14:25
@aloRanking you dont have jquery loaded
load it in the codepen settings under the javascript section, but load it before bootstrap
then it will work
achudoz
@achudoz
Feb 22 2017 14:26
@khaduch I am using ubuntu/firefox combo which tends to be much more buggy than any Windows/iOS combos. I closed most of other open tabs including some other pens and the errors seemed to stop in the last few minutes. Maybe there was some interference or something. This gitter chat is giving me console errors now to, but works just fine. Thanks for checking. It is probably time to think about at least dual boot with windows. I just love the idea of free open source OS too much to not be at least using it despite it's many bugs and other things that come with it. Thank you for looking at it!
CamperBot
@camperbot
Feb 22 2017 14:26
achudoz sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2515 | @khaduch |http://www.freecodecamp.com/khaduch
Zhu Wei
@zhuwei12
Feb 22 2017 14:26
anyone can help
Alo
@aloRanking
Feb 22 2017 14:27
@kirbyedy ok..i will do dat
achudoz
@achudoz
Feb 22 2017 14:29
@zhuwei12 what do you mean? your code does put a quote to <body>
at least on my end
kirbyedy
@kirbyedy
Feb 22 2017 14:31
@zhuwei12 works fine for me
Alo
@aloRanking
Feb 22 2017 14:32
@kirbyedy Thanks..it works!!!
CamperBot
@camperbot
Feb 22 2017 14:32
aloranking sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1834 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Zhu Wei
@zhuwei12
Feb 22 2017 14:35
it is supposed to change everytime
@achudoz
oh maybe it's my browser's fault
achudoz
@achudoz
Feb 22 2017 14:48
@zhuwei12 no, it doesn't work for me too. I was using this API too and got it to work by clearing cache with each call.
I ended up using a different API, but I will try to remember what I used to fixt it
Ken Haduch
@khaduch
Feb 22 2017 14:50
@achudoz - I like the idea of free and open source, too - it's always good to have it in your arsenal of tools. Good luck with the project!
Zhu Wei
@zhuwei12
Feb 22 2017 14:50
yea I'm trapped in this problem for a long time.I feel so bad... @achudoz
Ken Haduch
@khaduch
Feb 22 2017 14:51
@zhuwei12 - sometimes you have to disable caching for some of these projects - there is a way to set it up, depends on how you're calling this. I'm going to look at your project, too, and see what might help?
Zhu Wei
@zhuwei12
Feb 22 2017 14:51
what the other API do u use
achudoz
@achudoz
Feb 22 2017 14:52
@zhuwei12 ok, I got it
add:
$.ajaxSetup({cache: false})
@zhuwei12 don't feel bad, a lot of us, including me, have been stuck on this very problem with this API
Walter V. Santos
@theunmanifested
Feb 22 2017 14:54
I need some help with my code. I can't get my images to float within it's <div>. Can't anybody help me out?
Zhu Wei
@zhuwei12
Feb 22 2017 14:56
thank u all guys
I will go on working.
Ken Haduch
@khaduch
Feb 22 2017 14:57
@zhuwei12 - https://api.jquery.com/jQuery.ajax/, if you are using jQuery's ajax command. There is a way to set it up directly within the request. (I'm only posting this because the jquery documentation says that the ajaxSetup use is not recommended.)
roeP
@roeP
Feb 22 2017 14:57
question about the tribute page - does it have to be similar to the exapmle?
achudoz
@achudoz
Feb 22 2017 14:58
@zhuwei12 this is a working example of your pen. JS:
$(document).ready(function() {
  $.ajaxSetup({
    cache: false
  });

  $("#quoteButton").on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      $("#quoteBox").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>")
    });

  });
});
Bartłomiej Rakowiecki
@Biskupator
Feb 22 2017 14:58
I have a question about portfolio page. How to make the bar at the top of the page stay fixed while scrolling?
Ken Haduch
@khaduch
Feb 22 2017 14:58
@roeP - it can be any page that you want to make, I guess that there are a couple requirements, and you want to make it look good, apply appropriate styling, etc. But it's really a blank slate. They give the example as an example.
achudoz
@achudoz
Feb 22 2017 14:58
@zhuwei12 and HTML:
<button id="quoteButton">Quote</button>
<div id="quoteBox">
</div>
Ken Haduch
@khaduch
Feb 22 2017 14:59
@Biskupator - are you using Bootstraps navbar? There is a class navbar-fixed, I think? Check their documentation. If you are using Bootstrap v4, it might have changed.
achudoz
@achudoz
Feb 22 2017 14:59
@zhuwei12 the thing that makes the quotes change is the $.ajaxSetup()
@khaduch do you know why ajaxSetup is not recommended?
Zhu Wei
@zhuwei12
Feb 22 2017 15:00
thank u!
Ken Haduch
@khaduch
Feb 22 2017 15:01
@achudoz - no, I don't - perhaps it is better to just add the cache: false to the $.ajax call itself? I could see where setting up some values like that you might inadvertently have them change without realizing it?
roeP
@roeP
Feb 22 2017 15:01
@khaduch im tring to make it look like the example page, it has a lot of feature that will be usful, but i cant figure it out
achudoz
@achudoz
Feb 22 2017 15:01
@khaduch yeah, that makes sense. thanks
CamperBot
@camperbot
Feb 22 2017 15:01
achudoz sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: achudoz already gave khaduch points
roeP
@roeP
Feb 22 2017 15:02
this is what i did so far, is it any good?
Ken Haduch
@khaduch
Feb 22 2017 15:03
@roeP - I think that the example page makes use of a few Bootstrap features - using the jumbotron, the grid, etc. Not too difficult, once you get familiar with those. Start small and work your way up. A good idea is to try and do it on your own, but you can post your link here and ask questions for things that you cannot figure out.
Prateek Gogia
@reeversedev
Feb 22 2017 15:03
I am unable to get any data.
Here's my code .
<!DOCTYPE html>
<html>
<head>
<title>Your Weather</title>
<meta charset="utf-8">
<link rel="stylesheet" href="">
</head>
<body>
<div>
<h1>The Weather</h1>
<div>
<p>
<span id="show-weather"></span>
</p>
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script src="custom.js"></script>
</body>
</html>
Ken Haduch
@khaduch
Feb 22 2017 15:03
@roeP - it is looking pretty good so far, I would say?
Prateek Gogia
@reeversedev
Feb 22 2017 15:04
$(document).ready(function(){
    function getCurrentWeather() {
        $.ajax({
           url: 'http://samples.openweathermap.org/data/2.5/weather/' ,
           jsonp: 'jsonp',
           data: {
               id: '2172797',
               appid: 'b1b15e88fa797225412429c1c50c122a1'
           },
           type: "GET",
           dataType: "jsonp"

        })
        $done(function(json) {
            $('#show-weather').text(json.coord.lon);
        })
    }
});
Can anyone please help?
roeP
@roeP
Feb 22 2017 15:06
@khaduch i need to search the internet about codes? or try on my own using the only the challenges i did so far?
Ken Haduch
@khaduch
Feb 22 2017 15:06

@reeversedev - I don't think that you put $done for that? I think that you include it within the object parameters for the ajax call? Maybe like this:

$(document).ready(function(){

        function getCurrentWeather() {
            $.ajax({
               url: 'http://samples.openweathermap.org/data/2.5/weather/' ,
               jsonp: 'jsonp',
               data: {
                   id: '2172797',
                   appid: 'b1b15e88fa797225412429c1c50c122a1'
               },
               type: "GET",
               dataType: "jsonp".
                done: function(json) {
                $('#show-weather').text(json.coord.lon);
            })
         }
    });

Although what you did might be an alternate way to do that? Want to post your URL?

Janina Pohorecki
@janepohorecka
Feb 22 2017 15:06
What's causing the space between the form and inputs? https://codepen.io/janepoho/pen/oZvvKQ
Ken Haduch
@khaduch
Feb 22 2017 15:07
@roeP --- probably a combination of both. You have a foundation of information through the lessons, but the "Read, Search, Ask" philosophy of FreeCodeCamp means that you have to go out and do some additional searching and reading, because they only give you a foundation. You have to build on that.
Janina Pohorecki
@janepohorecka
Feb 22 2017 15:07
How can I get rid of the whitespace between and around the inputs?
achudoz
@achudoz
Feb 22 2017 15:08
@roeP yeah that seems pretty ok. Only your link is not working and you have some redundant div tags. The link is probably not working because a big part of the page is one giant button
Prateek Gogia
@reeversedev
Feb 22 2017 15:08
@khaduch Okay. Lemme try.
achudoz
@achudoz
Feb 22 2017 15:10
@janepohorecka inputs have some default margins I think. Force margins to 0 via CSS
roeP
@roeP
Feb 22 2017 15:10
@achudoz i wanted it to be like the example page, the gray frame that is actualy the page..
Janina Pohorecki
@janepohorecka
Feb 22 2017 15:11
@achudoz I tried that to no avail
roeP
@roeP
Feb 22 2017 15:11
@achudoz i was going the hard way and to try it alone
achudoz
@achudoz
Feb 22 2017 15:11
@roeP well button is definitely not a thing to use like this it covers everything that is inside it
@roeP use <div> for creating sections
roeP
@roeP
Feb 22 2017 15:12
@achudoz ok tnx, i think about somthing else
CamperBot
@camperbot
Feb 22 2017 15:12
roep sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @achudoz |http://www.freecodecamp.com/achudoz
Prateek Gogia
@reeversedev
Feb 22 2017 15:12
@khaduch Nope. I just crossed checked it. I was doing it right at the first place.
Ken Haduch
@khaduch
Feb 22 2017 15:13
@reeversedev - okay -want to post your URL for some additional help?
achudoz
@achudoz
Feb 22 2017 15:13
@roeP ant that's ok-challange yourself. The page seems ok, just don't use the button element like this. It is not designed to work like this and any other functional elements inside it will not work
roeP
@roeP
Feb 22 2017 15:13
@achudoz i tries to make div section for the img and text below, but it didnt work
Prateek Gogia
@reeversedev
Feb 22 2017 15:16
@khaduch Man I really wanna learn this thing. If you can help that would be a great thing.
Ken Haduch
@khaduch
Feb 22 2017 15:16
@reeversedev - I see that I do have something different in my (not yet completed) weather project - I have the $.ajax({ *stuff here* }).done( *function here* ) - or something like that. Sorry that I didn't check first.
RonBeh
@RonBeh
Feb 22 2017 15:16
hey! does anyone know how to store jsondata? i try to save it in a variable but outside of the json call the variable value is undefined
Ken Haduch
@khaduch
Feb 22 2017 15:16
@RonBeh - you have to make your variable global, or pass the json data to the function that you are calling.
Prateek Gogia
@reeversedev
Feb 22 2017 15:17
@khaduch That's what I was telling you. It's not an object.
achudoz
@achudoz
Feb 22 2017 15:17

@janepohorecka I just tried it and it works. I added

<fieldset style="margin: -20px;">

Of course the better solution is to do it in css but the code is pretty messy and I am too lazy to look deep into it. just try working with negative margins and preferably define a single css class that you will use for each one of your input fields

Janina Pohorecki
@janepohorecka
Feb 22 2017 15:19
@achudoz that seems like the hacker solution
And it still looks off even when i do that
Zhu Wei
@zhuwei12
Feb 22 2017 15:19
@achudoz I tried your method but it still didn't work.https://codepen.io/pen/
Ken Haduch
@khaduch
Feb 22 2017 15:20
@reeversedev - that page shows what I outlined above, $.ajax() is a jquery function, then you add .done( function() { ]) after the closing parentheses of the ajax call? Or am I not seeing what you're seeing? The example that they show has it that way?
achudoz
@achudoz
Feb 22 2017 15:20
@roeP you will get there. Fiddle with it and you will understand it eventually. i replaced your <button> with a <div> and it looks the same and now your link is clickable
Prateek Gogia
@reeversedev
Feb 22 2017 15:21
@khaduch I did exactly the same as it's being shown in the example, my friend.
Wait. Imma send you the code again.
Ken Haduch
@khaduch
Feb 22 2017 15:21
@reeversedev - the code that was posted above has $done? I'll see your next post...
achudoz
@achudoz
Feb 22 2017 15:22
@janepohorecka yeah that is a dirty solution, it was just an example that the desired effect can be achieved using negative margins. I suggest you clean up your css and add one class that postions all the inputs in the way that you want
Prateek Gogia
@reeversedev
Feb 22 2017 15:24

@khaduch $(document).ready(function(){

function getCurrentWeather() {
    $.ajax({
       url: 'http://samples.openweathermap.org/data/2.5/weather/' ,
       jsonp: 'jsonp',
       data: {
           id: '2172797',
           appid: 'b1b15e88fa797225412429c1c50c122a1'
       },
       type: "GET",
       dataType: "jsonp",
       })

    .done(function(json) {
        $("#show-weather").text(json.coord.lon);
    })
    });
}

});

I did something wrong. You were right. I am sorry for that.
achudoz
@achudoz
Feb 22 2017 15:24
@zhuwei12 yes it does. Check it out here.
Prateek Gogia
@reeversedev
Feb 22 2017 15:24
But still it is having errors.
Adithya Reddy
@tallpants
Feb 22 2017 15:26
Hello everyone
Anil Paliwal
@anilpaliwal
Feb 22 2017 15:27
Tic tac toe http://codepen.io/anil98/full/ZLPajQ how is it
Fabio
@Gentarozzo
Feb 22 2017 15:28
Hey... do I've to trust the Full page view... or Debug Mode? :|
debug should be better, but it expires after a while. So when you are constructing and want to check it throughout the process, full-page view is more comfortable to use
Fabio
@Gentarozzo
Feb 22 2017 15:32
@achudoz because with my mobile version of the app... I've two TOTALLY different versions. The full page is more similar to a smartphone navigation... in debug I've like ALL the content in a page.
achudoz
@achudoz
Feb 22 2017 15:34
what I did when doing responsive pages was to open a full-page view my phone, tablet and desktop and was checking them out like this. It worked for me very well
@Gentarozzo debug is great, but as I said, it expires after a while and you have to generate a new one, which I found reather annoying
Fabio
@Gentarozzo
Feb 22 2017 15:36
@achudoz ok thanks a lot
CamperBot
@camperbot
Feb 22 2017 15:36
gentarozzo sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @achudoz |http://www.freecodecamp.com/achudoz
roeP
@roeP
Feb 22 2017 15:40
@achudoz so i fixed it, and learn about the jumborton in the why :+1: now i need a hint: in the example page there is a text below the img and both are "attatch" to one and other
is it somthing that i do in the <img> or adding another jumborton inside?
Fabio
@Gentarozzo
Feb 22 2017 15:42
@roeP italiano? :p usa i margini su CSS
roeP
@roeP
Feb 22 2017 15:43
@Gentarozzo israel..
@Gentarozzo because of the car? :smile:
Fabio
@Gentarozzo
Feb 22 2017 15:43
@roeP So use the CSS margin! .... (because of the car yes)
@roeP Just change the margin-bottom of the image and put some space in it
roeP
@roeP
Feb 22 2017 15:44
@Gentarozzo i will try
achudoz
@achudoz
Feb 22 2017 15:48
@roeP On the example page it is done by having the image and the text in the same div. something like this:
<div class="imageAndTextDiv">
<img src="imgsrc.com/imgsrc.jpg" alt="">
<p> imagedescription</p>
</div>
@roeP alwo your image is overflowing. Fix that by giving it a max-width of 100% or less
Janina Pohorecki
@janepohorecka
Feb 22 2017 15:48
Hey, guys :) I have been trying to solve one problem this whole morning and I can't figure it out.. I have white spaces between my inputs that I can't seem to get rid of. Could anyone please offer me a solution? https://codepen.io/janepoho/pen/oZvvKQ
roeP
@roeP
Feb 22 2017 15:58
@achudoz i manage to resize the img and to center it, but the text is't in its place even when i put it in the same div
RonBeh
@RonBeh
Feb 22 2017 15:58
hey, did anyone use the freeweathermap api?
achudoz
@achudoz
Feb 22 2017 15:58

@janepohorecka I know you didn't really like my answer to your problem before, so I took a closer look at the css and when I add

padding:0;
  margin: 0;
  width: 102.2%;

to your fieldset, the margins disappear at least on my screen. The let's talk box overflows, but you can adjust that too and you will be set

Zhu Wei
@zhuwei12
Feb 22 2017 15:58
@achudoz It's so strange,I use the same code like u,but I can't display the right result.https://codepen.io/Shallwe/pen/EWYwMb
why
i would be crazy
Mahak Narayan Singh
@makkBit
Feb 22 2017 16:01
@janepohorecka wrap all your inputs in a single fieldset, instead of creating a fieldset for each input
Aniculaesei
@Aniculaesei
Feb 22 2017 16:04
hello.I have to make a tribute page.But I cant load the image on code pen.Can you help me please?Thank you
how can i load an image?
achudoz
@achudoz
Feb 22 2017 16:05
@zhuwei12 it is weird. It might be that you are using jQuery 2.1.3. while I am using jQuery 3.1.1.
h1tag
@h1tag
Feb 22 2017 16:06
@Aniculaesei what did you try? Can you show your Codepen pen?
achudoz
@achudoz
Feb 22 2017 16:07
@roeP try adding max-width and/or text-align:center to the whole div
Aniculaesei
@Aniculaesei
Feb 22 2017 16:07
i dont know from where I can put my image...form my computer..or from the web(with a link)
h1tag
@h1tag
Feb 22 2017 16:08
@Aniculaesei web unless you subscribe to Codepen pro $$
achudoz
@achudoz
Feb 22 2017 16:08
@Aniculaesei it must be from the web. And note that some services don't work on codepen. for example images from imgur.com wont work on your pen
Aniculaesei
@Aniculaesei
Feb 22 2017 16:09
ok...but how I can put an image from web?can you help me pls?
achudoz
@achudoz
Feb 22 2017 16:09
<img src="insertImageURLhere">
@Aniculaesei
h1tag
@h1tag
Feb 22 2017 16:10
@Aniculaesei you can this website to upload you image postimg
and then copy the "Direct link" you get after uploading the image
Aniculaesei
@Aniculaesei
Feb 22 2017 16:12
thank you very much!!!! :)
roeP
@roeP
Feb 22 2017 16:19
@achudoz solved it! i use <span> to connect the txt to the img :smile:
achudoz
@achudoz
Feb 22 2017 16:26
@roeP hooray!
Zhu Wei
@zhuwei12
Feb 22 2017 16:34
@achudoz I find the problem. "https://" in the browser stops me getting data
anyone can help me with this? my button just doesnt work...
Ken Haduch
@khaduch
Feb 22 2017 16:43
@FL8Liew - y ou should change the way you are detecting your "starting" value - maybe make it a simple flag because you are storing a jQuery object, and you cannot easily compare objects or are not doing it correctly. Then after you "toggle" the value, make sure to toggle the flag so that the next time you come through it will be giving you the correct information.
FL8Liew
@FL8Liew
Feb 22 2017 16:44
@khaduch what do u mean by make it a simple flag??
achudoz
@achudoz
Feb 22 2017 16:46
@zhuwei12 good job!
Ken Haduch
@khaduch
Feb 22 2017 16:47
@FL8Liew - indicate that the value you are currently displaying is either "C" or "F", then when you toggle it, change it to "F" or "C". That way you can test it. You could also make it true and false, just so your conditional tests are doing the right thing. Just make sure that you always flip the sense of the variable.
Ken Haduch
@khaduch
Feb 22 2017 16:53

@FL8Liew - and your calculation for the "F" degrees was not correct. You were using the currentC value, which was a jquery object, so it was getting NaN (or maybe that was in my changed version.) My example change to the code would look like this:

   var starting = 'C';

   var currentC = json1.main.temp + "°C";
   var currentF = json1.main.temp * 9 / 5 + 32 + "°F";
   $('.temperature').text(currentC);
   $(".temperature").click(function() {
    if (starting == 'C') {
     $(".temperature").html(currentF);
     starting = 'F';
    } else if (starting == `F`) {
     $(".temperature").html(currentC);
     starting = 'C';
    }

   });

Probably a change of the variable name from "starting" to "currentUnits" or something else that made sense would be helpful.

FL8Liew
@FL8Liew
Feb 22 2017 16:56
@khaduch $('.temperature').text(currentC);<< i dont understand what this part is for...
Ken Haduch
@khaduch
Feb 22 2017 16:58
@FL8Liew - setting the actual value in your HTML the first time through, otherwise (at least with my changes) it was not set. You were originally doing this: $(".temperature").html(json1.main.temp + "°C"); and saving that? Although I might have lost the original code with my changes. So in my code, the values are being calculated, then the initial HTML for your temperature class button is being set to that "C" value.
FL8Liew
@FL8Liew
Feb 22 2017 17:02
@khaduch i think i kinda understand what u mean, thanks!
CamperBot
@camperbot
Feb 22 2017 17:02
fl8liew sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2517 | @khaduch |http://www.freecodecamp.com/khaduch
Prateek Gogia
@reeversedev
Feb 22 2017 17:07
@khaduch I am getting the wrong country name now.
Ken Haduch
@khaduch
Feb 22 2017 17:07

@FL8Liew - you're welcome. And I like this code a little better:

      var unitsC = true; // starting off with Celsius
      var currentC = json1.main.temp + "°C";
      var currentF = json1.main.temp * 9 / 5 + 32 + "°F";
      $(".temperature").html(currentC); // set the initial value in the button
      $(".temperature").click(function() {
        if (unitsC) {
          $(".temperature").html(currentF); // switch to degreesF
        } else {
          $(".temperature").html(currentC); // switch to degreesC
        }
        unitsC = !unitsC; // invert the flag
      });

Made the flag a true / false, and called it "unitsC" so that true means that the C units are being displayed. Then that is just inverted at the end.

@FL8Liew - even more concise:
      var unitsC = true; // starting off with Celsius
      var currentC = json1.main.temp + "°C";
      var currentF = json1.main.temp * 9 / 5 + 32 + "°F";
      $(".temperature").html(currentC);
      $(".temperature").click(function() {
        $('.temperature').html( unitsC ? currentF : currentC);
        unitsC = !unitsC; // invert the flag
      });
@reeversedev - have you posted your URL? Or your most recent code...
Chris
@bestintown23
Feb 22 2017 17:11
Why is my images not fullscreen? https://codepen.io/bestintown23/pen/KaOBJR
FL8Liew
@FL8Liew
Feb 22 2017 17:15
@khaduch does that mean whenever I compare 2 variables, it is better to use true and false?
Ken Haduch
@khaduch
Feb 22 2017 17:19
@FL8Liew - for something like what I showed, I think that it's better - just simpler. If you are generating something more complex, well, it depends on the situation. But for this case, it leads to a cleaner solution since there is one of two possibilities, so a straight true / false test is just perfect for this. And also for this case, you wouldn't want to read a value from the DOM (getting the actual button text itself, which you might have been doing originally? I forget?) There are many ways to make it work, of course.
Gulsvi
@gulsvi
Feb 22 2017 17:23
@khaduch I'm curious why it would be bad to read from the DOM. This seems clean as well, but I still have a lot of JS work to do for FCC...
      $('.temperature').text() === currentC ? $(".temperature").text(currentF) : $(".temperature").text(currentC);
So many ways to get one thing done, it gets confusing :/
Prateek Gogia
@reeversedev
Feb 22 2017 17:25

@khaduch $(document).ready(function() {
$.ajax({
type: 'GET',
data: {
id: '2172797',
appid: 'b1b15e88fa797225412429c1c50c122a1'
},
url: 'https://samples.openweathermap.org/data/2.5/weather/',
xhrFields: {
withCredentials: false
},
headers: {},
success: function(data) {

        $("#show-weather").text("Your location latitude is: " + data.coord.lat + " and longitude is: " + data.coord.lon);
        $("#show-country").text(" Your current location is: " + data.sys.name);

    },
    error: function(data) {

        console.log('error');
        console.log(data);
    },
});

});

@khaduch
$(document).ready(function() {
$.ajax({
type: 'GET',
data: {
id: '2172797',
appid: 'b1b15e88fa797225412429c1c50c122a1'
},
url: 'https://samples.openweathermap.org/data/2.5/weather/',
xhrFields: {
withCredentials: false
},
headers: {},
success: function(data) {

        $("#show-weather").text("Your location latitude is: " + data.coord.lat + " and longitude is: " + data.coord.lon);
        $("#show-country").text(" Your current location is: " + data.sys.name);

    },
    error: function(data) {

        console.log('error');
        console.log(data);
    },
});

});

Torian
@toriancrane
Feb 22 2017 17:26

Good Morning! I am working on the Build a Random Quote Machine challenge and I am having some difficulty with my buttons. My code can be found here: http://codepen.io/toriancrane/pen/BWBdwJ

Before, when I used to click the New Quote button, it would cycle through the different test quotes I have just fine. Now it is not working, and neither is the Tweet Out one. I didn't change anything in the JavaScript, only added some font awesome icons to my buttons and put them into a grid. Can someone point me in the right direction?

Gulsvi
@gulsvi
Feb 22 2017 17:33
@toriancrane One small change needed in your HTML. The ID can't start with a # in your HTML. id="newQuote" not id="#newQuote"
Torian
@toriancrane
Feb 22 2017 17:38
@SkyCoder01 thanks!
CamperBot
@camperbot
Feb 22 2017 17:38
toriancrane sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ritvars
@RitvarsZ
Feb 22 2017 17:39

Hello, I'm fixing a wordpress site, need someone with experience of wordpress development. Take a look at this: http://jurmala.sipnet.lv/galerija/foto
I need to make this gallery pretty. All good, just trying to figure out what sets the heigth of the link?

<a class="photo-gallery equal" href="http://jurmala.sipnet.lv/galerijas/1860" style="height: 375px;">                    
    <img width="4320" height="3240" src="http://jurmala.sipnet.lv/wp-content/uploads/DSC02632.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://i1.wp.com/jurmala.sipnet.lv/wp-content/uploads/DSC02632.jpg">
    <h2>Jūrmalnieki viesojas Tukumā</h2>
</a>

See the style="height:375px" on the link? I wonder what sets it.
And also, why does the img tag have soo many attributes(I didn't paste the whole code, see for yourself)?
Can anyone help me, or can someone point me to a place where i could find an answer? Thanks in advance!

Ken Haduch
@khaduch
Feb 22 2017 17:54
@SkyCoder01 :point_up: February 22, 2017 12:23 PM - it is just an expensive thing to access the DOM, so it will work, especially for a small-scale project, but if you read about different ways to do this, they recommend that the DOM is not really to be used as a data storage base. https://www.w3.org/wiki/JavaScript_best_practices has some info, I'm sure that you can find opinions on both sides.
Gulsvi
@gulsvi
Feb 22 2017 17:56
Thanks @khaduch That makes sense
CamperBot
@camperbot
Feb 22 2017 17:56
skycoder01 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2518 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Feb 22 2017 17:57
I'm trying to better understand these performance things too... seeing very different results in different browsers. Seems they all have their own way of handling JS
iamlisakong
@iamlisakong
Feb 22 2017 17:59
I'm still a noob and just finished the first part of html, css, and bootstrap. I'm nervous about building this personal portfolio webpage. Are there any tips and trickes?
Ken Haduch
@khaduch
Feb 22 2017 18:00
@reeversedev - sorry that I've been away. If you want the location which, in your data, is "Cairns", you want data.name. If you want the country, then it would be data.sys.country
@iamlisakong - if you want to take a look at something for other examples, even some techniques, try w3schools.com/bootstrap and look for the "Themes" section - they walk through a few examples of creating a page like a portfolio from the ground up. If you are planning to use Bootstrap, that is - but it might be helpful to just walk through their lesson on how to do it anyway?
Prateek Gogia
@reeversedev
Feb 22 2017 18:04
No @khaduch . My location is different.
Ken Haduch
@khaduch
Feb 22 2017 18:06
@reeversedev - well, the location that is being returned from the data that you are fetching, which is based on an "id" value that you are requesting, is from a fixed site, as I recall, they have ID values for different cities / locations around the world. Your post has this: id: '2172797' which must translate to "Cairns, AU"? I'd have to go to their site to double check that...
Andrew Steller
@stelleaw
Feb 22 2017 18:07
Anyone else have trouble getting a JSON call to work with openweathermap?
function getWeather(){
var api_url = 'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat='+ lati + '&lon=' + long + '&units=imperial&appid=115fea402e58f61e6277a1c2463adb96';
$.getJSON(api_url, formatWeather);
}
Ken Haduch
@khaduch
Feb 22 2017 18:07
you have to put your actual latitude and longitude in there, and change your request, to get your actual location, if that's what you're looking for, @reeversedev ?
iamlisakong
@iamlisakong
Feb 22 2017 18:08
@khaduch Thanks, I'll look into w3schools.com/bootstrap.
CamperBot
@camperbot
Feb 22 2017 18:08
iamlisakong sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2519 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 22 2017 18:12
@iamlisakong - note that a lot of people will NOT recommend w3schools, but for the bootstrap section and these theme examples, I have found them to be satisfactory. It gives you some supplemental information about how to approach a page design of this type.
Prateek Gogia
@reeversedev
Feb 22 2017 18:13
@khaduch What if i want to make it available to end user so that he/she can access his/her location? How do I do that?
Andrew Steller
@stelleaw
Feb 22 2017 18:14
'
function getWeather(){
  var api_url = 'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat='+ lati + '&lon=' + long + '&units=imperial&appid=115fea402e58f61e6277a1c2463adb96';
  $.getJSON(api_url, formatWeather);
}
I cant seem to get a successful reponse to call my display functions
Gulsvi
@gulsvi
Feb 22 2017 18:17
@stelleaw Try it without the https://crossorigin.me/ in front of your url
Andrew Steller
@stelleaw
Feb 22 2017 18:18
@SkyCoder01 I have, still nothing. and it definitely doesn't call my function either. I set that function up to work without the api data and it should change my page when called.
ZaCk FroST
@zakwanahmed
Feb 22 2017 18:18
got to build a tribute page
first project
Gulsvi
@gulsvi
Feb 22 2017 18:19
@stelleaw Are you using navigator.geolocation to get location with a Chrome browser?
Andrew Steller
@stelleaw
Feb 22 2017 18:20
@SkyCoder01 yes but right now I have coordinates hard coded in. trying to test each piece individually. could it be my extensions I run a pretty heavy set of anti-trackers/adblockers/privacy stuff?
Gulsvi
@gulsvi
Feb 22 2017 18:21
@stelleaw Try pasting the URL manually in your browser to test for adblocker/privacy blocking
in the address bar, I mean
Andrew Steller
@stelleaw
Feb 22 2017 18:22
@SkyCoder01 I got a response that way. Used the exact url i have in the code
Gulsvi
@gulsvi
Feb 22 2017 18:23
@stelleaw Then maybe your codepen is loaded over HTTPS? OpenWeatherMap will only work if your codepen is loaded over HTTP
Check your browser's debug console for mixed-content errors regarding HTTP/HTTPS
Andrew Steller
@stelleaw
Feb 22 2017 18:24
@SkyCoder01 that is probably it, I run HTTPS everywhere and had similar issues on the quote generator too but using crossorigin fixed it there
Gulsvi
@gulsvi
Feb 22 2017 18:26
@stelleaw I don't know about that proxy, maybe it's down or requires some extra headers in your code. I've seen people recommend it, but every person who visits your page is unknowingly sharing their location and IP address with a 3rd party proxy. You may be comfortable with that, but others may not.
You're also sharing your Open Weather Map API key with that 3rd party every time you make an API request, so best to just use HTTP or choose a weather API that supports HTTPS
Andrew Steller
@stelleaw
Feb 22 2017 18:28
@SkyCoder01 got it, I need to get codepen to run in HTTP then, and ill check back
Ken Haduch
@khaduch
Feb 22 2017 18:31
@reeversedev - you have to use some method of getting the user's location - the geolocation service (which was one of the FreeCodeCamp lessons) although it has a bit of a problem accessing the geolocation on some browsers (most notably Chrome) unless you are accessing the page (your codepen page) using https://. But the problem is that the free openweather account will not respond to an https:// request, so you cannot always get it to work. FireFox does not require https:// for the geolocation, at least not at this time. There are some alternatives that are discussed in a couple notes on the freecodecamp forum freeCodeCamp/freeCodeCamp#7853 and this one, too: freeCodeCamp/freeCodeCamp#9145 - you can scan through those, if you haven't seen them, and see the suggestions that they offer...
Andrew Steller
@stelleaw
Feb 22 2017 18:32
@SkyCoder01 That looks like it did the trick. Thanks, I just couldnt put my finger on what wasn't paying nice with codepen
CamperBot
@camperbot
Feb 22 2017 18:32
stelleaw sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Prateek Gogia
@reeversedev
Feb 22 2017 18:32
@khaduch Thanks man! I'll have a look over it.
CamperBot
@camperbot
Feb 22 2017 18:32
reeversedev sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2520 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Feb 22 2017 18:33
@stelleaw Now you'll need to make sure you're getting location in a way that works with HTTP as well - just to save you a headache :) navigator.geolocation won't work in some browsers over HTTP. Check The comment above from @khaduch for more info
Andrew Steller
@stelleaw
Feb 22 2017 18:33
@SkyCoder01 yup, was already looking into other location methods
Chiu
@yuchiu
Feb 22 2017 18:39
been working on the calculator for long time
cant get the infix to postfix calculation function work
can someone help out or give some hint plz
it seems to skip out operator in the stack and move on to operand
Chris
@bestintown23
Feb 22 2017 18:47
why are my pictures not full screen? https://codepen.io/bestintown23/pen/KaOBJR
Prateek Gogia
@reeversedev
Feb 22 2017 19:03
I am getting the latitude and longitude but not the name of the country. How am I suppose to do that?
Gulsvi
@gulsvi
Feb 22 2017 19:09
@reeversedev How are you getting location? If you're using navigator.geolocation, you'll have to do a reverse geocode
Jakov Horvat
@Yaaqovv
Feb 22 2017 19:13
Hey guys do you know why my code is not working? please help me http://codepen.io/Yaaqov/pen/gmYvZy?editors=1111
is there maybe any problem with api?
Jasmin Parent
@charlesdarkwind
Feb 22 2017 19:26
Is it really that bad to use the twitch api at the moment? I kinda wanna use it
Ashish Patel
@ashishpatelcs
Feb 22 2017 19:30
i skipped twitch api for now. may have to work on it later though. doing advanced algorithms. I hoped twitch api problem might be changed :P
the api is not working. you have to use json
hoddedman
@hoddedman
Feb 22 2017 19:31
can anyone help me with the pagescroll jquery?
Jasmin Parent
@charlesdarkwind
Feb 22 2017 19:31
oh damn ok, or at least documentation is very poor it seems
Prateek Gogia
@reeversedev
Feb 22 2017 19:34
@SkyCoder01 I am using navigator.geolocation
What is the concept of reverse geocode?
hoddedman
@hoddedman
Feb 22 2017 19:37
@moT01 where is it calling the element?
Tom
@moT01
Feb 22 2017 19:38
calling the element that you want it to end up at
?
$.attr(this, 'href')
funkymonkey79
@funkymonkey79
Feb 22 2017 19:39

Hi guys!

I am working on portfolio page project and have a problem with functionality in CodePen - hamburger menu won't open. The same code works just fine locally on my laptop. Any ideas?

https://codepen.io/funkymonkey79/pen/XpGxJB

Tom
@moT01
Feb 22 2017 19:43
@funkymonkey79 dont see a hamburger menu
funkymonkey79
@funkymonkey79
Feb 22 2017 19:43
@moT01 its there for mobile version
Gulsvi
@gulsvi
Feb 22 2017 19:45
@charlesdarkwind @ashishpatelcs Twitch works fine, Free Code Camp has a mirror so you don't need an api key. Just put the user name you want at the end of the url, for example, the user 'freecodecamp':
https://wind-bow.gomix.me/twitch-api/channels/freecodecamp
https://wind-bow.gomix.me/twitch-api/streams/freecodecamp
https://wind-bow.gomix.me/twitch-api/users/freecodecamp
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 19:45
can somone help me how to pass Celcius value to my celciustoFahrenheit() function? Here is my CodePen
Gulsvi
@gulsvi
Feb 22 2017 19:45
Parse that JSON just like with the weather app and display what you want to the page
Gulsvi
@gulsvi
Feb 22 2017 19:45
@reeversedev It's a google API that lets you get the city, street, country, etc. for any latitude/longitude
@funkymonkey79 Add jQuery to your project - make sure it loads before bootstrap.js
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 19:50
hi @khaduch
will you please look at my waether app
Ashish Patel
@ashishpatelcs
Feb 22 2017 19:53
@pshiwakoti1 , you must store api response in a variable and read temperature values for there. in your code, I cannot find any code where you stores and retrieves values from api response. check it out
funkymonkey79
@funkymonkey79
Feb 22 2017 19:54
@SkyCoder01 Thank you!!! Works just fine now :)
CamperBot
@camperbot
Feb 22 2017 19:54
funkymonkey79 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ashish Patel
@ashishpatelcs
Feb 22 2017 19:54
*read temp values from the variable.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 19:55
@ashishpatelcs I didn't understand what you mean
Ashish Patel
@ashishpatelcs
Feb 22 2017 19:56
@pshiwakoti1 , inside the .done(function(data) { -- you have everything commented out. You have to use api response to get temperature values in celsius.
@pshiwakoti1 , simply just call the celciusToFarenheit() function there
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 19:58
can you see it now please if I did it correctly?
Ashish Patel
@ashishpatelcs
Feb 22 2017 19:58
read the temparature values at data.main.temp;
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 19:58
i did
Ken Haduch
@khaduch
Feb 22 2017 19:59
@pshiwakoti1 - it looks like you are getting some help, so I don't want to confuse the issue, and I have to get offline for a while anyway... good luck~
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 19:59
the question is when I call celciusToFarenheit() function from my button, do I have to pass anything there?
Larry Hawkins
@HawkinsLJ
Feb 22 2017 20:01
hi all, quick question. Just compoleted tribute page assignment.
completed*
using codepen
iso
@iso1048
Feb 22 2017 20:01
blob
<div class="container-fluid">

<div class="row"> <!--PARENT DIV ELEMENT-->
<div class="col-md-1 grey-background">
</div>
<div class="col-md-10 black-background">
<h1 class="text-center">- N A M E-</h1>
<!-- BUTTONS-->
<div class="row">
<div class="col-md-4">
<h2 class="text-center">ABOUT</h2>
</div>
<div class="col-md-4">
<h2 class="text-center">PORTFOLIO</h2>
</div>
<div class="col-md-4">
<h2 class="text-center">CONTACT</h2>
</div>
</div> <!-- FOR col-md-10 DIV ELEMENT-->
<div class="col-md-1 grey-background">
</div>
Larry Hawkins
@HawkinsLJ
Feb 22 2017 20:01
how do I share the final rendered output? looks like its only letting me share the raw code
iso
@iso1048
Feb 22 2017 20:01
Why does the column at the end not have a grey background?
Ashish Patel
@ashishpatelcs
Feb 22 2017 20:02
@pshiwakoti1 , you need a different function for button onclick even then. Because the celciusToFarenheit function is called during the page load.
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 20:02
I see its working on my end
Ashish Patel
@ashishpatelcs
Feb 22 2017 20:02
then clicking the button won't make any difference because the values are already set during page load
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 20:02
oh ok
then what do i do now
I got it thanks
Moisés Man
@moigithub
Feb 22 2017 20:03
@HawkinsLJ on the uper right corner there a r a change view button
Ashish Patel
@ashishpatelcs
Feb 22 2017 20:03
create a new function for button onclick event. remove the jquery selector for div temp7 from celciustofarenheit function, and add it to new function for button click
Gulsvi
@gulsvi
Feb 22 2017 20:04
@gothamknight A div has 0px of height until you give it some content or min-height value in the CSS
iso
@iso1048
Feb 22 2017 20:04
@SkyCoder01 but then why does the first column have a grey background?
Muhammad Hasham
@MohammadHasham
Feb 22 2017 20:05
what is the advantage/use of using parent element position relative and child absolute.
Gulsvi
@gulsvi
Feb 22 2017 20:05
@gothamknight Because it is in a row and the column next to it has height
iso
@iso1048
Feb 22 2017 20:06
@SkyCoder01 But the last column is also next to the column that has height. I dont get it
Gulsvi
@gulsvi
Feb 22 2017 20:07
Your last column that does not have grey wraps around below the other row and columns @gothamknight
@gothamknight Do this to see, change the HTML for that last column and give it a temporary class name:
<div class="col-md-1 testdiv grey-background"></div>
Now give that class name a border in your CSS:
.testdiv {
  border: 1px solid blue;
}
Lascu Gratian
@gratianl
Feb 22 2017 20:08
My second project - http://codepen.io/gratianl/full/KaJQXG/ . What do you think? :)
Gulsvi
@gulsvi
Feb 22 2017 20:08
You will see it's just a blue line @gothamknight
image.png
^^ See the blue line below the "About" text, that's your empty div with no height
jdl2017
@jdl2017
Feb 22 2017 20:10
Is it possible to add to the invisible <body> tag in CodePen
Ashish Patel
@ashishpatelcs
Feb 22 2017 20:10
@jdl2017 , yes through css or javascript
iso
@iso1048
Feb 22 2017 20:10
@SkyCoder01 I see. so how do I make the column grey?
Gulsvi
@gulsvi
Feb 22 2017 20:11
@gothamknight I'm guessing you want grey on both sides of the black box?
jdl2017
@jdl2017
Feb 22 2017 20:11
<body data-spy="scroll" data-target=".navbar" data-offset="50">
How would I add that line?
iso
@iso1048
Feb 22 2017 20:12
@SkyCoder01 Yes
Gulsvi
@gulsvi
Feb 22 2017 20:12
@gothamknight close your col-md-10 div before your last col-md-1 div
<div class="container-fluid">
  <div class="row">
    <!--PARENT DIV ELEMENT-->
    <div class="col-md-1 grey-background"></div>
    <div class="col-md-10 black-background">
      <h1 class="text-center heading-text">- N A M E-</h1>
      <!-- BUTTONS-->
      <div class="row">
        <div class="col-md-4">
          <h2 class="text-center">ABOUT</h2>
        </div>
        <div class="col-md-4">
          <h2 class="text-center">PORTFOLIO</h2>
        </div>
        <div class="col-md-4">
          <h2 class="text-center">CONTACT</h2>
        </div>
      </div>
    </div>
    <!-- FOR col-md-10 DIV ELEMENT-->
    <div class="col-md-1 grey-background"></div>
  </div>
  <!--PARENT DIV ELEMENT CLOSING TAG-->
</div>
<!-- FOR CONTAINER FLUID DIV ELEMENT-->
Ashish Patel
@ashishpatelcs
Feb 22 2017 20:13
@jdl2017, $('body').attr(key, val)
$('body').attr('data-spy', 'scroll');
jdl2017
@jdl2017
Feb 22 2017 20:16
@ashishpatelcs Ok got it. Thanks
CamperBot
@camperbot
Feb 22 2017 20:16
jdl2017 sends brownie points to @ashishpatelcs :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @ashishpatelcs |http://www.freecodecamp.com/ashishpatelcs
Gulsvi
@gulsvi
Feb 22 2017 20:16
@jdl2017 Here's a scroll spy example I made if it helps http://codepen.io/skycoder/pen/KaYQoQ
iso
@iso1048
Feb 22 2017 20:17
@SkyCoder01 The following is my full code (i didnt copy/paste the last div's):

<div class="container-fluid">

<div class="row"> <!--PARENT DIV ELEMENT-->
<div class="col-md-1 grey-background">
</div>
<div class="col-md-10 black-background">
<h1 class="text-center">- N A M E-</h1>
<!-- BUTTONS-->
<div class="row">
<div class="col-md-4">
<h2 class="text-center">ABOUT</h2>
</div>
<div class="col-md-4">
<h2 class="text-center">PORTFOLIO</h2>
</div>
<div class="col-md-4">
<h2 class="text-center">CONTACT</h2>
</div>
</div> <!-- FOR col-md-10 DIV ELEMENT-->
<div class="col-md-1 grey-background">
</div>

</div><!--PARENT DIV ELEMENT CLOSING TAG-->
</div> <!-- FOR CONTAINER FLUID DIV ELEMENT-->

@SkyCoder01 have i not already closed by col-md-10 before my last col-md-1?
jdl2017
@jdl2017
Feb 22 2017 20:17
@SkyCoder01 That's very helpful
Gulsvi
@gulsvi
Feb 22 2017 20:18
@gothamknight No, your col-md-10 is closed after your last col-md-1
If you turn on the "Match Brackets" setting in codepen, it makes it easier to see:
image.png
It should be in the "Editor Options" section of your codepen settings: https://codepen.io/gothamknight/settings/editor
iso
@iso1048
Feb 22 2017 20:27
@SkyCoder01 yes it did make it easier to see and i corrected it. Thank you very much.
CamperBot
@camperbot
Feb 22 2017 20:27
gothamknight sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Marco Mazzeo
@Doko85
Feb 22 2017 20:30
hey guys, I need a bit of help with jQuery, is anybody available?
Tom
@moT01
Feb 22 2017 20:33
@Doko85 whats up
Marco Mazzeo
@Doko85
Feb 22 2017 20:34
I haven't been playing with jQuery in a while so even a basic stuff like the following one made me lose the whole day trying to make it work
I have my navbar and I want to show the input form for login only when clicking on a "login" link
so I have to refer to parent and then select the form
Tom
@moT01
Feb 22 2017 20:35
dont feel bad, i just spent an hour to find a missing semi-colon
Marco Mazzeo
@Doko85
Feb 22 2017 20:35
but it's not working at all....
Tom
@moT01
Feb 22 2017 20:36
have any code to show?
Marco Mazzeo
@Doko85
Feb 22 2017 20:36
$(document).ready(function () { 
    $('#login').on('click', function() {
        $(this).parent().find('#hidden_form').show();
    });
});
Tom
@moT01
Feb 22 2017 20:38
whats the relationship of the hidden form and the parent
Marco Mazzeo
@Doko85
Feb 22 2017 20:38
<ul class="nav navbar-nav navbar-right">
           <form id="hidden_form" class="navbar-form navbar-left">
               <div class="form-group">
                <input type="text" class="form-control" placeholder="Username" name="Username" required="required" autocomplete="on">
                    <input type="text" class="form-control" placeholder="Password" name="Password" required="required" autocomplete="on">
            </div>
                   <button type="submit" class="btn btn-default">Vai</button>
    </form>
                        <li><a id="login" href="#">Login</a></li>
            <li><a href="#">Register</a></li>
</ul>
poorly formatted here but that's the code snippet
Tom
@moT01
Feb 22 2017 20:39
ha
looks like its the half brothers uncle
Marco Mazzeo
@Doko85
Feb 22 2017 20:40
so how could I refer to that in the right way?
Tom
@moT01
Feb 22 2017 20:43
looks like its a sibling
<ul class="nav navbar-nav navbar-right"> 
    <form id="hidden_form" class="navbar-form navbar-left">
        <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Username" name="Username" required="required" autocomplete="on"> 
            <input type="text" class="form-control" placeholder="Password" name="Password" required="required" autocomplete="on"> 
        </div>
        <button type="submit" class="btn btn-default">Vai</button> 
    </form> 
    <li><a id="login" href="#">Login</a></li> 
    <li><a href="#">Register</a></li> 
</ul>
Marco Mazzeo
@Doko85
Feb 22 2017 20:43
so prev() ?
Tom
@moT01
Feb 22 2017 20:44
shouldn't need to do it like that i dont think
should be able to just go...
$(document).ready(function () { 
    $('#login').on('click', function() {
        $('#hidden_form').show();
    });
});
Marco Mazzeo
@Doko85
Feb 22 2017 20:46
damn, that was easy...
is it also possible to make it hide on another click?
Tom
@moT01
Feb 22 2017 20:47
i would think so
probly a way to just toggle it as well
Marco Mazzeo
@Doko85
Feb 22 2017 20:47
toggleClass ?
or just toggle the element?
Tom
@moT01
Feb 22 2017 20:48
toggle the hid/show
if you want them both on the login click i suppose
Marco Mazzeo
@Doko85
Feb 22 2017 20:49
I don't even know if that should be required tho
I mean, if you click on "Login" it means you want to login... why would you make it hide again?
Tom
@moT01
Feb 22 2017 20:50
maybe make it hide after you actually login
or click submit or something
Marco Mazzeo
@Doko85
Feb 22 2017 20:51
yeah, if clicking on the submit button then it'd be great
great it works, thanks so much!
Tom
@moT01
Feb 22 2017 20:54
sure thing
Can anyone tell me why my buttons do not stretch to fill the space above the container?
Gulsvi
@gulsvi
Feb 22 2017 21:00
@WiseKodama There are four buttons, so to take up the full width of the container, they need to each have a width of 25%
WiseKodama
@WiseKodama
Feb 22 2017 21:01
But I am using table-cell for buttons and table for the btncontainer
Gulsvi
@gulsvi
Feb 22 2017 21:02
When I change the width to 25% for the .butn class, they take up the full width of the container
WiseKodama
@WiseKodama
Feb 22 2017 21:02
No, they need to take 25 of the btn container
which should be the area above the panel
25% each of the btnContainer
Not sure why they aren't parented to the btnContainer
WiseKodama
@WiseKodama
Feb 22 2017 21:09
Any ideas what could be causing that? @SkyCoder01
Prakash Shiwakoti
@pshiwakoti1
Feb 22 2017 21:11
hello @SkyCoder01 I finished my WEather app. Now I am working on a Wikipedia viewer. Can you please give me some hints how to start and which api to use?
Gulsvi
@gulsvi
Feb 22 2017 21:11
@WiseKodama I'm sorry, I don't understand what you're hoping it to look like
:(
WiseKodama
@WiseKodama
Feb 22 2017 21:12
@SkyCoder01 the buttons are supposed to take up the whole length of the top of the panel that contains the channel info
Gulsvi
@gulsvi
Feb 22 2017 21:12
Oh, so you want them touching the top of the #twitchinfo div?
WiseKodama
@WiseKodama
Feb 22 2017 21:12
Indeed :)
Gulsvi
@gulsvi
Feb 22 2017 21:13
Ahhh, sorry maybe I need more coffee. I'll take a closer look now
WiseKodama
@WiseKodama
Feb 22 2017 21:13
I've put them into a div called btnContainer and the width of that is the same as the width of twitchInfo
they have display:table-cell and the container has display:table
Marco Mazzeo
@Doko85
Feb 22 2017 21:13
you gave 20 px of padding to every side
WiseKodama
@WiseKodama
Feb 22 2017 21:13
and still they don't adjust to the size
Marco Mazzeo
@Doko85
Feb 22 2017 21:13
that's probably why
WiseKodama
@WiseKodama
Feb 22 2017 21:14
No twitchInfo has padding
btnContainer does not
Gulsvi
@gulsvi
Feb 22 2017 21:15
@WiseKodama Remove the height for your .btnContainer. It's set to 40px
@pshiwakoti1 Step 6 of the challenge tells you which API to use: https://www.freecodecamp.com/challenges/build-a-wikipedia-viewer
WiseKodama
@WiseKodama
Feb 22 2017 21:16
vertically its fine, but I want the edge of the left button to reach the left edge of the twitch info and vice versa @SkyCoder01
Gulsvi
@gulsvi
Feb 22 2017 21:19
Hmmmmm, I would have started with a different approach. Let me see if I can adjust your HTML/CSS in an easy way
WiseKodama
@WiseKodama
Feb 22 2017 21:22
Thanks for taking the time @SkyCoder01
CamperBot
@camperbot
Feb 22 2017 21:22
:cookie: 286 | @skycoder01 |http://www.freecodecamp.com/skycoder01
wisekodama sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:24

Guys, I'm getting desperate. I'm just about ready to give up on this stupid Wikipedia Viewer. I'm so frustrated. I can't see what I'm doing wrong.

I decided to set up a separate CodePen just to work on the $.getJSON(); call to the API. Here's my script:

$(document).ready(function() {
  $("#button").click(function() {
    $("#greeting").html("Hello World");

    $.getJSON("https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json", function(json) {
      $("#output").html(JSON.stringify(json));
    });

    });
  });

I've just stuck the 'Hello World' in so I can check the event handler is working, which it is. The URL I'm using is lifted directly from the Wikipedia API documentation, and works perfectly when pasted into my browser. The 'stringify' bit is copied directly from the FreeCodeCamp tutorial, just amended to target the relevant element in my HTML. But it isn't doing anything.
Link to the CodePen.
Can you see where I'm going wrong?

Gulsvi
@gulsvi
Feb 22 2017 21:24
@WiseKodama I think if you do this, it will look the way you want:
  • Change the .btnContainer width to 40vw (the same width as your #twitchInfo)
  • Change the .butn width to 25% (to fill up the .btnContainer, which is the same width as #twitchInfo)
I think that's what you want? But not 100% sure xD
WiseKodama
@WiseKodama
Feb 22 2017 21:26
No for some reason it doesn't work
since if i change the butns to 25%
they take up 25% of the entire html
instead of the div container they are in...
Gulsvi
@gulsvi
Feb 22 2017 21:26
@WiseKodama Also change .btnContainer's width too. This is what I see:
image.png
.btnContainer{
  width:40vw;
  height:40px;
  display:table;
  margin:0 auto;
}
.butn{
  width: 25%;
  display:table-cell;
  text-decoration:underline;
}
WiseKodama
@WiseKodama
Feb 22 2017 21:28
Ahhh, now it works!
Gulsvi
@gulsvi
Feb 22 2017 21:28
@IvesNoIdea Have you learned how to read your browser's console yet?
WiseKodama
@WiseKodama
Feb 22 2017 21:28
Thanks again! @SkyCoder01
CamperBot
@camperbot
Feb 22 2017 21:28
wisekodama sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: wisekodama already gave skycoder01 points
WiseKodama
@WiseKodama
Feb 22 2017 21:28
!
Gulsvi
@gulsvi
Feb 22 2017 21:28
@WiseKodama :)
@WiseKodama I think you change #twitchInfo's width with a media query - you'll have to do the same for the .btnContainer
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:31
@SkyCoder01 No, I've got the console enabled on CodePen, but it isn't showing anything. I don't know how to view my browser's console. I'm using Firefox.
Gulsvi
@gulsvi
Feb 22 2017 21:32
@IvesNoIdea If you press Ctrl+Shift+J it will give you a different console than the one in codepen. It gives more errors and information.
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:32
Cool, I'll have a look...BRB...
Gulsvi
@gulsvi
Feb 22 2017 21:33
At least on my computer, if you're using Mac or Linux, I'm not sure what the command is...
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:35

It worked (I'm on Linux). I got this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. (Reason: CORS header 'Access-Control-Allow-Origin' missing).  (unknown)

It looks like it's the API blocking my request, but I don't understand why :worried:

I wonder if I need a key...
Gulsvi
@gulsvi
Feb 22 2017 21:35
@IvesNoIdea Perfect, This will help you in the future :) you can use google to search for that error. For now, I'll save you the search. Add &origin=* to the end of your wikipedia URL
That will allow requests from any origin
It's a security error
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:36
@SkyCoder01 Cool, thanks :-)
CamperBot
@camperbot
Feb 22 2017 21:36
ivesnoidea sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 22 2017 21:37
$(document).ready(function() {
  $("#button").click(function() {
    $("#greeting").html("Hello World");
    $.getJSON("https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&origin=*", function(json) {
      $("#output").html(JSON.stringify(json));
    });
  });
});
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:38
And it's working! I would never have figured that out without your help! You're a superstar :smile:
Gulsvi
@gulsvi
Feb 22 2017 21:38
Nah, I had to learn it the same as you :)
Annetta Ives
@IvesNoIdea
Feb 22 2017 21:40
Well yeah