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
can someone help me figure out why when I press clear it dosn't clear the text
??
check out the javascript
$("#Screen").text(" ");
@code7777 it's .click
@code7777 not onclick
@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
@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 C is an id remember
@Lumexralph have you tried using Number()<---------------------wrapper
sweeeeeettttt i got that part to work thanks man!!!! @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 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 however the js interpreter will most likely convert that string into number if it can
@Lumexralph if it cannot it will give you NaN
@Lumexralph so if you have like '1' * 2<--------------------it will try to do the operation even if 1 is a string
@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
@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….
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 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/
@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
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
@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
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 should be tweet id not text
how would i target that?
(looking through twitters documentation for something)
so targeting the $("#tweet") should grab it... but the pop up do not seen to populate anything...
$(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)
thanks!!
i see that you also added everything in the $(document).ready too
@interstellaridea just too avoid having globals
@interstellaridea yep you can drop it but remember scope of the function will be different
@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
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);
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
@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
@dposse &units=metric or 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.
@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?
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
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
@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 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
it’s about the right HTTP request I need to use for the MediaWiki API
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)
@cragsify nope I actually know it’s search, but it’s what the search returns
@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
@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
@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
synflyn28 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: synflyn28 already gave h4r1m4u points
@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 :)
@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
@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
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?
also, because it's $.ajax as opposed to $.getJSON, the callback is different
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
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.
@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
@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
I would suggest structuring your call based on the jQuery $.getJSON or $.ajax calls
@ExhibitArts Yes.
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.
@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 perhaps the cursor should change to a finger to show that teh temp is clickable
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/
@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
krter sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 888 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@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 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
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 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?
pradeepce sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 149 | @dshgna | http://www.freecodecamp.com/dshgna
dshgna sends brownie points to @pradeepce :sparkles: :thumbsup: :sparkles:
:star: 346 | @pradeepce | http://www.freecodecamp.com/pradeepce
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.
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 :)
@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 ?
@thomas-duval you want this
var wikiUrl = 'http://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&limit=10&search=' + keyword;
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
any stylus users here ?..
@coderNoob you can try this way: set line-height of
.col-xs-3
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
codernoob sends brownie points to @nnluukhtn :sparkles: :thumbsup: :sparkles:
:star: 8 | @nnluukhtn | http://www.freecodecamp.com/nnluukhtn
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?
@GreatDanton Do you think it's as simple as Wordpress? Built by someone and edited by non-coding authors?
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?
@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.
if he's talking about lifeextension.com
it's obvious not wordpress, but it's probably easy to add content
dshgna sends brownie points to @hman1911 :sparkles: :thumbsup: :sparkles:
:star: 91 | @hman1911 | http://www.freecodecamp.com/hman1911
@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/
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.
that's what they were called until a few weeks ago
thanks for answering my questions, be well
Well I got through the tribute page project. The portfolio project seems much more daunting though.
@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
@h4r1m4u IDK. i feel like my way is a lot easier but it gives off a weird effect.
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
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?
or chrome
can do any of them
I figured out how to put console on chrome
good
ty man
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
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
going to read the article now
@h4r1m4u what is a State?
@pedronfigueiredo a particular "moment" or "condition" in the execution of your code
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 :(
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
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
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
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
@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
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
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 :)
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
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
@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
I noticed that codepen is not ideal for portfolio so I dug this up two days ago
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
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
yeah GitHub it is amazing @kirbyedy, new world for me but amazing
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
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
I am new to the chat room. Just trying to get acclimated.
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?
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
@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
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
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)
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?
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
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
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
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?
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
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{}
...
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...
how do you embed codepen?
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
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
@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 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 :)
@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.
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
i still trying
but i dont know why happen
If anyone know why i get callback error..
@gonxaoro
theQuote wasn't defined anywhere, and your .on(...) needed to be changed a little
@Coira thanks !
gonxaoro sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
:star: 487 | @coira | http://www.freecodecamp.com/coira
You guys are just doing the Tweet exercise, and already have such good understanding of jSON, holy crap!
When I did it, I had an array of 15 codes I copied and pasted, and randomised it on the screen :|
*15 quotes
don't think there was a requirement that we had to use ajax or jSON, but it's definitely a much better way
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
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
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?
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
@jerlich97 why are you calling showPosition again without passing any arguments?
@jamesgraham10 it is indeed but acceptable for the calculator project
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
@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
@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 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 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 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?
@alexgaudiosi i just fixed it. i added .html to my jQuery and target my #icon img {} in my css and it works now
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
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 :)
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.
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.
@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()
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 it's showing the correct temp here
haha i was doing the calculation wrong on my calculator
yeah its showing right now
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
@andrewchar
$("#myTemp").text("Temp: " + Math.round(farValue) + "°F");
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
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?
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
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
that?
I already had that added
hmm... very strange... still doesn't seem to be working though
you guys are both getting some output?
do you have the https everwhere extention installed in your browser?