@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
and @tommygebru it means what ever
gosh i cant think of what to build a tribute page to lol
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
@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?
@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
@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 :(
im just so confused
@KevinStaufy OOHHH i see they added new challenges it wasnt there a few days ago...
@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
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 !
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?
code academy is not worth it
not like this place
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
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
@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:
@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
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
alright ill try to throw something together after his League of legends game is over
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.
I did mine on Hayao Miyazaki
The timeline is highly incomplete
interesteing
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
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
@KevinStaufy Just bootstrap really. You might add jQuery if you want to get all fancy, but it isn't necessary for the Tribute project
@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
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/
@KevinStaufy lately i've been trying to design more so i've been away for a few days...
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:
i get the jist of it
you helped alot
just at first i was kinda uhhh
@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
@KevinStaufy I will ... so many tabs ...
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.
@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#
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:
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.
is it
.smaller-image {???????} ?
@mca62511 ^^^^
you can call it .thing-a-ma-bob if you want
@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
@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">
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
kk cant figure it out how to center this image lmao
<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
@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;
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
so maybe put the img inside a div or.... yeah. Actually @tommygebru has the right of it. That's much more elegant.
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.
zeiadwsabra sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 272 | @mca62511 | http://www.freecodecamp.com/mca62511
@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
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.
help pzl
plz
ygfyw
The " margin: 0 auto;" method doesn't work for img elements, it works for a div element.
and then class the margin into the div?
<style>
body {
background-color: #000000;
}
</style>plz help number 60
@KevinStaufy here, I forked it and played around a bit to explain http://codepen.io/mca62511/pen/qbvYBy
@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.
@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.
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
interstellaridea sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 290 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
its upsetting me :(
does anyone know how to add images to code pen
@KevinStaufy ok I've forked your page, take a look at it to see my changes. http://codepen.io/jayuhasz/pen/RrdyKX
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
@KevinStaufy basically, I made the image into a block of it's own then applied margin properties to it
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 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
@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
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?
for one
<div> is a division in the page. They can wrap around things and contain them.
: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.
so how do i make multiple div's?
or can i only have one
div {
width: 70%;
margin: 0 auto;
}
You can have as many as you want, but for this you could probably just wrap the whole page in it
quick question
how do i make diffrent ones
if there all named div
how do i differenceiate
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>
Also, a <p> tag is a paragraph tag, so use them to divide paragraphs.
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.
@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.
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 :)
@mca62511 much better ty
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
nvm
check now
@hallectj nvm, just trying to help :) using setTimeout for waiting page to load is not right, nor guaranteed
@KevinStaufy Florida? I was born in Miami. Family moved to Sebring after Hurricane Andrew.
In order to complete the zipline/project? If I remember correctly you need to have a link to where people can learn more information.
Also, looks like you still haven't fixed your paragraph tags.
your right
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 i added a link in the bottom
but used h2 i should have used a <p> with a bigger font proabbly
well, actually, I think p with a bigger font is better
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
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"
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
th-thanks, yeah but it kind of is for something so trivial
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
this is my tribute
its really bad but its better than nothing
@Gords where you have it, outside your geolocation
successfunction, lat and long are undefined
@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
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
@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
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?
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.
qualitymanifest sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 277 | @mca62511 | http://www.freecodecamp.com/mca62511
they should make a custom brownie emoji
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?
I'm on the same one and I cant seem to get the button to toggle between imperial and metric properly. any suggestions?
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.
@brettfelts Sorry it was the first one
@brettfelts add button listener before the ajax call and do it outside it
@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?
@mlawson3691 you can but I’d rather see your codePen as often the issues lies …elsewhere
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
honestly, i’ve changed it so many times that I could be so far off at this point too
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
thank you @h4r1m4u !
mlawson3691 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1413 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
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.
mlawson3691 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 861 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@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);
:worried:
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
been trying all day
it's a mess
This message was deleted
@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?
can't reach my pc now..... Would post my version as soon as I can
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
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
wyattwade sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1414 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
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
need help anyone?
anyone?
@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?
@pedronfigueiredo boss, I haven't reached there yet
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
do you know how to do API calls?
What exactly do you need help with?
I need to use wikipedia API to do a search and return results
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
@pedronfigueiredo Can you be more specific. Did you use the
$.JSON() method?
hman1911 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
@coderNoob @wearenotgroot why doesn’t this work?
@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.
var api_url="https://en.wikipedia.org/w/api.php?&callback=?&action=opensearch&search=api&limit=10&namespace=0&format=jsonfm";
@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
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 ?
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
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 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 :)
classact1 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1415 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
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?
@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.
@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 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
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 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.
@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]
@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
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?
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
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
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
@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
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
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
sounds like that is beyond bootstrap so apologies not there yet
@ichirped well, the inline list doesn't have any bullets and if you only have one <li> in it, it'll be left aligned
check the example on the bootstrap doc page to see what the inline list looks like: http://getbootstrap.com/css/#type-lists
@h4r1m4u I see bullets there :(
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
<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
@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 oh that
link your pen @andrewchar
@andrewchar you will usually get a json object from the api
grolocation is working
geo*
i just dont know how to pull certain data that i want from that list using jquery
@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 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
@andrewchar you need to specify the unit system to use
@andrewchar append this to the url --------->
&units=metric or imperial
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 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 you have two choice on how to do it
@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 you have lots of option .html, .text() etc
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
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
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 { }
?
@wearenotgroot Got it to work thank you!
clarkarnold sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 868 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
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 meaning the function/your program will continue on while waiting for the result
@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>
<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
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 it’s not showing for the reasons mentioned earlier
@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
@Mooli88 i dpnt know much but i know there diffrent becuase in one your asking something]
@mjqblade exact question pls
?
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