These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Jan 2017
Michael Karpinski
@karpimpski
Jan 19 2017 00:35
@swong194 make your banner's top attribute 0
@swong194 check out this http://codepen.io/karpimpski/pen/GrrOQG I changed the numbers to make it fit right
varlackc
@varlackc
Jan 19 2017 00:39
Hello everyone, I am trying to complete the weather project, why is it that I have no values on the console. ?
Michael Karpinski
@karpimpski
Jan 19 2017 00:41
@varlackc you do. check the full-page view
varlackc
@varlackc
Jan 19 2017 00:43
@Michael I am suppose to see my local city.
Michael Karpinski
@karpimpski
Jan 19 2017 00:43
@varlackc it's not 100% accurate, but I see my city
varlackc
@varlackc
Jan 19 2017 00:45
what browser do you have Michael ?
Tyler Moeller
@TylerMoeller
Jan 19 2017 00:54
@varlackc change your API URL to use HTTPS (https://ipinfo.io)
You can't call insecure (http) resources from secure (https) origins
Tyler Moeller
@TylerMoeller
Jan 19 2017 01:04
@karpimpski I'm curious too, by the way, what browser are you using?
Michael Karpinski
@karpimpski
Jan 19 2017 01:05
chrome
I'm on chrome OS if that makes a difference
Tyler Moeller
@TylerMoeller
Jan 19 2017 01:06
Maybe, no idea why it would allow you to call HTTP resources when connected via HTTPS.
Seems like a security issue
Michael Karpinski
@karpimpski
Jan 19 2017 01:08
definitely, I didn't catch the URL was using http. I'm not sure why I could access it
Tyler Moeller
@TylerMoeller
Jan 19 2017 01:08
Maybe you're running chrome with the --allow-running-insecure-content flag set?
Michael Karpinski
@karpimpski
Jan 19 2017 01:09
I'm off the computer right now but I'll check in just a few minutes
Sunny Wong
@swong194
Jan 19 2017 01:21
@karpimpski thank you
CamperBot
@camperbot
Jan 19 2017 01:21
:cookie: 431 | @karpimpski |http://www.freecodecamp.com/karpimpski
swong194 sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
kevinliu6102
@kevinliu6102
Jan 19 2017 01:29
can anyone tell why the buttons are not lining up
http://codepen.io/keebin/pen/rjjzKp
codelerner8
@codelerner8
Jan 19 2017 01:36
i am not to make potfolio page
:worried:
codelerner8
@codelerner8
Jan 19 2017 01:46
hi
Ken Haduch
@khaduch
Jan 19 2017 01:59
@kevinliu6102 - they look like they are aligned? Have you made changes since you posted your questions?
kevinliu6102
@kevinliu6102
Jan 19 2017 02:07
yeah i have lol
i think they just didn't align because of something weird with display: inline-block
if there's no text inside it gets all wonky
Jon Grant
@jong649
Jan 19 2017 02:10
Is anyone familiar with using @media in css? I am trying to make my project resize depending on the screen size viewing it
I've been reading some articles on it, but am still a little confused on how to implement it, thanks
Tyler Moeller
@TylerMoeller
Jan 19 2017 02:11
@jong649 Feel free to post a codepen, we can take a look
I haven't started using it yet, I was first messing around with different bootstrap fluid containers
Tyler Moeller
@TylerMoeller
Jan 19 2017 02:13
@jong649 What are you trying to achieve with media queries?
Jon Grant
@jong649
Jan 19 2017 02:14
I was just looking for ways to view my project on a mobile device and still be able to keep the elements aligned, and sized properly
It almost works as is, except for the bottom row of the start and strict elements
Tyler Moeller
@TylerMoeller
Jan 19 2017 02:16
@jong649 Seems you are adding margins to your bootstrap grids, which won't work. You won't have to use media queries if you fix that.
Jon Grant
@jong649
Jan 19 2017 02:17
@TylerMoeller Thanks, I'll check it out, much appreciated
CamperBot
@camperbot
Jan 19 2017 02:17
jong649 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1344 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 19 2017 02:18
Apply the margins, paddings, fixed height, width etc to divs inside each of the col-xs-* divs.
Let bootstrap do the rest
Also, bootstrap doesn't have a row-fluid class
Jon Grant
@jong649
Jan 19 2017 02:20
@TylerMoeller Awesome, I was just randomly typing things haha
I'll try it out now
@TylerMoeller So don't use the CSS at all for width, height, etc? Just add it directly to the <div col-xs-* height="xx" width="xx">?
Tyler Moeller
@TylerMoeller
Jan 19 2017 02:24

@jong649 No, use CSS as you are, but apply it to an inner div, like:

    <div class="col-xs-2">
      <div class="contents">
        contents
      </div>
    </div>

^^ Apply the CSS to the .contents class

That's one option - several possibilities though
Jon Grant
@jong649
Jan 19 2017 02:24
@TylerMoeller Ok thanks again
CamperBot
@camperbot
Jan 19 2017 02:24
jong649 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jong649 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jan 19 2017 02:24
Sure, no problem
JD Tadlock
@jdtdesigns
Jan 19 2017 02:26
@buiphuking Here's an example of a basic slider with jQuery. ;) http://jsbin.com/fukeme/edit?js,output
Chiu Yong
@chiuyong
Jan 19 2017 02:49
is there anybody here to help me?
JD Tadlock
@jdtdesigns
Jan 19 2017 02:49
@chiuyong Post your question. There's always somebody around ;)
Chiu Yong
@chiuyong
Jan 19 2017 02:51
I don't know why my carousel isn't working. Can somebody show me where is the mistake? http://codepen.io/chiuyc/pen/NddaJM/
JD Tadlock
@jdtdesigns
Jan 19 2017 02:53
@chiuyong All you should have in your html panel is this:

<!-- About Magazine -->
<section id="about-magazine">
  <article>
    <div class="container">
      <div class="row">
        <div class="col-md-4">

          <!-- Carousel -->
          <div id="magazine-img-carousel" class="carousel slide" data-ride="carousel">

            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="magazine-img-carousel" data-slide-to="0" class="active"></li>
              <li data-target="magazine-img-carousel" data-slide-to="1"></li>
              <li data-target="magazine-img-carousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="https://s28.postimg.org/tew98spj1/imagem.png" alt="">
              </div>
              <div class="item">
                <img src="https://s28.postimg.org/tew98spj1/imagem.png" alt="">
              </div>
              <div class="item">
                <img src="https://s28.postimg.org/tew98spj1/imagem.png" alt="">
              </div>
            </div>

            <!-- Left and Right Controls -->
            <a class="left carousel-control" href="#magazine-img-carousel" 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="#magazine-img-carousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </article>
</section>
Add jQuery and Bootstrap js in Settings->JS->Quick Add
jQuery goes above Bootstrap
Chiu Yong
@chiuyong
Jan 19 2017 02:56
@jdtdesigns yes, I saw that and already corrected it. But when I click on one of the indicators... it won't go. Why?
JD Tadlock
@jdtdesigns
Jan 19 2017 03:00
@chiuyong All these -> data-target="magazine-img-carousel" need to be this -> data-target="#magazine-img-carousel"
Chiu Yong
@chiuyong
Jan 19 2017 03:01
oh
what a mistake
I didn't pay attention to that. I'm sorry. But I gratefully thank you :D @jdtdesigns
CamperBot
@camperbot
Jan 19 2017 03:03
chiuyong sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 851 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 03:03
welcome :)
Alexander Huynh
@caesarsalad93
Jan 19 2017 03:07
Howdy yall. A question about semantic elements in html. Can I makeup tag names and the html will just treat it as a div? For example, if I want to add a section for jokes, can i do <jokes></jokes> and the html will just treat it as a div?
JD Tadlock
@jdtdesigns
Jan 19 2017 03:09
@caesarsalad93 No, frameworks like Angular and Vue js can create components with custom names. They use the html5 <template> tag to do it though. ;)
Alexander Huynh
@caesarsalad93
Jan 19 2017 03:15
@jdtdesigns ty
CamperBot
@camperbot
Jan 19 2017 03:15
caesarsalad93 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 852 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Cale Switzer
@Tennyx
Jan 19 2017 03:25
For the life of me I can't figure out why this is not successfully returning the JSON:
$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(function(position) {

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

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=33906a112c9ccaeb6f563b7e1369e750", function(json){
      $("#data").html(JSON.stringify(json))
    });
  }); //function(json)//
}); //document ready//
JD Tadlock
@jdtdesigns
Jan 19 2017 03:26
@Tennyx If you're in chrome, you won't be able to use openweather without buying a premium account.
Chrome no longer supports navigator on http
you have to use https
Cale Switzer
@Tennyx
Jan 19 2017 03:29
@jdtdesigns Hey thanks! So I changed the openweather link to https and then refreshed the codepen page as https and still no luck. Should I just hop to a different browser for this exercise>
CamperBot
@camperbot
Jan 19 2017 03:29
tennyx sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 853 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Cale Switzer
@Tennyx
Jan 19 2017 03:30
@jdtdesigns it works if I manually enter in the coordinates, it just seems like there's a problem combining it with the geolocate function
JD Tadlock
@jdtdesigns
Jan 19 2017 03:31
@Tennyx You can just use a different api for weather. Weather Underground or apixu.com support https for free ;)
Tomas
@TOMEJUS
Jan 19 2017 03:39
Hey everyone, how you're doing?
Cale Switzer
@Tennyx
Jan 19 2017 03:45
@jdtdesigns wooo, weather underground works! Thanks again JD. Just because I like to learn about things, why the issue with openweather? Chrome no longer supports navigator JS on http requests and openweather will not send information to free accounts over https? Am I understanding that right?
CamperBot
@camperbot
Jan 19 2017 03:45
tennyx sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: tennyx already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 19 2017 03:47
@Tennyx Correct
@TOMEJUS Hi
Daniel
@DanJP2016
Jan 19 2017 03:56
i switched to the ip-api to get the location when i ran into this problem. is it a better option to switch the weather api, or does it not matter?
Tomas
@TOMEJUS
Jan 19 2017 03:58
Anyone tried doing background cover and run into problems with safari?
It just extends image and does nto show anything else after the image
JD Tadlock
@jdtdesigns
Jan 19 2017 04:01
@TOMEJUS are you using background-attachment fixed?
Tomas
@TOMEJUS
Jan 19 2017 04:02
@jdtdesigns Yes, but i am trying now with just the color and its still the same.
@jdtdesigns Interestgly enough, if I add more content AFTER the image (which shows perfectly on laptop) the image stretches to be longer on mobile (Safari) don't understand where is the problem, perhaps its height 100%?
JD Tadlock
@jdtdesigns
Jan 19 2017 04:03
if you have it on codepen post it @TOMEJUS
thats with black background
Works fine on laptop, tho on iphone (safari) it just shows blackground with a text and everything, but no Test or Lorem ipsum. Do you have an iphone you could try?
JD Tadlock
@jdtdesigns
Jan 19 2017 04:08
@TOMEJUS You're trying to make the orange fill the entire background?
Tomas
@TOMEJUS
Jan 19 2017 04:09
@jdtdesigns No, I want entirely different thing, but I think I found a solution. If anyone is interested: http://stackoverflow.com/questions/31421364/nested-flexbox-100-height-not-working-in-safari
Thank you @jdtdesigns anyways
CamperBot
@camperbot
Jan 19 2017 04:09
tomejus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 854 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 04:10
@TOMEJUS Another issue could be all the <head> code in the html panel. You only put the html that goes between <body></body> on codepen.
The head code, css and js are added through settings
<html><head><body> are all added for you
Tomas
@TOMEJUS
Jan 19 2017 04:11
No that's not the issue, but thanks anyways!
Mike
@MNJCMagic
Jan 19 2017 04:18
Hi, sorry to bother everyone - looking for help with my Twitch API project. Not sure what I'm missing but I assume I'm fundamentally misunderstanding something.
I can get it to loop through the currently streaming users from the array and display properly but in the else if case it gives me the same data each time through the array
JD Tadlock
@jdtdesigns
Jan 19 2017 04:26
@MNJCMagic For loops don't work correctly for ajax requests. You'll need to use a more async friendly iterator like .map() or .forEach()
Tomas
@TOMEJUS
Jan 19 2017 04:27
No the solution didn't work :( Whats with safari and 100% height :(((
Mike
@MNJCMagic
Jan 19 2017 04:27
Ok thank you very much, I'll go read about those. I appreciate you taking the time to look JD
JD Tadlock
@jdtdesigns
Jan 19 2017 04:27
@TOMEJUS What are you trying to achieve?
Tomas
@TOMEJUS
Jan 19 2017 04:28
@jdtdesigns http://codepen.io/monkevicius/pen/apBmoq do you see blue background?
@jdtdesigns do you see a text after the blue background in a red border?
@jdtdesigns if you do, then IF you have an iPhone can you check on mobile at least for me (safari) shows ONLY blue background and what's in it, nothing after the background. THat's the issue...
JD Tadlock
@jdtdesigns
Jan 19 2017 04:29
@MNJCMagic .map() is super easy to use
var streams = ['bob', 'jane', 'joe'];

streams.map(function(stream) {
  console.log(stream); // stream represents the current value in the array just like streams[i] in a for loop
});
@TOMEJUS I have an android, but i can see if i can work something out for you
Mike
@MNJCMagic
Jan 19 2017 04:31
thanks @jdtdesigns !
CamperBot
@camperbot
Jan 19 2017 04:31
mnjcmagic sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 855 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 04:33
@TOMEJUS Try changing this => height: 100%; to this => height: 100vh;
in #coverpage
leave html, body the same
Tomas
@TOMEJUS
Jan 19 2017 04:34
@jdtdesigns Didn't help, but a good attempt, thankss
CamperBot
@camperbot
Jan 19 2017 04:34
tomejus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: tomejus already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 19 2017 04:36
i'm not really sure of your plan lol @TOMEJUS
what kind of layout are you trying to achieve?
do you have examples?
Tomas
@TOMEJUS
Jan 19 2017 04:39
@jdtdesigns Once again, its not what im trying to achieve its browsers incompatibility... EVERYTHING AS IT JUST BE on the laptop, tough ON SAFARI only BACKGROUND is visible, that's the problem
Sung Guk Lee
@katsuya245126
Jan 19 2017 04:40
Hey guys
JD Tadlock
@jdtdesigns
Jan 19 2017 04:41
@TOMEJUS Safari is like IE. It's very strict on what you can do. You have to code everything by the books. Chrome and Firefox will 'correct' some things for you.
Sung Guk Lee
@katsuya245126
Jan 19 2017 04:41
my image is working in codepen but when I visit the full page on my phone, the image doesn't show up
JD Tadlock
@jdtdesigns
Jan 19 2017 04:45
@TOMEJUS And you might be surprised that is what you're trying to achieve. I see quite a few issues in your code. ;)
Addison Dalton
@Addison-Dalton
Jan 19 2017 04:46
So i'm trying to spruce up my Wikipedia viewer some. I want each search result to fade in, one after another. So far I've only been able to accomplish making all the results fade in at once.
Here's the section of code:
for(var i = 1; i < wikiResults[1].length;i++){
          $("#results-output").append($("<a id='search-link' href='"+ pageLink[i] +"'target='_blank'><div class='search-result'><u><h3>"+ title[i] +"</h3></u><article>"+ content[i] +"</article></div></a>")).hide().fadeIn(1000);
        };
JD Tadlock
@jdtdesigns
Jan 19 2017 04:50
@Addison-Dalton Can you post the pen?
Addison Dalton
@Addison-Dalton
Jan 19 2017 04:51
Tomas
@TOMEJUS
Jan 19 2017 04:51
@jdtdesigns can you point them out? what issues do you see?
amartinez52
@amartinez52
Jan 19 2017 04:52
Can someone tell me why I can
cant use my own photo to embed in the CodePen? I
I'm doing the first Front End Development project and I know how to place in image into HTML but every image i've tried hasn't worked yet
h1tag
@h1tag
Jan 19 2017 04:56
@amartinez52 post your codepen pen url here
amartinez52
@amartinez52
Jan 19 2017 04:58
<img src="http://imgur.com/a/yDCNg" alt="my father and beautiful mother">
h1tag
@h1tag
Jan 19 2017 05:03
I meant the url to the whole pen/project
@amartinez52
amartinez52
@amartinez52
Jan 19 2017 05:04
Ohh my bad lol but I think I figured it out so nvm
thanks though!
h1tag
@h1tag
Jan 19 2017 05:05
@amartinez52 what was the problem? (just curious)
JD Tadlock
@jdtdesigns
Jan 19 2017 05:06
@Addison-Dalton Here's how you can fade in elements one at a time http://jsbin.com/pidaqef/edit?html,css,js,output
amartinez52
@amartinez52
Jan 19 2017 05:07
I was using the wrong URLs for the photos I tried
Addison Dalton
@Addison-Dalton
Jan 19 2017 05:08
@jdtdesigns ah! thank you, I'll see what I can do with this.
CamperBot
@camperbot
Jan 19 2017 05:08
addison-dalton sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 856 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ayush Bahuguna
@relentless-coder
Jan 19 2017 05:11
would document.querySelectorAll('.sidebar-toggle a'); select all the anchor tags inside a div with sidebar-toggle?
h1tag
@h1tag
Jan 19 2017 05:14
Hey, I'm on the Local Weather project, I'm working on changing the background according to the weather forecast, I've created a changeBackground(response) function that takes the response from the weather api and a global backgrounds object that contains the urls to the backgrounds and uses a switch case to apply the background according to the weather but it's not working. Here's the codepen: https://codepen.io/FortMax/pen/zNNWLK
JD Tadlock
@jdtdesigns
Jan 19 2017 05:18
@relentless-coder if the sidebar-toggle div has a class of sidebar-toggle, then yes ;)
Tomas
@TOMEJUS
Jan 19 2017 05:20
@jdtdesigns That's a completely different thing.
@jdtdesigns And it does not work as well, only cover page is shown on the laptop.
h1tag
@h1tag
Jan 19 2017 05:29
nvm guys. Solved it. The $("body").css("background-image", "url(bgs.snow)"); lines inside the switch statement need to be written like this: $("body").css("background-image", "url(" + bgs.snow + ")"); but idk why exactly (because someone told me to do that on HelpJavaScript chat)
Sorin Ruse
@sorinr
Jan 19 2017 05:30
@fortMaximus because bgs.snow is a variable and when you concatenate it, should be like this "url(" + bgs.snow + ")"
@fortMaximus this way "url(bgs.snow)" will consider bgs.snow just a simple text
h1tag
@h1tag
Jan 19 2017 05:37
Got it. Thanks @sorinr
CamperBot
@camperbot
Jan 19 2017 05:37
fortmaximus sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1109 | @sorinr |http://www.freecodecamp.com/sorinr
Tomas
@TOMEJUS
Jan 19 2017 05:38
@jdtdesigns I just wrote post on CSS website
@jdtdesigns Let me know if you understand what i'm trying to achieve now
JD Tadlock
@jdtdesigns
Jan 19 2017 05:42
@TOMEJUS what version of iphone is it and what version of safari?
Tomas
@TOMEJUS
Jan 19 2017 05:42
@jdtdesigns You see the problem now? iPhone 5S, latest Safari.
Sorin Ruse
@sorinr
Jan 19 2017 05:45
@TOMEJUS have you tried to add <meta name="viewport" content="width=device-width, initial-scale=1.0"/> in the head to ensure that the initial zoom is 100% ?
Tomas
@TOMEJUS
Jan 19 2017 05:46

@sorinr Hi, hope you alright.

Yes I have this meta in my head:

<meta name="viewport" content="width=device-width, initial-scale=1">
Sorin Ruse
@sorinr
Jan 19 2017 05:48
@TOMEJUS sorry i can't help you with safari mobile. my old iphone its rip :)
Tomas
@TOMEJUS
Jan 19 2017 05:48
@sorinr no worries, i've tried to fix this for over 4 hours now... Still can't understand why does it act like this.
Sorin Ruse
@sorinr
Jan 19 2017 05:49
@TOMEJUS think its something in css that needs specific prefixing
Tomas
@TOMEJUS
Jan 19 2017 05:50
The way I see its height: 100% if i change that it seems to be working fine...
Sorin Ruse
@sorinr
Jan 19 2017 05:50
@TOMEJUS try 100vh instead of %
JD Tadlock
@jdtdesigns
Jan 19 2017 05:51
@TOMEJUS I'm installing an iphone sim. I'll do some testing in a min.
Tomas
@TOMEJUS
Jan 19 2017 05:52
@sorinr Already suggested by @jdtdesigns and didn't help :(
Sorin Ruse
@sorinr
Jan 19 2017 05:52
@TOMEJUS i'm on blind guessing as long i cannot see it :)
Tomas
@TOMEJUS
Jan 19 2017 05:56

@sorinr The problem is in:

html, body {
height: 100%

}

if i change that to for example: height: 500px it works perfectly, but I want full image page that's the problem...

And for some reason 100% is not good enough for safari, I whenever I try to google it i can't find much solutions on that, its like not common.
Sorin Ruse
@sorinr
Jan 19 2017 05:58
@TOMEJUS whats the code u have for the img or background-img ?
Tomas
@TOMEJUS
Jan 19 2017 05:58

@sorinr / Full page image /

coverPage {

background: url("http://orig10.deviantart.net/b44f/f/2013/032/9/a/sci_fi_web_by_emilwidlund-d5ti5if.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;

/ Prefixes /
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

height: 100%;

display: -webkit-flex;
display: flex; / Layout type is flexible /
align-items: center; / Vertical alignment /
justify-content: center;

}

However the way I understand this is fine, its the body and HTML who is troubling they make 100% of height and for some reason that's what safari is doing
Daniel
@DanJP2016
Jan 19 2017 05:59
not sure if this will help you, but I think this video explains what you are trying to do.
https://www.youtube.com/watch?v=hExwnLlj2xk
Tomas
@TOMEJUS
Jan 19 2017 06:00
@DanJP2016 Thank you Dan, I completely forgot youtube, im going to check it out in a sec.
CamperBot
@camperbot
Jan 19 2017 06:00
tomejus sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for danjp2016
Tyler Moeller
@TylerMoeller
Jan 19 2017 06:00
@TOMEJUS From the imgur screenshot you gave, looks like you're viewing it over the codepen "full" view. Does it happen when viewing over Debug view? I notice that iPhone does not render web pages well in codepen's "Full" view.
Daniel
@DanJP2016
Jan 19 2017 06:01
here is the codepen link for the code in the video, my internet is slow and the page is not loading so im not sure if it still works with the image
http://codepen.io/devtips/pen/XJByvr/?editors=0110
Tomas
@TOMEJUS
Jan 19 2017 06:03
@TylerMoeller You're right it is working fine in debug mode! How? and why?
Tyler Moeller
@TylerMoeller
Jan 19 2017 06:03
Good news :)
I haven't investigated why "Full" mode doesn't work well with the iPhone - it's hard to debug mobile safari and I just haven't taken the time
Tomas
@TOMEJUS
Jan 19 2017 06:04
@TylerMoeller What's the difference between full and debug view? Wow, just didn't expect that... Did something similar happened to you too? So everything is fine then, right? No additional fix needed? (considering that website is not on codepen)
Tyler Moeller
@TylerMoeller
Jan 19 2017 06:05
Yeah, it's a codepen issue, nothing wrong with your code. @TOMEJUS
Tomas
@TOMEJUS
Jan 19 2017 06:05
@TylerMoeller I just didn't see that coming...
Tyler Moeller
@TylerMoeller
Jan 19 2017 06:05
Codepen displays your page in an iFrame - and somehow that isn't compatible on mobile Safari + Chrome
JD Tadlock
@jdtdesigns
Jan 19 2017 06:05
@TOMEJUS Lol, i had that issue before on my old phone. Totally forgot. ;)
Tyler Moeller
@TylerMoeller
Jan 19 2017 06:06
Half of my codepens are broken because of that issue :)
JD Tadlock
@jdtdesigns
Jan 19 2017 06:06
Just for a test though, try this in debug http://codepen.io/jdtadlock/pen/MJJGEp?editors=0100
Tomas
@TOMEJUS
Jan 19 2017 06:07
@jdtdesigns It's not the head haha but thanks.
CamperBot
@camperbot
Jan 19 2017 06:07
tomejus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 857 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 06:07
did it work?
nothing to do with the head
Tomas
@TOMEJUS
Jan 19 2017 06:07
@TylerMoeller I appreciate. Makes sense of not finding a solution only, there isn't one!
JD Tadlock
@jdtdesigns
Jan 19 2017 06:07
js is setting the height
Tomas
@TOMEJUS
Jan 19 2017 06:08
@jdtdesigns Wouldn't mattered, as I said #coverPage can be 100% its the body and html who can't if I change that then it renders it correctly, but none of this matter since its codepens issue.
JD Tadlock
@jdtdesigns
Jan 19 2017 06:11
@TOMEJUS I'm just testing a fix for the heck of it. It might work now. I set the html, body height with js as well.
Tomas
@TOMEJUS
Jan 19 2017 06:12
@jdtdesigns Thanks for that, but there is no need now, since it wouldn't make any sense to add additional code if everything is working, it is due iframe I suppose. Thanks for all the help!
CamperBot
@camperbot
Jan 19 2017 06:12
tomejus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: tomejus already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 19 2017 06:12
Good God man lol
Tomas
@TOMEJUS
Jan 19 2017 06:16
@TylerMoeller Really can't thank you enough YOU have no idea how much time i've spent on googling (it's 6:15 now where I live) and I encountered this issue around 1 o'clock... so thanks again!
CamperBot
@camperbot
Jan 19 2017 06:16
tomejus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1345 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 19 2017 06:17
@TOMEJUS Happy to help :) Glad it's all figured out!
Bigyan Karki
@bigyankarki
Jan 19 2017 06:18
hi everyone
I am stuck on how to use weather API key on show the local weather project
can anyone help me
JD Tadlock
@jdtdesigns
Jan 19 2017 06:22
@bigyankarki Post your code
Bigyan Karki
@bigyankarki
Jan 19 2017 06:24
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=9d4a841a5b68f2cc43c97d5224e11086lat=" + lat + "&lon=" + lon;
  $.getJSON("apiAddress", function (weatherData){

    $("#weather").text(weatherData.weather.main + ', ' + weatherData.main.temp);
           });
}
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=9d4a841a5b68f2cc43c97d5224e11086lat=" + lat + "&lon=" + lon;
  $.getJSON("apiAddress", function (weatherData){

    $("#weather").text(weatherData.weather.main + ', ' + weatherData.main.temp);
           });
}
Darth Skywalker
@adityaparab
Jan 19 2017 06:25
@bigyankarki change your url to
ar apiAddress = "http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=9d4a841a5b68f2cc43c97d5224e11086lat=" + lat + "&lon=" + lon + "&callback=?";
added &callback=? at the end
Bigyan Karki
@bigyankarki
Jan 19 2017 06:26
what does thata &callback do?
JD Tadlock
@jdtdesigns
Jan 19 2017 06:26
returns jsonp
Darth Skywalker
@adityaparab
Jan 19 2017 06:26
the request you are making is cross domain request
browsers do not allow cross domain requests by default
Bigyan Karki
@bigyankarki
Jan 19 2017 06:27
in that case we use JSONP instead of JSON right?
Darth Skywalker
@adityaparab
Jan 19 2017 06:27
adding &callback=? in jQuery makes it a JSONP request and not simple AJAX request
Bigyan Karki
@bigyankarki
Jan 19 2017 06:28
oh cool
//get the address from the IP Geolocation API
function getLocation() {
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
    .fail(function(err) {
    getWeather()
  });
}

getLocation();

//Retreive temperature details from openweathermap.org
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=9d4a841a5b68f2cc43c97d5224e11086lat=" + lat + "&lon=" + lon + "&callback=?";
  $.getJSON("apiAddress", function (weatherData){
    $("#weather").text(weatherData.weather.main + ', ' + weatherData.main.temp);
           });
}
anyways the code is still not working
JD Tadlock
@jdtdesigns
Jan 19 2017 06:29
post the pen ;)
Bigyan Karki
@bigyankarki
Jan 19 2017 06:29
getlocation() seems to be working
Daniel
@DanJP2016
Jan 19 2017 06:32
doesn't jsonp open up security holes in a site? like allowing injection and cross site forgery attacks?
Sorin Ruse
@sorinr
Jan 19 2017 06:35
@bigyankarki and i think you don't need this id=524901 in ur url as long as you retrieve the data by lat and lon.
Bigyan Karki
@bigyankarki
Jan 19 2017 06:36
i just figured it out
this is the right format
but still not working
Sorin Ruse
@sorinr
Jan 19 2017 06:37
@bigyankarki ok why do you need q=London and id=524901?
Bigyan Karki
@bigyankarki
Jan 19 2017 06:39
i am not sure about the ID
i just saw that in their how to use API section
Sorin Ruse
@sorinr
Jan 19 2017 06:40
@bigyankarki exactly. get rid of it. it will confuse the api. or searching for city name or for city id or by lat and lon not all in one url
Bigyan Karki
@bigyankarki
Jan 19 2017 06:40
ok
JD Tadlock
@jdtdesigns
Jan 19 2017 06:41
just looked at it
"apiAddress" shouldn't be in quotes
also weatherData.weather should be weatherData.weather[0]
Sorin Ruse
@sorinr
Jan 19 2017 06:43
JD Tadlock
@jdtdesigns
Jan 19 2017 06:43
and you don't need the &callback=? param
openweather doesn't have a CORS Header
'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial&appid=9d4a841a5b68f2cc43c97d5224e11086'
Bigyan Karki
@bigyankarki
Jan 19 2017 06:45
@jdtdesigns thank you :)
CamperBot
@camperbot
Jan 19 2017 06:45
bigyankarki sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 858 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Bigyan Karki
@bigyankarki
Jan 19 2017 06:45
@sorinr thank you :)
CamperBot
@camperbot
Jan 19 2017 06:45
:star2: 1110 | @sorinr |http://www.freecodecamp.com/sorinr
bigyankarki sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Bigyan Karki
@bigyankarki
Jan 19 2017 06:46
seems to be working except for some reason i forgot how to access value inside a object inside an array
JD Tadlock
@jdtdesigns
Jan 19 2017 06:47
read above ;)
Bigyan Karki
@bigyankarki
Jan 19 2017 06:47
yay
done!
anyways i just wanted to ask
there seems to be a lot of way to access data from a server
JD Tadlock
@jdtdesigns
Jan 19 2017 06:49
javascript is versatile
Sorin Ruse
@sorinr
Jan 19 2017 06:49
@bigyankarki add the units parameter to your call. u retrieving the temps in kelvin now
Bigyan Karki
@bigyankarki
Jan 19 2017 06:49
like simple ajax only syntax would be a lot to write since we have to make request first through XMLHttp
JD Tadlock
@jdtdesigns
Jan 19 2017 06:49
which is one of the main reasons strict language programmers hate it @bigyankarki
Bigyan Karki
@bigyankarki
Jan 19 2017 06:50
alright @sorinr
oh
@jdtdesigns exactly how m any ways are there to access data from the server?
Sorin Ruse
@sorinr
Jan 19 2017 06:51
@bigyankarki see the @jdtdesigns above url for using units
JD Tadlock
@jdtdesigns
Jan 19 2017 06:51
depends on the situation @bigyankarki
Bigyan Karki
@bigyankarki
Jan 19 2017 06:52
thanks @sorinr i added the unit too
CamperBot
@camperbot
Jan 19 2017 06:52
bigyankarki sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: bigyankarki already gave sorinr points
JD Tadlock
@jdtdesigns
Jan 19 2017 06:52
it's more the way to use the data than requesting it
Bigyan Karki
@bigyankarki
Jan 19 2017 06:53
like why dont we simply use ajax?
JD Tadlock
@jdtdesigns
Jan 19 2017 06:53
once you get to Node, you'll have some fun with web scraping
Bigyan Karki
@bigyankarki
Jan 19 2017 06:53
haha
i hope so
because at this stage I am so confused
JD Tadlock
@jdtdesigns
Jan 19 2017 06:54
i made an app to get all the Fantasy Football expert rankings and average them out
it scrapes all the major FF sites ;)
Sorin Ruse
@sorinr
Jan 19 2017 06:55
@bigyankarki your jquery getJSON call its just a pure javascript ajax call reduced to be more simple
Bigyan Karki
@bigyankarki
Jan 19 2017 06:55
I was going through W3schools ajax syntax and there seems to be a lot of code
however we are using jquery and ajax in my case right?
JD Tadlock
@jdtdesigns
Jan 19 2017 06:56
@bigyankarki This stuff doesn't come quickly. It'll take you awhile to understand each step.
Bigyan Karki
@bigyankarki
Jan 19 2017 06:56
haha got that! i wonder when
JD Tadlock
@jdtdesigns
Jan 19 2017 06:56
Yes, jQuery and it's ajax functionality
jQuery just sort of wraps javascript and makes it easier to use
Bigyan Karki
@bigyankarki
Jan 19 2017 06:57
ya jquery is a JS library isnt it? like it shortens the code because it is already pre-written
JD Tadlock
@jdtdesigns
Jan 19 2017 06:58
@bigyankarki Yep, it's a library of 'functions' or 'methods'.
Bigyan Karki
@bigyankarki
Jan 19 2017 06:58
oh
@jdtdesigns also when we call a function to go through the object in JSON file
the paramater we pass to a function is the JSON object name?
$.getJSON(apiAddress, function (weatherData){
in this example i am going to retrieve properties from object whose name i gave?
JD Tadlock
@jdtdesigns
Jan 19 2017 07:01
// Vanilla JS way
var buttons = document.querySelectorAll('.wrap button'), i;

for ( i = 0; i < buttons.length; i++ ) {
  buttons[i].addEventLister('click', doSomething);
}

// jQuery way
$('.wrap button').on('click', doSomething);
just an example of what jQuery does for you
Bigyan Karki
@bigyankarki
Jan 19 2017 07:02
got that one
John Nunns
@johnnunns
Jan 19 2017 07:02
Hey @jdtdesigns I'm about 75% on these problems I've been working on, care to help with a similar one?
Alexander Huynh
@caesarsalad93
Jan 19 2017 07:02
Does anybody have experience accessing Yelp's api with javascript?
Please let me know if you do, I'm not sure how to get rolling with this
JD Tadlock
@jdtdesigns
Jan 19 2017 07:03
@bigyankarki Yeah, the param refers to the request response. It can be any name you give it as the name is just a placeholder.
@johnnunns What's the issue?
John Nunns
@johnnunns
Jan 19 2017 07:04
so now the opposite side I'm attempting to turn an object into an array
var obj = 
{
  name: 'Holly',
  age: 35,
  role: 'producer'
}

function convertObjectToList(obj) {
  for( i = 0; i<obj.length; i++){
      var a = [];
      a[i][0]= i[1]
  }

  return obj
}

convertObjectToList(obj)
JD Tadlock
@jdtdesigns
Jan 19 2017 07:04
oh, fun :)
one sec
John Nunns
@johnnunns
Jan 19 2017 07:04
I wanted to learn both the for loop and reduce way
Bigyan Karki
@bigyankarki
Jan 19 2017 07:04
hmm @jdtdesigns
John Nunns
@johnnunns
Jan 19 2017 07:05
np
JD Tadlock
@jdtdesigns
Jan 19 2017 07:06
@johnnunns What's the result supposed to look like?
Bigyan Karki
@bigyankarki
Jan 19 2017 07:06
@jdtdesigns can you suggest any resources that would help me better understand these basic concepts
John Nunns
@johnnunns
Jan 19 2017 07:06
[['name', 'Holly'], ['age', 35], ['role', 'producer']]
Oh, I see now I definitely need to nest a for loop
or wait, do i?
since it still is basically an array inside an array
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:08

i am making 'start' function for simon says game.To keep track of previously highlighted buttons i am using an array and concatenating that with my newArray which is made to store the new inputs in the next round.

but somehow my logic seems to be not working
can anyone help me out?

JD Tadlock
@jdtdesigns
Jan 19 2017 07:14
@johnnunns Before i post the answer, are you sure you don't want to figure it out?
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:14
@jdtdesigns need your help
John Nunns
@johnnunns
Jan 19 2017 07:15
@jdtdesigns haha yes I definitely want to figure it out w/o answer
but I can see I'll need some help
JD Tadlock
@jdtdesigns
Jan 19 2017 07:15
you can use the 'for in' loop to iterate through the object props
then you can use .push() to push an array with the prop and value to an array the function will return
@johnnunns
@MohammadHasham Post the pen if you have one
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:17

http://codepen.io/Mohammad_Hasham/pen/JbWOWw?editors=0010

The problem is with he start function.
The relevant functions are beforeComp(),displayCounter(),startComp() please have a look on those

@jdtdesigns
i am trying to store the old values in arr2 and new incoming values in arr1 then concatenating them
JD Tadlock
@jdtdesigns
Jan 19 2017 07:19
@MohammadHasham Before i look, i'll go ahead and say you should only need 2 arrays.
One for the sequence and one for user input
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:20
but i need to keep track of the computer generated pattern that was made in the previous round
i have used that approach in strict implementation
but for start it's a bit different
JD Tadlock
@jdtdesigns
Jan 19 2017 07:20
the sequence is built one at a time
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:20
@jdtdesigns
can you elaborate a little
JD Tadlock
@jdtdesigns
Jan 19 2017 07:21
so it's easy to keep the sequence in one array
because you can just show each index value one at a time
using a timeout or interval
i'd recommend a timeout
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:21
i'll show you my function just a sec
function simpleGame() {



    beforeComp();
    var value = start;
    while (value !== 0) {


      if (start%10 == 1 ) {
        //yellow

        $('#yellow-btn').fadeOut(100);
        $('#yellow-btn').fadeIn(100);
        arr2.unshift(1);

        //yellow
        arr.unshift(1);

      } else if (start%10 == 2 ) {
        //green

        $('#green-btn').fadeOut(1000);
        $('#green-btn').fadeIn(2000);
        arr2.unshift(2);

        //green
        arr.unshift(2); // arr[1] = x;

      } else if (start%10 ==3 ) {

        $('#red-btn').fadeOut(1500);
        $('#red-btn').fadeIn(300);
        arr2.unshift(3);

        //green
        arr.unshift(3); // arr[1] = x;

      } else if (start%10 == 4 ) {
        //blue

        $('#blue-btn').fadeOut(500);
        $('#blue-btn').fadeIn(1000);
        arr2.unshift(4);
        //blue
        arr.unshift(4); //arr[3] = x;

      }

     else if (start%10 == 5 ) {
        //yellow
        $('#yellow-btn').fadeOut(100);
        $('#yellow-btn').fadeIn(5000);
       arr2.unshift(5);
        //yellow
        arr.unshift(5);
      }

      else if (start%10 == 6 ) {
        //green

        $('#green-btn').fadeOut(1000);
        $('#green-btn').fadeIn(2000);
         arr2.unshift(6);
        //green
        arr.unshift(6); // arr[1] = x;

      } else if (start%10 == 7 ) {

        $('#red-btn').fadeOut(1500);
        $('#red-btn').fadeIn(300);
         arr2.unshift(7);
        //green
        arr.unshift(7); // arr[1] = x;

      } else if (start%10 == 8 ) {
        //blue

        $('#blue-btn').fadeOut(500);
        $('#blue-btn').fadeIn(1000);
        arr2.unshift(8);
        //blue
        arr.unshift(8); //arr[3] = x;

      }
      else{
        $('#yellow-btn').fadeOut(100);
        $('#yellow-btn').fadeIn(5000);

        arr2.unshift(8);
        //yellow
        arr.unshift(9);    
      }

      value--;

    }
    arr.concat(arr2);
    console.log(arr);
  }

  function beforeComp()
  {
    var value = start;
    while (value !== 0) { 
      if (arr2[i]%10 == 1 ) {
        $('#yellow-btn').fadeOut(100);
        $('#yellow-btn').fadeIn(100);
        i++;
        start++;
      } else if (arr2[i]%10 == 2 ) {
        $('#green-btn').fadeOut(1000);
        $('#green-btn').fadeIn(2000);
         i++;
        start++;
      } else if (arr2[i]%10 ==3 ) {
        $('#red-btn').fadeOut(1500);
        $('#red-btn').fadeIn(300);
         i++;
        start++;
      } else if (arr2[i]%10 == 4 ) {
        $('#blue-btn').fadeOut(500);
        $('#blue-btn').fadeIn(1000);
         i++;
         start++;
      }
     else if (arr2[i]%10 == 5 ) {
        $('#yellow-btn').fadeOut(100);
        $('#yellow-btn').fadeIn(5000);
         i++;
         start++;
      }
      else if (arr2[i]%10 == 6 ) {
        $('#green-btn').fadeOut(1000);
        $('#green-btn').fadeIn(2000);
         i++;
         start++;
      } else if (arr2[i]%10 == 7 ) {
        $('#red-btn').fadeOut(1500);
        $('#red-btn').fadeIn(300);
         i++;
         start++;
      } else if (arr2[i]%10 == 8 ) {
        $('#blue-btn').fadeOut(500);
        $('#blue-btn').fadeIn(1000);
         i++;
         start++;
      }
      else if (arr2[i]%10 == 9){
        $('#yellow-btn').fadeOut(100);
        $('#yellow-btn').fadeIn(5000);
         i++;
         start++;
      }
      value--;

    }
  }
this is the main crux
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 07:23
oh boy lol
i can see why
mucho repeated code
your goal in any app you build is to never use else if
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:23
yeah i'll do that once i'll get to the logic
JD Tadlock
@jdtdesigns
Jan 19 2017 07:23
every logical operation can usually 99% of the time be done with just if/else
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:24
then why can't be they used?
JD Tadlock
@jdtdesigns
Jan 19 2017 07:24
else if
not if/else
meaning one if and an else
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:25
okay.So you mean to say that if else conditions are bad to use
JD Tadlock
@jdtdesigns
Jan 19 2017 07:26
if you're chaining more than 3 if's or elses, you're most likely writing WET code
so go back through it and you'll usually find ways to DRY it up
John Nunns
@johnnunns
Jan 19 2017 07:26
@jdtdesigns far from done but can you tell me why my push method is being errored as "not a function"

```function convertObjectToList(obj) {
for(var i in obj){
obj.push([i])
}

}
```

Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:27
@jdtdesigns
okay i'll mind that next time.I'll DRY it up once after getting the logic done.
John Nunns
@johnnunns
Jan 19 2017 07:27
function convertObjectToList(obj) {
  for(var i in obj){
    obj.push([i])
  }

}
JD Tadlock
@jdtdesigns
Jan 19 2017 07:27
because obj is not an array @johnnunns
@MohammadHasham I'm telling you this because if you go back and DRY it now, you'll most likely find the issue ;)
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:28
how can i DRY this up.By using predefined functions or what?
JD Tadlock
@jdtdesigns
Jan 19 2017 07:29
@MohammadHasham Don't forget you have the awesome 'this' in any event function
Muhammad Hasham
@MohammadHasham
Jan 19 2017 07:29
okay @jdtdesigns Thank
JD Tadlock
@jdtdesigns
Jan 19 2017 07:29
So instead of creating an if for each button, just use 'this' to refer to the button clicked
CamperBot
@camperbot
Jan 19 2017 07:29
:cookie: 859 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
mohammadhasham sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JD Tadlock
@jdtdesigns
Jan 19 2017 07:31
also, since elements in the DOM all have index values, you can use those too
John Nunns
@johnnunns
Jan 19 2017 07:31
yeah man I've hit a wall then I'm afraid @jdtdesigns
not sure how to use a push if it's not an array. Common logic would tell me I have to make it an array first before I can push an array on it
JD Tadlock
@jdtdesigns
Jan 19 2017 07:32
@johnnunns You'll need to create an empty array inside the function that you can push to. The 'obj' is referring to the object being passed into the function.
John Nunns
@johnnunns
Jan 19 2017 07:33
gotcha. like a var x = []
JD Tadlock
@jdtdesigns
Jan 19 2017 07:33
@johnnunns right ;)
Sorin Ruse
@sorinr
Jan 19 2017 07:33
@johnnunns failure in web dev its mother of learning. don't be afraid that u can fail. :)
alpox
@alpox
Jan 19 2017 07:34
@sorinr Failure everywhere is :D
John Nunns
@johnnunns
Jan 19 2017 07:35
@sorinr life lessons :)
function convertObjectToList(obj) {
  for(var i in obj){
    var x = []
    x.push(obj[i])
  }

}

convertObjectToList(obj)
Sorin Ruse
@sorinr
Jan 19 2017 07:35
@alpox if you keep go on and improve your coding its not
John Nunns
@johnnunns
Jan 19 2017 07:35
wait I think i see it hold on
JD Tadlock
@jdtdesigns
Jan 19 2017 07:35
@johnnunns You're getting close
John Nunns
@johnnunns
Jan 19 2017 07:35
function convertObjectToList(obj) {
  for(var i in obj){
    var x = []
    x.push(obj[i])
  }
  return obj
}

convertObjectToList(obj)
JD Tadlock
@jdtdesigns
Jan 19 2017 07:36
nope :P
John Nunns
@johnnunns
Jan 19 2017 07:36
so when I run it I'm still returning the exact same object haha
JD Tadlock
@jdtdesigns
Jan 19 2017 07:36
the empty array should be outside the for loop
and you'll be returning the array, not the obj
because the whole goal is to convert the object to an array :P
asmaamoussa
@asmaamoussa
Jan 19 2017 07:39
Hello;
I am almost done with my pen. plz let me know ur opinion and I also want to know how to center align the social media buttons at the very end?
John Nunns
@johnnunns
Jan 19 2017 07:39
var x = []
function convertObjectToList(obj) {
  for(var i in obj){

    x.push(obj[i])
  }

  return x
}

convertObjectToList(obj)
JD Tadlock
@jdtdesigns
Jan 19 2017 07:40
@johnnunns Not outside the function, just above the for loop
And you're pushing an array to the array, not just the value
and the array's first value will be the property and the second value is the object value
John Nunns
@johnnunns
Jan 19 2017 07:43
oh wow
function convertObjectToList(obj) {
    var x = []
  for(var i in obj){

    x.push([i,obj[i]])
  }

  return x
}

convertObjectToList(obj)
I think I did it?
Sorin Ruse
@sorinr
Jan 19 2017 07:44
@asmaamoussa as i said yesterday using same colors fur the buttons in the nav as you have the on the picture's doors it will make sense to the user that clicking that button will open a specific door (get some specific info)
JD Tadlock
@jdtdesigns
Jan 19 2017 07:44
;)
@johnnunns
John Nunns
@johnnunns
Jan 19 2017 07:44
ok, here's the barrage of questions now :)
i by itself equaled all of the values in the object correct?
JD Tadlock
@jdtdesigns
Jan 19 2017 07:45
the properties
John Nunns
@johnnunns
Jan 19 2017 07:45
only the properties?
JD Tadlock
@jdtdesigns
Jan 19 2017 07:45
yep
John Nunns
@johnnunns
Jan 19 2017 07:45
so if i console.log(i) it would just be name, age, etc
JD Tadlock
@jdtdesigns
Jan 19 2017 07:45
correct
John Nunns
@johnnunns
Jan 19 2017 07:46
ok, well that's that then
because it makes sense to me that obj[i] then equals the values
cool stuff.
JD Tadlock
@jdtdesigns
Jan 19 2017 07:46
eezypeezy
John Nunns
@johnnunns
Jan 19 2017 07:46
Still got to it with your help and some very random tinkering haha
asmaamoussa
@asmaamoussa
Jan 19 2017 07:46
@sorinr yes I loved your idea and on my way to execute it. Now I am more concerned with positioning the social media buttons. can u help
John Nunns
@johnnunns
Jan 19 2017 07:46
thanks bud @jdtdesigns
CamperBot
@camperbot
Jan 19 2017 07:46
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 860 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 07:46
@johnnunns welcome
John Nunns
@johnnunns
Jan 19 2017 07:47
what's the higher level function you could use for it?
or is there one?
JD Tadlock
@jdtdesigns
Jan 19 2017 07:47
.reduce() is for arrays so wouldn't work for that
lodash allows you to use any of the higher orders on objects as well
which is why most devs use it on every project
as well as me :P
Sorin Ruse
@sorinr
Jan 19 2017 07:49
@asmaamoussa suppose you want them centered. right?
alpox
@alpox
Jan 19 2017 07:50
@johnnunns @jdtdesigns Converting the object keys to an array and then map over it:
Object.keys(obj).map((key, idx) => [idx, obj[key]]);
asmaamoussa
@asmaamoussa
Jan 19 2017 07:51
@sorinr yup
JD Tadlock
@jdtdesigns
Jan 19 2017 07:51
@alpox ;)
Sorin Ruse
@sorinr
Jan 19 2017 07:51
@asmaamoussa just add text-align: center; to #social-media{ in css
asmaamoussa
@asmaamoussa
Jan 19 2017 07:54
@sorinr I did already and it wasn't working. now it did work :D
Sorin Ruse
@sorinr
Jan 19 2017 07:56
@asmaamoussa maybe u had some other code before that was canceling that property
asmaamoussa
@asmaamoussa
Jan 19 2017 07:58
@sorinr yes... anyways, thank u. you've been a great help
CamperBot
@camperbot
Jan 19 2017 07:58
asmaamoussa sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1111 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 19 2017 07:58
@alpox not sure if the above will work for nested data
@asmaamoussa welcome
JD Tadlock
@jdtdesigns
Jan 19 2017 08:05
@alpox i win Object.keys(obj).map(key=> [key, obj[key]])
Sorin Ruse
@sorinr
Jan 19 2017 08:06
lol
alpox
@alpox
Jan 19 2017 08:25
@jdtdesigns Right :D
chapeau
@sorinr You're right, but it didn't seem that he needs nested data :thought_balloon:
Sorin Ruse
@sorinr
Jan 19 2017 08:32
@alpox i would ask to provide an input and output example before any work its done. anyway both u and @jdtdesigns made great jobs based on the info u had :+1:
hey guys, i collapsed my navigation bar but when i am using mobile, i can't click it
anyone can help me with this?
kirbyedy
@kirbyedy
Jan 19 2017 09:04
@FL8Liew make sure you include jquery and bootstrap libraries in the codepen settings
in the javascript part
FL8Liew
@FL8Liew
Jan 19 2017 09:04
@kirbyedy do u have sample on what should i include there?
kirbyedy
@kirbyedy
Jan 19 2017 09:05
jquery should be loaded first, then bootstrap
just the quick add
as you did in the css section
FL8Liew
@FL8Liew
Jan 19 2017 09:05
sorry, but i dont get what u mean.....
kirbyedy
@kirbyedy
Jan 19 2017 09:06
here is a picture
Screen Shot 2017-01-19 at 11.05.44.png
FL8Liew
@FL8Liew
Jan 19 2017 09:06
oh, so which mean i need to include bootstrap under javascript too?
kirbyedy
@kirbyedy
Jan 19 2017 09:07
yes
FL8Liew
@FL8Liew
Jan 19 2017 09:07
ok, i get it
thank you very much
:D
kirbyedy
@kirbyedy
Jan 19 2017 09:07
note the sequence, first jquery then bootstrap
FL8Liew
@FL8Liew
Jan 19 2017 09:07
ok, thx
Ayush Bahuguna
@relentless-coder
Jan 19 2017 09:49
need help with an angular js issue. I have a function inside my service, how do I use it my controller?
Muhammad Hasham
@MohammadHasham
Jan 19 2017 10:15
what is the use of .prop() in simple words in jquery?
Anabel
@AnabelSalomone
Jan 19 2017 10:46
Please, can anybody help me with the drop-down menu in the navigation bar? click on it and you'll see the problem :/ https://jsfiddle.net/marieanabel/pkn9h4c7/64/
guys check out my weather app
Immersiveone
@Immersiveone
Jan 19 2017 10:48
@shenoyabhijith Nice Job!
abhijith shenoy
@shenoyabhijith
Jan 19 2017 10:48
@Immersiveone thanks !
CamperBot
@camperbot
Jan 19 2017 10:48
shenoyabhijith sends brownie points to @immersiveone :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @immersiveone |http://www.freecodecamp.com/immersiveone
Immersiveone
@Immersiveone
Jan 19 2017 10:48
@shenoyabhijith Able to make the font a little darker?
abhijith shenoy
@shenoyabhijith
Jan 19 2017 10:48
yea sure
Sorin Ruse
@sorinr
Jan 19 2017 10:55
@shenoyabhijith i woud math.round the temperatuire
abhijith shenoy
@shenoyabhijith
Jan 19 2017 10:56
why what temparature did you get?
Immersiveone
@Immersiveone
Jan 19 2017 10:57
@shenoyabhijith That's perfect! Great job, I can't wait to get to your level!
Sorin Ruse
@sorinr
Jan 19 2017 10:57
@shenoyabhijith its -4.3 and i think -4 will be just ok :)
checkout new and altered
weather app
Sorin Ruse
@sorinr
Jan 19 2017 11:31
@shenoyabhijith yep :+1:
final
after the tweak
BEL. Yacine
@ByZource
Jan 19 2017 11:40
var colors = ["red","blue","black","yellow"];

$("#nextbtn").on("click", function (e) {

    for(var i = 0; i < colors.length; i++) {     
        $("body").css("background-color", colors[i]);      
    }

});
Hi guys, please why the for loop give me just the last color each time I click?
MacGuffin
@MacGuffin1990
Jan 19 2017 11:45
hello everyone what is wrong with my "twitch tv programe".i can not show all the message in "div". can someone help mehttp://codepen.io/MacGuffin1990/pen/LxbaRy?editors=0010
Darth Skywalker
@adityaparab
Jan 19 2017 11:46
@ByZource : Because by the time loop ends, you're last color is applied to body
loop runs too fast for you to visually notice the changing colors
what are you trying to achieve here, if I may ask?
Faisal Zulfiqar
@faisal1337
Jan 19 2017 11:50
I have this website http://ifrnd.org/main/ and I want to make the grey background to occupy full width of the page in the "Welcome" section. It's placed inside a container. So I have to use position = absolute. But that breaks things up and it doesn't stays responsive. Any help will be highly appreciated.
BEL. Yacine
@ByZource
Jan 19 2017 11:52
@adityaparab I work on the first project (quotes generator) and I want to change the background color witch each click (like the one giving as the example) the quotes generation is already done but I stuck with the color switching...
Darth Skywalker
@adityaparab
Jan 19 2017 11:53
@ByZource I see, you can do it like you select a random number between 0 and colors.length
and apply that to your body
BEL. Yacine
@ByZource
Jan 19 2017 11:55
okay, I will try that :D
Darth Skywalker
@adityaparab
Jan 19 2017 11:57
function getRandom(limit) {
  return Math.ceil(Math.random() * max);
}

var colors = ["red","blue","black","yellow"];
var currentColor = colors[0];
var newColor = '';
$("body").css("background-color", currentColor );

$("#nextbtn").on("click", function (e) {
  while(newColor != currentColor){
    newColor = colors[getRandom(colors.length)];
  }
  $("body").css("background-color", currentColor );
  currentColor = newColor;
});
@ByZource
Faisal Zulfiqar
@faisal1337
Jan 19 2017 11:58
I have this website http://ifrnd.org/main/ and I want to make the grey background to occupy full width of the page in the "Welcome" section. It's placed inside a container. So I have to use position = absolute. But that breaks things up and it doesn't stays responsive. Any help will be highly appreciated. SOMEBODY?
c0d0er
@c0d0er
Jan 19 2017 12:42
does anybody know why the following jquery code doesnt work?
const tableMaker = () => {
  const app = document.getElementById('app');
  //const table = document.createElement('TABLE');
  const table = $('<table></table>')//---->why doesnt work?
  //const tableBody = document.createElement('TBODY');
  const tableBody = $('<tbody></tbody>')//---->why doesnt work?
  //table.appendChild(tableBody);
  table.append(tableBody);

  for(let i=0; i<25; i++){
    const tr = document.createElement('TR');
    tableBody.appendChild(tr);
    for(let j=0; j<40; j++){
      const td = document.createElement('TD');
      $(td).append(j)
      $(tr).append(td);
    }
  }
  $(app).append(table)
}
Mostafa Masri
@thefakeweed
Jan 19 2017 12:55
hey guys im unable to change the color of the text of my buttons http://codepen.io/mml3b/pen/KaamPX
form action
Sorin Ruse
@sorinr
Jan 19 2017 12:58
@mml3b first u should use form tag only once to wrap all your inputs
Mostafa Masri
@thefakeweed
Jan 19 2017 12:59
ohh
how can i do that ?
Sorin Ruse
@sorinr
Jan 19 2017 13:00
@mml3b it should be like <form><input><input>....</form?
Mostafa Masri
@thefakeweed
Jan 19 2017 13:01
didnt get it
do i have to nest something inside something :/
Sorin Ruse
@sorinr
Jan 19 2017 13:02
@mml3b you changed your pen in the mean time. first you had 3 buttons there
Mostafa Masri
@thefakeweed
Jan 19 2017 13:04
yup i did
how can i correct it as you said
Sorin Ruse
@sorinr
Jan 19 2017 13:05
@mml3b you just need to place all your inputs inside the form tag
Mostafa Masri
@thefakeweed
Jan 19 2017 13:06
but i have different form actions for every input
Sorin Ruse
@sorinr
Jan 19 2017 13:09
@mml3b then do not use action="http://google.com/+thefakeweed"> into the form. instead of inputs u can just use <a href="url in here"> tags
Mostafa Masri
@thefakeweed
Jan 19 2017 13:11
and where do i put this tag ? do i nest it into the input
Sorin Ruse
@sorinr
Jan 19 2017 13:11
@mml3b in this case you don't need the form taags
@mml3b you just want to link some icons to some external resources. right?
Muhammad Hasham
@MohammadHasham
Jan 19 2017 13:20
is ForEach() used in this example deprecated now
function forEach(array, action) 
{ 
for (var i = 0; i < array.length; i++) 
    action(array[i]); 
}
forEach(["Wampeter", "Foma", "Granfalloon"], console.log);
@sorinr
Bikal Khawas
@bikalkhawas
Jan 19 2017 13:22
hello everyone, I got problem in my editor. My code works well in debug mode but won't work in editor view. Any help will be appreciated. This is my codepen https://codepen.io/bikal/pen/GrNpMw and my debug mode is http://s.codepen.io/bikal/debug/GrNpMw/bYMdyYByDdNr
Darth Skywalker
@adityaparab
Jan 19 2017 13:37
@MohammadHasham It's not a part of js specification so there is no question of it getting deprecated. ;)
Do not confuse this forEach with Array.prototype.forEach
although they have similar signature and behavior, they aren't necessarily hosted on same object.
Clyde Lobo
@oppiniated
Jan 19 2017 13:39
@bikalkhawas hint: debug mode runs on http, your editor view is on https, run your pen on http and it will work. I want you to find out why it does not work on https. SO try http://codepen.io/bikal/pen/GrNpMw and this should work
Bikal Khawas
@bikalkhawas
Jan 19 2017 13:46
@oppiniated thank you so much, :smile:
CamperBot
@camperbot
Jan 19 2017 13:46
bikalkhawas sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @oppiniated |http://www.freecodecamp.com/oppiniated
Muhammad Hasham
@MohammadHasham
Jan 19 2017 13:55
@adityaparab so what is the difference between the both?
Darth Skywalker
@adityaparab
Jan 19 2017 13:56

@MohammadHasham

@adityaparab so what is the difference between the both?

:point_up: This (2nd message)

Muhammad Hasham
@MohammadHasham
Jan 19 2017 13:57
with Array.prototype.forEach we can traverse the array but what about the second one?
@adityaparab
Darth Skywalker
@adityaparab
Jan 19 2017 13:58
you do exactly the same thing
Muhammad Hasham
@MohammadHasham
Jan 19 2017 13:59
can you explain me this
function forEach(array, action) { for (var i = 0; i < array.length; i++) action(array[i]); }
forEach(["Wampeter", "Foma", "Granfalloon"], console.log); // → Wampeter // → Foma // → Granfalloon
why are we passing action with it
Darth Skywalker
@adityaparab
Jan 19 2017 13:59

in fact, the function

function forEach(array, action) { 
  for (var i = 0; i < array.length; i++) 
    action(array[i]); 
}

explains how Array.prototype.forEach works internally.

Array.prototype.forEach = function(action){
  for (var i = 0; i < this.length; i++) 
    action(this[i]); 
}
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:00
why is action passed as an argument?
Darth Skywalker
@adityaparab
Jan 19 2017 14:00
it's nothing but a callback function.
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:00
okay!
@adityaparab Thanks.
CamperBot
@camperbot
Jan 19 2017 14:00
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 877 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Jan 19 2017 14:01
take a look at this
var x = console.log

x('Hello! I am alias for console.log');
so the 2nd parameter action becomes an alias for console.log
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:01
yeah! that is what i can understand!
okay thanks
Darth Skywalker
@adityaparab
Jan 19 2017 14:01
and when you call action, you're in fact calling console.log
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:02
i see.
i'll give that a try!
Darth Skywalker
@adityaparab
Jan 19 2017 14:02
and why do they pass action as a parameter? That's because forEach expects a callback function that it will operate on each element in the array
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:03
really nicely explained.
thanks man
can you give me a link to study for each?
@adityaparab
Darth Skywalker
@adityaparab
Jan 19 2017 14:06

@MohammadHasham

:point_up: Here! ;)

Try and understand what's going on there
Mostafa Masri
@thefakeweed
Jan 19 2017 14:07
ive been trying to do it since 2 days and its getting on my nerves :/
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:09
just a last thing @adityaparab
Marianissimus
@Marianissimus
Jan 19 2017 14:09
@mml3b show us your code - preferably a link to your codepen
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:09
var numbers = [1, 2, 3, 4, 5], sum = 0;
 forEach(numbers , function(number)
 { sum += number; });
 console.log(sum); // → 15
why is forEach directly called here
Mostafa Masri
@thefakeweed
Jan 19 2017 14:10
dude i keep editing and removing codes and adding and removing :((( http://codepen.io/mml3b/pen/KaamPX
Darth Skywalker
@adityaparab
Jan 19 2017 14:10
@MohammadHasham because you have function forEach defined in your code
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:10
i am really dumb!
@adityaparab Thanks.
CamperBot
@camperbot
Jan 19 2017 14:10
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave adityaparab points
Darth Skywalker
@adityaparab
Jan 19 2017 14:10
@MohammadHasham :+1:
no worries.
Mostafa Masri
@thefakeweed
Jan 19 2017 14:13
i have no clue what to write at first and what to include :/
Darth Skywalker
@adityaparab
Jan 19 2017 14:14
@mml3b you might wanna create your portfolio after you've done your projects
that way you will have something to show on your portfolio
for now, you can just put some text about yourself and be done with it
Sacha Morgese
@TheOmegaBlack
Jan 19 2017 14:16

Hey there, I just posted this in the main chat but it's probably more appropriate here:

I am looking for help for No repeats please.

I solved it, but even though the program outputs the right results every time, it doesn't pass and it's all-red-x-land. I googled around and it seems people have problems with global variables but I am not using any. I have spent hours trying to understand what's wrong, don't really want to go and copy someone else code to pass.

https://jsfiddle.net/6g9jwLyr/1/

Cale Switzer
@Tennyx
Jan 19 2017 14:22
Does anyone know why sometimes the FA twitter icon in this pen doesn't render?
https://codepen.io/Tennyx/pen/KaNxJX
Muhammad Hasham
@MohammadHasham
Jan 19 2017 14:22
i need help with understanding a code execution of a code snippet can anyone help me?
@adityaparab
Greg Duncan
@GregatGit
Jan 19 2017 14:26
@TheOmegaBlack shouldn't the main funtion be called permAlone?
Mostafa Masri
@thefakeweed
Jan 19 2017 14:31
http://codepen.io/mml3b/pen/KaamPX can somebody tell me what should i do next ?
i was thinking about social media buttons but idk how to do it
Marianissimus
@Marianissimus
Jan 19 2017 14:32
@mml3b just take a piece of paper and draw / sketch what you want your page to look like. do a sketch first, then code it
Mostafa Masri
@thefakeweed
Jan 19 2017 14:33
i saw some examples on google
but idk how to do em :/
something similar to this
Marianissimus
@Marianissimus
Jan 19 2017 14:35
it seems they're upgrading it quite often, and the older cdn-s are not available anymore
SimpleRoger
@SimpleRoger
Jan 19 2017 14:36
@SimpleRoger
Hi guys i'm having trobule making my website responsive
part of my text goes up on one line, but breaks off
hears the link
http://codepen.io/SimpleRoger/pen/qRqvBa
it happens when you stretch the viewer to 2/3
Cale Switzer
@Tennyx
Jan 19 2017 14:37
@Marianissimus Thanks!!
CamperBot
@camperbot
Jan 19 2017 14:37
tennyx sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Jan 19 2017 14:37
@mml3b first... draw it on paper. try to separate and micro-manage things: the navbar. then the big "jumbotron"-like image. then another div with a color in it. then the icons...
@Tennyx I guess that's a lesson for all to learn here: maybe just download font-awesome and link to it instead of using a cdn...:(
SimpleRoger
@SimpleRoger
Jan 19 2017 14:39
help?
Mostafa Masri
@thefakeweed
Jan 19 2017 14:39
http://codepen.io/mml3b/pen/KaamPX i did this buw how can i make em look like buttons ?
Marianissimus
@Marianissimus
Jan 19 2017 14:39
@SimpleRoger where exactly is the problem? can't see it
SimpleRoger
@SimpleRoger
Jan 19 2017 14:41
the text goes half up on the first line
below the image
when you stretch it to 2/3 of the page
the viewer
                                       textstarts
continues
there's a huge blank space
Marianissimus
@Marianissimus
Jan 19 2017 14:42
what text? "A tribute page"?
SimpleRoger
@SimpleRoger
Jan 19 2017 14:42
Right below a tribute page
the start of the paragraph
A Tribute Page
                                                                                                                        Stephen Paul "Steve" Jobs (February 24, 1955 – October 5, 2011) was an American businessman, inventor, and industrial designer. He was the co-founder, chairman, and chief 
i think it's due to my collum class
col-md-4
to the image and to the text
i'll take a screen shot
sending screen shot
blob
Marianissimus
@Marianissimus
Jan 19 2017 14:44
check the <p>, you have some spaces you could get rid of <p> text here<p>. Text should begin right after the first <p>
I don't get the display you do...
Also, you have some double-breaks, maybe that's too much - <br><br>
SimpleRoger
@SimpleRoger
Jan 19 2017 14:45
yes i have
oh i'll try get rid of them
lol
do you know a more effectient way of doing double breaks
and it also doesn't work
Marianissimus
@Marianissimus
Jan 19 2017 14:46
maybe a new <p>. try
SimpleRoger
@SimpleRoger
Jan 19 2017 14:46
hmm
wierd there's a huge space
Marianissimus
@Marianissimus
Jan 19 2017 14:47
I deleted it and looks ok to me
SimpleRoger
@SimpleRoger
Jan 19 2017 14:49
without the line breaks it looks like this
blob
what did you delete?
Marianissimus
@Marianissimus
Jan 19 2017 14:51
ok, I refreshed the page to get the same error. First, you have more problems, we need to figure out which exactly this is. I suspect a missing closing tag or the custom css.
SimpleRoger
@SimpleRoger
Jan 19 2017 14:51
lol
i've got no clue
Marianissimus
@Marianissimus
Jan 19 2017 14:51
first, the name of the class should be container-fluid
SimpleRoger
@SimpleRoger
Jan 19 2017 14:52
oh lol
soz
buiphuking
@buiphuking
Jan 19 2017 14:52
@jdtdesigns how to use moveover and mousedown to change img in slider?
Marianissimus
@Marianissimus
Jan 19 2017 14:53
you also have container-fluid inside container-fluid, which can only cause problems> From the bootstrap page: Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
SimpleRoger
@SimpleRoger
Jan 19 2017 14:53
so do i get rid of container-fluid and replae it with container?
feedback
required
SimpleRoger
@SimpleRoger
Jan 19 2017 14:55
i got rid of container fluid which wrapped around everything
and it looks like this
Marianissimus
@Marianissimus
Jan 19 2017 14:55
@SimpleRoger no, get rid of any container inside another container. use row or something.
div class="row";
SimpleRoger
@SimpleRoger
Jan 19 2017 14:55
so i get rid of outside container-fluid
or the one's inside it?
row vs container?
which one do i use?
are there any difference
Marianissimus
@Marianissimus
Jan 19 2017 14:56
the structure should be like this: container - inside of it ROW - inside of it - COL-MD or smth totalling 12
SimpleRoger
@SimpleRoger
Jan 19 2017 14:57
blob
Marianissimus
@Marianissimus
Jan 19 2017 14:57
container keeps them all, the rows keep the columns
SimpleRoger
@SimpleRoger
Jan 19 2017 14:57
that's what it looks without the main cotainer fluid
blob
and replace with row
i'll see what it looks like without the nested container
do i have to put something inside row
is it useless without col-md-*
Marianissimus
@Marianissimus
Jan 19 2017 14:58
of course - you tell it: here, structure this row into 2 divs col-md-6, that is break this row into 2 equal parts, one containing the image, and the other the text
no, the row can be empty, it doesn't need col-md-something. it will stretch for the entire container...
SimpleRoger
@SimpleRoger
Jan 19 2017 14:59
ah so like a row
lol
Marianissimus
@Marianissimus
Jan 19 2017 14:59
exactly, like a table: container(the table), rows and columns. like excel or smth:)
i've updated it
is it good?
i just got rid of the outside container
so i can't just nest container inside container inside container, instead i have to use rows inside containers?
Sacha Morgese
@TheOmegaBlack
Jan 19 2017 15:01
@GregatGit You are right... now if only my browser stopped crashing! :\
After changing the name I can't even edit the page anymore, it just keeps crashing.
Marianissimus
@Marianissimus
Jan 19 2017 15:02
if it's good for you, it's good for me. be sure to make the corrections- check the official bootstrap docs. a class name should be one word, with a _ or -. in bootstrap it's a -, like this "img-responsive". "img responsive", without the -, means two classes, and it's not the case here
@SimpleRoger yup, exactly, rows inside containers. there are also jumbotrons and other elements, but basically rows
SimpleRoger
@SimpleRoger
Jan 19 2017 15:03
anyway i can improve on the website?
Marianissimus
@Marianissimus
Jan 19 2017 15:05
of course you can. check the name classes, see if you have errors like "img responsive", and work on it:)
SimpleRoger
@SimpleRoger
Jan 19 2017 15:06

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<div class ="container-fluid">
<div class="row">
<h1 class="steve text-center text-header">Steve Jobs<span class="blinking-cursor">|</span></h1>
</div>
<div class="row">
</div>
<div class="col-md-4 col-lg-4">
<img class="macimage img-responsive" src="https://res.cloudinary.com/drlprujni/image/upload/v1484720513/apple-macintosh-1984-history_rq5hwl.jpg" alt="mac.jpeg">
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-8">
<i class="info">A Tribute Page</i>
</div>
<div class="row">
<p class="randy">Stephen Paul "Steve" Jobs (February 24, 1955 – October 5, 2011) was an American businessman, inventor, and industrial designer. He was the co-founder, chairman, and chief executive officer (CEO) of Apple Inc.; CEO and majority shareholder of Pixar;a member of The Walt Disney Company's board of directors following its acquisition of Pixar; and founder, chairman, and CEO of NeXT. Jobs is widely recognized as a pioneer of the microcomputer revolution of the 1970s and 1980s, along with Apple co-founder Steve Wozniak. Jobs was adopted at birth in San Francisco, and raised in the San Francisco Bay Area during the 1960s.</p>
</div>
<div class="row">
<h2 class="videohead">

<a href="https://www.youtube.com" target= " _blank">
WWDC 2008 - Video
</a>
</div>
</div>
</h2>
</div>
</div>
</div>

anything wrong with this code
it looks like before now
all i did was add a container-fluid to the entire body
and replace container-fluid with row as you told me to do
Clyde Lobo
@oppiniated
Jan 19 2017 15:07
@SimpleRoger a lot. First You do not have html tag, no body tag
SimpleRoger
@SimpleRoger
Jan 19 2017 15:08
oh yeah, i'll add that
thanks
the text is going up again
Gil
@Lancemaker
Jan 19 2017 15:30
try justifying the text roger. the left side of the text block can be even aligned
i did it in my exercise lemme remmeber
@SimpleRoger use this in css to justify the text : text-align: justify;
SimpleRoger
@SimpleRoger
Jan 19 2017 15:35
what does that do?
Gil
@Lancemaker
Jan 19 2017 15:37
it will make the text even and it will respect both boarders on the left and the right
Sacha Morgese
@TheOmegaBlack
Jan 19 2017 15:46
@GregatGit Done it. Thank you!
CamperBot
@camperbot
Jan 19 2017 15:46
theomegablack sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 832 | @gregatgit |http://www.freecodecamp.com/gregatgit
marcela123
@marcela123
Jan 19 2017 15:51
how to : navigate to different sections of the webpage by clicking buttons in the navigation.pls help
Julia
@ju-liax
Jan 19 2017 15:56
@Lancemaker That looks really great! I'm working on that project now and yours looks like my ideal :smile:
Does anyone know how to make an image responsive to the web page size or just center it? I can only make it respond to a mobile browser size and center text
Muhammad Hasham
@MohammadHasham
Jan 19 2017 15:58
how do you memorize all the bootstrap navbars,carousels,forms? i try to memorize the syntax and stuff but after 2-3 days i have to again look at w3schools.com
marcela123
@marcela123
Jan 19 2017 16:08
Julia, I did put margin-left=some %
Gil
@Lancemaker
Jan 19 2017 16:09
@ju-liax thanks. yeah i know. just a sec.
CamperBot
@camperbot
Jan 19 2017 16:09
lancemaker sends brownie points to @ju-liax :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @ju-liax |http://www.freecodecamp.com/ju-liax
Gil
@Lancemaker
Jan 19 2017 16:10
@ju-liax try this :smile:
.home{
background: url('theimage.jpg') no-repeat center bottom fixed;
background-size: cover;
}
i called the class home but you can name it whatever you want. just <div> it
the center bottom aspect can be changed to center center or center top
it will look something like this : http://codepen.io/Lancemaker/full/pNGVdo/
that fixed image on the back was done with that code
Hello911
@Hello911
Jan 19 2017 16:15
@TylerMoeller I fixed it. THank u
CamperBot
@camperbot
Jan 19 2017 16:15
hello911 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1346 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Gil
@Lancemaker
Jan 19 2017 16:17
@ju-liax ohhhhhhhh mabe i misread you. you can use the class image resoponsive. lemme be sure how its typed. http://www.w3schools.com/bootstrap/bootstrap_images.asp here.
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Julia
@ju-liax
Jan 19 2017 16:40
@Lancemaker Thanks for double checking :smile_cat:
CamperBot
@camperbot
Jan 19 2017 16:40
:cookie: 124 | @lancemaker |http://www.freecodecamp.com/lancemaker
ju-liax sends brownie points to @lancemaker :sparkles: :thumbsup: :sparkles:
Camilo Ramirez
@cancamilo
Jan 19 2017 17:24
Hi!
Sorin Ruse
@sorinr
Jan 19 2017 17:29
hi
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:30
how do i give my jumbotron margin top
i have added css but it does not respond
@sorinr
is there a way?
Sorin Ruse
@sorinr
Jan 19 2017 17:31
@MohammadHasham instead of margin try padding-top:xx
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:32
why padding why does margin not work there technically margin should work?
no it is not working :worried:
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 17:33
@MohammadHasham its also important to witch element do u apply. in some situation will work the margin in others u need padding
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:33
it is not working how can i do that?
with padding as well
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 17:34
@MohammadHasham show me the pen and explain what u need and where u need it
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:35
blob
this the jumbotron and i want it to get some space from above as well
@sorinr
.jumbotron{
    margin-top:15%;
    width:60%;
    height:600px;
    margin:0 auto;
}
my bad
oh i am using margin: auto
that's the issue?right?
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 17:37
@MohammadHasham your margin: 0 auto is just override the margin-top. yep
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:37
can we say that padding is the elemet's inner margin?
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 17:38
@MohammadHasham yes. padding is moving content inside of the element box
Tomas
@TOMEJUS
Jan 19 2017 17:38
hi everyone!
Sorin Ruse
@sorinr
Jan 19 2017 17:39
@TOMEJUS hi
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:39
@sorinr thanks
CamperBot
@camperbot
Jan 19 2017 17:39
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1114 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 19 2017 17:43
@MohammadHasham keep in mind that box-sizing property in css its quite important in knowing what is your element space on the page
Sorin Ruse
@sorinr
Jan 19 2017 17:51
@MohammadHasham the default is box-sizing: content-box that includes no border, padding or margin. so, any of that will take extra space on the page. the box-sizing: border-box will take up the space not including the margin
@MohammadHasham i would recommend to just put in any css html{box-sizing: border-box;}
Sorin Ruse
@sorinr
Jan 19 2017 17:58
@MohammadHasham if you ask me why not content-box the answer its just you have to keep track only of the margin not also padding and border for te space an element gets on page
Muhammad Hasham
@MohammadHasham
Jan 19 2017 17:59
i'll have a look at it for sure thanks
how can i use jquery in html page
where shall i start writing my events?
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 18:00

@MohammadHasham if you need javacsrpit on your page u can place the code within

<script></script> tags

Muhammad Hasham
@MohammadHasham
Jan 19 2017 18:00
after the html tags?
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 18:05
@MohammadHasham you can write as many scripts as you want even after your code requesting that event. or all code at once. practically you can put that code almost everywere on that page. it can be eaven in the <head></head> or at the bottom of body before closing it
Muhammad Hasham
@MohammadHasham
Jan 19 2017 18:05
@sorinr Thanks
CamperBot
@camperbot
Jan 19 2017 18:05
:warning: mohammadhasham already gave sorinr points
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Tomas
@TOMEJUS
Jan 19 2017 18:13
@sorinr would you mind showing your portfolio? Im interested what you have to show!
Sorin Ruse
@sorinr
Jan 19 2017 18:39
@TOMEJUS nothing to show :) why?
Gil
@Lancemaker
Jan 19 2017 18:40
so if i want to expand an image on click do i need to use js or can i do it with jquery ?
Sorin Ruse
@sorinr
Jan 19 2017 18:43
@Lancemaker on click yes u need js. on hover css may be enough
@Lancemaker but keep in mind that hover effect its quite diff on desktop and mobile :)
@TOMEJUS you can check the codepen like https://codepen.io/sorinr/pens/public/
Gil
@Lancemaker
Jan 19 2017 18:46
@sorinr ty
CamperBot
@camperbot
Jan 19 2017 18:46
:star2: 1115 | @sorinr |http://www.freecodecamp.com/sorinr
lancemaker sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 19 2017 18:47
@Lancemaker welcome
Tyler Moeller
@TylerMoeller
Jan 19 2017 18:49

@AnabelSalomone Not sure if you got a response, but you have set a fixed width of 100px on all your navbar elements:

nav li {
  float: left;
  width: 100px;
  list-style: none;
  margin-right: 20px;
}

Remove that width to fix the highlighting issue with your drop-down menu items.

Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 18:50
Hello! I'd like to welcome any comments on my portfolio page: http://codepen.io/bozeman42/full/ZBzqdx/
Sorin Ruse
@sorinr
Jan 19 2017 18:50
@TylerMoeller hi there. good morning for u :)
Tyler Moeller
@TylerMoeller
Jan 19 2017 18:50
Good morning @sorinr :)
Evening for you!
Sorin Ruse
@sorinr
Jan 19 2017 18:51
it already 8:51pm here :)
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 18:51
Early afternoon here! :) Worldwide communities are really something.
Sorin Ruse
@sorinr
Jan 19 2017 18:53
@bozeman42 yep. u guys just stat a new coding day :) wish u no bugs on it
@bozeman42 not bad but why do u use this $("section").addClass("row");??
Tyler Moeller
@TylerMoeller
Jan 19 2017 18:58
@bozeman42 Nice work on the portfolio. There's a horizontal scroll bar showing up, but aside from that, I don't see any improvements to be made. You could be nice to the screen readers out there and add alt attributes to your images if you want to be thorough.
Removing $("section").addClass("row"); as Sorin points out, will get rid of that horizontal scroll bar
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 18:59
Thanks @sorinr and @TylerMoeller !
CamperBot
@camperbot
Jan 19 2017 18:59
bozeman42 sends brownie points to @sorinr and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1116 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1348 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:00
Thank you for bringing up screen readers
Sara Soliman
@solimansara
Jan 19 2017 19:02
HI,
I am trying to change the font of the nav bar.. what is wrong with the css function i have? <div class="thumbnail">
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:04
@solimansara Try this class instead: .navbar-default .navbar-nav>li>a
.navbar-default .navbar-nav>li>a {
  background-color: white;
  font-size: 100px;
}
Robert Purcea
@RobertPurcea
Jan 19 2017 19:11
In order to use bootstrap's SASS mixins should I download bootstrap?
Or I can include the mixins using a CDN?
Sara Soliman
@solimansara
Jan 19 2017 19:12
Thank you Tyler
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:14
'''
CamperBot
@camperbot
Jan 19 2017 19:14
:bulb: to format code use backticks! ``` more info
Gil
@Lancemaker
Jan 19 2017 19:14
@solimansara nice design sara.
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:16
@solimansara I like the effect of sliding over the background images!
Srđan Međo
@PerpetualWar
Jan 19 2017 19:19
guys, is there a way to make (bootstrap) well fixed size ?
Sorin Ruse
@sorinr
Jan 19 2017 19:20
@solimansara ur pen looks ok. i would give more attention to the contact section. the contact header should be at the top of the section and the social media icons should stay at the boittom
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:21
@PerpetualWar Select the well in some way (e.g. give it a class) and add a width and height property
```
.myWell {
width: 100px;
height: 100px;
}
and your well would look like
<div class="well myWell">Contents!</div>
Rodrigo I. Ávila D.
@Undigon
Jan 19 2017 19:28
Hi. I just wanted to express my shock when I finally realized that my bootstrap columns needed col-lg-*. Half an hour of fun learning experience.
md or xs didn't do anything.
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:29
I've found that every single thing I try to do becomes a huge learning experience! :smile:
Bigyan Karki
@bigyankarki
Jan 19 2017 19:31
hi everyone
is it a good practice to use global variable when using a function
Rodrigo I. Ávila D.
@Undigon
Jan 19 2017 19:31
Hahaha. That's right @bozeman42 !
Srđan Međo
@PerpetualWar
Jan 19 2017 19:33
@bozeman42 Thanks for that info ..... will the well remain responsive after I do that ?
CamperBot
@camperbot
Jan 19 2017 19:33
perpetualwar sends brownie points to @bozeman42 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @bozeman42 |http://www.freecodecamp.com/bozeman42
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:33
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:34
It will be a fixed width and height after that is set
So I'd say no
Srđan Međo
@PerpetualWar
Jan 19 2017 19:34
ye that's what I was afraid of
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:34
I thought that was what you were going for
Srđan Međo
@PerpetualWar
Jan 19 2017 19:34
I would love to remain responsive
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:34
What is your goal?
Bigyan Karki
@bigyankarki
Jan 19 2017 19:34
@TylerMoeller ya i read that
Brittni Willett
@Willow606
Jan 19 2017 19:34
Hey all I'm wondering if anyone knows anything about APIs that could lend me a hand with one of the Intermediate Front End projects.
Bigyan Karki
@bigyankarki
Jan 19 2017 19:35
but what if i need to store the variable and use it later in the code
outside of that function
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:35
@bigyankarki You should pass it to the function that requires it if possible
Srđan Međo
@PerpetualWar
Jan 19 2017 19:35
when Im generating quotes in my well, depending on length of teh quotes, sometimes well becomes double the size.. I would love to have that max needed size for well, so it doesn't change all the time
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:36
I'm guessing you're trying to convert Celsius/Fahrenheit?
Srđan Međo
@PerpetualWar
Jan 19 2017 19:36
when generating new quotes
Bigyan Karki
@bigyankarki
Jan 19 2017 19:36
so i should call another function inside the function
lol ya
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:36
You can set a max-width or min-width
if that sounds useful
Srđan Međo
@PerpetualWar
Jan 19 2017 19:36
ok I could try min-width
but are arguments always px or is there some more general option ?
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:37
@bigyankarki With that one, get the current value from the page and run the conversion formula against it. https://www.freecodecamp.com/challenges/convert-celsius-to-fahrenheit
Srđan Međo
@PerpetualWar
Jan 19 2017 19:37
which will allow responsivness ?
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:37
You can use % to fill a percentage of the container, I believe
Brittni Willett
@Willow606
Jan 19 2017 19:37
Basically I've got the first bit of my code going but I have no idea why the second bit isn't running and I've been trying for like 6 hours to figure it out. -.-
Srđan Međo
@PerpetualWar
Jan 19 2017 19:37
ok Im on it
Aaron Kvarnlov-Leverty
@bozeman42
Jan 19 2017 19:37
or the div it is in
Srđan Međo
@PerpetualWar
Jan 19 2017 19:37
thanks @bozeman42 ;)
CamperBot
@camperbot
Jan 19 2017 19:37
perpetualwar sends brownie points to @bozeman42 :sparkles: :thumbsup: :sparkles:
:warning: perpetualwar already gave bozeman42 points
Bigyan Karki
@bigyankarki
Jan 19 2017 19:39
//get the address from the IP Geolocation API
function getLocation() {
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
    .fail(function(err) {
    getWeather()
  });
}

getLocation();

//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
  $.getJSON(apiAddress, function (weatherData){
     tempF = weatherData.main.temp.toFixed(0);
     tempC = (tempF-32)*(5/9).toFixed(0);
  $("#weather").text(weatherData.weather[0].description + ', ' + tempF + ' °F');
    convert(tempF, tempC);
            });
}

//to convert celcius into farenheit using data from earlier function.
    $("#conversion").click(function() {
      if(("#weather").text().indexOf('F') ) {
        $("#weather").text(tempC + ' °C');
      }

      else {
         $("#weather").text(tempC + ' °F');
      }
    })
here is what i have done so far
but the conversion is not working
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:40
@bigyankarki You are on the right track:
$("#conversion").click(function() {
  if($("#weather").text().indexOf('F') > -1) {
    // get the current F value, convert to C, and display it on the page
  } else {
    // get the current C value, convert to F, and display it on the page
  }
});
(your code was missing a $ in front of ("#weather"))
Tyler Moeller
@TylerMoeller
Jan 19 2017 19:46
You could also add data-fahrenheit and data-celsius attributes to your weather div in your .getJSON and grab them from there as needed in your click function.
Gil
@Lancemaker
Jan 19 2017 19:46
hi ... im using anchor points in my menus to find a specific ID. it works and scrolls the page into that id, the problem is it does not work on mobile. does anyone have a clue on how to do it ?
Bigyan Karki
@bigyankarki
Jan 19 2017 19:49
oh
also why do we need >-1
in condition
Sorin Ruse
@sorinr
Jan 19 2017 19:50
@bigyankarki addimg units=metric or imperial to the apiAddress will save you some conversion work :)
Bigyan Karki
@bigyankarki
Jan 19 2017 19:50
I added metric
@sorinr
Sorin Ruse
@sorinr
Jan 19 2017 19:51
@bigyankarki do u still having problems with your api response?
Bigyan Karki
@bigyankarki
Jan 19 2017 19:52
not now :D
but I dont know why I am still having problem with conversion
Sorin Ruse
@sorinr
Jan 19 2017 19:53
@bigyankarki :+1:
Bigyan Karki
@bigyankarki
Jan 19 2017 19:53
it seems to be so simple
oh wait i figured it out :D
Kenneth Nwaeze
@kengin2013
Jan 19 2017 19:54
need help with writing html for "horizontal line with words in the middle". Like this sample ---------------------------------- my words -----------------------------
Sorin Ruse
@sorinr
Jan 19 2017 19:54
@bigyankarki yep. u ask the api and get a response. nothing special :)
Srđan Međo
@PerpetualWar
Jan 19 2017 19:56
how to change outline of the .btn-warning button
Bigyan Karki
@bigyankarki
Jan 19 2017 19:56
haha @sorinr i well i guess i need to learn more
Srđan Međo
@PerpetualWar
Jan 19 2017 19:56
from bootstrap class ?
Mostafa Masri
@thefakeweed
Jan 19 2017 19:59
hey guys im trying to apply some css to my h1
but half of them is not working
Sorin Ruse
@sorinr
Jan 19 2017 20:00
@bigyankarki oh yea. this field its a never ever ending learning
Srđan Međo
@PerpetualWar
Jan 19 2017 20:00
found it .. it was border-color , not outline-color like I thought
deaninous
@deaninous
Jan 19 2017 20:04
@kengin2013 Tried "text-aling:cent"?
Bigyan Karki
@bigyankarki
Jan 19 2017 20:04
//get the address from the IP Geolocation API
function getLocation() {
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
    .fail(function(err) {
    getWeather()
  });
}

getLocation();

//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
  $.getJSON(apiAddress, function (weatherData){
     tempF = weatherData.main.temp.toFixed(0);
     tempC = (tempF-32)*(5/9).toFixed(0);
  $("#weather").text(weatherData.weather[0].description + ', ' + tempF + ' °F');
            });
}

//to convert celcius into farenheit using data from earlier function.
    $("#conversion").click(function() {
      if($("#weather").text().indexOf('F') > -1) {
        $("#weather").text(tempC + ' °C');
      }

      else {
         $("#weather").text(tempF + ' °F');
      }
    })
anywayas why is my conversion wrong
it shows 45 F but when i convert it shows 13 C
well the formula seems to be correct but the conversion is surely not
45 F is not equal to 13 C is it?
Mostafa Masri
@thefakeweed
Jan 19 2017 20:07
does anybody know what is this <div class="backer" style="max-height: 400px;">
?
and what can it do if i add it to my html
Bigyan Karki
@bigyankarki
Jan 19 2017 20:07
i figured that out too :D
Tyler Moeller
@TylerMoeller
Jan 19 2017 20:07
@bigyankarki You are missing some parentheses: (tempF-32)*(5/9)
Bigyan Karki
@bigyankarki
Jan 19 2017 20:07
needed a abracket in the formula
Tyler Moeller
@TylerMoeller
Jan 19 2017 20:07
Yes ^^ :)
Sorin Ruse
@sorinr
Jan 19 2017 20:08
@mml3b why do you need margin-bottom: 10px; ? as u have no other elements on page
Bigyan Karki
@bigyankarki
Jan 19 2017 20:09
@TylerMoeller @sorinr in that code is it okay if I get all the objects from API into a global variable so that I can use it later?
Mostafa Masri
@thefakeweed
Jan 19 2017 20:09
i removed it now
http://codepen.io/mml3b/pen/KaamPX/ tell me what you think
Tyler Moeller
@TylerMoeller
Jan 19 2017 20:09
@bigyankarki It is not a best practice like we said before :) and not necessary...but yes.
Bigyan Karki
@bigyankarki
Jan 19 2017 20:09
hmm
and what is the alternaative because it seems that I cant use local variable later
call all the functions inside the function in which we got API?
Tyler Moeller
@TylerMoeller
Jan 19 2017 20:10
So, up to you if you want to make it global. The alternative is to read the current value from the page and convert that or add both the F and C values as custom data attributes to the weather element.
You could also call the API again, but that's also not a best practice
Bigyan Karki
@bigyankarki
Jan 19 2017 20:11
oh
thanks @TylerMoeller
CamperBot
@camperbot
Jan 19 2017 20:11
bigyankarki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1349 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sorin Ruse
@sorinr
Jan 19 2017 20:11
@mml3b please take away that inline styling from your h1 and put it in the css part
Tyler Moeller
@TylerMoeller
Jan 19 2017 20:12
Lots of options - good luck :+1:
Kirill
@l10yd
Jan 19 2017 20:17
gentlemen, can I change link to my finished project once I've submit it?
Sorin Ruse
@sorinr
Jan 19 2017 20:18
@mml3b :+1:
@mml3b this property: font-variant: small-caps; don't help you. what u wanna achieve?
Nirmal Patel
@nirmpate
Jan 19 2017 20:23
Hey everyone. I am currently working on the Twitch Streamers Project. I am currentlly stuck trying to attach my string with JSON data to a variable called html. It keeps saying the html is undefined. Im not sure whats going on here.
Mostafa Masri
@thefakeweed
Jan 19 2017 20:27
@sorinr the font the fonst style , look at what i did for now http://codepen.io/mml3b/pen/KaamPX/
tell me what you think
Sorin Ruse
@sorinr
Jan 19 2017 20:36
@mml3b this font-variant: small-caps; is doing nothing. i would just remove it
Mostafa Masri
@thefakeweed
Jan 19 2017 20:37
alright
how can i add a twitter logo to hyperlink to my social media ??
Sorin Ruse
@sorinr
Jan 19 2017 20:39
@mml3b use font awesome lib for that
could u pls explain where i should put it and how ??
Sean
@Sean-Can
Jan 19 2017 20:42
function cool(){}
sorry just testing the code posting
Justin Thompson
@kot91
Jan 19 2017 20:43
for the twitch api project, does embedding stream on click cover requirements for "show details about the stream" and "clicking output takes you directly to the channel"?
Sorin Ruse
@sorinr
Jan 19 2017 20:49
@mml3b you can add it like <i class="fa fa-twitter"></i> to the element you want
Mostafa Masri
@thefakeweed
Jan 19 2017 20:51
can you see that i added it ?
Cale Switzer
@Tennyx
Jan 19 2017 20:52
Can anyone take a look at my codepen and let me know why my jquery isn't working on the bottom of the script? I am trying to eventually make it so when you click the temperature number it will convert to celsius and back. For now I'm just testing it to change the number to "hi". But it is not working.
https://codepen.io/Tennyx/pen/apJbPB?editors=1010
erm I guess the last thing i did was try to change # ro 36
to*
Sorin Ruse
@sorinr
Jan 19 2017 20:54
@mml3b nope. i have updated your pen and see nothing regarding font awasome
JD Tadlock
@jdtdesigns
Jan 19 2017 20:54
@buiphuking I've added click selection on the indicators. ;) http://jsbin.com/fukeme/edit?js,output
Mostafa Masri
@thefakeweed
Jan 19 2017 20:54
Man..
Cale Switzer
@Tennyx
Jan 19 2017 20:54
Pseudocode for what I'm trying to accomplish is:
$("#temp").on("click", function(){
      $("#temp").html(**insert celsius value here**);
Mostafa Masri
@thefakeweed
Jan 19 2017 20:55
<center>
<div class="contact">
<a href="https://facebook.com/i27.o.o.1"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</div>
</center>
what is this then ?
Sorin Ruse
@sorinr
Jan 19 2017 20:56
@mml3b i mean have you loaded the fa lib before?
@mml3b because class="fa fa-facebook" is useless untill u have the font awasome lib loaded
George Phalen
@gphalen
Jan 19 2017 21:06
Could anyone help with Pomodoro Clock? I have most of it working except for resetting the clock in the middle of a session, it causes the loading bar to alternate between the different times and go all wonky. http://codepen.io/gphalen/pen/BpWyOy
Srđan Međo
@PerpetualWar
Jan 19 2017 21:11

$("tbutton").on("click", function(){ window.open("https://twitter.com/intent/tweet?text=" + $("#result").text()) })

Whats wrong with this code ?

Mostafa Masri
@thefakeweed
Jan 19 2017 21:13
and now that it's worked when i press on it it doesnt take me to the link i specified
any idea why ?
it shows a blankpage guys help
Francois van Leersum
@Blockshot12
Jan 19 2017 21:27
@PerpetualWar $("tbutton”).
Srđan Međo
@PerpetualWar
Jan 19 2017 21:30
@Blockshot12 Thanks
CamperBot
@camperbot
Jan 19 2017 21:30
:cookie: 346 | @blockshot12 |http://www.freecodecamp.com/blockshot12
perpetualwar sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
Srđan Međo
@PerpetualWar
Jan 19 2017 21:31
I forgot the # ... :)
Francois van Leersum
@Blockshot12
Jan 19 2017 21:33
@mml3b I don’t get a blank page.
Srđan Međo
@PerpetualWar
Jan 19 2017 22:06
khm
this was working nicely, I had to force close browser for some reason and now it doesnt work
doesnt generate new quotes
any idea why ?
it would be appreciated
JD Tadlock
@jdtdesigns
Jan 19 2017 22:08
@PerpetualWar You're just loading it over https. Take away the 'https' in the url and it'll work fine. ;)
Srđan Međo
@PerpetualWar
Jan 19 2017 22:09
oh wow
dunno how it got switched though
but it is correct
it works now
JD Tadlock
@jdtdesigns
Jan 19 2017 22:09
Always remember when working with requested data server to server, that you can't load a page on a secure server and request insecure data (ie. anything with http:// in front of the url).
Srđan Međo
@PerpetualWar
Jan 19 2017 22:10
got it
JD Tadlock
@jdtdesigns
Jan 19 2017 22:10
It's called Mixed Content if you wanted to know the error name ;)
Srđan Međo
@PerpetualWar
Jan 19 2017 22:10
Thanks @jdtdesigns
CamperBot
@camperbot
Jan 19 2017 22:10
perpetualwar sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 861 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 19 2017 22:10
@PerpetualWar Welcome
Srđan Međo
@PerpetualWar
Jan 19 2017 22:10
;)
Florencio
@Calencho
Jan 19 2017 22:40
how do i add a background image using css?
or html
Florencio
@Calencho
Jan 19 2017 22:45
somebody?
Tyler Moeller
@TylerMoeller
Jan 19 2017 22:47
@Calencho Post your code and we'll try to help you get it working.
Tony Miri
@TonyMiri
Jan 19 2017 22:54
I've got some code that doesn't work also.
  let textPos = 0;

  //Scrolling Message
function scroll(text) {
  let textArray = Array.from(text);
  if (textPos < textArray.length - 1){
    displayUpdate(textArray[textPos] + textArray[textPos+1]);
    textPos++;
  }
};

  setInterval(scroll('Testing'), 1000);
JD Tadlock
@jdtdesigns
Jan 19 2017 22:59
@FatTone225 You should always set intervals and timeouts to a variable or the global window object. That way you can clear them to keep from causing errors with multiple timers being started.
we really can diagnose your code since we don't know what the rest is doing
Tony Miri
@TonyMiri
Jan 19 2017 23:01
Oh that's just the bit there that doesn't work. Do you have an example of what you mean? I'm trying to get some scrolling text for this display. http://codepen.io/TonyMiri/pen/WRQYgM
So I want things to happen like when I press the start button the text 'START' will scroll across the display. Right now I'm trying the text 'Testing' and as you can see it calls th e function once, but doesn't continue calling it.
Tony Miri
@TonyMiri
Jan 19 2017 23:07
@jdtdesigns Oh I see what you're saying. Yeah it's not a problem with conflicting timers, it's just that I can't get the code to actually execute more than once.
Salomon
@zarruk
Jan 19 2017 23:15
@vinaypuppal thanks! :)
CamperBot
@camperbot
Jan 19 2017 23:15
zarruk sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 653 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Temptracks
@Temptracks
Jan 19 2017 23:17
Hey there, I#m currently working on the intermediate frontend projects. I've somehow found my way through the random quote programm, but now with the weather app I have problems, even before I start fiddling with the API (which I still have nearly no idea about).
could someone tell me why my var url is of the type undefined?
var url = '';
url = latLon();

function latLon(){
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var uri = 'api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&cnt=1&APPID=0786ca1fa082643ca351cb6ad3832957';
    console.log(uri);
    console.log(typeof(uri));
    return uri;
});
 }else{
    alert('Please activate the geolocation.\nIt is needed for this site to work properly.');
    latLon();
  }
}
inside of the function the console shows the return value is of the type string
Tony Miri
@TonyMiri
Jan 19 2017 23:23
@Temptracks Because you declared it as 'uri' instead of 'url'
oh wait nvm
lol
Temptracks
@Temptracks
Jan 19 2017 23:24
i changed that in order to be shur which one i tested in the console ;)
Tyler Moeller
@TylerMoeller
Jan 19 2017 23:24
@Temptracks navigator.geolocation takes some time to get your location, so latLon() is undefined when you define it
by "takes some time" - 100-200ms
aRtoo
@artoodeeto
Jan 19 2017 23:25
hi guys im done with my tribute page. can someone check if this is alright?? dont judge me please. http://codepen.io/artoo/pen/RKGwLv
Temptracks
@Temptracks
Jan 19 2017 23:25
@TylerMoeller so tell the script to wait some time, before it returns the value?
Tyler Moeller
@TylerMoeller
Jan 19 2017 23:26
@Temptracks Pass your uri variable to the function that will use it - that way you know the variable is defined. For example:
function latLon(){
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var uri = 'api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&cnt=1&APPID=0786ca1fa082643ca351cb6ad3832957';
    defineTheUrlVar(uri);
    return uri;
});
 }else{
    alert('Please activate the geolocation.\nIt is needed for this site to work properly.');
    latLon();
  }
}

function defineTheUrlVar(url) {
  console.log(url)
}
Bottom line - you can't return a value from navigator.geolocation - you have to pass the results to another function
Tried to edit for clarity...but reverted it. Not sure if that helps or makes sense
Temptracks
@Temptracks
Jan 19 2017 23:31
@TylerMoeller ok I'll try to call the function directly in the API call then. Still figuring out ways to pass variables between functions, but it seems, that you have to call the functions within the functions that use the desired value.
Thanks for the help
CamperBot
@camperbot
Jan 19 2017 23:31
temptracks sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1351 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 19 2017 23:36
@Temptracks Correct. To save you some headaches - navigator.gelocation requires HTTPS on Google Chrome and your Open Weather Map API does not support HTTPS. You may want to use a different weather API that supports HTTPS, like Weather Underground, Dark Sky, or Apixu.
I think Free Code Camp is in the process of updating the recommended API
Temptracks
@Temptracks
Jan 19 2017 23:38
@TylerMoeller Thanks again. I'll take a look at the alternatives you mentioned. But that will be tomorrow, as it's past midnight here...
CamperBot
@camperbot
Jan 19 2017 23:38
temptracks sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: temptracks already gave tylermoeller points