These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Jun 2016
Wendy Medeiros
@wendyr21
Jun 14 2016 00:00
im working on the build a random quote generator. how would i add a json file to store the quotes? i am not sure how i would add aditional file in codepen. or if there is a free site that i can use to upload files for testing
Omar
@theomar3
Jun 14 2016 00:01
Okay. i'll cross that bridge when that time comes then. I just started the Responsive Bootstrap section today. I've been learning code for 2 months now, sticking to HTML and CSS.
Andrew Charlebois
@andrewchar
Jun 14 2016 00:01
@theomar3 all good no rush
Omar
@theomar3
Jun 14 2016 00:02
Really want my foundation to be good before moving on to other things.
Toni Shortsleeve
@KoniKodes
Jun 14 2016 00:02
@wendyr21 Do you need to store in a separate file? Can you place it in an array and call them from there?
Andrew Charlebois
@andrewchar
Jun 14 2016 00:02
yeah i didnt know at what point you were at in your coding
Wendy Medeiros
@wendyr21
Jun 14 2016 00:03
@KoniKodes thats a good idea. was hoping to try implement/practice json but the array might be best bet for this exercise. tx
CamperBot
@camperbot
Jun 14 2016 00:03
wendyr21 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @konikodes |http://www.freecodecamp.com/konikodes
Omar
@theomar3
Jun 14 2016 00:03
@andrewchar Very much in the beginning. I did a Javascript course of CodeAcademy after their HTML and CSS and got really lost towards the middle. So decided to go back to HTML and CSS.
Toni Shortsleeve
@KoniKodes
Jun 14 2016 00:03
@wendyr21 It was what I did :-)
Omar
@theomar3
Jun 14 2016 00:05
@andrewchar Okay back to studying. Thanks again Andrew.
CamperBot
@camperbot
Jun 14 2016 00:05
theomar3 sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:warning: theomar3 already gave andrewchar points
Toni Shortsleeve
@KoniKodes
Jun 14 2016 00:05
@theomar3 I think once you finish the HTML and CSS that you will find the javascript a little easier here at FCC. There's also a great group of people here to help you learn. And you have some of the js basics, so that should help.\
Andrew Charlebois
@andrewchar
Jun 14 2016 00:06
@theomar3 here is a reference sheet i use sometimes for css http://tympanus.net/codrops/css_reference/
max77p
@max77p
Jun 14 2016 00:08
coming back to this project after a while, little rusty, can someone help me http://codepen.io/max77p/pen/ezNrvY
its not complete, but all i want to do right now is output to the page the list of the keys
instead of looking like this
[ '26413',
'302672',
'11823138',
'13078006',
'13186767',
'20302096',
'41188263',
'49550482',
'49550503',
'49551399' ]
its just a long set of numbers
what am i doing wrong?
Andrew Charlebois
@andrewchar
Jun 14 2016 00:10
@max77p using dot notation and bracket notation to target the information you want to pull out of your data
instead of the whole blob of json
max77p
@max77p
Jun 14 2016 00:10
@andrewchar in var myObj?
Andrew Charlebois
@andrewchar
Jun 14 2016 00:10
yeah
myObj.key
max77p
@max77p
Jun 14 2016 00:11
@andrewchar i am not sure i understand clearly
Andrew Charlebois
@andrewchar
Jun 14 2016 00:11
i forget what the keys are to get the info you want from the api so youll have to look at the documentation
or look at what your getting back from the json
max77p
@max77p
Jun 14 2016 00:12
@andrewchar right now with the json.stringify i am getting back 10 article titles and pageid, extract, title all in a object
then i am finding the key or pageid using object.keys
when i do it here it gives me the object of page id in perfect order
but i can't seem to replicate that in my pen
Andrew Charlebois
@andrewchar
Jun 14 2016 00:24
@max77p sorry im not very sure. checked my ajax call and it has some differences
Alex
@Sevohan
Jun 14 2016 00:26
Hey everyone. I'm currently on the random quote machine project. I feel like I must be missing something since I just don't understand how to pull the quotes from outside sources. Does anyone know of any resources that will help me understand what I need to do?
James Becker
@james-becker
Jun 14 2016 00:26
Hey Alex. You need to access a quote API.
@Sevohan You can use the getJSON method to do that. http://api.jquery.com/jquery.getjson/
Most APIs provide information in a JSON format, so the getJSON method is used to parse that information. There are other methods as well, but that one seems to be popular
James Becker
@james-becker
Jun 14 2016 00:29
@Belax8 I like it! I used a Design quotes API but I'm digging this Forismatic one...
MacKenzie Whalen
@mkwhalen
Jun 14 2016 00:29
blob
Having a hard time finishing the Missing Letters Bonfire. Here is what I have
Chase
@Belax8
Jun 14 2016 00:31
@james-becker Ya. This one is super basic, but it has everything that you should need.
max77p
@max77p
Jun 14 2016 00:35
thanks @GregatGit for the help
CamperBot
@camperbot
Jun 14 2016 00:35
max77p sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 583 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jun 14 2016 00:35
@max77p :+1:
Chris Cullen
@123xylem
Jun 14 2016 00:46
This message was deleted
This message was deleted
Can I get some help on Arguments OPTIONAL Task... Why doesnt (2,3) return 5?
 function addTogether() 
{ var total=0; 
if(arguments[1]!==/[0-9]/){ return undefined; } 
else if(arguments[1]){ total=arguments[0]+arguments[1]; return total; }
 else if(!arguments[1]){ var sumTwoAnd=function addTogether(){ return sumTwoAnd()+addTogether(); }; }
 else{return undefined; } } 
addTogether(2,3);
Manny
@Alloffices
Jun 14 2016 00:52
buiphuking
@buiphuking
Jun 14 2016 01:24
hi guys, how can i test this game is tight
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
if(cells.length === 0 && $('#myModal3').data('bs.modal') ){
                      $('#showResult').html('this game is tight');
                      $('#myModal3').modal('show');

      }
this line won't work
redixhumayun
@redixhumayun
Jun 14 2016 01:29

Hey, I'm having a lot of problems with my twitch tv json api. I have no idea why my links are not showing up to be clickable.

http://codepen.io/redixhumayun/pen/XKdJZQ?editors=1111

Chris Cullen
@123xylem
Jun 14 2016 01:58

function addTogether() {
  var total=0; 
  if(typeof arguments[1]!=="number"||typeof arguments[0]!=="number" ){
     return undefined;
    //FIrst see if args are not numbers- if so return undefined
   }
  if(typeof arguments[1]==="number"){
    total=arguments[0]+arguments[1];
    return total;
//NEXT see if arg2 is a number. if so it exists so return it added to arg1
  }
  if(arguments.length<2){
 //if theres only 1 arg    
    var a=arguments[0];

    if(typeof a!=="number"){
 //and its not a number return undefined
      return undefined;}

    else{
    return function(b){
  //Use this function which looks at an arg
      if(typeof b!=="number"){
        return undefined;
  //if that arg isnt a number again undefined
      }
    else  return a+b;
 //otherwise add it to arg1
     };   }   }   }
addTogether(2)(3);
This is saying addtogether not a function. Is it something to do with closures?
Blake Harris
@bharris62
Jun 14 2016 02:04
first off @123xylem that is a bad habit to dumb your brackets like that at the end
Chris Cullen
@123xylem
Jun 14 2016 02:08
secondly?
Chris Cullen
@123xylem
Jun 14 2016 02:13
@bharris62
i did that to the brackets so it wouldnt take so much space in the room
Blake Harris
@bharris62
Jun 14 2016 02:14
is that an algo? or a normal problem
I need to look at what I did
@123xylem your issue is addtogether(3)(2); makes no since
sense
it needs to be addTogether(2,3); and it works fine
Chris Cullen
@123xylem
Jun 14 2016 02:18
@bharris62 its coolI just completed it
appreciate the intention tho !
Blake Harris
@bharris62
Jun 14 2016 02:18
did you change the function call /
?
dhuddleston
@dhuddleston
Jun 14 2016 02:22
In the early stages of working on the Twitch API project and I'm having some issues. For some reason, I have to refresh my page at least once before the correct results will load. Any idea as to why I'm getting this behavior? http://codepen.io/dhuddleston/pen/dXoZrX
Ronique Ricketts
@RoniqueRicketts
Jun 14 2016 02:33
Hello Guys,
How can I make my li tags fixed when I i hover over them http://codepen.io/Ronique/full/oLxLQV/
JD Tadlock
@jdtdesigns
Jun 14 2016 02:47
@RoniqueRicketts border-left: 5px solid transparent;
Ronique Ricketts
@RoniqueRicketts
Jun 14 2016 02:50
@jdtdesigns hi I am currently having an issue with it as it is. I wasnt it to have the border to be visible. however when I hover over the li tag it is not fixed. It jumps to the right when I hover over it
JD Tadlock
@jdtdesigns
Jun 14 2016 02:51
@RoniqueRicketts add what i gave you above to the li css
li {
  border-left: 5px solid transparent;
}
Ronique Ricketts
@RoniqueRicketts
Jun 14 2016 02:52
it is still jumping
JD Tadlock
@jdtdesigns
Jun 14 2016 02:52
@dhuddleston it's happening due to request for brunofin's stream
Greg Duncan
@GregatGit
Jun 14 2016 02:54
@RoniqueRicketts don't forget to add target blank data[3][i] + " target='_blank'>"
Ronique Ricketts
@RoniqueRicketts
Jun 14 2016 02:55
@GregatGit thanks. Oh ya to open in a new tab. thanks I forgot that
CamperBot
@camperbot
Jun 14 2016 02:55
roniquericketts sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 584 | @gregatgit |http://www.freecodecamp.com/gregatgit
JD Tadlock
@jdtdesigns
Jun 14 2016 03:00
Also, you had two declarations for li in the css
I moved it all to one
Ronique Ricketts
@RoniqueRicketts
Jun 14 2016 03:02
oh thanks
that work
@jdtdesigns thanks much
CamperBot
@camperbot
Jun 14 2016 03:02
roniquericketts sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 473 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 14 2016 03:02
;)
Nick Woelk
@UnluckyNick
Jun 14 2016 03:24
Evening Everyone. I'm using getJSON to pull data from an API URL. I want to refresh or reload the URL when I press a button.
JD Tadlock
@jdtdesigns
Jun 14 2016 03:28
@UnluckyNick Just use the getJSON in the callback of the click either as anonymous or named function
$('button').on('click', getData);

var getData = function() {
  $.getJSON('http://url.com', function(data) {
    // do something with data
  });
}
Nick Woelk
@UnluckyNick
Jun 14 2016 03:37
That is how it is setup. And the API i'm using is set to pick at random when it is refreshed. However, the API url isn't refreshing when I click the button. So when it gets the JSON it is exactly the same every time unless I refresh the whole page. So I need a way to refresh the API URL in JS or JQ
I've tried using document.location.reload(); but it constantly reloads the page. I only need it to happen when the button is clicked.
JD Tadlock
@jdtdesigns
Jun 14 2016 03:38
what api are you using?
@UnluckyNick
Going to take a guess and say it's quotesondesign
their random quote url doesn't work
you need to return like 30 and save them to array, then get a random quote from that
Nick Woelk
@UnluckyNick
Jun 14 2016 04:01
I did it! :)
$('#getNewQuote').click(function(){
document.location.reload(true);
getQuote();
});
Tulio Natale
@tuliodnw
Jun 14 2016 04:22
people,i want to make my own sound for the simon game, the sound good and work, where can i host them, i have looked and tried like 4 websites, but they dont work, tips please?
Dennis Cano
@dcINSTRUCTABLES
Jun 14 2016 05:14
is there a way to put an image in jumbotron without it being the jumbotron background image?
Isaac Pak
@pak11273
Jun 14 2016 05:55
@dcINSTRUCTABLES override the jumbotron class with a background image
Dennis Cano
@dcINSTRUCTABLES
Jun 14 2016 05:56
@dcINSTRUCTABLE
is there a way to put an image in jumbotron without it being the jumbotron background image?
Isaac Pak
@pak11273
Jun 14 2016 05:57
@dcINSTRUCTABLES i just answered your question
@dcINSTRUCTABLES
.jumbotron {
    background-image:  url(...);
}
Edmund To
@edmundtfy
Jun 14 2016 05:59
Hello~! I wanna make a sticky section header (only the section header I'm currently in will be sticky). How is that done if I have using divs to contain my content?
kirbyedy
@kirbyedy
Jun 14 2016 05:59
@edmundtfy are you referring to the navbar ?
Edmund To
@edmundtfy
Jun 14 2016 06:01
@kirbyedy nope, the navbar I can make it sticky. I mean in a page with section 1 2 3 4. When I scroll to section 1, I always have the title of section 1 on top, and then when I scroll to section 2, the section 1 title will scroll away replaced by section 2 title
Isaac Pak
@pak11273
Jun 14 2016 06:04
@edmundtfy is there a sample page on the internet that does what you describe?
Harshit Anand
@nerocool996
Jun 14 2016 06:05
Hey, I need some help, I am at advance algorithm scripting
Isaac Pak
@pak11273
Jun 14 2016 06:06
@nerocool996 i'm not that far yet, but what do you need help with?
Edmund To
@edmundtfy
Jun 14 2016 06:06
@pak11273 @kirbyedy https://css-tricks.com/persistent-headers/ this is kind of what I am talking about but it uses tables, and I'm using divs....
Harshit Anand
@nerocool996
Jun 14 2016 06:07
@pak11273 In need help in the no repeat please challenge. https://www.freecodecamp.com/challenges/no-repeats-please. I mostly need help in the math part of that problem
Isaac Pak
@pak11273
Jun 14 2016 06:08
@edmundtfy lol, i would use what they prescribe. Looks like it's exactly what you're looking for
Greg Duncan
@GregatGit
Jun 14 2016 06:09
@edmundtfy it looks like you've solved your own problem - you just have to tinker with their code till it works for you
Edmund To
@edmundtfy
Jun 14 2016 06:10
@pak11273 @GregatGit so that works for divs too? sorry I just started coding...
Harshit Anand
@nerocool996
Jun 14 2016 06:11
@pak11273 I know what permutation is. I have problem in calculating permutation such that no same letter are consecutive to each other .
Edmund To
@edmundtfy
Jun 14 2016 06:11
@kirbyedy I thought that's just for the topmost menu/navbar. It works for contents outside of the menu bar too?
Isaac Pak
@pak11273
Jun 14 2016 06:12
@nerocool996 i haven't gotten that far yet, your guess would be better than mine.
Greg Duncan
@GregatGit
Jun 14 2016 06:13
@edmundtfy have a look at this http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h and then try to combine it with your link -
Isaac Pak
@pak11273
Jun 14 2016 06:15
@edmundtfy it works with classes. he actually shows an example using <article>
<article class="persist-area">
   <h1 class="persist-header">
   <!-- stuff and stuff -->
</article>
Edmund To
@edmundtfy
Jun 14 2016 06:16
@GregatGit thanks a lot! Will try!
CamperBot
@camperbot
Jun 14 2016 06:16
edmundtfy sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
Greg Duncan
@GregatGit
Jun 14 2016 06:16
@edmundtfy make sure you download their files and try replacing your content and divs etc -
CamperBot
@camperbot
Jun 14 2016 06:17
:cookie: 585 | @gregatgit |http://www.freecodecamp.com/gregatgit
Edmund To
@edmundtfy
Jun 14 2016 06:17
@pak11273 thanks for the reminder!
CamperBot
@camperbot
Jun 14 2016 06:17
edmundtfy sends brownie points to @pak11273 :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @pak11273 |http://www.freecodecamp.com/pak11273
Dennis Cano
@dcINSTRUCTABLES
Jun 14 2016 06:18
@pak11273 thanks
CamperBot
@camperbot
Jun 14 2016 06:18
dcinstructables sends brownie points to @pak11273 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @pak11273 |http://www.freecodecamp.com/pak11273
Isaac Pak
@pak11273
Jun 14 2016 06:21
@dcINSTRUCTABLES np
Elbert Cortez
@trip16661
Jun 14 2016 06:44
hey guys check this web app that i made reciently, it has a problem with the geocoords (https issue :P) and the weather logo is static (because i dont have anywhere else to store the imgs in codepen)
you can add cities that you are interested on and if you decide to close the tab it will anyway save those cities so you can check it later
kirbyedy
@kirbyedy
Jun 14 2016 06:55
Screen Shot 2016-06-14 at 09.54.32.png
I can add only 1 city
every next add does not work
also no pictures
Screen Shot 2016-06-14 at 09.56.32.png
chronic
@chronic35
Jun 14 2016 06:57
how do i create an entry for p in a class?
<style>
.red-text {
color: red;font-size: 16px;
}
</style>
i want to use it in <p>
without writting class
kirbyedy
@kirbyedy
Jun 14 2016 06:57
why?
chronic
@chronic35
Jun 14 2016 06:58
it's a task in freecodecamp
i'm new to html
kirbyedy
@kirbyedy
Jun 14 2016 06:59
what is the exact question in the task
chronic
@chronic35
Jun 14 2016 06:59
Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).
Also, please do not add a class attribute to your new p element.
kirbyedy
@kirbyedy
Jun 14 2016 07:00
style="font-size: 16px" like this ?
chronic
@chronic35
Jun 14 2016 07:01
yea, but they say i should not include class in p
how can i reflect the changes if i can't include class
kirbyedy
@kirbyedy
Jun 14 2016 07:01
I just wrote it
chronic
@chronic35
Jun 14 2016 07:03
thank you so simple, i thought i should write it in style and it should implement it whenever i use <p>
:P
kirbyedy
@kirbyedy
Jun 14 2016 07:04
no, you use class for that
this is inline style declarations
chronic
@chronic35
Jun 14 2016 07:06
okay, i get it i define all the attributes in a class and then use it job is simpler
Don Price
@KingHippo
Jun 14 2016 07:07
anyone here use the twitch api yet?
kirbyedy
@kirbyedy
Jun 14 2016 07:07
@KingHippo post your problem and someone will answer
eventually... :)
Don Price
@KingHippo
Jun 14 2016 07:09
I'm not getting any JSON data returned from links where accounts have been deleted
one of the links I am using is
kirbyedy
@kirbyedy
Jun 14 2016 07:16
and what data do you need ?
Don Price
@KingHippo
Jun 14 2016 07:17
the status
kirbyedy
@kirbyedy
Jun 14 2016 07:18
and on the online user you get the status ?
Don Price
@KingHippo
Jun 14 2016 07:20
Yeah I get info back from chnnels that are still active
Here is the pen
kirbyedy
@kirbyedy
Jun 14 2016 07:23
hmmm dont see the status displayed...
just a bunch of errors in your console
undefined...
Screen Shot 2016-06-14 at 10.23.33.png
Don Price
@KingHippo
Jun 14 2016 07:24
hmmm let me give that a look
Raj
@Raj00786
Jun 14 2016 07:25
PLease help me
when i change $('ul') to $('li'),my click event not work
$(function(){
var list;
$('ul').on('click ',function(){
list ="item:"+this.textContent;
console.log(list);
});
});
kirbyedy
@kirbyedy
Jun 14 2016 07:25
@KingHippo you want this right ?
Screen Shot 2016-06-14 at 10.24.39.png
@KingHippo wooops I found the error
Don Price
@KingHippo
Jun 14 2016 07:27
I'm trying to get the data from the deleted channel brunofin. The one with the 422 error
kirbyedy
@kirbyedy
Jun 14 2016 07:27
else if (data20.stream === undefined) {
you spelled undefinded
Don Price
@KingHippo
Jun 14 2016 07:29
@kirbyedy aaaahh! Thank you haha. I'll give that a try
CamperBot
@camperbot
Jun 14 2016 07:29
kinghippo sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1111 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Don Price
@KingHippo
Jun 14 2016 07:32
That did it! Thanks @kirbyedy !
CamperBot
@camperbot
Jun 14 2016 07:32
kinghippo sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: kinghippo already gave kirbyedy points
Don Price
@KingHippo
Jun 14 2016 07:32
damn typos
kirbyedy
@kirbyedy
Jun 14 2016 07:32
:laughing:
Raj
@Raj00786
Jun 14 2016 07:36
$(function(){
var list,status,event;
$('ul').on('click mouseover',':not("#four")',function(e){
list ="item:"+this.textContent+'<br/>';
event ="event:"+e.type;
$('h2').html(list+event);
});
});
'''$(function(){
var list,status,event;
$('ul').on('click mouseover',':not("#four")',function(e){
list ="item:"+this.textContent+'<br/>';
event ="event:"+e.type;
$('h2').html(list+event);
});
});
'''
CamperBot
@camperbot
Jun 14 2016 07:36
:bulb: to format code use backticks! ``` more info
Raj
@Raj00786
Jun 14 2016 07:37
'''
$(function(){
var list,status,event;
$('ul').on('click mouseover',':not("#four")',function(e){
list ="item:"+this.textContent+'<br/>';
event ="event:"+e.type;
$('h2').html(list+event);
});
});
'''
CamperBot
@camperbot
Jun 14 2016 07:37
:bulb: to format code use backticks! ``` more info
Raj
@Raj00786
Jun 14 2016 07:38
$(function(){
   var list,status,event;
   $('ul').on('click mouseover',':not("#four")',function(e){
      list ="item:"+this.textContent+'<br/>';
      event ="event:"+e.type;
       $('h2').html(list+event);
   });
});
MD91
@MD91
Jun 14 2016 07:45
Can anyone tell me how I can implement a button to toggle between Celsius and Fahrenheit in this code? http://codepen.io/MD91/pen/mEPjwo?editors=1010
I'm quite stuck on it and it's the last bit of functionality I need
Greg Duncan
@GregatGit
Jun 14 2016 07:58
@MD91 what part of it are you stuck on?
Graveworm
@legyolo
Jun 14 2016 08:00
hello
Why cant i see the logo element in my header?
buiphuking
@buiphuking
Jun 14 2016 08:00
someone plz help me run this game is tight, tic tac toe game
cuz i surrender
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
MD91
@MD91
Jun 14 2016 08:08
@GregatGit I can get all of the weather details I need, but I can't seem to find a way to toggle between Celsius and Fahrenheit. Do you have any ideas? Whenever I try and use .toggle, it doesn't work
pzoladkiewicz
@pzoladkiewicz
Jun 14 2016 08:21
@MD91 What I did was adding class ".f" for fahrenheit. And toggle it to change C/F.
@MD91 kinda virtual class. It doesnt change anything it just tells what should be displayed
kirbyedy
@kirbyedy
Jun 14 2016 08:30
I think I did the same
hmm actually I have both, one with hide/show, and the other one with toggle
$("#toggle").click(function() {
  $(".fahrenheit").toggle();
  $(".celsius").toggle();
});
pzoladkiewicz
@pzoladkiewicz
Jun 14 2016 08:32
    $("#temp").click(function() {
      $(this).toggleClass('f');
      if ($(this).hasClass('f')) {
        document.getElementById("temp").innerHTML = tempF + '\xB0' + " F";
      } else {
        document.getElementById("temp").innerHTML = tempC + '\xB0' + " C";
      }
    });
    var tempC = jsonp.current_observation.temp_c;
    var tempF = jsonp.current_observation.temp_f;
Elbert Cortez
@trip16661
Jun 14 2016 08:42
Hey guys I don't know why but my dinamically added elements inside of my table creates a padding inside of the cell :(
the cell gets deformed because of that
Carlos Coelho
@Carlosmcoelho
Jun 14 2016 08:49

Hi all, I need your help. I'm doing the random quote project but I can't configure the twitter button well. When I press to create a twitt its open all the quotes e not just the last one. where my code:

              $('#twitter').click(function(){
              var tweetUrl = 'https://twitter.com/intent/tweet?text=' + response.quoteText + ' ' + response.quoteAuthor;
              window.open(tweetUrl, '_blank', 'width = 500, height = 400')  })

this is my project:
QuoteProject
thanks

kirbyedy
@kirbyedy
Jun 14 2016 08:57
@Carlosmcoelho maybe to take it out from the ajax call ?
Carlos Coelho
@Carlosmcoelho
Jun 14 2016 09:05
@kirbyedy if I take out the twitter code from the ajax nothing happens.
kirbyedy
@kirbyedy
Jun 14 2016 09:05
yes because you are filling the quote from the ajax call
change that to fill it simply from your already populated html
response.quoteText change this to target your quote class
Carlos Coelho
@Carlosmcoelho
Jun 14 2016 09:08
ok, I understand your idea I will try.
Carlos Coelho
@Carlosmcoelho
Jun 14 2016 09:15
@kirbyedy it's working thanks a lot :smile:
CamperBot
@camperbot
Jun 14 2016 09:15
carlosmcoelho sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1113 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Edmund To
@edmundtfy
Jun 14 2016 09:19
@pak11273 wow that example from JS Bin is amazing! thanks!
CamperBot
@camperbot
Jun 14 2016 09:19
edmundtfy sends brownie points to @pak11273 :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @pak11273 |http://www.freecodecamp.com/pak11273
Mariya
@mariyadiminsky
Jun 14 2016 09:26
This message was deleted
Nikhil Goyal
@ngoyal100894
Jun 14 2016 10:17

Hi I am working on weather project and I am trying to get weather forcast of next 7 days ..for this I wrote this code

weather = 'http://api.openweathermap.org/data/2.5/forecast/daily?lat='+ lat + '&lon='+lon+'&units=metric&cnt=7&APPID=122d951bb2c0a2b88a6979b918364ff1';

        $.getJSON(weather,function(forcast){

            var today = new Date();
                var requiredTime = new Date(today.getTime()+0* 24 * 60 * 60 * 1000);
                var requiredDate = requiredTime.getDate();
                var requiredMonth = requiredTime.getMonth()+1;
                var requiredYear  = requiredTime.getFullYear();
                var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

                 var Data = finalDate + ':'+ forcast.list[0].temp.day ;
                 $("#0").html(Data);


                var requiredTime = new Date(today.getTime()+1* 24 * 60 * 60 * 1000);
                var requiredDate = requiredTime.getDate();
                var requiredMonth = requiredTime.getMonth()+1;
                var requiredYear  = requiredTime.getFullYear();
                var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

                 var Data = finalDate + ':'+ forcast.list[1].temp.day ;
                 $("#1").html(Data);

and so on for the next 5 days also . I want to do it with loop or something so that I can reduce the length of code ..Any suggestions?

I can write something like for(var i=0; i<7;i++){
I can write something like for(var i=0; i<7;i++){same thing here with 0 replacing i}
but here the problem I am facing is how to fill html tags with this
Also we can try creating some Javascript object.. ?
Dave Kalu
@ifeanyidavid
Jun 14 2016 10:23
hi, how do I upload images to codepen? I am trying to build my tribute page. thanks
CamperBot
@camperbot
Jun 14 2016 10:34
gregatgit sends brownie points to @mashadim :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @mashadim |http://www.freecodecamp.com/mashadim
Lam Vu
@lamvv
Jun 14 2016 10:38
hi every one, button search not work, help me on my pen http://codepen.io/lamvv/pen/VjaGBe
kirbyedy
@kirbyedy
Jun 14 2016 10:46
@lamvv your console: Uncaught TypeError: Cannot read property 'shouldStopExecution' of undefined
Mikail Bayram
@mikail1998
Jun 14 2016 10:49
http://codepen.io/mikail1998/pen/qNOEeX how will i allign vertically "offline"
Any kind of help would be appreciated
Greg Duncan
@GregatGit
Jun 14 2016 10:50
@lamvv this is your problem
var i, content = '';
      for (i in data.query.pages) content += '<li><a href="http://en.wikipedia.org/?curid=' + i + '" target="_blank"><h2>' + data.query.pages[i]['title'] + '</h2><p>' + data.query.pages[i]['extract'] + '</p></a></li>';
Greg Duncan
@GregatGit
Jun 14 2016 10:57
@lamvv data.query.pages[i] this is wrong - 'pages' is not an array - you can't access the different pages this way - that is the same as writing pages[0] - use var keys = Object.keys(data.query.pages) and that will help you access the pages
@mikail1998 try float: right; in the css under #m
Mikail Bayram
@mikail1998
Jun 14 2016 11:04
@GregatGit Yeah thats right and than i margined from right. Oh finally !! Thank you
CamperBot
@camperbot
Jun 14 2016 11:04
mikail1998 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jun 14 2016 11:05
@mikail1998 also add padding-right: 20px;
Okonkwo Afam
@AfamO
Jun 14 2016 11:06
Hi Everyone
Greg Duncan
@GregatGit
Jun 14 2016 11:06
hi @AfamO
Okonkwo Afam
@AfamO
Jun 14 2016 11:06
Pls could you help me look at this: https://codepen.io/Afam/full/xOVrEY
Make suggestions for improvement
I believe there are still alot to improve on it.
Greg Duncan
@GregatGit
Jun 14 2016 11:10
@AfamO It is a good start but needs work - here is an excelent template to use http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Okonkwo Afam
@AfamO
Jun 14 2016 11:11
Thanks alot @GregatGit
CamperBot
@camperbot
Jun 14 2016 11:11
afamo sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 587 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jun 14 2016 11:12
@AfamO :+1:
lilyliterate
@lilyliterate
Jun 14 2016 11:13
Hey all! I have a portfolio site already built outside Codepen-io, could I simply utilize the one I have?
Karolina Kluz
@karolinaKluz
Jun 14 2016 11:16
@lilyliterate I guess, if your portfolio checks the user stories
lilyliterate
@lilyliterate
Jun 14 2016 11:17
Hm. I think it misses Story 1 in one manner of speaking. I use Modals to provide broad-strokes of each of my fields of experience, with the 'full size' portfolio on a second page.
Edmund To
@edmundtfy
Jun 14 2016 11:32
Hello, I've been reading different methods for vertically-aligning things. Since the vertical-align property doesn't work so well, I want to use
'''
.flex-container {
display: -webkit-flex;
display: flex;
}
'''
Is it okay? Is there a catch? Incompatibility? It's so hard to vertical align responsive stuff!
Karolina Kluz
@karolinaKluz
Jun 14 2016 11:34
@edmundtfy in case of flexbox you need to remember that the things you want to center need a container, but the container itself isn't centered
RompePC
@RompePC
Jun 14 2016 11:36
Hey there, any feedback about my game menu would be grateful! (Altough is just the mobile version) http://codepen.io/RompePC/full/YWyLOx/
Jamil Akhtar
@frontender007
Jun 14 2016 11:37
hello everyone
Mikail Bayram
@mikail1998
Jun 14 2016 11:37
http://codepen.io/mikail1998/full/qNOEeX/ What do you think is this ok?
Jamil Akhtar
@frontender007
Jun 14 2016 11:38
I am build a tribute page
having difficulty to figure out how to center align the list items on the page
Karolina Kluz
@karolinaKluz
Jun 14 2016 11:41
@frontender007 are you using bootstrap?
Jamil Akhtar
@frontender007
Jun 14 2016 11:52
Yes im using bootstrap
Karolina Kluz
@karolinaKluz
Jun 14 2016 11:54
@frontender007 bootstrap has this class="text-center"
Ankit Panwar
@coderNoob
Jun 14 2016 12:00
@mikail1998 You should optimize it for mobiles too.
Mikail Bayram
@mikail1998
Jun 14 2016 12:01
how? I was just thinking about that
@coderNoob
Ankit Panwar
@coderNoob
Jun 14 2016 12:01
@mikail1998 You could go the classic way by using @media queries or you could save a ton lot of time by using Bootstrap.
You Bootstrap's grid system.
Mikail Bayram
@mikail1998
Jun 14 2016 12:03
so I have to redesign my whole page :worried:
@coderNoob
lilyliterate
@lilyliterate
Jun 14 2016 12:03
Rebuilding in bootstrap won't take long at all, don't worry too much! c:
Edmund To
@edmundtfy
Jun 14 2016 12:03
@karolinaKluz the container itself can't by centered by any methods or just the flex box methods?
Ankit Panwar
@coderNoob
Jun 14 2016 12:04
@mikail1998 You would only need to do the HTML part.
@edmundtfy You mean Bootstrap's container?
Edmund To
@edmundtfy
Jun 14 2016 12:09
I'm referring back to the question u answered, u said the container, containing centered text using flexbox, cannot itself be centered. My question is cannot be centered by all methods or just cant have hierarchy of flexbox center?
Nikhil Goyal
@ngoyal100894
Jun 14 2016 12:13

Hi I am working on weather project and I am trying to get weather forcast of next 7 days ..for this I wrote this code

$.getJSON(weather2,function(forcast){

      var today = new Date();

        var requiredTime = new Date(today.getTime()+0* 24 * 60 * 60 * 1000);
        var requiredDate = requiredTime.getDate();
        var requiredMonth = requiredTime.getMonth()+1;
        var requiredYear  = requiredTime.getFullYear();
        var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

        var Data = finalDate + ' : '+ forcast.list[0].temp.day ;
          $("#0").html(Data);


          var requiredTime = new Date(today.getTime()+1* 24 * 60 * 60 * 1000);
        var requiredDate = requiredTime.getDate();
        var requiredMonth = requiredTime.getMonth()+1;
        var requiredYear  = requiredTime.getFullYear();
        var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

        var Data = finalDate + ' : '+ forcast.list[1].temp.day ;
          $("#1").html(Data);

@ngoyal100894
Hi I am working on weather project and I am trying to get weather forcast of next 7 days ..for this I wrote this code

weather = 'http://api.openweathermap.org/data/2.5/forecast/daily?lat='+ lat + '&lon='+lon+'&units=metric&cnt=7&APPID=122d951bb2c0a2b88a6979b918364ff1';

        $.getJSON(weather,function(forcast){

            var today = new Date();
                var requiredTime = new Date(today.getTime()+0* 24 * 60 * 60 * 1000);
                var requiredDate = requiredTime.getDate();
                var requiredMonth = requiredTime.getMonth()+1;
                var requiredYear  = requiredTime.getFullYear();
                var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

                 var Data = finalDate + ':'+ forcast.list[0].temp.day ;
                 $("#0").html(Data);


                var requiredTime = new Date(today.getTime()+1* 24 * 60 * 60 * 1000);
                var requiredDate = requiredTime.getDate();
                var requiredMonth = requiredTime.getMonth()+1;
                var requiredYear  = requiredTime.getFullYear();
                var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

                 var Data = finalDate + ':'+ forcast.list[1].temp.day ;
                 $("#1").html(Data);

and so on for the next 5 days also . I want to do it with loop or something so that I can reduce the length of code ..Any suggestions?
I can write something like for(var i=0; i<7;i++){
I can write something like for(var i=0; i<7;i++){same thing here with 0 replacing i}
but here the problem I am facing is how to fill html tags with this
Also we can try creating some Javascript object.. ?

Mikail Bayram
@mikail1998
Jun 14 2016 12:13
@coderNoob i just cant understand how will i implement the boostrap
I mean the gridding system
Ankit Panwar
@coderNoob
Jun 14 2016 12:15
@mikail1998 Start off by using the container class on the first div and then start dividing the page using the row and col-* classes. Bootstrap's awsome grid system.
Karolina Kluz
@karolinaKluz
Jun 14 2016 12:15
@edmundtfy if you want to center the container, you need to put it in another container
Edmund To
@edmundtfy
Jun 14 2016 12:17
@karolinaKluz Oh I see what you mean thanks!
CamperBot
@camperbot
Jun 14 2016 12:17
edmundtfy sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 232 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
Mikail Bayram
@mikail1998
Jun 14 2016 12:19
@coderNoob thank you
CamperBot
@camperbot
Jun 14 2016 12:19
mikail1998 sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @codernoob |http://www.freecodecamp.com/codernoob
Jamil Akhtar
@frontender007
Jun 14 2016 12:19
You mean div inside a div and then what?
Karolina Kluz
@karolinaKluz
Jun 14 2016 12:22
actually guys don't mix up these two things. In bootstrap there is class="container" or container-fluid. You CANNOT put bootstrap container into another container . In flexbox you need to do this to center a flex container.
Jamil Akhtar
@frontender007
Jun 14 2016 12:23
Still not sure what you mean
I nested ul in a div with a class text-center
Karolina Kluz
@karolinaKluz
Jun 14 2016 12:24
@frontender007 is your ul centered?
Jamil Akhtar
@frontender007
Jun 14 2016 12:25
I tried with and without text-center class
But no luck
Ankit Panwar
@coderNoob
Jun 14 2016 12:27
@frontender007 The text-center class will center the text relative to the entire div.
What exactly are you trying to center? Can we see some code?
Jamil Akhtar
@frontender007
Jun 14 2016 12:28
Building tribute page
Doing similar thing as in the example
Ankit Panwar
@coderNoob
Jun 14 2016 12:30
@frontender007 They didn't center it manually. They have used different col-* size classes. Only the image and the text above and below the image are centered.
Jamil Akhtar
@frontender007
Jun 14 2016 12:31
why in my case the ul and li are not in the center with bullets next to them
Karolina Kluz
@karolinaKluz
Jun 14 2016 12:31
@frontender007 I think they've used offset classess
Ankit Panwar
@coderNoob
Jun 14 2016 12:32
This message was deleted
@frontender007 Can we see your code?
also h3 after the image is doing something weird don't why
Doomflake
@Doomflake
Jun 14 2016 12:34
Any idea what would cause a submit button to point to the full page view of a pen?
Ankit Panwar
@coderNoob
Jun 14 2016 12:34
@frontender007 You have not used the row classes to divide the page properly. So it is as if you are writing something without the break in the line.
Jamil Akhtar
@frontender007
Jun 14 2016 12:35
so for every element do i have to use row class?
Doomflake
@Doomflake
Jun 14 2016 12:36
@frontender007 Only if you want them on separate lines
Ankit Panwar
@coderNoob
Jun 14 2016 12:37
@frontender007 I think you should go through the grid system just once to understand how it really works and how useful and great it is. Bootstrap's awesome grid.
Tbuglc
@tbuglc
Jun 14 2016 12:38
about @safari93
CamperBot
@camperbot
Jun 14 2016 12:38
:cookie: 6 | @safari93 |http://www.freecodecamp.com/safari93
Doomflake
@Doomflake
Jun 14 2016 12:38
Once you learn how to manipulate the grid system, it makes it a LOT easier to style a page how you want
Feels like I've been working on this portfolio page forever. Mostly complete, just debugging at this point. Nothing but little stuff left....
Jamil Akhtar
@frontender007
Jun 14 2016 12:42
thanks @ngoyal100894 thanks @Doomflake
CamperBot
@camperbot
Jun 14 2016 12:42
frontender007 sends brownie points to @ngoyal100894 and @doomflake :sparkles: :thumbsup: :sparkles:
:cookie: 195 | @ngoyal100894 |http://www.freecodecamp.com/ngoyal100894
:cookie: 133 | @doomflake |http://www.freecodecamp.com/doomflake
Doomflake
@Doomflake
Jun 14 2016 12:44
Can you use Ajax plugin on codepen?
Jamil Akhtar
@frontender007
Jun 14 2016 12:44
achieved the bullet list center goal
Doomflake
@Doomflake
Jun 14 2016 12:44
@frontender007 Good job! That one's a frustrating one!
Jamil Akhtar
@frontender007
Jun 14 2016 12:44
now don't know whats happening with h3 heading spanning over to two lines
Ankit Panwar
@coderNoob
Jun 14 2016 12:46
@frontender007 Again you have not divided your page properly. So the h3 is in continuation of the p element.
Jamil Akhtar
@frontender007
Jun 14 2016 12:47
got it
thanks @coderNoob
CamperBot
@camperbot
Jun 14 2016 12:47
frontender007 sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @codernoob |http://www.freecodecamp.com/codernoob
Jamil Akhtar
@frontender007
Jun 14 2016 12:50
I noticed the caption paragraph in the example page has background-color of white, don't know which class to apply to achieve that
Ankit Panwar
@coderNoob
Jun 14 2016 12:52
@frontender007 They have used the Bootstrap's thumbnail class. Using this class gives you an image and a white background along with some caption space.
crisayala16
@crisayala16
Jun 14 2016 12:53
hey guys i was just wondering, for the first code pen project, does it have to be exactly like the example given?
lilyliterate
@lilyliterate
Jun 14 2016 12:54
@frontender007 @coderNoob is correct, but you can also futz around with other classes and margins if you want to get a bit of experimentation in.
Ankit Panwar
@coderNoob
Jun 14 2016 12:54
@crisayala16 Not at all.
crisayala16
@crisayala16
Jun 14 2016 12:54
ok cool, thanks @coderNoob
CamperBot
@camperbot
Jun 14 2016 12:54
crisayala16 sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @codernoob |http://www.freecodecamp.com/codernoob
Doomflake
@Doomflake
Jun 14 2016 12:55
@crisayala16 They just want you to do similar functionality
Jamil Akhtar
@frontender007
Jun 14 2016 13:12
thanks @coderNoob
CamperBot
@camperbot
Jun 14 2016 13:12
frontender007 sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:warning: frontender007 already gave codernoob points
Nikhil Goyal
@ngoyal100894
Jun 14 2016 13:19

Hi I am working on weather project and I am trying to get weather forcast of next 7 days ..for this I wrote this code
weather = 'http://api.openweathermap.org/data/2.5/forecast/daily?lat='+ lat + '&lon='+lon+'&units=metric&cnt=7&APPID=122d951bb2c0a2b88a6979b918364ff1';

    $.getJSON(weather,function(forcast){

        var today = new Date();
            var requiredTime = new Date(today.getTime()+0* 24 * 60 * 60 * 1000);
            var requiredDate = requiredTime.getDate();
            var requiredMonth = requiredTime.getMonth()+1;
            var requiredYear  = requiredTime.getFullYear();
            var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

             var Data = finalDate + ':'+ forcast.list[0].temp.day ;
             $("#0").html(Data);


            var requiredTime = new Date(today.getTime()+1* 24 * 60 * 60 * 1000);
            var requiredDate = requiredTime.getDate();
            var requiredMonth = requiredTime.getMonth()+1;
            var requiredYear  = requiredTime.getFullYear();
            var finalDate = requiredDate + "/" +requiredMonth + "/" + requiredYear;

             var Data = finalDate + ':'+ forcast.list[1].temp.day ;
             $("#1").html(Data);

and so on for the next 5 days also . I want to do it with loop or something so that I can reduce the length of code ..Any suggestions?
I can write something like for(var i=0; i<7;i++){
I can write something like for(var i=0; i<7;i++){same thing here with 0 replacing i}
but here the problem I am facing is how to fill html tags with this
Also we can try creating some Javascript object.. ?

@sushil ?
Shusil Banjade
@shusil123
Jun 14 2016 13:21
@ngoyal100894 , I am having a look. Wait a minute
Jamil Akhtar
@frontender007
Jun 14 2016 13:25
how the margin-top added to developer's name on this example very bottom of the page
Shusil Banjade
@shusil123
Jun 14 2016 13:29
@ngoyal100894 , The documentation in the website of openweather api says that, api responds with the forecast of 1-16 days in a single call. You can fill the html tags with using object with temp, main, clouds and repeating that object a no. of times
Shusil Banjade
@shusil123
Jun 14 2016 13:36
@frontender007 , you don't have to give margin top to the very bottom element. Either try margin-bottom for the container above it, or try giving padding top to the element...
Jamil Akhtar
@frontender007
Jun 14 2016 13:38
But example project's tutorial doesn't have any styles except for body and the rest is done with bootstrap
lilyliterate
@lilyliterate
Jun 14 2016 13:39
Have you considered using <br>?
It's crude, but it works if you're unsure.
Karolina Kluz
@karolinaKluz
Jun 14 2016 13:39
@frontender007 do you see the line there? It's <hr>
as horizontal line
it comes with margins
lilyliterate
@lilyliterate
Jun 14 2016 13:40
^
Jamil Akhtar
@frontender007
Jun 14 2016 13:40
@karolinaKluz
Thanks @karolinaKluz
CamperBot
@camperbot
Jun 14 2016 13:41
frontender007 sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 233 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
Karolina Kluz
@karolinaKluz
Jun 14 2016 13:42
there is a nice codepen with differently styled hrs http://codepen.io/ibrahimjabbari/pen/ozinB
Jamil Akhtar
@frontender007
Jun 14 2016 13:44
Jinkoye @karolinaKluz
Clyde
@hea-hea
Jun 14 2016 14:21
hello, a little problem with weather app: can anyone look at my code and see why the latitude and longitude are passed to the url as 'undefined'? when I console.log them they look OK... http://codepen.io/hea-hea/pen/LZVZZw
anacou
@anacou
Jun 14 2016 14:26
Hey, how can I make my tribute page look better? You can see what it looks like now here: https://codepen.io/anacou/pen/EyKgVG
lilyliterate
@lilyliterate
Jun 14 2016 14:27
@anacou Consider utilizing Bootstrap's grid system to make the page look cleaner. With all the text on one side like that, it has a very 'crude' experience.
anacou
@anacou
Jun 14 2016 14:27
Can you remind me how to use Bootstrap's grid system to make the page look cleaner?
Clyde
@hea-hea
Jun 14 2016 14:28
you can switch on bootstrap in codepen
@anacou in the CSS section choose settings
Sorin Ruse
@sorinr
Jun 14 2016 14:28
@hea-hea take a look here for geolocation: https://codepen.io/sorinr/pen/xOGdYz
Clyde
@hea-hea
Jun 14 2016 14:29
@anacou and in 'quick add' you can choose bootstrap
anacou
@anacou
Jun 14 2016 14:29
I'm in settings
ok I added Bootstrap
now what?
lilyliterate
@lilyliterate
Jun 14 2016 14:29
Once you've got it running, I suggest you revise the bootstrap portion of FreeCodeCamp's course. An understanding of grid divs - rows and columns - is gonna serve you well for your entire career, so drill it into your skull..
anacou
@anacou
Jun 14 2016 14:30
thank you @lilyliterate
CamperBot
@camperbot
Jun 14 2016 14:30
anacou sends brownie points to @lilyliterate :sparkles: :thumbsup: :sparkles:
:cookie: 193 | @lilyliterate |http://www.freecodecamp.com/lilyliterate
anacou
@anacou
Jun 14 2016 14:30
and thank you @hea-hea
CamperBot
@camperbot
Jun 14 2016 14:30
anacou sends brownie points to @hea-hea :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @hea-hea |http://www.freecodecamp.com/hea-hea
lilyliterate
@lilyliterate
Jun 14 2016 14:31
What you'll end up doing is breaking up each part of your page into divs. This helps with organization, and with the grid classes that Bootstrap uses, allows for very quickly building up a strong design.
Daniel
@clevadani
Jun 14 2016 14:33
Guys, rate my Simon Game http://codepen.io/clevadani/full/ONKWOd/
Matthew Boland
@mattboland
Jun 14 2016 14:35
@clevadani looks nice, are you aware the sounds do not play when copying the computer's sequence?
Sorin Ruse
@sorinr
Jun 14 2016 14:35
@lilyliterate I somehow disagree with you. bootstrap its not the only css framework. maybe the most popular but the idea of a grid is the same in all frameworks. the name of classes are different.
Matthew Boland
@mattboland
Jun 14 2016 14:36
also, your score board does not clear when you click restart
lilyliterate
@lilyliterate
Jun 14 2016 14:37
@sorinr The names are different, but the concept is the important part. A strong understanding of Bootstrap translates to an understanding of the underlying mechanism, and therefore you'll be able to pick up other frameworks quickly. Same with any other programming language - the language itself is less important than the principles of programming and algorithm design.
Daniel
@clevadani
Jun 14 2016 14:38
@mattboland didn't know that
I'll check it out
Karolina Kluz
@karolinaKluz
Jun 14 2016 14:38
@clevadani the sounds have really scared me. I haven't expected that.
Sorin Ruse
@sorinr
Jun 14 2016 14:40
@lilyliterate why do you think a "strong understanding of Bootstrap" is very important and not a very good understanding on how you can manipulate the DOM apperance with pure css? maybe its more easy u can say
lilyliterate
@lilyliterate
Jun 14 2016 14:41
Reread my comment - I said a strong understanding of div organization, not Bootstrap itself.
Sorin Ruse
@sorinr
Jun 14 2016 14:42
@lilyliterate you said "A strong understanding of Bootstrap translates to an understanding of the underlying mechanism" and its not true
Dixie Korley
@dk574
Jun 14 2016 14:42
Hi. I have an issue with two overlapping divs are the bottom of the personal portfolio site: http://codepen.io/dk574/pen/beErbR (Don't mind the colors lol. I'm still working on it.) Any help is appreciated.
lilyliterate
@lilyliterate
Jun 14 2016 14:44
@dk574 You've got a Jumbotron(which defaults to gray), then the body ends. Add a .jumbotron {background-color:#FFFFFF;} to your css to remove it, or do the same thing with body but set the color to #EEEEEE.
Karolina Kluz
@karolinaKluz
Jun 14 2016 14:45
@dk574 what do you want to do there?
Dixie Korley
@dk574
Jun 14 2016 14:46
Okay. The jumbotron was supposed to be the bacground of all the dvis so that I can see where they attach. The bottom two are attached but not stick to the contact info part.
And when I type more text in the first section after the contact part, it goes on into the last section with 'all rights reserved'
@karolinaKluz @dk574
Okay. The jumbotron was supposed to be the bacground of all the dvis so that I can see where they attach. The bottom two are attached but not stick to the contact info part.
And when I type more text in the first section after the contact part, it goes on into the last section with 'all rights reserved'
anacou
@anacou
Jun 14 2016 14:47
how would you center the image on this page: https://codepen.io/anacou/full/EyKgVG
Dixie Korley
@dk574
Jun 14 2016 14:48
Thank you @lilyliterate
CamperBot
@camperbot
Jun 14 2016 14:48
dk574 sends brownie points to @lilyliterate :sparkles: :thumbsup: :sparkles:
:cookie: 196 | @lilyliterate |http://www.freecodecamp.com/lilyliterate
lilyliterate
@lilyliterate
Jun 14 2016 14:48
@sorinr When you learn a system, you pick up the underlying concepts. To draw from 3d modeling, if I learn to use Blender, I learn the principles of 3d by association, which allows me to pick up 3ds max much quicker. If I learn Python, I learn the principles of programming, allowing me to pick up Ruby/C++ much quicker. If I learn how Bootstrap works, and how it organizes divs in a workflow, I can pick up other frameworks much quicker. These skills transfer.
anacou
@anacou
Jun 14 2016 14:49
found the answer
Karolina Kluz
@karolinaKluz
Jun 14 2016 14:50
@lilyliterate but I guess one can learn how to use bootstrap and still don't know why it works.
Daniel
@clevadani
Jun 14 2016 14:50
@mattboland it seems I forgot to update the sound link when transferring the code from my local machine to codepen
lilyliterate
@lilyliterate
Jun 14 2016 14:53
@karolinaKluz Doesn't that imply intuitive understanding, though? Say you learn bootstrap, then you have to pick up another framework. Going over the documentation you'd start to see similarities through sheer familiarity with the original framework, wouldn't you?
anacou
@anacou
Jun 14 2016 14:53
actually I did not find the correct answer... how would you center the image on this page: https://codepen.io/anacou/full/EyKgVG???
Sorin Ruse
@sorinr
Jun 14 2016 14:53
@lilyliterate i've got your idea. and i agree its more convenient to use what u know . but what if you have to change a project using an entirely other css framework. lets say the client wants his site ported from boostrap to material design. in this case don't u think the most important is to know the basics of css and what that can do?
Dixie Korley
@dk574
Jun 14 2016 14:54
@anacou did you try the center tags around the image?
I think you need to put in in a div with a fig caption.
anacou
@anacou
Jun 14 2016 14:55
thanks Dixie
that worked! thank you @dk574
CamperBot
@camperbot
Jun 14 2016 14:56
anacou sends brownie points to @dk574 :sparkles: :thumbsup: :sparkles:
:cookie: 96 | @dk574 |http://www.freecodecamp.com/dk574
Dixie Korley
@dk574
Jun 14 2016 14:56
No prob. Did it work?
Got it.
Karolina Kluz
@karolinaKluz
Jun 14 2016 14:56
@lilyliterate but it's still possible to use bootstrap and any other framework without even knowing what media queries are.
lilyliterate
@lilyliterate
Jun 14 2016 14:59
@sorinr Absolutely agree - fundamental understanding is 100% preferable. But a practical working knowledge still gathers transferable skills. I'll admit I'm operating that our hypothetical student understands the css lessons before moving to Bootstrap.
@karolinaKluz That's kind of my point. You go over the documentation of your other framework. "Oh! These classes are similar to (x class from bootstrap)! I know how to use these!". You don't need to know the intricacies to know that two things that produce similar results are similar.
Sorin Ruse
@sorinr
Jun 14 2016 14:59
@karolinaKluz media queries belong to pure css. learn css before any framework and afterwards you will fully understand what a framework does and if its totally good for u. otherwise u will change it a lot of times
Dave Kalu
@ifeanyidavid
Jun 14 2016 15:01
I need help adding a background image to the jumbotron in bootstrap. codepen link https://codepen.io/ifeanyidavid/pen/zBqdgO
Thank you
anacou
@anacou
Jun 14 2016 15:01
how do I get bullet points to be centered and look good as shown here: https://codepen.io/FreeCodeCamp/full/NNvBQW/
Karolina Kluz
@karolinaKluz
Jun 14 2016 15:02
@sorinr hey, are you telling me to learn it? I haven't said I don't know what it is
Sorin Ruse
@sorinr
Jun 14 2016 15:04
This message was deleted
lilyliterate
@lilyliterate
Jun 14 2016 15:05
@anacou align-left your text, and use a bootstrap column to organize it.
@ifeanyidavid is background-image not working? http://www.w3schools.com/cssref/pr_background-image.asp
Sorin Ruse
@sorinr
Jun 14 2016 15:07
@karolinaKluz just learn pure css and how you can use it to manipulate the appearance of a dom element. afterwards when you are looking to any css framework u will understand what it does
anacou
@anacou
Jun 14 2016 15:07
thanks @lilyliterate
CamperBot
@camperbot
Jun 14 2016 15:07
anacou sends brownie points to @lilyliterate :sparkles: :thumbsup: :sparkles:
:warning: anacou already gave lilyliterate points
anacou
@anacou
Jun 14 2016 15:08
last question for the moment, I promise: how do I get all of my text into a good looking box as shown on this example page: https://codepen.io/FreeCodeCamp/full/NNvBQW/
Karolina Kluz
@karolinaKluz
Jun 14 2016 15:09
@sorinr and I suggest you just learn html very well too. It's very important to understand it! ;)
Dixie Korley
@dk574
Jun 14 2016 15:09
@anacou put it in a div element.
lilyliterate
@lilyliterate
Jun 14 2016 15:10
The whole page is in a div with class "jumbotron". I -really- suggest going over the FCC early stuff again, then going through the bootstrap documentation.
anacou
@anacou
Jun 14 2016 15:10
ok
thanks gusy
guys
Sorin Ruse
@sorinr
Jun 14 2016 15:11
@karolinaKluz why do u think I still need to learn html? and what parts of html5 i'm missing?
Karolina Kluz
@karolinaKluz
Jun 14 2016 15:11
@sorinr and what parts of css am I missing? Just stop, this is silly.
lilyliterate
@lilyliterate
Jun 14 2016 15:11
^
I adore a good argument but this is getting out of hand.
Sorin Ruse
@sorinr
Jun 14 2016 15:14
@karolinaKluz sorry. there is a misunderstanding about promoting bootstrap as the GOD framework over pure CSS. this was my argue also to @lilyliterate . Forget about it. I apologize
lilyliterate
@lilyliterate
Jun 14 2016 15:16
Please remember that my original statement was that learning the grid system was important, not bootstrap. I'm all about learning the practical workflow, hence my argument that the concepts - grids, algorithm design, 3d principles - carry over.
@dk574 Are you still having trouble with your overflow?
Dixie Korley
@dk574
Jun 14 2016 15:19
@lilyliterate Not at all. But I actually changed the tiny divs I put in those two sections to text and it worked.
lilyliterate
@lilyliterate
Jun 14 2016 15:19
Fantastic!
Dixie Korley
@dk574
Jun 14 2016 15:19
@lilyliterate All that's left are the icons and then I'll work on the color theme. Thanks so much for your help.
CamperBot
@camperbot
Jun 14 2016 15:19
dk574 sends brownie points to @lilyliterate :sparkles: :thumbsup: :sparkles:
:warning: dk574 already gave lilyliterate points
Dave Kalu
@ifeanyidavid
Jun 14 2016 15:27
@lilyliterate background-image doesn't seem to be working. I referenced an image saved in Dropbox. I don't know whether that's where the problem lies😞
evandocarmo
@evandocarmo
Jun 14 2016 15:28
hey guys
I have a question
Should I create other html files for the different pages of the site
or is there a better way to do that?
lilyliterate
@lilyliterate
Jun 14 2016 15:29
@ifeanyidavid Are you using it as html or a css tag? I'm -pretty- sure you can hotlink dropbox stuff. If you need to test try using http://placehold.it/ 's method and then change the link once that works.
evandocarmo
@evandocarmo
Jun 14 2016 15:29
and them one more html page for each article?
JD Tadlock
@jdtdesigns
Jun 14 2016 15:30
@evandocarmo If you're building a standard blog, wp would make it much easier to manage posts
evandocarmo
@evandocarmo
Jun 14 2016 15:30
I know but I want to do it all myself, to learn
lilyliterate
@lilyliterate
Jun 14 2016 15:30
@evandocarmo How much content does your wife require? Don't forget that you can build your own wordpress stylesheets to study css and html.
Dave Kalu
@ifeanyidavid
Jun 14 2016 15:31
I'm using it as a css tag.
JD Tadlock
@jdtdesigns
Jun 14 2016 15:31
@evandocarmo Learning WP is pretty much a must. I get WP clients constantly
Dave Kalu
@ifeanyidavid
Jun 14 2016 15:31
@lilyliterate
evandocarmo
@evandocarmo
Jun 14 2016 15:31
How do I transform what I've already done into a wp stylesheet, then?
lilyliterate
@lilyliterate
Jun 14 2016 15:32
@ifeanyidavid Definitely test with links from other site images then.
JD Tadlock
@jdtdesigns
Jun 14 2016 15:32
@evandocarmo look up custom theme design for wp on youtube
evandocarmo
@evandocarmo
Jun 14 2016 15:32
Thanks
JD Tadlock
@jdtdesigns
Jun 14 2016 15:33
it's a pretty large learning curve but it will be worth it when you start getting clients
evandocarmo
@evandocarmo
Jun 14 2016 15:33
Thanks @jdtdesigns @lilyliterate
CamperBot
@camperbot
Jun 14 2016 15:33
evandocarmo sends brownie points to @jdtdesigns and @lilyliterate :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @lilyliterate |http://www.freecodecamp.com/lilyliterate
:cookie: 474 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 14 2016 15:33
@evandocarmo welcome ;)
lilyliterate
@lilyliterate
Jun 14 2016 15:33
@evandocarmo Good luck!
mcorby17
@mcorby17
Jun 14 2016 15:35
Hey guys can someone look at my JSON and tell me if I have it set up right? I'm trying to make a database of picture url's to be able to draw from to set the background of my app depending on the type of weather. I can't seem to be able to access any of it though... http://codepen.io/mcorby17/pen/xOwBzB?editors=1011
console.log(backgrounds["clear sky"]); returns undefined
Clyde
@hea-hea
Jun 14 2016 15:36
Hi, I seem to have a problem with variable scope for lat & lon in my Weather project - any idea where am I making a mistake? http://codepen.io/hea-hea/pen/LZVZZw
Clem
@ctataru
Jun 14 2016 15:36
has something changed with geolocation? the weather app that i made a couple months ago isn't even prompting me for my location anymore.
http://codepen.io/wise/pen/NNdXaB?editors=0010
mcorby17
@mcorby17
Jun 14 2016 15:39
@hea-hea yeah I had the same issue. Thing is lat and lon aren't in the scope so you have to do the rest of your coding inside the if(navigator.geolocation) statement
@hea-hea I ended up using http://ip-api.com/json to get lat and lon cause geolocation gave me too many issues with https and openweatherapi
JD Tadlock
@jdtdesigns
Jun 14 2016 15:43
You can just use a little logic to account for chrome:
var lat, long;

if ( window.chrome ) {
      $.getJSON('http://ip-api.com/json', function(json) {
        lat = json.lat;
        long = json.lon;
      });
    } else {
      if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition(function(data) {
          lat = data.coords.latitude;
          long = data.coords.longitude;
        });
      } 
}
Clyde
@hea-hea
Jun 14 2016 15:43
@mcorby17 Oh I see you're using this ip-api. I I will check this out. Though I don't understand why they're out of scope if I defined them at very very beginning :/
mcorby17
@mcorby17
Jun 14 2016 15:44
@hea-hea yeah it's weird I did the same thing :/
ruchi125
@ruchi125
Jun 14 2016 15:44
guys can you give me some links from where i can use images for my portfolio without any hassle. please help, i need to start my portfolio tomorrow
JD Tadlock
@jdtdesigns
Jun 14 2016 15:45
@ruchi125 photobucket
anacou
@anacou
Jun 14 2016 15:45
what is the simplest way to create a light gray box around text and images as shown on this page: https://codepen.io/FreeCodeCamp/full/NNvBQW/
lilyliterate
@lilyliterate
Jun 14 2016 15:45
Pixabay, and just google "placeholder images". @ruchi125
anacou
@anacou
Jun 14 2016 15:46
I looked through the freeCodeCamp material
lilyliterate
@lilyliterate
Jun 14 2016 15:46
(Also "royalty free images")
anacou
@anacou
Jun 14 2016 15:46
and googled for an answer but no luck
Toni Shortsleeve
@KoniKodes
Jun 14 2016 15:46
@mcorby17 backgrounds = [{... }] but you are calling backgrounds []..
Clyde
@hea-hea
Jun 14 2016 15:46
@anacou I think it's class="well"
JD Tadlock
@jdtdesigns
Jun 14 2016 15:46
@ruchi125 If you're wanting placeholder images unsplash.it is great
ruchi125
@ruchi125
Jun 14 2016 15:47
ok @lilyliterate and @jdtdesigns there are no copyrite issues rite?
Clyde
@hea-hea
Jun 14 2016 15:47
if you're using bootstrap
lilyliterate
@lilyliterate
Jun 14 2016 15:47
Class=well will work, so will class="thumbnail"
anacou
@anacou
Jun 14 2016 15:47
thanks guys
mcorby17
@mcorby17
Jun 14 2016 15:47
@KoniKodes yeah I changed it to backgrounds = {} and that seems to work
lilyliterate
@lilyliterate
Jun 14 2016 15:47
@ruchi125 Pixabay is royalty free, so no issues. Otherwise google royalty-free images.
JD Tadlock
@jdtdesigns
Jun 14 2016 15:47
@anacou Just set the background color to the wrapper of all the content and add padding
ruchi125
@ruchi125
Jun 14 2016 15:48
@lilyliterate and @jdtdesigns thanx for the links i'll bookmark them :D thanx alot again
CamperBot
@camperbot
Jun 14 2016 15:48
ruchi125 sends brownie points to @lilyliterate and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 203 | @lilyliterate |http://www.freecodecamp.com/lilyliterate
:cookie: 475 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Sorin Ruse
@sorinr
Jun 14 2016 15:48
@anacou add a background-color: #eee; to where you want
Toni Shortsleeve
@KoniKodes
Jun 14 2016 15:48
@mcorby17 Great. I was looking at a similar issue, so thank you. I
CamperBot
@camperbot
Jun 14 2016 15:48
konikodes sends brownie points to @mcorby17 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @mcorby17 |http://www.freecodecamp.com/mcorby17
Clyde
@hea-hea
Jun 14 2016 15:51
@jdtdesigns thanks for the geolocation bit. could you have a look at my code, why the variables lat & long are still undefined? where should I place this bit of code in order for it to work? http://codepen.io/hea-hea/pen/LZVZZw
CamperBot
@camperbot
Jun 14 2016 15:51
hea-hea sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 476 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Marc Vesper
@marcvesper
Jun 14 2016 15:54
as a general question, should you go all-out on making each of the projects as pretty/ impressive as possible? or if they're more just exercises in getting functionality to work, is ok to leave them bare-bones as projects like (for instance the random quote generator) aren't likely to end-up in the finished portfolio anyway?
Sorin Ruse
@sorinr
Jun 14 2016 15:55
@hea-hea because u are not getting any data that way. look here: https://codepen.io/sorinr/pen/xOGdYz and btw you should call the geolocation over https to work
lilyliterate
@lilyliterate
Jun 14 2016 15:56
@marcvesper I think that's up to you, but even code toys have a place in a portfolio. And if you polish them, they -could- end up in the finished portfolio as a shiny piece.
Clyde
@hea-hea
Jun 14 2016 15:59
@sorinr how do I call over https?
Sorin Ruse
@sorinr
Jun 14 2016 16:02
@hea-hea just make the call to https://maps.googleapis.com/maps/api/geocode/json?latlng=......
Clyde
@hea-hea
Jun 14 2016 16:03
@sorinr btw I am getting data - if I call console.log inside the ifs - the lat & long are there
JD Tadlock
@jdtdesigns
Jun 14 2016 16:07
@hea-hea You need to use a callback from inside the location function, otherwise you won't have the data yet. It's asynchronous data, meaning it won't come right away.
Sorin Ruse
@sorinr
Jun 14 2016 16:07
@hea-hea then you have a problem regarding cors. when u want to get weather data u can try my weather.php like: https://realistik-it.com/fcc/weatherapp/weather.php?lat="+lat+"&lon="+lon where you have to replace lat and lon variables with your data
JD Tadlock
@jdtdesigns
Jun 14 2016 16:07
  if ( window.chrome ) {
      $.getJSON('http://ip-api.com/json', function(json) {
        lat = json.lat;
        long = json.lon;
        getWeather(); // callback
      });
    } else {
      if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition(function(data) {
          lat = data.coords.latitude;
          long = data.coords.longitude;
          getWeather(); // callback
        });
      }
    }
Sorin Ruse
@sorinr
Jun 14 2016 16:09
@jdtdesigns 'http://ip-api.com/" sometimes work sometimes no. I've proved with many free geolocation's apis
JD Tadlock
@jdtdesigns
Jun 14 2016 16:12
@sorinr The point of using an ip locator is not for it's quality. It's due to the fact that you will most likely not serve your codepen to someone over https, which will cause geolocation to fail.
Tulio Natale
@tuliodnw
Jun 14 2016 16:13
people i did the simon challenge but i want to change the sounds, i made them already but i dont know where i can host them so they work in the html, help wanted thanks
JD Tadlock
@jdtdesigns
Jun 14 2016 16:13
@sorinr Which is why i only use it for chrome
Sorin Ruse
@sorinr
Jun 14 2016 16:16
@jdtdesigns u mean it works only for chrome?
JD Tadlock
@jdtdesigns
Jun 14 2016 16:17
@sorinr If you look at my code above, i only use the ip locator for chrome. I use geolocation for other browsers.
Chrome doesn't allow you to use geolocation over http anymore. It requires https.
Clyde
@hea-hea
Jun 14 2016 16:19
@jdtdesigns I'm not sure I understand the thing with callback. I put the callbacks like you showed, and I defined the getWeather() function where I call the Open Weather API to get the json - is that what this should be? https://codepen.io/hea-hea/pen/LZVZZw
Sorin Ruse
@sorinr
Jun 14 2016 16:19
@jdtdesigns yes just call also your pen over https://codepen.io/youyrname/yourpen
JD Tadlock
@jdtdesigns
Jun 14 2016 16:21
@sorinr ...... Like i've said, people most likely will not load your pen over https, so it's up to you. Guaranteed location of some kind or nothing at all and the app fails. Your choice.
Sorin Ruse
@sorinr
Jun 14 2016 16:22
@jdtdesigns I know but you will get always a cors problem
JD Tadlock
@jdtdesigns
Jun 14 2016 16:24
@sorinr My pen is running as well as a 1000 others using ip location lol. It works fine unless they use a proxy. Even then, it will give you a location.
@hea-hea the bottom of your js where the .ready() ends is incorrect
Clyde
@hea-hea
Jun 14 2016 16:30
@jdtdesigns it should be OK now. but I'm still not getting anything... :worried:
Sorin Ruse
@sorinr
Jun 14 2016 16:31
@jdtdesigns Believe me i've tried every free ip location service possible but Iended up using finally google api. I have tested http://ip-api.com/ from home and office and it reported to me wrong data
what does it show for you?
Toni Shortsleeve
@KoniKodes
Jun 14 2016 16:35
I see where I'm at. Love the switch.
dhuddleston
@dhuddleston
Jun 14 2016 16:36
@jdtdesigns Ahhh, thank you! I was still testing that and forgot to remove that bit.
CamperBot
@camperbot
Jun 14 2016 16:36
dhuddleston sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Tulio Natale
@tuliodnw
Jun 14 2016 16:36

@jdtdesigns can you check my weather challenge, works most days, but its really slow, its the only work i have that give me problems

https://codepen.io/tuliodnw/pen/PNxgjX?editors=0010

Sorin Ruse
@sorinr
Jun 14 2016 16:37
@jdtdesigns its wrong for me as location but the page its really nice
JD Tadlock
@jdtdesigns
Jun 14 2016 16:38
@sorinr You're one out of very few who have a dynamic ip. So for me, I'm not worried about it being off for you on chrome. If you load it in ff/safari,ie, and any other, you're fine. ;)
Sorin Ruse
@sorinr
Jun 14 2016 16:41
@jdtdesigns thats why i have opted for that solution. to avoid any dyn ip problems :)
JD Tadlock
@jdtdesigns
Jun 14 2016 16:42
@tuliodnw You can't run the pen in https and call the openweather api over http. It won't load over mixed requests.
Sorin Ruse
@sorinr
Jun 14 2016 16:43
@jdtdesigns supose you have a request from a client to do an weather app that is working for everyone. how would you do it?
Tulio Natale
@tuliodnw
Jun 14 2016 16:44
@jdtdesigns what is better, both in https or http, still when they are in the same, i must click the button like 3times both api works, the code is very simple i think, can you check it?
ALINATSUI
@ALINATSUI
Jun 14 2016 16:44
@tuliodnw It doesn't work in Chrome?
Tulio Natale
@tuliodnw
Jun 14 2016 16:45
@ALINATSUI it does, but the apis are slow i think
Sorin Ruse
@sorinr
Jun 14 2016 16:45
@ALINATSUI it should work in every browser. thats ideal :)
ALINATSUI
@ALINATSUI
Jun 14 2016 16:46
@tuliodnw Nope, doesn't work in Chrome....works in Safari though...and that's a problem for users since Chrome is one of the more popular web browsers...
For this challenge I used weather underground api.
Tulio Natale
@tuliodnw
Jun 14 2016 16:47
@ALINATSUI im using chrome and it works, let me change something and you can check again
ALINATSUI
@ALINATSUI
Jun 14 2016 16:48
Screen Shot 2016-06-14 at 12.48.09 PM.png
JD Tadlock
@jdtdesigns
Jun 14 2016 16:48
@sorinr This is totally not for a client so the standards aren't going to be set near as high. I do handle clients and i would make it work whatever way they needed if i actually got a request for weather implementation.
ALINATSUI
@ALINATSUI
Jun 14 2016 16:49
Screen Shot 2016-06-14 at 12.48.09 PM.png
Tulio Natale
@tuliodnw
Jun 14 2016 16:49
click again, that earth none, is first time i see it
@ALINATSUI
JD Tadlock
@jdtdesigns
Jun 14 2016 16:50
@tuliodnw The only reason it's not working right away is because you're not using a callback from inside the json function.
The data is async, so a callback or promise is required
ALINATSUI
@ALINATSUI
Jun 14 2016 16:51
@tuliodnw ah, if I click on 'check weather' then my location comes up..but that's not really good experience for the user....
Tulio Natale
@tuliodnw
Jun 14 2016 16:51
@ALINATSUI i know, thats what i want to fix
ALINATSUI
@ALINATSUI
Jun 14 2016 16:51
oh dear....
Tulio Natale
@tuliodnw
Jun 14 2016 16:52
@jdtdesigns you mean callback=?, do i put it also in the callingapi function?
JD Tadlock
@jdtdesigns
Jun 14 2016 16:53
success: function(data) {
  // store all the data
  showWeather(); // call a function(callback) to show the information that's been stored
}
@tuliodnw
Sorin Ruse
@sorinr
Jun 14 2016 16:54
@jdtdesigns I know but I treat every fcc chalange as it is a client request. is my approach wrong?
JD Tadlock
@jdtdesigns
Jun 14 2016 16:55
@sorinr No, you're doing it according to your own goals and standards. I make it work, and look pretty and move on if i understand the code. I know how to do what you're saying, so for me I don't need to do it in the codepen. I only push myself on things I don't understand yet. ;)
Toni Shortsleeve
@KoniKodes
Jun 14 2016 16:58
@sorinr @jdtdesigns I think that you are both right. The lessons learned can be taken into the real world and our clients, while making it work in codepen assures we understand the principles and can make them work. I'm have a definite learning curve and so I don't want to move forward until I have the concepts under control, but at the same I know that I can come back when I know more and make codepen prettier for the portfolios. Both of you have been great help to us other campers and we appreciate your help. So, thank you both.
CamperBot
@camperbot
Jun 14 2016 16:58
:cookie: 356 | @sorinr |http://www.freecodecamp.com/sorinr
konikodes sends brownie points to @sorinr and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Clyde
@hea-hea
Jun 14 2016 16:59
@sorinr what is this https://realistik-it.com/fcc/weatherapp/weather.php that you're using ?
anacou
@anacou
Jun 14 2016 17:00
what is the simplest way to get the following image on the same line as the following text: http://codepen.io/anacou/full/VjaNwJ
Sorin Ruse
@sorinr
Jun 14 2016 17:00
@hea-hea yep. its my web domain
Toni Shortsleeve
@KoniKodes
Jun 14 2016 17:01
@anacou try to wrap the image and text in separate col divs inside one row div
Tyler Moeller
@TylerMoeller
Jun 14 2016 17:01
@anacou You can do that with bootstrap grids/columns:
https://getbootstrap.com/examples/grid/
http://getbootstrap.com/css/#grid
anacou
@anacou
Jun 14 2016 17:02
thanks @KoniKodes
CamperBot
@camperbot
Jun 14 2016 17:02
anacou sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @konikodes |http://www.freecodecamp.com/konikodes
anacou
@anacou
Jun 14 2016 17:02
and thanks @TylerMoeller
CamperBot
@camperbot
Jun 14 2016 17:02
anacou sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 585 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tulio Natale
@tuliodnw
Jun 14 2016 17:03
JD Tadlock
@jdtdesigns
Jun 14 2016 17:04
@anacou You said the easiest. You'll find if you actually leave Bootstrap in your todo list of things for later and learn css first, you'll be amazed at what you find. Modern css makes BS look foolish. http://codepen.io/jdtadlock/pen/YWqMpz
Toni Shortsleeve
@KoniKodes
Jun 14 2016 17:04
@tuliodnw It looks good for me in San Diego.
Clyde
@hea-hea
Jun 14 2016 17:05
@tuliodnw I'm not getting any location
@tuliodnw in Firefox. In Chrome it works OK
Quite the opposite in case of my codepen ;P
Tulio Natale
@tuliodnw
Jun 14 2016 17:06
@hea-hea mmm, ca you check again the firefox?
Clyde
@hea-hea
Jun 14 2016 17:07
@tuliodnw console says: TypeError: can't redefine non-configurable property location
no idea what that means :P
Sorin Ruse
@sorinr
Jun 14 2016 17:07
Clyde
@hea-hea
Jun 14 2016 17:08
@sorinr looks OK
Sorin Ruse
@sorinr
Jun 14 2016 17:08
@hea-hea geolocation?
Tulio Natale
@tuliodnw
Jun 14 2016 17:08
@hea-hea when you go to this page does the info looks good, city, country?
Clyde
@hea-hea
Jun 14 2016 17:09
yes @tuliodnw
Tulio Natale
@tuliodnw
Jun 14 2016 17:11
Clyde
@hea-hea
Jun 14 2016 17:12
OK I got mine to work in Firefox, but it says something about mixed content. And in Chrome I'm not getting any location. It has some problem with http://ip-api.com/json being over http:// and not https:// - what can i do?
@tuliodnw still nothing :/
Shusil Banjade
@shusil123
Jun 14 2016 17:14
@tuliodnw , That's working perfectly, except, the language is not English.
Sorin Ruse
@sorinr
Jun 14 2016 17:14
@hea-hea if its only an warning don't wary about it.
Clyde
@hea-hea
Jun 14 2016 17:15
@sorinr "This request has been blocked; the content must be served over HTTPS."
no idea what I'm doing and this google API stuff looks even more complicated :/
Tyler Moeller
@TylerMoeller
Jun 14 2016 17:17
@tuliodnw The temperature is incorrect. Looks like you are getting Kelvin, dividing by 10 and treating it as celsius.
Add &units=metric to your OpenWeatherMap url and delete lines 41-42.
Sorin Ruse
@sorinr
Jun 14 2016 17:17
@hea-hea then change your request from http to https
Tulio Natale
@tuliodnw
Jun 14 2016 17:18
@TylerMoeller i think im doing that, good eye, fixing it
@TylerMoeller thanks
CamperBot
@camperbot
Jun 14 2016 17:20
tuliodnw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jun 14 2016 17:20
np
Clyde
@hea-hea
Jun 14 2016 17:20
@sorinr if I change http://ip-api.com/json to https://ip-api.com/json it's just Failed to load resource: net::ERR_CONNECTION_REFUSED
Tyler Moeller
@TylerMoeller
Jun 14 2016 17:21
@hea-hea Try this API instead, it works over http/https: https://freegeoip.net/json/
Clyde
@hea-hea
Jun 14 2016 17:22
@TylerMoeller thanks
CamperBot
@camperbot
Jun 14 2016 17:22
hea-hea sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 587 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Clyde
@hea-hea
Jun 14 2016 17:22
It's funny, because the same api works for me in chrome in @tuliodnw 's codepen :/
and in mine it's blocked.
Tulio Natale
@tuliodnw
Jun 14 2016 17:23
@hea-hea link me yours
ooh I see I was opening the codepen with https:// instead of http://
Sorin Ruse
@sorinr
Jun 14 2016 17:26
@hea-hea nope.for me its not working
Sorin Ruse
@sorinr
Jun 14 2016 17:29
@hea-hea it means ip-api,com does not takes calls over https
J. Kilgore
@jkilgore07
Jun 14 2016 17:30
i am doing my portfolio. I have most of the html i want. But i cant seem to nest my auto scroll buttons inside my image. i want them to sit at the top of the page but inside of the top image. Any help?
Sorin Ruse
@sorinr
Jun 14 2016 17:30
@hea-hea close but not my real location
Clyde
@hea-hea
Jun 14 2016 17:32
@sorinr thanks so much for help :) i'll leave it with this API for now but I will need to look into other API solutions later.
CamperBot
@camperbot
Jun 14 2016 17:32
hea-hea sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @sorinr |http://www.freecodecamp.com/sorinr
Clyde
@hea-hea
Jun 14 2016 17:33
@sorinr https://freegeoip.net/json/ also not working for you?
Tulio Natale
@tuliodnw
Jun 14 2016 17:34
can someone help me find why my weather only works in chrome?
Sorin Ruse
@sorinr
Jun 14 2016 17:35
@hea-hea https://freegeoip.net/json/ at least for now reports right city an country. if that helps to u
Clyde
@hea-hea
Jun 14 2016 17:42
@tuliodnw I got it working look :
I removed the function location() {...}part - left the geolocation out and it seems to work now
Tulio Natale
@tuliodnw
Jun 14 2016 17:44
@hea-hea ohh kk, thanks
CamperBot
@camperbot
Jun 14 2016 17:44
tuliodnw sends brownie points to @hea-hea :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @hea-hea |http://www.freecodecamp.com/hea-hea
Clyde
@hea-hea
Jun 14 2016 17:44
@tuliodnw don't ask me why :D
but I'm glad it helped ;)
Leow Wei Xiang
@boyboi86
Jun 14 2016 17:48
@hea-hea so cute! lol

Dear all feedbacks will be much appreciated

http://codepen.io/Boyboi86/full/vGQQMW/

Clyde
@hea-hea
Jun 14 2016 17:49
OK I'm done for now :) thanks for all the help, see you! :)
J. Kilgore
@jkilgore07
Jun 14 2016 17:50
can someone help me with nesting a button at the top of an image?
Tulio Natale
@tuliodnw
Jun 14 2016 17:57
@boyboi86 do they links work? they all go to same page?
Kenzo Mendoza
@KenzoM
Jun 14 2016 18:00
Hello all
Those who finished the Podomoro Timer question: Did you build the timer function from scratch or used a library?
JD Tadlock
@jdtdesigns
Jun 14 2016 18:00
@ngoyal100894 Here's a quick 5 day forecast app I made to show you how to go about it. You're over-complicating the logic for the days. http://codepen.io/jdtadlock/pen/bepzxz?editors=0010
@ngoyal100894 You're also repeating a lot of code, which this will show you how to alleviate.
shamir13
@shamir13
Jun 14 2016 18:08
need help
Eric
@wiltbit
Jun 14 2016 18:13
Can anybody tell me why my footer background color doesn't show up? https://codepen.io/wiltbit/pen/PNVYvN?editors=1100
ALINATSUI
@ALINATSUI
Jun 14 2016 18:20
@tuliodnw works now!! Can I ask you how'd you make your toggle button? Bootstrap? plugin? That's what I'm working on now.
Ethan Rose
@ethanrose
Jun 14 2016 18:22
for anyone who's done the weathermap api---
$.getJSON("api.openweathermap.org/data/2.5/forecast/paris?id=524901&APPID=047667fad5d1973f37bc119e3581da10"), function(json){
is that correct? because I'm getting a 404 error
but as far as I can see it's correct
I know it's bad practice to make the API key public... whoops.. but I'm not too concerned about that haha
Tulio Natale
@tuliodnw
Jun 14 2016 18:23
@ALINATSUI i used http://www.bootstraptoggle.com/, but if i do that again i would do 2 buttons, c and f, when the page loads f is hidden, when c is pressed c hide and f show, i didnt know how to hide buttons before
Ethan Rose
@ethanrose
Jun 14 2016 18:25
$.getJSON("api.openweathermap.org/data/2.5/forecast/paris?id=524901&APPID=047667fad5d1973f37bc119e3581da10"), function(json){

console.log(json);
}
there's the whole code.. I'd assumed I would get a response of all the paris data in JSON format, but I just get this error message:
Luis Carlos Garcia Barajas
@Luiko
Jun 14 2016 18:27
you missing http://... @aidansven
ALINATSUI
@ALINATSUI
Jun 14 2016 18:28
@tuliodnw ok, thanks for the tip...I was getting a migraine yesterday just thinking how to format the c /f....
CamperBot
@camperbot
Jun 14 2016 18:28
alinatsui sends brownie points to @tuliodnw :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @tuliodnw |http://www.freecodecamp.com/tuliodnw
Ethan Rose
@ethanrose
Jun 14 2016 18:31
@Luiko ah thank you so much
CamperBot
@camperbot
Jun 14 2016 18:31
aidansven sends brownie points to @luiko :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @luiko |http://www.freecodecamp.com/luiko
Ethan Rose
@ethanrose
Jun 14 2016 18:31
@Luiko I added the http:// ............now I have no error, but I also have no response... I expected that console.log(json) would give me a response
Lavelle Blackwater
@lblackwater
Jun 14 2016 18:36
Hello, I am working on my tribute page and I wanted to center an image on my page. I am wondering is it better to use html or css to center it?
Jonathan
@JonKaric
Jun 14 2016 18:37
@lblackwater Use both, add a class to your image in html and style it through css
Luis Carlos Garcia Barajas
@Luiko
Jun 14 2016 18:37
@aidansven did you close the getjson's parenthesis?
Ethan Rose
@ethanrose
Jun 14 2016 18:38
@Luiko yes
Luis Carlos Garcia Barajas
@Luiko
Jun 14 2016 18:38
@aidansven it should close after the function with semicolon
Ethan Rose
@ethanrose
Jun 14 2016 18:38
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/paris?id=524901&APPID=047667fad5d1973f37bc119e3581da10"), function(json){
   console.log(json);
}
ALINATSUI
@ALINATSUI
Jun 14 2016 18:38
@aidansven I think the geolocation won't work unless you have https : https://mobiforge.com/news-comment/no-https-then-bye-bye-geolocation-in-chrome-50
Ethan Rose
@ethanrose
Jun 14 2016 18:39
ohhhh... maybe I'm closing it early
Luis Carlos Garcia Barajas
@Luiko
Jun 14 2016 18:39
yes
Lavelle Blackwater
@lblackwater
Jun 14 2016 18:39
I only know the text center class is there a class to use for photo?
Hamza Anwer
@ImHamzaAnwer
Jun 14 2016 18:39
@lblackwater give a class or id to image and style it through css or you can use bootstrap
Ethan Rose
@ethanrose
Jun 14 2016 18:40
@ALINATSUI @Luiko thank you so much
CamperBot
@camperbot
Jun 14 2016 18:40
aidansven sends brownie points to @alinatsui and @luiko :sparkles: :thumbsup: :sparkles:
:warning: aidansven already gave luiko points
:cookie: 339 | @alinatsui |http://www.freecodecamp.com/alinatsui
Tyler Moeller
@TylerMoeller
Jun 14 2016 18:40
@aidansven remove the parenthesis after the url and place it after the last bracket:
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/paris?id=524901&APPID=047667fad5d1973f37bc119e3581da10", function(json) {
  console.log(json);
});
Hamza Anwer
@ImHamzaAnwer
Jun 14 2016 18:40
@lblackwater use class="center-block"
Ethan Rose
@ethanrose
Jun 14 2016 18:41
@TylerMoeller got it , thank you :D
CamperBot
@camperbot
Jun 14 2016 18:41
aidansven sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 588 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jun 14 2016 18:41
Oops lol, didn't read above carefully enough...
Lavelle Blackwater
@lblackwater
Jun 14 2016 18:41
ok, I'll try it thanks for your help guys!
Ethan Rose
@ethanrose
Jun 14 2016 18:42
my response is not at all what I expected though
Object {city: Object, cod: "200", message: 0.0067, cnt: 40, list: Array[40]}
I included "paris" parameter in the URL
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/Paris?
  • the id and appid
Toni Shortsleeve
@KoniKodes
Jun 14 2016 18:44
@shamir13 Did you get help?
Ethan Rose
@ethanrose
Jun 14 2016 18:45
so shouldn't I get a response based on paris?
ahhhh nevermind...
I see array[40] expands when I click on it
that console... I'm an idiot! lol !!!!
JD Tadlock
@jdtdesigns
Jun 14 2016 18:59
@ngoyal100894 I updated it to toggle all the forecast temps as well on button click. ;) http://codepen.io/jdtadlock/pen/bepzxz?editors=0010
verdelegend
@verdelegend
Jun 14 2016 19:19
I'm confused about codepen and the difference between html css and JavaScript. Can't they all go in the same script?
Thomas Burgess
@ThomasBurgess2000
Jun 14 2016 19:20
I'm confused why my code isn't working on "counting cards". I think it has something to do with my whatToDo function. Here it is.
var count = 0;

function cc(card) {
  // Only change code below this line
  switch(card) {
    case 2:
    case 3:
    case 4:
    case 5:
    case 6:
      count++;
      break;
    case 10:
    case "J":
    case "Q":
    case "K":
    case "A":
      count--;
      break;
  }
  var decision="";
  function whatToDo() {
    if (count<=0) {
      decision=" Hold";
    }
    else {
      decision=" Bet";
    }
  }
  return count + decision;
  return "Change Me";
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:21
Does anyone know of any good resources for putting together a website? For example the basic four hearder, footer, nav, left/right orientation.?
How to choose a image for your website? Jpeg?Gif? Other?
A cheat sheet of sorts for a basic structure of elements needed for a noob i HTML5? A cheat sheet for CSS3 selector and properties and what they do aswell?
Jonathan
@JonKaric
Jun 14 2016 19:26
@IsitCflatwonder Use SVG for icons, PNG as a fallback. Use jpg for things like images. Use gif if you need a moving image such as a loading bar but only as a fallback. Use SVG first. For the third question just type in HTML5/CSS3 cheatsheat into google and there wil be plenty to choose from
not sure what you mean by the first question
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:28
I tried using Livereload but could not get it to work on windows.
I looked up some resources online explaining how to put together a two column web app, a simple wordpress website, and a how to tutorial on youtube
I saw a tutorial of a how to put together a website on youtube and he used live reload which would be really helpful.
I need a web designers perspective of how to build a website. Which i know they don't do but instead design for a pleasant UI/UX experience.
Jonathan
@JonKaric
Jun 14 2016 19:34
It all depends on what you want to build and it's limitations. Wordpress is a great platform for most things so id go that route
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:36
I thought you could only use one id per page? Why and How? can they use more than one id for all of the four basic components in a page. I read its unprofessional and messy to use a <style > tag in a html document to reference a CSS page.
Mariya
@mariyadiminsky
Jun 14 2016 19:38
@GregatGit enjoy :sparkles:
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:38
The only id tag that could be used is in <nav> which theirs only one of.
verdelegend
@verdelegend
Jun 14 2016 19:39
How do I do background color for entire page
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:40
background-color: in hex code #0-9 or blue in a property. This property would be stated in your css page.
I think this helps because i'm trying to figure this stuff out myself.
I forgot in hex code its 0-9 and aa-ff. Otherwise , ex 255,255,255,
Tyler Moeller
@TylerMoeller
Jun 14 2016 19:43
@IsitCflatwonder You can use as many unique IDs as you want on a page. You just can't have two IDs with the same name.
@verdelegend What have you tried so far?
Toni Shortsleeve
@KoniKodes
Jun 14 2016 19:44
@IsitCflatwonder use one id per important element, such as About, Home, Portfolio, Contact. Use classes for more used elements, such as "texts". Then in your css you can address one id with specific information, and target that id's class.
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:45
Look up a color wheel for hexcode on 2createawebsite.com by Lisa Irby
Otherwise, all that other good information is in the modules. One other thing @verdelegend check out this website for more interesting information or another perspective after lessons.
Andrew Krupicka
@akrupicka
Jun 14 2016 19:47
Hello Everyone. I am working on my weather app, and am having trouble returning data from a JSON object. I can return the Temp (which is a number) but not a description (which is text). Can anyone take a look and point me in the right direction? http://codepen.io/akrupicka/pen/OXNZwg?editors=1011
Toni Shortsleeve
@KoniKodes
Jun 14 2016 19:48
@IsitCflatwonder check out this bootstrap sheet, it may be helpful.. http://hackerthemes.com/bootstrap-cheatsheet/
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 19:49
I thought classes get declared when only one id is used per page. This is a rule a thumb, grammar rule, or to keep code clean? @KoniKodes @TylerMoeller .
I hope this helped about the background -color : @verdelegend
Dylan
@dhcodes
Jun 14 2016 19:50
@akrupicka you need to go deeper. You might revisit accessing JSON, but ultimately to get to the description you want.. data.weather[0].description
because weather is an array
or has an array
@IsitCflatwonder the general rule is define a class when you are going to use the CSS for multiple parts of your DOM. Use an id when the CSS is for a unique (1 thing) in the DOM
Andrew Krupicka
@akrupicka
Jun 14 2016 19:52
Thank you @dhcodes , i will read up on some more stuff
CamperBot
@camperbot
Jun 14 2016 19:52
akrupicka sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1020 | @dhcodes |http://www.freecodecamp.com/dhcodes
Toni Shortsleeve
@KoniKodes
Jun 14 2016 19:52
@IsitCflatwonder It is a rule that only one id tag per id, and many classes are ok. Yes, keeping the code clean is important too, especially as you do deeper into the coding process.
Dylan
@dhcodes
Jun 14 2016 19:52
@akrupicka the best way might be to put the api url in your browser with some latitude/long and look at the JSON
and try to access dif. thing
Natalya122
@Natalya122
Jun 14 2016 19:55
Hi, everyone!))) I've got a problem with a navbar section... Can't get how to make it with fixed top and make it scroll to different parts of the portfolio page. Looked on Bootstrap and w3school. But........I still can't get how to make it...Help me,please))))
verdelegend
@verdelegend
Jun 14 2016 19:58
@IsitCflatwonder I'm doing the first challenge in codepen. I tried putting it in style and my first div but it only fills like half the page
Can someone please tell me why js css and html are all separate in codepen? In practice didn't we just put css stuff in a <style> element
isaacgg
@isaacgg
Jun 14 2016 20:03
@verdelegend Yes but don't worry, it's just to make your life easier ;)
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:04
Really!! Im still a beginner myself. You should put your code up and maybe have one of these guys @KoniKodes @dhcodes @TylerMoeller to look at. I'm glad i could help you somewhat. I'm on the road to creating my first website @verdelegend
verdelegend
@verdelegend
Jun 14 2016 20:07
@IsitCflatwonder good luck! @isaacgg I can still do <style>in the html section right? I tried doing the style in the css section and it wasn't working
isaacgg
@isaacgg
Jun 14 2016 20:07
I don't know why my json is not working. It worked in the previous challenges...
@verdelegend yes, I think so
Tbuglc
@tbuglc
Jun 14 2016 20:08
help format
CamperBot
@camperbot
Jun 14 2016 20:08

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: β˜› How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Tyler Moeller
@TylerMoeller
Jun 14 2016 20:10
@verdelegend CodePen follows standard best practices of separating your HTML, JavaScript, and CSS into separate files. This is usually more efficient, easier to maintain, along with some other benefits. https://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript
isaacgg
@isaacgg
Jun 14 2016 20:14
I don't know why my json is not working. It worked in the previous challenges... https://codepen.io/isaacgg/pen/RRawYb?editors=1111
Sourabh
@sumitsrbh
Jun 14 2016 20:14
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:15
@isaacgg Add &callback=? to the end of your URL
Sourabh
@sumitsrbh
Jun 14 2016 20:16
don't understand how this works
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:17
@isaacgg Also, in your ajax call, you need to add dataType: 'jsonp',
isaacgg
@isaacgg
Jun 14 2016 20:17
@TylerMoeller Thanks! that worked. Why is that necessary?
CamperBot
@camperbot
Jun 14 2016 20:17
isaacgg sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 589 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:18
@isaacgg You were getting a CORS issue: https://www.mediawiki.org/wiki/API:Cross-site_requests
Sourabh
@sumitsrbh
Jun 14 2016 20:19
the ordered list wasn't in the structured form as were given had to peek inside but i don't understand how it works
anacou
@anacou
Jun 14 2016 20:19
hey! what's the simplest way to get an image and text on the same line??
Sourabh
@sumitsrbh
Jun 14 2016 20:19
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
@anacou you have to use row class.
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:21
@sumitsrbh Not sure what you're referring to - a challenge you are working on?
@anacou Use bootstrap grids or try a standard CSS approach like: http://stackoverflow.com/questions/13596821/css-align-images-and-text-on-same-line
Sourabh
@sumitsrbh
Jun 14 2016 20:25
well u might be of to something. can u answer my question or clear me the code i typed
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:26
The <style> is a tag and tags are used in HTML. In CSS things get referred as elements. Elements have properties in brackets which get assigned values like ex. body (element) {background-color(property):255,255,255(value)} @verdelegend . CSS works different and has to have its own page saved under one folder to build a website. Just look up that reference i gave you for example.
Pagise
@Pagise
Jun 14 2016 20:29
I'm stuck with the random quote machine: I need to refresh the page, but .. whatever I try, it doesn't refresh / wants to jump out of codepen / refreshes in a loop where it adds stuff to the page over and over. My onclick calls the same function as the document.ready does. Is that bad, and if so, how do I solve this issue?
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:34
@Pagise It looks like you are trying to reload the page when requesting a new quote. A better approach would be to take your code out of the document.ready function, create a new function like getQuote() and add the code to that function. Now you can put getQuote() in your document.ready function and replace your #newquote click code to call the getQuote() function as well.
Here's a fork to show you what I mean: http://codepen.io/TylerMoeller/pen/jrqjzr?editors=0010
Pagise
@Pagise
Jun 14 2016 20:36
uhm.. yeah, I tried that. OK, sec.. I will put that in again...
Johnny Rock
@freekngdom
Jun 14 2016 20:36
anyone see what's wrong with this:
http://codepen.io/freekngdom/pen/VjvBZg?editors=1011
It works in Brackets on my computer, but not in codePen πŸ€”
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:38
@freekngdom It works for me. City, temp, and icon are accurate.
Johnny Rock
@freekngdom
Jun 14 2016 20:39
@TylerMoeller glad it works for you. I'm confused as to why it wouldn't work for me?
Brian Zelip
@brianzelip
Jun 14 2016 20:40
@freekngdom it works in a browser for me.
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:40
@freekngdom Are you loading it over HTTPS by chance? You should change the URL you're using to HTTPS - it is HTTP right now
To be clear: This url in your code should be https: https://api.wunderground.com/......... (line 7)
Johnny Rock
@freekngdom
Jun 14 2016 20:42
@TylerMoeller πŸ‘πŸΌ
that fixed it
Pagise
@Pagise
Jun 14 2016 20:43
@TylerMoeller I did what you did.. I even compared the js, however.. your code will change the color, but not get the quote to refresh. Mine just.. doesn't do anything at all. What is the difference? (am I going blind?)
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:43
Glad it helped :)
@Pagise I'm not familiar with that API, but from doing a console.log(a), the API is just returning the same quote each time. You may need to modify your URL
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:45
how do you give brownie points or praise for the help
Toni Shortsleeve
@KoniKodes
Jun 14 2016 20:45
@IsitCflatwonder @ that person and say Thank you
CamperBot
@camperbot
Jun 14 2016 20:45
konikodes sends brownie points to @isitcflatwonder :sparkles: :thumbsup: :sparkles:
:cookie: 83 | @isitcflatwonder |http://www.freecodecamp.com/isitcflatwonder
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:45
@Pagise nvm, figured it out - change this in your URL: [posts_per_page]=1 - make it 10 and then use the same random code that you use for changing the background to choose a random quote.
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10&callback=", function(a) {
    $("#quoteblock").html("<i class='fa fa-quote-left'> </i><span id='quotespan'>" + a[pickNumber].content.replace("<p>", " ") + "</span><i class='fa fa-quote-right'></i><p id='qtfrm'>- " + a[pickNumber].title + "</p>")
  }); // end function(a)
help brownie
CamperBot
@camperbot
Jun 14 2016 20:47

:point_right: brownie points [wiki]

Brownie Points

The number beside your picture on Free Code Camp tells you how many Brownie Points you have.

A user profile picture next to a with Brownie Points score

There are two ways you can get Brownie Points:

  1. Complete challenges - you get one point per challenge you complete
  2. Help other campers in chat - each time you help another camper and they thank you (by typing "thanks @yourname"), you will get a point

Brownie Points help you look like the kind of person who codes a lot, shares relevant links, and helps people.

They also add to your Streak.

:pencil: read more about brownie points on the FCC Wiki

Toni Shortsleeve
@KoniKodes
Jun 14 2016 20:47
@freekngdom It looks like you are trying to console.log a lot of data.
@freekngdom Log Skipped: Sorry, this log was too large for our console. You might need to use the browser console instead. It does work for me as the city and temp.
Pagise
@Pagise
Jun 14 2016 20:49
@TylerMoeller Thanks for that hint. However, when I click on the "New Quote", nothing happens..
CamperBot
@camperbot
Jun 14 2016 20:49
pagise sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 590 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:49
Well thank you !!You guys ill get back to you three later on. I just have to figure some stuff out threw trial and error. @KoniKodes @TylerMoeller @JohnKaric@dhcodes
CamperBot
@camperbot
Jun 14 2016 20:49
isitcflatwonder sends brownie points to @konikodes and @tylermoeller and @johnkaric and @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for johnkaric
:cookie: 295 | @konikodes |http://www.freecodecamp.com/konikodes
:cookie: 591 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:star2: 1021 | @dhcodes |http://www.freecodecamp.com/dhcodes
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:49
@Pagise You'll need to change your click function back to use the #newquote id
It's set to #something now :)
Toni Shortsleeve
@KoniKodes
Jun 14 2016 20:50
@IsitCflatwonder take care, and happy coding.
Pagise
@Pagise
Jun 14 2016 20:51
@TylerMoeller facepalm duh....
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:51
@JonKaric thank you for the help!!
CamperBot
@camperbot
Jun 14 2016 20:51
isitcflatwonder sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:51
@Pagise Happens to the best of us :)
Pagise
@Pagise
Jun 14 2016 20:51
@TylerMoeller that helps a lot! :) Now it only adds on to the old one...
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:51
@Pagise Yeah, you are using .append() instead of just plain old .html(), so it is appending instead of overwriting.
Pagise
@Pagise
Jun 14 2016 20:52
@TylerMoeller I was just looking into that as well, yes.. appending wouldn't work then, would it.. haha..
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:53
@Pagise Not unless you want a history of all quotes received :)
Pagise
@Pagise
Jun 14 2016 20:53
@TylerMoeller Awesomeness.. thanks for your help!
CamperBot
@camperbot
Jun 14 2016 20:53
pagise sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: pagise already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jun 14 2016 20:53
Any time - good luck with the rest of the quote machine
Toni Shortsleeve
@KoniKodes
Jun 14 2016 20:55
How to overwrite the imgs and body background?
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:57
Question how do i get my html to communicate with my css page when encoded the right way? They are both under a folder but i dont see changes pop up like background-color for the body of the element with given value. Plus i used this in my html page<link href="styles.css" rel="stylesheet" type="text/css"/> and this for it to communicate with the browser using <script> tag
Toni Shortsleeve
@KoniKodes
Jun 14 2016 20:59
@IsitCflatwonder are you using codepen yet? If you post each segment to its proper location, and have your settings to add bootstrap and jQuery, it may be easier for you to see it connect. Also, you code send a partner your codepen to ask specific questions.
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 20:59
I have to reload pages in browser to see changes. Plus i can't get my<nav>< ul> <li> tags to display: inline/block?
J Player
@Heyjp
Jun 14 2016 20:59
@IsitCflatwonder finding the right folder can be kinda confusing. Have you tried /styles.css or ./styles.css
IsitCflatwonder
@IsitCflatwonder
Jun 14 2016 21:01
No code pen yet just manual coding. I haven't got through the bootstrap module yet just started. @KoniKodes
I will have to check my paths! thanks @Heyjp
CamperBot
@camperbot
Jun 14 2016 21:01
isitcflatwonder sends brownie points to @heyjp :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @heyjp |http://www.freecodecamp.com/heyjp
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:02
@IsitCflatwonder That's ok. It will be helpful in the future.
Colin
@finkbeca
Jun 14 2016 21:03
Can you guys please help I've been trying to mess around with the grids on the portfolio and all I've got has been problems how do I like space them evenly and put the title under them I've been trying bootstrap grids and epicly failing. Also does anyone know how i got the gap on the right side I can't figure it out any help would be so greatly appreciated here is the code pen http://codepen.io/buddyfinkbear/pen/YWXLPZ Also why does row 1 and row 2 not line up correctly
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:05
@finkbeca did you want both rows? try to make each row with col-sm-12, and each class with a col-6. If you pull them center, it may help them line up.
Colin
@finkbeca
Jun 14 2016 21:06
@KoniKodes Thanks I will try that right now. Any idea on why there is a strange gap on the right side
CamperBot
@camperbot
Jun 14 2016 21:06
finkbeca sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @konikodes |http://www.freecodecamp.com/konikodes
Colin
@finkbeca
Jun 14 2016 21:09
Also any idea on how I can get the text under the picture? @KoniKodes
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:10
@finkbeca let me look closer, it seems that your row may not be extending all the way. Btw, I would suggest placing .body at the top, and calling your css in the order of your html tags. Sometimes that helps in finding the error. You may be able to do a figure/capture on your image, or I tend to img src <br> text />.
Jonathan
@JonKaric
Jun 14 2016 21:12
@finkbeca You have rows, and then columns inside the rows. Try this: <div class="row"> <div class="col-sm-6"></div><div class="col-sm-6"></div> </div>
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:14
@finkbeca your img margin is left 25, with a 5 padding. @JonKaric is correct, that should fix it, with your img margin 0 auto; to make it centered within the column.
Colin
@finkbeca
Jun 14 2016 21:14
@JonKaric I'm sorry but I'm lost on what div your talking about it
lahowitt
@lahowitt
Jun 14 2016 21:14
Hello- In my twitch.tv challenge, at the moment if you click on the link to the url for the user, it takes forever to load in the tab. However if you copy and paste the url from that tab and paste it into another tab, it loads just fine. Does anyone know why? I would think it would have something to do with codepen opening the new tab, but in previous challenges my anchor elements from codepen have worked just fine. My codepen is below for reference. http://codepen.io/lahowitt/pen/wWGmqB?editors=0111
Jonathan
@JonKaric
Jun 14 2016 21:15
@finkbeca Think of it like simple blocks. You want ideally two on each row, so you simply put two columns (with a class of col-sm-6) inside a row container <div class="row">...
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:15
@finkbeca your image divs are class=row. set them to class=row col-sm-12 and each image with a class col-sm-6
Jonathan
@JonKaric
Jun 14 2016 21:15
I dont reccomend that
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:15
@finkbeca because on the grid there are 12 columns in each row.
@JonKaric why?
Jonathan
@JonKaric
Jun 14 2016 21:16
You dont need to put column classes on a row container
only on the columns themselves
then the images go inside the columns
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:16
@JonKaric really? I was taught that you are. thank you, it saves me a step.
CamperBot
@camperbot
Jun 14 2016 21:16
konikodes sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
Jonathan
@JonKaric
Jun 14 2016 21:17
@KoniKodes Nah cause rows are width 100% by deafult
Colin
@finkbeca
Jun 14 2016 21:17
ok
I am slowly working some of the problems out
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:18
@JonKaric Are you signed up? Can't send you brownies :worried: Yes, that makes sense
@finkbeca You'll be looking great in no time :-)
Jonathan
@JonKaric
Jun 14 2016 21:18
@KoniKodes I am but for some reason i can't receive any brownies :(
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:19
@JonKaric Oh. Try Hello World again?
Colin
@finkbeca
Jun 14 2016 21:19
@JonKaric I do have one question you say you don't need columns if you have rows so how are you supposed to position stuff inside your common?
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:20
@finkbeca You misunderstood. He said don't class=row col-12 because you don't need to. But do class img col-6 each image.
@finkbeca Because each row is already set at 100% or 12 columns
Colin
@finkbeca
Jun 14 2016 21:21
@JonKaric @KoniKodes Also if you two don't mind me asking one last question. How can i get the baby blue background under the images. Shouldn't it already be like that because that are nested inside <div class="body">
@KoniKodes Thanks I understand what he meant about the rows
CamperBot
@camperbot
Jun 14 2016 21:21
finkbeca sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: finkbeca already gave konikodes points
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:25
@finkbeca body should not be a class, it is a little different. The tree flow is html, head, body and within the body is the actual context. So you want to place the body as the first things css sees in the stylesheet. Then your body background color should be in place unless you override inside html (as you did with the hero)
Colin
@finkbeca
Jun 14 2016 21:25
so should i chagne the class name from body? @KoniKodes
Tulio Natale
@tuliodnw
Jun 14 2016 21:26

@lahowitt o have the same problem with my twitch , please tell me if you find a fix

http://codepen.io/tuliodnw/pen/PNVJBo

Jonathan
@JonKaric
Jun 14 2016 21:26
@KoniKodes Hey just done the hello world thing, mind trying sending brownies to see if it works?
Toni Shortsleeve
@KoniKodes
Jun 14 2016 21:26
Yes. change .body { to body { and put it at the top.
lahowitt
@lahowitt
Jun 14 2016 21:27
@tuliodnw good to know! Will do.