@lahowitt its getting the search term and pulling the data, something wrong with your display code
@bscyrpt ok I'll keep looking
@lahowitt i put quotes around id=result in html then did this to stop page refresh
var searchterm = "";
var api = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=";
var pageID;
var title;
var extract;
var testjson;
var queryurl = "http://en.wikipedia.org/?curid=";
var html = "";
var pagekeys;
$('.myform').on('submit', function(ev)
{
if(ev){ev.preventDefault();}
//html="";
$('#result').html('hello');
searchterm = $("#searchterm").val();
console.log(searchterm);
$.ajax({
url: api + searchterm,
type: "get",
dataType: "JSONP",
success: function(data) {
testjson = data;
var results = data.query.pages;
pagekeys = Object.keys(results);
//console.log(results);
pagekeys.forEach(myfunc);
$("#result").html('hello');
}
});
});
function myfunc(page) {
pageID = page;
title = testjson.query.pages[page].title;
extract = testjson.query.pages[page].extract;
html += '<div class="result"><a href="' + queryurl + pageID + '" target="_blank" class="result"> <h4>' + title + '</h4><h2>' + extract + '</h2></a></div>'
console.log(extract);
};
just change the hello text back to html var
oh adn uncommnet where you reset html to ""
Does anyone know how to play only a set duration for an audio file?
Hello all , just a fairly quick question: Does anyone know how align img in the center?
Here's my code for Twitch API: http://s.codepen.io/neotriz/debug/wWKEvr
If you make the screen smaller, the images of each channel shrinks but it doesnt stay in the center
margin : auto ??
looks like auto isnt the solution
try vertical-align: -xxpx; ?
anyway I think your problem lies into the font size
try to reduce that
and maybe move them upper in the box to fit the image border
@tuliodnw plays well but it's too red bro
maybe turn down the saturation ?
it's ok for small elements to have high saturation IMO
@Neotriz i think for phones. u could do logo+title above (col-xs-6 ) and status below (col-xs-12)
for tablets u could do 3 cols logo+title+status (col-sm-4 )
ur main div could be..
set ur logo width:100%
and min-width: 80px; maybe
u can probably check about "mobile first" lot tutorials on google :)
for tablets u could do 3 cols logo+title+status (col-sm-4 )
ur main div could be..
class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"set ur logo width:100%
and min-width: 80px; maybe
u can probably check about "mobile first" lot tutorials on google :)
@mosaic-greg gonna checl other colors, other people have told me
hey all - how can i align the rows to be centered? and to align text on each row to be in the middle? i tried to target row, div, container but none worked...thank you
http://codepen.io/dctor/pen/WxQXQo
http://codepen.io/dctor/pen/WxQXQo
@mosaic-greg this one is more light
@dctor need to add in
.container{width:800px; margin:0 auto;} and it will center the content, then remove the width:80% from row
to center vertically, on
.row{line-height:100px;}
@bscyrpt got it...thanks
@bscyrpt how come text-align doesn't work in this case?
@bscyrpt thank you
dctor sends brownie points to @bscyrpt :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @bscyrpt |http://www.freecodecamp.com/bscyrpt
text align is only for inline components, they don't work for block level ones, also with inline there is vertical-align:middle;
as its used for subscript/super script and such things
@bscyrpt ok what is a subscript/super script?
the the n^2 part of a number the ^2 part how its raised
ok
having a little trouble with an algorithm, any one volunteer to help a little? : )
I am having trouble preserving the capitalized letter
function myReplace(str, before, after) {
var ifUpper = '';
if (before[0] == before.toUpperCase()){
ifUpper = after[0].stringToUpper();
}
var initialArray = str.split(" ");
var start = initialArray.indexOf(before);
var removed = initialArray.splice(start, 1, ifUpper || after);
var newArray = initialArray.join(" ");
return newArray;
}
myReplace("Let us get back to more Coding", "Coding", "algorithms");
@bscyrpt last thing...how to center the text on each column? i have 3 columns on each row
@dctor your cols for bootstrap are messed up, for any given row it needs to add up to 12, so all the col-md-3 need to be col-md-4 for a aligned 3 column layout
@bharris62 - your comparison for
if (before[0] == before.toUpperCase()){ is comparing the first letter to the entire string (after uppercasing it) - if you just did the first letter of the before.toUpperCase(), maybe that would work?
lemme check!
hi guys, how to remove all event we used in div ???????????/
well, i did realize, after[0].stringToUpper() isn't a function lmao
@bharris62 - yes, I was just about to comment on that, too... possibly some other strange stuff going on there, too.
@bscyrpt ok i can change that - i did that to hope to have some space on the left and right
you can set that with padding and or margin
@buiphuking remove elements?
i build tic tac toe, after play , click PLAY AGAIN, all cells can click
@bscyrpt got it...now it looks good thank you again
dctor sends brownie points to @bscyrpt :sparkles: :thumbsup: :sparkles:
:warning: dctor already gave bscyrpt points
@bharris62 - you can simplify this a lot - have you gotten your version working?
yes lol
just did
not elequent
and I made it bigger, but it works
function myReplace(str, before, after) {
var start, initialArray, removed, newArray;
if (before[0] === before[0].toUpperCase()){
initialArray = str.split(" ");
start = initialArray.indexOf(before);
removed = initialArray.splice(start, 1, after[0].toUpperCase() + after.substr(1));
newArray = initialArray.join(" ");
return newArray;
}else{
initialArray = str.split(" ");
start = initialArray.indexOf(before);
removed = initialArray.splice(start, 1, after);
newArray = initialArray.join(" ");
return newArray;
}
}
myReplace("Let us get back to more Coding", "Coding", "algorithms");
i think i could have just used match, grabbed the word and changed it lol
and by looks at the hint, i probably could have done something like this
if (someRegex === afterword){
do the replace wtih str to upper
}else{
just str.replace(before,after)
}
@bharris62 - getting it working is half of the battle. The key thing is to get a version of the replacement word with the proper capitalization and then use something line
String.replace()
looks like you just did something along those lines, or at least sketched it out... :)
Pseudo code!
:+1:
!help Where art thou
:point_right: algorithm where art thou [wiki]
Algorithm Where Art Thou
Problem Explanation
Write an algorithm that will take an array for the first argument and return an array with all the objects that matches all the properties and values in the Object passed as second parameter.
:pencil: read more about algorithm where art thou on the FCC Wiki
@jbroac01
http://worldofdealsgr.com/gallery.html I had someone come to me about building thier website from this template. They are looking to sell new and used electronics.
I am new to this. what questions should I asked. I know he will need a database to categorize the products but what should I be asking?
http://worldofdealsgr.com/gallery.html I had someone come to me about building thier website from this template. They are looking to sell new and used electronics.
I am new to this. what questions should I asked. I know he will need a database to categorize the products but what should I be asking?
dear all I need help with my project. I'm trying to animate the yellow border to exten on load. please kindly assist.
Looking to get some input on my Pomodoro Timer:
http://s.codepen.io/juwdohr/debug/rLNLLE
http://s.codepen.io/juwdohr/debug/rLNLLE
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
plz someone help me with function reset to replay the game, plz .....
plz someone help me with function reset to replay the game, plz .....
Hello
i'm stuck in "Show the Local Weather"
i don't know how to show information in JSON whithout event "click"
@nqdai1992 Have ytou checked W3Schools? They are a great resource.
I use getJSON but it doesn't work if I don't use event click
Any suggestions for where to start on the Tic Tac Toe Game?
I've see getJSON in w3school but it is used in event "click"
I want show information but no need click
you just don't include the click you do it within
$(document).ready(function() {})
okie thanks @Juwdohr
nqdai1992 sends brownie points to @juwdohr :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @juwdohr |http://www.freecodecamp.com/juwdohr
@Juwdohr
go to youtube and watch how to build a basic tic tac toe game
go to youtube and watch how to build a basic tic tac toe game
hi, could someone possibly tell me why this is returning false?
function palindrome(str) {
return str === str.split('').reverse().join('');
}
palindrome("never odd or even");
$.getJSON(url, function(){});
@123xylem
Hey guys.. How would one put num values into array with forloop? Would this work?
^^ ?
Hey guys.. How would one put num values into array with forloop? Would this work?
js
num=5. for (i=0;i<num;i++){arr.push(num[i])^^ ?
@nqdai1992. Make sure you put all your JSON calls inside that
Hey how do I center my cards?http://codepen.io/whatisthis/pen/dXoeKV
hey guys
I don't understand. You can explain it please :D @qckpckt
Hello guys !
I dont know why my last green button does not target on the youtube link, please
@Atalaa It works for me.
@Benmhz why not for me
@Atalaa Is the link opening a new browser window or tab?
the link do nothing when i clikn on it
can u see the code ?
@Benmhz can u see the code
@Atalaa , try clicking the words within the button. Is that working for you?
@Benmhz look my code
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success btn-block"><a href="https://www.youtube.com/watch?v=BH0BNbwqNK8" target="_blank">Back to the Future 25th Anniversary's Trailer</a></button>
</div>
</div>
<div class="col-xs-12">
<button class="btn btn-success btn-block"><a href="https://www.youtube.com/watch?v=BH0BNbwqNK8" target="_blank">Back to the Future 25th Anniversary's Trailer</a></button>
</div>
</div>
Yes, but try clicking on the words first, and not just the green of the button. Is it working now?
Excuse me, I mean click the text that is within the button.
no dont work
and text is in blue
Okay, I see what's happening. lets first make sure that the Anchor tag is working.
<a href="https://www.youtube.com/watch?v=BH0BNbwqNK8" target="_blank">Back to the Future 25th Anniversary's Trailer</a>
This code is good. So we need to see what's happening in the <button> tag.
It looks like you're putting the anchor tags (
<a ... > </a>) within the <button> tags.<button class="btn btn-success btn-block"><a href="https://www.youtube.com/watch?v=BH0BNbwqNK8" target="_blank">Back to the Future 25th Anniversary's Trailer</a></button>
yes i did this way for other button and it works
so why not now
oh ok because before i did that into an <ul><li>
maybe with button its different
how can i do now
@Benmhz ?
I'm looking at them. They're anchor tags too, and they work fine.
Back to the problem, have you actually clicked the text inside the button that says :" Back to the Future 25th Anniversary's Trailer" ?
What I think is happening is that Bootstrap has drawn the shape of a button, but isn't acting like one because the code that acts as the hyperlink isn't actually the button.
It is inside the button.
This message was deleted
This message was deleted
i find the solution
@Benmhz i put btn class inside anchor tag
thank u anyway
Thats great!
Could anyone tell me why my css refuses to split into two columns, and continues to stack my elements over top of one another?
http://codepen.io/robsonbeaudry/pen/pbjLZL?editors=1011
http://codepen.io/robsonbeaudry/pen/pbjLZL?editors=1011
When I hit full screen, it works. Got your list on the left, and the mentioned col on the right. Maybe you should use a different breakdown size.
Thanks @Benmhz , I guess the code pen screen was smaller than I thought
robson-beaudry sends brownie points to @benmhz :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @benmhz |http://www.freecodecamp.com/benmhz
can i ask something guys, why this code won't work
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
if(cells.length === 0 && $('#myModal3').data('bs.modal') ){
$('#showResult').html('this game is tight');
$('#myModal3').modal('show');
}function sumFibs(num) {
var count=0;
var arr=[];
var digit=1;
while(!digit+digit %2===0&& digit<num){
count+=digit;
}
return count;
}
sumFibs(4);
I'm having trouble with my getWeather function. I'm getting a valid forecastURL, when I go to it in the browser it looks like so:
This message was deleted
This message was deleted
{
"latitude": 37.8716,
"longitude": -122.2728,
"timezone": "America/Los_Angeles",
"offset": -7,
"currently": {
"time": 1465452267,
"summary": "Mostly Cloudy",
"icon": "partly-cloudy-night",
"nearestStormDistance": 16,
"nearestStormBearing": 78,
"precipIntensity": 0,
"precipProbability": 0,
"temperature": 56.16,
"apparentTemperature": 56.16,
"dewPoint": 52.83,
"humidity": 0.89,
"windSpeed": 5.94,
"windBearing": 250,
"visibility": 6.07,
"cloudCover": 0.82,
"pressure": 1013.2,
"ozone": 326.06
},
"minutely": {
"summary": "Mostly cloudy for the hour.",
"icon": "partly-cloudy-night",
"data": [{
"time": 1465452240,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452300,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452360,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452420,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452480,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452540,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452600,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452660,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452720,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452780,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452840,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452900,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465452960,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453020,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453080,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453140,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453200,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453260,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453320,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453380,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453440,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453500,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453560,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453620,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453680,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453740,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453800,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453860,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453920,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453980,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454040,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454100,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454160,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454220,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454280,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454340,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454400,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454460,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454520,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454580,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465
@freekngdom it seems you have a cors problem with your https://api.forecast.io/forecast/ api call. try add an Access-Control-Allow-Origin header to your ajax request
function sumFibs(num) {
var count=0;
var arr=[];
var digit=1;
while(digit<num){
//while dig is less than num
digit= digit+ digit;
//digit = 1 + prev digit
if(digit+digit %2!==0){
arr.push(digit); }}
return arr;
}
sumFibs(5);
THis is giving me only even numbers on digit!??
When I go to the "forecastURL" in chrome, it shows this:
{
"latitude": 37.8716,
"longitude": -122.2728,
"timezone": "America/Los_Angeles",
"offset": -7,
"currently": {
"time": 1465453515,
"summary": "Mostly Cloudy",
"icon": "partly-cloudy-night",
"nearestStormDistance": 19,
"nearestStormBearing": 48,
"precipIntensity": 0,
"precipProbability": 0,
"temperature": 56.36,
"apparentTemperature": 56.36,
"dewPoint": 52.71,
"humidity": 0.88,
"windSpeed": 6.38,
"windBearing": 250,
"visibility": 5.61,
"cloudCover": 0.81,
"pressure": 1013.21,
"ozone": 327.08
},
"minutely": {
"summary": "Mostly cloudy for the hour.",
"icon": "partly-cloudy-night",
"data": [{
"time": 1465453500,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453560,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453620,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453680,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453740,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453800,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453860,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453920,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465453980,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454040,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454100,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454160,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454220,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454280,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454340,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454400,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454460,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454520,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454580,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454640,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454700,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454760,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454820,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454880,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465454940,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455000,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455060,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455120,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455180,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455240,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455300,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455360,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455420,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455480,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455540,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455600,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455660,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455720,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455780,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 1465455840,
"precipIntensity": 0,
"precipProbability": 0
}, {
"time": 146
can someone answer this for me?
if I have an h1, h4 and a UL with three Li elements all inside a div with the class "nav"... is there any reason why calling
.nav {
display: inline;
}
does not display the elements inline, but when i call
h1, h4, ul, li {
display: inline;
}
it does? shouldnt the style be applied to all within the class?
Hi, can someone help me with the Arguments Optional bonfire? I don't understand how we suppose to return an argument.
@leanhduy1998 you have to check if the arguments are numbers and then sum
@ericbezanson h1,h4, ul, li does not inherit automatically the parent class. what if you want that : .nav h1 {some properties} and .nav-bar h4 {some other propertie} ?
if its not it will return undefined
@kirbyedy I know that, but I don't know what to do when there's only 1 argument, like this: addTogether(2)
in that case you just return
it will be undefined and the program stops
@leanhduy1998 with typeof() you can check if its a number or not
@sorinr does that same rule apply to the li elements?
Hey there
looking for opinions/touch ups for my tribute page
@kirbyedy this is one of the test case addTogether(2)(3). This bonfire is sth like if it's only 1 argument like addTogether(2), call another argument sumTwoAnd(3) and return 5
@ericbezanson h1, h4, ul are block elements by nature you should transform them in inline by css
ok gotcha
thanks @sorinr
ericbezanson sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @sorinr |http://www.freecodecamp.com/sorinr
@ericbezanson http://www.tutorialspoint.com/html/html_blocks.htm
@MindFluid looks good man! I really like the hover effect :) one thing I would reccommend is is getting in the habit of commenting your CSS,
@ericbezanson Thanks! Ah yes, my terrible documentation
mindfluid sends brownie points to @ericbezanson :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @ericbezanson |http://www.freecodecamp.com/ericbezanson
I've been fairly busy, and laziness should be even less of an excuse to not comment, haha
haha to be honest its not totally required in a page like that but when you start making more complex stuff you will really love having comments to quickly find the part of the code you are looking for :)
@MindFluid there is a problem with your imgur pic. it doesn't show up for me
@sorinr , strange, it seems to be loading fine for me.
did you try refreshing?
@MindFluid imgur doesn't allow hotlinking like that, so it won't show up for by far most people. You should find a different place to host your images
Doesn't show up for me either
@sannek cheers, I'm pretty new to that so I'll find a replacement quickly now
@MindFluid here is the error: failed to load resource: the server responded with a status of 403 (Forbidden)
Thanks, I've changed it now
@sorinr @sannek thanks
mindfluid sends brownie points to @sorinr and @sannek :sparkles: :thumbsup: :sparkles:
:cookie: 421 | @sannek |http://www.freecodecamp.com/sannek
:cookie: 345 | @sorinr |http://www.freecodecamp.com/sorinr
@MindFluid yep. it shows now
hey guys.. so im just now getting into using an editor outside of codepen for js.. i truly have no idea what im doing. read a few videos. installed atom + a ton of packages. im also running script and atom-runner.. however, i can print out a simple hello world.. but if i try and paste in one of my algorithms from FCC, it's just blank. any ideas? just trying to figure out what key piece im missing here.
@dcgoings where are you putting your algorithms? <script></script> ?
no, im just straight up trying to play with js.
@dcgoings hard to guess what are you doing on your computer
@dcgoings then all your js functions should stay within a <script></script> to work
also your output might go to console
so hello world prints (at the bottom like it should)
function does nothing. so it's either an issue with the function (which shouldn't be because it's cleared on FCC) orrr.. i have no idea.
script tags didnt work.
actually threw an error
@dcgoings are u linking that external js into your html page?
no.
errr... it needs to? i can't just.. test shit?
@dcgoings yes it has to be linked into your html page or you can put your js code in your html page within <script></script> tags as i told you
hmm, alrighty. i guess i wasn't aware of this. i just figured, similar to the way FCC is set up, that I could just code entirely in JS messing around with algorithms and whatnot.
This message was deleted
This message was deleted
var collection = {
2548: {
album: "Slippery When Wet",
artist: "Bon Jovi",
tracks: [
"Let It Rock",
"You Give Love a Bad Name"
]
},
2468: {
album: "1999",
artist: "Prince",
tracks: [
"1999",
"Little Red Corvette"
]
},
1245: {
artist: "Robert Palmer",
tracks: [ ]
},
5439: {
album: "ABBA Gold"
}
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));
// Only change code below this line
function updateRecords(id, prop, value) {
if (prop === "tracks" && value !== "") {
if(collection[id].hasOwnProperty(prop))
collection[id][prop].push(value);
else
collection[id][prop]=[value];
collection[id][prop].push(value);
collection[id][prop]=[value];
} else if (value === "") {
delete collection[id][prop];
}
return collection;
}
// Alter values below to test your code
updateRecords(5439, "artist", "ABBA");
ok all the test passed except the first one
After updateRecords(5439, "artist", "ABBA"), artist should be "ABBA"
@dcgoings you can play around just in the console if you want
like here on the image
okay, then that's what i guess im looking for. how can i access the console in atom? i must be blind.
console will return the result
no no, not in atom
in your browser
in chrome if you press f12 it will open
ahhhhhhhhhhhhhhhhhhhhh
man, i guess i have all this twisted in my head then.
i think im so used to when i was in school this past year working with java in eclipse.. i just assumed something like atom would be similar. i could write code in atom and have it just pop in the console.
I have no experience with atom, so no idea :)
it might do the job, dont know
for me its easier just to slam it into console and hit enter
I guess using atom for this small challenges is like shooting a fly with bazooka :D
i guess i just got used to making small changes and instantly seeing the result with an IDE like eclipse.
i just assumed all/most editors did the same or had the tools to do so.
Guys need help
Guys my code is not responsive ...need help
Why is the div with the class "botradius" not showing up at all??
Hey guys, I'm doing the Random Quote Generator challenge. I keep encountering the error "Access-Control-Allow-Origin" because my .getJSON call is to another site. How do i get around this?
@dcgoings you can get a package to add a console to atom. its called "atom-terminal-panel". its pretty good
@musedivision make ur call over https
@sorinr I'm using the api from http://forismatic.com/en/api/ for the quotes and with https it returns a 404 error.
Hi Everybody, I’m having issues with the JS Calculator. For the moment I’m just trying to get the value of a pressed button and show it on the display. But it doesn’t work and I can’t find the bug. https://codepen.io/Holic101/pen/OXMMQz
@musedivision here is how i did it: http://codepen.io/sorinr/pen/VaJKrw
@Mar10-9us it does, but because you probably already fixed it? right?
@musedivision your datatype has to be jsonp
now I dont know if you use ajax call or getjson
@Holic101 Thats right. I deleted alot of useless float:left; attributes and added float to the body instead. Somehow it worked. thanks anyway
mar10-9us sends brownie points to @holic101 :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @holic101 |http://www.freecodecamp.com/holic101
This message was deleted
Hello everyone. Help me to find a error:
str = '10';
parseInt(str);
console.log(str);
typeof str;it returns type string
why doesn't it convert str to number format?
hi everyone,i am solving the check for palindrome challenge.can anyone please tell me why this '0_0 (: /-\ :) 0-0' should be considered palindrome ?
@srishti-learner in't it the same if we would read it backwards?
@Y-Taras you should save the returned var like this-
var in=parseInt(str);
@Y-Taras my ques is regarding the '_' and '-'
Any one use getJSON out event click
why are they considered same?
@srishti-learner because of this:
Note
You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything lower case in order to check for palindromes.
You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything lower case in order to check for palindromes.
I don't know exactly but getJSON only work in a function click
@srishti-learner yes it works, well I tried it but somehow it didn't work earlier))
okay...got it! :+1:
@Y-Taras it's fine if it works now! :smile:
@nqdai1992 I dont really understand your question
and I want print data from JSON in browse withou click function
okie
wait me a minute
this is example in w3school
$("button").click(function(){
$.getJSON("demo_ajax_json.js", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
Hey there. I'm working on a more professional looking portfolio page, but I've come up on something I don't know how to do and am having trouble googling: https://preview.c9users.io/chadkreutzer/portfolio/index.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
What I want to do, is for each section, I want to have the background stay the same as you scroll the associated content and then once the content for that section is done, it will scroll to the next background.
but I don't want to click button to excute getJSON
$(document).ready(function () {
$.getJSON('example.json', function (data) {
console.log(data);
});
How do I change the color and background-color of .active in bootstrap? It's not letting me over ride its inheritance
@kirbyedy @sorinr thanks! yeah so i needed to be using jsonp. Had some errors in my getJSON data string as well.
musedivision sends brownie points to @kirbyedy and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1086 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
forEach function not working properly, why?
var date1 = ["2016", "07", "01"];
date1.forEach(function(elem){
elem = parseInt(elem);
});everything's fine, except it doesn't convert to the number format
thanks @kirbyedy
nqdai1992 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1087 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@Y-Taras what you are wanting is a map rather than a for each
I mean you can do it with a forEach, but it's easier with a map
@ChadKreutzer well I can do it with a simple for ( i=..) but wanted to learn how to do it with forEach)
map is functional too, and its the right tool for the job. but if you insist on for each: for each does not return a value on its own. try defining an new array and then inside the forEach, pushing each parseInt(elem) onto it.
This message was deleted
@ChadKreutzer so in other words forEach can't change values inside?
kinda. here:
var date1 = ["2016", "07", "01"]
// Map
var dateNum = date1.map(function(elem){
return parseInt(elem)
});
// ForEach
var dateNum2 = []
date1.forEach(function(elem){
dateNum2.push(parseInt(elem))
})
console.log(dateNum2)
console.log(dateNum2)
forEach is usually used for a side effect.
fun thing here:
console.log(date1.map(function(elem){return parseInt(elem)}) would be perfectly valid. but you couldn't do the same thing with date1.forEach
from the MDN:
forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.
the classic
for (var i = 0; i < date1.length; i++) {
date1[i] = parseInt(date1[i]);
}is the best as usual)
hi
it depends on what you are wanting to do, but from a functional programming perspective, the map function is a better option.
date1.map(function(elem){return parseInt(elem)}) date1 = date1.map(function(str){
return parseInt(str);
});
@Y-Taras OH! I think I might see the disconnect: in functional programming, you don't want to change your data. so you would never do that. you would leave date1 alone and make a new array to play with inside the function and return a value at the end.
@ChadKreutzer ok I got it. thanks for basics in func. prog.)
y-taras sends brownie points to @chadkreutzer :sparkles: :thumbsup: :sparkles:
:cookie: 603 | @chadkreutzer |http://www.freecodecamp.com/chadkreutzer
@Y-Taras no prob. here:
var date1 = ["2016", "07", "01"]
console.log(dateToInt(date1))
function dateToInt(arr) {
return date1.map(function(elem) {
return parseInt(elem)
})
}as an example.
@millsdee74 You have to make a loop that will be the allChannels.length - then inside the loop build your url api string so
var url = 'https://api.twitch.tv/kraken/streams/' + allChannels[i]; then do you ajax call with this as the url param
PSD2HTML code challenge: http://goo.gl/uMWDNw | Designed by @swervedesignsuk
/**
* Created by uday on 6/8/16.
*/
(function () {
"use strict";
var todoApp = angular.module('todoApp', ['ngMaterial']);
todoApp.controller('todoController', function ($scope) {
var self = $scope;
self.todoArray = ["Hello"];
var listId = 0;
self.addTodo = function () {
self.todoArray.push(self.todoTitle);
self.drawList();
};
self.drawList = function () {
var html = '<div class="todo-list-layout" ng-controller="todoController"><input type="checkbox" class="todo-checkbox">' +
'<label class="todo-title">' + self.todoArray[self.todoArray.length - 1] + '</label>' +
'<button id="list-id-' + listId + '" class="todo-cancel" onclick="removeTodo()">X</button></div>';
document.getElementById('todo-list').innerHTML += html;
listId++;
};
self.removeTodo =function () {
console.log("clicked");
};
});
})();
@malangaveuday you have to use escape characters if you are trying to display HTML
@skilescm not getting sorry
If you want your site to display HTML formatted code, you can't use the "<" and ">" in character form.
You need to use the escaped version of each. So "<" becomes <
you have your var outputting to innerHTML, so that would be displaying the HTML source you have.
@skilescm but its rendering correctly
I have button onclick issue
sorry for the misunderstanding
do you have a codepen link?
wait
hi guys, i build tic tac toe
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
if(cells.length === 0 && $('#myModal3').data('bs.modal') ){
$('#showResult').html('this game is tight');
$('#myModal3').modal('show');
}why this code won't work
Hi guys. I’m trying to reproduce the scroll behavior of Firefox inside other browsers. On Firefox, if you have a scrolling div, inside a scrolling page, when you reach the end of the div, the page doesn’t scroll. You have to end the scrolling event, start over, and then the page starts scrolling.
Are you aware of any script to achieve this effect? I have tried to implement it myself bu the lack of a
Are you aware of any script to achieve this effect? I have tried to implement it myself bu the lack of a
onScrollStartand onScrollEnd events makes it really hard to get work
Guys need help with my api
@Whiplash5057 use .fail to detect error and give it an error handler(callback function)
Cool i'll try that
@Whiplash5057 also try and create a function that calls the api in general
@Whiplash5057 something like
function callAPI(url, channel, callback,errorCallback)
{
$.getJSON(url+channel).done(callback).fail(errorCallback);
}so you can just use it as much as you want without retyping $.getJSON
@wearenotgroot I Tried it ...I got where the error is but don't know what is wrong
I think there is a problem with the else if
I can't find a fix though
@Whiplash5057 at line 52
YES
@Whiplash5057 it's channel without s
@wearenotgroot I tried that ..it still shows error
@Whiplash5057 it seems ur error is here : $.getJSON(data3.links.channel and your chanell var is missing or improperly declared
@sorinr True ..But I don't know how to fix it ...Lemme try something
@Whiplash5057 is the channel var coming from some other query?
@sorinr YES...!! I got the error ...Your right @sorinr It comes from the initial Api call...!!AWESOMENESS
thankyou so much @sorinr
whiplash5057 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @sorinr |http://www.freecodecamp.com/sorinr
@Whiplash5057 welcome
If anyone can help with my wikipedia API call, that'd be great :)
The problem is in the getData() function, the .getJSON doesn't work.
http://codepen.io/Nachlawi/pen/ZObjGX
The problem is in the getData() function, the .getJSON doesn't work.
http://codepen.io/Nachlawi/pen/ZObjGX
@Whiplash5057 if they are offline you can use https://api.twitch.tv/kraken/channels/ to get the info
hey guys, what are you saying, is this good for my first tribute page, without checking any source code? or it is too week? https://codepen.io/graveworm/full/xOZOpQ
@Nachlawi use this url
var url = "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=" + topic + "&callback=?";adding "&callback=?" make the format jsonp to buypass crossorigin error
@wearenotgroot I could :kissing: you! thanks
nachlawi sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1112 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
@Nachlawi :+1:
my img is not responsive...why? i used .img-responsive class to t
fixed
:)
@legyolo make it class="img-responsive" not class=".img-responsive"
@legyolo yep
thx, i try it because this time i fixed with "width 100%, height:auto
@legyolo to use bootstrap you have to add jQuery.js and bootstrap.js to the javascript in the settings (in that order)
great,working:) thanks @sorinr
legyolo sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @sorinr |http://www.freecodecamp.com/sorinr
@legyolo try make your img div col 4 and add also an offset of 4 to be centered to ur page
Hey does someone mind criticizing my tribute page before I go onto the next challenge? https://codepen.io/Ketchypie/pen/mEeQZr
@Ketchypie on my machine the text goes off the shaded area
umm, one more question, how can center a responsive image?
@Ketchypie make this div where you have the h1 <div class="col-md-12"> also responsive to lower resolutions like div class="col-s-12 col-md-6 col-offset-md-3">. anyway take a look at bootstrap grid to check for the right syntax.
@legyolo you'll find something here https://www.w3.org/Style/Examples/007/center.en.html
@Ketchypie maybe left-align the "The Facts" column, instead of center
@Ketchypie it is just the facts that are going off the page - the rest is good - if you loose col-md-offset-3 for that section it should work
@legyolo you have a typo class="col-ms-3 " should be sm not ms
ok thanks people
it's deleted now, but the centralization's not solved
@legyolo
img {
display: block;
margin-left: auto;
margin-right: auto }
Does someone here know a bit about asynchronous and synchronous functions in JS?
@Ketchypie your divs class="col" must sum up to 12 . you have 3 divs one md-12 and two md-6
woohooo, thank you @GregatGit
legyolo sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 571 | @gregatgit |http://www.freecodecamp.com/gregatgit
@GregatGit I took out the md-offset-3 so it work better when you minimize the window, but is their anyway to recenter the facts when its maximized?
byebye guys
@sorinr Where is that?
:+1:
@Ketchypie right after your div <div class="row"> you have 3 divs class="col ....."
@Ketchypie yes - only add the off set when the screen is large
@GregatGit add offset only for med and up so center your content. for s or xs made them 12
err I'm a bit confused i thought you could have 3 col under one row so i have 12 then 6+6=12
@Ketchypie try this <div class="col-md-12 col-xl-offset-3">
@GregatGit Doesn't seem to do anything
Can someone please help me with my synchronous problem :(
@Ketchypie you can have 12 divs col 1 under one row. take a look here:http://getbootstrap.com/css/#grid
@Ketchypie and this grid principle is valid for all responsive css frameworks. the diff is in calling the classes
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line." Is this not what I'm doing?
sorry I'm not grasping it
@Ketchypie you have to understand what col-x-y is doing because col-xs-12 only it will try to accommodate full width on all screes from mobile to large. instead col-xs-12 col-md-6 col-md-offset-3 will do the same on mobile but on medium and desktop will show centered by 3 columns two the left and 3 to the right. hope u get what i mean
ye that makes sense
so i should use xs unless i want to specify the position of something?
Anybody know why I can't get latitude and longitude to show up? It was working on a different computer but I can't get it to work on my laptop... I think it's because chrome isn't asking me if I want to give permission for location services
http://codepen.io/mcorby17/pen/xOwBzB?editors=1010 The code is the same as the FCC example
@Ketchypie if you wanna make the page responsive try to decide how data will be displayed on various resolutions: mobile, tablet, desktop
@sorinr ok I'll try to work on it
It works for me!
@mcorby17
@sorinr Thanks for your help I'll do some more research into it in my downtime
ketchypie sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @sorinr |http://www.freecodecamp.com/sorinr
@joshfaggion11 huh... it's gotta be something with my laptop then
@Ketchypie http://getbootstrap.com/css/#grid read this very carefully. you will get the idea on how it works
@mcorby17 Try going to your computers permissions, and enabling your location.
@sorinr Ye I've got it bookmarked
@joshfaggion11 my location services are on... I checked chrome's settings and don't see anything about location... guess i'll restart my computer?
@mcorby17 Yep. That will probably fix it.
@mcorby17 work on https not http even on codepen. it should be https://codepen.io/yourname/yourpen like: https://s.codepen.io/sorinr/debug/xOGdYz
@mcorby17 its chrome - try http://ip-api.com/json
hello, im attempting to get all of my buttons shifted over right. I tried to use the align element within a div but it didnt work. Here is what i have https://codepen.io/jreinke10/pen/QEyKVJ
@GregatGit do I put that in my code somehow?
@jreinke10 maybe .text-right or float: right
@jreinke10 i'd recommend using the .nav bootstrap class for the top portion
@jreinke10 I can't find the best way to do it. here is one way. It's basically a hack, but it works, so you can decide if you want it or not
<h1>Jack Reinke</h1>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3">
<button class="btn">About</button>
<button class="btn">Portfolio</button>
<button class="btn">Contact Us</button>
</div>
</div>
hey guys. i'm almost done with my tic tac toe game, but i have an issue with differentiating between win/lose and draw. if every block is filled and the game is won or lost by the lost block being filled, i get a "You win!/You lost! "message AND a "Draw!" message.
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
i figured the if/else statement and gameOver variable on JS line 201 would prevent the checkDraw() from running, but it still does.
any ideas what i can do?
http://codepen.io/wise/pen/dXbqMK?editors=0010
@ctataru
i build tic tac toe too,
if(cells.length === 0 && $('#myModal3').data('bs.modal') ){
$('#showResult').html('this game is tight');
$('#myModal3').modal('show');
}this line won't work
http://codepen.io/buiphuking/pen/JKoEZG?editors=0010
@mcorby17 I've got the location problem too....doesnt show up.
I have a very simple problem
When I put my style element into the css tab it does nothing
When I put it into the html tab it actually does something
How come it doesn't do anything when I put it in the css tab?
The location doesnt show up. Please help http://codepen.io/vinay_jaju/pen/YWwpBJ
@miciah123 you need not put style in css
It is used for inline css
@vinay-jaju Are you sure?
Yep
What do you mean by "inline css". @vinay-jaju
@miciah123 hold on. take a deep breath an search for what a page html structure should like. what tags are meaning. this kind of stuff.
@vinay-jaju make it https://codepen.io/vinay_jaju/pen/YWwpBJ
Damn! What did u change @sorinr ?
Worked! Thanks @sorinr
vinay-jaju sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @sorinr |http://www.freecodecamp.com/sorinr
@vinay-jaju nothing i jut acces it over https instead of http to work: look here: https://codepen.io/sorinr/pen/xOGdYz
Great work dude!
@vinay-jaju navigator.geolocation works only over https
Okay. Thanks man! Will remember that.
Hey everyone. I am working on the Weather App and I don't know how to get the actual weather information from OpenWeatherMap. I think it has something to do with the key I am given on the site, but I don't know for sure.
Hi, I'm going to be starting the Tribute page, but not sure what "libraries" the instructions are referring to. Can someone help me out?
Example: Rule #2: Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
For that, the main library would be Bootstrap, in order to make the site responsive. Libraries are anything that isn't "vanilla" (meaning no modifications) that can be added into the code. Any CSS stylesheet or Javscript sheet that can be added is technically a Library. @marcusk71
The challenge is basically saying, "Use whatever prewritten code you need to."
Looking for some help with tic tac toe. Looking for some guidance. I am struggling on how to start mini max AI
Ah, thanks @Cameron-Burkholder !
:cookie: 371 | @cameron-burkholder |http://www.freecodecamp.com/cameron-burkholder
marcusk71 sends brownie points to @cameron-burkholder :sparkles: :thumbsup: :sparkles:
I'm working on the random quote generator. I have a few lines written in my JS file and have one line commented out. Can anyone check to see if I'm missing any steps?
$('.btn').click(function (){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json){
//take the quote and put it into a div
});
});
Are you using JSON to put the quotes into the main box? @gerarddawson
that's my plan @Cameron-Burkholder ...TBH, I've been confused between AJAX, JSON, JSONP, so I'm not sure what the best implementation would be
I just made an array with something like 10 quotes in it, and I changed the text of my main box to a random reference number inside the array when I clicked the button.
@gerarddawson
Yeah I'm not strong on those either. So far I really don't like API's. @gerarddawson
Thanks. @vinay-jaju
cameron-burkholder sends brownie points to @vinay-jaju :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @vinay-jaju |http://www.freecodecamp.com/vinay-jaju
I see @Cameron-Burkholder ...that seems like an easier way, but I'm having trouble grasping the concepts behind requesting json data from an api and rendering it in html, so i'm trying to use this project to practice that
ok @Cameron-Burkholder, i understand. they do seem complex to get the basics of, but they seem so powerful that I think it's important for me to understand them
How come my <div> element will not cover the whole page:
@gerarddawson You are close. Try reading the json received on the console and then proceed.
@miciah123 Which div element?
nav bar height is 100px so it covers only 100px
To cover the whole page you could use 100%
the one with class "nav-bar"
I want to extend the width all the way, not the height
will
checkWin()here only be truthy if it returns something?if (checkWin()) {
checkWin();
gameOver = true;
}
So what do you do with the API once you call it with your key?
@vinay-jaju Ok, thanks. Basic question here. How can I log the json to the console? This is not working...
gerarddawson sends brownie points to @vinay-jaju :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @vinay-jaju |http://www.freecodecamp.com/vinay-jaju
$('.btn').click(function (){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json){
console.log('json');
});
});
@gerarddawson This might work
console.log(json)
http://codepen.io/Hazky/pen/BzjLOx My hamburger doesn't work correctly for some reason. I think, I put the code quite right.
@Hazky add jquery and bootstrap.js
So I'm currently having trouble filtering json...in the example code on FreeCodeCamp with the cats they use the .filter method but isnt that a method of an array? isn't json an object and not an array? so when im saying like json = json.filter(value id == country_name) i keep getting an error stating that json.filter is not a function...what gives?
the code here will only run if
checkWin() returns something, right?if (checkWin()) {
checkWin();
gameOver = true;
}
@Grizvok which exercise was it in which they used filter
My main goal for the Weather App is functionality over design, so excuse the bad css and stuff. However, I called the API and I think that I have to call a function that uses it somehow, but I am not sure what to do from there.
@UtkarshShukla7 the one in which they called the freecodecamp cat photo api...where they explicity talk about json formatting yet when they stringify the data from the api it isnt even in a json format it is just an array of objects
which isnt the same as json at all is it?
well i guess it is just an array of json objects but still
@Grizvok no it isn't .Let me check the exercise
i assume there is a way to filter the object regardless i just have to figure out how without .filter but that did seem efficient
perhaps with bracket notation i guess
This message was deleted
@Grizvok use Object.keys and then any loop to filter through it
hmm okay
am i correct in saying that exercise was returning an array though?
I have written code that I think should return the time and date and geolocation of the user and set elements on my page to those things, but nothing works. My Javascript / JQuery is:
$("document").ready(main);
var long;
var latt;
var tempF;
var tempC;
var c = true;
var time = moment().format('h:mm A');
var day = moment().format('dddd, MMM D');
function main() {
navigator.geolocation.getCurrentPosition();
latt = coords.latitude;
long = coords.longitude;
$("#place").html(latt);
$("#place").text(long);
$("#degrees").click(function() {
if (c) {
celcius2();
} else {
f2();
}
});
$.getJSON("api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=a3b3fd3219c48bb3e1c601a38dfa859d", function(json) {
});
$("#time").text(time);
$("#date").text(day);
}
function celcius2() {
$("#degrees").html("Fahrenheit");
c = false;
}
function f2() {
$("#degrees").html("Centigrade");
c = true;
}
And my full Codepen is:
https://codepen.io/CameronBurkholder/pen/mEegGq
https://codepen.io/CameronBurkholder/pen/mEegGq
@Grizvok yep its an array of objects.
@Cameron-Burkholder you need to supply the getCurrentPosition with a callback
@vinay-jaju yes, I've got the data logged to the console. Now, I just need to figure out how to add into my <div>
$('.btn').click(function (){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function( data ){
console.log( data.quoteText );console.log( data.quoteAuthor );
});
});
Could you guys give me some feedback on how the design is coming along for my portfolio which I'm working on
Hello, I'm trying to do the Tribute page project. I've got mine to look almost identical to the example page, but it's missing the white around the photo caption, and I can't quite figure out how to add it. Here's my codepen, apologies in advance for how messy it is. http://codepen.io/dunderbutt2000/pen/LZGxVJ
@DunderStruck add this style to that element
background-color: white;
margin-top: 0px;
width: 1024px;
although your image is not responsive ,so do that too
oh. ok. Thanks!
@DunderStruck np
Hey guys i'm trying out bootstrap and i want to make my navbar occupy the container but i just can't get around as to how i should do that. Like, i want instead of having ever <li> element aligned to the left, i want it evenly spread-out -- how do i do it with bootstrap? btw code is a bit messy atm i only use codepen to get the code out there
i mean the code itself is irrelevant, you have a <ul navbar> and how would you have <li> spread out evenly through it?
or even better fill it up evenly
Yup, that did the job. Thanks again.
@bscyrpt Thank you
lahowitt sends brownie points to @bscyrpt :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @bscyrpt |http://www.freecodecamp.com/bscyrpt
@DunderStruck but also try to decrease the width and you will see the image isn't responsive
Can anyone knows jquery give me some help i'm working on Twitch tv project and stuck with 10 lines of code
@Cameron-Burkholder I think you api url needs to include "https://"
thank you
@sanchit13 navbar is looking much better.
@UtkarshShukla7 I added the "img-responsive" class to the image. I think that fixed it? The bootstrap stuff is all new to me.
@KoniKodes Ayyyyyye, still not where I want it to be but I gotta work on that later.
@sanchit13 I know. But it is easier to see now.
@DunderStruck yes that will fix it . Don't worry, you will get the hang of it .
Hi to all. I need some help regarding two rows i´m trying to create. it seems the headline doesn´t want to "jump" into the upper right corner and i cant figure it out why...
any suggestions?
@TjasaK add bootstrap
@gerarddawson thank you! I was spending so much time looking for a quotes provider XD
:cookie: 243 | @gerarddawson |http://www.freecodecamp.com/gerarddawson
katgeek sends brownie points to @gerarddawson :sparkles: :thumbsup: :sparkles:
@dctor What do you need help with?
@UtkarshShukla7 do you mean <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> on the top of the html?
@gerarddawson Great! Glad that I could help
@TjasaK click the gear next to CSS in your codepen then click the drop-down menu of Quick Add and select Bootstrap then save it
@TjasaK yes just like that ^^^
@Belax8 thanks and @UtkarshShukla7 thanks for advice, did that but somehow still doesnt work??
tjasak sends brownie points to @belax8 and @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @belax8 |http://www.freecodecamp.com/belax8
:cookie: 599 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
@TjasaK change
col-md-* to col-xs-*
yeeeeeej!! that works :) thanks @UtkarshShukla7
tjasak sends brownie points to @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:warning: tjasak already gave utkarshshukla7 points
@TjasaK np :+1:
why can´t i use md?
hey guys!
or better question - when do i use those??
Hey @derwaro
i thought col-xs- are for mobiles and xol-md- are for small laptops?
I need a little help with my tribute page. Its pretty much done, but for some reason my H1 class wont work. I have the h1 styled in css but it's not showing on the page. its supposed to be centered and a blue color, just like my h2. any ideas? http://codepen.io/jeffbrowndev/pen/wWMJXj?editors=1100
My site shows the coordinates correctly but doesnt get the json data but while I enter the url in the address bar with correct coordinates it shows correctly, please help
https://codepen.io/vinay_jaju/pen/YWwpBJ
https://codepen.io/vinay_jaju/pen/YWwpBJ
@TjasaK oh was AFK ,their usage is dependent on widths of your screen not type of device
@jeffbrowndev You could add a class="text-center" in your h1, that would make it center aligned
if you look at my CSS, ive already added that, along with font size and color. Im wondering why its not applying to the page
h1 in my style sheet is not working for h1, but is working for everything else
@UtkarshShukla7 np.. i am here, happy that it works..OK, but since i am doing this on my laptop i thougth it xol-md- might be a better choice...
@jeffbrowndev remove <style> tags from your css
It is not required
well anyways, next time i will be trying them both before asking... thanks again for your help!!
@TjasaK
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
I'm still struggling with getting the coordinates for navigator.geolocation. My codepen:
https://codepen.io/CameronBurkholder/pen/mEegGq
https://codepen.io/CameronBurkholder/pen/mEegGq
just tried that, didn't change. good to know those are not required though
@TjasaK see even on laptop if you'll get your width lower than the breakpoint it won't work
@Cameron-Burkholder go read about async functions
@UtkarshShukla7 yes, i see that & saved that info...
@Cameron-Burkholder You are getting the coordinates but you are not assigning rightly. Take the assigning codes in your function assignCoords.
@TjasaK ok :+1:
I need a little help with my tribute page. Its pretty much done, but for some reason my H1 class wont work. I have the h1 styled in css but it's not showing on the page. its supposed to be centered and a blue color, just like my h2. any ideas? http://codepen.io/jeffbrowndev/pen/wWMJXj?editors=1100
@jeffbrowndev Remove style tags from css. It works properly
@jeffbrowndev yes after removing it works
yes! thank you so much. it worked
i love this chatroom
@jeffbrowndev np
@vinay-jaju The page at 'https://codepen.io/vinay_jaju/pen/YWwpBJ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=23.022505&lon=72.5713621&appid=d75bd58730ad911d5c39b3ed4b0f9b86'. This request has been blocked; the content must be served over HTTPS.
@vinay-jaju The page at 'https://codepen.io/vinay_jaju/pen/YWwpBJ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=23.022505&lon=72.5713621&appid=d75bd58730ad911d5c39b3ed4b0f9b86'. This request has been blocked; the content must be served over HTTPS.
Hello I'm stucked in the random quote machine task
I use the api from forismatic.com and I get the json (I have checked it in the console) but I cannot change my html
What do you mean by "take the assigning codes in your function assignCoords?" @vinay-jaju
@isaacgg link your codepen?
Sorry, I haven't checked in the console
Maybe I am no getting the json object
*not
@UtkarshShukla7 The link you sent, it is correctly loading in my browser. I didnt quite get what u said. Anything i can do about the problem
@isaacgg you forgot an = on the id of the button(html section)
@Cameron-Burkholder The codes where you are assigning lattitude and long to #place to the above method assignCoords
@wearenotgroot true, thanks
isaacgg sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1114 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
How should I change it? @vinay-jaju
@wearenotgroot but my function still not working, on the console I get undefined when trying to print it
function assignCoords(position) {
long = position.coords.longitude;
latt = position.coords.latitude;
$("#place").html(latt);
// $("#place").text(long);
} @Cameron-Burkholder
@vinay-jaju that was the error message I got from your page
Right. That is what I have now. So, I should remove the bottom $("#place").text(long); ? @vinay-jaju
That doesn't display the latitude correctly either.
you are going to have trouble with cross domain json requests for most api
's
unfortunately
unless you use jsonp
@Cameron-Burkholder i know you've probably put a lot of work into it already but if you keep having trouble i've found a really really good api where you can chain geolocation (by ip) and current weather to produce location and weather in one call
@Grizvok Can i use jsonp in my jsonRequest. If yes, then how?
hey guys, trying to figure out where this black bar is coming from. on codepen it doesnt show up ( http://codepen.io/dcgoings/full/MeWBwz/ ) but in atom (editor) it shows up like this:
err
actually, now that im looking at it.. it might be a color issue. hmm.
oh, it's not in a container for some reason.. wtf did i miss.
@dcgoings It looks good to me. Nice flow, no color contrasts or bars.
@dcgoings My error. I was on codepen. I don't know about atom, but I am using chrome.
How come I can't write latitude and longitude to the console outside of the navigator? Shouldn't "latitude" and "longitude" vars be global since i didn't declare them with "var"?
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude); //works
});
}
console.log("Latitude: " + latitude); //doesn't work
Hey guys, what api do you use to get the quotes? Mine is not working...
@mcorby17 Do your global variables need to be outside the if statement? Or your 2nd console log must be inside the if statement?
anyone able to help me overlay text on an image
I dont even know where to start on this personal portfolio project.
hello
I would need a little help with my portofolio project (regarding bootstrap grid). Can someone help me?
?
Yeah Gitter is not working well for me today
I might be able to @jreinke10
Me too @Antiphilous
heelp. Still stucked in the random quote machine. My getJSON function is not working
hello, is this working now?
(the chat window)
hey guys what about now? http://dagman.github.io/
@isaacgg You're running the codepen from https which conflicts with the quote api which is http. Run the codepen on standard http and you're good. Also, your calling the json content from outside the get function, which will not work unless you use a callback inside the get function and then use that function somewhere.
// Like This
function changeQuote(){
var title, content;
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(val) {
title = val[0].title;
content = val[0].content;
$("#quote").html(title);
$("#quote_by").html(content);
// Or use a callback
showQuote(val);
});
};
// The callback
function showQuote(quote) {
console.log(quote[0].content);
}
hey everyone. here is my tribute page. Any feedback would be great! http://codepen.io/jkilgore07/full/VjepQm/
wow
i thought nobody had said anything for a long time
just broken
@jdtdesigns Thank's for the reply, but still doesn't work. BTW what do you mean by "calling the json content from outside the get function"? I store the content of the JSON on variables (title and content) and then I use them later. Is that wrong?
@jdtdesigns BTW what I have done for running codepen is just load the url like http://codepen... Is that ok?
@isaacgg yes removing the s from https: will allow the api to work
to your 2nd question
hello, can someone help me with my portofolio assignment? (i have 2 questions)
Hey guys so now i'm having trouble actually obtaining the JSON from the weather API... Any ideas?
$(document).ready(function(){
//var latitude, longitude;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
//Get latitude, longitude, and set weatherAPI URL
var lat = position.coords.latitude;
var long = position.coords.longitude;
var weatherAPI = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=83a973fe5216202f34e2c142a70d008f";
//Get JSON data from openweathermap
$.getJSON(weatherAPI, function(json){
$("#data").html(JSON.stringify(json));
});
});
}
Does anyone that has completed the online weather app have tips or suggestions on how to do it?
It won't show the JSON
On the page
@isaacgg Yes, http:// will work.
function changeQuote(){
var title, content; // These are scoped to this function and can't be accessed outside unless you return or send them
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(val) {
showQuote(val);
console.log("hola");
title = val[0].title;
content = val[0].content;
});
// This won't work
console.log("algo");
console.log(title);
$("#quote").html(title);
$("#quote_by").html(content);
};
// This does work because you got the info from the api call and then sent it to this function
function showQuote(val){
console.log(val[0].content);
}
@jkilgore07 works. The background is a little bright for my tastes and I'd blow-up those pics more but otherwise pretty good. Also, you might set a max-width on the text as it gets pretty wide on a wide-screen monitor. Lastly, your ubuntu font isn't working because you need to put it in quotes in the css and you spelled it unbuntu
@Cameron-Burkholder do some HTML, style it, use the api at ip-api.com or HTML5 location (but it won't work in chrome) to get user location. Pass the lat/long to openweather's API. Do a JSON call. Use the data to manipulate your HTML
@Cameron-Burkholder profit
@mcorby17 Look at your console (ctrl shift j) and let me know what it says please
@Nei-V what are your questions
@dhcodes I was wondering why the font wasn't working lol. Still getting used to all the attention to detail for coding. I will check out the max width, as im not familiar with it. Or maybe i just forgot about it. Need to check my notes. Thanks for the feedback!
jkilgore07 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 983 | @dhcodes |http://www.freecodecamp.com/dhcodes
@Cameron-Burkholder i offered to send you an api which makes it much much much easier but maybe you didnt see it
im beginning to see that finding the right api can be half the battle
Yeah that'd be great. Which API did you use? @Grizvok
im not going to give you the answer but it allows you to chain calls to the api so you only need to do one call to that api to find current location AND current conditions in that location
you need to register for a free key
much less work than needing to call the geolocation and then call the openweather api
Ok thanks @Grizvok
cameron-burkholder sends brownie points to @grizvok :sparkles: :thumbsup: :sparkles:
:cookie: 168 | @grizvok |http://www.freecodecamp.com/grizvok
no problem. just read through the documentation a bit and it'll show you how to do it pretty easily
@jdtdesigns the console doesn't say anything
I tried logging JSON.stringify to the console and nothing
Alright I will
@mcorby17 post your codepen link please
Hi. Trying to get past the "Resposively Style Radio Buttons" challenge. I've nested the group of radio buttons in a <div> as well as each one individually, but both the tests that address these parts of the challenge stay red x'd.
@kwittig post your code please
can i set max-width in the body in css like so: body{
background-color:#0ff;
font-family:"ubuntu";
font-size:20px;
border-style:outset;
border-width:20px;
border-color:silver;
padding:30px;
max-width:300em;
}
background-color:#0ff;
font-family:"ubuntu";
font-size:20px;
border-style:outset;
border-width:20px;
border-color:silver;
padding:30px;
max-width:300em;
}
keep in mind what it's asking you to do. there should be on div with a class "row", and then each radio button should have it's OWN div with a class of col-xs-6.
@dcgoings Yes. I've done that.
@Cameron-Burkholder any luck?
@jdtdesigns @dhcodes Thank you
isaacgg sends brownie points to @jdtdesigns and @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 985 | @dhcodes |http://www.freecodecamp.com/dhcodes
:cookie: 453 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Hello! I'm working on the Porfolio project and was wondering if we are able to use one of the grid layouts on the codepen.io site as a starter.
Hi guys
I am stuck at the local weather app zipline
@kwittig again, post your code.
@johnwypick you learn more doing stuff from scratch but that's my thinking so
@dcgoings <div class="row">
<ul>
<div class="col-xs-6"><li>cat nip</li></div>
<div class="col-xs-6"><li>laser pointers</li></div>
<div class="col-xs-6"><li>lasagna</li></div>
</ul>
</div>
<ul>
<div class="col-xs-6"><li>cat nip</li></div>
<div class="col-xs-6"><li>laser pointers</li></div>
<div class="col-xs-6"><li>lasagna</li></div>
</ul>
</div>
@mcorby17
var url = 'http://ip-api.com/json`;
$.getJSON(url, function(json){
console.log(JSON.stringify(json));
// update your lat and long from the json
// do your weather api call here with updated lat and long
});
Can anyone help me with the HTTP/HTTPS errors involving the weather underground and openweathermap APIs? I've used both APIs and I am still unable to retrieve data due to the API data being sent over HTTP conflict with HTTPS of CodePen
if you want the answer i can give it to you
i used jsonp
and used weather underground
@Grizvok okay let me try with jsonp
they even give you example code on the site that works brilliantly tbh
here to be exact
@EthanHitGub instead remove the "s" from https in your url then try it .
that too
do not try and grab something over http in your code while using the https URL of codepen it will give you that error
@needsMoreCoffee I see. Well it worked. Is this the only way to get it work in CodePen?
@kwittig haha, sorry man. radio buttons... RADIO buttons.. :p
yes
@kwittig where are your radio buttons?
i think maybe if you use https for the code over https should be fine
i have a quick question. say i have an ajax request that updates my html markup and creates a span element. can i then add an event listener for a click on that span element that was created or does an event listener need to be on part of the original mark up?
this is what i have read anyway. so it may not work . Im just assuming in that case.
@needsMoreCoffee Thank you. I did adjust the API url to https and left my codepen in https, and it worked fine.
ethanhitgub sends brownie points to @needsmorecoffee :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @needsmorecoffee |http://www.freecodecamp.com/needsmorecoffee
hey i got stuck with an jquery 'uncaught typeerror of undefined' when working on the Twitch tv project...maybe some simple can anyone look at it?
is it necessary to join the LinkedIn alumni network to get the Full Stack Web Development Certification?
Thanks Grizvok, your right. Going for it.
not that grabbing some code to add something is a bad idea but dont snag it from codepen learn to google for it haha
i definitely googled building a nav bar when i worked on my portfolio
etc
@dctor just put your pen up -
Anyone has completed the 'Random Quote Generator' project?
@Shwrndasink lots of people, whats your question
Where do I go for a good API
haha
google for one
I have
random quote api
famous quote api etc...
Yeah not much. Which one did you use?
I get a lot of Stock Quotes after page 1. All the results I got on page 1 want me to pay.
uhh the first four results for "random quote api" are all working apis that you are looking for????
Yeah 'They Said So' wants me to pay
the other results I get are wordpress plugins
Not getting good results.
lol next time use google, others are terribad but here you go https://market.mashape.com/andruxnet/random-famous-quotes
Yeah I used google
I am behind a firewall at work. Potentially the problem. But thanks for trying.
is any simple way to make web page responsive? https://s.codepen.io/DonFilip/debug/LZVvLb
i put some for bootstraps but it moved eerything
need some help with .ajax jquery to wikipedia
anybody mind looking at my pen>
?*
@DonFilip In chrome everything is ok but when i open from IE or other its totaly diferent
Hey can someone tell me why the this image and text are not aligning properly, they should appear next to eachother horizontally not vertically should they not? (its bootstrap)
<div class="row">
<div id="about"></div>
<div class="col-md-6">
<img class="img-responsive" id="portrait" src="http://placehold.it/350x350">
</div>
<div class="col-md-6" id="bio">
<p>Hey my name is Eric, Currently I am a Web Developer in training! This is on of my first projects and I hope you enjoy it. My contact info is listed above feel free to contact me by any means!</p>
</div>
</div>
heres the code pen... prob easier to read :P http://codepen.io/BZanZ/pen/OXyyMN?editors=1100
i just finish(i think) the tic tac toe if some one look at my app and give me sugg or feedback welcome to your opinions thank's
@mustapha88 Your program tells me it's a tie twice for some reason?
@mustapha88 Maybe centre the upper heading text? But the AI seems intelligent, so well done!
@Nachlawi no it just by default apperciate your reaction
thank you@Nachlawi
is there anyone who help me with my question above?
@mustapha88 the game is a little glitchy. All the html shouldn't reload for a new game - just the tiles should empty - a small tip - there is a tidy button on the js panel in code pen which makes your code much neater (and easier to read)
@ericbezanson they are beside each other as long as the screen is md or above
@ericbezanson bootstrap has a default col-xs-12 unless you change it -
You also need to add bootstrap.js after jQuery.js in the settings
thanks @GregatGit
ericbezanson sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 572 | @gregatgit |http://www.freecodecamp.com/gregatgit
lol im using a shitty computer at work with a non full screen browser window :P
I supposed Id rather just look like an idiot then have incorrect code ahaha
@ericbezanson most people understand the bootstap grid system - once you get a handle on it you'll be heaps quicker framing pages how you want them to look - so take bit of time to get your head around http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
yeah im pretty familiar with it. I normally code on my retina macbook but its dead here at work so i figured I should prob hack away at this proj.. not used to a 1280*1024 monitor haha and I have it in a half sized window incase a manager walks by lol
thanks for the link though!