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?
@max77p I just used JS and Jquery for that.
var lh = $("#quote-btns").css("height");
$("#quote-twitter").css("line-height", lh.value);
@SusanGrattan i assume you used js and jquery to change the color on each new quote too?
I didn't change the color, no. But you could do that. I just changed the quote and author with a click event =] @max77p
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
Dear campers, would you please review my javascript calculator. Thansk.
@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.
@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?
Hey campers. I was told today that my portfolio was not working on ipads or iphones but works on android cell phones.
@SusanGrattan do you still need help with the JSON call?
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
@andrewchar i have a mac laptop i can check
@andrewchar looks fine to me!
everything is responsive?
yeah
hmm
so the problem is only within ipads/iphones
@scienceoflife thanks for helping
andrewchar sends brownie points to @scienceoflife :sparkles: :thumbsup: :sparkles:
:star: 66 | @scienceoflife | http://www.freecodecamp.com/scienceoflife
@andrewchar safari/mac … seems ok
@andrewchar and i wanted to add that it actually is really nicely designed, did you use any themes/borrowed code?
time to google the c#$^ out of this
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
@scienceoflife the only thing i borrow was the JS for the scroll effect
also what does jquery do? just the scroll animations?
@andrewchar ahh makes sense
@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
@andrewchar yes it definately will.. had to deal with it on my site.
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.
im trying to figure out how you implemented the on-hover image scroll-up
@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?
@andrewchar yeah! the "COMING SOON PROMISE" images have that scroll effect on hover, but i cant find a single listener for hover
you can’t get it for the apple but i think you can get Android dev tools and they have a simulator
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);
}
@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.
yes I have all that.. @andrewchar doesn’t have a Mac though
nope nope
dual boot windows/ubuntu
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
@lcneves why do you say that? Its my understanding that the simulator browser for xcode is the exact same as the native one
doesn’t codePen have some browser testing somewhere?
@mutantspore the issue is the browser engine is what matters, not resolution
? what did I say for that answer? @scienceoflife
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.
@scienceoflife Yes you're right for Xcode. The Chrome device emulator, on the other hand, should be used only for previewing, not for debugging.
yes but I was thinking that codepen itself had a link somewhere to test browsers
well this portfolio was my first site
so now im learning how to deal with this problem
anyway I have pretty much all combinations of the real devices/OS/browsers as real objects
@lcneves Im pretty sure genyMotion is accurate for android
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
@andrewchar If this portfolio is your first site, you are off to a good start! It looks great.
@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.
@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
andrewchar sends brownie points to @lcneves :sparkles: :thumbsup: :sparkles:
:star: 340 | @lcneves | http://www.freecodecamp.com/lcneves
@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
What @scienceoflife said is true. Even on full-mode, Codepen will mess with your code, and sometimes this spoils the result.
im pretty sure only presentation mode is worth anything, and you have to pay for that
@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
https://crossbrowsertesting.com
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 :(
yes well I was just mentioning something that I thought I saw but had never looked at.
@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...
@mutantspore i took both my background-position: fixed; and my background-attachment: fixed; out of my code
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
noticed taking out the fixed breaks the parallax effect
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.
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
@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
http://codepen.io/MutantSpore/pen/wMYVKp
CodePen is currently saying literally everything in my JS is undefined.
What
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
I didn't change anything at all in my code, so I'm beyond confused.
And it's working again on refresh.. alright then.
ok I didn’t see the “special” id you had for home
@media only screen and (max-width: 768px) {
#home:before {
background-attachment: scroll;
}
}
@mutantspore i put in the code you sent me before all of my contact me button styling instead of after
@andrewchar yes it didn’ t have a closing bracket .. cut /paste error
/smacks forhead
anyway it works in that fork now if you look again.. it stays fixed with a wide screen but scrolls on a mobile size
just checked on the iphone. everything is still not working
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
not exactly sure what im suppose to do in debug mode
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.
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
@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.
ooops, that was a brownie-free thanks. thank you, @mutantspore :blush:
rphares sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1098 | @mutantspore | http://www.freecodecamp.com/mutantspore
Anoyne here use sublime text?
I do
@mutantspore thanks for all your help, always greatly appreciated
andrewchar sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
yup
:star: 1099 | @mutantspore | http://www.freecodecamp.com/mutantspore
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?
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!
@MindfulBell some one in the FreeCodeCamp/HelpDataViz room might know
@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
@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
aslong as you have all your meta tags linking stuff into your index.html
@MindfulBell you don't need a server to work with an API
i have no ides about API
@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?
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
@MindfulBell yeah that's basically how you do it
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
open the console on your browser and check for any errors to see if you linked everything correctly. @MindfulBell
@sok213 only error: 'Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode'
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
i have a babel preprocessor...
@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
can anyone help me figure out where I went wrong with JSON?
http://codepen.io/SusanGrattan/pen/EPdzOQ?editors=1010
http://codepen.io/SusanGrattan/pen/EPdzOQ?editors=1010
also! you need to use a specific version of babel with react @MindfulBell
@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
the twitter bit seems hard but isn’t . Look up tweet intents
I'm basically just trying to do what the JSON lessons did and display the objects in HTML..
<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
@sok213 well thats silly...writing React in the same file as html...
@sok213 i have that babel file...
grrr
@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
@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
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">
@andrewchar your choice , it’s just that you haven’t done that bit yet in teh course… jump ahead and have a quick look
Yeah, it looks like it
@mutantspore oh ok they teach it later. in that case ill do it the array way!
Yeah I remember @mutantspore I thought my doc ready function was good enough. =| should I use a click event like the lessons?
plenty of projects in teh use of API’s later
@mutantspore ok thanks.
andrewchar sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: andrewchar already gave mutantspore points
@SusanGrattan i’ll look at yours and fork it
@MindfulBell if you are wondering how I have my html links setup. here is a screenshot.
I think I might understand what you're saying now. @mutantspore I'll try it.
not sure how but my portfolio got 154 views so far lol
i guess its posted on some page in codepen publicly ?
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.
@sok213 sigh...still doesn't work
@SusanGrattan you also need to put
http:// infront of your URL
@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.
@SusanGrattan and… use the api key that you can get free from the site
@MindfulBell ill try to help
I have Pmed you
@mutantspore gotcha.. Sorry I didn't fully understand last time you told me. I just found it on the site. Thank yous
susangrattan sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1100 | @mutantspore | http://www.freecodecamp.com/mutantspore
@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…."
@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?
just tack it on the url
&APPID=123123424k23g4f5234gf
@SusanGrattan obviously a made up key lol
ah gotcha. Well I got my key and am displaying data for Moscow so I'm getting somewhere now =D thanks so much
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'"
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
Thanks @mutantspore I'm looking now
susangrattan sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: susangrattan already gave mutantspore points
Got it. It was because I moved my JSON function outside of my doc ready func..
note the temperate in in Kelvin.
yes that was one thing.
I was wondering about that temperature lol..
I noticed I had too many quotes too... I'll get there one day.
you can ask for it in “imperial”
&units=imperial or metric
Sweet. Fixed that! Now I know how I can toggle it too =D Thank you so much!
@andrewchar no everything is vanilla
@andrewchar yeah i based all my code on the css-tricks centering site, no luck man...
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.
@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...
@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
tyteeye510 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
@tyteeye510 you’ll then need to pick one at random when a button is clicked and put it on the “screen”.
:star: 1101 | @mutantspore | http://www.freecodecamp.com/mutantspore
@tyteeye510 yes all that comes in the second set of ziplines
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.
Hi,
Any one can help me in the Personal Portfolio Web page
??
@mzeid1985 Sure, what is it that you need help with?
I need to build this page, but I'm still beginner in web platform
and don't know how to start
thanks @sok213
mzeid1985 sends brownie points to @sok213 :sparkles: :thumbsup: :sparkles:
:star: 542 | @sok213 | http://www.freecodecamp.com/sok213
are you building it on codepen?
yes
Are you up to the Personal Portfolio project @mzeid1985 ?
I need to start with the project, I have passed all the challenges before the thisproject
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?
I would like to build some one similar to the example
yes I would like to work with bootstrap
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?
@sok213 can you help me from scratch and how to think about it?
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:
- nav bar
- 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
@mzeid1985 http://getbootstrap.com/
@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.
@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
@andrewchar I think as a beginner he should stick to what FCC advices which is using codepen
@mynameissal he will still use codepen
@mzeid1985 also, remember, if you want to use bootstrap, click on settings within the html tab in codepen and at it from the libraries
yes
I think just before he is given access to the Personal Portfolio challenge FCC goes through how to use Codepen.
I don't have problem with codepen
but I need a start point to know how to start to build such page
build the navbar
first.
Ok I'll try
ok, good luck!
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.
and once I finish I'll tell you, so you can guide me for the coming steps
thank you
Ahaha, I'll see what I can do I am a beginner too.
hey every1!
@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
http://codepen.io/MutantSpore/pen/RrqbOm?editors=1010
plz some1 help me i am not able to add background image in my div ...in codepen
@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.
@mynameissal ```
background-image : url("E:\images.jpg");
Are you using codepen?
@Zoher-ali You cant add images from your local computer
it has to be a link that is from the internet
@mutantspore Thanks! That's exactly what I needed :D
mynameissal sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1102 | @mutantspore | http://www.freecodecamp.com/mutantspore
@mynameissal yes
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.
@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
@mutantspore in my function for the math random part should it be have a -1 at the end
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?
@Zoher-ali It has to be a direct link. (ending in a file format jpg, png etc.
@JennHardy apparently there are over 20 projects to do in fcc. i used 6 place holders in mine.
@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 ^
@JennHardy if i need more then that, once i am that far i would probly just make a separate page for past work
thanks @andrewchar good thinking. does anyone else have any suggestions?
jennhardy sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:star: 274 | @andrewchar | http://www.freecodecamp.com/andrewchar
i like that picture
I know, right
so aesthetic
@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:
@Zoher-ali Post your codepen link here
so we can see everything
you need to host your image
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
@Zoher-ali http://postimage.org/?_ga=1.151007536.823217491.1454645437 host your images here
@andrewchar he already has a hosted link
didn't know. im coming to the party late lol
all i seen was his images coming from his e drive
@Zoher-ali You didn't give your div a height or width, so that's why you cant see anything
@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;
}
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
oh..
@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
@sok213 yeah i got it thanks
zoher-ali sends brownie points to @sok213 :sparkles: :thumbsup: :sparkles:
:star: 543 | @sok213 | http://www.freecodecamp.com/sok213
:smile:
@andrewchar this bit
max - min + 1)) + min is 10 which is the length of the array
@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
:)
now for the fun part
how am i to design my page
what sort of quotes are you using?
oh
i didn't think about that yet either haha
i like inspirational quotes
prob those
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
good call, i was thinking about it backwards
will have to wait for tomorrow. its 3:30 a.m i must sleep
@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
a second dimention o.O
ooooooooo
lol
or even an array of objects
mindblown
hmm
doing it like this work var arr = [["quote1", "author"], [""quote2, "author"]];
thats what you meant by second dimension right
forget i asked, that doesnt work atall
It should work
@andrewchar ye sthat’s right.. how are you reading it though
You will just have to change the way you reference
not sure i follow
@andrewchar theQuote will equal
and the author will be
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
@mutantspore How long have you been doing FCC?
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
:star: 1103 | @mutantspore | http://www.freecodecamp.com/mutantspore
andrewchar sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
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
Oh cool.
so yes I’m Australian lol
I see, did you do any web dev before FCC?
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
Wow, that's pretty long.
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
I see.
Man, at first I thought these zip line projects were scary but I am enjoying them now - they're so fun.
@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
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!
Does anybody here have any exercises that will hep me master HTML and CSS
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?
@mynameissal I can memorize but i really prefer to see something in action then work on completing something
@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.
@brownfitterman there is a lot of youtube videos as well if you like to watch and learn
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.
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
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
sigursiguros sends brownie points to @lcneves :sparkles: :thumbsup: :sparkles:
:star: 341 | @lcneves | http://www.freecodecamp.com/lcneves
Hi guys would you mind reviewing my calculator. Thanks.
@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.
@mynameissal yes it should
is there anything else wrong?
can I move ahead?
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.
@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.
@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.
mynameissal sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 378 | @jnmorse | http://www.freecodecamp.com/jnmorse
Any other problems that you saw?
@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
I noticed that too..
But it was at odd quote numbers like quote 8 / 16 etc.
@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
I split it because Tumblr takes author seperate from text. I spliced to removed spaces between the split -
Is it possible to have a webpage remember your geolocation permission choice?
Oh, I see what you mean. Store it once so you're not splitting it constantly when pressing button.
@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
@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.
@matty22 I think generally with chrome it stores you already giving permission or not for a site.
Where is about in FF?
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.
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?
Not sure, if you're accessing it from Firefox you shouldn't get that message.
@matty22 there should be a arrow next to share location, that you can choose to "always share"
My only option in Not Now
is* Not Now
@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
morning campers
Good morning
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?
Hi All
I need some help, I'm doing the stylize stories zipline but have no ideia how to start.
pretty pls?
Please link the challenge.
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.
I think that's a good idea!
I wish I was this smart. T_T
Thank You! @mynameissal
mahouk sends brownie points to @mynameissal :sparkles: :thumbsup: :sparkles:
:star: 284 | @mynameissal | http://www.freecodecamp.com/mynameissal
Does anyone know if we need to use something like JSONP for that stylize new zipline?
or can we just ping the URL?
@MahouK Not sure if I'm smart! Lol, I've spent almost 6 hours total stuck on a projects because of typos.
ah I think I figured it out. Looks like you can't get to it over HTTPS for anyone else in a similar boat
@bniedermeyer I'm sorry I'm still very new to all of this. So we should use JSONP?
Any ideas on why I get:
TypeError: (".r" + i).css is not a function for: https://jsfiddle.net/himynameissal/0z1mpm7s/
@mynameissal cause it looks like your attempting to use jQuery like syntax without jQuery which won't work
That's twice I've done that!
I should have realised when it said function wasn't defined. Thanks, again. @jnmorse
mynameissal sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 379 | @jnmorse | http://www.freecodecamp.com/jnmorse
having a little... i wouldnt say problem. just cant find the solution lol
Hi! Having a little bit difficulty making an API call in the weather app challenge…. can someone point me to a link or resource?
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
@pedronfigueiredo from what I recall you have some links in the instructions. Have you read those ?
i find it annoying that i have to move my mouse to get a new quote
yeah it’s this one http://openweathermap.org/current#geo @URobert but I don’t know what to make of the url
@pedronfigueiredo hmm http://openweathermap.org/current , http://portuguese.wunderground.com/weather/api/d/docs?d=resources/code-samples I used this two sites to understand
also $ajax(); is your friend, and JSONP @pedronfigueiredo
@andrewchar postion: absolute; on the button might help
you might have to change some other settings for other elements
@pedronfigueiredo Hope this helps! :)
@mynameissal breaking down and putting mu button ontop lol
:P
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
example?
If you hover over the Twitter hyperlink for the example Quote Generator you'll see what I mean
sorry, not sure what your talking about
@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 !
@URobert not really
@andrewchar So you can send data through URLs
@mynameissal that's what I did anyways
You can use the following URL to send data to auto-populate the tweet box from the link
@mynameissal i had a hard time alterning the URL for some reason
https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text= <variable where you stored quote>
document.getElementById("abc").href="xyz.php";
You can use that^ @URobert
whats that?
@mynameissal i tried that, and it actually didn't work for me
Really hmm..
Wait i'll link you my jsfiddle
@andrewchar Have a look at my twitter button code
everyone keeps saying this is easy but mi finding it very hard
ive even read all the documentation :(
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 ?
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');
I don't know there are different ways to do things - I know my way works
Can you link your codepen again
@andrewchar sorry I can't be more specific right now, but I'm really tired
@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
Try right click open in new tab
ive been following from this site https://dev.twitter.com/web/overview
Ok, I know how to do it with your method.
In your HTML give a href id="twitter-btn"
<a href="https://twitter.com/share" id=" twiterbtn" class="twitter-share-button" data-text="hey" data-via="Andrew_Char">Tweet</a>
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
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
Invalid left-hand side in assignment
Oh,
$("#twiterbtn").data-text = getRandom(); }
@finklez Thank you!
sacharias sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 472 | @finklez | http://www.freecodecamp.com/finklez
It's because I spelt the id differently than what you had. If you copy paste that it should work.
How's that @andrewchar ?
still saying invalid left hand side
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
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
@mynameissal what language code is that
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..
@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..
@mynameissal its okay. thanks anyway
andrewchar sends brownie points to @mynameissal :sparkles: :thumbsup: :sparkles:
:star: 285 | @mynameissal | http://www.freecodecamp.com/mynameissal
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
@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
@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.
keccakec sends brownie points to @finklez :sparkles: :thumbsup: :sparkles:
:star: 473 | @finklez | http://www.freecodecamp.com/finklez
@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
@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.
: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
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?
@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
@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
ninja-ml sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:star: 513 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
cool, let us know how you like Dark Sky
@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);
}
}
@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.
@ninja-ml where they called Climacons?
Where can I get an API for the Random Quote Machine?
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/
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/
https://www.mashape.com/
andruxnet-random-famous-quotes
You wil get plenty of chance to use API’s later in the second set of ZIplines
What API should I use to tweet a quote?
The rest will be a breeze, I guess
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.
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.
thanks a bunch, @mutantspore
noczesc sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
i'll probably use font awesome as I always did
:star: 1104 | @mutantspore | http://www.freecodecamp.com/mutantspore
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
@amirghafouri how’s your issue going? is there a pen to look at?
@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
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.
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"
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
@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 :)
- Javascript/Algorimths -
[FreeCodeCamp/HelpJavaScript] - Front End -
[FreeCodeCamp/HelpFrontEnd] - Data Visualization -
[FreeCodeCamp/HelpDataViz] - Back End -
[FreeCodeCamp/HelpBackEnd]
I haven’t done it sorry
@mutantspore okay I'll try that thanks
gr4vy sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1105 | @mutantspore | http://www.freecodecamp.com/mutantspore
can someone help me out with my jquery...i am not sure if my animated bounce is working in this case
@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.