I think you can pop that in the education section
or if you've earned a certificate already, put that under achievements section
@caleb272 Right. So, I'm working on to the non-profit projects
that's some 500 hours away though :|
ya i just finished the tribute thing so its so far away for me too
We're all gonna make it :D
can someone help me figure out why when I press clear it dosn't clear the text
??
@code7777 post the snippet^
check out the javascript
you don't have a Screen. You do have a screen
??
$("#Screen").text(" ");
@code7777 syntax error
@code7777 it's .click
@code7777 not onclick
nvm, follow his instruction^ haha. You do have "Screen"
@code7777 something like
$("#C").click(function(){clearScreen();});
hey guys! is parseInt() the best way of converting a string to number? skeptical of using it cos of its limitations
cant you just cast it or is that not in JS
@wearenotgroot this is what i have
```$( document ).ready(function() {
console.log( "ready!" );
$("C").click(function(){clearScreen();});
function clearScreen(){
$("#screen").text(" ");
}
});
```
$( document ).ready(function() {
console.log( "ready!" );
$("C").click(function(){clearScreen();});
function clearScreen(){
$("#screen").text(" ");
}
});
good observations guys im still having trouble tho
@code7777 put a # on C
@code7777 C is an id remember
ohhhhh
@Lumexralph have you tried using Number()<---------------------wrapper
sweeeeeettttt i got that part to work thanks man!!!! @wearenotgroot
@code7777 YW
not yet @wearenotgroot
@Lumexralph ---------->https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
was trying to be sure, would look that up and tell you if am cool with that method
thanks man @wearenotgroot
lumexralph sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
@Lumexralph what are you trying to do anyways?
working on pomodoro timer
@Lumexralph oh ok
@Lumexralph formatting?
want to get a value from dom which is a string, then want to convert it to a number to be able to perform some operations on it
@Lumexralph yeah use Number()
okay, thanks again
@Lumexralph however the js interpreter will most likely convert that string into number if it can
@Lumexralph if it cannot it will give you NaN
will look it up
@Lumexralph so if you have like '1' * 2<--------------------it will try to do the operation even if 1 is a string
yeah, i understand that
alrighty then, GL
on what grounds will Number() return NaN value?
how do you modify a span element in jquery/javascript??
@dickfink Thanks for the spots, could you elaborate more on this?
vizflux sends brownie points to @dickfink :sparkles: :thumbsup: :sparkles:
:star: 171 | @dickfink | http://www.freecodecamp.com/dickfink
Is there anyone who has worked on the calculator that can help me complete my project? I have the html, css and js calculation between two numbers finished but I need help in calculating more than two numbers
This message was deleted
@vizFlux
function countdownCtrl() {
if (seconds === 0) {
minutes--;
seconds = 59;
} else {
seconds--;
}
// Executing timeCount();
(function timeCount() {
if (minutes === 0 && seconds === 0) {
clearInterval(interval);
if (break_length) {
breakInterval = setInterval(breakcountCtrl, 1000);
}
} else {
$('#total').html(minutes + ":" + (seconds < 10 ? "0" : "") + String(seconds));
}
})();
}If seconds === 0 when you call countdownCtrl(), then it will set seconds to 59. This means that you never fulfil the “if (muntes === 0 && seconds == 0)” statement in the timecount() function….
This message was deleted
I'm not sure why the "News" link on the bottom nav moves to the left and out of view when I resize my browser window. Can someone help please? - http://codepen.io/ExhibitArts/pen/obOaax?editors=1100
I'm working on the "build a personal portfolio webpage" challenge, and i just need some guidance. Where would I find information about having multiple background images so that it looks like it does on the example website... you scroll and you see the different pictures. Im not having much luck with google.
Someone willing to answer a quick question about for loops?
@erbastian DIVs can have background images
thanks @mutantspore
erbastian sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1143 | @mutantspore | http://www.freecodecamp.com/mutantspore
Anyone got any idea why my 'Favourite' tab on the Twitch API project is displaying a seemingly random number (between 1 and 4) of panels? Everything is contained in a success function of the getJSON call and I can't figure out why it's not properly iterating through the favChannels array. http://codepen.io/Lewis65/full/yeqdLE/
@Lewis65 have your variable on the top
@LarrySimiyu what’s up — i can try to hep
@erbastian I also think the example website uses jQuery to change the static backgrounds.
@Lewis65 and remember /streams only returns channels that are streaming
@Lewis65 if you want to get info about a channel even thought they are not streaming you need to use /channel, and need to do it one by one
wot wot there are FCC stickers now, 2x5 bucks
but who ships 'em?
@dickfink Okay so Im working on a c++ program. we ask the user to enter the lowest value and the highest value, so lets say highest 43 lowest 23, One thing the teacher does it increment by 5, which I know how to do.. but the teacher also manages to start the chart from 25 and end at 45. So basically he is able to make the chart divisible by 5. I dont know how I would manage to do that.
Larry, i dont know any c++, but maybe this stack exchange link can help you out: http://stackoverflow.com/questions/3407012/c-rounding-up-to-the-nearest-multiple-of-a-number
@dickfink forgot to mention your answer didnt have to be in c++ was just looking to be led in the right direction
ah
@LarrySimiyu well i would create a roundUp method and roundDown method, check the last digit of the input and call the appropriate function
int RoundUp(int toRound)
{
return (10 - toRound % 10) + toRound;
}
int RoundDown(int toRound)
{
return toRound - toRound % 10;
}
I accidentally submitted my tribute link instead of my portfolio link. Resubmitting doesn't seem to work. '
hi everyone! im reaching out to anyone who has finished the quote generator zipline... i cant seem to get the post as a tweet feature working....
heres my codePen : http://codepen.io/interstellaridea/pen/EPMvQO?editors=1011
not sure if im targeting the quote right.... its also been tricky on finding documentation on how to implement Twitter intent
@interstellaridea - I used https://dev.twitter.com/web/tweet-button/web-intent
can someone look at a jsfiddle of mine?
trying to get products to display side by side using boostrap
Hi everyone! I'm a newbie on front-end-development. Is there any css classes reference of bootstrap? Like a list. Tks!
@dickfink Thank you very much on the pointer, it seems I need to rethink this flow
vizflux sends brownie points to @dickfink :sparkles: :thumbsup: :sparkles:
:star: 175 | @dickfink | http://www.freecodecamp.com/dickfink
@interstellaridea you are targeting the wrong thing
@interstellaridea should be tweet id not text
hm
how would i target that?
(looking through twitters documentation for something)
@interstellaridea oh sorry thought i saw text :smile:
oh right yea in my sendTweet function?
so targeting the $("#tweet") should grab it... but the pop up do not seen to populate anything...
look like it might be the call to encodeURIComponent
@interstellaridea here
$(document).ready(function() {
/* resources i leaned from:
http://www.sitepoint.com/use-jquerys-ajax-function/
*/
//global Variables
$("#generate").on('click', getQuote);
$("#tweet").on('click',sendTweet);
var quote = "";
var author = "";
function getQuote(){
$.ajax({
//url to andrux quotes
url: "https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous?callback?",
//object sending a key through the headers
headers: {
'X-Mashape-Key': 'SJFL2vk9l3msh8V2MTNx5OJOfY8Cp169i0Yjsn2XteSoDyqWH9'
},
success: function(data) {
//grab quote obj
var quoteObj = JSON.parse(data);
//grab quote
quote = quoteObj.quote;
//grab author
author = quoteObj.author;
//Target text for quote
$('#text').html(quote);
//Target author for quote author and animate
$("#author").animate({
opacity: 0
}, 500,
function() {
$(this).animate({
opacity: 1
}, 500);
$('#author').html(author);
});
}//end of success object
});//end of ajax function
}//end getQuote
function sendTweet() {
//tweet vars
var maxTweet = 140;
var truncated = '';
var hash = "#quote";
var tweetLength = quote.length + author.length + hash.length;
//Truncate tweet if quote if over 140 chars
if(tweetLength > maxTweet){
truncated = quote.slice(0, maxTweet - author.length - 6 - hashtag);
$("#tweet").attr('href', "https://twitter.com/intent/tweet?text=" + truncated + " " + author + hash);
} else {
console.log('ok ' + quote);
$("#tweet").attr('href', "https://twitter.com/intent/tweet?text=" + quote + " " + author + hash);
}
}//end of sendTweet
});
the problem was the scope of the varible
@interstellaridea you created function parameter with the same name as quote and author
@interstellaridea so inside the sendTweet function it only look at that parameters but you didnt send any parameters to it
@interstellaridea so it only saw blank
@interstellaridea the solution is to just remove those parameters in the sendTweet function because you already have the variables you need
so sendTweet wasnt seeing the quote and author that the getQuote function created
@interstellaridea yep because of it's on parameter(they have the same name)
ha! dang good call!
thanks!!
i see that you also added everything in the $(document).ready too
@interstellaridea yeah that too
@interstellaridea just too avoid having globals
got it. just wasnt necessary to have?
@interstellaridea yep you can drop it but remember scope of the function will be different
cool that does help thanks
@interstellaridea i guess you can do this
/* resources i leaned from:
http://www.sitepoint.com/use-jquerys-ajax-function/
*/
//global Variables
var quote = "";
var author = "";
function getQuote(){
$.ajax({
//url to andrux quotes
url: "https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous?callback?",
//object sending a key through the headers
headers: {
'X-Mashape-Key': 'SJFL2vk9l3msh8V2MTNx5OJOfY8Cp169i0Yjsn2XteSoDyqWH9'
},
success: function(data) {
//grab quote obj
var quoteObj = JSON.parse(data);
//grab quote
quote = quoteObj.quote;
//grab author
author = quoteObj.author;
//Target text for quote
$('#text').html(quote);
//Target author for quote author and animate
$("#author").animate({
opacity: 0
}, 500,
function() {
$(this).animate({
opacity: 1
}, 500);
$('#author').html(author);
});
}//end of success object
});//end of ajax function
}//end getQuote
function sendTweet() {
//tweet vars
var maxTweet = 140;
var truncated = '';
var hash = "#quote";
var tweetLength = quote.length + author.length + hash.length;
//Truncate tweet if quote if over 140 chars
if(tweetLength > maxTweet){
truncated = quote.slice(0, maxTweet - author.length - 6 - hashtag);
$("#tweet").attr('href', "https://twitter.com/intent/tweet?text=" + encodeURIComponent(truncated + " " + author + hash));
} else {
$("#tweet").attr('href', "https://twitter.com/intent/tweet?text=" + encodeURIComponent(quote + " " + author + hash));
}
}//end of sendTweet
$(document).ready(function() {
$("#generate").on('click', getQuote);
//$("#tweet").on('click', sendTweet);
//test
$("#tweet").on('click', function() {
$("#tweet").attr('href', "https://twitter.com/intent/tweet?text=" + encodeURIComponent(quote));
});
});
@interstellaridea just remove the parameters
@interstellaridea YW
yea thats more the look i was going for i guess.
just like clean .on('click', ) calls
@interstellaridea just replace that anonymous function with sendTweet
@interstellaridea it should be squecky clean :smile:
yea i took $("#tweet").on('click', sendTweet); back out from being commented
got my hashtag in ;0
$("#tweet").on('click', sendTweet);
:+1:
oh yay... the weather app...
lol
Working on the weather app
http://codepen.io/mca62511/pen/qbwQOa
The URL I generate, when used in the browser, shows the JSON information that I need.
However I can't get any of the information to show through console.log, so I think something about my &.getJSON must be messed up
Ignore what it actually displays for now, it is just a placeholder. I'm looking at the JavaScript/console
$("#unit").click(function(){
if(unit==="celcius"){
$("#temperature").html(fahrenheit+"<button id='unit'>°F</button>");
unit="fahrenheit";
}
else{
$("#temperature").html(fahrenheit+"<button id='unit'>°C</button>");
unit="celcius";
}
});
@mca62511 Yea, getJSON doesn't work for this because of the API, it needs data to be sent along with the request to let either the browser or wikipedia to know that the request is geniune. I ended up using $.ajax
@mca62511 never use Math.round or Math.floor on the lat and lon
@mca62511 otherwise it will be inaccurate
@cragsify $.getJSON does work
@Swoozeki ok, can you share your getJSON code, i struggled with it for hours
@mca62511
var apiKey = "7271d3292aac8f43062a11e66a3aa1b0";
var baseOpenWeatherUrl = "http://api.openweathermap.org/data/2.5/weather";
var apiOpenWeatherUrl = "";
$("document").ready(function() {
// construct url based on location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
apiOpenWeatherUrl = baseOpenWeatherUrl + "?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + apiKey;
console.log(apiOpenWeatherUrl)
$.getJSON(apiOpenWeatherUrl, function(json) {
console.log(json);
});
});
}
});
@mca62511 ther reason it didnt work was remember the the geolocate is async
@mca62511 meaning your programming will not wait for it to finish before executing the code below it
@wearenotgroot do you just do math to convert from kelvin?
@dposse set the units to imperial or metric on the url
@dposse &units=metric or imperial
right, i just dont see it in your code
@dposse You can also just convert, I did.
mine right now is grab imperial from api and convert to c manually
@dposse mine is set to metric then just converted to imperial
@mca62511 the issue is simply that the geolocation and getjson are asynchronous… they are processes that go off on their own and you don’t know when they will be back. So put the get json function inside the geolocation function OR wrap the getjson in a function and call it from within the geolocate … any use of the data returned will also need to be inside the getjson function or called from within it.
@Swoozeki sorry bout the wrong mentioned
@mca62511 read my response ^
Oh, no worries. I kept on reading into your response thinking why it was dedicated to me
@Swoozeki used to pressing tab to cycle through things :smile:
@wearenotgroot Oh, I see. So by putting the .getJSON insie the other function it runs after it is done. Since I had it outside of it, it ran immediately without waiting for the navigator.geolocation.getCurrentPosition to finish running ... right?
@mca62511 yep
@mutantspore Okay, so that makes sense now.
@mca62511 You can also use promises
good catch @mca62511
Okay, I think 'm good now. Who to thank. Thank you @cragsify @wearenotgroot @mutantspore and @dposse
mca62511 sends brownie points to @cragsify and @wearenotgroot and @mutantspore and @dposse :sparkles: :thumbsup: :sparkles:
:star: 1145 | @mutantspore | http://www.freecodecamp.com/mutantspore
:star: 284 | @dposse | http://www.freecodecamp.com/dposse
:star: 885 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
:star: 323 | @cragsify | http://www.freecodecamp.com/cragsify
Let me know if I forgot anyone
@mca62511 do you have time for yet another question?
Oh, I think I was accidentally helpful. I wasn't answering a question, I was trying to figure out my own problem :P
but I'd be happy to answer if I know how... though others here are definitely more qualified
hi, I need a help, not relating to freecode camp project, but it needs javascript,html,css.
I have built a google map(with search function using google api), which will have a button,on clicking the button it will show me a list of facebook users based on the coordinate of the map.
How do I do that? please
How do I do that? please
if I have a
$(".textDiv").html("<button id="unit">text</button>");How can I retrieve the text inside of button element with "unit" id?
$(".textDiv").html("<button id='unit'>text</button>");
Hi guys I need a satisfactory answer for a question that frequently ppl ask me
I tried, $("#unit").html which doesn't work
@Swoozeki $("#unit").val()
Why we need doctype ?
@Krter So the browser understand what it is reading.
@cragsify Nope, returns undefined...
@Krter Browser will make assumption on what it is reading if there is no doctype, and therefore may get it wrong.
@cragsify I said this answer then they without that will it work ? If so then why we need it ? It makes me annoying
@Krter If you don't have it then 90% of time it will still work, but for unusual or old browsers, then it may break. Get the people that are asking you to try this on really old or really niche browsers.
@cragsify @Swoozeki
val() is typically for inputs, selects, etc. i don't think it's going to work in this case. @Swoozeki try $("#unit").text() instead
@cragsify I have to say this to my interviewing stupiderz :+1:
@cragsify thanks for the help dude
krter sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 324 | @cragsify | http://www.freecodecamp.com/cragsify
that's a great attitude to call people who interview you idiots. keep it up
All I have a question regarding the Wikipedia viewer project
@h4r1m4u It worked! Mmmuah! Kisses and hugs
it’s about the right HTTP request I need to use for the MediaWiki API
@Swoozeki my pleasure!
if anyone is willing/able to help I would appreciate it!
@synflyn28 I can tell you what I did, I struggled to get $.get to work so ended up using $.ajax
@h4r1m4u @Swoozeki next time gonna give them some cookies and say EAT PRAY CODE but don't be in panel
@cragsify sure that would help, I actually had no problem with the API part (the JSONP callback is the trick for $getJSON(), FCC should’ve covered that in the previous lesson)
@synflyn28 Are you asking about the query type?
Hi ppl any jeet users here ?
@cragsify nope I actually know it’s search, but it’s what the search returns
I stuck with a problem in it
@cragsify specifically in the “snippet” attribute in the return string
@synflyn28 You can use the link from FCC to figure out what your json data looks like: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm
@cragsify Oh I’ve already been there and the JSON structure isn’t the issue, but what’s actually stored in the snippet part
@synflyn28 Hmm, I'm not sure what you mean?
@cragsify here let me get a screen grab and I’ll show you
@synflyn28 what exactly is your question? and is there any code that we could have a look at and help you with?
@h4r1m4u it’s hard to describe without seeing what I’m getting
Here’s what I have the sentance summaries I’m getting in my response JSON are either all incomplete or are missing part way
I’m getting a valid response from Wikipedia’s API, but the actual sentances grabbed from the pages from it are either incomplete or add parts that shouldn’t be there
it’s a data content problem, and I think there must be a way to change this
I don't seem to have this problem.
Here’s an example request that I use: https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=Pink%20Floyd&format=json&callback=?
@synflyn28 I use a different request to you, I use and opensearch.
Sorry for the roundabout explanation it’s just a yucky data problem
@cragsify thanks! I’ll check it out
synflyn28 sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 325 | @cragsify | http://www.freecodecamp.com/cragsify
Hi guys, how do I capture a failed $.getJSON event,
@cragsify thanks! That data structure looks like the one I’m looking for! Your request is correct
synflyn28 sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:warning: synflyn28 already gave cragsify points
@cragsify and for $.getJSON you have to switch over to $.AJAX in order to bind a function for failure
@cragsify $.getJSON is just a simplified form of $.AJAX
@synflyn28 i checked the request you're making using the wiki api sandbox and i dont' think there's a way to increase the length of the snippet
you'll need to adjust the request itself and use different parameters
@h4r1m4u thanks for heads up, and I found the right request from @cragsify
synflyn28 sends brownie points to @h4r1m4u and @cragsify :sparkles: :thumbsup: :sparkles:
:warning: synflyn28 already gave cragsify points
:star: 1428 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@synflyn28 cool. great. if you want mine for comparison, here you go:
var baseApiUrl = 'https://en.wikipedia.org/w/api.php?callback=?',
getSearchTopicParams = {
action: 'query',
format: 'json',
formatversion: 2,
prop: 'pageimages|extracts|info', // return page images, extracts
pilimit: 10, // how many page images to return
exlimit: 10, // how many extracts to return
exchars: 500, // extract is 500 characters long
explaintext: "", // extract is plain text, not HTML
exintro: "", // return only content before the first section. has to be present otherwise wikipedia complains the extract are too long
inprop: 'url', // return page url
generator: 'search',
gsrnamespace: 0, // Seach '(Main)'
gsrlimit: 10, // return 10 pages,
gsrsearch: '', // the actual query to search, will be set when the function is called
}
@h4r1m4u yeah the documentation for mediawiki is pretty hairy, it was actually harder for me to find the right request than to write the application itself
@h4r1m4u thanks again!
synflyn28 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: synflyn28 already gave h4r1m4u points
@synflyn28 i agree. i struggled with the same problem. i did find the sandbox very helpful as it shows you the different options and you can immediately test what the request will return: https://en.wikipedia.org/wiki/Special%3aApiSandbox
@h4r1m4u I like that it included the sandbox and I did use it, though I prefer things like cURL because it doesn’t abstract certain things especially JSONP
@h4r1m4u I’m familiar with HTML request variables because I’ve worked with CGI before, but this API specifically had a lot of language and concepts specific to itself which made it harder
@synflyn28 i'm not sure i fully understand that. JSONP is just a way to get around the cross-domain request issue. the sandbox let's you test out the different parameters you can use when retrieving the data. seems like two different issues to me
one is a general technical problem, the other is just related to how the wiki API works specifically
@h4r1m4u Oh I know, now I’m just venting frustrations sorry about that!
@synflyn28 ah, ok, hahaha. yeah, the wiki api had me pulling my hair out too
@h4r1m4u oh definitely. Thanks again!
synflyn28 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: synflyn28 already gave h4r1m4u points
@synflyn28 no wukkas!
@h4r1m4u a touch of Australian there?
@synflyn28 might want to add a check for property on data/result returned before displaying them or else you will get undefined
@mutantspore yeah, i've got a bunch of ozzie friends, picked it up from them :)
:)
@synflyn28 data.hasOwnProperty('page') or something
@wearenotgroot sure thing! I trust MediaWiki is pretty stable but you can’t be too careful about funky data
@synflyn28 oh try data.hasOwnProperty('query')<--------first pages comes after
@wearenotgroot sure! That’s actually a good idea without having to tunnel through much cruft
@wearenotgroot though the new response that I’m getting is based on arrays, which is quirkier but nothing a few length checks won’t catch
@synflyn28 oh well test the length then
@wearenotgroot ha ha sure :)
hi guys
@wearenotgroot I am doing it one by one, I think. I'm looping through the array of channels, calling the getJSON method for each one and appending them to the content div within the success function. But I will go through my code once again and check that this is the case, thanks.
lewis65 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 886 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
I have a question on the wikipedia app. I'm returning:
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=sle&utf8=true. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
any suggestions?
@brettfelts add 'callback=?'
MIME type not excutable
also, because it's $.ajax as opposed to $.getJSON, the callback is different
ahh right - why not use getJSON?
I actually was originally, but on the docs for the wikipedia api, it suggested adding headers as an argument on the request in order to fix my problem. That's only an option on $.ajax, not on getJSON
I'm actually not sure why
hmm ok
I could be wrong, I just can't figure it out
To be honest, I actually moved on from the Wikipedia project before I got it working. I was having similar problems and the docs are pretty useless, or I'm just dumb. But I didn't feel like it was useful struggling, so I just moved on
Not really a solution, so maybe someone else can weigh in
Anyone willing to work on a startup project with me? I need a few backend developers as well as a few front end programmers. Anyone who helps on the project will be compensated through the earnings from the website.
I understand the sentiment actually
@ExhibitArts I'd be interested, but understand i'm still working through this
@brettfelts What languages do you know and how familiar are you with them?
HTML, CSS, JavaScript, jQuery. I'm ok with the latter two, and pretty decent with the former two.
you can check out my codepen if you like.
I've done a tiny bit of python also, but not enough to be helpful
What are the plans for the site?
@brettfelts adjust your ajax call to this:
var wikiSearch = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchTerm +"&callback=?&format=json&utf8=";
$.ajax({
url: wikiSearch,
dataType: 'jsonp',
success: function(data){
console.log(data);
// for (var j = 0; j < json[search].length; j++) {
// $('window').append('<p>'+json[i]+'</p><br>');
// }
}
notice a) format=json is added into the URL, b) the type of the ajax call is remove (it's GET by default; you use GET for getting data from a server, POST to post data to), c) the done parameter is changed to success
check the console for what the returned object looks like and take it from there
That's what I thought. I was thrown by copying the mediawiki's docs I guess
Thanks @Lewis65 and thanks @h4r1m4u
brettfelts sends brownie points to @lewis65 and @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 140 | @lewis65 | http://www.freecodecamp.com/lewis65
:star: 1429 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
yw
@brettfelts Did you just get started with the Wikipedia Viewer by reading the documentation on the links?
I am trying to get started and am very lost
@clarkarnold I did.
Ok cool thanks. Seems confusing
It was confusing to say the least.
Hah yeah I might try again tomorrow
@brettfelts Are you in to work on the project with us?
I would suggest structuring your call based on the jQuery $.getJSON or $.ajax calls
@ExhibitArts Yes.
@brettfelts OK cool thank you
clarkarnold sends brownie points to @brettfelts :sparkles: :thumbsup: :sparkles:
:star: 361 | @brettfelts | http://www.freecodecamp.com/brettfelts
@clarkarnold the sandbox is extremely helpful as it let's you test out the various parameters and options you can use when making the API calls: https://en.wikipedia.org/wiki/Special%3aApiSandbox
hey. I was trying to further understand what the bootstrap class .form-control means. On this page http://v4-alpha.getbootstrap.com/components/forms/#form-controls it says additional documentation for .form-control is available, but I can't find anything. I'd appreciate any help finding documentation or advice for how to interpret the class in this situation
@ExhibitArts Is it the site you have listed on under your profile picture?
@clarkarnold Glad I could help. @h4r1m4u helped me through, to be fair
@clarkarnold Glad I could help. @h4r1m4u helped me through, to be fair
@brettfelts No. There is a description of it in the chat I added you to.
@ExhibitArts Cool. I'll take a look
@h4r1m4u I took a look at that but honestly wasn't sure what I was doing with it
Hi all, I'd be really grateful if anyone who's got a minute could click through onto my Weather App to test that they are getting a location, temperature and background image. Happy to do any testing in return. http://codepen.io/lsrus/full/MKRZLO/
@lsrus right location and information. Is the flask meant to indicate science type answer (Kelvin)?? lol
@mutantspore - yes, I relate Kelvin directly to being bored in chemistry! Did you get a weather related background photo too? Thanks for looking
lsrus sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1148 | @mutantspore | http://www.freecodecamp.com/mutantspore
@lsrus looks good
@lsrus perhaps the cursor should change to a finger to show that teh temp is clickable
thanks @wearenotgroot
lsrus sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 887 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@lsrus btw do you own all the images? if not you need to site the source :smile: just for future reference
yes it’s correct .. though it’s the wrong time of day but You haven’t gone that far. The icon number from OWM is a good source of that info rather than disecting the description
@lsrus a bit of miss allignment when you make the screen narrow, the text box goes up above the picture..
Hi ppl What is the use of meta tag there are different content inside that so what that exactly convay to the browser
@lsrus if you look at this page http://openweathermap.org/weather-conditions you can see how the icon code could be used to index pictures
@Krter Definition and Usage
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
@wearenotgroot the pictures are on a CCO license from Pexen, which if I've understood it properly, means they don't require attribution (though I agree it's good ettiquete so will modify to add some) https://www.pexels.com/photo-license/
So it take major role in search engine also @wearenotgroot ?..
@lsrus :+1:
@Krter any data you not intend for user can be place on the tag(data that doesnt need to be secure)
@mutantspore @wearenotgroot - thanks for all the feedback, I'm going to make the changes now
lsrus sends brownie points to @mutantspore and @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: lsrus already gave mutantspore points
:warning: lsrus already gave wearenotgroot points
Tx a lot @wearenotgroot :+1:
krter sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 888 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@Krter np
@lsrus YW
Hi guys! I am stuck with trying to get the getElementIdBy(".text").innerHTML to work with my button. It doesn't seem to respond with the click event. My code: http://codepen.io/Valeesi/pen/ZQZOQE I am thankful for any help that I could get.
@Valeesi
document.getElementById("text").innerHTML = "Test Quote";
@Valeesi yeah let me paste my comments from the /Help room here:
@Valeesi you've got
getElementIdBy(".text")there's a few things wrong here. it needs to be preceeded bydocument, it'sgetElementByIdnotgetElementIdByand it's"text"not".text"
@Valeesi sodocument.getElementById("idGoesHere")
@Valeesi it's a little simpler with jQuery.$("#idGoesHere").text(variableGoesHere)
@qualitymanifest I read it first in the Help room. Been trying to fix it now. Thank you so much! Now it works with the document.xx but still working on trying to get it work with the jQuery solution.
valeesi sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star: 973 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
@Valeesi you'll need to add jquery in, by clicking the gear button next to JS and adding it in the "add external javascript" section
@qualitymanifest Why does this function run without me even going through the "click event"? How do you suggest to put the jQuery line into the code?
function randomQuote() {
$('#text').text("Test Quote 123")
}
function randomQuote() {
$('#text').text("Test Quote 123")
}
@Valeesi that runs regardless... you'll want to put that into a click function
@Valeesi https://api.jquery.com/click/
basically you will replace the outer
randomQuote function with a click function. and you'll have your random number variable inside your click function, so that it changes each time #text is clicked
@qualitymanifest Thank you again! I feel like there is quite a knowledge gap when I started to tackle the intermediate projects after the JS part. Haven't learned enough about jQuery or ajax. I would need to study more about them now.
valeesi sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:warning: valeesi already gave qualitymanifest points
hello need some quick help with something. making a list that has ten lines, but I need the user input to be rounded up and divisible by 5.. so say they enter 43 i need the list to start at 45.. does anyone have any idea of how I can manage this.
@LarrySimiyu , another way (assuming you’re always rounding up) — while(input % 5 !== 0){input += 1 } — once input % 5 === 0, make your list….
This message was deleted
This message was deleted
This may seem an odd place for this, but I'm looking for front end developer to help out with a news site. any takers?
@brettfelts I'd love to help. If it's open-source / for an non-profit, I'll do it for free :)
@brettfelts ill help, I need something to work on for experience
@LarrySimiyu and @pradeepce what kind of experience do you have?
@LarrySimiyu
im trying to make a table to convert gallons to liters, only problem is on the first line on the table that is when my solution works fine, but it keeps printing the same answers for the rest of the table.. so for example 5 = 10; 6 = 10; 7 = 10;
how can I solve it
im trying to make a table to convert gallons to liters, only problem is on the first line on the table that is when my solution works fine, but it keeps printing the same answers for the rest of the table.. so for example 5 = 10; 6 = 10; 7 = 10;
how can I solve it
this is for c++
@LarrySimiyu this is a front end help room, I dont think there is many people who are into c++
@brettfelts I have the im a fast learner and just want some experience while i get to learn lol
@kirbyedy I am aware but there are similarities, I can get the javascript answer and just tweek it to work in c++ not difficult
still... this is front end mate :)
try the javascript room then
not a big deal, some people hop around the chatrooms when asking questions, but already am thanks
@LarrySimiyu -- I think if you go on hackernews you might be able to find some IRC resources for c++ programmers ... might get a bit more help in one of those ... (or just google for c++ chats)
@brettfelts Not much, I'm just re-learning everything on FCC. Take a look - http://codepen.io/pradeepce/full/bEzyQO/
if anyone has a javascript solution to my question please let me know
@pradeepce Cool designs you got there.
@coderNoob Thanks Ankit :) I'm learning the ropes
pradeepce sends brownie points to @codernoob :sparkles: :thumbsup: :sparkles:
:star: 335 | @codernoob | http://www.freecodecamp.com/codernoob
@pradeepce beautiful work! Where did you get the face image from?
@dshgna Thanks :) I used this for the cartoon image - http://cartoonify.de/
pradeepce sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 149 | @dshgna | http://www.freecodecamp.com/dshgna
@pradeepce cool thanks! I'm going to try it out
dshgna sends brownie points to @pradeepce :sparkles: :thumbsup: :sparkles:
:star: 346 | @pradeepce | http://www.freecodecamp.com/pradeepce
@dshgna Glad :)
hello everyone
Hey guys,
I need help with the wikipedia API.
I generate a working url (checked in browser) but it doesn't work with getJSON :
$("#search").click(function searchWiki() {
var keyword = $("#keyword").val();
var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&limit=10&search=' + keyword;
$.getJSON(wikiUrl, function (data) {
$("#result").html(data);
});
});Any idea ?
Thanks in advance.
@thomas-duval can we see your codepen?
also @thomas-duval -- not sure if it will help or not, but I was reminded earlier today about the JSON/API challenges ... there might be some good stuff in there :)
@thomas-duval I think you are missing that callback
@mca62511 : http://codepen.io/thomasduval/pen/qbwvoj
@bitgrower : Didn't find anything useful
@kirbyedy : If I understand the way callback work, I would need to use this instead :
$("#search").click(function searchWiki() {
var keyword = $("#keyword").val();
var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&callback=data&limit=10&search=' + keyword;
$.getJSON(wikiUrl, function (data) {
$("#result").html(data);
});
});Right ?
I think it should be
callback=?
you're hired, @thomas-duval
@thomas-duval you want this
var wikiUrl = 'http://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&limit=10&search=' + keyword;
And we have 2 winners !
Thanks guys ;)
Thanks guys ;)
The text doesn't feel like centered in this. I used
http://codepen.io/coderNoob/pen/vLmyWN?editors=1100
text-align: center.http://codepen.io/coderNoob/pen/vLmyWN?editors=1100
hi guys
any stylus users here ?..
@coderNoob you can try this way: set line-height of
.col-xs-3
@nnluukhtn Didn't really make any difference
Also, it's google fonts, and I'm not able to change the font size
@coderNoob cause it will append h1 into
pls see at http://codepen.io/anon/pen/bEJZZP?editors=1100
.col-xs-3pls see at http://codepen.io/anon/pen/bEJZZP?editors=1100
@nnluukhtn Thanks
codernoob sends brownie points to @nnluukhtn :sparkles: :thumbsup: :sparkles:
:star: 8 | @nnluukhtn | http://www.freecodecamp.com/nnluukhtn
welcome @coderNoob :)
For sites like http://www.lifeextension.com/ where it has different sections (a type of hub) with alot of editing and adding new things on a daily basis.. what type of technonology is used to build it and then what do users (authors mostly) add things with - without knowing code?
My wikipedia viewer...feedback needed :)
http://codepen.io/dshgna/full/NxmoPj/
http://codepen.io/dshgna/full/NxmoPj/
@Sivilll you can check out builtwith.com
@GreatDanton Do you think it's as simple as Wordpress? Built by someone and edited by non-coding authors?
@dshgna Simple and functional. Good work! :)
Hey guys. I'm working on the first project, the tribute page. And I'm trying to get some of my text in the right place. I know I can just pad it and get it exactly to where I want it but I was also thinking maybe I should look into the bootstrap aspect to make it more dynamic. Is that a good idea?
yes
@dshgna Some suggestions. Add a loading bar for when waiting for results, set a limit for how wide the content is, and try to incorporate more of the api ;)
Okay. I guess I already knew that was the right answer it just made more sense once I had typed it out. Thanks @kirbyedy
dseright sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 496 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
@Sivilll yes it is. Most of the dynamic sites, online stores, etc... have the ability to update content, without diving into code.
@Sivilll @GreatDanton i'm pretty sure lifeextension.com doesn't run on wordpress. it looks to me like it's custom built from scratch, though i might be wrong. that said, there are open source CMSs that can be used to build sites that can be managed by non-coders. building a site as complex as lifeextension in wordpress would be a nightmare, though (if at all possible). @Sivilll i'd dare to venture that almost every site nowadays comes with some sort of a back-end that let's the users add and manage content. if you're looking for an e-commerce solution, for a small site wordpress + woocommerce would do, for large store you'll want a more sophisticated solution such as magento, for example.
he asked if it's made as simple as wordpress
and it's not
if he's talking about lifeextension.com
it's obvious not wordpress, but it's probably easy to add content
@HMAN1911 ah thanks
dshgna sends brownie points to @hman1911 :sparkles: :thumbsup: :sparkles:
:star: 91 | @hman1911 | http://www.freecodecamp.com/hman1911
@HMAN1911 width of content as in amount in results?
@h4r1m4u interesting answer. Scenario: I want to built a site that sells watches and have a social media feed at the bottom where pictures that are tagged with #whateveriwant shows up there, and nothing else (these images are customers tagging the shop they bought a certain watch - the site i am talking about). I know little, but i would assume, building something like this is preferably done with WP, but if i want to go clear of it and choose something else.. what would be my option? The MEAN stack route? Meteor? would do you think @h4r1m4u ? - what i am seeking is mapping out the landscape of where one should look for certain things, so a general answer that would point me in the right direction would be of much appreciation.
@Sivilll how many products will there be in the store? how many product categories? how many orders do you expect each month on average?
@h4r1m4u i want to build it for a portofolio site, so if its looks and functions ok without the details - i am fine. Lets say 4 categories and 25 items in the store
Hey can anyone help me with a bit of a math issue? http://codepen.io/MikeASNT/pen/adxGoL?editors=0010
I would like my "New Game" button to generate "Sudoku" values, I want it to be random enough that it isn't a set amount of games, but also accurate enough to not produce impossible games
@Sivilll in that case i'd go with wordpress and the woocommerce plugin. it's got everything baked in that you'd need for a small store like that. you could develop the same from scratch, but it seems unnecessary to me. it'd be much more work. if you do want to do it yourself from scratch, you can choose any technology/framework you like (node.js/MEAN, rails, django, laravel, ...). the options are limitless
Do any of you know why the nav links and text move to the left and out of the viewport when I resize my browser window? - http://explorecode.byethost8.com/
@h4r1m4u ok thanks for answer - nice picture :) an oter :)
sivilll sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1430 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@Sivilll you're welcome. i've built a number of e-commerce sites and wordpress + woocommerce is a solid choice.
(it's a honey badger, actually :))
(it's a honey badger, actually :))
@h4r1m4u i looked at your repo of practice solutions.. i think i should look into that, since i am at basic level. It should teach me something valueable
@Sivilll be my guest. though you'll learn most by trying to do the FCC waypoints and ziplines on your own. there's nothing like working through a problem yourself.
can the tasks be found at codecampers website?
yes. in the map section.
what is FCC waypoints and ziplines?
the freecodecamp exercises
that's what they were called until a few weeks ago
ok, i think it will be useful to go through them :)
thanks for answering my questions, be well
np
Well I got through the tribute page project. The portfolio project seems much more daunting though.
This message was deleted
@ExhibitArts you seem to be using a lot of position absolute, is there any reason why?
@alexgaudiosi That's just how I positioned things. I'm new to HTML & CSS so I'm not really sure when to use that property and when not to.
Any tips for a noob?
So I would only use it when you have to position something on top of something else, for example you have a an image, then want to place some text on top
but for example I noticed one element has right -90%, that will absolutely position it -90% of the page, so as you resize it will have some strange side effects (like going off the page)
so try and use it sparingly, instead try and get your head around div positioning through well laid out html
like fitting tetris blocks
if you want to fit things on the same line for example, read up on display: inline-block and/or float: left/right
also a note on position absolute, to keep it positioned in relation to the 'container div', so where it is supposed to be contained within, add position: relative to the parent div (where it's supposed to sit within)
@alexgaudiosi Thanks! I'm gonna copy that and save it in Notepad so I can look back at it when I need to.
exhibitarts sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 7 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
@ExhibitArts reading through this http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/ might clarify and help a lot
Hi, could anyone help me with JSONP?
@h4r1m4u IDK. i feel like my way is a lot easier but it gives off a weird effect.
@pedronfigueiredo What's up?
I am doing the twitch zipline and I cannot nest JSONP call because it is asyncronous
I haven't done that course, but maybe if you show me a snippet of your problem I might be able to help
@alexgaudiosi
document.getElementById("wrapper").innerHTML = "Loading...";
var users, str, apiUrl = [];
users = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
window.onload = function loadOnStart() {
document.getElementById("wrapper").innerHTML = "";
for (var i = 0; i < users.length; i++) {
str = "https://api.twitch.tv/kraken/streams/" + users[i] + "?callback=myCallback";
apiUrl.push(str);
document.getElementById("wrapper").innerHTML += "<a href = '" + apiUrl[i] + "' target = '_blank'><div class = 'row' id = 'channel" + i + "'><h4>" + users[i] + "</h4><p>dummy text</p></div><a/>";
}
}
this is what I have
so it is returning the API stuff to a function myCallback
but now I am not sure how to use the info
ah okay
the hint from FreeCodeCamp was
$.getJSON(str, function(data) {
console.log(data);
}
so in your console, does the object it returns have a variable name, like data?
okay cool
/**/myCallback({"stream":null,"_links":{"self":"https://api.twitch.tv/kraken/streams/freecodecamp","channel":"https://api.twitch.tv/kraken/channels/freecodecamp"}}
)
)
but getJSON is assynchronous, meaning the calls dont return the values like they should, if I nest them in a for loop
I don’t know it’s weird
btw I don’t have a console because I moved to Atom but I still don’t know how to install a console
so best is to use the browser console, what browser/operating system do you use?
safari
or chrome
can do any of them
okay, on a mac?
yeah
I figured out how to put console on chrome
good
ty man
so for chrome, if you press
cmd+alt+j
yeah :)
then, for your code, the object should be in your console
so sometimes to access the data you need to navigate through the object, for example data.mydata[0]
[ 0 ] [ 1 ]
with no spaces
yeah
just a sec, trying stuff
I think this image is a good example of my problem
the JSON calls only resolve after the entire for loop, and not during as intended
so I think it is just the way they work
but I am not sure what to do to work around it
@alexgaudiosi I hope it makes sense
@pedronfigueiredo IIFE is your savior. do this:
document.getElementById("wrapper").innerHTML = "Loading...";
var users, str, apiUrl = [];
users = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
window.onload = function loadOnStart() {
document.getElementById("wrapper").innerHTML = "";
for (var i = 0; i < users.length; i++) {
(function(i) { // THIS ADDED
str = "https://api.twitch.tv/kraken/streams/" + users[i] + "?callback=myCallback";
apiUrl.push(str);
document.getElementById("wrapper").innerHTML += "<a href = '" + apiUrl[i] + "' target = '_blank'><div class = 'row' id = 'channel" + i + "'><h4>" + users[i] + "</h4><p>dummy text</p></div><a/>";
})(i); // THIS ADDED
}
}
okay, just popping out for lunch but maybe try wrapping the getjson part in it's own function, so the loop calls the function
or that ^
if you're not familiar with IIFE, look it up. here's a classic piece to get you started: http://benalman.com/news/2010/11/immediately-invoked-function-expression/. (check out the Saving state with closures section in particular as it relates to your problem)
@pedronfigueiredo it seems you modified your original code snippet as it's different from the last screenshot. so just use the code from the screenshot with the IIFE added as above
Okok
going to read the article now
@h4r1m4u what is a State?
@pedronfigueiredo a particular "moment" or "condition" in the execution of your code
ok perfect!
var users, str, online, apiUrl = [];
users = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
window.onload = function loadOnStart() {
document.getElementById("wrapper").innerHTML = "";
for (var i = 0; i < users.length; i++) {
(function(lockedInIndex){
str = "https://api.twitch.tv/kraken/streams/" + users[lockedInIndex] + "?callback=?";
apiUrl.push(str);
document.getElementById("wrapper").innerHTML += "<a href = '" + apiUrl[lockedInIndex] + "' target = '_blank'><div class = 'row' id = 'channel" + lockedInIndex + "'><h4>" + users[lockedInIndex] + "</h4><p>dummy text</p></div><a/>";
console.log("YEAH" + lockedInIndex);
$.getJSON(str, function(data) {
console.log(data);
online = Boolean(data.stream);
if (online) {
document.getElementById("wrapper").innerHTML += "<br>Online";
} else {
document.getElementById("wrapper").innerHTML += "<br>Offline";
}
})
})(i);
}
}
but it is not working :(
(function(i){
...
})(i);
the variables must match
var users, str, online, apiUrl = [];
users = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
window.onload = function loadOnStart() {
document.getElementById("wrapper").innerHTML = "";
for (var i = 0; i < users.length; i++) {
(function(i){ //IIFE
str = "https://api.twitch.tv/kraken/streams/" + users[i] + "?callback=?";
apiUrl.push(str);
document.getElementById("wrapper").innerHTML += "<a href = '" + apiUrl[i] + "' target = '_blank'><div class = 'row' id = 'channel" + i + "'><h4>" + users[i] + "</h4><p>dummy text</p></div><a/>";
console.log("YEAH" + i);
$.getJSON(str, function(data) {
console.log(data);
online = Boolean(data.stream);
if (online) {
document.getElementById("wrapper").innerHTML += "<br>Online";
} else {
document.getElementById("wrapper").innerHTML += "<br>Offline";
}
})
})(i); //IIFE
}
}
sorry, my bad.
but still doesnt work
do you have it in codepen?
no
I’ll create one right now
sorry!
it is solved
Thank you @h4r1m4u
pedronfigueiredo sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1431 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
where did you learn this? you saved my life
oh, you figured it out? great.
yeah, this baffles a lot of people
i ran into the same problem in my zipline, did the research and found the solution
is there a way to learn more of these kind of common problems?
I feel helpless when this happens
books on javascript, i'd imagine. i usually just google when i run into something like this
it's the best way to learn, imo. just work on projects and when you get stuck, look for the solution to your problem
reading books is great for the high-level, general overview, but nothing beats the actual coding experience and working through problems
yeah I think you are right
I started coding a month ago but I hit so many plateaus
can you give me a quick feedback on my portfolio?
Hey can anyone help me with the wikipedia API? i have troulbe getting it to work
@h4r1m4u http://pedronfigueiredo.github.io/
@rune-jacobsen I can. What have you found?
I found what end to use to get it to search, but when i implement in on the site i get errors and i have no idea where to start
Something like the browser doesnt give you access to it @pedronfigueiredo
Ok. what errors do you get?
XMLHttpRequest cannot load https://en.wikipedia.org//w/api.php?action=query&format=json&list=search&utf8=1&srsearch=c&srnamespace=0&srwhat=text&srprop=snippet%7Ctitlesnippet&c. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access
ok. where did you get the url from?
I got the search parameter from the input text field, then i put that in where it says search= and then i try using $getJSON
$.getJSON*
@pedronfigueiredo generally looks good. i didn't check the code, so i can't comment on that, but the functionality seems to be there. i noticed a little bug in the pomodoro - when i change the length of the break, it shows the work session length on the main clock, but when i click the clock to start the countdown it changes to the break length. i also miss a reset button there, but i realize you're using the +/- buttons to reset the clock.
i think most of the projects could do with some improvement on the design side of things, but i realize that design and development are two different things and you might be more focused on the latter.
overall, if you've started coding only a month ago, you're doing great. some really good progress. keep it up!
i think most of the projects could do with some improvement on the design side of things, but i realize that design and development are two different things and you might be more focused on the latter.
overall, if you've started coding only a month ago, you're doing great. some really good progress. keep it up!
@rune-jacobsen add
callback=? into the URL as one of the parameters
so the URL you use in your getJSON should look like this:
https://en.wikipedia.org//w/api.php?callback=?&action=query&format=json&list=search&utf8=1&srsearch=c&srnamespace=0&srwhat=text&srprop=snippet%7Ctitlesnippet&c
@h4r1m4u Thank you so much for taking a look! you are absolutely right, I have notice that bug also, I have to make sure I have counters for each dial and I think It will solve it. Will think about the reset button. Main reason I didn’t implemented it is because of mobile. Didn’t have space to put it.
pedronfigueiredo sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: pedronfigueiredo already gave h4r1m4u points
@h4r1m4u How do you think I can improve on design in general? are there any sort of guidelines or is it just aesthetics?
@h4r1m4u yes! it actually returns something error free now!
@h4r1m4u Thanks!
rune-jacobsen sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1432 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@pedronfigueiredo no problem. you could put it under the main clock time. or even all the way at the bottom, under the work and break counters.
design-wise, yeah, it's mostly the visuals and aesthetics. design is obviously a different skill from development, but even if it's not your main focus, you can learn a lot by checking out different sites and using concepts that you find visually interesting in your own projects
design-wise, yeah, it's mostly the visuals and aesthetics. design is obviously a different skill from development, but even if it's not your main focus, you can learn a lot by checking out different sites and using concepts that you find visually interesting in your own projects
@rune-jacobsen my pleasure!
@h4r1m4u So the only thing wrong was the callback?
@rune-jacobsen yeah I had the same problem yesterday so you are on the right track :)
GREAT! thanks guys! @pedronfigueiredo @h4r1m4u
rune-jacobsen sends brownie points to @pedronfigueiredo and @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: rune-jacobsen already gave h4r1m4u points
:star: 301 | @pedronfigueiredo | http://www.freecodecamp.com/pedronfigueiredo
@h4r1m4u yeah I am definetly try to do it. Maybe also improve a little bit my old projects
@rune-jacobsen it's what was causing the cross-domain request issue because the wiki server is not configured to respond to pure JSON requests. adding the callback parameter is a workaround, it changes the request a JSONP one. the wikipedia article on JSONP is a good intro into the topic: https://en.wikipedia.org/wiki/JSONP, but you'll probably want to do some more reading on it as it's a pretty common problem
@h4r1m4u Yeah ill read it now, thanks again!
rune-jacobsen sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: rune-jacobsen already gave h4r1m4u points
@pedronfigueiredo sounds good :thumbsup: step by step. as i mentioned above, your progress is impressive
@h4r1m4u one more thing, if it is not too much. How does one count versions, to indicate them on GitHub. Everytime I make a commit is a new version?
I am thinking about start track some changes on the readme.md file
@pedronfigueiredo no, commits are not versions. commits are just updates to the code. versioning is entirely up to you. typically if you add a new feature or make some major changes, you'd call it a new version
Ok, so no one is going to check if versions and commits correspond. That is perfect for what I want. Didn’t seem practical for me to do otherwise
sorry to interrupt, how do you put all that up to github ? i
@h4r1m4u you are an awesome person. Thank you for your time, attention and wisdom!
pedronfigueiredo sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: pedronfigueiredo already gave h4r1m4u points
yeah @kirbyedy
do you create all locally and then just push it up to github ?
I noticed that codepen is not ideal for portfolio so I dug this up two days ago
is there any limit ?
yeah, commits and versions are not necessarily intertwined. i wouldn't worry about it too much.
yeah if the branch name is gh-pages you can load it on a browser, how cool is that @kirbyedy
hello ppl having trouble with converting back to celsius after clicking once on my weather app any ideas http://codepen.io/ThabaniM/pen/OMqaWr/?editors=0010
is there a way to host images on gh ?
yeah I think so. and it is free
I am using the github desktop client and it seems doable. You just drag and drop to the clone folder on finder and commit+sync @kirbyedy
I did upload my portfolio through one tutorial, which of course I cant find now... but the images are on a cloud service
@ThabaniM did you declare variables kelvin celsius fahrneheit?
so if I can upload images on gh that is great, I will have to try that
yes
yeah GitHub it is amazing @kirbyedy, new world for me but amazing
but did not attach var in front
declare at the beginning
to make it global
:thumbsup:
but that is not the problem
can you do console.log(kelvin), etc after assigning values just to check if it is working? @ThabaniM
Hello everyone, I have a small question regarding the pomodoro clock challenge
I'm getting a small 1 second delay on my timer and I dont know exactly why
can anyone take a look and see if im missing something?
this is my code >> http://codepen.io/al3xoi/pen/VeLeXq
@pedronfigueiredo it does work because if i press once 26 degrees celsius becomes 79 degrees farenheit or something
@pedronfigueiredo but if i try clicking a second time it fails to change back to celsius
my next task is to make the simon game. Could someone give me a few pointers on how to style the button divs to look like circle quarters like the example? http://codepen.io/Em-Ant/full/QbRyqq/
I would personally use an SVG, but you if you search for html/css doughnut shapes, it should put you in the right direction, i.e. http://jsfiddle.net/CevXD/
SVG is if you want more shape manipulation which might be overkill for that
for svg: http://jsfiddle.net/4azpfk3r/
@alexgaudiosi thank you for the links. My problem with using a doughnut shape is that I'm not sure how to split it into different parts ( one div per button)
otmeek sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 10 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
.doughnut {
background-color:red;
border-radius: 150px 0 0;
height:150px;
width:150px;
}
try that
oh mah gad this formatting
@alexgaudiosi awesome thanks! I managed to do this http://codepen.io/meek/pen/adrbOv so I think I know where to go from here.
otmeek sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:warning: otmeek already gave alexgaudiosi points
:clap: welcome
hello y'all!
anyone have a few minutes to explain a HTML <img> function?
I have been beating my head against the tic-tac-toe zipline for three weeks. After someone wins, my program clears the front end, clears the variables....and then plays two AI moves and one player move for the start of the next game. I can't figure out why. Anyone, please take a look. http://codepen.io/macengr/pen/obVexm
anyone know whats wrong with my js?
I am new to the chat room. Just trying to get acclimated.
welcome @ghcarrolljr
good morning all, I am doing the front end challenge of creating a tribute page, and i ran into a snag. How do i get the bullets in my ul to go to the center of the page along with the li itself?
align center ?
i used a <center> element above it all, and everything moves to the middle except the bullet point
i can do it with the css but the excersice asks us not to use any
Are you using bootstrap, @jacobdplunkett ?
i am yea
@DurableMicron you need an api key to use the openweather api, and you need to start the address with //
e.g.
//api.openweathermap/etc etc
you can check console to see the error messages by pressing f12, in this case there was a 404 error msg and then a 401 error msg
@macengr sorry yes i am
If you can't use CSS, put it in the center by using col-md-5, col-md-2, col-md-5 and then setting the margin of the element in the middle column so that it's centered?
@DurableMicron your api call should look something like this:
http://api.openweathermap.org/data/2.5/weather?q=London&appid=44db6a862fba0b067b1930da0d769e98
@jacobdplunkett text-align: center
call that on the <li> item
(weather forecast)I cant get the json object from the apicall, is there something wrong with my code?http://codepen.io/leprekon91/pen/VeOwwP/
@leprekon91 put // at the start of your api address (
//api.etc)
@Coira thank you!!!
leprekon91 sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
:star: 486 | @coira | http://www.freecodecamp.com/coira
:)
hi, could anyone help me with this. I am unable to control the size of the image in the about me section. sometimes, it gets bigger when i reduce the screen size and at other times, it becomes too small. of course, I was trying out different things, but am unable to get it to work the right way.
here's the link to the pen - http://codepen.io/silentarrowz/pen/ZQRvKL
here's the link to the pen - http://codepen.io/silentarrowz/pen/ZQRvKL
the image size increases when I Reduce the screen size - why is this happening?
your declarations i think are a bit muddled up
one sec
do you want the overflow: hidden so it cuts off part of the photo?
try using
#about img {
border:5px solid green;
width: 100%;
}
that way, the image will follow any sizing you apply to it's container
@alexgaudiosi no , I tried the overflow hidden and it was cutting part of the image so I removed it
add the width to the codepen you sent, it should work
damn i hate when they start botherin shit that doesnt need to be bothered. do they have a way that i can complain about how the fucked up the homepage?
@alexgaudiosi - I added the width:100% and i see the image gets bigger when I reduce screen size a bit and then it gets smaller as i reduce screen size even more
in responsive design that is how it should be generally
so that it scales with the page design
@alexgaudiosi what I am getting is that it's not the largest size for the largest screen size. but it gets the largest size when I Reduce the screen a bit and then it gets smaller as I reduce the screen size more
when it jumps on to the new line right?
i'm not sure if you've started learning about media queries, but they will enable you to control dimensions of elements as the screen resizes
it gets larger because the content is being squeezed down the page, the width: 100%; will make it fill the empty space that it occupies
@alexgaudiosi yeah, it gets bigger when it jumps to the new line
that's fine, it should be doing that :)
@alexgaudiosi but why should it do that??
because imagine you are reading on a mobile, the layout must change so that the text is readable, right?
so the page will get longer so you can maintain readability
the idea is not to have an EXACT replica of the your desktop page, on a mobile, but to have a readable version of your website, make sense?
right @alexgaudiosi
but then why cant I get the same image size when the screen is the largest size?? but then I have another problem of it breaking out of the div --- so how do I fix this then??
you can use max-width: 200px; (or whatever width) to control image size
if you apply it to the image
or min-width: xxxx; to set a minimum width it must be
hmm, let me try that then @alexgaudiosi
or you can set that on the container of the image actually
and keep the image width 100%
to stop it breaking out
@silentarrowz if you don't want image breaking out of the div, consider setting image width to 100%. This fills 100% of the div
@alexgaudiosi one more thing. if you look at the portfolio images below , and when you hover over it, the images get bigger, but the paragraph underneath stays the same size, could you tell me a way to make the paragraph grow in size too along with the image??
@alexgaudiosi hmm , setting container size and keeping image width 100% sounds like a good idea too
put both paragraph and image inside a div, and when you hover on the div, change both p and img size. div:hover p, div:hover img{}
Hello guys I need your help please
What's up?
well
...
you can add a class to each of your divs with the items, so <div id="img1" class="hover-me col-md-4"><div id="img2" class="hover-me col-md-4"> etc, then change you css to
.hover-me:hover{
box-shadow:0 0 10px 9px gray;
max-width:220px;
max-height:215px;
position:relative;
top:10px;
z-index:1;
}
when move from one page to another ... on the top of my page it should show the root I am following
for example
@alexgaudiosi @Swoozeki wait, take a look at this pen, so you can see where to make the changes - http://codepen.io/silentarrowz/pen/OMaPJj
oops , wrong url . here's the correct one - http://codepen.io/silentarrowz/pen/ZQRvKL
When I chose location , on the top of my page it shows: Helsinki then I clicked again ...
page too displayed on the top of my page : Helsinki > Dancing >
I clicked again and then a new page displayed, on the top it shows : Helsinki > Dancing > Lessons
page too displayed on the top of my page : Helsinki > Dancing >
I clicked again and then a new page displayed, on the top it shows : Helsinki > Dancing > Lessons
It shows the root that I am following
@Zerka1982 I can NOT help you with that, ahaha. I don't even know what you're talking about... Helsinki...Dancing...
This message was deleted
@Swoozeki pm please because its hard to describe it
This message was deleted
how do you embed codepen?
@Swoozeki would you mind ?
Hi guys and sorry about my bad english. I have a js error when i try get quotes using an api
Anyone can explain me?
@alexgaudiosi applied what you said and now I see that the divs get bigger instead of the images and the paragraphs within it.
cant i do it in such a way that the images and paragraphs inside the divs get bigger
cant i do it in such a way that the images and paragraphs inside the divs get bigger
What is the error?
does anyone know if its still possible to view ur finished challenges ? i cant find my finihsed challenges to save my life
is there a way to target the images and paragraphs within the class .hover-me
??
@meatballcoder Uncaught TypeError: theQuote is not a function
Please anybody help me ... pm please
@silentarrowz
.hover-me:hover img,.hover-me:hover p{
box-shadow:0 0 10px 9px gray;
max-width:220px;
max-height:215px;
position:relative;
top:10px;
z-index:1;
}
@silentarrowz You can use something like
.hover-me img {
}
but you will have to play around with it
the space means
img is a child of .hover-me
@silentarrowz Just want to let you know, you have a really bad practise of positioning elements using pixels. The website is not going to be very responsive when you use pixels to position elements, unless you're also positioning elements absolute
@gonxaoro I don't see the callback function, "theQuote," like the error is communicating.
@Zerka1982 Post your code here, and someone should help you out :)
@meatballcoder But i must create the function? Idk
@alexgaudiosi will do that. didnt know how to target 2 elements within the same class and I learnt that now. thanks @alexgaudiosi
silentarrowz sends brownie points to @alexgaudiosi and @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 11 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
:star: 11 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
@Swoozeki , what is the better way to position then if I dont want to use absolute??
and does absolute positioning help if I want page to be responsive?? @Swoozeki
should I be using the different browser prefixes for properties like box-shadow all the time?
@gonxaoro if you reference a function, it has to exist. The callback is calling a function.
@otmeek Nope. Once the properties are standardized, the browsers will support them without the prefixes.
The prefixes are for proposed features that are not yet part of the standard. However, you should use them if you are worried about supporting that feature in older versions of the browser.
logged in and logged out....not a single checkmark still.
20 mins ago it wouldnt scroll past longest streak. now its working. i think all my complainin made it to someones ear lmao
alright thanks to whoever else commented. im goin back to work. later campers
@meatballcoder idk how solve this
i still trying
but i dont know why happen
I simplify the code
If anyone know why i get callback error..
@gonxaoro where did you get the api from?
hello all
@kirbyedy http://forismatic.com/en/api/
@gonxaoro
theQuote wasn't defined anywhere, and your .on(...) needed to be changed a little
thanks!
@Coira thanks !
gonxaoro sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
:star: 487 | @coira | http://www.freecodecamp.com/coira
np! just a couple of small changes really
but i waste like 30min haha
You guys are just doing the Tweet exercise, and already have such good understanding of jSON, holy crap!
that's coding for you :p
When I did it, I had an array of 15 codes I copied and pasted, and randomised it on the screen :|
*15 quotes
haha
I did it the same way :)
but must be do with ajax
no does not say it has to be done with ajax
don't think there was a requirement that we had to use ajax or jSON, but it's definitely a much better way
you can if you want, but its not obligatory
Two years ago I did not use ajax haha
Ty guys, see u!
hey, i was wondering if someone would be willing to help me~~ ?_?
I'm working on the "portfolio" and i'm kind of stuck trying to use divs to display thumbnails that are links.
right now the divs are overlapping the floating header
heres the project if anyone is willing
hey @dhoover1, look into the css property “z-index”: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
@dickfink thanks so much! I will take a look!
dhoover1 sends brownie points to @dickfink :sparkles: :thumbsup: :sparkles:
:star: 176 | @dickfink | http://www.freecodecamp.com/dickfink
Hi everyone,
I'm working on the local weather challenge and am struggling to run a function. I have a function called getData() that retrieves the api info and displays them on the DOM. My problem is it won't run on load, it only runs when I click an anchor tag with the "onload=" property. Any thoughts? http://codepen.io/jerlich97/pen/VeNEEK?editors=1011
I'm working on the local weather challenge and am struggling to run a function. I have a function called getData() that retrieves the api info and displays them on the DOM. My problem is it won't run on load, it only runs when I click an anchor tag with the "onload=" property. Any thoughts? http://codepen.io/jerlich97/pen/VeNEEK?editors=1011
@dhoover1 Your design skills are pretty awesome! I love that pinky-red / blue gradient
and you got the gradient as the color of the heading which is cool
@jamesgraham10 thanks, i wanted to use bright colors and it kind of came together.
dhoover1 sends brownie points to @jamesgraham10 :sparkles: :thumbsup: :sparkles:
:star: 132 | @jamesgraham10 | http://www.freecodecamp.com/jamesgraham10
Any suggestions for the weather app I posted above? I could really use some help
@alexgaudiosi only saw your link now, thanks!
otmeek sends brownie points to @alexgaudiosi :sparkles: :thumbsup: :sparkles:
:star: 12 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
Quick question, in your calculators how did you handle cases such as "-4", "+4", "4+-6"?
@jerlich97 I might be wrong, but it might be because your code isn't within
$( document ).ready(function() {
console.log( "ready!" );
});
document ready function
@otmeek right but I call the functions there. Does the entirety of the code need to be within that scope?
yes! @jerlich97
actually i’m not sure, it’s good practise though generally?
@jerlich97 I don't see the function at all in your code, but I'm probably just missing it
I'm not sure whether all the code needs to be inside that function since I've never tried to not have it like that
@dshgna JS
eval() handles it :smile:
@jerlich97 why are you calling showPosition again without passing any arguments?
I’ve heard using
eval() is evil
@jamesgraham10 it is indeed but acceptable for the calculator project
it doesn't have to be with the .ready function
ah ok
I honestly haven't been able to think of a way to chain multiple operations without using eval(), I'm sure it's doable just more work
@NickEU What do you mean?
getLocation();
showPosition();
getData();
@jerlich97 what's with the showPosition call here? why?
working on the quote machine... does any body have any helpful documentation on working with APIs? I feel like the challenges haven't helped me at all.
@NickEU Didn't realize it's called in getLocation(). 1 sec
@jerlich97 ofc it is it's just a callback
@NickEU Ok so now my getData() function returns a 404 from the api call
@jerlich97 the reason your app doesn't work is cause u're calling it again later manually without passing anything through, so just get rid of that call
@NickEU Heres the updated version: http://codepen.io/jerlich97/pen/VeNEEK?editors=1111
don't use settimeout btw
@NickEU I think the issue is that it gets the coordinates after I call the API so they're not part of the api call
hey guys, im trying to resize an icon on my page and nothing is targeting my icon, instead it seems to be targeting only the space around it. anything i can do to fix this?
http://codepen.io/andrewchar/pen/dGrVJO?editors=1100
http://codepen.io/andrewchar/pen/dGrVJO?editors=1100
@jerlich97 that's because these API calls are async
@NickEU So how do I delay the second API call?
@jerlich97 you can just do it inside the geolocation function call for example... you should really use a "global" variable to store the api response from weather api tbh, that will help you in the future
@jerlich97 it's a common problem, u're not the only one who stumbles upon it, lemme see if i can find some good info on this
Anybody have any good documentation on how to use APIs?
@jerlich97 http://stackoverflow.com/questions/11001318/waiting-for-api-call-to-finish-in-javascript-before-continuing here's an explanation of what's happening and some ways around that
@NickEU Do you mean define the API key globally, the getData()function, or both?
@valmunos read the api documentation of the api u're trying to use to figure out how it's working, google working with API javascript or JQUERY to figure out how to work with api properly
@jerlich97 no... just use an object and store the result of your api call in it...
@jerlich97 you do know u're getting a json object from your api call?
@NickEU Yeah, I'm going to need to spend some time reading. Thank you so much! this has been really helpful
jerlich97 sends brownie points to @nickeu :sparkles: :thumbsup: :sparkles:
:star: 374 | @nickeu | http://www.freecodecamp.com/nickeu
@jerlich97 it's a very useful thing to know, so take your time - now is a good time to practice working with objects too, so it's a win win ;)
@andrewchar you haven't got an img tag anywhere
@andrewchar how big/small are you trying to make it? I played with just changing the height in the css of #icon img and it changed the size of the weather icon. is that what you're looking for?
<img src="images/icon.jpg"> for example
@alexgaudiosi i just fixed it. i added .html to my jQuery and target my #icon img {} in my css and it works now
ah i see, didn't check the JS
@alexgaudiosi @chumswap thanks :)
andrewchar sends brownie points to @alexgaudiosi and @chumswap :sparkles: :thumbsup: :sparkles:
:star: 279 | @chumswap | http://www.freecodecamp.com/chumswap
:star: 13 | @alexgaudiosi | http://www.freecodecamp.com/alexgaudiosi
:)
Anyone else finding the mediawiki API documentation not totally helpful?
It's really frustrating me
i had a a great time figuring out my api for this weather app... sarcasm intended
@valmunos if you're still here you can try this tutorial too = some good info there https://www.codecademy.com/en/tracks/youtube
anyone know a good site for high quality gradient wallpapers/backgrounds
I have been beating my head against the tic-tac-toe zipline for three weeks. After someone wins, my program clears the front end, clears the variables....and then plays two AI moves and one player move for the start of the next game. I can't figure out why. Anyone, please take a look. http://codepen.io/macengr/pen/obVexm
@andrewchar http://uigradients.com/#Joomla
Check out those sexy gradients :-D
@chrisamsterdam1986 wow thats amazing, thank you so much
andrewchar sends brownie points to @chrisamsterdam1986 :sparkles: :thumbsup: :sparkles:
:star: 6 | @chrisamsterdam1986 | http://www.freecodecamp.com/chrisamsterdam1986
@macengr i don't really have time for a proper look, but I would suggest removing the alerts for now, and insert console.log('some text') everywhere in your functions
then you can see in the console how the stack is being called throughout your app
it's the best way to learn debugging your software :)
This message was deleted
finished with my weather app, check it out lemme know what you think :)
http://codepen.io/andrewchar/pen/dGrVJO?editors=1100
http://codepen.io/andrewchar/pen/dGrVJO?editors=1100
@andrewchar looks good, I would definately round the temperature though.
@andrewchar I don't wanna know the temperature is 6.22832°F
@andrewchar Also your fahrenheit temperature is wrong.
oh?
thanks for pointing that out @cragsify
andrewchar sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 328 | @cragsify | http://www.freecodecamp.com/cragsify
@andrewchar I know why too, if you haven't figured it out yet.
not sure, looking at it
@andrewchar instead of adding 32 to C * 9 /5 , you are concatenating the value so :
if c = 1,
c*9/5 = 1.8
1.8 + 32 = 1.832
@cragsify In my case, @andrewchar weather app is showing correct value for temp in F
@gandhirahul @andrewchar still not for me : 3.46°C, 116.948°F
@andrewchar I'd advise you to compute the fahrenheit value in a seperate line and then using it as a variable in the .texT()
@andrewchar put em in a parenthesis
doing it this way is still not giving me the correct answer
$("#convertBtnF").click(function() {
var farValue = (updateWeather.main.temp * (9 / 5) + 32);
$("#myTemp").text("Temp: " + farValue + "°F");
})
@andrewchar you sure
@andrewchar it's showing the correct temp here
haha i was doing the calculation wrong on my calculator
yeah its showing right now
lol
in jQuery when i have something like this
$("#myTemp").text("Temp: " + farValue + "°F");can i chain stuff after the .text like adding to make it round my number
you can try to use toFixed
@andrewchar
$("#myTemp").text("Temp: " + Math.round(farValue) + "°F");
@andrewchar celsius should be ok with 1 decimal behind the .
changed it around to show 1 decimal
Does anyone have any idea why adding margin-top to the .power div in this add the same top-margin to every other element in the parent div? o_O http://codepen.io/meek/pen/adrbOv
@wearenotgroot @cragsify thanks for the help :)
andrewchar sends brownie points to @wearenotgroot and @cragsify :sparkles: :thumbsup: :sparkles:
:warning: andrewchar already gave cragsify points
:star: 893 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
hi everyone. I'm starting the wikipedia viewer and am just making sure to set up the api call correctly. all i want to do is see the JSON object in my console but for some reason i'm not getting anything. any ideas?
$(document).ready(function(){
$.getJSON( "https://en.wikipedia.org/w/api.php?action=query&format=json&formatversion=2&prop=extracts&titles=Stack+Overflow&exintro=1", function( data ) {
console.log(data);
});
});
Hello I was wondering if I could get someone to point me in the right direction. Working on the personal portfolio. I have a blank space next to the About section that I would like to put a pic/text into, but every time I try to divide the main div It breaks the whole layout. Any Advice?
@dhoover1 have you tried putting the img in its own div and messing with things like float:right? or, you may need to keep the about text in its own div and change its styling to be inline or inline block. have you tried those?
This message was deleted
can someone please explain why this isn't working:
the link opens to JSON data, but I can't tell if my Pen is communicating with the website or not
you need to add listener to your button
err nvm lol
this should work right? If it's communicating with the server shouldn't it spit out a string?
@valmunos helps if you include jQuery if your going to make use of it
@valmunos need to click the cog in the js window to add it
ahh yes there you go, its giving you quotes now
that?
I already had that added
@valmunos when I loaded it wasn't not there
hmm... very strange... still doesn't seem to be working though
you guys are both getting some output?
yup
wth
do you have the https everwhere extention installed in your browser?
It was preventing loading http ajax request when I had it before
I don't know, I'm just running chrome. Do you think that might be causing problems?
how can I disable it?
@valmunos its working in chrome for me, check what extensions you have installed and try disabling some and see if that helps
OK, I disabled everything except for google docs, refreshed my codepen webpage and tried clicking the button
still not doing anything
I don't need any preprocessors for html or javascript do I?
I'm having trouble with the Portfolio project, every time I zoom in or out some of the responsive images I have shift their dimensions and I have one or two that stick out from the rest. I've looked online a bit but nothing seems to be working
@gsnead can you post the link to your codepen?
forgive the ugliness at this stage but yea here ya go. http://codepen.io/gsnead/full/PZLqjE/
@valmunos all you should need is jQuery, which you have, so maybe try a different browser or make sure you version of Chrome is up to date, don't know of any other reason it would't be loading something
I'll try it on firefox and see if that works
anyone know how the example simon game achieves its responsive design? essentially just resizing the whole page when the viewport is smaller? http://codepen.io/Em-Ant/pen/QbRyqq
@dhoover1 i tried to fix the problem you were having and managed to get it working without breaking, i didn't obther styling hte solution though. Not sure that's what you wanted but here's the linked to my fork of your pen http://codepen.io/pixiefrog/full/qbGNQj/
@gsnead it looks like you're trying to use bootstrap. have you looked into bootstrap thumbnails? http://www.tutorialspoint.com/bootstrap/bootstrap_thumbnails.htm
@chumswap No I haven't I. Guess it was a little too obvious for me haha. Thanks for the link and help
gsnead sends brownie points to @chumswap :sparkles: :thumbsup: :sparkles:
:star: 280 | @chumswap | http://www.freecodecamp.com/chumswap
Hello. I'm doing my profile task, and have some white space for some reason. Can anyone advise why? http://codepen.io/jameswinfield/pen/xZNbxX
Please
@gsnead :)
@jamesthemonkeh Youc an make div display to inline-block to fix that
@jnmorse wait wait wait, hold on, I just found something interesting. I opened Developer tools in chrome, here's what it said about my request on codepen:
XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Any idea what that means?
or why that header is present?
@jamesthemonkeh add margin: 0; padding:0; to body in css
if you don't like the white, ad a background-color to your body in css @jamesthemonkeh
@jamesthemonkeh or use reset css in options
@chumswap That has fixed most of it but there is still a gap between the nav and the first div
@jamesthemonkeh oh nevermind, i think i misunderstood
@valmunos to be honest I'm not sure on what end the header has to be set with those messages, but I'm not getting that, when i click your button I see this in your page
[{"ID":2379,"title":"Ricardo Zea","content":"
Learning Web Design is like playing video games: You start small and build your character as you progress, then you beat the boss, literally.
\n","link":"http://quotesondesign.com/ricardo-zea/","custom_meta":{"Source":"tweet"}}]
I only have the "home" section of my portfolio done, but would love some feedback... this thing gave me some trouble yesterday
Ahhh I've fixed it, thanks.
@jnmorse well, I was able to get it running on firefox on my first attempt. Strange, maybe I
maybe I'll just start using them from now on
@jnmorse @andrewchar Thanks for your help!!!
valmunos sends brownie points to @jnmorse and @andrewchar :sparkles: :thumbsup: :sparkles:
:star: 398 | @jnmorse | http://www.freecodecamp.com/jnmorse
:star: 292 | @andrewchar | http://www.freecodecamp.com/andrewchar
thanks @chumswap
jamesthemonkeh sends brownie points to @chumswap :sparkles: :thumbsup: :sparkles:
:star: 281 | @chumswap | http://www.freecodecamp.com/chumswap
@jamesthemonkeh :)
@hajeansonne looks interesting, but just a note, buttons shouldn't really be mixed with anchor tags
@hajeansonne I like the design, it's very creative. you could clean up your code by using less inline css (put the styling in the css file)
@hajeansonne there's also a problem with resizing the page since you have a lot of things position: absolute
@chumswap yea that is what I was having problems with, any Ideas? I have tried to get this effect in about 8 different ways already
@jnmorse I have not yet learned how to get the buttons to link to further down the page so those will be replaced once I figure out how to do that. Thanks!
hajeansonne sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 399 | @jnmorse | http://www.freecodecamp.com/jnmorse
@chumswap should I be using position:relative? or change container-fluid to just container?
@hajeansonne changing container-fluid to container won't help. i'm trying to think of a better way to achieve this...
@hajeansonne you could remove them now, as to how to make your links, link to content further down the page you would do something like this
<a href="#section1">Section 1</a>
<!--- any other content in between -->
<div id="section1">
<!-- Some content -->
</div>You see that both the text after # and the id on the div match, this means when you click the link that id becomes the focus
@hajeansonne for one thing, i would modify the image so that "aspire webdesign" is part of it. since that's not a link. it can just be part of the background image then you don't have to worry about css with it.
@hajeansonne that's sort of an easy work around. i'm still thinking about the links though.
@chumswap yea the links are my main concern
Hey there, I'm working on the personal portfolio website challenge... On the thumbnails of projects. How do I host images on codpen without having to purchase their "pro" package? Alternatively, is there another place i can host them for free and then point to in my html?
@erbastian imgur, dropbox, flic.kr
@chumswap i tried to float it right and it didn't work. I will try the other method you suggested! thanks
dhoover1 sends brownie points to @chumswap :sparkles: :thumbsup: :sparkles:
:star: 282 | @chumswap | http://www.freecodecamp.com/chumswap
thanks @cragsify
erbastian sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 334 | @cragsify | http://www.freecodecamp.com/cragsify
@erbastian https://cloudinary.com by far the best solution I found for img hosting
@hajeansonne ok so this is stripped down, i just wanted to focus on fixing on element to the image. take a look: http://codepen.io/chumswap/pen/MKdjwe?editors=0110
you can resize the window and the text stays put. you have to make the background the image you want, instead of just placing the image in the dom.
@hajeansonne you'll have to change the dimensions of the image to do the rest of your portfolio. but you can definitely google how to do that.
Does this happen to anyone else... my code is fine in codepen on desktop but on different devices things like alignment and margin is off??? :smile:
@hajeansonne the links will need to be in their own divs that are positioned like the "aspire" one in that pen
@chumswap I originally had it as a background image, but I switched it today because someone suggested I put it in as a regular image in a div with a fixed width
@hajeansonne your illustration is super !
@hajeansonne well you can do whichever way you like the best. but i think it works better when the image is in the background. that way it's not really a part of the flow of the dom, it can just hang out in the back.
@chumswap I think I get it? Thank you so much
@hajeansonne you're welcome :)
I would prefer it in the background @chumswap
@tommygebru yes. that's why bootstrap exists! :)
@chumswap tried it didn't like it ... maybe i'll try it again later :thumbsup:
@tommygebru i havent' tried it but there's another called foundation that works similarly. maybe you would like that better idk https://en.wikipedia.org/wiki/Foundation_(framework)
there are lots of css frameworks, https://en.wikipedia.org/wiki/CSS_frameworks
@chumswap @disjfa I hate having to use multiple languages... i suppose i have to make media queries with css :worried: and the margins will go back to normal ?
http://codepen.io/gebrutommy/pen/VeOvep
http://codepen.io/gebrutommy/pen/VeOvep
Hello. I've still got this stupid white space at the top of my div. It goes if I delete the content. Which isn't much use. Can anyone advise please? http://codepen.io/jameswinfield/pen/xZNbxX
@jamesthemonkeh did you try giving the id of the div a negative value or margin-top?
*negative value for margin-top?
@coymeetsworld @jamesthemonkeh yes that's what i was going to suggest. it's kind of hacky but put margin-top:-57px; to .cover in css
@tommygebru what exactly are you trying to achieve? sorry, i'm just not sure of the question?
@jamesthemonkeh lets see... try resetting the css like I did in this fork
http://codepen.io/gebrutommy/pen/obRzrV?editors=0100
it is found in the css settings :smile:
http://codepen.io/gebrutommy/pen/obRzrV?editors=0100
it is found in the css settings :smile:
also may want to rethink the background images, the first one was 2.4 MBs in its current format, alot for someone to download
@chumswap nvm I constantly forget what bootstrap & foundation are for :wink2:
@jamesthemonkeh did that help?
@tommygebru good idea with the reset, I do it directly through CSS by putting this at the top of the file though:
- {
margin: 0;
padding: 0;
}
@tommygebru Sorry I'm not sure what you mean by resetting the css - I don't see the difference (bar a slight change to the hover state).
@jamesthemonkeh @tommygebru is referring to codepen.io's settings button under css
@jamesthemonkeh also I think I removed the margin:0; padding:0; :+1:
@tommygebru Indeed you did.
Thanks @coymeetsworld and @tommygebru I did the CSS reset thing and it worked. Odd.
jamesthemonkeh sends brownie points to @coymeetsworld and @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 626 | @tommygebru | http://www.freecodecamp.com/tommygebru
:star: 272 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
@jamesthemonkeh nice :+1:
@jamesthemonkeh http://meyerweb.com/eric/tools/css/reset/
@coymeetsworld Yes I know you have a point with the image sizes! I really like them though.
@jamesthemonkeh theyre good I'm just suggesting putting them in a more bandwidth-friendly file format
or put it in a lower resolution, it wouldn't necessarily be discernible to the human eye either
for pomodoro timer who here used time functions? i made a working one using just setinterval after fighting with using time for a few days. Wondering if most people use time or do it similar to the way i did.
sorry date objects i guess would be more precise
yeah @calicode I used Date
@coymeetsworld How would I get them in a more bandwidth friendly format?
@jamesthemonkeh don't have alot of experience in it but there should be image converters online you can try out
also research what the different types of images are, like bmp, jpg, gif etc to get an idea on how the images are created/stored
it could be possible that file you have isn't a real jpg, just has that extension at the end of the file
The first image has a resolution of 5472 x 3648 . Open paint and change them to like 1200 and set the background-size to cover ;)
Ahhh but the problem is I cannot upload photos to Codepen, so they have to be linked from the original site.
use a hosting image site
like imgurl or dropbox or something
Lol good point!
@jamesthemonkeh can make a imgur account for that purpose
Sweet. Time for sleep. I'll get onto it tomorrow. Have a good evening.,
eventually when you host this on your own site that won't be a problem lol
you too @jamesthemonkeh