anyone out there good with API's
I have some questions I need to bounce off someone
anyone
?
Hey guys, I am working on the Wiki search and encountered a problem. Whenever I click on the search button, the information appears and then disappear. Can't find out the reason.
Any body has a clue?
Ok I figured out how
@skratchbreaker s one of your callback functions setting the inner HTML of the entire div instead of appending to it?
Hi guys can anybody help me find the issue why my navbar toggle doesnt work for small screens, it used to work earlier but today I opened it after a long time and it stopped working for some reason. Link:
https://codepen.io/nitinraghav/pen/NbPRQJ?editors=1100
https://codepen.io/nitinraghav/pen/NbPRQJ?editors=1100
is their a way to add multiple styles to one element without making a whole 'nother class
trying to keep my CSS neat
@sorinr Thank you! Cheers
:cookie: 886 | @sorinr |http://www.freecodecamp.com/sorinr
waqas909 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Hi, I am not sure how to implement it: click on button at navbar and it scrolls down by itself? I cannot find any info
Is there any way to link all Google Font API together?
I think you just do
+ after each font name
wait sorry, it's
|
How does one center a navbar tab?
i've tried vertical align, float, margin, stuff like that
You have a codepen link?
Ohh Thanks
@cysonya
Yes i do
trying to center the navbar banner in general
the donut..looking thing?
lol its a donut yes
i like donuts so i thought why not but it looks like crap aligned left
need in right in the middle
ok I'll take a look. That's a nice donut haha
thx lol
the code might look a little messy right now, sorry bout that
You can try, removing
navbar-left class, and do text-align: center to the tabcenter class
holy shit i forgot about navbar-left
haha
thanks dawg
No problem
hmm yeah that isnt working. let me try some other stuff now that navbar-left is out
wish their was just a navbar-center class lol
oh you have to remove display: inline-block
yeah i did that
it looks like you didn't end vertical-align: middle with
; ..? or you fixed that
yeah, fixed that. still not working lmao
I am trying to move my projects from codepen to Github. My portfolio page navbar is working on codepen after I added bootstrap quicklink to JS file but navbar toggle isnt working on github after adding <script> tag in <head>. help? heres head tag:
<head lang="en">
<title>Personal Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Abel|Amatic+SC
|Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/
bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/
font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="portfolio.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/
js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/1.11.3/jquery.min.js"></script>
</head>
this is a guess, but maybe put the jquery script above bootstrap?
@Twitchy-Cake that's weird, it worked when I did it in the developer tools...hmmmm
yeah no idea whats going, i've tried everything. hmm
aaah i see now, give navbar-header a width:100%
@cysonya it worked. thanks
nitinraghav sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @cysonya |http://www.freecodecamp.com/cysonya
@nitinraghav you're welcome!
god damn how does that work lmao
thanks @cysonya
twitchy-cake sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @cysonya |http://www.freecodecamp.com/cysonya
No problem.
hi. I am having an issues with my JS on smooth scrolling. Here is my codepen: https://codepen.io/shortBusDriver/pen/mOXpaQ
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I cant seem to get the right Xs filled out
I had another script. But, I had the same issues ….
anyone else think the current weather app is too simple for a portfolio? or is that just enough
@chunnali personally i would put any project you've completed on there. maybe label them from complexity or something idk, but anything helps
man @cysonya now im having trouble centering the tabs. they are already underneath the logo which is what i want, mind looking at it for me?
idk why i always have so much trouble with bootstrap lmao
@Twitchy-Cake You still here？Sorry I was busy with something :P
yeah but i just replaced it with buttons... but now i cant moved those lmao
i do like the buttons better tho
i tried to do the same thing i did with the logo but that had some bad results so :(
you can make links to look like buttons
@Twitchy-Cake love the bowie tribute :clap:
@benstoica thanks man
twitchy-cake sends brownie points to @benstoica :sparkles: :thumbsup: :sparkles:
Which element are you trying to center?
:cookie: 217 | @benstoica |http://www.freecodecamp.com/benstoica
@cysonya yeah, already did that. trying to center the <a> btn one, underneath the logo.
Ok I see, there's no text in there so I was confused haha
their should be hm
Put that button inside the
navbar-header div
the
navbar-header has a width of 100% so text-align will know how to center it
hmm not working
quick question guys
@grantknaver whatcha need bud
thanks man
I have had a horrible time dealing with api's
the text-align:center should be added to
navbar-header did you try that?
@grantknaver I know that feel haha
I am on my wiki project and I am trying to get my api to work
yeah i cant help you with that one but @cysonya might
@cysonya you open to helping out
Also, it's generally better to put your css in the css stylesheet instead of inlining
@grantknaver Yeah of course, got a link?
thanks @Twitchy-Cake
grantknaver sends brownie points to @twitchy-cake :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @twitchy-cake |http://www.freecodecamp.com/twitchy-cake
How ya doing people? Why cant i not scroll down when the page spills at the bottom
http://codepen.io/Merryl/pen/NbvOLO
http://codepen.io/Merryl/pen/NbvOLO
Because you set container to position fixed
@Twitchy-Cake I actually do have one question you might be able help me with.
@TylerMoeller Thanks so much!
javineya sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1070 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@grantknaver sure, i should be able to help you with HTML/CSS
I am trying to get the info that is submitted through my one input by my audience and get it do pop up in a div, you have any idea?
let me thinkk
here I will post my code
@cysonya thanks!
merrylarok sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @cysonya |http://www.freecodecamp.com/cysonya
does any one have a favorite google cursive font?
What do you guys think of GreenSock?
@grantknaver i dont really know how to do that if i am gonna be honest with you. never had to do something like that yet, but try asking people in the general chat, thats where a lot of em hang
@Twitchy-Cake thanks for the attempt
grantknaver sends brownie points to @twitchy-cake :sparkles: :thumbsup: :sparkles:
:warning: grantknaver already gave twitchy-cake points
hope you find an answer man :)
@grantknaver it would help if you can show your code :D
soo true
Ill post it right now @cysonya
ok!
cool style
I am trying to accomplish three things:
thanks
What three things?
- How to allow my audience to submit the form through pushing enter and not a submit button. 2. Populate apiContainer with submited content (I have an idea on this) 3. What the issue populating in console pertaining to the API means.
http://codepen.io/cabello986/full/EgwJKV/ Any feedback?
@grantknaver Ok, I will take a look!
@grantknaver i have jquery solution in mine for your #1
you have any idea how to go about it with javascript
I have been trying to become an expert with javascript before I lean on jquery to much
But THANK YOU
i would have to figure it out, im sure it's not too different
well post it up and if nothing else I will reverse engineer, hell, that will help me understand it more
I think to detect enter key it's
e.keyCode == 13
yep you have to do
e.keyCode in your start() instead of e.which
@hacu9 your computer isnt that smart
Let me know if it works
@cysonya thanks I mixed up jquery and javascript
grantknaver sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @cysonya |http://www.freecodecamp.com/cysonya
@grantknaver you're welcome!
so, now you need to get the value from input and display in container, right?
@hacu9 other than that it looks pretty good
I know i built it to be dumb :v
I didnt know how to make a decent AI so i its just random
computer always goes first, not sure about that
the look and sound and everything else is pretty good
@cysonya I dont think it is working when I push enter the whole screen refreshes
it's because it thinks you are submitting a form, you need to prevent default
uhh let me look up the syntax
Helllo Does anyone have snippet for smooth scrolling for the nav bar ( javascript/jquery).?
e.preventDefault()
aren't I submiting a form though?
Fixed the computer always going first xD
but the point of ajact is to refresh certain parts of the page not everythign
@hacu9 i tried to let the computer win, ...and was left with two spots for me to go, i would win in both spots, and i picked one and it called it a tie
exactly, so preventdefault will stop your page from refreshing, and allow ajax to do its job :)
Hmmmm weird
@hacu9 hate to throw more problems at ya, i know how that feels
@cysonya nope still erroring
can you post your most updated code?
will do. Out of curiosity how did you learn about Ajax and API's they are killing me
I usually Google around if I am stuck on anything :P
I have but it just aint working
I have been on this forever
did you read the wikipedia api docs? ...shows how to use theirs, ...sort of
exactly sort of
yea, i played around with those url's forever to get the results i wanted
part of my problem there is I have a gap in my knowledge
surrounding forms and how to access the information submitted
ok so it iis detecting the
enter keypress (I did a console log in it, and it's showing). Just need to figure out how to prevent page refresh
i showed a link to my wiki thing, it has a good way to get form info, felt easier to me
aah seems like there's something going on in the
submit() going to take a look
i read about the way i did it, and saw a few things about how sonya is telling you to do it
they both work
probly other ways as well
Question, is there a reason you are doing
.submit() instead of just calling your getApiInfo?
ok so you can do this
$('#mainInput').keypress(function(e) {
if (e.keyCode == 13) {
console.log('presssed');
$('#form1').submit(function(e) {
console.log('inside submit');
e.preventDefault();
});
}
});
OK thanks Im gong to did into this info Ill be back in a bit
you can remove my console logs haha it was just to check. This goes inside your
start function, basically on enter keypress, it'll submit your form with id of form1 and prevent page from refreshing. So now inside submit you can call your get api function
I am trying to figure how how to do this stuff in javascript
is twitch down?
i was practicing/setting up toggling buttons and all my streamers stopped showing
i commented it all out and it wont come back...
I'm trying to get an element to slide into place on page load using jquery. However, I am just finding stuff on requiring a mouse click
ok so the only jquery in there is just the
$('#mainInput') and $('#form1'), the rest is all plain javascript I think
@MessiaHack you got a link?
ya shouldn't be too hard
yeah, good luck! Let me know if you have any questions :P
@MessiaHack at the beginning of your jquery should be a document.ready, that stuff happens after the page gets loaded, ...should be able to just put some css styling in there to make it happen
$("#main").show("slide", {direction: "left"}, 1000); this should go inside your document ready function
and in order to
show() something, you need to first hide it with CSS
what did you mean about just calling getApiInfo
that way when your DOM is ready,
#main will show
@grantknaver when the user submits the form, you want to show them the wiki info right? So you need to call
getApiInfo to make the ajax call in order to display the data
@moT01 lol dw its always good to try n fix bugs
true
that was one of the original questions
@MessiaHack - hi Jerry - looked at your page. The background in the "About" section makes it hard to read some of the text, especially the "Languages and Frameworks" because you cannot scroll them up to be over the lighter color of the sky. Also your navbar is not "responsive", which it could be using the bootstrap navbar template code from their site. But looking like a good start!
when I try to do that I get this error... No 'Access-Control-Allow-Origin'
@khaduch I agree. Will be adjusting it.
@cysonya okay. so I have it set to visibility: hidden, but nothing is happening. What am I missing.
What element are you trying to slide?
and yeah it wont' work at first, it needs more tweaking
@MessiaHack cool pictures for that scroll effect, there needs to be a sun in the day picture right behind where the moon is
thanks @moT01
messiahack sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @mot01 |http://www.freecodecamp.com/mot01
the space one is the sun, u know what i mean
are there any good extensions on atom???
@MessiaHack btw it's
display: none not visibility
i need one to check (in real time) my js
and one for css
ooh sorry i mean @MessiaHack
i have one for html and works
but checking for js errors is much harder!!
@MessiaHack Yeah
display: none did the trick
@tommygebru i use brackets, works pretty good
that worked. thanks @cysonya
messiahack sends brownie points to @cysonya :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @cysonya |http://www.freecodecamp.com/cysonya
no problem
@khaduch how do I get my navbar to be responsive?
@MessiaHack - you can get the scoop on it here: https://getbootstrap.com/components/#navbar on the bootstrap website.
at the moment im using atom though
anyone know atom extensions to check my js errors?
@MessiaHack - basically, you need the "collapse" stuff, which changes the navbar to the "hamburger" icon when the screen is narrow enough to warrant it. And you also want to make sure that your JS external libs have jQuery.js and bootstrap.js, exactly in that order, because that operates the collapsed navbar to expand it.
thanks @khaduch
messiahack sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2027 | @khaduch |http://www.freecodecamp.com/khaduch
Nice hanging out with you guys, going to sleep now. Good night and happy coding!!
happy coding :smile:
@MessiaHack - you're welcome and good luck with that project!
Hello i have dudes about the challenge tribute page
im not sure about the user stories link
I haven't started javascript yet...but Portfolio project comes first...is it possible to do Portfolio Webpage without knowing javascript? I am lost here. I am done with my Tribute webpage. got stuck on portfolio.
@gphuyel yes you can
@gphuyel try using html and bootstrap to make it.
Ok thanks.
@gphuyel In my perspective, the whole point of the exercise is to create a website with only html and css and bootstrap to learn and become accustomed to those coding languages
@heroiczero
Thank you.
Will try with those three tools
@gphuyel :+1:
heroiczero
can u help me please
im taking the "build a tribute page" challenge but the link "user stories" send me to wikipedia :(
@jolsoto user story in defined in wiki , so you know what a user story is. It is basically what is required of you when you make your website for FreeCodeCamp
Hi guys, I am stuck trying to center these bullet points on the tribute page. Can anyone please give me some advice?http://codepen.io/Blaisebev/pen/YpeWxG
u can use this code in css
body {
margin-top: 60px;
}
margin-top: 60px;
}
lol
sorry
change div class="text-align:center;" to div class="text-center"
thank you Jose. Your help is appreciated! @jolsoto
blaisebev sends brownie points to @jolsoto :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @jolsoto |http://www.freecodecamp.com/jolsoto
@Blaisebev
sorry css is wrong
change div class="text-align:center;" to div class="text-center"
will do, thanks again man! @jolsoto
blaisebev sends brownie points to @jolsoto :sparkles: :thumbsup: :sparkles:
:warning: blaisebev already gave jolsoto points
send code i wanna see haha
not yet, change the wrong code on all divs
@Blaisebev on the bullet div you didnt change
@Blaisebev
maybe you need this on the css
maybe you need this on the css
ul {
padding-left:0;
}
ul li {
list-style-position:inside
}
@jolsoto I changed, but for some reason it did not work :/ Will try that solution and let you know @niconielsen !
@Blaisebev u have another div above the bullets need to change the class and save the project
here
<p>Here's a timeline of Sir Edmund Hillary's Life:</p>
<div class="text-align:center;">
<ul>
@jolsoto i think you mean div style
not div class
@niconielsen @jolsoto both solutions seemed to work, but the headline and non-bulleted texts shifted to the left margin. http://codepen.io/Blaisebev/pen/YpeWxG
@Blaisebev no bro... clear the css code and into the html code into the tag div u have a class
@Blaisebev use
class="text-center" on your first line
first line <div class="text-align:center;">
and 6th line <div class="text-align:center;">
and 6th line <div class="text-align:center;">
@Blaisebev @heroiczero replace class for style
replace this lines with this code <div class="text-center;">
see my code http://codepen.io/jolsoto/pen/eBVKpW
there's no classes defined in his css
so asigning classes to the divs will produce no changes
yep because i used the own tag classes!
@Blaisebev if you want to use text-align:center, then I would define a class in css and have
text-align:center; in css. remember all things that you want to change with design or structure is in the css
or if you want to embed css into html
you can use <div style="{CSS}">
the syntax between html and css is diferent... he is confused about it
@Blaisebev are you there? please dont go to the light! haha
thank you @heroiczero @niconielsen @jolsoto I got the header realigned, but now the bulleted list is back to the left hand side.
blaisebev sends brownie points to @heroiczero and @niconielsen and @jolsoto :sparkles: :thumbsup: :sparkles:
:warning: blaisebev already gave jolsoto points
:cookie: 462 | @heroiczero |http://www.freecodecamp.com/heroiczero
:cookie: 260 | @niconielsen |http://www.freecodecamp.com/niconielsen
check the 6th line in your code please
I'm not seeing what's wrong there.
@Blaisebev
<div class="text-align:center;"> that does not work if you want to use text-align:center; you have to use it in CSS and define it as a class like .center
u have <div class="text-align:center;">
the right code is <div class="text-center">
the right code is <div class="text-center">
like the first line
OR
@Blaisebev you could also use bootstraps pre-defined
CSS class text-center
Hello World! Long time no see! :)
welcome to FreeCodeCamp @NitinNair89!
@heroiczero yep that's right
going to try that @heroiczero @jolsoto I changed it, but something's not right.. still not lining up
for the bullet issue @Blaisebev
send the code again
i still suggest
@Blaisebev
maybe you need this on the cssul { padding-left:0; } ul li { list-style-position:inside }
the semicolon blaise
delete it
roger that! @jolsoto
@niconielsen thanks for the tip. I tried it in the css - it works, it's not properly lining up.
blaisebev sends brownie points to @niconielsen :sparkles: :thumbsup: :sparkles:
:warning: blaisebev already gave niconielsen points
Blaise, you wanna put the bullet on center?
Yes, the same formatting style like in Quincy's example
@Blaisebev Hi... Looking for something like this? - http://codepen.io/Nitin-Chandran-Nair/pen/ObQEWJ?editors=1000
yes exactly @niconielsen thank you! I'm going to try and do this without looking at the code use that as a reference for when I am stuck. I appreciate the help everyone!
blaisebev sends brownie points to @niconielsen :sparkles: :thumbsup: :sparkles:
:warning: blaisebev already gave niconielsen points
omg "design a portfolio" wth
i want to achieve this layout
<!Doctype html>
<html>
<head>
<title>Labs Test</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" href="sugarlabs.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="top">
<h1>Design</h1>
</div>
<div class="middle">
<img src="C:/Users/Japneet/Desktop/XO.png" alt="XO image">
</div>
<div class="buttons">
<button class="button">Drupa</button>
<button class="button">Drupa</button>
<button class="button">Drupa</button>
<button class="button">Drupa</button>
<button class="button">Drupa</button>
<button class="button">Drupa</button>
<button class="button">Drupa</button>
</div>
</body>
</html>
that looks simple @designercoder123 What problems are you facing?
put it in codepen.. it will be easier for all
ok
so, what's the issue?
i am not able to achieve that layout
i know i can do it by creating two different divs but i want to do it with just a single one
it looks fine in codepen
how do i center the bottom line
why are you not using Bootstrap?
i dont want to
or you can use css relative positioning to move the bottom line to the center
yeah how do i do that
for that i guess i will have to give the bottom buttons a different class or id
yep
@designercoder123
Gave a "new" class and position to 1 button from the bottom line:
.buttons > .new {
position: relative;
margin-left: 80px;
}
niice thank @NitinNair89
designercoder123 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
I am glad i could be of help to you @designercoder123 :)
i am wondering how can i get add or concatenate a div to the end of a parents children?
so that this blue div... will be the last of the other purple divs .... theres like 10
i have been trying .last() and .append()
the list scrolls down and i want the blue to be the last div in the parent container
codepen link please @tommygebru ?
i havent been using it in a while
@NitinNair89 let me post code
$("#streamers:last").append("<div class='streamers prime'><img src='https://68.media.tumblr.com/b01c74040cf2f9d80201f2bba6b0a88a/tumblr_ohnedqqqIV1sj6gx1o1_400.png'><span>Twitch Prime <em>Free for 30 days</em></span>");
there is an id of streamers (parent)
there is also children(aka class of streamers)
you know what i actually didnt make the list a specific parent!!
if i do that with a wrap then i can append to the wrap!
Hey. Can anyone help me with jquery?
ok
@Ash1108 ask
<div class="nav"> <!--navigation div opens here-->
<a href="#about" class="button">About US</a>
<a href="#project" class="button">Project</a>
<a href="#contact" class="button">Contact ME</a>
</div>
$(".button").addClass("Animated bounce");
<a href="#about" class="button">About US</a>
<a href="#project" class="button">Project</a>
<a href="#contact" class="button">Contact ME</a>
</div>
$(".button").addClass("Animated bounce");
i want to make my button class to animate. But it's not happening.
it should be
animated instead of "Animated". I hope you have added "Animate.css" in your <head> section of the page. @Ash1108
and the jQuery should go inside
<script> tag.
I am drawing a blank on how to start with the local weather app ... what assets should I use to get started with it ?
@Mr-Kumar-Abhishek start by looking for a weather API
@NitinNair89 okay should I use bootstrap as well ?
@Mr-Kumar-Abhishek It's your choice. The main aim is to retrieve the weather information. How to display and stuffs is totally depended on your creativity and choice of framework, responsiveness, etc.
@Ash1108 in addition to Nitin's advice, your elements with the .button class need to be inline-blocks to work with animate.css. Make sure your CSS has:
.button {
display: inline-block;
}So, if they're <span> or <a> at the moment, make sure that CSS is applied
@NitinNair89 okay , thanks :D
mr-kumar-abhishek sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@NitinNair89 thanks i was able to make it work
tommygebru sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
But I did not do anything @tommygebru :(
Glad it worked for you whatever you came up with :)
rubberducking
why isnt there a rubber duck emoji??
@NitinNair89 you helped plenty!
@NitinNair89 FreeCodeCamp/FreeCodeCamp#3714 I was reading on this ~
no @tommygebru I didn't do anything ..
@Mr-Kumar-Abhishek What's the doubt?
it was your availability and ability to respond :wink: helped me think of a solution
haha :laughing:
@NitinNair89 I was looking for a keyless API..
@Ash1108 check what @TylerMoeller said.. you can do that or just add the bootstrap
.btn class in your <a> tag
@tommygebru there is a :hamster: :D
geolocation doesnt work on codepen, chrome requires https connection. how can i make it work?
@bpalij your codepen should start with https://
just type it in he address bar
@kirbyedy does openweather also support https?
no
you either find one that is does, or you cheat with crossorigin.me
:P
@kirbyedy thank for crossorigin - great idea
bpalij sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1613 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
hello fam! can you use a webkit or flex boxes without a divs??
@artoodeeto you can
technically, yes
@Adi2Point0 do you have examples sir???
@Adi2Point0 and can I pm you??
why would you not want to use divs?
what other element you want to use flexbox on?
@artoodeeto you can.
@kirbyedy crossorigin doesnt work with that api
@coymeetsworld @Adi2Point0 well i have an img on the left and a text on the middle and a img on the right. floating the img and the text on the left will destroy the header
@artoodeeto : Simple way would be to wrap those elements inside a flex div of their own.
@bpalij I am pretty sure it does...put https://crossorigin.me/http://openweather...blablabla
$('iframe').attr('src', 'http://player.twitch.tv/?channel=' + valData.stream.channel);
I can make one of them work like this
'http://player.twitch.tv/?channel='+'freecodecamp'
'http://player.twitch.tv/?channel='+'freecodecamp'
@kirbyedy i did that, getjson doesnt launch success function
hmmm
if you cant solve the problem, try to use darksky weather api
or wunderground
@pokerfacegg do you have callback=? In the getjson request URL
@Adi2Point0 sorry went out. wait what?? wrap each of them?
Why i got 404 error when i clik help?
help :(
can i pm someone whos not busy? please. bad just some basic css
sure @artoodeeto
@mesopotamija9 @openweather? have tried to append your api-key?
can maybe somebody see my mistake, as to why i dont get sth back from openweather but when i hardcode the coordinates it works fine?!
$(document).ready(function() {
//needed variables
var lat;
var long;
//get Coordinates
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
$("#data").html("lat: " + lat +" long: " + long);
});
}
//contact API with local position
var api = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=21c945aa95f4a12c84d534290a234175';
$.getJSON(api, function(data) {
alert("!");
var weatherDes = data.weather[0].description;
});});
i get coordinates successfully, but sth seems to be wrong with the query-string
when i enter the coordinates into the string, then everythings working fine
add a callback and try
Hey
I have similar problem as well
my weather app used to work perfectly las week
and now it does not get data from API. Could anybody please check what might be a problem
may be global warming is becoming a serious threat to the extent of breaking the weather apps!
@Adi2Point0 But really, I know 100% that it worked perfectly well.. and now i can't get any JSON data even if passing the function separately from all the other code... Is it just me, or sth wrong with codepan / openweather...
I could see the data if I directly hit that url from the browser
@TatjanaBezsazna
but not via ajax call
@TatjanaBezsazna same for me
damn... @Adi2Point0
haha
seems like this problem is making you mad to the point you've become recursive
So is there anybody who can help? :(
@NitinNair89 sry, i dont understand what i'm supposed to do... do you see anything wrong with the concatinated string "api"?
no, but just a thought of the callback
actually my weather app also stopped working since last week
sooo... its a non-weather-app-success-weekend?
lol
well alright then i'm gonna hardcode the coordinates and try again some other time. i just thought someone might yell out some mistake i couldnt see
@NitinNair89 Is there any chance that codepan.io has blocked api's from openweather or sth?
help agian??
no wiki entry for:
agian
need help. someone?? anyone??
@NitinNair89 thanks and have a nice weekend
lynguist sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@NitinNair89 i figured out the problem
my variables "var lat" and "var long" are "undefined"
i cant understand why this is the case
maybe someone can help me with that i posted the code a little further above
@TatjanaBezsazna I really don't know.. :(
@lynguist can share your codepen link ?
Hi, I am building a web application where the html page takes the search query to server and server sends json as a result. Now I need that json to run my d3.js code to show visualization on the webpage. I am able to send json from server but I am not able to figure out how to use that to client and invoke my d3 code. Can anyone exaplin me how I can do that.
@TatjanaBezsazna nope. but if ur using geolocation and need to load the pen over https in order to work u may use https://crossorigin.me in front of your openweather url
hello my old random quote machine is broken , I was trying to fix it... But now I need some help, could someone help with the issue of
http and https maybe some workaround ? Mr-Kumar-Abhishek/random-quote-machine#2
https://mr-kumar-abhishek.github.io/random-quote-machine/ <-- my quote machine
@Mr-Kumar-Abhishek try to put the above crossorigin.me in front of your api call. its just a workaround but it should do the trick
@sorinr alright thanks
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 887 | @sorinr |http://www.freecodecamp.com/sorinr
@Mr-Kumar-Abhishek np
@NitinNair89 it was an asynchronous call! the ajax request goes out BEFORE lat and long are even getting their values
hhmmpppffff
2 hours
well... i'm out now, see you
Hello All!
Have we been taught everything we need for the Codepen Portfolio challenge?
I feel like I've just been pushed into the ocean
ok @lynguist See ya
I'm on the "Build a Tribute" page of free code camp and i have no idea where to start. any help?
@computersciartist have you chose a tribute?
@wong3030 No, and yes, it's an ocean. You have to figure out the html and the css needed to make that portfolio happen. At first, it might not be much, but once you are done, move forward. When you learn new things, come back to the portfolio and update it.
@wong3030 yes
@NitinNair89 So I have to so do I just press done challenge and do more lessons on this website?
@computersciartist have you made a h1 element with their name?
Yes @wong3030 Keep on moving forward, don't quit :)
@wong3030 yes, i did that too - also made a <p> element with just a line of what they were remembered for
@computersciartist tends to help me to use jumbotron first to wrap the entire thing.
but after that im lost
but learn new things and challenge yourself on how can you make your portfolio stand out so that "clients" can contact you
@wong3030
@NitinNair89 hmm, thank you man. I feel so lost. This is completely different from the tribute page
wong3030 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Yes it is @wong3030 . I spent good hours on that too.. it was fun to learn new things being thrown out so suddenly. But trust me when i say, that's the best way to learn quick
@computersciartist I think the easiest way is to include bootstrap
@NitinNair89 I just took a piece of paper and drew how I think my portfolio should roughly look like half an hour ago, still so lost
@rhkina Oh yeah that too lol
@wong3030 You're on the right track.
@rhkina do you mean just implementing different aspects of bootstrap? or something specific?
since you're new, your portfolio will not contain much but just about yourself and how others can contact you, why you do what you do, hobbies, etc.
@wong3030 make a photo of that piece of paper and share it with us. you will get a lot of ideas back on how to start working on it
Good to see you @sorinr :) long time
Good idea..
@sorinr uh, I rather not my drawing skills is not particularly van gogh
Hello folks
@NitinNair89 i'm here every day :)
are not**
@wong3030 we will not judge your drawing skills. its just to help u out with the layout
http://codepen.io/futuristicHat/pen/MbrpGb?editors=1000 Why is my data-spy not offsetting the target id correctly?
@zKruki add also in pen settings javascript part bootstrap.js lib not only jq
@sorinr ill give that a go.
@sorinr yeah, but i couldn't.. :P
@NitinNair89 then welcome back:)
@sorinr it doesn't work :/ https://gist.github.com/Mr-Kumar-Abhishek/a19c9c57c76143ae536396155ebae390
haha @sorinr good one
you guys run this in the console
var measure = (func) => {
console.time('execution time');
func();
console.timeEnd('execution time');
};
var mapWith = (predicate, list) => () => list.map(predicate);
var square = x => x * x;
var list = [2, 4, 6, 8, 10];
measure(mapWith(square, list));
@Mr-Kumar-Abhishek what error do you get?
@sorinr i tried enabling in settings: nothing
its also typed into the body for good measure: nothing
its also typed into the body for good measure: nothing
@sorinr ? why ? 0.o :confused:
@sorinr oh , hold on
@zKruki check example
@sorinr no errors in my js but a couple from bootstrap js via CDN
@Mr-Kumar-Abhishek so its working or not?
@sorinr no it is not working ... I am posting the errors too...
@sorinr what am i looking for? if you click portfolio in the navbar you'll see that it needs an offset.
@sorinr so... the unrelated errors via bootsrap js and my code ~ https://gist.github.com/Mr-Kumar-Abhishek/a19c9c57c76143ae536396155ebae390
@zKruki reload that pen now and let me if this is what u want
@sorinr i should probably refactor this while waiting for your answer
@Mr-Kumar-Abhishek sorry. have something to finish and i will clone it on my comp to look into it
@sorinr np and thanks a lot ! :)
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mr-kumar-abhishek already gave sorinr points
@sorinr no =\ its still not lining up with the top of the container.
@Mr-Kumar-Abhishek its working for me
@sorinr np the master branch ??
@zKruki what do you mean?
@sorinr the master branch ?? *
@Mr-Kumar-Abhishek yep
@sorinr the master branch has doesn't have the changes with cross origins , changes are here https://gist.github.com/Mr-Kumar-Abhishek/a19c9c57c76143ae536396155ebae390
@sorinr detailed problem here Mr-Kumar-Abhishek/random-quote-machine#2
@sorinr http://codepen.io/futuristicHat/pen/MbrpGb?editors=1000 run this and open the navbar menu, then click portfolio. the heading is 'under' the navbar.
@sorinr you mean it does work with crossorigins ??
Hello guys
@Orcscanprogram welcome ~
@zKruki yes. just give your #portfolio a margin-top or padding-top of 80px; i showed u in my pen example
I'm trying to build a tribute page and for some reason my footer always gets inserted ::before a table. Could you advise on what might be the issue?
@Mr-Kumar-Abhishek i mean i've cloned the master repo and its working
@Mr-Kumar-Abhishek crossorigin its just a proxy. it should work
If I inspect in the browser then I can see that the footer got forcibly moved before the table and I can move it after manually to achieve the desired result. But it doesn't seem to work in codepen.
@Orcscanprogram I have to keep my master repo working , but you see the live version with latest firefox https://mr-kumar-abhishek.github.io/random-quote-machine/ it will block non-https connection
@sorinr have to keep my master repo working , but you see the live version with latest firefox https://mr-kumar-abhishek.github.io/random-quote-machine/ it will block non-https connection *
@sorinr live version is with master branch
@Orcscanprogram previous message wasn't meant for you..
@Mr-Kumar-Abhishek i've seen u get a mixed content errors
@Orcscanprogram yes firfox completely blocks it here
@sorinr yes firfox completely blocks it here *
@Orcscanprogram apologies xP
@Mr-Kumar-Abhishek chrome also
@sorinr https://crossorigin.me/ doesn't work try it yourself https://gist.github.com/Mr-Kumar-Abhishek/a19c9c57c76143ae536396155ebae390
@sorinr maybe it doesn't work here ??
@Mr-Kumar-Abhishek yes. i've seen
@sorinr yes, so I have tried other proxies too.. it doesn't work .. there should be something wrong with my approach
@sorinr I cannot figure out what ~
@Mr-Kumar-Abhishek i was looking into that. if i find a solution i'll let u know
@sorinr thanks ! ^_^
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 888 | @sorinr |http://www.freecodecamp.com/sorinr
@sorinr thanks i see what you did, its just not the design i had in mind. http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h is what i would like to replicate.
zkruki sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 889 | @sorinr |http://www.freecodecamp.com/sorinr
@zKruki then use data-offset="50" 50 beeing the height of the navbar
@sorinr i am =)
I'm trying to build a tribute page and for some reason my footer always gets inserted ::before a table. Could you advise on what might be the issue?
So can anybody help with this one please? I've got one footer working as intended, but the next one does not move to the bottom of the page.
@sorinr you know, padding might be the answer. you said that earlier
@zKruki :+1: i'm not using bootstrap lib
@zKruki you can also try with margin-top
@Orcscanprogram use this to clean your html code dirtymarkup.com/
@sorinr margin top worked, it just leaves a gap in the sections. for example i dont want the body bg-color showing. gonna try padding.
@Orcscanprogram use this to clean your html code http://dirtymarkup.com/
@Orcscanprogram it is html error maybe you have not closed an html tag or messed up the structure of html parent and child tags
@zKruki thats why i said. try padding or margin witch ever sweets ur needs
@Orcscanprogram after formatting you could trace the error properly ~
@Mr-Kumar-Abhishek bookmarked, it worked, thanks a lot!
orcscanprogram sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 410 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@Orcscanprogram np
@sorinr yes. had to move the id's around but it works
@zKruki :+1: i would also give to the about section a min-height: of at least 400px;
@sorinr i should have paid attention to the css of the example.
How to make getJSON work with wikipedia api? XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch&search=undefined&limit=1&namespace=0&format=jsonp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
function goTo(){
var title=$("#search-input").val();
goToTitle(title);
};
function goToTitle(title){
title=encodeURIComponent(title)
var link="https://en.wikipedia.org/w/api.php?action=opensearch&search="+title+"&limit=1&namespace=0&format=json";
$("#problem").css("visibility","visible");
$.getJSON(link,function (json){
$("#problem").css("visibility","hidden");
moveTo(json);
});
};
function moveTo(json){
console.log(json);
};
@zKruki and plz move all inline styling like:
style="margin-top: 3.125em; background-color: #540E24;" to the css part of the codepen. inline styling its used now more on html email templates for example
@sorinr ill do that. can you check to see if i did the min-height css correctly? i didnt notice any difference.http://codepen.io/futuristicHat/pen/MbrpGb?editors=1100
@zKruki you can increase it to 600px and trying to center vertically the text and img. the idea is that it gives you the impression of a full page height of content
@sorinr yes i see that on the project example, sweet! i didn't know it was related to height
var obj = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}];
var children = [{"name": "priorityAlertsCount", "size": 20}];I want to add the children array to obj object, any hekp on this ??
I have a question regarding what I think is the issue with browser based API access from codepen
Has anyone been able to do the "Show the Local Weather" challenge in Chrome? I cannot for the life of me figure it out... everything I try to do with any api gets errors.
@Rakesh18754 to push another array into your obj, you'd just do obj.push(children)
because your obj is array to start with
so this is the code @Rakesh18754
var obj = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}];
var children = {"name": "priorityAlertsCount", "size": 20};
obj.push(children)
i didn't set the children as an array, what way, when you push children to obj, you are pushing an object into another object
you can then do things like obj[0].tagValueName and obj[1].name
@n0ahhhhh i finished the weather one
recently?
can you link me to your codepen? I literally just want to see how to get the geo data. I can figure the rest out on my onw
own*
on the tribute page does it have to be time line based only?
hello
@n0ahhhhh See this issue for background: FreeCodeCamp/FreeCodeCamp#7853
This pen shows how to do a fallback to get less accurate location if your browser doesn't support navigator.geolocation: http://codepen.io/TylerMoeller/pen/ZBBEGq?editors=0010
This pen shows how to do a fallback to get less accurate location if your browser doesn't support navigator.geolocation: http://codepen.io/TylerMoeller/pen/ZBBEGq?editors=0010
@stewie73 No, the timeline isn't 100% necessary
@n0ahhhhh if you use ip based geolocation api like http://ipinfo.io/json you will not having problems on calling openweather api over http. the downturn of an ip location is that if an user has a dynamic ip it will probably report a wrong location
o cool
@n0ahhhhh does that answer your question?
I read that, yes, but it seems like every time i try to use it i get SOME kind of HTTP/HTTPS error
the way I did it was use two services, https://ipapi.co/json/ to get the city and then i used OpenWeather api to get query via city
want to paste your code?
One thing they don't teach in Free Code Camp is mixed-content and HTTP vs HTTPS.
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
TL:DR - it's best to use APIs that support HTTPS
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
TL:DR - it's best to use APIs that support HTTPS
@n0ahhhhh take a look at your codepen url. are u loading it over http or https?
has anyone worked on something like this? https://www.html5rocks.com/en/tutorials/cors/
i'm using codepen and trying to do the build a wiki api, and i'm running into the cross-origin issue on the browser side
is this the way to solve it?
without moving to the server side?
It depends on the API, but you usually add
&callback=? or ?callback=? to the API URL to treat the request as JSONP and work around CORS issues
@TylerMoeller yep. :+1:
Good morning/afternoon @sorinr :)
@TylerMoeller okay, can you explain more
@TylerMoeller hi. its 17:35 in here
is this some type of standard knowledge?
i just read up the cross-origin policy, didn't know this. do most api support this
callback=? functionality?
Yes, most APIs support it, but some require a different call, like
jsonp=?, it is usually in the documentation
@sparklie3 most of them
got it. thanks @TylerMoeller @sorinr . Let me read this, i didn't see this in the Wiki API documentation
sparklie3 sends brownie points to @tylermoeller and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 890 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1071 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
I'll get back to you in a few minutes.
thanks for the help and pointer, someone else on the channel previously just said, don't use codepen it sucks...blahblahblah
and then told me to just do it on the server side, which defeated the point of learning about this issue
so thanks for being helpful
Lol, this is definitely not specific to codepen. Sorin and I have been through this with a bunch of APIs
Sorry you had to deal with the confusion around it though...
@sparklie3 if you talking about the codepen ide i agree. i personally don't like it as an editor. i prefer to work locally on my machine and then copy paste the code to codepen
no worries, i think one of the slightly untold stories about learning to code
is learning to interpret answers and know what to learn
given all the technologies out there and frameworks/etc. sometimes, a new person can easily be overwhelmed by all the details
@sparklie3 just take ur time and enjoy coding. the rest will come afterwards
I'd prefer to work locally, but I just don't know how to set it up. :(
for my local, i use just c9.io
it's not truly local
but the setup so so simple that i don't have to worry about it
@n0ahhhhh use node.js with some http server. c9 its not local. its cloud
I prefer doing it all in codepen, then I copy locally before deploying to GitHub. Everyone has a preference.
can anyone explain me this snippet of code
function multiplier(factor)
{
return function(number)
{
return factor;
};
}
var twice = multiplier(2);
console.log(twice(2));How is he passing '2' to a variable 'twice'
this code is working
@sorinr
is there a way in bootstrap to vertically align a section or do i have to do that manually with css?
@sorinr , I just am unclear on how to actually set up the http server stuff
@zKruki You'll have to do it with CSS, no built-in vertical alignment classes in Bootstrap 3.
@n0ahhhhh just go https://www.npmjs.com/ and search for express or http-server etc
@n0ahhhhh but you have to install node.js first
@TylerMoeller thanks
zkruki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1072 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@sorinr okay. i'll look into it. Thanks! I can understand coding and programming just fine, it's literally setting up the environments and stuff that always confuses me.
n0ahhhhh sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 891 | @sorinr |http://www.freecodecamp.com/sorinr
@n0ahhhhh welcome :+1:
@sorinr Do you run a HTTP server locally to test your front-end projects?
@n0ahhhhh if u prefer also a traditional server look for wampp, xampp, lampp whatever youlike
@TylerMoeller yes. when i wanna test something on https i upload it to my domain that worked over https too (not for the moment coz i wanna change the hosting) :)
@TylerMoeller if you wanna use node-gulp combination i can pm send u an archive i use for almost any new project
@sorinr I haven't started using gulp - need to set that up. Just using githooks and deploying to github. I have a raspberry pi at home running LAMP for playing around with server-side stuff. Digital Ocean droplet for playing around with HTTPS
@TylerMoeller got it
@TylerMoeller lamp its just fine. i've used it a lot for my php based projects using laravel, ci, symfony
@TylerMoeller here what i found: http://thisdavej.com/beginners-guide-to-installing-node-js-on-a-raspberry-pi/
@TylerMoeller don't know if is helpfull in any way for you
@sorinr I haven't done much PHP aside from slight modifications on Wordpress. I run a local NodeSchool chapter, so understand all of that a lot better.
@sorinr i figured it out....=)
@zKruki :+1:
@zKruki what have you decided?
@zKruki i took your advice
@zKruki not sure if its exactly what you had in mind
@zKruki its ur design. u are the master chef on that pen
@sorinr i vertically centered the text beside the image
@sorinr the bad news is: the image isn't clearing the float css now.
@zKruki on desktop view i would let them both be vertically aligned and on mobile the img on top and text below
@sorinr yes
@zKruki you have a damn lot of floats in your css code :)
@sorinr LOL
@sorinr who needs bootstrap??
@zKruki i personally avoid using floats. i prefer flexbox
@sorinr thats what i used for for aligning the text, flexbox
@sorinr im afraid the flexbox is whats causing the issue
@zKruki nope. its all the other elements having a float property that behave diff
Okay,. I'm still stuck on the local weather thing... I was able to get my coordinates, but now when I try to access the OpenWeatherAPI with the following code, I get an ERR_CONNECTION_REFUSED message.
```
function getCity(latNum,lonNum) {
$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=" + latNum + "&lon=" + lonNum + "&appid=" + appId, function(data){
cityName = data.name;
$("#city").html("Your city is: " + cityName);
});
};```
$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=" + latNum + "&lon=" + lonNum + "&appid=" + appId, function(data){
cityName = data.name;
$("#city").html("Your city is: " + cityName);
});
};```
@zKruki if it will be my project i would switch all to flexbox. no floats at all
shit.
function getCity(latNum,lonNum) {
$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=" + latNum + "&lon=" + lonNum + "&appid=" + appId, function(data){
cityName = data.name;
$("#city").html("Your city is: " + cityName);
});
};
I keep getting a "GET.... ERR_CONNECTION_REFUSED" message with this. I was able to access ipinfo.io the same way as this
@n0ahhhhh Change it to:
function getCity(latNum,lonNum) {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?callback=?&lat=" + latNum + "&lon=" + lonNum + "&appid=" + appId, function(data){
cityName = data.name;
$("#city").html("Your city is: " + cityName);
});
};
Open Weather Map does not support HTTPS and you need
?callback=? in the URL for JSONP
@sorinr dont tell me that!
@TylerMoeller I just added that, but now I'm getting some http/https stuff regarding codepen. My codepen needs to be http, right?
it funny how these projects work. flexbox wasn't even mentioned before.
@n0ahhhhh Yes, your codepen needs to be HTTP and you need the ?callback=? in the url
Put the callback before
lat=
Exactly as I have it above
my fault though, flexbox is css...
Ah, I appended the callback to the end. let me try again.
@zKruki don't get me wrong. i said if it will be my project i will switch using flexbox instead of floats. do not take it as an offence. its just how i would do it. if you feeled offended i oppologyze
@sorinr none taken. just alittle #failsauce
@n0ahhhhh If you want it at the end, use
Basically, you're adding
&callback=?"http://api.openweathermap.org/data/2.5/weather?lat=" + latNum + "&lon=" + lonNum + "&appid=" + appId + "&callback=?"Basically, you're adding
callback=? to tell getJSON to treat the request as JSONP. The URL parameters begine with a ? and are separated by &
@TylerMoeller okay.. now I'm making progress.. I wish freecodecamp talked about this at least a little bit
@sorinr the whole pen is based on floating the blocks, its hard to accept.
@n0ahhhhh Yeah, I agree, they need more lessons around this. Really confusing at times.
At least now you know how to handle it with all the other APIs you'll be using in the future :)
@zKruki i've seen. but floats r hard to control if you have a dynamic site and you wanna "inject" some new content into the page.btw u don't have to accept anything. it was just a suggestion.
@TylerMoeller Okay.. I was finally able to get the city name. I should have the rest of this figured out on my own. Thanks!
n0ahhhhh sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1073 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@sorinr floats are not hard if you understand how they work and how you use them in the structure of the layout.
flexbox is cool and everything, but there are some rendering issues that were brought up about using flexbox for an entire layout of a website
@n0ahhhhh Happy to help - have fun with the rest of the project
@itsacoyote yea. i just feel comfortable with flex. i don't even use bootstrap. prefer plain own css
@TylerMoeller actually, one more question. when I use ipinfo.io/json it seems to work fine. but when I use ip-api.com/json, it gives me a ERR_BLOCKED_BY_CLIENT message. Any idea why?
@n0ahhhhh Do you have an Ad Blocker on by chance? ip-api.com gets blocked by my ad blocker
I have uBlock Origin installed.
@sorinr same here, but I find floats to be easier to work with on more complex layouts
It's likely that -
ERR_BLOCKED_BY_CLIENT means it is your browser that is blocking the code, not the server
@sorinr there's just some nuances you need to know with floats to make sure they work solidly
@TylerMoeller got it.. works now, haha. I feel silly after that one.
:)
@sorinr thanks
zkruki sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 892 | @sorinr |http://www.freecodecamp.com/sorinr
or there's CORS involved wit hthe ip-api.com
@itsacoyote CORS error isn't
ERR_BLOCKED_BY_CLIENT
It's something like
No 'Access-Control-Allow-Origin' header is present
@zKruki welcome
@itsacoyote the problem i see with floats is that if you want to add new dynamic content you have to keep count on how all other elements are floating around
another problem related to the local weather challenge... I can access the weather info just fine now.. but in the "weather" array I'm expecting to see only one set of information.. (id, main, description, icon). However, I'm getting two different arrays within the weather array, like below
"weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10n"},{"id":701,"main":"Mist","description":"mist","icon":"50n"}]How do I go about accessing just the first "main" (rain)" I tried weather.[0].main, but that didn't work.
@n0ahhhhh here an example
what are the practical examples of closures?
@sorinr
@sorinr
@MohammadHasham try thisone: http://javascriptissexy.com/understand-javascript-closures-with-ease/
@sorinr Thanks
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 893 | @sorinr |http://www.freecodecamp.com/sorinr
@MohammadHasham welcome
i just finished the most basic functionality for building a wiki, would someone mind testing it for a sec and provide any quick feedback? https://codepen.io/sparklie3/full/ObWeBm/ > that way, i can then go about enhancing the design
hello, I'm about to start the intermediate projects
@0sk4rgp they aren't that bad, a little more challenging than the beginner ones
i just finished my 3rd one
[{
"tagValueName": "Name1",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
},{
"tagValueName": "Name2",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
}]
I want to convert the above array into the below format
[
{
"tagValueName": "Name1",
"priorityAlertsCount": 20,
},
{
"tagValueName": "Name1",
"investigationAlertsCount": 20,
},
{
"tagValueName": "Name2",
"priorityAlertsCount": 20,
},
{
"tagValueName": "Name2",
"investigationAlertsCount": 20,
}
]
@sparklie3 yeah, not so bad from what I see, thought they were tougher since it says it takes arround 100 hours
@Rakesh18754 why?
why are you duplicating tagValueName?
if they are the same?
@sparklie3 the wiki s looks good
@0sk4rgp thanks, i can now go clean it up to look nicer
sparklie3 sends brownie points to @0sk4rgp :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @0sk4rgp |http://www.freecodecamp.com/0sk4rgp
@sparklie3 I'm on the 8th day, maybe i can get the 1st cert in a month or 2(hopefully) :P
@0sk4rgp yeah, 1 - 2 month shouldn't be too hard, the algos to get a lot tougher
i jumped around a bit, but the advanced algo, they take some time
i'm still stuck on one of those
@Rakesh18754 if you really want to, you can iterate over your original obj something like this
for (var prop in obj[0]){
console.log(obj[0][prop]);
}
@sorinr Thanks again. :)
:cookie: 894 | @sorinr |http://www.freecodecamp.com/sorinr
n0ahhhhh sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
@sparklie3
actually I want to write a function that will accept the below array as input
input :-
[{
"tagValueName": "Name1",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
},{
"tagValueName": "Name2",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
}]
and will output the transformed array as below
[
{
"tagValueName": "Name1",
"priorityAlertsCount": 20,
},
{
"tagValueName": "Name1",
"investigationAlertsCount": 20,
},
{
"tagValueName": "Name2",
"priorityAlertsCount": 20,
},
{
"tagValueName": "Name2",
"investigationAlertsCount": 20,
}
]can u help me with this?
@n0ahhhhh welcome
but i don't understand why?
why are you duplicating and separating out the values associated with tagValueName?
@sparklie3 actully i will pass it to a function which requires data in that format only
but you can easily do that now without separating the data, you can just do
obj[0].tagValueName or obj[1].tagValueName
if you want to grab the value tagValuesNames for the first Name1 or Name2
if you need to pass 2 values to this function, you can just iterate and grab the values, like
obj[0].tagValueName;
ojb[0].priorityAlertCount;
no no....actually the fucntion loops over the object in a tree depth wise way...tats y....i want that format only
if you want to set it into another array, you can just create that on the fly
var newArray = [{
'tagValueName': obj[0].tagValueName,
"priorityAlertsCount": obj[0].priorityAlertsCount
}]
i'm not sure why you'd do this, but you can just iterate over the your obj array and create these new objects on the fly, if that's how the function works
hi guys. can i PM someone for help??
hi guys. i have a nav bar but its has a small gap in between. even if i adjust the padding and margin to 0px. anyone can help?
@artoodeeto I can take a look
@TylerMoeller ill pm you sir
why class="container"> is used
Would anyone be able to show me what I'm doing wrong with a jasmine test?
why class="jumbotron" is used
@charan1922 This is explained in the bootstrap documentation: http://getbootstrap.com/css/#overview-container
http://getbootstrap.com/components/#jumbotron
http://getbootstrap.com/components/#jumbotron
@AJMorrisClark We don't learn Jasmine here at Free Code Camp - have you tried asking for help on their google groups page? https://groups.google.com/forum/#!forum/jasmine-js
@TylerMoeller tq
charan1922 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1074 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
guys, please help me, I have a problem with navbar - all menu buttons are linked to div id's on one page but when I click them they overlap the div by about 20px http://codepen.io/lex131/full/PbQXwR/
@lex131 There are lots of solutions here: twbs/bootstrap#1768
I use this JavaScript to address the problem:
I use this JavaScript to address the problem:
const scrollAdjust = () => scrollBy(0, -50);
if (location.hash) scrollAdjust();
window.addEventListener('hashchange', scrollAdjust);
^^ Adjust the
-50 to change how much space is above the headings
@TylerMoeller thank you but do you have any idea how I would go about doing this using css bootstrap and html only ? :) because i haven't reached freecodecamp that far so I know nothing of javascript so I don't understand what i'm doing using your solution
:star2: 1075 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
lex131 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
sorry, i hadn't clicked your link
exactly what i needed
i will read there
@TylerMoeller thank you!
lex131 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: lex131 already gave tylermoeller points
why class="thumbnail is used
still struggling with http to https :/
@Mr-Kumar-Abhishek Is this for your Quote Machine on github? Github pages require HTTPS now, so your Quotes API must also support HTTPS. All of your links need to start with HTTPS:// or you will get errors/warnings.
This goes for APIs, images, css resources like bootstrap, JS resources like jQuery, etc.. Everything needs to use https
@TylerMoeller I know that very well Mr-Kumar-Abhishek/random-quote-machine#2
@TylerMoeller however....
@TylerMoeller I was looking for a workaround :)
@TylerMoeller yes, those are it is from the same repo
@Mr-Kumar-Abhishek The workaround is to use a different Quotes API that supports HTTPS. Such as: https://quotesondesign.com/api-v4-0/
@TylerMoeller I was using jsonp proxy which went offline ~
@TylerMoeller Mr-Kumar-Abhishek/random-quote-machine#1
why this <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> is used
@TylerMoeller but you see after this any other cors proxy is not working over it Mr-Kumar-Abhishek/random-quote-machine@b69cc0e
@TylerMoeller I think my approach is wrong somewhere
@Mr-Kumar-Abhishek You don't need a CORS proxy if you use JSONP
@TylerMoeller but i need JSONP in https not http :/
@TylerMoeller removing https from the site will hamper the sites over all page rank etc
You just need to choose a different Quote API because the one you are using will not work over HTTPS
@TylerMoeller should use CORS and leave JSONP ??
@TylerMoeller that would work right ?
@TylerMoeller I could use JSONP or not... that is a option for me. but I can't change my API now I could use https CORS over this API correct ?
@Mr-Kumar-Abhishek Technically, what you're trying to do has nothing with CORS, you're just passing a request through a HTTPS proxy.
@TylerMoeller yes but i could use https CORS if i don't add
callback? yes ?
@TylerMoeller I know changing the api is the easiest solution but it defeats the purpose of having quote machine for software developers :/
@Mr-Kumar-Abhishek It's all about finding the best solution for the visitors to your website
You could also just build your own proxy with the code at: https://github.com/technoboy10/crossorigin.me
@TylerMoeller yes well even APIs dont last long if they are free :/
@TylerMoeller with no keys
All websites need regular maintenance
@TylerMoeller yes I was looking at crossorigin.me before...
@TylerMoeller honestly in old days things were quite slow in changing ~
Hello all! Is there a best practice when trying to make sure a set of elements align horizontally? I'm currently trying to solve the issue with bootstrap col and rows, but am thinking that might not be the easiest way to go about it?
@TylerMoeller I am in web dev from 2002-2003 they kept back compatibility with changes
@TylerMoeller however somethings were unique if you were to add extra functionality such as vbscript and active x controls for IE
Please some one help me
please give me concept about twitch tv project
@TylerMoeller yes but .. not much ..
@ampersamd It's hard to give an answer without seeing the code
HOW CAN I ACCESS JSON ??\
@ampersmd you could always use flexbox :)
@ampersamd you could always use flexbox :)
@aayanqazi Start here: https://wind-bow.hyperdev.space/ and read the documentation link provided.
Ok ..
@aayanqazi There are also some examples here: https://github.com/justintv/Twitch-API
@TylerMoeller I'm trying to horizontally align an img, glyphicon, and text within a well. Here's my very much WIP code using a clunky bootstrap col and row solution just to see if it worked http://codepen.io/ampersamd/pen/zoRbxM?editors=1100
@Mr-Kumar-Abhishek Thanks, I'll check this solution out
ampersamd sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 411 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@ampersamd There's a few typos in your code:
<div col-lg-2> should be <div class="col-lg-2">
@TylerMoeller Wow, embarrassing. I managed to get it aligned by fixing that and adjusting the font-size and margins. Thanks!!
ampersamd sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1076 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
sometimes I think my digital marketing days involving SEO / ASO were all futile ... it all ends up in server performance and good optimised code v.v
Hey all, here is my portfolio page as it stands right now. < https://codepen.io/brad10104/pen/dOdrNP > I am at the point where I have added all the info that I need, but I do not know how to make it where when you click the buttons are the top, it scrolls down to the appropriate sections. Any help with that part?
How do I do that?
@brad10104 check anchors to link between the different parts of a single page https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Hyperlink
@brad10104 this the basic startup :)
@brad10104 this is the basic startup* :)
@TylerMoeller thanks I will try to stick with the current API at first ... then try to change my API :)
mr-kumar-abhishek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1077 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller between this api you were using is not so bad :p
@TylerMoeller I am not much of a web designer but these are quite inspirational including your work :D
I'm learning too, but thank you @Mr-Kumar-Abhishek :)
tylermoeller sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
@TylerMoeller I am more of a software dev person probably backend will suit me more ... done quite a work in backend though ...
@TylerMoeller intermediate level ...
Can anyone help me?
I'm at the Show the local weather project
I did it on my PC then uploaded to codepen
And it doesn't work
@xor4 Are you using Google Chrome?
See this if so: FreeCodeCamp/FreeCodeCamp#7853
@Mr-Kumar-Abhishek It helps to have the basics down I imagine - gives a big head start at learning front end
@TylerMoeller yes it does quite a lot actually
Yeah I was using chrome. Thanks @TylerMoeller
xor4 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1078 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
guys i have a question.. im working on this page http://codepen.io/frankmaayn/full/rWwEXJ/ I want to include a color background in the "characters column and all of its mini rows.. how would i do it?
i want to include a color background so that people can see the borderline between the "characters " "teams" and "players" column and its rows
@frankmaayn Give the characters / teams / players div element an id or class and give them a background in css:
.characters-container {
background-color: red;
}(Example for a class characters-container)
hi guys. i have this inside the form:
<p class="Lname">Last Name:</p>
<input type="text" name="Lname" placeholder="LastName" maxlength="20" required/>
</br>
</br>
<p class="Fname">First Name:</p>
<input type="text" name="Fname" placeholder="FirstName" maxlength="20" required/>
</br>
</br>
<p class="Mname"> Middle Name:</p>
<input type="text" name="Mname" placeholder="MiddleName" maxlength="20" required/>
</br>
</br> question is how would I float 3 elements to make them in a row??
@artoodeeto hi you can change the size of these in css so they fit in one row
Hello everyone ^^
am i on right track here?
function rot13(str) { // LBH QVQ VG!
var first13 = str.charCodeAt(0-12);
var second13 = str.charCodeAt(13-25);
var finalStr;
for (var i=0; i<str.length; i++) {
finalStr += 13;
second13 += 13;
}
return first13 + second13;
}
// Change the inputs below to test
rot13("SERR PBQR PNZC");
I'm working on the weather API and I'm using a guide to do it... I followed what was said, but I'm not getting "latitude" and "longitude" to actually come up. can someone help me out?
@mosaic-greg hmm. the size of this isnt that much. but when i float them the textarea will just float not the label
@artoodeeto do you have this on a codepen
@mosaic-greg wait
Is someone able to help me with the weather API?
I am confused why does is the div at the top with the twitch logo opaque??
it needs to be a solid color/background because it has a fixed position!
http://codepen.io/gebrutommy/pen/LbQGBQ?editors=1100
http://codepen.io/gebrutommy/pen/LbQGBQ?editors=1100
http://codepen.io/artoo/pen/ZBbYyM
how can i float the label and text are to make them in column.anyone??
@mzedlach how are you trying to get coordinates?
running into something I am trying to fix. mostly cosmetic. In "pen mode" the sun shows up right behind my logo. I like that. However, in "full mode" it's not visible at all. How can I manipulate the background image so that in full mode, the background is where I would like it to be if it were in "pen mode"
@alpox it didn't work
@artoodeeto what exactly are you asking?
http://codepen.io/Mr-Kumar-Abhishek/pen/aNKNEB <--- could someone check if this works or not ?? codepen is too heavy for my system
@artoodeeto are you wanting the text in their own column, and then the field in it's own column?
@Mr-Kumar-Abhishek when i run it its showing the placeholder text
@crlycstl thanks and in this ? http://s.codepen.io/Mr-Kumar-Abhishek/debug/aNKNEB
mr-kumar-abhishek sends brownie points to @crlycstl :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @crlycstl |http://www.freecodecamp.com/crlycstl
@Mr-Kumar-Abhishek yep that works! and nice color scheme btw
@crlycstl thank you :) I have one more link to ask about , http://codepen.io/Mr-Kumar-Abhishek/full/aNKNEB/ if it is not much of a inconvenience
:warning: mr-kumar-abhishek already gave crlycstl points
mr-kumar-abhishek sends brownie points to @crlycstl :sparkles: :thumbsup: :sparkles:
If the machine works in full view too , I am certain I only have to .... wait I am confused now :confused:
@mzedlach It's hard to know what's going on without seeing the code - do you have a link to a codepen? You might also be hitting a common issue, where navigator.geolocation only works when your web page is loaded over HTTPS. FreeCodeCamp/FreeCodeCamp#7853
@TylerMoeller Thank you for the help :) I found some help in the general forum :)
mzedlach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1079 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@crlycstl were you logged in and using https when you checked the first link ??
@TylerMoeller I could just submit the non-https link to FCC can't I ??
@Mr-Kumar-Abhishek I haven't heard of anyone's projects getting denied before - it's really up to you if you think you've met the user stories and you are proud enough to host it under your name on Github
Personally, I'd want it to work over HTTPS before submitting, but I don't see that as a requirement for any of these projects.
@TylerMoeller yes, me too ..but I am submitting the codepen link github link is for development , do I have to keep it github in future as a FCC task ?
Hi guys, does anyone know what is wrong with my code? I'm getting back "Unexpected identifier".
$(".textArea").keypress(function(e) {
if(e.which == 13) {
$(".btn2").click();
}
})
@Mr-Kumar-Abhishek hosting on github isn't a requirement for FCC
@francorufo It looks correct, maybe share your codepen to see what else might be going on
@TylerMoeller yes, I suppose using full fledged design theme comes to plagiarism , I am just on the sprint and want to complete this fast , afterwards I will look into enhancements
@francorufo What are you doing to get the error? I'm not seeing it
I don't know really. But i changed the scope and now it works just fine, thanks anyways @TylerMoeller
francorufo sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1080 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller this is beautiful :o http://codepen.io/TylerMoeller/details/WQGjvO , so I could really submit any type of link on which I worked on isn't it ??
@TylerMoeller I tried using cors proxy such crossorigin.me it doesn't work :/ hold on
@TylerMoeller I did it something like this https://gist.github.com/Mr-Kumar-Abhishek/a19c9c57c76143ae536396155ebae390
@TylerMoeller keeping a condition is reasonable but https in http don't have problems I think
@TylerMoeller vice versa... it is problem though
Right, you can access secure resources from insecure origins, but not vice-versa
For the "Build a Tribute Page" I have to build the whole page from start to finish that is similar to the "Dr. Norman Borlaug?"
@zamora88 Yes, it should look similar, but you can choose anyone you want to tribute
@TylerMoeller honestly codepen is playground heavy stuff shouldn't be done in it ... @zamora88 yes , tribute page, similar but choose your inspirational personality :)
Man, that sounds like a difficult task. :-/
@zamora88 it looks daunting at first ~ but if you break it into small tasks it is easy .... that is how I did started in 2002 :p
Is it prohibited to look at the previous tasks for reference? @Mr-Kumar-Abhishek @TylerMoeller
I have tested in all possible windows , I think I will make a new machine meanwhile this stays in my completed task for the time being ....
@TylerMoeller ohh. thank you
artoodeeto sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1081 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@zamora88 you could look at your own solutions :) better if you keep the algorithms in gist so you remember what you made solution
@zamora88 you could look at your own solutions :) better if you keep the algorithms in gist so you remember what you made in solution*
Hello fellow campers. I need some assistance in removing white line inbetween my </header and <body>. https://codepen.io/shortBusDriver/full/mOXpaQ/
@zamora88 such as I kept the ones I made in hackathon ~ https://gist.github.com/Mr-Kumar-Abhishek/365719b374306c9ac4ce0197a0090a90
I tried multiple forms of CSS and cant seem to get it right
@shortBusDriver There's a big difference between <head> and <header> - you want your navbar and top image in a <header>, you want CSS resources in <head>
And the <header> goes inside the <body> not above it. <head> goes above the <body>
@zamora88 even if some where not as good as this https://gist.github.com/Mr-Kumar-Abhishek/25e10156e38732b7a3ad50ef61d1b245 :/
@TylerMoeller thanks
shortbusdriver sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1082 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@shortBusDriver
<head> is for browsers and bots <header> is for bots only :p
Gotcha. Can I import an image from FB with this exercise?
How can i make a picture my background image using css?
This may sound like a long shot, but looking for someone to work/learn with. I'm studdying and learning back end, and don't seem to have the creativity for the front end work
@zamora88 yes but best if you use a CDN :)
CDN?
@zamora88 https://en.wikipedia.org/wiki/Content_delivery_network <-- see here... you could use cloudinary ~ want a invite ? ;p
@zamora88 http://cloudinary.com/invites/lpov9zyyucivvxsnalc5/aji7emn9pduufhzf94te?kind=twitter&t=manipulate <-- invite is here ..
@NnamdiV are you talking on having a background for your app/page ??
@NnamdiV nevermind ~
@AmazeCPK Not a long shot at all - lots of people up for pair programming at: https://gitter.im/FreeCodeCamp/LetsPair
@TylerMoeller so much so, ther is a community for it? thats awesome!
thanks @TylerMoeller
amazecpk sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1083 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@zamora88 Save the facebook picture to your computer and upload it to https://postimage.org to get a link you can use in your web page.
Gotcha thanks so much
So I'm back and I'm not getting this weather API thing.
I'm trying to adjust the position of an image used as a background so that it lines up a certain way with my logo. It lines up the way I like when in pen mode, but not in full mode.
Is there someoen out there that knows the weather api project and is willing to help?
okay .. later ...
@MessiaHack Can I see your code? I might be able to help.
@mzedlach If you can share your pen, I can take a look
how can i make my nav bar position fixed? so when someone scrolls the page the nav position moves along
@TylerMoeller Thank you :) So first section of JS is from this guide: https://www.youtube.com/watch?v=KoJsY7_J0JY And the second part that is commented out works, but I don't understand the difference between teh two $("data") http://codepen.io/mzedl/pen/yVbbWJ?editors=1010
mzedlach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1084 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
And how do you prevent links from going gigantic like that?
@TylerMoeller I'm having a lot of trouble with this api stuff.
You can make them a hyperlink with
[text for the link](http://url)
Hit Ctrl+Shift+M for the markup options
sweet
Thank you!!
@mzedlach It's a very common problem you are hitting. navigator.geolocation only works over HTTPS, but OpenWeatherMap only works over HTTP.
@TylerMoeller I don't understand hwat that means...
:(
So, you have some options. Use a less accurate Location API that works over HTTP or use a different Weather API that works over HTTPS - and require all your visitors to view your web page over HTTPS.
@mzedlach No problem. HTTPS is only for secure content. HTTP is not secure. So, you can't use HTTP resources when on a secure (HTTPS) website.
This is a really long article that explains it well: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
So, why woudl fcc suggest to use OpenWeatherMap that only works on http if we're working with geolocation that only works for https?
I mean, how was this done in teh first place?
And how is the guy in the video able to do it?
ahhhh
This API stuff is killing me Tyler.
killing me.
It's sucking my will to continue coding.
They haven't been able to find a new Weather API that doesn't require an API key...
It kills everyone at first :) but once you get past this, it will be much easier.
It kills everyone at first :) but once you get past this, it will be much easier.
hehe
sigh
I hope so
:)
Hurray!!!
lol
So.... where should I go from here...... Did you look at the commented out code at the bottom?
Do you get that?
get = understand ^^
Everyone has opinions on this - here's mine. Use navigator.geolocation. If that fails, then fall back to an IP-based location. Here's an example: http://codepen.io/TylerMoeller/pen/ZBBEGq?editors=0010
I mean, it works, it prints my locations to the console. But anytime I change the code, so taht I get a latitude and another latitude reading, the output doesn't change.
For your weather API, choose one that supports HTTPS, like Weather Underground: https://www.wunderground.com/weather/api
Yowza! That one you send is VERY exact!
If you try it on a mobile device without Wi-Fi on, you'll probably see it won't be very exact
Because it will ping to the same tower my phone is pinging to?
And don't you have to pay for the Wunderground API?
Interesting.
How are you so knowledgeable ?
:)
Yes, Weather Underground is free - no credit card required.
:)
Is anyone familiar with using SASS? I am trying to start using it on my Pomodoro Clock project and I am already doing something wrong declaring variables. If you are familiar could you take a look and see what I've done wrong? (Press "Run" to try to apply styling and see error) http://codepen.io/jrandall/pen/NbyVod
I'm not even sure where to start with teh Wunderground stuff..... documentation?