@sjurs1 flexbox is css so write in your css window in codepen
@longnt80 Yep, I don't know why I got confused, stupid question
but thanks @longnt80 !
sjurs1 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @longnt80 |http://www.freecodecamp.com/longnt80
@SkyC0der hey u on?
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
@Pagnito Hey, what's up?
@SkyC0der have u alrdy installed babel in ur computer?
or projects
No, I just use it in codepen
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
whats yarn
@Pagnito yarn is like npm
@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/
no not yarn
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 then run it project by project
@SkyC0der and for "MENU" ?
@SkyC0der yea, there seems to be a few, but there on windows :(
and some of them are old
@Pagnito To use babel, you need to be running a pre-processor, like grunt or webpack, I think
but yea ill def let u know
@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?
@r1chard5mith yea im taking steps to learn
so, for your "Menu", use:
.navbar-default .navbar-brand {
color: whatever color you want;
}
but ultimately yes
@Pagnito if it's a node app, you shouldn't need babel
@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
yea i know
web starter kit?
yup
whats that
It sets up a dev environment
Very easy to use
And you can code live (it reloads the browser when you save changes)
@SkyC0der ok man, ty
bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1610 | @skyc0der |http://www.freecodecamp.com/skyc0der
@r1chard5mith hmm, ok thanks
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.
Good <time-of-day> to you too @baseballpoetess
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....
@baseballpoetess https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
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
de nada
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 ?
changed up my tribute project a bit! any feed back? https://codepen.io/colechamberss/pen/qmvjqB
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
@mlaos1997 i think its
img-fluid for bootstrap 4
img-responsive for 3
@moT01 Thanks! Seems to have worked
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
@YozhikM looks too good to be your first site
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
@Gr8ayu thank you. Sorry for the late reply.
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 yea, use it
@moT01 Great, thanks Tom!
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">
@SkyC0der ty :D
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 They enforce HTTPS now. No way to use HTTP
@SkyC0der thanks!
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
Neither in Opera
@bookofbash Use JSONP instead of that proxy.
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
you want to use the image as your background?
yea
use this in css
body {background-image: url("")}
body {background-image: url("")}
will it mess with my bootstrap grid latter on
set an id then
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
so background-img{url"ehatever"
}
}
yes but the url in small parantheses ()
so i actually dont write url out i just put the url right
@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);
}
yeah like that
thats what i out but the img isnt coming out hold up let me refresh
its just a white page right now
@Botenga what happen to the other portfolio ?
lol scraped it
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
hey @bytao7mao
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
Hello does anyone know how to use Skycons from Dark Sky?
@fdemaa hey, can you be more specific ?
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;
hey i have a question can you use more then 1 container fluid
@Botenga you can use all the containers or containers-fluid you want
lol trying to put that computer img on the top
oh i see, @fdemaa but the grid is only horizontal
@fdemaa try ".col-md-offset-*" method
@bytao7mao thanks! i will keep trying
:cookie: 120 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
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
lol, that happens sometimes
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.
@SkyC0der i didnt know about that ! nice !
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
@SkyC0der
xd
Nice work @fdemaa :p
@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 Page looks good!
@Taslack hi man! and thanks!
:cookie: 371 | @taslack |http://www.freecodecamp.com/taslack
fdemaa sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
@fdemaa Hello. Ya it came together nicely...besides the typos. ;-P
@Taslack haha the important thing is the coding right ? :shipit:
haha
Does anyone know how to use Skycons on codepen?
@spiredarc https://codepen.io/skycoder/pen/qmEBOw
I didn't see you were using a proxy - overlooked the skycons part of that error message ;)
Thank you for this, @SkyC0der
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.
@Taslack yest that for sure ! what are you working on ?
@fdemaa Coding up something American for twitch
@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 https://codepen.io/fdemaa/pen/awzvJZ
in the html code or css part
@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 Check out this: https://css-tricks.com/box-sizing/
@Taslack @fdemaa thanks it worked
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.
I would really appreciate some help
@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?
Hey guys I need some help with the Twitch API.
@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?
I want them to
@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
@Netrunner21 Flicker for me at the same time.
The don't for me, and sometimes they don't all flicker, or one of them will be white
it's aq mixed bag
@Netrunner21 What browser you using?
Chrome
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 Ya it will be fine if you ignore it.
@Netrunner21 They blink at the same time on firefox for me as well.
Might just be my end then
@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
what does offset do @SkyC0der
@Netrunner21 works perfectly on my end! good jobs! :+1:
@Botenga An offset is like putting an empty column before it. In that example,
col-xs-offset-9 is like 9 empty columns
Thanks Nguyen
is w3schools a good sight for reference?
@TehNuuki So much information to know, its better to just have a reference in your head on where to find things.
is it ok to use functions like this
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.
But it can be solved more efficiently I think...
@Taslack That's good advice, I'll keep at it!
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
@Botenga You'll likely need them both
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 Okay, I'll give that a shot
@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
@Pagnito what are you talking about? xd
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 ?
type in google beta freecodecamp and check out the map
@Pagnito thanks!
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
:+1:
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
@AmitP88 hi bro! with a flu but coding anyway :sparkles:
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 oh damn, that sucks dude.
@AmitP88 You are working on the porftolio ?
@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
Hey guys
@AmitP88 is looking good anyway haha
@fdemaa thanks lol
amitp88 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @fdemaa |http://www.freecodecamp.com/fdemaa
@AmitP88 it load fast too
@sudeepnarkar hey Sudeep
@fdemaa hmmm, on Google Pagespeed Insights though the score isn't good
@AmitP88 i will check that
Poor
53 / 100
Haha
53 / 100
Haha
thats mine
xd
still learning tho xd
@fdemaa lol no worries :)
I'm trying to make my Demo and Repo buttons not opaque though. They're too transparent
how can I get the link of my tribute page?
just copythe url of your tribute page
ok.! just making sure
@chinaemereike18 :+1:
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
what do you want to center ?
i mean your image above the text ?
do you see about me 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
Hi guys.
i dont understand
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
lol want you get some cookies
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
@fdemaa but wont that make my headshot be below my bio
@Botenga
https://codepen.io/fdemaa/pen/YQPqWX
i put 4 col to your image and delte the margin-left
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
hello i need some help on front end ?
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
@Botenga cheers man, goodnight!
@sanjays95 im a noob but maybe i can help you ?
check pm
thanks :)
@fdemaa
@sanjays95 man i can make it works im sorry :(
aww
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
@padunk Thank you!
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:
@LovroM np, i try it before and it work just fine
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
@monkingame lookup setTimeout()
you can then chain the functions by adding them to setTimeout() function one after another
Anyone working on their portfolio page?
@LordMathis for example?thanks!
@AtaraxiaBlue yeah? why?
function simulateClicks(i) {
if (i >== simonArray.length) return;
var grid = simonArray[i];
grid.mousedown();
setTimeout(function() {
grid.mouseup();
simulateClicks(i+1);
}, 350);
}
@LordMathis Wow!great work!they works excellent.Thanks thanks!
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
@LordMathis excuse me,another question ,thanks
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">?
make p element display:inline-block;
@IvyXia123 can you please clarify that? thanks
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!!
@HappyRedditor59
p is a block element by default
@HappyRedditor59 you can use <span> instead of <p> also
@fanfoune its great! just a few things:
right aligning the block in the end isnt looking good
i would suggest center aligning it
also link in the end is missing
Hello World
hello @chetan-rathod
@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 https://codepen.io/skycoder/pen/xqbGor
that did it! thanks @h1tag !
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?
@LordMathis here you are: https://codepen.io/ADondi/pen/gRbLOP
@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 Sure
@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);
});?
@YozhikM What is the question?
@YozhikM yes, google setTimeOut()
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??
@Mr-Henderson why do you want to do that?
@Mr-Henderson need to show some activity
either complete a challenge
@LordMathis Oh thanks!I tested your code:(function recure(i){recure(i)})(0); and it works very well.
:cookie: 338 | @lordmathis |http://www.freecodecamp.com/lordmathis
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
or help someone in the chat rooms
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)
say thanks and click my name, ...will give me points, and fill the box
@moT01 @moT01 @moT01
@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
thanks @Mr-Henderson
mot01 sends brownie points to @mr-henderson :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @mr-henderson |http://www.freecodecamp.com/mr-henderson
@moT01 ok Im clicking your name and typing
hmmm not working though what am i doing wrong?
you need to type
thanks or ty or thx or some other recognized version
@moT01 ty
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @mot01 |http://www.freecodecamp.com/mot01
sweet
go check your boxes
@moT01 thank you
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: mr-henderson already gave mot01 points
great
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
Ah - @moT01 - thank you!
mrdrdr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @mot01 |http://www.freecodecamp.com/mot01
@moT01 thanks a lot! will check out flexbox.
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?
sure there is @MatLang
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}`);
});
@MatLang ill take a look
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.
well, what i would tell you to do is use a css media query
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
@moT01 it worked! wow thats pretty cool
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.
@ehsansh
$.getJSON is the jquery way to get json data
@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.
@ehsansh what error it returns?
@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
ok thanks @LordMathis that makes perfect sense.
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
@ehsansh Yeah, I think that's probably whats going on
@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
Quick qustion: is a
display:none element click-able?
@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!
:cookie: 341 | @lordmathis |http://www.freecodecamp.com/lordmathis
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
@SkyC0der thanks, i guess its a mobile version problem
:star2: 1616 | @skyc0der |http://www.freecodecamp.com/skyc0der
mikaeloduh sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
gotcha. Yeah it works half of the time and i never know why lol
@ericvoigt I know. I've got a long ways to go. 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.
@NeelDVirus remove the
() of window.onload = init()
@NeelDVirus Also, should there be a
. in front of logo_official?
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 Thats the whole point of it :D
@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.
Maybe that helps explain better
@SkyC0der let me check this one out
@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
@yelhsa Well here i go , thanks for the advice
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?
Hello!
hello! @minoy
@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
hello!
@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.
can someone tell me why my external link isnt working? https://codepen.io/willybeans/pen/zwePKg
I haven't suggested anything yet :)
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
@SkyC0der thanks
ericvoigt sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1617 | @skyc0der |http://www.freecodecamp.com/skyc0der
@SkyC0der how can i use a specific image from unsplash.. trying https://unsplash.it/200/300?image=0
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 :)
@NeelDVirus what are you working on?
@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
@andpawlenko thank you so much!
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:
^^ :)
@willybeans just add http:// in href attribute
@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
It's around 150 lines of codes with comments, line breaks, etc
@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/
hi
@NeelDVirus I'm happy to help where I can :)
your feedback plz!!!
Probably can't collaborate in an official sense though, I have some other projects I'm working on at the moment
@SkyC0der oops that's fine. thanks for assisting though
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
need help! my title text is overlapping when on mobile.. https://codepen.io/whdhli/full/GEgxry/
Hi @whdhli I can't help much but when I removed the "jumbotron" class it worked fine
@monicaparrillo fixed! it was my line height
Wahoo! Well done :D
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?
i can try
ok sending...
$(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)
not including ending }); and what not
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 this is an array, which contains 1 object
oh so i should be using brackets because its 0-indexed
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));
but you dont want the stringify
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'?
yes!
cool beans, it helps to talk through ideas with someone
put that in here: html(...) replace the ...
I literally just finished the same project :)
so i'm not some advance developer ;) i hope it works now
thank you monica =D
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
right it wouldnt be JSON at that point so that makes sense
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
@monicaparrillo ok thanks...i'm gonna check it out.
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
@Iggy1906 you want a fixed navbar?
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
just do class"navbar-fixed-top"@iggy1906
@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 you forgot the https in front of your bootstrap
@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.
oh ok
@Iggy1906 play around with margins
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...
it still works the same @jtan3
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
who cares how long it is
@andrewmparker get rid of your width in your
.button css
sometimes the link is pages long
so?
download it and link it locally then if you dont want to scroll through it all
what does linking it locally mean?
wont work with the basic version of code pen though
thx @jtan3
andrewmparker sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @jtan3 |http://www.freecodecamp.com/jtan3
your going to use a file path instead of a URL
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"/>
@jtan3 why aren't my images working??
the example i just used would require you to be using a text editor, not codepen though
oh okay
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
no like how do i fix how big they are @jtan3
@andrewmparker use height and width?
@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
thx @SkyC0der @jtan3
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
@SkyC0der would you be able to look at my code?
@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?
thanks...
$(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
theres no way to handle that any other way?
There are a few ways to do it
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
ok let me try
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
wheres the best spot to place the $.ajaxSetup?
@SkyC0der Thank you!!
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
ok trying..
damn. ajax is so cool
:)
thanks @SkyC0der
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.
isnt there a term for that? that i should probably know...
how do you align images in the center of your webpage???
hmmm, I'm not sure. Probably, but I don't know it either lol :)
There are lots of design patterns for coding
@andrewmparker are you using bootstrap?
yes
@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
@JuanP97 you would put that into css??
@andrewmparker That codepen above may help
i tend to use margin-left:auto margin-right:auto;
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 :)
@SkyC0der true
whatever allows for the most flexibility and least css-ing
@JuanP97 Were you just asking about JSONP?
not i, no
@SkyC0der i love the page lmao
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
callback in that case should just be
?callback=?
yep, it was just a variable because i was experimenting :)
log the full URL and make sure it looks like that ^^
log
oh cbot...
@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
Your profile pic is really making me hungry
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
i <3 pancakes
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
ok
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
yep
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.
yeah i was about to start working on those two
@andrewmparker There are a few problems with your page
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
Hey guys
remove this from all of your images:
img="responsive" and add img-responsive as a class name: class="imgfix img-responsive"
This is my pen but it does not seem to work
<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?
@SkyC0der thx
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">
trying...
Thanks Matus, let me try this
@Frostbites You might have more luck with the navbar component? https://v4-alpha.getbootstrap.com/components/navbar/
doesnt seem to be working
should that work on the loading of the page?
how can i center text so that its center to the page minus the scrollbar?
text:center;
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 :\
link your codepen
@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;
'''
:bulb: to format code use backticks! ``` more info
@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("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);
});
});
}
if ($(".quoteBox").text() !== ""){
getQuote();
}
});
$(document).ready(function() {
function getQuote(){
$(".getQuoteBtn").on("click", function(){
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$.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);
});
});
}
if ($(".quoteBox").text() !== ""){
getQuote();
}
});
@vorousja so if you scroll it in enough youll see where i have it change the font size, and right before it changes youll see the right so is a little bit too far right, and i think its because its centering it to the whole document + the scrollbar
var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];
// Setup
var lastName = "Lovelace";
// Only change code below this line.
var thirdLetterOfLastName = lastName;
@JuanP97 how do i make a google photo public exactly
@SkyC0der judging from the title, thatl solve my problem lol thanks. Started learning bootstrap for my portfolio btw, maaaaan it is the shit
fullmetal7777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1623 | @skyc0der |http://www.freecodecamp.com/skyc0der
@vorousja Yeah, your button click should be outside of the getQuote() function and it should call the getQuote() function
$(document).ready(function() {
if ($(".quoteBox").text() !== "") getQuote();
$(".getQuoteBtn").on("click", getQuote);
});
function getQuote() {
// Disable caching of AJAX responses
$.ajaxSetup({cache: false});
$.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);
});
}
(but you really don't need that if() check)
@fullmetal7777 Nice :) it'll save you some time lol
so i could jsut call getQuote when the document is ready?
Yeah, then you'll get a quote every time the page loads
check it out.. how is it looking.. trying to figure out how to make the circle image stay in one spot when you scroll and the header scrolls down behind the gallery which is kinda weird https://codepen.io/ericvoigt/pen/XRLQqw?editors=1000
I mean, when the page loads for the first time, the quotebox should be empty anyway, so no need to do the if to check
@ericvoigt for header to be in front of gallery check out z-index
@ericvoigt Your portfolio page looks really good so far :smile:
@ericvoigt add z-index: 1 to your header class
Hmmm
Can anyone help with my portfolio project? I want to add different background images for different pages, but am unsure how to do it. I was gonna add a separate body tag for it but upon reading I found that's frowned upon
@artoodeeto
my weatherBox div isnt working can someone help
https://codepen.io/tylerjj17/pen/XgWpRj
https://codepen.io/tylerjj17/pen/XgWpRj
it shouldnt have a 100% width
@WhereIsMikeHawk maybe separate sections using divs then some how nest an image?
See the way I was able to get a bg was I did in css body, html {min-height:100%} but if I separated it in divs, I wouldn't know how to get the full imae
use divs and put the background image to each div @WhereIsMikeHawk
My problem is with that, the height of the image is only what I have displayed
@tylerjj17 you spelled
background-color wrong
@WhereIsMikeHawk you can use height and width?
Alright, so I've got it working the way I want it to work, but I can't for the life of me get the pic on top of the navbar. Any ideas? https://codepen.io/iggy1906/pen/WjLwWK?editors=1100
@Iggy1906 on top or in front?
the z-index property can bring things to the front or move them back
@moT01 Both actually. I need the turntables to go on top of the navbar and for the divs in the body to scroll under like the text.
Johnny, I tried using width 100% and height auto, or just height 100% but I'm still getting the bottom half cropped
Yeah, I tried the z-index and it was somehow overriding my navbar and the navbar wasn't showing up that's why i took it out.
maybe put the image in an <img> tag and just put it above the nav?
I tried that an the pic cover the whole page and the page just scrolled in the background. But I will try again and see what happens.
@WhereIsMikeHawk if you want to resize your image use something like MS paint and then use https://postimage.io/ to upload. If you can provide your example it would be easier to help you.
Here lemme give you the link, so I can show you
It's the orange one, says redeux
I'm still working on the quote machine project using codepen and I think I'm close but I'm getting an error: XMLHttpRequest cannot load due to access control checks. I switched everything to jsonp believing this would be a work around but no luck...
anyone want to review my portfolio page? https://codepen.io/Joshdc/pen/eRYLxr
@joshc1224 good. It seems the facebook link is broken and the fcc link is not correct
Right on, which FCC link are we supposed to use? I just clicked on my picture and linked to the profile page.
Hello All! Hope everyone is well
@joshc1224 double check that URL:
looks fine aside from the
https://www.freecodecamp.com/joshc1224Free Code Camplooks fine aside from the
Free Code Camp text at the end
@joshc1224 give your progress page link
the link address usually will be www.freecodecamp.com/yourname
the link address usually will be www.freecodecamp.com/yourname
You may also want to read about this: https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5
The <a> tag can't go in <button> or vice versa
The <a> tag can't go in <button> or vice versa
@WhereIsMikeHawk you might have to resize the picture in an image editor. Not sure if there's a better way.
Okay thank you!
thanks everyone. I think the a tag is working in the button, but ill double check and see if I can just insert the icon without a button, then wrap the icon in an a tag.
@joshc1224 - looks pretty good - "Python" is misspelled. The yellow font against the white background is hard to read (I know that it all says "Coming Soon". If I select everything on the page, I see that the section headings are white against a white background. Maybe some image is just not being loaded for the project sections? Yes it looks like some 'blank-chalkboard-wallpaper' image is not being loaded?) But a good start.
hey guys, I'm working on optimizing the loading speed of my portfolio site and I need a little help. PageSpeed Insights says I need to eliminate render blocking CSS, but I'm not quite sure how to do this when it comes to css source links, CDNs, etc.
@AmitP88 don't change this
Using CDN is a good way
I've got a pb with my own switch button (stylized checkbox)
@R0ulito ah I see. ok, I'll move on to the other optimization steps. Hopefully I can still get to above 90% score
It still showing a part of the other span...
Managed it :)
FFS 35 minutes on it... I turned mad then ask here... and i find how to do it by myself :tongue:
@AmitP88 It's always better performance to load your CSS from the same server, but I don't think you can really get 100% on that unless you do some serious re-organization and add some JS to defer load times of your above-the-fold content. Here's a related article that kind of shows the pain required to get a better score :) https://www.appneta.com/blog/bootstrap-pagespeed/
can someone help me please my backgrounds arent showing up
https://codepen.io/tylerjj17/pen/XgWpRj
https://codepen.io/tylerjj17/pen/XgWpRj
You could probably also try to minify your css and js @AmitP88 - might give a slight boost?