These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Jul 2016
Toni Shortsleeve
@KoniKodes
Jul 08 2016 00:00
Hello. I've got a couple of issues with the twitch api. Can some one help me get the actual site that I need to grab the offline info? Then maybe I can start to make this work... My code is at: https://codepen.io/KoniKodes/full/NAvLVO
kayzon
@quezanw
Jul 08 2016 00:22
How come when i enter this code I get this object instead of one with the weather data?
  $.getJSON("http://ip-api.com/json", function (loc) {
    console.log(loc);
  });
Jonathan Basulto
@JohnBasulto98
Jul 08 2016 00:22
how do i get a image to be in the center of the page
Toni Shortsleeve
@KoniKodes
Jul 08 2016 00:27
@quezanw I think that it hasn't been parsed yet, so json sees it as an object.
@JohnBasulto98 place it in a div and class it as "pull-center"? Or see if you can margin:0 auto the image in css.
Islam Ibakaev
@dagman
Jul 08 2016 00:30
@JohnBasulto98 use absolute positioning
Tyler Moeller
@TylerMoeller
Jul 08 2016 00:35
@KoniKodes It's https://api.twitch.tv/kraken/channels/<user> and https://api.twitch.tv/kraken/streams/<user>. stream will be null if they're offline.
kayzon
@quezanw
Jul 08 2016 00:36
I tried this and it doesn't seem to help? Maybe im not understanding how API's and JSON work. Does anyone have resources they looked at to help supplement the learning for the weather app?
 $.getJSON("http://ip-api.com/json", function (loc) {
   console.log(JSON.parse(loc));
  });
Tyler Moeller
@TylerMoeller
Jul 08 2016 00:46
@quezanw That URL will only get the location of the user based on their IP Address. To see the info, just do console.log(loc) and check the console. No need for JSON.parse(). Since you're starting out, I'd recommend using Weather Underground for getting your weather. With that API, you can get the user's location and the weather for their location all in one API call.
Jonathan Basulto
@JohnBasulto98
Jul 08 2016 00:46
how do i modify the background color?
Tyler Moeller
@TylerMoeller
Jul 08 2016 00:47
@JohnBasulto98 what have you tried that isn't working?
Here's more info in case it helps: http://www.w3schools.com/css/css_background.asp
Jonathan Basulto
@JohnBasulto98
Jul 08 2016 00:49
@TylerMoeller thx for the help
CamperBot
@camperbot
Jul 08 2016 00:49
johnbasulto98 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 648 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Steven Foster
@Rockchalk8985
Jul 08 2016 01:15
Help. I'm having an issue trying to get my buttons to link out to my webpages from codepen.
CamperBot
@camperbot
Jul 08 2016 01:15
no wiki entry for: im having an issue trying to get my buttons to link out to my webpages from codepen
Hristijan Gjorgjievski
@hristijankiko
Jul 08 2016 01:18
@Rockchalk8985 You have to put the <a tag outside the button
<a href="https://www.linkedin.com/nhome/" target="_blank"><button type="button" class="btn btn-primary">LinkedIn</a></button>
@Rockchalk8985 <a href=""> <button></button> </a>
Steven Foster
@Rockchalk8985
Jul 08 2016 01:25
@hristijankiko thank you sir
CamperBot
@camperbot
Jul 08 2016 01:25
rockchalk8985 sends brownie points to @hristijankiko :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @hristijankiko |http://www.freecodecamp.com/hristijankiko
Jacob Stewart
@JacobStewart1
Jul 08 2016 01:40

hey im having trouble on the palindrome challenge my code is function palindrome(str) {
var i = str.toLowerCase().replace(/\w--.," "/, '');
if (i.split('').reverse().join('') == str) {
return true;
} else {
return false;
}

} and i cant get it to work can anybody help me?

Justin
@jhadams82
Jul 08 2016 01:40
@ewathedoer you still in here?
markhmwong
@markhmwong
Jul 08 2016 01:42
[]
Justin
@jhadams82
Jul 08 2016 01:43
Ok, now I don't even know if my code is actually broken or if it's just my computer! i need somebody to try my wikireader and tell me if it works
when you type in a seach and hit enter or click the button, the results should show up one at a time AND they should FADE IN, too. for me, they're showing up one at a time, but NOT fading in.
weird thing is earlier today somebody told me it was working just fine for them.
...is there really 5,280 people in here? that's the exact number of feet in a mile
i might need to go about this a very different way...
mcorby17
@mcorby17
Jul 08 2016 01:56
Hey guys so i'm trying to work on my .row positioning in my Twitch app to make it look like the example... I have the username and Stream title positioning correctly for the streaming accounts but they don't align properly for a medium screen. I'd also like the user picture to be all the way to the left like the nonstreamers. Thanks! http://codepen.io/mcorby17/pen/vKydNE?editors=0010
As in they position correctly for small screens
Also, I'd like to know how they switch content based on screen size... In the example the stream name is shortened a lot, which I assume is from part of the API call, but how do I switch what is already on my page with something new depending on the size of the page?
Ken Haduch
@khaduch
Jul 08 2016 02:08
@jhadams82 - I think that I looked at your site earlier - it was not fading in each entry, but they were coming up with a delay between each entry being posted? Now it looks like it just blasted them all onto the screen...
Zachary Gerard
@Trayuk
Jul 08 2016 02:32
Looking for thoughts design wise on my tribute page, i am not 100% happy with all of the fonts, i need to find a font for my h5 elements as well as either make my ul elements font larger or find a different one. Please let me know what you think or if you see any other design issues. please ignore spelling issues, i have not edited this yet. Thanks in advance. http://codepen.io/Trayuk/pen/pbwBPq
Ashton
@ashtongreen
Jul 08 2016 02:42
I'm working on the tribute page, and I'm not sure I understand the rules fully. Is there a place where I can check for the objectives?
Chris Rutherford
@cjrutherford
Jul 08 2016 02:45
just curious.... is this a valid call to an API to work with the JSON data that comes back? weatherObject = $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long);
Justin
@jhadams82
Jul 08 2016 02:48
@khaduch yeah, i'm trying different methods to get it to fadein. i abandoned the setInterval method and just tried to fade them all in at once. something is blocking the fadeIn function no matter what
do i need to include something like an animation library? why would fadeIn be blocked or not working? i've searched stack overflow and there's a million answers to that question =/
Ken Haduch
@khaduch
Jul 08 2016 02:52
@jhadams82 - I haven't tried it. I could see what I can find, I'm curious about it (thinking that I would want to try it sometime...)
Justin
@jhadams82
Jul 08 2016 02:53
yeah, you can see all the different ways i tried to get it to work in my code. all the other ways are still in there, just commented out
none of them work
Ken Haduch
@khaduch
Jul 08 2016 02:57
@jhadams82 - well, their example works great... :) I wonder if it has to be with an element that already exists on the page. I set up their example in this pen - you just click where it says "click here" and it fades in each div in succession with each click.
Chris Rutherford
@cjrutherford
Jul 08 2016 03:00
okay, so I no longer think that my code is failing along the lines of the API call.... I think I'm having issues getting location data from the browser.
window.onLoad()
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){lat = position.coords.latitude; alert(lat); long= position.coords.longitude; alert(long);});
  }else {
    cname = prompt("What is your Current City?");
  }
I initially wanted to alert out the variables, but nothing ever came up.....
Justin
@jhadams82
Jul 08 2016 03:00
i think i'm gonna start over and try a whole other algorithm. might make more sense to append them all, but hide them. then, once the whole list is complete, THEN start fading them in one by one. @khaduch
Ken Haduch
@khaduch
Jul 08 2016 03:01
@cjrutherford - are you seeing anything in your developer console? If you're using Chrome, location requires https, but you probably already have learned about that from here...
Chris Rutherford
@cjrutherford
Jul 08 2016 03:01
I'm not seeing any error in my console. Feel free to look along with me
http://codepen.io/christopherrutherford/pen/YWxNJz?editors=1111
and apparently onLoad isn't a function according to the console....
Ken Haduch
@khaduch
Jul 08 2016 03:03
@cjrutherford - in the browser console, it is reporting pen.js:5 Uncaught TypeError: window.onLoad is not a function window.onload() - not sure how that is used...
Randy Goldsmith
@Dueldrawer8
Jul 08 2016 03:03
how do i get my footer to be at the bottom of my portfolio page?
https://github.com/Dueldrawer8
Chris Rutherford
@cjrutherford
Jul 08 2016 03:04
@khaduch it's onload, not onLoad.... typo
Ken Haduch
@khaduch
Jul 08 2016 03:04

@cjrutherford - the MDN docs say this:

window.onload = function() {
  init();
  doSomethingElse();
};

as an example of how to use that.

Randy Goldsmith
@Dueldrawer8
Jul 08 2016 03:04
whenever you hit full page view, the footer seems to scoot up right underneath the sections section in my html
Chris Rutherford
@cjrutherford
Jul 08 2016 03:05
@khaduch hmmmm... okay! I'll try that
Toni Shortsleeve
@KoniKodes
Jul 08 2016 03:07
@TylerMoeller Thank you so much! I will try that.
CamperBot
@camperbot
Jul 08 2016 03:07
konikodes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 650 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Chris Rutherford
@cjrutherford
Jul 08 2016 03:07
@khaduch okay! so I'm getting coordinates now instead of a big steaming pile of nothing.
now to move on to parsing the data into what I need! Thanks!!!!
CamperBot
@camperbot
Jul 08 2016 03:07
cjrutherford sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1415 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jul 08 2016 03:07
@cjrutherford - cool!
Tyler Moeller
@TylerMoeller
Jul 08 2016 03:09
@KoniKodes hope it helps - I found a
Toni Shortsleeve
@KoniKodes
Jul 08 2016 03:11
@TylerMoeller Yes, I've been going crazy with undefined of null. I knew it had something to do with the url call, but I got confused as to what to call for who...
Goodnight all, time for dinner...
Danial
@danietzio
Jul 08 2016 03:18
hi
How can i draw line between two paragraph's in about section in project https://codepen.io/FreeCodeCamp/full/YqLyXB/.
Ken Haduch
@khaduch
Jul 08 2016 03:35
@jhadams82 - this stackoverflow link gives something that works. I added to my example pen where I am creating 10 divs on the fly, and they are all fading in using that same technique. It doesn't fade them in in a sequence, but I coould probably work up something with setInterval to do it that way? But basically the technique works, it is something that you have to do in a specific way...
Faisal Zulfiqar
@faisal1337
Jul 08 2016 03:36

I am on JS[230] and I coded this "The function should check if firstName is an actual contact's firstName and the given property (prop) is a property of that contact." as

for (var i = 0; i < 4; i++) {
if (contacts[i].hasOwnProperty(firstName) && contacts[i].hasOwnProperty(prop)) {
return firstName.prop;
}
}

Ken Haduch
@khaduch
Jul 08 2016 03:39
@faisal1337 - you cannot return firstName.prop for the main reason being that firstName is not an object, you have to refer to contacts[i], and you cannot use .prop to access the property because prop is a variable, so you have to use bracket notation instead of dot notation. contacts[i][prop] would get you the property for the contact that you've matched.
Ken Haduch
@khaduch
Jul 08 2016 03:46
@faisal1337 - one more thing that should be helpful - you do not want to have a hardcoded 4 in your for loop condition - it will work in this case, but basically you want to use contacts.length because if the length of the array of contacts changes, it would automatically use the new length.
khaduch @khaduch - signing off for the night...
Can anyone explain why the countdown can't display "00" for the seconds when the clock reaches zero seconds (e.g. 11:00 etc.)?
LordYamanouchi
@LordYamanouchi
Jul 08 2016 04:40
Does anyone know where I can learn to make landing panels?
Allie Serd
@allieserd
Jul 08 2016 04:57
i just started this freecodecamp thing - here is my first project - https://codepen.io/allieserd/pen/wWqxaB
I feel like I got the basics down but need help with the styling
they said not to go back and look at the example's project code and to figure it out myself but i feel stuck.
Adam Lichter
@spot1000
Jul 08 2016 04:59
@allieserd Looks like some good bones there, I suggest checking out some bootstrap things.
and just play around with the CSS a little bit, see what does what
Allie Serd
@allieserd
Jul 08 2016 05:03
okay so read up on bootstrap a bit - how do i call for a class in my css? i forget.
Adam Lichter
@spot1000
Jul 08 2016 05:03
.class {
modifier: value
}
if you want to call an element (like h1 or p) it's just
element {
}
and id is

id

id with no space

sigh
hashtag infront of id
Allie Serd
@allieserd
Jul 08 2016 05:12
Got it.
I will work on it tomorrow. Glad I got some good bones thou! Thanks @spot1000
CamperBot
@camperbot
Jul 08 2016 05:13
allieserd sends brownie points to @spot1000 :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @spot1000 |http://www.freecodecamp.com/spot1000
Mathew Joseph
@MathewtheCoder
Jul 08 2016 05:44
Hello guys i want to make my page wait till all records are pulled by getJson
is there any way to do that
Anthony
@digitalsoba
Jul 08 2016 06:10
Hey everyone. Just wondering about the container-fluid class. Do I need to wrap that div class around my entire <body> or do I do it with every div element I use
Konstantin
@kostanakis
Jul 08 2016 06:13
Hello, guys. I'm a crab. http://codepen.io/kostanakis/pen/vKkZKa
Anybody knows why header and content divs are not of the same width?
buiphuking
@buiphuking
Jul 08 2016 06:18
someone plz explain me
linearRampToValueAtTime in audio context api , what is this thing use for ????/
kirbyedy
@kirbyedy
Jul 08 2016 06:22
@kostanakis I am not familiar with sass, but I am looking through your code, and see that width has different colour than the rest of the atributes in codepen
in the header it shows normally
is there maybe a mistake in sass atributes ?
@kostanakis check the image and compare the width attributes in the header and content, they are different in colour for some reason, which makes me think there is an error with it
Screen Shot 2016-07-08 at 09.24.57.png
Konstantin
@kostanakis
Jul 08 2016 06:27
@kirbyedy thx, I'll check it)
CamperBot
@camperbot
Jul 08 2016 06:27
kostanakis sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1199 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:06
hello guys
Sorin Ruse
@sorinr
Jul 08 2016 09:07
@Hoxtygen hi
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:07
pls i have a question on bootstrap
hello @sorinr
Sorin Ruse
@sorinr
Jul 08 2016 09:07
@Hoxtygen go on and ask
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:09
@sorinr i was working on creating a portfolio page for myself so i made a nav bar and the main content.... but i noticed the header hides behind the navbar thus hiding it from view if i dont add the class jumbotron
@sorinr is this normal?
Sorin Ruse
@sorinr
Jul 08 2016 09:10
@Hoxtygen can you post the link to your pen?
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:10
@sorinr but once i add the class jumbotron the header comes to view
@sorinr i'm currently working it offline. its not on my pen yet
@sorinr i have bootstrap downloaded locally because i cant be online all the time
@sorinr i we have serious power issues here
Sorin Ruse
@sorinr
Jul 08 2016 09:12
@Hoxtygen ok. got it. so the header hides behind navbar when u scroll down?
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:13
@sorinr even before scrolling down.......
the doer
@ewathedoer
Jul 08 2016 09:14
I am now @jhadams82 :)
Sorin Ruse
@sorinr
Jul 08 2016 09:14
@Hoxtygen your page structure should be something like <nav></nav><main></main><footer></footer>
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:16
@sorinr thanks, will try that
CamperBot
@camperbot
Jul 08 2016 09:16
:cookie: 436 | @sorinr |http://www.freecodecamp.com/sorinr
hoxtygen sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:18
@sorinr heres how its arranged .. <nav></nav><body></body><footer></footer>
Sorin Ruse
@sorinr
Jul 08 2016 09:21
@Hoxtygen nav should be within the body
Idowu Wasiu
@Hoxtygen
Jul 08 2016 09:22
@sorinr was thinking the same too..... will try it and see what happens
Sorin Ruse
@sorinr
Jul 08 2016 09:23
@Hoxtygen so it will be like <body><nav></nav><main></main><footer></footer></body>
DaurenD
@DaurenD
Jul 08 2016 09:39
hello everyone! I'm trying to complete "Show the Local Weather" challenge. I know how to retrieve location from browser navigation object, but my code couldn't get data inside codepen site. On the other hand(I'm using Chrome), when I open new tab, and writing code in console. Everything works fine. What settings I have to provide my code/browser?
Marco Mazzeo
@Doko85
Jul 08 2016 09:42
ehy guys, I need to interact with the wikipedia api but I don't know where to look for the json structure... I don't know what indexes or parameters I have to call out from the json file.... any clue?
kirbyedy
@kirbyedy
Jul 08 2016 09:44
@DaurenD your console:
Screen Shot 2016-07-08 at 12.44.08.png
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 09:44
@DaurenD if you're using chrome, they require you to be on https to request the user location, but once you're on https you can no longer request data from an http source because it's insecure ( a recent update to chrome "/). I'm using a proxy to route the api through so chrome thinks it's coming from a secure source,
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 09:46
course now I'm struggling to error catch if the user happens to be using http "/
Kevin
@KevinBruland
Jul 08 2016 09:48
@FreyaRhianna which weather API are you using?
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 09:49
the recommended one, openweathermap
Kevin
@KevinBruland
Jul 08 2016 09:49
ah, OK. I personally switched to wunderground when I came accross that issue.
Sorin Ruse
@sorinr
Jul 08 2016 09:50
@DaurenD one of the solutions is to make the call to the weather api through https://crossorigin.me/
Kevin
@KevinBruland
Jul 08 2016 09:50
they have built in geolocation in the API, so it does not require redirects or using https for the codepen link
Sorin Ruse
@sorinr
Jul 08 2016 09:51
@Benalron great. by the time i was needed the api they don't even had https
DaurenD
@DaurenD
Jul 08 2016 09:51
@FreyaRhianna @kirbyedy @sorinr Thanks you guys. I'll try all options
CamperBot
@camperbot
Jul 08 2016 09:51
daurend sends brownie points to @freyarhianna and @kirbyedy and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 267 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
:star2: 1200 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 09:52
@Benalron oooh, that might be a better solution for me. If I don't have to worry about the users browser certificate, I won't have to bother error catching it
thanks @Benalron
CamperBot
@camperbot
Jul 08 2016 09:52
freyarhianna sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @benalron |http://www.freecodecamp.com/benalron
deepakSpatil
@deepakSpatil
Jul 08 2016 09:53

Adjust height of g element in SVG as per parent

In css the SVG has hegiht and width as 100%;

but my svg g element is getting out of the div

here is the codepen

Kevin
@KevinBruland
Jul 08 2016 09:53
@FreyaRhianna yeah, im sure there are other ways... but it worked well for me
@FreyaRhianna only issue is the wunderground limits to like 10 API calls a minute, so I would recommend setting codepen to not auto update and manually hit run
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 09:56
Will do! I'm going to have a bit more of a poke around for solutions to the browser issue, just because it annoys me that I can't find a way :P, but I might switch api.
Kevin
@KevinBruland
Jul 08 2016 09:57
anyone by chance familiar with the advanced algorithms? Not having much luck in the Javascript channel
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 10:08
ah jeez xD If anyone else is reading that experienced the problem I had, navigator.geolocation.getCurrentPosition (which is what chrome has depreciated for http) has a second callback capability for errors. That only took up several hours of my life.
DaurenD
@DaurenD
Jul 08 2016 10:22
jees I just needed to add 'https' at my url xD
Greg Duncan
@GregatGit
Jul 08 2016 10:26
@FreyaRhianna you can use http://ip-api.com/json to get the lat and long and still keep the pen http
Freya Sheer Hardwick
@FreyaRhianna
Jul 08 2016 10:29
@GregatGit That would have probably been more efficient. I've error trapped everything now so it's working well in chrome, but using that might have taken less code "/. I might come back to it later and see what I can do with it.
thanks @GregatGit
CamperBot
@camperbot
Jul 08 2016 10:29
freyarhianna sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 667 | @gregatgit |http://www.freecodecamp.com/gregatgit
Marco Mazzeo
@Doko85
Jul 08 2016 10:33
anybody here uses firefox?
Henrique Salguero
@kikosalguero
Jul 08 2016 10:37
Hello guys, im trying to make my site responsive on it height proprities. Its a simple site, few elements, and i want it to "adapt" to the disponible height. Its possible to do that? Where is the link in Codepen: https://codepen.io/kikosalguero/pen/wWqmEo
Kevin
@KevinBruland
Jul 08 2016 10:38
@kikosalguero theres a bunch of ways to do that, so there is not really a single answer... in what aspects do you want it responsive vertically?
Henrique Salguero
@kikosalguero
Jul 08 2016 10:39
@Benalron I want that the Jumbotron DIV to get the avaliable height
Kevin
@KevinBruland
Jul 08 2016 10:40
@kikosalguero you mean that its pushed down on a mobile screen?
@kikosalguero do you want it to not be pushed down?
Henrique Salguero
@kikosalguero
Jul 08 2016 10:43
i mean make the site adaptable and you dont need scroll down in any device
Yes, not pushed down
Kevin
@KevinBruland
Jul 08 2016 10:43
@kikosalguero theres a few ways to do that, you currently have padding as 250px for the jumbotron on the top... which is using a hard number
you can change that to a %, or you can use "vh", which is visual height
like padding-top: 20vh;
you can use VH and % for stuff, such as changing height to 100vh instead of 100%.
Marco Mazzeo
@Doko85
Jul 08 2016 10:46
can you guys tell me why when I reduce the zoom % the logos icons change of position? http://codepen.io/doko/full/gMPWjq/
Kevin
@KevinBruland
Jul 08 2016 10:47
if stuff starts to overflow out of it, you can use media queries to change the font size at smaller screen sizes
Henrique Salguero
@kikosalguero
Jul 08 2016 10:47
Ok, i will try that vh... thanks @Benalron !
CamperBot
@camperbot
Jul 08 2016 10:47
kikosalguero sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @benalron |http://www.freecodecamp.com/benalron
Kevin
@KevinBruland
Jul 08 2016 10:48
@Doko85 which logos? I am not seeing any moving
Marco Mazzeo
@Doko85
Jul 08 2016 10:49
the footer ones
the font-awesome icons switch out of position
Kevin
@KevinBruland
Jul 08 2016 10:50
odd, it's not doing that for me... theyre remaining in place
what browser are you using?
Marco Mazzeo
@Doko85
Jul 08 2016 10:50
it's happening on both chrome and firefox to me
I'm referring to the inner icons, not the circles
Kevin
@KevinBruland
Jul 08 2016 10:52
everything looks good to me, im not sure
Marco Mazzeo
@Doko85
Jul 08 2016 10:53
ok... thanks tho @Benalron
CamperBot
@camperbot
Jul 08 2016 10:53
doko85 sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @benalron |http://www.freecodecamp.com/benalron
Cristhian Huertos
@mizhac
Jul 08 2016 10:58
@kikosalguero is possible use vh, but use javascript to detect variations of measurement ;) for every elements. For example you can use jquery to get height and witdh : http://api.jquery.com/category/css/ is this documentation. Or use pure javascript; var width = document.getElementById('ID').offsetWidth; var height= document.getElementById('foo').offsetHeight;
Marco Mazzeo
@Doko85
Jul 08 2016 11:02
damn.. why doesn't the weather app work on my host but it does on codepen? O_o
James Hancock
@jhancock532
Jul 08 2016 11:03
I've been doing some searching, looking for a good quote api for my quote website. The best I've found is this advice website, http://api.adviceslip.com/ which returns a random piece of advice rather neatly. Does anyone here know of any quote websites which function similarly? I've been looking at wikiquote but don't understand it at all.
Tsara Fatma L
@tsara27
Jul 08 2016 11:05
@Doko85 It might be caused by the url request.
Try to access codepen using http:// not https://
Marco Mazzeo
@Doko85
Jul 08 2016 11:05
uhm?
it works on codepen
I'm just trying to make it work on my host
Tsara Fatma L
@tsara27
Jul 08 2016 11:06
Oh I see.
as you can see, the values are not showing
Tsara Fatma L
@tsara27
Jul 08 2016 11:06
What OS that you use>?
There's an error with your code.
Marco Mazzeo
@Doko85
Jul 08 2016 11:07
on the host? I suppose linux... I suppose... it's a free host, I didn't even bother reading the whole info parts since I won't install any script
which error?
Cristhian Huertos
@mizhac
Jul 08 2016 11:08
This message was deleted
Tsara Fatma L
@tsara27
Jul 08 2016 11:08
It should be like this.
$('#flip-menu').menuFlip({
        li_height       : '20px', 
        flip_speed      : 250,
        flipped_class   : 'flipped_item', 
        mouseover       : function() {}, 
        mouseout        : function() {}
    });
});
You forgot to add );
On the last line of the code..
Marco Mazzeo
@Doko85
Jul 08 2016 11:08
but the random quote generator app works
Tsara Fatma L
@tsara27
Jul 08 2016 11:09
And... You forgot the coma.
On flip speed.
James Hancock
@jhancock532
Jul 08 2016 11:09
speaking of random quote generator apps...
Marco Mazzeo
@Doko85
Jul 08 2016 11:09
I don't have that code on my app.js tho
Tsara Fatma L
@tsara27
Jul 08 2016 11:09
Weird.
It should be on your host somewhere.
Marco Mazzeo
@Doko85
Jul 08 2016 11:10
you can read the js code here http://codepen.io/doko/pen/gMPWjq
Tsara Fatma L
@tsara27
Jul 08 2016 11:13
app.js causes the error @Doko85
Marco Mazzeo
@Doko85
Jul 08 2016 11:15
wow
it was referring to a different file
because I linked it to /scripts/app.js and not scripts/app,js
I thought it was the same but it's not
so it was referring to the parent /scripts folder
Tsara Fatma L
@tsara27
Jul 08 2016 11:20
Is it working now?
Marco Mazzeo
@Doko85
Jul 08 2016 11:21
yup
Tsara Fatma L
@tsara27
Jul 08 2016 11:21
Nice!
Marco Mazzeo
@Doko85
Jul 08 2016 11:23
off to lunch, I'll be back later to ask tips about the wikipedia api
Tsara Fatma L
@tsara27
Jul 08 2016 11:23
Have a nice lunch @Doko85!
Marco Mazzeo
@Doko85
Jul 08 2016 11:23
thanks @tsara27
CamperBot
@camperbot
Jul 08 2016 11:23
doko85 sends brownie points to @tsara27 :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @tsara27 |http://www.freecodecamp.com/tsara27
Tsara Fatma L
@tsara27
Jul 08 2016 11:24
You're welcome.
James Hancock
@jhancock532
Jul 08 2016 11:24
Problem solved. check out Quotes on design
matt li
@mattliye
Jul 08 2016 11:27
hi guys
I serious clueless why this isn't working
```

$(document).ready(function(){
var long;
var lat;

//get current location
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
long=position.coords.longitude;
lat=position.coords.latitude;
$("#temp").html("longitude:"+long + "<br/>latitude:" +lat);

var api="http://api.openweathermap.org/data/2.5/weather?lat="+lat+ "&lon="+long+"&appid=f8ecbfc1ae5c16b110f09eeea17e7fd6";

$.getJSON(api, function(data){

  var weatherType=data.weather[0].description;
  var city=data.name;
  console.log(city);

});

});
}

});

$(document).ready(function(){
  var long;
  var lat;

  //get current location
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      long=position.coords.longitude;
      lat=position.coords.latitude;
      $("#temp").html("longitude:"+long + "<br/>latitude:" +lat);

    var api="http://api.openweathermap.org/data/2.5/weather?lat="+lat+ "&lon="+long+"&appid=f8ecbfc1ae5c16b110f09eeea17e7fd6";

    $.getJSON(api, function(data){

      var weatherType=data.weather[0].description;
      var city=data.name;
      console.log(city);

    });

  });
}


});
console.log is not showing my city name
Tsara Fatma L
@tsara27
Jul 08 2016 11:30
@mattliye How if you console.log(data);?
Is city attribute is shown there?
Let's debug this. :)
matt li
@mattliye
Jul 08 2016 11:31
city=data.name
the name attribute is there
Tsara Fatma L
@tsara27
Jul 08 2016 11:32
What is shown on your console log?
matt li
@mattliye
Jul 08 2016 11:33
weird thing is that if I do console.log(data) still wont show anything
not a thing is showing in my console
Tsara Fatma L
@tsara27
Jul 08 2016 11:33
How if you use $.get instead of $.getJSON?
matt li
@mattliye
Jul 08 2016 11:34
let me try
no luck, man
Tsara Fatma L
@tsara27
Jul 08 2016 11:36
Wait
$.get(api).done(function(data) {
      var weatherType=data.weather[0].description;
      var city=data.name;
      console.log(city);
});
Try that.
matt li
@mattliye
Jul 08 2016 11:39
no luck neither hehe
Tsara Fatma L
@tsara27
Jul 08 2016 11:39
:worried: Haha
Marc Vesper
@marcvesper
Jul 08 2016 11:40
navigator.geolocatin doesn't work in chrome, btw. have to do something else, such as call an external locator like IP-API.com
matt li
@mattliye
Jul 08 2016 11:42
```
 navigator.geolocation.getCurrentPosition(function(position){
      long=position.coords.longitude;
      lat=position.coords.latitude;
      console.log(lat);
if I do the above, the console.log(lat) shows my latitude though
does it mean navigator.geolocation works here?
@marcvesper
Marc Vesper
@marcvesper
Jul 08 2016 11:43
yep
was just a fyi, hadn't followed the whole thing sorry :)
matt li
@mattliye
Jul 08 2016 11:44
I am stuck in here for two days now
the doer
@ewathedoer
Jul 08 2016 11:46
How to put “or” from the 1st modal in the middle? http://theonewhodo.es/tictactoe/
I tried line-height and various displays but can’t figure it out
Greg Duncan
@GregatGit
Jul 08 2016 11:52
@mattliye geolocation works in chrome if you are using https - but not http - however the free openweather api are http so they will not work with https. So if you want to use openweather weather in chrome you can use http://ip-api.com/json to get your lat and long
Nicolas May
@hynso
Jul 08 2016 11:52
What am I doing wrong in the createTableBody function? http://codepen.io/hynso/pen/YWxzJP?editors=1010
matt li
@mattliye
Jul 08 2016 11:54
@GregatGit you save my life!!!
Marco Mazzeo
@Doko85
Jul 08 2016 11:59
so, as I asked before, I need to interact with the wikipedia API but I can't seem to find the structure of the json file in order to understand which parameter to call out on my js app , any clue?
the doer
@ewathedoer
Jul 08 2016 12:10
Do I need to use normalize.css or sth simillar when I use bootstrap?
rohan5
@rohan5
Jul 08 2016 12:11
hi. i am stuck on Simon game for 2 days . other features are working fine and i am stuck on reset option.also others things are working fine but not sure i did correctly or not.can anybody check please
http://codepen.io/rohan5/pen/kXwokm
Tomáš Kalný
@Sleepy-guy
Jul 08 2016 12:30
http://codepen.io/Sleepy-guy/pen/vKJBYd?editors=1010 Don't you know why i get error $('#temp').hasClass() is not a function ?
Marco Mazzeo
@Doko85
Jul 08 2016 12:30
anybody can help me with my problem about the wikipedia API?
shakedt
@shakedt
Jul 08 2016 12:31
?
Marco Mazzeo
@Doko85
Jul 08 2016 12:31
so, as I asked before, I need to interact with the wikipedia API but I can't seem to find the structure of the json file in order to understand which parameter to call out on my js app , any clue?
shakedt
@shakedt
Jul 08 2016 12:32
@Doko85 i had some issues before as well ... i had to use ajax, the link i used is this one
@Doko85 go to the provided send box and try an ajax request with query and gsr search, if you want i can give you my code example if not you can work on it a bit longer i think ajax is the way to go here
Marco Mazzeo
@Doko85
Jul 08 2016 12:34
I know but what I mean is: when I created the weather app I found on the openweather website the json structure so I could find which parameter to call out and how, now I'm clueless
like... where is the wikipedia entry title located? and the description? and any other feature?
this is what I mean
shakedt
@shakedt
Jul 08 2016 12:35
@Doko85 in the challnge there are the links to read for the wiki api , the wik api is a lot more weird i guess becouse it has a lot more requests.
when doing a request you get back ajsonp object which you can then turn to json and get somthing called pages
this pages has title description etc
there is also a search or gsrsearch depands on what you use
Marco Mazzeo
@Doko85
Jul 08 2016 12:36
you are speaking arabian to me lol I never converted a jsonp file to json
shakedt
@shakedt
Jul 08 2016 12:36
xD
sec will you like to see my code ? read it and try to understand from there
that's how i done this challnge as well
Marco Mazzeo
@Doko85
Jul 08 2016 12:37
ok
shakedt
@shakedt
Jul 08 2016 12:37
give me asec
here it is
sorry about that i don
t
understand it well enough to explain it correctly
but it works
you can use the same concepts from there
rohan5
@rohan5
Jul 08 2016 12:40
@Doko85 use this link https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm (also given in challenge)
In main(on left) select option as opensearch. thenm in search put some string like earth. and click on make request(on top).you will get the json structure.
Marco Mazzeo
@Doko85
Jul 08 2016 12:43
thanks, just a question cause I've been out of these things for two weeks and my mind fails me
the result object is indexed this way, right? : query is [0], results are 0, descriptions are 0 and urls are [0][3]
0 1, 0 2 ^
rohan5
@rohan5
Jul 08 2016 12:51
results are data[1][0],data[1][1]... description are [2][0]...and url [3][0]...
Marco Mazzeo
@Doko85
Jul 08 2016 12:57
thanks @rohan5
CamperBot
@camperbot
Jul 08 2016 12:57
doko85 sends brownie points to @rohan5 :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @rohan5 |http://www.freecodecamp.com/rohan5
gitgenie
@gitgenie
Jul 08 2016 13:37
hey campers! please provide your comments http://codepen.io/gitginie/pen/rLzPAZ
mcorby17
@mcorby17
Jul 08 2016 13:40
@gitgenie That looks really great! I like it :)
gitgenie
@gitgenie
Jul 08 2016 13:41
@mcorby17 thanks :smile:
CamperBot
@camperbot
Jul 08 2016 13:41
gitgenie sends brownie points to @mcorby17 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @mcorby17 |http://www.freecodecamp.com/mcorby17
Dana Ni
@danani
Jul 08 2016 13:50
Help! I need your opinion. :) https://codepen.io/DanaNi/pen/KrvgyA
CamperBot
@camperbot
Jul 08 2016 13:50
no wiki entry for: i need your opinion httpscodepeniodananipenkrvgya
Marco Mazzeo
@Doko85
Jul 08 2016 13:52
@gitgenie I would change the quotes font tho
the whole project design is kinda elegant, the quotes font is "a funny one"
I used that font myself but my design was coloured
gitgenie
@gitgenie
Jul 08 2016 14:00
@Doko85 thanks , I shall experiment with other fonts
CamperBot
@camperbot
Jul 08 2016 14:00
gitgenie sends brownie points to @doko85 :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @doko85 |http://www.freecodecamp.com/doko85
Ken Haduch
@khaduch
Jul 08 2016 14:01
@danani - I think that it looks great - very professionally done! One thing that I noticed - in your Video Tribute with the Google Doodle - you have "Don't stop me know", should be "now"... minor thing. Very nice page!
Dana Ni
@danani
Jul 08 2016 14:02
@khaduch Oh! Spotted! Thanks, a lot!
CamperBot
@camperbot
Jul 08 2016 14:02
danani sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1416 | @khaduch |http://www.freecodecamp.com/khaduch
rohan5
@rohan5
Jul 08 2016 14:05
hi. i am stuck on Simon game for 2 days . I am stuck on reset option. Also, others things are working fine but not sure if i did them correct way .Can anyone check please.
Reset button crashes the game.
http://codepen.io/rohan5/pen/kXwokm
Ken Haduch
@khaduch
Jul 08 2016 14:08
@gitgenie - I like your page. One thing that you might consider is truncating the longer quotes that would exceed the twitter limit? Do your quotes have author citations? That would be a good thing to display on the page, as well? I liked this random quote that came up: "Writing the first 90 percent of a computer program takes 90 percent of the time. The remaining ten percent also takes 90 percent of the time and the final touches also take 90 percent of the time." - how true!
gitgenie
@gitgenie
Jul 08 2016 14:10
@khaduch many thanks for your comments. I forgot about 140 char limit of the twitter. Thanks for bringing it to my notice :+1:
CamperBot
@camperbot
Jul 08 2016 14:10
gitgenie sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1417 | @khaduch |http://www.freecodecamp.com/khaduch
elizabeth awino
@beth6
Jul 08 2016 14:15
Hello gays?
Beau Carnes
@beaucarnes
Jul 08 2016 14:22
I am having a problem with the scope of variables. Can someone check out my pen and tell me what I am doing wrong? I put a comment in the JS to show where I am having the issue. http://codepen.io/beaucarnes/pen/YWAPNw
Adetunji Iyaniwura
@Iadetunji
Jul 08 2016 14:23
can anyone help with the random quote machine challenge ?
Beau Carnes
@beaucarnes
Jul 08 2016 14:24
What do you need help with for random quote machine? @Iadetunji
Hadouken
@Harry97
Jul 08 2016 14:25
http://codepen.io/Hadouken/pen/akwEvo Guys, How can I obtain input from the search field ?
Matthew Bailin
@mdbailin
Jul 08 2016 14:28
@Harry97 var nameField = document.getElementById('nameField').value;
Give your text box an id and define a button that, on click, will create a var nameField containing the value of your field
then you can use the value of your field as needed :)
Adetunji Iyaniwura
@Iadetunji
Jul 08 2016 14:31
@beaucarnes , i have messaged you
Hadouken
@Harry97
Jul 08 2016 14:32
@mdbailin If I were to use your method then I wouldn't be in a need for forms, right ?
I'd create a button that clears the input field and stores whatever was written in the search field in a variable.
Matthew Bailin
@mdbailin
Jul 08 2016 14:34
@Harry97 You can keep your text box
Give your text box an id and have JS grab the value contained in the textbox on click
That's it really
Adetunji Iyaniwura
@Iadetunji
Jul 08 2016 14:36
can anyone help with the button functions in the random quote machine challenge
Hadouken
@Harry97
Jul 08 2016 14:36
@mdbailin Ok, man. I'mma give it a try, thanks!
CamperBot
@camperbot
Jul 08 2016 14:36
harry97 sends brownie points to @mdbailin :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @mdbailin |http://www.freecodecamp.com/mdbailin
Matthew Bailin
@mdbailin
Jul 08 2016 14:39
@Harry97 np
Beau Carnes
@beaucarnes
Jul 08 2016 14:39
Why do these console.log commands print different things? I want the second to print the same as the first.
var on = "test";

$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(data) {

  if (data.stream == null) {
    on = "Offline";
  } else {
    on = "Online";
  }
  console.log("in", on); // Prints "in Offline"
});

console.log("out", on); // Print "out test"
@Iadetunji I responded to your message with what helped me solve that challenge
Sorin Ruse
@sorinr
Jul 08 2016 14:41
@beaucarnes and what do they log out?
Beau Carnes
@beaucarnes
Jul 08 2016 14:42
@sorinr Look at the comment after the console.log commands to see what they log out.
Sorin Ruse
@sorinr
Jul 08 2016 14:43
@beaucarnes have you tried to make a console.log(data) before the if statement ?
Matthew Bailin
@mdbailin
Jul 08 2016 14:44
Hey folks Im on the Pomo clock and for whatever reason I can't get the timer to display "00" (e.g 10:00 etc.) After "01", JS skips directly to "59". Anyone have any idea why?
http://codepen.io/mdbailin/pen/zBzmkk
Beau Carnes
@beaucarnes
Jul 08 2016 14:44
@sorinr before the If statement it just prints "test" for the variable on. http://codepen.io/beaucarnes/pen/YWAPNw
Ananay
@ananaymital
Jul 08 2016 14:47
hello can anyone tell me what they get by clicking on this link http://ip-api.com/json
i get timeout error
Beau Carnes
@beaucarnes
Jul 08 2016 14:51
@mdbailin
```
function tick (){

seconds--;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;


$('#clock').html("");

$('#clock').append(minutes.toString()+ ":" + seconds.toString());

  if (seconds <= 0){
  setToZero();
  console.log(seconds);
  minutes--;
  seconds = 60;

}
Update your code like that and if fixes the problem
Sorin Ruse
@sorinr
Jul 08 2016 14:52
@beaucarnes why does console.log("out", on); its out of scope for testing?
Beau Carnes
@beaucarnes
Jul 08 2016 14:53
@Deadpool37 I do not get a time out error.
Ananay
@ananaymital
Jul 08 2016 14:53
@beaucarnes any idea what i could be doing wrong?
Beau Carnes
@beaucarnes
Jul 08 2016 14:54
@sorinr After the "$.getJSON(" function I want to be able to access the changed variable "on" but for some reason it does not show updated.
@Deadpool37 No, but try this other site: http://ipinfo.io/json
Ananay
@ananaymital
Jul 08 2016 14:57
@beaucarnes i don't what it was but now it's working
@beaucarnes thanks
CamperBot
@camperbot
Jul 08 2016 14:57
deadpool37 sends brownie points to @beaucarnes :sparkles: :thumbsup: :sparkles:
:cookie: 195 | @beaucarnes |http://www.freecodecamp.com/beaucarnes
Adetunji Iyaniwura
@Iadetunji
Jul 08 2016 14:59
can anyone help with the button functions in the random quote machine challenge
Beau Carnes
@beaucarnes
Jul 08 2016 15:02
@Deadpool37 I went into the codepen and made changes but I assumed they would not show up for you. Maybe they did.
@Iadetunji Have you started a codepen?
Adetunji Iyaniwura
@Iadetunji
Jul 08 2016 15:03
@beaucarnes , i only started the JS section
Beau Carnes
@beaucarnes
Jul 08 2016 15:10
@Iadetunji I just made up this example for you. http://codepen.io/beaucarnes/pen/mEBykB
Yagnatheja
@Yagnatheja
Jul 08 2016 15:53
hello! I was unable to change the opacity of image popover in bootstrap. Will any one help in this?
i-liszt
@i-liszt
Jul 08 2016 15:58
Hi everyone, I'm working on "Use the Twitchtv JSON API" project. My radio button can't work. Will anyone help me for this? Thank you.
http://codepen.io/Liszt/pen/GqvLKk
The radio button is for filtering the streamers list, just like the example.
Matthew Bailin
@mdbailin
Jul 08 2016 16:01
@beaucarnes Your code just has the timer display "60" instead of "00". I need the timer to display "00" first and then "59"
e.g. (11:01...11:00...10:59...)
Does that make sense
?
wn7067509
@wn7067509
Jul 08 2016 16:06
@i-liszt I have seen your web,the radio button is normal
Sorin Ruse
@sorinr
Jul 08 2016 16:07
@beaucarnes why don't you just use moment.js and simplify your life?
i-liszt
@i-liszt
Jul 08 2016 16:15
@wn7067509 Really? I browse with Safari & Opera, neither of them works.
Robert Richey
@0x0936
Jul 08 2016 16:27
@i-liszt been looking at your code. the checked property does not change on click. need to manually remove and set checked.
Matthew Bailin
@mdbailin
Jul 08 2016 16:31
Hey folks Im on the Pomo clock and for whatever reason I can't get the timer to display "00" (e.g 10:00 etc.) After "01", JS skips directly to "59". Anyone have any idea why?
http://codepen.io/mdbailin/pen/zBzmkk
Sorin Ruse
@sorinr
Jul 08 2016 16:33
@mdbailin use moment.js and simplify ur life
Matthew Bailin
@mdbailin
Jul 08 2016 16:41
@sorinr Cool idea but not entirely useful for building a countdown timer imo :)
Sorin Ruse
@sorinr
Jul 08 2016 16:43
@mdbailin go and read the docs. the library is very powerful. you will figure out how to use the countdown :)
@mdbailin as a clue. with every seconds that pass detracts the double of it and you have a count down
Robert Richey
@0x0936
Jul 08 2016 16:46
@mdbailin there are several changes to consider - answering your question directly may not help, but the reason it skips from 01 to 59 is because of the if conditional if (seconds <= 0) when seconds == 0, the display still shows 1, and you're setting it to 59 then updating display - resulting in seeing it go from 1 to 59
i-liszt
@i-liszt
Jul 08 2016 16:49
@0x0936 Thank you. I've solved it!
CamperBot
@camperbot
Jul 08 2016 16:49
i-liszt sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1468 | @0x0936 |http://www.freecodecamp.com/0x0936
Robert Richey
@0x0936
Jul 08 2016 16:50
@i-liszt great :)
Matthew Bailin
@mdbailin
Jul 08 2016 16:51
@sorinr ok well I'll try :)
But I'm trying to cdn their library directly into my codePen
I thought I could just throw this link in
Is that not right?
nvm found a better cdm that works now :)
Matthew Bailin
@mdbailin
Jul 08 2016 16:55
*cdn
ok thanks
Daniel Parvin
@danielparvin
Jul 08 2016 17:00
Hi folks.
zerovalor
@zerovalor
Jul 08 2016 17:01
just getting started on the personal portfolio project - it seems like there are elements in the example which were not covered in the previous modules (unless i just completely missed a module or something) . i've honestly no idea where to begin on this one. any tips?
Daniel Parvin
@danielparvin
Jul 08 2016 17:01
I'm working on the Twitch.tv intermediate project. Could someone explain to me why my code always runs the .fail portion of JQuery's getJSON() method?
function load(i) { $.getJSON(baseURL + channels[i]) .done(function (json) { if (json.status === null) { loadOfflineAccount(channels[i]); } else { loadOnlineAccount(json); } }) .fail(loadClosedAccount(channels[i])); };
@zerovalor Do you understand the Bootstrap grid system?
zerovalor
@zerovalor
Jul 08 2016 17:02
@danielparvin yes I do
Daniel Parvin
@danielparvin
Jul 08 2016 17:04
@zerovalor Great! I recommend starting with the html and leaving the styling until all of your elements are in place with default Bootstrap.
the doer
@ewathedoer
Jul 08 2016 17:04
I got stuck with making it work on iPad, any help? http://theonewhodo.es/tictactoe/
it works well on other devices
but there is a problem with iPad on all browsers, can’t make it mark tapped boxes
zerovalor
@zerovalor
Jul 08 2016 17:08
@danielparvin thanks!
CamperBot
@camperbot
Jul 08 2016 17:08
zerovalor sends brownie points to @danielparvin :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @danielparvin |http://www.freecodecamp.com/danielparvin
Daniel Parvin
@danielparvin
Jul 08 2016 17:09
@zerovalor You're most welcome. Let me know if you have specific questions. For the portfolio project, the most difficult thing to figure out in terms of bootstrapped html markup is the navbar.
Robert Richey
@0x0936
Jul 08 2016 17:09
@danielparvin without seeing all of your code, it looks like you may be missing the endpoint 'streams' or 'channels'. https://api.twitch.tv/kraken/streams/<NAME>
Daniel Parvin
@danielparvin
Jul 08 2016 17:10
@0x0936 Thanks. The pen is here: http://codepen.io/danielparvin/pen/yJzyOj . Your diagnosis would make sense--but the script is loading contents twice.
CamperBot
@camperbot
Jul 08 2016 17:10
danielparvin sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1470 | @0x0936 |http://www.freecodecamp.com/0x0936
Daniel Parvin
@danielparvin
Jul 08 2016 17:12
@0x0936 I keep reading the getJSON() API, but I'm still not quite sure that I'm using it correctly.
Robert Richey
@0x0936
Jul 08 2016 17:13
I'm looking at it - will see if i can figure it out
Dylan
@dhcodes
Jul 08 2016 17:29
@danielparvin I think you are calling the function twice. see here:
$(function() {
  for (var i = 0; i < channels.length; i++) {
    load(i);
  }
});

function load(i) {
  $.getJSON(baseURL + channels[i])
    .done(function (json) {
the first part runs the function and the second part runs it again
to prevent the latter, change the second part to: var load = function(i) { ...
I think
Robert Richey
@0x0936
Jul 08 2016 17:38
@danielparvin I don't know what to tell you. Using $.ajax() appears to work correctly, but when using $.getJSON() the .fail() promise is always called. Here's what I tried. again, the ajax method seems to work correctly.
// $.getJSON(baseURL + channel)
  //   .done(function(json) {
  //     if (json.status === null) { loadOfflineAccount(channel); }
  //     else { loadOnlineAccount(json); }
  //   })
  //   .fail(loadClosedAccount(channel));

  // $.getJSON(baseURL + channel, (json) => {
  //   if (json.status === null) { loadOfflineAccount(channel); }
  //   else { loadOnlineAccount(json); }
  // }).fail(loadClosedAccount(channel))

  $.ajax({
    url: baseURL + channel,
    success: (json) => {
      if (json.status === null) { loadOfflineAccount(channel) }
      else { loadOnlineAccount(json) }
    },
    error: (err) => {
      loadClosedAccount(channel)
    }
  })
Peter Kenward
@PeterKenward
Jul 08 2016 17:43

I am working on the random quote generator. I was expecting the following code to return "there was a problem with the request". Can someone explain why it doesn't please? https://repl.it/CaD3/0 ```
function getQuote(apiUrl){
///get the new Quote and display
var newHttpRequest = new XMLHttpRequest();
newHttpRequest.onreadystatechange = function(){
if (newHttpRequest.readyState !== XMLHttpRequest.DONE) {
//not ready, so wait
} else if(newHttpRequestest.status === 200) {
// request complete, data received now do something with data
return "nice-one";

} else {
return "there was a problem with the request";
// there was a problem with the request,
// for example the response may contain a 404 (Not Found)
// or 500 (Internal Server Error) response code
}
};

newHttpRequest.open('GET', apiUrl, true);
newHttpRequest.send(null);

}
getQuote ["http://www.someURL.com/data.json"];```

sorry that didn't work.
function getQuote(apiUrl){
  ///get the new Quote and display
  var newHttpRequest = new XMLHttpRequest();
  newHttpRequest.onreadystatechange = function(){
    if (newHttpRequest.readyState !== XMLHttpRequest.DONE) {
    //not ready, so wait
} else if(newHttpRequestest.status === 200) {
    // request complete, data received now do something with data
  return "nice-one";


} else {
    return "there was a problem with the request";
    // there was a problem with the request,
    // for example the response may contain a 404 (Not Found)
    // or 500 (Internal Server Error) response code
}
};

  newHttpRequest.open('GET', apiUrl, true);
  newHttpRequest.send(null);

}
getQuote ["http://www.someURL.com/data.json"];
Why does my code above not return "there was a problem with the request"?
Pradnya Joshi
@pradxj07
Jul 08 2016 17:46
@danielparvin , the way I have used getJSON was I have a callback function after the channel and it was called when the request was successful. I do not have much knowledge of this but this worked well for me -```$.getJSON(arrSourceURL1 + "&callback=", function(a) {
showTextQuote(a[0],arrSourceURL)
})
.fail(function(jqXHR, textStatus, error) {
formatError(jqXHR, textStatus, error);
```jQuery.getJSON("http://api.openweathermap.org/data/2.5/weather?appid=e9cdd899e9f5be6a16a23fc54165bc6f&lat=19&lon=72.87" + "&units=metric",
function(weather) {
showLocation(weather);
showTemp(weather);
showWeather(weather);
})
.done()
.fail(function(e1) {
showError(e1.statusText + " - " + "Error getting weather. Please try again later.");
hope this helps.
Sorin Ruse
@sorinr
Jul 08 2016 17:49
@PeterKenward just try else if(newHttpRequestest.status == 200) instead of else if(newHttpRequestest.status === 200)
Mohanad Mjawaz
@Mohanad-Mjawaz
Jul 08 2016 17:50
hello everyone !
i'm trying to build a random quote machine here and i just want to know how can i attach a random background image to each quote ?
here is my code
```

function quotes(){

var aquote = new Array;
aquote[0]="\"It is never too late to be what you might have been.-George Eliot\"";
aquote1="\"What lies behind us and what lies before us are tiny matters compared to what lies within us.-Henry Stanley Haskins\"";
aquote2="\"Great thoughts speak only to the thoughtful mind, but great actions speak to all mankind.-Emily P. Bissell\"";

rdmQuote = Math.floor(Math.random()*aquote.length);
document.getElementById("txtbox") .value=aquote[rdmQuote];
}
window.onload=quotes;

function quotes(){

 var aquote = new Array;
 aquote[0]="\"It is never too late to be what you might have been.-George Eliot\"";
 aquote[1]="\"What lies behind us and what lies before us are tiny matters compared to what lies within us.-Henry Stanley Haskins\"";
 aquote[2]="\"Great thoughts speak only to the thoughtful mind, but great actions speak to all mankind.-Emily P. Bissell\"";


 rdmQuote = Math.floor(Math.random()*aquote.length);
 document.getElementById("txtbox") .value=aquote[rdmQuote];
}
window.onload=quotes;
Robert Richey
@0x0936
Jul 08 2016 17:51
@Mohanad-Mjawaz here's a random image api - https://unsplash.it/
Peter Kenward
@PeterKenward
Jul 08 2016 17:52
@sorinr should if (newHttpRequest.readyState !== XMLHttpRequest.DONE) be replaced with != too then?
Timo Schalow
@schalow
Jul 08 2016 17:52
Hello, I am building the random quote machine currently. However I don't undetstand how to get the JSON data out of the API. It just doesn't seem to work the way it was shown at https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method. Here is my code:
$(document).ready(function () {
  $("#quote").on("click", function() {
    $.getJSON("http://quotes.stormconsultancy.co.uk/quotes/1.json", function(json) {
      $(".message").html(JSON.stringify(json));
    });
  });
});
Mohanad Mjawaz
@Mohanad-Mjawaz
Jul 08 2016 17:53
@0x0936 how do i link it to my page ?
Matthew Bailin
@mdbailin
Jul 08 2016 17:56
@sorinr The console says that moment.subtract isn't a function. Do you know why?
Mohanad Mjawaz
@Mohanad-Mjawaz
Jul 08 2016 17:56
@0x0936 i mean i want to set an image as a background for the page for each diffrent quote
Ken Haduch
@khaduch
Jul 08 2016 17:57
@schalow - did you get an example return data- if you post that, or a link to your codepen project, someone can help...
Johnathan Mullen
@MrJkmullen
Jul 08 2016 17:57
@danani This is very nice
Ken Haduch
@khaduch
Jul 08 2016 17:58
@schalow - it looks like you aren't getting any data returned, actually. The error: XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/quotes/1.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Daniel Parvin
@danielparvin
Jul 08 2016 17:58
@0x0936 @pradxj07 Thank you both.
CamperBot
@camperbot
Jul 08 2016 17:58
danielparvin sends brownie points to @0x0936 and @pradxj07 :sparkles: :thumbsup: :sparkles:
:warning: danielparvin already gave 0x0936 points
:cookie: 302 | @pradxj07 |http://www.freecodecamp.com/pradxj07
Robert Richey
@0x0936
Jul 08 2016 17:59

@PeterKenward the first if conditional is running

function getQuote(apiUrl){
  ///get the new Quote and display
  var newHttpRequest = new XMLHttpRequest();
  newHttpRequest.onreadystatechange = function(){
    console.log('status', newHttpRequest.status)
    if (newHttpRequest.readyState !== XMLHttpRequest.DONE) {
      //not ready, so wait
      console.log('here')
    } else if(newHttpRequest.status === 200) {
      // request complete, data received now do something with data
      return "nice-one";
    } else {
      return "there was a problem with the request";
      // there was a problem with the request,
      // for example the response may contain a 404 (Not Found)
      // or 500 (Internal Server Error) response code
    }
  }
  newHttpRequest.open('GET', apiUrl, true);
  newHttpRequest.send(null);
}
getQuote("https://www.someURL.com/data.json");
<- status 0
<- here

also had to modify your call for getQuote - your code is using square brackets, needs to be parens

Wayne Bunch
@waynebunch
Jul 08 2016 17:59
Hi all
Timo Schalow
@schalow
Jul 08 2016 17:59
@khaduch Thank you. How did you get the error message?
CamperBot
@camperbot
Jul 08 2016 17:59
schalow sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1418 | @khaduch |http://www.freecodecamp.com/khaduch
Wayne Bunch
@waynebunch
Jul 08 2016 18:00
function final(value) {
  var test = '';
    value.forEach(function(value) {
      test += value;
    });
  var convert = eval(test);
  $('#output').val(convert);
}
Security Question: Is this the situation where they say eval() shouldn't be used because in theory final(value) could get a value from an untrusted source?
Ken Haduch
@khaduch
Jul 08 2016 18:00
@khaduch @schalow - try using this URL: `'http://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json' - it might solve that problem.
Tyler Moeller
@TylerMoeller
Jul 08 2016 18:01
@Mohanad-Mjawaz You can do it the same way you got random quotes. Create an array of background images, a randomNumber based on the length of the backgroundImageArray, and then call document.body.style.backgroundImage = "url('" + backgroundImageArray[randomNumber] + "')";
Ken Haduch
@khaduch
Jul 08 2016 18:01
@schalow - open the browser developer tools and look in the console tab - usually open it with something like CTRL + SHIFT + I - look on the browser menu to find it
Timo Schalow
@schalow
Jul 08 2016 18:01
@khaduch no that didnt do it
@khaduch thanks, good to know
CamperBot
@camperbot
Jul 08 2016 18:02
schalow sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: schalow already gave khaduch points
Mohanad Mjawaz
@Mohanad-Mjawaz
Jul 08 2016 18:02
@TylerMoeller this is what i was trying to do but i missed up the code some how :p
thanks !
CamperBot
@camperbot
Jul 08 2016 18:02
mohanad-mjawaz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 651 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ken Haduch
@khaduch
Jul 08 2016 18:02
@schalow - okay, try this, then:
https://jsonp.afeld.me/?callback=?&url=http://quotes.stormconsultancy.co.uk/random.json
Wayne Bunch
@waynebunch
Jul 08 2016 18:02
yes you definitely need to add the ?callback=?
you can just add it to the end right? https://www.someURL.com/data.json?callback=?
Tyler Moeller
@TylerMoeller
Jul 08 2016 18:04
@schalow @khaduch No need to use a proxy, just add the callback to the end of the url as @waynebunch says to tell getJSON it's a jsonp request.
Timo Schalow
@schalow
Jul 08 2016 18:04
wow this worked, but why ?
@khaduch
Wayne Bunch
@waynebunch
Jul 08 2016 18:05
otherwise you get a cross origin error
Timo Schalow
@schalow
Jul 08 2016 18:06
@TylerMoeller @waynebunch @khaduch "http://quotes.stormconsultancy.co.uk/quotes/1.json?callback=?" also works, thank you
CamperBot
@camperbot
Jul 08 2016 18:06
schalow sends brownie points to @tylermoeller and @waynebunch and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @waynebunch |http://www.freecodecamp.com/waynebunch
:warning: schalow already gave khaduch points
:cookie: 652 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
I was banging my head on that for a long time not too long ago haha
Timo Schalow
@schalow
Jul 08 2016 18:10
@waynebunch I will read it thanks. Just did a quick ctrl+f "callback" with nothing found though. Well guess i have to read it all
CamperBot
@camperbot
Jul 08 2016 18:10
:warning: schalow already gave waynebunch points
schalow sends brownie points to @waynebunch :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Jul 08 2016 18:10
@waynebunch @TylerMoeller - thanks for the assist... I just had those first couple incantations in my notes... just added this one.
CamperBot
@camperbot
Jul 08 2016 18:10
khaduch sends brownie points to @waynebunch and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @waynebunch |http://www.freecodecamp.com/waynebunch
:cookie: 653 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jul 08 2016 18:11
So many APIs out there - hard to tell what needs headers, callbacks, proxies, etc :)
Wayne Bunch
@waynebunch
Jul 08 2016 18:11
yea no doubt
Ken Haduch
@khaduch
Jul 08 2016 18:12
@TylerMoeller - you said it! This gets to be pretty confusing... good thing there's stackoverflow! :)
Wayne Bunch
@waynebunch
Jul 08 2016 18:12
yea SO is my bible
Timo Schalow
@schalow
Jul 08 2016 18:12
JSONP is really confusing to me^^
Robert Richey
@0x0936
Jul 08 2016 18:14
@Mohanad-Mjawaz there's more than one way of getting a random image with each quote. here is one way - probably not the best way - example pen
Timo Schalow
@schalow
Jul 08 2016 18:14
@waynebunch yea it's just that all i did now was put "?callback=?" at the end of my link. I don't have a callback function or anthing
I think I me some coffee haha :smile:
Wayne Bunch
@waynebunch
Jul 08 2016 18:16
if I understand correctly it just tells the server to use JSONP and not JSON. This allows information exchange between two different domains
Timo Schalow
@schalow
Jul 08 2016 18:17
I see thanks again!
Wayne Bunch
@waynebunch
Jul 08 2016 18:17
but don't quote me on that, I'm fairly new.
:)
Timo Schalow
@schalow
Jul 08 2016 18:17
:)
Dana Ni
@danani
Jul 08 2016 18:29
@MrJkmullen Oh, thanks you for your feedback! I feel better now. :)
CamperBot
@camperbot
Jul 08 2016 18:29
:cookie: 217 | @mrjkmullen |http://www.freecodecamp.com/mrjkmullen
danani sends brownie points to @mrjkmullen :sparkles: :thumbsup: :sparkles:
Marco Mazzeo
@Doko85
Jul 08 2016 18:48
is anyone here expert with css animations?
Tessa Bradford
@trose1189
Jul 08 2016 19:00
I have a question about responsive design. I've built my Pomodoro clock with responsive Bootstrap-- it looks right when I re-size my browser, but on mobiles it just shrinks everything. I want a small-sized browser and a mobile platform to appear the same way.
Does anyone know anything about this? Any help would be appreciated!
Anthony Ho
@chiho13
Jul 08 2016 19:01
@trose1189
use the right meta tag
Google mobile responsive meta tag width device
Tessa Bradford
@trose1189
Jul 08 2016 19:06
Aha, great, thanks @chiho13
CamperBot
@camperbot
Jul 08 2016 19:06
trose1189 sends brownie points to @chiho13 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @chiho13 |http://www.freecodecamp.com/chiho13
James Barrett
@jamesbarrett95
Jul 08 2016 19:13
Hi guys I need some help with background-images
Marco Mazzeo
@Doko85
Jul 08 2016 19:13
whats the problem?
James Barrett
@jamesbarrett95
Jul 08 2016 19:15
Basically, I want to put this image: https://i.gyazo.com/fa0493b0b875621167caee666c3bd35b.png
Into a container
My code so far:
Marco Mazzeo
@Doko85
Jul 08 2016 19:15
give that container a unique ID or a unique class
then on the css:
background: url('that url');
James Barrett
@jamesbarrett95
Jul 08 2016 19:16
header {
  width: 100%;
  padding: 200px 0;
  background-image: url(../img/banner.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
However the output seems very 'zoomed'
Marco Mazzeo
@Doko85
Jul 08 2016 19:17
uhm
remove the cover part
James Barrett
@jamesbarrett95
Jul 08 2016 19:19
If I remove this, it will not be inside the container
Marco Mazzeo
@Doko85
Jul 08 2016 19:19
then something it's wrong
gimme a sec
James Barrett
@jamesbarrett95
Jul 08 2016 19:20
Wait I think I am explaining this wrong
It does stay in the container, however I need text over the image as well
Stephen
@stephepush
Jul 08 2016 19:22
Should I try an make a new event handler for the part that starts at "$.getJSON..."? Something like an ("").on(click)? If so, what is being clicked? It would ideally be the prompt allowing the browser to get the location, would the object be ("prompt")?

     var lat=position.coords.latitude;                     
     var long=position.coords.latitude;

$(document).ready(function() {
    if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(position){
     lat=position.coords.latitude;                        
     long=position.coords.latitude;
 });
};
    $.getJSON("api.openweathermap.org/data/2.5/weather?lat="+lat+"&long="+long+"&appid=8b2e92c426bb402764f894c1259d98c4", function(data){
        $('#city').text(data.name);
        $('#temperature').text(data.main.temp);
        $('#humidity').text(data.main.humidity);
        $('#description').text(data.main.weather);
    });
});
Marco Mazzeo
@Doko85
Jul 08 2016 19:23
@stephepush I only managed the switch from C to F degrees by a click, the rest is pushed into the document straight like you did
Stephen
@stephepush
Jul 08 2016 19:24
oh, well I'm not even up to switching temperature units yet, nothing is showing the browser right now when I run my code
@Doko85 ^
this is mine
Stephen
@stephepush
Jul 08 2016 19:28
that's reall nice, @Doko85
Marco Mazzeo
@Doko85
Jul 08 2016 19:29
@stephepush if you want to check the code I used, simply visit my codepen profile
no wait that was meant to be for @jamesbarrett95
and the pen I was referring to is this one http://codepen.io/doko/pen/gMPWjq
Stephen
@stephepush
Jul 08 2016 19:32
okay, thanks, @Doko85
CamperBot
@camperbot
Jul 08 2016 19:32
stephepush sends brownie points to @doko85 :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @doko85 |http://www.freecodecamp.com/doko85
James Barrett
@jamesbarrett95
Jul 08 2016 19:35
Hi @Doko85, I am not using BootStrap, its just pure HTML and CSS :)
Marco Mazzeo
@Doko85
Jul 08 2016 19:36
I'm now going hybrid bootstrap & materialize
it's faster tho, programming a whole page\app with just CSS takes a lot of time
shakedt
@shakedt
Jul 08 2016 19:37
hi guys im trying to do the saimon says game, any one can point me to how i make a proper game loop?
Marco Mazzeo
@Doko85
Jul 08 2016 19:37
I'm not there yet, sorry
shakedt
@shakedt
Jul 08 2016 19:37
k tx
Timo Schalow
@schalow
Jul 08 2016 19:41
I get an Error msg "json.forEach is not a function". Does anyone know why this is? http://codepen.io/timoschalow/pen/vKZExG
Robert Richey
@0x0936
Jul 08 2016 19:47
hey everyone, I'm streaming the FCC Project - Random Quotes Machine, if anyone wants to watch. Feel free to engage and ask questions - https://www.twitch.tv/droopfizzle
Tyler Moeller
@TylerMoeller
Jul 08 2016 19:48
@schalow your json object isn't an array. You don't need a forEach - there's only one quote to retrieve from the json, json.quote
Timo Schalow
@schalow
Jul 08 2016 19:49
@TylerMoeller thanks. json.each doesn't work either though.
CamperBot
@camperbot
Jul 08 2016 19:49
schalow sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 655 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tessa Bradford
@trose1189
Jul 08 2016 19:49
I'm very close to being finished with my Pomodoro Clock but on iPhone's my columns are stacking on top of each other. It works on all other platforms, but not on iPhones. Does anyone have any ideas?
http://s.codepen.io/trose1189/full/WxxqBr
Tyler Moeller
@TylerMoeller
Jul 08 2016 19:50
@schalow .each() is for looping through HTML elements. https://api.jquery.com/each/
@trose1189 There's a typo on line 16 of your HTML: <div id="clockbtns row"> should be <div id="clockbtns" class="row">
Timo Schalow
@schalow
Jul 08 2016 19:54
@TylerMoeller I'm stuck :(
Tyler Moeller
@TylerMoeller
Jul 08 2016 19:55

@schalow This is what you get back from the API, in your json variable, when you click the random quote button:

{
  author: "Jamie Zawinski",
  id: 4,
  permalink: "http://quotes.stormconsultancy.co.uk/quotes/4",
  quote: "Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems."
}

If you want the author, you do json.author. If you want the quote, you do json.quote
No need to loop through this since there's only one quote retrieved at a time. If you had multiple quotes returned, then you would need to loop through the data.

Tessa Bradford
@trose1189
Jul 08 2016 19:56
@TylerMoeller Ah yeah, got it. Thank you. Still having problems with the iPhone though. Any ideas on that?
CamperBot
@camperbot
Jul 08 2016 19:56
trose1189 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 656 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jul 08 2016 19:57
@trose1189 That fixed it for me, let me take a closer look, I might have missed another overlapping element.
Marco Mazzeo
@Doko85
Jul 08 2016 19:58
anyone here is experienced with CSS animation? I made a bouncing arrow but the animation isn't smooth as it should be
Timo Schalow
@schalow
Jul 08 2016 19:59
@TylerMoeller wow I got it thanks so much :smile:
CamperBot
@camperbot
Jul 08 2016 19:59
schalow sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: schalow already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jul 08 2016 20:01
@trose1189 I'm not sure I understand how you want it to look on mobile. For me, the layout is the same at 900px wide and 300px wide. There are some text overflow issues as the screen size gets smaller, though.
this is the pen I'm referring to
Tessa Bradford
@trose1189
Jul 08 2016 20:03
@TylerMoeller It's working on all devices except iPhones... or at least the iPhones that I've tested it on. When I look at it on an iPhone, everything is on top of each other, so nothing works correctly.
Tyler Moeller
@TylerMoeller
Jul 08 2016 20:07
@trose1189 Weird, one of those times the chrome device emulator doesn't look the same as a real device. I see the issue now. From looking more closely at the code, you have some nested containers. Bootstrap doesn't allow that. Also, you are nesting rows and columns inside of other columns with a fairly complex setup class="col-md-4 col-md-push-4 col-md-offset-0 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1".
It would take time to fully debug, but I think you need to try and simplify the Container -> Row -> Column structure of your page
Marco Mazzeo
@Doko85
Jul 08 2016 20:09
col-md-offset-0 does this do anything though? I never saw that
I mean... giving an offset of 0
Tessa Bradford
@trose1189
Jul 08 2016 20:11
@Doko85 The reason I did that is because for some reason it was offsetting my medium sized columns by 1 when I added "col-sm-offset-1" and I couldn't figure out how else to stop it from happening.
Tyler Moeller
@TylerMoeller
Jul 08 2016 20:11
@Doko85 I hadn't seen it before either. Apparently it's for overriding offsets in sub grids. http://getbootstrap.com/css/#grid-offsetting
Marco Mazzeo
@Doko85
Jul 08 2016 20:12
I see, thanks for sharing
Tessa Bradford
@trose1189
Jul 08 2016 20:13
@TylerMoeller Ok. So I need to start with removing the nested containers you think? Thanks for this help. I've been googling it for an answer for awhile now with no success.
CamperBot
@camperbot
Jul 08 2016 20:13
trose1189 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: trose1189 already gave tylermoeller points
Marco Mazzeo
@Doko85
Jul 08 2016 20:16
well... if anyone can improve my bouncing arrow, please pm me with the changes, I'm out for a few hs :) cya
Stephen
@stephepush
Jul 08 2016 20:46
@Koko85, so instead of asking the use if you could just use their location you used an api?
rajeev
@rjvgdm
Jul 08 2016 20:48
problem with navigation bar collapse menu http://codepen.io/rjvg/pen/yJoJGK?editors=1000
Hadouken
@Harry97
Jul 08 2016 20:51
@rjvgdm Make sure to add Bootstrap JS after jQuery
In the Javascript tab
Tyler Moeller
@TylerMoeller
Jul 08 2016 20:56
@rjvgdm Add this to the end of your HTML:
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
rajeev
@rjvgdm
Jul 08 2016 20:59
@Harry97 @TylerMoeller no use
Hadouken
@Harry97
Jul 08 2016 20:59
OH
ur data-target is set to #myNavbar
Tyler Moeller
@TylerMoeller
Jul 08 2016 21:00
@rjvgdm I don't see both jquery and bootstrap.js in your codepen. Add the two lines I put above to your HTML and click Run. Everything works great for me when I do that.
Hadouken
@Harry97
Jul 08 2016 21:00
remove the "#"
It's found in your button tag
rajeev
@rjvgdm
Jul 08 2016 21:01
@TylerMoeller @Harry97 its working thanks
CamperBot
@camperbot
Jul 08 2016 21:01
rjvgdm sends brownie points to @tylermoeller and @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
:cookie: 657 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Guilherme Or
@chameleonor
Jul 08 2016 21:02
Hello guys, I have a project running in flex, and I need to put this inside a html page, anybody heard about ?
rajeev
@rjvgdm
Jul 08 2016 21:04
@Harry97 thanks
CamperBot
@camperbot
Jul 08 2016 21:04
rjvgdm sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Smil3y
@Smil3y
Jul 08 2016 21:27
Can I see someones tribute page?
Dolan
@dguh
Jul 08 2016 21:43
could someone tell me why my code when log the input from my text box?
Jonathan Coleman
@jondcoleman
Jul 08 2016 21:46
@dguh it is only logging it when the page loads
when do you want it to log?
Dolan
@dguh
Jul 08 2016 21:48
when i press enter
Jonathan Coleman
@jondcoleman
Jul 08 2016 21:48
@dguh ok, then you need to attach a 'enter' keypress event handler to your input field
do you know what I mean by that?
Dolan
@dguh
Jul 08 2016 21:52
kind of
i found this
now im trying to work it into my code
Jonathan Coleman
@jondcoleman
Jul 08 2016 21:53
@dguh close
that will do a click event on enter
you don't really need that
but that's the idea
just replace the inner portion of that with your console.log statement
Dolan
@dguh
Jul 08 2016 21:57
so
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});
whoops
$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});
okay so i replace the whole if statement with console.log(inputSearch);?
Dolan
@dguh
Jul 08 2016 22:03
@jondcoleman
Daniel Parvin
@danielparvin
Jul 08 2016 22:03

Hi all. Whenever I try to replace $("#header").after(newRow); with the material in the commented-out lines, the output result gets cut short (because of asynchronicity, I think). Do you have any advice to make these rows appear on time and in the order that I'd like?

function loadOfflineAccount(channel) {
  $.ajax({
    datatype: 'json',
    error: function(err) {;
    },
    url: channelURL + channel,
    success: function(json) {
      logo = json.logo;
      // Load after .row .online divs.
      /* if ($(".online").length) {
         $(".online:last-child").after(newRow);
       }
       else {
         $("#header").after(newRow);  
       }
       */
      $("#header").after(newRow);

      // Then add the other stuff
      $("#new .avatar").html('<img src="' + logo + '" alt="logo" title="' + channel + '" class="img-circle img-responsive">');
      $("#new .handle").html('<h2>' + channel + '</h2>');
      $("#new .status").html('<h2>Channel is currently offline.</h2>');
      $("#new").addClass("offline");
      $("#new").attr("id", null);
    }
  });
}

http://codepen.io/danielparvin/pen/yJzyOj

Jonathan Coleman
@jondcoleman
Jul 08 2016 22:03
@dguh the inside of the if statement
@dguh I'm out for now but you're on the right track!
Dolan
@dguh
Jul 08 2016 22:05
@jondcoleman thanks!
CamperBot
@camperbot
Jul 08 2016 22:05
dguh sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:cookie: 873 | @jondcoleman |http://www.freecodecamp.com/jondcoleman
Robert Richey
@0x0936
Jul 08 2016 22:28

--Streaming Project: Show Local Weather-- at https://www.twitch.tv/droopfizzle

please feel free to drop in and watch or ask any questions you may have about the project
Randy Goldsmith
@Dueldrawer8
Jul 08 2016 23:26
can anyone help me with my CSS?
Tyler Moeller
@TylerMoeller
Jul 08 2016 23:31
@Dueldrawer8 I can try - do you have a link to the CSS?
vaghelaj
@vaghelaj
Jul 08 2016 23:33
hi
can someone explain me how to make the <i class="fa fa-quote-left" id="quotation"></i> appear even after the use r presses a button to change the text
?
Matthew King
@MattTheWebDev
Jul 08 2016 23:52
Can someone help me with the wikipedia viewer
Tyler Moeller
@TylerMoeller
Jul 08 2016 23:55
@MattTheWebDev I can try - do you have a link to the pen?
@vaghelaj You could add the icon to the quote when you write it to the page.
Ken Haduch
@khaduch
Jul 08 2016 23:57
@vaghelaj - without seeing the rest of your code, so a lot of guessing - just keep the <i>...</i> separate (I'm assuming that you're writing the quote to the same element?) And add a <div> after that with the id="quotation" for the quote?
It seems to be lagging and I can't get the results to clear everytime I do a new search.