@sjurs1 flexbox is css so write in your css window in codepen
but thanks @longnt80 !
sjurs1 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @longnt80 |http://www.freecodecamp.com/longnt80
why are the images in my gallery touching? trying to figure out how to add some space there.. https://codepen.io/ericvoigt/pen/XRLQqw?editors=0100
or projects
Haven't played around at all with babelify, browserify, bundling, packaging, deploying, etc...
@SkyC0der damn, im trying to install it, and EVERY video or site has some diffirent commands to install it, i installed on my user folder, but i cant seem t install it into a folder where my project will be, its says itsa directory, so im trying to figure out if its not supposed to be installed anywhere else
guys, how do i change the text color from the navigation bar ?
https://codepen.io/bytao7mao/pen/qjEEwv
https://codepen.io/bytao7mao/pen/qjEEwv
i uninstalled from there as well, once i read that it should be used for each induvidual project
Yeah, most people use npm/yarn to install it in their project folder from what I understand
@r1chard5mith do u know how i can use npm to install it into my project folder?
.navbar-default .navbar-nav>li>a {
color: skyblue;
}
@r1chard5mith or how does the whole installing it locally works/means
@Pagnito install yarn? I haven't needed it but the docs are here https://yarnpkg.com/lang/en/docs/install/
babel
do i have to install it into my user folder only?
@Pagnito If you find a good step by step guide, please let me know. I haven't put the time in...but would love it if I could just save a file, then have all my files uglfied and transpiled automagically. I only have linters working lol
and some of them are old
@Pagnito To use babel, you need to be running a pre-processor, like grunt or webpack, I think
@r1chard5mith hmm, the video i was watching last, had me install node and then babel right after
@bytao7mao right-click and inspect the element to see how it is styled
@Pagnito Are you making a node app? Or a front-end thing?
so, for your "Menu", use:
.navbar-default .navbar-brand {
color: whatever color you want;
}
@Pagnito If you're writing a front end thing then babel will take ES6 and turn it into ES5
ooh i see, nice, i do want to install it still tho, just to know, cuz i wanna build something like facebook and have an app and a site for it, i feel like it would be a very good project to learn alot
That's what it's mostly used for, anyway - I use the webpack dev server atm but google's 'web starter kit' is an easy way to set it up
web starter kit?
It sets up a dev environment
Very easy to use
And you can code live (it reloads the browser when you save changes)
bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1610 | @skyc0der |http://www.freecodecamp.com/skyc0der
pagnito sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
For anyone who've used Solo Learn, does FCC cover all the lessons from the app? Which would be a better site for beginner coders?
@SkyC0der i watched several tutorials about html,css,javascript,bootstrap, and i made a tribute page (which it was easy) and now im struggling to make a portfolio page ... some tips about how to make my learning easy ?
hello and good <time-of-day> to everyone. I have a question.
I want create a custom color, call it bleh and I want to be able to use it lots of places and be able to change it once if the person I'm doing the page for says, "no, I want it greener" or whatever....
I don't know the vocabulary so I can't look up what I want to do.
Thank you.
@r1chard5mith gracias
baseballpoetess sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
guys, how do you suggest is the simple way to move the logo a little upper ?
https://codepen.io/bytao7mao/pen/qjEEwv
https://codepen.io/bytao7mao/pen/qjEEwv
with margin-top: -7px; it's ok ?
Hello I am working on my tribute and just about finished. However, I am having trouble adding the class "img-responsive". Please help lol https://codepen.io/mlaos/pen/yXLqEY?editors=1100
img-responsive for 3
mlaos1997 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @mot01 |http://www.freecodecamp.com/mot01
@colechamberss not sure how i feel about all the animated .gif's down there
looks pretty good though, they get all misaligned for me when i shrink the window
Yeah, the more I look at it, the more it feels too much like buzzfeed to me
couple issues with the slider menu, ..main page whatever you want to call it
maybe my browser, but
02 has a hover effect, the rest dont
and when i leave the window with my mouse, ...it takes me back to
01
@YozhikM looks pretty good though, some of the stuff gets a little jumbled when i play with the window size
@moT01 Yes, there are many mistakes, I do not exclude. I can not normally place the header on the top of the page. Now there's only a menu button in the middle
dubnetworkpaul sends brownie points to @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
can some1 tell me why in small-device mode my tabs do not expand ?
https://codepen.io/bytao7mao/pen/qjEEwv
https://codepen.io/bytao7mao/pen/qjEEwv
Helloooo. Does anybody know if we are permitted to use css for this challenge? Thanks you! (:
jazzliberation sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 701 | @mot01 |http://www.freecodecamp.com/mot01
@bytao7mao Add your ID to your collapse menu:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1611 | @skyc0der |http://www.freecodecamp.com/skyc0der
How do we connect to codepen over http? It seems their server defaults to https?
abohannon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1612 | @skyc0der |http://www.freecodecamp.com/skyc0der
https://codepen.io/bookofbash/pen/ZKmOXW
How can I make sure this works on all browsers? A friend said it didn't work on Windows/Firefox
Add this to the end of your weatherApi variable:
+ "?calback=?"
Other examples: https://s.codepen.io/skycoder/pen/EmdVBL
hey can anybody help me on my portfolio project. You see my image width wont go to the max to fix my screen
there are white sides on the edge of the img
but if you want to use it as background image it will not mess with anything just delete from html file and set it only in css as i said
@bytao7mao
@Botenga
body{
background-img:url("http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg");
}
body{
background-img:url("http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg");
}
body{
background-img:url(http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg);
}
background-img:url(http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg);
}
thats what i out but the img isnt coming out hold up let me refresh
its just a white page right now
i can do better
man, use it like this : body{
background-image:url("http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg");
}
background-image:url("http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg");
}
you writed : background-img
mine worked : https://codepen.io/Botenga/pen/wdEjdJ
wich is the best way to changes the order of elements on xs class ?
i mean i have something like this:
A
B
and on xs devices i want it like this:
B
A
I mean i have a gird with some columns , and the thing work great untill i hit the xs class, when i m in the xs class, i want to move the order of the columns,
I read that you can move it right and left with push and pull...
But why i want is to move them up and down;
@Botenga you can use all the containers or containers-fluid you want
lol trying to put that computer img on the top
@fdemaa try ".col-md-offset-*" method
fdemaa sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
@fdemaa you can push/pull at certain screen sizes: http://getbootstrap.com/css/#grid-column-ordering
@SkyC0der what i do was change the order of my elements, and the push and pull for the classes;
But i dont like it anyway so 30 minutes for nothing
But i dont like it anyway so 30 minutes for nothing
haha
These are also really useful - you can hide/show certain HTML at different screen sizes: http://getbootstrap.com/css/#responsive-utilities-classes
index.html:1 Refused to execute script from 'https://github.com/darkskyapp/skycons/blob/7095ecf5f653dbcadbddb0d317b42e65fe091eae/skycons.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I am having trouble with this error, and I've tried changing how the file i'm referencing but nothing seems to be working, any insights would be a huge help.
@spiredarc Dark Sky requires JSONP and the fetch() API you're using doesn't support JSONP
@fdemaa okey check the layout for the movile class; you will like it ;)
i deserve to get hired lol
I get the data without JSONP, the reason it doesn't work right now is because I'm trying to get Skycons added
I reverted my code to reflect this
xd
@fdemaa im learing from my good freind google. You have a typo other than that its look great
*learnig
learning
lolz
@Botenga yes of course i have to double check that, i m not native speaking and im not use to writing in english xd
fdemaa sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
@fdemaa Hello. Ya it came together nicely...besides the typos. ;-P
haha
I didn't see you were using a proxy - overlooked the skycons part of that error message ;)
spiredarc sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1613 | @skyc0der |http://www.freecodecamp.com/skyc0der
why isnt my startimg fill the full width of my page
@fdemaa Ya looks good, a lot you will change later on I am sure.
@Botenga Its inside of a div with a class of container fluid.
@Botenga and set the width to 100vw.....thats 100% of view width.
@Botenga Bootstraps container creates some margins from the edges....until you resize really small. the width: 100vw would be in the css. The <div> will be html
@Taslack the margin of the container dissapear when it hit the smaller classes like xs right ?
@fdemaa Exactly, due to the responsivness of class="container-fluid" that bootstrap defines.
Hey everyone, I need some help with the Wikipedia viewer project. I got the api working and I am able to use opensearch to get the data from the string entered into the input form, but the problem is that the search results will only flash onto the screen for a split second. I will post the codepen page for it below
botenga sends brownie points to @taslack and @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @fdemaa |http://www.freecodecamp.com/fdemaa
:cookie: 372 | @taslack |http://www.freecodecamp.com/taslack
literally been googling all over the place since yesterday trying to fix that
@Botenga LOL, ya it takes a while to get used to how things are margin/border/padding. Check out this for a visual and text explination: https://www.w3schools.com/css/css_boxmodel.asp
@Botenga And then when you start using bootstrap classes it can be really confusing....expecially when trying to work against bootstrap. But there is a lot of handyness that is there as well. https://getbootstrap.com/css/ is a good read/referance.
@Alvin-Capello When you click your
<button> it fires off a submit event. The default behavior of submit is to refresh your page, so you have to replace: $("#search").click(function() { with $('#idOfYourFormElement').on('submit', function(e) {
e.preventDefault();
.... the rest of your code, ajax, etc... like you already have
Here's a tutorial on a search box + button that submits data: https://codepen.io/skycoder/pen/MpKpJj
@SkyC0der WOW! That works! Thank you so much for the help. I was racking my brain so hard trying to fix this. It was worth it though, because I learned something new about buttons!
alvin-capello sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1614 | @skyc0der |http://www.freecodecamp.com/skyc0der
@Alvin-Capello I should have clarified a <button> inside a <form> fires submit. Otherwise, it's just a button :)
@SkyC0der I will write that down so I can remember it later. Everyone on fCC is so helpful!
I just started the portfolio front end challenge. I find my self going to the internet a lot to lear different methods for building it and am having a hard time. Is there something I missed in the lessons before this? or is this normal?
@TehNuuki I think it's normal. That is what I did to build mine, and I understand that that is what many working programmers do all the time when they are on the job.
@TehNuuki It can be a bit daunting. But best to just start with a <div></div>
@Netrunner21 What is the help you need?
@TehNuuki Just sit down and draw out a rough mockup of what you want really quick
I've submitted already, but I want to make a small modification:
The green lights don't all flicker at the same time (they use an animate.css class).
@TehNuuki Then code it onto the screen. But dont get too technical, because your port is something you wil come back to a lot.
I'm assuming it's because of the loop and the class being added at the same time.
I've tried adding them outside the loop, but they fire before the loop is finished.
@Netrunner21 You want them to flicker at the same time....or dont want them too?
@Taslack @Alvin-Capello Gotcha, thank you! I just feel dumb for having to look up and learn new things almost constantly. I was afraid I wasnt retaining information but I guess it gets easier the more you code
tehnuuki sends brownie points to @taslack and @alvin-capello :sparkles: :thumbsup: :sparkles:
:cookie: 260 | @alvin-capello |http://www.freecodecamp.com/alvin-capello
:cookie: 373 | @taslack |http://www.freecodecamp.com/taslack
I need them to add the animation class after the loop is finished
The don't for me, and sometimes they don't all flicker, or one of them will be white
it's aq mixed bag
Same problem in IE, and the 404'd modules don't load right
I want to just ignore IE because its a pain in the ass, but I don't know if thats the right move
@Netrunner21 They blink at the same time on firefox for me as well.
@Taslack thanks man
netrunner21 sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @taslack |http://www.freecodecamp.com/taslack
@Netrunner21 no they blink differently on my browser too. Chrome here
@longnt80 can you look at my code and see if there is a solution?
@Netrunner21 I'm not sure if there is a built-in solution for javascript or jquery
my first thought is to use a loop to check if all the stream has loaded yet then apply the class accordingly
my first thought is to use a loop to check if all the stream has loaded yet then apply the class accordingly
so maybe adding the class outside the for loop?
@Netrunner21 try
$(".green").addClass("animated zoomIn infinite").on(), line 68
check out https://api.jquery.com/on/
why isnt my headshot going to the right
i did pull-right
and tried changing the grid for BS but i wont change
@longnt80 @Taslack I think I have solved the issue by using adding the animation class inside
if (i == 8) This way its adds the code only at the very end of the loop.
@longnt80 @Taslack Thanks for the all the help. If it doesn't work on your end I will try the methods you have just outlined
netrunner21 sends brownie points to @longnt80 and @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @longnt80 |http://www.freecodecamp.com/longnt80
:warning: netrunner21 already gave taslack points
@Botenga
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
<img id="headshot" src="https://avatars0.githubusercontent.com/u/28329025?v=3" alt="a handsome man headshot picture" class="img-responsive">
</div>
</div>
^^ If you want it on the right
@Botenga An offset is like putting an empty column before it. In that example,
col-xs-offset-9 is like 9 empty columns
@TehNuuki So much information to know, its better to just have a reference in your head on where to find things.
function titleCase(str) {
return str.toLowerCase().split(' ').map(function(val){
return val.replace(/^./, function(match){
return match.toUpperCase();
});
}).join(' ');
}
@Taslack Gotcha, I have heard so many bad things but when I "search" for answers on google w3 normally gives me pretty good answers or at least a start in the right direction
@TehNuuki Yes I use it all the time. And this information changes on a regular basis. That is why it is good to read it, so you have an Idea where to find the information you need. Memorization is for schools, not for real life.
@Taslack that makes total sense. I'm going about this more like I want to "get a good grade" think I need to change my mindset. Thanks yet again man!
tehnuuki sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:warning: tehnuuki already gave taslack points
@SuyogRK There's nothing wrong with using .map() for that challenge
@TehNuuki Bad things...thats weird. The information is very basic....it does not provide answers. But the information is the very foundation for HTML and CSS, how you use it is up too you. There are so many different ways to accomplish one thing in code, code allows you to be creative. You just have to mess around with it in order to become familiar with it. You dont become a master woodworker overnight.
And for all you that dont know where to start with you portfolio, you can check out https://www.w3schools.com/w3css/w3css_templates.asp
@SkyC0der which i a better resource for bootstrap the bootsrap website or w3s
The bootstrap website has everything you need to know, but W3 has some of those "Try It Out" examples that can be helpful
Anyone want to take a look at my jQuery for the weather? I'm at a wall right now and have no idea how to get past it
@goodm0urning This won't work with navigator.geolocation:
var weatherURL = getGeolocation(); unless you use a promise(). Put your getJSON in the function(position)
@SkyC0der This might seem naive, but what is a promise()? And I don't have a function(position)? Maybe I'm just a little confused
I have the getGeolocation fail conditions set up, why won't that work?
@goodm0urning A Promise is something that returns a value later when it has the information. Don't worry about those yet. By
function(position), I mean this:navigator.geolocation.getCurrentPosition(function(position) {
So, if you put your getJSON in that part of your code, after you define the weatherURL, you'll be on the right track. You'll get an error back from the API, because there's still more to do with your code, but debug that and you should be on your way.
@SkyC0der thanks
goodm0urning sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1615 | @skyc0der |http://www.freecodecamp.com/skyc0der
is it me or lookin at the beta kinda dissapoints me, compare to all the stuff they were going to offer on the current version, i mean its nice that its updated with es 6 ther and few other things, but i feel like they stripped alot of good stuff that was at the end
hey guys, I'm pretty much done with my portfolio website. However, on my portfolio section, I want to enable the hover states on the projects by default (setting them to active on default) for mobile. I've googled around but haven't really found much. How do I do this in css? site: https://amitp88.github.io/New-Portfolio/ repo: https://github.com/AmitP88/New-Portfolio/tree/gh-pages
@fdemaa u havent heard of beta freecodecamp? its gonna replace this one
@Pagnito what really ? and they are going to change the projects for better ? :worried:
@Pagnito where can i look the changes they are going to do ?
fdemaa sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @pagnito |http://www.freecodecamp.com/pagnito
http://beta.freecodecamp.com/en/signin login and see for yourself
Hey all, I was wondering if I could get some feedback on my portfolio site: https://amitp88.github.io/New-Portfolio/ I'm trying to figure out how to make the overlay text on the projects opacity:1. I tried applying opacity:1 to the title, p, and buttons of the overlay, but it didnt work. https://github.com/AmitP88/New-Portfolio/tree/gh-pages
what's up @fdemaa ! :D
guys, for link SCSS to HTML i will use <link rel="stylesheet" type=text/css href="style/index/css"> or <link rel="stylesheet" type=text/Scss href="style/index/Scss">
@fdemaa I usually take Theraflu when I get sick. Clears it pretty fast imo
@fdemaa yeah, it's pretty much finished. Just need to make the text & buttons on the hover overlay on the projects opacity:1 for readability. It doesn't seem to be working though when I add it though
after I get that part done I'll be optimizing the loading speed, then it should be officially good to go
amitp88 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @fdemaa |http://www.freecodecamp.com/fdemaa
@fdemaa hmmm, on Google Pagespeed Insights though the score isn't good
Poor
53 / 100
Haha
53 / 100
Haha
thats mine
xd
still learning tho xd
I'm trying to make my Demo and Repo buttons not opaque though. They're too transparent
I thought there was an option for a shareable link!
thank you! :)
how should i center my text
want it in the same column as my image
i mean your image above the text ?
its vertically idk why
because you put 3 col for that text wich is huge put 6 or 8 and it will display much better
the higher the # the smaller the box
Hi guys, I am working on the "random quote" challenge. I have this codepen can you guys help me figure out why it not random https://codepen.io/tgsoon2002/pen/wevRmG
And please talk direct to me in .
And please talk direct to me in .
@Botenga i mean the text is vertical because you put 3 columns; Try playing with the number of columns and look what you like more;
For example i put
<div class="col-xs-6">
on your codepen and it looks much nicer
you have 12 columns in a row you can use
thanks fdeema I really need to understand how this grid system works
thanks @fdemaa
botenga sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 135 | @fdemaa |http://www.freecodecamp.com/fdemaa
hehe
*to
@Botenga I think it would best if you put your picture on a seperate div out site the class="row".
If you put it insize, it will take 1 of the colum and your bio will take the other colum. which will make all our text be push to the left.
If you put it insize, it will take 1 of the colum and your bio will take the other colum. which will make all our text be push to the left.
haha thanks man!
I was in the same situation like you, if you want to understand how the grid works, watch this video:
this guy explain it really well
https://www.youtube.com/watch?v=qIULMnbH2-o&list=PL6gx4Cwl9DGBPw1sFodruZUPheWVKchlM&index=1
watch the last two videos if you want
delete
that way looks nice i think ; thats what you want?
check that out
but idk why some of my text have big spaces i put text-justify
a task which i cant figure how to do
maaaaan imma have to check this out later been on for about 4-5 hours know i gotta get some sleep
wish i could be on more
goodnight
@sanjays95 im a noob but maybe i can help you ?
thanks :)
@fdemaa
its okay
Hi. IDK how to let some one work on random quote see this. But this is good notice for some one to use QuoteOnDesign api. https://www.reddit.com/r/FreeCodeCamp/comments/4b1fox/free_api_for_random_quote_machine/ So the document say use getJson. but the reddit suggest use ajax instead. and it work flawlessly. #RandomQuoteChallenge
lovrom sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @padunk |http://www.freecodecamp.com/padunk
@padunk I was afk for the weekend, no idea, I think that it was an old pen and I just continued to edit it, but I updated it, put it before ReactDom, and use reactdom to render and now it works :smile:
Brace yourselves! I'm starting my Tic-tac-toe game this week and the questions will start pouring.
Hi everyone.How can I call a serial of functions one by one ,and between them delay some milliseconds?
I am working Simon game and simulate click buttons one by one.
thanks!
there are my codes,but they seemed not working
var cb=$.Callbacks();
var grid=$(".game-grid");
for(var i=0;i<2;i++){
cb.add(simulateGridClick($(grid[i])));
cb.add($(grid[i]).delay(500));
}
cb.fire();
var grid=$(".game-grid");
for(var i=0;i<2;i++){
cb.add(simulateGridClick($(grid[i])));
cb.add($(grid[i]).delay(500));
}
cb.fire();
the simulation clicking works at the same time,not one by one
you can then chain the functions by adding them to setTimeout() function one after another
function simulateClicks(i) {
if (i >== simonArray.length) return;
var grid = simonArray[i];
grid.mousedown();
setTimeout(function() {
grid.mouseup();
simulateClicks(i+1);
}, 350);
}monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @lordmathis |http://www.freecodecamp.com/lordmathis
Working on mine and I'd like to find buddy to work with @kodinglife
excuse me, is there anyone who has used Canvas to draw the map ?
I'm going to draw this kind of map with Canvas ,but now have some difficulties with it ,is there anyone who knows how to achieve it ? thanks a lot
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @lordmathis |http://www.freecodecamp.com/lordmathis
//this function error
//VM81:4 Uncaught TypeError: callRecurNotWorks is not a function
var callRecurNotWorks=function (num){
if(num>10)return;
console.log(num);
callRecurNotWorks(num++);
}(0);
//this function work normally
var callRecurWorks=function (num){
if(num>10)return;
console.log(num);
num++;
callRecurWorks(num++);
};
callRecurWorks(0);
the first function works error. what's wrong with it?and what is the answer?
thanks!
How do i make my paragraph
<p>Some text here</p> inline with my image <img src = "something.com/pic">?
happyredditor59 sends brownie points to @ivyxia123 :sparkles: :thumbsup: :sparkles:
:warning: @ivyxia123's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Hello ! This is my tribute page. Do not hesitate to tell me what i could do better... Thks!!
right aligning the block in the end isnt looking good
i would suggest center aligning it
also link in the end is missing
@fanfoune nice tribute, you have a quote separated out at the end of the tribute in a grey box, I can't tell who it's by, probably should be able to see who made that quote. besides that, good job.
how do i center an image? preferably with bootstrap
happyredditor59 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 829 | @h1tag |http://www.freecodecamp.com/h1tag
Hi! Can someone help me with this error for geolocation? [Violation] Only request geolocation information in response to a user gesture.
@monkingame the first one is a self invoked anonymous function. The variable has not been asigned before the function was called. If you want to use self invoked functions this will work
(function callRecurNotWorks(num){
if(num>10)return;
console.log(num);
callRecurNotWorks(++num);
})(0);also lookup num++ and ++num, first one returns the num value and then increments it so in your callRecurWorks call you can just pass num because you already incremented it on the previous line and passing num++ as an argument will pass num and then increment it. The second one ++num first increments the variavle and then returns it. Hope it's a little clearer
@ADondi you need to first request permission for geolocation
@LordMathis I got the popup requesting permission, I clicked allow....still not working
@LordMathis I'm having this issue in Chrome by the way
@LordMathis how com for the simple exercises it;s working but for the weather app challnage is not?
@ADondi do you have a codepen or some code snippet I can look at?
@ADondi you have a typo: latitude instead of lattitude, other than that it works fine for me
@LordMathis Great, thanks! Guess it's what happens when you stair too long at a screen :P
adondi sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @lordmathis |http://www.freecodecamp.com/lordmathis
Is it possible to hide one element using Jquery after the page loads about five seconds and ask another display: block?
@YozhikM
$(document).ready(function() {
var $element = $(...);
$element.hide();
setTimeout(function() {
$element.show();
}, 5000);
});
@alpox I have 2 divs. Ex.: <div id="first"> </div> <div class="second"></div>
My code is
$(document).ready(function() {
var $element = $('#first');
$element.hide();
setTimeout(function() {
$element.show();
}, 5000);
});?
Can anyone tell me why I'm getting an Unexpected Token on Codepen for this code?
function success(pos) {
var crd = pos.coords;
document.getElementById("where-1").innerHTML = "Latitude: " + ${crd.latitude};
document.getElementById("where-2").innerHTML = "Longitude: " +${crd.longitude};
};
navigator.geolocation.getCurrentPosition(success);
Actually, I think I'll investigate later. Thanks!
Hello Im building the personal portfolio page.... needless to say its taking a few days ... Question: How do I get free code camp to log that I have been on the site for the day each day... such that it shows a green box on the profile page for every day??
either complete a challenge
@LordMathis Oh thanks!I tested your code:(function recure(i){recure(i)})(0); and it works very well.
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
there's some real easy challenges you can do, if you look around on the map. some are like 2 minutes videos
brownie points ^^^
Also I noticed my error code about callRecurNotWorks(num++); the code will enter dead loop because of the num passed into not modified. thanks for your great advise!
Can someone point me to where I can learn about how to call the Darksky API in my JS? In the API documentation it just says you use GET http:// etc. I don't understand how I would wrap something like that ins JS.
I've found a few places online that point specifically to making a weather app, and I want to avoid them so as not to totally spoil my learning potential, heh.
@Corinos You're using interpolation and not wrapping the expression in back ticks. Also, you don't use concatenation with template literals. That's what their for. ;)
`Latitude: ${crd.latitude} `
@longnt80 so when I tell people I coded at free code camp they can see all the days filled... it looks better yet perhaps Im just gonna finish this one unless I can go ahead to java script then I will just do a small challenge every day to mark the box.
@moT01 you get brownie points ;0)
@moT01 @moT01 @moT01 @moT01 @moT01 @moT01 nope not this way
say thanks and click my name, ...will give me points, and fill the box
nope
mot01 sends brownie points to @mr-henderson :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @mr-henderson |http://www.freecodecamp.com/mr-henderson
hmmm not working though what am i doing wrong?
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @mot01 |http://www.freecodecamp.com/mot01
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: mr-henderson already gave mot01 points
Hello - my first question ! - how do I get my image to show up on CodePen - this is my code: <div class="thumbnail"><img src="https://commons.wikimedia.org/wiki/File:13_Portrait_of_Robert_Hooke.JPG#/media/File:13_Portrait_of_Robert_Hooke.JPG">
Hey everyone, can you please help me center my portrait picture vertically besides the text, in 1 row? thanks :) https://codepen.io/ltcMatt/full/owvONQ/
@jdtdesigns I snagged that approach from somewhere but decided to go back to the drawing board! How would I set the result of a GET to a variable? I know it's not the most efficient, but I feel like for this weather thing I want to set the JSON from DarkSky to a variable and then use it to to feed the rest of the sites divs.
@MrDrDr right click the picture, click view image, and then copy and use that url
I can view the picture in the browser - when I put the url in - but it isn't showing in code pen: https://codepen.io/anon/pen/bRbdRj?editors=1000
@MatLang i use flexbox for vertical centering https://css-tricks.com/snippets/css/a-guide-to-flexbox/
@MrDrDr right click the picture, click view image, and then copy and use that url
mrdrdr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @mot01 |http://www.freecodecamp.com/mot01
matlang sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 704 | @mot01 |http://www.freecodecamp.com/mot01
@moT01 looks good, but there's no good way to combine this with bootstrap, right?
bootstrap is just css styling
@moT01 Can you please have a look at my codepen? I implemented your solution but no it seems like it's not responsive anymore :(
I've been trying for hours -.-
@Corinos You can simply do things like:
$.getJSON('api-url')
.then(function(data) {
var city = data.location.city;
$('#location').text(`City: ${city}`);
});
whats the problem
looks good
I want my profile picture to slide into the next row once it gets smaller
because the text col gets too narrow at some point.
you can then target a screen size, ...which is what your bootstrap is doing
so when the screen gets to a small size, you would want to just maybe display the items as block
@moT01 that looks like a good solution, will have to look up the whole concept though. Haven't heard of that until now :)
@moT01 thx for helping me out
matlang sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: matlang already gave mot01 points
like i said its what your bootstrap is doing, just a a little different
and there may be a bootstrap solution, this is how i would do it though
yup, if you open the bootstrap file you will see a bunch of that in there to account for all the col-md/sm/lg
Hi everyone. Would you please help to solve a JSON problem? I want to get JSON data of this url: http://www.aparat.com/etc/api/video/videohash/rzKus I have used $.post by jquery you can see my code by this link: http://jsbin.com/cefoqeniti/edit?js,console . But as you can see in console of the browser it returns a CORS error. How could I solve it? I do appreciate your answer.
@LordMathis I have tested $.getJSON but it returns error too.
Something strange is that I could get JSON data of urls from other websites but not the url in my previous comment. How could it be possible?
@ehsansh for me it logs mixed content error which is the error you get when you try to load data from unsecure (http) url when your website is loaded over secure (https) connection. In this case JSBin is loaded over https but you are trying to get data from http
@LordMathis I have tried to get JSON data by local server. I used nodejs and express I was able to get JSON data from other websites except the one I mentioned above. So I think it could not be secure connection issue.
@LordMathis XMLHttpRequest cannot load http://www.aparat.com/etc/api/video/videohash/rzKus. No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have tested https://www.npmjs.com/package/cors but it does not work for me.
Can someone explain why float:right caused my list to invert? I had to change the order or the list to get it to display correctly. https://codepen.io/yelhsa/pen/YQKewG?editors=1100
@ehsansh Cross Origin must be allowed on the server that you are getting your data from
@LordMathis So maybe that website does not allow getting JSON data? But it is possible to see the data by click on their url.
@yelhsa the first li floats right then the second floats right etc. Wrap your li tags in an ul tag and float that one
yelhsa sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @lordmathis |http://www.freecodecamp.com/lordmathis
Can anybody explain to me how to chain event listeners to listen only after a certain event listener is switched??
example,
I turn a button from off to on then I can press a another button to do something
@LordMathis thanks. I saw your website you have a very good resume. Good luck.
ehsansh sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @lordmathis |http://www.freecodecamp.com/lordmathis
@Nickadiemus You can dynamically add and remove event listener. So when the first event fires add an event listener to the second event. Don't forget to remove it
Can someone tell me why these images at the bottom of my gallery are not inline with the other images... thanks.. https://codepen.io/ericvoigt/pen/XRLQqw
@LordMathis could you give me an a small code example of you can?
I can't help you with your problem, but I just wanted to say that I think your project looks great! @ericvoigt
@yelhsa Thank you! Loving how it looks so far.. love how the black fades into the rest of the page.. kind happened by chance lol just happened the image i choose from google was black at the bottom
ericvoigt sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @yelhsa |http://www.freecodecamp.com/yelhsa
You've also just taught me that I can use my dead links in the anchor tags to link to other parts of the same page! I didn't even know that. :) the only thing I'd change is to fix that header @ericvoigt but you're project has inspired me. Thanks
yelhsa sends brownie points to @ericvoigt :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @ericvoigt |http://www.freecodecamp.com/ericvoigt
i mean like fix that it stays on the page as you scroll, not fix as if something's wrong with it
@Nickadiemus
function eventListener1() {
console.log('Button 1 clicked');
$('#button2').on('click', eventListener2());
}
function eventListener2() {
console.log('Button 2 clicked after button 1')
$('#button2').prop('onclick',null).off('click');
}
$(document).ready(function() {
$('#button1').on('click', eventListener1());
});Assuming jQuery, I have not tested it but hopefully it's a good example
@ehsansh thanks
lordmathis sends brownie points to @ehsansh :sparkles: :thumbsup: :sparkles:
:cookie: 83 | @ehsansh |http://www.freecodecamp.com/ehsansh
@yelhsa awesome! it's great how we can share ideas / code right through codepen pretty sweet.. will look into a fixed header but previously had trouble making it fixed.. will try now
@LordMathis Awesome, that's how I thought it would go but I just needed reassurance. Thank you man!
nickadiemus sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
i @yelhsa i knew what you meant with "fixed" header.. fixed to the top of the page while scroll
@ericvoigt I think the images aren't inline because of margins and paddings. To get the desired result you might want to try flexbox
@mikaeloduh pretty sure something displayed: none, will not be clickable
@ericvoigt yea. A fixed header is about the only thing I have if you want to take a look. https://codepen.io/yelhsa/pen/YQKewG?editors=1100
@moT01 testing someing on mobile, a display:none element hover to visiable is hard to implement on a touch device. It result clickable
@yelhsa nice yeah made my header fixed.. seems like for the gallery you will need to learn flexbox for it to really work.. also for the contact / about me area...
sometimes i find that margin-right and margin-left wont do anything, what is the reason for that? Does the content need to be inside of a certain container or whatever?
@mikaeloduh You can't click an element that has
display: none or visibility: hidden https://stackoverflow.com/questions/5659563/css-is-a-hidden-object-clickable
@fullmetal7777 Not an easy one to answer :) It depends on the element and the margin you're setting.
For vertical margins, they will only work on block elements
mikaeloduh sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
gotcha. Yeah it works half of the time and i never know why lol
Could anyone help me out with some CSS? I can't get flexbox to display properly in IE.
@ericvoigt If I can help explain it better, let me know. The basic rule is that you get 12 columns per row in bootstrap. If you break that rule, which is fine in your image example, you'll need to make sure the native resolution of all your images are exactly the same size. Replace your code with this to see what I mean:
<div class="row">
<h1 id="1" class="h1text">ADJUST YOUR ALTITUDE</h1>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=1" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=2" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=3" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=4" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=5" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=6" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=7" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=7" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=9" class="img-responsive"></div>
</div>^^ Those are random placeholder images from unsplash that are all the same height x width (1280x1024)
what mistake i am making in this code given below. i have no clue why this ain't working
var logo = document.querySelector("logo_official");
function init() {
window.addEventListener("scroll", function(e) {
logo.classList.add("smaller");
})
}
window.onload = init()
Hey guys. I have been doing this very simple landing page and stumbled upon a serious issue. Does anyone know how to deal with google embeded maps within an iframe not displaying in Safari on both iOS and macOS but working fine in Chrome? When launched locally site renders properly but after putting it on the server the iframe shows up only in Chrome.
Is it a class name?
Also I have tested it on Opera and Firefox and works just fine as well.
@NeelDVirus And you probably want to put the first line
var logo... into init because logo will not be defined before the window is loaded.
@alpox if i remove
() then the function object will be retrieved instead of executing it
@NeelDVirus If you execute
init() instantly like you do, its called before window is loaded - and you assign undefined to window.onload
@NeelDVirus But
window.onload needs a function to be executed when its loaded
window.onload = init();
function init() {
console.log(window.onload); // null
}window.onload = init;
function init() {
console.log(window.onload); //function init() {console.log(window.onload);}
}
@alpox OOps.. but window.onload is executed after the page is properly loaded i guess. can you please amend my code and show me.. i am bit in confusion.
@NeelDVirus @alpox this code given below do work. then why not mine
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
@NeelDVirus Is
document.querySelector("logo_official"); trying to select an element like <logo_official>?
or
<img class="logo_official">, in which case, you need document.querySelector(".logo_official");
@SkyC0der yeah that was a typo. i put the dot latter but still not working man
hey guys , just got my first project .. "Build a Tribute Page" i don't know where to start
i mean i did all the challenges from the first try , why am i stuck now ?:(\
@AlexOros I had the same problem. And I'm still only on the porfolio page days later. My advice would be to think of what you want your page to look like then go through the challenges and figure out what can be used to accomplish what you want.
@NeelDVirus It seems to work fine - the class "smaller" is added to the image on scroll: https://codepen.io/skycoder/pen/bRNaXB
And to spend tons of time figuring out why what you do does or does not work @AlexOros
alexoros sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @yelhsa |http://www.freecodecamp.com/yelhsa
@SkyC0der let me check it on mine and i ll put my code in codepen
How can I move my hamburger icon around such that It has the same padding as my title (yelhsa) but on the opposite side? https://codepen.io/yelhsa/pen/YQKewG?editors=1100
Hey guys, I'm working on my last front end project and I can't seem to figure out how to properly loop through the buttons. Could anybody give me a tip on how to display them?
@SkyC0der hey man the code is working fine with my original code. i just made typing error in css. i wrote
nav image.smaller instead of nav img.smaller
@NeelDVirus Happens to the best of us :) question though - why do you want to add the same class to that element over and over every time the user scrolls?
Seems like a lot of CPU cycles
@SkyC0der this is my first real project starting out after covering css html js. i haven't thought about the performance part because i got stuck with the issue in the first place. well any suggestion? it wil be much appreciated man
@SkyC0der i want my site to feel like this one http://massive.markup.themebucket.net/index.html
@NeelDVirus That was the reason for the question - not sure what you're trying to do. Maybe a better way to do it.
@NeelDVirus So, on scroll, you're trying to make the navbar change size?
@NeelDVirus Yea works perhaps, but doesn't do what it should. It doesn't run the code on window load - it runs it directly
@SkyC0der Oh well i haven't delve in the way of approach you provided as a sugestion as i was using all my brain to discover why my piece of code in not working logically. so now i will try to see the logics in your approach.. it is much appreciated btw.
I am working with a set of two radio buttons such that the first one is checked by default. Following is the HTML code:
<fieldset class="summary">
<label for="radio-1">Imperial</label>
<input type="radio" name="radio-1" id="radio-1" value="1" checked>
<label for="radio-2">Metric</label>
<input type="radio" name="radio-1" id="radio-2" value="0">
</fieldset>I am trying to set the second button as 'checked' on clicking. Following is the code:
$("input[name='radio-1'][id='radio-2']").click(function(){
$(this).prop('checked', true);
});I am not sure how this is supposed to work. Any ideas?
Just trying to figure out what you want to do with that scroll function so I can maybe provide a suggestion. If it's about changing the navbar size, you can use the bootstrap affix plugin, just like they do here: http://blackrockdigital.github.io/startbootstrap-agency/
yeah exactly.. the changing of size of navigation bar with same pattern
ericvoigt sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1617 | @skyc0der |http://www.freecodecamp.com/skyc0der
I use that in my portfolio to give my navbar position fixed when you scroll past it. Instead of giving it position fixed, you would just change the size
@SkyC0der actually i dont wana use any framework, library.. just pure javascript and css for understanding objectives. later on i will start using those after i gain confidence with the implementation of pure JS
@NeelDVirus If you're new to JavaScript, that's going to be hard to implement. Probably better to work on the intermediate and advanced algorithms first before trying to implement it in pure JS rather than using a plugin.
Stick with what you have now if it works - mark a TO DO next to it and improve it later :)
@SkyC0der well a bit of favour you could do. can you consider collaborating with me to build the site from scratch to make it feel like http://massive.markup.themebucket.net/index.html
which can be augment it latter..
which can be augment it latter..
@willybeans you sould use full url to external website. Just add http:// before webiste address in your href attribute
@LordMathis working on to build a website of mine like this website http://massive.markup.themebucket.net/index.html
willybeans sends brownie points to @andpawlenko :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @andpawlenko |http://www.freecodecamp.com/andpawlenko
@NeelDVirus and without any framework? Damn. Good luck :smile:
@LordMathis i dont know whether it is possible or just sound unrealistic. just giving it a try for personal saticfaction :D :D
@NeelDVirus I've seen people here try building portfolios like that from scratch without a framework and without completing all the JS here. It's a challenging endeavor
It's an admirable goal, just don't let it demotivate you along the way. Going to be very challenging.
@SkyC0der you mentioned "without completing all the JS here"? actually i have already delved deep in JS. i just paused in prototype inheritence part of object oriented part..
@NeelDVirus well I'm pretty sure I would be ablo to make a website like that in React in a week or two but without any framework? It would probably take me up to a month, maybe more
and I'm talking about full time coding
yeah i know the feeling of demotivation, i feel that sometime. but persistance in me dominate over the demontivation..
@ericvoigt
Go to https://unsplash.com
Click on a photo you like and look at your address bar, you'll see an ID at the end like "https://unsplash.com/?photo=GnU2altkUSQ"
Use that ID in your final URL, like: https://source.unsplash.com/<<<image id>>>/<<<width>>>x<<<<height>>>
Example:
Go to https://unsplash.com
Click on a photo you like and look at your address bar, you'll see an ID at the end like "https://unsplash.com/?photo=GnU2altkUSQ"
Use that ID in your final URL, like: https://source.unsplash.com/<<<image id>>>/<<<width>>>x<<<<height>>>
Example:
https://source.unsplash.com/GnU2altkUSQ/1600x900
@NeelDVirus I was looking at https://www.freecodecamp.com/neeldvirus and noticed you haven't done the algorithms yet.
@LordMathis Yeah i know.. let see.. i am going to give 12hours daily in it. and moreover its my first time to implement the understanding of JS what i learned being comprehensive. so it might take significant more time
If you are comfortable with JS, you can look at the bootstrap affix code to see how they do it - that's where I'd start
@SkyC0der oh my JSchallenges in FCC. actually i paused FCC much before because it wasn't giving me full satisfaction in concepts and logics. i followed the book "professional javascript for web developer" with 1st priority. and then other stuffs as reference
@SkyC0der i am being blunt here. and the link has jquery implemented
@NeelDVirus Here's a great site for converting jQuery to vanilla JS http://youmightnotneedjquery.com/
Just in case some of those methods aren't familiar - the affix code uses minimal jQuery. Should be fairly easy to do with vanillaJS instead
@SkyC0der that seems to be nice resource. i ll try to keep the pace and compatible. are you considering to collaborate?
@SkyC0der this is the piece of code i wrote as for practice in the context of using Event handlers and event object with cross browser compatiblity https://jsfiddle.net/NeelDVirus/7ydd32r8/
your feedback plz!!!
Probably can't collaborate in an official sense though, I have some other projects I'm working on at the moment
neeldvirus sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1618 | @skyc0der |http://www.freecodecamp.com/skyc0der
@venkyafhs looks nice but the main image is a little low resolution or too streched out
Hi @whdhli I can't help much but when I removed the "jumbotron" class it worked fine
Hello Guys, I'm trying to access the Wind-Bow API for the Twitch.tv challenge. However I get an error message. Can someone explain me what's going on or how can I fix it?
The request:
var url = "https://wind-bow.gomix.me/twitch-api/streams/";
var targetId = "freecodecamp?";
var callback = "callback=?";
url = url + targetId + callback;
$.ajax(url, function (data){
console.log(data);
});The error message:index.html:1 XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?. Redirect from 'https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?' to 'https://wind-bow.glitch.me/twitch-api/streams/freecodecamp?callback=?' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
hi @JuanP97 this is a common problem with CORS on codepen, you might need to use a CORS proxy in front of the url
Hi @monicaparrillo , how do you recommend I do that?
OK I honesly am stuck in a similar way, but if you scour the forums there are some great posts. I recall people using https://cors-anywhere.herokuapp.com/ OR requesting a jsonp instead of json
basically you find a proxy and append it to the front of your url so try https://cors-anywhere.herokuapp.com/https://wind-bow.gomix.me/twitch-api/streams/
@monicaparrillo Thanks for the insights, I'll check it out
juanp97 sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
I am trying to look for a great (though over-my-head) post I foun..d in the forum, but forum seems to be down! Maybe try to google "CORS access"...
good luck!!
also i recall seeing https://crossorigin.me/
I was trying precisely that one, but it still doesn't work :(
I'll check JSONP,
Thanks again Monica :) I'll let you know if I can figure it out
im having trouble accessing values from JSON objects im retrieving from a random quote api
anyone wanna check out my code?
$(document).ready(function() {
$(".getQuoteBtn").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
var obj = JSON.stringify(jsonData);
$(".quoteBox").append(obj.content);
also you can try to console.log of your json data and open developer tools (if not already done)
i can retrieve the object and display in object notation in html
are you able to view the jsonData object in your console?
and if you make a string out of the JSON object, can you access its named properties?
If you want to access properties on an object, you should not convert it to a string
the console doesnt always register something when i click my button
but i can insert this into my html ' [{"ID":1923,"title":"John Wanamaker","content":"
Half the money I spend on advertising is wasted; the trouble is I don’t know which half.
\n","link":"https://quotesondesign.com/john-wanamaker/"}] '
so first you want to access the "first" (and only) item in the array, and then from that item (the object) yo want to access .content
exactly
this was the code that produced that: $(document).ready(function() {
$(".getQuoteBtn").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
$(".quoteBox").html(JSON.stringify(jsonData));
its fine to just access the object inside the array
ok so to access the the values of the only object in the array i would do something like... 'jsonData[0].content'?
I literally just finished the same project :)
so i'm not some advance developer ;) i hope it works now
just remember that if you convert to a string with json.stringify, there's no way to access object or object properties, it literally converts the entire response to 1 long string
hi, how we code, if we wanna use geolocation data for getting local weather information?
@monicaparrillo will you give me info about geolocation local weather?
hi @ghafor I haven't started yet the weather app, but I remember there is a challenge that addresses this https://www.freecodecamp.com/challenges/get-geolocation-data
good luck!
@monicaparrillo i know to get it, but the problem is it tht how to use those info for getting local weather.
Sorry, I haven't woked on this yet, but I think a lot of people use the DarkSky API and you could look into their documentation? Probably you pass it in as a parameter to the API requiest
ghafor sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
I think you can pass it into the url with the api request
@ghafor here you go, the first line on this page https://darksky.net/dev/docs/forecast
So i need the banner to go on top of the navbar and I need the body to scroll under the navbar and the banner. How do I make this happen? https://codepen.io/iggy1906/pen/WjLwWK?editors=1100
just started on my portfolio page can someone tell me why my buttons are doing this: https://codepen.io/andrewmparker/pen/MoYwpB
@Iggy1906 look into position fixed, and the z-index so it's on top
@jtan3 Well, the nabar is fixed already. It is working the way I want it to work. I just need to somehow change the size of the banner pic, put the pic on top of the navbar and have the pic stay fixed atop the navbar so the body scrolls under it and the navbar.
@andrewmparker @monicaparrillo The navbar is fine. It's the pic that I want to use as the banner that's the problem. Whenever I give the pic the positioned of fixed, it automatically positions below the navbar and it's size is huge. Then also the other divs in the body scroll on top of it.
why would you want ur pic on top of the navbar, that just doesn't make any sense to me? Not trying to be mean or anything
@Iggy1906 a fixed navbar
"navbar-fixed-top means the navbar will stay at top always even when scrolling down. There's also fixed-bottom.
the logo image in my navbar has a height of 100px and because i put the <img> tag for logo inside the <a> tag, the overall height went 104px and so the <nav> element's height went 104px. how can i remove this extra 4px to get the overall height of
https://codepen.io/neel111/pen/VWYQKw?editors=1100
<a><img src="logog"></a> 100px so the height of <nav> element becomes 100px.https://codepen.io/neel111/pen/VWYQKw?editors=1100
@andrewmparker see how they've got a div on and the logo on top of the navbar here? Something like this. http://djbooth.net/
@jtan3 yeah, my navbar is good. banner pic is the problem I'm having.
I'm having a few issues with my weather app, does anyone want to take a look? 1st issue is that I need to add the code to make the converter work but I'm not sure how to connect it to the weather api and the switch i created. Also, I'm finding that using coordinates to position things does not work on all browsers. Is there a better way to position my elements within my clouds? https://codepen.io/G1nger/pen/gWyvNp
also, when i run it in my console i get the error: ajax is not a function...
so how would i fix my buttons
What do you do when the img src is really long! I tried going to tiny.im but the image doesn't show up in my code when I use that
download it and link it locally then if you dont want to scroll through it all
andrewmparker sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @jtan3 |http://www.freecodecamp.com/jtan3
so if you store it on your desktop
an example for mine would be like:
<img class="realEstatePic" id="img1" alt="realEstatePic" src="img/realEstate1.jpg"/>
the example i just used would require you to be using a text editor, not codepen though
what you would need would be a folder holding your project files like: index.html, style.css, and then a folder inside the project folder called: img
then you can drag/drop your downloaded img to your img folder in your project folder
@andrewmparker your links
https://mail.google.com/mail/u/1/?ui=2&ik=979911f0d4&view=att&th=15c74de77ec979b9&attid=0.1&disp=safe&zw gets a 404
@andrewmparker @Isabelgarcia3 Upload the image to https://postimage.io/
It will fix both of your issues - codepen will be able to use the images and the URL will be short.
To resize your image, use an editor like MS Paint.
It will fix both of your issues - codepen will be able to use the images and the URL will be short.
To resize your image, use an editor like MS Paint.
anybody wanna look at my javascript? trying to figure a couple things out
andrewmparker sends brownie points to @skyc0der and @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: andrewmparker already gave jtan3 points
:star2: 1619 | @skyc0der |http://www.freecodecamp.com/skyc0der
can someone please help none of the data is displaying on my weather app
https://codepen.io/tylerjj17/pen/XgWpRj
https://codepen.io/tylerjj17/pen/XgWpRj
@tylerjj17 This is not a valid address:
http://http://api.openweathermap.org, but either way, codepen requires us to use https: for everything now and unfortunately, openweathermap doesn't support https unless you spend money for a premium account. Try the Dark Sky API - that seems to be a popular alternative: https://darksky.net/dev/docs
@vorousja Sure
What are you trying to figure out?
$(document).ready(function() {
if (document.getElementByClass("quoteBox").innerHTML) {
$(".getQuoteBtn").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
$(".quoteBox").html(jsonData[0].content + jsonData[0].title);});
});
}
});
so a)my quote is not being replaced each button click
im brainstorming how i should approach the generation of a new quote and replacing the old one with the new one etc
thats why the conditional statement is there, checking if theres pre existing innerHTML..if thats even proper syntax...not sure
@vorousja That API caches the request, so you'll only get a new quote if you refresh the page - or a trick is to add a random number after the
= at the end of the URL
You can use the $.ajax code they have there ^^ that use
cache: false
you can request more than one quote at a time and pick one randomly:
&filter[posts_per_page]=30
or you can disable cache with $.ajaxSetup and keep using your getJSON code like you have it: https://stackoverflow.com/questions/8841425/how-to-set-cache-false-in-jquery-get-call
But, easiest way is to add a number to the end of the URL I think.
$.now() will put the current date and time there for you, and will always be a new number
isabelgarcia3 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1620 | @skyc0der |http://www.freecodecamp.com/skyc0der
@vorousja $.ajaxSetup should be right before your line with the $.getJSON in this case
damn. ajax is so cool
vorousja sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1621 | @skyc0der |http://www.freecodecamp.com/skyc0der
@vorousja one piece of advice that will help you later on - try to put your quote code in its own function. It's good to separate your code into manageable functions and then call them when needed.
Hello, I'm currently trying to make a jsonP request and execute a function once its loaded. However I'm getting an error. Could someone tell me what is going on?
Here's my code:
function connectToApi (target) {
target = target + "?";
url = url + target + callback;
$.getJSON(url,StreamerObjCreate(json, target));
}and the mistake I'm getting is Uncaught ReferenceError: json is not defined
at connectToApi
Note: url and callback have been previously defined.
how do you align images in the center of your webpage???
There are lots of design patterns for coding
@andrewmparker One way is position: relative, top: -50% left -50%. Transform: translate(-50%,-50%)
the numbers might be positive or negative, I forgot, you'll have to check
yep, again that is one way to do it. There's a lot of ways
I do not recommend position relative unless you know what you're doing. Relative and Absolute positioning can really mess things up :)
whenever i add my background image, it adds this annoying line below the navbar, any idea why? https://prnt.sc/fgakym
I'm trying to execute a function once a JSONP is loaded but I'm receiving a weird error message
lol @andrewmparker I built it so I could learn back when I started :p
almost had it copied lol
Here is the code @SkyC0der
function StreamerObjCreate (jsonObj, name) {
streamersObj[name] = name;
streamerObj[name].onStream = jsonObj.stream;
streamersObj[name].channel = jsonObj._links.channel;
streamersObj[name].stream = jsonObj._links.self;
}
function connectToApi (target) {
target = target + "?";
url = url + target + callback;
$.getJSON(url,StreamerObjCreate(json, target));
}
url and callback and target where already previously defined
yep, it was just a variable because i was experimenting :)
@SkyC0der The Api connects succesfully, the issue is the function I call to execute
here's the error :
jquery-3.2.1.js:3869 Uncaught ReferenceError: json is not defined
at connectToApi (http://127.0.0.1:54466/Twitch.tv%20Project/script.js:26:37)
at http://127.0.0.1:54466/Twitch.tv%20Project/script.js:11:9
at Array.forEach (native)
at HTMLDocument.<anonymous> (http://127.0.0.1:54466/Twitch.tv%20Project/script.js:10:11)
at mightThrow (http://127.0.0.1:54466/Twitch.tv%20Project/jquery-3.2.1.js:3583:29)
at process (http://127.0.0.1:54466/Twitch.tv%20Project/jquery-3.2.1.js:3651:12)
@JuanP97 Maybe try it this way:
function connectToApi (target) {
target = target + "?";
url = url + target + callback;
$.getJSON(url, function(json) {
StreamerObjCreate(json, target)
});
}
@SkyC0der will you see what is wrong with my images they are still not working: https://codepen.io/andrewmparker/pen/JJoBLE
But sure :)
@SkyC0der Yep that works >.< It's just that I wanted to separate it into more than one function. but thanks :)
juanp97 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1622 | @skyc0der |http://www.freecodecamp.com/skyc0der
srry
@JuanP97 Yeah...you'll have to process the variable for the JSON that comes back from the API first.
If you want it on one line, you could do:
If you want it on one line, you could do:
$.getJSON(url, json => StreamerObjCreate(json, target));
@andrewmparker First thing add an alt="description of image" on each image of your html
It will display a text ir the image is not loaded properly
I can't access your gmail inbox, so the first two show up as broken images
put your images on google photos as public and then use that link instead
they should then load properly
@SkyC0der I'll check your solution will let you know if it works.
Hang tight, it might take me a bit to write this down
Click "Settings" in codepen and replace your link to bootstrap with version 3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
You're using a new one that uses different class names than what we learned
remove this from all of your images:
img="responsive" and add img-responsive as a class name: class="imgfix img-responsive"
<img id="img4" class="img-responsive imgfix" alt="favorite city" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Atlanta_Skyline_from_Buckhead.jpg">
I decided to use buttons instead of nav (and thanks to codeplanet for their code)
last thing @andrewmparker You have id="imgtotal" as a div that houses all of your images, but it is only 20px tall in your CSS. Remove that CSS
@SkyC0der whats the best practice for checking if my quote box has a quote in it already?
andrewmparker sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: andrewmparker already gave skyc0der points
can i check to see if getQuote() has been called and then call it if not?
@vorousja I think you can just do something like:
if($('#id of your quote container').text() !== "") {add a new quote}
so, use jQuery .text() and see if there is any text inside your quote element
@Frostbites local links shoud point to a div with some id. For example if you want to link to <div id="about"> you would do <a href="#about">
@Frostbites You might have more luck with the navbar component? https://v4-alpha.getbootstrap.com/components/navbar/
should that work on the loading of the page?
how can i center text so that its center to the page minus the scrollbar?
so bascially its center to everything you can see, but not the scrollbar
@vorousja it centers it to the page plus the scrollbar, so bascially it centers a little bit too right :\
@fullmetal7777 check out innerWidth, outerWidth, and scrollWidth properties
'''var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];
// Setup
var lastName = "Lovelace";
// Only change code below this line.
var thirdLetterOfLastName = lastName;
'''
@SkyC0der do you see any errors in my logic?...
$(document).ready(function() {
function getQuote(){
$(".getQuoteBtn").on("click", function(){
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$.getJSON("
$(document).ready(function() {
function getQuote(){
$(".getQuoteBtn").on("click", function(){
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$.getJSON("