These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Apr 2016
Robert Friedman
@robfr77
Apr 19 2016 00:00
why do you want to make it inline?
you mean line up with the temperature reading?
Avi
@AviralGarg1993
Apr 19 2016 00:01
Hi there, this is what I have so far: http://codepen.io/fidgetyphi/pen/pyKzMg
Brandon
@Daxo
Apr 19 2016 00:01
@robfr77 yes
Avi
@AviralGarg1993
Apr 19 2016 00:02
I wish to make the side of the inner thumbnail smaller just enough for the image to fit and the small caption below it
Brandon
@Daxo
Apr 19 2016 00:02
@robfr77 I tried a whole bunch of different methods to try to make them go in line but it insists on staying on its own line ><
Avi
@AviralGarg1993
Apr 19 2016 00:02
and I don't wanna hardcode this, want bootstrap to do it automatically
Micah Bales
@micahbales
Apr 19 2016 00:02
quick question for any regex experts out there. What does "$1 $2" signify in this expression?
.replace(/([a-z])([A-Z])/g, '$1 $2')
Robert Friedman
@robfr77
Apr 19 2016 00:04
@bleafman i'm guessing bootstrap auto settings
Brandon
@Daxo
Apr 19 2016 00:05
@robfr77 it still looks good so meh
and it kind of helps highlight that it's a different button
Robert Friedman
@robfr77
Apr 19 2016 00:07
@bleafman yeah i just tried everything i could think of using css
lol
@micahbales i'm no expert but $1 saves what the first reg ex finds and $2 saves waht the second reg ex finds so it says to replace all that it finds from a-z with A-Z in other words $1 with $2
Greg Duncan
@GregatGit
Apr 19 2016 00:09
@madblkman you need a closing > for img weatherId + "'>");
Robert Friedman
@robfr77
Apr 19 2016 00:10
@micahbales actually i think that's a bit off, sorry
Sean Goodfellow
@sed174
Apr 19 2016 00:12
starting my portfolio project and i dont even know where to start lol =/
LuciusR11
@LuciusR11
Apr 19 2016 00:12
<span class ="number">#</span><button id ="systembtn"><div class = "buttonText">°C</div></button>

This is the button I'm trying to change.

if (".buttonText" == "°C"){  
(document).ready(function(){
    ("#systembtn").on("click", function(){
      (".buttonText").html("°F");
    });
  });
}

This is the code I'm using to try and change the text in the button when I click it. It won't work.

Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 00:12
Hey all, I need some help with the Weather App project. Before I share, how careful should I be about revealing my API key?
Greg Duncan
@GregatGit
Apr 19 2016 00:14
@JacobHanawalt If it falls into the wrong hands we're doomed...
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 00:14
@GregatGit I assume its no big deal but everyone's so careful about it lol
Greg Duncan
@GregatGit
Apr 19 2016 00:14
@JacobHanawalt No don't worry - your pen has to be open anyway
@LuciusR11 you shouldn't have the ready() function wrapped in it
Micah Bales
@micahbales
Apr 19 2016 00:20
thanks, @robfr77
CamperBot
@camperbot
Apr 19 2016 00:20
micahbales sends brownie points to @robfr77 :sparkles: :thumbsup: :sparkles:
:star: 307 | @robfr77 | http://www.freecodecamp.com/robfr77
John L.
@jomcode
Apr 19 2016 00:21
@JacobHanawalt theres really no way to hide the api key since its all frontend. normally you would stash that sort of thing somewhere on the server side of things afaik
Brandon
@Daxo
Apr 19 2016 00:22
@robfr77 thanks for trying!
CamperBot
@camperbot
Apr 19 2016 00:22
bleafman sends brownie points to @robfr77 :sparkles: :thumbsup: :sparkles:
:star: 308 | @robfr77 | http://www.freecodecamp.com/robfr77
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 00:23
Alright, so my problem is that after I've put a user's latitude and longitude onto the URL and send it off using .getJSON, the success function in .getJSON never triggers. (I tested this using console.log()) Clearly something's going wrong on that specific part, but I can't figure it out... does anyone know what I'm doing wrong? (aside from the messy, nubile state of my code of course)
<html>
<p id = "data">Lat and Long</p>
<p id = "test">URL</p>
<button class = "btn btn-primary" id = "showMe">Show My Weather</button>

<h3 id = "high">High:</h3>
</html>

<script>
var lat;
  var long;

  //Button Activated or not
  $("#showMe").on("click", function() {
    if ($("#showMe").hasClass("active")) {
      $("#showMe").removeClass("active");

    } else {
      $("#showMe").addClass("active");
    };
  });
  //End Button Active

  var apiDefault = "api.openweathermap.org/data/2.5/weather?zip=92115,us&APPID=1234"

  //Custom Location Start 
  $("#showMe").on("click", function() {
  if ($("#showMe").hasClass("active")) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        long = position.coords.longitude;
        lat = position.coords.latitude;
        $("#data").html("latitude: " + lat + "<br>longitude: " + long);

        var apiCustom = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=1234";

        $("#test").html("<p>" + apiCustom + "</p>");

        console.log(apiCustom);

        $.getJSON(apiCustom, function(data) {

          console.log("Success");

        });
      });
    };
  };
});
</script>
John L.
@jomcode
Apr 19 2016 00:28
@JacobHanawalt var apiCustom = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=1234"; are you putting your api key at the end of the url instead of 1234 ?
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 00:29
@jomcode I am, that's just filler
John L.
@jomcode
Apr 19 2016 00:31
@JacobHanawalt is it getting your geolocation at all? try removing the conditional check for the active class
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 00:35
@jomcode It is for sure. Do you want the link to the actual CodePen? Might make this easier haha
Michael Karpinski
@karpimpski
Apr 19 2016 00:36
I'm learning canvas through Udacity's course and I don't know why this won't work:
var onImageLoad = function(){
    console.log("IMAGE!!!");
    ctx.drawImage(img,192,192);
};

var setup = function() {
    canvas = document.createElement("canvas");
    ctx = canvas.getContext('2d');

    canvas.setAttribute('width', 500);
    canvas.setAttribute('height', 700);

    body.appendChild(canvas);

    img = new Image();
    img.onload = onImageLoad;
    img.src = "http://www.robot1968.com/new%20bots%20may03/alphie%20blue.jpg";
};
Ghost
@ghost~56bd2077e610378809c105cd
Apr 19 2016 00:36
im gonna start that one next @JacobHanawalt .. ive just finished my random quote generator
Frank XC
@tenkdayz
Apr 19 2016 00:38
setAttribute .. i think i has to be ('width','500')...
@karpimpski in quotes
Michael Karpinski
@karpimpski
Apr 19 2016 00:39
@tenkdayz didn't change anything
Frank XC
@tenkdayz
Apr 19 2016 00:39
@karpimpski why dont you do ctx.fillRect(0,0,500,700); ?
Michael Karpinski
@karpimpski
Apr 19 2016 00:40
@tenkdayz I just did, but nothing happened
Frank XC
@tenkdayz
Apr 19 2016 00:40
@karpimpski wait first of all what isnt working?
Michael Karpinski
@karpimpski
Apr 19 2016 00:41
@tenkdayz the console.log doesn't work and the image doesnt load
I just copied Udacity's code but nothing is working with it

I changed it to their other code:

var canvas = null;
var ctx = null;
var img = null;

var onImageLoad = function(){
    console.log("IMAGE!!!");
    ctx.drawImage(img,192,192);
};

var setup = function() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');
    canvas.width = 400;
    canvas.height = 400;

    img = new Image();
    img.onload = onImageLoad;
    img.src = "http://www.robot1968.com/new%20bots%20may03/alphie%20blue.jpg";
};

that is simpler, but nothing still

Frank XC
@tenkdayz
Apr 19 2016 00:43
@karpimpski drawImage() shouldnt it have x y
Greg Duncan
@GregatGit
Apr 19 2016 00:44
@karpimpski does it need any librarys for it to work?
Michael Karpinski
@karpimpski
Apr 19 2016 00:44
@GregatGit no, it doesn't say it needs any
@tenkdayz it does have x and y. it's (source, x, y)
Frank XC
@tenkdayz
Apr 19 2016 00:45
so it needs w and h
Greg Duncan
@GregatGit
Apr 19 2016 00:45
@karpimpski are you doing it in codepen?
Michael Karpinski
@karpimpski
Apr 19 2016 00:45
@tenkdayz no, that is what Udacity had and their code works. @GregatGit yeah
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 00:46

If anyone else would like to help me out, here's my Weather App in its infancy: http://codepen.io/jacobhanawalt/pen/pyLYrr

The problem I'm having right now is that my getJSON function isn't working with the user's latitude and longitude. It's not a problem with the URL or geolocation as far as I can tell. The area where I need help has a comment above it saying "Help me here!"

Frank XC
@tenkdayz
Apr 19 2016 00:46
@karpimpski youre not calling the function setup
Michael Karpinski
@karpimpski
Apr 19 2016 00:47
@tenkdayz that was it. I thought of that, but Udacity didn't have that in the code they showed. thanks!
CamperBot
@camperbot
Apr 19 2016 00:47
karpimpski sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 419 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Frank XC
@tenkdayz
Apr 19 2016 00:50
@karpimpski np. the drawimg needed x y also..
Michael Karpinski
@karpimpski
Apr 19 2016 00:50
@tenkdayz no, it had an X and a Y, that's what the parameters were. height and width are optional, it will display the default height and width if you don't put parameter in
I had x and y
Reginald Davis
@madblkman
Apr 19 2016 00:54
@GregatGit thanks for the help...Looks like I got it working
CamperBot
@camperbot
Apr 19 2016 00:54
madblkman sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:star: 423 | @gregatgit | http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Apr 19 2016 00:55
@madblkman well done.
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 01:04
Hi, could anyone help me with my Weather App project?
MJ Skolly
@mjskolly
Apr 19 2016 01:07
I'm working on my twitch.tv viewer. I am having serious trouble looping through the array of channels, making an api call for each channel and then storing the data to use later. To be clear the part I am having trouble with is using the data later. Due to the asynchronous nature of getJson the rest of my program is trying to use data that has yet to be populated. I have been reading about promises but it is over my head. Any one have a simple solution to this problem?
Jacob Hanawalt
@JacobHanawalt
Apr 19 2016 01:12
This message was deleted
Islam Ibakaev
@dagman
Apr 19 2016 01:52
i were doing Truncate string bonfire and finally find decision. Just curious is there an elegant decision. My decision is
function truncateString(str, num) {
  if(str.length > num) {
    if(num < 3) {
      str = str.slice(0, num) + '...';
    }
    else {
      str = str.slice(0, num - 3) + '...';
    }
  }
  return str;
}
Islam Ibakaev
@dagman
Apr 19 2016 02:34
have rebuilt my decision for Smallest Common Multiple . It took me a while
function smallestCommons(arr) {
  var array = range(arr);

  return array.reduce(function(x, y) {
   return scm(x, y); 
  });

  function range(arr) {
    var array = [],
        big = arr[0] > arr[1] ? arr[0] : arr[1],
        little = arr[0] > arr[1] ? arr[1] : arr[0];
    for (var i = little; i <= big; i++) {
      array.push(i);
    }
    return array;
  }

  function gcd (x, y) {
    return (x % y === 0) ? y : gcd(y, x%y);
  }

  function scm (x, y) {
    return (x * y) / gcd(x, y); 
  }

}
Jordi Vilagut Treserra
@jordivilagut
Apr 19 2016 03:04
hi guys
question about Show Local Weather
i wrote this to get a icon from the API
$("#myIcon").html("&ltimg&nbspsrc=&quothttp://openweathermap.org/img/w/"+myIcon+".png&quot&gt");
but the element with id=myIcon i get the sentence with the right syntax
but it's not translated to html, providing the image that i want
any solutions?
Jin Choi
@JiniHendrix
Apr 19 2016 03:08
Hello, i have text that needs to be inside the inner circle of my simon game, but it's showing up underneath everything
even tho its part of the div
Greg Duncan
@GregatGit
Apr 19 2016 04:53
@bcnjordi9 <img src="http://openweathermap.org/img/w/' + json.weather[0].icon + '.png"/>'
Richard
@richao03
Apr 19 2016 05:00
is there a Jquery ninja here ?
i have question regarding animating my div to go up
Candice
@smrtsmrf
Apr 19 2016 05:13
@richao03 it depends. What do you need?
jalley3
@jalley3
Apr 19 2016 05:15
can someone take a look at my wiki viewer, i cant get the json to transport....i know i have unused functions, i basically erased their use to see if i could just get the json to print to the console but i cant even get that to happen.
i can even console out the URI encoded user input inside of the success function, so i know that the program is at least getting to that point
i also tried using a different api link (even though i didnt like the format of the json as much as this one) and i got the same result
Frank XC
@tenkdayz
Apr 19 2016 05:21
@jalley3 is there a reason why youre not using getJSON?
jalley3
@jalley3
Apr 19 2016 05:22
getJSON's are fundamentally an ajax request from what i understand
however
with wikipedia's api you cant get json's, only jsonP
which is like a json wrapped in a class
but jquery knows how to break it down and access the json
im sure its a lot more technical than that, but thats the gist of it
so for the wikipedia API you have to use an ajax request, but anytime you use getJSON you are essentially using an ajax request and an ajax request will work all the same
Greg Duncan
@GregatGit
Apr 19 2016 05:24
@jalley3 I can't see where you are calling your functions - on success you just console.log and that's all
jalley3
@jalley3
Apr 19 2016 05:25
yea thats because im trying to debug it
when i view the console
there is nothing
but there should be the json
i had my functions being called in there at first but then i got rid of it (should have just commented it out, but it was only like 5 lines of code) to try and pin point what was goign wrong
Greg Duncan
@GregatGit
Apr 19 2016 05:26
@jalley3 then console.log(x);
jalley3
@jalley3
Apr 19 2016 05:26
thats what i have?
Greg Duncan
@GregatGit
Apr 19 2016 05:27
@jalley3 console.log(x[1][0]);
jalley3
@jalley3
Apr 19 2016 05:27
oh thats because i was testing it some more
console.log(x) doesnt work
hit refresh
Greg Duncan
@GregatGit
Apr 19 2016 05:28
@jalley3 And don't call it 'x' - call is json or data
jalley3
@jalley3
Apr 19 2016 05:29
right but thats obviously not going to make a difference with my issue
but i agree for code standards i should do that
Javier
@sh1g
Apr 19 2016 05:30
@jalley3 how are you getting your input from the searchbar if your onclick is outside of that function?
jalley3
@jalley3
Apr 19 2016 05:30
onclick calls ajax
and i can console log the input and it shows up fine, so i know thats working
Greg Duncan
@GregatGit
Apr 19 2016 05:31
I am getting the json - your just not doing anthing with it
jalley3
@jalley3
Apr 19 2016 05:31
the json is showing up in your console
?
Greg Duncan
@GregatGit
Apr 19 2016 05:32
As a first step use (i think its stringify) to put the json straight on the page
["Germany", Array[20], Array[20], Array[20]] in the console
jalley3
@jalley3
Apr 19 2016 05:33
what browser are you using?
because thats exactly what it should say
Greg Duncan
@GregatGit
Apr 19 2016 05:34
chrom
chrome
Jasmina Babic
@animsaj
Apr 19 2016 05:36
@jalley3 your whole problem is solved if you change your click function like this:
```
```
$('.searchBtn').on('click',function(event){
event.preventDefault();
ajaxRequest(); //call user function
//declare variable to store user input
}) //end click function
})
Justin
@daemedeor
Apr 19 2016 05:38
@animsaj put your code between the three backticks
```
your code
```
Jasmina Babic
@animsaj
Apr 19 2016 05:39
@jalley3 your form may be submitting at the same time the ajax code is running when you click the search button thats way you run out of memory
jalley3
@jalley3
Apr 19 2016 05:39
restarting my browser did something to fix it to where i could see what @GregatGit could see, and then when i added the preventdefualt code, i was able to access the json in console like i wanted
thanks @GregatGit
CamperBot
@camperbot
Apr 19 2016 05:39
jalley3 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:star: 424 | @gregatgit | http://www.freecodecamp.com/gregatgit
jalley3
@jalley3
Apr 19 2016 05:39
thanks @animsaj
CamperBot
@camperbot
Apr 19 2016 05:39
jalley3 sends brownie points to @animsaj :sparkles: :thumbsup: :sparkles:
:star: 508 | @animsaj | http://www.freecodecamp.com/animsaj
Greg Duncan
@GregatGit
Apr 19 2016 05:40
@jalley3 You turn it off and back on again!! Classic!
Jasmina Babic
@animsaj
Apr 19 2016 05:40
@daemedeor simple don't always mange to do that. thanks, anyway
CamperBot
@camperbot
Apr 19 2016 05:40
animsaj sends brownie points to @daemedeor :sparkles: :thumbsup: :sparkles:
:star: 557 | @daemedeor | http://www.freecodecamp.com/daemedeor
jalley3
@jalley3
Apr 19 2016 05:41
cool, well it kind of works, now i just need to embedd the link and fancify it....thanks guys
Greg Duncan
@GregatGit
Apr 19 2016 05:45
@jalley3 Good luck
Nicolas
@annata83
Apr 19 2016 05:52
Whats up everybody
working on Portfolio challenge here
trying to get going using bootstramp, looking to use the <nav class="navbar navbar-default">
it creates a navigation bar at the top
now to going to the point
if i want to modify the background color of it in css
i have to call the class right
Justin
@daemedeor
Apr 19 2016 05:55
@annat83 sure nav.navbar
:smile:
Nicolas
@annata83
Apr 19 2016 05:55
wich will be .nav .nav-befault
Richard
@richao03
Apr 19 2016 05:55
@smrtsmrf hello
Justin
@daemedeor
Apr 19 2016 05:55
@annat83 no
Nicolas
@annata83
Apr 19 2016 05:55
and then background-color:"x"
Richard
@richao03
Apr 19 2016 05:56
@smrtsmrf r u still around? sorry
Nicolas
@annata83
Apr 19 2016 05:56
nop?
Justin
@daemedeor
Apr 19 2016 05:56
@annat83 itll be nav.navbar-navbar-default
nav is not a class
^.^
Nicolas
@annata83
Apr 19 2016 05:57

<nav class="navbar navbar-default">

<div class= container-fluid>

<button type="button" class="btn">Annata83
</button>
<button type="button" class="btn">Portfolio
</button>
<button type="button" class="btn">Contact
</button>

Justin
@daemedeor
Apr 19 2016 05:57
but nav.navbar should be enough
Richard
@richao03
Apr 19 2016 05:57
Hello guys, im trying to use jquery to move a certain div up some pixels once a button is pressed, but on codepen, it moves the div up a little bit then it reloads the page resetting the position...
Nicolas
@annata83
Apr 19 2016 05:57
if looking to modify background color
how you call the nav bar in css
Justin
@daemedeor
Apr 19 2016 05:57
@richao03 that seems right?
@annat83 nav.navbar.navbar-default { }
jalley3
@jalley3
Apr 19 2016 05:58
.navbar should work too really...however, if you plan on having more than one navbar, then nav.navbar would be the way to go
Justin
@daemedeor
Apr 19 2016 05:58
@jalley3 well... just to keep priorities straight
^.^
Nicolas
@annata83
Apr 19 2016 05:58
got it
Stanley
@stanleyyylau
Apr 19 2016 05:59
i'm having trouble with the wikipedia api
Nicolas
@annata83
Apr 19 2016 05:59
Thanks a lot @richao03 and @jalley3
CamperBot
@camperbot
Apr 19 2016 05:59
annat83 sends brownie points to @richao03 and @jalley3 :sparkles: :thumbsup: :sparkles:
:star: 311 | @richao03 | http://www.freecodecamp.com/richao03
Stanley
@stanleyyylau
Apr 19 2016 05:59
i just can't give the plaintext for a query
CamperBot
@camperbot
Apr 19 2016 05:59
:star: 289 | @jalley3 | http://www.freecodecamp.com/jalley3
Stanley
@stanleyyylau
Apr 19 2016 05:59
i read their documentation
too complex for me to understand i think
is anyone who can help?
Richard
@richao03
Apr 19 2016 06:01
i have some jquery questions regarding moving a div on click
paging all jquery ninjas and wizards
kirbyedy
@kirbyedy
Apr 19 2016 06:02
@stanleyyylau can we see what did you do until now
Justin
@daemedeor
Apr 19 2016 06:04

@richao03 isn't

 $("#button").onClick(function(e){
$("#button").css({"position": "relative", "top": "3px"});
});

what you want?

but then on reload it goes back
so you gotta click again
Richard
@richao03
Apr 19 2016 06:04
can i show you my codepen?
Justin
@daemedeor
Apr 19 2016 06:04
@richao03 suree...
Richard
@richao03
Apr 19 2016 06:05
because i did something else...
i used .animate
is that wrong?
Justin
@daemedeor
Apr 19 2016 06:05
@richao03 yea.... it animates it to the new css and then moves it back
Richard
@richao03
Apr 19 2016 06:06
so how should make it animate then stay there?
Justin
@daemedeor
Apr 19 2016 06:06
@richao03 after animation is done then change the css
^.^
Shivam Arora
@shivamarora13
Apr 19 2016 06:07
I need to call a same function, 1 time, if person performs correct action, than 2 times, if again perform correct action, than 3 times, than so on. can anyone help
Justin
@daemedeor
Apr 19 2016 06:07
@richao03 also you may want to pass in event and then do e.preventDefault() so the button doesn't try to submit ^.^
Richard
@richao03
Apr 19 2016 06:08
ive also tried .animate then .css("margin-top","3px")
jalley3
@jalley3
Apr 19 2016 06:08
@shivam ...sounds like you may need recursion...aside from that i think we need a little more info
Richard
@richao03
Apr 19 2016 06:08
@daemedeor can u check my codepen again? i tried it
but it not working
=T
Justin
@daemedeor
Apr 19 2016 06:09
$(document).ready(function(e) { 
  //moving #wholeThing

  $("#SearchButton").click(function(e){
     --> e.preventDefault();    <--

      $('#wholeThing').animate({'marginTop' : "200px"})
  });
  //end of moving #wholeThing
});
@richao03 don't copy the arrows!
Richard
@richao03
Apr 19 2016 06:10
what does the e stand for?
Justin
@daemedeor
Apr 19 2016 06:10
it was just to highlight the code!
event = e
Richard
@richao03
Apr 19 2016 06:11
i just saw it move all the way to the top like i wanted
then... it refreshed and reset the position
!!
Justin
@daemedeor
Apr 19 2016 06:12
@richao03 i told you, after it reaches the top, you have to set the css to the rigth position
-.-"
animate puts it back
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:12
Hi every one,
I am working on virtual keyboard
i want to change my input string change uppercase to lowercase randomly with every string character hold its text-transfer property
please give me any hint on this problem
jalley3
@jalley3
Apr 19 2016 06:13
so you want to alternate between upper and lower case each letter?
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:13
yeah
Richard
@richao03
Apr 19 2016 06:13
$("#wholeThing").css("margin-top","0px");
});
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:13
Example: HelloEveryOne
like so
Richard
@richao03
Apr 19 2016 06:13
@daemedeor $("#wholeThing").css("margin-top","0px");
}); i tried that line but it still refreshes
jalley3
@jalley3
Apr 19 2016 06:14
@malangaveuday but you want the keyboard to automatically know you are typing a new word?
Justin
@daemedeor
Apr 19 2016 06:14
@richao03 nah, put it as a callback to animate
@malangaveuday how will you know its a word?
jalley3
@jalley3
Apr 19 2016 06:14
^^^
this
if it was every other letter, or every 5 letters, it would be easy, but given the unknown variable of word length, and not having a dictionary api, and the amount of words that are made up of other words (ie you couldnt type nothing it would always be NoThing if you could somehow even get that far in the project),this seems out of the scope of my abilities
Justin
@daemedeor
Apr 19 2016 06:16
@richao03
$(document).ready(function(e) { 
  //moving #wholeThing

  $("#SearchButton").click(function(e){
      e.preventDefault();
      $('#wholeThing').animate({'margin-top' : "0"}, "fast","swing", function(){

$("#wholeThing").css("margin-top","0px");
})

  });
  //end of moving #wholeThing
});
just fyi
Richard
@richao03
Apr 19 2016 06:17
@daemedeor ... thank you so much
CamperBot
@camperbot
Apr 19 2016 06:17
richao03 sends brownie points to @daemedeor :sparkles: :thumbsup: :sparkles:
Justin
@daemedeor
Apr 19 2016 06:17
@jalley3 there's no way to do it without doing a dictionary search on each letter...
CamperBot
@camperbot
Apr 19 2016 06:17
:star: 561 | @daemedeor | http://www.freecodecamp.com/daemedeor
Stanley
@stanleyyylau
Apr 19 2016 06:18
@kirbyedy hi, sure, this is my code so far
but i still can't figure out the api part
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:18
@jalley3 no its click events
I design a keyboard
kirbyedy
@kirbyedy
Apr 19 2016 06:19
@stanleyyylau ok, start with that random button
remember how you did the tweet button for random quote generator ?
its pretty much the same
Justin
@daemedeor
Apr 19 2016 06:19
@malangaveuday on every click event, you'll still have to know when its a new word
kirbyedy
@kirbyedy
Apr 19 2016 06:20
just in the blank page you will open this: https://en.wikipedia.org/wiki/Special:Random
Justin
@daemedeor
Apr 19 2016 06:20
if you have a dictionary database then you can a search on a stored up string until it resembles a word in your dictionary
jalley3
@jalley3
Apr 19 2016 06:21
and even then, that wouldnt solve the NoThing problem
because if you are not using spaces (i didnt see spaces in your example)
then you need some sort of interpreter that would judge the context of the word you were using as well
Justin
@daemedeor
Apr 19 2016 06:21
^
the problem is if there are multiple words that are similar like a and then you have and after
so like aadarvarkAlsoAlights.
also and alights would be close enough
okay bad example
ANewNewton
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:23
@daemedeor i want my keyboard work same as keyboard when its working fine during typing but its uppercase and lowercase transition make hole string uppercase or lowercase
Justin
@daemedeor
Apr 19 2016 06:23
@malangaveuday can you show another sample
would it automatically make "thisisastring" into "ThisIsAString"?
or "this is a string" into "THIS IS A STRING"
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:25
Example : I like To code Every day
for uppercase: I LIKE TO CODE EVERY DAY
for lowercase: i like to code every day
so its not maintain actual requirement
Justin
@daemedeor
Apr 19 2016 06:25
oh how will you know its finished?
"strign".toUpperCase() or "STRING".toLowerCase()
btw
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:26
because i am clicking every key and this event make a string
Justin
@daemedeor
Apr 19 2016 06:26
but when will the event fire i mean
jalley3
@jalley3
Apr 19 2016 06:26
ok so you need to do this
each word you need to split into letters
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:27
Like our keyboard CapsLock
jalley3
@jalley3
Apr 19 2016 06:27
into an array of letters*
and then do array[0].toUpperCase();
Justin
@daemedeor
Apr 19 2016 06:27
okay so once you do that you watch isUpperCase then run the method ^.^
jalley3
@jalley3
Apr 19 2016 06:27
to capitalize the first letter
and then you join the array of letters back into a string
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:27
capitalize any letter in string
jalley3
@jalley3
Apr 19 2016 06:28
well as long as you know what place it is in the word
Justin
@daemedeor
Apr 19 2016 06:28
@malangaveuday one moment let me code it quick
jalley3
@jalley3
Apr 19 2016 06:28
you can change it manually just plug that number in the index
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:28
our laptop keyboard functionality
same i require
Justin
@daemedeor
Apr 19 2016 06:29
@malangaveuday
var isUpperCase = false;

$("#button").click(function(e){
  e.preventDefault();
  isUpperCase = !isUpperCase;
})

function onEveryClick(e){
  if(isUpperCase){
  return e.toUpperCase();
  }
return e;
}
something like that in your code
:)
buiphuking
@buiphuking
Apr 19 2016 06:30
hi guys, can i ask you something, i do Exact Change,
[["PENNY", 1.01],  (we have 101 pennies)
["QUARTER",  4.25]] (we have 425 quarters )
am i right?
jalley3
@jalley3
Apr 19 2016 06:30
no
you would only have 17 quarters
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:31
(function(){
    var keyValue="";


    //  print value in input text box
      function printClick(){
         $("#text-box").val(keyValue);
     };

    //  general keys click function
     $(".key").on("click", function(){
        keyValue += $(this).text();
        printClick();
     });


    // backspace key function
    $("#backSpace").on("click", function(){
        keyValue = keyValue.slice(0,-1);
        printClick();
    });

    //clear key function
    $("#clear-text").on("click", function(){
        keyValue = "";
        printClick();
    });

    //space key function
    $("#space-key").on("click", function(){
        keyValue += " ";
        printClick();
    });

    //all keys capital
    $("#caps-key").on("click",function(){
        $(".key").toggleClass("key-caps");
        if($("#text-box").hasClass("key-caps")){
            $("#text-box").removeClass("key-caps");
        }else{
            $("#text-box").addClass("key-caps");
        }
    });
})();
my code
Justin
@daemedeor
Apr 19 2016 06:32
@malangaveuday
   //  general keys click function
     $(".key").on("click", function(){
        var testText = $(this).text()
        if($("#text-box").hasClass("key-caps")){
          testText = testText.toUpperCase();
        }
        keyValue += testText;
        printClick();
     });
:)
using your code
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:34
but it will change hole string to uppercase ?
right?
Justin
@daemedeor
Apr 19 2016 06:34
@malangaveuday nah only once the key has been pressed
try it out!
i also made this code nicer:
   $("#caps-key").on("click",function(){
        $(".key").toggleClass("key-caps");

        $("#text-box").toggleClass("key-caps");
    });
also i prefer this modification
(function(){
    var keyValue="", isUpperCase = false;


    //  print value in input text box
      function printClick(){
         $("#text-box").val(keyValue);
     };

    //  general keys click function
     $(".key").on("click", function(){
        var testText = $(this).text()

        if(isUpperCase){
          testText.toUpperCase();
        }

        keyValue += testText;
        printClick();
     });


    // backspace key function
    $("#backSpace").on("click", function(){
        keyValue = keyValue.slice(0,-1);
        printClick();
    });

    //clear key function
    $("#clear-text").on("click", function(){
        keyValue = "";
        printClick();
    });

    //space key function
    $("#space-key").on("click", function(){
        keyValue += " ";
        printClick();
    });

    //all keys capital
    $("#caps-key").on("click",function(){
        isUpperCase = !isUpperCase;
    });
})();
don't have to deal with adding classes all over the dom
but do you want to change the entire string on the button click?
because that's different functionality then the keyboard caps lock
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:37
yeah
I got it now
so it will not work by adding class
right?
Justin
@daemedeor
Apr 19 2016 06:38
@malangaveuday or you can do this:
(function(){
    var keyValue="", isUpperCase = false;


    //  print value in input text box
      function printClick(){
         $("#text-box").val(keyValue);
     };

    //  general keys click function
     $(".key").on("click", function(){
        var testText = $(this).text()

        if(isUpperCase){
          testText.toUpperCase();
        }

        keyValue += testText;
        printClick();
     });


    // backspace key function
    $("#backSpace").on("click", function(){
        keyValue = keyValue.slice(0,-1);
        printClick();
    });

    //clear key function
    $("#clear-text").on("click", function(){
        keyValue = "";
        printClick();
    });

    //space key function
    $("#space-key").on("click", function(){
        keyValue += " ";
        printClick();
    });

    //all keys capital
    $("#caps-key").on("click",function(){
        isUpperCase = !isUpperCase;

        if(isUpperCase){
          $("#text-box").val($("#text-box").toUpperCase());
        }
    });
})();
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:38
as our laptop keyBoard
Justin
@daemedeor
Apr 19 2016 06:38
if you want to preserve your functionatliy
then take the one i did before
basically don't have isUpperCase in the caps-key
^.^
also.... you may want to do this:
$(function(){
    var keyValue="", isUpperCase = false;


    //  print value in input text box
      function printClick(){
         $("#text-box").val(keyValue);
     };

    //  general keys click function
     $(".key").on("click", function(){
        var testText = $(this).text()

        if(isUpperCase){
          testText = testText.toUpperCase();
        }

        keyValue += testText;
        printClick();
     });


    // backspace key function
    $("#backSpace").on("click", function(){
        keyValue = keyValue.slice(0,-1);
        printClick();
    });

    //clear key function
    $("#clear-text").on("click", function(){
        keyValue = "";
        printClick();
    });

    //space key function
    $("#space-key").on("click", function(){
        keyValue += " ";
        printClick();
    });

    //all keys capital
    $("#caps-key").on("click",function(){
        isUpperCase = !isUpperCase;
    });
})();
to make sure its done on dom load
Stanley
@stanleyyylau
Apr 19 2016 06:39
@kirbyedy yes, the radom button i think is just a link right? but the enter query and search part i still donno how to perform
Justin
@daemedeor
Apr 19 2016 06:40
though there are ways to make this even better
i'm just too lazy at this point
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 06:40
yeah but really thank you i got the logic how you play with it
buiphuking
@buiphuking
Apr 19 2016 06:42
@jalley3 why 17 ?
Stanley
@stanleyyylau
Apr 19 2016 06:43
@kirbyedy oh, thanks, let me try that one
CamperBot
@camperbot
Apr 19 2016 06:43
stanleyyylau sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 888 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 19 2016 06:43
@stanleyyylau by playing in the sandbox, you will figure out, and get the link you need for your wiki api call
Stanley
@stanleyyylau
Apr 19 2016 06:44
@kirbyedy the sandbox looks complex, a link with query string is more easy
@kirbyedy is there any material i can further reinforce my ajax and api knowleage
?
Stanley
@stanleyyylau
Apr 19 2016 06:48
@kirbyedy thanks, i this your link will help me a lot
CamperBot
@camperbot
Apr 19 2016 06:48
stanleyyylau sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: stanleyyylau already gave kirbyedy points
Mr.Code
@metao1
Apr 19 2016 06:54
@dposse @daemedeor yeah I thought it wasn't working! tnx
CamperBot
@camperbot
Apr 19 2016 06:54
metao1 sends brownie points to @dposse and @daemedeor :sparkles: :thumbsup: :sparkles:
:star: 294 | @dposse | http://www.freecodecamp.com/dposse
:star: 564 | @daemedeor | http://www.freecodecamp.com/daemedeor
Stanley
@stanleyyylau
Apr 19 2016 06:57
@kirbyedy can i use this sandbox to also get the link to the entry? what's the query string of getting that info?
Jayson Ash
@ScriptGeek
Apr 19 2016 06:57
hi folks
change the horse
Stanley
@stanleyyylau
Apr 19 2016 07:02
@kirbyedy excellent!!!!
@kirbyedy i think i will how to code the project now
@kirbyedy thanks again!
CamperBot
@camperbot
Apr 19 2016 07:03
stanleyyylau sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: stanleyyylau already gave kirbyedy points
Jayson Ash
@ScriptGeek
Apr 19 2016 07:03
I'm becoming so 1337 now, almost done with Tic Tac Toe
kirbyedy
@kirbyedy
Apr 19 2016 07:03
:thumbsup:
Jayson Ash
@ScriptGeek
Apr 19 2016 07:04
I can't wait to test out the Tic Tac Toe brain I made, it's almost finished
bhenriquez8
@bhenriquez8
Apr 19 2016 07:04
i think i finished the main requirements for the portfolio project for fcc, but my website doesn't look.....professional
can anyone critique it for me?
Jayson Ash
@ScriptGeek
Apr 19 2016 07:04
@bhenriquez8 you can go back and polish it up later after you've gotten more practice under your belt
bhenriquez8
@bhenriquez8
Apr 19 2016 07:05
@ScriptGeek yeah true. does anyone actually check your code or web page out though?
Jayson Ash
@ScriptGeek
Apr 19 2016 07:06
@bhenriquez8 eventually, just before you go into the nonprofit projects
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Apr 19 2016 07:29
Hi, I'm having a problem, I'm building my wikipedia viewer, I can access to the results, but comparing with others "wikipedia viewers" my results don't seem really relevant...
http://codepen.io/thomlom/pen/yOpbPo
can you help me ? Is there a problem with the url?
dasthormsche
@dasthormsche
Apr 19 2016 07:35
hi guys I have a question about styling an html element (<ul> <li></li></ul>). is it possible to move the whole section with text-align: justify in the center of a section? i can't get my head around it...
kirbyedy
@kirbyedy
Apr 19 2016 07:49
@thomlom have you tried with the ajax call
lcthornhill
@lsrus
Apr 19 2016 08:03
@dasthormsche you should be able to just use text-align center on the parent element of the stuff you want aligned - see here:
alpox
@alpox
Apr 19 2016 08:11
@thomlom I have the feeling that your api url has some wrong settings
alpox
@alpox
Apr 19 2016 08:18
This message was deleted
@thomlom Take out the &gsrnamespace= in your url ant it works
Jack Lyons
@JackEdwardLyons
Apr 19 2016 08:33
hi guys im having a bit of trouble with my wiki viewer when you click the button to reveal the information -- heres my code:
$("button#submit").on("click", function() {
var searchItem = $("input#searchTerm").val();
  console.log(searchItem);

  $.getJSON("http://en.wikipedia.org/w/api.php?action=parse&page=" + searchItem + "&prop=text&format=json&callback=?", function(json) {
    $('#article').html(json.parse.text["*"]);
    $("#article").find("a:not(.references a)").attr("href", function(){ return "http://www.wikipedia.org" + $(this).attr("href");});
    $("#article").find("a").attr("target", "_blank");
  });
});
i can console.log() the searchItem ok, but the rest of the data wont show... thing is, it will show without the button click function
alpox
@alpox
Apr 19 2016 08:34
@JackEdwardLyons What i see first is that your url is not the one you want at the end
But i'm not sure what you mean otherwise
can you show a codeine?
codepen*
damn autocorrection :D
kirbyedy
@kirbyedy
Apr 19 2016 08:39
:)
alpox
@alpox
Apr 19 2016 08:39
And did you try to log json? :-)
DJ
@qualitymanifest
Apr 19 2016 08:40
im gonna guess the button click function is in a place that it only gets read once so it doesn't work when you actually need it
would be great to post the codepen
alpox
@alpox
Apr 19 2016 08:41
@qualitymanifest That would sound good to me that it gets read only once :D
It would be more of a problem if it gets run multiple times ^^
DJ
@qualitymanifest
Apr 19 2016 08:42
@alpox i mean, for example if it was inside an if statement or something
it could also be the wrong selector
alpox
@alpox
Apr 19 2016 08:42
Yeah thats true
Understood you wrong then :D
DJ
@qualitymanifest
Apr 19 2016 08:46
no worries. another thought: the submit button could be inside a <form> so it's refreshing the page by default. the world may never know
DJ
@qualitymanifest
Apr 19 2016 08:47
@JackEdwardLyons get rid of the <form></form>
@JackEdwardLyons there's also this option but getting rid of the form would be easier. it works for me when you get rid of that
alpox
@alpox
Apr 19 2016 08:50
This message was deleted
This message was deleted
Jack Lyons
@JackEdwardLyons
Apr 19 2016 08:51
ahhh ok cool thanks @alpox I really appreciate it
CamperBot
@camperbot
Apr 19 2016 08:51
jackedwardlyons sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 554 | @alpox | http://www.freecodecamp.com/alpox
Jack Lyons
@JackEdwardLyons
Apr 19 2016 08:52
wow, did you delete your message?
alpox
@alpox
Apr 19 2016 08:52
@JackEdwardLyons Sry i didn't put there any input i guess :D it works though. But your page reloads. Listen to @qualitymanifest
You can also come around that with return false at the end of the function:
$("button#submit").on("click", function() {
  var searchItem = $("input#searchTerm").val();
  console.log(searchItem);

  $.getJSON("http://en.wikipedia.org/w/api.php?action=parse&page=" + searchItem + "&prop=text&format=json&callback=?", function(json) {
    console.log(json);
    $('#article').html(json.parse.text["*"]);
    $("#article").find("a:not(.references a)").attr("href", function() {
      return "http://www.wikipedia.org" + $(this).attr("href");
    });
    $("#article").find("a").attr("target", "_blank");
  })
    .fail(function() {
    console.log("FAIL!");
  });
  return false;
});
Jack Lyons
@JackEdwardLyons
Apr 19 2016 08:55
cool, thanks guys @qualitymanifest and @alpox
DJ
@qualitymanifest
Apr 19 2016 08:56
yw
hosni adnane
@hosniadnane
Apr 19 2016 09:13
hello everybody i don't know wgt i can't retreive data from the wikipedia api the code seem fine the request too , where did i messed up ?
Steg626
@Steg626
Apr 19 2016 09:14
do you tried on an actual page instead of an online editor?
hosni adnane
@hosniadnane
Apr 19 2016 09:16
nop i didn't
J Player
@Heyjp
Apr 19 2016 10:48

Anyone know how I can mimic this css animation in jquery?

.simon:active {
  box-shadow: 0 2px #666;
  transform: translateY(2px);
}

jquery wouldnt accept either box-shadow or transform.

Victoria Doiron
@victoriadoiron
Apr 19 2016 10:48
the example for the Weather App Zipline does not work. It is not retrieving anything from the API.
nvm, have to take the secure out of http, but kind of silly since it tells you not to look at the code, yet the only way to realize this is through looking at the code...
Steg626
@Steg626
Apr 19 2016 10:50
you found your way out, thats the purpose of the course. you did great anyway (y)
Shivam Arora
@shivamarora13
Apr 19 2016 11:06
help
CamperBot
@camperbot
Apr 19 2016 11:06

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. ex: find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

Shivam Arora
@shivamarora13
Apr 19 2016 11:06
can't really make a simon game, tried everything
Steg626
@Steg626
Apr 19 2016 11:07
do you want us to do it for you
Shivam Arora
@shivamarora13
Apr 19 2016 11:07
its getting frustrating now
@Steg626 hahaha, No, I am trying again!
I will do it for myself!
@Steg626 No such worries!
Steg626
@Steg626
Apr 19 2016 11:11
thats the spirit
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 19 2016 11:11
help Random Quote Machine
CamperBot
@camperbot
Apr 19 2016 11:11
no wiki entry for: random quote machine
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 19 2016 11:13
So I have few Question on making random Quote Machine
erm... Does the quote should really selected randomly from a list ? or I could give them serially from a list ?
Shivam Arora
@shivamarora13
Apr 19 2016 11:16
@Mr-Kumar-Abhishek You can do it anyway u want, the purpose is, it should throw a new quote everytime for some definite button hits.
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 19 2016 11:17
@shivamarora13 Thanks for clarification :)
CamperBot
@camperbot
Apr 19 2016 11:17
mr-kumar-abhishek sends brownie points to @shivamarora13 :sparkles: :thumbsup: :sparkles:
:star: 294 | @shivamarora13 | http://www.freecodecamp.com/shivamarora13
Nazim
@nazimkazim
Apr 19 2016 11:24

Hey Guys help me! I'm doing "Wiki builder" project and want to implement one thing. When my input field is empty i.e i remove a word from input field my section where all articles displayed becomes empty. I have this code but it does not work
`
var value=$.trim($("#search").val());
if(value.length == 0) {
//do some stuffs.
$( "#wikipedia-links" ).html("");
alert("OK");

}
`
http://codepen.io/nazimkazim/pen/xVjmNw

lcthornhill
@lsrus
Apr 19 2016 11:27
@nazimkazim maybe you could attach a listener to the keypress event and check whether the keypress has emptied the #search div?
Nazim
@nazimkazim
Apr 19 2016 11:30
@lsrus thanks i will try
lcthornhill
@lsrus
Apr 19 2016 11:38
@nazimkazim np - you might need keyup instead of keypress though
Nazim
@nazimkazim
Apr 19 2016 11:40
@lsrus i found it is onsearch thanks
CamperBot
@camperbot
Apr 19 2016 11:40
nazimkazim sends brownie points to @lsrus :sparkles: :thumbsup: :sparkles:
:star: 381 | @lsrus | http://www.freecodecamp.com/lsrus
lcthornhill
@lsrus
Apr 19 2016 11:41
@nazimkazim thanks I will look it up :-)
CamperBot
@camperbot
Apr 19 2016 11:41
lsrus sends brownie points to @nazimkazim :sparkles: :thumbsup: :sparkles:
:star: 297 | @nazimkazim | http://www.freecodecamp.com/nazimkazim
Ariel
@abibliophile
Apr 19 2016 11:43
Hi everyone! I'm working on the random quote machine and need help translating the api to html
kirbyedy
@kirbyedy
Apr 19 2016 11:45
@abibliophile you should move your js into the corresponding window on codepen
dont keep it in the html part
Ariel
@abibliophile
Apr 19 2016 11:47
okay! can you explain to me why? I thought that since it had <script> it would work in the html window (not that it's hard to move it, just want to understand)
kirbyedy
@kirbyedy
Apr 19 2016 11:49
try to copy/paste and you will see how the codepen will "colorize" it, so it will be easier for you
Ariel
@abibliophile
Apr 19 2016 11:49
I saw! that is indeed helpful
kirbyedy
@kirbyedy
Apr 19 2016 11:50
now for the api part... the one you chose, I never used, so you will have to read through the documentation here: https://theysaidso.com/api/
are you sure this is free ?
Ariel
@abibliophile
Apr 19 2016 11:51
so the way to implement apis differs from api to api?
it says it is if you have the credit i think?
which one did you use, if you can remember?
alpox
@alpox
Apr 19 2016 11:52
@abibliophile The apis have different endpoints and query properties they receive to provide you the right information you want
Ariel
@abibliophile
Apr 19 2016 11:53
@alpox could you explain more?
@kirbyedy let me try this one :)
alpox
@alpox
Apr 19 2016 11:55
@abibliophile Well the apis provide specific data. If you want an a data object which the server has stored with id=12, you may have to ask it for this specific id. How the query string for that looks like is up to the api provider, so it needs documentation for you to know how to ask for the right id.
There are not only ids ou ask about for sure ^^ if you have weather, you ask for the right weather with as example the latitude and longitude, if you want forecast information instead of current weather, you use another url part etc.
That all has to be specified by the provider
Ariel
@abibliophile
Apr 19 2016 11:57
oh wow! this is much more complicated than i thought
i feel like the brief introduction freecodecamp gave was not quite sufficient, at least for me
(i don't have any background besides what FCC has given me)
alpox
@alpox
Apr 19 2016 11:58
Most people say that :-) you are not alone ^^
Also, its complicated to understand at first, that requests to such APIs are asnychronous
Means, the code doesn't get executed synchronous (from top to bottom)
kirbyedy
@kirbyedy
Apr 19 2016 11:59
@abibliophile no worries, I am the same :)
once you get sick of coding, throw up couple of times, it will get you
alpox
@alpox
Apr 19 2016 12:00
var yourData;
$.getJSON(url, function(data) {
   yourData = data;
   console.log(yourData); // Prints the data
});
console.log(yourData); // Prints undefined
@abibliophile
You would run into that sooner or later :D
Ariel
@abibliophile
Apr 19 2016 12:06
oh that's so weird @alpox
(for both of your messages)
@kirbyedy glad you can sympathize
I guess practice makes perfect? although it's hard to practice when you have no foundation!
Greg Duncan
@GregatGit
Apr 19 2016 12:08
This message was deleted
Ariel
@abibliophile
Apr 19 2016 12:09
thanks to both of you @alpox and @kirbyedy
CamperBot
@camperbot
Apr 19 2016 12:09
abibliophile sends brownie points to @alpox and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 890 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:star: 555 | @alpox | http://www.freecodecamp.com/alpox
kirbyedy
@kirbyedy
Apr 19 2016 12:10
@abibliophile the thing with freecodecamp is that they dont hold your hand and walk you through the course, they give you some informations, but then kick you in the butt, and tell you... now read/search/ask
which is a good philosphy I think
and here you have a great community which will help you if you are stuck, 0-24h
Ariel
@abibliophile
Apr 19 2016 12:12
@kirbyedy yes, I do like that, mostly, because it helps to really understand the methodology if you need to work it out
but I still feel like some sections could provide a little more explanation or support
glad the community is here!
Ankur sharma
@ankur1163
Apr 19 2016 12:17
I am in section build a tribute page
is this page ok?
I have zoomed out so I could take its screenshot
Islam Ibakaev
@dagman
Apr 19 2016 12:23
codercooooder
@codercooooder
Apr 19 2016 12:39
Hey @alpox are you there, I tried to implement your fix, but I don't know exactly what I should do, in the second column I created a hidden, absolutely positioned div of class "filler" (per your suggestion) any tips? http://codepen.io/ihatecoding/pen/zqaOBv
codercooooder
@codercooooder
Apr 19 2016 12:56
@alpox i put filler in all four columns in this fork: http://codepen.io/ihatecoding/pen/MyXeGo?editors=1100
alpox
@alpox
Apr 19 2016 12:59
@codercooooder I think absolutely positioned is not what you want ^^
@codercooooder There should be some fake-content... Maybe from placehold.it an image or something to preserve the dimensions
And not the filler should be absolute. The area with the svg should be
codercooooder
@codercooooder
Apr 19 2016 13:08
@alpox sorry I'm not understanding you... let's break this apart...what div should teh placeholder image be in?
thanks again for helping
Thanks again for helping @alpox, I mean
CamperBot
@camperbot
Apr 19 2016 13:10
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 556 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 19 2016 13:12
@codercooooder the placeholder image should be in the filler div
codercooooder
@codercooooder
Apr 19 2016 13:13
is the filler div in correct place now? @alpox?
Islam Ibakaev
@dagman
Apr 19 2016 13:13
what do u think about dropsown i buit
https://codepen.io/dagman/pen/doOqqv
codercooooder
@codercooooder
Apr 19 2016 13:15
@dagman super cool! I like it except it seems to pause for a small bit after you drop each....it doesn't seem smooth--which you may not want, but I feel like if it were smoother /faster it might be a bit better.
alpox
@alpox
Apr 19 2016 13:15
@codercooooder I'm not sure since i have no real overview over all your nested divs ^^
codercooooder
@codercooooder
Apr 19 2016 13:16
you don't see the codepen?
alpox
@alpox
Apr 19 2016 13:16
@codercooooder I do, but i don't exactly know which one is for what, and i'm in a statistics lesson :D
So no time to look closer
codercooooder
@codercooooder
Apr 19 2016 13:16
@alpox. ok cool. what kind of stats?
alpox
@alpox
Apr 19 2016 13:17
@codercooooder Maybe you should close it before the text div
@codercooooder Some things about Bias and normal distribution
@codercooooder Hmm you should put <img src="http://placehold.it/350x150">or some other dimensions you need (placeholder.it) in your filler. It seems its in the wrong spot now when you look at the html it would produce when you put it in now
codercooooder
@codercooooder
Apr 19 2016 13:23
I tried closing it like that, and it messed things up, I'll do it again..@alpox
alpox
@alpox
Apr 19 2016 13:25
I would still go with an external svg which you import as image ^^
It only gets a mess like that
Islam Ibakaev
@dagman
Apr 19 2016 13:29
@codercooooder :smile:
codercooooder
@codercooooder
Apr 19 2016 13:29
@alpox, does this structure look ok for now?
Zachary
@White7292
Apr 19 2016 13:30
Did anyone else feel like they were being thrown into "things" when they hit he "build a random quote machine"? :P I kinda like the challenge,
codercooooder
@codercooooder
Apr 19 2016 13:31
@alpox , the filler sound surround the svg, yes?
alpox
@alpox
Apr 19 2016 13:32
@codercooooder The filler should be there for the svg since the svg would collapse without it.
So yeah it should surround the svg and hold both, the svg and the placeholder
codercooooder
@codercooooder
Apr 19 2016 13:38
@aplox, the first column has all that: http://codepen.io/ihatecoding/pen/JXZKgx?editors=1100
@alpox, it looks like the svg is going under the filler.
alpox
@alpox
Apr 19 2016 13:49
@codercooooder Hmm its always still the same problem. The svg path won't scale
Just put it in an external svg as i suggested. Way easier
codercooooder
@codercooooder
Apr 19 2016 13:49
@alpox sorry, i typed your name wrong, the first column in the above code pen has all that.
alpox
@alpox
Apr 19 2016 13:50
@codercooooder Np live seen that
codercooooder
@codercooooder
Apr 19 2016 13:50
hmmm @alpox what do you mean by external, import the file? why would that be different.
alpox
@alpox
Apr 19 2016 13:50
I tried things too
Well you can store it in an .svg file (that is like an image file then)
codercooooder
@codercooooder
Apr 19 2016 13:50
@alpox right,but why would it behave differently?
alpox
@alpox
Apr 19 2016 13:51
You can use it with <img src="pathToSvg.svg"></img>
That behaves as every other image
If you do it inline, all the paths inside the svg have their own behaviour
They don't scale right and stick to their viewport
codercooooder
@codercooooder
Apr 19 2016 13:51
@alpox will it still be css modifiable? these are actually animated
alpox
@alpox
Apr 19 2016 13:52
css modifiable? Only like an image is too
codercooooder
@codercooooder
Apr 19 2016 13:52
@alpox i mean the individual paths
alpox
@alpox
Apr 19 2016 13:52
I don't think so
codercooooder
@codercooooder
Apr 19 2016 13:53
@alpox, then it won't do. these are interactive
alpox
@alpox
Apr 19 2016 13:53
Working with svgs in a scaling manner like that is one of the worst tasks in designing :D
codercooooder
@codercooooder
Apr 19 2016 13:53
@codercooooder well now i know. god
@alpox thanks for your help though
alpox
@alpox
Apr 19 2016 13:53
I would rather choose a canvas instead of an svg then
But i'm not sure how much better it behaves
so i have to go
cya
codercooooder
@codercooooder
Apr 19 2016 13:54
someone answered my stack question, he says i have to set something fixed, but i don't believe him, baiiii!
alpox
@alpox
Apr 19 2016 13:58
Fixed? That wouldnt work i guess xD
codercooooder
@codercooooder
Apr 19 2016 13:59
thanks again for the help @alpox
CamperBot
@camperbot
Apr 19 2016 13:59
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave alpox points
codercooooder
@codercooooder
Apr 19 2016 14:03
help me @jdtdesigns , you're my only hope!
CamperBot
@camperbot
Apr 19 2016 14:03
no wiki entry for: me @jdtdesigns youre my only hope
codercooooder
@codercooooder
Apr 19 2016 14:04
I could use your help, @jdtdesigns , you're my only hope!
Paul Borawski
@iAmNawa
Apr 19 2016 14:09
@codercooooder I might be able to help?
codercooooder
@codercooooder
Apr 19 2016 14:27
Here, let me show you my Stack question,
Here @iAmNawa
@iAmNawa it is a tough svg issue apparently,
another user worked with me, and tried a "filler image solution" that we couldn't get to work: you can see it in the first column: http://codepen.io/ihatecoding/pen/JXZKgx?editors=1100
zackluckyf
@zackluckyf
Apr 19 2016 14:30
@alpox holy shit I love you... I actually had this exact same problem with another function and had to change it from while to if but forgot to do it for playerInput... You are the best thank you
CamperBot
@camperbot
Apr 19 2016 14:30
zackluckyf sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 557 | @alpox | http://www.freecodecamp.com/alpox
Paul Borawski
@iAmNawa
Apr 19 2016 14:31
@codercooooder I see two viable options. You can either, A) Use bootstrap or B) do @media only and min-width and change the size a couple times depending on pixel width of the screen
codercooooder
@codercooooder
Apr 19 2016 14:32
@iAmNawa are you pretty experienced, you don't see another option?
Paul Borawski
@iAmNawa
Apr 19 2016 14:41
I’d like to think I know a bit ;) I think bootstrap is the best way to make something responsive
@codercooooder
codercooooder
@codercooooder
Apr 19 2016 14:41
@iAmNawa if i use it , i have to import the whole infrastructure?
@iAmNawa i will hold off until /if I hear from @jdtdesigns, that guy has amazed me.
Paul Borawski
@iAmNawa
Apr 19 2016 14:43
@codercooooder are you writing the whole site in plain css?
codercooooder
@codercooooder
Apr 19 2016 14:43
@iAmNawa you might be equally amazing, but I have seen how much he knows.
@iAmNawa pretty much
Paul Borawski
@iAmNawa
Apr 19 2016 14:45
@codercooooder People just don’t do that anymore. Anyway, I’m interested to know what he says as well, I’m always open to different ways of doing things. Please PM me or tag me here and let me know what he comes up with. I’ll thank! you now so you don’t forget
CamperBot
@camperbot
Apr 19 2016 14:45
iamnawa sends brownie points to @codercooooder :sparkles: :thumbsup: :sparkles:
:star: 12 | @codercooooder | http://www.freecodecamp.com/codercooooder
Denis
@snexus
Apr 19 2016 14:45
By the way, guys, regarding Bootstrap - maybe I am missing the point. For the advanced front-end projects isn't it easier to use regular absolute/relative positioning instead? For me Bootstrap looks like a good framework for web pages, not for web applications with custom graphics/positioning
Paul Borawski
@iAmNawa
Apr 19 2016 14:46
@snexus Are you trying to create something responsive?
Denis
@snexus
Apr 19 2016 14:49
@iAmNawa For example take any of FCC's advanced projects - a clock, tic-tac-toe, Simon's game - there is no such meaning of "responsive" there. They are just better with fixed size, and it will look equally good on mobile and desktop
So what is an additional value of using Bootsrtap there?
Robert Uivarosi
@URobert
Apr 19 2016 14:49
@snexus I believe I used bootstrap for button positioning on the timer
Denis
@snexus
Apr 19 2016 14:50
@URobert Was it easy? Especially vertical positioning?
Paul Borawski
@iAmNawa
Apr 19 2016 14:50
@snexus In those cases bootstrap can seem unneccessary
Samuel Cupidon
@Zerazera
Apr 19 2016 14:50
@snexus Bootstrap is a tool, like any other. If you don't need it, don't use it.
zayexo
@zayexo
Apr 19 2016 14:51
hi im on the bootstrap lessons but it doesnt actually explain what it is/ whats it for. can someone explain it please?
codercooooder
@codercooooder
Apr 19 2016 14:52
@zayexo from my basic understanding, it is a thing you use, instead of plain old css/html that is supposed to be an easier way to make responsive graphics elements.
Denis
@snexus
Apr 19 2016 14:52
@Zerazera Yeah, I understand it now..But as for newbie in web develpoment , it was hard to understand when it is needed or not - in the latest projects figured out that life was much easier without Bootstrap :)
codercooooder
@codercooooder
Apr 19 2016 14:53
@zayexo it is like going to macdonalds and ordering a big mac instead of buying meat, making bread, and making your own condiments.
zayexo
@zayexo
Apr 19 2016 14:53
@codercooooder ohh ok thanks!
CamperBot
@camperbot
Apr 19 2016 14:53
zayexo sends brownie points to @codercooooder :sparkles: :thumbsup: :sparkles:
:star: 13 | @codercooooder | http://www.freecodecamp.com/codercooooder
Samuel Cupidon
@Zerazera
Apr 19 2016 14:54
@zayexo The good old boys at Twitter wrote a framework of pre-defined CSS that, when used together, create pages that are more responsive to differing screen widths. Bootstrap is a big fat list of CSS classes you can apply to your web page to style elements and make responsive pages with less CSS of your own.
zayexo
@zayexo
Apr 19 2016 14:55
@Zerazera oh that makes sense haha thanks
CamperBot
@camperbot
Apr 19 2016 14:55
zayexo sends brownie points to @zerazera :sparkles: :thumbsup: :sparkles:
:star: 379 | @zerazera | http://www.freecodecamp.com/zerazera
Denis
@snexus
Apr 19 2016 14:56
As for responsive design - on modern browser - why one can't just use few media queries and transform:scale(x) to make it responsive? Pretty sure it is a dumb question, but anyway :)
zayexo
@zayexo
Apr 19 2016 14:56
so basically its like using their classes instead of ur own
Samuel Cupidon
@Zerazera
Apr 19 2016 14:56
Exactly
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 19 2016 15:16
Honestly having bootstrap or any other grid system made my life a whole lot easier , it reduces time to design themes templates , now if any scenerio if the world was devoid of grid systems I would happily made one myself.
Hmm... I am in a bit of a doubt here .Now does the zipline of making a tribute page should be done without a bootstrap ?
nemonemo33
@nemonemo33
Apr 19 2016 15:26
Can someone PLEASE help my understand why when you load this in full view I get a 404 on my Ajax call? But for some reason the EXACT url when put in
( api.openweathermap.org/data/2.5/weather?lat=33.9677675&lon=-83.99028779999999&appid=32a059766d07b062c9a96d0b4973a108 ) turns up the JSON.
http://codepen.io/MagicMarkers/pen/MyowXN
sterstar
@sterstar
Apr 19 2016 15:29
Guys help! This is my objective:Nest your text field in a form element. Add the action="/submit-cat-photo" attribute to this form element
Bruce Young
@mutantspore
Apr 19 2016 15:29
@nemonemo33 http:// in your api URL
sterstar
@sterstar
Apr 19 2016 15:29
<input type="text" placeholder="cat photo URL">
Stephen James
@sjames1958gm
Apr 19 2016 15:29
@nemonemo33 You are not using absolute URL (no http://) so in codepen it puts http://s.codepen.io/boomerang/409814828bf934e1ded13e1c1957071b1461079673202 in front of your url
sterstar
@sterstar
Apr 19 2016 15:29
I don't understand where to nest what
nemonemo33
@nemonemo33
Apr 19 2016 15:30
OH MY GOD. I tried that but I put https.... damnit
Can someone explain the difference? I (think) I know one is secure? But why wouldnt it work?
Stephen James
@sjames1958gm
Apr 19 2016 15:30
@nemonemo33 You are running codepen from http and trying https - security error
Bruce Young
@mutantspore
Apr 19 2016 15:31
s is secure yes, but if they either don’t have it set up on their web server or as in this case I think it’s a paid option it won’t work
sterstar
@sterstar
Apr 19 2016 15:32
Guys can you please look at my above problem? Its really easy,but its annoying for me as its my 1st day
Bruce Young
@mutantspore
Apr 19 2016 15:32
you can load secure into an insecure site but not the other way around
Stephen James
@sjames1958gm
Apr 19 2016 15:32
@mutantspore good to know thanks
CamperBot
@camperbot
Apr 19 2016 15:32
sjames1958gm sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1431 | @mutantspore | http://www.freecodecamp.com/mutantspore
Parminder Singh
@Trion129
Apr 19 2016 15:34
@sterstar enclose the input inside <form> tags
<form action="/submit-cat-photo">
      <input type="text" placeholder="cat photo URL">
</form>
:) Welcome to FreeCodeCamp @sterstar
sterstar
@sterstar
Apr 19 2016 15:36
@Trion129 Thanks man! I did the same,but forgot ">" after the action! A clear rookie mistake lol
CamperBot
@camperbot
Apr 19 2016 15:36
sterstar sends brownie points to @trion129 :sparkles: :thumbsup: :sparkles:
:star: 336 | @trion129 | http://www.freecodecamp.com/trion129
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 19 2016 15:46
http://codepen.io/malangaveuday/pen/aNYreq
guys please check my code and please tell me require improvements in it.
Christina
@cgraham74
Apr 19 2016 15:51
@malangaveuday You have a large gap of white space at the bottom.
zayexo
@zayexo
Apr 19 2016 16:08

is this right?

Add an h4 element to each of your <div class="col-xs-6"> elements.

<h4><div class="col-xs-6">#left-well</div></h4>

alpox
@alpox
Apr 19 2016 16:15
I guess they wanted that you put it inside there :D @zayexo
zayexo
@zayexo
Apr 19 2016 16:16
haha yea xd
Richard Andrews
@Whiplash5057
Apr 19 2016 16:22
hey guys ...For the random quote generator ...do I need to use the twitter API for the button ??
Frank XC
@tenkdayz
Apr 19 2016 16:23
@Whiplash5057 it's a twitter pop up box
Richard Andrews
@Whiplash5057
Apr 19 2016 16:23
So it's just a href?? @tenkdayz ??
Frank XC
@tenkdayz
Apr 19 2016 16:26
@Whiplash5057 yeah if you google twitter button the first link should have the code for it..
Richard Andrews
@Whiplash5057
Apr 19 2016 16:28
@tenkdayz Then how do I add the quote into the text input???
Frank XC
@tenkdayz
Apr 19 2016 16:29
@Whiplash5057 the code you copy from them has an a-tag and you have to set its href attribute to the link+the quote.
@tenkdayz ??
:worried:
@tenkdayz Got it ..I think
@tenkdayz thanks
CamperBot
@camperbot
Apr 19 2016 16:34
whiplash5057 sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 421 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Frank XC
@tenkdayz
Apr 19 2016 16:34
@Whiplash5057 yeah just play with it.
Casey Heath
@ExhibitArts
Apr 19 2016 16:36
Could someone help me? I'm trying to center the logo at the top left of the navbar. margin:auto; doesn't seem to work. Is there another way of going about this? - http://bernieblogger.byethost8.com/
ML164
@ML164
Apr 19 2016 16:41
@ExhibitArts try setting your .navlogo to display: block;
TarkaDev
@TarkaDev
Apr 19 2016 16:41
hello
ML164
@ML164
Apr 19 2016 16:41
@ExhibitArts and then use margin: auto;
Casey Heath
@ExhibitArts
Apr 19 2016 16:42
@ML164 Yeah I just tried that! It worked thanks!
CamperBot
@camperbot
Apr 19 2016 16:42
exhibitarts sends brownie points to @ml164 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ml164
TarkaDev
@TarkaDev
Apr 19 2016 16:43
I just stared, but did the first challenge need to look exactly like the example ?
Casey Heath
@ExhibitArts
Apr 19 2016 16:43
I've never had to use display:block; before so I'm not sure why it requires me to do so now?
ML164
@ML164
Apr 19 2016 16:45
@ExhibitArts i'm still learning too but i think basically block causes the element to sit on its own line, make sure nothing messes with it
Matthew Boland
@mattboland
Apr 19 2016 16:48
@TarkaDev the examples are just that. You have creative freedom to make your projects look however you like. the important part is the functionality and that they address the user stories.
jalley3
@jalley3
Apr 19 2016 16:49
@buiphuking because a quarter is 25cents, and a dollar is 100 cents. So if you have 4.25, you have 425 cents. 425 % 25 = 17...hope that makes sense
my wiki viewer seems to be working fine accept for one thing....i can only use the search bar once and then it wont let me submit a new search without refreshing the page
TarkaDev
@TarkaDev
Apr 19 2016 16:50
@jalley3 oh thx
CamperBot
@camperbot
Apr 19 2016 16:50
tarkadev sends brownie points to @jalley3 :sparkles: :thumbsup: :sparkles:
:star: 290 | @jalley3 | http://www.freecodecamp.com/jalley3
jalley3
@jalley3
Apr 19 2016 16:51
? i think you meant to thank @mattboland
CamperBot
@camperbot
Apr 19 2016 16:51
jalley3 sends brownie points to @mattboland :sparkles: :thumbsup: :sparkles:
:star: 362 | @mattboland | http://www.freecodecamp.com/mattboland
jalley3
@jalley3
Apr 19 2016 16:53
ah i figured out that it is using the submit twice, but it is appending the results to the end. How do i just replace everythig
nevermind i fixed it
just put a jquery empty call at the beginning fo the function
Emmanuel
@EmmyGee
Apr 19 2016 17:44
feedbacks please...
cannelflow
@cannelflow
Apr 19 2016 17:47
@EmmyGee :+1:
Brandon
@Daxo
Apr 19 2016 17:47
@EmmyGee looks good so far! Don't forget the twitter button!
Emmanuel
@EmmyGee
Apr 19 2016 17:49
@bleafman Thanks a lot..i'll put that in place.
CamperBot
@camperbot
Apr 19 2016 17:49
emmygee sends brownie points to @bleafman :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for bleafman
mvjkmr
@mvjkmr
Apr 19 2016 17:55
@EmmyGee Its looks cool.
Robert Friedman
@robfr77
Apr 19 2016 18:29
Can anyone give a suggestion for this I'm trying to get my calculator input field to append values instead of starting with a new value every time a number is clicked
$("button").click(function() {
  var display = $(".display");
  var current = $(this).html();
  display.val(display.val() + current);
});
leakvoid
@leakvoid
Apr 19 2016 18:30
About twitter button: I can't find documentation for posting a simple tweet. The closest thing i found is "POST direct_messages/new". Can somebody link me "Post tweet" documentation page?
CamperBot
@camperbot
Apr 19 2016 18:30
you need to ask about @someone!
Ghost
@ghost~56bd2077e610378809c105cd
Apr 19 2016 18:34
looks good @EmmyGee
:+1:
i just finishedmine too
well..i turned it in last night
mines a little different than normal versions tho :)
Vitor Lory
@vlory73
Apr 19 2016 18:42

hi guys, I'm having the strangest issue and I can't find much about it anywhere and I wonder if you have some experience with font-awesome on iOS Safari and Chrome for iOS.
The problem is that when I host the file, fa does not work on mobile platforms. when I linked to a CDN then it works.

<link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/w3.css">

style.css and w3.css load correctly on both desktop and mobile browsers

Jeff
@adzam5
Apr 19 2016 18:45
@vlory73 Did you modify the hosted fa file at all?
Vitor Lory
@vlory73
Apr 19 2016 18:46
@adzam5 no, at least not that I'm aware
sadlyj
@sadlyj
Apr 19 2016 18:47
I have a question. As a beginner, going through the front-end portion of this curriculum, there is a ton of stuff that is covered. How did you remember it all? Obviously this stuff isn't hard and I have most of the main beginning concepts and coding down, but there are so many different html and css codes they want you to know. What is the best way to really retain all of it? I feel like there's no way an average person could go through the front-end portion and remember all the codes. I know practice will help but I don't really know what to practice on.
Jeff
@adzam5
Apr 19 2016 18:47
@vlory73 Interesting. I was thinking maybe you had a typo or something that was causing an error in the file. I find iOS Safari to be much more strict than desktop browsers.
@vlory73 Maybe try validating the CSS file and see if that comes up with any errors
Vitor Lory
@vlory73
Apr 19 2016 18:48
@adzam5 i am only hosting the css file, do you know if all the other files are needed?
paffson
@paffson
Apr 19 2016 18:49
Hi guys, I'm working on Simon game and I've got a board playing sounds on click but when you click fast it doesn't sound nice. What can I do to fix this?
Robert Friedman
@robfr77
Apr 19 2016 18:49
@sadlyj I wouldn't worry about it when you do the projects you will practice more in depth with the html + css along with jquery + bootstrap if you choose. I've been augmenting my study here with https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg and https://www.codeschool.com/
Jeff
@adzam5
Apr 19 2016 18:52
@vlory73 Just hosting the CSS file should work fine
Vitor Lory
@vlory73
Apr 19 2016 18:57
@adzam5 thanks. however experience just proved us both wrong.
I have just found that the fonts folder also needs to be hosted
CamperBot
@camperbot
Apr 19 2016 18:57
vlory73 sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
Vitor Lory
@vlory73
Apr 19 2016 18:58
probably makes sense
CamperBot
@camperbot
Apr 19 2016 18:58
:star: 416 | @adzam5 | http://www.freecodecamp.com/adzam5
Jeff
@adzam5
Apr 19 2016 18:59
@vlory73 Oh wow. Good to know!
sadlyj
@sadlyj
Apr 19 2016 19:00
@robfr77 Okay, thanks. Also, when going through this or any other resources, did you (or anyone if someone cares to share) take notes or just went through it and kind of relied on your memory and the practice? I took a few notes while completing codecademy but that wasn't as in-depth as this is. I know everyone learns differently too but I'm just curious.
CamperBot
@camperbot
Apr 19 2016 19:00
:star: 310 | @robfr77 | http://www.freecodecamp.com/robfr77
sadlyj sends brownie points to @robfr77 :sparkles: :thumbsup: :sparkles:
Vitor Lory
@vlory73
Apr 19 2016 19:00
@adzam5 probably works on desktop because i have font-awesome fonts installed on my system
bye guys. have a good one
Robert Friedman
@robfr77
Apr 19 2016 19:02
@sadlyj i benefit from taking more notes. i took notes on the net ninja jquery tutorials. it helps to have it on hand and to go through the motion of writing it down, for me
ElvisTheStriker
@ElvisTheStriker
Apr 19 2016 19:14
Hi folks. I have a question. global variables and functions to be used in the $(document).ready(function() ... where do i declare them... inside the $(document).ready(function() or outside?
PhanTien
@PhanTien
Apr 19 2016 19:16
hello guys.first pardon me for bad english.
i just finished "build a tribute page" challenge
i need some help
i have problem at making image in right position
i try align="center" but it's just make image go to center
i will to make image move up or down a littile bit so my page will look better.
please help me. thank u.
Micah Bales
@micahbales
Apr 19 2016 19:28
@PhanTien Hi there. Can you explain which image you'd like to position, and where you would like it positioned?
the doer
@ewathedoer
Apr 19 2016 19:31
Any color contrast freak here with a good sense of UX?
I am looking for help in the pen I am currently finishing http://codepen.io/thedoer/full/GZxdQO
Janaya
@Janaya425
Apr 19 2016 19:33
weird question about using external css. in my css file for this project I finished for some reason it wasn't implementing the first css element which entailed a background color on my webpage. However when I added a different element above it, it worked but did not apply the new element. Is this normal? I tried it on another project?
PhanTien
@PhanTien
Apr 19 2016 19:35
@micahbales Thank u for responding . i want my 2nd and 3rd image move down a bit so they will match with my paragraphs.i tried to use padding and margin to do that but it's not work and make my code error. please tell me how to position image.
CamperBot
@camperbot
Apr 19 2016 19:35
phantien sends brownie points to @micahbales :sparkles: :thumbsup: :sparkles:
:star: 400 | @micahbales | http://www.freecodecamp.com/micahbales
Janaya
@Janaya425
Apr 19 2016 19:37
best place to by a domain name?
Micah Bales
@micahbales
Apr 19 2016 19:42
@Janaya425 I like DreamHost.
@PhanTien Sorry, I had to step away. Feeding the baby! :)
give me just a few moments and I'll take a look
Jeff
@adzam5
Apr 19 2016 19:46
@Janaya425 1and1 has a good deal if you are looking for hosting too
Janaya
@Janaya425
Apr 19 2016 19:50
Thanks @adzam5 and @micahbales ! I signed up for 1and1 :)
CamperBot
@camperbot
Apr 19 2016 19:50
janaya425 sends brownie points to @adzam5 and @micahbales :sparkles: :thumbsup: :sparkles:
:star: 401 | @micahbales | http://www.freecodecamp.com/micahbales
:star: 417 | @adzam5 | http://www.freecodecamp.com/adzam5
Brandon
@Daxo
Apr 19 2016 19:56
@camperbot No points for me?
Mark Little
@MarkBLittle
Apr 19 2016 19:59
@Janaya425 I know I'm a little bit late in this, but I like BlueHost better than 1and1. One of my friends was on there and paying like 20+ a month, where as all my clients have been using BlueHost (per my recommendation - not affiliated) paying somewhere between 3-7 a month.
Janaya
@Janaya425
Apr 19 2016 20:00
alright thanks @MarkBLittle I will check that out too. i haven't submitted my payment yet for 1&1
CamperBot
@camperbot
Apr 19 2016 20:00
janaya425 sends brownie points to @markblittle :sparkles: :thumbsup: :sparkles:
:star: 315 | @markblittle | http://www.freecodecamp.com/markblittle
Micah Bales
@micahbales
Apr 19 2016 20:05
Picking a host is kind of a big decision, cause it's a pain to move.
@PhanTien You still there?
There are a number of issues with your code that I can go over with you.
@ewathedoer A really great site for figuring out what colors to use is http://www.paletton.com
Brandon
@Daxo
Apr 19 2016 20:07
@micahbales oh wow! That's a cool site
@micahbales thanks!
CamperBot
@camperbot
Apr 19 2016 20:09
daxo sends brownie points to @micahbales :sparkles: :thumbsup: :sparkles:
:star: 402 | @micahbales | http://www.freecodecamp.com/micahbales
Micah Bales
@micahbales
Apr 19 2016 20:11
@Daxo No worries! Helps me out constantly. :)
the doer
@ewathedoer
Apr 19 2016 20:14
@micahbales thanks, I use simillar but still are not sure how to marry them all and not to have a rainbow tree
CamperBot
@camperbot
Apr 19 2016 20:14
ewathedoer sends brownie points to @micahbales :sparkles: :thumbsup: :sparkles:
:star: 403 | @micahbales | http://www.freecodecamp.com/micahbales
Patrick
@pwcsquared
Apr 19 2016 20:16
Hey guys, I'm trying to foolproof my calculator app, would anyone care to break it?
Micah Bales
@micahbales
Apr 19 2016 20:27
@pwcsquared Wow, no, I couldn't find any problems. You include solutions that I didn't even consider when I made mine (like scientific notation for very large numbers. Well done!
Patrick
@pwcsquared
Apr 19 2016 20:29
@micahbales Thanks! I think javascript adjusts for large numbers automatically though, I didn't write that bit :P
CamperBot
@camperbot
Apr 19 2016 20:29
pwcsquared sends brownie points to @micahbales :sparkles: :thumbsup: :sparkles:
:star: 404 | @micahbales | http://www.freecodecamp.com/micahbales
Micah Bales
@micahbales
Apr 19 2016 20:30
Very nice, in any case. The design is excellent, too.
DonFilip
@DonFilip
Apr 19 2016 20:31
Do you have problem and co create something like that https://codepen.io/hallaathrad/full/vNEPpL ? i still don't know JS and don't know HTML jade and PostCSS?
*to create page like that
if you have project like that with HTML5 CSS3 bootsraps and Jquery i would like to see
Micah Bales
@micahbales
Apr 19 2016 20:35
@DonFilip Nice looking portfolio page. You don't need to know Jade or PostCSS to write that. Those are just frameworks for people who write a lot of code and want to do less work. :)
DonFilip
@DonFilip
Apr 19 2016 20:36
but how to create that with HTML and CSS, do you have some similar page just to see how to do? Because when i look at this one i can't make anyting:)
PhanTien
@PhanTien
Apr 19 2016 20:38
@micahbales im here.im coding my portfolio page
DonFilip
@DonFilip
Apr 19 2016 20:41
any help? :)
Janaya
@Janaya425
Apr 19 2016 20:45
@micahbales thats what I had read and I want to pick something decent
Jackson Bates
@JacksonBates
Apr 19 2016 20:48
@pwcsquared what is supposed to happen when you press % on your calculator?
Patrick
@pwcsquared
Apr 19 2016 20:54
@JacksonBates it should return the second value as a percentage of the first value
paffson
@paffson
Apr 19 2016 20:55
@pwcsquared 0.1 + 0.2 = ?
Patrick
@pwcsquared
Apr 19 2016 20:55
so if first value is 10, second is 5, percent will turn the second value into 0.5
@paffson 0.30000000000000004 according to javascript lol
paffson
@paffson
Apr 19 2016 20:56
@JacksonBates it depends on the calculator. some of them simply divide by 100
@pwcsquared i know :) but you asked to break it ;)
it can be fixed though
Patrick
@pwcsquared
Apr 19 2016 20:58
@paffson pray tell
I remember that problem being mentioned in eloquent javascript
paffson
@paffson
Apr 19 2016 20:59
oh, was it, i have to look then, i fixed by using a library
Patrick
@pwcsquared
Apr 19 2016 21:00
I don't remember if it offered a solution though or if it was just something to be aware of
paffson
@paffson
Apr 19 2016 21:01
after i used a library, you can't break mine ;)
but speaking of yours - 2+2 = and then press 0
it gives 20
Juwdohr
@Juwdohr
Apr 19 2016 21:04
Does anyone know where I can place images to use on Codepen?
Hector Garcia
@augmt
Apr 19 2016 21:04
google drive and/or dropbox are two options
Patrick
@pwcsquared
Apr 19 2016 21:05
@paffson I'm getting 0 actually, is -2+2= the exact order to press the buttons?
paffson
@paffson
Apr 19 2016 21:05
yeah and now press 0
Patrick
@pwcsquared
Apr 19 2016 21:06
ahh
paffson
@paffson
Apr 19 2016 21:07
also % , i don't know what it does
Robert Friedman
@robfr77
Apr 19 2016 21:10
in the example FCC does the % on their calculator gives the remainder, so i just did that since it's built into javascript
Patrick
@pwcsquared
Apr 19 2016 21:11
@paffson it does what a windows calculator does, interprets the second value as a percentage of the first
20 + 5% = 20 + 1
Jackson Bates
@JacksonBates
Apr 19 2016 21:11
@pwcsquared I asked because yours wasn't doing anything :) - but it think you might be fixing it at the moment because the whole thing has stopped working for me.
Patrick
@pwcsquared
Apr 19 2016 21:11
@JacksonBates yeah I just broke it lol
paffson
@paffson
Apr 19 2016 21:11
@pwcsquared ok
Jackson Bates
@JacksonBates
Apr 19 2016 21:13
@pwcsquared also, I'm using it in my iPhone 6s and it doesn't fit me screen that well - have you tested it for different device sizes?
*my
Patrick
@pwcsquared
Apr 19 2016 21:13
@JacksonBates no, I did it with px dimensions so it doesn't scale at all yet
Juwdohr
@Juwdohr
Apr 19 2016 21:15
@augmt I tried dropbox and I couldn't get it to show.
Hector Garcia
@augmt
Apr 19 2016 21:15
@Juwdohr i've never used dropbox but i've heard it working for other people
i've tried google drive and github itself and they've worked for me
Jackson Bates
@JacksonBates
Apr 19 2016 21:16
@pwcsquared I like the key press feedback for the bottons. I haven't made mine yet, so I'll be stealing that idea :)
paffson
@paffson
Apr 19 2016 21:17
@JacksonBates this should be the case with everything that has buttons and this one has many... so no other way to test it than pressing a lot of buttons :)
axgtz
@axgtz
Apr 19 2016 21:17
For css what do you recommend sizes units to be? em, percentages,px...
Hector Garcia
@augmt
Apr 19 2016 21:19
@axgtz it's best to know when it's appropriate to use each one
axgtz
@axgtz
Apr 19 2016 21:19
Oh, do you know where i can find tutorials about that specific type of thing @augmt ?
Hector Garcia
@augmt
Apr 19 2016 21:21
@axgtz no but maybe someone else does
i do read CSS blogs like http://csswizardry.com/ for tips sometimes but otherwise i just try making things on my own
axgtz
@axgtz
Apr 19 2016 21:22
@augmt thank u, i will look into that
CamperBot
@camperbot
Apr 19 2016 21:22
axgtz sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:star: 387 | @augmt | http://www.freecodecamp.com/augmt
Tien Anh Nguyen
@tienanh2007
Apr 19 2016 21:25
Could someone tell me how to get started on making this working calculator a beautiful UI
I just don't know what to learn next about UI or css frameworks whatsoever
Juwdohr
@Juwdohr
Apr 19 2016 21:33
@augmt getting same issue on google drive.
paffson
@paffson
Apr 19 2016 21:35
@tienanh2007 i can't put 0.5 in your calculator, also i can put many dots ......
Hector Garcia
@augmt
Apr 19 2016 21:39
@Juwdohr what's the link to your image on google drive?
Juwdohr
@Juwdohr
Apr 19 2016 21:40
I can't find it. I can get a share able link but then it doesn't load it into the webpage.
Hector Garcia
@augmt
Apr 19 2016 21:42
@Juwdohr does the shareable link look like https://drive.google.com/file/d/[some id]/view?usp=sharing
Juwdohr
@Juwdohr
Apr 19 2016 21:42
@augmt yeah
Hector Garcia
@augmt
Apr 19 2016 21:43
@Juwdohr take the id from that link and paste it into this link https://www.googledrive.com/host/[some id]
Juwdohr
@Juwdohr
Apr 19 2016 21:44
@augmt where do you find that link?
Hector Garcia
@augmt
Apr 19 2016 21:44
i got it from stackoverflow because i forgot how to do it =o
Juwdohr
@Juwdohr
Apr 19 2016 21:45
@augmt Thanks
CamperBot
@camperbot
Apr 19 2016 21:45
juwdohr sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:star: 388 | @augmt | http://www.freecodecamp.com/augmt
Hector Garcia
@augmt
Apr 19 2016 21:46
google drive will supposedly remove this service after august 31st of this year though so this is a temporary solution at best
Federico Dente
@fez994
Apr 19 2016 21:51
Hi guys i would like to position an image like this http://jungsik.kr/#index but i don't know how to do it. Any suggestion? My image seems too big and i want it to stay in one page without scroll like the one the website i linked
Islam Ibakaev
@dagman
Apr 19 2016 21:59
90% done Tribute Page. What do u think guys?
http://codepen.io/dagman/pen/wGXzJd
Brandon
@Daxo
Apr 19 2016 22:01
Okay… So… I know I’m doing something very dumb here but I can’t get the API call to work for the Wikipedia app. Can anybody take a quick look? http://codepen.io/apeiron/pen/zqazqz?editors=1011
I’m pretty sure it’s something silly that I’m just not seeing
Frank XC
@tenkdayz
Apr 19 2016 22:11
@Daxo you want to console log the all data?
Brandon
@Daxo
Apr 19 2016 22:11
@tenkdayz for now, yes
@tenkdayz I want to log it so I can make sure I’m getting everything I need
It looks like the API call is not working because I moved the console.log(apiURL) to after the .click but before the $getJSON and it logs the apiURL correctly
Brandon
@Daxo
Apr 19 2016 22:20
@tenkdayz figured it out
need to use &callback=?
Something to do with the “Same-origin policy” according to this page: http://www.9bitstudios.com/2014/03/getting-data-from-the-wikipedia-api-using-jquery/
greg
@wearenotgroot
Apr 19 2016 22:22

@Daxo try and use this

apiUrl = "https://en.wikipedia.org/w/api.php?callback=?&action=query&list=search&srsearch=wikipedia&srwhat=text&srprop=timestamp&format=json&continue=";

using and adding callback=? making used of jsonp

Pete Considine
@pjconsidine
Apr 19 2016 22:22
Hi all.
Brandon
@Daxo
Apr 19 2016 22:22
@wearenotgroot thanks! yep!
CamperBot
@camperbot
Apr 19 2016 22:22
daxo sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 1023 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
Theodore P.
@Ierofantis
Apr 19 2016 22:23
Can anyone help me on Simon Game?
Pete Considine
@pjconsidine
Apr 19 2016 22:23
can anyone help me out with a minor annoyance in the TwitchTV project?
Tiffany Tran
@TiffUX
Apr 19 2016 22:28
i'm on the "build a tribute page" and i have a question about adding an image. i've added an image and centered it but now there are these white lines on either side of it.
how do i get rid of those? i've tried margins but that doesn't seem to work.
Frank XC
@tenkdayz
Apr 19 2016 22:29
@pjconsidine post your link
@TiffUX are they part of the image ?
My annoyance is the blank line in the Online users section.
Paul Borawski
@iAmNawa
Apr 19 2016 22:31
@TiffUX post your code and we will help
@pjconsidine what blank line?
Tiffany Tran
@TiffUX
Apr 19 2016 22:32
they're on either side of the image and I don't think they're supposed to be there.
<div class="thumbnail">
<img class="image-margin" src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/3/31/1427815654599/e78bcf73-69ce-45c1-86e7-53bd43a41b7f-1360x2040.jpeg?w=380&q=55&auto=format&usm=12&fit=max&s=1648a22b6c2ac2164d79a3ca33d43450"></div>
Pete Considine
@pjconsidine
Apr 19 2016 22:32
sorry. not blank line. the line without a user name or status
second from the top
(at least on my screen)
I can't figure out where it's coming from to get rid of it
Tiffany Tran
@TiffUX
Apr 19 2016 22:33
oh wait sorry this is the actual code i'm not sure if i'm posting this correctly here.
<div class="thumbnail">
<img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/3/31/1427815654599/e78bcf73-69ce-45c1-86e7-53bd43a41b7f-1360x2040.jpeg?w=380&q=55&auto=format&usm=12&fit=max&s=1648a22b6c2ac2164d79a3ca33d43450"></div>
the background color of the body is light grey and so there are white stripes that pop up on either side of this image.
Paul Borawski
@iAmNawa
Apr 19 2016 22:35
@TiffUX post the codepen pink
link*
Paul Borawski
@iAmNawa
Apr 19 2016 22:35
@pjconsidine The way your posting it is not letting me see your code
JamesQuillin
@JamesQuillin
Apr 19 2016 22:35
hi everyone! how's it going?
Pete Considine
@pjconsidine
Apr 19 2016 22:35
Paul Borawski
@iAmNawa
Apr 19 2016 22:36
@JamesQuillin hello! how are you?
Frank XC
@tenkdayz
Apr 19 2016 22:36
@pjconsidine the one with "is streaming "
Paul Borawski
@iAmNawa
Apr 19 2016 22:36
@pjconsidine I don’t know jade, sorry bud
Pete Considine
@pjconsidine
Apr 19 2016 22:36
@tenkdayz That's the one
Anton
@UMMG
Apr 19 2016 22:37
Hi everyone!
I'm at the random quote challenge in I was wondering what good sources there are for the quotes? Any good databases that could be used? Or do people just write their own list and use that?
JamesQuillin
@JamesQuillin
Apr 19 2016 22:37
@iAmNawa I'm doing well! Thanks! A bit confused on the portfolio so looking for help but otherwise its a great day
CamperBot
@camperbot
Apr 19 2016 22:37
jamesquillin sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:star: 473 | @iamnawa | http://www.freecodecamp.com/iamnawa
Paul Borawski
@iAmNawa
Apr 19 2016 22:37
@TiffUX are you talking about the white lines when viewing on mobile?
Pete Considine
@pjconsidine
Apr 19 2016 22:37
@iAmNawa No worries. There's a way to view the compiled HTML, but I don't think you can do it in chat
Tiffany Tran
@TiffUX
Apr 19 2016 22:38
I'm not viewing it on mobile. On desktop
JamesQuillin
@JamesQuillin
Apr 19 2016 22:38

Basically, my navbar covers up content below it. I don't want to just add a margin-top because if I resize to mobile it covers up a different amount. Anyone thing they can help?

http://codepen.io/j1330/pen/reKzxr?editors=1000

Pete Considine
@pjconsidine
Apr 19 2016 22:39
@tenkdayz Oh, there's Handlebars.js in there too
should have mentioned that
Tiffany Tran
@TiffUX
Apr 19 2016 22:39
@iAmNawa I'm on my laptop and viewing it on fullmode
Paul Borawski
@iAmNawa
Apr 19 2016 22:39
@TiffUX What do you mean by white lines then?
Pete Considine
@pjconsidine
Apr 19 2016 22:40
@JamesQuillin I think you will need a top margin, but maybe use em or rem as the unit instead of pixels
that way it will adjust based on the screen size
Tiffany Tran
@TiffUX
Apr 19 2016 22:40
@iAmNawa when i change to full page view on either side of the picture there's white stripes
Pete Considine
@pjconsidine
Apr 19 2016 22:40
or use a @media-query
JamesQuillin
@JamesQuillin
Apr 19 2016 22:41
That's a great idea! I'll try that! If I can't get it to work I might do media queries but that's a bit advanced and I feel like bootstrap should be able to place content below a fixed navbar automaticall y:/
Pete Considine
@pjconsidine
Apr 19 2016 22:41
I hear ya
JamesQuillin
@JamesQuillin
Apr 19 2016 22:41
anything I can try to help you with pete?
lol im a total scrub XD
Pete Considine
@pjconsidine
Apr 19 2016 22:41
well, if you know about APIs and that junk, you can take a look at my Twitch TV viewer. :)
JamesQuillin
@JamesQuillin
Apr 19 2016 22:42
sadly I don't, I'm sorry. I'll jsut have to pay it forward when I'm more advanced
Pete Considine
@pjconsidine
Apr 19 2016 22:42
I'm only 70% scrub after a year, so there's that to look forward to
JamesQuillin
@JamesQuillin
Apr 19 2016 22:42
best wishes haha
Pete Considine
@pjconsidine
Apr 19 2016 22:42
no worries
:)
JamesQuillin
@JamesQuillin
Apr 19 2016 22:42
nice! lol
:D
Paul Borawski
@iAmNawa
Apr 19 2016 22:42
@TiffUX It must be your browser
@TiffUX there is just blank whitespace all the way around on google chrome
Tiffany Tran
@TiffUX
Apr 19 2016 22:43
oh okay. that might be it then.
lcthornhill
@lsrus
Apr 19 2016 22:43
@pjconsidine are you having troubles with your twitch api?
Pete Considine
@pjconsidine
Apr 19 2016 22:44
yeah. I'm getting a ghost result that I can't get rid off
lcthornhill
@lsrus
Apr 19 2016 22:44
I could take a look if you like?
Pete Considine
@pjconsidine
Apr 19 2016 22:44
CamperBot
@camperbot
Apr 19 2016 22:44
pjconsidine sends brownie points to @lsrus :sparkles: :thumbsup: :sparkles:
:star: 384 | @lsrus | http://www.freecodecamp.com/lsrus
lcthornhill
@lsrus
Apr 19 2016 22:45
is it the nameless 'is streaming' channel?
Pete Considine
@pjconsidine
Apr 19 2016 22:45
@lsrus that's the one
I'm using Handlebars templates for the result listing, so it could be there, but I can't see where
Tiffany Tran
@TiffUX
Apr 19 2016 22:47
@iAmNawa when i view it on my mobile phone it's not there but when i look at it on a regular desktop browser it's there. thanks.
CamperBot
@camperbot
Apr 19 2016 22:47
tiffux sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:star: 474 | @iamnawa | http://www.freecodecamp.com/iamnawa
lcthornhill
@lsrus
Apr 19 2016 22:48
@pjconsidine huh. I'm going to have a rummage
greg
@wearenotgroot
Apr 19 2016 22:48
@pjconsidine umm i think you need to change the api call
Pete Considine
@pjconsidine
Apr 19 2016 22:48
@ls by all means. It's probably a bit of a mess, so pardon the clutter.:)
greg
@wearenotgroot
Apr 19 2016 22:49
@pjconsidine on your function getUserStatus use channel instead of stream
url: "https://api.twitch.tv/kraken/channel/" + user
Ken Haduch
@khaduch
Apr 19 2016 22:49

@TiffUX - have you gotten help? The problem is that the .thumbnail class sets the background to all white. You should be able to change it by adding this in the CSS panel:

.thumbnail {
     background-color: green;
}

You can select your own color, of course. Just to make something that really shows up.

Also, you should put any other styles that you define (within CodePen's interface) in the "CSS" panel.

Good luck!

Pete Considine
@pjconsidine
Apr 19 2016 22:49
@wearenotgroot I used to stream call to see who was online. Is there a way to do that from the Channel call?
I couldn't find it, if so
one call would be way easier
greg
@wearenotgroot
Apr 19 2016 22:50
@pjconsidine re-read comment^
Tiffany Tran
@TiffUX
Apr 19 2016 22:50
@khaduch that helps a alot! thanks! although now there's a white outline.
CamperBot
@camperbot
Apr 19 2016 22:50
tiffux sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star: 965 | @khaduch | http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Apr 19 2016 22:52

@TiffUX - the .thumbnail has these CSS settings from the bootstrap.css

.thumbnail {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
    line-height: 1.42857;
    margin-bottom: 20px;
    padding: 4px;
    transition: border 0.2s ease-in-out 0s;
}

You can add any of the individual properties to that snippet of code and change the values - the border: 1px solid #ddd; is giving that light-colored border

greg
@wearenotgroot
Apr 19 2016 22:53
@pjconsidine you should have enough data for every channels using :https://api.twitch.tv/kraken/channel/
not quite sure why you have
getChannelStatus(user) and
getUserStatus(user)
you can probably combine these two
Tiffany Tran
@TiffUX
Apr 19 2016 22:53
@khaduch oh i actually was able to get rid of the line by changing the border color. thanks so much for your help.
CamperBot
@camperbot
Apr 19 2016 22:53
tiffux sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: tiffux already gave khaduch points
Pete Considine
@pjconsidine
Apr 19 2016 22:53
@wearenotgroot I don't get anything at all when I use channel
and when I use channels/, I don't get accurate streaming status
So I made one to see who was live streaming and another one to check the account status, etc.
Ken Haduch
@khaduch
Apr 19 2016 23:01
@TiffUX - great - you're welcome! Good luck!
Pete Considine
@pjconsidine
Apr 19 2016 23:01
I get this error from https://api.twitch.tv/kraken/channel/
{

    "error": "Unauthorized",
    "status": 401,
    "message": "Token invalid or missing required scope"

}
lcthornhill
@lsrus
Apr 19 2016 23:14
@pjconsidine not really familiar with handlebar but I got this (working?) version after fiddling around a bit. Changes are lines 79-80 in the JS (in the getuserStatus func).
Micah Bales
@micahbales
Apr 19 2016 23:15
Having a weird issue. The second function is working, displaying "X". The first function is not. What's the problem?
  $('#one').on('click', function() {
      $('#one p').text("X");
      playerClick();
  });
  $('#two').on('click', function() {
    $('#two p').toggle(0, function() {
      $(this).text("X");
      playerClick();
    });
  });
Pete Considine
@pjconsidine
Apr 19 2016 23:17
@lsrus Thanks for the direction. I'll look there and see what I can see.
CamperBot
@camperbot
Apr 19 2016 23:17
pjconsidine sends brownie points to @lsrus :sparkles: :thumbsup: :sparkles:
:warning: pjconsidine already gave lsrus points
Pete Considine
@pjconsidine
Apr 19 2016 23:17
Maybe I should get away from Handlebars, even though I love it so
seems like I'm the only one. :)
lcthornhill
@lsrus
Apr 19 2016 23:18
@pjconsidine it looks pretty monstrous at first glance, but then so do most things code related
Pete Considine
@pjconsidine
Apr 19 2016 23:19
@lsrus Most of its functions have been incorporated into other frameworks like Angular and React
I can't really grasp those yet
Though I do know I used a lot more code for the API calls than is strictly necessary
I could probably pare them down to just .GET calls instead of the full .ajax
Tulio Natale
@tuliodnw
Apr 19 2016 23:20
can someone check my portafolio, any tips, ideas or review are welcomehttp://codepen.io/tuliodnw/pen/ZWoPaX
Pete Considine
@pjconsidine
Apr 19 2016 23:21
Anyway, thanks for the help. I'll get back to it.
Brian Zelip
@brianzelip
Apr 19 2016 23:25
@tuliodnw Looks great! I really like the colors used and the thin white lines between each section. The only thing I'd change would be to add some whitespace after the contact me section so it's not flush up against the bottom of the browser screen. Nice work.
Tulio Natale
@tuliodnw
Apr 19 2016 23:26
@brianzelip done, was about to do it
@brianzelip thanks btw
CamperBot
@camperbot
Apr 19 2016 23:28
tuliodnw sends brownie points to @brianzelip :sparkles: :thumbsup: :sparkles:
:star: 243 | @brianzelip | http://www.freecodecamp.com/brianzelip
Frank XC
@tenkdayz
Apr 19 2016 23:40
@tuliodnw some img are broken
@tuliodnw maybe add navigator.geolocation to change the language