These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Feb 2016
max77p
@max77p
Feb 08 2016 00:34
i am on the quote machine problem...did we touch base on implementing apis in the previous lessons?
if not, can someone direct me to somwhere i can learn it easily?
Susan
@SusanGrattan
Feb 08 2016 00:39
@max77p I just used JS and Jquery for that.
Salman Shahid
@salman-shahid
Feb 08 2016 00:41
var lh = $("#quote-btns").css("height");
$("#quote-twitter").css("line-height", lh.value);
I am trying to retrieve the height of a div and set it to the line-height property for another element. I am following: http://api.jquery.com/css/ Any ideas on why it's not working?
max77p
@max77p
Feb 08 2016 00:42
@SusanGrattan i assume you used js and jquery to change the color on each new quote too?
Susan
@SusanGrattan
Feb 08 2016 00:51
I didn't change the color, no. But you could do that. I just changed the quote and author with a click event =] @max77p
Susan
@SusanGrattan
Feb 08 2016 00:56
Alright, how do i put the loaded coordinates into my JSON call? I'm doing something wrong here. Should I create a variable to create a new url each time coordinates are loaded? and then put that variable where the url goes in my getJSON method?
Everyone must be busy watching the superbowl.. =P
sigursiguros
@sigursiguros
Feb 08 2016 01:23
Dear campers, would you please review my javascript calculator. Thansk.
Susan
@SusanGrattan
Feb 08 2016 01:50
@sigursiguros if the user enters in too many leading zeros you get NaN.
also I can't chain operations.
It looks good though just needs a little more work on the bugs.
Lucas Neves
@lcneves
Feb 08 2016 02:07
@sigursiguros It looks good, congratulations! Some problems: 1. after hitting = I cannot make another operation with the results; 2. the % button is not doing what it should (reference: https://blogs.msdn.microsoft.com/oldnewthing/20080110-00/?p=23853 ); 3. the +/- button seems broken
@mynameissal what does console.log(lh) say?
Andrew Charlebois
@andrewchar
Feb 08 2016 02:10
Hey campers. I was told today that my portfolio was not working on ipads or iphones but works on android cell phones.
Lucas Neves
@lcneves
Feb 08 2016 02:11
@SusanGrattan do you still need help with the JSON call?
Andrew Charlebois
@andrewchar
Feb 08 2016 02:11
the page loads for iphone/ipad users but all of the responsive stuff just doesnt work and nothing it really viewable
anyone here on a mac that can check the site on safari
Austin West
@scienceoflife
Feb 08 2016 02:14
@andrewchar i have a mac laptop i can check
Austin West
@scienceoflife
Feb 08 2016 02:17
@andrewchar looks fine to me!
Andrew Charlebois
@andrewchar
Feb 08 2016 02:17
everything is responsive?
Austin West
@scienceoflife
Feb 08 2016 02:18
yeah
Andrew Charlebois
@andrewchar
Feb 08 2016 02:18
hmm
so the problem is only within ipads/iphones
@scienceoflife thanks for helping
CamperBot
@camperbot
Feb 08 2016 02:18
andrewchar sends brownie points to @scienceoflife :sparkles: :thumbsup: :sparkles:
:star: 66 | @scienceoflife | http://www.freecodecamp.com/scienceoflife
Bruce Young
@mutantspore
Feb 08 2016 02:18
@andrewchar safari/mac … seems ok
Austin West
@scienceoflife
Feb 08 2016 02:19
@andrewchar and i wanted to add that it actually is really nicely designed, did you use any themes/borrowed code?
Andrew Charlebois
@andrewchar
Feb 08 2016 02:19
time to google the c#$^ out of this
Bruce Young
@mutantspore
Feb 08 2016 02:19
you’ll find that using a fixed backgroundimag ewill look wrong on a phone as it wil only show the top corner. fo rthat you use a media query to mak eit just scroll
Andrew Charlebois
@andrewchar
Feb 08 2016 02:19
@scienceoflife the only thing i borrow was the JS for the scroll effect
Austin West
@scienceoflife
Feb 08 2016 02:19
also what does jquery do? just the scroll animations?
@andrewchar ahh makes sense
Andrew Charlebois
@andrewchar
Feb 08 2016 02:20
@scienceoflife i am not that strong in JS yet
@mutantspore you think fixed background will cause this problem only within iphone/ipad users?
@scienceoflife i really just wanted something minimalistic. i love the whole minimalistic way of things
@scienceoflife i i just tried to keep it simple, sleek
Bruce Young
@mutantspore
Feb 08 2016 02:22
@andrewchar yes it definately will.. had to deal with it on my site.
Andrew Charlebois
@andrewchar
Feb 08 2016 02:23
took me a full day styling it
getting all these really small things to look the way i want
@mutantspore is there a better way of testing sites.
Austin West
@scienceoflife
Feb 08 2016 02:24
im trying to figure out how you implemented the on-hover image scroll-up
Andrew Charlebois
@andrewchar
Feb 08 2016 02:24
@mutantspore what i mean is, im on a linux i dont have the safari or anything
@mutantspore or even a way to test sites for how they look/function for different cells
@scienceoflife in the portfolio?
Austin West
@scienceoflife
Feb 08 2016 02:26
@andrewchar yeah! the "COMING SOON PROMISE" images have that scroll effect on hover, but i cant find a single listener for hover
Bruce Young
@mutantspore
Feb 08 2016 02:26
you can’t get it for the apple but i think you can get Android dev tools and they have a simulator
Andrew Charlebois
@andrewchar
Feb 08 2016 02:27
figure.effect-portfolio:hover img {
  -webkit-transform: translate3d(0, -80px, 0);
  transform: translate3d(0, -80px, 0);
}

figure.effect-portfolio:hover h2 {
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
}

figure.effect-portfolio:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
Austin West
@scienceoflife
Feb 08 2016 02:28
@andrewchar ahh, idk why my ctrl-f for hover didnt catch that.
@mutantspore @andrewchar if you have a mac, xcode has an iphone/ipad simulator with safari.
Bruce Young
@mutantspore
Feb 08 2016 02:29
yes I have all that.. @andrewchar doesn’t have a Mac though
Andrew Charlebois
@andrewchar
Feb 08 2016 02:29
nope nope
dual boot windows/ubuntu
Lucas Neves
@lcneves
Feb 08 2016 02:30
Guys, please note that these embedded browser emulators are useful for checking how your page will display, but have very limited use in debugging OS- or browser-specific problems
Austin West
@scienceoflife
Feb 08 2016 02:31
@lcneves why do you say that? Its my understanding that the simulator browser for xcode is the exact same as the native one
Bruce Young
@mutantspore
Feb 08 2016 02:31
doesn’t codePen have some browser testing somewhere?
Austin West
@scienceoflife
Feb 08 2016 02:32
@mutantspore the issue is the browser engine is what matters, not resolution
Bruce Young
@mutantspore
Feb 08 2016 02:32
? what did I say for that answer? @scienceoflife
Austin West
@scienceoflife
Feb 08 2016 02:33
if its mostly resolution(and some feature) testing you want to do, chrome has a built in simulator for a lot of devices, but it doesnt have the core/engine
@mutantspore what answer? you asked if codepen has browser testing, and i was explaining how theirs isn't sufficient because of the lack of engine.
Lucas Neves
@lcneves
Feb 08 2016 02:33
@scienceoflife Yes you're right for Xcode. The Chrome device emulator, on the other hand, should be used only for previewing, not for debugging.
Bruce Young
@mutantspore
Feb 08 2016 02:33
yes but I was thinking that codepen itself had a link somewhere to test browsers
Andrew Charlebois
@andrewchar
Feb 08 2016 02:34
well this portfolio was my first site
so now im learning how to deal with this problem
Bruce Young
@mutantspore
Feb 08 2016 02:34
anyway I have pretty much all combinations of the real devices/OS/browsers as real objects
Austin West
@scienceoflife
Feb 08 2016 02:34
@lcneves Im pretty sure genyMotion is accurate for android
Andrew Charlebois
@andrewchar
Feb 08 2016 02:34
i guess its a good problem to deal with right now
althou an annoying one when most of my buddies use iphones and they cant check out what i made! lol
Lucas Neves
@lcneves
Feb 08 2016 02:36
@andrewchar If this portfolio is your first site, you are off to a good start! It looks great.
Austin West
@scienceoflife
Feb 08 2016 02:36
@andrewchar are you sure they were viewing it correctly? it mightve defaulted to editor mode and not shown correctly. codepen is great for showing stuff to devs, but its kinda crummy when sending urls to show off work.
Andrew Charlebois
@andrewchar
Feb 08 2016 02:37
@lcneves yeah first site
@scienceoflife yeah one people told me about it i had the chance to get ahold of a new iphone today and check it.
@lcneves thanks :) i dont feel like i am really that artistic of a people but i think i can work on it and make it better once i know more cool css stuff
CamperBot
@camperbot
Feb 08 2016 02:39
andrewchar sends brownie points to @lcneves :sparkles: :thumbsup: :sparkles:
:star: 340 | @lcneves | http://www.freecodecamp.com/lcneves
Andrew Charlebois
@andrewchar
Feb 08 2016 02:40
@mutantspore you saying that got me thinking now. i dont actually need to use background-position : fixed; if i have my picture set to 100% of the height and width do i
Lucas Neves
@lcneves
Feb 08 2016 02:40
What @scienceoflife said is true. Even on full-mode, Codepen will mess with your code, and sometimes this spoils the result.
Austin West
@scienceoflife
Feb 08 2016 02:41
im pretty sure only presentation mode is worth anything, and you have to pay for that
Bruce Young
@mutantspore
Feb 08 2016 02:41
@andrewchar @scienceoflife this is teh site that links from CodePen that I was refering to. ..seems that they test it on real devices.
https://crossbrowsertesting.com
Andrew Charlebois
@andrewchar
Feb 08 2016 02:41
just weird that the problem was restricted to iphone/ipad and works on my android phone
@mutantspore wish that kind of service was free. free trial is 60 minutes for one week :(
Bruce Young
@mutantspore
Feb 08 2016 02:44
yes well I was just mentioning something that I thought I saw but had never looked at.
Lucas Neves
@lcneves
Feb 08 2016 02:45
@andrewchar Unfortunately it is very common that a site will display differently across browsers. The exercises that required HTML5 audio were a nightmare: some sounds would refuse to play on Firefox, or on Android, or on Blackberry...
Andrew Charlebois
@andrewchar
Feb 08 2016 02:46
@mutantspore i took both my background-position: fixed; and my background-attachment: fixed; out of my code
Bruce Young
@mutantspore
Feb 08 2016 02:50
background-attachment: scroll; try just that… it will scroll but you could also leave it fixed and add a media query for small screens to make it scroll then
Andrew Charlebois
@andrewchar
Feb 08 2016 02:55
noticed taking out the fixed breaks the parallax effect
Bruce Young
@mutantspore
Feb 08 2016 02:57
yes.. so leave it in but add down the end of your css some thing like
@media only screen and (max-width: 768px) {
  #home {
    background-attachment: scroll;
  }
and that wil give you the effect on a bigger screen but go to scroll on a smaller and the pic should look ok.
Andrew Charlebois
@andrewchar
Feb 08 2016 03:05
doesnt fix anything for iphone
and i just broke my contact me buttons im not even sure how lol
weird. that code you just posted makes all my contact me buttons unstyle
Bruce Young
@mutantspore
Feb 08 2016 03:11
@andrewchar not sure what you actually did but here is a fork of your pen with it put in how i intended
http://codepen.io/MutantSpore/pen/wMYVKp
Kevin Elser
@CoffeeCodeKevin
Feb 08 2016 03:12
CodePen is currently saying literally everything in my JS is undefined.
What
Maritimesailor
@Maritimesailor
Feb 08 2016 03:13
Hello all, I was wondering using Jquery how to a have the user clikc a button that would equal the value that they clicked on here is my pen. I’m doing the javascript calculator http://codepen.io/whatisthis/pen/pgKdGz
Kevin Elser
@CoffeeCodeKevin
Feb 08 2016 03:13
I didn't change anything at all in my code, so I'm beyond confused.
And it's working again on refresh.. alright then.
Bruce Young
@mutantspore
Feb 08 2016 03:15
ok I didn’t see the “special” id you had for home
@media only screen and (max-width: 768px) {
  #home:before {
    background-attachment: scroll;
  }
}
Andrew Charlebois
@andrewchar
Feb 08 2016 03:15
@mutantspore i put in the code you sent me before all of my contact me button styling instead of after
Bruce Young
@mutantspore
Feb 08 2016 03:16
@andrewchar yes it didn’ t have a closing bracket .. cut /paste error
Andrew Charlebois
@andrewchar
Feb 08 2016 03:17
/smacks forhead
Bruce Young
@mutantspore
Feb 08 2016 03:17
anyway it works in that fork now if you look again.. it stays fixed with a wide screen but scrolls on a mobile size
Andrew Charlebois
@andrewchar
Feb 08 2016 03:22
just checked on the iphone. everything is still not working
Bruce Young
@mutantspore
Feb 08 2016 03:23
and as others have noted… codepen is trickey to view stuff properly. try the debug view as that’s closest to “real” as you can get with the free version
Andrew Charlebois
@andrewchar
Feb 08 2016 03:25
not exactly sure what im suppose to do in debug mode
Bruce Young
@mutantspore
Feb 08 2016 03:26
just use it as it presents the page outside of teh codePen iframe i think
@andrewchar look at my personal site. it’s on my server (and codePen). i let the initial pic scroll but the contacts pic is fixed for big screens but scrolls for mobile.
Andrew Charlebois
@andrewchar
Feb 08 2016 03:33
alright 1 problem solved. linking the debug link to the iphone shows all my content, only thing thats messed up is my main picture is not responsive
yeah im reading your code now
Bruce Young
@mutantspore
Feb 08 2016 03:38
@andrewchar lol well I was just showing you a solution and an example… not actually expecting you to work though my code. My portfolio cards are dynamically generated and flip so that may be just a confusion for you.
rphares
@rphares
Feb 08 2016 03:41
ooops, that was a brownie-free thanks. thank you, @mutantspore :blush:
CamperBot
@camperbot
Feb 08 2016 03:41
rphares sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1098 | @mutantspore | http://www.freecodecamp.com/mutantspore
Tim Bell
@MindfulBell
Feb 08 2016 03:51
Anoyne here use sublime text?
Sophanarith Sok
@sok213
Feb 08 2016 03:51
I do
Andrew Charlebois
@andrewchar
Feb 08 2016 03:51
@mutantspore thanks for all your help, always greatly appreciated
CamperBot
@camperbot
Feb 08 2016 03:51
andrewchar sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Andrew Charlebois
@andrewchar
Feb 08 2016 03:51
yup
CamperBot
@camperbot
Feb 08 2016 03:51
:star: 1099 | @mutantspore | http://www.freecodecamp.com/mutantspore
Tim Bell
@MindfulBell
Feb 08 2016 03:52
i am abandoning codepen from here on out for my React challenges...what do I need to do to set up sublime text so I can preview my work? is it just 'npm start' in the command prompt? to set up a local server?
Martin Maza
@87maza
Feb 08 2016 03:52

I've just started creating my about me page, I'm struggling on vertical and horizontal centering text inside my parent div.

Code: http://codepen.io/87maza/pen/yeRzwX

I've used css-tricks as reference, I did the flexbox and fixed height width method but it still won't center.

This was my reference: https://css-tricks.com/centering-css-complete-guide/

Thanks in advance!

Bruce Young
@mutantspore
Feb 08 2016 03:54
@MindfulBell some one in the FreeCodeCamp/HelpDataViz room might know
Andrew Charlebois
@andrewchar
Feb 08 2016 03:54
@mutantspore i like your :hover effects for your nac bER
navbar*
@MindfulBell nope you dont need to do all that
@MindfulBell just create an index.html file and save it whereever and open that on your browser
all the work you do within that file in your text editor can then be viewed in the browser locally
just save the work in sublime and refresh browser and youll see all your work
Tim Bell
@MindfulBell
Feb 08 2016 03:59

@87maza my general practice for horizontal centering is:

ok, so even if I have a bunch of packages and dependencies and things in my project...i just open index.html and it works?

what if I am using an API or something
@andrewchar
Andrew Charlebois
@andrewchar
Feb 08 2016 04:00
aslong as you have all your meta tags linking stuff into your index.html
Sophanarith Sok
@sok213
Feb 08 2016 04:00
@MindfulBell you don't need a server to work with an API
Andrew Charlebois
@andrewchar
Feb 08 2016 04:00
i have no ides about API
Sophanarith Sok
@sok213
Feb 08 2016 04:01
@MindfulBell I will start to work on server apps when you get to the backend section, so I wouldn't worry about it now
you**
@87maza are you using bootstrap?
Tim Bell
@MindfulBell
Feb 08 2016 04:24
So in order to set up a dev environment for React...bare bones I need html, css, .js file...in my HTML I need to link to react library and any other libraries, and link to my actual js file in the same director with /index.js..right? I have babel installed on Sublime Text
am i good?
Cause so far, nothing is running/appearing when i try to preview what i have built
Sophanarith Sok
@sok213
Feb 08 2016 04:28
@MindfulBell yeah that's basically how you do it
Andrew Charlebois
@andrewchar
Feb 08 2016 04:28
im sorry im not really sure if i can answer your entire question. i have no experience outside of setting up an environment with just my html file, my style sheets and my js file
Sophanarith Sok
@sok213
Feb 08 2016 04:28
open the console on your browser and check for any errors to see if you linked everything correctly. @MindfulBell
Tim Bell
@MindfulBell
Feb 08 2016 04:29
@sok213 only error: 'Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode'
Andrew Charlebois
@andrewchar
Feb 08 2016 04:29
i have no idea where to start with this quote generator or how to google for it without finding just code to get answers hmmm
Tim Bell
@MindfulBell
Feb 08 2016 04:29
i have a babel preprocessor...
Sophanarith Sok
@sok213
Feb 08 2016 04:30
@MindfulBell also, for react, try writing it in the same file as your html because I think in order to write the react code in a seperate js file, you would need to start up a server
Susan
@SusanGrattan
Feb 08 2016 04:31
can anyone help me figure out where I went wrong with JSON?
http://codepen.io/SusanGrattan/pen/EPdzOQ?editors=1010
Sophanarith Sok
@sok213
Feb 08 2016 04:31
also! you need to use a specific version of babel with react @MindfulBell
Bruce Young
@mutantspore
Feb 08 2016 04:31
@andrewchar lol .. you don’t need to use an API.. just find some quotes and put them in an array. then you need to select one radomly on a button press and put it on the “screen”.
the twitter bit seems hard but isn’t . Look up tweet intents
Susan
@SusanGrattan
Feb 08 2016 04:31
I'm basically just trying to do what the JSON lessons did and display the objects in HTML..
Sophanarith Sok
@sok213
Feb 08 2016 04:31
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
@MindfulBell that one
at least, that's what I learned throughout researching react within the last week, I might be wrong
Tim Bell
@MindfulBell
Feb 08 2016 04:33
@sok213 well thats silly...writing React in the same file as html...
@sok213 i have that babel file...
grrr
Bruce Young
@mutantspore
Feb 08 2016 04:33
@SusanGrattan remeber what I mentioned bout the json call being inside the geolocate or at least called from inside the geolocate. Wrap the getjson in a function and call it from inside the geolocate
Andrew Charlebois
@andrewchar
Feb 08 2016 04:34
@mutantspore i thought it would make it better if i could use an API so i was not restricted to only using quotes that i have in an array
Tim Bell
@MindfulBell
Feb 08 2016 04:35
this is the link for React right?
    <link rel="script" type="text/js" href="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js">
Bruce Young
@mutantspore
Feb 08 2016 04:35
@andrewchar your choice , it’s just that you haven’t done that bit yet in teh course… jump ahead and have a quick look
Sophanarith Sok
@sok213
Feb 08 2016 04:35
Yeah, it looks like it
Andrew Charlebois
@andrewchar
Feb 08 2016 04:35
@mutantspore oh ok they teach it later. in that case ill do it the array way!
Susan
@SusanGrattan
Feb 08 2016 04:36
Yeah I remember @mutantspore I thought my doc ready function was good enough. =| should I use a click event like the lessons?
Bruce Young
@mutantspore
Feb 08 2016 04:36
plenty of projects in teh use of API’s later
Andrew Charlebois
@andrewchar
Feb 08 2016 04:36
@mutantspore ok thanks.
CamperBot
@camperbot
Feb 08 2016 04:36
andrewchar sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: andrewchar already gave mutantspore points
Bruce Young
@mutantspore
Feb 08 2016 04:37
@SusanGrattan i’ll look at yours and fork it
Sophanarith Sok
@sok213
Feb 08 2016 04:37
@MindfulBell if you are wondering how I have my html links setup. here is a screenshot.
reference.png
Susan
@SusanGrattan
Feb 08 2016 04:37
I think I might understand what you're saying now. @mutantspore I'll try it.
Andrew Charlebois
@andrewchar
Feb 08 2016 04:38
not sure how but my portfolio got 154 views so far lol
i guess its posted on some page in codepen publicly ?
Bruce Young
@mutantspore
Feb 08 2016 04:39
ok well make a function called say .. getWeather with the your getjson stuff in it. then call that function from just after you get the lat / lon in the geolocate.
Tim Bell
@MindfulBell
Feb 08 2016 04:40
@sok213 sigh...still doesn't work
Bruce Young
@mutantspore
Feb 08 2016 04:40
@SusanGrattan you also need to put http:// infront of your URL
Joseph Morse
@jnmorse
Feb 08 2016 04:40
@MindfulBell if you have your code up on github or someplace it can be seen, it might be easier to figure out what is wrong.
Bruce Young
@mutantspore
Feb 08 2016 04:40
@SusanGrattan and… use the api key that you can get free from the site
Sophanarith Sok
@sok213
Feb 08 2016 04:41
@MindfulBell ill try to help
I have Pmed you
Susan
@SusanGrattan
Feb 08 2016 04:42
@mutantspore gotcha.. Sorry I didn't fully understand last time you told me. I just found it on the site. Thank yous
CamperBot
@camperbot
Feb 08 2016 04:42
susangrattan sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1100 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 08 2016 04:43
@SusanGrattan i didn’t expect that you would.. I just dumped a lot of things you had to do to get started at once hoping you’d atleast remember .." he said something about…."
Susan
@SusanGrattan
Feb 08 2016 04:46
@mutantspore so if I have to use the url with the key do I not use the url with the coordinates? If I do how do I manage that?
Bruce Young
@mutantspore
Feb 08 2016 04:46
just tack it on the url &APPID=123123424k23g4f5234gf
@SusanGrattan obviously a made up key lol
Susan
@SusanGrattan
Feb 08 2016 04:49
ah gotcha. Well I got my key and am displaying data for Moscow so I'm getting somewhere now =D thanks so much
Bruce Young
@mutantspore
Feb 08 2016 04:51
ok what you had earlier for the url was right but just needed the key. also use \weather\ not \forecast\ so you just the one day
okay, now it's stopped working. I can't seem to get the quotes right.. And even when I think I have them right it doesn't work
oops forgot http again..
"'http://api.openweathermap.org/data/2.5/weather?lat=' +lat+ '&lon=' +lon+ '&APPID=977c47562a4c5893ea88bbca1c425e98'"
Susan
@SusanGrattan
Feb 08 2016 05:04
Right, still not working. Can anyone check it out to see if they notice what's wrong with my JSON call?
@SusanGrattan have a look at that version of your pen
Susan
@SusanGrattan
Feb 08 2016 05:06
Thanks @mutantspore I'm looking now
CamperBot
@camperbot
Feb 08 2016 05:06
susangrattan sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: susangrattan already gave mutantspore points
Susan
@SusanGrattan
Feb 08 2016 05:07
Got it. It was because I moved my JSON function outside of my doc ready func..
Bruce Young
@mutantspore
Feb 08 2016 05:07
note the temperate in in Kelvin.
yes that was one thing.
Susan
@SusanGrattan
Feb 08 2016 05:08
I was wondering about that temperature lol..
I noticed I had too many quotes too... I'll get there one day.
Bruce Young
@mutantspore
Feb 08 2016 05:10
you can ask for it in “imperial” &units=imperial or metric
Susan
@SusanGrattan
Feb 08 2016 05:15
Sweet. Fixed that! Now I know how I can toggle it too =D Thank you so much!
Martin Maza
@87maza
Feb 08 2016 05:22
@andrewchar no everything is vanilla
@andrewchar yeah i based all my code on the css-tricks centering site, no luck man...
IamKien
@IamKien
Feb 08 2016 05:42
Hi, I am at zipline project where I am suppose to build a random quote machine, but where am I suppose to get the quote itself? It does not have a clear instructions.
Bruce Young
@mutantspore
Feb 08 2016 05:45
@tyteeye510 just go out and grab some. You don’t have to use an api yet. Find a bunch of quotes on the net and put them in an array (or array of objects). API’s come later but if you are feeling lucky lol...
IamKien
@IamKien
Feb 08 2016 05:47
@mutantspore , thanks. Thats what I am thinking, I am looking at the example quote and it seems way too advance for the current project considering that it does not teach ajax, json, etc yet
CamperBot
@camperbot
Feb 08 2016 05:47
tyteeye510 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Bruce Young
@mutantspore
Feb 08 2016 05:47
@tyteeye510 you’ll then need to pick one at random when a button is clicked and put it on the “screen”.
CamperBot
@camperbot
Feb 08 2016 05:47
:star: 1101 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 08 2016 05:48
@tyteeye510 yes all that comes in the second set of ziplines
Salman Shahid
@salman-shahid
Feb 08 2016 07:02
Hey, I'm doing the quote machine project and I have a question about setting properties in CSS using jQuery. Here is my project: https://jsfiddle.net/himynameissal/dn3ekoos/ In my project, using firebug, I can see that my #quote-twitter line:height is set to 150 (correct amount that I specified with jQuery) but my line height is not set on the output screen and I can't see the icon. Any ideas on how I can fix this? Thanks.
Mahmoud
@mzeid1985
Feb 08 2016 07:13
Hi,
Any one can help me in the Personal Portfolio Web page
??
Sophanarith Sok
@sok213
Feb 08 2016 07:14
@mzeid1985 Sure, what is it that you need help with?
Mahmoud
@mzeid1985
Feb 08 2016 07:14
I need to build this page, but I'm still beginner in web platform
and don't know how to start
thanks @sok213
CamperBot
@camperbot
Feb 08 2016 07:15
mzeid1985 sends brownie points to @sok213 :sparkles: :thumbsup: :sparkles:
:star: 542 | @sok213 | http://www.freecodecamp.com/sok213
Sophanarith Sok
@sok213
Feb 08 2016 07:15
are you building it on codepen?
Mahmoud
@mzeid1985
Feb 08 2016 07:15
yes
Salman Shahid
@salman-shahid
Feb 08 2016 07:17
Are you up to the Personal Portfolio project @mzeid1985 ?
Mahmoud
@mzeid1985
Feb 08 2016 07:18
I need to start with the project, I have passed all the challenges before the thisproject
Sophanarith Sok
@sok213
Feb 08 2016 07:18
ok, so first you need to to think about how you want your portfolio project to look. Then you would need to convert your idea into html and CSS. Do you have an idea of how you want it to look?
@mzeid1985
do you plan on using bootstrap?
Mahmoud
@mzeid1985
Feb 08 2016 07:19
I would like to build some one similar to the example
yes I would like to work with bootstrap
Andrew Charlebois
@andrewchar
Feb 08 2016 07:19
can someone check this pen out. im doing quote generator and im trying to get my button click to run my function, first time i try it. im not really sure how to link up an event like button click with a function. is my code anywhere near what it should be to get this?
Mahmoud
@mzeid1985
Feb 08 2016 07:20
@sok213 can you help me from scratch and how to think about it?
Salman Shahid
@salman-shahid
Feb 08 2016 07:20
You'll have to do a lot of googling. There are concepts that you will have to use that you don't know about right now. The way I broke the personal project down was:
  1. nav bar
  2. setting background images and dividing page into 4 parts
To start off google "how to create nav bar". The nav bar is what's at the top of the example page that sticks to the top when you scroll down
Andrew Charlebois
@andrewchar
Feb 08 2016 07:21
Sophanarith Sok
@sok213
Feb 08 2016 07:22
@mzeid1985 Basically, every page starts with a navbar at the top, content in the middle, and footer at the bottom, so I agree with @mynameissal , you should draw it out in your head or on a piece of paper and try your best to start writing the html code and see how far you get.
wireframes-simple.png
Andrew Charlebois
@andrewchar
Feb 08 2016 07:22
@mzeid1985 use the css, components, javascript tabs on the top. youll see everything you can do with bootstrap. if you dont understand parts of it, google it. plenty of great youtube vids out there
Salman Shahid
@salman-shahid
Feb 08 2016 07:22
@andrewchar I think as a beginner he should stick to what FCC advices which is using codepen
Andrew Charlebois
@andrewchar
Feb 08 2016 07:23
@mynameissal he will still use codepen
Sophanarith Sok
@sok213
Feb 08 2016 07:24
@mzeid1985 also, remember, if you want to use bootstrap, click on settings within the html tab in codepen and at it from the libraries
Mahmoud
@mzeid1985
Feb 08 2016 07:24
yes
Salman Shahid
@salman-shahid
Feb 08 2016 07:25
I think just before he is given access to the Personal Portfolio challenge FCC goes through how to use Codepen.
Mahmoud
@mzeid1985
Feb 08 2016 07:25
I don't have problem with codepen
but I need a start point to know how to start to build such page
Sophanarith Sok
@sok213
Feb 08 2016 07:26
build the navbar
first.
Mahmoud
@mzeid1985
Feb 08 2016 07:26
Ok I'll try
Sophanarith Sok
@sok213
Feb 08 2016 07:26
ok, good luck!
Salman Shahid
@salman-shahid
Feb 08 2016 07:27
Well, there is no right way to create your project and it isn't like the challenges that you've done so far where there is usually always a correct answer. There are a lot of different ways of doing things and I know it sounds scary - it is but you'll get used to it. I've been doing the quote machine and personal project for the last two days and I have little progress to show but I have learnt a lot.
Mahmoud
@mzeid1985
Feb 08 2016 07:28
and once I finish I'll tell you, so you can guide me for the coming steps
thank you
Salman Shahid
@salman-shahid
Feb 08 2016 07:29
Ahaha, I'll see what I can do I am a beginner too.
Zoher Ali
@Zoher-ali
Feb 08 2016 08:02
hey every1!
Bruce Young
@mutantspore
Feb 08 2016 08:03
@andrewchar ok I’ve just stuck to pure JS as you have (not jQuery). Here is what you needed to make it actually work i cleaned up the random function a bit too. there area couple of comments in the code.
http://codepen.io/MutantSpore/pen/RrqbOm?editors=1010
Zoher Ali
@Zoher-ali
Feb 08 2016 08:03
plz some1 help me i am not able to add background image in my div ...in codepen
Salman Shahid
@salman-shahid
Feb 08 2016 08:05
@Zoher-ali background-image: url(link);
Google: "background-image w3school properties" - It will help you with centering and making the image only cover the div.
Zoher Ali
@Zoher-ali
Feb 08 2016 08:07
@mynameissal ```
background-image : url("E:\images.jpg");
i have done this but its not working
Salman Shahid
@salman-shahid
Feb 08 2016 08:07
Are you using codepen?
Sophanarith Sok
@sok213
Feb 08 2016 08:07
@Zoher-ali You cant add images from your local computer
it has to be a link that is from the internet
Salman Shahid
@salman-shahid
Feb 08 2016 08:08
@mutantspore Thanks! That's exactly what I needed :D
CamperBot
@camperbot
Feb 08 2016 08:08
mynameissal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1102 | @mutantspore | http://www.freecodecamp.com/mutantspore
Zoher Ali
@Zoher-ali
Feb 08 2016 08:08
@mynameissal yes
Salman Shahid
@salman-shahid
Feb 08 2016 08:08
As @sok213 said you're referencing your local drive. You should upload your image to something like imgur or dropbox and use the direct link as a reference.
Zoher Ali
@Zoher-ali
Feb 08 2016 08:11
@mynameissal @sok213
background-image : url("https://www.google.co.in/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj0lK7A2-fKAhXHBo4KHcHOAu4QjRwIAw&url=http%3A%2F%2Fgetlatestwallpapers.com%2Famazing-and-wonderful-world-best-animated-images-and-photos%2Flatest-wonderful-pc-and-laptop-wallpaper-free%2F&psig=AFQjCNGGY2HcoGD_AkIsQyFvkoxtROMhEw&ust=1455005364392710");
its also not working
Andrew Charlebois
@andrewchar
Feb 08 2016 08:11
@mutantspore in my function for the math random part should it be have a -1 at the end
Jenn Hardy
@smokeyLilac
Feb 08 2016 08:12
hi all! general question about my personal portfolio page: I'm following the instructions regarding using space holders for my projects since I do not have any prior projects. How many projects am I going to want to display on my page at a time? Is there a general rule or is it personal preference or what?
Salman Shahid
@salman-shahid
Feb 08 2016 08:12
@Zoher-ali It has to be a direct link. (ending in a file format jpg, png etc.
Andrew Charlebois
@andrewchar
Feb 08 2016 08:13
@JennHardy apparently there are over 20 projects to do in fcc. i used 6 place holders in mine.
Sophanarith Sok
@sok213
Feb 08 2016 08:13
@Zoher-ali Yeah, try using something like this http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg
that's a nice wallpaper btw lol ^
Andrew Charlebois
@andrewchar
Feb 08 2016 08:13
@JennHardy if i need more then that, once i am that far i would probly just make a separate page for past work
Jenn Hardy
@smokeyLilac
Feb 08 2016 08:14
thanks @andrewchar good thinking. does anyone else have any suggestions?
CamperBot
@camperbot
Feb 08 2016 08:14
jennhardy sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:star: 274 | @andrewchar | http://www.freecodecamp.com/andrewchar
Andrew Charlebois
@andrewchar
Feb 08 2016 08:15
i like that picture
Sophanarith Sok
@sok213
Feb 08 2016 08:16
I know, right
so aesthetic
Zoher Ali
@Zoher-ali
Feb 08 2016 08:16
@mynameissal @sok213 i had given my div id secondDiv and added image to it
#secondDiv {
  background-image : url("http://getlatestwallpapers.com/wp-content/uploads/2015/02/latest-wonderful-pc-and-laptop-wallpaper-free.jpg");

}
now wats wrong with it :worried:
Sophanarith Sok
@sok213
Feb 08 2016 08:17
@Zoher-ali Post your codepen link here
so we can see everything
Andrew Charlebois
@andrewchar
Feb 08 2016 08:18
you need to host your image
gr4vy
@gr4vy
Feb 08 2016 08:18
need help with keydown event handler function in my reactjs game zipline, the little guy should not go past the wall, so why does he? http://codepen.io/gr4vy/pen/ZQqmBx
Andrew Charlebois
@andrewchar
Feb 08 2016 08:19
Sophanarith Sok
@sok213
Feb 08 2016 08:20
@andrewchar he already has a hosted link
Andrew Charlebois
@andrewchar
Feb 08 2016 08:20
didn't know. im coming to the party late lol
all i seen was his images coming from his e drive
Sophanarith Sok
@sok213
Feb 08 2016 08:21
@Zoher-ali You didn't give your div a height or width, so that's why you cant see anything
Bruce Young
@mutantspore
Feb 08 2016 08:21
@andrewchar no the length is 10 ..
from teh docs page
// Returns a random integer between min (included) and max (included)
// Using Math.round() will give you a non-uniform distribution!
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
min = 0 and max = 9
Andrew Charlebois
@andrewchar
Feb 08 2016 08:22
oh..
Sophanarith Sok
@sok213
Feb 08 2016 08:22
@Zoher-ali give your div a width: 500px and height: 500px and then you'll see it, it won't look pretty but it gives you an idea of how things work
Zoher Ali
@Zoher-ali
Feb 08 2016 08:22
@sok213 yeah i got it thanks
CamperBot
@camperbot
Feb 08 2016 08:22
zoher-ali sends brownie points to @sok213 :sparkles: :thumbsup: :sparkles:
:star: 543 | @sok213 | http://www.freecodecamp.com/sok213
Zoher Ali
@Zoher-ali
Feb 08 2016 08:22
:smile:
Bruce Young
@mutantspore
Feb 08 2016 08:23
@andrewchar this bit max - min + 1)) + min is 10 which is the length of the array
Andrew Charlebois
@andrewchar
Feb 08 2016 08:24
@mutantspore i feel like your my mentor, always around when i ask a question lol i guess that would mean i owe you some cash then eh, mentors are not cheap :P
Bruce Young
@mutantspore
Feb 08 2016 08:25
:)
Andrew Charlebois
@andrewchar
Feb 08 2016 08:26
now for the fun part
how am i to design my page
Bruce Young
@mutantspore
Feb 08 2016 08:27
what sort of quotes are you using?
Andrew Charlebois
@andrewchar
Feb 08 2016 08:27
oh
i didn't think about that yet either haha
i like inspirational quotes
prob those
Bruce Young
@mutantspore
Feb 08 2016 08:28
what mood or theme does that invoke? what type of feel do you want to convey? once you think about that you can pick some graphics or colors to suit
Andrew Charlebois
@andrewchar
Feb 08 2016 08:28
good call, i was thinking about it backwards
will have to wait for tomorrow. its 3:30 a.m i must sleep
Bruce Young
@mutantspore
Feb 08 2016 08:29
@andrewchar remember you’ll also want to include an author so you may have to add a second dimention to your array for the author
Andrew Charlebois
@andrewchar
Feb 08 2016 08:30
a second dimention o.O
Bruce Young
@mutantspore
Feb 08 2016 08:30
ooooooooo
lol
or even an array of objects
Andrew Charlebois
@andrewchar
Feb 08 2016 08:32
mindblown
hmm
doing it like this work var arr = [["quote1", "author"], [""quote2, "author"]];
thats what you meant by second dimension right
Andrew Charlebois
@andrewchar
Feb 08 2016 08:38
forget i asked, that doesnt work atall
Salman Shahid
@salman-shahid
Feb 08 2016 08:40
It should work
Bruce Young
@mutantspore
Feb 08 2016 08:40
@andrewchar ye sthat’s right.. how are you reading it though
Salman Shahid
@salman-shahid
Feb 08 2016 08:40
You will just have to change the way you reference
Andrew Charlebois
@andrewchar
Feb 08 2016 08:42
not sure i follow
Bruce Young
@mutantspore
Feb 08 2016 08:42
@andrewchar theQuote will equal arr[randomchoice][0]
and the author will be arr[randomchoice][1]
@andrewchar though your little arr example has a spare “ mark
well, out of order probably cut and paste error
Salman Shahid
@salman-shahid
Feb 08 2016 08:44
@mutantspore How long have you been doing FCC?
Andrew Charlebois
@andrewchar
Feb 08 2016 08:45
i will have to ponder this tomorrow, getting way to late lol
or early i should say
@mutantspore again, thanks for all your help!
goodnight
CamperBot
@camperbot
Feb 08 2016 08:45
:star: 1103 | @mutantspore | http://www.freecodecamp.com/mutantspore
andrewchar sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Bruce Young
@mutantspore
Feb 08 2016 08:45
yes it’s the same time here lol zzzzzz
@mynameissal about 6 months but I keep avoiding doing stuff I should. lol
I’m from Gympie and also lived in Deception Bay for many years @mynameissal
though I’m in Florida now
I see you are in Brisbane
Salman Shahid
@salman-shahid
Feb 08 2016 08:49
Oh cool.
Bruce Young
@mutantspore
Feb 08 2016 08:49
so yes I’m Australian lol
Salman Shahid
@salman-shahid
Feb 08 2016 08:49
I see, did you do any web dev before FCC?
Bruce Young
@mutantspore
Feb 08 2016 08:51
lol well yes .. since the web was “born” lol but not Javascript . well I could read it but not write it much.
my web dev goes back to 1994
Salman Shahid
@salman-shahid
Feb 08 2016 08:51
Wow, that's pretty long.
Bruce Young
@mutantspore
Feb 08 2016 08:51
and multimedia before that
yes.. old bastard
but I need a job so I’m updating my skills and technologies
FCC gives some focus and direction … plus helps build a portfolio
Salman Shahid
@salman-shahid
Feb 08 2016 08:55
I see.
Salman Shahid
@salman-shahid
Feb 08 2016 09:04
Man, at first I thought these zip line projects were scary but I am enjoying them now - they're so fun.
Bruce Young
@mutantspore
Feb 08 2016 09:08
@mynameissal yes much better than the puzzles, though they are satisfying, but you can learn more and express yourself better with a whole project
they can be daunting and seemingly impenetrable for many campers also.. but once you pry back the edge you can get right into it and have fun
which reminds me I should finish my calculator and tic-tac-toe :(
lol
Salman Shahid
@salman-shahid
Feb 08 2016 09:25
Yeah.. even though there isn't always a "correct" answer like in the earlier challenges I've learnt a lot even though most of it was because of typos!
Brown Fitterman
@brownfitterman
Feb 08 2016 10:06
Does anybody here have any exercises that will hep me master HTML and CSS
Salman Shahid
@salman-shahid
Feb 08 2016 10:07
Read all HTML and CSS documentation!
:D
@brownfitterman ^ If you're good at memorising that is one way. Personally, I mostly learn by doing. So, I recommend completing web projects?
Brown Fitterman
@brownfitterman
Feb 08 2016 10:11
@mynameissal I can memorize but i really prefer to see something in action then work on completing something
Salman Shahid
@salman-shahid
Feb 08 2016 11:05
@brownfitterman Well I guess you could go to a website that looks cool and view the source and see how everything works. I know that people here post stuff you can look at like personal projects.
kirbyedy
@kirbyedy
Feb 08 2016 11:06
@brownfitterman there is a lot of youtube videos as well if you like to watch and learn
Salman Shahid
@salman-shahid
Feb 08 2016 11:10

Anyone have any idea on how I can fix my font resizing script?

Some important info:

  • quote machine project
  • problem related to js and css
  • my script is supposed to check how many lines of text is in the quote text (changes when new quote button is pressed) which it does correctly. It then is supposed to change the size of the font to suit the quote text. e.g. if there is 6 lines of text it will reduce the font-size so the 6 lines can fit on 2 lines. I can allocate the new size to a variable but when I try allocate the new size to the quote-text font-size I get an undefined message in my debugger. (you can see the current size and new size in console on your debugger)
  • i'm not sure why i am having the problem but i have put the function that has the problem below my quote array and I have commented where the error occurs (//where the error occurs!)

https://jsfiddle.net/himynameissal/dn3ekoos/

Thanks, in advance.

Darla Sudheer
@sudheerdarla
Feb 08 2016 11:57
Hello there...small help needed..
How to create new page in blogger with full width and height video (just video, after clicking the video it should redirect to another page)
This message was deleted
sigursiguros
@sigursiguros
Feb 08 2016 13:02
Dear campers, would you please review my javascript calculator. Thanks.
Thanks @lcneves I've made some changes to the functions. Would you mind taking a look again. Thanks. http://codepen.io/Sigursiguros/pen/XXBWLd?editors=0010
CamperBot
@camperbot
Feb 08 2016 13:03
sigursiguros sends brownie points to @lcneves :sparkles: :thumbsup: :sparkles:
:star: 341 | @lcneves | http://www.freecodecamp.com/lcneves
sigursiguros
@sigursiguros
Feb 08 2016 13:04
Hi guys would you mind reviewing my calculator. Thanks.
Salman Shahid
@salman-shahid
Feb 08 2016 13:04
@sigursiguros % is meant to take the remainder of the division of two numbers
e.g. 9 % 4 = 1
Also, User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.
Actually, your calculator does that.
sigursiguros
@sigursiguros
Feb 08 2016 13:06
@mynameissal yes it should
is there anything else wrong?
can I move ahead?
Salman Shahid
@salman-shahid
Feb 08 2016 13:06
Yes
35.5 + .35.
I don't think there is anyone stopping you from moving ahead. I think the projects are all self-paced. I have been working on my portfolio and my quote generating machine both at the same time.
Joseph Morse
@jnmorse
Feb 08 2016 13:27
@sigursiguros your calculator doesn't allow you to do anything beyond the percent like times it to something, also you can't subtract numbers trying to enter 6 - 3 ends up resulting in -9, it should return 3..
@mynameissal the fiddle you posted earlier btw, you weren't targeting $("#quote-text") on some of the lines which is one problem among many, after you change those lines your font size just ends up getting increasing smaller every time you generate a new quote.
Salman Shahid
@salman-shahid
Feb 08 2016 13:55
@jnmorse Thanks, I fixed the typo. I fixed the constantly getting smaller font-size problem, too - I created a default font-size that is applied before a quote is generated.
CamperBot
@camperbot
Feb 08 2016 13:55
mynameissal sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 378 | @jnmorse | http://www.freecodecamp.com/jnmorse
Salman Shahid
@salman-shahid
Feb 08 2016 13:55
Any other problems that you saw?
Joseph Morse
@jnmorse
Feb 08 2016 13:57
@mynameissal Yeah where you getting your random quote quoteShown = myQuotes[getRandomIntInclusive(0, myQuotes.length -1)]; without the -1 occasionally it was trying to grab a quote that did not exist
Salman Shahid
@salman-shahid
Feb 08 2016 13:58
I noticed that too..
But it was at odd quote numbers like quote 8 / 16 etc.
Joseph Morse
@jnmorse
Feb 08 2016 13:59
@mynameissal don't know about that but since arrays are zero indexed, after that change I didn't notice an error .length of undefined poping up

@mynameissal also your splitting the quote text and the author name, then for some reason slicing those values which I don't know what for, you could just store an array of objects for your quotes and not split them later, something like

var quotes = [
  {text: 'some quote test', author: 'author name'},
  {text: 'another quote', author: 'some other author'}
];

then when your displaying the quote text you can just use something like quotes[index].text

Salman Shahid
@salman-shahid
Feb 08 2016 14:04
I split it because Tumblr takes author seperate from text. I spliced to removed spaces between the split -
Matt Leonard
@matty22
Feb 08 2016 14:04
Is it possible to have a webpage remember your geolocation permission choice?
Salman Shahid
@salman-shahid
Feb 08 2016 14:05
Oh, I see what you mean. Store it once so you're not splitting it constantly when pressing button.
Joseph Morse
@jnmorse
Feb 08 2016 14:05
@mynameissal I see, well if you set them up in that format your quotes as an array of objects you'd save yourself some code and the quote text and author already seperated
Salman Shahid
@salman-shahid
Feb 08 2016 14:08
@matty22 Firefox: go to about:config then search for geo.enabled and change value to true.
I'm guessing there should be a similar function for other browsers.
Joseph Morse
@jnmorse
Feb 08 2016 14:09
@matty22 I think generally with chrome it stores you already giving permission or not for a site.
Matt Leonard
@matty22
Feb 08 2016 14:09
Where is about in FF?
Salman Shahid
@salman-shahid
Feb 08 2016 14:09
In your address bar type: about:config
Accept the security warning. Click on the search bar and type geo.enabled then double click the "value" option and it should become enabled and show true as the value.
Matt Leonard
@matty22
Feb 08 2016 14:12
it is already defaulted to true.
But each time I refresh my Local Weather app, it waits for me to say "Yes, use my geolocation."
Maybe it's cause it's still a local file?
Salman Shahid
@salman-shahid
Feb 08 2016 14:14
Not sure, if you're accessing it from Firefox you shouldn't get that message.
Joseph Morse
@jnmorse
Feb 08 2016 14:14
@matty22 there should be a arrow next to share location, that you can choose to "always share"
Matt Leonard
@matty22
Feb 08 2016 14:14
My only option in Not Now
is* Not Now
Joseph Morse
@jnmorse
Feb 08 2016 14:17
@matty22 not sure on mine I was just loading my weather zipline and I had the option to choose to always share location, are you using and older version perhaps? I got Firefox 44.0
Andrew Charlebois
@andrewchar
Feb 08 2016 14:25
morning campers
Salman Shahid
@salman-shahid
Feb 08 2016 14:25
Good morning
Salman Shahid
@salman-shahid
Feb 08 2016 14:52
If I want a bunch of elements to have the same parent element what would I use?
Could I have them in one div with the same class?
Or should I use <li> tag?
Mahou Kiq
@MahouK
Feb 08 2016 14:58
Hi All
I need some help, I'm doing the stylize stories zipline but have no ideia how to start.
pretty pls?
Salman Shahid
@salman-shahid
Feb 08 2016 15:01
Please link the challenge.
Salman Shahid
@salman-shahid
Feb 08 2016 15:04
I am not up to the API zip lines but what I would do is start of with the UI. If I wanted to replicate the example UI I would need to create a header and set up a number of rows and columns with uniform boxes that have space for title, image, likes and posted date.
From there I guess you could work on the API stuff but I'm not 100% if my method is the best way as I haven't worked with APIs yet.
Mahou Kiq
@MahouK
Feb 08 2016 15:06
I think that's a good idea!
I wish I was this smart. T_T
Thank You! @mynameissal
CamperBot
@camperbot
Feb 08 2016 15:06
mahouk sends brownie points to @mynameissal :sparkles: :thumbsup: :sparkles:
:star: 284 | @mynameissal | http://www.freecodecamp.com/mynameissal
Brenden Niedermeyer
@bniedermeyer
Feb 08 2016 15:08
Does anyone know if we need to use something like JSONP for that stylize new zipline?
or can we just ping the URL?
Salman Shahid
@salman-shahid
Feb 08 2016 15:10
@MahouK Not sure if I'm smart! Lol, I've spent almost 6 hours total stuck on a projects because of typos.
Brenden Niedermeyer
@bniedermeyer
Feb 08 2016 15:11
ah I think I figured it out. Looks like you can't get to it over HTTPS for anyone else in a similar boat
Mahou Kiq
@MahouK
Feb 08 2016 15:28
@bniedermeyer I'm sorry I'm still very new to all of this. So we should use JSONP?
Salman Shahid
@salman-shahid
Feb 08 2016 15:30
Any ideas on why I get: TypeError: (".r" + i).css is not a function for: https://jsfiddle.net/himynameissal/0z1mpm7s/
Joseph Morse
@jnmorse
Feb 08 2016 15:39
@mynameissal cause it looks like your attempting to use jQuery like syntax without jQuery which won't work
Salman Shahid
@salman-shahid
Feb 08 2016 15:39
That's twice I've done that!
I should have realised when it said function wasn't defined. Thanks, again. @jnmorse
CamperBot
@camperbot
Feb 08 2016 15:40
mynameissal sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 379 | @jnmorse | http://www.freecodecamp.com/jnmorse
Andrew Charlebois
@andrewchar
Feb 08 2016 15:48
having a little... i wouldnt say problem. just cant find the solution lol
Pedro Figueiredo
@pedronfigueiredo
Feb 08 2016 15:48
Hi! Having a little bit difficulty making an API call in the weather app challenge…. can someone point me to a link or resource?
Andrew Charlebois
@andrewchar
Feb 08 2016 15:49
for my quote generator. i have quotes that are different lengths. so this is making my button to clock for quotes move up or down, depending on how long the quote is. is there a way to fix in place a box for quotes to be displayed in that will extend upwards with longer text instead of extending downward
youll see here what i mean by the button moves
Robert Uivarosi
@URobert
Feb 08 2016 15:49
@pedronfigueiredo from what I recall you have some links in the instructions. Have you read those ?
Andrew Charlebois
@andrewchar
Feb 08 2016 15:50
i find it annoying that i have to move my mouse to get a new quote
Pedro Figueiredo
@pedronfigueiredo
Feb 08 2016 15:51
yeah it’s this one http://openweathermap.org/current#geo @URobert but I don’t know what to make of the url
also $ajax(); is your friend, and JSONP @pedronfigueiredo
Salman Shahid
@salman-shahid
Feb 08 2016 15:53
@andrewchar postion: absolute; on the button might help
you might have to change some other settings for other elements
Mahou Kiq
@MahouK
Feb 08 2016 15:53
@pedronfigueiredo Hope this helps! :)
Andrew Charlebois
@andrewchar
Feb 08 2016 16:09
@mynameissal breaking down and putting mu button ontop lol
Salman Shahid
@salman-shahid
Feb 08 2016 16:45
:P
Andrew Charlebois
@andrewchar
Feb 08 2016 16:48
having a hard time with this friggen tweet button
i have my button and it opens the tweet box. im using tweet intents for it. just unsure how to auto populate the tweet box with my quote
That's from the example
Andrew Charlebois
@andrewchar
Feb 08 2016 16:55
example?
Salman Shahid
@salman-shahid
Feb 08 2016 16:56
If you hover over the Twitter hyperlink for the example Quote Generator you'll see what I mean
Andrew Charlebois
@andrewchar
Feb 08 2016 16:59
sorry, not sure what your talking about
Robert Uivarosi
@URobert
Feb 08 2016 17:05
@andrewchar Hi. I had a bit of trouble with that as well. Reading this: http://denvycom.com/blog/twitter-button-with-dynamic-custom-data-text-message/ cleared things up for me. You'll end up reconstructing the twetter button for each quote in order to be able to populate the field as you like. Hope it helps. Good luck !
Salman Shahid
@salman-shahid
Feb 08 2016 17:08
@URobert not really
@andrewchar So you can send data through URLs
Robert Uivarosi
@URobert
Feb 08 2016 17:09
@mynameissal that's what I did anyways
Salman Shahid
@salman-shahid
Feb 08 2016 17:09
You can use the following URL to send data to auto-populate the tweet box from the link
Robert Uivarosi
@URobert
Feb 08 2016 17:09
@mynameissal i had a hard time alterning the URL for some reason
Salman Shahid
@salman-shahid
Feb 08 2016 17:09
document.getElementById("abc").href="xyz.php";
You can use that^ @URobert
Andrew Charlebois
@andrewchar
Feb 08 2016 17:11
whats that?
Robert Uivarosi
@URobert
Feb 08 2016 17:12
@mynameissal i tried that, and it actually didn't work for me
Salman Shahid
@salman-shahid
Feb 08 2016 17:12
Really hmm..
Wait i'll link you my jsfiddle
@andrewchar Have a look at my twitter button code
Andrew Charlebois
@andrewchar
Feb 08 2016 17:13
everyone keeps saying this is easy but mi finding it very hard
ive even read all the documentation :(
Salman Shahid
@salman-shahid
Feb 08 2016 17:13
document.getElementById("quote-twitter-link").href = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + quoteShown;
I did it using jQuery and JS
<a href="" id ="quote-twitter-link"><div id="twitter-btn"></div></a>
Do you understand what I'm saying now @andrewchar ?
Andrew Charlebois
@andrewchar
Feb 08 2016 17:16

this is what i have so far

<a href="https://twitter.com/share" class="twitter-share-button" data-text="hey" data-via="Andrew_Char">Tweet</a>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
```
do i have to change that stuff to what you posted

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
Salman Shahid
@salman-shahid
Feb 08 2016 17:17
I don't know there are different ways to do things - I know my way works
Can you link your codepen again
Robert Uivarosi
@URobert
Feb 08 2016 17:18
@andrewchar sorry I can't be more specific right now, but I'm really tired
Robert Uivarosi
@URobert
Feb 08 2016 17:19
@mynameissal Refused to display 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=Check%20out%20this%20cool%20quote%20generator!' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'". for the findle
Salman Shahid
@salman-shahid
Feb 08 2016 17:20
Try right click open in new tab
Andrew Charlebois
@andrewchar
Feb 08 2016 17:20
ive been following from this site https://dev.twitter.com/web/overview
Salman Shahid
@salman-shahid
Feb 08 2016 17:22
Ok, I know how to do it with your method.
In your HTML give a href id="twitter-btn"
Andrew Charlebois
@andrewchar
Feb 08 2016 17:25
<a href="https://twitter.com/share" id=" twiterbtn" class="twitter-share-button" data-text="hey" data-via="Andrew_Char">Tweet</a>
Salman Shahid
@salman-shahid
Feb 08 2016 17:25
Ok, one sec. I'll try to write this in one line then I will explain what it does.
Brb, two minutes.
$("#twitter-btn").data-text = getRandom(); }
paste that after generateBtn.onclick = function() { in your js section
Salman Shahid
@salman-shahid
Feb 08 2016 17:31
I just updated it, so if you copied it before redo it.
I think that should work.
So when your button is clicked it changes the data-text type of your twitter button.
the data-text type is the text that is displayed in the field when you click on the tweet button
Andrew Charlebois
@andrewchar
Feb 08 2016 17:33
Invalid left-hand side in assignment
Salman Shahid
@salman-shahid
Feb 08 2016 17:34
Oh, $("#twiterbtn").data-text = getRandom(); }
Sacharias Sjöqvist
@sacharias
Feb 08 2016 17:34
@finklez Thank you!
CamperBot
@camperbot
Feb 08 2016 17:34
sacharias sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 472 | @finklez | http://www.freecodecamp.com/finklez
Salman Shahid
@salman-shahid
Feb 08 2016 17:34
It's because I spelt the id differently than what you had. If you copy paste that it should work.
How's that @andrewchar ?
Andrew Charlebois
@andrewchar
Feb 08 2016 17:36
still saying invalid left hand side
Salman Shahid
@salman-shahid
Feb 08 2016 17:37
Omg, it's too early, sorry I forgot!
See if removing the curly braces makes a difference (the one at the end of the line that I gave you
gr4vy
@gr4vy
Feb 08 2016 17:39
I am trying to figure out why my onkeydown event handler function doesn't seem to work right... I am trying to get the little green square to move using the green arrows (works) and stop at the walls (doesn't work)... if you get to the wall you can keep pressing in the same direction as wall (the green square won't move, but the value of its position moves in logic creating console errors... http://codepen.io/gr4vy/pen/ZQqmBx
Andrew Charlebois
@andrewchar
Feb 08 2016 17:43
@mynameissal what language code is that
Salman Shahid
@salman-shahid
Feb 08 2016 17:49
JS but I don't know what's wrong with my code. I think there is also something wrong with your JS twitter code. I get an error when I try to run your codepen..
Salman Shahid
@salman-shahid
Feb 08 2016 17:56
@andrewchar Yeah I'm getting no where with this..It's 4am here so I'm heading to bed. I'll see what I can do to help tomorrow.. I am all over the place right now..
Andrew Charlebois
@andrewchar
Feb 08 2016 17:56
@mynameissal its okay. thanks anyway
CamperBot
@camperbot
Feb 08 2016 17:56
andrewchar sends brownie points to @mynameissal :sparkles: :thumbsup: :sparkles:
:star: 285 | @mynameissal | http://www.freecodecamp.com/mynameissal
Kevin Elser
@CoffeeCodeKevin
Feb 08 2016 19:24
Anyone know of any way to keep animations from all happening at once in a for loop?
I have it set up so it'll animate one of 4 divs depending on a value I got from i in for loop like this: for(i=0;i<arr.length;i++)
Problem is it just animates all 4 at once.
Or whichever ones the value corresponds with for the entire loop
Eran Finkle
@finklez
Feb 08 2016 19:27
@keccakec don't do animation this way, CSS has 2 ways of animating, using transition and animation
you set a class with animation, you can set duration and delay, and even loops, then you can add/remove the class
Kevin Elser
@CoffeeCodeKevin
Feb 08 2016 19:29
@finklez Thanks, jQuery animation is just easier syntax-wise for what I want to do, but that does seem like it would work a lot better.
CamperBot
@camperbot
Feb 08 2016 19:29
keccakec sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 473 | @finklez | http://www.freecodecamp.com/finklez
Eran Finkle
@finklez
Feb 08 2016 19:33
@keccakec you can also do it with jQuery, but for loop is a bad way for applying animations, if i'm not mistaken animation are applied async which means you'll have to use closures for it to work, but anyways it's a bad way, you can still use jQuery using delays for each div
Kevin Elser
@CoffeeCodeKevin
Feb 08 2016 20:01
@finklez Yeah, I'm now using it to make sure the animations have about a 100ms delay between them. Unfortunately changing my animation functions to be css animations somehow broke my code? Either that, or codepen doesn't like me. Everything in my JS is now undefined.
I'm beyond confused considering I only changed the animation functions.
Even global variables are undefined
I forgot a semicolon.. fml.
Eran Finkle
@finklez
Feb 08 2016 20:11
:D
i guess it's ok then
css animation are much better, smoother, faster, even tho recent jQuery animation are prob using css animations as well, instead of the old position style
Mark Lawrence
@ninja-ml
Feb 08 2016 20:22
i'm working on my weather app and and the icons provided by OpenWeather seem really small... i've found better icons online that use font awesome but it says I have to put them in a Font folder... how would I do that in CodePen?
Jonathan Coleman
@jondcoleman
Feb 08 2016 20:31
@ninja-ml you won't be able to put them into a folder on codepen. You'll have to store the images on an online service. Some people use imgur. I put them in my public dropbox folder and use the urls for them from there
Mark Lawrence
@ninja-ml
Feb 08 2016 20:34
@jondcoleman thanks, that's what I thought, but I wasn't sure... I've used my public dropbox folder for images for other projects. I"m looking into using the Dark Sky API instead of OpenWeather API
CamperBot
@camperbot
Feb 08 2016 20:34
ninja-ml sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:star: 513 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
Jonathan Coleman
@jondcoleman
Feb 08 2016 20:34
cool, let us know how you like Dark Sky
Amir Ghafouri
@amirghafouri
Feb 08 2016 22:05
@mutantspore (or anyone else) Am I on the right path?
function decTime() {
  //fill the circle
  filler(countDown);
  // display the current count down
  showCount();
  // decrement the counter if it's not at zero
  if (countDown > 0) {
    countDown--;
  } else {
    countDown = breakSeconds;
    if (countDown > 0) {
      countDown--;
    } else {
      // stop the timer
      clearInterval(intervalID);     
    }
  }
Bruce Young
@mutantspore
Feb 08 2016 22:08
@ninja-ml what are the icons called. There is another way to actually use icons on codePen.
@ninja-ml dark sky ..(forecast.ioi) is a great weather service (very accurate) but you may have more trouble using it.
Bruce Young
@mutantspore
Feb 08 2016 22:13
@ninja-ml where they called Climacons?
Juwdohr
@Juwdohr
Feb 08 2016 22:31
Where can I get an API for the Random Quote Machine?
Bruce Young
@mutantspore
Feb 08 2016 22:31
lol yes, ty… just post your pen with a question. (if you have a pen)
ooo I see ok
well you don’t actually need one fo rthis exercise
you haven’t done API’s in the course yet
just an array will do
but if you want to try this is the one that FCC used to give as a choice.
http://forismatic.com/en/api/
I did mine before they changed the user stories and added a seperate API section. I used one from this API provider
https://www.mashape.com/
andruxnet-random-famous-quotes
Bruce Young
@mutantspore
Feb 08 2016 22:37
You wil get plenty of chance to use API’s later in the second set of ZIplines
Maciej Bembenista
@macbem
Feb 08 2016 22:41
What API should I use to tweet a quote?
The rest will be a breeze, I guess
Bruce Young
@mutantspore
Feb 08 2016 22:43
try https://dev.twitter.com/web/intents
don’t get involved with twitter’s little icon and it’s iframe… that way lies death. The solution is just one or two lines. Use your own icon.
Maciej Bembenista
@macbem
Feb 08 2016 22:43
thanks a bunch, @mutantspore
CamperBot
@camperbot
Feb 08 2016 22:43
noczesc sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Maciej Bembenista
@macbem
Feb 08 2016 22:44
i'll probably use font awesome as I always did
CamperBot
@camperbot
Feb 08 2016 22:44
:star: 1104 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 08 2016 22:44
yes I did
basically you just need an icon with this in it href="https://twitter.com/intent/tweet?text=Hello%20world” and you use JS to change the text data
Bruce Young
@mutantspore
Feb 08 2016 22:51
@amirghafouri how’s your issue going? is there a pen to look at?
Amir Ghafouri
@amirghafouri
Feb 08 2016 22:56

@mutantspore http://codepen.io/amirghafouri/pen/MKPvRa?editors=0010

I messed around with the fill effect (width instead of height), and it was working.

Started messing around with the decTime function to change session types and it stopped working

Bruce Young
@mutantspore
Feb 08 2016 23:07
well when the timer is not greater than zero you need to swap to the “other” timer value. To keep track of which you should be counting down, I used a “flag” called timerType.
for example.
if (timerType == 'session') { …. and in that if I set things up for the break time, cleared the clock face, sounded the alarm and changed the flag to be timerType = “break”. So obviously if the timerType was “break” i’d do a similar thing but for the session values. there is no need to actually stop the timer … just change the values. You only really need to stop it for “stop” or “reset” or maybe “pause"
gr4vy
@gr4vy
Feb 08 2016 23:22
looking for help with the keydown event handler on my app... the green square is not supposed to move in a direction past a walll but it does somehow position itself past the wall (but only in the logic not the div) http://codepen.io/gr4vy/pen/ZQqmBx
Bruce Young
@mutantspore
Feb 08 2016 23:23

@gr4vy You’ll most likely get help for that project in the Data Visualization help room

Need help?

Find the best room for your needs, tell the name of the challenge, and paste your code :)

I haven’t done it sorry
gr4vy
@gr4vy
Feb 08 2016 23:26
@mutantspore okay I'll try that thanks
CamperBot
@camperbot
Feb 08 2016 23:26
gr4vy sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1105 | @mutantspore | http://www.freecodecamp.com/mutantspore
max77p
@max77p
Feb 08 2016 23:39
can someone help me out with my jquery...i am not sure if my animated bounce is working in this case
Bruce Young
@mutantspore
Feb 08 2016 23:50
@max77p ? “by Shan” bounces when the page loads
@max77p you will also probably have to add in bootstrap.js in the JS cog at some stage.