These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Aug 2016
Norvin Burrus
@ndburrus
Aug 03 2016 00:00
@alchermd
this may be helpful: :sparkles:
Robert Richey
@0x0936
Aug 03 2016 00:00
@dagman a bit confused about why the streamer logos scale on hover when they're not interactive. would be nice to see online shown before offline, or have a filter that allows the user to only see online, offline or all. search works great. body could use some padding-top. nice favicon :+1:
Robert Richey
@0x0936
Aug 03 2016 00:05
@KhadarCoding the img tag needs another look. the bootstrap class for making an image responsive is img-responsive
Nikolay
@luisciphere
Aug 03 2016 01:21
hi, can anybody help me out, i'm completely lost.
Jerzz
@2cool4school
Aug 03 2016 01:21
hey guys I'm having a little trouble wit h the "Random Quote Machine" challenge
Nikolay
@luisciphere
Aug 03 2016 01:22
I got a counter on my page, and sticky header. When counter is fires out stucky header wont return to default position if i scroll up.
here is the code
http://codepen.io/luisciphere/pen/YWOENr
Jerzz
@2cool4school
Aug 03 2016 01:22
for some reason this code isn't getting any feedback from the api, does anyone know whats wrong?
$(document).ready(function() {
  $("#getMessage").on("click", function(){
    $.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(json) {
      var html = "<h2>" + json.quote + "</h2>";
      $(".message").html(html);
    });
  });
});
Justin Woodward
@jwoo92
Aug 03 2016 01:59
@2cool4school what exactly are you getting?
Greg Duncan
@GregatGit
Aug 03 2016 02:00
@2cool4school can you post your page up - the js looks okay
Justin Woodward
@jwoo92
Aug 03 2016 02:00
@2cool4school try placing your html variable inside of an ID rather than a class, ex: <div id='htmlVar'></div>.
@GregatGit hey, how have you been Greg?
Greg Duncan
@GregatGit
Aug 03 2016 02:01
@jwoo92 good - how have you been doing?
Justin Woodward
@jwoo92
Aug 03 2016 02:01
@GregatGit I am good as well - Just returning from a short break from FCC.
Greg Duncan
@GregatGit
Aug 03 2016 02:07
@2cool4school I think you need a callback added so try http://quotes.stormconsultancy.co.uk/random.json/?&callback=?
salbo98
@salbo98
Aug 03 2016 02:28
anyone build the tribute page and have questions regarding the columns he uses for the UL ?
Ken Haduch
@khaduch
Aug 03 2016 02:55
@luisciphere - I can't see what you're doing on your page, but you aren't loading the bootstrap.css in your CSS external resource item. I don't understand your problem that you are trying to describe. I don't know if you meant to load bootstrap, but it looks like you are using some classes that are Bootstrap classes. And maybe you're missing other CSS code?
Manikanth
@manikanth1024
Aug 03 2016 04:22
Hi guys
i need ur help
Fatah N
@fatahn
Aug 03 2016 04:49
@manikanth1024 hi what do you need
Sorin Ruse
@sorinr
Aug 03 2016 04:50
@UtkarshShukla7 it still not working. i mean it render the map placeholder with a gray background but its not rendering the map itself. I have called it also from docready with the same result. When you resize the window just a bit the map shows. Anyway, thank you for looking into it.
CamperBot
@camperbot
Aug 03 2016 04:50
sorinr sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 781 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
Sorin Ruse
@sorinr
Aug 03 2016 04:56
@UtkarshShukla7 found the solution: just added google.maps.event.trigger(map, 'resize'); into my showContact() function.
Jaren Escueta
@jarenescueta731
Aug 03 2016 05:35
hi can someone help me understand why adding <p> inside a <div> will change the div's position?
codepen for reference, it's the purple div that moves inside the calculator display when i add <p>:
http://codepen.io/jarenescueta/pen/vKaZxz
un-commenting the <p> in the html will move the div
elizabeth awino
@beth6
Aug 03 2016 05:38
Which help
I want to know how to add more than one background in CSS
Kevin Murphy
@kaym0
Aug 03 2016 06:11
@jarenescueta731 if you have something written inside of he <p> even a space it can alter the positioning of something you've made with a div especially if it's near it.
Requiem16
@Requiem16
Aug 03 2016 07:13
<style>
body{
background-color:#FFD700;
}
</style>
The background-color won't change...
kirbyedy
@kirbyedy
Aug 03 2016 07:19
@Requiem16 it does work
Requiem16
@Requiem16
Aug 03 2016 07:21
@kirbyedy I tried it on another website, but it won't work there
@kirbyedy It might be a problem with the website. Thanks anyways!
CamperBot
@camperbot
Aug 03 2016 07:24
requiem16 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1320 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
唐葫芦
@hulu712
Aug 03 2016 07:34
这里有会中文的吗
sachin
@mokusachin
Aug 03 2016 08:12
hello hi i am unable to get the full width using containe-fluid can some body help me the code
<div class="dark-translucent-bg pv-30" style="background-image:url(images/WebLogo.jpg);" >
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">Why <strong>Choose</strong> Us?</h2>
<div class="separator"></div>
<p class="large text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas facere vero ex tempora saepe perspiciatis ducimus sequi animi.</p>
</div>
<div class="col-md-4 ">
<div class="pv-30 feature-box text-center object-non-visible" data-animation-effect="fadeInDownSmall" data-effect-delay="100">
<span class="icon default-bg circle"><i class="fa fa-diamond"></i></span>
<h3>We Have Strong Background</h3>
<div class="separator clearfix"></div>
<p>Voluptatem ad provident non repudiandae beatae cupiditate amet reiciendis lorem ipsum dolor sit amet, consectetur.</p>
<a class="btn btn-gray-transparent radius-50 btn-animated" href="page-services.html">Read More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
<div class="col-md-4 ">
<div class="pv-30 feature-box text-center object-non-visible" data-animation-effect="fadeInDownSmall" data-effect-delay="200">
<span class="icon default-bg circle"><i class="fa fa-connectdevelop"></i></span>
<h3>We Are Extremely Flexible</h3>
<div class="separator clearfix"></div>
<p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritatis cumque lorem ipsum dolor sit amet, consectetur.</p>
<a class="btn btn-gray-transparent radius-50 btn-animated" href="page-services.html">Read More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
<div class="col-md-4 ">
<div class="pv-30 feature-box text-center object-non-visible" data-animation-effect="fadeInDownSmall" data-effect-delay="300">
<span class="icon default-bg circle"><i class="fa icon-snow"></i></span>
<h3>We Use Latest Technologies</h3>
<div class="separator clearfix"></div>
<p>Inventore dolores aut laboriosam cum consequuntur delectus sequi lorem ipsum dolor sit amet, consectetur.</p>
<a class="btn btn-gray-transparent radius-50 btn-animated" href="page-services.html">Read More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
</div>
</div>
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:00
@sorinr Glad, you were able to find the correct solution .I was able to load the map properly by just calling the function(don't know why it didn't worked for you) but noticed (now) that the location was off. So maybe your method is how we should do it.Thanks for sharing the correct solution . :+1:
Sorin Ruse
@sorinr
Aug 03 2016 09:03
@UtkarshShukla7 it is possible. coz i had the location enabled when testing
Dany Din
@danydin
Aug 03 2016 09:29
hey if i use jquery $('#header').append('bla bla'); will it add it in the end of my header inside it div or outside? thanks
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:32
@sorinr My solution showed me australian coast (Sydney) and your solution is showing new-zealand . Maybe because of calling that function something gliches .
@danydin It should append inside it
DVladimirov
@dvladimirov
Aug 03 2016 09:34
Hello everyone i'm in a bit of a strugle
Sorin Ruse
@sorinr
Aug 03 2016 09:34
@UtkarshShukla7 the lat and lon are just hard coded into the initMap() function. i was testing only if it works.
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:35
@sorinr yeah I know that's why it is weird
Sorin Ruse
@sorinr
Aug 03 2016 09:36
@UtkarshShukla7 ye. its weired but i don't know why :)
DVladimirov
@dvladimirov
Aug 03 2016 09:36
cant get the twitter button on the Build a Random Quote machine to be updated dynamically when the innerHtml is changed. If someone can point me in the right direction that would be awsome
$(function(){
  //This handles the on click event for changing the html and displaying the Quote
  $("#getMessage").on("click", function(){
    var $message = $('.message');
  $.ajax({
    type: 'GET',
    url:'http://api.icndb.com/jokes/random?firstName=Chuck&amp;lastName=Norris',
    success: function(data){
      $.each(data, function(i, quote){
        $message.html(quote.joke);
      })
    }


  });
 });

//This adds the innerHtml to the text in the URL of the Tweet button
 var getPostTitle = document.getElementById("message").innerHTML,
    linkElement = document.getElementById("tweet-this-post");


$(linkElement).click(function(event){

  event.preventDefault();

  var tweetedLink = window.location.href;

  window.open("http://twitter.com/intent/tweet?url=" + tweetedLink + "&text=" + getPostTitle + "&via=Dany&", "twitterwindow", "height=250, width=700, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0");

});





});
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:37
@sorinr np :smile: .But what should it show exactly ? New Zealand or Australia?What does it shows you?
Dany Din
@danydin
Aug 03 2016 09:38
@UtkarshShukla7 ok thanks
CamperBot
@camperbot
Aug 03 2016 09:38
danydin sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 782 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:38
@danydin np :+1:
Sorin Ruse
@sorinr
Aug 03 2016 09:40
@UtkarshShukla7 i will change the lat and lon with my own for Bucharest, Romania. but i put that old coords in a google map and here is the result: https://www.google.ro/maps/place/34%C2%B023'49.2%22S+150%C2%B038'38.4%22E/@-34.4885702,150.1306378,9.25z/data=!4m5!3m4!1s0x0:0x0!8m2!3d-34.397!4d150.644?hl=en
@UtkarshShukla7 that hard coded coordinates are just the one from google map api example
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:43
@sorinr Thanks for the map !That's australia so I think its close enough for both.
CamperBot
@camperbot
Aug 03 2016 09:43
utkarshshukla7 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 585 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 03 2016 09:44
@UtkarshShukla7 lol
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:46
I was finding that coordinate and wasn't able to find it(as forgot to used S and E)This map api seems unpredictable :smile:
Sorin Ruse
@sorinr
Aug 03 2016 09:49
@UtkarshShukla7 even strange. i've change the coordinates in the pen with my own and it shows the same old map :)
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:50
@sorinr Wow . It just keeps getting better :smile:
Sorin Ruse
@sorinr
Aug 03 2016 09:51
@UtkarshShukla7 yep. i'm on the right path :)
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:52
@sorinr Yeah.The path maybe right but I guess luck will also play an important factor with this api.
Jack Lyons
@JackEdwardLyons
Aug 03 2016 09:53
hey guys im wondering how i can cut down on my jquery code to make it more elegant?
does anyone have any tips?
Sorin Ruse
@sorinr
Aug 03 2016 09:54
@UtkarshShukla7 ye. for the moment i'm still in the middle of the Tasmanian Sea. swimming to reach the shore :)
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 09:55
@sorinr LOL
@dvladimirov have you loaded your pen over https?Load it over http and it should work.
Sorin Ruse
@sorinr
Aug 03 2016 09:59
@UtkarshShukla7 still, i'm a little confused witch part should i swim to Australia or New Zealand
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:00
@sorinr Australia would be better . :wink:
Is it really just stuck with that location
Sorin Ruse
@sorinr
Aug 03 2016 10:01
@UtkarshShukla7 yes. i we take a look again at the api. for sure i was missing something there
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:04
@sorinr Ok .I can try although no experience with it whatsoever.
@sorinr I have reached Turkey
By changing the coordinates in script tags present in the html part
@sorinr
function showContact(){
  $('span').removeClass('hidden animated bounceInRight');
  $('span.contact').addClass("animated bounceInRight");
  $('span.main, span.about, span.portfolio').addClass('hidden');
  initMap();
  google.maps.event.trigger(map, 'resize');
  map.setZoom(10);
}
This should do .
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:09
and this in html
function initMap() {
  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 44.3433275, lng: 26.3961951},
    scrollwheel: false,
    zoom: 5
  });
}          
        </script>
      </span>
DVladimirov
@dvladimirov
Aug 03 2016 10:12
@UtkarshShukla7 Yes i did load it over Http and the quotes work but the value isnt changing for the tweets.
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:14
@dvladimirov You must have changed something because it worked for me earlier
DVladimirov
@dvladimirov
Aug 03 2016 10:14
damn :D
okay thanks @UtkarshShukla7
CamperBot
@camperbot
Aug 03 2016 10:15
dvladimirov sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 783 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:15
$(function(){
  //This handles the on click event for changing the html and displaying the Quote
  $("#getMessage").on("click", function(){
    var $message = $('.message');
  $.ajax({
    type: 'GET',
    url:'http://api.icndb.com/jokes/random?firstName=Chuck&amp;lastName=Norris',
    success: function(data){
      $.each(data, function(i, quote){
        $message.html(quote.joke);
      })
    }
  });
 });

//This adds the innerHtml to the text in the URL of the Tweet button
 var getPostTitle = document.getElementById("message").innerHTML,
    linkElement = document.getElementById("tweet-this-post");


$(linkElement).click(function(event){

  event.preventDefault();

  var tweetedLink = window.location.href;


  window.open("http://twitter.com/intent/tweet?url=" + tweetedLink + "&text=" + getPostTitle + "&via=Dany&", "twitterwindow", "height=250, width=700, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0");
});    
});
@dvladimirov np .this was your old code .
DVladimirov
@dvladimirov
Aug 03 2016 10:15
but did u try it with
clicking on the button to change
the quote ?
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:16
@dvladimirov yes I did and with this code that you had earlier it changed.
DVladimirov
@dvladimirov
Aug 03 2016 10:16
i really don't know what is happening then :D
been at this for several hours :D
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:17
Actually chrome doesn't allow you to make http requests over https for security reasons . So your requests were not being processed.
DVladimirov
@dvladimirov
Aug 03 2016 10:17
yes i figured that out when my quotes stop revealing
:D
but even with Http
they don't work for me :D
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:18
@dvladimirov ok I will try to make it work .
DVladimirov
@dvladimirov
Aug 03 2016 10:23
okay i can move on now :)
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 10:24
@dvladimirov :+1:
Sorin Ruse
@sorinr
Aug 03 2016 11:34
@UtkarshShukla7 Sorry. I was away. yep. this way its working. probably its because of the zoom. it has to have one value in the initMap() and a higher one in map.setZoom() call to render corectly the map. Great job. Thank you
CamperBot
@camperbot
Aug 03 2016 11:34
sorinr sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 784 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
mnghm
@mnghm
Aug 03 2016 11:34
Could someone please help with pull classes in bootstrap?
labeebahmad414
@labeebahmad414
Aug 03 2016 11:35
Is there JS library using which my app can "listen" to the music being played in the browser or locally on the device let's say it's outside of browser?
Darth Skywalker
@adityaparab
Aug 03 2016 11:48
@nghm : Yes. What do you want to know?
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 11:49
@sorinr np .Glad it helped.
Sorin Ruse
@sorinr
Aug 03 2016 11:50
@UtkarshShukla7 here i come Sidney :)
UtkarshShukla7
@UtkarshShukla7
Aug 03 2016 11:51
@sorinr lol
mnghm
@mnghm
Aug 03 2016 12:04
@adityaparab struggling to find why my image is not being wrapped by text. I have instead put my image into a small column on the right, and the text into a larger column on the left to meet the 12 col grid
Darth Skywalker
@adityaparab
Aug 03 2016 12:04
Do you have a codepen that you can share?
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:06
Anybody is online?
I need a help
mnghm
@mnghm
Aug 03 2016 12:06
@adityaparab If you look, where my col-md-x classes are, I had these as pull-left and pull-right
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:07
I want to implement a function, that a browser keep a specific page once on it!!!!!
Does anybody know a solution about that?
Darth Skywalker
@adityaparab
Aug 03 2016 12:08
@nghm Right now it looks right.
So I assume earlier you had your text inside .pull-left and image in .pull-right?
mnghm
@mnghm
Aug 03 2016 12:09
@adityaparab Correct, but it just wouldn’t do anything
Darth Skywalker
@adityaparab
Aug 03 2016 12:10
Do you understand CSS floatproperty?
mnghm
@mnghm
Aug 03 2016 12:10
@adityaparab Yes I know about float, but I thought bootstrap had these pre-made?
Darth Skywalker
@adityaparab
Aug 03 2016 12:10
because that's what those pull classes are.
.pull-left{
    float:left;
}

.pull-right{
    float: right;
}
mnghm
@mnghm
Aug 03 2016 12:14
@adityaparab please take another look at my pen, I have made changes to how it was before
Sorin Ruse
@sorinr
Aug 03 2016 12:16
@UtkarshShukla7 just sent you a pm
Darth Skywalker
@adityaparab
Aug 03 2016 12:17
@nghm : That's because, your div and img is a block level element. So they get added on the next line by default
if you set style on your p like style="width:50%;" you will see it floating on the left
@nghm : Take a look
<!-- Nav/banner [top]
     container [max-width]
     Header [image and text]
     Main [range of work]
     Footer [social and details]
-->

<div class="container-fluid bg-1">
  <nav class="navbar">
    <ul class="navi text-center">
      <li><a href="#sec_about">About</a></li>
      <li><a href="#sec_port">Portfolio</a></li>
      <li><a href="#sec_contact">Contact</a></li>
  </nav>
</div>
<div class="container-fluid bg-2">
  <div class="row" style="display:inline-block; width:80%;">
    <p class="pull-left" style="">Hello, and welcome to my portfolio! This is where I share all of my latest work. Here I will demonstrate how I have developed a simple idea with a client into a fully working front end website. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus at fringilla tortor. Integer pulvinar risus vitae sapien commodo egestas. Suspendisse iaculis ligula ut arcu sodales elementum. Phasellus eget justo auctor, malesuada urna sed, convallis augue. Cras vestibulum purus in mauris tempor, vitae
      pretium nulla fermentum. Maecenas tempus nulla eget fringilla egestas. Phasellus et volutpat lorem. Proin sit amet enim quam. Ut ultricies lacus in bibendum hendrerit. Aenean pretium consequat felis, interdum pretium risus dictum id. Aenean fermentum
      mi sed faucibus feugiat. Phasellus luctus porttitor sollicitudin.</p>
  </div><img src="https://avatars0.githubusercontent.com/u/9013612?v=3&s=460" class="img-responsive profile pull-right" style="display:inline-block;"></div>
</div>
<div class="container-fluid bg-3">
  <h2>Portfolio</h2></div>
It will render as you expected.
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:24
@sorinr
Can you help me?
Sorin Ruse
@sorinr
Aug 03 2016 12:24
@wangzhaohui on ?
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:25
I want to implement a function, that a browser keep a specific page once on it!!!!!
Do you know any solution about that?
Sorin Ruse
@sorinr
Aug 03 2016 12:26
@wangzhaohui what do you mean by "a browser keep a specific page once on it" ?
mnghm
@mnghm
Aug 03 2016 12:28
@adityaparab in the past I’ve never needed to specify a width as the content simply should wrap around the image? but thanks for your help anyway
CamperBot
@camperbot
Aug 03 2016 12:28
nghm sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Aug 03 2016 12:28
@nghm : You'd need width specification for making elements inline.
If you take a close look, the col-*-* classes of bootstrap also add a certain pecentage of width on the divs to make them look like columns.
Text, yes, it wraps around within the container element (div, for example)
but this container needs a width in order to align elements correctly.
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:31
@sorinr I mean, I open a page named "upload", when I am trying to open the same name page in the browser, this action should be forbidden and throw a hint to me.
mnghm
@mnghm
Aug 03 2016 12:32
@adityaparab Ah I see, thanks for the info :thumbsup:
CamperBot
@camperbot
Aug 03 2016 12:32
nghm sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: nghm already gave adityaparab points
Sorin Ruse
@sorinr
Aug 03 2016 12:32
@wangzhaohui i got the idea. let me think
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:34
I have tried to set a variable in Localstorage.
Sorin Ruse
@sorinr
Aug 03 2016 12:37
@wangzhaohui yes but you have to clear it when that window is closing. so you should try to add an window.onclose event to clear it
Darth Skywalker
@adityaparab
Aug 03 2016 12:37
@wangzhaohui : page name uploadas in upload.html or you mean some route that loads this page?
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:43
@sorinr However, we can not guarantee this page crashes unexpectedly. When the crash happened, the close event cannot be detected
Sorin Ruse
@sorinr
Aug 03 2016 12:48
@wangzhaohui thats right.
Rich
@richard-ball
Aug 03 2016 12:49
I am finding that an empty div's width % is not respected unless I put something else inside the div, why is that? If I use padding: 1px, then the 10% width is respected, else width becomes 0pixels. I use it for layout as a blank box.
Sorin Ruse
@sorinr
Aug 03 2016 12:50
@wangzhaohui how do you open the page? like: window.open('upload.html', name
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:51
window.open
Sorin Ruse
@sorinr
Aug 03 2016 12:51
@wangzhaohui and are you giving a name to it?
ronakagrawal3
@ronakagrawal3
Aug 03 2016 12:52
blob
<span id="firstSpan"><span id="secondSpan"> <p> My paragraph </p> </span></span>
Sorry, wrong room
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 12:53
No, the page its own name. And there is nothing wrong with the name of the page.
Sorin Ruse
@sorinr
Aug 03 2016 12:54
@wangzhaohui do you have any reason for not closing it first and reopen it?
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 13:00
Tell you the business on my project. The upload page is for uploading videos. I clicked a button to open the upload page and upload one or more videos. Then I click the button again, the browser should forbid me and give me a prompt that the same page has been opened.
Sorin Ruse
@sorinr
Aug 03 2016 13:01
@wangzhaohui ok
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 13:08
Thank you, let me see
Glory Wong Zhaohui
@GloryWong
Aug 03 2016 13:25
@sorinr nice solution, but there is a problem that if the page containing the button was closed but upload page stayed open, then open the page containing the button again.......
Sorin Ruse
@sorinr
Aug 03 2016 13:27
@wangzhaohui then you will have to check for both pages. the one containing the button and the upload page and then decide how do you want to behave in this situation
mnghm
@mnghm
Aug 03 2016 14:07
anyone have a portfolio page they'd like to share?
Sorin Ruse
@sorinr
Aug 03 2016 14:23
@nghm you can just google: portfolio codepen
Dylan
@dhcodes
Aug 03 2016 14:32
@nghm check out the forum too. Lots posted there, but I'll go get mine
Darrin
@ddschmitz
Aug 03 2016 14:44

Is there an easy way to to CSS shading or background coloring? For example with my calculator, I want the part in the red box to be a different color for the calculator. I see all these people on codepen doing purely CSS animations and they make shapes and colors and I'm wondering how they do that.

http://codepen.io/ddschmitz/pen/akaOdp

Dylan
@dhcodes
Aug 03 2016 14:52
@ddschmitz box shadow and text shadow are easy ways to add shading
as for animations, those are a bit more involved
Darrin
@ddschmitz
Aug 03 2016 14:53
Do you just need to add elements and fiddle with their positioning and colors/shading?
@dhcodes
Dylan
@dhcodes
Aug 03 2016 14:54
@ddschmitz depends. What effect are you going for?
do you want to add a shadow on the button press or somethign?
Darrin
@ddschmitz
Aug 03 2016 14:55
I just want to be able to add shapes and lines to the background of my calculator and not have them affect the position of important stuff like buttons and the screens. @dhcodes
Dylan
@dhcodes
Aug 03 2016 14:56
ah, I believe a lot of that positioning is done via z-index
Darrin
@ddschmitz
Aug 03 2016 14:56
like css z-index?
yeah, because then you can make sure the buttons stay on top of everything else
mnghm
@mnghm
Aug 03 2016 14:59
@dhcodes thanks dude! liking the v2 edition
CamperBot
@camperbot
Aug 03 2016 14:59
nghm sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1294 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Aug 03 2016 15:00
@nghm that was after I finished all the front-end projects lol
you can tell i got some new skillz lol
Harry Adel
@harryadel
Aug 03 2016 15:01
Any ideas on how why can't the count down timer start counting the break time when the session ends? http://codepen.io/Hadouken/pen/bEmymd
mnghm
@mnghm
Aug 03 2016 15:01
@dhcodes yeah, good job! just cracking on with mine atm http://codepen.io/nghm/pen/JKBwLK
Max
@m-michalek
Aug 03 2016 15:02
Hey, can someone help me? why is there no space on the left and right sites? i mean there is space, but i used a jumbotron div so i think there should be a grey like border
Harry Adel
@harryadel
Aug 03 2016 15:03
@m-michalek Try to apply width to your jumobotron
lets say width: 80%;
Sorin Ruse
@sorinr
Aug 03 2016 15:03
@m-michalek <body class="container">
Dylan
@dhcodes
Aug 03 2016 15:04
@Harry97 you have a contradictory statement I belive
Harry Adel
@harryadel
Aug 03 2016 15:04
so everything would be like .jumbotron { width: 80%; }
Dylan
@dhcodes
Aug 03 2016 15:04
@Harry97 you say above that part "if seconds === 0, seconds = 60
Harry Adel
@harryadel
Aug 03 2016 15:04
@dhcodes Where specifically?
Dylan
@dhcodes
Aug 03 2016 15:04
make sense?
so seconds will never be 0 to run the next if
line 20
Harry Adel
@harryadel
Aug 03 2016 15:05
well that's just to reset the seconds once a minute has elapsed
Dylan
@dhcodes
Aug 03 2016 15:05
great start @nghm
@Harry97 right, but the statement below that requires that seconds be 0 to run
Max
@m-michalek
Aug 03 2016 15:05
Thank you guys it worked! have nice day my friends :+1:
Dylan
@dhcodes
Aug 03 2016 15:05
and it will never be 0 if above it, it gets reset to 60 if it reaches 0
@Harry97
@Harry97

   if (seconds > 0) {
  seconds--;
  if (seconds === 0) {
    seconds = 60;

    }
  }
  //Why can't this if function start counting down the break time
  if (work === 0 && seconds === 0) {
    $("#timer").text(chill + ":" + seconds);
in the 3rd line, you prevent what is required by the second-to-last line
at least that's how I read it
Harry Adel
@harryadel
Aug 03 2016 15:07
@dhcodes I get what you are pointing to

but when I modified the code to this: if (seconds === 0) {

seconds = 60;
if (work === 0) {
   $("#timer").text(chill + ":" + seconds);

if (chill > 0) {
  chill--;
     }  
}
}

}

and deleted the "if (work ===0 && seconds ===0)
it's still not working tho
Sorin Ruse
@sorinr
Aug 03 2016 15:15
@Harry97 why don't just set a timer that count up normally but display it the other way. like with every second that pass i will display -2x seconds starting from the initialization(counter start)?
Dylan
@dhcodes
Aug 03 2016 15:16
@Harry97 you also might consider setting your break up as a separate function adn then call it when your work timer gets to zero
Harry Adel
@harryadel
Aug 03 2016 15:18
@dhcodes I've thought about, but I declined since my code isn't working because I can't detected when the session ends in the first place!
@sorinr I shall try using a reverse set timer like you've said
I opted for setInterval because it was the most popular method for countdowns on stackoverflow
Sorin Ruse
@sorinr
Aug 03 2016 15:19
@Harry97 actually its not a reverse timer. its a reverse display timer
Harry Adel
@harryadel
Aug 03 2016 15:20
@sorinr Oh! I didn't know that
lol reverse display timer It's then
@sorinr @dhcodes Thank you both for your help! I appreciate it.
CamperBot
@camperbot
Aug 03 2016 15:23
harry97 sends brownie points to @sorinr and @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1296 | @dhcodes |http://www.freecodecamp.com/dhcodes
Sorin Ruse
@sorinr
Aug 03 2016 15:29
@Harry97 welcome. hope u got the idea. the counter(setinterval) goes on but i display it as it will count down not up
@Harry97 one very good libs to work with dates and times is: http://momentjs.com/
Harry Adel
@harryadel
Aug 03 2016 15:37
@sorinr Isn't doing things manually allows me to learn much more than simply grabbing a lib?
Jonathan Leon
@Wo1v3r
Aug 03 2016 15:38
@Harry97 Generally dates and times is something you'd rather depend on a library \ user's time , it's very tricky
@Harry97 you should watch this https://www.youtube.com/watch?v=-5wpm-gesOY
Harry Adel
@harryadel
Aug 03 2016 15:42
@Wo1v3r I'mma watch it then report back to you
Sorin Ruse
@sorinr
Aug 03 2016 15:49
@Harry97 that lib was just for reff. in the future u will see its benefits. not saying you should learn and use it know. think of measuring points in time starting using setinterval(you save it in a variable) from now on. when the seted interval passes you can collect the actual time(new time) and you can compare it with the old one and display the time passed by in reverse. :) hope it makes sense
Harry Adel
@harryadel
Aug 03 2016 15:53
@sorinr lol That actually makes sense I'mma try to apply it to my code
It's really simple and smart
Damian Collier
@damianpcollier
Aug 03 2016 15:54
Hi All.
Can anybody recommend a decent site for the random quote machine please
Harry Adel
@harryadel
Aug 03 2016 15:54
@Wo1v3r Doddamn it! this is mind-boggling
fuck it :D I'mma start using lib when dealing with time from now onward
@damianpcollier quoestondesign
quotesondesign*
You shall find their API that's super easy to use
and the website: http://quotesondesign.com/
Damian Collier
@damianpcollier
Aug 03 2016 16:02
great, thanks @Harry97
CamperBot
@camperbot
Aug 03 2016 16:02
damianpcollier sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Zelite
@zelite
Aug 03 2016 16:32
Hi, anyone managed to do the local weather app without an api key?
Mikail Bayram
@mikail1998
Aug 03 2016 16:33
@zelite, i think not
Zelite
@zelite
Aug 03 2016 16:33
:/
Mikail Bayram
@mikail1998
Aug 03 2016 16:33
every api requires a api key
@zelite whats the problem you can use many of them
Zelite
@zelite
Aug 03 2016 16:33
yeah, but if the key is not kept secret, what's the point
Mikail Bayram
@mikail1998
Aug 03 2016 16:34
use the free ones, and you wont have any problems
on codepen unfortunately you cant keep it a secret
Zelite
@zelite
Aug 03 2016 16:35
I was checking https://hyperdev.com , where you can have a .env file that is always kept secret
but i don't know how to use it without exposing it again in the frontend
that seems something to learn later on the backend part
Mikail Bayram
@mikail1998
Aug 03 2016 16:36
yes exactly
when you use the api key in front end one way or another it will be exposed
Sorin Ruse
@sorinr
Aug 03 2016 16:46
@mikail1998 but who cares about your api key if they can obtain their own for free. this challenges are just for learning and not for a production site
Mikail Bayram
@mikail1998
Aug 03 2016 16:48
@sorinr yes i agree with you
Zelite
@zelite
Aug 03 2016 16:51
Ok, I am trying to query this: api.openweathermap.org/data/2.5/weather?lat=35&lon=139 with &APPID={myapikey} but get always "401 Authorization Required"
Moisés Man
@moigithub
Aug 03 2016 17:01
@zelite u need to register on that web to get an api key
Zelite
@zelite
Aug 03 2016 17:01
Yes, I've done that
Moisés Man
@moigithub
Aug 03 2016 17:05
@zelite can u post some code ?.. how u do the request ?
what error u get on console (devtools )
Zelite
@zelite
Aug 03 2016 17:06
at the moment i'm just posting the link in the browser (does not work) and also trying testing with https://www.getpostman.com/
On the openweather website, when you click on one of the examples it builds already the URL with the proper APPID, but I always get 401 Authorization Required
ofc replacing the appid
Zelite
@zelite
Aug 03 2016 17:11
humm.. now it is working. I have reseted the API key, but the automatic links from the website where still using the old one..
o.o
Borja
@fuecisla
Aug 03 2016 17:42
hmm... I am starting to get disappointed... I get to the Built a Tribute Page.. and I am sure I can do it easily... the problem is not code (which should be) but the explanations they give or don´t give. To start with... why do they mention that I can use any APIs that I want??? What is an API? They have not mentioned the word API not a single time in the previous explanations...
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:43
@Harry97 Didnt get the mention notification but yeah that timezone thing is tricky, its good to learn from other peoples' mistakes :D
Borja
@fuecisla
Aug 03 2016 17:44
Can anybody tell me which API could I want or need in order to get the challenge done?
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:44
@fuecisla Which challenge is it ?
Borja
@fuecisla
Aug 03 2016 17:45
the built a tribute page
need the number?
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:45
I dont recall it uses an api :o
do you mean the weather one ?
Borja
@fuecisla
Aug 03 2016 17:45
no, the very first one
the tribute
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:46
definetly no need for api there
Borja
@fuecisla
Aug 03 2016 17:46
but that is exactly my point... no API is needed AT ALL, why would the instructor mention that I can use an API if they do not explain what is an API
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:46
Oh thats a set message for all the challenges
Borja
@fuecisla
Aug 03 2016 17:46
@Wo1v3r yes, that is the one
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:46
just ignore it for this one

You don't need an api untill these ones : Build a Random Quote Machine Complete   *

Show the Local Weather Complete   *

Build a Wikipedia Viewer Complete   *

Use the Twitch.tv JSON API Complete   *

Borja
@fuecisla
Aug 03 2016 17:47
ok, thanks, in fact I know what an API is, at least what the Acronim means... although I admit that to me is never clear what they mean by API... web API, web service, a software???
Sorin Ruse
@sorinr
Aug 03 2016 17:48
@fuecisla first pick a subject. second start laying out you page using html tags you know. third add css style to your html tags to look on page as you want them to look. forth add(but not necessary) some javascript to add interaction to your html elements
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:48
Well generally in web development it refers to another service you use to get specific or random information depending on your needs \ user interaction
Borja
@fuecisla
Aug 03 2016 17:48
@Wo1v3r thank you
CamperBot
@camperbot
Aug 03 2016 17:48
fuecisla sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @wo1v3r |http://www.freecodecamp.com/wo1v3r
Borja
@fuecisla
Aug 03 2016 17:49
@sorinr thank you!
CamperBot
@camperbot
Aug 03 2016 17:49
fuecisla sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 588 | @sorinr |http://www.freecodecamp.com/sorinr
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:49
and the API's are defined by the service provider basically as plain as a database for your current needs
Borja
@fuecisla
Aug 03 2016 17:50
yeah, I know that is kind of a set of rules they put so you can comunicate with their server and info (at least when talking about web environment). There are APIs that do not have anything to do with the internet
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:50
Best tip for later on would be finding a good API by 1. Your needs , 2. The documentation
Borja
@fuecisla
Aug 03 2016 17:51
you mean like those provided by google, yahoo and similar
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:51
yes for example intents in android is also an API even if theres no http\s requests at all
yes maps,feeds,weather,pictures, whatever :D
Borja
@fuecisla
Aug 03 2016 17:51
@Wo1v3r thanks again. I will move on now!
CamperBot
@camperbot
Aug 03 2016 17:51
fuecisla sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
:warning: fuecisla already gave wo1v3r points
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:51
alright GL :D
Borja
@fuecisla
Aug 03 2016 17:52
looks like I cannot say thank you more than once! :smile: :smile:
Jeremy Brown
@jdb140430
Aug 03 2016 17:52
check out my contact page. Which do yall think looks better? I only changed the alignment of where you put your info. 1. http://codepen.io/jdb140430/full/YWOrRk
Borja
@fuecisla
Aug 03 2016 17:54
i
Jonathan Leon
@Wo1v3r
Aug 03 2016 17:54
@jdb140430 placement and sizing is a lil off on wide view
@jdb140430 and I can give you a great link for color schemes if you want to make it more fancy colorhunt.co
Borja
@fuecisla
Aug 03 2016 17:55
yep, I would go easier on some colors. Also, I think that the more fancy fonts are usually better for tittles than for text on paragraphs :)
Jeremy Brown
@jdb140430
Aug 03 2016 17:57
okay. thanks. yeah usually on chrome it looks good but on internet explorer it's all over the place. do you think that is because I didn't bootstrap?
Sorin Ruse
@sorinr
Aug 03 2016 17:57
@jdb140430 you still have to work on that pen. it seems you have no vision yet on how do you want to look your page. its my critical feedback
Borja
@fuecisla
Aug 03 2016 18:00
yeah, Jeremy, I think it is better to start always with clean lighter colors and take it from there. Look at google´s page for example, or even FCC pages... just saying that is a good starting point. Like when you are not used to buy suits... you start with a dark gray or blue... you can never get them wrong :))))
Jeremy Brown
@jdb140430
Aug 03 2016 18:03
Okay! I don't know why, but at least on my browser I feel like it looks really good with those colors. I am still a little new to html and such. This is good feedback. Thank you. I appreciate constructive criticism
Sorin Ruse
@sorinr
Aug 03 2016 18:05
@fuecisla @jdb140430 don't bother too much about colors at first. choosing the right color palette depends also on your page subject. just think on your layout and subjuct. afterwards about color pallets
Damian Collier
@damianpcollier
Aug 03 2016 18:07

Hi all
This relates to the random quote machine
I'm having a frustrating time reading JSON files from external sites and I think it's down to my IDE.
See simplified codepen
http://codepen.io/collierd/pen/wWEbKY
This works fine

If I code this in webmatrix, it returns a blank screen
I have had no problems with webmatrix throughout this course
Basically, I prefer this product as it is much easier to develop in

Has anybody else seen this?

redixhumayun
@redixhumayun
Aug 03 2016 18:10

http://codepen.io/redixhumayun/pen/JKryAZ/?editors=0011

Hey, I know this is asking a lot, but I'm having a lot of trouble with my Simon Game. It works fine, except when it hits the third iteration, and then it goes haywire, calling the same function twice without iterating over any of the variables I've set up as a counter. Can anybody help me out here?

kirbyedy
@kirbyedy
Aug 03 2016 18:13
This message was deleted
Tyler Moeller
@TylerMoeller
Aug 03 2016 18:13
@damianpcollier Not sure why this would fail in webmatrix. MS recommends using Visual Studio Code nowadays anyway - have you tried with that IDE and their HTML Previewer plugin?
Ajay Tanwar
@ajayt365
Aug 03 2016 18:16
hello people . i am experiencing a problem with this http://codepen.io/ajayt365/pen/RRYOdk . i set my divs "class=box" height 5%. but it's not displaying the div with background color :red but when i do height:100px , the divs are shown . what is the reason for this ? also there is vertical scroll when i set margin:0 on body . why? please help
Damian Collier
@damianpcollier
Aug 03 2016 18:17
@TylerMoeller I haven't tried Visual Studio. I do use that for SQL development. Is that what you use?
Tyler Moeller
@TylerMoeller
Aug 03 2016 18:18
@damianpcollier I have switched to Atom because of better linting support - could not get Visual Studio Code to fix on save with eslint, jshint, or jscs.
Sorin Ruse
@sorinr
Aug 03 2016 18:20
@ajayt365 just make it <div class="box" id="first">first</div>, ecc for all divs to see whats happening
Damian Collier
@damianpcollier
Aug 03 2016 18:21
@TylerMoeller I am wondering whether it's the sites that I am looking at. Just looked at somewhere called forismatic and that seems to work. Tried a number of other sites with no real success
Luke
@lukenetti3
Aug 03 2016 18:21
Hey guys, probably a simple answer, but how come after I type in a search in my twitch.tv project I can’t then click the buttons to show all or online or offline? Is there some clearing I need to do at the end of my search? Heres my code. http://codepen.io/lukenetti3/pen/yJxWaB?editors=0010
Darth Skywalker
@adityaparab
Aug 03 2016 18:23
@lukenetti3 : Luke! My Son! :sweat_smile:
Ajay Tanwar
@ajayt365
Aug 03 2016 18:23
@sorinr i did that , height:10% has no effect over divs . do you know why ? when i set height to 100px , the height of the divs increase .
Olga C
@Octopinky
Aug 03 2016 18:23
I need help with record collection
function updateRecords(id, prop, value) {

  if(collection[id].hasOwnProperty(prop)){
    if(collection[id][prop]===""){
      delete collection[id][prop];
    }
    else{
      collection[id][prop].push([value]);
    }

  }
  collection[id][prop]=value;
  return collection;
}
Sorin Ruse
@sorinr
Aug 03 2016 18:26
@ajayt365 if you want your divs having a certain height you should try min-height: 100px; max-height: like 300px; and if you want to scroll that regionadd overflow
Ajay Tanwar
@ajayt365
Aug 03 2016 18:26
yeah i know that @sorinr but i wanted why % are not working in this case ?
Sorin Ruse
@sorinr
Aug 03 2016 18:31
@ajayt365 because the parent of that boxes have no hight. try add to css this class: .content{ height: 800px;} to see what happens and let the box class as you defined it
Dustin
@Key-Banger
Aug 03 2016 18:35
I'm having a bootstrap modal issue. Any help is appreciated. Basically trying to show a win/lose modal. For some reason the pick a side modal shows fine, but the win/lose modal doesnt show up right.
Ajay Tanwar
@ajayt365
Aug 03 2016 18:35
@sorinr yeah it worked mate . can u help me with scrollbar as well ? the height of the div is not greater than body then why do i have vertical scrollbar there ?
why body have space at the top ? please do inspect element @sorinr
Sorin Ruse
@sorinr
Aug 03 2016 18:37
@ajayt365 add this to html, body in the css: padding: 0px, margin: 0px; overflow: hidden;
Muhammad Hasham
@MohammadHasham
Aug 03 2016 18:41
need help with 'sorted uniob
Ajay Tanwar
@ajayt365
Aug 03 2016 18:41
@sorinr i know it will remove the scrollbar but wanted to know what's causing that vertical scrollbar ?
there is also white space above body even after doing overflow:hidden . why so ?
Sorin Ruse
@sorinr
Aug 03 2016 18:49
@ajayt365 remove the hight: 100% from your body to see the effect
Sorin Ruse
@sorinr
Aug 03 2016 18:54
@ajayt365 html{ width:100%; } body{ min-height: 100%; margin:0; padding:0; }
Reggie
@Reggie01
Aug 03 2016 18:56

@Key-Banger you need to add a z-index property to .modal-win. You can read about z-index at w3schools.

// css
.modal-win{
    position: relative;
}
// js
$('.modal-win').modal('show');
$('.modal-win').css("zIndex", 1); // insert

I did that wrong. The dialog box is not on top. I'll edit it once I fix it.

Dustin
@Key-Banger
Aug 03 2016 19:02
@Reggie01 yea, that brings it in front of the game board still behind modal backdrop
Sorin Ruse
@sorinr
Aug 03 2016 19:03
@Key-Banger make it z-index: 9999; the highest level
Ajay Tanwar
@ajayt365
Aug 03 2016 19:05
@sorinr did that still white space above body
Dustin
@Key-Banger
Aug 03 2016 19:06
That works. Thanks, any reason why 10, 100 or 1000 wont work and 9999 will?
@sorinr @Reggie01 thanks
CamperBot
@camperbot
Aug 03 2016 19:06
key-banger sends brownie points to @sorinr and @reggie01 :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @reggie01 |http://www.freecodecamp.com/reggie01
:cookie: 589 | @sorinr |http://www.freecodecamp.com/sorinr
Dustin
@Key-Banger
Aug 03 2016 19:08
Never mind I found the z index on the backdrop.
Sorin Ruse
@sorinr
Aug 03 2016 19:11
@Key-Banger welcome. the idea is this: if you have the overlayer at z-index: 1000 for example, you should make your modal z-index: 1001 to be above overlayer and anything behind overlayer its unclickable but the modal
@ajayt365 not for me: look here: http://codepen.io/sorinr/pen/rLkgbr
Zelite
@zelite
Aug 03 2016 19:18
was all happy with my first version of the weather app.. and now.. since I'm using github pages, I need a api that sends me things over https =(
Ajay Tanwar
@ajayt365
Aug 03 2016 20:09
@sorinr it shows the space abive in ur codepen link as well bro.
above body
Sorin Ruse
@sorinr
Aug 03 2016 20:15
@ajayt365 what browser are you testing on?
Ajay Tanwar
@ajayt365
Aug 03 2016 20:16
chrome
Sorin Ruse
@sorinr
Aug 03 2016 20:16
me too
Ajay Tanwar
@ajayt365
Aug 03 2016 20:30
still , how can i screenshot here that would be mire clear i guess?
send*
@sorinr any tool to send screenshot here?
Sorin Ruse
@sorinr
Aug 03 2016 20:35
@ajayt365 no need. i;ve change the color background for html tag and body tagand i;ve seen what u mean
Ajay Tanwar
@ajayt365
Aug 03 2016 20:36
so what's causing that space above ?
since margin:0 html and body should completely overlop
overlap*
Janine vN
@janine9vn
Aug 03 2016 20:38
I just put some finishing touches on the random quote generator and if anyone has any feedback I'd love it
http://codepen.io/janine9vn/full/wWEBVQ/
Sorin Ruse
@sorinr
Aug 03 2016 20:41
@ajayt365 i really have no idea. take a look here: http://codepen.io/sorinr/pen/YWjkZx same css settings. same browser
Coy Sanders
@coymeetsworld
Aug 03 2016 20:44
looks good @janine9vn, one thing though as you noticed were the quotes larger than 180 characters
Ajay Tanwar
@ajayt365
Aug 03 2016 20:44
yeah same settings . even googled it but found nothing . if u find something about this please inform me , i will do the same :)
Coy Sanders
@coymeetsworld
Aug 03 2016 20:44
maybe better just to have smaller quotes so that you don't cut it off prematurely? no one will be able to read the rest of the quote
Sorin Ruse
@sorinr
Aug 03 2016 20:46
@ajayt365 ok. if i find a solution. i'l let u know
Janine vN
@janine9vn
Aug 03 2016 20:47
@coymeetsworld I'll add in a check to see if the quotes are larger than 140 then to ask for a new quote
Coy Sanders
@coymeetsworld
Aug 03 2016 20:48
oh didn't realize you were using an API for it @janine9vn, you could do it that way but you don't have to
just a small thought, what you have is responsive and it works so I think its all good
Janine vN
@janine9vn
Aug 03 2016 20:49
@coymeetsworld I appreciate the feedback though =D thanks
CamperBot
@camperbot
Aug 03 2016 20:49
janine9vn sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1288 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Trung Vo
@trunglive
Aug 03 2016 20:52
hello guys, I have a question about the challenge "Build a Tribute Page" https://www.freecodecamp.com/challenges/build-a-tribute-page
Coy Sanders
@coymeetsworld
Aug 03 2016 20:52
yeah np @janine9vn nice work
Trung Vo
@trunglive
Aug 03 2016 20:53
Am I going to build a page similar to that page or I can choose the info & source on my own?
Coy Sanders
@coymeetsworld
Aug 03 2016 20:53
just have to follow the user stories @trunglive, it should be somewhat similar but doesn't have to be same style
can also be on whoever you want
Trung Vo
@trunglive
Aug 03 2016 20:54
oh ok, so just follow the guide from user stories, right
thanks @coymeetsworld
CamperBot
@camperbot
Aug 03 2016 20:55
trunglive sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1289 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Aug 03 2016 20:58
yep, np
Luke
@lukenetti3
Aug 03 2016 21:02
Can someone check out my twitch.tv project I am working on. I am trying to use jQuery .keyup method to make sure the text box when empty will display all my channels. http://codepen.io/lukenetti3/pen/yJxWaB?editors=0010
mzedlach
@mzedlach
Aug 03 2016 21:14
Hello everyone!

I'm working on the tribute page and having difficulty trouble shooting how to setup the year & information section. I would like to have it so all of years are aligned on the left and the information is on the right. Also, when the window is readjusted, have it so the text with information wraps to the next line. I was thinking using grids, but that seems like a lot of unecessary code. Then I thought using float:right, but that can only be applied to one line. Then I came across some css like this

.split-para      
{ display:block;margin:10px;
}

.split-para span { display:block;float:right;width:50%;margin-left:10px;}

but that would make one section align left and one section align right.
I would like the text containing information on each year to align to the same margin as all other information, but after some spacing after the year.

Juan G. Sanchez
@JuanGSanchez
Aug 03 2016 21:15
hello any body finish the jQuery section already?
Luke
@lukenetti3
Aug 03 2016 21:16
@JuanGSanchez Yes, do you have any questions?
Norvin Burrus
@ndburrus
Aug 03 2016 21:23
@JuanGSanchez leson name?
mzedlach
@mzedlach
Aug 03 2016 21:35
The chatrooms are so quiet right now? Why is that? I've never seen it this quit
quiet*
Henrique Salguero
@kikosalguero
Aug 03 2016 22:03
Can anyone help me? Why my twitch channel status just appears in the first block? http://codepen.io/kikosalguero/pen/bZxJRa
TrustMeImLying
@TrustMeImLying
Aug 03 2016 22:07
Would someone mind helping me? I'm trying to get my <h1> element to fade in using Jquery but I cant seem to get it to work. Thank you! Heres my codepen http://codepen.io/TrustMeImLying/pen/LkJwGP
Dario Idrovo
@djidrovo1
Aug 03 2016 22:25
hey guys
in notepad++
where do I enter a fa link for my CSS?
Amit
@amit-s
Aug 03 2016 22:27
@TrustMeImLying the element needs to not be visible first for it to fade in
TrustMeImLying
@TrustMeImLying
Aug 03 2016 22:28
@amit-s Oh thanks for the tip! Ill play around and see if I can do that
CamperBot
@camperbot
Aug 03 2016 22:28
trustmeimlying sends brownie points to @amit-s :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @amit-s |http://www.freecodecamp.com/amit-s
D. Gonzalez
@younglionking
Aug 03 2016 22:32
hey guys, does anybody know that the container class do?
mzedlach
@mzedlach
Aug 03 2016 22:32
Hey @younglionking I was JUST reading into this
D. Gonzalez
@younglionking
Aug 03 2016 22:32
did u find anything out?
That top answer explains it pretty well
D. Gonzalez
@younglionking
Aug 03 2016 22:33
@mzedlach cool thanks!
CamperBot
@camperbot
Aug 03 2016 22:33
younglionking sends brownie points to @mzedlach :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @mzedlach |http://www.freecodecamp.com/mzedlach
mzedlach
@mzedlach
Aug 03 2016 22:33
:)
Norvin Burrus
@ndburrus
Aug 03 2016 23:03
@younglionking you may enjoy this: :sparkles:
quapaw21
@quapaw21
Aug 03 2016 23:10
Does anyone know how to set a background picture on codepen without getting codepen pro?
Norvin Burrus
@ndburrus
Aug 03 2016 23:12
@quapaw21 these may be helpful: :sparkles:
Irina
@2Irina2
Aug 03 2016 23:15
Hello!
Norvin Burrus
@ndburrus
Aug 03 2016 23:15
@TrustMeImLying this may be helpful: :sparkles:
Irina
@2Irina2
Aug 03 2016 23:15
Anyone that could help me with my weather app?
Ademola Adegbuyi
@ooade
Aug 03 2016 23:16
@2Irina2 what's your issue?? Long time tho :smile:
Irina
@2Irina2
Aug 03 2016 23:16
Well the issue is that i have been through the OpenWeatherMap documentation.. tried tutorials and even peeked a little at the example they gave us
And i still have no idea how to get the weather info myelf
myself
quapaw21
@quapaw21
Aug 03 2016 23:17
Thanks @ndburrus I will definitely give these a look and let you know the outcome.
CamperBot
@camperbot
Aug 03 2016 23:17
quapaw21 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1321 | @ndburrus |http://www.freecodecamp.com/ndburrus
Ademola Adegbuyi
@ooade
Aug 03 2016 23:17
@2Irina2 what did you try??
Norvin Burrus
@ndburrus
Aug 03 2016 23:18
@quapaw21 you're welcome! enjoy! :palm_tree: ok...
If only i could find a tutorial that explains how to call the open weather api and how to store it somehow, that would be great
to store the information i mean
Ademola Adegbuyi
@ooade
Aug 03 2016 23:22
@2Irina2 the first thing to do is to get the user's latitude and longitude. geolocation is currently having issues but thanks to http://ipinfo.io you can grab the latitude and longitude from there. Thereafter, you make a request, i prefer to use
$.getJSON(`http://apiUrl`, function(data){//dosomethingWIthData})
CamperBot
@camperbot
Aug 03 2016 23:22
marhyorh sends brownie points to @2irina2 :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @2irina2 |http://www.freecodecamp.com/2irina2
Irina
@2Irina2
Aug 03 2016 23:24
@marhyorh oh that looks great, thank you!
CamperBot
@camperbot
Aug 03 2016 23:24
2irina2 sends brownie points to @marhyorh :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @marhyorh |http://www.freecodecamp.com/marhyorh
Norvin Burrus
@ndburrus
Aug 03 2016 23:24
@2Irina2 is this useful? :sparkles:
var result = JSON.parse(response.getContentText());
Irina
@2Irina2
Aug 03 2016 23:25
@marhyorh basically data is an object and i can access its attributes by data.city ?
Ademola Adegbuyi
@ooade
Aug 03 2016 23:25
@2Irina2 Yeah :+1:
Irina
@2Irina2
Aug 03 2016 23:26
@ndburrus i'll take a look, thank you :)
CamperBot
@camperbot
Aug 03 2016 23:26
2irina2 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1322 | @ndburrus |http://www.freecodecamp.com/ndburrus
Irina
@2Irina2
Aug 03 2016 23:27
@marhyorh and do i need to add other sources in codepen?
Ademola Adegbuyi
@ooade
Aug 03 2016 23:28
@2Irina2 No. Just Jquery will do
Irina
@2Irina2
Aug 03 2016 23:28
@marhyorh sounds great, thank you so much
CamperBot
@camperbot
Aug 03 2016 23:28
2irina2 sends brownie points to @marhyorh :sparkles: :thumbsup: :sparkles:
:warning: 2irina2 already gave marhyorh points
Ademola Adegbuyi
@ooade
Aug 03 2016 23:29
@2Irina2 YWC :+1:
Dario Idrovo
@djidrovo1
Aug 03 2016 23:36
who is good with PHP?
I need to know why my contact form is not working
:/
Ademola Adegbuyi
@ooade
Aug 03 2016 23:38
@djidrovo1 show your code
Irina
@2Irina2
Aug 03 2016 23:39
@marhyorh okay but how do i get the weather now? the problem is that i dont know how to call the api .. If i click on the examples on the site it keeps giving me errors..
Dario Idrovo
@djidrovo1
Aug 03 2016 23:40
<?php 
$name = $_POST[name];
$email = $_POST[email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "djidrovo1@gmail.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
@marhyorh
this is my form
Ademola Adegbuyi
@ooade
Aug 03 2016 23:40
@2Irina2 were you able to log out the longitude and latitude??
Irina
@2Irina2
Aug 03 2016 23:40
the api responds with a json object and i dont know how to store it
Dario Idrovo
@djidrovo1
Aug 03 2016 23:40
<form action="mail.php" method="POST">
          <p class="form-align">Name</p> <input type="text" name="name">
          <p class="form-align">Email</p> <input type="text" name="email">
          <p class="form-align">Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
          <input class="btn" type="submit" value="Send">
        </form>
Irina
@2Irina2
Aug 03 2016 23:41
yeah i know how to get the lat and long now..
Ademola Adegbuyi
@ooade
Aug 03 2016 23:41
@djidrovo1
$name = $_POST[name]; // should be $_POST['name']
$email = $_POST[email']; // should be $_POST['email'];
Irina
@2Irina2
Aug 03 2016 23:41
This message was deleted
Ademola Adegbuyi
@ooade
Aug 03 2016 23:42
@2Irina2 do you av an openweather API_KEY??
Irina
@2Irina2
Aug 03 2016 23:42
and i saw this "api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}" and i know i am supposed to replace (lat) and {long} with the values i get from the ipinfo.io
yeah, i also got a key but i dont know how that is supposed to help me either
Trung Vo
@trunglive
Aug 03 2016 23:43
hello guys, I just finished my first project Build a Tribute Page at http://codepen.io/trunglive/pen/bZxXNR/, I really appreciate your suggestion and feedback!
Dario Idrovo
@djidrovo1
Aug 03 2016 23:43
@marhyorh I hade it with the ' but did not work
greg
@wearenotgroot
Aug 03 2016 23:43
@2Irina2 put it as a url parameter
apiURL + '&appid=some numbers'
Dario Idrovo
@djidrovo1
Aug 03 2016 23:44
@marhyorh here is my site
Irina
@2Irina2
Aug 03 2016 23:44
@wearenotgroot i don't follow
Ademola Adegbuyi
@ooade
Aug 03 2016 23:44
Dario Idrovo
@djidrovo1
Aug 03 2016 23:45
@marhyorh this is what I get when i hit send
!
File not found (404 error)
If you think what you're looking for should be here, please contact the site owner.
Irina
@2Irina2
Aug 03 2016 23:46
@marhyorh {"cod":"404","message":"Error: Not found city"}
Dario Idrovo
@djidrovo1
Aug 03 2016 23:46
which is what my site is supposed to say when it hits a "missing" page
Ademola Adegbuyi
@ooade
Aug 03 2016 23:46
@djidrovo1 do u av a mail.php??
@2Irina2 No, i expected you to pass a longitude and latitude in, like this http://api.openweathermap.org/data/2.5/weather?lat=10&lon=10&APPID=02c0da530b8cf7771cee190bae9256af
Dario Idrovo
@djidrovo1
Aug 03 2016 23:48
@marhyorh no
Ademola Adegbuyi
@ooade
Aug 03 2016 23:49
@2Irina2 Yeah, u re getting it, now handle the longitude and latitude variable with javascript, wrap it with $.getJSON
@djidrovo1 then you should remove the form action
Irina
@2Irina2
Aug 03 2016 23:51
@marhyorh yeah but how do i store all the info given by this link? var weather = http://api.openweathermap.org/data/2.5/weather?lat=44.1833&lon=28.6500&APPID=433e5ac19c344d585ded5fba77c92ded" ?
greg
@wearenotgroot
Aug 03 2016 23:51
@2Irina2 remember getJSON are asynchronous so you need to call the getJSON for the openweather inside the callback function of your getJSON for ipinfo
@2Irina2 you need to replace those lat and lon numbers with variables.
@2Irina2 the lat and lon values will come from the object in the result of your getJSON (ipinfo)
Irina
@2Irina2
Aug 03 2016 23:53
@wearenotgroot oh yeah, i am aware of the fact that lat and lon should be variables.. they depend on the position of the user... but for now, i need to understand how to gather the data from the openweathermap api
@wearenotgroot for now, suppose i am the only user of this app and i am just using my lat and long just to understand how the weather api works
greg
@wearenotgroot
Aug 03 2016 23:54
@2Irina2 well build the api request first then console log the data to study it or look at the example on the api doc on expected data(same thing you did in the ipinfo)
Ademola Adegbuyi
@ooade
Aug 03 2016 23:54
@2Irina2 in your $.JSON, you can pass in a function and pass these parameters to it
@djidrovo1
<?php 
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "djidrovo1@gmail.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
if (mail($recipient, $subject, $formcontent, $mailheader)) {
    echo "Thank you!";
} else {
   echo "Error Occured";
}
?>

<form action="#" method="POST">
          <p class="form-align">Name</p> <input type="text" name="name">
          <p class="form-align">Email</p> <input type="text" name="email">
          <p class="form-align">Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
          <input class="btn" type="submit" value="Send">
</form>
Juan Moraza
@Morazajuan
Aug 03 2016 23:55
how where should i add the toggle method in my code?
 $(window).load(function(){
    $('.tempf').hide();
});
$('.tempf,.tempc').click(function(){
    $('.tempf,.tempc').toggle();
});
thats what i been trying to put but doesnt work
Ademola Adegbuyi
@ooade
Aug 03 2016 23:56
@2Irina2 you can have something like this
$.getJSON("http://ipinfo.io", function(data){
          data = { name: data.city + " " +  data.country, coords: {
            latitude: data.loc.split(',')[0], longitude: data.loc.split(',')[1]
          }}
          showPosition(data);
        })

function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&amp;lon="+longitude+"&APPID=02c0da530b8cf7771cee190bae9256af",function(data){
      var city = data.name;
      var temp = data.main.temp;
.... //and so on