is there a way to use developer tools in code pen?
@DivaWeb f12 in chrome. I use it all the time to test and debug in console. I don't know if that is what you meant tho
Hi everyone I have just finish the portfolio project , here it is, http://codepen.io/zamyka/pen/dGLgap What do you guys think??
So I'm just getting started on the weather app, and wikipedia viewer, and I'm having some trouble figuring how how to use these APIs. It seems like it's way over my head, I don't know where to start.
Challenge: Stand in Line. Any idea what I am doing wrong??? I have to add "item" to the end of the arr-array and remove the first value of the same array.'''function queue(arr, item) {
// Your code here
return arr.push(item);
return arr.shift();
// Change this line
}'''
// Your code here
return arr.push(item);
return arr.shift();
// Change this line
}'''
Challenge: Stand in Line. Any idea what I am doing wrong??? I have to add "item" to the end of the arr-array and remove the first value of the same array.
function queue(arr, item) {
// Your code here
return arr.push(item);
return arr.shift();
// Change this line
}
:point_right: code formatting [wiki]
Inline code
This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.
Code Block
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
robmo sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 400 | @jnmorse | http://www.freecodecamp.com/jnmorse
Challenge: Stand in Line. Any idea what I am doing wrong??? I have to add "item" to the end of the arr-array and remove the first value of the same array.
function queue(arr, item) {
// Your code here
return arr.push(item);
return arr.shift();
// Change this line
}
@RobMo you need to return the new array, and a once a first return is reached, the function stops
@RobMo
array.push() returns the updated length of the array, array.shift() returns the item removed from the array
i am having a difficult time understanding how to use the prototype.reduce method. im working on sum all the numbers algorithm. I would appreciate if someone could try to explain this one to me. Ive read the MDN documentation for it and im not sure i understand it and i cant get it to work in my algorithm
my code from what i understand to do it with is..
function sumAll(arr) {
arr.reduce();
return arr;
}
sumAll([1, 4]);
@andrewchar reduce takes a callback function, that function is pasted at least two paramerters, the first one being the value of the previous run if there was on, and the second is the current array item, you need to return the items added together
@andrewchar ahh yeah forgot little more to that challenge to, your goal is to add all the values including the ones passed between them, and the highest value isn't always the second, so you first have to figure out what is the largest value, and what is the lowest, all the numbers between then lower and higher number, then add them all together, they provide links that describe all the methods you will likely need.
@jnmorse oh i just noticed it wants me to add the sum plus all numbers between them.. thats what i was missing
haha yes
well i took what you said and made the function work for just adding them!
@jnmorse thanks for your help, now i have to restart haha
andrewchar sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 401 | @jnmorse | http://www.freecodecamp.com/jnmorse
@andrewchar well least you know how to solve part of it already :smile:
i looked at my console log and it was showing them being added i was so confused
@jnmorse Thx I get it now. I assumed you needed return to "enable" the use of parameters. But it just outputs a value.
robmo sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:warning: robmo already gave jnmorse points
Any ideas on why I can't seem to use my "weather" variable outside of the defineWeather() function, even though I initialized it outside of the function?
$(document).ready(function() {
var weather = {};
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=57848e1dd9f80f39b83c8b46e5bc54fb&units=metric", defineWeather)
function defineWeather(data) {
weather = data;
$("#temp").html(weather.main.temp);
}
});For example, if I try to move my line with $("#temp") ... outside of the function, it stops working.
Does anybody know if there's an easy way of playing mp3s in firefox? I'm running into a brick wall with the Pomodoro clock project
Hey all, I'm having trouble with retrieving JSON data for wikipedia viewer. The function appears to not call in the codepen console, but in chrome's console I get an error about Access-Control-Allow-Origin. Any thoughts?
@kaizen711 There is some audio capabilities built into js. Look up audio objects. I linked this sound for mine 'http://myinstants.com/media/sounds/correct.swf.mp3'
@alexanderkopke yeah I was using chrome but because the code was written inside code pen it would not separate it from code pen so I could check out how my code was working.
@kaizen711 I hadn't tried firefox. I'm primarily a chrome user
kaizen711 sends brownie points to @jerlich97 :sparkles: :thumbsup: :sparkles:
:star: 311 | @jerlich97 | http://www.freecodecamp.com/jerlich97
Can anyone help with my Access-Control issue? Searching google has just confused me more.
http://codepen.io/jerlich97/pen/YwbZPv?editors=0010
http://codepen.io/jerlich97/pen/YwbZPv?editors=0010
@BLayman you weather var will only have a value once the data from $.getJSON gets data in response so the value outside is always going to be undefined. you can call other functions from within defineWeather and pass it the data, but just trying to access it outside isn't going to work cause the data isn't available right away, and the rest of your code will process long before that happens
Hi All - I can't see what I'm doing wrong with the geolocation function and wonder if a fresh pair of eyes can catch it. JS is loading the NY location I hardcoded so I know geolocation is enabled but its not overwriting with my current position: http://codepen.io/kwhms/pen/WrWwqY
@jerlich97 you can add
callback=? to your query string and it won't give you that error anymore, unfortunately i don't know enough about server stuff to know why
@jnmorse Now it's told me Refused to execute script from 'http://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8…=Albertcallback=jQuery1120024056247854605317_1455849451264&_=1455849451265' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
@jerlich97
$(document).ready(function() {
$.getJSON(
"http://en.wikipedia.org/w/api.php?callback=?&action=query&format=json&list=search&utf8=1&srsearch=" + "Albert" + "callback=?",
function(json) {
console.log("testing");
console.log(json);
});
});did you change it like that
@kwhms well you can just comment out the NY one, but if your talking about it adding both that value and the values for your location, its cause your appending them not replacing the content.
@jnmorse Thanks. I guess I was having a refresh problem because I wasn't seeing my location at all. After your message I closed and opened the page and now I see it.
kwhms sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 402 | @jnmorse | http://www.freecodecamp.com/jnmorse
@jnmorse I see, so I just need to call a function with the data as the input, and that will pass the data out of the function? Like this:
function defineWeather(data) {
extractData(data);
}
function extractData(d){
weather = d;
}
$("#temp").html(weather.main.temp);
@BLayman the
$("#temp").html(weather.main.temp); would need to be in your extractData function instead though cause the value now only exists in those two functions
@BLayman the value ultimately will never get out side of the call back function so you either have to use inside the callback function or inside the functions you call from it
@jnmorse Oh, interesting. I saw another example where someone used loadJSON. Would that solve this issue?
@BLayman nope async can be a pain, and ultimatly all the ajax functions in jQuery get modified and run though $.ajax
http://codepen.io/jnmorse/pen/yeQQmE
this is a code piece I put together using JavaScript promises, can make your code a little neater but ultimately its the same thing, this is just doing the geolocation which is also a async function like an ajax request
this is a code piece I put together using JavaScript promises, can make your code a little neater but ultimately its the same thing, this is just doing the geolocation which is also a async function like an ajax request
:point_right: algorithm smallest common multiple [wiki]
Explanation:
The smallest common multiple between two numbers is the smallest number that
both numbers can divide into. This concept can be extended to more than two
numbers as well.
We can first start with just finding the smallest common multiple between two
numbers. Naively, you can start writing out multiple of each number until you
write a multiple that exists from both numbers.
An example would be the numbers 3 and 4. The multiples of 3 are 3, 6, 9,
12, 15, 18, ... and the multiples of 4 are 4, 8, 12, 16, 20, .... The
first smallest number we run into in both lists is 12 so this is the smallest
common multiple between 3 and 4.
This problem can be confusing because most people look for the smallest common
multiple of just the two numbers but forget the keyword range. However, this
means that if you are given [1,5], then you have to check for the smallest
common multiple for all the numbers [1,2,3,4,5] that is evenly divisible by
all of them.
:pencil: read more about algorithm smallest common multiple on the FCC Wiki
@jnmorse Good to know. Well I guess it won't hurt to put most of my code in my functions. Thanks.
blayman sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 403 | @jnmorse | http://www.freecodecamp.com/jnmorse
@andrewchar gl with that one, I had a heck of a time trying to figure it out
hmmm
Hey guys I need your help!http://codepen.io/asherzsz/full/eJaNOr/ My nav bar goes behind the top of my page and on top the bottom half of the page. How do I make it so that it goes on top of the entire page?
Hi there. I'm currently in this part: http://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage
But I'm not using codepen fot making it, since I'll put in my own website. But I'm using bitbucket. Will be a problem about getting the certificate of freecodecamp because of this?
But I'm not using codepen fot making it, since I'll put in my own website. But I'm using bitbucket. Will be a problem about getting the certificate of freecodecamp because of this?
@asherzsz using bootstrap? ------->http://getbootstrap.com/components/ read about nav bar, navs : http://getbootstrap.com/components/#nav or navbar: http://getbootstrap.com/components/#navbar
@lubien as long as they can see the code, css html and js
@lubien on github you can use a link to have your repo render in html
@lubien Why not just use codepen? It’s actually really nice for learning in. You can always deploy to your own server later.
@lubien I was originally going to do the same thing…but my background is IT and so I like server stuff. I decided on just using codepen for myself so that I wouldn’t sidetrack myself with server-stuff.
@robynsmith it was because I had a portfolio already and wanted to change it look so I did. Finished seconds ago.
http://lubien.info/
Repo: https://bitbucket.org/lubien/portfolio/
http://lubien.info/
Repo: https://bitbucket.org/lubien/portfolio/
Your page looks awesome.
I did the bare minimum to get mine functional. I’ll come back and make it better later.
@lubien How did you get it to “scroll slowly” when you click a button? Mine “jumps instantly”.
/*
* Jquery Smooth Scroll
* Author: Chris Coyier
* URL: https://css-tricks.com/snippets/jquery/smooth-scrolling/
*/
$('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 - $('#navbar').height() * 3
}, 1000);
return false;
}
}
});
Cool
thanks @lubien ... not there yet ... but I'm saving it in my code snippets
bitgrower sends brownie points to @lubien :sparkles: :thumbsup: :sparkles:
:star: 152 | @lubien | http://www.freecodecamp.com/lubien
one day I'll grow up and know what it's actually doing, too ... :)
hello guys ! I have made some progress with my pomodoro timer, got the session length and display working pretty well...I want to proceed to the break section and wanted to ask you guys
Should I do it just like I did session aspect or there's a better way around it, looking forward to your response(s), sorry I have to direct you to my JSFiddle ....
https://jsfiddle.net/wtwgpmpg/14/
thanks for your time.
@Lumexralph clearInterval for the session when it's done, then setInterval for the break. clearInterval for the break when done... etc
@qualitymanifest thanks man, i have that covered, was just thinking if there's another way I could do the break other than the way I did session, thanks for your time
lumexralph sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star: 982 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
@qualitymanifest @Lumexralph actually it's not necessary to have different interval function for the work and break session. simply have one function with the interval. inside the interval add logic that when
time reaches zero, you'll update it with the value of work or break session length. to make this work, you'll also need a variable that tracks whether the clock is currently in the work or break mode (and you'll need to flip it accordingly). when you update time with a new value, on the next tick of the interval the clock will simply start counting from there
@Lumexralph i didn't have separate functions for session and break, i had a main timer function with an if/else statement, if current status was session, subtract seconds from session. when session done clearInterval, set status to break, setInterval for break
This message was deleted
you don't need to clear the interval, simply update the main time variable. you only need to clear the interval when you pause or reset the clock @qualitymanifest
okay i see what you're saying
Thanks man, would work around that.... Need to go now but will let you know if I got through @h4r1m4u
lumexralph sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1433 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Hi
I'm working on the calculator and stuck. I use eval() to evaluate the string, but as a result intermediate expressions like "5+" throw an error. I tried solving this problem via regular expressions but my regex isn't working. Could someone help me figure it out please?
I'm working on the calculator and stuck. I use eval() to evaluate the string, but as a result intermediate expressions like "5+" throw an error. I tried solving this problem via regular expressions but my regex isn't working. Could someone help me figure it out please?
$(".box").click(function(event) {
var input =$(event.target).text();
seq = seq.concat(input);
try {
var res = eval(seq);
$(".result").text(res);
}
catch (e) {
reg = new RegExp("\d[+-*/]$");
console.log(seq.test(reg));
if(seq.test(reg)=="pass"){
} else {
$(".result").text("INVALID");
}
}
});- generally means repeat any character -- or none at all ... putting that in a match expression would produce rather unpredictable results, I think ...
have you tried putting it into one of the many regex testers ?
help regex
:point_right: js regex resources [wiki]
Links to useful RegEx resources.
- Getting Started Tutorial: http://regexone.com (FCC recommended)
- RegEx 101: https://regex101.com
See also: :clipboard: Tutorials | :syringe: Testing | :soccer: Games | :newspaper: Blogs | :package: Software
I also don't know what is supposed to be handed to a RegExp object ... so I don't know if that's the right syntax or not ...
@bitgrower Figured out the correct regex.
\d[+\-*\/]$ via a checker. So basically it should match an intermediate expression "4+" would pass.
which challenge are you currently in?
Would love some criticism on my calculator project. if anyone has time to look it over, let me know where i can improve. thanks :)
http://codepen.io/boris-in-london/full/QyRvZm/
http://codepen.io/boris-in-london/full/QyRvZm/
Hey, is there a way to set cookies without refreshing the page?
@boris-in-london , it looks like a real calculator. Congratulations!
The green squares have a lot of space on the right side inside the red box. I can't get it to center ! Please help.
http://codepen.io/coderNoob/pen/vLmyWN?editors=1100
http://codepen.io/coderNoob/pen/vLmyWN?editors=1100
@rohitChoudharyIndia: Works fine! Great work! Just two small points:
- The Random button goes to the very bottom of the page after the search results have been populated.
- It's visually confusing to have just the 'random' button. While pressing enter does work, I think having a search button or an ico will work better.
@coderNoob your divs have a class text-center that's not defined, I think you want that as an attribute
did you try using tables instead?
thats probably a better way to design this, thats what I ended up doing for the calculator project.
that seems a lot more work
I've been getting things done using bootstrap
a lot more faster
youll have more control controlling td and tr tags on your own, bootstrap does alot of things under the hood
I tried using bootstrap to organize my keys for the calculator project and couldn't get it to work, then I realized a table was much easier to do and got it done
bootstrap can do it way faster
it's fine on desktops but when you adjust the browser size, then we have a problem
you can still use bootstrap, just put the table inside the row
codernoob sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 274 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
although truthfully i didn't test my calcuator on my phone, i think im going to try it now and see what happens lol
looks fine to me
to be clear i set it up like this:
<div class="container-fluid">
<div class="row">
<table id="calculator">
help
Hi, I'm CamperBot! I can help you in this chatroom :smile:
Basic Commands:
find TOPICfind all entries about topic. ex:find jswiki TOPICshow contents of topic pagethanks @usernamesend brownie points to another userabout @usernameshows info on that userAlgorithm BONFIRENAMEinfo on a Algorithm
:speech_balloon: meet CamperBot in this room!
How do I set the width of columns different for desktop and mobiles? It's working good for the mobile version though.
http://codepen.io/coderNoob/pen/vLmyWN?editors=1100
http://codepen.io/coderNoob/pen/vLmyWN?editors=1100
the
col-md-4 doesn't seem to working
@coderNoob - Boostrap3 Mobile first
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
""
@dshgna Thanks for the feedback. I'll try to make it better.
rohitchoudharyindia sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 154 | @dshgna | http://www.freecodecamp.com/dshgna
@h4r1m4u got that stuuuupid project in
@h4r1m4u guess it's time to get on the grind tomorrow (aka Dota)
@wyattwade that's great. did you get any feedback on it yet, or it needs to be reviewed first?
I have learned some this technologies
HTML, CSS, JS, jQ, Bootstrap, SASS , GIT
what else should I know to become a good front-end developer?
Hey @YVeselovskyi you’ve definately got the core skills there. I think the best thing you can do is focus on improving those skills and make some awesome projects to show off your creativity
That’s if you want to be a front-end dev, otherwise year, do what @thomas-duval said! :)
Yeah, I want to get into front-end so I’m working towards the front-end certificate :)
an\
and i am unable to move forward
plz help
anyone
@YVeselovskyi
@thomas-duval
@davidsonsteve
@rohitChoudharyIndia
Hey @medhatrinky what’s up? Can you post your code here so we can see it ? :)
Hey everyone! I'm kinda stuck in the Wikipedia viewer Zipline. The API call I created with the sandbox doesn't seem to return what it's supposed to return and I have no idea why not.
This here is my API call
/w/api.php?action=query&format=json&prop=info&list=search&meta=&indexpageids=1&iwurl=1&inprop=url%7Cdisplaytitle&srsearch=Robert+Burns&srnamespace=0&srinfo=rewrittenquery
and it should return the prop info URL, but simply doesn't.
I added a click trigger and now the draw message appears twice ! Can anyone tell me why?
if (boardFull(movesSign)) { // Show draw game message
$(".winner").append("<p>Draw Game!</p>");
setTimeout(function() {
$('#reset').trigger('click');
}, 2000);
}
ah i see
on your userturn() function add this at the bottom around aiTurn()
if(!boardFull(movesSign)){
aiTurn(); //Switch to AI to take it's turn
}
basically it was triggering the ai turn when you take your last turn
so it runs the match complete function twice, once for the user once for the ai
but this checks to see if the board is full, if it is, it won't trigger the aiturn again
In the
userTurn function
I checked the condition like
function userTurn(pos) {
if ($("#b" + pos).hasClass("clicked")) { // Square is filled
//do nothing
} else {
if (!boardFull(movesSign) && !score(movesSign)) {
takeTurn(pos, userSign); //Make the user's move
$("#b" + pos).addClass("userClicked"); // Add blue background to user clicked boxes
aiTurn(); //Switch to AI to take it's turn
}
}
};
yes but on the last turn, you must check if the board is full AFTER the user takes his turn
so you wrap the aiTurn(); in the conditional statement
like this
function userTurn(pos) {
if ($("#b" + pos).hasClass("clicked")) { // Square is filled
//do nothing
} else {
if (!boardFull(movesSign) && !score(movesSign)) {
takeTurn(pos, userSign); //Make the user's move
$("#b" + pos).addClass("userClicked"); // Add blue background to user clicked boxes
if(!boardFull(movesSign)){
aiTurn(); //Switch to AI to take it's turn
}
}
}
};
@alexgaudiosi Got it!
codernoob sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 15 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
Anyone around who can help me out with the intricacies of the Wikipedia API?
Could you guys help me identify what's wrong with my jQuery code? Trying to get JSON data
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
$(document).ready(function() {
$(".wikiSearch").on("click", function() {
//var wiki = "https://en.wikipedia.org/w/api.php?action=opensearch&search=Te";
$.getJSON(http://ip.jsontest.com/?callback=showMyIP), function(json) { //IPtest
$(".results").html(JSON.stringify(json));
});
});
});
</script>
<a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><button>Random Article</button></a>
<!--<input type="text" id="wikiSearch">-->
<button class="wikiSearch">Test</button>
<div class="results"></div>
</body>
</html>
@alexgaudiosi Thanks. I'm still having issues with my code though
tstusr441 sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 17 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
@tstusr441
$.getJSON('http://ip.jsontest.com/?callback=showMyIP', function(json) { //IPtest
$(".results").html(JSON.stringify(json));
});
you closed the brackets too early around the getJSON function
tstusr441 sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:warning: tstusr441 already gave alexgaudiosi points
Can someone help me in finding what is wrong with my code.
It has to do with http://www.freecodecamp.com/challenges/title-case-a-sentence
var code= "function titleCase(str) {
str=str.toLowerCase();
var arr=str.split(" ");
var s="";
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
if(j===0)
s=s+arr[i][j].toUpperCase();
else
s=s+arr[i][j];
}
s=s+" ";
}
return s;
}
titleCase("I'm a little tea pot");
";
remove the var code="";
was trying to use markdown for the first time
function titleCase(str) {
str=str.toLowerCase();
var arr=str.split(" ");
var s="";
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
if(j===0)
s=s+arr[i][j].toUpperCase();
else
s=s+arr[i][j];
}
s=s+" ";
}
return s;
}
titleCase("I'm a little tea pot");
that's the one
Hi, can anyone give me some hints as to why my api call isn't working please?
$(document).ready(function() {
$("#getMessage").on("click", function() {
$.getJSON("api.openweathermap.org/data/2.5/forecast/weather?q=London&APPID=2dece6437b9269efec3f645327f480d2", function(json) {
$(".message").html(JSON.stringify(json));
});
});
});
or http://
Still not working. I know the link is good (especially now I've added http:// as I checked it here --> www.hurl.it
HTML here
<button id="getMessage">Click me</button>
<div class="message"></div>
http://api.openweathermap.org/data/2.5/forecast/weather?q=London&APPID=2dece6437b9269efec3f645327f480d2
Good to know. So why is it not showing when I click the button #getMessage?
it's working.. try refreshing the page @db001
Tried refreshing. But good to know the code is right, maybe something in my browser settings. Will play around. Thanks everyone!
Thanks @rohitChoudharyIndia @tstusr441 @kirbyedy
db001 sends brownie points to @rohitchoudharyindia and @tstusr441 and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 244 | @tstusr441 | http://www.freecodecamp.com/tstusr441
:star: 290 | @rohitchoudharyindia | http://www.freecodecamp.com/rohitchoudharyindia
is there a simple way to load and play a sound using jquery? Everything I'm finding on google seems pretty confusing
do you have to use the <audio> tag?
you can embed audio via jquery, but the audio file is still an element like an image in html
<audio id="song" src="file.mp3">
$('#song').play();
$('#song').play();
@otmeek @alexgaudiosi you don't need the audio tag. keep everything in the JS code only:
var mySound = new Audio('https://example.com/sound.mp3');
mySound.play();otmeek sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1434 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
otmeek sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 18 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
in the example http://codepen.io/Em-Ant/full/QbRyqq/ you can hold a key to play the sound indefinitely and it only stops on key up, how can i achieve this?
the only way i can think of would make the sound loop over and over again until the key is released i think
true, but same thing :) it embeds on the DOM, when we used to create banner ads we avoided it because of issues with users with throttled connections, but i guess for small examples it's fine
my sections are not showing up and it will not scroll I have been racking my brain on this and I just do not see what I am doing wrong
i'm not sure what it's supposed to look like, but your sections have no content or height from what I can see
@alexgaudiosi this is true but there should be at least a strip of color. However this is the broken down version of what I was working on trying to figure out where the glitch was
add width 100% and height of say 100px to one section
it should show up
so you have to set the height in css to something
change it to 200px
because your navbar is position:fixed, it no longer occupies any space on the document, so everything will shift up
you can add a margin-top of however tall the nav bar is to section-1 to stop that from happening
@alexgaudiosi OMG really!!! I told you I needed a brain that was working better than mine thank you!!!!!
divaweb sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 19 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
I was so focused on my code and making it write I didn't even think of something so simple
*right
How can you get the user's profile image (as in the example) if their stream is not currently streaming?
The API seems to really limit what you can pull if the person isn't actually streaming at the time
@dhcodes you use a default image. That's what the sample project had done
@dshgna yeah, but the sample project had many of the channels with their actual profile images. I just don't know how that's possible when the stream isn't online
ex. the freecodecamp profile has their actual logo, but they haven't been streaming lately
maybe i'm just over thinking it and I should put a default image as you suggested
m unable to go to next challenge
how to do it
@dhcodes what's your get request you're using to try and get the image?
@dhcodes I didn't see any link to the image in the API when the stream is offline. So yeah, maybe overthinking it a little ;)
why my challenge is nit getting accepted..in free code camp
all are correct but it is not getting accepted..
cna you please check where it has gone wrong
all are correct but it is not getting accepted..
cna you please check where it has gone wrong
@YVeselovskyi
it's listed as 'logo' in the response
@alexgaudiosi but you can only get the logo if the user is online, right? In other words, the API is quite limited when the user is offline.
so here is a json call example
$.ajax({url:'https://api.twitch.tv/kraken/channels/CHANNELNAMEHERE',success:function(data){console.log(data)}});
now if i did data.logo
it should return the url for the channel image
just tested it on my personal channel and it works fine
Can someone tell me why the image doesn't scroll with the text?http://codepen.io/mikenaza/pen/RrmpPe
there's nothing stopping you from putting the api URL in your address bar to look @ the data directly to check things, yeah?
it allows you to also manipulate the data response
Well yeah, but you can check what the response IS pretty quickly shrug
quicker in console imo, you should really get in the habit of using it
as you can also test your ajax functions
@mikenaza you only assigned the bounce animation to the h1 class, not the image class.
@jayuhasz You're right it works now, but I don't understand why both elements require bounce
@jayuhasz
Since I don't actually want anything to bounce I deleted it so nothing bounces. Now they scroll fine
Yea since I'm an early learner I won't dig that small detail
@jayuhasz thanks!
mikenaza sends brownie points to @jayuhasz :sparkles: :thumbsup: :sparkles:
:star: 306 | @jayuhasz | http://www.freecodecamp.com/jayuhasz
dhcodes sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 20 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
I'm assuming the way to do the simon project is to use settimeout() a lot for the timings?
Hi all, can someone help me with the .getJson function. Here is my code:
$("#getMessage").on("click", function(){
$.getJSON("api.openweathermap.org/data/2.5/weather?lat=35&lon=39", function (json){
$(".message").html(JSON.stringify(json));
});
});
@otmeek yeah, setTimeout() comes handy when you're playing back the AI moves back to the player
@CatalinScr try this:
$("#getMessage").on("click", function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?callback=?&lat=35&lon=39", function (json){
$(".message").html(JSON.stringify(json));
});
});
you need the http:// part and the callback parameter changes the call to a JSONP one to get around the crossdomain request issue
you may also need to add the API key from openweather (which you can get by registering on the site)
@h4r1m4u thanks
catalinscr sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1435 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@h4r1m4u still trying to think of how to do it, but at least im on the right track. thanks!
otmeek sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1436 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
anyone around willing to point me in the right direction on the personal portfolio assignment. I have completed basically what I would like to do except using "parallax layers", but I thought that I wanted to make it responsive because I noticed the example was and I felt that was more of a priority. But I can't seem to figure out why when I use "media declarations" it breaks the larger layout. Should I just move on and not care about responsive design?
This is what i have so far
@dhoover1 no, you should get the responsiveness to work. with the prevalence of mobile devices, it's pretty much a requirement nowadays. if you wrote the media queries properly, they shouldn't break your larger layout
i don't see any media queries in your CSS, so i'm not sure what you might have done wrong
how can I make sure the code I write after the settimeout waits for the settimeouts to execute? put the settimeouts inside another settimeout? o_O
I'm confused
@h4r1m4u ok, i will continue to try to work it out. I looked them up and had defined two size breaks: like this
ah well basically i removed it because the code seemed to remove all other css effects
if you can dig them up somewhere, i can point you to what might have been wrong
@otmeek that doesn't sound like a very good idea. what code do you need to wait for another code?
// blink count twice
$('#count').removeClass('count-on');
$('#count').addClass('count-off');
var blink = setTimeout(blinkCount, 500);
// start game turns
nextTurn(0);
I need the nextTurn(0) to wait for the blink settimeout to execute
atm its executing nextTurn while blink is still going
blinkCount itself takes 1000 ms to execute
well, it waits 1000 ms
you should put that inside the setTimeout callback, i.e. blinkCount in your case
otmeek sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: otmeek already gave h4r1m4u points
otmeek sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 21 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
my blinkCount makes the screen blink twice before starting the game. the function itself looks unseemly... I'm assuming nesting timeouts is a very bad thing to do
@h4r1m4u
looking at this:
http://stackoverflow.com/questions/12307064/responsive-css-for-phones-small-screens
i tried to use this code.
@media (max-width: 1200px) {
body {
padding-left: 50px;
padding-right: 50px;
color: #FFF;
}
}
@media (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
text-align:center;
}
}function blinkCount() {
$('#count').removeClass('count-off');
$('#count').addClass('count-on');
setTimeout(function() {
$('#count').removeClass('count-on');
$('#count').addClass('count-off');
setTimeout(function() {
$('#count').removeClass('count-off');
$('#count').addClass('count-on');
}, 500);
setTimeout(function() {
// start game turns
nextTurn(0);
}, 500);
}, 500);
}
it's probably better to use setinterval?
@dhoover1
// this would apply to ALL screens up to 1200px wide
@media (max-width: 1200px) {
body {
padding-left: 50px;
padding-right: 50px;
color: #FFF;
}
}
// this would apply to ALL screens up to 480px wide
@media (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
text-align:center;
}
}otmeek sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
@h4r1m4u well I wanted the look i have coded to persist down to 480px wide then change to centered,,,so maybe i should change
the top one?
@RobMo You can learn PHP with other online resources, although admittedly it’s tough. But after learning FCC and everything in JavaScript, a lot of the skills will be transferrable to PHP stuff - it’ll be just a matter of learning PHP specific langugae stuff.
@h4r1m4u I tried only using the one specifying
max-width: 480px; but it broke everything when in a larger size
@RobMo You can always work through the FCC curriculum and use PHP on personal projects (outside of the FCC curriculum, to be clear). Keep in mind that depending on how new you are to programming, it’ll probably be best to try to focus on one set of technology to learn initially.
@RobMo CodeAcademy has PHP classes, but they tend to be pretty basic. You could also check those out :)
@h4r1m4u @otmeek @robynsmith thx for the tips. Looks like I ll order another http://shop.oreilly.com/product/0636920024927.do . Unless someone knows a better php resource.
robmo sends brownie points to @h4r1m4u and @otmeek and @robynsmith :sparkles: :thumbsup: :sparkles:
:star: 171 | @robynsmith | http://www.freecodecamp.com/robynsmith
:star: 1437 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
:star: 348 | @otmeek | http://www.freecodecamp.com/otmeek
@dhoover1 yeah, if you want to apply the style only to screens smaller than 480px, then you should only use the 2nd query. you'll also want to add what media it should apply to, e.g.
@media only screen and (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
text-align:center;
}
}
it shouldn't break the larger layout
@RobMo The docs are pretty good:
https://secure.php.net/docs.php
https://secure.php.net/manual/en/
I found this post is pretty good:
https://www.reddit.com/r/PHP/comments/262469/what_is_the_best_way_to_start_learning_php/
It will setup a syllabus of what to learn - you can google stuff for specifics as well.
@dhoover1 i gotta run, but i tested the snippet above with your codepen and it works fine.
dhoover1 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1438 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
as a sidenote, if you wanted to target only devices larger than 480px, you'd write:
@media only screen and (min-width: 481px) {
}
you can also combine the two, e.g.
@media only screen and (min-width: 481px) and (max-width: 780px) {
}
you're welcome, good luck! your codepen is looking pretty good, btw. nice work @dhoover1
@h4r1m4u ok thanks a million! I'm not familiar with media queries, which is probably clear from my questions, but thanks for giving me a better understanding. I appreciate it.
dhoover1 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: dhoover1 already gave h4r1m4u points
is it possible to use .delay() to pause between iterations of a for loop?
actually, I think set interval is better for what I'm thinking
I think if it's used within the loop, so if you had .delay().fadeIn(), but it's about chaining within the block
I crashed the financial times app for 6 hours with a setinterval so I always try and avoid it, but for now it should be fine :shipit:
I'm really struggling trying to find a way to make the simon game play all sounds up to a certain turn
well that setinterval just crashed my browser
Anybody want to pair program on a zipline? I'm working on the Weather app, Tic Tac Toe game, and Pomodoro clock
why does this play all the sounds at the same time instead of one at a time?
while(t <= turn) {
setTimeout(AIbutton(allMoves[t-1]), 1000);
t++;
}
AIbutton is the function that simulates a button press
Hey guys I could use some help in responsive design I am using plain css and media queries... everything looks fine in codepen it responds well but it looks different in a tablet...
http://codepen.io/gebrutommy/pen/WrLmOr?editors=1000
on a table the social buttons align to the left
http://codepen.io/gebrutommy/pen/WrLmOr?editors=1000
on a table the social buttons align to the left
I want it
AIbutton(allMoves[0]) to execute first, then AIbutton(allMoves[1]) and so on and so on until t = turn
Im on my first challenge, the tribute page, and I wanted to know if there were any good recources for like skeleton HTML pages
Someone can help me pls @@ i have been stucking this problem from morning. http://codepen.io/Ahzux/pen/zrQYGx/ How can I shrank this text to equal above picture and How can I center the last sentence???
@AhzuxRamsey Since you're using bootstrap you can just do "class=text-center" to your text
@AhzuxRamsey Also remove margin-left and display:inline-block from #link in your CSS
@tstusr441 you mean i just do "class=text-center" for all text which need center, right ?
@tstusr441 http://codepen.io/Ahzux/details/zrQYGx/ i have fixed and it works, but texts was not ok @@
guys! How to assign some of the js code to some place. Like in CSS when I want to modify some class element I use ".some class element"?
@AhzuxRamsey My solution would be to use this:
.para {
width: 950px;
margin: 0 auto;
}
@KacperPorembski One way to do it is
document.getElementById('idOfElement').style.css = ...Example:
document.getElementById('bgc').style.backgroundColor = "#12C4FF";
@tstusr441 you give a invariable assizes ? It works ok, but I don't understand why you do this @@ maybe I have to learn more about CSS and responsive page
@AhzuxRamsey Ah I didn't realize you were trying to make your page responsive, I cannot help you with that as I'm not knowledgeable in responsive dev. It works because 950px is the size of your image
ahzuxramsey sends brownie points to @tstusr441 :sparkles: :thumbsup: :sparkles:
:star: 245 | @tstusr441 | http://www.freecodecamp.com/tstusr441
@AhzuxRamsey :+1:
Some information on Robin Williams
Also it looks as though you applied text-center only to the heading...
Some information on Robin Williams
Also it looks as though you applied text-center only to the heading...
ahzuxramsey sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 632 | @tommygebru | http://www.freecodecamp.com/tommygebru
Hello im new here and enjoy coding and became interested in front end development.
i realized there is certification here how can i use that in order to obtain work?
@ScrumUser1 well in order to attain the certificate you will be creating a "body of work" or a portfolio with multiple projects that you completed from start to finish, one your own or with the help of others ... this will demonstrate your technical ability and experience in the field :smile: only after you have done this you will receive a certificate to only further support your status as a front-end developer... :thumbsup:
@AhzuxRamsey The paragraphs need to be changed
the width should be 100% this will solve the overflow :smile:
Also the last line change : information of , to information on :+1: keep up the good work
the width should be 100% this will solve the overflow :smile:
Also the last line change : information of , to information on :+1: keep up the good work
kacperporembski sends brownie points to @tstusr441 :sparkles: :thumbsup: :sparkles:
:star: 246 | @tstusr441 | http://www.freecodecamp.com/tstusr441
hi, is there anything missing in this fcc-leaderboard project? http://codepen.io/batilc/full/adraLV/
@dshgna I'm going to try what alexgaudiosi suggested a few posts above yours
i get pretty scared of popups like in the
recipe challenge . i've seen semantic-ui has modals for that which is buggy at times. Could you suggest an easy way for a making a popup that blocks/blurs out the background etc? (other than the full manual implementation which im gonna make with overlays and z-indexes and else)
Hi, can someone critique the code of my tribute page? Did I use css when I could have used bootstrap, could something be done more efficiently? It's about 2/3 donehttp://codepen.io/mikenaza/pen/RrmpPe
@mikenaza Looks ok. You probably want to increase that top margin, right side text seems to be too close to the top. Other than that it looks pretty good so far. As in the given example you might want to place some sort of description right under the left side image. Keep working on it, have fun !
@URobert That's why it looked weird to me, the top margin haha. Thanks!
mikenaza sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 601 | @urobert | http://www.freecodecamp.com/urobert
@mikenaza any links that you need to include like google fonts or font awesome can be put into the <head> stuff in the options, does not need to be included inside the body of codepen
@mikenaza click options in your pen and you will see "stuff for head" you can put it in there
Is one able to view their codepen site as an actual site? What I mean is by itself in the browser, outside of codepen
you can view the site in debug mode
thats the closest you will get to seeing it full screen
in the link itself, change the word pen to debug or click option to view in debug mode
Hi mates. I want to use animate.css with css hover. Any help?
I'm having difficulty making an app that gets weather information when a button is clicked. I think the problem might come from the fact that I've placed my getJSON inside a function, but I don't know how else to do it:
In other words, I'm not sure how to wait to run $.getJSON until "city" is redefined.
@BLayman your problem is in your HTML, not JS. what happens is that when the Get Weather button is pressed, it submits the form which reloads the page. additionally, you forgot to close the <form> element. adjust your code to this:
<form>
Enter Location:
<input type="text" placeholder="city, state" id="mycity">
<button type="button" id="getWeather">Get Weather</button>
</form>
notice that i added
type="button" to the button. by default buttons without a type specified are submit buttons. by setting the type to button, your Get Weather button will no longer submit the form and reload the page
@Minhazul-islam you can add the animate.css class to your element on hover with a bit of jquery:
$( ".your-element" ).hover(
// this function determines what happens when the cursor rolls over the element
function() {
$( this ).addClass("bounce");
},
// this determines what happens when your cursor leaves the element
function() {
$( this ).removeClass( "bounce" );
}
);
@h4r1m4u Thanks. I think it will be helpful. But I want to use css as I'm not enough in jq.
minhazul-islam sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1439 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@h4r1m4u I see. Could I also just get rid of the form elements altogether?
@Minhazul-islam then your only option is to copy the CSS rules from the animate.css and add them into your own stylesheet
@BLayman yeah, you could. button doesn't have to be inside a form
minhazul-islam sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: minhazul-islam already gave h4r1m4u points
@h4r1m4u Ok, cool. I haven't had much need for forms so far, so I haven't been using them. Seems like they are unnecessary unless you are doing back end stuff. Anyway, thanks, that's a relief to know it wasn't my javaScript.
blayman sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1440 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
need help moving that nav-bar to the left
if someone is willing to help
ive tried margin-left:0 and didnt work
I'm confused, do changes to a global variable made within a function not matter for other functions within the global scope?
because I have a value set to 0 globally and then function add() increments it by one, but if I console.log that value in function print() it is still 0 even after executing add()
@otmeek variables or values declared or updated within a function is only available to that function cos at that point it makes the variable a local variable
otmeek sends brownie points to @lumexralph :sparkles: :thumbsup: :sparkles:
:star: 274 | @lumexralph | http://www.freecodecamp.com/lumexralph
you can try to use closure to be able to use the updated variable, it will give them same scope
@otmeek you're welcome
@LarrySimiyu this is your project with bootstrap it can be changed in the settings using a "Quick Link" :smile:
http://codepen.io/gebrutommy/pen/gPJQzz?editors=1100
http://codepen.io/gebrutommy/pen/gPJQzz?editors=1100
@Lumexralph not quite sure how to use closure, I will try to find out
hey guys, This is how far I have gone with my pomodoro.......please check my JS Fiddle
https://jsfiddle.net/wtwgpmpg/15/
What I want to do now is reset and pause the count, kindly suggest how I should tackle this
https://jsfiddle.net/wtwgpmpg/15/
What I want to do now is reset and pause the count, kindly suggest how I should tackle this
@otmeek not much about closure, kind of nesting functions
Hi everyone I have problem with making the twitch.tv project responsive
the online text crosses over the usernames when I view the page from my phone
any one has suggestions ???
zeemax sends brownie points to @omranabazid :sparkles: :thumbsup: :sparkles:
:star: 193 | @omranabazid | http://www.freecodecamp.com/omranabazid
hey guys, just looking for some early feedback on the stock market app. I just started playing with the front end and i believe I'm done with the back end part. https://the-stock-market-elgris12.c9users.io/
Anyone up for helping me out with the Personal Portfolio?
Is there any way to keep Gitter from doing the flyouts everytime someone posts a message in a diff. room?
How can I solve this? From what I read I need to implement an API header but I have no idea how to do that
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch&search=zyz&limit=1&namespace=0&format=jsonp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
"XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch&search=zyz&limit=1&namespace=0&format=jsonp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access." Easier to read
@Fuzyon I think you need to pipe it through
https://crossorigin.me
I honestly don't know why, but that's how I did it
where searchQuery is the value the user enters into the search box
@dhcodes you can change the notifications settings to only notify you of messages mentioning you, but you have to do it for every single room you're in
@otmeek ah, I've done it for some rooms, but not all apparently. Okay I'll do that. Thanks @otmeek
dhcodes sends brownie points to @otmeek and @otmeek :sparkles: :thumbsup: :sparkles:
:star: 349 | @otmeek | http://www.freecodecamp.com/otmeek
:star: 349 | @otmeek | http://www.freecodecamp.com/otmeek
@dhcodes that seems to work. Any explanation as to why it does? Haha, this is pretty new to me. Thanks!
fuzyon sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 365 | @dhcodes | http://www.freecodecamp.com/dhcodes
@Fuzyon here you go. https://www.mediawiki.org/wiki/API:Cross-site_requests
it's only for external sites doing calls I believe
idk the ins and outs so someone with more exp would have to explain
I don't get any response on $.getJSON for my weather app. Could someone have a look please?
Any thoughts?
let me search more
it returns undefined
so for example
so the way you wrote the code is fine, the problem seems to be that it doesn't register the text you input
I've been trying almost all day today to make it work
have you thought about storing the values of the input into an array? then maybe you can select the city from there
var city = $('#city-input').val();
And it makes sense...
maybe the more experienced folks out there can help you, admins and mods spend a lot of time there ;P
@Fuzyon thanks
mbrad26 sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 180 | @fuzyon | http://www.freecodecamp.com/fuzyon
you needed to remove weather from your url
wait
that's not it
what did I do to get it to work...?
I did add http:// to the api you were calling
idk. The link I posted works in the console.
Enjoy
hey is there anyone who can maybe help me with the weather app
well im trying to use this open weather api but for some reason I cant get it to console log the response
here iw ill show you what i have
$.get("api.openweathermap.org/data/2.5/weather?lat=35&lon=139&APPID=c9d28aa45581e0938c09929d53c57a58";, function(response) {
console.log(response);
})
console.log(response);
})
$.get("api.openweathermap.org/data/2.5/weather?lat=35&lon=139&APPID=c9d28aa45581e0938c09929d53c57a58", function(response) {
console.log(response);
})
sorry there it is formatted
more info here btw: http://api.jquery.com/jquery.getjson/
oh!!! haha okay thank you @Fuzyon i will try that!
bananahavana sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 181 | @fuzyon | http://www.freecodecamp.com/fuzyon
yeah, it's pretty confusing at first but after a while it gets easy, don't worry :P
mbrad26 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 366 | @dhcodes | http://www.freecodecamp.com/dhcodes
$.getJSON("api.openweathermap.org/data/2.5/weather?lat=35&lon=139&APPID=c9d28aa45581e0938c09929d53c57a58", function(response) {
console.log(response);
})
now I get a response from the server but it doesn't seems to find any city
nothing coming through to the console though. any ideas? :) :)
bananahavana sends brownie points to @mbrad26 :sparkles: :thumbsup: :sparkles:
:star: 279 | @mbrad26 | http://www.freecodecamp.com/mbrad26
thanks for both of your help @Fuzyon and @mbrad26 you are the best!
bananahavana sends brownie points to @fuzyon and @mbrad26 :sparkles: :thumbsup: :sparkles:
:warning: bananahavana already gave fuzyon points
mbrad26 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: mbrad26 already gave dhcodes points
Hey, can anyone help me insert into HTML using JSON?
var jsonObject = [
{
"number": 1,
}
];
var obj = JSON.parse(jsonObject);
function generator(){
//var randomNumber = Math.floor((Math.random() * 10) + 1);
document.getElementById("inject").innerHTML = obj[0];
};
I have a problem in the "show current weather" challenge. Since the navigator.geolocation.getCurrentPosition() is asynchronous, my code after that call tries to query the api without the coordinates and fails. How can I tell it to wait until the navigator.geolocation.getCurrentPosition() has actually returned the coordinates?
I'm having a tough time with the tweet button on my quote page. It also returns a random quote, but not the random quote. Is there a way to take it right off my page using the class or something? http://codepen.io/diver2026/pen/vLRjNM
or i mean send the link to your code pen @BananaThief
risky
@Diver2026 so instead of calling the function in your Tweet button function you can try this
document.getElementById("quoteHere").textContent
Hi I have a question about possibly bypassing the portfolio project requirement in lieu of something I already have? is that a possibility? Who can I contact about that?
I received some nice guidance before here about making a responsive design for the portfolio assignment. I think I have gotten everything in order but one small misalignment in the "Networks" header and content in the width range of 1280-770. I have tried removing margin and padding on many of the elements in that section to no avail. Any help would be appreciated.
@Diver2026
$("#tweet").click(function(){
window.open("http://twitter.com/intent/tweet?text=" + document.getElementById("quoteHere").textContent , target="_blank", "width=800, height=600");
});diver2026 sends brownie points to @sludge256 :sparkles: :thumbsup: :sparkles:
:star: 1565 | @sludge256 | http://www.freecodecamp.com/sludge256
@sludge256 Well, yes and no. I already have a website that I built but it isn't an infinite scroll that "User Story: I can access all of the portfolio webpage's content just by scrolling." requires. Which is why I am wondering if I could still submit it for "credit"
Unless you're saying your page has no scrolling.
The menu bar combines all of the buttons into a single button whenever the window is smaller. What do I need to look up to learn how to do this?
http://codepen.io/FreeCodeCamp/full/VemmoX/
http://codepen.io/FreeCodeCamp/full/VemmoX/
@reacorbett that is bootstrap navbar collapse. Docs are here http://getbootstrap.com/components/#navbar
reacorbett sends brownie points to @feitla :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for feitla
hmmm so I had it working and then i changed something and now its not working
var latitude, longitude, weatherObject;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function displayPosition(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=c9d28aa45581e0938c09929d53c57a58", function(response) {
weatherObject = JSON.parse('response');
console.log(weatherObject);
}
)}
)};
any ideas on why this isnt console logging the weather info? it was before but i changed something and i cant remember what i did
@feitla Just looked at your portfolio :+1:
Shouldn't be too hard to make a modified/simplified version of it that fulfills the user stories just to be safe. Alternatively, you could email the team (there's a link at the bottom of your profile page) in regards to this issue be sure to include your proposed submission link.
Shouldn't be too hard to make a modified/simplified version of it that fulfills the user stories just to be safe. Alternatively, you could email the team (there's a link at the bottom of your profile page) in regards to this issue be sure to include your proposed submission link.
Keep in mind they get a lot of emails so a response may take some time.
reacorbett sends brownie points to @feitla :sparkles: :thumbsup: :sparkles:
:star: 30 | @feitla | http://www.freecodecamp.com/feitla
@BananaHavana forget all that json.parse stuff… just
console.log(response);
bananahavana sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
@BananaHavana also look at the browser tools console as it shows errors and far more info about the page.
so if i just console log the response then i am still going to have a javascript object right?
or do i need to parse it to turn it nto a javascript object
yes it’s just showing you what’s in the object. you’ll need to “talk to” parts of that now. like
var placeName = response.name
my alert (for debug) after $.getJSON(url, function(json) { won't run? http://codepen.io/valmassoi/pen/LGoMyd/
I'm using the same method i did for weather api one
@valmassoi ok firstly you have the url definded twice .. probably for testing.. so comment out the link to cats at freecodecamp. Then this API requires a callback, so add in
&callback=? to your url