Hello, I'm a newbie and just finished the first challenge for Front-end development. I think I met the objectives but I feel like it's super unorganized. Can someone give it a look and maybe some organization tips? Thanks. https://codepen.io/arrowstation/pen/GqyzOm
Oh it's all messed up on here.
@arrowstation hey everything looks good -_-
@arrowstation just fix the pic
@willcodes thanks!
arrowstation sends brownie points to @willcodes :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @willcodes |http://www.freecodecamp.com/willcodes
@arrowstation really enjoyed reading your page. As you learn new skills you can improve the page as you go along, but it is a great start
@elminsterrr
the viewer looks good but the top result might need to be pushed down after a search. It is right at the top of the page and cuts off the top. I was viewing it on a mobile device. Not sure if you coded it for all type of devices.
Thanks @GregatGit !
arrowstation sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 691 | @gregatgit |http://www.freecodecamp.com/gregatgit
@arrowstation if you put
target='_blank' in the a href so a new tab opens when you click
@GregatGit hey buddy
do you have any advice on choosing a color for the border-left? lol
http://codepen.io/duel_drawer8/pen/WxdGzj/
http://codepen.io/duel_drawer8/pen/WxdGzj/
@Dueldrawer8 this is a bit of a glitch when you tweet
@Dueldrawer8 Your page is great. When I tweet it opens a small window rather than whole new tab
window.open('http://twitter.com/share?url=' + loc + '&text=' + title + '&', 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
@GregatGit whats all that?
Hey guys, I’m suffering from some issues when deploying a page to public domain. Can anyone help me?
I prepared a personal portfolio page as this:
http://codepen.io/yisuang1186/full/JKWqJB/
It looks nice on codepen as well as the local index.html file
However, when I push it to github, it seems I lost all the CSS and BootStrap related styling. It becomes this:
https://yisuang1186.github.io
Anyone knows what’s going on?
@badc0ded thanks!
tommygebru sends brownie points to @badc0ded :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @badc0ded |http://www.freecodecamp.com/badc0ded
many thanks!
no problem, i'm glad i could help
Where exactly am I supposed to learn more about the technologies required for the completion of the "Show the Local Weather" zipline?
$(function() {
var currentSelect = $("ul a.active");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
currentSelect.removeClass('active');
$("ul a.about").addClass("active");
} else if (scroll>=400){
currentSelect.removeClass('active');
$("ul a.portfolio").addClass("active");
}
});});
dangit sorry
Anyone know why the following code isn't successfully chagning which link has the class "active" based on scroll positions?
$(function() {
var currentSelect = $("ul a.active");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
currentSelect.removeClass('active');
$("ul a.about").addClass("active");
} else if (scroll>=400){
currentSelect.removeClass('active');
$("ul a.portfolio").addClass("active");
}
});});
(Ok, I don't know why it keeps cutting off the $(function(){{); bit from the code view.
Well, its possibly because the last "if" never runs
@yodermail you may want to consider switching the value 100, with 400
k, let me try that
Hi all. Can someone help me with this? I want the function to show "Harry Potter" but it's showing "movie" instead. How can I change it to the value instead of the key? Thank you
var testq1={
movie:"Harry Potter",
author:"J.K. Rowling",
quote:"Happiness can be found, even in the darkest of times, if one only remembers to turn on the light."
};
function showMe(){
document.getElementById("quote-here").innerHTML= Object.keys(testq1)[0];
}
hey @Vercaelus it worked! Thanks!
yodermail sends brownie points to @vercaelus :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @vercaelus |http://www.freecodecamp.com/vercaelus
@yodermail happy to hear that!
@jeanelleyy after .innerHTML, replace everythign after the "=" with "testq1.movie"
@Vercaelus thank you! also, is there any way i can replace testq1 with a variable? i want to show a random object's movie value but i can't seem to get that to work either
jeanelleyy sends brownie points to @vercaelus :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @vercaelus |http://www.freecodecamp.com/vercaelus
@jeanelleyy It depends on how you're trying to set it up (btw, "testq1" IS a variable). The easiest way would be to .push the object to an array, and then randomly choose that array's index
Working on the calculator challenge. Does this count as fulfilling user story
#6: User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.? http://codepen.io/dhuddleston/pen/bZaPwO?editors=0010
it'd look like this; movieArray = [testq1, testq2, testq3, etc.]
Specifically I'm just wondering if there's a better way to handle order of operations, since the default order that
eval uses might confuse users.
movieArray = [testq1, testq2, testq3, etc.];
movieArray[Math.floor(Math.random() * movieArray.length)].movie;
@jeanelleyy That example would return the "movie" value from a random movie object in that array
@dhuddleston Yep, you got it
Did you happen to finish the weather codepen challenge?
@Vercaelus Thanks!
dhuddleston sends brownie points to @vercaelus :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @vercaelus |http://www.freecodecamp.com/vercaelus
Yes, I've finished the Weather challenge. :)
It was one of my favorites.
Think you could help me with it? I have no idea what Im doing lol
whoops, im not sure what it would be called if i wanted a place holder for an array of variables. oh okay, so I shouldn't make a variable to hold
movieArray[Math.floor(Math.random() * movieArray.length)]?
@Vercaelus
Most notably, Im having a rough time figurig out the specific API calls I need to make the magic happen
this tells me that it cant read the movie property of undefined. ```var masterArr=[q1,q2,q3,q4,q5,q6,q7,q8,q9,q10,q11,q12];
function showMe(){
document.getElementById("quote-here").innerHTML= masterArr[Math.floor(Math.random()+masterArr.length)].movie;
}```
@jeanelleyy You're adding the array length. You need to multiply it
@Vercaelus oh that's embarrassing lol. that worked thank you again!
jeanelleyy sends brownie points to @vercaelus :sparkles: :thumbsup: :sparkles:
:warning: jeanelleyy already gave vercaelus points
@jeanelleyy Its all good, no worries. Glad it worked for you!
Sorry, didn't notice your reply.
@Vercaelus First off, you can't get the user's geo location from Open Weather Map. For that I used "http://ip-api.com/json"
@dhuddleston No problem :)
I was trying to get ir from "navigation.geolocation". Would that not work?
it*
@Vercaelus I remember trying to use that as well. Don't quote me on this but I think that feature no longer works due to security reasons.
Hmm... Would that would explain part of the problem then.
So, what about the actual API calls to OpenWeatherMap, itself?
I'm having a hard time wrapping my mind around that, in particular
@Vercaelus For Open Weather Map you can use
http://api.openweathermap.org/data/2.5/weather?, and then you have to add your API Key to the end of that.
Maybe itd be best if you take a look at the codepen I have so far, if you wouldnt mind
@Vercaelus Sure!
@Vercaelus So the way I did the API call was
var api = apiURL+"lat="+lat+"&lon="+lon+key;
The difference is how I got my lat and long variables, which was just by making that other API call to get the geolocation since
navigator.geolocation doesn't always work.
So it looks like you're on the right track. Just have to take a few more steps to get location properly.
Hmm... Gotcha, I'll give that method a try and see how I fare. Good to know I'm at least working in the right direction lol
Thanks for the help @dhuddleston !
vercaelus sends brownie points to @dhuddleston :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @dhuddleston |http://www.freecodecamp.com/dhuddleston
@Vercaelus Glad I could help!
I could actually use some help with my calculator project. Functionality wise, everything works now, but I'm having issues with the styling: my gradient isn't rendering properly: http://codepen.io/dhuddleston/pen/bZaPwO?editors=0100
Well, what are you going for? It looks good to me
There's a white bar running across the middle of the gradient. At least in this browser.
It's the same height as the calculator container, so I'm wondering if that's messing with something.
Hey all! I was wondering if I could get some input. Having reached the first project (to build a tribute page) I set out to replicate as best I could the example page provided. I got pretty dang close visually, but when I looked at the source for the example page, it wasn't close at all! A lot of what its author did wasn't covered in the course. Does this mean I didn't do my due diligence? What should be my next step? would it be better to move along to the next course or to redo the one I'd just completed?
@dhuddleston Yeah, I see what you mean now... Im not sure what that is. Does it have anything to do with your precompiler, or something like that?
Maybe try making everything a solid background, and work from there
@Maddhattertime Nah man, those dudes use all kinds of stuff that they didnt teach in the course. I wouldnt worry about it, it only gets more intense the further you get in the lessons
@Maddhattertime Good question! That's not a problem at all! If anything it shows you know how to creatively use what is at your disposal instead of using the code that other people use.
Sometimes I've intentionally reworked my code to come up with more unique, fun solutions.
@dhuddleston @Vercaelus That's good to hear guys, many thanks!
maddhattertime sends brownie points to @dhuddleston and @vercaelus :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @vercaelus |http://www.freecodecamp.com/vercaelus
:cookie: 354 | @dhuddleston |http://www.freecodecamp.com/dhuddleston
hey guys do u like this effect? http://codepen.io/dagman/full/qNpJgN/
@Vercaelus I'm not sure. I tried a couple of things and I'm still experiencing issues. It's quite a strange error. Haha.
@dagman Yeah, its pretty awesome!
@dhuddleston Sorry to hear that... The only think I can think of to do, is try to make everything as plainb as possible, then tweak it slowly
@Vercaelus Yeah. Worst case scenario I can always leave it as a blank white background. Strangely enough, it's still got the white bar even when I use a solid background that isn't white.
Yeah, that is definitely strange. It may just be an issue with CodePen, you never know.
@Vercaelus Figured it out by using the inspector. The body tag still had its default styling, so I had to make its background-color transparent.
@dhuddleston Nice! Excellent job figuring that out, I bet it felt like an accomplichment
accomplishment*
@Vercaelus I had some help from another user in the regular help channel. :)
Mainly in that they recommended using the inspector to see why it wasn't working.
hi guys
am working on local weather app presently, I got my coordinates using geolcation object on JSFiddle but when I did same thing on codepen it didn't work, what might be the problem?
am working on local weather app presently, I got my coordinates using geolcation object on JSFiddle but when I did same thing on codepen it didn't work, what might be the problem?
@dhuddleston YEah, that inspector is pretty gnarly, I use it for everything lol
@Lumexralph Sorry, I can't help you with that, Im having problems with that challenge myself
@Lumexralph - I'm not sure if you are experiencing this problem, but geolocation on the newer versions of the Chrome browser requires https:// transport to work. (On Firefox and Safari, I think, it still works on http://) If you are using the free OpenWeather API, it requires http:// so that is a problem if you are using Chrome (and you cannot predict what the user is using, so you need to make it work somehow.) People have been switching to the IP-based http://ip-api.com/json to get the location based on the IP address. You could probably incorporate geolocation as a primary source for your location, and fall back to ip-api if geolocation does not work? Or just use the ip-api, even though it is probably less accurate.
If you are having another problem, then I'd have to see code...
@khaduch How do you incorporate that api, exactly?
Im having the issue of being completely in the dark about how to use APIs. I find the explanation here on free code camp lacking, and I'm having trouble finding a better explanation
This message was deleted
my weather app so far \
Anyone recommend building the tribute page without any frameworks?
@Vercaelus - well, mostly you have to know a little bit about the AJAX transaction mechanism. It is, essentially, making a request from a website (specified by a URL) and "waiting" for the response to come back, where the callback function that you create and pass to your ajax call handles the return data.
If you look at the example on the bottom of http://ip-api.com/docs/api:json that page is shows an example with jQuery's $.getJSON function that shows the basic setup. I was having trouble getting their JSBIN post to run, so I just quickly threw together a codepen project to use the ip-api site: http://codepen.io/khaduch/pen/qNpzGx. If you look at the network traffic in the browser devtools, you can see what all goes on. I hope that helps.
I have to sign off for now, but if you ask questions I'll check in tomorrow morning.
Awesome @khaduch, thanks for the reply@!
vercaelus sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1446 | @khaduch |http://www.freecodecamp.com/khaduch
@all
why cant I add the gray section I have under the "welcome" to the bottom of the page?
I want the same gray section to be added under the About section
@djidrovo1 just put your div class="welcome" after div id="content"
@sorinr i tried that earlier, doesnt work
my CSS is kind of a mess, I wish I had dual monitors, it'll be much easier to code this way. I need to clean up my CSS and also figure this thing out.
I had it earlier, but then I did something and it remove the last gray space
@djidrovo1 its working but you have some strange css under .welcome class
position:;
top: 0;
left: 0;
@sorinr should I delete that?
@djidrovo1 what does it serve for?
@sorinr honestly, I think nothing at this point. It did maybe earlier in the day. I started coding the website yesterday and have change its layout maybe about 100 times and I keep forgetting to clean up my CSS
I have also deleted everything and started from scratch a few times lol
when I get frustrated
@djidrovo1 it is normal to remake it several times until you like it
@sorinr so you said to add
<div class="welcome">
</div>
to the bottom of my HTML?
@djidrovo1 take a look here: http://codepen.io/sorinr/full/jAYgkB/
@sorinr oh no, what I want to do is duplicate that gray space
and add it to the bottom of about me section
so it will be
White block, gray block, white block, gray block
right now I have white, gray, white, (missing gray)
does that make sense?
@djidrovo1 http://codepen.io/sorinr/full/jAYgkB/ like this?
@sorinr YESSSSSSSSS!!!!
:D
@sorinr for some reason it didn't work for me!
@djidrovo1 Well, thanks a lot! it works.
sorry djidrovo1, you can't send brownie points to yourself! :sparkles: :sparkles:
@djidrovo1 i just copy paste the welcome class div before and after content div and made some changes in css for the class .welcome
@sorinr Well, thanks a lot!
djidrovo1 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 475 | @sorinr |http://www.freecodecamp.com/sorinr
I saw that :)
@djidrovo1 welcome
I've been going at it for like 2 hours and researched everywhere before I decided to ask somebody.
@djidrovo1 if you copied the code to your pen i will delete the forked one. its ok to delete it?
@sorinr yeah, go ahead. I copied it already. Thanks again :)
djidrovo1 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: djidrovo1 already gave sorinr points
bed time for me, finally lol its past midnight. bye for now.
@djidrovo1 bye
how to use images from my google drive in code pen??
@shivam13 https://productforums.google.com/forum/#!topic/drive/yU_yF9SI_z0/discussion
I think this well help
ty @JDVariadic
shivam13 sends brownie points to @jdvariadic :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @jdvariadic |http://www.freecodecamp.com/jdvariadic
no problem
http://codepen.io/JDVariadic/pen/RRxEdP?editors=1010
I'm starting the random quote project and the code found here won't show the quote in the output section of codepen. Could anyone point out the problem? I know for a fact that the API is giving me data since I tested that earlier.
@JDVariadic its saying that json.forEach is not a function. i suggest using $.each() to loop through the json response
@sorinr Thanks! gonna try it now
jdvariadic sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @sorinr |http://www.freecodecamp.com/sorinr
@JDVariadic but first make a console.log(json) to see what the api is returning. if you have more quotes returned the you can use $.each() otherwise there is nonsense using it
do i add it in the $.getJSON? I did that and nothing is appearing
@JDVariadic yes
@sorinr
http://codepen.io/JDVariadic/pen/RRxEdP?editors=1010
The message is not changing
@JDVariadic you're console logging the object
@JDVariadic add this after console.log: $('.message').text(json.quoteText);
@FreyaRhianna @sorinr
thanks, something is appearing now
thanks, something is appearing now
:warning: jdvariadic already gave sorinr points
:cookie: 313 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
jdvariadic sends brownie points to @freyarhianna and @sorinr :sparkles: :thumbsup: :sparkles:
@JDVariadic you had mostly the right idea in the first place, the only problem was how you were trying to get at the JSON object.
Hello how can I put an element into middle of the screen?
@d1sr3 is it an image?
@d1sr3 try adding text-align: center; to the CSS part
@JDVariadic No different elements as here : https://codepen.io/FreeCodeCamp/full/wGqEga/
sorry, idk how
@d1sr3 give the elements you want to center margin: 0 auto. The 0 is the top bottom margin, and the auto is for the left right margin. It automatically centers the element,
@FreyaRhianna doesn't work for me
@d1sr3 are you building this on codepen? do you have a link so I can take a look?
@FreyaRhianna http://codepen.io/d1sr3/pen/QEaPPr
@d1sr3 what is is that you're trying to centre? The only thing I can see is centred text,
@JDVariadic be aware of this color: white; in your css body{}. if you mantain the white background you will see nothing :)
@d1sr3 do you want the text to be dead centre on the page? because margin: 0 auto, wont do that because your top bottom margin is 0.
@FreyaRhianna I want to achieve somehing like here : https://codepen.io/FreeCodeCamp/full/wGqEga/ ,just with the text now
@d1sr3 your class text-center its already doing the centering job. no need to add inline style that does the same
Oh okay! When I want to achieve this, I put all the elements I want inside a containing element. I then set the containing element to have a margin-top: 25vh. (that figure, 25, is dependent on the height of the elements I want inside my containing element. If you have a lot of elements, for example, that's combined height is equivalent to 95vh, having a top of 25vh will push them off the bottom of the screen). I don't know if there's a more robust way of doing it, but it's what I do.
@d1sr3
@FreyaRhianna thanks
d1sr3 sends brownie points to @freyarhianna :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
anyone by chance super familiar with regex? I am stuck on a specific thing
@Benalron I might be able to help,
@FreyaRhianna awesome. I am having trouble with the lack of support for lookbehinds... I want to remove leading 0's in a string for the calculator
EG... I want,
01 + 20 + .001 * 0
1 + 20 + .001 * 0
I want the top line to result in the second line, currently I have:
/\b0+(?=[1-9])/g
the issue is... it's removing 0's in decimals because \b targets decimal points as well
can someone help me with constructor call inside a getJSON, the instance returns as undefined while data1 and data2 were logged correctly in the console:
http://codepen.io/Wo1v3r/pen/BzJbgX?editors=1011 here if youll see on the console, both data1 and data2 log -first- defined and streamer instance logs as undefined
after clicking any of the three buttons atm
http://codepen.io/Wo1v3r/pen/BzJbgX?editors=1011 here if youll see on the console, both data1 and data2 log -first- defined and streamer instance logs as undefined
after clicking any of the three buttons atm
@Benalron Couldn't you negate the decimal point? [^.] ?
or, more clearly [^.] since question marks mean things in regex :P
[^.] wow, forgetting all principles of regex
it keeps deleting my slashes :(
@FreyaRhianna problem is, it's still treating the . as a boundary with that
@Benalron hang on, I'm going to poke around a bit with the regex on code pen and see if I can find anything
@FreyaRhianna thanks, I appreciate it... I'll continue to do the same
benalron sends brownie points to @freyarhianna :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
@Wo1v3r what do you want from:
var streamer = new Streamer(data1); ?
OH I just changed it @sorinr
@sorinr There's apparently a problem with the nested getJSON in the json callback
@sorinr if you ll see the constructor below I originally used both responses, but in that way I kept getting undefined as the instance of the constructor
Just finished building my tribute page: http://codepen.io/LukeBurgess94/full/RRxJQp/ woud appreciate any feedback
@Wo1v3r i have reloaded your pen and var streamer = new Streamer(data1); is still there
@sorinr I'm sorry I'll change it back 1 sec
@Wo1v3r anyway. if you want to use Streamer(data1,data2); you showld declare your var streamer object globally
@Benalron /\s0+(?=[.1-9])/g this one deletes all the 0s you want except for the very first 0 on the first expression. I'm sure there's an easy solution to that which I'm just forgetting,
just var streamer globally and then streamer = new Streamer(data1,data2) inside the second json callback scope?
@FreyaRhianna thanks for all your help... I sent a PM with related stuff as to not flood the chat
benalron sends brownie points to @freyarhianna :sparkles: :thumbsup: :sparkles:
:warning: benalron already gave freyarhianna points
@sorinr could you take a look now? It's still undefined , I added a "constructed" log in the constructor and it was definetly constructed there.. http://codepen.io/Wo1v3r/pen/BzJbgX?editors=0111
@Wo1v3r yes but what Streamer(data1,data2) should do? who is Streamer?
Uhm @sorinr down below Streamer(data1,data2) is a constructor of a streamer instance that has these needed fields:
//Streamer constructor
function Streamer(resultStream,resultChannel){
this.name = resultChannel.display_name;
this.image = resultChannel.game + ": " + resultChannel.logo;
this.description = resultChannel.status;
this.online = (resultStream.stream != null);
console.log("constructed");
}
oops
I think I listed them wrong
one sc
still doesn't work
I made that constructor because I want in one object to have some fields of the first response and to check if online using a field from the second response
corrected it to Streamer(data2,data1) but still doesnt work :9
thing is if I change the constructor and its call to only the first response paramater (without using data2) and call it in the first callback, it works, something about the nested getJSON is wrong but I cant figure what
is this take your location or not??
@Wo1v3r change this: var streamer; to var streamer,json1,json2; the rest you will figure it out:json1= data1 ecc
@sorinr Thanks I'll try this, could you explain me why though? inside the second callback the console.log(data1) worked correctly
wo1v3r sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @sorinr |http://www.freecodecamp.com/sorinr
@Wo1v3r because you are trying to colect eather data1 and data2 only on the second json api call so the data1 from previous call its not seen by the second one
@sorinr Ok that doesn't work either, I guess the problem is in the constructor? am I doing it wrong? :
//Streamer constructor
function Streamer(resultStream,resultChannel){
this.name = resultChannel.display_name;
this.image = resultChannel.game + ": " + resultChannel.logo;
this.description = resultChannel.status;
this.online = (resultStream.stream != null);
console.log("constructed");
}
ok i forgot new this time
it works thank you so much
Object {
description: "[FR] DH Valencia - Rediffusion - Day3.",
image: "StarCraft II: https://static-cdn.jtvnw.net/jtv_user_pictures/ogamingsc2-profile_image-9021dccf9399929e-300x300.jpeg",
name: "OgamingSC2",
online: true
}
Console
Assets
Comments
Delete
:D
apparently works with only the data2,data1 variables too
@Wo1v3r great
Is there a way in JS to "watch" a boolean change without a while loop?
for example I made a boolean that is set to true when all the requests are done, can I fire the html change based on it or only in the very place I changed it ?
var requestDone = false;
var results = [];
var getResults = function() {
var streamer;
var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
streamers.forEach(function(name) {
$.getJSON('https://api.twitch.tv/kraken/channels/'+name+'/?callback=?', function(data1) {
$.getJSON('https://api.twitch.tv/kraken/streams/'+name+'/?callback=?', function(data2) {
streamer = new Streamer(data2, data1);
if(results.push(streamer) == streamers.length){
console.log(results);
requestDone= true;
}
});
});
});
}
function factorialize(num) {
var array=[];
var factorial=0;
for (var i=0; i<=num; i++){
array.push(i);
}
factorial=array.reduce(function (previousVal, currentVal ){
return previousVal* currentVal;
});
}
factorialize(5);
var array=[];
var factorial=0;
for (var i=0; i<=num; i++){
array.push(i);
}
factorial=array.reduce(function (previousVal, currentVal ){
return previousVal* currentVal;
});
}
factorialize(5);
ATM when the requests are done it logs an array of all the streamers correctly, but it looks terrible to add another function inside that one XD
I had a problem with geolocation, you can try a different way to get a location based on IP for example
how to take it??
@shivam13 where is your loadweather() function?
Hi, I am getting access is denied error.
Please help
@shivam13 when you call
loadweather(position.coords.latitude + ',' + position.coords.lognitude); you are passing one argument but here: function loadweather(location, woeid) {} its expecting two parameters. and what is this:$.simpleWeather({})` ?
@shivam13 ok. i've seen that you loaded an external lib for the $.simpleWeather
Hey, I'm working on random quote generator. I have a few questions.
Here's my pen (still working on it, so not final version) :
http://codepen.io/a-y-u-s-h/full/pbWRdZ/
I don't want the text on the button to change its color when I hover my mouse over it, or when I click on it, what should I do?
hi guyz
im not sure u can check out my machine
u want or u dont want ?
if u want u can use button hover
@NixonRichard Yup, did it. Removed bootstrap classes and customized it the way I wanted.
Hi everyone, can someone have a look here: http://codepen.io/zelite/pen/GqQRRy how to I make the content inside the image become centered in the image?
i want it centered vertically and horizontally in a way that works on all screen sizes
@zelite maybe flexbox will help? http://codepen.io/ronaldrodguez/pen/NAyWGE
I am working on Random Quote Machine. And I am testing the JSON code from challenges in my pen at codepen.io But it doesn't work. Please help me out. I am totally stuck.
Here's the link http://codepen.io/faisal1337/pen/ZOvgNR
@faisal1337 you need to get the JSON from somewhere
/json/cats.json isnt a valid path
It isn't?
I thought it is.
So it's accessing cats.json through FCC DB?
@faisal1337 yeah, thats looking for a file path /json/cats within your own codepen URL
Okay. So I'm looking at this website : https://market.mashape.com/andruxnet/random-famous-quotes and I can't find where the JSON link is.
@faisal1337 unless youre hosting it on the same server, which you can't on codepen... you need a url
Can you specify?
hi guys I made this on my computer and then wanted to put it on codepen. I uploaded the images to imgur and those seem to work ok(although slow). However the css box won't go transparent, same with the buttons. It works fine on my computer and browser but not on codepen, any ideas? http://codepen.io/willcodes/pen/WxdaYg
the link
@Benalron I get it.
@faisal1337 have to sign in to use that API, so I am not seeing a URL, sorry
Ahan.
Hey lovely people. How do I write a RegExp that matches
555 and (555) but NOT (555 and 555) ?
@Benalron thanks anyway
faisal1337 sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @benalron |http://www.freecodecamp.com/benalron
I'ma sign u
@faisal1337 NP, GL
up
@Benalron should I add this GET also"$.getJSON("GET http://quotes.rest/qod.json", function(json) {"
It was also there
yup, looks good
```function factorialize(num) {
var array=[];
for (var i=0; i<=num; i++){
array.push(i);
}
var array1=array.reduce(function (previousValue, currentValue){
return previousValue * currentValue;
});
}
factorialize(5);
guy
guys
if you look at the URL there... that will show you the random quote you get... anything inside the function(json){}, json is that object
how can i make my code black baCKGROUNF
D
hi guys I made this on my computer and then wanted to put it on codepen. I uploaded the images to imgur and those seem to work ok(although slow). However the css box won't go transparent, same with the buttons. It works fine on my computer and browser but not on codepen, any ideas? http://codepen.io/willcodes/pen/WxdaYg pleease
@Benalron I removed 'GET' and its working now. Finally something after such a long while.
@willcodes add a color property to the background.. rgba(r, g, b, a) and set the opacity (or a) to 0.2 or something below 1
@JDVariadic yeah.. already done. It works on my browser just not on codepen
@faisal1337 I spent a VERY long time with API stuff initially
@willcodes oh, idk anymore
Same here. I don't even know what to do next. It's my first time with API's. But I'll keep trying.
@willcodes You want your
jumbotron to be transparent?
@willcodes I suspect the problem isn't the box not being transparent, but the image not loading. I opened codepen in https:// and the background image was visible.
@willcodes unless you just solved it between you posting and me commenting, because I can't see anything wrong
oh wait, I think I completely misunderstood what you wanted to be transparent xD Ignore me
@FreyaRhianna hahahahah
@FreyaRhianna I want the jumbo to be transparent
@sjames1958gm how can i make background of my code black
in order to be it clear here
in order to be it clear here
guys
how can i make background of my code black
in order to be it clear here
in order to be it clear here
@FreyaRhianna the images are loading fine now, but i dont know why the jumbotron css isn't going, i copied it from my sublime file which works perfectly lol
help format
:point_right: code formatting [wiki]
Multi line Code
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
Single line Code
This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
@maulikdarji i do that
but it does not work
maybe my kewbooard
@Deathstroke97 you need backquotes not ' not " but `
@Deathstroke97 three backquotes (on their own line) - shift-enter - paste - shift-enter - three more backquotes - enter
@Deathstroke97 Type backticks(Key below
Esc) on new line.
@willcodes jumbotron CSS is being overwritten
@willcodes add !important after your background property.
.jumbotron{
background:rgba(0,0,0,0.4) !important;
}To override default Bootstrap Styling
@maulikdarji ok ill try
function factorialize(num) {
var array=[];
for (var i=1; i<=num; i++){
array.push(i);
}
var array1=array.reduce(function (previousValue, currentValue){
return previousValue * currentValue;
});
return array1;
}
factorialize(5);
thank you guys for help)
@willcodes also
@willcodes youve got bootstrap in the HTML as well as in codepens "add external CSS"... sometimes that causes conflicts with over riding classes
@Deathstroke97 :+1:
@Deathstroke97 So is this passing?
@willcodes @Benalron <<this. If you take it out , your box is transparent. It's probably bad practice to use !important if you can avoid it, so it's always better to look for the root of the problem,
@FreyaRhianna @Benalron the double link of bootstrap was the problem
Hello I'm trying to acces 'value' of my div object, but I'm getting 'undefined' my code :
console.log(document.getElementById("srch").value); <div id="srch" value="ikon"></div>
@FreyaRhianna @Benalron thaaaaaaaaaaaaaaank you guys
now I gotta add the tweet button...... :@
@FreyaRhianna @Benalron thanks
willcodes sends brownie points to @freyarhianna and @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
:cookie: 377 | @benalron |http://www.freecodecamp.com/benalron
@d1sr3 you mean document.getElementById("srch").attr('value') ?
ok guys, any suggestions/thoughts?? Your all probably too young for seinfeld :O
testing backtick
@willcodes works well good job. two things i noticed were: for me it is hard to read the tweet button and some of your quotes are longer than 140 characters.
This message was deleted
Hello I want to disable an element right after fadeout animation, but it disables it neraly imediatelly is there a way to make the class wait untill the animation ends and then disable it? My code :
.hid{
animation: fadeOut 1s;
display: none;
}
pretty sure there's another css selector for this but you can also use jquery
Easiest way to sort array by true first and false later?
.sort 's function takes two paramaters and that seems redundant
@mattboland thanks! I will tweak accordingly
willcodes sends brownie points to @mattboland :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @mattboland |http://www.freecodecamp.com/mattboland
Hello, this is my pen about the game of life React
http://codepen.io/Spartano/pen/KryEgK?editors=0010
i have an problem
inside nextGrid = () => i am not been able to understand why it doesnt work to go to next state
when i console log it gives me an aray of 5 false
what api can I use for the Local Weather project?
openweather
accuweather
@Wo1v3r thanks!!
olbap14 sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @wo1v3r |http://www.freecodecamp.com/wo1v3r
@Olbap14 if you want to avoid geolocation problems with chrome, I suggest you to take a look at wunderground weather api
If I have this code. And it appears at the top right corner. And If I want it positioned 400px lower. Then what would be the better apporach. 1): Give margin to the div with class="row" 2) Give margin to the div with class="col-md-5 message". Because both ways I get the same results. Which one would be better.
<div class = "row">
<div class="col-md-5 well message" id="box">
<blockquote class="">
<p>C makes it easy to shoot yourself in the foot; C++ makes it harder, but when you do, it blows away your whole leg.</p>
<footer><cite title="Author">Bjarne Stroustrup</cite></footer>
</blockquote>
<button id = "getMessage" class = "btn btn-primary center-block">New quote</button>
</div>
</div>
@faisal1337 depends on how do you want to look the other elements on your <div class="row">. if you want them all the same then choose 1 or if want to style every children div differently choose 2
@kirbyedy Ok, thanks, I'm was stuck with this
olbap14 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1240 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@kirbyedy I don't find how can I take the key, when I'm log in
:_(
@kirbyedy ok, I find it :D
@faisal1337 to see what i mean just try:
<div class="row"><p>lorem ipsum</p><div class="col-md-5 well message"></div></div. and try give margin to the row and then to the md-5 div
Hey guys, I'm doing my personal portfolio quest and I try to upload an image, but it just won't show. I even tried to do a completely empty Codepen to see if there was something that was blocking the image, but it just won't display.
I'm simply using this: <img src="http://imgur.com/yqiV4gq.jpg">
thanks @sorinr
faisal1337 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 484 | @sorinr |http://www.freecodecamp.com/sorinr
Ill try
I even tried using the image as an URL (just drag it to the browser and copy paste the url it gives)
Hey I finished what's required in the twitch TV , now I will style it with css and animations, could anyone review it (except for style) ? :smile:
http://codepen.io/Wo1v3r/full/BzJbgX/
http://codepen.io/Wo1v3r/full/BzJbgX/
@Wo1v3r Good job getting it working :+1:
Any suggestions? :/
=D ty , some parts were really troublesome
Yeah I know!
@erikvlm Do you get any error displayed?
@erikvlm in the console, about mixing http/https etc?
No nothing, it just won't show
I just copy pasted the link from the URL
Hey, does my codepen work in your area? Weatherapp: http://codepen.io/CrumrineCoder/pen/qNxENK
@erikvlm you have a link to your codepen?
Also I can't change the icon size properly, not sure how
It just creates padding when I change the height
@cysonya http://codepen.io/erikvm/pen/NAwmLg
@CrumrineCoder works in my area :)
@erikvlm which line is the image at?
Right under </style>
Is there a class of Bootstrap to center a whole div?
text-align: center
Wait hang on, class...
Yeah
And that's for text no?
@erikvlm err..I only see <div class="header-cont"> right under </style>
It can work for divs
Saved*
@cysonya Try refreshing, I just asved again
I mean Faisal, you can just change the styling to be centered
This message was deleted
This message was deleted
@erikvlm your image url is a local file. You need to upload your image online because codepen doesn't have access to your local files.
This message was deleted
This message was deleted
@cysonya I tried with Imgur, but that didn't work either
Where should I upload it for it to work
Didn't work :(
D:
Wait which one
The class or changing the styling to text-align: center
Because I just realized the class is outdated
@erikvlm I tried an imgur image and it seems to be working
How would I add text-align: center as a class?
I didn't try the class method tho
Do you already have a class for it?
http://codepen.io/cysonya/pen/bZLNAE @erikvlm
If not, just make a random one and give it a CSS styling of "text-align: center"
Yeah tried that. That changes the text.
I think
Ima go with margin-left
You could give it a left padding of something around 50 %
And then margin left it as you asid
said*
Yes. Lemme do that.
img {
display: block;
margin: 0 auto;
}
display: block;
margin: 0 auto;
}
That might work
It'll apply to all images, so if you want it to be one again you'll have to make it a class or ID
Thanks for your help @cysonya I tried a different uploading source and that worked
erikvlm sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @cysonya |http://www.freecodecamp.com/cysonya
No problem :)
@cysonya One more thing
Do you know how I get rid of that white space that is below the image and the first "section"?
You see there is this thin white stripe that separates the two sections - any idea how to get rid of that?
lemme see..
in weather we have to show only one location's weather or user's location's weather??
User's
@erikvlm You can add
margin-bottom: -70px something like that to the image
you done that project?? @CrumrineCoder
Working on it
Mainly styling at this point, JS is done
User Story: I can see the weather in my current location.
@cysonya Inside the <img> element?
On the FreeCodeCamp page for the weather challenge
@erikvlm yeah
i cant take the user's location it gives error invalid location @CrumrineCoder
Share your pen, I ran into the same errors
<img class="center fit" src="https://www.design19.org/blog/wp-content/uploads/2015/04/UI-UX-DESIGN.jpg" margin-bottom: 70px>
Or what, @cysonya
@erikvlm Yeah you can do that, make sure it is
style="margin-bottom: -70px;"
https://codepen.io/shivam13/pen/pbpqKA @CrumrineCoder
Oh, I used the IP API instead of the geolocation
$.getJSON("http://ip-api.com/json", function(json) {
/* CHANGE LAT AND LONG */
var lat = json.lat;
var long = json.lon;
$("#long").html(Math.floor(long));
$("#lat").html(Math.floor(lat));
And then you can put the other apis into this api and use its data
@cysonya Can you take a look if the table feels responsive now ? http://codepen.io/Wo1v3r/full/BzJbgX/ ignoring the buttons atm
Geolocation API doesn't work because it needs https:// to work, and not all browsers start a page with that
@Wo1v3r Hard to read the text
Yes I'm finished the functionality, now doing the responsiveness and margins and then finally the colors and fonts
I *
Ah, I see, yes it feels responsive
ok @CrumrineCoder
@Wo1v3r Yeah the table is responsive, just the filter buttons on the top is not. Nice :)
@cysonya @CrumrineCoder ty guys, I'm gonna style the buttons and center the text in the table now
wo1v3r sends brownie points to @cysonya and @crumrinecoder :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @cysonya |http://www.freecodecamp.com/cysonya
:cookie: 277 | @crumrinecoder |http://www.freecodecamp.com/crumrinecoder
Also something that could be cool @Wo1v3r is you give the viewer count
Maybe in the bottom right of each of the right boxes
@Wo1v3r Ok!
@CrumrineCoder That's a good idea, lucky I made the constructor for a streamer object now its easy to refactor :D
by using IP API can u get correct your correct location??? @CrumrineCoder
@shivam13 I did mine with ip api and it gives my provider's location which is not that accurate, I'll add google's geolocation some time too
by geolocation not gives me a valid location @Wo1v3r
so what can i do ??
@shivam13 ip api works fine if the user has an fixed ip. otherwise with a dynamic ip it reports wrong location
than how to use id api??
@shivam13 as i said for most it will work. if you want it for all just use geo
ok @sorinr
https://codepen.io/shivam13/pen/yJvLjN?editors=1010
see this @sorinr
is this correct ??
Yeah @shivam13
Oh wait hang on
You need to call the function
Hang on
function getInfo(){
$.getJSON("http://ip-api.com/json", function(json) {
/* CHANGE LAT AND LONG */
var lat = json.lat;
var long = json.lon;
$("#long").html(Math.floor(long));
$("#lat").html(Math.floor(lat));
});
}
$(document).ready(function() {
getInfo();
});
Try that!
@shivam13 nope. do not use Math.floor() because the degrees are very important for location
@sorinr It's for the user, it's not being saved like that
It's being saved as the long version
@CrumrineCoder i know. but if you want to tell you that the lat and lon are corresponding to my location, get rid of math.floor
Sure, perhaps make a button that shows the user the long version of lat and long
@CrumrineCoder you don't have to show to the user the lat and long, you have to show him city, state, country. the lat and long you are just passing to the weather api
Sure, I'm adding in a button at the top right that shows the specifics like latitude and longitude, but not making it a thing the user would see as a <h1>
@CrumrineCoder i just made a console.log(json) on your call. the json.city and json.country are ok but if i go to google maps and seach for lat and long it will give me a position of at least 12 km from where i am
Rural, suburban, or urban?
I'm in NYC so it worked for me, I asked on r/freecodecamp for people to test it and I didn't get any replies
Not sure what to say to that other than I'll add a search town feature
var loc;
$.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?')
.done (function(location)
{
loc=location.city;
});
$(document).ready(function() {
$.simpleWeather({
location: loc,
woeid: '',
unit: 'f',
success: function(weather) {
var city = weather.city;
var temp = weather.temp + "°"+weather.units.temp;
var wcode = '<img class="weathericon" src="https://googledrive.com/host/0Byi7CVy901YhLXVrTWx6QkZDZzA/'+weather.code+'.svg>';
var wind = '<p>' + weather.wind.speed + '</p><p>' + weather.units.speed + '</p>';
var humidity = weather.humidity + " %";
$(".body").text(city);
$(".temperature").html(temp);
$(".climate_bg").html(wcode);
$(".windspeed").html(wind);
$(".humidity").text(humidity);
},
error: function(error) {
$(".error").html('<p>' + error + '</p>');
}
});
});
Hey everyone. I'm building my Personal Portfolio Webpage and I'm wondering how to go about using images that are stored on my computer. If I'm to put up screenshots of my own work, the web page will only work when my PC is online. Is there some where I can upload the screenshots to be permanently online?
@shivam13 is the console.log(location.city) reporting you the right city?
@RichardHowell879 imgur is pretty nice
yes
@sorinr
Aloha. I'm having a few issues with twitch and today in my research I came across this blog: https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.zkx0a345l How am I supposed to pass my challenge if I don't have a client ID? Will we be required to submit for an oAuth code? I have a very sad feeling that I will still be on the twitch issue by then.
@shivam13 are you sure this is correct: https://geoip-db.com/json/geoip.php?jsonp=?
@shivam13 then the problem is how you call $.simpleWeather
when I put that line in the browser gives me lots of nulls
check
@cysonya Thanks, I'll have a look at that.
richardhowell879 sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @cysonya |http://www.freecodecamp.com/cysonya
http://codepen.io/shivam13/pen/NAyPBb @kirbyedy
i check it
see this pen
Uncaught ReferenceError: jQuery is not defined
than whats problem in $.simpleWeather ??@sorinr
@RichardHowell879 use photobucket
@RichardHowell879 Imgur doesn't allow hotlinking to Codepen
try it your self the same code it gives you a correct ans @kirbyedy
city: null
check the image
but i got the correct ans
@CrumrineCoder OK, will do.
is that what are you going to tell to your clients as well ? :)
Would anyone who has completed the show the local weather project mind sending me the project they did?
The link to the codepen
Someone kill me please, how is this
.table-bordered>tbody>tr>td
more specific than this :
.table-bordered>tbody>.online
.table-bordered>tbody>tr>td
more specific than this :
.table-bordered>tbody>.online
when .online is a class that appears on rows
@RHCPsnow how about you post your problem and we help you
I put the second one lower in the list and the exact thing happens
you tried the same code to find city ?? @kirbyedy
@shivam13 i don't know the simplewather.js lib and how you should call it, what parameters you should send, ecc
@shivam13 yesm your code
as in the above takes priority
does not work for me
hahaha
than what can i do ??
but it shows me right location than why dont gives me the weather information for of my location??
nvm figured it :D
@shivam13 as i told you and @kirbyedy showed you the ip api location its not quite very accurate. if you wanna use it try passing lat and long to $.simpleWeather
i can not access that loc in $(document).ready(function(){});
how to use IP api
?? @sorinr
by reading
@shivam13 you can put your
$.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?')
.done (function(location)
{
loc=location.city;
}); within a function like: function getmylocation(){$.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?')
.done (function(location)
{
loc=location.city;
});} and call it from doc ready like: getmylocation();
This message was deleted
send the code by using 3 times ` shift+enter than paste code @sorinr
@shivam13 @CrumrineCoder already showed you a similar code
if you have the code in pen than send me the pen
but that not gives me long and lat
@shivam13 here is how i did it: https://codepen.io/sorinr/pen/xOGdYz
Sorry, I didn't know the ip api wasn't accurate outside of cities
Since >40 people looked at my codepen on reddit and not one responded
var GEOCODING = 'https://crossorigin.me/http://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + '%2C' + lon + '&language=en';
@CrumrineCoder i'm not outside of a city. but as i told if you have dynamic ip, the chances to get a wrong location are high
can you tell me whats this??
var GEOCODING = 'https://crossorigin.me/http://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + '%2C' + lon + '&language=en';
your application gives correct location & correct weather @sorinr
@shivam13 i am calling google geolocation but to avoid cors problems i just call it through https://crossorigin.me thats all
ok
thanks @sorinr
shivam13 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @sorinr |http://www.freecodecamp.com/sorinr
@shivam13 this: $.getJSON(GEOCODING).done(function(location) is only to get the right city, state, country and nothing more
ok :smile:
Working on Wikipedia lesson: http://codepen.io/lalov1/pen/EyXyOz Is the search icon an icon from something like font awesome or an input field? I've tried both
you can use whatever you want, but I think its from the font awesome
it gives whole address or only city name?? @sorinr
btw watch the positioning here @lalov1
@shivam13 if you console.log(location) after calling $.getJSON(GEOCODING).done(function(location) you will see a lot of options but some of them are changing with every call. after trial and error i just decided to use : var address = location.results[2].formatted_address;
@shivam13 you tell me what is returning for you :)
@kirbyedy Thanks!
lalov1 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1241 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
This message was deleted
This message was deleted
This message was deleted
This message was deleted
This message was deleted
This message was deleted
This message was deleted
This message was deleted
Hello I'm getting 'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=abc. (Reason: CORS header 'Access-Control-Allow-Origin' missing).' has anyone ran into similiar problem? My codepen : http://codepen.io/d1sr3/pen/QEaPPr
@d1sr3 try this https://crossorigin.me/https://en.wikipedia.org/w/api.php?.......
Hi everyone! I'm doing the portfolio challenge and I included a navbar. I made the navbar so its responsive and it collapses and it's shown through a button in mobile devices, but I don't know why but the collapsed navbar button only works on desktop and not on mobile devices. Can you please help me?
@danielguerrah for me its working as it should
I think that the problem is that codepen for some reason reorders my javascript libraries and it somehow affects my code
And when I reorder the libraries it works again
But anyway sorry for wasting your time
I am having trouble doing a get request I would like to get information like this link explains: http://ip-api.com/docs/api:json but i am unsure of what is going on between the script tags. Can anyone help me
@sorinr Yay done :D http://codepen.io/Wo1v3r/full/BzJbgX/
Now animations
How can I fix the table to look the same @ low amount of table rows? when I hit offline it changes its looks dramatically
Rd Number 6, PJR Enclave, PJR Layout, Miyapur, Hyderabad, Telangana 500050, India
its returning me this @sorinr
its returning me this @sorinr
@shivam13 you can play with this: location.results[x] because with every refresh and same x you can get different data :)
ok
This message was deleted
hello why am i getting no response?
$.ajax({ url: 'https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&prop=extracts&list=search&indexpageids=1&pageids=&redirects=1&callback=&utf8=1&exsentences=1&exlimit=10&exintro=1&exsectionformat=plain&srsearch=' + this.value, success: function(response) { console.log(response); } });
@KoniKodes - I didn't see any responses to your message, and I don't really have a good response other than to say thanks for posting that. Perhaps it should be raised as an issue in the Github issues list? It seems like a good topic for discussion? So many things keep changing on the web / browsers / websites that it is all a moving target to try and learn and develop applications.
khaduch sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @konikodes |http://www.freecodecamp.com/konikodes
hi guys I am trying to do the weather app. Unfortunately I am having a lot of trouble learning to get JSON data and put it into the document, does anyone have any suggestions on resources?
@willcodes - I made a really basic Codepen page illustrating how to use the
http://ip-api.com/json site to get location data based on the IP address. It has no commentary, but it shows a $.getJSON call and how to read the latitude and longitude data. See this link. I won't say that it's self-explanatory, but almost? You can take a look and see - there isn't much there to try and figure out. It is just the latitude and longitude part of the task.
@khaduch you know what is the problem with ip-api? if you have dynamic ip it does not return the correct location
@khaduch if i get the lat and long returned by the api and put them on a google maps it will show my location with at least 12-15km (9-10miles) away. and if you want to grab the city at least from it sometimes its ""
@khaduch after a lot of struggle i have decided to deal with it this way: https://codepen.io/sorinr/pen/xOGdYz
@omgitsnes thanks so much I appreciate it :smile:
tommygebru sends brownie points to @omgitsnes :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @omgitsnes |http://www.freecodecamp.com/omgitsnes
get all the info at once?
Trying to figure out why my for loop is not grabbing all the data I need. Can I get someone to look at my loop on line 38
I'm working on the Local Weather app, and am running into an issue. On CodePen I am trying to use the console to show me what is being pulled back as my lat and lon. I have noticed that console.log is not working inside my $.getJSON function. Is this normal?
@MikeBeers ------->http://api.jquery.com/jquery.each/
@bryanraynor Can you post the link to the codepen? It should work
This message was deleted
at least it prints test1 and test3. just not sure why test2 or the data won't print
@bryanraynor check the error on the dev console
@bryanraynor Use the developer tools console. You have some errors. The call is not succeeding, so the function is not doing anything.
is that part of CodePen or part of chrome?
@bryanraynor dev console on your browser
@bryanraynor if you press f12
@bryanraynor Your issue is related to mixing https (codepen) and http (json call). If you instead use http to load the codepen page, the call will succeed and that console log is printed as expected
ah ha, got it. It's the little things that trip you up
@wearenotgroot but this is going thru a for loop?????
@bryanraynor (It will, however, show up after “test3” because the JSON call is asynchronous and it will hit console.log(“test 3”) before the call is completed.)
Hi, does anyone know how to add margin or padding, top or bottom for spacing between rows using only bootstrap?
Now I just have to see if there is a secure version of that api.
@sorinr - well, there is certainly an accuracy issue with the IP-based location. But (and I haven't looked at your post yet) I don't know if the goal of this exercise is to be absolutely spot-on with the location. Certainly the parameters of the exercise have changed to some extent, and I would say that the goal of this is to get something that uses a service to get location (you could base it on zipcode or postal code in the US, at least, or inquire for a town - have the user put in a more accurate location point and use that to access a weather site.) And the use the location to get the weather from a weather API site.
So I just used your site, and for my location that I'm currently in, it is off the mark by approximately 40 miles. But I would say that given the available options, it's fine. (Of course, I don't speak for freecodecamp - just my opinion.) The objective should be to learn the way to develop these sites. If you get to a point where it is your job to develop a real site, I would hope that your employer or person contracting our services to fund the proper resources to access an accurate site, using the most secure technology available. Just my opinion!
@adedic - I would say that since Bootstrap is a CSS package, you could just use a standard CSS method to add margin or padding. You can just add an additional
.row { margin-top: 10px; margin-bottom: 10px; } or values of your choice, and it should be applied to any div with the .row class. (Look up methods to customize Bootstrap classes, it should tell you what you need to do if my initial, simple example doesn't work.)
@khaduch yes i know its just an exercise to learn how to deal with apis. if navigator.geolocation.getCurrentPosition reports a wrong position in your case, don't blame me :)
Hello everyone
I have a question about tweeting a quote, the code for my button is the following, any help will be greatly appreciated. $("#tweet").on("click", function() {
$(this).attr("href", 'https://twitter.com/intent/tweet?' + randomQuote);
});
$(this).attr("href", 'https://twitter.com/intent/tweet?' + randomQuote);
});
@tzunun Do you have a codepen link?
I do but the code there does not have the tweet button yet, what I'm going to do is expand on the function to get the text from the input box where I'm displaying the quote. Is there a better option than codepen or cloud9?
Not that I know of. but if you do
https://twitter.com/intent/tweet?text= it should show the randomQuote in the input box
@tzunun why arent you using quote.lenght? on getting the random index. what if you expanded the number of quotes in the array?
@cysonya Thank you,
tzunun sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @cysonya |http://www.freecodecamp.com/cysonya
Hey guys I have a question about displaying a responsive bootstrap image with jquery (for the weather project), and I'm not sure how to format the syntax correctly...here is my code:
var img = "<img src='http://openweathermap.org/img/w/'"+json.weather[0].icon+"'.png' class='img-responsive' alt='Icon of weather'>";
$(img).insertBefore(".temperature");
@wearenotgroot yes that would have been better coding thank you for pointing that out.
tzunun sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1226 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
FCC curiculum needs updating. Nodejs needs to be replaced with PHP and react needs to be replaced with angular 2
PHP?
PHP is used by 80% of websites, node maybe 3%
@Rainz00 can you elaborate and state your general background please? I just wrapped up front end and was considering starting the data vis, but if React is outdated, I might head elsewhere for further learning.
well react apparently was the most popular framework last year with Angular behind it..with angular 2 out that could change but who knows how they judge those things. Everytime i new tech comes out it gets popular quickly
Well @Radascript , I personally believe that Angular 2 is going to be used almost universally when it comes out. Angular 1 is already ahead of react and angular 2 fixes all of it's problems plus it's backed by google
Also people were expecting nodejs to explode in popularity but it didn't happen. PHP is king and always will be
@Rainz00 @Dueldrawer8 so would you guys recommend skipping the data vis certification and learning angular to get better at building web applications and generally strengthening dev/dis skills?
no the data vis is very good, learn it
@Radascript read this..although he kind of admits he is a little biased towards react https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.mkozufaat
Had two questions about wiki project 1) the random page api doesn't return a snippet like the normal search api (or least i didn't see a way to) did anyone get around this? 2) my button shrinks w/e i search. driving me crazy and couldn't figure out how to fix. http://codepen.io/okeydoke/pen/RRQWkr
@Radascript angular, react, vue are just reactive data frameworks. the principles are somehow the same. the sintax its diff
hmm I see the certification for data vis section has both React projects and Data vis projects, I could maybe skip the react ones and head to data vis ones
yes data part you should learn.. honestly from a web dev point of view it doesnt matter if you learn angular or react.. even though the syntax and how they work are different the important part is learning to use a framework. At tech companies you will be using various tech's anyway
@Dueldrawer8 thanks will go read it
radascript sends brownie points to @dueldrawer8 :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @dueldrawer8 |http://www.freecodecamp.com/dueldrawer8
Angular 2 website has good learning materials if you want to learn it but it is still in beta so you have plenty of time @Radascript
PHP is embedded and used in a lot of companies code..but once again once you have practice learning different languages, stacks, frameworks etc.. it should be a little eaiser to pick up
Ok so what I'm hearing is that after learning React it probably won't be a huge effort to switch to Angular
@Rainz00 great thanks
radascript sends brownie points to @rainz00 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for rainz00
@Radascript Well they are two totally different frameworks
I would say pick one and learn it and then learn the other later
@Dueldrawer8 why do u say they are "totally" different?
@Dueldrawer8 yeah I think the fact that the projects on FCC evolve around React will push me in that direction for now, I like the structure of the challenges a lot.
@sorinr not toally different sorry, just from what ive heard just the syntax is different
all frameworks are different correct? Suppose to pick one that best suits your projet
FCC is a great site but uses all the wrong technologies imo
php is so much easier for beginners than node
@mkrump were you able to solve your second problem?
@Rainz00 I probably cant argue with that
@sorinr if you read the article i posted..there are a lot of differences
also mongodb will never take over from my SQL and PHP is integrated with mySQL
@Rainz00 Yeah another good point, mySQL is used more and a lot of devleopers use and know it
meanwhile im stuck with a windows computer..bah such garbage. I tried to learn and use git but its a pain in the butt..
@Dueldrawer8 i don't argue about the diff. i know they are a lot. but mainly angular, react, vue are doing same thing in principle. they keep the view and model in sync. the rest its just added value
@sorinr yes thats true
macs are so expensive..wont be able to get one for another couple of months
I personally don't use a framework, I think jQuery is all you need unless you are building something very large
@Rainz00 i love jQuery
@Rainz00 be cool and do it in plain js:)
@Rainz00 you get people who say plain javascript is "better"
see lol
If I was teaching web dev I would teach html ,css ,jQuery, PHP and Wordpress, That's where the money is
I am not an expert, but there are better options than PHP for the backend and mySQL for a retational database. Java and PostgreSQL are better options.
no they arent
asp maybe, not java
asp and oracle
@cysonya no. i wasn't. was going to take a break.
c# is the most beutiful language ever written so obviously it is nicer to work with but PHP can do the same things in an uglier way
@Rainz00 not with frameworks like laravel, symfony. they are not uglier anymore
@mkrump Oh ok, I was going to suggest adding the class 'row' from bootstrap may help
@Rainz00 the C class of languages are very powerful but it depends on your option as a developer if you go for desk or web
c# is used extensively for web
asp.net is c#
Can anyone help me with dl list elements...or how to create the same thing using bootstrap approach...I'm a rookie keep in mind
Im on project 1 btw...front end
@Rainz00 using what layers to "compile" it for the web?
https://codepen.io/FreeCodeCamp/full/NNvBQW/ trying to create the list in this example...
the whole .net framework is based on c#, web, mobile desktop and now microsoft have bought xamarin so ios and android will be written in c#
c# is what java should have been
Finishing up my Pomodoro Timer project. Looking for a good audio source to use when the timer goes off. Any suggestions?
@Rainz00 that was trying to say. for web you need a "layer" like .net to make C# code functioning
(And it was free)
what do you guys think of the "responsiveness" of my wikipedia viewer project?
http://codepen.io/duel_drawer8/pen/wGpmGe/
http://codepen.io/duel_drawer8/pen/wGpmGe/
I don't use .NET although I wish I did so I don't know
@HKuz Thanks!
dhuddleston sends brownie points to @hkuz :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @hkuz |http://www.freecodecamp.com/hkuz
I use PHP
@Rainz00 i don't use it too. tried to but i found php much easier to learn :)
Why is my hover not working?
.socButton {
color: #000000;
};
.socButton:hover {
color: #f5f5f5;
};Here is my pen: https://codepen.io/coder7215/pen/ezdoXr?editors=1100
hey guys I got this far with the wikipedia viewer would anybody be willing to help me with the next step
@sorinr tell me your email and I will send you some good books that I pirated
@coder7215 What is not working? I am seeing a hover state change for those buttons
Hmm. Let me try refreshing my page! @bscyrpt
woops! I meant @bsandusky
@Rainz00 just pm u
Huh. For whatever reason it isn't working in my browser. It has also decided to delete a picture in the about div. Do you see the background image on your computer? @bsandusky
what weather api am i supposed to use for the weather project? i tried the open weather api but it seems to have stopped working
I do see the background images, yes. @coder7215
@qeurago it works, I just finished mine
So weird. Maybe if it try a different browser . . . @bsandusky
@coder7215 There may be a conflict between the button element and the
<a> inside of the button, which could cause unwanted behavior.
well it was working just 5 or 10 minutes ago and now it is not
@qeurago whats happening?
nothing is happening
@coder7215 (ie you are getting the a-tag hover state not button hover state, possibly)
@bsandusky how would I go about solving that?
nvm
@coder7215 You can override the a-tag CSS within the stylesheet so that it doesn’t respond to hover. And then define what you want within the button styles. Or the other way around. Exploit the a-tag hover styles by writing CSS for what you want, which will override the current behavior. And then drop the button hover stylings