These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Jun 2016
matthew3454
@matthew3454
Jun 15 2016 00:00
@jdtdesigns I was led down the wrong path
JD Tadlock
@jdtdesigns
Jun 15 2016 00:03
imperial is fahrenheit by default
to convert that to celcius just do Math.round((num - 32) * 5 / 9)
Ken Haduch
@khaduch
Jun 15 2016 00:13

@khaduch I made the equation for getting Celsius the conversion from Fahrenheit. And I'm not quite sure what you mean by the fTemp calculation having no variable inputs. @matthew3454

What I saw in your code for the fTemp variable is this:

        var fTemp;
// and later
        fTemp = ((9 / 5) - 460.62).toFixed(1);

No temperature input to the fTemp variable calculation, so it is always around -460 degrees.

matthew3454
@matthew3454
Jun 15 2016 00:19
@khaduch I see what you mean. I fixed this, but now I have a new problem with it according to JS Analyze. Please take a look:http://codepen.io/codeabode20/pen/Vjaojo?editors=1010
Jessica
@QueenCode
Jun 15 2016 00:21
Hello all. I'm currently doing the random quote project and I was wondering about storing the quotes. I plan on using an array and storing it within the code itself, but I was wondering if there was another way to store it. For instance, would I be able to save it to a file and import it somehow?
matthew3454
@matthew3454
Jun 15 2016 00:21
Ken Haduch
@khaduch
Jun 15 2016 00:23
@matthew3454 - now my temperature is NaN degrees F? :o) :boom:
Greg Duncan
@GregatGit
Jun 15 2016 00:25
@matthew3454 I can't see where you get your temp from the json(data)
you just declare and dont put any numbers in it
Ken Haduch
@khaduch
Jun 15 2016 00:32
@QueenCode - you can do what you want. You cannot save to a file on CodePen and import it (well, I think that you can save it to a separate codepen project and include it in your JS resources.) But if you put it on a web-accessible site, you can include it as a javascript script - does that help?
matthew3454
@matthew3454
Jun 15 2016 00:33
@GregatGit @khaduch Can't I just put var in front of both my Celsius and Fahrenheit equations?
@GregatGit @khaduch Will that fix the problem in other words?
Ken Haduch
@khaduch
Jun 15 2016 00:33
@matthew3454 - you could - but as @GregatGit said, it doesn't look as though you are reading your temperature value from the JSON data?
Jessica
@QueenCode
Jun 15 2016 00:34
Hm, I think so. I was just wondering about it because it seems like it would take up quite a lot of space. I think I might just stick with keeping it in the original code. Thanks a lot though @khaduch
CamperBot
@camperbot
Jun 15 2016 00:34
queencode sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1323 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 15 2016 00:35
@QueenCode - you can put it in a separate codepen project, if you want to isolate it from the functional part of your code -
Jessica
@QueenCode
Jun 15 2016 00:36
would i actually be able to use the items in the array even though it's in another codepen project?
matthew3454
@matthew3454
Jun 15 2016 00:37
@GregatGit over here. lol. What exactly do I need to change if you don't mind me asking?http://codepen.io/codeabode20/pen/Vjaojo?editors=1010
Greg Duncan
@GregatGit
Jun 15 2016 00:38
@matthew3454 just this one var fTemp = (( cTemp - 32) * (5/9)).toFixed(1);
it should = data. (where ever the temp is stored)
Ken Haduch
@khaduch
Jun 15 2016 00:39
@matthew3454 - you aren't getting the json temperature data into your variables, though - unless I'm missing something?
matthew3454
@matthew3454
Jun 15 2016 00:39
@GregatGit Is it the wrong equation or do I need to use decimals rather than fractions?
Greg Duncan
@GregatGit
Jun 15 2016 00:40
@matthew3454 you need a starting temp - which you have to get from the json
your json is in F - so F is taken care of -
var fTemp = data.main.temp;
matthew3454
@matthew3454
Jun 15 2016 00:42
@GregatGit @khaduch oh okay. Thank you for clearing it up.
CamperBot
@camperbot
Jun 15 2016 00:42
matthew3454 sends brownie points to @gregatgit and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1324 | @khaduch |http://www.freecodecamp.com/khaduch
:cookie: 588 | @gregatgit |http://www.freecodecamp.com/gregatgit
matthew3454
@matthew3454
Jun 15 2016 00:44
@GregatGit Okay the temperatures all good to go. Thanks a million for that, now I just need to fix my background images and I should be set. http://codepen.io/codeabode20/pen/Vjaojo?editors=1010
CamperBot
@camperbot
Jun 15 2016 00:44
matthew3454 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: matthew3454 already gave gregatgit points
Greg Duncan
@GregatGit
Jun 15 2016 00:45
@matthew3454 its ('body') not (.#body)
Ken Haduch
@khaduch
Jun 15 2016 00:45
@QueenCode - once you get the other CodePen project included, it will have a var quoteArray = [ quote1, quote2, quote3 ]; in it, at least that is what I'm thinking. You include the other CodePen project by the URL in the JS External resources, and then the variable (quoteArray in my example) should be available to refer to in your quote generator.
@matthew3454 @GregatGit - I thought we got that straightened out before... :) - the body selector...
Jessica
@QueenCode
Jun 15 2016 00:47
@khaduch hmm.. that's interesting. I didn't know it was possible to do that.
matthew3454
@matthew3454
Jun 15 2016 00:47
@GregatGit ok
Ethan Chandler
@Ethanlchandler
Jun 15 2016 00:47
is codepen the only option out there? I know codepen is used here but i was wondering if there was anything similar
Ken Haduch
@khaduch
Jun 15 2016 00:48
@QueenCode - I used it in one of my projects - they document it here: https://blog.codepen.io/documentation/editor/using-javascript-libraries/
matthew3454
@matthew3454
Jun 15 2016 00:51
@khaduch @GregatGit I changed them all, but still no cigar and I forgot about the windspeed too.http://codepen.io/codeabode20/pen/Vjaojo?editors=1010
Jessica
@QueenCode
Jun 15 2016 00:54
Thanks a lot for that documentation @khaduch , I'll check it out.
CamperBot
@camperbot
Jun 15 2016 00:54
queencode sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: queencode already gave khaduch points
Ken Haduch
@khaduch
Jun 15 2016 00:54

@matthew3454 - you are doing something incorrect - you are doing this:

        var fTemp = data.main.temp;
        var cTemp = data.main.temp;

setting both variables to the same value. Either one or the other has to be set (should be the fTemp, since you're using "imperial") and then the other calculated using the formula. Remove your first var cTemp, and your second var fTemp = ... and you should be in better shape!

@matthew3454 - except your cTemp calculation is a little wacko...
matthew3454
@matthew3454
Jun 15 2016 00:57
?
@khaduch thanks man . You're very helpful, but what don't you like about my equation.
CamperBot
@camperbot
Jun 15 2016 00:57
matthew3454 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: matthew3454 already gave khaduch points
Ken Haduch
@khaduch
Jun 15 2016 01:02
@matthew3454 - that it's wrong? :)
@matthew3454 - shouldn't it be degrees_C = (degrees_F - 32) * 5/9 ?
@matthew3454 - and then I don't know if you're doing the toggle correctly... it seems that once it changes, it doesn't change back? (see my next comment)
Ken Haduch
@khaduch
Jun 15 2016 01:07
@matthew3454 - your jQuery selector for the #fTemp button is not correct in your tempSwap code - the first one is wrong, the second one is correct. $('#fTemp')
is what it should be.
And your selector for windSpeed is not correct - it should be $("#windSpeed") - but that's then coming up as NaN mph...
@matthew3454 - and earlier in the code, you have $('#indSpeed').html(windSpeed); - should be windSpeed
JD Tadlock
@jdtdesigns
Jun 15 2016 01:11
@matthew3454 I've been seeing a lot of questions regarding the weather app. I made this today to give examples for quite a few things such as toggling the unit, showing a forecast of days. I just added a feature to show an image based on temp for you. Hope this helps. ;) http://codepen.io/jdtadlock/pen/bepzxz?editors=0010
It also has some test buttons at the bottom to play around with the image setting for each temp zone.
Greg Duncan
@GregatGit
Jun 15 2016 01:14
@matthew3454 your if conditions for the wind is incorrect
the number 81 would work for all of them
it should only work for one
Ken Haduch
@khaduch
Jun 15 2016 01:16
@matthew3454 - you also have your variable windspeed and windSpeed - different spellings...
Toni Shortsleeve
@KoniKodes
Jun 15 2016 01:17
Hi all. Can you please check my code? I'm using background instead of icon. What do you think? https://codepen.io/KoniKodes/full/jrWXjX/
Ken Haduch
@khaduch
Jun 15 2016 01:18
@KoniKodes - looks pretty nice, except it says that my weather is "Clear", and my background is showing a thunderstorm?
Also, the image is not covering the full background.
Toni Shortsleeve
@KoniKodes
Jun 15 2016 01:19
@khaduch Thank you Ken. That's exactly what I needed to know.
CamperBot
@camperbot
Jun 15 2016 01:19
konikodes sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1325 | @khaduch |http://www.freecodecamp.com/khaduch
Dylan
@dhcodes
Jun 15 2016 01:31
@KoniKodes same for me. Says clear and is a thunderstorm. Background is covered for me. Button for C works great
Sujit Karki
@Swoozeki
Jun 15 2016 01:37
Ok, I did finish the markdown previewers, but on my local host.
I hve to subbmit code in codepen
but it doesn't work at all
even a simple component doesnt render
can somebody help me?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 01:40
@dhcodes Thank you. Which is correct? Clear or Thunderstorm?
CamperBot
@camperbot
Jun 15 2016 01:40
konikodes sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1023 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jun 15 2016 01:41
well it says clear but the pic is thunderstorm
so not sure it's there yet
oh, you mean my weather? clear i believe
Toni Shortsleeve
@KoniKodes
Jun 15 2016 01:41
Back to my imgs, thanks guys
Dylan
@dhcodes
Jun 15 2016 01:41
yeah clear
Toni Shortsleeve
@KoniKodes
Jun 15 2016 01:41
@dhcodes :-)
Joshua Swift
@joshuaswift
Jun 15 2016 01:41
anyone knowledgeable on the jQuery side of things?
first time using it on a project and I'm struggling immensely!
JD Tadlock
@jdtdesigns
Jun 15 2016 01:43
@Joshuaswift what's the issue?
Joshua Swift
@joshuaswift
Jun 15 2016 01:43
//When "New Quote" button is clicked, pull random quote from Forismatic API
$(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en",
        success:   function(json) {        $("#quotebox").append("<p> test</p>"); 

        }

      });

      });
Ignore the comment about the button, at the moment I'm just trying to append some JSON data to one of my divs
when the page is loaded
I'm just using "test" for now to check it actually works before trying with the actual data
Toni Shortsleeve
@KoniKodes
Jun 15 2016 01:45
I think I fixed it. Can you check again please? https://codepen.io/KoniKodes/full/jrWXjX/
verdelegend
@verdelegend
Jun 15 2016 01:45
can yyou have multiple classes in a div
JD Tadlock
@jdtdesigns
Jun 15 2016 01:46
var init = function() {
  $('#new-quote').on('click', getQuote);
};

var getQuote = function() {
  $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en', function(json) {
      // do something with the json
  }); 
};

init(); // fire the event listener when page loads....no need for document.ready();
@Joshuaswift
Joshua Swift
@joshuaswift
Jun 15 2016 01:52
@jdtdesigns Thanks that's very helpful! Is there any changes in performance by using that method of document ready?
CamperBot
@camperbot
Jun 15 2016 01:52
joshuaswift sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
buiphuking
@buiphuking
Jun 15 2016 01:52
hi guys,
addClass("animated infinite pulse") => jquery ?
Joshua Swift
@joshuaswift
Jun 15 2016 01:53
@jdtdesigns Ah I see now, this is a way of having both the new quote button pull the data but also the page loading initially pulling the data, correct?
JD Tadlock
@jdtdesigns
Jun 15 2016 01:53
@Joshuaswift You'll need to use this 'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?' for the url instead. Codepen will require jsonp due to header issues
@Joshuaswift This is just as fast or faster than doc.ready()
Joshua Swift
@joshuaswift
Jun 15 2016 01:54
@jdtdesigns thanks again, that will avoid another stumbling block!
CamperBot
@camperbot
Jun 15 2016 01:54
joshuaswift sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: joshuaswift already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 15 2016 01:54
to load the quote in the page from the start just fire the getQuote in the init function
var init = function() {
  $('#get-quote').on('click', getQuote);
  getQuote();
};
Chris Cullen
@123xylem
Jun 15 2016 01:55

@123xylem


function telephoneCheck(str) {
  str=str.split("");
  for(i=0;i<str.length;i++){
    if(str[0]!==1 || str[0]!==5){
      //if str element1 isnt 1 or 5 say false
      return false;
    }
    if(str[i]===/[a-z]/){
    //if theres a letter in str say false
  return false;
    }
  }
  return str;
}
telephoneCheck("1 555-555-5555");

Why isit returning false on first if? str[0] returns 1 so it should pass first if statement

Nick Woelk
@UnluckyNick
Jun 15 2016 02:12
Good evening campers! Quick question. How do I add markup to this chat?
JD Tadlock
@jdtdesigns
Jun 15 2016 02:13
type '```' without the quotes and hit enter
``` <--
Nick Woelk
@UnluckyNick
Jun 15 2016 02:14
@jdtdesigns Thanks!
CamperBot
@camperbot
Jun 15 2016 02:14
unluckynick sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Nick Woelk
@UnluckyNick
Jun 15 2016 02:18
Is there a way to reload the URL in my getJSON without reloading the whole page?
function getQuote(){
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=2&callback=", function(a) {
   $("#quote").html(a[0].content)
   $("#author").html("&mdash; " + a[0].title)   
  });
};
$(document).ready(function() {
  getQuote();
});
  $('#getNewQuote').click(function(){
    document.location.reload(true);
});
JD Tadlock
@jdtdesigns
Jun 15 2016 02:19
@UnluckyNick You're following the standard old school course scheme for doing things
modern best practice is to load your script above </body> which alleviates the need for document.ready()
Chris Cullen
@123xylem
Jun 15 2016 02:20
if(b[i]===/[a-z]/){
    //if theres a letter in str say false..-------------------------------Why is this is not filtering letters in an array of numbers and letters?
  return false;
Its returning true
["1","2","3","","","&","!","!","a","s","d","f","#"]
for that
JD Tadlock
@jdtdesigns
Jun 15 2016 02:21
This message was deleted
@UnluckyNick
@123xylem use .match() or .includes()
function init() {
 $('#getNewQuote').click(getQuote);
 getQuote();
}

function getQuote(){
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=2&callback=", function(a) {
   $("#quote").html(a[0].content);
   $("#author").html("&mdash; " + a[0].title);
  });
}

init();
Hassan
@Quantic-Dreams
Jun 15 2016 02:46
Guys, do I HAVE to use code pen to do projects? I much prefer another IDE for this and I've already written a lot of the code for this project (a tribute page) but it's not syncing as well on the IDE on codepen. I would have to play around with it for at least an hour to get it to look the way it currently looks on Chrome
Jose
@MageTank
Jun 15 2016 02:49
when I add an image to my tribute page the image won't show up? its just a little page thing with a picture on it?
Hassan
@Quantic-Dreams
Jun 15 2016 02:50
Yes @MageTank thats how it should work. Don't forget to use the <img src=" /your image link"
JD Tadlock
@jdtdesigns
Jun 15 2016 02:50
@SaloneKay FCC currently uses Codepen due to it's pretty balanced interface. You shouldn't have any issues with standard html/css/js unless you're using Codepen incorrectly. Remember to use settings->css tab for css and settings->javascript tab for js.
Jose
@MageTank
Jun 15 2016 02:51
@SaloneKay Ok its just weird because it doesn't show up? what kind of image link do i need?
Hassan
@Quantic-Dreams
Jun 15 2016 02:53
here's how i linked mine: <img src="http://i.telegraph.co.uk/multimedia/archive/03208/ali_3208256c.jpg">
Jose
@MageTank
Jun 15 2016 02:57
@SaloneKay ok thanks
CamperBot
@camperbot
Jun 15 2016 02:57
magetank sends brownie points to @salonekay :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @salonekay |http://www.freecodecamp.com/salonekay
Jose
@MageTank
Jun 15 2016 02:59
where do I put j Query code? HTML, CSS, or JS
Hassan
@Quantic-Dreams
Jun 15 2016 03:04
I'm not sure. Google it or ask on the main chat. I'm a novice myself; sorry!
andreas2249
@andreas2249
Jun 15 2016 03:04
@MageTank, in CodePen, put the jQuery in the JS section. Or your can wrap it it <script></script> tags in your html -- above the closing <body> tag.
Hassan
@Quantic-Dreams
Jun 15 2016 03:04
By the way, for the tribute page we don't need to use jQuery or even CSS but of course you can go as far as you like
Jose
@MageTank
Jun 15 2016 03:05
ok thanks
so we could do the whole thing in HTML
JD Tadlock
@jdtdesigns
Jun 15 2016 03:07
@andreas2249 you shouldn't have anything inside the html tab except the html between the body tags
Codepen adds the <html>, <head></head>, and <body></body> for you
Jose
@MageTank
Jun 15 2016 03:09
@jdtdesigns what are the <head></head> and the <body></body> for?
JD Tadlock
@jdtdesigns
Jun 15 2016 03:10
@MageTank Part of the standard html markup for creating a page
Jose
@MageTank
Jun 15 2016 03:10
@jdtdesigns ok
JD Tadlock
@jdtdesigns
Jun 15 2016 03:11
You might want to go take a few basic courses before diving into FCC, like codecodemy.com for example
FCC gives you very little info on the basics of html/css/js
Hassan
@Quantic-Dreams
Jun 15 2016 03:11
This is true
I've completed the HTML/CSS program at CodeAcad and got a decent way through JS
So I guess that helped; i finished the HTML5/CSS on FCC in like 10 hours
andreas2249
@andreas2249
Jun 15 2016 03:15
Thanks @jdtdesigns for the clarification. :)
CamperBot
@camperbot
Jun 15 2016 03:15
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 484 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Troy
@krousemas
Jun 15 2016 03:27
I'm having an issue with the weather app. I was getting the user's lat and long using geolocation which is apparently being deprecated in Chrome. Anyone else encountering this? It works fine in Safari. Here's my example, it's obviously pretty rough right now. Anyone have any suggestions? http://codepen.io/krousemas/pen/xOOxdp
Luis Henrique
@sirluis
Jun 15 2016 03:29
@krousemas I guess Chrome only allow geolocation over ssl
andreas2249
@andreas2249
Jun 15 2016 03:29

In a three-column layout, is there a simple way to "target" which column text goes into? I'm practicing with bootstrap containers, rows, etc. and have this layout. I'd like to have "Section 6" on the far right with an empty space with no text in the middle column. Here's my CodePen:

https://codepen.io/andreas2249/pen/wWGVgg

Thanks in advance

JD Tadlock
@jdtdesigns
Jun 15 2016 03:30
@krousemas you can use a little logic to use an ip locator for chrome and geolocation for other browsers
  if ( window.chrome ) {
      $.getJSON('http://ip-api.com/json', function(json) {
        lat = json.lat;
        long = json.lon;
        getWeather();
      });
    } else {
      if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition(function(data) {
          lat = data.coords.latitude;
          long = data.coords.longitude;
          getWeather();
        });
      }
    }
Luis Henrique
@sirluis
Jun 15 2016 03:31
the hint was enough
JD Tadlock
@jdtdesigns
Jun 15 2016 03:33
@andreas2249 Not sure what layout you're wanting to achieve
andreas2249
@andreas2249
Jun 15 2016 03:34
@jdtdesigns, shift or offset "Section 6" to the right so there's a blank space in the middle of three columns there.
Troy
@krousemas
Jun 15 2016 03:34
@jdtdesigns thanks, that should help a lot. I have no idea how I would have gotten that on my own. Next up is figuring out how to query the openweather api.
CamperBot
@camperbot
Jun 15 2016 03:34
krousemas sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
andreas2249
@andreas2249
Jun 15 2016 03:36
(So even if I stretch out or shrink this responsive layout, the middle column of the last row will be empty... NOTE: Sections 5 and 6 of the layout are in their own row.) Thanks, @jdtdesigns.
CamperBot
@camperbot
Jun 15 2016 03:36
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 15 2016 03:38
@andreas2249 just add col-xs-offset-4 to the section 6 class
offset pushes columns to the right
just make sure the col widths and the offset widths add up to 12
andreas2249
@andreas2249
Jun 15 2016 03:39
Brilliant, @jdtdesigns! I was doing that over and over and over -- but leaving out the 'xs' part. Thanks again for your prompt reply, @jdtdesigns. :)
CamperBot
@camperbot
Jun 15 2016 03:39
andreas2249 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 15 2016 03:41
@andreas2249 welcome ;)
Kyle W Pilkinton
@tadake
Jun 15 2016 03:54
hey guys can yall see your name when you download the certificates? mine won't show up. hahahahaha thanks for the help @jdtdesigns I find I shed my Simon says last night! haha i had to work on it then when id sleep id lose track and have to restart so I ended up deleting half of it organizing then read doing it.
CamperBot
@camperbot
Jun 15 2016 03:54
tadake sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Le Anh Duy (Andrew)
@leanhduy1998
Jun 15 2016 04:33
hi guys, for the Exact Change bonfire, I have rounding error when it comes to penny changes. How do you deal with rounding error? I tried Math.round(), toFixed(), but still it doesn't work
*didn't
Ken Nawrocki
@nawrockp
Jun 15 2016 04:44
@leanhduy1998 muliply the amount by 100 , do your calculation , then divide by 100
That way you are using integers
Le Anh Duy (Andrew)
@leanhduy1998
Jun 15 2016 04:45
@nawrockp I see. Thank you!
CamperBot
@camperbot
Jun 15 2016 04:45
leanhduy1998 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @nawrockp |http://www.freecodecamp.com/nawrockp
Michael Karpinski
@karpimpski
Jun 15 2016 05:10
does anybody know why this won't go through my array?
var views = ["M", "E","R","C","U","R","Y","MERCURY"];

var i = 1;

$("#click").click(function(){
  $("#word").html('<span id="click">' + views[i] + '</span>');
  i++;
});
it starts at M and it works with E, but nothing after
cannelflow
@cannelflow
Jun 15 2016 05:13
p {
    font-family: Arial, Helvetica, sans-serif;
}
or
p {
    font-family: "Arial", "Helvetica", "sans-serif";
}
which one is correct way
Michael Karpinski
@karpimpski
Jun 15 2016 05:14
@cannelflow some are supposed to be in quites, some not
i THINK it's 'Arial', 'Helvetica', sans-serif
cannelflow
@cannelflow
Jun 15 2016 05:15
@karpimpski how to determine it
last one should not be in ""
@karpimpski
Michael Karpinski
@karpimpski
Jun 15 2016 05:15
you can't really tell, you just have to google and remember]
cannelflow
@cannelflow
Jun 15 2016 05:15
?
Michael Karpinski
@karpimpski
Jun 15 2016 05:16
or maybe quotes don't matter for these, i think you may be able to use either way
cannelflow
@cannelflow
Jun 15 2016 05:16
@karpimpski problem is code editor won't flag it as incorrect
any ways ty @karpimpski
CamperBot
@camperbot
Jun 15 2016 05:16
cannelflow sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @karpimpski |http://www.freecodecamp.com/karpimpski
JD Tadlock
@jdtdesigns
Jun 15 2016 05:17
@karpimpski where is the loop? You have views[i] like you're calling the counter in a loop and I don't see where you started it.
Michael Karpinski
@karpimpski
Jun 15 2016 05:17
@jdtdesigns `var i = 1'
JD Tadlock
@jdtdesigns
Jun 15 2016 05:18
@karpimpski lol, that's not a loop
Michael Karpinski
@karpimpski
Jun 15 2016 05:18
it's not meant to be a full-on loop, it's meant to act as a starting point until i finish making it work
i can get it to loop through my array fine, i just can't get it to work while using the same id that i create using js
there's no problem making my js function, i'm just trying to make it function in a way that works with the design i'm trying to make
ik what i just said may have been said in a kind of confusing way, so here's what i have that works:
//inspired by Samuel David Pedraza's pen at http://codepen.io/Sam_pedraza/pen/GZxOXq

var views = ["M", "E","R","C","U","R","Y","MERCURY"];

var i = 1;

$("#word").click(function(){
  $("#word").html('<span id="click">' + views[i] + '</span>');
  i < views.length - 1 ? i ++ : i = 0;
});
i want it to work so it uses $("#word").click(function() so that you have to click the letter to make it work
i mean $("#click").click(function()
JD Tadlock
@jdtdesigns
Jun 15 2016 05:24
@karpimpski Ah, one second and i'll have the code for ya. ;)
Michael Karpinski
@karpimpski
Jun 15 2016 05:25
oh, easy fix
$("#click").click(function(){
  $("#click").html(views[i]);
  i < views.length - 1 ? i ++ : i = 0;
  i == views.length ? $("#word").addClass("fullWord") : $("#word").removeClass("fullWord")
});
JD Tadlock
@jdtdesigns
Jun 15 2016 05:29
Michael Karpinski
@karpimpski
Jun 15 2016 05:30
@jdtdesigns thanks for the help! your result is what i was trying to avoid, my problem was that you could click somewhere that wasn't the word and still have it switch letters, like yours
CamperBot
@camperbot
Jun 15 2016 05:30
karpimpski sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Michael Karpinski
@karpimpski
Jun 15 2016 05:31
i fixed it with what i suggested, as span seems to fix that mouse problem
JD Tadlock
@jdtdesigns
Jun 15 2016 05:31
@karpimpski ? You have to click the letter to make it switch. It won't work anywhere else.
Michael Karpinski
@karpimpski
Jun 15 2016 05:32
to the left and right of the letter
JD Tadlock
@jdtdesigns
Jun 15 2016 05:32
@karpimpski That's just because the header is a block element. Easy fix by making it inline-block
Michael Karpinski
@karpimpski
Jun 15 2016 05:34
@jdtdesigns good to know, thanks! yeah, that was the only thing i was trying to fix, i didn't have any issues with the other stuff. i actually have another problem now, if you could check it out for me. i added jquery animations to fade the letters in, but now it resizes them weird (i resize it when it displays the whole word) and skips E. could you check out my codepen?
CamperBot
@camperbot
Jun 15 2016 05:34
karpimpski sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: karpimpski already gave jdtdesigns points
nevermind, i seem to have fixed it by starting my index at 0 and putting my resizing query in my timeout function
Zarina
@Zarinathegreat
Jun 15 2016 05:49
Dear campers! Could you please help me with the Tribute Page Project. There's one issue that I cannot fix.I am at a dead end
I am trying to make equal margins between row elements. I put the text into wells and I want thess wells to have equal margins, i.e. the first and the second row should have the same space between its blocks. But unfortunately, the second row elements do not conform to the set parameters.
div.well{
height:600px;
display:inline-block
margin:10px 10px 10px 10px;
overflow: auto;
}

I have a question that really bothers me! Why is that so? Why do the elements of the first row correspond to the parameters but the second ones don't?

http://codepen.io/Zarina-374/pen/KMVevP

I would really appreciate your help!

Shusil Banjade
@shusil123
Jun 15 2016 05:55
@Zarinathegreat , put all your styling in css section, not in html .
JD Tadlock
@jdtdesigns
Jun 15 2016 05:56
@karpimpski Sorry, walked away for a minute. Here's how i would implement it. http://jsbin.com/rukelum/edit?js,output
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Jun 15 2016 06:00
Hi all of you need help in angular
James Dui
@jamesMD
Jun 15 2016 06:00
I am having trouble, where my photo is cut off when I use my Iphone to look at my portfolio page in portrait mode. Landscape mode is fine.... Any suggestions?
https://codepen.io/jamesMD/pen/XKXvEw
Shusil Banjade
@shusil123
Jun 15 2016 06:02
@Zarinathegreat , and put semicolon after display : inline-block;
    div.well{
    height: 600px;
    display: inline-block;
    margin: 10px 10px 10px 10px;
    overflow: auto;
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Jun 15 2016 06:02
/**
 * Created by uday on 6/14/16.
 */
(function () {

    agGrid.initialiseAgGridWithAngular1(angular);

    angular.module('controllersModule',['agGrid']);

    console.log(angular.module('controllersModule',[]));

    angular.module('libApp',['ngRoute','controllersModule'])
        .config(function ($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl : 'views/registration.html',
                    controller : 'registrationCtrl'
                })
                .when('/admin', {
                    templateUrl : 'views/admin.html',
                    controller : 'adminCtrl'
                })
                .when('/user', {
                    templateUrl : 'views/user.html',
                    controller : 'usrCtrl'
                })
                .otherwise({
                    redirectTo:'/admin'
                });
        })

        .controller('appCtrl',function ($scope) {

        })
})();

this is my main controller, with module added with ag-grid module

i want use this ag grid in another controller which linked with this module

controllersModule this module have all controllers
i tried add ng grid in another controller and view but its not working
/**
 * Created by uday on 6/14/16.
 */
(function () {
    angular.module('controllersModule')
        .controller('adminCtrl',function ($scope) {

            $scope.user ="I m admin";

            console.log("in adminCtrl");

            var columnDefs = [
                {headerName: "Make", field: "make"},
                {headerName: "Model", field: "model"},
                {headerName: "Price", field: "price"}
            ];

            var rowData = [
                {make: "Toyota", model: "Celica", price: 35000},
                {make: "Ford", model: "Mondeo", price: 32000},
                {make: "Porsche", model: "Boxter", price: 72000}
            ];

            $scope.gridOptions = {
                columnDefs: columnDefs,
                rowData: rowData
            };
        });
})();
this is another controller
and this is view

<h1>Admin</h1>
<input ng-model="user">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>
need your help
Zarina
@Zarinathegreat
Jun 15 2016 06:05
@shusil123 Thank you. I did it. But how should I still have the equal space?
CamperBot
@camperbot
Jun 15 2016 06:05
zarinathegreat sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @shusil123 |http://www.freecodecamp.com/shusil123
Don Price
@KingHippo
Jun 15 2016 06:06
Could anyone tell me why my code is not accesing the twitch JSON data from a deleted account?
Shusil Banjade
@shusil123
Jun 15 2016 06:08
@Zarinathegreat , Use what you have using. give equal margin to all elements with same width. Your image element is taking more width , I guess. Give class img-responsive to your image if you are using Bootstrap.
Zarina
@Zarinathegreat
Jun 15 2016 06:21
@shusil123 I did what you suggested, thanks. But it won't change the layout
CamperBot
@camperbot
Jun 15 2016 06:21
zarinathegreat sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:warning: zarinathegreat already gave shusil123 points
DJ
@qualitymanifest
Jun 15 2016 06:26
@KingHippo when an account is deleted that data is no longer available. trying to access it gives you a 422 error. that's your indication that the account is deleted and you should display it as such
Ethan Rose
@ethanrose
Jun 15 2016 06:28
hey all.. trying to do weather map! :D
got this message in the console:
was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/forecast/find?q=London&type=like?id=524901&APPID=047667fad5d1973f37bc119e3581da10'. This request has been blocked; the content must be served over HTTPS.
Don Price
@KingHippo
Jun 15 2016 06:29
@qualitymanifest So I should use the if statement to check for a 422 error instead then. I will have to look into checking for errors in if statments. Thank you!
CamperBot
@camperbot
Jun 15 2016 06:29
kinghippo sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1202 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
Ethan Rose
@ethanrose
Jun 15 2016 06:29
how can I fix this error? :octocat:
Sanchit Dhiman
@sanchit13
Jun 15 2016 06:31
Could anyone give me feedback/critique on how my portfolio is coming along?
http://sanchit13.github.io/
Greg Duncan
@GregatGit
Jun 15 2016 06:31
@aidansven is your pen https?
Ethan Rose
@ethanrose
Jun 15 2016 06:31
@GregatGit it looks like the pen is, but the API is not? that's what I'm thinking
Greg Duncan
@GregatGit
Jun 15 2016 06:32
remove the prefix from the top
Shusil Banjade
@shusil123
Jun 15 2016 06:32
@aidansven , the geolocation navigator works over https , whereas openweatherapi works over https. That's why you are getting that error, I guess. You can use ip-api.com/json to get latitude and longitude and then , the openweather api to get the weather
There will be two api's though.
Ethan Rose
@ethanrose
Jun 15 2016 06:33
ah ok.. is it just chrome that blocks geolocation if it's not https?
Elbert Cortez
@trip16661
Jun 15 2016 06:34
@aidansven firefox allows you to work with geolocation
Ethan Rose
@ethanrose
Jun 15 2016 06:34
I'm not intentionally trying to use the geolocation navigator
Akhil Varma
@AkkiV
Jun 15 2016 06:34
Hi everyone!
I'm making a tribute page on Codepen. Could someone please help me in aligning the text vertical?
This is my work. https://codepen.io/AkkiV/full/OXNqyG/
I want the text to be aligned like this: https://codepen.io/FreeCodeCamp/full/NNvBQW/
Ethan Rose
@ethanrose
Jun 15 2016 06:34
actually I fed "London" into the link
so why is it trying to use Geolocation?
unless the api is the one trying to use it?
Greg Duncan
@GregatGit
Jun 15 2016 06:35
@sanchit13 Brilliant start - looks awesome - you need a proper navbar https://getbootstrap.com/examples/navbar/
Shusil Banjade
@shusil123
Jun 15 2016 06:36
It should work, then. Unless there is some problem with codepen , and https. @aidansven
Greg Duncan
@GregatGit
Jun 15 2016 06:36
@aidansven because you want the users location - not London
Elbert Cortez
@trip16661
Jun 15 2016 06:36
i really hate that cors thing xD
Sanchit Dhiman
@sanchit13
Jun 15 2016 06:37
@GregatGit Will do. How bad is my color-scheme.
Ethan Rose
@ethanrose
Jun 15 2016 06:37
for the sake of testing it, I just used london, because I didn't want to have to use geolocation for now
but it's still not working, but I think the problem lies in the api... (the free version) is not https
Elbert Cortez
@trip16661
Jun 15 2016 06:38
did you try to open codepen on http?
instead of https
Greg Duncan
@GregatGit
Jun 15 2016 06:38
@AkkiV
p{
  text-align: left;
}
Shusil Banjade
@shusil123
Jun 15 2016 06:38
@AkkiV , put the text / ul inside a container, and then give some padding-left to it. It should work.
Akhil Varma
@AkkiV
Jun 15 2016 06:39
Thank you, guys. I'll try it now.
Elbert Cortez
@trip16661
Jun 15 2016 06:39
http://codepen.io/Trip1666/full/beEvRp/
mine if it s not http it just dont work at all
but because the website(codepen) its in http the geo thing wont work
Greg Duncan
@GregatGit
Jun 15 2016 06:40
@sanchit13 Colors work great - that might change as you add more images- but really good
@trip16661 you cant use this navigator.geolocation.getCurrentPosition with chrome
@trip16661 use http://ip-api.com/json
Elbert Cortez
@trip16661
Jun 15 2016 06:43
im aware, well its not that i can't its more that it needs a https to work with
Greg Duncan
@GregatGit
Jun 15 2016 06:44
but you can't use the open weather on https -
Elbert Cortez
@trip16661
Jun 15 2016 06:44
yeah
that's exactly what i meant xD
btw greg that's the project I was doing with ES6 the other day
Greg Duncan
@GregatGit
Jun 15 2016 06:45
why don't you give lat and long a value and then you can see if the open weather api is working?
@trip16661 I noticed it looks very different
Elbert Cortez
@trip16661
Jun 15 2016 06:46
it does work because even if it don't get the use geolocation(or city)
the user can still browse other cities in the world
add them (and save them in localStorage)
Akhil Varma
@AkkiV
Jun 15 2016 06:47
@GregatGit @shusil123 Aligned the text to left and gave it some padding. Problem solved! Thanks again!
https://codepen.io/AkkiV/full/OXNqyG/
CamperBot
@camperbot
Jun 15 2016 06:47
akkiv sends brownie points to @gregatgit and @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @shusil123 |http://www.freecodecamp.com/shusil123
:cookie: 589 | @gregatgit |http://www.freecodecamp.com/gregatgit
Elbert Cortez
@trip16661
Jun 15 2016 06:47
so in the next session they will display the cities the person saved
Greg Duncan
@GregatGit
Jun 15 2016 06:47
@AkkiV :+1: rock on!
Elbert Cortez
@trip16661
Jun 15 2016 06:47
also it has an autocomplete system to reduce typos
it looks shitty cuz i saved the img in imagur and for somereason it just don't read them xD
Ethan Rose
@ethanrose
Jun 15 2016 06:49
@trip16661 @GregatGit thank you both! Took codepen off https and my (current) problem is solved ! :D
CamperBot
@camperbot
Jun 15 2016 06:49
aidansven sends brownie points to @trip16661 and @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @trip16661 |http://www.freecodecamp.com/trip16661
:cookie: 590 | @gregatgit |http://www.freecodecamp.com/gregatgit
Elbert Cortez
@trip16661
Jun 15 2016 06:50
@aidansven use the api greg gave to you and everything will work
Shusil Banjade
@shusil123
Jun 15 2016 06:50
@trip16661 , imagur doesn't work for some reason. You can try cloudinary.com to host and use images.
Elbert Cortez
@trip16661
Jun 15 2016 06:51
@shusil123 I never used that one, is it safe to? or need a membership?
Shusil Banjade
@shusil123
Jun 15 2016 06:55
@trip16661 , it is safe and free.
Just sign up and start using.
At least for codepen and images, I think it's the best solution.
Elbert Cortez
@trip16661
Jun 15 2016 06:56
i just did it and works fine
http://codepen.io/Trip1666/full/beEvRp/
@shusil123 thanks
CamperBot
@camperbot
Jun 15 2016 06:56
trip16661 sends brownie points to @shusil123 :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @shusil123 |http://www.freecodecamp.com/shusil123
Shusil Banjade
@shusil123
Jun 15 2016 06:58
@trip16661 , My pleasure.
juancolicchio
@juancolicchio
Jun 15 2016 07:26
Hey guys, I just completed my very first website (tribute page challenge), I would greatly appreciate if anybody could look at it briefly and provide some feedback.
https://codepen.io/juancolicchio/pen/pbbzEG
kirbyedy
@kirbyedy
Jun 15 2016 07:28
@juancolicchio looks nice to me, the problem is, that is not responsive, so viewing on mobile devices will be hard
and also you should maybe center the whole thing on the page, its on the left side of the screen at the moment
juancolicchio
@juancolicchio
Jun 15 2016 07:31
Thanks @kirbyedy
CamperBot
@camperbot
Jun 15 2016 07:31
juancolicchio sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1115 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
juancolicchio
@juancolicchio
Jun 15 2016 07:32
I'll get working on it tomorrow morning, currently trying to beat this game, and I am too tired haha
In three days of coding I managed to pull that together, I look forward for what I will be able to do in a month from now
Good night!
kirbyedy
@kirbyedy
Jun 15 2016 07:37
good night, and good luck :thumbsup:
GaneshCloud
@GaneshCloud
Jun 15 2016 07:49
Hello World
CamperBot
@camperbot
Jun 15 2016 07:49

welcome to FreeCodeCamp @GaneshCloud!

Jack Lyons
@JackEdwardLyons
Jun 15 2016 07:58
hey guys, does anyone have a good reference site or blog that could explain the relevance of learning all these bonfire problems... like I just really struggle with the problems and mostly because I don't always understand the WHY behind the problem... like where they would happen in the real world... does anyone get me?
Clyde
@hea-hea
Jun 15 2016 08:01
@JackEdwardLyons you mean the algorithm challenges?
Jack Lyons
@JackEdwardLyons
Jun 15 2016 08:01
yeah
Clyde
@hea-hea
Jun 15 2016 08:03
when I read the provided documentation links, learn about JS methods - I feel like I'm getting a lot from it. but no idea if in real life it happens that to manipulate arrays or string back and forth ;)
Jack Lyons
@JackEdwardLyons
Jun 15 2016 08:04
yeah
like, just the "real world" aspect to the problems
it would be cool if someone wrote a blog about each problem and how it relates to real world code/websites
Teresa Garriot
@garriottteresa
Jun 15 2016 08:12
When you submit the portfolio project to move on to java script does anyone look at it? Does anyone critique it?
Clyde
@hea-hea
Jun 15 2016 08:13
@garriottteresa no, I think they are reviewed at the very end when you apply for certificate
if at all. you can correct it and upgrade it as many times as you want until then
MD91
@MD91
Jun 15 2016 08:18
Overnight my weather project has stopped working: https://codepen.io/MD91/pen/PzNaLx
does it work for anyone else?
has anyone had similar problems?
Teresa Garriot
@garriottteresa
Jun 15 2016 08:19
OK, bummer, I am sure there are better ways of doing what I did, peer to peer isn't the same. Thanks Clyde @hea-hea
CamperBot
@camperbot
Jun 15 2016 08:19
garriottteresa sends brownie points to @hea-hea :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @hea-hea |http://www.freecodecamp.com/hea-hea
Andy
@Zubenna
Jun 15 2016 08:21
Hello Everyone.
My weather app project could not retrieve information again. Please advice.
Jack Lyons
@JackEdwardLyons
Jun 15 2016 08:24
hi @MD91 thats weird,
ill check mine to see if there are problems
Clyde
@hea-hea
Jun 15 2016 08:25
@garriottteresa you can just post a link to your codepen here and someone will have a look
Jack Lyons
@JackEdwardLyons
Jun 15 2016 08:25
sometimes google chrome doesnt allow you to view it, have yuou tried another browser @MD91
cause it works in Firefox
@MD91
Clyde
@hea-hea
Jun 15 2016 08:26
@Zubenna can I see your codepen? I don't see the link
Jack Lyons
@JackEdwardLyons
Jun 15 2016 08:26
this is what google chrome says in the console
getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
@MD91
Clyde
@hea-hea
Jun 15 2016 08:26
I worked on my weather app yesterday
and I got it to work properly with both chrome and FF
at least with the geolocation for now :)
for Chrome it's using http://ip-api.com/json - but it's also fine for Firefox
Maciej Sartys
@maciejsartys
Jun 15 2016 08:31
Hello. I've noticed that option to point pair camper in front-end projects dissapered. Are we supouse to do project individually or there is other function for submiting projects made in pairs ?
Andy
@Zubenna
Jun 15 2016 08:37
This message was deleted
Clyde
@hea-hea
Jun 15 2016 08:39
@Zubenna can you post link to codepen?
Clyde
@hea-hea
Jun 15 2016 08:45
@Zubenna maybe you also have a http/https problem?
Andy
@Zubenna
Jun 15 2016 08:46
@hea-hea , yes. How do I resolve it?
MD91
@MD91
Jun 15 2016 08:47
@JackEdwardLyons Hi Jack, I use Safari, but it was all working perfectly yesterday. I'm not sure if it's my internet connection or not. Will you click on the button to see if it works for you?
Clyde
@hea-hea
Jun 15 2016 08:47
@Zubenna http://jsfiddle.net/8cjaejkw/ I tried it and it looks OK - I just needed to remove https from the jsfiddle address
if you're working in codepen, try to do the same, check if the URL of the codepen is with https
and change it to http:// at the beginning
Andy
@Zubenna
Jun 15 2016 08:48
@hea-hea , yes. it starts with https.
Clyde
@hea-hea
Jun 15 2016 08:49
remove the 's' in the URL and hit enter, and see if it helps
Andy
@Zubenna
Jun 15 2016 08:52
yes it works, but will it remain permanent
@hea-hea ,Thanks for your effort.
Saparbekov Azat
@Deathstroke97
Jun 15 2016 10:12
guys
hi everyone
can anyone help me with javascript?
Clyde
@hea-hea
Jun 15 2016 10:23
if you need help with algorithms it's better to go to HelpJavaScript room
I'm almost done with the basic weather app - I don't know why the temperature switch only works one way :/ any ideas what's wrong with my code? http://codepen.io/hea-hea/pen/LZVZZw
Ethan Emandien
@EthanHitGub
Jun 15 2016 10:30

Hey guys, anybody have an idea why my form is not getting the input?
html:

<form name="searchForm" onsubmit="search()">
        <h3>
          <input id="searchWiki" name="search" type="text" placeholder="Search Wiki" required/>
        </h3>
      </form>

javascript:

 function search() 
  {
    var input = document["searchForm"]["search"].value; 
    alert(input);
  }

Nothing is getting alerted. Any ideas?

Emeka Nwankwo
@janus
Jun 15 2016 10:31
I am finding it hard to my html when viewed on mobile screen ...
html:
   <div class="col-md-10 col-xs-12 col-sm-12 center-page2">

    <p class="text-center header-text-1">PROJECTS</p>
                  <div class="row-header">
            <div class="center-left"><div class="left-rule-po"><hr class="rule1-dt1" ></div>
            <div class="center-text-po"><p class=" header-text">{/}</p></div></div></div>
            <div class="right-rule-po"><hr class="rule1-dt2"></div></div> 
Sorin Ruse
@sorinr
Jun 15 2016 10:37
@EthanHitGub try var input = $('#searchWiki').val(); but you have to load jquery library first
Ethan Emandien
@EthanHitGub
Jun 15 2016 10:41
@sorinr It had no effect. My form doesn't seem to be submitting at all. Even if I just put alert("test"); in the function, and then submit the form, no alert occurs.
Sorin Ruse
@sorinr
Jun 15 2016 10:42
@EthanHitGub then it means that your onsubmit="...." on the form tag is not triggerig your desired function and that is because you don't have a submit button on the form or some other method to trigger the submit
@EthanHitGub just for the sake of testing add within the form tags an <button type="submit>search</button> to see what happens
Clyde
@hea-hea
Jun 15 2016 10:56
@sorinr maybe you can help :) why this is working only one way to change the units in the weather app?
/* function to change the temp units */
      var isMetric = true;
      $("span").click(function(){
        if (isMetric){
        $(".temp").html(tempF+"<span>&deg;F</span>");
        return isMetric = false;
              }
        else {
          $(".temp").html(tempC+"<span>&deg;C</span>");
          return isMetric = true;

        }
      });
Usmaan Ali
@usyyy
Jun 15 2016 10:57
http://codepen.io/usyyy/pen/pbyqpV Can somebody tell me how to make this adjust for mobile devices?
Sorin Ruse
@sorinr
Jun 15 2016 10:59
@hea-hea your problem is here: return isMetric = false; or return isMetric = false; it should be isMetric = true or isMetric = false . The function does not return any data it just sets a variable to true or false
@hea-hea and make sure that isMetric is a global var not only for that function
@usyyy i see u are using bootstrap css framework. why not using its grid declaring rows and cols to have it responsive to media width changes?
Usmaan Ali
@usyyy
Jun 15 2016 11:06
@sorinr i didn't use the grid because I didn't think I would need it based on it being the first project, I also didn't need more than one column? How would I adjust this?
Clyde
@hea-hea
Jun 15 2016 11:16
thanks @sorinr I'll try to correct it
CamperBot
@camperbot
Jun 15 2016 11:16
hea-hea sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jun 15 2016 11:17
@usyyy in this case you should rethink your layout to make it responsive. read this: http://getbootstrap.com/css/#grid first and then try to use the combination of div class="row" with div class="col-...." to make it responsive
@hea-hea let me know if its working
Usmaan Ali
@usyyy
Jun 15 2016 11:18
Thanks @sorinr
CamperBot
@camperbot
Jun 15 2016 11:18
usyyy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @sorinr |http://www.freecodecamp.com/sorinr
Clyde
@hea-hea
Jun 15 2016 11:19
@sorinr http://codepen.io/hea-hea/pen/LZVZZw it didn't help :/
Sorin Ruse
@sorinr
Jun 15 2016 11:22
@hea-hea just a sec. i'm looking into it
Usmaan Ali
@usyyy
Jun 15 2016 11:23
Is there any way to go back in code pen? Made an error and lost some work
Ken Nawrocki
@nawrockp
Jun 15 2016 12:00
@usyyy did you try looking at your browser history? Codepen saves your code as a url variable.
@usyyy actually no it doesnt
Jessica
@QueenCode
Jun 15 2016 12:11
Can you guys give me feedback on my random quote machine? http://codepen.io/QueenCode92/pen/NrNaYJ
Sorin Ruse
@sorinr
Jun 15 2016 12:15
@QueenCode its nice. working also on desk and mobile on chrome and edge. didn't tested in ff or safari. maybe you should give to your div class="panel panel-default panel-edit" a margin top in % not px so it shows at the right place on desk and mobile. you can use @media in ur css to set that % or px as you wish
Jessica
@QueenCode
Jun 15 2016 12:25
ohh that makes a lot of sense.. i didn't think about that.. thanks @sorinr
CamperBot
@camperbot
Jun 15 2016 12:25
queencode sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jun 15 2016 12:26
@QueenCode welcome
Vishnu sharma
@vishnusharma0454
Jun 15 2016 12:40
hello world
CamperBot
@camperbot
Jun 15 2016 12:40

welcome to FreeCodeCamp @vishnusharma0454!

Paolo
@mav1283
Jun 15 2016 12:56
my fb share button is not working
Gerard Dawson
@gerarddawson
Jun 15 2016 13:00
I'm working on the local weather app. Can anyone point me to any resources or explanations on securely putting an API key in a url? Or is that just always a bad idea?
Clyde
@hea-hea
Jun 15 2016 13:01
@mav1283 in JS you have action defined for #sharefacebook but I don't see it in the html - can this be the cause?
Evan Davis
@davisec52
Jun 15 2016 13:01

Say, I'm trying to make my Simon app fully responsive.
I'm using Bootstrap but have been unable to get the game
to resize proportionately properly for cell phone
screens.

As it is, the game will squeeze together, but the
height remains the same. I understand that I should
not specify height and width in pixels, but
the app does not recognize percentage for the
height dimension.

I'd really appreciate any advice.

Here is the link to the pen:
http://codepen.io/davisec52/full/QyGOXG/

Clyde
@hea-hea
Jun 15 2016 13:06

@mav1283 when you change the html to

<a href="#" id="sharefacebook" class="sharelink" data-toggle="tooltip" title="Post on Facebook" data-placement="top">

it does something, but the Facebook api is still not working :) but that's always a progress ;)

Paolo
@mav1283
Jun 15 2016 13:08

hi guys need help here, i have included the facebook sdk in the js section but it's not working

http://codepen.io/mav1283/pen/wWWMdg

Clyde
@hea-hea
Jun 15 2016 13:09
@mav1283 you need to add #facebookshare to the <a> just like you did with #tweetbtn
Muhammad Farhan Bin Brohan
@FarhanBrohan
Jun 15 2016 13:19
I've been stuck here since 29th May...
Build a Personal Portfolio Webpage
kirbyedy
@kirbyedy
Jun 15 2016 13:22
@FarhanBrohan if you have a particular problem feel free to ask
Ronique Ricketts
@RoniqueRicketts
Jun 15 2016 13:23
hey guys howdo I find the twitchTV api
Muhammad Farhan Bin Brohan
@FarhanBrohan
Jun 15 2016 13:24
@kirbyedy Thanks but truthfully I do not know where to start and that seems to be the problem right now. I can just copy and paste from website sources to initiate but I fear I won't be learning much. But then when I think again, might as well since this thing has been hindering my process.
CamperBot
@camperbot
Jun 15 2016 13:24
farhanbrohan sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1117 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Ronique Ricketts
@RoniqueRicketts
Jun 15 2016 13:25
@kirbyedy thanks
CamperBot
@camperbot
Jun 15 2016 13:25
roniquericketts sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1118 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jun 15 2016 13:25
@FarhanBrohan you might want to check some video tutorials on how to build a website
there is plenty on youtube
Chase
@Belax8
Jun 15 2016 13:29
Hey guys! I just finished building this website for a small startup using Angular.js and Bootstrap. Will you guys check it out and let me know what you think? http://www.capdistributing.com/
kirbyedy
@kirbyedy
Jun 15 2016 13:31
@Belax8 says I am blacklisted :D
Chase
@Belax8
Jun 15 2016 13:31
@kirbyedy Really? That's weird.
Mmm Ok. I'll try to figure that out I guess. Thanks @kirbyedy
CamperBot
@camperbot
Jun 15 2016 13:34
belax8 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1119 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Chase
@Belax8
Jun 15 2016 13:47
Has anyone else been able to view the website? Or have you all gotten that error?
Muhammad Farhan Bin Brohan
@FarhanBrohan
Jun 15 2016 13:52
@kirbyedy Thanks for the link kirbyedy!
CamperBot
@camperbot
Jun 15 2016 13:52
farhanbrohan sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: farhanbrohan already gave kirbyedy points
NatixDev
@NatixDev
Jun 15 2016 13:52
Hi guys ! I'm working on the weather app, API works fine, but I would like to make an input that will offer the possibility to change the location if it is wrong, I don't know how I can call one more time my function to make it change and refresh all the informations : https://codepen.io/NatixDev/pen/beVdPp
Paolo
@mav1283
Jun 15 2016 14:00
guys do you really need to have an app id in order to use the facebook sdk for javascript?
mcorby17
@mcorby17
Jun 15 2016 14:01
@NatixDev Yeah I wanted to do that too but the openweather api doesn't have an accurate enough option... It doesn't take states into account so it could give you data for a different city on the US of the same name
btw does anyone know how I could make my temp fade out, change units, and fade back in? The way I have it now, you can still see the temp when it changes before fading out completely http://codepen.io/mcorby17/pen/xOwBzB?editors=1010
Still not sure why it won't load in this chat either :worried:
Ronique Ricketts
@RoniqueRicketts
Jun 15 2016 14:12
iis this the correct api for twitch tv?
Chase
@Belax8
Jun 15 2016 14:16
@RoniqueRicketts "https://api.twitch.tv/kraken/streams/freecodecamp?callback=?" is the one I used
mcorby17
@mcorby17
Jun 15 2016 14:20
  $("button").on("click", function(){
    $("#temp").fadeOut(1000);
    if(units === "imperial"){
      units = "metric";
      measurement = setDegree(units);
      setTimeout(changePageDegree(measurement),1000);
      $("#temp").fadeIn(1000);
    }
    else{
      units = "imperial";
      measurement = setDegree(units);
      changePageDegree(measurement);
      $("#temp").fadeIn(1000);
    }
  });
});
How can I delay my function that changes the measurement on the page? I've tried jQuery's .delay and javascripts setTimeout() and neither work
Ronique Ricketts
@RoniqueRicketts
Jun 15 2016 14:21
@Belax8 I am a bit lost. am I collecting the API's for all the listed channels? and also add a channel that streams 24/7???
JD Tadlock
@jdtdesigns
Jun 15 2016 14:30
@mcorby17 What kind of effect are you trying to achieve?
mcorby17
@mcorby17
Jun 15 2016 14:31
@jdtdesigns I wanted the temp on my page to fade away, then change to celsius/fahrenheit, then fade back in
But it changes before it fades away completely
Okonkwo Afam
@AfamO
Jun 15 2016 14:32
Hi everyone!
How do I access all the portfolio contents just by scrolling?
My links are not moving from about to portfolio to contact buttons when scrolling either up or down:how do I correct this?
Chase
@Belax8
Jun 15 2016 14:35
@RoniqueRicketts Basically you can call .forEach() and then use the .getJSON() for each of the channels in your array
JD Tadlock
@jdtdesigns
Jun 15 2016 14:50
@mcorby17 Something like this? http://jsbin.com/xixeso/edit?css,js,output
mcorby17
@mcorby17
Jun 15 2016 14:53
@jdtdesigns yes exactly! thanks i'll try to use that
CamperBot
@camperbot
Jun 15 2016 14:53
mcorby17 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 488 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 15:11
@mcorby17 Here's another one without using a timeout that offers almost the same effect
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jun 15 2016 15:22
Does anyone here knows great resources to learn nodejs and express? I don't lik these of freecodecamp'
His courses are great ;)
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jun 15 2016 15:23
@jdtdesigns Thanks !
CamperBot
@camperbot
Jun 15 2016 15:23
thomlom sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ronique Ricketts
@RoniqueRicketts
Jun 15 2016 15:35
Hey guys, doesn't anyone know any free course on understanding APIs? I think I missed something.:(
Evan Davis
@davisec52
Jun 15 2016 15:35

Say, I'm trying to make my Simon app fully responsive.
I'm using Bootstrap but have been unable to get the game
to resize proportionately properly for cell phone
screens.

I posted this question earlier, but it did not
gain any traction. I'd really appreciate some help.

As it is, the game will squeeze together, but the
height remains the same. I understand that I should
not specify height and width in pixels, but
the app does not recognize percentage for the

Here is the link to the pen:

Project Link - http://codepen.io/davisec52/full/QyGOXG/

Sorry, my attempt at not embedding the pen failed.
DumeD
@DumeD
Jun 15 2016 15:38
hi guys
i have a probel with an image
i have set the background-image on the css and also i made it to fill all the background, but how can i make the image responsive?
the image is on the background of the jumbotron
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Jun 15 2016 15:40
Maybe you should add the class img-responsive to your img
DumeD
@DumeD
Jun 15 2016 15:42
but how? i have set the background-image on the css, not in teh html
JD Tadlock
@jdtdesigns
Jun 15 2016 15:42
@davisec52 I think i said it before, but bootstrap is totally not what you should be using for this. Use absolutes for widths and media queries for making it smaller on small devices.
Evan Davis
@davisec52
Jun 15 2016 15:44
@jdtdesigns Thank you for the advice!
CamperBot
@camperbot
Jun 15 2016 15:44
davisec52 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Luke
@lukenetti3
Jun 15 2016 15:49
Hi guys, I am working on the Random Quote Machine project. When I write the JSON script in code pen, does that go under the Javascript section or under the HTML? Sorry, this is probably a stupid question.
Also, if it does go in the Javascript section do I need to change anything for it to work, because I can't get my click button to work.
JD Tadlock
@jdtdesigns
Jun 15 2016 15:52
@lukenetti3 If you're using jQuery, you need to include jQuery in Settings->Javascript->Quick Add
The js should be in the js tab
Luke
@lukenetti3
Jun 15 2016 15:55
@jdtdesigns I tried adding that and it still isn't working. I am just trying to get started by building somethings similar to the challenge where the text changed. Here is my code pen
@jdtdesigns Never mind, I got it. I was forgetting a piece of code. Thanks!
CamperBot
@camperbot
Jun 15 2016 15:58
lukenetti3 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 491 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 15:58
@lukenetti3 You're just missing a '$' in the js. Also, you don't need to include jquery UI. In the html, you should put the quote text in a <p> element instead of a div
Luke
@lukenetti3
Jun 15 2016 15:59
@jdtdesigns Okay, thanks, I will make those changes. Is this the correct approach for this type of problem?
CamperBot
@camperbot
Jun 15 2016 15:59
lukenetti3 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 15 2016 15:59
@lukenetti3 For which problem? The text?
Luke
@lukenetti3
Jun 15 2016 16:01
@jdtdesigns Sorry I mean for the project of the random quote machine. Just the idea in general, using the click function that approach.
JD Tadlock
@jdtdesigns
Jun 15 2016 16:02
@lukenetti3 The click is correct, but you should try to use an api for the challenge, which is what they want you to do. ;)
Luke
@lukenetti3
Jun 15 2016 16:04
@jdtdesigns Oh I see. So like I did in the challenges with the cat photos?
Gerard Dawson
@gerarddawson
Jun 15 2016 16:09
@lukenetti3 lots of people seem to use the forismatic API
Luke
@lukenetti3
Jun 15 2016 16:18
@gerarddawson Thank you. How am I supposed to find these things? Are these online libraries with all this information?
CamperBot
@camperbot
Jun 15 2016 16:18
lukenetti3 sends brownie points to @gerarddawson :sparkles: :thumbsup: :sparkles:
:cookie: 245 | @gerarddawson |http://www.freecodecamp.com/gerarddawson
N1A2
@N1A2
Jun 15 2016 16:19
Help - how do i amend the code so that the slider pictures go under the navigation bar - not over it... http://codepen.io/N1A2/pen/LNMZNE
CamperBot
@camperbot
Jun 15 2016 16:19
no wiki entry for: - how do i amend the code so that the slider pictures go under the navigation bar - not over it httpcodepenion1a2penlnmzne
Gerard Dawson
@gerarddawson
Jun 15 2016 16:23
@lukenetti3 Yes, APIs are application program interfaces, which are ways that people like you and I can interact with the big sets of data that other websites have.
So, you can do a google search for "quotes API" for example, and you'll find several.
Or you look for something like, "sports statistics API" and find places to access the stats that other websites have on their databases.
Jonathan
@JonKaric
Jun 15 2016 16:24
@N1A2 Hey, you need to adjust the z-index on your header. You have one now : z-index:100%; but it doesnt take % as a valid value. Just use z-index:2;
Gerard Dawson
@gerarddawson
Jun 15 2016 16:25
This message was deleted
Luke
@lukenetti3
Jun 15 2016 16:28
Thank you! That makes more sense.
@gerarddawson Thank you! That makes more sense
CamperBot
@camperbot
Jun 15 2016 16:28
lukenetti3 sends brownie points to @gerarddawson :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave gerarddawson points
tewfiq
@Tewfiq60
Jun 15 2016 16:38
please how do "I've completed this challenge" button and include a link to your CodePen.
which link do i put into the url
Gerard Dawson
@gerarddawson
Jun 15 2016 16:40
version 1.0 of my weather app...does it work for you?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 16:41
@gerarddawson Yes, it shows my location and temperature.
Gerard Dawson
@gerarddawson
Jun 15 2016 16:42
@KoniKodes thank you!
CamperBot
@camperbot
Jun 15 2016 16:42
:cookie: 297 | @konikodes |http://www.freecodecamp.com/konikodes
gerarddawson sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
Fourbits
@Fourbits
Jun 15 2016 16:44
@gerarddawson My ad-blocker is blocking your geolocation API. Why not use navigator.geolocation.getCurrentPosition?
Sorin Ruse
@sorinr
Jun 15 2016 16:44
@gerarddawson it reports the right location for me
Gerard Dawson
@gerarddawson
Jun 15 2016 16:48
@fourbits hmm...I guess when I was testing it on codepen, it was saying that getCurrentPosition was not supported, maybe on the computer I was using. So, i went with the IP API
Fourbits
@Fourbits
Jun 15 2016 16:56
@gerarddawson Oh, that's odd. What browser are you using?
Grant Walker
@grantconnerywalker
Jun 15 2016 16:58

Hi there, also working on weather app. http://codepen.io/grantconnerywalker/full/BzjZWo/

I think I am more or less done but for some reason the app won't work at all if it is accessed through https (e.g. https://codepen.io/grantconnerywalker/full/BzjZWo/). Any idea why this is or how I can fix it?

DumeD
@DumeD
Jun 15 2016 17:02
how do i get rid of the white space between the navbar and the jumbotron? http://codepen.io/emud/pen/ZOOByd?editors=1100
Toni Shortsleeve
@KoniKodes
Jun 15 2016 17:03
@Belax8 It looks good on my pc. But when I'm on a smaller screen the products menu won't drop down.
Chase
@Belax8
Jun 15 2016 17:05
@KoniKodes I turned off the drop down on mobile. I just turn it into a link.
Toni Shortsleeve
@KoniKodes
Jun 15 2016 17:06
@Belax8 In that case, it looks great! :-)
Paul Borawski
@iAmNawa
Jun 15 2016 17:06
@DumeD .navbar {
border-radius: 0%;
background-color: #8CD790;
margin-bottom: 0px;
}
Chase
@Belax8
Jun 15 2016 17:07
Thanks @KoniKodes
CamperBot
@camperbot
Jun 15 2016 17:07
belax8 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @konikodes |http://www.freecodecamp.com/konikodes
Fourbits
@Fourbits
Jun 15 2016 17:07
@grantconnerywalker This is due to "mixed content" problems. If you press ctrl-shift-J, you can see a debug console in Firefox or Chrome
Toni Shortsleeve
@KoniKodes
Jun 15 2016 17:07
@Belax8 Glad I could help. Thank you for the brownie.
CamperBot
@camperbot
Jun 15 2016 17:07
konikodes sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @belax8 |http://www.freecodecamp.com/belax8
Fourbits
@Fourbits
Jun 15 2016 17:08
@grantconnerywalker It will tell you that you're trying to access at an HTTP destination from an HTTPS origin, and your browser will block that for security.
You should always go HTTP to HTTP, or HTTPS to HTTPS. You can try detecting the client's protocol and changing the JSON call to match.
Also note that your site will never work on Chrome over HTTP, because it doesn't allow geolocation services over HTTP.
Toni Shortsleeve
@KoniKodes
Jun 15 2016 17:09
@Fourbits How can you detect the client protocol?
DumeD
@DumeD
Jun 15 2016 17:09
@iAmNawa ehehe thaks a lot man
@iAmNawa thanks
CamperBot
@camperbot
Jun 15 2016 17:09
dumed sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @iamnawa |http://www.freecodecamp.com/iamnawa
Fourbits
@Fourbits
Jun 15 2016 17:11
@KoniKodes
if (window.location.protocol == 'http:'){

}
Grant Walker
@grantconnerywalker
Jun 15 2016 17:11
@Fourbits Thank you, I will see if I can figure it out from there!
CamperBot
@camperbot
Jun 15 2016 17:11
grantconnerywalker sends brownie points to @fourbits :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @fourbits |http://www.freecodecamp.com/fourbits
Paul Borawski
@iAmNawa
Jun 15 2016 17:11
@DumeD Check your one on one conversations, I wrote you a message
Fourbits
@Fourbits
Jun 15 2016 17:11
You can also check for 'https:'
@grantconnerywalker Hope that helped!
Toni Shortsleeve
@KoniKodes
Jun 15 2016 17:12
@Fourbits Thank you. I had not thought to do that.
CamperBot
@camperbot
Jun 15 2016 17:12
konikodes sends brownie points to @fourbits :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @fourbits |http://www.freecodecamp.com/fourbits
Sorin Ruse
@sorinr
Jun 15 2016 17:25
This message was deleted
Sorin Ruse
@sorinr
Jun 15 2016 17:33
why was my message deleted? coz i did not do it by myself
Sorin Ruse
@sorinr
Jun 15 2016 17:49
it was about: what my var myvar;="test" globally defined i just try to redefine it $( document ).ready(function() {
val myvar= "helo";} what will be myvar value?
Luke
@lukenetti3
Jun 15 2016 17:49
Hi guys, I am working on the Random Quote Machine project. I am having some trouble. I realize I have to use APIs. So I thought I found something online to use, but not sure how to incorporate it. Am I using the json.forEach to loop through like the challenges involving APIs?
I am just not sure what some of that stuff in those API challenges were. I tried to figure it out and make meaning of some of it but I was confused.
codercooooder
@codercooooder
Jun 15 2016 17:54
yo I don't know that this is really the place, but I need some help with art/illustration... is there anyone here who knows how to draw/illustrate?
I have an image I would like feedback on.
Sorin Ruse
@sorinr
Jun 15 2016 17:57
@lukenetti3 you can take some inspiration from here: http://codepen.io/sorinr/pen/VaJKrw
Luke
@lukenetti3
Jun 15 2016 17:59
@sorinr Thank you. I really don't want to look at the code and see if I can do it myself. Can you maybe just guide me on how you use the API? Is it like the cat images that were uploaded in the challenges prior to the project?
CamperBot
@camperbot
Jun 15 2016 17:59
:cookie: 361 | @sorinr |http://www.freecodecamp.com/sorinr
lukenetti3 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Paul Borawski
@iAmNawa
Jun 15 2016 17:59
@sorinr nice one!
Sorin Ruse
@sorinr
Jun 15 2016 18:04
@lukenetti3 as u saw i'm usig/api.forismatic.com/api. nothing special
Luke
@lukenetti3
Jun 15 2016 18:06
@sorinr So you don't need to use the json.forEach call to loop through the json elements like we did in the previous few challenges?
andreas2249
@andreas2249
Jun 15 2016 18:08
Hello, Campers. Tinkering with Bootstrap, containers, and rows today. I've used the 'well' class and put some text on the screen in columns. The borders of Sections 1, 2, & 3 are touching. I'd like to add a bit of space between them. When I add margin though, they exceed the width of the container, and Section 3 drops to the row below. I'd like to "lock" or "fix" the three sections + have a bit of space between them. Your thoughts, please? Here's my CodePen: https://codepen.io/andreas2249/pen/wWGVgg
Thanks in advance. :)
Sorin Ruse
@sorinr
Jun 15 2016 18:10
@lukenetti3 you should use for each when you have data to loop through
Luke
@lukenetti3
Jun 15 2016 18:13
@sorinr Sorry, I am very confused. I assumed the quotes would be similar to the challenges that we learned, that involved the getJSON method. I don't even know what ajax is...Was it covered in the challenges? So does the API generate a new quote each time? I don't need to loop through quotes?
@sorinr This is what I was trying to do.
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
codercooooder
@codercooooder
Jun 15 2016 18:17
blob
guys I have some ugly art I made that I need help improving..ignore the color, I want help with the composition and the mountains.. The shields needs to stay the way they are:
it is for an educational webpage
anacou
@anacou
Jun 15 2016 18:20
how can I create a navigation bar with buttons and everything^
?
Hamza Anwer
@ImHamzaAnwer
Jun 15 2016 18:22
@anacou how do u want to create ? i mean by css or using bootstrap?
anacou
@anacou
Jun 15 2016 18:22
what is the simplest way?
Hamza Anwer
@ImHamzaAnwer
Jun 15 2016 18:22
depends on u
anacou
@anacou
Jun 15 2016 18:23
I would like to use CSS.
codercooooder
@codercooooder
Jun 15 2016 18:23
@anacou you have to be specific about what you want..describe what you mean by buttons and arrangement.
anacou
@anacou
Jun 15 2016 18:25
oops found the answer to my question on w3schools! thanks @codercooooder and @ImHamzaAnwer
CamperBot
@camperbot
Jun 15 2016 18:25
anacou sends brownie points to @codercooooder and @imhamzaanwer :sparkles: :thumbsup: :sparkles:
:cookie: 24 | @codercooooder |http://www.freecodecamp.com/codercooooder
:cookie: 156 | @imhamzaanwer |http://www.freecodecamp.com/imhamzaanwer
codercooooder
@codercooooder
Jun 15 2016 18:26
sure @anacou you are welcom
Grant Walker
@grantconnerywalker
Jun 15 2016 18:30

@lukenetti3 I don't know if this helps but you can get a random quote by passing http://quotesondesign.com/wp-json/posts?filter[orderby]=rand to your $.getJSON

As you can see by just clicking it, it will just return some random JSON. From there, you can just grab the json.title and json.content for use in your app

mcorby17
@mcorby17
Jun 15 2016 18:31
Hey guys! Does anyone know how I could make my search input box smaller without messing up the <p> element below it? I tried using bootstrap's "col" classes but they skew the search bar and the element below it http://codepen.io/mcorby17/pen/vKGPmQ
Luke
@lukenetti3
Jun 15 2016 18:32
@grantconnerywalker How will I grab the title and content? just by concatonating the json.content and the json.title?
I don't quite understand. When I the Javascript part runs why it won't display the quote.
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
Grant Walker
@grantconnerywalker
Jun 15 2016 18:35

So your getJSON will look sort of like this probably:

$.getJSON(http://quotesondesign.com/wp-json/posts?filter[orderby]=rand , function(json) { // more code here }

where that json is whatever http://quotesondesign.com/wp-json/posts?filter[orderby]=rand responds with. You can just assign them to a var or something, e.g. var = json.content

mcorby17
@mcorby17
Jun 15 2016 18:36
@lukenetti3 yeah you would end up doing $(".message").html(json.content);
Grant Walker
@grantconnerywalker
Jun 15 2016 18:36
The ID of your button in the HTML appears different from the ID in the Javascript
i.e. in your html the button has id="newQuote" but your javascript is looking for if something with id="getMessage" is clicked
Luke
@lukenetti3
Jun 15 2016 18:39
@grantconnerywalker Yes, sorry I forgot to change those. So something like this then?
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
@grantconnerywalker Also, will I need to end up using json.forEach?
Grant Walker
@grantconnerywalker
Jun 15 2016 18:41

Yeah that looks better. Something I forgot is that this api response is actually returning an array, so I think you may need to do this:

$(".quote").html(json[0].content);

You may need json.forEach if you change the API call to get multiple quotes.
But I think you can get away with not using it and just having it $.getJSON every time it is clicked
Luke
@lukenetti3
Jun 15 2016 18:45
@grantconnerywalker Even with the ...(json[0].content) it's still not displaying anything. And ooh I see what your saying for that part. Any reason why I can't get it to display still?
shivamsonu29
@shivamsonu29
Jun 15 2016 18:46
$(document).ready(function(){

  $.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp', function(data){
    console.log(data);
    $("#Sw").html(data);
});
});
Hi everyone, the above program is showing details of api in console but not showing in my result page. i have used $("#Sw").html(data); statement to output the data. why it's not working...
Grant Walker
@grantconnerywalker
Jun 15 2016 18:48

@lukenetti3

I think I see why. It makes the one call but then it will just get the first element (json[0]) from the response each time. Try this api call for the $.getJson: http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=

And then write some JS code to get you a random number which you can plug in where it says callback=

Sorry if that is not clear

Thomas Emilsson
@ThomasEmilsson
Jun 15 2016 18:48
Who do I talk to If i found a minor issue with a challenge working when it shouldn't?
Luke
@lukenetti3
Jun 15 2016 18:51
@grantconnerywalker Okay I see what your saying. I was just plugging numbers in to see and it was giving me different quotes, so hopefully that should work better. Thanks! Where did you find that though, I have been searching forever for quotes like that.
CamperBot
@camperbot
Jun 15 2016 18:52
lukenetti3 sends brownie points to @grantconnerywalker :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @grantconnerywalker |http://www.freecodecamp.com/grantconnerywalker
Luke
@lukenetti3
Jun 15 2016 18:52
@grantconnerywalker I mean those api calls
Grant Walker
@grantconnerywalker
Jun 15 2016 18:53
@lukenetti3 Sure thing! As for that, if you just search google for "quote json api" it should be one of the first hits. :)
Luke
@lukenetti3
Jun 15 2016 18:55
@grantconnerywalker Oh, I see what your talking about. Thanks again!
CamperBot
@camperbot
Jun 15 2016 18:55
lukenetti3 sends brownie points to @grantconnerywalker :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave grantconnerywalker points
anacou
@anacou
Jun 15 2016 18:56
My About heading is being hidden by my navigation bar... How can I fix this? https://codepen.io/anacou/pen/VjaNwJ
Ken Haduch
@khaduch
Jun 15 2016 18:59
@anacou - try adding padding-top: 50px; to the body in your CSS panel. That usually does it.
body {
  padding-top: 50px;
}
anacou
@anacou
Jun 15 2016 19:01
thank you @khaduch ! you are awesome!
CamperBot
@camperbot
Jun 15 2016 19:01
anacou sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1327 | @khaduch |http://www.freecodecamp.com/khaduch
ALINATSUI
@ALINATSUI
Jun 15 2016 19:01
hey y'all...I'm working on weather app and not sure if it's me, but it's pulling the incorrect city as well as incorrect temperature...Can any kind soul check? Here's the link to my codepen: http://codepen.io/alinawtsui/pen/grJvro
Grant Walker
@grantconnerywalker
Jun 15 2016 19:03
@ALINATSUI It got the correct temperature and city for my location.
ALINATSUI
@ALINATSUI
Jun 15 2016 19:04
Thanks @grantconnerywalker ! This is seriously weird...
CamperBot
@camperbot
Jun 15 2016 19:04
alinatsui sends brownie points to @grantconnerywalker :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @grantconnerywalker |http://www.freecodecamp.com/grantconnerywalker
Ken Haduch
@khaduch
Jun 15 2016 19:05
@ALINATSUI - it looks like it worked for me, at least the location and temp seems to be pretty accurate. There is something broken on the page, though - there is a broken image icon. You can put all of your stylesheet references, fonts, etc. Into the CSS config panel "External resources" And you should not have the <html>,<head>, <body> tags in the CodePen editor - it plugs everything into a template that already has those.
ALINATSUI
@ALINATSUI
Jun 15 2016 19:05
@khaduch Oh yeah, I know about the broken image icon (it
is supposed to be a weather icon)...I was going to work on that, until I realized that the location and temperature was not correct...
Ken Haduch
@khaduch
Jun 15 2016 19:07
@ALINATSUI - it actually looks like you have most of those things in the external CSS slots? I didn't compare one for one, though. That's where they belong if you don't have them all there. Same for the JS modules - in the JS config.
ALINATSUI
@ALINATSUI
Jun 15 2016 19:08
@khaduch thanks for the tip on "external resources"....as well as not having to include the <html>, <head>, <body> tag..guess I'm used to doing it...
CamperBot
@camperbot
Jun 15 2016 19:08
alinatsui sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1328 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 15 2016 19:09
@ALINATSUI - yes, the thing is that you do need them there, it's just that CodePen puts them in, so then you have them in multiple times, which is invalid HTML. I wish they had an option to just not use the template and put your own code in there, it would make it easier to import things from another editor...
ALINATSUI
@ALINATSUI
Jun 15 2016 19:10
Right @khaduch ....but I'm more concerned as to why it's not pulling up the right location for me and temperature....
I even regenerated a new weather api key...but same result...
Ken Haduch
@khaduch
Jun 15 2016 19:13
@ALINATSUI - how far off is it from your actual location? It was spot on for me? Check your console (browser console) for any errors, maybe it's not pulling the location for you and defaulting to something else?
Jack Reinke
@jreinke10
Jun 15 2016 19:19
if i want an image to link to a website should i be able to just do <img src="photo.com" href="link"></img>
ALINATSUI
@ALINATSUI
Jun 15 2016 19:20
@khaduch Well, it states that I'm in another borough, probably 8 miles off and temp says that it's 90 degrees, and that's off by 7 degrees...
Ken Haduch
@khaduch
Jun 15 2016 19:20
@jreinke10 - it depends on whether or not the site allows it - for instance, imgur does not allow it. And you don't need the </img> with HTML5, and I don't think you need the "href" attribute, either?)
Jack Reinke
@jreinke10
Jun 15 2016 19:22
if not the href how do i get the image to link to X page
@khaduch
Darrin
@ddschmitz
Jun 15 2016 19:26
Is there an option with bootstrap to make the heights of column boxes in a row the same?
I saw some people say you can use the .row-eq-height class but that didn't do anything for me.
Ken Haduch
@khaduch
Jun 15 2016 19:27

@jreinke10 - something like this:

 <img src="smiley.gif" alt="Smiley face" height="42" width="42">

And the src= can be src="http://URL_TO_YOUR_IMAGE/image.jpg"

@ALINATSUI - I'm not sure with weather underground - if they'll give you a precise location or if it is one of their "network" of weather stations? If you go to their site and put your location in, does it give you the accurate location, or something close by?
ALINATSUI
@ALINATSUI
Jun 15 2016 19:31
@khaduch I'm looking at their site now and it looks like it's based off of weather stations ..ugh, I really don't want to reconfigure my weather app to use Openweather's api...
Ken Haduch
@khaduch
Jun 15 2016 19:31
@ddschmitz - it looks like you want something more like a table, where it makes the row height the same all across the row?
Darrin
@ddschmitz
Jun 15 2016 19:32
Yeah sort of. If you check in the codepen I have red borders around all the blocks. All I want is for them to be the same height. I was trying to figure out if bootstrap had a simple class to do this.
Ken Haduch
@khaduch
Jun 15 2016 19:32
@ALINATSUI - well, it seemed like that was a possibility, knowing what I know about weather underground's site. I like their site, I haven't tried their API yet.
ALINATSUI
@ALINATSUI
Jun 15 2016 19:33
@khaduch I'm going to check again tomorrow..maybe it
is just not working today...I checked accuweather.com, and the temperature is ten degrees off than what weather underground has....
Ken Haduch
@khaduch
Jun 15 2016 19:34
@ddschmitz - I found something interesting - I didn't know about this, but I'll paste the URL from my other computer... hang on.
@ddschmitz - I don't know if this is "easy" to do, but http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height - you can check it out?
Richard Andrews
@Whiplash5057
Jun 15 2016 19:35
Guys need help
have an error
Ken Haduch
@khaduch
Jun 15 2016 19:36
@Whiplash5057 - what's up?
Richard Andrews
@Whiplash5057
Jun 15 2016 19:36
@khaduch Hey ...!!
:smile:
My console is showing an error
can't seem to find it
need help
Ken Haduch
@khaduch
Jun 15 2016 19:36
@Whiplash5057 - how are you - let me look at the console...
Richard Andrews
@Whiplash5057
Jun 15 2016 19:37
@khaduch I'm actually doin great really ...only 2 projects left for me...!!
@khaduch How are you...?
Ken Haduch
@khaduch
Jun 15 2016 19:38
@Whiplash5057 - here is something that will help you, I think - go to the JS config box, and hit "Analyze JS" in the bottom corner. Lots of red things get flagged. I think that one of them is that you have this: $(".time").css("color":"#2b0521"); in a few places, and I think that the ":" should be a comma.
Richard Andrews
@Whiplash5057
Jun 15 2016 19:39
@khaduch Wow...lemme see...!!!
i'll come back
Ken Haduch
@khaduch
Jun 15 2016 19:40
@Whiplash5057 - a couple quick edits and it looks like you're in better shape... that's a handy tool, that "JS Hint"
@Whiplash5057 - I'm answering your question - glad to hear that you're doing okay. I'm spinning my wheels trying to do too many things at once. I spend a lot of time lurking around these chat rooms, I'm addicted to helping people, I guess... :) But I have projects in progress...
Jason Haeger
@jhaeger
Jun 15 2016 19:42
Ken's right. If you wanted to use the colon, you should have wrapped it in {}'s
Which essentially allows JSON within the method.
anacou
@anacou
Jun 15 2016 19:43
How can I make the contact me form on the following page look better?
Richard Andrews
@Whiplash5057
Jun 15 2016 19:44
@khaduch You are actually that good...!! I tried helping ppl ...!! ended up confusing myself ...!!! :smile: !!! But learned a lot by doing that....!!!
@khaduch and js Hint worked like a charm ...!!!
AWESOME
chudamani
@chudamani
Jun 15 2016 19:46
Hello World!!
CamperBot
@camperbot
Jun 15 2016 19:46

welcome to FreeCodeCamp @chudamani!

Jason Haeger
@jhaeger
Jun 15 2016 19:48

@anacou Try this for starters: form input[type="text"] {
width:100%;
}
form input[type="submit"],
form input[type="reset"] {
width:49.7%
}

contact {

background-color:lightgrey;
padding:20px;
}

@anacou that should get you started.
Ken Haduch
@khaduch
Jun 15 2016 19:51
@Whiplash5057 I find that helping people has helped me a lot - I get to think about how things work and how to explain them... I'm just stuck in this mode at the time! I really love helping people... I'm glad that the JS Hint worked - it doesn't always give you clear answers, but it does help most of the time. Good luck with the projects, see you around!
Colin Harrison
@giraffesinspace
Jun 15 2016 19:54
Does anyone know why a <textarea> element might load with blank spaces rather than it's placeholder text?
Paul Borawski
@iAmNawa
Jun 15 2016 19:55
<textarea> i’ve never heard of that @giraffesinspace
shivamsonu29
@shivamsonu29
Jun 15 2016 19:56
$(document).ready(function(){

  $.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp', function(data){
    console.log(data);
    $("#Sw").html(data);
});
});
$("#Sw").html(data); is not working!! is anybody having any idea about this??
Renata
@rsip22
Jun 15 2016 19:56
show us the code, @giraffesinspace
Colin Harrison
@giraffesinspace
Jun 15 2016 19:56
<div class="row">
<textarea rows="4" id="comment" placeholder="comment or question" class="form-control">
</textarea>
</div>
@rsip22
I can post the link to the code pen if you need so you can see how it loads
Renata
@rsip22
Jun 15 2016 19:58
yes, give me the link, because here this code loads correctly
it's at the bottom
Ken Haduch
@khaduch
Jun 15 2016 20:01
@Whiplash5057 - I imagine that you are not anywhere near completion with your clock timer, but one thing to watch out for is the ability to have multiple setInterval timers running. Right now I have the clock going crazy because I clicked "start" a few times. You'll want to make sure that that cannot happen by putting some control logic around the timer - make sure that if you have one started that you don't allow another one to start, etc. Just thought I would pass that along. Once again - good luck!
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:03
anyone knows why i have 40px padding on left when i resize to phone size?
Ken Haduch
@khaduch
Jun 15 2016 20:04
@giraffesinspace take the spaces out between the opening <textarea> and the closing </textarea> - just have them butted up against each other - it is putting blank spaces in there.
Renata
@rsip22
Jun 15 2016 20:05
Yup, what @khaduch said.
I don't know how to give brownie points here. u.u
<textarea rows="4" id="comment" placeholder="comment or question" class="form-control"></textarea>
Colin Harrison
@giraffesinspace
Jun 15 2016 20:06
@khaduch I got it you're right
Renata
@rsip22
Jun 15 2016 20:06
this should work, @giraffesinspace
Colin Harrison
@giraffesinspace
Jun 15 2016 20:06
@khaduch thank you
CamperBot
@camperbot
Jun 15 2016 20:06
giraffesinspace sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1329 | @khaduch |http://www.freecodecamp.com/khaduch
Colin Harrison
@giraffesinspace
Jun 15 2016 20:06
and @rsip22 thanks
CamperBot
@camperbot
Jun 15 2016 20:06
giraffesinspace sends brownie points to @rsip22 :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @rsip22 |http://www.freecodecamp.com/rsip22
Colin Harrison
@giraffesinspace
Jun 15 2016 20:06
I couldn't see the spaces bc of how it was organized in code pen
Renata
@rsip22
Jun 15 2016 20:09
how does someone give brownie points in here?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:10
@rsip22 click on that person's @name and say thank you
CamperBot
@camperbot
Jun 15 2016 20:10
konikodes sends brownie points to @rsip22 and @name :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for name
:cookie: 134 | @rsip22 |http://www.freecodecamp.com/rsip22
Renata
@rsip22
Jun 15 2016 20:10
@khaduch thank you ?
CamperBot
@camperbot
Jun 15 2016 20:10
rsip22 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1330 | @khaduch |http://www.freecodecamp.com/khaduch
Renata
@rsip22
Jun 15 2016 20:10
owwww
@KoniKodes thank you so much! \o/
CamperBot
@camperbot
Jun 15 2016 20:11
rsip22 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @konikodes |http://www.freecodecamp.com/konikodes
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:11
:-)
Colin Harrison
@giraffesinspace
Jun 15 2016 20:13
is it not possible to change the color and background of <button> elements?
Ken Haduch
@khaduch
Jun 15 2016 20:13
@giraffesinspace - you should be able to change them - bootstrap does it with the different .btn-info, etc. classes?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:14
@ALINATSUI Works for me - both city and temp. A couple of things, wunderground sometimes just finds the nearest weather station and it shows as a different location. My test was Oceanee when my user was in Daytona.
Ken Haduch
@khaduch
Jun 15 2016 20:15
@hristijankiko - you are using the container class, which has a fixed-width and padding-left and padding-right built into the classes? Is that what you're seeing?
Ray Liu
@mania7539
Jun 15 2016 20:15
Hey campers, I am about to finish my Wikipedia project, but I found the link text of it after querying will exceed the page , if you are keen , can you help giving me some opinions and advice to solve it? My link here: http://codepen.io/mania7539/pen/YWqZxw
ALINATSUI
@ALINATSUI
Jun 15 2016 20:16
@konikodes I appreciate you getting back to me...it's just bizarre...the location that's coming up was where I was yesterday...but not today, it's like weather underground is caching the location....ugh.
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:16
@khaduch I dont think it should have any padding when its at the minimum size(phone size) and the padding comes from the row class i think
Ray Liu
@mania7539
Jun 15 2016 20:17
I mean when resizing to a smaller size browser
Renata
@rsip22
Jun 15 2016 20:18

@giraffesinspace This site has examples for all pre-formated colours for buttons, all you have to change is their classes to get one of these colors. If you want a color that's different than the pre-formated, then you have to get the code for formatting buttons from the bootstrap.css, copy to your CSS and change everything.

https://getbootstrap.com/examples/theme/

Ken Haduch
@khaduch
Jun 15 2016 20:18
@hristijankiko - if i look at it on a real phone, I don't see anything at all,, other than a gray bar at the top...
Colin Harrison
@giraffesinspace
Jun 15 2016 20:18
thanks you are being extra helpful today @rsip22
CamperBot
@camperbot
Jun 15 2016 20:18
giraffesinspace sends brownie points to @rsip22 :sparkles: :thumbsup: :sparkles:
:warning: giraffesinspace already gave rsip22 points
Renata
@rsip22
Jun 15 2016 20:19
I try, @giraffesinspace ;)
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:19
you are not seeing this? http://prntscr.com/bgu0vz
Ken Haduch
@khaduch
Jun 15 2016 20:20
@hristijankiko - oh, the list has a 40px padding built into it, of course! That's what you're seeing.
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:20
the padding on the left
@khaduch so i should just remove the padding from the ul?
Ken Haduch
@khaduch
Jun 15 2016 20:20
@hristijankiko - the <ul>, I mean... you can probably wipe that out with CSS
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:21
@khaduch ok thanks
CamperBot
@camperbot
Jun 15 2016 20:21
hristijankiko sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1331 | @khaduch |http://www.freecodecamp.com/khaduch
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:21
@ALINATSUI I hadn't thought about a cache situation... I think I need to allow the user to choose a different city/state...
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:22
what do you use with bootstrap to make the font size bigger?
Ken Haduch
@khaduch
Jun 15 2016 20:22
@hristijankiko - yes, just add padding-left: 0; But make sure that's what you want to do, if you want to use a list anywhere else and you'd want that styling. You can make a class for the `<ul class="myUL"> and style the class accordingly? Sometimes changing the defaults causes undesirable problems. But you'd know what was happening...
Hristijan Gjorgjievski
@hristijankiko
Jun 15 2016 20:23
i can just add padding if i need it later
khaduch @khaduch - hitting the road for now - happy coding everyone!!!!
ALINATSUI
@ALINATSUI
Jun 15 2016 20:23
@KoniKodes Well, caching is the only thing I can think of as to why this is happening..it worked fine before...
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:24
@ALINATSUI Where would we go to research that, and find the solution?
ALINATSUI
@ALINATSUI
Jun 15 2016 20:26
@KoniKodes I have no idea...how the weather app is supposed to work is it's supposed to detect the user's geolocation (automatically) and provide the weather for that area.
Colin
@finkbeca
Jun 15 2016 20:30
Hey can you guys help me for some reason the width on these images won't change. The height will though could some one help me resolve this problem. I am thoroughly confused. http://codepen.io/buddyfinkbear/pen/YWXLPZ
Renata
@rsip22
Jun 15 2016 20:33
@finkbeca it's the class you're specifying that is messing it up

this:

col-md-offset-3 col-md-1

should go into <row class="HERE">
not on <img class="NOT HERE">
go on the bootstrap website and read a bit about how the grid system works and that should be enough for you to figure out how it should be coded...
Colin
@finkbeca
Jun 15 2016 20:37
so i should have a separate row tag and embed the image in it? Thank you I will look on there website also
@rsip22 Thanks though!
CamperBot
@camperbot
Jun 15 2016 20:37
finkbeca sends brownie points to @rsip22 :sparkles: :thumbsup: :sparkles:
:cookie: 135 | @rsip22 |http://www.freecodecamp.com/rsip22
Renata
@rsip22
Jun 15 2016 20:40

It depends on how you wanna display the images, @finkbeca

Usually, with bootstrap, you'll have a code that resembles this:
<!-- Three columns of images -->

<div class="row">

<div class="col-lg-4 AND OTHER CLASSES">
<img> IMAGE</img>
</div>

    <div class="col-lg-4 AND OTHER CLASSES">
           <img> IMAGE</img>
    </div>

    <div class="col-lg-4 AND OTHER CLASSES">
           <img> IMAGE</img>
    </div>
grr, it's messed up
Colin
@finkbeca
Jun 15 2016 20:42
so basically I should label the columns in a div and not directly in the image? @rsip22
Renata
@rsip22
Jun 15 2016 20:42
yes, pretty much
Colin
@finkbeca
Jun 15 2016 20:44
@rsip22 Thank you again for all your help it truly means a lot!
CamperBot
@camperbot
Jun 15 2016 20:44
:warning: finkbeca already gave rsip22 points
finkbeca sends brownie points to @rsip22 :sparkles: :thumbsup: :sparkles:
Renata
@rsip22
Jun 15 2016 20:45
You're welcome, @finkbeca
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:57
@ALINATSUI That's what I thought too. I do remember someone saying that ad blockers may cause issues.
Darrin
@ddschmitz
Jun 15 2016 20:57
With bootstrap can you change the size of a well? like the colored area?
Like move the margins/padding of a .well?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 20:59
@ddschmitz I think that Bootstrap has codes that are already set and can be called on, such as row, col, buttons. I'm not sure about .well but you can style your customized classes in your styles.css file.
J. Kilgore
@jkilgore07
Jun 15 2016 21:11
can someone explain how to put text over an image in bootstrap. im working on my personal portfolio and the only way i have been able to is by using the carousel-caption. but it only puts it on the top image. i have 4 images and want different text over each when you scroll down. to the different parts.
ALINATSUI
@ALINATSUI
Jun 15 2016 21:13
@KoniKodes I give up....
Philip Eckert
@pae4557
Jun 15 2016 21:13
Hey all, does anybody have a clue why I keep getting this error anytime I attempt to using AJAX to call an API:
" XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access."
ALINATSUI
@ALINATSUI
Jun 15 2016 21:14
@jkilgore07 I was just working on this today...from what I understand, you need to set your image to: position: relative, while your text's position: absolute ...I found this article helpful: http://www.the-art-of-web.com/css/textoverimage/
anacou
@anacou
Jun 15 2016 21:15
what's my personal portfolio webpage missing? ie. how can I make it better? https://codepen.io/anacou/full/VjaNwJ/
Clyde
@hea-hea
Jun 15 2016 21:16
@anacou you will need to add some links to your (or fake) social media
J. Kilgore
@jkilgore07
Jun 15 2016 21:16
@ALINATSUI Thank you. i will check into this after work tonight.
CamperBot
@camperbot
Jun 15 2016 21:16
jkilgore07 sends brownie points to @alinatsui :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @alinatsui |http://www.freecodecamp.com/alinatsui
anacou
@anacou
Jun 15 2016 21:17
thanks @hea-hea
CamperBot
@camperbot
Jun 15 2016 21:17
anacou sends brownie points to @hea-hea :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @hea-hea |http://www.freecodecamp.com/hea-hea
anacou
@anacou
Jun 15 2016 21:17
anything else?
Clyde
@hea-hea
Jun 15 2016 21:18
@anacou yes - work with bootstrap so you can make the website scale for mobile devices
in codepen you can add Bootstrap automatically just click the settings in the CSS section and quick add bootstrap
ALINATSUI
@ALINATSUI
Jun 15 2016 21:19
@jkilgore07 No problem, although it's not specific to Bootstrap.
Clyde
@hea-hea
Jun 15 2016 21:20
@anacou the content is good you just need to work a little more with the code to make it compliant with the provided FCC example
Richard Andrews
@Whiplash5057
Jun 15 2016 21:20
@khaduch thanks a lot ..I didn't notice it ...!! Cyaa..!!
CamperBot
@camperbot
Jun 15 2016 21:20
:star2: 1334 | @khaduch |http://www.freecodecamp.com/khaduch
whiplash5057 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
anacou
@anacou
Jun 15 2016 21:20
thanks again @hea-hea
CamperBot
@camperbot
Jun 15 2016 21:20
anacou sends brownie points to @hea-hea :sparkles: :thumbsup: :sparkles:
:warning: anacou already gave hea-hea points
Clyde
@hea-hea
Jun 15 2016 21:21
@anacou https://www.freecodecamp.com/challenges/use-responsive-design-with-bootstrap-fluid-containers here are the challenges that teach how to use Bootstrap grid and then you might want to read some more on the Bootstrap documentation pages :)
good luck :+1:
anacou
@anacou
Jun 15 2016 21:34
awesome
thanks again
Luke
@lukenetti3
Jun 15 2016 21:37
Can anyone help me out with the json.forEach method. I am working on the random quote machine, and am having difficult incorporating it. Can someone explain to me how this loop works?
JD Tadlock
@jdtdesigns
Jun 15 2016 21:38
@lukenetti3 It's an iterator, not a loop
it will go through each item in an object
one by one and allow you to access/change info in each item
Luke
@lukenetti3
Jun 15 2016 21:40
@jdtdesigns Okay, so how is that referenced? I can access the quote with json[0].content and json[0].title. But how can I make this go through each item in the object?
JD Tadlock
@jdtdesigns
Jun 15 2016 21:42
@lukenetti3 the json is only returning one object
no need for forEach
if you were getting a json object with more than one object inside, it would go through each one and push the content and title into your html according to your code
Luke
@lukenetti3
Jun 15 2016 21:43
@jdtdesigns So how can I make it with each click function that a new quote appears. As you can see, I have a random number generator to select the quotes but not sure how I can incorporate that with each click. Does that make sense?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 21:45
@ALINATSUI I'm sorry. What will you do?
JD Tadlock
@jdtdesigns
Jun 15 2016 21:47
@lukenetti3 The quotesondesign random api doesn't work. You will need to get like 30 or more quotes, push them to an array and then use your random number to grab one from that array.
Change filter[posts_per_page]=1 to filter[posts_per_page]=30
Brendon
@Balvamar
Jun 15 2016 21:48
Hi All, I am working on the "Weather API". I have managed to get it to work, except for the icons. When I attempt to use the icons through jquery, it gives me a Error 403 forbidden. if i just put a plain img src in my page it displays correctly. I have tried in IE and Chrome, and checked the url I have constructed is correct, however just keep getting the same 403 error. Any ideas??
<img src="http://openweathermap.org/img/w/"+data.weather[0].icon+".png" />;
anacou
@anacou
Jun 15 2016 21:50
Hey, can freeCodeCamp help me learn iOS app development?
Luke
@lukenetti3
Jun 15 2016 21:50
@jdtdesigns Where can I find a quote API that will work? So I will then take all the quotes and push them to an array? So then from that array my random number generator will select a quote from that array?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 21:51
@Balvamar What does the error say besides 403?
Brendon
@Balvamar
Jun 15 2016 21:51
@anacou that would depend on what kind of app you are developing
Luke
@lukenetti3
Jun 15 2016 21:52
@jdtdesigns Also, when I change that to 30 it posts 30 of the same quote on one click.
Brendon
@Balvamar
Jun 15 2016 21:52
@KoniKodes Failed to load resource: the server responded with a status of 403 (Forbidden) - when i open developer tools in Chrome
Toni Shortsleeve
@KoniKodes
Jun 15 2016 21:53
@Balvamar Try using https:// instead of http
JD Tadlock
@jdtdesigns
Jun 15 2016 21:53
@lukenetti3 From the app load, push the quotes to the array and set up the listener on the button. Don't get 30 on each click. It won't work.
ALINATSUI
@ALINATSUI
Jun 15 2016 21:53
@konikodes I have no idea...At least, now the temperature for the location is correct....I guess I'll check again tomorrow...
Brendon
@Balvamar
Jun 15 2016 21:53
@KoniKodes nope, same error
Toni Shortsleeve
@KoniKodes
Jun 15 2016 21:54
@ALINATSUI Correct temperature is a good thing. Maybe tomorrow we'll find better answers.
Henrique Salguero
@kikosalguero
Jun 15 2016 21:54
Hi there! Can anyone explain me what is the meaning of the ::after and ::before beetween divs in a HTML document?
ALINATSUI
@ALINATSUI
Jun 15 2016 21:55
@KoniKodes Are you having a problem too with Weather underground api?
Henrique Salguero
@kikosalguero
Jun 15 2016 21:55
Toni Shortsleeve
@KoniKodes
Jun 15 2016 21:56
@ALINATSUI Yes, I'm going to add an "look at another city, St" input. But I need to find out how that 2nd json call works...
ALINATSUI
@ALINATSUI
Jun 15 2016 21:56
@KoniKodes Oh...I'm not too sure myself...
Toni Shortsleeve
@KoniKodes
Jun 15 2016 21:57
@Balvamar Chrome recently forced us to use https, secure servers. Does openweather have a secure section?
@ALINATSUI Research, trials and more errors. Love coding :-)
ALINATSUI
@ALINATSUI
Jun 15 2016 22:00
@KoniKodes ugh...I'm headed to a algorithm meetup and reading up on algorithms has got my head spinning....and not in a good way...
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:00
Ok so I'm confused about this..
var myMusic = [
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [ 
      "CS", 
      "8T", 
      "LP" ],
    "gold": true
  }
  // Add record here
];
It's asking me to add another album. Are the first set of [], the set of {}, and the second set of [] all arrays?
Toni Shortsleeve
@KoniKodes
Jun 15 2016 22:01
@ALINATSUI I totally understand. Maybe we can connect tomorrow. May you find Algorithm answers tonight.
greg
@wearenotgroot
Jun 15 2016 22:01
@ThomasBurgess2000 just copy the setup with different values
ALINATSUI
@ALINATSUI
Jun 15 2016 22:02
@konikodes I need the practice anyway...have fun!
Richard Andrews
@Whiplash5057
Jun 15 2016 22:02
@khaduch I finished
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:02
Yeah I got the solution, but I want to understand what's happening. @wearenotgroot
greg
@wearenotgroot
Jun 15 2016 22:02
@ThomasBurgess2000 remember contents of an array are separated by a ,
Richard Andrews
@Whiplash5057
Jun 15 2016 22:02
Guys check out my project
Brendon
@Balvamar
Jun 15 2016 22:02
@KoniKodes - It appears that you must have a paid or developer account - ssl to access these assets. I guess i'll have to do without icons :(
greg
@wearenotgroot
Jun 15 2016 22:02
@ThomasBurgess2000 you are just creating an object that's all
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:03
Ok I guess my question is ill-formed. I'll go back and try some things.
thanks @wearenotgroot
CamperBot
@camperbot
Jun 15 2016 22:03
:star2: 1137 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
thomasburgess2000 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
Toni Shortsleeve
@KoniKodes
Jun 15 2016 22:04
@ALINATSUI Have a good evening.
@Balvamar I'm sorry, they should be free if they are part of the api. You could find others that are hosted on a secure site, and call those. Or just use background images.
Luke
@lukenetti3
Jun 15 2016 22:05
@jdtdesigns Sorry, I don't quite understand what you mean by the app load? Also, what is a listener on a button?
ALINATSUI
@ALINATSUI
Jun 15 2016 22:06
@konikodes Same to you!
Toni Shortsleeve
@KoniKodes
Jun 15 2016 22:06
@ALINATSUI :-)
Brendon
@Balvamar
Jun 15 2016 22:06
@KoniKodes thanks, I don't really want to recode everything, i'll come with an alternative.
CamperBot
@camperbot
Jun 15 2016 22:06
balvamar sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @konikodes |http://www.freecodecamp.com/konikodes
greg
@wearenotgroot
Jun 15 2016 22:07
@lukenetti3 ----------> just as the name stated. "listener" it listens to events that happens to a button(click event...)
Toni Shortsleeve
@KoniKodes
Jun 15 2016 22:07
@Balvamar Can't wait to see when you accomplish it.
Luke
@lukenetti3
Jun 15 2016 22:08
@wearenotgroot Okay, thanks...is that instead of the .on("click..")
CamperBot
@camperbot
Jun 15 2016 22:08
lukenetti3 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1138 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Jun 15 2016 22:11
@lukenetti3 .on("click"..) and .click() are similar way of attaching event handler(your function) to an element that is clickable
JD Tadlock
@jdtdesigns
Jun 15 2016 22:13
@lukenetti3 I made this as an example. I pulled 30 quotes from quotesondesign to show you how to do it. http://jsbin.com/sudola/edit?css,js,output
and also other cool things, cause it was fun lol
marcimmediato
@marcimmediato
Jun 15 2016 22:15
Hey all
what did you guys use when you did your portfolio page? Bootstrap?
Having trouble figuring out how to start the project
JD Tadlock
@jdtdesigns
Jun 15 2016 22:16
@marcimmediato no need for bootstrap
dive into css and you'll find BS isn't so grand
marcimmediato
@marcimmediato
Jun 15 2016 22:16
i'm not the biggest bootstrap fan already so this is good to hear ha
i'm guessing jquery would be the way to go then
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:17
Hi all
I was wondering if you guys can give me some constructive criticism on my Podomoro clock project. Half way through I realize it's definitely not web responsive (I should've used a framework like Bootstrap )
Anyway last thing I might as the change of the coffee's color -- as the timer counts down it slowly changes to an empty mug so it will refill during the break session
disclaimer: I am very noob when it comes to CSS. I learned a lot though during this project
Since it's not web responsive, it's probably best to look at full page..
Brendon
@Balvamar
Jun 15 2016 22:19
Hey, if you are doing the Weather API and have trouble with icons...as i did, try this site, seems to work http://websygen.github.io/owfont/#usage
JD Tadlock
@jdtdesigns
Jun 15 2016 22:19
@Neotriz Once again, i'll reiterate that BS is not for designs like this
it's for prototyping a block model design
strictly for prototyping, not custom design
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:20
@jdtdesigns gotcha, thanks for the clarification
CamperBot
@camperbot
Jun 15 2016 22:20
neotriz sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:21
are these front end projects supposed to be web responsive though?
anacou
@anacou
Jun 15 2016 22:21
Hey! How can I get my Facebook button to be aligned with the twitter and github buttons??? See here: https://codepen.io/anacou/full/VjaNwJ/
JD Tadlock
@jdtdesigns
Jun 15 2016 22:26
@Neotriz the designs are totally up to you
no requirements
the only requirements are the functionality user stories
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:28
@jdtdesigns Do you know if you finish all 4 projects, is there an evaluation to make sure user stories requirements for all projects are met?
JD Tadlock
@jdtdesigns
Jun 15 2016 22:29
@Neotriz nope, just honest policy
kinda why i stopped for a bit
only the pay sites will have a teacher to push you
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:31
pay sites like bootcamps?
JD Tadlock
@jdtdesigns
Jun 15 2016 22:31
depends
there are many different types of pay sites
and courses
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:33
just out of curiosity, do you have any experience with them?
JD Tadlock
@jdtdesigns
Jun 15 2016 22:35
I've payed for a few with monthly plans. I haven't pay the cost for a teacher yet. Usually runs from $300/month to $17,000/year
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:35
Why doesn't the top navbar fadeout on doc load? http://codepen.io/ThomasBurgess2000/pen/EyKKwg
just trying to test out jquery
Not sure I'm doing it right at all
Kenzo Mendoza
@KenzoM
Jun 15 2016 22:37
@jdtdesigns do you have any recommendation? I may need that extra push
You shouldn't have css or js in the html tab
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:39
then why did we do that in the courses? @jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 22:39
@Neotriz Teamtreehouse.com has a certification program now. From $100 to $500.
@ThomasBurgess2000 It's standard best practice. They won't show you proper deving techniques on FCC. Just challenge you to make stuff;
There are times when you may inject styles or have a script block in your html, but those are rare specific cases
Css will be injected for js effects usually
but that will happen from your js
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:41
Ok so how would I add an animated bounce via jquery? @jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 22:42
@ThomasBurgess2000 Use css instead. It's faster
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:43
Erm... ok. One second. Thanks @jdtdesigns
CamperBot
@camperbot
Jun 15 2016 22:43
thomasburgess2000 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:46
Ok so I don't know how to do add the animated bounce class via css...
@jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 22:48
how did i know you were going to say that? lol
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:49
haha ok thanks that makes more sense. @jdtdesigns
CamperBot
@camperbot
Jun 15 2016 22:49
thomasburgess2000 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: thomasburgess2000 already gave jdtdesigns points
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:51
I'm just still confused why something like this doesn't work (probably a stupid question)
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default")
  });
</script>
JD Tadlock
@jdtdesigns
Jun 15 2016 22:52
@ThomasBurgess2000 Probably because you haven't created those classes in the css so they don't do anything.
Paul Borawski
@iAmNawa
Jun 15 2016 22:52
@ThomasBurgess2000 You are missing a semicolon
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:52
OHHH I hadn't added the Animate.css library hahahahaa @jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 22:52
not the problem lol
Thomas Burgess
@ThomasBurgess2000
Jun 15 2016 22:52
good point @iAmNawa
JD Tadlock
@jdtdesigns
Jun 15 2016 22:53
@ThomasBurgess2000 That could be it :P
Greg D
@mosaic-greg
Jun 15 2016 22:55
Hi, how would I copy the full dom address of an element?
i can view it via "inspect element" but not copy it to clipboard
JD Tadlock
@jdtdesigns
Jun 15 2016 22:56
@mosaic-greg right click and hit edit as html
flindip
@flindip
Jun 15 2016 23:00
In regards to the "build a random quote machine": how many quotes to we need to use?
anacou
@anacou
Jun 15 2016 23:02
Can anyone help me get these 3 social media buttons side by side on one line? This is driving me nuts! See down the page here: https://codepen.io/anacou/full/VjaNwJ/
Andrew Krupicka
@akrupicka
Jun 15 2016 23:04
@flindip It doesn't specify a number. Mine has like 8 quotes.
flindip
@flindip
Jun 15 2016 23:05
@akrupicka ok, so its a pretty simple project. Thanks
CamperBot
@camperbot
Jun 15 2016 23:05
flindip sends brownie points to @akrupicka :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @akrupicka |http://www.freecodecamp.com/akrupicka
Andrew Krupicka
@akrupicka
Jun 15 2016 23:19

@anacou this seems to work:

wrap each button in it's own DIV with the class "socialButton", then add this CSS:

.product-social-links {
display:block;
width:315px;
}
.socialButton {
display:inline-block;
float:left;
margin-right:15px;
}
h4 {
clear:both;
}

Brandon Lee
@brandonlee781
Jun 15 2016 23:25
Has anyone here finished the Simon game and willing to offer some advice?
JD Tadlock
@jdtdesigns
Jun 15 2016 23:26
@brandonlee781 sure
bscyrpt
@bscyrpt
Jun 15 2016 23:27

@anacou keeping your same code you can do this

iframe{
  height:20px;
}

.button2{
  display:inline;
} 
but i recommend giving your iframe a class and stying it that way, your button2 div needs to display:inline/inline-block to allow stuff to flow on same line

but you use lots of bad coding practices, never use <center> tags anymore use css instead and start wrapping stuff in div containers for easier positioning with css

Brandon Lee
@brandonlee781
Jun 15 2016 23:29
@jdtdesigns Awesome! So the way I have it set up currently it's a random number pushed into an array each round, each number corresponding to a different colored button. Then the button flashes colors and plays an audio clip. The problem I'm having is after I get to the second round and beyond (or two values+) the for loop cycles so quickly that all the buttons flash and all the audios play simultaneously. I just can't for the life of me figure out how to code it so it does one thing at a time.
I've tried setTimeouts, but they never seem to work.
JD Tadlock
@jdtdesigns
Jun 15 2016 23:33
@brandonlee781 You're going to need to set it up where the sequence plays out each button(beginning with one), then fires a function that will listen for a user click input. Keep the buttons disabled while the sequence is playing and when it finishes each time, enable the buttons. Once the user has inputted the same amount of values as the sequence, disable buttons and fire the sequence function.
You can also use a counter starting at 0 to track each user click to match each value in the sequence. The sequence timeout will be the trickiest part, as you will need to fire the button light and sound, then timeout to fire the next light and sound.
Brandon Lee
@brandonlee781
Jun 15 2016 23:35
@jdtdesigns Which I have done. I think I explained it wrong. During the time the game is showing the order of expected buttons. So before the player needs to input, it plays the entire sequence all at once instead of one button at a time.
@jdtdesigns So lets say the order is Green, Red, Blue. Instead of flashing green, playing green sound, flashing red, playing red sound and flashing blue, playing blue sound in that order. It does all of those things at the exact same time.
JD Tadlock
@jdtdesigns
Jun 15 2016 23:37
@brandonlee781 that's an issue with your timeout
Brandon Lee
@brandonlee781
Jun 15 2016 23:37
Right
Which I can't seem to avoid. Because if I put the entire code within the for loop into a timeout, it simply delays everything however long and than runs it all at once.
JD Tadlock
@jdtdesigns
Jun 15 2016 23:38
Here's my sequencer to give you an idea
 var sequencer = {
    sequence: [],
    build: function(status) {
      if ( status != 'same' ) sequencer.sequence.push(Math.floor(Math.random() * 4));

      sequencer.count = 0;
      sequencer.show();
    },
    show: function() {
      $('#b' + sequencer.sequence[sequencer.count]).addClass('active');
      sounds[sequencer.sequence[sequencer.count]].play();

      sequencer.count++;
      sequencer.next();
    },
    next: function() {
      clearTimeout(window.start);
      clearTimeout(window.buttonOff);

      window.buttonOff = setTimeout(function() {
        $('#b' + sequencer.sequence[sequencer.count- 1]).removeClass('active');
      }, 700);

      if ( sequencer.count === sequencer.sequence.length) { 
        setStatus('player');
      } else {
        window.start = setTimeout(function() {
          sequencer.show();
        }, 1100);
      }

    }    
  };
Brandon Lee
@brandonlee781
Jun 15 2016 23:40
@jdtdesigns Thanks! I'll work on it some more.
CamperBot
@camperbot
Jun 15 2016 23:40
brandonlee781 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 494 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 15 2016 23:42
@brandonlee781 I have a setStatus function that will fire the correct method/function according to what is happening. It's a good idea to split the functionality apart as much as you can to make it more readable and adaptable. I also have a showMessage function that has messages that will be fired at different times based on what setStatus() sends to it. Make sense?
Brandon Lee
@brandonlee781
Jun 15 2016 23:47
I think I got it
So you don't use a loop at all but simply call the next function in line and start over at the end
JD Tadlock
@jdtdesigns
Jun 15 2016 23:50
yep, it lights the button up, plays the sound, then goes to next. If the count equals the length of the sequence array, it listens for user click and doesn't fire the timeout. Otherwise it fires the timeout and goes back to show() again.
@brandonlee781
Brandon Lee
@brandonlee781
Jun 15 2016 23:51
@jdtdesigns Why does it wait for the user to click?
JD Tadlock
@jdtdesigns
Jun 15 2016 23:52
it waits for the user to click because it's the player's turn to try and repeat the sequence @brandonlee781
that fires another function that i made
Brandon Lee
@brandonlee781
Jun 15 2016 23:53
@jdtdesigns Gotcha. I have that part down. I'm just struggling with putting the buttons in a sequence. Though I think you might have just helped me with that.
JD Tadlock
@jdtdesigns
Jun 15 2016 23:53
the window.buttonOff timeout just turns the button light off before the next button lights up
otherwise, you'd have them run together when the next button is equal to the last