lpy1994 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 704 | @gregatgit |http://www.freecodecamp.com/gregatgit
ampersamd sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 578 | @iamnawa |http://www.freecodecamp.com/iamnawa
$.getJSON
is case-sensitive. $.getJson
won't work. You also need a .done(function(weather)) on that weather getJSON. After you get that working, you'll find that weather.description is undefined, so you'll need to console.log(weather), look at the JSON, and figure out how to parse it to get the weather description. Hopefully this helps you get back on track :) didn't want to just give you the code.
help here, m trying to figure out how to center my elements in the row,
here m trying to figure out how to center my elements in the rowhttpcodepeniomremotopennayjrd
Hey everyone, got a question regarding the Map The Debris exercise of FCC. It's actually more of a "logic" question, or math question, what-have you...
For context:
"Return a new array that transforms the element's average altitude into their orbital periods.
The array will contain objects in the format {name: 'name', avgAlt: avgAlt}.
The values should be rounded to the nearest whole number. The body being orbited is Earth."
For more context, the link to my code: https://repl.it/Cef1/1
While i managed to solve it, i did look up the hints, because i was losing myself over what the actual formula consisted of, namely of the 'a' value, the semi-major axis in meters of the orbital period
It's stated that the semi-major axis is the average altitude of the orbitting object + earth's radius. Ok, but i don't understand how the 'average' is the right value to find the semi-major axis.
Shouldn't it be the highest altitude point of the orbitting object + earth's radius that actually defines the semi major axis's distance?
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 685 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
text-center
class will center your text in a row. To center images, you can use the bootstrap grid system, or just leave the image in a row and define margin: 0 auto;
in your CSS
@TylerMoeller , still not centering what seems to be wrong or missing here hmmm?
text-center
to center that text. <div class="col-sm-7 text-center">
dueldrawer8 sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @jwoo92 |http://www.freecodecamp.com/jwoo92
need some help here http://codepen.io/GMATom/pen/BzAOQE/?editors=1010
I need to alter the value of global variables lat and lon from within the function, is that possible? What am I doing wrong? later on I will use those global variables in a new function within the document ready one
@mremotoo
Actually, this is what I'm trying to achieve:
https://codepen.io/FreeCodeCamp/full/YqLyXB/
and this is my code:
http://codepen.io/mremoto/full/NAYjRd/
Please notice the text and the image on my code. it doesn't seem that it's centered in the div properly...
var api =
with no ending?
.done(function(){}
. If you just want to use them as globals, remove the var
from the two declarations inside your function. Otherwise that is making a locally-scoped variable with the same name, but you won't set the global values.
how to get my image to center even when screen resizes?
...
at the end. Just a thought...
@khaduch in the end I decided to just nest the ajax function, but I still can't get it to retrieve data properly, would you take a look? If this worked, alert(data.weather.main) should give me something, but it doesn't
here's the api call = api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon+"&appid=71515d3ce7d65a06962c9ca092e37177
http://
in your openweathermap call.
woofiewilly sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1470 | @khaduch |http://www.freecodecamp.com/khaduch
data.weather[0].main
because the weather
is an array, location [0]
is where you find the first object.
weather[{}]
and then one that you can access as data.main.temp
, data.main.pressure
, etc. Hard to read that long string of JSON data... :)
@TomGM - you just need to do this:
$(document).ready(function() {
var lat, lon;
GET_LOCATION_HERE ( function(data) {
lat = data.latitude;
lon = data.longitude;
call the get_the_weather function
};
function get_the_weather() {
etc.
}
)};
you could do promises - I watched a video on that, it didn't seem to be that difficult? But I haven't tried it yet.
lat
and lon
as arguments to the function, so the global variables really aren't necessary.
Im actually playing around grid in bootstrap
what Im actually curious about is, when i scale the screen to full size of my laptop, the elements in the row seem to not evenly center themselves properly.
streamers
rendered and at the same time i haven't been thrown an error in console. Can you figure this out? the pen itself
@Byzgig it's not evenly centered unlike this one,
wbac88 sends brownie points to @tomgm :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @tomgm |http://www.freecodecamp.com/tomgm
lpy1994 sends brownie points to @byzgig :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @byzgig |http://www.freecodecamp.com/byzgig
New to the forums! Hello!
I'm trying to do the twitchTV project in vanillaJS.
When I connect to the twitch api I get the wrong info (confirmed by placing the url in Postman).
Can someone please help me figure out whats wrong?
Here's my code
function httpGet(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
console.log(xhr);
}
httpGet('https://api.twitch.tv/kraken/streams/esl_sc2');
tomgm sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @benalron |http://www.freecodecamp.com/benalron
I am on the "build personal portfolio page" challenge. I am trying to run this code outside of Codepen, but am hitting a wall. It has to do, I think, with enabling Bootstrap.js and/or jQuery. Here's what I've got in the '<head>':
'''
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="https://scontent.ford1-1.fna.fbcdn.net/v/t1.0-1/p160x160/11267355_936873989705417_1124143444860752719_n.jpg?oh=b3cad97689918a0aa3fa095b816c2cbf&oe=581F1ABF" type="image/jpg">
<title>My Portfolio Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]-->
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
<!--[endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" async></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" async></script>
</head>
'''
:bulb: to format code use backticks! ``` more info
<head>
:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="https://scontent.ford1-1.fna.fbcdn.net/v/t1.0-1/p160x160/11267355_936873989705417_1124143444860752719_n.jpg?oh=b3cad97689918a0aa3fa095b816c2cbf&oe=581F1ABF" type="image/jpg">
<title>My Portfolio Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]-->
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
<!--[endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" async></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" async></script>
</head>
<body>
markup works in Codepen
<script src="../../assets/js/ie-emulation-modes-warning.js">
try closing that script tag
I've completed Show Local Weather which worked well for me when run from a http-server -c-1 local server environment. So I placed my project on Codepen.io but now i notice that when i open it from Codepen.io it really is not doing what it should do for example the image does not show up and the Celsius/Fahrenheit conversion formula has stopped working. This is very strange because - all these worked perfectly well until copied to Codepen.io Have you seen this problem before and what could it be?
Please advice me why this is happening and how can I fix it.
annis-monadjem sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 422 | @augmt |http://www.freecodecamp.com/augmt
@codemonkey4 so it's blocking jquery and bootstrap?
getting a lot of these errors in console
blockquote flashctrl:Object { message: "The operation is insecure.", lineNumber: 51, stack: "main@resource://gre/modules/commonj…", name: "SecurityError" }
codemonkey4 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @augmt |http://www.freecodecamp.com/augmt
annis-monadjem sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:warning: annis-monadjem already gave augmt points
<script>
tags for the Bootstrap and jQuery js libs out of the <head>
to the end of the <body
grace1120chen sends brownie points to @mremotoo and @lpy1994 :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @lpy1994 |http://www.freecodecamp.com/lpy1994
:cookie: 116 | @mremotoo |http://www.freecodecamp.com/mremotoo
:cookie: 112 | @nixonrichard |http://www.freecodecamp.com/nixonrichard
grace1120chen sends brownie points to @nixonrichard :sparkles: :thumbsup: :sparkles:
<a href="www.link.com.au" target="_blank">Designed by....</a>
callyb sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1269 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
flyyyperth sends brownie points to @siyafazila :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @siyafazila |http://www.freecodecamp.com/siyafazila
callyb sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: callyb already gave kirbyedy points
$('#search2').click(function() {
var result = $('#search1').val();
console.log(result);
vaibsharma sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1271 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
#history
selector, change float: clear;
to clear: both;
rashmiagar sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1564 | @0x0936 |http://www.freecodecamp.com/0x0936
function mutation(arr) {
var arrOne = arr[0].toLowerCase();
var splitTwo = arr[1].toLowerCase().split("");
for(var i = 0; i < splitTwo.length; i++){
if(splitTwo[i].indexOf(arrOne) === -1){
return false;
}
return true;
}
}
mutation(["Mary", "Aarmy"]);
h2
with id of contact needs to be fixed - I'll see if you can spot the problem. <img>
tags don't require a closing </img>
tag. The general rule is that if content cannot be added to the tag, don't use a closing tag. The <center>
tag is no longer supported in HTML5, use CSS instead. It's a good start :+1:
dylansatelle sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1565 | @0x0936 |http://www.freecodecamp.com/0x0936
if
condition is asking if this letter contains this string
swap those. also, return true should be outside, after the loop
function mutation(arr) {
var arrOne = arr[0].toLowerCase();
var splitTwo = arr[1].toLowerCase().split("");
for(var i = 0; i < splitTwo.length; i++){
if(splitTwo[i].indexOf(arrOne) === -1){
return false;
}
}
return true;
}
mutation(["Mary", "Aarmy"]);
arr[1]
to be arr[0]
arr[1]
to be in arr[0]
. You're correctly iterating over the letters in arr[1]
but the check needs to be if arrOne
contains the current letter splitTwo[i]
dylansatelle sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:warning: dylansatelle already gave 0x0936 points
<section></section>
tags here instead of divs - this begins to touch on accessibility for both the user and web crawlers. The only other issue I noticed is that you're using inline-css styles. Try to place all of your css inside codepen's css section - or if developing locally, put all css inside a *.css
file and add a link to it in the head tag.
dylansatelle sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1566 | @0x0936 |http://www.freecodecamp.com/0x0936
$("a.button").html("<img class='funnyButton' src='https://65.media.tumblr.com/7510be5ac587b09cbf38e7dd3b968b04/tumblr_oaot6lEtzA1uupkrso1_75sq.png'>");
$(".funnyButton").mouseover(function(){
// etc.
adam-collier sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1471 | @khaduch |http://www.freecodecamp.com/khaduch
https://en.wikipedia.org/w/api.php?format=json&action=opensearch&search="+searchStr+"&limit=10&callback=?
var myVar = 87;
// Only change code below this line
myVar = ++myVar;
shenoyabhijith sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2092 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
mohammadhasham sends brownie points to @user-sarang :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @user-sarang |http://www.freecodecamp.com/user-sarang
img
, so I thought I would try a slightly different one, and this seems to work, too: $("a.button img").mouseover(function(){
it finds the child img
that is nested in that anchor tag.
@MohammadHasham - looking at your weather app. I think that it looks very nice. I have a few comments:
C / F
button, it doesn't do anything. After that, it works.<html>
and <body>
tags in your HTML panel. The Codepen template supplies those tags. You can make a body
CSS selector to fill in your background image. And you should also set background-size: cover;
because on a wide screen, your image started to repeat on the right hand sideIt looks great - just a couple little things, as I noted. Nice work!
@manu-4216 - the look of the game is very nice! It seems to play well, too. Very good! I ran the "Analyze JS" function on it - it calls out a lot of things, many of which might be "noise", but I don't know if you'll find anything that will help you?
Once again - good work!
Hey guys, I need some help figuring out how to get my logo to fit only the background of the #contactMe <div> and not the background of the whole page. Any ideas?
const setShowcaseImg = function() {
const thisProject = project[$(this).data("project")];
//gets the name of the project to later use it to fetch properties from that project
$showcaseImg.find("img").attr("src", thisProject.img);
//gets the url of the imagen and set it
$showcaseImg.find("p").text(thisProject.description);
//gets the description
$showcaseImg.find("a").attr("href", thisProject.url);
//gets the url
$showcaseImg.addClass("showcase-open");
// then it opens a div containing this info
}
I have something like this to showcase some images with text and a link but when i close the showcase div and activates it again with a different images it just takes like 30ms to actually change the image it work, but i can still see the previous image for like 20ms and that's not good :(<a > </a>
tags to <span> </span>
, and maybe you need to adjust the margin a bit?
jonathanwbn sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1472 | @khaduch |http://www.freecodecamp.com/khaduch
brownies
vinarius sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @trip16661 |http://www.freecodecamp.com/trip16661
jonathanwbn sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @trip16661 |http://www.freecodecamp.com/trip16661
$('.scrollToAbout').click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
$('.scrollToAbout .scrollToPortfolio').click(function() {
$('html, body').animate({
scrollTop: 400
}, 800);
return false;
});
$('.scrollToContact').click(function() {
$('html, body').animate({
scrollTop: 1185
}, 800);
return false;
});
can be done by simply doing this $('.scrollToAbout .scrollToPortfolio, .scrollToContact').click(function() {
$('html, body').animate({
scrollTop: 1185
}, 800);
return false;
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
@vinarius - I tried adding a few settings to your #contactMe
div - it made a difference, not sure if it is what you are trying to achieve:
background-size: contain;
background-repeat: no-repeat;
It is aligned to the left, but I kind of like it that way?
and set it inline
background: url() no-repeat contain;
etc
const setShowcaseImg = function() {
const thisProject = project[$(this).data("project")];
//gets the name of the project to later use it to fetch properties from that project
$showcaseImg.find("img").attr("src", thisProject.img);
//gets the url of the imagen and set it
$showcaseImg.find("p").text(thisProject.description);
//gets the description
$showcaseImg.find("a").attr("href", thisProject.url);
//gets the url
$showcaseImg.addClass("showcase-open");
// then it opens a div containing this info
}
I have something like this to showcase some images with text and a link but when i close the showcase div and activates it again with a different images it just takes like 30ms to actually change the image it work, but i can still see the previous image for like 20ms and that's not good :(labanch sends brownie points to @meetmangukiya :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @meetmangukiya |http://www.freecodecamp.com/meetmangukiya
meetmangukiya sends brownie points to @labanch :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @labanch |http://www.freecodecamp.com/labanch
<a href="https://twitter.com/share" class="twitter-share-button" data-text="hi whats up" data-show-count="false" data-size="large" id="tweet">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
data-text
attribute to whatever message it should look like by default
Shift
+ enter
will give you additional line feeds (space) for pasting your code. also, the backticks (`) key is located to the left of the number one (#1) key. ```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 ⏎]
This an inline `<paste code here>
` code formatting with a single backtick() at _start_ and _end_ around the
code`.
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
data-text
attribute
$(selector).attr('data-text', "<your tweet message here>")
@labanch
Quote
button, but I think you'd have figured almost all of this yourself :+1:
</a></div></div>
bnelton sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1081 | @ndburrus |http://www.freecodecamp.com/ndburrus
</div>
tag at the top, with no opening. You should not have the <body>
tag in your HTML panel - you can put that styling that you want directly on the body
element in your CSS. You don't have a closing </div>
tag for your <div class="row home-container">
. You are using <center>
tags, which are obsolete.
<head>
tag (and its closing partner) in there, either. That could be part of the problem... I spaced out on that one.
text-center
class usually seems to do that fairly well. I'm just trying to untangle some of the things that are there now, it's still looking a little jumbled in my edited version.
.services
class with that negative top margin was just breaking the flow of the <h1>
and <h2>
. That should have been a lot smoother to just put them in order. I'll see if I can stop after I give you some ideas of what I did... :)
const setShowcaseImg = function() {
const thisProject = project[$(this).data("project")];
//gets the name of the project to later use it to fetch properties from that project
$showcaseImg.find("img").attr("src", thisProject.img);
//gets the url of the imagen and set it
$showcaseImg.find("p").text(thisProject.description);
//gets the description
$showcaseImg.find("a").attr("href", thisProject.url);
//gets the url
$showcaseImg.addClass("showcase-open");
// then it opens a div containing this info
}
I have something like this to showcase some images with text and a link but when i close the showcase div and activates it again with a different images it just takes like 30ms to actually change the image it work, but i can still see the previous image for like 20ms and that's not good :worried:@luis4flames - I think that the fastest way to share this is by forking your project, here is my URL for it - I added asecond div to see if the gradient is working, and I think it looks better. You can compare to yours, and make changes as you see fit. Let me know and I can remove my forked copy when you're done.
Good luck!
background-size: cover; in the
body` element CSS rules. In case you started looking...
luis4flames sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1473 | @khaduch |http://www.freecodecamp.com/khaduch