I finished my Tribute page - anyone want to give feedback? It's kind of corny I think. http://codepen.io/mjcreate/pen/YGPzdd
@mjcreate I think it looks quite nice! it scales nicely, the changing font types throughout is a little choppy, and maybe emphasize some of the bullet points, but otherwise great job imo!
Ok, I know this is something dumb. on the first circle (when the screen size is small, so using the xs column sizes, the first circle (or top left) when clicked throws the other circle wayyy down, but the other ones work fine. any help? http://codepen.io/swetz/pen/yaymBa
@aszwet1 oh thanks for catching that!
mjcreate sends brownie points to @aszwet1 :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @aszwet1 |http://www.freecodecamp.com/aszwet1
is it me or is the wikipedia api documentation a joke?
This message was deleted
@stephepush very annoying - something that should be simple made so unclear - try this - https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=bike&callback=?
@stephepush if you look through the api you can see the different parameters sent via this api
@GregatGit, lol there are parameters for the parameters. Nice.
Thank you though, @GregatGit
stephepush sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 759 | @gregatgit |http://www.freecodecamp.com/gregatgit
hope it helps :+1:
Really have no idea to go about the augmented edition Javascript challenge
Addition
@sjbowler1992
You need to make similar changes to the code given
myVar = myVar + 5; can be replaced with myVar += 5You need to make similar changes to the code given
Chrome give me a message "provisional headers are shown", anyone can tell me how to find the specific reason?
lol
。。。。。
...
额！！
maybe it was something being blocked by adblocker
我只会说日常用语 5555~~~~
@crumpx hi
hello
With bootstrap - how do I center all content within a div?
Hello @StoneGu
@tourdejord maybe use "text-center" class?
Hey people, It is possible to make the button perform another different actions when clicked again? I want to create a button to perform "show" and then "hide" after another click.
Hey everyone! Working on the Get Local Weather challenge. I'm still very unsure of what I'm doing, but I went slowly and think my code should work perhaps with minor modifications. Problem is I refreshed my CodePen page and now it won't load! Here's the link: http://codepen.io/billpzt/pen/EgjawL
@sharkantropo I don't know if there's some function that does this already, but you could do something inside the button like a counter, like a variable that's either a 1 or a 0. If you click the button and it's a 0, it adds a 1. If it's a 1, it resets to 0. Then based on if it's a 1 or a 0, you can make it do something different...
hello world！
welcome to FreeCodeCamp @Carina-Hu!
@Carina-Hu konishowa
@maeswilliam hahaThank you .I'm not a Japaness.I come from China~
@maeswilliam thank you ~
carina-hu sends brownie points to @maeswilliam :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @maeswilliam |http://www.freecodecamp.com/maeswilliam
@Carina-Hu haha i know, i was messing with you :D
@Carina-Hu good luch and havefun Carina
@maeswilliam @Carina-Hu luck*
@maeswilliam haha~nothing serious~thank you~~~
Hi everybody, I have completed JSON APIs and Ajax, but feel that i have learned NOTHING since i just copy and paste the provided code in the directed space, according to your experience, where should i go to learn again this JSON APIs and Ajax? do you have any good recourses to learn all these 3?
@Carina-Hu could you use freecodecamp and gitter in Xian?
@c0d0er I don't know of any websites specifically to train that. What I would do is look at the documentation for Ajax and such, and mess around with some APIs with that in Codepen
@c0d0er of course I can~~
@c0d0er I 'm using it right now~~
@KrisVos130 thanks!
c0d0er sends brownie points to @krisvos130 :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @krisvos130 |http://www.freecodecamp.com/krisvos130
No probem
@Carina-Hu awesome! do you need to use vpn?
@c0d0er haha~ I use nothing .I only need to turn on the computer~
Im at the same place. Keep searching. What I understand is that it's meant to make you learn how to search for answers as real coders do. You are on the right track. I think.
@tourdejord are you talking with with me? if yes, sorry didnt realized
@c0d0er Just try to build the quote machine, it'll help you understand what's happening
@labiej thanks
c0d0er sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @labiej |http://www.freecodecamp.com/labiej
Im working on the pomodoro clock challenge and i dont know how to start a stopwatch, i have the html css and some jquery for adjusting the clock but I dont have the "main part", I would be appreciate a little hint or something so i can have a clue where and how to star http://codepen.io/mikail1998/pen/ozgXzb
start**
@mikail1998 I don't have an answer for this but just commenting to cheer you on a bit!
Looking good so far!
@mikail1998 Using
research setInterval at mdn
setInterval(func, 1000) Allows a function to be called once a second and can be your timer.research setInterval at mdn
@mikail1998 You'll need to capture the return from setInterval in case you want to pause the clock.
you have an extra ) in your setInterval call - use analyze JS feature in the drop down
you have an extra ) in your setInterval call - use analyze JS feature in the drop down
@sjames1958gm oh yes I just saw that like 5 minutes ago, I have an idea how to it now at least :D
@mikail1998 :+1: did not see how long ago you posted. :)
@zachvalenta I started loosing hope when no one answered but thanks for the positive energy :P
mikail1998 sends brownie points to @zachvalenta :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @zachvalenta |http://www.freecodecamp.com/zachvalenta
@mikail1998 remember to store the interval id to a variable so you can stop it later(clearInterval(intervalID))
var intervalID = setInterval(func, 1000);
....
clearInterval(intervalID);
@wearenotgroot ahh okay thank you.
mikail1998 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1585 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
I just cant get how to actually start the interval
for now im just trying to start the clock to go every second on number less
later i will adjust it ofcourse but so far nothing...
@mikail1998 check your dev console for errors
@mikail1998 try using .text instead of .html also use result--
$("#clock").on('click', function(){
var str = $("#pomodoro1").html();
var result = parseInt(str);
setInterval(function(){
//use .text, .html is a bit slow and lag since its rebuilding the html inside that <p>
$("#pomodoro1").text(result--); //<--------result-- so the new value is stored in result
}, 1000);
});
@wearenotgroot yeeeeeaah it works
thanks so much :D
@mikail1998 :+1:
@mikail1998 another suggestion is having a named function for that interval instead of an anonymous one. And declare it outside the click event callback so it will much easier to manage
This message was deleted
This message was deleted
@wearenotgroot
$("#clock").on('click', function(){
var str = $("#pomodoro1").html();
var result = parseInt(str);
function interval (){
$("#pomodoro1").text(result--);
}
var timeOut = setInterval(
interval//<--------result-- so the new value is stored in result
, 1000);
like this?
@mikail1998 check you pm :+1:
Hey campers! Can anyone help with this? I'm trying to round and border and image, but the image will only stay rounded if not bordered. I would really appreciate the help!
<div class="container-fluid">
<div class="col-md-4">
<div class="row">
<center><img class="img-rounded thin-grey-border" alt="profile picture" src=https://d13yacurqjgara.cloudfront.net/users/219762/screenshots/2351573/saitama.png height=200px width=200px></img></center>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<center><img class="img-rounded thin-grey-border" alt="profile picture" src=https://d13yacurqjgara.cloudfront.net/users/219762/screenshots/2351573/saitama.png height=200px width=200px></img></center>
</div>
</div>
</div>
Hey guys, anyone more experienced with animation (and/or video games) here? I know a thing or two about CSS animatons/transitions, but I would like to know what is the best way to create animations. And I'd like a few other questions answered, like: what is better for animation — canvas or SVG? Is it worth learning these two? Is Canvas good for creating HTML games? What are some good resources for learning SVG and Canvas and animation in general? Please, anyone who is more knowledgeable on animation, provide an answer. Thanks!
CSS
body{
background-color:#D8F9F9
}
.thin-grey-border{
border-radius: 20%;
border-style: groove;
border-width: 10px;
border-color: grey;
}
good
@tmag298 What seems to be the problem? I copied your code and it seemed to work for me.
I'm not sure why my
<div class="result"> isn't centering. https://codepen.io/roastchicken/pen/KrOEZv
Nvm, I decided to go with a max width instead of
display: inline-block
@tmag298 - depending on who is checking the code (the testing code might be picky, or maybe the browser) it looks like you are missing a semicolon
; after you declaration of background-color:#D8F9F9 - not sure if that would cause a problem?
@tmag298 - the value for your
src attribute should also be enclosed in quotes (I was just scrolling up and looking at earlier posts.)
I'm building a tribute page in FreeCodeCamp. I can't get this code to put a link on the page. It turns blue, it is underlined, but when I mouse over it does not change to a hand and does not go to the link when clicked. The page name is valid, the text in quotes when put in a new tab will bring you to the web link . Can anyone see my mistakes?
<h2
More information at this
<a href:="https://en.wikipedia.org/wiki/Vostok_Station" target="_blank"> Wikipedia_Page </a>.
</h2>
</h2>
@tmag298 - last try... :) the CSS for the img-rounded class is this:
.img-rounded {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}and your .thin-grey-border class definition is this:
.thin-grey-border{
border-radius: 20%;
border-style: groove;
border-width: 10px;
border-color: grey;
}so you do have a conflict in some of the properties that you are trying to use - the Bootstrap class has a very small radius set on the corners, you have a 20% radius for all corners, so you are most likely overriding the Bootstrap settings. It is perfectly fine to do that if you wish, but it appears that things are working as they should be.
@whbob - you should not have the
: after your href:= attribute setting. That might help... In other words, just href=
How can I make a heading tag and paragraph tag appear on same line ?
@meetmangukiya with
display: inline-block or inline for both or float: left for first, there are many possibilities
@AlexanderDom would it be the same for getting a heading and an anchor on same line to create a header?
when you say anchor you mean
<a href> @meetmangukiya ?
yeah
@meetmangukiya - instead of a paragraph tag, you could use a
<span>, which is an inline element that allows you to apply different styling to a span of text? Maybe that would be easier to use?
you can put it in your header like
<header><a> or <h1>Text<a>
yes if you put something inside your header you can use
<span> element
@AlexanderDom @meetmangukiya - it is probable not valid to do this:
<h1>Text<a> because you cannot always nest any element anywhere - I think that heading tags are one of those places where you cannot (or are not supposed to) nest other elements?
@khaduch I ain't nesting
<h1>Heading</h1>
<nav>
<a>anchor 1</a>
<a> anchor2 </a>
</nav>
@khaduch it's perfectly valide to do
<h1><a href="">Text</a></h1> since html 5 even <a href=""><h1></h1></a> it's ok
Removed the colon and removed the <h2> tags to get the <a> link</a> to work. Thanks so much :)
@AlexanderDom - oh, my bad... I'm probably confused with some other nesting that is not permitted... carry on, then! :) And thanks for the corrected information!
khaduch sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
:)
hey guys
@joshfaggion11 - hey there.......
hey hey @joshfaggion11
I am going to start the first project? any tips?
@Rajatk95828 : Just start! :D
Ready Fire Aim!
lol ok
it can be about anyone right?
You're the rocket! Not a petty bullet! Course correction can happen any time!
no problem @khaduch :)
@Rajatk95828 - my advice - keep it simple... It can be about anyone - but don't make it too complex with a lot of small text to read - someone that you can easily get some highlights to present. It's easier to do for a first project, and easier to get it looking good!
@AlexanderDom - I'm definitely a bit of a dinosaur when it comes to HTML 5 stuff - apparently this was not valid before 5 came along...
yes, finish first all the project you can rework it after
<a> who wraps block elements yes it wasn't @khaduch
I dedicated my tribute page to the legendary Peter Griffin
^^ normal with your profile image
:D
me to Quentin Tarantino :p
:D
Ready Fire Aim!
Ready aim fire :/
@meetmangukiya : That's a recipe for mediocrity! Ready fire aim is the new cool!
Course correction can happen any time!
Ok, I get it, my bad :(
:D
Why'd this not work
div > header > h1{
/*props*/
}@meetmangukiya is your html is
<div>
<header>
<h1></h1>
</header>
</div>?
yep
so you have misspelled some css rule =)
nope , just
h1{
/*props*/
}works well
show us both your css & html please
I did a nesting mistake sorry :(
it happens ;)
Good morning guys!
10 challenges away from getting my Front End Certificate. :D
most of it thanks to all of you
@sollymay , great going! All the best...
@sollymay 
Hi people. While making my tribute page I was thinking about readability and typeface and such. I was seaerching about for ways to easily manage this when I stumbled on typecast. Here is the help video. http://support.typecast.com/customer/portal/articles/1337056
@khaduch Thank you for your help! Sadly, adding that img-rounded to my CSS has now made the image entirely square! I've also simply removed the thin-grey-boarder, but that does not make the image circular.
tmag298 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1639 | @khaduch |http://www.freecodecamp.com/khaduch
@Belax8 It worked for you? As in the image is circular and bordered?
@tmag298 - that
img-rounded only does a small radius on the corners. img-circle would put a 50% radius on the image, which would make it circular. If the image is square, then it would appear as a circle. If the image is rectangular, then it would appear as an ellipse. And you could still use your grey border class, if you remove the border-radius setting.
Hello guys! I'm new with this, and I have been developing a website for a cleint on upwork.com
I wanted to know how do you normally show the result to the client, do you have your own servers + domain, or do you use any web app that you upload the files to?
Thank you in advance :-)
@alejandroariasag it all depends on the contract and what you decided before. You can show it on dev server first and later move it to production when all set, agreed and approved.
It all depends on contract and what you decided before but leaving at least a bit of security for yourself is useful. @alejandroariasag
@ewathedoer I understand, but I was wondering if there is any dev server out there that I can use? Any special tool? Or do I have to get my own?
Hello everyone! I was wondering what are you'all using more to layout your projects: floats, inline-block or flexbox? There are so much options that it makes me crazy sometimes. I'm also well aware that there's no silver bullet here, but I would like to know some thoughts in that regard. :)
@alejandroariasag I use my own because it’s easier and I totally control who sees what.
@drurenia currently I’m learninf and discovering flexbox, it’s really powerful so I’d recommend it instead of playing with floats.
Under this movie you’ll find the list of materials to learn it https://www.youtube.com/watch?v=hg5X7XFdpWc @drurenia
hey guys im a bit stuck on the pomodoro clock any tips would be great pls check this.post
http://forum.freecodecamp.com/t/chain-the-two-pomodoro-timers/34825
http://forum.freecodecamp.com/t/chain-the-two-pomodoro-timers/34825
I'm working on the simon project. My JavaScript file does not seem to be read in at all. Basic onclick function is not firing. The file located in the js folder and is named script.js. Am I missing something silly?
<!DOCTYPE html>
<html>
<head>
<title>Simon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="holder">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<div class="inner">
<div class="row">
<button type="button" name="button" class="btn btn-primary" onclick="start()">Start</button>
<!-- .roundedOne -->
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" checked />
<label for="roundedOne"></label>
</div>
<!-- end .roundedOne -->
<input type="text" name="count" value="--" disabled="disabled">
</div>
<div class="row">
<center>
<section title=".slideThree">
<!-- .slideThree -->
<div class="slideThree" >
<input type="checkbox" value="None" id="slideThree" name="check" />
<label for="slideThree" ></label>
</div>
<!-- end .slideThree -->
</section>
</center>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
@ewathedoer I watched your video as soon as it came out (they are great, btw). Although it made me realise I had one more option to layout my pages (which is great), it also came with more doubts haha You said you were learning flexbox now, so what have you been using until you found out flexbox?
@drurenia what’s the other option? curious :) I was aligning them by floats and positioning by absolute or fixed depending on the situation. Generally I’m fresh to flexbox but I see huge difference in how helpful it is. BTW Thanks for watching and the feedback!
ewathedoer sends brownie points to @drurenia :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @drurenia |http://www.freecodecamp.com/drurenia
@sebtn The reason it keeps doing the break time is because you are always setting duration to the break-length value:
if (timer == 0) {
clearInterval(clock)
var duration = (document.getElementById('break-length').innerHTML)*60
startTimer(duration, display)
clearInterval(clock)
}Set a variable that will tell you what "mode" the timer is in (break or session) and change the mode every time the timer reaches 0. You can then know whether or not to read document.getElementById('break-length').innerHTML or document.getElementById('session-length').innerHTML
I think I figured my problem out. It seems like my link to the javaScript page was ok. It was the JavaScript itself that had some errors. Thank you to anyone who was looking into that.
@sebtn - I'll make a few suggestions, looking at your post.
- Store all of your values in javascript variables, do not read from the DOM. The DOM should generally be "output only".
- Keep a flag value to indicate which phase of the timer operation you are in - session or break, and then when you run out of time on the current phase, select the one that you aren't in, update all of the times, flip the flag, and let it go again! (That's probably the area you are stuck in! Only switching to the break time... so try that, make a variable that will essentially toggle between session and break, and you can make your code act accordingly.)
That is my helpful hints on that - looks like you're getting things up and running?
@ewathedoer The other one is using inline-block, but there is a drawback regarding the empty space they create in some circunstances, which you can eliminate with some magic tricks that I don't really appreciate, but, overall, people recommend it over the float approach in most of the times, since floats were not create for such job and they also need the clearfix method in some circunstances as well. (I am pretty new to frontend development and I can be wrong about this kind of stuff, I am a Java backend dev for 7 years now and I am struggling to get into the frontend world)
@drurenia we are all learning ;) good luck and I’d really go for flexbox since it’s already supported by majority of browsers and seems to make the job pretty easily
@ewathedoer thanks, I'll give it a try because looks like it comes down to which one suits me best
drurenia sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
Hope to hear you soon how it worked for you. Have fun with flexbox!
Sure thing! And I hope to see new videos soon as well. Keep up the good work.
I’ll do my best. This week majority of the time I’m doing a project for a client, so I cannot show this kind of work, but I hope to make more from my side projects and learning since tomorrow. It’s a tough week ;) @drurenia see you on YT
cya!!
:)
Thanks @khaduch @TylerMoeller will try the suggestion, what should i keep in mind when building a flag or mode checker?
sebtn sends brownie points to @khaduch and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 794 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:star2: 1640 | @khaduch |http://www.freecodecamp.com/khaduch
@sebtn Variable scope is one to keep in mind. You'll probably want to set the flag first in your start() function and then pass it to your startTimer function
startTimer(duration, display, mode).
@sebtn - mainly that you know what it is doing? You might do something like this, as an example:
var session = true; // this means you are in the "session" time
// your code...
if (session) {
// we are in the session time, switch to the break time
timer = breakTime;
session = false; // now it means we are in the break
// start the timer or let it continue running with new count
} else {
timer = sessionTime;
session = true;
// start the timer or let it continue running with the session count
}a rough idea.
and as @TylerMoeller points out - you want to make sure that the scope is such that you can access it in all of your functions.
awesome :) will check it out
Hello. I am having some trouble with my TwitchTV app, in particular, the for loop I am using seems to only be returning data for the LAST variable (twitch username) in my array. This is not making any sense to me. Anyone care to help troubleshoot, I have been over this several times and cannot identify why this is happening. Link to pen below code.
$(document).ready(function() {
var twitchUserArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for (i = 0; i < (twitchUserArr.length); i++) {
var twitchUser = twitchUserArr[i];
var API = "https://api.twitch.tv/kraken/streams/" + twitchUser + "?callback=?";
var url = "https://www.twitch.tv/" + twitchUser;
$.getJSON(API, function(data) {
if ((data.stream) === null) {
$("#notStreaming").append("<a class=" + "'" + "list-group-item notStreaming" + "'" + " href=" + "'" + url +"'" + "><h3>" + twitchUser + "</h3><h4>" + " status: offline" + "</h4></a>")
} else if ((data.error) === "Not Found") {
$("#accountClosed").append("<a class=" + "'" + "list-group-item accountClosed" + "'" + " href=" + "'" + url +"'" + "><h3>" + twitchUser + "</h3><h4>" + " status: account closed" + "</h4></a>")
} else {
var status = (data.stream.channel.status);
$("#streaming").append("<a class=" + "'" + "list-group-item streaming" + "'" + " href=" + "'" + url +"'" + "><h3>" + twitchUser + "</h3><h4>" + " status: " + status + "</h4></a>")
}
});
}
});
@DanielMW34 Do to the nature of closure (concerning your callback function) all the callbacks share the same twitchUser variable, which by the time
each callback runs is equal to the last user.
replace this
with
And each callback has a different context.
Make sure to add the closing
each callback runs is equal to the last user.
replace this
for (i = 0; i < (twitchUserArr.length); i++) {with
twitchUserArr.forEach(function(twitchUser) {And each callback has a different context.
Make sure to add the closing
)
hey guys, I'm working on the spinal-tap-case challenge, and I can't figure out one detail of it. It's specifically not working in the test examples where there are no spaces between words. I've tried writing an If-statement that will add a space before a capital letter if there is none, but it's not working and I'm not sure why. Can someone take a look?
function spinalCase(str) {
// "It's such a fine line between stupid, and clever."
// --David St. Hubbins
var array = str.split("");
for (i = 0; i < array.length; i++) {
if (array[i] === /[A-Z]/ && array[i-1] !== " ") {
array = array.splice(i - 1, 0, " ");
}
array[i] = array[i].toLowerCase();
if (array[i] === " " || array[i] === "_") {
array[i] = "-";
}
}
console.log(array);
str = array.join("");
return str;
}
spinalCase('This Is Spinal Tap');
@sjames1958gm Hmmm.... I am going to have to read into this, I don't doubt your solution is correct, I just haven't deciphered "why" yours is correct. I thought due to the nature of closures (inner vs outer functions), I would be able to pass the variable "twitchUser" to the callback, and run the callback each time the for loop loops...
@sjames1958gm thank you
danielmw34 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3132 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
hwy
@sjames1958gm ...again :)
I need help
with API's
like how do you implement them?
and how do you like... use them?
?
Which project are you working on @KlausMana ?
The Weather One
i need to get the openweathermap api
i just don't know how @kevincauto
Ok let me look at my project and see what I did.
ok ty
This is the basic idea using jQuery.
function updateWeather(city,system) {
//connect to open weather map API
var icon;
var apiKey = "3249f284576e7eda04afba6c2277493f";
$.ajax({
dataType: "json",
url: "http://api.openweathermap.org/data/2.5/weather?q=" + city + ",usa&units=" + system + "&APPID=" + apiKey,
type: "GET",
success: function(json) {
alert("This worked. Now use the JSON object.")
}, error: function() {
alert('Error obtaining IP');
}
});
}
That is my API, you need to go on the site and register for your own. (It's free)
*API key
i have
i just wanted to know
how does the whole API implementation thing work?
json is that variable. You just use dot notation of bracket notation
json.main.temp
where did you use the var apiKey you created?
oh nvm i see it now
i still don't get the whole idea though :/
so you declare a data type
the url of the api
So that connects to openWeather,
and you should return a JSON file.
If you use this example:
Hey guys I was directed to come over here for some help...
Can someone help me figure out why there are these weird gaps between my backgrounds?
You can open that right in the browser and see that json object @KlausMana
so this JSON contains some values right?
and i need to use this values
say "weather"
right.
how do i access these again?
so weather would be json.weather
oh so they are stored in the json variable?
right.
wow thanks @kevincauto i think i get it now
klausmana sends brownie points to @kevincauto :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @kevincauto |http://www.freecodecamp.com/kevincauto
you've helped me a bnch
json.weather[0].description for instance
I could use some help...
would be "scattered clouds"
@Subbycoon I can take a look
what are you referencing? The white horizontal space?
I have 3 different sections with 3 different backgrounds
And there are weird gaps between them
So the big white space? http://prntscr.com/cfbh9t
Yes that and the smaller one between the Recent and Contact sections
right now it looks like the backgrounds are in the <p> tags
You may want to try making the background classes in the larger divs
Yes, because I wanted each paragraph to have its own background. Let me try rearranging them
Break the website into three large divs and give each div the class with the background
One second
You can put the <p> tag within the divs
Well whatever I did now all of the gaps are huge...
Ok I one moment. I'll straigten you out.
basically this is what you want:
<ul>
<li><a class="active" href="#about">About</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="row home-background"></div>
<div class="row recent-background"></div>
<div class="row contact-background"></div>
in your css
add a class for row:
.row{
height: 500px
}
That will give you three rows, 500px in height, with your backgrounds.
Then you can add in the <p> </p> with your information in between the div sections
So should I just add the above to my current CSS or delete everything and put just that?
just add it in
@kevincauto will this code allow me to get the api?
function Weather(latitude , longtitude){
var apiKey = "fffc77f90fb489748fe36ae1b79ac8b5";
$.ajax ({
dataType : "json",
url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
type : "GET",
});
}
after I set the values of latitude and longtitude of course
OK it didnt do what I thought it would but I may be able to work with it
Let me test this out
@KlausMana yes I believe you can use the lattitude and longitude!
@Subbycoon https://codepen.io/kevincauto/full/amOWGo/
@Subbycoon you can go into the editor view. I didn't change anything in your css, just added the .row class
Ok see I did that and when I start adding in my content for my <p></p> it makes that gap again
ok let me check it out.
Whoops nevermind
I fixed it
@Subbycoon You didn't link to each section. Try naming each row background as an id for the href to go to.
Can someone please help me with my random quote generator
@itsstoiven what is wrong?
@KoniKodes What do you mean? If I click the links it takes me to those sections properly for me...
@KoniKodes something is wrong with passing in the API. it used to work a couple months ago but I can't figure out what's the issue. No quotes are showing up :worried:
@Subbycoon I'm sorry. The link changes color but doesn't take me to that section.
@itsstoiven You will need your quote page to go to https:// instead of http:// . Look at how your reach twitter.
@kevincauto Thank you SO much for helping
subbycoon sends brownie points to @kevincauto :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @kevincauto |http://www.freecodecamp.com/kevincauto
@KoniKodes i've tried that but it didn't make a difference
@itsstoiven About two months ago Google changed the rules on api security. Let me look at something else.
@KoniKodes ahh okay. please let me know if there's any work around
@itsstoiven check out this blog... http://www.wandrr.io/JS-Interview-Question-Explain-how-JSONP-works
@KoniKodes sorry, im not sure how that's relevant. i thought i was using jsonp correctly since i was using a callback function in my code
@itsstoiven Load your codepen over http link and change the API call to use HTTP. Forismatic does not support HTTPS.
@TylerMoeller that's what it was initially, but it wasn't working
@itsstoiven It works for me. What browser are you using?
is this legit?
latitude = navigator.geolocation.getCurrentPosition(function(position){
return position.coords.latitude;
});
@TylerMoeller ive tried testing both on chrome and firefox. it shows no quote at all
will this store the latitude inside variable 'latitude'?
@itsstoiven Are you 100% sure you are loading your pen over HTTP instead of HTTPS?
http://codepen.io/itsstoiven/pen/pyqQqq?editors=0110
can someone look at my code please?
@KlausMana what is your pen?
@TylerMoeller ah i see. sorry about that. it works perfectly fine! is there any way to work around the https call or is it just completely restricted to http?
@itsstoiven This is an ugly hack, but you can use a HTTPS proxy with your API:
if (window.location.protocol !== 'http:') url = 'https://crossorigin.me/' + url;
@KlausMana Your code is correct, but will only work over HTTPS on Chrome.
how do I make it so it works in other browsers too?
or try wunderground
and why will it only run over https in chrome @TylerMoeller ?
@TylerMoeller I've read about some issues with crossorigin.me, although I don't remember what they were.
@KlausMana You'll need to use a location API that supports HTTP, but it will be less accurate. Something like http://ip-api.com/json
nice
@KoniKodes Yeah, it's really just a hack. I don't recommend it
how do I implement that?
do I need like a key?
@KlausMana For security purposes, google requires accurate location over HTTPS. That's why it won't work over HTTP in chrome. To use that API, just do a getJSON call and parse the JSON.
No key needed
erm
idk how to do that :stuck_out_tongue:
@KlausMana wunderground.com has a secure api. It requires a key, but it free when you sign up.
@TylerMoeller ahhh okay. thanks a bunch for the help!
itsstoiven sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 795 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@KlausMana You are off to a good start with your ajax call to the OpenWeatherMap API. It's the same approach for http://ip-api.com/json
so same as that?
ok ty
so after implementing that all I have to do is latitude = json.lat;?
or json.lat(); ?
@TylerMoeller
@KlausMana From looking at your pen, you haven't added jQuery to your Codepen settings yet. Your $.ajax call will fail until you add that. This should do what you want:
$.ajax ({
url : "http://ip-api.com/json"
}).done(function(data) {
alert(data.lat + ',' + data.lon);
}).fail(function(err) {
console.log(err);
});
Use that to figure out how to set the variables and pass them to the weather API.
ok
can working in ms edge be a problem for me?
@TylerMoeller ok, so is this good?
function Weather(latitude , longtitude){
$.ajax ({
url : "http://ip-api.com/json"
}).done(function(data) {
alert(data.lat + ',' + data.lon);
}).fail(function(err) {
console.log(err);
});
latitude = data.lat;
longtitude = data.lon;
var apiKey = "fffc77f90fb489748fe36ae1b79ac8b5";
$.ajax ({
dataType : "json",
url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
type : "GET"
});
}
console.log();
i'm sorry for the disturbance, just that I don't quite get these stuff so well, there were too little to none tutorials on freecodecamp about the use of API's and jQuery, and I haven't looked anywhere else than here
People, if somebody could help me on this Tribute Page project. Is there a way to make the text smaller without compromising its size in smaller screens?
@luscariot You can set your font size to em which is a little more fluid than px. 1em is usually the size of the font-size (12-16px), if you console your page in Google and inspect the elements, it will tell you what the font is. Then you can work on it from there.
@KlausMana try youtube search API and you should find some good videos to help.
@KlausMana your js part is not well structured. it should be something like weather app
@sorinr good to see you.
@KoniKodes Thank you! But the thing is I wanted to make the text block (like margin and stuff) look smaller, like to fit inside the image margin. If I change the size of margin or padding, the text looks weird in smaller screens. I'm not sure if I'm making any sense...
:cookie: 364 | @konikodes |http://www.freecodecamp.com/konikodes
luscariot sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
@KoniKodes hi there. glad to see u too
@luscariot You are using bootstrap, so you take advantage of it. Make your container class include container-fluid, and this may help.
@sorinr How have you been?
@KoniKodes just fine tnx. working on a travel portal
@sorinr That's cool. l'm at the promodora clock and came in here to take a break.
Hey guys, any reason why my background colors aren't showing?
CSS would be:
body{
background-color: #000000;
}
background-color: #000000;
}
.about{
background-color: #f2f2f2;
}
background-color: #f2f2f2;
}
you need to ask about @someone!
@arvendragon what is your pen?
Calling Bootstrap
@KlausMana notice how you have the .done(function(data)... after your call to ip-api.com? That's where you parse the json. You'll also need that for your weather API call. The main issue aside from that is variable scope. This may be a good refresher: https://www.freecodecamp.com/challenges/global-vs-local-scope-in-functions
@arvendragon first, in codepen you don't need the <head>. You want to change the settings in the upper right hand corner under css to bring in bootstrap , and JS to bring in the js version.
Hi. I was wondering where can I find free resources to use in my portfolio? such as images, videos, and so on
@gustavocd https://pixabay.com/ has a great source for photos, but I think you will need to host them on a different secure platform.
@KoniKodes for some reason removing the head solved that problem, thank you!
arvendragon sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @konikodes |http://www.freecodecamp.com/konikodes
@gustavocd This is also a good list: https://github.com/neutraltone/awesome-stock-resources
@arvendragon Great! You may want to add the bootstrap js (Quick Add dropdown) as well.
@KoniKodes me too. just a break from airports, routes, hotels, city events, ecc :)
@TylerMoeller This is a great resource! Thank you for sharing.
konikodes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 796 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@sorinr All the fun stuff, right?
@KoniKodes Of course! The "Awesome Lists" on github are really helpful, there are awesome lists for just about everything.
@TylerMoeller :-) I'm still exploring all that github has to offer.
Actually rip, I'm still having problems with CSS selectors. It seem like in the CodePen, the HTML elements can be properly selected but ID/Class tags aren't working well
@KoniKodes yes. kind of challenging stuff coz i have to update different parts of the page based on live search data
@sorinr Wow, I'm having enough problems getting my searches and autocompletes to work. I can't wait to see what you do with it.
@KoniKodes it will take a while to decide first if i go for vue.js or react
@arvendragon It's looking better. Your id/class should be addressed in css. I've only seen the class section so far, and that worked on your background change.
@sorinr Which do you prefer?
@KoniKodes i tend to go for vue more but for the moment i'm not excluding react
@sorinr I've been researching react, but have touched it yet. I'm not familiar with vue.
@KoniKodes what i don't like about react is that i have to move my "html" to js
@sorinr Oh. That would change my whole mindset. Maybe I should look into vue first.
Back to my clock. See you later.
I need quickly contact form for one site. can someone help me with that?
hey @ivanposavec sure
send me a pm
@NicholasDShaw can you send me the pm? because i am lost in this chat.. lol
slow day?
Newb here, working on my front-end tribute page. Problem: I've nested everything in a div element with class "container-fluid" but the image will not resize with the rest of it. Am I missing something?
@UnholyAvenger do you have a link to share so we can see the code?
Sorry about that, and thanks.
@UnholyAvenger give your image a class and then in your css put
width: 100%; in that class
Like
<img src="https://d.ibtimes.co.uk/en/full/1467924/aung-san-suu-kyi.jpg" alt="Supporters of Aung San Suu Kyi hold posters bearing her image" class="testing"> in your html and then .testing {width: 100%;} in your css
It's alive!!!!!! Thank you sooooo much!
Anytime! :smile:
Virtual hugs for chase!
it took me 3 days to finish
something
Hey Robert, not bad, maybe include a link to your facebook page instead of telling people to look you up.
<a href="url to your facebook page">Follow me on Facebook</a>
@NicholasDShaw Thank you that is the plan
predarobert sends brownie points to @nicholasdshaw :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @nicholasdshaw |http://www.freecodecamp.com/nicholasdshaw
@camperbot how do you get brownie points?
You just mention somebody and then say thanks/thank you/etc
@JLuboff cool, thank you
nicholasdshaw sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @jluboff |http://www.freecodecamp.com/jluboff
;)
Quick question! For some reason my Twitter icon image is not acting as a link like I am wanting. Is there something in my code that is causing this?
Code:
<div class="container-fluid" id="contact">
<h3 class="contact">Contact me.</h3>
<br>
<div class="contact-row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a ref="http://www.twitter.com" target="_blank">
<img class="img-responsive center-block" width="100" height="auto" style="margin-bottom:40px" src="http://icons.iconarchive.com/icons/sicons/basic-round-social/512/twitter-icon.png" alt="Twitter Logo">
</a>
</div>
Code:
<div class="container-fluid" id="contact">
<h3 class="contact">Contact me.</h3>
<br>
<div class="contact-row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a ref="http://www.twitter.com" target="_blank">
<img class="img-responsive center-block" width="100" height="auto" style="margin-bottom:40px" src="http://icons.iconarchive.com/icons/sicons/basic-round-social/512/twitter-icon.png" alt="Twitter Logo">
</a>
</div>
@ezcrowe a href
Ah! Missed that! Thanks @Anntol
ezcrowe sends brownie points to @anntol :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @anntol |http://www.freecodecamp.com/anntol
Hey does anyone know how I can modify this code to toggle between display: block or none?
$(".glass").click(function(){
$("input").css("display", "block");
});
@LordYamanouchi http://api.jquery.com/toggle/
My Navbar will collapse but once collapsed when I click the collapsed icon nothing happens. It doesn't expand. Any thoughts?
My code:
<!--Start of Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Evan Crowe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--End of Navigation Bar-->
My code:
<!--Start of Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Evan Crowe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--End of Navigation Bar-->
However, I just tried copied the same code into w3schools.com test editor and it worked as it should but not when I try it in CodePen
@ezcrowe Open your codepen settings and click "JavaScript". Add jQuery first and then Bootstrap.js.
@ezcrowe link to the code pen please?
@NicholasDShaw http://codepen.io/ezcrowe/pen/VKLLob?editors=1000
@TylerMoeller I just did. It didn't seem to change my problem. Just linked the Pen above
@ezcrowe You added jQuery-ui instead of jQuery.
Two different libraries
Fixed! Thanks @TylerMoeller
ezcrowe sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 798 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
i' m challenge 117 now what do you do ?
@itsstoiven - just load your page using
http:// instead of https:// - maybe you should put a reminder note at the top? (I see that @KoniKodes posted this same solution... quite a while ago. I guess I'm way behind on the chat stream! ;) )
Where are people finding numbers for the challenges?
@TylerMoeller - they take the brownie points value, prominently displayed at the top of the page. @Hox1374 - you need to post the name of the challenge, the numbers are irrelevant to the sequence of the challenges.
Ahhh lol, thanks @khaduch Big mystery solved!
tylermoeller sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1641 | @khaduch |http://www.freecodecamp.com/khaduch
how do i share my project from codePen to FCC?
@williezerocool Just use the URL from the address bar in your browser
thanks