@vinaypuppal I used $.ajaxSetup so that I could still use $.getJSON. That way I have the headers in the API request. It's not an actual error that I'm checking for. It's a property that is in the object that the Twitch API sends back that I am checking for. Originally I was just using it as another "else" statement, but it never triggered either.
Hey guys i'm on the tribute page, i'm building my own tribute to for anyone i choose right?
@eyeturnred To be honest the point of the tribute is the layout, if you can get that right it doesn't even have to be serious, they aren't reviewed by anyone anyways.
hello guys ! i need a help, i would like to move my <li> style to de middle of my page, i really dont know how. follow the example...
<div class="container">
<div class="row">
<div class="col-xs-12">
<head>
<h1 style="color:white"; class="text-center bold white ">Ayrton Senna </h1>
<h2 style="color: white" class="text-right">The Legend</h2>
</head>
<body>
<img src="http://i.dailymail.co.uk/i/pix/2015/06/29/17/2A16EF2F00000578-0-image-a-56_1435594654943.jpg">
<body style= "background-color:black">
<p></p>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<ul align="center">
<li> 162 Races</li>
<li> 80 Podium</li>
<li> 41 Wins</li>
<li> 19 fastest lap</li>
<li> 3 world champion>/li>
<li> 1 world´s fan</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<head>
<h1 style="color:white"; class="text-center bold white ">Ayrton Senna </h1>
<h2 style="color: white" class="text-right">The Legend</h2>
</head>
<body>
<img src="http://i.dailymail.co.uk/i/pix/2015/06/29/17/2A16EF2F00000578-0-image-a-56_1435594654943.jpg">
<body style= "background-color:black">
<p></p>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<ul align="center">
<li> 162 Races</li>
<li> 80 Podium</li>
<li> 41 Wins</li>
<li> 19 fastest lap</li>
<li> 3 world champion>/li>
<li> 1 world´s fan</li>
</ul>
</div>
</div>
</div>
</div>
does anyone have any idea why the tweet-share window doesn't auto populate with the new quote? http://codepen.io/Asparism/pen/pExBmj
Can anyone tell me why my chart.js graph is barely visible in the background? In order to render it you must first set the timer and the 'clock-in. 'http://codepen.io/adampinsky/pen/jrQKKA?editors=0010
Could someone help my understand how to scroll using jquery? I am trying to have the page scroll upon icon click, but it is not working. http://codepen.io/bearsandbrews/pen/qaLaEE
Hey guys, trying to position the sun icon level with the "Sunny" text, can't seem to get it level. Any suggestions? http://codepen.io/Joshuaswift/pen/ORByzx
@asparism your use of the twitter API seems overly complex, a couple lines of jquery achieves the task with ease. Look up the window.open method of jQuery combined with ""https://twitter.com/intent/tweet?text=""
@Joshuaswift divs are block by default, so inline elements will fall 'in line' next to each other inside the div and block elements like h1, h2's can be set to inline-block to fall in line. Your using 20em for line heights which is like 4 inches, so i can see why your stuff is extremely difficult for you to line up. You need to take all those crazy margins and line heights out and start again.
joyinthenow sends brownie points to @jar36 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @jar36 |http://www.freecodecamp.com/jar36
@joyinthenow you are welcome, also if you want to change the size: http://fontawesome.io/examples/#larger
@adampinsky I wouldn't use the all the radial gradients and box-shadows. More than a couple can cause major lag. It takes awhile to load the page and it's sluggish.
I just looks like one of your bg's is z-indexed over the top of the chart
@jdtdesigns thanks so much for looking at it. I'll look into streamlining the backgrounds. To be honest, I cut and pasted them from a gradient builder online. (serves me right. ;-)) However, I don't think they are to blame. Because, if you remove the backgrounds, the chart is still rendering grey in color and it should be red.
adampinsky sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 711 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
can anyone help me with some bootstrap on code pen?
@varEnigmatic - someone should be able to help... post your link and questions
$( document ).ready(function() {
$("data").html( "ready!" );
});and nothing is happening. the html is:
<div id="data">data</div>does anybody know what's going on? i'm working in codepen
this code doesnt work, could anybody help to find where is wrong?
function per(x){
var source = []; // source=dest[j];
var temp=[];
var dest = [];
for(var k=0;k<x.length;k++){
recursive(k)
}
function recursive(ch){
for (var i = 0; i <= source.length; ++i) {
temp = source.slice(0);
temp.splice(i, 0, ch);
dest.push(temp);
}
for(var j=0;j<dest.length; j++){
source=dest[j];
}
return dest;
}
}
per('ab')//should return [['a','b'],['b','a']];
what challenge is it i should ask
no repeats please
@jdtdesigns this code does work, i tested, but the rest doesnt really do
function recursive(ch){
for (var i = 0; i <= source.length; ++i) {
temp = source.slice(0);
temp.splice(i, 0, ch);
dest.push(temp);
}
i'll have to look it over
why can't i get any kind of display with
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
else {
$("#data").html("nope");
}
});?
it will show errors
it's probably cause you're in chrome and on http
navigator won't work anymore on http
so you can use an ip locator instead
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 712 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns ip locator is similar to navigator but doesn't glitch with the http vs https issue?
asparism sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 713 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
does anybody know why context.clear (0, 0, canvas.width, canvas.height) might not work?
Guys, is this channel online or offline - https://www.twitch.tv/cretetion
Good Morning then! It will not be "morning" for me until another hour.
my twitchtv stream url showed me offline, but i can still stream videos
Perhaps something is wrong with their API response?
@NitinNair89
not sure, then how exactly to determine if a channel is offline or online?
guys i need an advice
i dont know react and sass yet
next project is create a react markdown previewer .
on average how much time i should need to complete the project
(i know it might very man to man programmer to programmer based on their skill still?)
i dont know react and sass yet
next project is create a react markdown previewer .
on average how much time i should need to complete the project
(i know it might very man to man programmer to programmer based on their skill still?)
I think not, i just checked @vinaypuppal website - https://www.vinaypuppal.com/fcc-twitch-json-api/ same response! :)
@mones-cse Don't think about how much time you need, whatever time you take, just do it perfectly. :)
@NitinNair89
i will give time as much as i need to make an appropriate one :)
but still i believe
i will give time as much as i need to make an appropriate one :)
but still i believe
deadline is the best inspiration :P
that's the deadline i give you :P
Did some changes as per suggestions from people yesterday for my twitchtv app.. please see once - https://nitinnair89.github.io/TwitchTvApp/
@NitinNair89 nice but when you click online or offline and after that all both buttons remains "active" as bg color only
check the codepen version
i am updating github right now
done. anything else?
@NitinNair89 and u need also in the array and code that two closed channels as in the challenge example
from the example
how do i know if channel is closed?
or inactive?
the api call will return an error and you should add js code to catch that error
yea that i understood.. i am checking the docs.. but could not find the error code yet :(
@NitinNair89 try to add this two to your arr: "comster404", "brunofin",
yep, there's a 404 not found
please check out this tool I made, calling it a day, let me know what you guys think
https://json-disco.herokuapp.com
https://json-disco.herokuapp.com
Oh! CamperBot! where are you?
:(
Oh well.. Camperbot is taking a nap? Anyway's I have a CSS question and I'm wondering if anyone here has a suggestion?
This code Works.. but I get a serious Linter error:
.meta li:after {
content: "\\";
padding: 0 2px;
color: #999;
}
Does NOT like the escaped backslash.. Umm hang on I'll grab the error.
?
Oh! that is a "psuedo" after tag.. It's a for a specific thing I am doing with a "continue" and I want parantheses around it... I watched a video demonstration of someone suggesting this the way to do it from CSS then sticking it into the HTML.
I know the psuedo:after, but not sure if you can use escape characters in CSS.. sorry! :(
Oh.. wait.. that's not right.. sorry I mean It's for adding a backslash between two different anchor tags ....
Linter complains about it... but that CSS code actually works!!!
yeah! it's a cool way to add characters.. any characters between two elements where you want special handling.. It's just an interesting problem.. and I wonder why there isn't a better way to escape a backslash character!
@sorinr I am done - http://codepen.io/Nitin-Chandran-Nair/full/RROzvg/
@NitinNair89 maybe just try to reorder the buttons and data like: all, online, offline, inactive. but generally its quite nice
nitinnair89 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 779 | @sorinr |http://www.freecodecamp.com/sorinr
i am done with my front end development.am now on a challenge of "build a tribute page".somebody to help me,what is this all about please?
@felexkemboi You need to create a web page for any well-known personality
@felexkemboi you can pick any subject u like and just present it as u wish. thats all
felexkemboi sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
hi guys, I am loading a tab with Bootstrap nav-pills. The tab opens, and the active class changes, but the active tab does not persist. I am using jQuery. How can I make the active class persist?
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active"><a href="/profile" style="text-align: center;">Profile</a></li>
<li><a href="/profile/settings" style="text-align: center;">Settings</a></li>
</ul>
<script>
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
</script>
@Mapamatician codepen link please?
@c0d0er \1+ matches the same text as most recently matched by the 1st capturing group
@ifamed without the
+, ([a-z])\1 can only match aa of aab but not aaa of aaab, why?
mixed active content
Blocage du chargement du contenu mixte actif (mixed active content) « http://api.openweathermap.org/data/2.5/weather?lat=41.3827755&lon=2.1788703&APPID=be1af85d5ffacd266beee70fefc978ac »
@elqomri I am getting proper response in the browser. How are you formatting the JSON response?
c0d0er sends brownie points to @ifamed :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ifamed
@NitinNair89 $.getJSON(url,
function(data) {
console.log(data);
}
);
function(data) {
console.log(data);
}
);
@elqomri you do not have the values to the variables:
latitude, longitude
@elqomri http://codepen.io/elqomri/pen/bwOEgr/?editors=0011 try to open this link and will be some consolelog(http:// not https://)
A simple console.log inside it is not getting displayed..
@NitinNair89 for me works. If you open via http:// not https://
but the determination of the geolocation does not work for me in chrome
I am trying to load a tab with Bootstrap nav-pills. The tab opens, and the active class changes, but the active tab does not persist. I am using jQuery. How can I make the active class persist?
@Mapamatician settings/javascript/quick add - then choose jquery. Then choose Bootstrap, THen go to Css - quick add - choose Bootstrap
@Mapamatician don't take wrong - the correct way to thank here is like - @name thank you
kurumkan sends brownie points to @mapamatician and @name :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for name
:warning: could not find receiver for mapamatician
elqomri sends brownie points to @ifamed :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ifamed
:warning: could not find receiver for ifamed
mapamatician sends brownie points to @ifamed and @kurumkan :sparkles: :thumbsup: :sparkles:
never mind
can someone help me change the active class ?
http://codepen.io/roflmao/pen/rrozpb
http://codepen.io/roflmao/pen/rrozpb
the link works for me, but I want to remove the active class from the 1st element and apply it to another element
I am looking for some widget based dashboard javascript framework....any suggestions or shall i go for custom coding?
How can I create a navbar like the one on this page with the background image behind it, but playing as a slide by changing every 4 seconds
Could you guys take a look at my tribute page? It doesnt come out right on mobile .
The navbar which im referring to in the one the page opens to with the sail
Great tribute page Tom, really like the outline design on the information
what's it supposed to do>
How can I create a navbar like the one on this page with the background image behind it, but playing as a slide by changing every 4 seconds
http://www.dtelepathy.com/blog/inspiration/23-great-examples-of-innovative-navigation-for-your-inspiration
http://www.dtelepathy.com/blog/inspiration/23-great-examples-of-innovative-navigation-for-your-inspiration
Also how can I add a cool design behind the "Services" Text replacing the oval
@MangoKing-IV add background to that element via CSS
and you can use Dadeden's animate.css to add animations easily
Hi, can someone help me with counter in JS? I have something like this:
$("#getting-started")
.countdown("2016/11/20", function(event) {
var $this = $(this).html(event.strftime(
+ '<small>ruszamy za:</small> <br>'
+ '<span>%D</span> d '
+ '<span>%H</span> h '
+ '<span>%M</span> m '
+ '<span>%S</span> s')
);}); '
And after every second 's' letter is a little bit moving to left or right because number change. What can I do to stop this letter and put it always on the same place, not moving?
*try adding. Also try with a fixed margin space before the letter
padding should be added to letter? like <span class="padding"> s</span> ?
isn't working, i'm trying with :before margin but it also isnt working
but all the time second change and letter moves
or just add just before 's' and see if it works
on codepen everything's fine.. I think it's problem with font
ok, then where were you testing it before when you said it is not working? :)
locally, on my computer, but on codepen i didn't add this font and it was fefault like arial or something
so i think that in my font (gilroy extra bold) letters have different 'length/width'
and that cause the problem
maybe can I somehow set letters width?
@Wymowny instead of letters width try to set
letter-spacing: 2px or any value that suits your need and check
show us your code @Wymowny so that we can help you better
it's look like this, but I can't import my font on codepen
now everything is working, but with my font 's' letter is moving right/left every second
put it in codepen settings and try
Hey there.
Got a confusing problem with my Tic Tac Toe project:
Before I will make my AI "smarter", I coded a simple function which does a random move on AI´s turn. It works, but only on the AI´s first move. On the second turn , the AI does 2 moves. On the third turn, the AI does 3 moves and so on....
I just can´t find the error, would be great if someone could help me!
Thank you in advance!
Here´s my pen:
http://codepen.io/kenobijr/pen/ozJorK
I can't import this font, it's just able to downloa (Gilroy Extra-Bold)
tried it on google fonts page? - fonts.google.com
I can't help you then @Wymowny not sure what to do. Sorry! :(
ok, thanks, I'll try to set some static width for second and maybe then 's' letter won't change its place
Hi I'm trying to do a menu horizontal to my portfolio page, can you help me? The dropdowns need to be horizontal and Items needs to be vertical http://codepen.io/eduardorioterra/pen/BLvJmY
you mean the dropdown2 should be on the right of dropdown?
@eduardorioterra
@NitinNair89 How would i use danedens animations on codepen?
@eduardorioterra your menu-btn styles was preventing it..try this:
#nav-btn li{
display: inline;
}But fix those menu-btn CSS. I tried after removing all your menu-btn css and it works
@MangoKing-IV you can just add the link in codepen
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
<link rel="stylesheet" href="animate.min.css">
</head>
nope, just like how you added bootstrap, same way.. type animate..it should probably give you github link
@eduardorioterra - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_horizontal
eduardorioterra sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
When was your turning point in web development that you had realized you were a good web developer ?
I'm working on the tictactoe project, coding the computer ai in specific and (though theres probably more problems than this) theres some sort of problem with my function to get the computer to either complete a 3 in a row or block the opponent's 3 in a row. its in GAME.computer.checkWinOrBlock(num). Heres my codepen http://codepen.io/xSnowpeltx/pen/NRzdNZ
I liked the UI very much @xSnowpeltx Good one! :+1:
topic: twitch.tv CSS code
can anyone help me find out why my css line 60's
https://codepen.io/nirmalannu/pen/GjBzbW
can anyone help me find out why my css line 60's
.animate:focus is not workinghttps://codepen.io/nirmalannu/pen/GjBzbW
Am trying to add an image in a navigational bar using the below code but the image doesn't appear
... I think for some reason its not running the first lines of code in chooseSpot. Why would it do that?
<nav class="fixed-nav-bar">
<!-- Fixed navigation bar content -->
<ul>
<img src="C:\Users\User\Documents\Akod1.png">
<li><a href="#">ABOUT</a>
<li><a href="#">PORTFOLIO</a>
<li><a href="#">CONTACT</al>
</ul>
</nav>
<!-- Fixed navigation bar content -->
<ul>
<img src="C:\Users\User\Documents\Akod1.png">
<li><a href="#">ABOUT</a>
<li><a href="#">PORTFOLIO</a>
<li><a href="#">CONTACT</al>
</ul>
</nav>
put that <img> inside an <li> @AbrahamDanquah inside lists, there should be list-items
@NitinNair89 yeah right
hover is working but i want my tabs to look selected when online , offline , all is selected just to look clean
@xSnowpeltx I am sorry, I can't help you with your code :( tough for me :(
then change background colors when selected @annunirmal on click
@NitinNair89 yeah that a good alternate, but it would be better if i could help
focus
So do our images get uploaded to codepen? If I have an image to display on this Build a Tribute Page objective can I just link it from my computer? How will other people see it?
@NitinNair89 I placed it in a <li> but image not appearing
@AbrahamDanquah as @ifamed said.. how are you trying to add image from your local system?
annunirmal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
you can't.. so try imgur or some free image hosting sites
Welcome @annunirmal :)
@NitinNair89 btw how you manage to be online all the time i ask Qs :P
I guess our online timings are same :P
@annunirmal
:P
that's coz i am on vacation right not.. so next week you won't see me much here :)
that makes me sad but :(
@NitinNair89 hahahhha. lol . not really asking you go offline but its a coincidence smile:
@David-Boardman you can upload to your Dropbox Account or https://postimage.org/ and use URL generated inside your codepen
@vinaypuppal Hru? Completed my twitchtv app today :D
@NitinNair89 yeah I saw when you posted this afternoon , looks good :+1:
Thanks a lot @vinaypuppal for your suggestions! :)
nitinnair89 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 633 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Hello all! Just wanna know that is it possible to make webpages after 1st step i.e HTML AND CSS (5hours)
@JLuboff To be honest i got all the concepts but i can't make a webpage properly
please help
i can't make layouts
lol
if you got all the concepts wouldnt you be able to make one?
it really depends what youre trying to accomplish
@taronaggarwal just focus on the basics, then slowly move for frameworks like bootstrap, foundation, materialize, etc..
@taronaggarwal Draw on a piece of paper a layout you'd like to make then try and recreate it. Practice, practice, practice
@JLuboff is right. I use MSPaint to draw the layouts @taronaggarwal :)
don't be depressed or sad, you will learn it quick! :)
taronaggarwal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@taronaggarwal As @NitinNair89 mentioned, frameworks like Bootstrap will help a ton
@NitinNair89 1 step done i will start with bootstrap but i fear that i can't make layouts properly so i should practise more html and css first, what you say?
you can always go back and update your tribute and portfolio pages :)
yes , practice will make you perfect ;) @taronaggarwal
taronaggarwal sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @jluboff |http://www.freecodecamp.com/jluboff
taronaggarwal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: taronaggarwal already gave nitinnair89 points
:+1:
taronaggarwal sends brownie points to @mcpengelly :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for mcpengelly
@NitinNair89 just wanna know one more thing, is there a way that i can reset my html and css chalanges
@NitinNair89 i mean if i can start all the challanges
why would you want to? you can always just erase your code and rewrite it
i think he wants to "re-learn" perfectly :)
just go back and rewrite
@NitinNair89 i see @mcpengelly so that i can recheck my skills
@NitinNair89 you are right
:)
Thanks guys have to rush to code... Thanks for this ... wonderful community
Anyone good with materialize css here?
Hello, can anyone help me with text not wrapping? I had it going ok and then somehow messed it up and it won't work.
it seems to wrap ok before the photo goes underneath. then it spills off the page.
@kcdilla when you write your html (with Bootstrap), try to separate the container class from the col-sz-# class… Use container to contain the col-sz-# classes.. like this…
<div class="container">
<div class="row">
<div class="col-md-7">
content here
</div>
</div>
</div>
..and then as you see, the code above, inside the container div is
Inside that div is where your col-sz-# need to be.
<div class=“row”>Inside that div is where your col-sz-# need to be.
@SteveAmaki Ok, thanks. I'll try that. I'm still a little confused about what "row" does
kcdilla sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 237 | @steveamaki |http://www.freecodecamp.com/steveamaki
@kcdilla Think of row as the thing divded into 12 (grid layout)
ok
the thing is... I didn't change my HTML before and it was working ok
but I'll try that and see if it works @SteveAmaki
<div class="row">
<div class="col-md-7">
SPAN OF 7
</div>
<div class="col-md-5”>
PLUS SPAN OF 5 is 12
</div>
</div>
Feel free to see what I did with mine..
http://codepen.io/ssuratosjr/pen/JRRAWJ?editors=1010
http://codepen.io/ssuratosjr/pen/JRRAWJ?editors=1010
@SteveAmaki Looks good! What did you do to get your photo to go above the text when the screen shrinks?
maybe i should just do the whole bootstrap tutorial over again...
@kcdilla I used the class
col-sm-# meaning once the screen gets too skinny, it switches from floating side by side to each element taking the whole row.. pushing the next element to a new row below the previous element.. if Im saying that right.
<div class="container">
<div class="row">
<div class="col-sm-2">
profil pic goes here
</div>
<div class="col-sm-7">
about goes here
</div>
<div class="col-sm-3 col-sm-odffset-1">
skills go here
</div>
</div>
</div>@kcdilla make sure you understand how the grid layout works in Bootstrap. There are different span sizes.. col-xs-#, col-sm-#, col-md-#, col-lg-#
Each size category is accomodating for different screen sizes.
and each
row need to equal to 12
https://codepen.io/ajayt365/pen/ALmwLa . why display:inline-block is not working on div with class tricks?
yeah i changed it to 3 . 4 was increasing it width and it wrapped
its*
@SteveAmaki Thanks! Yes, I know about the grid but I guess I wasn't totally clear about the col- sizes. But then why doesn't everyone just use "col-sm-# so it works on small screens? goes to do research
kcdilla sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
@kcdilla because some websites want to look different in every screen size. You can set each div to behave differently in every size by doing something like this..
<div class="row">
<div class="col-xs-6 col-sm-2 col-md-5 col-lg-8”> </div>
<div class="col-xs-6 col-sm-10 col-md-7 col-lg-4”> </div>
</div>
This message was deleted
I'm tempted to just start over. I wish FCC taught some design because it's so daunting to design something new to build.
@kcdilla Have you tried Udemy? They have crazy discount sale going on right now.
https://www.udemy.com/courses/?pmtag=OCTOBERDIRECT19&siteID=Qnwphc0eKlk-R4PtJGkPnKtOOmBWREqw6A&LSNPUBID=Qnwphc0eKlk
https://www.udemy.com/courses/?pmtag=OCTOBERDIRECT19&siteID=Qnwphc0eKlk-R4PtJGkPnKtOOmBWREqw6A&LSNPUBID=Qnwphc0eKlk
it has to do with pully data properly and storing it on local variables
coincidently if @jdtdesigns or @TylerMoeller are on, you guys would probably know best how to tackle this specific issue
I have searched high and low on how to fit the text under the image but still can't figure out what's wrong with my code. Should I just start over ? here's my code:http://codepen.io/poemul7/pen/zKJXQE/
@mhdavis I did try your suggestion by the way, but nothing happened
@poemul7 try using the col-size-# classes to wrap your content
Hey @WhiteLeaf1103
@poemul7 try swapping the corresponding lines with the one I just sent
<img class="img-responsive center-block" src="http://www.etatdexception.net/wp-content/uploads/2013/03/Patrice-Lumumba1.jpg" alt "=Patrice Lumumba">
<p class="text-center">Patrice Lumumba holding a press conference</p>
the major changes I made were that I added a class to your <p> and added a class "center-block" to your <img>
Whoops. Totally misread what you need done @poemul7 Listen to @mhdavis
i need help with my front-end project can somebody please help
not center block
the - indicates that there are no spaces, which is importnat
because a space indicates two seperate classes
i have 2 problems: 1. I don't know how to pass the lat and long from the navigator geolocation to the api link, and 2. even when I use coordonates, the data is not displayed (even though the api receives my request). Thank you
Hi, Why does my <h1> not responsively resize font size but every other text does when I resize my window?
@poemul7 hmmm have you tried adding text center to your <div class="row">?
thank you @walidashri - could you explain me the "?callback=?" in the getJSON?
nei-v sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @walidashri |http://www.freecodecamp.com/walidashri
@Nei-V The callback tells getJSON to handle the data as JSONP. It adds the JSON call to a <script> element in your HTML to work around CORS issues.
@poemul7 You have a lot of bootstrap classes defined in your HTML, but you haven't linked to bootstrap's css library. The advice you're getting with
text-center, center-block, using row's, columns, etc. will only work if you add this to your CodePen's CSS Settings: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
Thank you @TylerMoeller ...to bad FCC doesn't dive more into these issues before the challanges...for someone who has no prior programing experience, it is quite difficult to estimate what is a must know or a nice to know subject
nei-v sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 896 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller oh hey man, sorry I got caught up doign some stuff
@TylerMoeller so here
"?callback=?" what the call back is set to?
@TylerMoeller okay so i drafted out what I want my js to do in my codepen, but im running into some problems in terms of my understanding of Ajax/jquery
https://codepen.io/mhdavis/pen/rrqqmy
https://codepen.io/mhdavis/pen/rrqqmy
@TylerMoeller I just added it and I think it has made things worse lolhttp://codepen.io/poemul7/pen/zKJXQE/ or is it supposed to be somewhere specific?
@poemul7 Yeah, add it to your Codepen Settings, not the CSS panel itself.
I initially my idea with the main() method was to have a place were I call all of the functions i want to run and then just run main @TylerMoeller the one thing that I'm running into is a problem that JD mentioned before which is if the .getJSON doesn't pull the data from the API before you get to the next part of your code
@mhdavis You're getting a mixed content error with that link. Are you familiar with "mixed-content"?
@TylerMoeller id image its because its because I have code with the same names and variables and such
the code I have on my pen is sort of unorganized at the moment, so I'm trying to comment it up fix it that way; break it down into steps and such
@mhdavis Mixed-content is when you try to access a HTTP resource when your page is loaded via HTTPS.
@TylerMoeller okay so all i have to do to fix that is make everything https?
Your application will never work over HTTPS because forismatic only works over HTTP.
So, only visit your application via HTTP or the quotes will always be broken
i see
it's better but still that annoying text is outside @TylerMoeller http://codepen.io/poemul7/pen/zKJXQE/
@mhdavis The immediate issue I see with your quote is scope:
function myGetJSONFunction() {
$.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=?&lang=en', function (data) {
console.log(data); // gives you data from the API
});
console.log(data) // undefined - since it's out of scope
}
@poemul7 I'll take a quick look
@TylerMoeller okay so in handling that, the getJSON method pulls the quote for the API and saves it within the function
but then should I have the function return, the author and quote so I can pass it as arguments for other functions that need it to progress?
@poemul7 Try this:
<div class="row img-border">
<img class="img-responsive center-block" src="http://www.etatdexception.net/wp-content/uploads/2013/03/Patrice-Lumumba1.jpg" alt "=Patrice Lumumba">
<p class="text-center">Patrice Lumumba holding a press conference</p>
</div>And in your CSS:
.img-border {
background-color: white;
}That should help you get started :) you can style as needed after that
@mhdavis That would be ideal for a larger project, but not needed for this one since the getQuote function is the only one that uses the data.
@mhdavis Here's a fork of your pen with some fixes: http://codepen.io/TylerMoeller/pen/Xjyzgx?editors=0010
the one thing I was trying to do was instead of having the whole box fade out
i wanted the quote itself to fade while the spinner came up as the background changed
For some reason, the callback in this getJSON never runs, and I can't figure out why.
var getWeather = function() {
if (navigator.geolocation){
var key = "fff7f784828c4e1c2dc51b8d52ff1399";
navigator.geolocation.getCurrentPosition(function(pos){
$.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + Math.round(pos.coords.latitude) + "&lon=" + Math.round(pos.coords.longitude) + "&appid=" + key, function(data){
console.log("success!!");
showWeather(data);
}, function(error){console.log(error)});
});
}else{
console.log("no geolocation :/");
}
};
Hello, I'm also trying to build a quote generator. I tried using ajax and also using the getJSON method, but neither work. I think I am not understanding a key issue in my code. Can someone please help review and help me make sense of this? https://codepen.io/jttyeung/pen/VKqmBG
@mhdavis That might be a little more challenging to do, but it is possible.
@TylerMoeller im gonna study your code a bit to see how you did things differently than mine. One thing that I'm also trying to strive for with this project is writing clean, readable code so the more compartimentalized you have the functionalities the better it is
which is how you have it in the pen you sent me
@mhdavis Good plan - you'll be able to reuse some code in future projects.
@porygonj Do you have a codepen link?
@jttyeung Try this instead:
$.ajax({
url: "http://api.forismatic.com/api/1.0/",
jsonp: "jsonp",
dataType: "jsonp",
data: {
method: "getQuote",
lang: "en",
format: "jsonp"
}
})
.done(function(json) {
$(".quote").html(json.quoteText + "<br>" + json.quoteAuthor);
});
@porygonj Are you using Chrome by chance?
Yeah, Google Chrome blocks navigator.geolocation when you load a web page over HTTP
I would recommend trying Weather Underground. They support HTTP/HTTPS and you can get location plus weather all in one url with their AutoIP URL.
@TylerMoeller Oh, that makes sense. It wasn't totally my fault after all, heheh. Thanks for the recommendation; I'll probably use it instead.
porygonj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 897 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@porygonj For example:
Other options are to use a IP-based location API like http://ip-api.com/json, but those can be blocked by adblockers...
http://api.wunderground.com/api/Your_Key/geolookup/q/autoip.json. More info at: https://www.wunderground.com/weather/api/d/docs?d=data/geolookupOther options are to use a IP-based location API like http://ip-api.com/json, but those can be blocked by adblockers...
@TylerMoeller Thanks, I updated my code, but it still doesn't pull in quotes. I'm also wondering if it makes a difference if I'm pulling in a JSON vs JSONP data type - I don't really understand the difference
jttyeung sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 898 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
like did you purposely put getQuote towards the end
@mhdavis I just started doing that recently. Some linters will complain if you call a function before it is defined in your code.
hello ! good night ! i having a problem in my code. I tryed everything to change <li> style to center of my page but i can´t. follow the code...<div class="container">
<div class="row">
<div class="col-xs-12">
<head>
<h1 style="color:white"; class="text-center bold white ">Ayrton Senna </h1>
<h2 style="color: white" class="text-right">The Legend</h2>
</head>
<body>
<img src="http://i.dailymail.co.uk/i/pix/2015/06/29/17/2A16EF2F00000578-0-image-a-56_1435594654943.jpg">
<body style= "background-color:black">
<p></p>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<ul align="center">
<li> 162 Races</li>
<li> 80 Podium</li>
<li> 41 Wins</li>
<li> 19 fastest lap</li>
<li> 3 world champion>/li>
<li> 1 world´s fan</li>
</ul>
</div>
</div>
</div>
</div>
@TylerMoeller I tend to prefer it where you define a function before you call it, so it works out
I just wasn't sure to what degree js cares
@jttyeung Two things to fix:
- Load your pen over HTTP (
http://codepen.io/jttyeung/pen/VKqmBG?editors=0010). The Forismatic Quote API only supports http. - Add jQuery to your pen. Click Settings, Click "JavaScript", and then pick jQuery from the "Quick-add" dropdown box.
@mhdavis This talks a little more about when order of functions does matter in JavaScript: http://stackoverflow.com/questions/261599/why-can-i-use-a-function-before-its-defined-in-javascript
In my code, the order of functions doesn't matter. Just a habit I'm trying to get into :)