These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Jun 2016
Vinicius T Pereira
@trovao1990
Jun 23 2016 00:00
Hello Guys. I want to change the position of my navbar items, How could I do it? http://codepen.io/trovao1990/pen/qNqMjY
I dont want my Home, Portfolio and Contact so to left
matthew3454
@matthew3454
Jun 23 2016 00:04
@coymeetsworld Is there a way to only have one?
Coy Sanders
@coymeetsworld
Jun 23 2016 00:05
yes you would only call it one time, but that's not the question you should be asking
you need to know exactly how many you need to do what you want
just start small, don't try to do everything at once
just try to get something as simple as checking each user if they're online or not
then build on that
Tonnam Balankua
@tonnamb
Jun 23 2016 00:12
Could anyone help me with getting geolocation to work on codepen? I even copied to whole source code from another codepen (which work on that site) but it didn't work on mines.
Ken Haduch
@khaduch
Jun 23 2016 00:22
@tonnamb - if you are using Chrome, geolocation will not work unless you use the https:// transport. But then openweather will not work, unless you use http://. So people have been using http://ip-api.com/json to get the location based on the ip address, or perhaps try to implement that as a fallback mechanism. Firefox (I think) still works on http:, but you can never be sure which browser anyone is using.
Tonnam Balankua
@tonnamb
Jun 23 2016 00:23
@khaduch I see thank you!
CamperBot
@camperbot
Jun 23 2016 00:23
tonnamb sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1368 | @khaduch |http://www.freecodecamp.com/khaduch
Tonnam Balankua
@tonnamb
Jun 23 2016 00:23
somehow its working now, just copied code from one of the FCC challenge
Faisal Zulfiqar
@faisal1337
Jun 23 2016 00:26
Hello. I am making the 'Tribute Project'. I have used 'horizontal description' in the courses taught timeline. The <dl> tag is very much at the center of the page. I want it to be on the left side a little bit. I have tried adding padding and margin to the right but it only shrinks the text per line. Is there any way I can do it?
Pen: http://codepen.io/faisal1337/full/yJaRvQ/
olegzhoglo
@olegzhoglo
Jun 23 2016 00:27
question, i've finished the "build a tribute page" challenge, i went to check my code against the example and don't understand what they're doing here: "<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8"> what does adding all those extra column classes to the same div do?
Faisal Zulfiqar
@faisal1337
Jun 23 2016 00:31
Anybody?
Ahmed Nabil
@dev-ahmed
Jun 23 2016 00:37
guys i want to check the element change on angular directive any ideas ?
Tony Johnson
@tnyjhnsn
Jun 23 2016 00:42
@olegzhoglo those classes are part of the bootstrap grid system to make the site responsive on any size device
Vinicius T Pereira
@trovao1990
Jun 23 2016 00:42
@faisal1337 its normal, I think you can not change that.
Ken Haduch
@khaduch
Jun 23 2016 00:42
@olegzhoglo - the different col-*-* settings are to set up the div to be sized a different number of the 12 columns in the Bootstrap grid depending on different screen sizes. For the xs (extra small) screen, the div should occupy all 12 columns - the full screen width. For different sizes, it should take up different numbers of columns.
if you aren't too familiar with the Bootstrap grid, you should go to one of the bootstrap doc sites and spend a little time reading about how to use it. I like w3schools.com/bootstrap for various example of bootstrap usage, they have a good section on the grid and how to use it.
Faisal Zulfiqar
@faisal1337
Jun 23 2016 00:45
@trovao1990 then please tell me how should I align other things on the page
so that the whole website is in order
Ken Haduch
@khaduch
Jun 23 2016 00:46
@faisal1337 - you can change the way that you have the bootstrap grid settings for that - you have a 2 column empty div, then the 8 column timeline. You can make the 2 column div into a 1 column, and that will shift the other over by a column width.
Faisal Zulfiqar
@faisal1337
Jun 23 2016 00:48
@khaduch Thanks a ton.
CamperBot
@camperbot
Jun 23 2016 00:48
faisal1337 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1369 | @khaduch |http://www.freecodecamp.com/khaduch
Faisal Zulfiqar
@faisal1337
Jun 23 2016 00:48
Works out.
Works*
Ken Haduch
@khaduch
Jun 23 2016 00:49
@dev-ahmed - hello - I am not familiar with angular, sorry I can't help with this one!
Vinicius T Pereira
@trovao1990
Jun 23 2016 00:51
Hello Guys. I want to change the position of my navbar items, How could I do it? I want it to be a little bit more to centre http://codepen.io/trovao1990/pen/qNqMjY
JD Tadlock
@jdtdesigns
Jun 23 2016 00:53
@trovao1990
.navbar {
  padding: 0 5%;
}
Vinicius T Pereira
@trovao1990
Jun 23 2016 00:58
Thank you so much @jdtdesigns
CamperBot
@camperbot
Jun 23 2016 00:58
trovao1990 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 553 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Tarun sehgal
@FCCtarun
Jun 23 2016 00:58
is it necessary to use only html for building tribute page ?
buiphuking
@buiphuking
Jun 23 2016 00:59
hi guys, i want to ask something, how to code css to when we small window, least have 650px to see full size of .red .green
http://codepen.io/buiphuking/pen/aZmWbx?editors=1100
help me guys ....
Vinicius T Pereira
@trovao1990
Jun 23 2016 00:59
no @FCCtarun We could use css, bootstrap, etc
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:05
@buiphuking i'm on it ;)
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:13
@buiphuking hum.... Jade... I don't know this :(
Sorry...
buiphuking
@buiphuking
Jun 23 2016 01:14
@mtancoigne click view compiled
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:17
@buiphuking :D
buiphuking
@buiphuking
Jun 23 2016 01:18
@mtancoigne
i realize i'm not good at pure css
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:19
@buiphuking I realize I don't know jade :D
@buiphuking
In your css (so with pure Sass, I don't know the syntax), it would be something like
@media (min-width: 650)  {
    .red{
      /* .red stuff for screens > 650px */
    }
}
Ahmed Nabil
@dev-ahmed
Jun 23 2016 01:25
its okay @khaduch thanks
CamperBot
@camperbot
Jun 23 2016 01:25
dev-ahmed sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1370 | @khaduch |http://www.freecodecamp.com/khaduch
buiphuking
@buiphuking
Jun 23 2016 01:27
@mtancoigne
thanks!
CamperBot
@camperbot
Jun 23 2016 01:27
buiphuking sends brownie points to @mtancoigne :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @mtancoigne |http://www.freecodecamp.com/mtancoigne
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:28
@buiphuking I hope that will help :)
Ken Haduch
@khaduch
Jun 23 2016 01:33
@buiphuking - one thing that you can do is to change your height and width to something that will scale with the screen size - like 25% or 50vmin (I'm not too adept at using those units like "vmin", but it does do something interesting) That makes it scale with the screen size
Juwdohr
@Juwdohr
Jun 23 2016 01:37
Does anyone have a good starting point for the Tic Tac Toe game? Or someplace you can point me too?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:39
@Juwdohr, What are your main concerns ?
Kevin K. Lee
@kevinkiklee
Jun 23 2016 01:47
Hey everyone. I have a question about the Wikipedia Search project. Does anyone have a minute to take a look at my CodePen?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:48
@iserbit sure !
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:49
@iserbit and what is your question ?
Tarun sehgal
@FCCtarun
Jun 23 2016 01:49
I am building a tribute page. All done except backgroung "grey" color, I used hex code instead of grey ie #C0C0C0. But its not working. what should I change in my code.
I am using html and css
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:50
@FCCtarun give the link to the FCC exercise, so I can read the conditions.
Kevin K. Lee
@kevinkiklee
Jun 23 2016 01:50
@mtancoigne so, everything runs fine when i remove the commented lines at the bottom of the javascript code.
but when i try to move those lines into the onclick function, it doesn't work. searchWiki(searchTerm);
Kevin K. Lee
@kevinkiklee
Jun 23 2016 01:53
@FCCtarun can i see your code? do you have it on codepen?
Tarun sehgal
@FCCtarun
Jun 23 2016 01:54
@iserbit yes you can see. https://codepen.io/tarunsehgal/pen/qNqpvL
Kevin K. Lee
@kevinkiklee
Jun 23 2016 01:56
it's bc you have <div class="body">
it should be <div class="container"> and create css for .container
or just use <body> and define body {} in css
Manuel Tancoigne
@mtancoigne
Jun 23 2016 01:59
@iserbit First thing I see is your function searchWiki(userTerm) {}, you call $.getJSON('someUrl' + searchTerm + 'finalString', function(){})
@iserbit Where is the finalString var defined ?
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:00
@mtancoigne i just wrote it out. $.getJSON(
"https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + searchTerm + "&srinfo=&srprop=snippet&srlimit=10"
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:01
@FCCtarun In the users stories, nothing is about a grey bg :)
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:01
@mtancoigne he just wants it to match what the example looks like.
@mtancoigne in my code, try removing the commented two lines at the bottom to see what it's supposed to do
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:04
@iserbit yeah, but you may understand that the searchTerm shoul be a declared variable. A global one (defined outside of the function or a variable declared in the function...
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:05
it is declared under the global variables in the top section of the javascript code
Tarun sehgal
@FCCtarun
Jun 23 2016 02:06
@iserbit what should I do? should I remove "body" from html and CSS?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:06
@iserbit change this and look :)
  searchTerm="test"; 
  searchWiki(searchTerm);
// to
someThing="test";
searchWiki(someThing);
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:07
@mtancoigne hold on.
@FCCtarun you have <style> tag in your css. remove that tag.
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:08
@iserbit The problem here is the following: you declare a searchTerm variable outside of the searchWiki function. So it's a global variable, for JS.
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:08
where shold i declare it?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:08
nowhere
Sean Wilson
@seanc
Jun 23 2016 02:09
what's the issue? :P
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:09
in the function, you should use the parameter, userTerm, instead of searchTerm
Tarun sehgal
@FCCtarun
Jun 23 2016 02:09
yes it became gray. Its working
Ghulam Ahmed Bin Saeed
@ghulamahmed8
Jun 23 2016 02:10
hi there can anyone please help
i want to make a marquee followed by a heading element
for example i want to look like this :
Notice Board : < marquee goes here >
but in my case it is looking like this :
Notice Board :
< marquee goes here >
i don't want to use negative margins
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:10
@iserbit Do you want an explanation ?
@iserbit, i'm ready to explain your issue :D
Tarun sehgal
@FCCtarun
Jun 23 2016 02:10
but when I used hex code for gray-- #C0C0C0 , its not working.
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:10
@mtancoigne hold on, let me take a look further
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:11
@FCCtarun COCOCO or C0C0C0 ?
tylerprosper
@removed~tylerprosper
Jun 23 2016 02:11
Need help centering img for CodePen Personal Portfolio Page
currently using .avatardiv {
display: block;
margin: auto;
width: 40%;
}
Sean Wilson
@seanc
Jun 23 2016 02:12
@mtancoigne are you sure that's the issue? :P
Ryan
@ispeakcomputer
Jun 23 2016 02:12
woot! i knew when i could get to build apps i would be hooked.got the foundation of my weather app done .just finishing up
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:12
@seanc about what ?
Sean Wilson
@seanc
Jun 23 2016 02:12
Iser's issue
Ryan
@ispeakcomputer
Jun 23 2016 02:13
after that first learning curve it get much better
Tarun sehgal
@FCCtarun
Jun 23 2016 02:13
its working. I have used O alphabet but its 0(zero)
Juwdohr
@Juwdohr
Jun 23 2016 02:14
@mtancoigne having trouble getting started. looked at many Tic Tac Toe tutorials not understanding them.
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:15
@seanc what would the issue be?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:15
@seanc it seems, yes... he commented out this:
//Here is a nice definition of searchTerm :D
  searchTerm="test"; 
  searchWiki(searchTerm);

// and here is the function's first lines :
function searchWiki(userTerm) {

  $.getJSON(
    "https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + searchTerm + "&srinfo=&srprop=snippet&srlimit=10",
    function(data) {
  //....
  });
}
Tarun sehgal
@FCCtarun
Jun 23 2016 02:16
I want to add text in the image as shown in the example.
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:16
aight, I updated some code around but it still doersn't work
Sean Wilson
@seanc
Jun 23 2016 02:16
The issues that I see is that the function parameter that he's passing to searchWiki is not being used, that function should be agnostic, and you should pass data to it rather than using a variable defined outside of it. Secondly, the page is reloading due to default browser behaviour, he is using the click event on the submit button rather than the submit event on the form and using e.preventDefault() to prevent page reload
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:17
@seanc, @iserbit searchTerm is defined outside of the searchWiki function, so as long as a searchTerm variable is not _globally_defined, the function won't have access to it..
Sean Wilson
@seanc
Jun 23 2016 02:18
i'm saying the function should be agnostic i.e. you should pass data to it and it shouldn't know what's in global scope because that can cause unncessary conflicts
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:18
@seanc Agreed for the e.preventDefault(),
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:18
yea i just put in e.prevent
aight, take a look at the code again. i updated it.
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:19
@seanc As we stated, the var used in the query string is a global var, not a param, and that's an issue
Ryan
@ispeakcomputer
Jun 23 2016 02:19
guys check this out will lay a radar gif over a mapfor your weather apps .https://www.wunderground.com/weather/api/
Sean Wilson
@seanc
Jun 23 2016 02:19
yeah so i was saying use the function param and remove the global variable since it doesn't seem to be used anywhere else :P
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:19
@FCCtarun can you give the link to codepen ?
@seanc Here ! it's the mistake !! look ! one of them :D
Sean Wilson
@seanc
Jun 23 2016 02:21
i can give you the fixed version but i think i'll wait so he can understand what the issues are :P
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:21
@iserbit Do you get a bit more of your app's misbehavior ?
@seanc Agreed. Best way to learn.
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:21
@seanc @mtancoigne yea def a little more. don't tell me solution though. i want to figure this one out.
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:22
@iserbit (I tried right now, and had some results :D)
@iserbit now, you can fix some css stuff
Sélection_037.png
Sélection_038.png
(pic with purple bg was here to show you your success !) (and the green one for the super sexy scrollbars for empty content -- CSS stuff to fix)
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:27
@mtancoigne still looking into it. yea, i haven't touched all of the css yet.
@mtancoigne at least it's good to know i'm close
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:27
@iserbit you're more than close !
Sean Wilson
@seanc
Jun 23 2016 02:28
:)
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:28
@FCCtarun still here ? can we have a link to your code ?
@iserbit, don't mind if i follow you on codepen ?
Jesus Hilario H.
@jesushilarioh
Jun 23 2016 02:30
Hey ya'll, trying to put a smooth scroll in my portfolio for 2nd project.... HELP!
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:30
@seanc are you seanc on codepen too ?
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:30
@mtancoigne not at all. i would love to have someone to ask questions to. i started all this exactly 1 week ago.
Sean Wilson
@seanc
Jun 23 2016 02:30
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:31
@seanc ok, you were not the codepen.io/seanc :)
Sean Wilson
@seanc
Jun 23 2016 02:32
ah yeah, i go by programmatical and seanc
you can follow me on github if you'd like http://github.com/seanc
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:34
@seanc 9gagger ?
Sean Wilson
@seanc
Jun 23 2016 02:34
nope :P
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:34
@mtancoigne @seanc aight, give me another hint
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:34
:P
Sean Wilson
@seanc
Jun 23 2016 02:34
@iserbit what do you have right now?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:34
@iserbit about what ? css or js ?
Impossibeard
@Impossibeard
Jun 23 2016 02:34
Am I declaring my function wrong? Or calling it incorrectly?
Sean Wilson
@seanc
Jun 23 2016 02:35
@iserbit var userTerm= ($"#search") isn't valid
Ryan
@ispeakcomputer
Jun 23 2016 02:35
guys,do you ever remember seeing a ebook guide to fonts before? i had a link but seemed to have miss placed it.any idea what im taking about? it was shared in here alot before,but i cannot remeber what it was called.
Impossibeard
@Impossibeard
Jun 23 2016 02:35
function clicker(){
   alert(this.className + " has been clicked”);
}

// Capturing event listener for .child.red
 document.querySelector(".child.red").addEventListener("click", clicker(), true);
Sean Wilson
@seanc
Jun 23 2016 02:35
@iserbit you should use a function param instead of relying on the function's outter scope
so like
@iserbit
function searchWiki(searchTerm) { /* you know have access to searchTerm */ }
and call it accordingly
searchWiki('my search term');
@Impossibeard you're calling it incorrectly
@Impossibeard right now you're calling it immediately rather than letting it be called as a callback function
buiphuking
@buiphuking
Jun 23 2016 02:37
why there is haved a gap between 2 row , guy?
http://codepen.io/buiphuking/pen/aZmWbx?editors=1100
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:38
@seanc @mtancoigne WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:38
@Impossibeard what does it give if you're setting your callback without the ()
Luke
@lukenetti3
Jun 23 2016 02:38
Hey guys, working on the local weather app and I have the different animations, but how can I link that to the description that is in the JSON file I am using? For example the description says, "clear sky" how can I link that to a certain animation? I was thinking a switch/case statement, or is there an easier way?
Impossibeard
@Impossibeard
Jun 23 2016 02:39

@mtancoigne like this?

document.querySelector(".child.red").addEventListener("click", clicker, true);

Still nothing

Sean Wilson
@seanc
Jun 23 2016 02:39
@iserbit did you get it? :)
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:40
@seanc wait. nope. got closer but nope.
Impossibeard
@Impossibeard
Jun 23 2016 02:40
@seanc So I have to do it as a callback function? I can’t set it outside of the function? Seems like repetitive code.
Sean Wilson
@seanc
Jun 23 2016 02:41
@Impossibeard it doesn't matter if the function is defined elsewhere, it is still considered a callback function
@Impossibeard what i meant is that you're calling it immediately with ()
Impossibeard
@Impossibeard
Jun 23 2016 02:42
@seanc but even if I remove the () from clicker it doesn’t work
Ryan
@ispeakcomputer
Jun 23 2016 02:42
@lukenetti3 i was thinking the same actually though im curious about a better way.couldnt think of one.
Sean Wilson
@seanc
Jun 23 2016 02:42
@Impossibeard can i see your markup?
Impossibeard
@Impossibeard
Jun 23 2016 02:42
function clicker(){
   alert(this.className + " has been clicked");
}

// Capturing event listener for .child.red
document.querySelector(".child.red").addEventListener("click", clicker, true);
Sean Wilson
@seanc
Jun 23 2016 02:43
@Impossibeard is your code on codepen?
Impossibeard
@Impossibeard
Jun 23 2016 02:44
jsfiddle
Sean Wilson
@seanc
Jun 23 2016 02:44
that's fine can you send that over?
Impossibeard
@Impossibeard
Jun 23 2016 02:44
*jsbin
Luke
@lukenetti3
Jun 23 2016 02:44
@needsMoreCoffee Are you doing it with a switch/case statement?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:45
@Impossibeard in the clickerfunction, this is refering to the function's vars, so you have an issue with variable scopes here
@Impossibeard try a console.log(this) in the clicker function
Sean Wilson
@seanc
Jun 23 2016 02:46
@mtancoigne but isn't the function's scope automatically bound to a new scope containing properties in regards to the element?
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:47
@mtancoigne @seanc aight, got it working. thanks a lot everyone. i really appreciate it.
CamperBot
@camperbot
Jun 23 2016 02:47
iserbit sends brownie points to @mtancoigne and @seanc :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @mtancoigne |http://www.freecodecamp.com/mtancoigne
:cookie: 18 | @seanc |http://www.freecodecamp.com/seanc
Sean Wilson
@seanc
Jun 23 2016 02:47
@iserbit np glad you got it working :)
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:47
on a callback, i'm not sure..., but i'm not enough in JS to say it
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:48
it's kinda crazy how far i've gotten in one week
Impossibeard
@Impossibeard
Jun 23 2016 02:48
@mtancoigne it says “Syntax Error: Illegal break statement"
Manuel Tancoigne
@mtancoigne
Jun 23 2016 02:48
@iserbit you're welcome, continue your good job !
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:48
thanks
Sean Wilson
@seanc
Jun 23 2016 02:49
@Impossibeard appears to work here https://jsfiddle.net/ec3ko6bs/
:P
seems like an issue with jsbin
probably related to the Illegal break statement error
Aaron Hanna
@AaronHanna
Jun 23 2016 02:50

Having trouble getting the api call through for the Media Wiki API ...

$(document).ready(function() {

  var form = document.querySelector("form");

  form.addEventListener("submit", function(event) {
    var theSearch = form.elements.search.value;
    var apiUrl = "en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + theSearch + "&utf8=";

    $.ajax({
      type: "GET",
      url: apiUrl,
      dataType: 'jsonp',
      headers: { 'Api-User-Agent': /* what goes here? */ },
      success: function(data) {
      console.log(data);
      }
    });

    event.preventDefault();
  });   
});

Trying to use ajax to make the cal because the problem seems to the "user agent". Am I even barking up the right tree? Very confused ...

Impossibeard
@Impossibeard
Jun 23 2016 02:50
wow! Weird! Thanks so much . Glad I’m not completely crazy @seanc
CamperBot
@camperbot
Jun 23 2016 02:50
impossibeard sends brownie points to @seanc :sparkles: :thumbsup: :sparkles:
:cookie: 19 | @seanc |http://www.freecodecamp.com/seanc
Sean Wilson
@seanc
Jun 23 2016 02:51
@Impossibeard seems like jsbin makes a few changes to the code, it was inserting a ; in the code that is being run and was leading to an error
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:55
@AaronHanna lol dude, i had the EXACT same problem and solved it about an hour ago
this is the url i used
'''
https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + userTerm + "&srinfo=&srprop=snippet&srlimit=10"
'''
CamperBot
@camperbot
Jun 23 2016 02:55
:bulb: to format code use backticks! ``` more info
Kevin K. Lee
@kevinkiklee
Jun 23 2016 02:56
https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + userTerm + "&srinfo=&srprop=snippet&srlimit=10"
add https://crossorigin.me/ at the front of the URL
that solve dit for me
Impossibeard
@Impossibeard
Jun 23 2016 02:57
@seanc it seems like jsfiddle is doing weird stuff too. It won’t do event capturing the same as jsbin
JD Tadlock
@jdtdesigns
Jun 23 2016 03:00
var form = document.getElementById('search');

  form.addEventListener("keyup", function(event) {
    var input = this.value;
    var apiUrl = "http://en.wikipedia.org/w/api.php?action=query&list=search&format=json&callback=?&srsearch=" + input;

    $.getJSON(apiUrl, function(data) {
      console.log(data);
    });

});
@AaronHanna
just create an input with an id of search
don't worry about processing a form
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:01
@iserbit If you want to make code blocks, use backtick ( `) instead of ' :)
Greg Duncan
@GregatGit
Jun 23 2016 03:07
I have completed the js side of my Simone project but am struggling to do the css side - can anyone give any tips on how to create the simone looking machine
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:10
@GregatGit were can we see your work, and what do you want to achieve ?
Sean Wilson
@seanc
Jun 23 2016 03:10
@Impossibeard haha tha'ts weird
if you change to the bubbling phase it works in jsfiddle
Greg Duncan
@GregatGit
Jun 23 2016 03:11
I was trying to get a more traditional simone look
Faisal Zulfiqar
@faisal1337
Jun 23 2016 03:12
I have made the tribute project. Review it. Does it look good on small screen? Resize the browser and let me know. http://codepen.io/faisal1337/full/yJaRvQ/
Sean Wilson
@seanc
Jun 23 2016 03:13
haha i love gordon
Aaron Hanna
@AaronHanna
Jun 23 2016 03:13
@jdtdesigns @iserbit Thanks guys
CamperBot
@camperbot
Jun 23 2016 03:13
aaronhanna sends brownie points to @jdtdesigns and @iserbit :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @iserbit |http://www.freecodecamp.com/iserbit
:cookie: 554 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Faisal Zulfiqar
@faisal1337
Jun 23 2016 03:20
Suggestions?
Greg Duncan
@GregatGit
Jun 23 2016 03:20
@faisal1337 really good - I would keep your time line in cronalogical order
Lemmy
@imnotlammy
Jun 23 2016 03:21
Can someone explain why the below isn't working?
function diffArray(arr1, arr2) {
  var newArr = [];

  var arr3 = arr1.concat(arr2);

  function isUniq(element, index, array) {
    if (element !== array.indexOf(index)) {
      return true;
    }
    else {
      return false;
    }
  }

  newArr = arr3.filter(isUniq);

  return newArr;
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:21
@GregatGit sorry for the long time, i'm taking a look :p
Greg Duncan
@GregatGit
Jun 23 2016 03:22
@mtancoigne no problem
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:27
@GregatGit I think that if you want to give your app a "classic" look and feel, you should round the edges of the colored squares so it looks like a ball...
Greg Duncan
@GregatGit
Jun 23 2016 03:28
@mtancoigne thanks
CamperBot
@camperbot
Jun 23 2016 03:28
gregatgit sends brownie points to @mtancoigne :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @mtancoigne |http://www.freecodecamp.com/mtancoigne
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:30
@GregatGit I hope that helps !
Shukrullah shirzad
@Shukrullahshirzad
Jun 23 2016 03:36
hi guys
Stephen James
@sjames1958gm
Jun 23 2016 03:36
@imnotlammy You are comparing the element to where the index is in the array?
Shukrullah shirzad
@Shukrullahshirzad
Jun 23 2016 03:36
how do we save our work in codepen
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:37
@Shukrullahshirzad It should save automatically, unless you specified otherwise in the pen parameters.
Ethan Allison
@ethana99
Jun 23 2016 03:37
Just finished my tribute page. Would love to hear what you think: https://ethana99.github.io/tributepage/
Shukrullah shirzad
@Shukrullahshirzad
Jun 23 2016 03:39
@mtancoigne and how can i open the saved pen again
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:39
@ethana99 Great ! the only thing I could complain is the padding or margin around the picture on small devices : it really looks small...
@Shukrullahshirzad go on your profile and click on it :)
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:40
@Shukrullahshirzad (codepen profile)
David Halls
@DavidHalls
Jun 23 2016 03:40
still some work, but how does it look so far
Lemmy
@imnotlammy
Jun 23 2016 03:40
@sjames1958gm no comparing elements in array to check if they are unique
Ethan Allison
@ethana99
Jun 23 2016 03:41
@mtancoigne the picture looks too small?
Stephen James
@sjames1958gm
Jun 23 2016 03:42
@imnotlammy element is a value in the array - how does that relate to the return value of indexOf which is an index.
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:42
@Byzgig :
@ethana99 i'm preparing a screenshot
Sélection_039.png
David Halls
@DavidHalls
Jun 23 2016 03:43
squares a number
Lemmy
@imnotlammy
Jun 23 2016 03:43
@sjames1958gm i thought indexOf returns element
Stephen James
@sjames1958gm
Jun 23 2016 03:44
@imnotlammy no - it returns the index of an element that matches the parameter.
Lemmy
@imnotlammy
Jun 23 2016 03:44
@sjames1958gm ok nvm just checked again
@sjames1958gm any suggestions on howl to fix?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:44
Sélection_040.png
Stephen James
@sjames1958gm
Jun 23 2016 03:45
@imnotlammy You want to keep the value if the element is only in the array once? Where indexOf and lastIndexOf are the same?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:45
@Byzgig ok, so you should use a good font for it...
Lemmy
@imnotlammy
Jun 23 2016 03:46
@sjames1958gm Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both
David Halls
@DavidHalls
Jun 23 2016 03:46
yea, i probably should, ive put time into it looking interesting but using a default font, thanks @mtancoigne
CamperBot
@camperbot
Jun 23 2016 03:46
byzgig sends brownie points to @mtancoigne :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @mtancoigne |http://www.freecodecamp.com/mtancoigne
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:47
@Byzgig because it's not obvious at all. And if it's not a font issue, you should use the proper math symbol for square
David Halls
@DavidHalls
Jun 23 2016 03:47
what is the symbol, i havent found it or im searching for the wrong phrase
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:47
@ethana99 did you get it ?
Ethan Allison
@ethana99
Jun 23 2016 03:48
@mtancoigne yes, I think I need to shrink the border around the image.
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:48
@Byzgig in math, it's common to use ^2 for power of two
@Byzgig and in HTML, you have the <sup>xxx</sup> and <sub>xxx</sub> markups to render nice things too. i'll do a n example
David Halls
@DavidHalls
Jun 23 2016 03:50
nice thanks @mtancoigne
CamperBot
@camperbot
Jun 23 2016 03:50
byzgig sends brownie points to @mtancoigne :sparkles: :thumbsup: :sparkles:
:warning: byzgig already gave mtancoigne points
Ethan Allison
@ethana99
Jun 23 2016 03:52
@mtancoigne How does it look now?
Jack Lyons
@JackEdwardLyons
Jun 23 2016 03:52
Hi guys, im working on a personal project... something simple but i am wondering why my counter isn't counting up? any thoughts?
when i console.log count it shows 1
David Halls
@DavidHalls
Jun 23 2016 03:53
@JackEdwardLyons when is it supposed to count up?
Jack Lyons
@JackEdwardLyons
Jun 23 2016 03:53
when you match the text
so you type in the correct text and get a point
ah, i tried this and it worked
$(document).ready(function() {

  var easyText = ["This is a book", "This is not a book.", "Is this a book?", "That is not a pencil.", "These are not books"]

  var textInput = $("input#text-input"),
      textMatch = $("p#text-match"),
      textInput = $("input#text-input"),
      testText  = $("div#test-text"),
      counter   = $("div#counter h3"),
      count     = 0;

      counter.text(count);
      testText.html("<h2>" + easyText[0] + "</h2>");

  $(textInput).keyup(function() {
    var value = $(this).val();
    textMatch.text(value);

    if (textInput.val() == easyText[0]) {
      count++
      console.log(count);
      counter.text(count);
      textInput.val("");
      testText.html("<h2>" + easyText[1] + "</h2>");
    }
  }).keyup();



})
@Byzgig
now i just need to make a loop or something... instead of easyText[1] can i also do easyText[0]++ ?? @Byzgig
David Halls
@DavidHalls
Jun 23 2016 03:55
@JackEdwardLyons but i was just gonna say that the second word is not matching
Jack Lyons
@JackEdwardLyons
Jun 23 2016 03:56
yeah i just started coding this like 15 mins ago
im not finished
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:56
@ethana99 way better :)
David Halls
@DavidHalls
Jun 23 2016 03:57
@mtancoigne yea, i already incorporated that into my code, thanks man
CamperBot
@camperbot
Jun 23 2016 03:57
:warning: byzgig already gave mtancoigne points
byzgig sends brownie points to @mtancoigne :sparkles: :thumbsup: :sparkles:
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:57
@Byzgig you're welcome :)
David Halls
@DavidHalls
Jun 23 2016 03:57
anyone know if you can make it so the chat popups dont appear
Jack Lyons
@JackEdwardLyons
Jun 23 2016 03:58

i got it like this ```
$(document).ready(function() {

var easyText = ["This is a book", "This is not a book.", "Is this a book?", "That is not a pencil.", "These are not books"]

var textInput = $("input#text-input"),
textMatch = $("p#text-match"),
textInput = $("input#text-input"),
testText = $("div#test-text"),
counter = $("div#counter h3"),
count = 0,
bracket = 0;

  counter.text(count);
  testText.html("<h2>" + easyText[bracket] + "</h2>");

$(textInput).keyup(function() {
var value = $(this).val();
textMatch.text(value);

if (textInput.val() == easyText[bracket]) {
  count++
  bracket++;
  console.log(bracket);
  counter.text(count);
  textInput.val("");

  testText.html("<h2>" + easyText[bracket] + "</h2>");
}

});

})
```

$(document).ready(function() {

  var easyText = ["This is a book", "This is not a book.", "Is this a book?", "That is not a pencil.", "These are not books"]

  var textInput = $("input#text-input"),
      textMatch = $("p#text-match"),
      textInput = $("input#text-input"),
      testText  = $("div#test-text"),
      counter   = $("div#counter h3"),
      count     = 0,
      bracket =   0;

      counter.text(count);
      testText.html("<h2>" + easyText[bracket] + "</h2>");

  $(textInput).keyup(function() {
    var value = $(this).val();
    textMatch.text(value);

    if (textInput.val() == easyText[bracket]) {
      count++
      bracket++;
      console.log(bracket);
      counter.text(count);
      textInput.val("");

      testText.html("<h2>" + easyText[bracket] + "</h2>");
    }
  });

})
DuskyPixel
@DuskyPixel
Jun 23 2016 03:59
well I am not using gitter but in the top right there are some buttons you can press. One of them say sosmething about notifications and then change it to mute
Manuel Tancoigne
@mtancoigne
Jun 23 2016 03:59
@Byzgig but I spotted a more annoying issue :smile:
@Byzgig you can change the notification parameters for the room from the top right button
David Halls
@DavidHalls
Jun 23 2016 04:00
tell me, ive reset them like 4 times and still getting popups
Ethan Allison
@ethana99
Jun 23 2016 04:01
Thanks @mtancoigne
CamperBot
@camperbot
Jun 23 2016 04:01
ethana99 sends brownie points to @mtancoigne :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @mtancoigne |http://www.freecodecamp.com/mtancoigne
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:01
@JackEdwardLyons can you reformat your code please ? make a line break after your first this
Shukrullah shirzad
@Shukrullahshirzad
Jun 23 2016 04:01
in my tribute page the image is not visible how can i make it visible?
DuskyPixel
@DuskyPixel
Jun 23 2016 04:02
link to code?
Shukrullah shirzad
@Shukrullahshirzad
Jun 23 2016 04:02
the image is linked from a fb page
DuskyPixel
@DuskyPixel
Jun 23 2016 04:02
some places do not allow you to link images from them but not sure if thats the problem
David Halls
@DavidHalls
Jun 23 2016 04:02
k, have that fixed @mtancoigne did you find an annoying issue in my code or the string matching code
?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:03
This message was deleted
Shukrullah shirzad
@Shukrullahshirzad
Jun 23 2016 04:03
what could be the problem
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:04
@Byzgig, I didn't looked at the code tbh, for now, i was focusing on user interaction
David Halls
@DavidHalls
Jun 23 2016 04:04
@mtancoigne tots fine
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:05
Sélection_042.png
@Byzgig I still have the multiple . issue...
Ryan
@ispeakcomputer
Jun 23 2016 04:07
@lukenetti3 sry for the delay.im doing it with just the word in my design.i noticed a few apis that offered symbols as part of the api as well.you might try that to keep from writing code .im currently switching to the weather undergroud api to play with the radar map graphs and other cool stuff they allow
Josh
@joshweaver23
Jun 23 2016 04:09
Hey all, I know this is a little off topic, but I'm working on a conway's game of life app using AngularJS and having a bit of trouble. If anyone knows Angular and has a few minutes, I'd love some help. Right now I'm having trouble initializing my board (not building and not sure why). http://codepen.io/jweaver/pen/ZOBRpR?editors=1010
Niush Sitaula
@Niush
Jun 23 2016 04:10

How to change the html again into"Like" - with second click. Need Help

$('.button4').click(function() {
$('.change').html('Liked');
});

Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:11
@joshweaver23 The console threw me this :
Error: Duplicates in a repeater are not allowed. Repeater: cell in row key: number:0
Josh
@joshweaver23
Jun 23 2016 04:13
@mtancoigne any thoughts on this error "angular.js:31023Uncaught TypeError: window.angular.$$csp is not a function"
nevermind, think i cleared that one
@mtancoigne still getting the duplicates error.. .any thoughts?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:16
@joshweaver23 How do you load angular in your pen ?
Josh
@joshweaver23
Jun 23 2016 04:17
originally, i tried loading it through the JS options, but it's supposed to load before other scripts so I added a head to the page to add the angular script
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:19
@joshweaver23 ok, give me 2 mins to test things
@joshweaver23 First of all, you have your ng-app on the HTML tag, and angular is loaded in the HEAD one, so... after it. Secon thought is : you should have ng-app="SomeApp" and have var SomeApp variable with the angular creation thing
like var app=angular.module('SomeApp', []);
Josh
@joshweaver23
Jun 23 2016 04:23
i think ng-app is supposed to go on HTML tag... no?
yes to the second part, i remember reading that somewhere
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:24
not really, it's usually on the body tag
Josh
@joshweaver23
Jun 23 2016 04:25
thought controller went on body tag... or would it go on the div?
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:28
@joshweaver23 Basically, your app may have many controllers, so they should be somewhere inside the app. So yeah, a div shoud do the trick
Sorin Ruse
@sorinr
Jun 23 2016 04:54
@Niush test with an if statement to see if the val() of element having .change class is "Like" or "Liked" and make the change accordingly
Manuel Tancoigne
@mtancoigne
Jun 23 2016 04:56
i'm going to bed now, so see you later :)
Suzanne Atkinson
@AdventureBear
Jun 23 2016 05:37
PLEASE SOMEONE CLICK OEN OF MY COLORED Big BUTTONS! Try not to laugh too hard. The game doesn't play yet but it's getting better...
Ryan
@ispeakcomputer
Jun 23 2016 05:52
lol the sounds
nice work! @AdventureBear
Suzanne Atkinson
@AdventureBear
Jun 23 2016 05:53
:) Thanks! Not my original idea, someone did it awhiel ago, but I'm really proud of myself. I may change it up to farm animals, dogs, maybe make a selector switch!
Ryan
@ispeakcomputer
Jun 23 2016 05:53
im working on this trying to get a radar gif to overlay it to show rain
and its broke haha
hate how codepen does that after reload
Suzanne Atkinson
@AdventureBear
Jun 23 2016 05:54
good start at least...it knows where I am! Except I need to be in bed, so see y'all tomorrow evening.
keep it up, @needsMoreCoffee
Ryan
@ispeakcomputer
Jun 23 2016 05:55
thanks @AdventureBear i will.
CamperBot
@camperbot
Jun 23 2016 05:55
needsmorecoffee sends brownie points to @adventurebear :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @adventurebear |http://www.freecodecamp.com/adventurebear
kirbyedy
@kirbyedy
Jun 23 2016 05:59
@needsMoreCoffee does not load for me :(
Ryan
@ispeakcomputer
Jun 23 2016 06:01
no part of it ?
bummer .
i guess i need to test other browsers
Leo Sizaret
@Bungou
Jun 23 2016 07:52
Hii! I'm trying out SASS!
Can anyone tell me why my background shifts down when I apply margin to my H1?
http://codepen.io/Bungou/pen/jrVpMd
Robert Laukhuff
@laukcoder
Jun 23 2016 08:07
Leo, it seems when I put a border under .class, it moves up. I'm not sure why but it's a start.
Leo Sizaret
@Bungou
Jun 23 2016 08:54
@laukcoder Interesting, ty
CamperBot
@camperbot
Jun 23 2016 08:54
bungou sends brownie points to @laukcoder :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @laukcoder |http://www.freecodecamp.com/laukcoder
vichus1995
@vichus1995
Jun 23 2016 09:07
hey guys,im doing the javascript calculator.i was trying to implement nested click functions for the same element, button so as to alter behaviour after = is pressed,but it's not working properly.please help
http://codepen.io/vichus1995/pen/NxLqyb
manasibs
@manasibs
Jun 23 2016 09:24
hello...I am using Openweather API as suggested by FCC for my Local Weather App..but the browser is blocking the API call saying mixed content since it is HTTP call.....how to fix this problem...is there any other API that uses HTTPS?
kirbyedy
@kirbyedy
Jun 23 2016 09:26
yes, known issue, I havent been able to find any free api that uses https
dagao.wei
@liangshun
Jun 23 2016 09:33
function destroyer(arr) {
  // Remove all the values
  var length = arguments.length;
  if(length === 1){
    return arr;
  }


  var arr2 = arr.filter(function(item2){
        var flag = true;
         for(var i=1; i<arguments.length; i++){
           console.log("------"+arguments[i]+"------");
         }
         return flag;
     });
  return arr2;
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);
//console.log result is: 0 1 2 3 4 5
hi guys, why arguments value is 0,1, 2,3,4,5
should be 2 and 3, isn’t it?
dagao.wei
@liangshun
Jun 23 2016 09:38
somebody can help me
Faisal Zulfiqar
@faisal1337
Jun 23 2016 09:52
Hey. I copied the code of my tribute page. Pasted it in a file on my computer. Linked bootstrap with it. But now its not the same thing. The margins and paddings on various sides are altered and the structure is a bit disturbed. Why so? Why does it happen?
Tony Johnson
@tnyjhnsn
Jun 23 2016 09:53
@liangshun you haven’t used the item2 that you are passing in the callback function for are.filter
arr.filter
dagao.wei
@liangshun
Jun 23 2016 09:58
@tony-tosp yes, i know, i want to know why arguments[i]’s value is wrong?
if i get arguments out of filter, will run okey, like this:

function destroyer(arr) {
  // Remove all the values
  var length = arguments.length;
  if(length === 1){
    return arr;
  }

var newArr = [];
  for(var i=1; i<length; i++){
    newArr.push(arguments[i]);
  }
  var arr2 = arr.filter(function(item2){
        var flag = true;
         for(var i=0; i<newArr.length; i++){
           if(item2 === newArr[i]){
              flag = false;
              break;
           }
         }
         return flag;
     });
  return arr2;
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);
@tony-tosp it’s only put arguments’s value to an new array, out of filter
Christian Faulkner
@christianfaulk
Jun 23 2016 10:00
having trouble linking images on tribute page anyone got any tips?
Tony Johnson
@tnyjhnsn
Jun 23 2016 10:04
@liangshun you can probably get rid of all the arguments stuff before the arr.filter. yo should be able to use arguments directly in the filter
Marco Mazzeo
@Doko85
Jun 23 2016 10:07
@manasibs are you using that thing on codepen?
manasibs
@manasibs
Jun 23 2016 10:07
@Doko85 yes
Marco Mazzeo
@Doko85
Jun 23 2016 10:07
mine works
manasibs
@manasibs
Jun 23 2016 10:08
@Doko85 are u using codepen with https or http
which browser?
Marco Mazzeo
@Doko85
Jun 23 2016 10:08
chrome
Faisal Zulfiqar
@faisal1337
Jun 23 2016 10:08
@Doko85 ??
Marco Mazzeo
@Doko85
Jun 23 2016 10:08
opening codepen.io :D
@faisal1337 what?
Faisal Zulfiqar
@faisal1337
Jun 23 2016 10:09
I copied the code of my tribute page. Pasted it in a file on my computer. Linked bootstrap with it. But now its not the same thing. The margins and paddings on various sides are altered and the structure is a bit disturbed. Why so? Why does it happen? @Doko85
dagao.wei
@liangshun
Jun 23 2016 10:09
@tony-tosp ok,thanks
Chris Cullen
@123xylem
Jun 23 2016 10:10
function checkCashRegister(price, cash, cid) {
var val;
  var cost=arguments[0];
  var money=arguments[1];
var till= arguments[2];
  var count=0;
  var arr=[];
  var change= money-cost;
 var tillCount=0;
  var chgCount=0;
var convertedTill=[];
  var jCount=0;

  var denoms = [0.01,0.05, 0.1, 0.25, 1, 5, 10, 20, 100];//Denominations put next to cid 1 eg penny has 101 1s
for (var t = 0;t < till.length; t++) {
  till[t].push(denoms[t]);}

  if(change<0){
  change=Math.abs(change);}//this makes change positive if its negative value
else change=change;

  for(i=0; i<till.length;i++){
   count+=till[i][1];}
    if(change>count){ 
    return "Insufficient Funds";
// Make a count that totals till/cid values. If change is more than till then say insufficient funds

  }  else{
    var chgArr=[];
  for(j=till.length-1;j>=0;j--){  
    var amountOfType=till[j][1]/till[j][2];// Divide amount of "pennies" by a penny. = How many of each coin u have? 
    till[j].push(amountOfType);


    while(change>chgCount&& till[j][1]>0 &&change!==chgCount ){//While change is more than the count of change giveback.And amount of money is >0 And Change isnt the same as chgCount

  if(till[j][1]<=change){//If  eg dime draw is less than change start paying with dimes or less
      chgCount+=till[j][2]; //Add that 1 denomination val to chgCount
      till[j][1]-=till[j][2];//take that denom val from the drawer.

    jCount++;//note how many times this has iterated
      chgArr.push(""+till[j][0]+ ""+", "+""+jCount*till[j][2]+"");//Put these things in an array
    }
    else{j--;}}//Move search down to next denom eg if at dime down to nickle
        }                

return chgArr;
  }
}
checkCashRegister(17, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);
Hey! Question::::: In this code I have a floating decimal problem.. Can you say where it is I need to change the decimals? I have tried a few times but it either doesnt work or creates an infy loop!
Austin Miles
@Nolo900
Jun 23 2016 10:13
For some reason my request to ip-api is never being returned as "done", it had been working before, any idea why?? Did I accidentally mess my code up?? other thoughts?? only for chrome https://codepen.io/abm/pen/vKYWNy
Le Anh Duy (Andrew)
@leanhduy1998
Jun 23 2016 10:15
@123xylem times everything with 100, then you will only have to deal with integers
Chris Cullen
@123xylem
Jun 23 2016 10:16
@leanhduy1998 But the cases mess up when i do that
Sanne
@sannek
Jun 23 2016 10:16
@Nolo900 It's because codepen is https:// but your api request is being sent to http://
Chris Cullen
@123xylem
Jun 23 2016 10:16
EG it looks in drawer for 200 change and there is only 20
Austin Miles
@Nolo900
Jun 23 2016 10:18
Ah, thanks @sannek!
CamperBot
@camperbot
Jun 23 2016 10:18
nolo900 sends brownie points to @sannek :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @sannek |http://www.freecodecamp.com/sannek
Marco Mazzeo
@Doko85
Jun 23 2016 10:20
@faisal1337 did you linked both css and js bootstrap files?
this is my code how can it turn back to link test after hover
is it good use javascript or jquery
Le Anh Duy (Andrew)
@leanhduy1998
Jun 23 2016 10:26
@123xylem what do you mean
Chris Cullen
@123xylem
Jun 23 2016 10:27
I f i mess with the numbers I have to change them all includnig the test cases in CID
@leanhduy1998
Le Anh Duy (Andrew)
@leanhduy1998
Jun 23 2016 10:28
@123xylem yes, that was what I did. I tried freaking everything, but I found that one to be effective. If you find out another solution, please tell me! Thanks!
CamperBot
@camperbot
Jun 23 2016 10:28
leanhduy1998 sends brownie points to @123xylem :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @123xylem |http://www.freecodecamp.com/123xylem
Marco Mazzeo
@Doko85
Jun 23 2016 10:29
can I use a click function for anything that is not a button?
can some solve this issue
i used css here and on hover tast is dancing while changing text
Anthony
@eyarie
Jun 23 2016 10:35
please i need help on my front end project
Anthony
@eyarie
Jun 23 2016 10:42
how do i get the small social media logos and make it functional
Sorin Ruse
@sorinr
Jun 23 2016 10:47
@eyarie i don't see any sm logos yet. you can link font awesome library and use them as <i class="fa fa-xxxxx">
Anthony
@eyarie
Jun 23 2016 10:54
i don't have one or know how to create they @sorinr
Sorin Ruse
@sorinr
Jun 23 2016 10:55
@eyarie see my previous message edited
evaristoc
@evaristoc
Jun 23 2016 10:57

Hi everyone,

I am working on the following project:
http://evaristoc.github.io/viz_exer/endangered_amphibia/#

repo:
https://github.com/evaristoc/viz_exer/tree/master/endangered_amphibia

The project produce charts (d3.js) and there are transitions implemented between charts using jQuery:

fadeOut --> remove elements in chart --> update elements in chart with new chart --> fadeIn

So far so good, but every time the elements of the chart (#chart children) are removed and display is "none" the text underneath move to the top, before the div #chart is filled with new content, after which the lower text return to its correct position under #chart.

The undesired effect is a flicking due to lower text coming up every time the transition happens between figures. The problem is a CSS/HTML one, that should be solved with Bootstrap, but I don't know how. The solution I have tried to implement is to fix the size of the div row that is parent of the div #chart, but I haven't succeeded: html/css doesn't respect the styled height even when !important. I have also tried to include the lower text in a row with no progress.

Any help?

Anthony
@eyarie
Jun 23 2016 10:57
@sorinr The code for that section is show
<div class="col-sm-6">
<h3>AROUND THE WEB</h3>
<br>

</div>
can you show me the full code in creating the sm
@sorinr
Sorin Ruse
@sorinr
Jun 23 2016 11:00
@eyarie as i told you link this https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css into your pen. the use <i class="fa fa-xxxxx"> for the icons you whant
Anthony
@eyarie
Jun 23 2016 11:01
sorry, the link was not in your first message
Sorin Ruse
@sorinr
Jun 23 2016 11:04
@eyarie yes i know i told font awesome library. it was your job to search for it see what it does and decide if it is good for what you want in ur project.
Anthony
@eyarie
Jun 23 2016 11:06
ok. Thanks. looking through now
Le Anh Duy (Andrew)
@leanhduy1998
Jun 23 2016 11:38
hi guys, I'm working on No repeats please bonfire, and I don't know how we can create all the permutations. Can you help me?
jiajinning
@jiajinning
Jun 23 2016 11:54
goods
flindip
@flindip
Jun 23 2016 11:59
Working on the weather app: I'm trying to use Jquery to set background image. This is a snippet of the code(this is the default image):
else{
  $(document).css('background-image', "url(https://icons.wunderground.com/data/wximagenew/m/minnesotamom/293.jpg)");
}
It isn't displaying. Anyone have any ideas?
srishti-learner
@srishti-learner
Jun 23 2016 12:02
@flindip i think maybe $(body).css will work.
Timm Stelzer
@tstelzer
Jun 23 2016 12:04

Hey guys, quick question regarding modular scale based type and rem units: before using a modular scale, i used to have something like this:
$root = 16px; html { font-size: $root; } $value = 2.4; .module { width: $value * $root * 1px; width: $value * 1rem; }
Now, my root-base is em based, and I cant figure out how to get the rem-fallback to work again:
$root = 1.2em; html { font-size: $root; } $value = 2.4; .module { width: ???; width: $value * 1rem; }

Does anyone have a working approach to this?

//edit the only solution I can think of, is using a seperate px-value as a base for the rem-fallback, since its not used for any type, and only in the case the browser doesnt support rem

flindip
@flindip
Jun 23 2016 12:06

@srishti-learner I inputed this

$(body).css('background-image', 'https://icons.wunderground.com/data/wximagenew/m/minnesotamom/293.jpg("' + imageUrl + '")');

}

still not returning anything. Do I have to define something in CSS?

@srishti-learner thanks
CamperBot
@camperbot
Jun 23 2016 12:06
flindip sends brownie points to @srishti-learner :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @srishti-learner |http://www.freecodecamp.com/srishti-learner
Chris Cullen
@123xylem
Jun 23 2016 12:09
function checkCashRegister(price, cash, cid) {
var val;
  var cost=arguments[0];
  var money=arguments[1];
var till= arguments[2];
  var count=0;
  var arr=[];
  var change= money-cost;
 var tillCount=0;
  var chgCount=0;
var convertedTill=[];
  var jCount=0;


  var denoms = [0.1,0.5, 1, 2.5, 10, 50, 100, 200, 1000];//Denominations put next to cid 1 eg penny has 101 1s
for (var t = 0;t < till.length; t++) {
  till[t].push(denoms[t]);}


  if(change<0){
  change=Math.abs(change);}//this makes change positive if its negative value
else change=change;

  for(i=0; i<till.length;i++){   
    till[i][1]=till[i][1]*10;//THIS LINE MAKES CANT READ ERROR!???!!!!
    count+=till[i][1];}
    if(change>count){ 
    return "Insufficient Funds";
// Make a count that totals till/cid values. If change is more than till then say insufficient funds

  }  else{
    var chgArr=[];
  for(j=till.length-1;j>=0;j--){  
    var amountOfType=till[j][1]/till[j][2];// Divide amount of "pennies" by a penny. = How many of each coin u have? 
    till[j].push(amountOfType);


    while(change>chgCount&& till[j][1]>0 &&change!==chgCount ){//While change is more than the count of change giveback.And amount of money is >0 And Change isnt the same as chgCount

  if(till[j][1]<=change){//If  eg dime draw is less than change start paying with dimes or less
      chgCount+=till[j][2]; //Add that 1 denomination val to chgCount
      till[j][1]-=till[j][2];//take that denom val from the drawer.

    jCount++;//note how many times this has iterated
      chgArr.push(""+till[j][0]+ ""+", "+""+jCount*till[j][2]+"");//Put these things in an array
    }
    else{j--;}}//Move search down to next denom eg if at dime down to nickle
        }                

return chgArr;
  }
}
checkCashRegister(17, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);
After the 2nd For loop when I multiply my till value by 10 to remove my floating decimal problem It ends up casuing a "cant read 1 of undefined property error"... WHy is that!??!
srishti-learner
@srishti-learner
Jun 23 2016 12:17
@flindip do like this $('body').css(//change prop);
or you can use $(document.body)
you are missing the quotes!
flindip
@flindip
Jun 23 2016 12:20

@srishti-learner here I'll just show the entire code:

https://codepen.io/flindip/pen/RRGEWd

its under the clear day default comment
Austin Miles
@Nolo900
Jun 23 2016 12:22
Am I able to access array elements like this? I'm wanting to just pass in the string for the property and have it return the url I need. I was hoping I could do it with out creating a loop and running through the index...
    var weatherTypes = [
      {desc:"clear sky",img:"a url string...."},
      {desc:"few clouds",img:"a url string...."},
      {desc:"scattered clouds",img:"a url string...."},
      {desc:"broken clouds",img:"a url string...."},
      {desc:"shower rain",img:"a url string...."},
      {desc:"rain",img:"a url string...."},
      {desc:"thunderstorm",img:"a url string...."},
      {desc:"mist",img:"a url string...."},
    ]

    console.log(weatherTypes.desc["rain"].img);
srishti-learner
@srishti-learner
Jun 23 2016 12:35
@flindip i don't know why it isn't working and this is confusive to me because of the quotes. The approach that i liked more is this-

// in CSS
.bg1
{
background-image: url(/some/image/url/here.jpg);
}

.bg2
{
background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

give it a try.
NatixDev
@NatixDev
Jun 23 2016 12:39
Hi guys, does anyone know why my fahrenheit doesn't want to change to celsius ? https://codepen.io/NatixDev/pen/beVdPp
flindip
@flindip
Jun 23 2016 12:43
@srishti-learner yeah, I can do it that way. I wonder why its not working. Odd
@srishti-learner thanks again for trying
CamperBot
@camperbot
Jun 23 2016 12:43
:warning: flindip already gave srishti-learner points
flindip sends brownie points to @srishti-learner :sparkles: :thumbsup: :sparkles:
Greg Duncan
@GregatGit
Jun 23 2016 12:44
@NatixDev what line in the js is meant to change it?
srishti-learner
@srishti-learner
Jun 23 2016 12:45
yeah,that's odd. i will try later.it's okay. :) @flindip
flindip
@flindip
Jun 23 2016 12:45
@srishti-learner its not a big deal. I'll just fork it in codepen and work it using the css method
srishti-learner
@srishti-learner
Jun 23 2016 12:46
okay! :+1:
NatixDev
@NatixDev
Jun 23 2016 12:47
@GregatGit 26 to 37
flindip
@flindip
Jun 23 2016 12:47

@srishti-learner my guess is it may have something to do with $(document).ready(function()

I prompt that at the bottom

DumeD
@DumeD
Jun 23 2016 12:47
hi guys :)
http://codepen.io/emud/pen/KMNYyM how can i make the images to be centered?
NatixDev
@NatixDev
Jun 23 2016 12:47
@GregatGit I tried with toggle too, but it doesn't work
srishti-learner
@srishti-learner
Jun 23 2016 12:49
@flindip um...i don't think so because if that would be the case then nothing would be working.
Philip Krück
@pkrueck
Jun 23 2016 12:50
hi guys , im making a website. is there a way to add a bootstrap freecodecamp icon
srishti-learner
@srishti-learner
Jun 23 2016 12:50
#
@DumeD try adding class="text-center"
it worked for me
flindip
@flindip
Jun 23 2016 12:53
@srishti-learner well, I'm in a conversation and they're telling its because open weather isn't working
srishti-learner
@srishti-learner
Jun 23 2016 12:56
maybe,it could be the case. did you tried it with other image url?
NatixDev
@NatixDev
Jun 23 2016 12:57
@DumeD <div class="portfolio text-center">
<div class="container">
<div class="row">
<h2>Portfolio</h2>
<div class="col-xs-offset-2 col-xs-8">
<div class="soon-images">
<img src=" http://www.ylakeland.com/wp-content/uploads/2013/10/coming-soon.jpg " alt="coming soon! " class="img-responsive ">
<img src="http://www.ylakeland.com/wp-content/uploads/2013/10/coming-soon.jpg " alt="coming soon! " class="img-responsive ">
<img src="http://www.ylakeland.com/wp-content/uploads/2013/10/coming-soon.jpg " alt="coming soon! " class="img-responsive ">
<img src="http://www.ylakeland.com/wp-content/uploads/2013/10/coming-soon.jpg " alt="coming soon! " class="img-responsive ">
</div>
</div>
</div>
</div>
</div>
DumeD
@DumeD
Jun 23 2016 12:58
@NatixDev thabk you!
thank you! @NatixDev
CamperBot
@camperbot
Jun 23 2016 12:59
dumed sends brownie points to @natixdev :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @natixdev |http://www.freecodecamp.com/natixdev
Greg Duncan
@GregatGit
Jun 23 2016 13:00
@NatixDev put this on line 27 alert("hi"); as you will see the second click avent is not happening - only this one
NatixDev
@NatixDev
Jun 23 2016 13:00
@NatixDev You forgot to define a container and a row and you set your soon-images with your col-xs, in your css soon-images has 200px width, in the same div that your col-xs, it causes a width bug to your col
@DumeD No problem :smile:
@GregatGit Yes i'm trying to understand why the second click doesn't work
NatixDev
@NatixDev
Jun 23 2016 13:14
@GregatGit It's okay, I did it with an hasClass
Greg Duncan
@GregatGit
Jun 23 2016 13:16
@NatixDev well done
Heather Kusmierz
@HKuz
Jun 23 2016 13:21

@pkrueck yes, you can include the font-awesome CDN link in your HTML (if you're using Codepen, go to settings and under CSS tab make sure font awesome is included in the external CSS part), then use something like the below in your code:

<i class="fa fa-fire"></i>

You don't have to use an <i> tag, <span> works, too.

The fire isn't exactly the FCC icon, but it's close.
Philip Krück
@pkrueck
Jun 23 2016 13:26
thank you @HKuz
CamperBot
@camperbot
Jun 23 2016 13:26
pkrueck sends brownie points to @hkuz :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @hkuz |http://www.freecodecamp.com/hkuz
Philip Krück
@pkrueck
Jun 23 2016 13:31
can anyone help pls. I would like to have my buttons all on the same line
Adam Lichter
@spot1000
Jun 23 2016 13:32
@pkrueck what do you mean?
Philip Krück
@pkrueck
Jun 23 2016 13:33
look at the result in the link. the twitter button isnt on the same horizontal line than the others
@spot1000
Adam Lichter
@spot1000
Jun 23 2016 13:34
I odn't actually see a twitter button...
save it?
Taylor Morgan
@tmdesigned
Jun 23 2016 13:35
Quick question - how are projects (not exercises) evaluated for correctness? is it just honor system?
Adam Lichter
@spot1000
Jun 23 2016 13:35
as far as i know, yes, but when you get your development certificat, anyone can go and check out what you've done
it provides links to all your submissions for anyone to go and look at @ohiosierra
Taylor Morgan
@tmdesigned
Jun 23 2016 13:36
okay, thanks
Philip Krück
@pkrueck
Jun 23 2016 13:36
now ? @spot1000
Adam Lichter
@spot1000
Jun 23 2016 13:37
Ah, yes, I see, lemme check it out
Philip Krück
@pkrueck
Jun 23 2016 13:38
thanks
Adam Lichter
@spot1000
Jun 23 2016 13:43
ok, @pkrueck if you take the class "btn-block" out of your buttons, you can take the float off, and the margin-top out of the btn-social css tag
that should fix up your problem
btn-block turns them into block elements, for stacking them ontop of each other. if you don't have that there then you don't need to worry about the float left, and have your margine-top mess everything up
Philip Krück
@pkrueck
Jun 23 2016 13:45
thank you very very much @spot1000
CamperBot
@camperbot
Jun 23 2016 13:45
:cookie: 306 | @spot1000 |http://www.freecodecamp.com/spot1000
pkrueck sends brownie points to @spot1000 :sparkles: :thumbsup: :sparkles:
Adam Lichter
@spot1000
Jun 23 2016 13:45
my pleasure
flindip
@flindip
Jun 23 2016 13:48

I'm working on the "local Weather App" project. I've kinda come into a confusing problem. Open weather app won't seem to work in codepen. The reasons seem a little vague to me. Someone said it was perhaps the need for a API key(I implemented that). Another person said it was conflict with url dealing with http recognition with open weather API.

I think, with my code, nothing works until the open weather API is functional. Can someone take a look at the code?

Adam Lichter
@spot1000
Jun 23 2016 13:48
sure thing
post your pen @flindip
Adam Lichter
@spot1000
Jun 23 2016 13:52
I also had a lot of trouble with this one
but i think you might be right that the api is down
Laurendv
@Laurendv
Jun 23 2016 13:53
Hello could somebody explain how to remove the white space beside my image and put the image full width please? http://codepen.io/laurendvu/pen/PzbqPG?editors=1100
flindip
@flindip
Jun 23 2016 13:53
@spot1000 eh, it doesn't seem that hard. This is just kinda "one of those things." I mean this is one of those areas where you need to default to someone has speciality in this issue.
Adam Lichter
@spot1000
Jun 23 2016 13:54
yeah
flindip
@flindip
Jun 23 2016 13:54
@spot1000 if the API is down than nothing in the code works it seems. Not even the default
Adam Lichter
@spot1000
Jun 23 2016 13:54
yeah, mine isn't working right now either
JD Tadlock
@jdtdesigns
Jun 23 2016 13:55
@flindip as well as @all OpenWeather requires a premium account to use https. You will need to remove the https from CodePen and also change the openweather api url to http. For chrome, you will need to use an ip locator api like http://ip-api.com/, and navigator for other browsers. You cannot mix https with http so this is the only way to do this for chrome without paying for a premium openweather account.
flindip
@flindip
Jun 23 2016 13:56
@jdtdesigns I don't use chrome. I'm using safari
JD Tadlock
@jdtdesigns
Jun 23 2016 13:56
@flindip 78% of all users now use chrome
it's a requirement to dev for chrome
flindip
@flindip
Jun 23 2016 13:57
@jdtdesigns I see
@jdtdesigns thanks. So, simply just remove the http and start the url at api?
CamperBot
@camperbot
Jun 23 2016 13:57
flindip sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 555 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 23 2016 13:58
the api url requires http in front
greg
@wearenotgroot
Jun 23 2016 13:58
@flindip use ip-api as a fallback for those chrome user
JD Tadlock
@jdtdesigns
Jun 23 2016 13:58
read above @wearenotgroot ;)
Jesse Burns
@jessescottburns
Jun 23 2016 14:01
Hi all. Working on Exact Change and am trying to find the amount of remaining coins I have left in the drawer. When diving by the values, I noticed my Nickels number is returning as 40.9999 instead of 41. I can't figure out why. I know I could solve it with Math.Floor, but want to understand what is happening. Here is image: http://i.imgur.com/KCN8gHD.png
JD Tadlock
@jdtdesigns
Jun 23 2016 14:04
@jessescottburns You're dividing by a floating number which of course will return a floating number unless the float adds up to a whole
just use Math.round to get the whole number
flindip
@flindip
Jun 23 2016 14:05
@jdtdesigns ok so my api url looks like this now:
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&appid=d272744da8f092d03d1f250d728208248&?callback=?", function(data){
   //var json=JSON.parse(JSON.stringify(data));
      weatherDisplay(data);    
    });
JD Tadlock
@jdtdesigns
Jun 23 2016 14:05
@flindip &appid should be &APPID
Nevermind that comment. I see they updated the param to be case insensitive
flindip
@flindip
Jun 23 2016 14:08
ok, here it is
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&APPID=d272744da8f092d03d1f250d728208248&?callback=?", function(data){
   //var json=JSON.parse(JSON.stringify(data));
      weatherDisplay(data);    
    });
LOL
just when I was typing it in
heh
JD Tadlock
@jdtdesigns
Jun 23 2016 14:09
@flindip Did you update your get location for chrome?
flindip
@flindip
Jun 23 2016 14:09
@jdtdesigns no thats the next step I'm going to do
after I can get to work in my browser
JD Tadlock
@jdtdesigns
Jun 23 2016 14:09
is it working on safari now?
@flindip
flindip
@flindip
Jun 23 2016 14:11
@jdtdesigns I'm not entirely sure to be honest. This has been a confusing problem. I implemented my specific API key. I pasted it over the API call from open weather. So, I wanna see if that is actually working.
@jdtdesigns curious, http also applies to any images I was trying to implement as well?
open weather would conflict with those?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:12
When using a standard http protocol, you can't include https url calls or most browsers will throw an error for mixed origins
flindip
@flindip
Jun 23 2016 14:12
here is my code if you wanna see it:
http://codepen.io/FreeCodeCamp/pen/bELRjV
@jdtdesigns I see, good news I only had two elements that were even using urls. So it wasn't a big problem
pfft
thats not it
JD Tadlock
@jdtdesigns
Jun 23 2016 14:13
@flindip You're not using doc ready right
Clem
@ctataru
Jun 23 2016 14:13
hey guys. i just came back to my weather app after a few months of having made it, and it doesn't seem to be working anymore. i can't figure out why.
any ideas?
https://codepen.io/wise/pen/NNdXaB?editors=1010
JD Tadlock
@jdtdesigns
Jun 23 2016 14:13
You don't need doc ready for codepen
@flindip
flindip
@flindip
Jun 23 2016 14:14
@jdtdesigns thats not the code
I was looking at the example to try to figure out the weather API problem with the key.
JD Tadlock
@jdtdesigns
Jun 23 2016 14:16
@flindip You need to start using your browser console. Cmd shift j for most browsers
@flindip That is the code lol
You're still linking to https://codepen
that won't work
flindip
@flindip
Jun 23 2016 14:18
@jdtdesigns well, the boxes are just placeholders
yeah, I was using document.ready? Do I have to use window.on load instead?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:20
@flindip doc.ready() is old school bro
Every modern site will load the js from the bottom right above </body>
this removes the need for document.ready()
flindip
@flindip
Jun 23 2016 14:21
@jdtdesigns so how does it know to apply the JS to the HTML?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:22
the js is loaded right above the </body> in the html like i said
<script src="myjs.js"></script>
</body>
codepen does that for you
flindip
@flindip
Jun 23 2016 14:23
@jdtdesigns I see. So I can just remove that from the script section?
It will all still work?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:23
yep, but you need to scope properly
right now everything is global
@flindip
it's good to use an iife(immediately invoked function expression) to wrap the code, which will keep it locally scoped
(function() {
// run your code in here using var for setting function names instead
var myFunction = function() {
  // some code
};
})();
flindip
@flindip
Jun 23 2016 14:27
@jdtdesigns so I can use a generic function?
@jdtdesigns essentially this is just for formatting?
cause I think I have all the functions I need
JD Tadlock
@jdtdesigns
Jun 23 2016 14:28
It says appid is denied @flindip
flindip
@flindip
Jun 23 2016 14:28
@jdtdesigns did I not implement the key properly then?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:29
try repasting your key into the url @flindip
flindip
@flindip
Jun 23 2016 14:30
@jdtdesigns I just repasted it. Should I try the default one?
@jdtdesigns I also have"8&?callback=?"added to the key. Perhaps I didn't implement that properly?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:35
you don't need the &callback=?
@flindip
@flindip You key is invalid
check your email or sign up for another
Taylor Morgan
@tmdesigned
Jun 23 2016 14:37
Hi. I am stuck on the Weather app exercise. How do I wait for the results of getting the user's geolocation before calling the weather API?
do I have to get into the whole asynchronous thing and use $.when ?
flindip
@flindip
Jun 23 2016 14:38
@jdtdesigns I can generate another one? I guess that will work?
greg
@wearenotgroot
Jun 23 2016 14:39
@flindip your key works
JD Tadlock
@jdtdesigns
Jun 23 2016 14:40
@ohiosierra The best way to approach it is functionally. getLocation() which will get location and store global variables with lat/long, then from inside that, fire getWeather() which will get the weather using those global vars.
@wearenotgroot how so?
says denied everytime
and mine works fine
flindip
@flindip
Jun 23 2016 14:40
@wearenotgroot well, I just deleted the one I made. I just put in the default
perhaps that will work?
@jdtdesigns ok, so you want me to use console browser when linking my code pens?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:42
@flindip I'm saying to use the console to see errors. It will show you any errors that your js is throwing.
greg
@wearenotgroot
Jun 23 2016 14:43
@flindip @jdtdesigns it works here
flindip
@flindip
Jun 23 2016 14:43
@jdtdesigns oh, I see. Yeah, I do that from time to time
JD Tadlock
@jdtdesigns
Jun 23 2016 14:43
@wearenotgroot Can you console.log(data) from the weather api call and printscreen it?
greg
@wearenotgroot
Jun 23 2016 14:43
@flindip i just remove the ? infront of the ?callback=?
Taylor Morgan
@tmdesigned
Jun 23 2016 14:43
ooo, call the next function from within there, that makes sense. thanks @jdtdesigns
CamperBot
@camperbot
Jun 23 2016 14:43
ohiosierra sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 556 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
does that work @wearenotgroot @jdtdesigns? I removed the callback and put in the default
JD Tadlock
@jdtdesigns
Jun 23 2016 14:44
@flindip omg bro
you can't load it from https://codepen.io
remove https:// or change that to http://
greg
@wearenotgroot
Jun 23 2016 14:45
adasfaf.png
flindip
@flindip
Jun 23 2016 14:46
@jdtdesigns I thought I did that
IndiraShrestha
@IndiraShrestha
Jun 23 2016 14:46
Hi all, I am working on the weather app and wanted to change the unit of the weather however i need some direction
flindip
@flindip
Jun 23 2016 14:46
@jdtdesigns the two code https were changed to http
JD Tadlock
@jdtdesigns
Jun 23 2016 14:47
@flindip everytime you link us the codepen, it's https which means you're copying the url and pasting it with https
right?
flindip
@flindip
Jun 23 2016 14:48
I was getting confused. I thought you were talking about the weather app
you mean when I was linking it. my bad
Alin Pisica
@alinp25
Jun 23 2016 14:49
I don't understand how I should use the Wikipedia API at all... Can anyone help me, please? :) Thanks!
JD Tadlock
@jdtdesigns
Jun 23 2016 14:50
@flindip working now ;)
flindip
@flindip
Jun 23 2016 14:50
@jdtdesigns so the api is working for you now?
JD Tadlock
@jdtdesigns
Jun 23 2016 14:51
@flindip Yes. Easy way to tell is to just console.log(data); from within the getJSON and look at your browser console
flindip
@flindip
Jun 23 2016 14:52
@jdtdesigns gotcha. So I should nest that default function in order to make everything local?
greg
@wearenotgroot
Jun 23 2016 14:53
@IndiraShrestha you can store the data you get and make your own converter function
Taylor Morgan
@tmdesigned
Jun 23 2016 14:53
@jdtdesigns, does the navigator geolocator not work in codepen?
greg
@wearenotgroot
Jun 23 2016 14:53
@ohiosierra on chrome you need https connection
Taylor Morgan
@tmdesigned
Jun 23 2016 14:53
Screen Shot 2016-06-23 at 10.52.37 AM.jpg
@wearenotgroot can you do codepen via https?
IndiraShrestha
@IndiraShrestha
Jun 23 2016 14:53
@wearenotgroot you mean to toggle between the units
JD Tadlock
@jdtdesigns
Jun 23 2016 14:54
@ohiosierra @all OpenWeather requires a premium account to use https. You will need to remove the https from CodePen and also change the openweather api url to http. For chrome, you will need to use an ip locator api like http://ip-api.com/, and navigator for other browsers. You cannot mix https with http so this is the only way to do this for chrome without paying for a premium openweather account.
greg
@wearenotgroot
Jun 23 2016 14:54
@ohiosierra yes. but https for openweather api is paid version
IndiraShrestha
@IndiraShrestha
Jun 23 2016 14:54
I have it in the line 35 of my codepen
Taylor Morgan
@tmdesigned
Jun 23 2016 14:55
@jdtdesigns @wearenotgroot thanks. I assumed a coding issue.
CamperBot
@camperbot
Jun 23 2016 14:55
ohiosierra sends brownie points to @jdtdesigns and @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: ohiosierra already gave jdtdesigns points
:star2: 1155 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
flindip
@flindip
Jun 23 2016 14:56
@jdtdesigns alright, I put generic function over the entire code: like this
http://codepen.io/flindip/pen/RRGEWd
Tom Tam
@tomtam6
Jun 23 2016 14:57
Hi has any one taken on the Random Quote Machine challenge?
greg
@wearenotgroot
Jun 23 2016 14:57
@IndiraShrestha store the temp on a variable then call the converter function when ever you toggle the C and F temperature
Clem
@ctataru
Jun 23 2016 14:58
hey guys. i just came back to my weather app after a few months of having made it, and it doesn't seem to be working anymore. i can't figure out why.
any ideas?
https://codepen.io/wise/pen/NNdXaB?editors=1010
Alin Pisica
@alinp25
Jun 23 2016 14:59
Anyone here who finished the Wikipedia Viewer? I think I'm going desperate. I just can't understand how to use the API.
greg
@wearenotgroot
Jun 23 2016 15:01
@ctataru :point_up: June 23, 2016 4:54 PM
Clem
@ctataru
Jun 23 2016 15:02
ah!
thanks @wearenotgroot @jdtdesigns
CamperBot
@camperbot
Jun 23 2016 15:02
ctataru sends brownie points to @wearenotgroot and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 557 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1156 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
JD Tadlock
@jdtdesigns
Jun 23 2016 15:02
(function() {
    var lat, long, location, temp, blah, blahblah; // Locally scoped globals

    // Typical app starting function to begin the whole process
    var init = function() {
        getLocation(); 
    };

    var getLocation = function() {
        if ( window.chrome ) {
            // use ip location api

            // store global vars ( lat, long )

            // fire getWeather()
            getWeather();
        } else {
            // use navigator.geolocation

            // store global vars ( lat, long )

            // fire getWeather()
            getWeather();
        }
    };

    var getWeather = function() {
        // run api call to openweather using the globals

        $.getJSON('api-url', function() {
            // store globals for showing the info

            // run the showInfo
            showInfo();
        });
    };

    var showInfo = function() {
        // Here we use the globals to show the information on the page
    };

    init(); // Fire the init function to start the app

})();
@flindip
greg
@wearenotgroot
Jun 23 2016 15:02
@ctataru you can switch to ip-api, if you like
JD Tadlock
@jdtdesigns
Jun 23 2016 15:02
This is how you locally scope your code @flindip
Clem
@ctataru
Jun 23 2016 15:04
@wearenotgroot so i need to use ip-api instead of navigator.geolocation? do we know why the latter doesn't work anymore?
because it definitely did when i made my app
JD Tadlock
@jdtdesigns
Jun 23 2016 15:05
@ctataru Read my code above. The if/else in getLocation is what you can use to get location with ip locator for chrome and navigator for other browsers. ;)
flindip
@flindip
Jun 23 2016 15:07
@jdtdesigns alright, I'll use that template and rework the code again. Thanks....
CamperBot
@camperbot
Jun 23 2016 15:07
flindip sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 558 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
greg
@wearenotgroot
Jun 23 2016 15:08
@ctataru geolocation on chrome only works on https as the warning in dev console stated.
Clem
@ctataru
Jun 23 2016 15:09
gotcha. thanks guys
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:10
@wearenotgroot I didn't want to take the route. I was thinking of changing the unit in the url from metric or fahrenheit
greg
@wearenotgroot
Jun 23 2016 15:11
@IndiraShrestha well you'll be calling the api multiple time if the user press the toggle button. the weather data doesnt change that quickly
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:12
@wearenotgroot hmmm... okay. Let me try your suggestion
@wearenotgroot also how can i make the code better
JD Tadlock
@jdtdesigns
Jun 23 2016 15:13
@IndiraShrestha I made a refresh button to reload the weather if the user wants to, otherwise it runs on page load only.
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:13
i am looking at other people's code and questions and i feel like
i need to put the codes in function
greg
@wearenotgroot
Jun 23 2016 15:15
@IndiraShrestha it's totally up to you and how you want to implement it
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:15
@wearenotgroot there is always room for improvement :)
greg
@wearenotgroot
Jun 23 2016 15:15
@IndiraShrestha but if you are working on more complex project. modular code helps keep it organize and easier to work with
JD Tadlock
@jdtdesigns
Jun 23 2016 15:16
@IndiraShrestha Learning design patterns takes awhile, because there are so many and they can get complicated. The goal right now should be to make it readable for not only you, but anybody looking at it. Use functions to break each part up so each task is separated and clearly defined. This is also good for async data like apis.
greg
@wearenotgroot
Jun 23 2016 15:16
@IndiraShrestha you can always refractor later :smile: (change code)
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:17
@jdtdesigns i would like to see your code for the refresh button
Sorin Ruse
@sorinr
Jun 23 2016 15:18
@wearenotgroot why be needed to refactor later. better do it wright from the beggining
JD Tadlock
@jdtdesigns
Jun 23 2016 15:18
@IndiraShrestha This was standard module pattern
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:19
@jdtdesigns I will study code (make notes of it)and try to implement some of the examples in my code (I will try to do that based on my memory and understanding). Is that okay with you?
JD Tadlock
@jdtdesigns
Jun 23 2016 15:20
all the refresh does is fire the initial sequence again @IndiraShrestha
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:20
@jdtdesigns I will not submit this one. I will redo the app again in few days
JD Tadlock
@jdtdesigns
Jun 23 2016 15:20
It's all up to you, but learning from other people is a must. Always be ready to learn and be humble. ;)
@IndiraShrestha
IndiraShrestha
@IndiraShrestha
Jun 23 2016 15:21
@jdtdesigns Thank you
CamperBot
@camperbot
Jun 23 2016 15:21
indirashrestha sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 559 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Clem
@ctataru
Jun 23 2016 15:40
@jdtdesigns sorry to bother you again, dude. i used most of your code outline but it still doesn't seem to be working. i only filled in the "if" code and kinda mashed up the functions for calling the weather api and displaying the info, but i was under the impression this would work:
http://codepen.io/wise/pen/VjmJyz?editors=0010
greg
@wearenotgroot
Jun 23 2016 15:45
@ctataru you need to add the geolocation on the else. so if it is chrome use ip-api else use geolocation
@ctataru
var getLocation = function() {
    if (window.chrome) {
      // use ip location api
      $.getJSON("http://ip-api.com/json", function(json) {
        userLat = json.lat;
        userLong = json.lon;

        // fire getWeather()
        getWeather();
      })
    } else {
      // use navigator.geolocation

      // store global vars ( lat, long )

      // fire getWeather()

      if(navigator.geolocation)
      {
        navigator.geolocation.getCurrentPosition(function(pos){
          userLat = pos.coords.latitude;
          userLong = pos.coords.longitude;
          getWeather();    
        });
      }

    }
  };
Hassan
@Quantic-Dreams
Jun 23 2016 15:51
Screen Shot 2016-06-23 at 11.51.09 AM.png
Can someone help me fix an image positioning? It should look like this
I'm working here https://jsfiddle.net
Tyler Moeller
@TylerMoeller
Jun 23 2016 15:54
@ctataru You might also look into the Weather Underground API. Get location and weather all in one URL: https://api.wunderground.com/api/0def10027afaebb7/conditions/q/autoip.json
More info here: https://github.com/InitialState/wunderground-sensehat/wiki/Part-1.-How-to-Use-the-Wunderground-API
Clem
@ctataru
Jun 23 2016 15:58
@wearenotgroot yeah, i know. but i'm using chrome, so i'm just testing if that'll work first
flindip
@flindip
Jun 23 2016 16:07
@jdtdesigns just curious, from the code that I'm reformatting with your guide. I don't have to use as many global variables. It seems that lat and lon are enough from what I wrote. Perhaps I may need to call temp. The reason I ask is that I'm entirely how it will display in the div.
Clem
@ctataru
Jun 23 2016 16:07
@TylerMoeller interesting. thanks dude
CamperBot
@camperbot
Jun 23 2016 16:08
:cookie: 620 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ctataru sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
flindip
@flindip
Jun 23 2016 16:08
or do you recommend just specifying all the potential variables that will displayed in the div?
Taylor Morgan
@tmdesigned
Jun 23 2016 16:09
anything need to be changed on my weather app?
(has to be run externally to get out of https, on chrome)
Dylan
@dhcodes
Jun 23 2016 16:13
@ohiosierra looks good. There's a breakpoint near tablet size as you reduce the screen width that makes the buttons a little narrow
flindip
@flindip
Jun 23 2016 16:23
quick question: can I use navigator. or window. interchangeably?
Tyler Moeller
@TylerMoeller
Jun 23 2016 16:26
@flindip window and navigator are two different objects. See the differences here:
http://www.w3schools.com/jsref/obj_window.asp
http://www.w3schools.com/jsref/obj_navigator.asp
flindip
@flindip
Jun 23 2016 16:29
@TylerMoeller hmm thanks. From what I read they operate essentially as the same thing for what I'm doing
CamperBot
@camperbot
Jun 23 2016 16:29
flindip sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 621 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Daniel Cartín
@Danielcv93
Jun 23 2016 16:30
help please! the facebook share button doesn't works! :worried: http://codepen.io/Danielcv_93/pen/jrMJKO?editors=1010
CamperBot
@camperbot
Jun 23 2016 16:30
no wiki entry for: please the facebook share button doesnt works worried httpcodepeniodanielcv_93penjrmjkoeditors1010
IndiraShrestha
@IndiraShrestha
Jun 23 2016 16:46
@Danielcv93 Hi, I am working on the random quote generator too and i have quick question
in the line 41 why did you use a function inside the color
Tobin Walton
@rug3y
Jun 23 2016 16:46
Hello all
I'd like to ask a question about the random quote machine
I found an api to serve quotes, but requires an api key
The mashape one
So, I look in the code of the sample project, they're using the same api
The problem I have with this is that the api key is hardcoded there, not secure
So even though mashape is not an important account, I still think it's pretty bad practice to put your api key in the javascript
But I don't think there's any other way to consume an api using codepen. In a normal project I would hide my key in a config file or something. So, a question for anyone here, do you know of a way to obfuscate the key or other secure way of using the api while putting the code up in codepen?
Also, I think this is an oversight on the part of FCC here to have sample projects that require a user to consume an api like this and also require that the code be in codepen
There has to be a better way
Taylor Morgan
@tmdesigned
Jun 23 2016 17:03
thanks for feedback on weather app, @dhcodes
CamperBot
@camperbot
Jun 23 2016 17:03
ohiosierra sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1100 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jun 23 2016 17:03
you're welcome
Taylor Morgan
@tmdesigned
Jun 23 2016 17:03
@rug3y you can also just make a little bank of quotes yourself
@rug3y the weather app will require you to hardcode in the api key visibly, but the exercise has some disclaimers about that
Tobin Walton
@rug3y
Jun 23 2016 17:06
@ohiosierra Thanks, I'd thought of hardcoding the quotes but not as good of an app imo. I guess that's probably what I'll do.
CamperBot
@camperbot
Jun 23 2016 17:06
rug3y sends brownie points to @ohiosierra :sparkles: :thumbsup: :sparkles:
:cookie: 146 | @ohiosierra |http://www.freecodecamp.com/ohiosierra
flindip
@flindip
Jun 23 2016 17:09
trying to see if I am properly requesting from ip-api for chrome here is a snippet:
$.getJson("http://ip-api.com/docs/api:json")function(data){
 lat=position.lat;
 lon=position.lon;
Tyler Moeller
@TylerMoeller
Jun 23 2016 17:17

@flindip it's $.getJSON - case sensitive. The URL should be http://ip-api.com/json and it needs a comma after it instead of a closing parenthesis. You also want data.lat and data.lon - position will be undefined. Always good to add a .fail case as well.

$.getJSON("http://ip-api.com/json", function(data) {
  lat = data.lat;
  lon = data.lon;
})
  .fail(function(err) {
    console.log("Error retrieving location information. " + err);
});

More info:

flindip
@flindip
Jun 23 2016 17:20
@TylerMoeller Thank you
CamperBot
@camperbot
Jun 23 2016 17:20
flindip sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave tylermoeller points
Daniel Cartín
@Danielcv93
Jun 23 2016 17:36
@IndiraShrestha I use it because i want to change color every time i click, and that go to consult the function , that give me a random number an that number give a color in color[]
IndiraShrestha
@IndiraShrestha
Jun 23 2016 17:40
@Danielcv93 i see what difference it makes when i comment out the line 41
but i am still having trouble wrapping my head around it
JD Tadlock
@jdtdesigns
Jun 23 2016 17:42
@flindip The reason you're setting all the global vars is to use them to show information. You split the functionality into parts(location, weather, displaying info). It's a standard way of creating a in-app database that can share data across the app other than passing info in arguments which is common too.
api data is async, meaning you have to use a promise or callback after the data is received
you can't just fire a show data without first making sure the data has been received
Ana
@ana-esova
Jun 23 2016 17:43
guys, can someone help me with twitter share button? i'm not sure where to store the value of the quote i want to share and then make it work with the button
<a href="https://twitter.com/share" class="twitter-share-button" target="_blank" data-size="large" data-hashtags="asoiaf" data-dnt="true">Tweet</a>

i tried to do this in my script:

var quote = $(".quote").value;
    console.log(quote);
    $("twitter-share-button").attr("data-text", quote);
});

and then put data-text as default value in the quote until the click event, but it's not working

JD Tadlock
@jdtdesigns
Jun 23 2016 17:46
@ana-esova It's super easy using the twitter intent url.
greg
@wearenotgroot
Jun 23 2016 17:46
@ana-esova just use access the href property and use intent. otherwise you need to remove and recreate the twitter button each time
Ana
@ana-esova
Jun 23 2016 17:47
thanks i'mma try with intent, i just wanted to see if there is another way
@ana-esova
Ana
@ana-esova
Jun 23 2016 17:48
thanks @jdtdesigns @wearenotgroot
CamperBot
@camperbot
Jun 23 2016 17:48
ana-esova sends brownie points to @jdtdesigns and @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1158 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
:cookie: 560 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
greg
@wearenotgroot
Jun 23 2016 17:49
@ana-esova :+1:
gideonlee
@gideonlee
Jun 23 2016 18:00
Hey, I'm working on the Random Quote Machine and I had a few questions about starting. How do I find these random quotes? Is there some kind of library? API?
Julie
@jurijuri
Jun 23 2016 18:00
I just inserted some manually :)
gideonlee
@gideonlee
Jun 23 2016 18:01
like manually insert a few quotes into an array that will cycle when the user clicks on the button?
greg
@wearenotgroot
Jun 23 2016 18:02
@gideonlee there are a bunch of api. a bit of searching should give you results
http://forismatic.com/en/api/
@gideonlee you can try forismatic api
Julie
@jurijuri
Jun 23 2016 18:03
@gideonlee that's what I ended up doing, because I wanted something specific, but an API would be much better
Damian Collier
@damianpcollier
Jun 23 2016 18:04
Hi. How do you get container-fluid to 100% width?
Ana
@ana-esova
Jun 23 2016 18:06
@jurijuri i just finished my twitter share button with a help from guys here, here's how i did it in jquery
$(".twitter-share-button").click(function() {
        var quote = '"' + $(".quote").html() + '"';
    $(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?hashtags=asoiaf&related=freecodecamp&text=" + quote);
    });
Julie
@jurijuri
Jun 23 2016 18:06
container-fluid is 100% width by default
Marco Mazzeo
@Doko85
Jun 23 2016 18:06
guys I feel a bit stupid now, I did this countless times with tutorials but now it doesn't work
Ana
@ana-esova
Jun 23 2016 18:07
@gideonlee actually :octocat:
Marco Mazzeo
@Doko85
Jun 23 2016 18:07
when I click on an element it should add a class, when I click on it again it should remove it.
Ana
@ana-esova
Jun 23 2016 18:08
and i used switch + Math.random
Marco Mazzeo
@Doko85
Jun 23 2016 18:08
So I imagine something like "if (condition === true) {
statement1;
statement2;
} else {
condition === false;
statement1;
statement2;
}
Julie
@jurijuri
Jun 23 2016 18:09
Can anyone give me a hand with the Wikipedia API? I can get it to return snippets, or URLs, but not both -_- Here's my pen: https://codepen.io/jurijuri/pen/aZBRvQ
gideonlee
@gideonlee
Jun 23 2016 18:10
@jurijuri @wearenotgroot Thanks!
CamperBot
@camperbot
Jun 23 2016 18:10
gideonlee sends brownie points to @jurijuri and @wearenotgroot :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @jurijuri |http://www.freecodecamp.com/jurijuri
:star2: 1160 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Julie
@jurijuri
Jun 23 2016 18:10
I'm being good and not playing with the styling until I have the code running correctly ;)
@gideonlee no prob!
Damian Collier
@damianpcollier
Jun 23 2016 18:18
I thought that Julie but this simple piece of code starts around 10px in. If I drop it in a block and colour the block, there's a clear white left and right margin , again around 10px.
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

<!-- BOOTSTRAP Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


</head>

<body>

<!--Make the page dynamic-->
<div class="container-fluid">
<p>Hello</p>

</div>
</body>
</html>
Julie
@jurijuri
Jun 23 2016 18:19
Can you link to your pen? Easier to read :)
Damian Collier
@damianpcollier
Jun 23 2016 18:20
thanks, 2 minutes as i'll drop the block in as well
Ken Haduch
@khaduch
Jun 23 2016 18:22
@damianpcollier - the container-fluid class adds a padding-right: 15px; and padding-left: 15px; - is this what you're seeing?
Julie
@jurijuri
Jun 23 2016 18:24
Oh wait, ah Ken beat me to it
Isaac Abrahamson
@IsaacAbrahamson
Jun 23 2016 18:24
I'm confused with how to use the Wikipedia API to search for pages. There's nowhere I can find in the documentation that tells you how to get pages with a certain name.
Julie
@jurijuri
Jun 23 2016 18:25
@IsaacAbrahamson I'm also having problems with it; I can get the snippet or the url but not both
Damian Collier
@damianpcollier
Jun 23 2016 18:25
Here's a link @jurijuri http://codepen.io/collierd/pen/xOgKYN
Yes I am @khaduch
Julie
@jurijuri
Jun 23 2016 18:26
@damianpcollier It's the bootstrap padding; you can fudge it by overriding the CSS
Ronique Ricketts
@RoniqueRicketts
Jun 23 2016 18:27
Hello guys
$('#allChan').prepend('<a href="' + channel_data.url + '">' +
    '<li><img src="' + channel_data.logo + '"> '+ name +'</li>' +
  '</a>');
Julie
@jurijuri
Jun 23 2016 18:28
@damianpcollier set .container-fluid {padding: 0;} to get rid of it
Ronique Ricketts
@RoniqueRicketts
Jun 23 2016 18:28
I want to add a <div class="onColor"></div> to this code at the end of +name+
Julie
@jurijuri
Jun 23 2016 18:31
@RoniqueRicketts you can add it into the html strings after name (you can also combine </li></a>)
greg
@wearenotgroot
Jun 23 2016 18:31
@ana-esova you can replace the switch with just an array of object
var quotes = [
{
quote:'...',
author:'...'
},
....
];
Damian Collier
@damianpcollier
Jun 23 2016 18:31
Done, fantastic. Thanks for your help @jurijuri and @khaduch
CamperBot
@camperbot
Jun 23 2016 18:31
damianpcollier sends brownie points to @jurijuri and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1372 | @khaduch |http://www.freecodecamp.com/khaduch
:cookie: 267 | @jurijuri |http://www.freecodecamp.com/jurijuri
Julie
@jurijuri
Jun 23 2016 18:32
@wearenotgroot hey do you have any advice for my wiki-angst?
angstypedia
@damianpcollier no prob :D
greg
@wearenotgroot
Jun 23 2016 18:32
@jurijuri just take a day to read the api :smile:
Julie
@jurijuri
Jun 23 2016 18:32
I did that already haha
Isaac Abrahamson
@IsaacAbrahamson
Jun 23 2016 18:33
@jurijuri Take a look at this page, I been lokking at it and it seems a little helpful for searching
Ronique Ricketts
@RoniqueRicketts
Jun 23 2016 18:33
@jurijuri I tried but error Idk where the ' should go
Ken Haduch
@khaduch
Jun 23 2016 18:34
@damianpcollier - but why would you not want to have some padding between the edges of the page and your text? You might just be able to change the colors so that they don't show up - but I don't think that you want to have your text just butted up against the edge of the page? Probably the reason why they added that padding in the first place (I'm sure that they had a reason?)
Julie
@jurijuri
Jun 23 2016 18:36
@wearenotgroot this is what I have in the sandbox:
/w/api.php?action=query&format=json&prop=info&list=search&callback=%3F&inprop=url&srsearch=foo but it's not returning the URL
@wearenotgroot I solemnly swear I read the API and googled but I am clearly missing something
Damian Collier
@damianpcollier
Jun 23 2016 18:38
@khaduch it's more the block (in grey). Yes, I would want to pad text in a bit but I want the block to span the full width; unless there's another way?
Julie
@jurijuri
Jun 23 2016 18:39
@damianpcollier set the color to the body tag
Sundeep
@pidugusundeep
Jun 23 2016 18:44
how do i restrict the top horizontal navigation bar to stay there itself with out scrolling along with the website
Damian Collier
@damianpcollier
Jun 23 2016 18:45
@damianpcollier
Krista Prenesti
@kprenesti
Jun 23 2016 18:52
Hi all. Anyone know about Angular factories?
Kgopotso
@kgopotso4real
Jun 23 2016 19:01
hi guys tell me for the build a tribute page exercise do you use the same story you're given or do you find your own
?
vSPARROW
@vsparrow
Jun 23 2016 19:05
@kgopotso4real you should make your own story, its good practice to try to make a replica on your own
Heather Kusmierz
@HKuz
Jun 23 2016 19:10
@kgopotso4real you can pick any topic - I've seen people choose a public figure they respect mostly, I did mine on Bryce Canyon. Pretty much anything you are interested in works.
Kgopotso
@kgopotso4real
Jun 23 2016 19:11
Thank you all and the layout can be of your choosing right?
Heather Kusmierz
@HKuz
Jun 23 2016 19:13
@kgopotso4real yup! The example is a guideline, but you're free to be as creative as you want. It's good practice getting used to the Bootstrap classes that can help set a page up relatively quickly.
Kgopotso
@kgopotso4real
Jun 23 2016 19:17
@HKuz thank you for your time
CamperBot
@camperbot
Jun 23 2016 19:17
kgopotso4real sends brownie points to @hkuz :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @hkuz |http://www.freecodecamp.com/hkuz
Kgopotso
@kgopotso4real
Jun 23 2016 19:18
@vsparrow thank you as-well
CamperBot
@camperbot
Jun 23 2016 19:18
kgopotso4real sends brownie points to @vsparrow :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @vsparrow |http://www.freecodecamp.com/vsparrow
Heather Kusmierz
@HKuz
Jun 23 2016 19:19
@pidugusundeep if you're using Bootstrap, in addition to the .nav .navbar-nav classes on the element holding your navigation tags, you can add .navbar-fixed-top (or .navbar-fixed-bottom for the opposite effect). One thing to keep an eye out for is you may need to add a top margin to whatever sits at the top of your page - the positioning of the navigation bar is such that the top element won't 'know' it's there, and will be shown underneath it.
@kgopotso4real no problem - good luck!
Sundeep
@pidugusundeep
Jun 23 2016 19:22
@HKuz got it !
greg
@wearenotgroot
Jun 23 2016 19:25
@jurijuri try using generators and gsrseach(instead of search array, you'll have pages)
@jurijuri use this and experiment:
url = "https://en.wikipedia.org/w/api.php?action=query&format=json&generator=search&gsrprop=snippet&prop=info|extracts&inprop=url&callback=?&gsrsearch=" + query;
Lars Kerick
@Brice187
Jun 23 2016 19:28
Hey, have a general problem with IDE
Actually I am using Brackets, i like it because of the built in webserver to test the JS immediately
but i have no clue why some lines of code do not work
is there any good debugging method that shows me, ehat is wrong with my code
e.g. i have a button where i want to write a jquery $(„button“).click(function () {…}); but nothing happens on the click event
i have no clue and brackets does not tell me what is wrong with my ocde
code
Marco Mazzeo
@Doko85
Jun 23 2016 19:31
try
$('button').on('click', function() { });
flindip
@flindip
Jun 23 2016 19:32
I'm reworking my javascript for "local weather APP." Its not finished but I wanna to get some feedback to make sure I'm at least on the right track
(function(){
var lat, lon, temp, description, windSpeed;

var init=function(){
showPosition(position);
};
var showPosition=function(position){
if(navigator.chrome){
$.getJSON("http://ip-api.com/json", function(data) {
  lat = data.lat;
  lon = data.lon;
  weather(data);
 });
}
else{
navigator.geolocation.getCurrentPosition(showPosition);
         lat=position.coords.latitude;
         lon=position.coords.longitude;}
    weather(data);
}
var weather=function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&APPID=ed41737e77e50d3f339168a35992ffd9", function(data){
   //var json=JSON.parse(JSON.stringify(data));
      var temp=data.main.temp;
      var description=data.weather[0].description;
      var windSpeed=data.wind.speed;

    });  
      weatherDisplay(data);    
      weatherBackground();
      tempButton();
     } 


}
})();
Marco Mazzeo
@Doko85
Jun 23 2016 19:34
I'm curious, why you access to that IP API only on Chrome?
'cause I may edit my code if that only works on Chrome.
greg
@wearenotgroot
Jun 23 2016 19:35
@Doko85 geolocation only works on https on chrome
Lars Kerick
@Brice187
Jun 23 2016 19:35
@Doko85 still no response
flindip
@flindip
Jun 23 2016 19:35
@Doko85 Chrome only uses that api. It can't use geolocation
nm
greg is more knowledgable than I am
greg
@wearenotgroot
Jun 23 2016 19:35
@Doko85 and https with openweather requires premium account(so you cant access it)
flindip
@flindip
Jun 23 2016 19:36
@wearenotgroot hey, does that code look better?
Marco Mazzeo
@Doko85
Jun 23 2016 19:36
ok I'll add that part to my code then
greg
@wearenotgroot
Jun 23 2016 19:37
@flindip ill check it out
flindip
@flindip
Jun 23 2016 19:38

@wearenotgroot I still have to do three more sections of it. I'm using (I forget the gentlemen's name)format. It just seems that everyone has different methods of approaching the same problem.

No rush, btw, I'll finish it up. Thanks...

CamperBot
@camperbot
Jun 23 2016 19:38
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1161 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
flindip
@flindip
Jun 23 2016 19:39
@wearenotgroot I didn't know $(document).ready(function) was obsolete..
Marco Mazzeo
@Doko85
Jun 23 2016 19:39
is it obsolete?
flindip
@flindip
Jun 23 2016 19:39
@Doko85 apparently
@Doko85 or at least, in the context, of working in codepen
Marco Mazzeo
@Doko85
Jun 23 2016 19:41
I always use it
flindip
@flindip
Jun 23 2016 19:41
@Doko85 I do too...
elminsterrr
@elminsterrr
Jun 23 2016 19:42
Hello to all. Can anyone please tell me why I can't acesss wikipedia API with my pen:
All the time I'm getting alert:
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
I'm trying to read wiki API documentation but I'm too inexperienced with it and I don't know what I'm looking for :worried:
greg
@wearenotgroot
Jun 23 2016 19:47

@flindip i think you meant to do

var init=function(){
  if(navigator.chrome)
  {
      $.getJSON("http://ip-api.com/json",showPosition);
  }
  else
  {
      navigator.geolocation.getCurrentPosition(showPosition);
  }
};

showPosition if your callback for both, and just have an if statements to handle the logic of incomming data

flindip
@flindip
Jun 23 2016 19:49
@wearenotgroot so, where do you put the lat lon variables?
greg
@wearenotgroot
Jun 23 2016 19:49
@flindip on the showPosition function
amir
@aizen3
Jun 23 2016 19:50
guys help me in this Size your Images
greg
@wearenotgroot
Jun 23 2016 19:50
@flindip but first you need to analyse what the return data from both ip-api and geolocation. then you can create an if statement to handle the data
amir
@aizen3
Jun 23 2016 19:50
i tried times but still wrong
Vadali Soumitri
@svadali2
Jun 23 2016 19:54
hello all, i am trying to keep a h1 tag when there is no text in it; how does one do that? the background design of a h1 tag disappears when i remove all the text from it..any tips?
flindip
@flindip
Jun 23 2016 19:59
@wearenotgroot alright, so I need if statements to handle the variables such as temp and such? or could I just put into an array and grab it? Thanks again....
CamperBot
@camperbot
Jun 23 2016 19:59
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave wearenotgroot points
greg
@wearenotgroot
Jun 23 2016 20:01
@flindip depending of which will be triggered the response(the return object will be different ) so you need to handle them different.
Ilia Lataria
@Ilia-Lataria
Jun 23 2016 20:02
Hi all
flindip
@flindip
Jun 23 2016 20:03
@wearenotgroot wait a sec, do I even need to use geolocation? Can I just eliminate that and just use the chrome ip api? That Api works for every browser right?
Florencia
@flopywood
Jun 23 2016 20:05
Hello, everyone! I need some help. I'm building the Portfolio project and I think I'm cheating a little bit because I went to other resources to style it my way and I found Bootstrap Themes that do all the work for me.
greg
@wearenotgroot
Jun 23 2016 20:07
@flindip ip-api on chrome then geolocation on other browser. however you have the same callback function so you need to implement a logic that handle data that comes from either one
flindip
@flindip
Jun 23 2016 20:07
@wearenotgroot ok, ip-api is only really used for chrome. I didn't know if I could use for everything
greg
@wearenotgroot
Jun 23 2016 20:08
@flindip well you can use just ip-api if you want
@flindip then just remove geoloaction
flindip
@flindip
Jun 23 2016 20:08
@wearenotgroot thats what I mean. Why even bother with Geolocation when ip-API works for everything
greg
@wearenotgroot
Jun 23 2016 20:09
@flindip yep probably easier
flindip
@flindip
Jun 23 2016 20:09
@wearenotgroot yeah thats what I'll do. let me rework it....I'll be done in like an hour I think.
@wearenotgroot Thanks
CamperBot
@camperbot
Jun 23 2016 20:09
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave wearenotgroot points
flindip
@flindip
Jun 23 2016 20:10
@wearenotgroot I don't even have to specify for chrome. Just to do the getJSON function?
greg
@wearenotgroot
Jun 23 2016 20:11
@flindip yeah you dont have to
flindip
@flindip
Jun 23 2016 20:11
@wearenotgroot <slaps self in the head> I was just making this harder than I need it to be...
greg
@wearenotgroot
Jun 23 2016 20:16

@flindip so your code looks like this

var init=function(){

   $.getJSON("http://ip-api.com/json",function(data){

     lat = data.lat;
     lon = data.lon;

     weather();
   });


};

no need for the showPosition function

flindip
@flindip
Jun 23 2016 20:19
@wearenotgroot ok, so need for show position function. I'll put that in. Thanks
CamperBot
@camperbot
Jun 23 2016 20:19
:warning: flindip already gave wearenotgroot points
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
greg
@wearenotgroot
Jun 23 2016 20:21
@flopywood it's fine. you can use whatever framework and resources you want as long as it's not just copy pasta techniqure :)
flindip
@flindip
Jun 23 2016 20:59
@wearenotgroot I'm trying to just display the various weather variables as simple text. Is something like this workable?
var weather=function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&APPID=ed41737e77e50d3f339168a35992ffd9", function(data){
       JSON.parse(JSON.stringify(data));
       temp= data.main.temp;
       description= data.weather[0].description;
       windSpeed= data.wind.speed;

    });  
      weatherDisplay(data);    
      weatherBackground();
      tempButton();
     } 
var weatherDisplay=function(){

$("weather").html("<p id=temp>"+temp+"</p>"+"p id=description>"+description+"</p>"+"<p id=windSpeed>"   +windSpeed+"</p>");
}
my intention is that the information from the weather function was turned into a string which then can be plugged in as a an element id for <p>
Stephen
@stephepush
Jun 23 2016 21:02
should i get an api for my quote generator?
greg
@wearenotgroot
Jun 23 2016 21:04
@flindip well a bit simplistic but look ok.(btw you have syntax error)
@flindip also you can just do this
var weather=function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&APPID=ed41737e77e50d3f339168a35992ffd9", weatherDisplay);  
     }

var weatherDisplay=function(data){
  console.log(data);
  var temp=data.main.temp;
  var description=data.weather[0].description;
  var windSpeed=data.wind.speed;
  $("#weather").html("<p id=temp>"+temp+"</p>"+"<p id=description>"+description+"</p>"+"<p id=windSpeed>"   +windSpeed+"</p>");
}
flindip
@flindip
Jun 23 2016 21:08
@wearenotgroot yeah, I want it to be simple so I can get the data displayed. Then I'll build more on top of it. I'm pretty sure I'll have to deal with displaying default Celsius.
greg
@wearenotgroot
Jun 23 2016 21:09
@flindip just make the weatherDisplay function your callback for the api call
flindip
@flindip
Jun 23 2016 21:09
@wearenotgroot so just put everything in the weather function?
greg
@wearenotgroot
Jun 23 2016 21:10
@flindip yea you can also do that
flindip
@flindip
Jun 23 2016 21:11
@wearenotgroot I noticed that you took out the JSON.parse. Is that not necessary?
@wearenotgroot I thought you had to because its returns an object.
let me rewrite it real quick
greg
@wearenotgroot
Jun 23 2016 21:21
@flindip if you want weather icon ------->http://openweathermap.org/weather-conditions
flindip
@flindip
Jun 23 2016 21:23
@wearenotgroot I'm doing background images instead of the icon. I don't know though, it may be easier to just implement the icon.
greg
@wearenotgroot
Jun 23 2016 21:24
@flindip decisions..decisions :smile:
Florencia
@flopywood
Jun 23 2016 21:30
@wearenotgroot thank you! I'm relieved. I thought I was going to fail the project!
CamperBot
@camperbot
Jun 23 2016 21:30
flopywood sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Johnny
@JohnnyBizzel
Jun 23 2016 21:31
@stephepush I would get an API yes.
greg
@wearenotgroot
Jun 23 2016 21:33
@flopywood :smile:
@flopywood were you referring to these http://getbootstrap.com/components/ earlier?
Robert Friedman
@robfr77
Jun 23 2016 21:56
hey guys i just started a blog and my first post covers the simon game project if you have already completed the project check it out here
http://javascriptical.com/
Marc White
@Shwrndasink
Jun 23 2016 22:12
Anyone completed the weather app?
Uros Tadic
@urketadic
Jun 23 2016 22:17
hey, can anyone help me with jquerry on http://codepen.io/urketadic/pen/JKbddV
i tried alot of stuff but nothing seems to work. Basicaly i just want on $("#buttoninput") , function to run, that takes value from #inpute and then calculates that number and outputs it in #output
greg
@wearenotgroot
Jun 23 2016 22:22
@urketadic you meant
$("#buttoninput").click(function(){

....do stuff here
});
Uros Tadic
@urketadic
Jun 23 2016 22:23
how do i get value thats written in Write age
.innerHTMl or something
agues i select output then and change its HTML with a function
dont realy know how :D
greg
@wearenotgroot
Jun 23 2016 22:25
@urketadic
$('#inpute').val(); //<------to get the value
@urketadic check out the jquery docs
Uros Tadic
@urketadic
Jun 23 2016 22:26
yea
flindip
@flindip
Jun 23 2016 22:29
@wearenotgroot alright, I think I have a rough draft of the code. Trying to figure out where to properly put the set cel and far functions. I think I need them someplace else cause I believe I need to set cel in the HTML display. Anyways,
(function(){
var lat, lon, temp, description, windSpeed;

var init=function(){

   $.getJSON("http://ip-api.com/json",function(data){
     lat = data.lat;
     lon = data.lon;
     weather();
   });
}
var weather=function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&APPID=ed41737e77e50d3f339168a35992ffd9", function(data){
       JSON.parse(JSON.stringify(data));
       temp= data.main.temp;
       description= data.weather[0].description;
       windSpeed= data.wind.speed;
    $("weather").html("<p id=temp>"+temp+"</p>"+"p id=description>"+description+"</p>"+"<p id=windSpeed>"   +windSpeed+"</p>");
    });  
   weatherBackground();
   tempButton();
     }
    function weatherBackground(data){
    if(description==="snow"){
     $('body').css("background-image","url("")");
    } 
   if(description==="rain"){
     $('body').css("background-image","url("")");
    } 
if(description==="sunny"){
     $('body').css("background-image","url("")");
    } 
if(description==="thunder"){
     $('body').css("background-image","url("")");
    }
    else{
    $('body').css("background-image","url("")");
    }
}
function tempButton(data){
$('button').on('click', function(){
  $('button').toggleClass('celcius');
  $('button').toggleClass('fahrenheit');

  if ($(this).hasClass('celcius')) {
    $('button').text(setFahrenheit());
    return;
  }

  $('button').text(setCelcius());
});

function setCelcius(){
  var cel = (temp - 32) * 5/9;
  return cel + "° C";
};

function setFahrenheit(){
  return temp + "° F";
};

}
}   

}
init();
})();
Jessica
@QueenCode
Jun 23 2016 22:30
Hey, I just finished my weather app. Let me know what you think! http://codepen.io/QueenCode92/full/RRRBVY/
Roy S
@rscheffers82
Jun 23 2016 22:30
Just finished my calculator, if anyone needs some stuff calculator, give it your best shot :) http://codepen.io/roycode/full/qNapgw?editors=1010
flindip
@flindip
Jun 23 2016 22:31
@wearenotgroot also, I wasn't sure if I needed to declare the weather variables locally since I declared them globally at the top
Kevin
@KevinBruland
Jun 23 2016 22:31
@QueenCode Looks good, but I do have to click the "here" link to load the other one
@QueenCode I can explain why and tell you how to fix it if youd like
Jessica
@QueenCode
Jun 23 2016 22:32
@Benalron yeah, that's probably because i gave you guys the http version.. sorry! the link leads to the https version
Kevin
@KevinBruland
Jun 23 2016 22:33
@QueenCode ah OK. yeah. For reference too, wunderground actually has and autoip in their API too... I used wunderground and did it the same way as you intitially
instead off adding coordinates at the end, you can just use /q/autoip.json, and it will pull the information directly
Jessica
@QueenCode
Jun 23 2016 22:34
@Benalron you mean without having to run the geolocation part?
Kevin
@KevinBruland
Jun 23 2016 22:34
yup
Jessica
@QueenCode
Jun 23 2016 22:35
oh wow that's awesome.. saves me lots of code lol.. thanks @Benalron
CamperBot
@camperbot
Jun 23 2016 22:35
queencode sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @benalron |http://www.freecodecamp.com/benalron
Roy S
@rscheffers82
Jun 23 2016 22:35
@QueenCode nice styling Jessica, love the look and feel of the app.
Kevin
@KevinBruland
Jun 23 2016 22:35
yeah, it's nice... It was how I avoided the required https in the codepen link too... that way it will work when people are viewing your codepen without a direct link from you
so if someone is just on your codepen profile, they can click the link to it and have it work
Marco Mazzeo
@Doko85
Jun 23 2016 22:36
indeed I just realized that my code isn't working on firefox...
Jessica
@QueenCode
Jun 23 2016 22:36
thanks! @rscheffers82
CamperBot
@camperbot
Jun 23 2016 22:36
queencode sends brownie points to @rscheffers82 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @rscheffers82 |http://www.freecodecamp.com/rscheffers82
Jessica
@QueenCode
Jun 23 2016 22:36
oh wow that's great @Benalron
Marco Mazzeo
@Doko85
Jun 23 2016 22:36
I have to check the geolocation code mode
Jessica
@QueenCode
Jun 23 2016 22:38
@Doko85 yeah the geolocation thing can be kinda wonky at times.. i think it's a security thing though
Uros Tadic
@urketadic
Jun 23 2016 22:38
hey greg are u there
Marco Mazzeo
@Doko85
Jun 23 2016 22:42
can anybody test this on any browser != chrome? http://codepen.io/doko/pen/gMPWjq/
Uros Tadic
@urketadic
Jun 23 2016 22:43
ok i wil doko
It says Dorćol
and 25 degrees
which is both wrong, and it says RS which might be correct since i am from Serbia
greg
@wearenotgroot
Jun 23 2016 22:44
@flindip why not use switch for the weatherBackground?
Marco Mazzeo
@Doko85
Jun 23 2016 22:44
don't blame on me for the incorrect information :D at least it's pulling data from the api
Uros Tadic
@urketadic
Jun 23 2016 22:45
yeah aguess its working :D
Tony Johnson
@tnyjhnsn
Jun 23 2016 22:45
@Doko85 works in safari ;)
Jessica
@QueenCode
Jun 23 2016 22:46
@Doko85 I have Chrome lol but I love the style of your app. It's really cute. The unit change doesn't work for me though. =/
Marco Mazzeo
@Doko85
Jun 23 2016 22:46
yeah I don't know how to sort that part
thanks for the love on the design, I spent a few days on that
flindip
@flindip
Jun 23 2016 22:46
@wearenotgroot I guess I could . But, doesn't that method work as well?
Marco Mazzeo
@Doko85
Jun 23 2016 22:46
even tho some alignment has to be fixed
Tony Johnson
@tnyjhnsn
Jun 23 2016 22:46
@Doko85 ooops.. the unit switch doesn’t work
Marco Mazzeo
@Doko85
Jun 23 2016 22:47
yeah I don't know how to sort that part
:D
I'm stuck on it
greg
@wearenotgroot
Jun 23 2016 22:47
@flindip also you need to call weatherBackground inside the callback function
Marco Mazzeo
@Doko85
Jun 23 2016 22:47
it should move x pixels on the right when pressed and switch the temp value
greg
@wearenotgroot
Jun 23 2016 22:48
@flindip `
var weather=function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon="+ lon + "&units=metric&APPID=ed41737e77e50d3f339168a35992ffd9", function(data){
       JSON.parse(JSON.stringify(data));
       temp= data.main.temp;
       description= data.weather[0].description;
       windSpeed= data.wind.speed;

        $("weather").html("<p id=temp>"+temp+"</p>"+"p id=description>"+description+"</p>"+"<p id=windSpeed>"   +windSpeed+"</p>");

        weatherBackground(description);
        tempButton();
    });
}

function weatherBackground(description){

    switch(description)
    {
        case 'snow': $('body').css("background-image","url("")"); break;
        case 'rain': $('body').css("background-image","url("")"); break;
        case 'sunny': $('body').css("background-image","url("")"); break;
        case 'thunder': $('body').css("background-image","url("")"); break;
        default: $('body').css("background-image","url("")");        
    }
}
flindip
@flindip
Jun 23 2016 22:48

@wearenotgroot I fixed some errors on the codepen. But, the tail end of it is giving some sort of error.

here is the code:
http://codepen.io/flindip/pen/xOgbva

Marco Mazzeo
@Doko85
Jun 23 2016 22:48
but... not working
flindip
@flindip
Jun 23 2016 22:49
@wearenotgroot ahh, yeah. I guess I was confused with implementing case because it needed to hit a certain value. I thought you only use switch when you already have the value.
Jessica
@QueenCode
Jun 23 2016 22:49
@Doko85 the unit button might not be working because you're having the user click the span to change it.. maybe you can try having them use the button element instead
Marco Mazzeo
@Doko85
Jun 23 2016 22:49
shouldn't it be the same? doesn't the click works for any element?
flindip
@flindip
Jun 23 2016 22:50
@wearenotgroot I'll plug it in
greg
@wearenotgroot
Jun 23 2016 22:50
@flindip btw the description on the data you'll receive is not always one word/or corresponds to sunny, rainy thunder etc(you'll need to study and extract words from it)
Jessica
@QueenCode
Jun 23 2016 22:51
@Doko85 I'm not so sure. I always use the click function on buttons or labels. Does clicking the span work elsewhere?
flindip
@flindip
Jun 23 2016 22:51
@wearenotgroot ok
thanks
greg
@wearenotgroot
Jun 23 2016 22:51
@flindip check out the icons and descriptions -------http://openweathermap.org/weather-conditions
Marco Mazzeo
@Doko85
Jun 23 2016 22:53
@QueenCode I picked the button idea from this pen but he manages the whole code differently than me http://codepen.io/jdtadlock/pen/ONNEPM
flindip
@flindip
Jun 23 2016 22:53
@wearenotgroot I'll add more cases then.
Jessica
@QueenCode
Jun 23 2016 22:55
@Doko85 another thing i noticed is that you have isCelsius as true and then you say if !isCelsius (if it's false) run blah blah code, so it'll never run
greg
@wearenotgroot
Jun 23 2016 22:55
@flindip if you console.log data.weather[0].main <-----------main weather decription, i think they are usually one word
Jessica
@QueenCode
Jun 23 2016 22:56
try removing the exclamation point
Marco Mazzeo
@Doko85
Jun 23 2016 22:56
switching the codes doesn't work either @QueenCode
and removing the !
wait
Jessica
@QueenCode
Jun 23 2016 22:57
i just removed it and it works lol
Marco Mazzeo
@Doko85
Jun 23 2016 22:57
now it toggles the temp value
not the button span tho
Jessica
@QueenCode
Jun 23 2016 22:58
yeah i guess now you've gotta figure out how to make the button change
Marco Mazzeo
@Doko85
Jun 23 2016 22:58
btw it's 75°F here in Turin, IT and it's 1am... I'm melting
greg
@wearenotgroot
Jun 23 2016 22:59
@flindip careful you have some extra } below
Jessica
@QueenCode
Jun 23 2016 22:59
Ick! I wouldn't survive heat like that at night lol
Marco Mazzeo
@Doko85
Jun 23 2016 22:59
it was 36°C today at 4pm
flindip
@flindip
Jun 23 2016 23:00
@wearenotgroot yeah I know. I was cutting and pasting on the old code that I wrote. Its a bit of a mess at the tail end. I'm going to plug in the switch function in a sec
Jessica
@QueenCode
Jun 23 2016 23:00
@Doko85 one thing that i do know is that those kind of toggle buttons usually rely on radio buttons.. they're basically radio buttons disguised as switches
Safia Nuzhath
@SafiaNuzhath
Jun 23 2016 23:01

Hi Everyone-
I need some help with angularJS . I have posted my question on stack overflow - http://stackoverflow.com/questions/37931312/rendering-highcharts-in-angularjs-from-json-object

Can someone please help me with it ? It's is urgent

greg
@wearenotgroot
Jun 23 2016 23:01

@flindip also isnt this for farenheit

var cel = (temp - 32) * 5/9;

you named the function setCelcius

Taylor Morgan
@tmdesigned
Jun 23 2016 23:06
For the Roman Numerals converter, how efficient should it be? I mean technically you could switch statement out each digit
flindip
@flindip
Jun 23 2016 23:06
@wearenotgroot ehh, I was pulling it from the exercise in basic Javascript. I may have misread it
@wearenotgroot I fixed the brackets I think
I'm not getting any errors on codepen. I'm not entirely sure if I should move the temp functions someplace else. I think need it to convert the data from the api
@wearenotgroot updated codepen with bracket fixes. I'm not getting any errors. Also I put in the switch function
http://codepen.io/flindip/pen/xOgbva
Doomflake
@Doomflake
Jun 23 2016 23:10
Any tips on how to get the console to cooperate on the escape sequences in strings lesson?
Marco Mazzeo
@Doko85
Jun 23 2016 23:11
the conversion is broken
°F shows °C and °C shows... whatever :D
greg
@wearenotgroot
Jun 23 2016 23:11
@flindip you need to switch the degrees F and C on both function
Marco Mazzeo
@Doko85
Jun 23 2016 23:11
@flindip
flindip
@flindip
Jun 23 2016 23:12
@wearenotgroot ok, I'll do that right now. Do I need to put it in another place? The functions themselves?
@Doko85 yep?
greg
@wearenotgroot
Jun 23 2016 23:13
@flindip yep those two function should really be outside the tempButton function
@flindip
function tempButton(data){
  $('button').on('click', function(){
    $('button').toggleClass('celcius');
    $('button').toggleClass('fahrenheit');

    if ($(this).hasClass('celcius')) {
      $('button').text(setCelcius());
      return;
    }

    $('button').text(setFahrenheit());
  });

}

function setFahrenheit(){
  var f = (temp - 32) * 5/9;
  return f + "° F";
};

function setCelcius(){
  return temp + "° C";
};
flindip
@flindip
Jun 23 2016 23:14
@wearenotgroot should I put them in the weather function?
Marco Mazzeo
@Doko85
Jun 23 2016 23:14
remember that you are using units=metric
it already shows Celsius temperature
so var Cel = temp + '°C';
greg
@wearenotgroot
Jun 23 2016 23:16
@flindip not really
@flindip becaus .on is like adding a event listener for click event so it will be fine can be execute outside the callback function for the weather
flindip
@flindip
Jun 23 2016 23:18
@wearenotgroot ok, then I guess this is it then:
http://codepen.io/flindip/pen/xOgbva
Marco Mazzeo
@Doko85
Jun 23 2016 23:18
if I want to target the span inside the button I should say $('button span'), right @wearenotgroot
?
or button > span ?
flindip
@flindip
Jun 23 2016 23:20
$("weather").html("<p id=temp>"+temp+"</p>"+"p id=description>"+description+"</p>"+"<p id=windSpeed>"   +windSpeed+"</p>");
I'm guessing I have to implement Celsius in that with temp?
the reason why I am pointing it out. Is that I have those functions at the bottom of the code. I guess it doesn't matter? It will still pull from it?
greg
@wearenotgroot
Jun 23 2016 23:21
@Doko85 i think the design is just a mock up for now :smile:
Clarence W.
@leo81202
Jun 23 2016 23:21
@flindip you're missing a # or a . for $('weather')
greg
@wearenotgroot
Jun 23 2016 23:21
@flindip you can also have a fix element and just add ids on them
@flindip then just access and change the values/content
flindip
@flindip
Jun 23 2016 23:22
@leo81202 yeah I know. Its just a placeholder
@wearenotgroot thanks greg. Big help. I'm much further along I think
CamperBot
@camperbot
Jun 23 2016 23:23
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1164 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Marco Mazzeo
@Doko85
Jun 23 2016 23:23
@wearenotgroot what do you mean?
greg
@wearenotgroot
Jun 23 2016 23:24
This message was deleted
flindip
@flindip
Jun 23 2016 23:25
@wearenotgroot yeah, thats what I meant. So that the weather function can pull from degree metric functions
greg
@wearenotgroot
Jun 23 2016 23:27
@flindip in js the have hoisting so even if variables and function are further down they will be hoisted up, but you are right not really necessary to always rely on hoisting
flindip
@flindip
Jun 23 2016 23:27
@wearenotgroot But, I guess your showing me that it doesn't really matter where you place the stuff as long as the execution call is placed properly?
Shawn Williams
@Shawn-Williams
Jun 23 2016 23:27
Good evening all!
flindip
@flindip
Jun 23 2016 23:27
@wearenotgroot I'm guessing though some folks hate hoisting?
greg
@wearenotgroot
Jun 23 2016 23:28
@flindip well it just hard to look where things are if variables and function are spread around
Shawn Williams
@Shawn-Williams
Jun 23 2016 23:28
I am in the process of finishing my weather app and am having a bit of trouble with my button functionality to change from Celcius to Fahrenheit.
greg
@wearenotgroot
Jun 23 2016 23:29
@flindip ima delete that wall of code
Shawn Williams
@Shawn-Williams
Jun 23 2016 23:29
I have tried several variations of if/else to test the html content of the span holding the temperature, but to no evail. The button triggers the first change, but then when I click the button again, nothing happens.
flindip
@flindip
Jun 23 2016 23:29
@wearenotgroot yeah, I can see that. Go for it. I think my JS code is at least workable now? I can fine tune it at this point?
Shawn Williams
@Shawn-Williams
Jun 23 2016 23:30
This is my last iteration
greg
@wearenotgroot
Jun 23 2016 23:30
@flindip :+1:
flindip
@flindip
Jun 23 2016 23:30
@wearenotgroot oh thank god...I was at this all day...
CamperBot
@camperbot
Jun 23 2016 23:30
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave wearenotgroot points
greg
@wearenotgroot
Jun 23 2016 23:30
@Shawn-Williams link your pen?