@KevinStaufy whats the webpage?
@tommygebru im trying to do http://www.freecodecamp.com/challenges/build-a-tribute-page but im not really understanding it to be honest
@KevinStaufy you can look at the example and build something similar
@KevinStaufy this is the associated link an example project the title is Dr.Norman.....
@KevinStaufy http://codepen.io/FreeCodeCamp/full/wMQrXV the project is "attributed" to him like a biography or a tombstone
so i just build a tribute page to w/e?
yep
well then
@KevinStaufy whats w/e ?
this is gonna be "fun"
and @tommygebru it means what ever
@KevinStaufy haha of course it is
:D
gosh i cant think of what to build a tribute page to lol
@KevinStaufy it's not that big a deal.. takes about 15/30 minutes
i spent more time copypasting dates then actually building it
@tommygebru I don't understand why this site http://blog.teamtreehouse.com/how-to-make-a-favicon says that it can be difficult to make favicons. The first time I made a favicon it wasn't difficult. If anything the solution that they give you makes it difficult. If you want I can make you the favicon and send it to your email. Just pm me and I'll send you my email so you can send me the image you want as a favicon.
@KevinStaufy making a new logo it is currently to thin to be visible
@tommygebru I make logos for $3. Check out my latest logo design. - https://www.youtube.com/watch?v=k3THvhg9jBo If you need a good logo I got you.
@ExhibitArts im also trying my hand at graphic design yesterday i started with this illustration http://codepen.io/gebrutommy/full/EPyorV/
@tommygebru Wow. That looks great. What do you think of this one that I made. - https://gyazo.com/8b5bb9263b9f48cb1267ad9f4669f276
@KevinStaufy nice video and illustration the 4 is harder to make out but still great and sempa is really impressive :smile:
@KevinStaufy what do you think about having a HelpDesign channel as an extension of HelpFrontEnd chatroom?
@tommygebru
@KevinStaufy what do you think about having a HelpDesign channel as an extension of HelpFrontEnd chatroom?
@tommygebru Are you talking to me?
@ExhibitArts haha sorry about that
@ExhibitArts
@KevinStaufy nice video and illustration the 4 is harder to make out but still great and sempa is really impressive :smile:
@KevinStaufy what do you think about having a HelpDesign channel as an extension of HelpFrontEnd chatroom?
@tommygebru wait what i just got back?
@KevinStaufy sorry i messed up the names... hows the tribute going [who got murdered]
idk im really confused to be honest its asking me to do stuff that im not really ready to do yet i dont think
@tommygebru ^^ thats ment for you
@KevinStaufy haha what's the problem
@tommygebru just everything its asking me to make the tribute but like i know somewhat how to code but i dont think im ready for the tribute i only started the course like 2 days ago and im just so lost at the moment because it just dropped this in my lap with no guide exceept that one example and im just confused :(
@KevinStaufy ur welcome
@raiden357 yea your http://www.w3schools.com/ help a bit
im just so confused
@KevinStaufy OOHHH i see they added new challenges it wasnt there a few days ago...
@tommygebru what do you mean?
@ExhibitArts yea i know w3c schools is not affiliated with w3c. w3c is a very good website, the most popular in fact
w3c schools i mean
@KevinStaufy I mean the Basic Projects is new !
ahhhh but im just like so stuck i dont even know where to start this tribute thing
@KevinStaufy I recommend going to codecademy its free and it'll probably help you understand html and css more !
alright i think i might do that to be honest
@KevinStaufy same here
heres' mine: http://codepen.io/Codex357/pen/pgYdJz
@raiden357 @tommygebru so you guys think i should do the run thoughs of the other two before trying my tributes?
i'm sorry what do you mean by run thoughs?
@raiden357 like do codeacademy before i try the tribute
nah, stay here
code academy is not worth it
hmm im just so confused on the tribute lol
i left that and came here
how come?
didn't keep my attention
not like this place
what do you mean? is it beacsue this one has a chat?
chat is part of the reason. the other reason is this website keeps me engaged, focused. you'll know you found the right place when you can't wait to go back to it each day just to progress
thats how i was with this website with the lessons
i enjoyed them
but the tribute like i have literally NO clue what to do
@KevinStaufy you can try on your own but if you believe you want to learn more you should try https://www.codecademy.com/learn/web
or maybe try html & css on http://www.w3schools.com/ because they have examples of what the code does and they have tiny quizzes
or maybe try html & css on http://www.w3schools.com/ because they have examples of what the code does and they have tiny quizzes
the fact that your starting your work on projects now shows your commitment
@tommygebru your talking about doing the html and css course on codeacadamy
@raiden357 i really want to start it but i dont know how to do it
look at my page as a starter
hmmm alright
i sent you a pm
got it
@KevinStaufy well as i understand it if you want to work elsewhere as practice ... also @raiden357 is right the chatroom is better here than anywhere else because the response time is instant :smile: elsewhere it can be hours or days :-1:
thats true
@KevinStaufy You don't have to make an exact copy of the tribute page, you just have to make something functionally similar.
btw i'm new to all this. just started 5 days ago. never programmed before in my life. my tribute page is proof
same here @raiden357 i started 2 days ago
By the time you do the tribute page, you've gone over enough through FreeCodeCamp to create something similar at the very least.
Read-Search-Ask when you don't know how to do something
@mca62511 :+1:
alright ill try to throw something together after his League of legends game is over
awesome
my friend and i have a 15 minute que so ill try to throw some thing together
am i aloud to do it on anyone i want?
I'd encourage you to look up bootstrap grids and read up on them a bit, as that'll help out a lot.
Absolutely, the point is the html/css rather than the content.
ill probably do it on bill gates then
That's cool
I did mine on Hayao Miyazaki
link to yours?
@KevinStaufy don't he's still alive
i should do it someone whose passed?
no im joking
Oh, so is Miyazaki. I didn't realize--ahh
lol i was gonna say billy mays next LOL
The timeline is highly incomplete
BILLY MAYS HERE WITH OXYCLEAN
interesteing
@KevinStaufy his page going to be white on white on white
@tommygebru LOL
Hi people. I have question for Random Quote Machine. Which link shoud I use to get JSON file? Also some explanation about tweeting would be great
is there anything on codepen that i should auto add in with the cogs? for CSS or JS
New HelpDesign chatroom for designers. - https://gitter.im/ExhibitArts/HelpDesign?utm_source=share-link&utm_medium=link&utm_campaign=share-link
just bootstrap
If anyone is interested there is a HelpDesign room for feedback on Design :smile:
https://gitter.im/ExhibitArts/HelpDesign?utm_source=share-link&utm_medium=link&utm_campaign=share-link
https://gitter.im/ExhibitArts/HelpDesign?utm_source=share-link&utm_medium=link&utm_campaign=share-link
Whoa
@KevinStaufy Just bootstrap really. You might add jQuery if you want to get all fancy, but it isn't necessary for the Tribute project
when did they add new room?????
@mca62511 alright ill add bootstrap thank you :)
kevinstaufy sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 268 | @mca62511 | http://www.freecodecamp.com/mca62511
@KevinStaufy officially an unofficial room, feel free to join :smile_cat:
how often are you in the chat tommy and mca you guys are really helpfull haha
@KevinStaufy i do agree with you. i'm not ready for this project and no amount of going over previous exercises will change that
they need to better explain ni the exercises extactly what we're doing
@raiden357 yea its like so fast
you know what Im dropping everything ... lets do this ... i will help you guys with your codepens..... which is the enviornment we build our projects on :smile:
http://codepen.io/
http://codepen.io/
what do you mean?
@KevinStaufy lately i've been trying to design more so i've been away for a few days...
@tommygebru i appreciate it
@tommygebru me to
@KevinStaufy @raiden357 create an account with codepen :+1:
i got one already
cool @KevinStaufy im going to make my tribute page too.. because i have passed the section... im not sure if I have to complete new challenges that pop up :smile:
@tommygebru ahh alright i mean
i get the jist of it
you helped alot
just at first i was kinda uhhh
@tommygebru keep doing your desing stuff
@tommygebru after this game is over ill work on my page a little bit and send it to you
@KevinStaufy that is a day to day expression, you will never forget it
haha
@raiden357 nice choice do you have any questions?
@KevinStaufy I will ... so many tabs ...
xD
nah I think all i have to do is meet the bare requirements for the user stories.
thanks for the help though
Well, it doesn't hurt to try and replicate the layout some too.
I'd encourage you to at least try to use bootstrap's grid system, as that'll be very useful for you in the future.
I'd encourage you to at least try to use bootstrap's grid system, as that'll be very useful for you in the future.
nah not ready for that
@raiden357 I'm looking at the challenge page and they encourage you to "give it a personal style" ... this means familarize yourself with basic css ... so that you understand it better... :smile:
@mca62511 bootstrap looks easy but is annoying to customize I decided to commit to css ... it is hard but it is very rewarding to look at my code and understand my mistakes :smile:
@mca62511 this is my current webpage, im not done yet :smile: I began focus on the header and footer, now im filling it with other pages
http://codepen.io/gebrutommy/full/WrLmOr#
http://codepen.io/gebrutommy/full/WrLmOr#
Wow! That's gorgeous and clean.
http://codepen.io/mca62511/full/KVEdzK
This is the one I'm working on. I don't like the projects section.
This is the one I'm working on. I don't like the projects section.
@mca62511 thanks I was inspired by others ... one codecamper using bootstrap and another professional designer
tommygebru sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 269 | @mca62511 | http://www.freecodecamp.com/mca62511
@mca62511 :+1: i was going to tell you to change it to full :smile:
@tommygebru same here I'm going to fill it with links of my codepens :smile:
time to start my tribute boys
@mca62511 very clean landing page ! very nice :smile:
@tommygebru Thanks :smile:
mca62511 sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 622 | @tommygebru | http://www.freecodecamp.com/tommygebru
Hi, working on the "No repeats please" challenge and the hint mentions to start the recursive call with the following:
perm(0, nothing used yet, empty new string (or array the same size as str);I'm not following that last piece, the array the same size as str, why would it be an empty new string or an array the same size as str? Anyone able to clear that up for me? Thanks.
hey @tommygebru whats the command to make an img smaller
is it
.smaller-image {???????} ?
@mca62511 ^^^^
the actual name of the class doesn't matter
you can call it .thing-a-ma-bob if you want
how do i tell it to be certian pixel wide?
@KevinStaufy there is no such thing as a command.... except keyboard keys
.thing-a-ma-bob {
width: 100px;
}
@mca62511 ahh yes the thingamaboob is what i was lookign for
@KevinStaufy you would use the width property and follow it with a value
like @mca62511
like @mca62511
ahh alrighty
@tommygebru @mca62511 thank you
kevinstaufy sends brownie points to @tommygebru and @mca62511 :sparkles: :thumbsup: :sparkles:
:warning: kevinstaufy already gave mca62511 points
:star: 623 | @tommygebru | http://www.freecodecamp.com/tommygebru
then for the image you'd do
<img class="thing-a-ma-bob" src="http://example.com/image.png" alt="A smiley narhwal">
what the command to center an img?
the code*
not command
sorry haha
But you should learn how to look it up. Google search something like "css image size" or "css center image" and see what you find
look at the links from w3.org, w3schools.com, and communities like stackoverflow.com
now that I think about it a tribute page is rather a grim way to begin your FCC Journey
@tommygebru what do you mean?
@KevinStaufy haha peoples first project ever is an obituary
@tommygebru true
kk cant figure it out how to center this image lmao
this is my code atm
<style>
h1 { font-size: 46px;
}
.smaller-image{
width: 300px;
}
.center-image{
}
</style>
<h1 class="text-center"> Bill Gates </h1>
<img class="smaller-image center-image" src="https://upload.wikimedia.org/wikipedia/commons/1/19/Bill_Gates_June_2015.jpg"></img>
how do i center the image
@KevinStaufy if the class is still referencing the same image in your html you don't have to create a new class name, for centering alone :smile:
.>
>.>
how do i center it though i tried googling it couldnt find it
yea fcc is definitely not for beginners
check if this works
.smaller-image{text-align:center;}
.smaller-image{text-align:center;}
@raiden357 why do you say that?
@tommygebru it didnt :L
@raiden357 I believe it began with javascript in mind and maybe added html and css later on
ok @KevinStaufy try :smile:
align:middle;
align:middle;
@tommygebru nothin :(
hi everyone I am doing the Tribute page Could you tell me what you think and what I should improve: http://codepen.io/zamyka/pen/adMqgZ
I think that it doesn't do anything because text-align: center and the like align the stuff inside that element... but an img tag is the element, there's nothing inside
ok @KevinStaufy give it
margin:0 auto;
margin:0 auto;
so maybe put the img inside a div or.... yeah. Actually @tommygebru has the right of it. That's much more elegant.
@zeiadwsabra haha was going to do Snape :+1:
im just gonna run through codeacademys HTML and CSS course and @tommygebru still didnt do anything
hopefully i grasp html better through two courses
@KevinStaufy ok cool can you post your link to the project :smile:
is that it?
@tommygebru yeah I like snake but I always felt scared of him
@zeiadwsabra Nice! Very clean and responsive. And I love that you did a fictional character.
@mca62511 thanks
zeiadwsabra sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 272 | @mca62511 | http://www.freecodecamp.com/mca62511
@zeiadwsabra love to hate that guy :smile:
@KevinStaufy Okay, first. In CodePen put all your css stuff in the css section, not inside <style> tags. Inside a real html document, you'd do that, but in this editor its divided up.
@mca62511 wow i feel not so smart i forgot that was even there
@zeiadwsabra weird my blockquote doesnt have that vertical line for quotes
example quote
@tommygebru yeah weird I thought that was the default
do you have a white background
I need some design guidance to help polish this LOTR weather app. First order of business to to center my various divs relative to the background image. All the stack-overflow stuff I've found doesn't seem to work for me. Anyone have a silver bullet for alignment/margin percentages/etc?
http://codepen.io/collinferry/pen/obmKgm/
http://codepen.io/collinferry/pen/obmKgm/
yes @zeiadwsabra this is my portfolio project ..
http://codepen.io/gebrutommy/pen/WrLmOr?editors=1000
my quote is "you should learn to code"
http://codepen.io/gebrutommy/pen/WrLmOr?editors=1000
my quote is "you should learn to code"
@KevinStaufy and what I was going to say before actually does work.
The "text-center" class and using class="text-align: center;" centers things INSIDE an element. There's nothing inside an img element, the img is the element itself. So you'll want to put the image inside a div, add "text-center" to the div, and THAT will center the image.
@collinferry check out the HelpDesign room https://gitter.im/ExhibitArts/HelpDesign
hey
welcome @mjqblade
<style>
body {
background-color: #000000;
}
</style>help pzl
no wiki entry for:
pzl
PLZ
plz
ygfyw
The " margin: 0 auto;" method doesn't work for img elements, it works for a div element.
so id have to make a div for it
and then class the margin into the div?
<style>
body {
background-color: #000000;
}
</style>plz help number 60
No, sorry for confusing you.
@mca62511 its fine
@mjqblade we don't use numbers :smile: use Title & Link
@KevinStaufy here, I forked it and played around a bit to explain http://codepen.io/mca62511/pen/qbvYBy
@mca62511 what do you mean
@KevinStaufy To "fork" is to make a copy of something that you can edit, that won't change the original. I forked your project so I could change it and explain what I mean.
@mca62511 ahhh i see
@KevinStaufy At the top you can see what I mean about centering the things inside the div instead of adding "text-center" to the img itself.
Below that, you can see what I was saying about using margin: 0 auto; to align a div. I made a red div box as an example.
you linked me one with nothing at all changed in it?
real talk. anyone solve the clock with an accurate timer? I found the setInterval() countdowns were getting out of sync pretty quickly.
I thought about getting a new Date() stamp off a setInterval() pulse to correct it, but I'm a bit lost on how to code this.
Hi guys, im working on the Random quote machine exercise, im looking for some sort of documentation for implementing the share via twitter.. im sure theres many roads to take on this. What do you guys recommend out there?
@interstellaridea I recommend using the twitter API if that's what you're asking. https://dev.twitter.com/web/tweet-button
@zeiadwsabra did you add to your tribute page? :smile:
@jayuhasz cool thanks!
interstellaridea sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 290 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
k i give up cant figure out this center image stuff
its upsetting me :(
hello all
does anyone know how to add images to code pen
@KevinStaufy what do you mean?
im trying to make my tribute and i cant center the img
@KevinStaufy got a link to your pen?
how do I use an image on my laptop
@DivaWeb what do you mean?
@KevinStaufy ok I've forked your page, take a look at it to see my changes. http://codepen.io/jayuhasz/pen/RrdyKX
@jayuhasz omg thank you <3
kevinstaufy sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
I am working on build a personal portfolio page and I need to use images that are not located on the web
:star: 291 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
@KevinStaufy basically, I made the image into a block of it's own then applied margin properties to it
@jayuhasz i see thank you :)
kevinstaufy sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:warning: kevinstaufy already gave jayuhasz points
@DivaWeb you will need to upload the image to a host somewhere then link it
@jayuhasz so I have to use a 3rd party to host my pics on the web?
@DivaWeb or one of your own servers if you have access to it for code pen. if you've got a server for your site, you can host the images there as well.
@jayuhasz i believe flicker and dropbox works, I am using photobucket myself
@jayuhasz I have no website or photos on the web I am using
@jayuhasz what can I use?
@DivaWeb you can upload your photo to imgur and point the html file to that
@DivaWeb well you'll need to upload the images to an image host like flicker or photobucket
@jayuhasz can I use drop box? I already have an account with them
@DivaWeb if the photo's are made public you can
thanks guys
@idietmoran @jayuhasz thanks guys
divaweb sends brownie points to @idietmoran and @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 298 | @idietmoran | http://www.freecodecamp.com/idietmoran
:star: 292 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
can someone help me please
how do i center up the text some more
I've had mixed results with imgur. Sometimes it shows/works/ sometimes not so much.
What do you mean center up the text some more?
yea i feel like its to far spread
Too wide?
yea
Well, you should use div tags
for one
rip thats right
<div> is a division in the page. They can wrap around things and contain them.
wiki div
:point_right: challenge assignment with divided by equals [wiki]
Assignment with Divided by Equals
The /= operator divides a variable by another number.
myVar = myVar / 5;
Will divide myVar by 5. This can be rewritten as:
myVar /= 5;
:pencil: read more about challenge assignment with divided by equals on the FCC Wiki
So first put it in a div
<div>
<!-- your tribute page -->
</div>And then in your css, style the div's width, margins, and/or padding to make it display how you'd like.
ahh alrighty
so how do i make multiple div's?
or can i only have one
div {
width: 70%;
margin: 0 auto;
}
ahh alright
You can have as many as you want, but for this you could probably just wrap the whole page in it
sweet
quick question
how do i make diffrent ones
if there all named div
how do i differenceiate
instead of styling the div, use a class
so <div class="whatever"> ?
CSS
.site-wrapper {
padding: 2em;
width: 100%;
}
.redbox {
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
}HTML
<div class="site-wrapper">
<p>This is my website! Look at this red box.</p>
<div class="redbox"></div>
</div>
ahhh
Also, a <p> tag is a paragraph tag, so use them to divide paragraphs.
alrighty cool
This message was deleted
If you write,
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi. </p>Then it'll display as
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
However, if you write,
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi. </p>Then it'll display as
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius magna ante, nec ornare ipsum viverra sit amet. Ut blandit metus id pulvinar convallis. Pellentesque arcu libero, semper ac tempor a, gravida a nisi.
hmm interesting
@mca62511 thank you
kevinstaufy sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 273 | @mca62511 | http://www.freecodecamp.com/mca62511
Out of curiosity did anyone else put a setTimeout function on the weather app, just in case if there ajax response takes too long, or am I being to paranoid?
setTimeout? why wont you use the default timeout of http request?
@batilc1 I'm not the most knowledgable at ajax, oh so their is a default one, okay, I guess that makes sense.
I always thought it was the ajax requesting info and if it got back before the page renders then it would error out.
@mca62511 i made a div with width: 70%; and it didnt work
show me?
ah, nm I see
I could just refresh the pen
you forget a dash between site and wrapper in your css
lol :) of course you should be filling dom after the dom is ready, thats for sure :)
ahh
@mca62511 much better ty
@hallectj inorder to ensure that you should do:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
initThings();
});
no worries. btw, if you use a percentage width for the img it'll scale better between different devices
right now if you view it on your cell phone Bill will be too big for the page
@hallectj the ajax timeout is for requests that take too long to respond, so that the timeout is fired and you can do stuff
@mca62511 wait i thought i was using a %
nvm
check now
@batilc1 Oh okay, I sort of new at this
@KevinStaufy Nice :thumbsup:
@hallectj nvm, just trying to help :) using setTimeout for waiting page to load is not right, nor guaranteed
@mca62511 :D
@KevinStaufy Florida? I was born in Miami. Family moved to Sebring after Hurricane Andrew.
@mca62511 orlando :)
@mca62511 so what else am i missing from this? http://codepen.io/KevinStaufy/pen/GoexQP
In order to complete the zipline/project? If I remember correctly you need to have a link to where people can learn more information.
@mca62511 oo yea!
Also, looks like you still haven't fixed your paragraph tags.
o yea
your right
looking better
:D
so actually, I need some help.
I moved the project portfolio page to my actual domain (and removed the projects for now until I have better stuff to show)
http://michaelcharl.es/aubrey
However, on mobile, it isn't rendering properly. It is showing the full webpage, zoomed out, as opposed to the smaller gird version.
The col-xs elements appear properly on a small sized window on the computer, they just don't show properly on a similarly sized phone window.
Any thoughts?
@mca62511 did you make this website?
yeah
thats REALLY cool to be honest
Oh, well thanks :P
:D
@mca62511 i added a link in the bottom
but used h2 i should have used a <p> with a bigger font proabbly
either way is okay
well, actually, I think p with a bigger font is better
i did it that way just because its bigger by default
yea i think your right ill switch it
For the link to work in CodePen, you need to give it a target window.
?
<a href="http://www.example.com" target="_blank">This is a link!</a>
This message was deleted
ahhh
question
why isnt my wiki-link in my CSS working
because there are a bunch of different units of measurement. Not just pixels. Therefore you need to specify you mean 42 pixels high, "42px", not "42"
o yea
iforgot that lmao
there we go fixed it
does anyone know how i can append an array of elements in place?
using jquery?
@jovjohnson do you want to join the array elements together?
i don't think that :point_up: is the case...? but it's hard to tell what you're trying to do @jovjohnson . if you can paste your codepen and explain what you want to happen, that would help
basically, in my game of hangman, i'm trying to countdown the number of lives the user has left. currently my code is returning a bunch of "you have (number) of lives left" on top of each other with every event.
@jovjohnson
$('placeYoureDisplayingThat').empty().append(whatYouWantToDisplay)
or, you could just use
$('placeYoureDisplayingThat').text(whatYouWantToDisplay)
I'm not that far yet, but couldn't you just use jquery to change the text within an element to display what you want to display?
$(".score").html("You have " + varScore + " lives left.");Something like that?
or .text too, that works too
ahh, .text works perfectly. thanks @qualitymanifest @mca62511
i was definitely overthinking this wow
i was definitely overthinking this wow
jovjohnson sends brownie points to @qualitymanifest and @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 966 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
:star: 275 | @mca62511 | http://www.freecodecamp.com/mca62511
could any of you guys look at my code? im having trouble putting the lat and long in my api request
being stuck here for like, 2 hours
@Gords 2 hours is nothing :wink2: but yeah paste your codepen
th-thanks, yeah but it kind of is for something so trivial
im kinda like lost
and i have NO CLUE how to or where to even start
@KevinStaufy i feel you, if it helps, you can go to codecademy.com and have some more html+css training there before doing the portfolio
@Gords you need to put your openweathermap call inside your geolocation
successfunction
@KevinStaufy you start with one html tag at a time :smile:
@KevinStaufy start with some basic html
@wearenotgroot >.>
this is my tribute
its really bad but its better than nothing
@KevinStaufy it looks fine :smile:
@Gords where you have it, outside your geolocation
successfunction, lat and long are undefined
@wearenotgroot <3
@KevinStaufy if you really are at a lost then go and watch a couple of html and css vids, look at others portfolio page online and get some inspiration
@Gords the reason for this (i think) is because your geolocation function isn't done yet by the time your openweathermap function begins
@wearenotgroot alright thanks ill try it out
kevinstaufy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 856 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@KevinStaufy Well... If you're following the map, at this point you've covered basic HTML5 and CSS, the basics of using Bootstrap for responsive design, and you've been shown how to manipulate the DOM in jquery. That's really all you need to make something like that.
If you
1) Review the lessons you've already done, or use something like codeacademy for review.
2) Google things you don't know.
3) Ask for help after that fails you
Then you can definitely do it. You'll need to use HTML, CSS, Bootstrap, and jQuery to pull off the portfolio page (everything you've learned so far).
@qualitymanifest it worked! thank you so much, now ill try to get the temp
gords sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star: 967 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
@mca62511 ill try m ybest
@KevinStaufy Also, you could just take a break from the projects and make a bunch of your own small side projects. That'll also likely help you tremendously as you learn by doing. Make your own cat facts page, tribute to curry rice, Orlando tour guide, etc.
@qualitymanifest yup but it taked the lat for some reason, just not the long, that drived me crazy
@evaderei thanks
tommygebru sends brownie points to @evaderei :sparkles: :thumbsup: :sparkles:
:star: 385 | @evaderei | http://www.freecodecamp.com/evaderei
@Gords btw you can specify what unit system you want, units='metric' or units='imperial'
@mca62511 hmmm i was going to go run through the code acadamy but its so diffrent
It's more of a choose-your-own-adventure game approach (metaphorically speaking). If you do use CodeAcademy just focus on the "Build a Website" types of courses that use jQuery, bootstrap, css, and html
at least for now
avoid anything that has to do with AngularJS or Ruby.
@mca62511 yea i did the html one and it was teaching me all diffrent stuff
I mean, you can learn those things if you want. They wont directly help you with the FCC projects, but they are definitely good to know.
How so?
instead of like <h1> they tell you <header1>
Hi all
Has anybody done the Build a Tribute page challenge?
can you screenshot what you're looking at? I just opened CodeAcademy it is teaching <h1>
@Brman85 yup http://codepen.io/mca62511/full/KVEdzK/
In the challenges, it says use whichever libraries you need. Do you know what this means?
a library a collection of premade code used to make doing things easier. One example is jQuery, a Javascript library.
So feel free to include jQuery or a css framework like Bootstrap, but otherwise make it yourself.
Thank you!
@mca62511 have your brownie tax
qualitymanifest sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 277 | @mca62511 | http://www.freecodecamp.com/mca62511
yay brownies
they should make a custom brownie emoji
@mca62511 done. :poop:
:P
hey guys, i have a lil challenge, making a timer that counts down, if I put the window.interval method in my function it obeys the click event but misbehaves but if it's declared outside the countdown function it works fine but starts running onload without click event initiating it, how can I correct this, this is my js fiddle
Hi there, I try to view make Local Weather so I look example, but I found that nothing info print in example. What should I do to let my browser get my city info?
use navigator.geolocation
I'm on the same one and I cant seem to get the button to toggle between imperial and metric properly. any suggestions?
@brettfelts Can I see your code?
this is one fork, I have another which has the click event in a different place.
@brettfelts Use
id for your on click event instead of class.
which fork did you look at?
the second one
@brettfelts Sorry it was the first one
@brettfelts add button listener before the ajax call and do it outside it
does not read the temperature for me :( @brettfelts
@brettfelts that way you have a listener on the button when the page load
@be
@brettfelts another thing is you can specify on the query what units system you want to the result to use
@brettfelts just add -------->&units=metric or imperial on the url
@brettfelts you can do something like outside the ajax
$('button').click(function(e){
var id = e.target.id;
if(id === 'celsius')
{
console.log('celsius');
//convert();
}
else
{
console.log('fahrenheit');
//convert();
}
});then just have a convert function that gets the value of the #temp display and converts it to celsius and fahrenheit then re-display the converted values
@brettfelts I just did the math inside the JS - so I got the temp in C and then did the math in the js and stored it as another varible
$( "#btn1" ).click(function() {
$( ".message" ).toggle();
});
@brettfelts you can also do this, if you put both the celsius and the fahrenheit in <p> tags (or whatever you want) but just show one of them
Wikipedia Viewer: I can formulate the API call but I can’t retrieve any data from it..is there a special trick or something?
show us your stuff
…how do you enter chunks of code like that, just copy/paste?
@mlawson3691 you can but I’d rather see your codePen as often the issues lies …elsewhere
@mlawson3691 wiki format
wiki format
:point_right: code formatting [wiki]
Inline code
This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.
Code Block
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
@mlawson3691 ^
honestly, i’ve changed it so many times that I could be so far off at this point too
@mlawson3691 try dataType: 'jsonp'
@wearenotgroot no change
any other ideas?
it needs a callback
?callback=? but possibly more ..still looking
ok it’s the form i think… it resets everything and reloads the page
The pos seems to have the same value after the if statement.
function miniMax(movesSign, sign, pos) {
var scoreGame = score();
if (scoreGame) {
return [scoreGame, pos];
}
console.log(pos);
var multi = sign === aiSign ? 1 : -1;
var moves = possibleMoves();
var bestScore = -100;
var positions = [pos];
var thisScore;
var oppSign = sign === "O" ? "X" : "O"; // opponent's sign
while (moves.length > 0) {
var newPosition = moves.pop();
var newBoard = movesSign.slice();
newBoard[newPosition] = sign;
var result = miniMax(newBoard, oppSign, newPosition);
thisScore = multi * result[0];
// Choose the best possible move
if (thisScore === bestScore) {
positions.push(newPosition);
} else if (thisScore > bestScore) {
bestScore = thisScore;
positions = [newPosition];
}
}
// Choose a move at random from the best moves
var randomMove = Math.floor(Math.random() * positions.length);
return [multi * bestScore, positions[randomMove]];
};Can you guys please help me with this?
@mutantspore so strip the form down to bare bones and see if it works?
@mlawson3691 well you actually open a form but never close it. .
your base url should be
https://en.wikipedia.org/w/api.php?callback=? to add in teh callback
and yesthe dataType is probably jsonp
@mlawson3691 as @mutantspore suggested above, the problem is that when the form is submitted it reloads the entire page, so you'll never get the results back from the API (when the page reloads, they're wiped). prevent the form from submitting:
$('#form').submit(function(event) {
event.preventDefault();
var input = $('#search').val();
$.ajax({
// the rest of your code as isand yeah, you're missing a closing </form> tag in your HTML as well
the ajax call as such is working fine
I'm at my wits end now ! It's throwing
http://codepen.io/coderNoob/pen/vLmyWN?editors=1010
Uncaught RangeError: Maximum call stack size exceedederror. Don't know why. Please help.http://codepen.io/coderNoob/pen/vLmyWN?editors=1010
you guys are amazing!
thank you @h4r1m4u !
mlawson3691 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1413 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
np
and thank you @mutantspore
mlawson3691 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1126 | @mutantspore | http://www.freecodecamp.com/mutantspore
@mlawson3691 you may want to change that .on('click', function(){}) to on('input',function(){}) instead so it will not trigger the search when you click the input textfield
@mlawson3691 but rather trigger the search when the values in the input textfield changes
@mlawson3691 another thing you might want to use .hasOwnProperty() to test if the data has some property for instance query or page. so it doesnt gives you error when the data is an error message
@coderNoob All I can say at the mement that it’s the while loop
th erecursion in the while loop
@mutantspore Yes . I narrowed it. For some reason, the
newPosition value is not being passed in the recursive calls.
@wearenotgroot thanks for the input :)
mlawson3691 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 861 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@mlawson3691 :+1: YW
@mutantspore
var newPosition = moves.pop(); The value is not changing. It pops the last free box number and it keeps looping on the same box number.
hey guys, i have a lil challenge, making a timer that counts down, if I put the window.interval method in my function it obeys the click event but misbehaves but if it's declared outside the countdown function it works fine but starts running onload without click event initiating it, how can I correct this, this is my js fiddle
@Lumexralph here you go:
var time = 1200; // in secs
var clockDisplay = document.getElementById('sessionCount'); // target the div
var myTimer; // stores the interval id
function startCountdown () { //countdown by decreasing time at inttervals of 1 second
myTimer = setInterval(function() {
time--;
displayTime();
}, 1000);
}
function displayTime () { //updates the div anytime time decreases
var min = Math.floor(time / 60); //convert time to mins
var secs = Math.floor(time % 60); //convert time to secs
if(secs == 0) { //make secs 59 if it's 0
min--;
secs = 59;
}
//clockDisplay.textContent = min + 'm' + ':' + secs + 's';
clockDisplay.textContent = min + 'm' + ':' + secs + 's';
}
//adding a click event on the div
clockDisplay.addEventListener('click', startCountdown);
@h4r1m4u I wasn't able to fix up that tic tac toe code
:worried:
how come?
function mainAlgoMove() { // *********** bug happens because it finds multiple winnning computer combinations. Sometimes the one it finds comes up with the container being taken by an x. In this event
if (move == 0 && playerArray.length == 0 && compArray.length == 0){ //This will trigger when the board is cleared and the player had the last turn. The computer will go first and have a random move
computerFirst();
}
if (move == 0 && ( (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(24) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(34) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(27) !== -1) ||(pattern.indexOf(2) !== -1 && pattern.indexOf(3) !== -1) || (pattern.indexOf(5) !== -1 && pattern.indexOf(9) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(7) !== -1)) && $('#container-1').html() == "") {
compArray.push(1);
$('#container-1').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.indexOf(5) !== -1 && pattern.indexOf(8) !== -1) || (pattern.indexOf(1) !== -1 && pattern.indexOf(3) !== -1) ||
(pattern.indexOf(2) !== -1 && pattern.indexOf(8) !== -1)) && $('#container-2').html() == "") {
compArray.push(2);
$('#container-2').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(16) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(26) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(29) !== -1) ||(pattern.indexOf(1) !== -1 && pattern.indexOf(2) !== -1 ) || (pattern.indexOf(5) !== -1 && pattern.indexOf(7) !== -1 ) || (pattern.indexOf(6) !== -1) && pattern.indexOf(9) !== -1) && $('#container-3').html() == "") {
compArray.push(3);
$('#container-3').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 &&((pattern.indexOf(1) !== -1 && pattern.indexOf(7) !== -1) || (pattern.indexOf(5) !== -1 && pattern.indexOf(6) !== -1 ) || (pattern.indexOf(2) !== -1 && pattern.indexOf(8) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(6) !== -1)) && $('#container-4').html() == "") {
compArray.push(4);
$('#container-4').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.indexOf(1) !== -1 && pattern.indexOf(9) !== -1) || (pattern.indexOf(2) !== -1 && pattern.indexOf(8) !== -1) || (pattern.indexOf(3) !== -1 && pattern.indexOf(7) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(6) !== -1)) && $('#container-5').html() == "") {
compArray.push(5);
$('#container-5').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.indexOf(3) !== -1 && pattern.indexOf(9) !== -1) || (pattern.indexOf(4) !== -1 && pattern.indexOf(5) !== -1)) && $('#container-6').html() == "") {
compArray.push(6);
$('#container-6').html(compSymbol).css({'background-color': compColor});
move = 1;
}
if (move == 0 && ((pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(48) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(49) !== -1) || (pattern.length == 2 && compJoined.length == 1 && pattern.indexOf(18) !== -1) || (pattern.indexOf(1) !== -1 && pattern.indexOf(4) !== -1) || (pattern.indexOf(3) !== -1 && pattern.indexOf(5) !== -1) || (pattern.indexOf(8) !== -1 && pattern.indexOf(9) !== -1)) && $('#container-7').html() == "") {
compArray.push(7);
$('#container-7').html(compSymbol
That was the original block of code that just went on way too long
if (move == 0){
for (var i = 1; i <= mainArray.length - 1; i++){
for (var j = 0; j <= mainArray[i].length - 1; j++){
if ((pattern.indexOf(mainArray[i][j][0]) !== -1) && ((pattern.indexOf(mainArray[i][j][1]) !== -1)) && ($('#container-'+i).html() == "")){
$('#container-' + i).html(compSymbol).css({'background-color': compColor});
move = 1;
return;
console.log('--------------------------------------------------------------------------------------------------------------------mainArray' + mainArray[i][j]);
console.log('------------------------------------------------------pattern ' + pattern );
console.log('----------------------------------------------------------- i ' + i);
}
}
}
}
}
I made it into as little code as that
but there are just too many bugs
I may just have to take the whoopin in the interview
hmm. that looks much better, the original makes me want to throw up :D
i know... me too
any chance you can fix those bugs?
but it doesn't have bugs
been trying all day
it's a mess
This message was deleted
@h4r1m4u ....you know what I did to fix it?
I'll keep trying
@wyattwade can you explain in words what the mainAlgoMove() function does?
@Lumexralph nope. what did you do?
I wrapped the interval id in another function and used that as the function to be fired on click event
hope it's cool that way?
@h4r1m4u Yeah, first it looks at the computer positions on the board. It looks to see if the computer has a winning move
@Lumexralph sounds alright, hard to tell without seeing the code. did you see my edit of your code above?
the function runs twice every computer turn
Yes I did
ok
can't reach my pc now..... Would post my version as soon as I can
np
Thanks man
each time it's the computers turn, the mainAlgoMove runs twice. First time it runs the computer looks to see if it has a winning move. Second time it runs, it looks to prevent the player from striking a winning move
since It runs twice, I change a variable called
pattern before it runs the second time
I'll keep on it, see if I get anywhere
I appreciate the input, I think getting this right could determine alot : - /
@wyattwade hmm. is there a way that you could break it into smaller functions? e.g. a function to determine whether there's a winning move if a row is completed, a function to determine if there's a column winning move, and a function to determine if there is a diagonal winning move?
ultimately there are only 8 winning combinations (3 rows, 3 cols, 2 diagonals). could you store these in an array and then see if the computer can complete one of them in its move?
i'm not sure if this makes sense with the rest of your code, i'm just trying to give you some tips / nudge you in a better direction
yeah definitely
wow some of my bugs aren't occurring all of the sudden.....
I'm going to do some more testing and then take your advice
roger that
thanks again for helping me out man @h4r1m4u
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1414 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
no worries
Guys, I need help in testing my Tic-Tac-Toe if it is beatable or not.
Please take note of your first move.
http://codepen.io/brainyfarm/full/obVzVN
Please take note of your first move.
http://codepen.io/brainyfarm/full/obVzVN
@brainyfarm Winning position. I am X. I started from the second row of the first column.
http://picpaste.com/brainyFarmTicTacToe-vfsn56UN.png
http://picpaste.com/brainyFarmTicTacToe-vfsn56UN.png
Thank you for your testing and review @neeraj-lad :D
I especially appreciate the screenshot :thumbsup:
I especially appreciate the screenshot :thumbsup:
brainyfarm sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 301 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
@brainyfarm Starting from the middle position on any of the edges, is resulting in wins.
YW
@mca62511 thank you for the advice..it was very helpful,about codecademy...I am in the same position as KevinStaufy...a good level of HTML CSS etc knowledge but so confused how to start!
rozana78 sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 309 | @mca62511 | http://www.freecodecamp.com/mca62511
@mutantspore You there?
need help anyone?
anyone?
no particular help for now @manojansh
@Rozana78 , say what?
@manojansh I mean so far everything is under control...
doesn't look like
@Rozana78
need help please, I need to know if we could set a minimum fontsize in html, so that whereever we define font-size in %, it will be with respect to the defined font-size.!!
Hi, I’m having serious problems making Wikipedia API work can someone help me?
@manojansh You can use
em. font-size: 1em;
@manojansh @coderNoob or rem!
@coderNoob how does em work?
@pedronfigueiredo boss, I haven't reached there yet
@pedronfigueiredo thanks
manojansh sends brownie points to @pedronfigueiredo :sparkles: :thumbsup: :sparkles:
:star: 298 | @pedronfigueiredo | http://www.freecodecamp.com/pedronfigueiredo
@pedronfigueiredo Thanks. I didn't even know what rem is !
codernoob sends brownie points to @pedronfigueiredo :sparkles: :thumbsup: :sparkles:
:star: 299 | @pedronfigueiredo | http://www.freecodecamp.com/pedronfigueiredo
yeah, it works even better I think ;)
do you know how to do API calls?
Yes
What exactly do you need help with?
@pedronfigueiredo No my friend, am also new
I'll try my best
I need to use wikipedia API to do a search and return results
@pedronfigueiredo https://www.mediawiki.org/wiki/Special:ApiSandbox
for example, if you put this url on your browser
it returns entries for obama related articles
for some reason I can’t set up the API call so it gets what you see in the browser and stores it into an object (variable) so I can use it inside JS
hi guys is this the right place to get code feedback?
@pedronfigueiredo Can you be more specific. Did you use the
$.JSON() method?
@HMAN1911 ------>https://gitter.im/FreeCodeCamp/CodeReview
@wearenotgroot thank you kindly
hman1911 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
@coderNoob @wearenotgroot why doesn’t this work?
:star: 866 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@wearenotgroot I know this might be too much to ask but can you please help me figure out why the minimax is not working as it should. I know this algorithm is correct but something is amiss.
http://codepen.io/coderNoob/pen/vLmyWN
http://codepen.io/coderNoob/pen/vLmyWN
$(document).ready(function(){
var api_url="https://en.wikipedia.org/w/api.php?action=opensearch&search=api&limit=10&namespace=0&format=jsonfm";
$(window).load(function(){
$.ajax({
url: api_url,
method: 'GET',
success: function(data) {
document.getElementById("display").innerHTML = "TEST!";
// $('#display').html("test!");
}
});
});
});
@pedronfigueiredo What doesn't work? The api is returning the desired JSON data. You need to format it into proper HTML form for proper display.
@pedronfigueiredo you need to add search= "keyword"
@pedronfigueiredo You need to add a
callback function.
var api_url="https://en.wikipedia.org/w/api.php?&callback=?&action=opensearch&search=api&limit=10&namespace=0&format=jsonfm";
@coderNoob I'll take a look but no promises :smile:
@wearenotgroot He's using
opensearch
@coderNoob what do you mean? sorry my brain is freezing on me
@pedronfigueiredo In your api url, you need to add
&callback=?&
@pedronfigueiredo callback prevents the statement from executing until all of it is finished
My brain freezes all the time. Happens to everyone.
@pedronfigueiredo So what the call back function does is, it prevents the statement from executing until all the data is fetched from the API call.
@coderNoob @pedronfigueiredo nope, that's not what the callback does. adding the callback parameter into the API URL turns the request into a JSONP request instead of a pure JSON, which overcomes the cross-domain request issue
@pedronfigueiredo here's a working version to get you going. notice that i a) changed the format parameter in the URL, b) added the callback parameter, c) added the dataType parameter into the ajax call, d) removed the window.load function (you already have that covered by the doc.ready statement):
$(document).ready(function(){
var api_url="https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&search=api&limit=10&namespace=0&format=json";
$.ajax({
url: api_url,
method: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
});
Guys, I put myself on a challenge to make Simon game 3d using pure css transformations
we'll see how it will go
@batilc1 Good luck :smile:
Need guidance about how to remove this margin that I have between pageOne and pageTwo. I want the two background together, but I do not know what else to try...
Sorry about the picture, I attach the first one I found.
its a bit messy, for start I see that you are not using correctly the bootstrap row class, that might be the problem
you also made that div fixed height to 800px
padding top = 10% in the second page, why is that ?
ummm @kirbyedy I think I let that by mistake
as I didn't knoow how to fix it I was trying things
In order to display the whole image I set height:800px; to force it to that size
@coderNoob Thank you so much. Got lunch and coffee, now coming back to get it :)
pedronfigueiredo sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:star: 334 | @codernoob | http://www.freecodecamp.com/codernoob
@Abel1987 change the .pageTwo background property to this:
background: url("http://wallpapershdfine.com/wp-content/gallery/engineering-background-images/hse_background.jpg") 0 0/100% 100% fixed no-repeat;. and remove the background-size property
http://codepen.io/Sleepy-guy/pen/adqjjq?editors=0010 can you look at line 28 ? i think didnt slice string properly
i occasionally encounter things like this @Sleepy-guy
didnt look at your code, but it seems to me your fix is adding this css to your child divs
box-sizing: border-box
also, if you are using inline-block's, there shouldn't be any space between the html of those inline elements
that means:
<div ...inline... ></div>
<div ...inline...></div>
in that case, you must either delete the
new-line character between the two elements, or comment out the space between them, or set -4px negative margin-left to their class
@Sleepy-guy I went on doing
<div ...inline...></div><!--
--><div ...inline...></div>
hi guys I have a question about Random Quote Generator? Where should I store my quotes? Should I just build and array of quotes and get them from there? Or is a better way to do it?
@classact1 yes the array thing is ok
@classact1 that's a good start. the next step would be to use a third party API
@h4r1m4u hmm, don't have any experience with APIs. Which API is it?
@classact1 for example http://forismatic.com/en/api/. but if you google around, you'll find others. there's one that gives you chuck norris jokes, for example :)
@h4r1m4u thanks! : )
classact1 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1415 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
np
Hello every one ! Does anyone how to get data from one page and display them in another page using JavaScript ???
hi @h4r1m4u could you check my pen?
http://codepen.io/neeraj-lad/pen/zrbJrR?editors=0010
I can't get the background image to change at line 95 in JS.
http://codepen.io/neeraj-lad/pen/zrbJrR?editors=0010
I can't get the background image to change at line 95 in JS.
anyone else who can look into this?
@neeraj-lad what is the problem ?
@ZeeMax I put a $(body).css() code at line 95, which wasn't working ie I was not able to change the background on refresh.
My previous code:
$("body").css("background", bckgImg);But I just got a soln which works
$("body").css("background-image", 'url('+bckgImg+')');
@neeraj-lad are you retrieving the image from the API or you hard code it ?
@ZeeMax My problem is solved now. The second method works.
No, I have number of links, from which I choose the appropriate one using switch.
No, I have number of links, from which I choose the appropriate one using switch.
@neeraj-lad good
@ZeeMax another query, what should I do to stretch the image over the entire background? I used width: 100% for body now, but when I zoom out, the image doesn't cover the entire bckg
@neeraj-lad background-size:cover;
@ZeeMax thanks! that works!
neeraj-lad sends brownie points to @zeemax :sparkles: :thumbsup: :sparkles:
:star: 237 | @zeemax | http://www.freecodecamp.com/zeemax
@neeraj-lad make sure to include your image url in this foramt background:url () center fixed; to get centered fixed background
@neeraj-lad Great
@ZeeMax thanks again! would background-size: 100% auto do the same thing?
neeraj-lad sends brownie points to @zeemax :sparkles: :thumbsup: :sparkles:
:warning: neeraj-lad already gave zeemax points
@neeraj-lad yeah
@ZeeMax great!
hi. someone know how to define text-decoration-color in chrome ?
or any alternative ?
@Mooli88 To specify color, you just have to say
color :).myElement {
color: red;
}
@pradeepce i meant text-decoration-color :) i want the underline to be different color
Hi everyone. Having some issues with my wikipedia viewer, I have something that mostly works, but it doesn't like URLs with quote marks. How would I get the article ID instead? http://codepen.io/jsanderson/pen/xZBmXy
Hey everybody! I am working on this zipline http://codepen.io/FreeCodeCamp/full/bELRjV here is what i have made so far http://codepen.io/Pistacie/full/ZQPPRp/ My codepen is showing temperature in celsius right now, but when i compare my temperature and temperature from the other code pen they are different, how come?
@Pistacue the FCC codepen has round the value. Yours shows me 24.476 while FCC shows 25
@rustydragonfly do you want to put quotes in your url?
@neeraj-lad thanks, mine is showing 4,7 celsius but the other is showing 2, so that made me think, but I guess it doesn't matter
pistacue sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 303 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
@Pistacue that might be due to some other issue.. that can't be due to rounding. But your pen gave the right temp for me.
I have rounded it and my codepen is showing 1° and the exemplar is showing 2°, is it possible they are getting my location differently?
@Pistacue did you round up or did you round down?
@neeraj-lad I used the Math.round()
@Pistacue the value might be <1.5, FCC might have used Math.ceil()
Hey guys, I'm currently trying to make a portfolio page and I'm having some trouble with bootstrap. Is anyone able to decipher why the two wells aren't in alignment vertically with the wells in the next row? It might be better to view the project on a higher resolution than the chat allows. Thanks in advance :) http://codepen.io/JohnDeegs/pen/pgYGoV
@JohnDeegs you need to verify your email. Codepen is prohibiting full page view right now.
@neeraj-lad Done
@JohnDeegs You have not closed the 'row' div of the first row.
@JohnDeegs http://codepen.io/neeraj-lad/full/gPEJKX/
@neeraj-lad I just did that after you said and in my pen I'm still having the problem, interesting
@neeraj-lad It was the row around "Portfolio" that wasn't closed right?
@neeraj-lad Thanks though
johndeegs sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 304 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
@JohnDeegs try putting a close div tag, before the start of the second div 'row'
does anyone know hwy this isn't working?
function sym(args) {
arr = arguments[0];
for (i = 1; i < arguments.length; i++){
arr = arr.concat(arguments[i]);
i += 1;
}
return arr;Is should return [1, 2, 5, 2, 3, 5, 3, 4, 5] when passed sym([1, 2, 5], [2, 3, 5], [3, 4, 5]), but only return [1,2,5,2,3,5]
@rtc31293 what is the use of the line i += 1?
@neeraj-lad it's mainly if I get a result with a quote, it doesn't work. E.g I was using "cat" as a test search and the third result is "Schrödinger's cat" which cuts off at the '
Everything else seems fine
@rtc31293 yeah, you shouldn't need that? You already have it set to iterate at the start of the loop with i++
@rtc31293 also you forgot to identify i , it should be var i = whateverhere ;
@rustydragonfly ohh.. I you need to convert "Schrödinger's cat" to a url, try encodeuricomponent. I don't know what might be causing your issue though.
hahaha oh man..I need to take a step back from my code for a little haha I can't believe I missed that @neeraj-lad @rustydragonfly
@ZeeMax it shouldn't matter if you preceed i with var, var declared a new variables but using it without var will also declare a new variable, which shouldn't matter unless you're using multiple for loops
@neeraj-lad ooh, fantastic. thanks.
rustydragonfly sends brownie points to @neeraj-lad :sparkles: :thumbsup: :sparkles:
:star: 305 | @neeraj-lad | http://www.freecodecamp.com/neeraj-lad
When I set up my API call for Build a Random Quote Machine on Codepen(http://codepen.io/owentemp/pen/LGajWq), I am running into the following error: XMLHttpRequest cannot load http://codepen.io/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_=1455638016563. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. The response had HTTP status code 404. Does anyone know how to get past the "Access-Control-Allow-Origin" barrier I keep running into?
Can someone tell me why my script is not working when I press the button? I imagine it's a missing column or something since it worked before.
http://codepen.io/Fuzyon/pen/KVJBLW
http://codepen.io/Fuzyon/pen/KVJBLW
It says that checkLocation is not defined, any idea why?
@Fuzyon shouldn't it be checkLocation()?
doesn't make a difference, I tried already
it's probably an issue in the script
anyone have an explanation how to draw animated weather icons? I saw one example which use border-radius to draw clouds, but I don't understand the logic behind it. Some link about that topic would be great. I also tought to do svg animations but IE and Edge doesn't support them
this is annoying, arrrgh
do you really want to do that from the scratch ?
you can use font awesome if its for the project
@neeraj-lad I saw that already but I want to understand css for creating those icons
@ByteRogue okay!
I'm very close to getting the Symmetric Difference Algorithm.
function sym(args) {
arr = arguments[0];
lengths = [arguments[0].length];
for (i = 1; i < arguments.length; i++){
lengths.push(arguments[i].length);
arr = arr.concat(arguments[i]);
}
var o = {};
var output;
output = arr.reduce(function(prev, current) {
var key = '$' + current;
if (o[key] === true){
index = prev.indexOf(current);
prev.splice(index,1);
}
if (o[key] === void 0) {
prev.push(current);
o[key] = true;
}
return prev;
}, []);
// write back the result
return output;
}
sym([1, 2, 5], [2, 3, 5], [3, 4, 5]);Any advice? The function works when only two arguments are passed in, but when there are more than two I can't figure out how to create a new array for the previous two, I tried using the reduce method inside a for loop but the program told me not to do that
codepen is acting very crazy right now
Everything running smooth on my local host, giving 'undefined label' error on codepen
http://codepen.io/daajust/pen/obVROB?editors=0010
Everything running smooth on my local host, giving 'undefined label' error on codepen
http://codepen.io/daajust/pen/obVROB?editors=0010
@Fuzyon don’t round off the lat and lon.
@mutantspore I found the issue, there were some missing columns
@Fuzyon yes that may be true but instead of being 4 metres inaccurate it’s 40 miles off because you have rounded your lat and lon
@owentemp you don’t really have a URL in your .ajax.. just a bit of one
@owentemp should be
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1 I guess
@Fuzyon also I can’t see the background you are trying to put up
hi
anyone managed to figure out Style Text Inputs as Form Controls my code
<
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<div>
<form>
<input type="text" form-control placeholder="form-control">
<div class="btn btn-primary">
<i class="fa fa-paper-plane"></i><button type="button" class="btn btn-primary">primary</button>
trying to do this Give the submit button in your form the classes btn btn-primary.
Add a <i class="fa fa-paper-plane"></i> within your submit button element.
Give the text input in your form the class form-control.#
hi guys, can anyone recommend me a site with a images of all sizes to use while I'm building a web?
sorry if im stating the obv but have u tried the free ones
yeah sorry, i was googling it but didn't know what to search, it's done. thanks
k cool
I'm trying to use bootstrap class "list-inline" for my unordered list, but it's not working as expected. <ul class="list-inline"> <li>1914 - Born in Cresco, Iowa</li> </ul>
Can anyone point out what am I doing wrong here ?
are u working on the boostrap class
es
no this one is for "Build a tribute page"
sounds like that is beyond bootstrap so apologies not there yet
oh ok np
@ichirped that looks fine to me. what's the issue?
@h4r1m4u I still see the text left-aligned with no bullets
@ichirped well, the inline list doesn't have any bullets and if you only have one <li> in it, it'll be left aligned
ahh
check the example on the bootstrap doc page to see what the inline list looks like: http://getbootstrap.com/css/#type-lists
ok seems like I need to find another way to do what I want
@h4r1m4u I see bullets there :(
are you looking at the Inline list?
style text input as form controls can anyone help with this please. the result i am getting looks ok
but not getting green lights
so can go forward
is this a bug
?
<input type="text" form-control placeholder="form-control">
<div class="btn btn-primary">
<i class="fa fa-paper-plane"></i><button type="button" class="btn btn-primary">primary</button>
@h4r1m4u oh I wasn't, thanks for your help. that link seems helpful in determining what the end result looks like
ichirped sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1416 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@ichirped you're welcome
<input type="text" form-control placeholder="form-control">
<div class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
Hey everyone, I'm about to start the random quote machine challenge bu am a bit lost on getting the actual quotes. Are we expected to just store a buunch in an array or find a more sophisticated solution?
@vexleir yeah, either you can store them in an array in your code, or you could use a third party API and pull the quotes from there via API calls
Ah ok, I didn't even think to see of there was an API that would do that. Thanks @h4r1m4u
vexleir sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1417 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@EdnaMode
<input type="text" form-control placeholder="form-control">. shouldn't it be class="form-control"
@vexleir no problem. here's an example of one: http://forismatic.com/en/api/. there are others also; if you google around, you'll find a bunch
perfect, thanks!
@h4r1m4u thks will try thank u
ednamode sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1418 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
looking for help with getting data from an api to display. doing local weather app and i cant figure out how to pull certain data from the data that i get back from my api call
@andrewchar which api?
@andrewchar oh that
link your pen @andrewchar
@wearenotgroot http://codepen.io/andrewchar/pen/dGrVJO?editors=1011
@andrewchar did you try to output the data on the console
@andrewchar you will usually get a json object from the api
yes i am getting the data that i want
grolocation is working
geo*
i just dont know how to pull certain data that i want from that list using jquery
@andrewchar it's just a regular look up on object
@andrewchar example
@andrewchar json.main.temp
@andrewchar console log it
@andrewchar you can also specify what unit system the result data will be return in, in your api url call add &units=metric or imperial
some is in an array
json.weather[0].icon and json.weather[0].description
@andrewchar so? did you tried it?
im not sure what to do with json.main.temp
@andrewchar it give you the tempearture
@andrewchar on your code
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&appid=80f8b2429407d4784a3e920826f54555&units=metric', function(json) {
console.log(json);
console.log(json.main.temp);
updateWeather = json;
});
@andrewchar you named the object data json so
ok its shows me 282.564
@andrewchar yes it's in kelvin
@andrewchar you need to specify the unit system to use
@andrewchar append this to the url --------->
&units=metric or imperial
ok ive got it in my url
good
i guess i could add something to that later to get it to somehow change
the way i did to my lat and lon
to change in my url
@andrewchar just console.log the entire data so you can study what data you want and how to get it
in the lesson Convert JSON Data to HTML. it makes me do a function to put my data into html on the screen
can i not just write $("#myTemp").text( json.main.temp );
and link that to a div ID to make it show
@andrewchar yes
@andrewchar just add some div with id then append a html element on it or something
So starting on the Random Quote Machine and I have a bunch of quotes I want to use. Am I using JavaScript for that/
@Jarvis-327 yep
@Jarvis-327 you have two choice on how to do it
@wearenotgroot explain?
@Jarvis-327 either have an api to get random quotes or just have your own list of quote in an array
@Jarvis-327 if you choose the array route
@Jarvis-327 then just generate random number using Math.random<----------------random index(remember range!)
@wearenotgroot
<p id="myTemp">Temp: </p>$("#myTemp").append(json.main.temp);like that?
@andrewchar sure try it :smile:
@andrewchar you have lots of option .html, .text() etc
i add that to my append?
Help please! What is wrong with this piece of code that Xhr fails with 'no-access-control-allow-origin'
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
console.log('hello');
}
xhr.withCredentials = true;
xhr.send();
no wiki entry for:
please what is wrong with this piece of code that xhr fails with no-access-control-allow-originvar xhr new xmlhttprequest xhropenget httpss3amazonawscomfreecodecampsimonsound1mp3 true xhrresponsetype arraybuffer xhronload function consoleloghello xhrwithcredentials true xhrsend
@batilc1 how is your connection? via http or https?
what do you mean?
i opened up an http-server on my localhost, it is trying to access the amazon server
@batilc1 if you are connected via http then request a query in https then the browser will se two different header data
i am not sure what do you mean by
connected via http ? @wearenotgroot
@batilc1 ----------->https://developer.chrome.com/extensions/xhr
but that is a hack for development, i may go on production with this code :/ and serve it to common people who dont use that extension
this cors is a joke...
hi, the 'and' in this media query '@media not screen and (color) {...}' is more like '&&' or '| |' ?
Hey guys I am having trouble accessing the openweather api object for "weather"..
[Object {
description: "broken clouds",
icon: "04d",
id: 803,
main: "Clouds"
}]
How do you access the keys in this "weather" object
its confusing that is has [ ] and { }
@clarkarnold weather[0].
so weather[0].main
?
@wearenotgroot Got it to work thank you!
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 868 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@andrewchar :+1:
I just found this really cool resource for learning regex. Enjoy *~ http://regex.learncodethehardway.org/book/
Hey guys i have a quick question, i'm trying to do Show the local Waether project, and i have troubles with getCurrentPosition() function. Is there a posibility that callback function is protecting vvariables with coords to show position outside that function?
@GlaDdos remember the request is an async
can anyone help\
@GlaDdos meaning the function/your program will continue on while waiting for the result
ok'
@mjqblade with what?
@GlaDdos so your getWeather gets executed and doesnt see the current position
@GlaDdos because it hasnt receive the data yet
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>it says your div element should have the class contaner flood
no it's not taht, i was trying to save position to global variable, and it keeps resseting to initial value outside getPCurrentPosition(some_function(){ here i get variables set to coords})
@GlaDdos to make sure that the longitude and latitude are receive before requesting the openweather api . do the openweather api call inside your getlocation callback function
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
@GlaDdos post the link to your pen
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>help plz excresice 74
question - the 'and' in this media query '@media not screen and (color) {...}' is more like '&&' or '| |' ?
@wearenotgroot ```if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
longitudeQuery = position.coords.longitude;
latitudeQuery = position.coords.latitude;
navigator.geolocation.getCurrentPosition(function(position){
longitudeQuery = position.coords.longitude;
latitudeQuery = position.coords.latitude;
weatherAPIQuery = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitudeQuery + "&lon=" + longitudeQuery;
console.log(weatherAPIQuery);
});```
oh well that formatting came up great XD
@GlaDdos you’ll need an api key to make it work
@mutantspore help plz
anyways longtitudeQuery is global variable, and outside this function its not showing coord but undefined or wahtever i assign to it before entering that function
@mjqblade @mjqblade did u get an ans?
@GlaDdos post your pen so we have the whole picture
what\
@GlaDdos it’s not showing for the reasons mentioned earlier
noooooooo
@Mooli88 almost everythimg]]
@EdnaMode no
@mjqblade im new here so can you cut and paste the question fm the map and i will see if i have answered that
i didnt
@mjqblade please be more specific
@Mooli88 i dpnt know much but i know there diffrent becuase in one your asking something]
@wearenotgroot http://codepen.io/GlaDdos/pen/KVYwdg
@mjqblade exact question pls
?
what
i know it's not showing API responce yet, i'm trying to figure out why global variables are not storing values that are assigned to them in navigator.geolocation.getCurrentPosition(function(position) <- this place
what is the question on Map so i can locate it
Use Responsive Design with Bootstrap Fluid Containers
@GlaDdos
$(document).ready(function(){
var weatherAPIKey = "6a8f3fff2528a34f3bc0896626b63742";
var longitudeQuery = 0;
var latitudeQuery = 0;
var weatherAPIQuery = "";
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
longitudeQuery = position.coords.longitude;
latitudeQuery = position.coords.latitude;
console.log(longitudeQuery);
weatherAPIQuery = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitudeQuery + "&lon=" + longitudeQuery +'&appid=' + weatherAPIKey;
console.log(longitudeQuery);
$.getJSON(weatherAPIQuery).done(function(weather){
console.log(weather);
})
.fail(function(){
console.log("error");
});
});
}
});
@GlaDdos as has already been said. the process is asychonous .. the geolocation process gets started but you don’t know when it wil finish.. teh actual JS code just keeps rolling on and gets to teh bit outside the geolocate and well.. nothing has return yet.
@mutantspore Oooooh...
@GlaDdos as said earlier to make sure that the longitude and latitude are set before making request to the openweather api you either set a timeout on the getJSON or do it inside the getCurrentPosition callback
@mutantspore @wearenotgroot I am working on the same project.. How do you control when the next part fires? I am getting my Coordinates but I can't figure out how to tell the rest of the code to wait for that part to happen first
either do it as @wearenotgroot has suggested or wrap your getjson in a function ..say.. getWeather and call it from inside the geolocation
@GlaDdos and as @mutantspore said you need to add the appid
thatks you guys i get that now @mutantspore @wearenotgroot
i meant thanks @mutantspore @wearenotgroot
gladdos sends brownie points to @mutantspore and @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 869 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
:star: 1129 | @mutantspore | http://www.freecodecamp.com/mutantspore
@clarkarnold as we just mentioned.. call the second part from within the first
@mjqblade @mjqblade this worked for me
<div class =" container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
dont forget the closing div at the bottom
that caught me out
need help
@clarkarnold remember scope also no need to stringify anything just get it directly on json parameter
var arr;
var url;
var lat;
var lon;
var str;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
lon = position.coords.longitude;
lat = position.coords.latitude;
url = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=44db6a862fba0b067b1930da0d769e98&units=imperial";
runFun(); //<---------------as mentioned call this here to insure the lat and lon are set
});
}
function runFun() {
$.getJSON(url, function(json) {
console.log(json);
arr = json; //<-------------no need for this
str = JSON.stringify(json); ///<-----------no need for this
//move here to reach the json/data
$("#test").html("City: " + json.name + "<br>Temp: " + json.main.temp + "<br>Wind: " + json.wind.speed + " MPH from " + json.wind.deg + " degrees" + "<br>Weather Conditions: " + json.weather[0].main);
});
//<---------------couldnt reach the variable from here move it up
};
@mjqblade @mjqblade just sent help to you
cant u not see code???
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>help level 74 or Use Responsive Design with Bootstrap Fluid Containers
@wearenotgroot OK I will give that a try thanks!
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: clarkarnold already gave wearenotgroot points
@clarkarnold :+1:
@mjqblade re-read instruction
@mjqblade where is the <link> for bootstrap!!!!!
@mjqblade from instruction:
You can add Bootstrap to any app just by including it by adding the following code to the top of your HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
@mjqblade add that on the top of the page
@wearenotgroot Got it working now thanks again
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: clarkarnold already gave wearenotgroot points
@clarkarnold :+1:
Finally fixed it up a bit. At least that one chunk of code. Couldn't have done it without you thanks again man @h4r1m4u . Have a good night
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1419 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@SaintPeter thanks
urobert sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2500 | @saintpeter | http://www.freecodecamp.com/saintpeter
Hey guys! I am currently working on my portfolio project. I have a question about the portfolio part of the website. The page that we have as a model has projects as a div with an image of the actual project.
I am trying to find a way to get a picture of my own ziplines. Do you have any idea how to do that?
@DrSebic screen shot
But how do you load that into codepen?
you’ll have to host it somewhere. like http://postimage.org
or even dropbox if you mak eit public
I will try it with dropbox. Thanks @mutantspore!
drsebic sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1133 | @mutantspore | http://www.freecodecamp.com/mutantspore
just don’t use imgur.. it fails
imgur TOS specifically says "don't link to your website" so yeah...
I've had problems with Dropbox for some reason, not sure why
Only with recent versions tho
How's it going @mutantspore
@wyattwade :) good. you hav eto fiddle with teh dropbox url to get it right
can some one help me with the portfolio project
hello frontendies! I finally did make a 3D simon game with pure-css pouring a lot of effort in it! please check it out, you can switch between 2d and 3d graphics. Zoom in to see the height :D http://codepen.io/batilc/pen/rxbadv
@batilc1 having an issue, it asks for the same inputs everytime instead of a random one.
@idietmoran oh having the same issue as well, wasnt happening 10min ago :S
Can someone tell me why I can't vertically align all the content in my body in this project? I know my css is probably messy, still learning
http://codepen.io/Fuzyon/pen/KVJBLW
http://codepen.io/Fuzyon/pen/KVJBLW
@Fuzyon as I mentioned earlier this rounding of your lat and lon is making your location very inaccurate .. 40 miles off for me.
var latitude = Math.round(position.coords.latitude);
var longitude = Math.round(position.coords.longitude);
@idietmoran it is working perfectly right now? I dont understand, i did not do anything?
@mutantspore changed that, thanks
fuzyon sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1134 | @mutantspore | http://www.freecodecamp.com/mutantspore
it's not gonna be perfect, even the official website doesn't get my exact location.
@Fuzyon it’s correct now
good! :D any idea for centering? display:flex and align-items: center messes up everything
is that not what you wanted?
@mutantspore I know I tried for a while!! I'll give dropbox another go soon. I like it a lot except for when that happens
@Fuzyon or do you want everything … including teh title etc to move down to be centered?
Hey man @mutantspore I've been working on this for weeks. The ai was done last week but I just redid a lot of the code. I still need to rename function and comment better. Some of the code probably still needs to be cleaned up. This is due tomorrow for an apprenticeship tomorrow
lemme get it on codepen 1 se4c
I know you're busy but if you want criticize the hell out of it lol
@mutantspore yep
i wrapped everything with a container div and gave it margin-top: 5%, it's close but I don't think it's the best solution
This message was deleted
I got most of the bugs I think. There may still be more . If anyone has any type of criticism it's very appreciated. Thanks
@wyattwade I just won one and it alerted "Tie!", might want to get that checked out
do you know what combination you used to win?
its not supposed to be winable
shit....
vertical line down the middle
haha
I'm a god, lol
i just won again the same way
it's probably that combination that gives you trouble
top middle bottom?
mid top - mid mid- bottom mid?
wait
i'll take a pic
k
where'd you go first second and third?
middle, top right and left middle
can anyone explain how display flex works?
no wiki entry for:
flex
@wyattwade it doesn’t really show you the winning (or generally final) move. an alert box pops up with the status but the game board isn’t updated. Alo have alook at using a modal or something else than an alert.
can anyone explain how display flex works please?
I like that idea @mutantspore
thanks @mutantspore
wyattwade sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1135 | @mutantspore | http://www.freecodecamp.com/mutantspore
@Fuzyon It doesn't happen with me. Would you mind sending a screen-shot?
ya, sec
@mutantspore were you able to beat it?
and it's my turn :D
did you go middle - top right - left - bottom?
and thanks @Fuzyon I'll get on thsi now
wyattwade sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 177 | @fuzyon | http://www.freecodecamp.com/fuzyon
middle - top right - left middle
after that I put one on bottom middle then he puts one bottom right, instead of blocking me by placing one top middle
that's the issue
replicated it
good catch @Fuzyon
fixing it now
good luck! :P
Guys, I am doing the calculator and I find this curios thing.
Is there something in the text input that makes the string appear inverse?
I display the same string somewhere in the html webpage, inside a div I mean. And also, the same string inside the input text, and It appears inversed.
Is there smt I have to know in order to solve it?
http://codepen.io/DiazPedroAbel/pen/pgRXWv?editors=1010
forget about memo_inv, I was trying to redo the string but inverse to sove the problem but I couldn't for the moment.
How does one indent bullets without only indenting the text after the bulletpoint
oh maybe, i want aligning instead of indenting... looking further into
hello everyone
@Abel1987 you have the javascript displaying it that way.
Does anyone know why my website only fits 30% of the page on the iPhone 4 but fits the width perfectly on other phones. - http://colinflaherty-websitedesign.byethost8.com/?ckattempt=1
@Abel1987 some of the issue is you're treating the digits and operators separately for display purposes, if you treated them the same, there wouldn't be an issue.
Do i have to use React to finish the React challenges?
@ExhibitArts not sure what you mean. it seems to be as intended on both the chrome dev tools iPhone 4 simulator and a real iPhone 4
@ExhibitArts though your mobile menu doesn’t seem to work. is it using bootstrap? you need bootstrap.css , jQuery.js and bootstrap.js for that
@mutantspore Yes I know that. I haven't worked on that part yet. It's wierd because on my iphone it doesn't look right. Another person said the same thing and he had an iPhone aswell.
@ExhibitArts
are you trying to center it on full screen?
@idietmoran It's supposed to look like this on mobile. - https://gyazo.com/686c52f97ae2d2c1f9ef18a79a5e4e6f
@batilc1 Yes.
@ExhibitArts
check this
http://i.imgur.com/Nsndksk.png
look at the changes made below, might have to mess with it some more to center it but that's what you're looking for i believe
you also have to change all your media queries i believe
On the Local Weather Zipline, what is a route for displaying the Open Weather API
does anybody know of any good resources for trying to complete the wiki search zipline? i've tried the wiki api page and everything else i could find with google but am still super lost on it all and not really progressing.
FIrst search search bar's with website/url endpoints. Second search for a randomize button. @davidsonsteve
i've been able to retrieve json data from wikipedia but changing the request url to send back the specific info i want and trying to use their sandbox for generating it hasn't been working for me
@davidsonsteve post your code
$.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&list=search&indexpageids=1&exsentences=4&exintro=1&explaintext=1&exsectionformat=plain&limit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&srsearch=" + input + "&callback=?", function(json) {
var myData = json;
console.log(myData);
console.log(myData.query.search[0].title);
console.log(myData.query.search[0].snippet);
});
oops above that var input="dogs"; a static var for now
@davidsonsteve have you checked the error in your browsers console?
@davidsonsteve iirc you need to use JSONP with the wiki API.
my console prints out "Dogs", the title of [0] in the returned array and then the snippet from it, no error. it's just when i try to modify that url to retrieve different information then i get errors about MIME types or that the property of "search" is undefined. I've got the "&callback=?" in there at the end though, so it's returning results
@davidsonsteve might be an issue with your input command then, or you aren't running the .getJSON on click maybe.
yeah i'm having trouble formulating a good input command that returns basically just the titles, descriptions, and page IDs. that's the only one i've had any luck with but it doesn't return the page id. thanks, i'll keep trying with it
@davidsonsteve you better use $.ajax and give those parameters like :
data: {
action: 'query',
exintro: 1,
...
}so that you can do modifications easily, and your code is readable as well.
also, have a look at generators in wikipedia api
hey thanks, i'll check into those. sounds like i got some reading to do because i was way off in my approach
I'm working on the first challenge, and I've run into an odd issue with CodePen. When I attempt to load Bootstrap through CodePen's options as instructed, it doesn't load; adding Bootstrap classes to elements does nothing. However, if I copy the CDN code from http://getbootstrap.com/getting-started/ into the project, Bootstrap loads properly. I don't have this problem with the other libraries like jQuery. Has anyone else encountered this?