These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Jun 2017
Long Nguyen
@longnt80
Jun 05 2017 00:04
@sjurs1 flexbox is css so write in your css window in codepen
Thomas
@sjurs1
Jun 05 2017 00:08
@longnt80 Yep, I don't know why I got confused, stupid question
but thanks @longnt80 !
CamperBot
@camperbot
Jun 05 2017 00:08
sjurs1 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @longnt80 |http://www.freecodecamp.com/longnt80
Pagnito
@Pagnito
Jun 05 2017 00:17
@SkyC0der hey u on?
Eric Voigt
@ericvoigt
Jun 05 2017 00:19
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
Gulsvi
@gulsvi
Jun 05 2017 00:29
@Pagnito Hey, what's up?
Pagnito
@Pagnito
Jun 05 2017 00:29
@SkyC0der have u alrdy installed babel in ur computer?
or projects
Gulsvi
@gulsvi
Jun 05 2017 00:30
No, I just use it in codepen
Haven't played around at all with babelify, browserify, bundling, packaging, deploying, etc...
Pagnito
@Pagnito
Jun 05 2017 00:31
@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
Marius Nicolae
@bytao7mao
Jun 05 2017 00:32
guys, how do i change the text color from the navigation bar ?
https://codepen.io/bytao7mao/pen/qjEEwv
Pagnito
@Pagnito
Jun 05 2017 00:32
i uninstalled from there as well, once i read that it should be used for each induvidual project
Gulsvi
@gulsvi
Jun 05 2017 00:32
Yeah, most people use npm/yarn to install it in their project folder from what I understand
Pagnito
@Pagnito
Jun 05 2017 00:33
whats yarn
Richard Smith
@r1chard5mith
Jun 05 2017 00:33
@Pagnito yarn is like npm
Pagnito
@Pagnito
Jun 05 2017 00:33
@r1chard5mith do u know how i can use npm to install it into my project folder?
Gulsvi
@gulsvi
Jun 05 2017 00:34
.navbar-default .navbar-nav>li>a {
    color: skyblue;
}
@bytao7mao ^^ like that
Pagnito
@Pagnito
Jun 05 2017 00:34
@r1chard5mith or how does the whole installing it locally works/means
Richard Smith
@r1chard5mith
Jun 05 2017 00:35
@Pagnito install yarn? I haven't needed it but the docs are here https://yarnpkg.com/lang/en/docs/install/
Pagnito
@Pagnito
Jun 05 2017 00:35
no not yarn
babel
do i have to install it into my user folder only?
Gulsvi
@gulsvi
Jun 05 2017 00:35
@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
Pagnito
@Pagnito
Jun 05 2017 00:35
and then run it project by project
Marius Nicolae
@bytao7mao
Jun 05 2017 00:36
@SkyC0der and for "MENU" ?
Pagnito
@Pagnito
Jun 05 2017 00:36
@SkyC0der yea, there seems to be a few, but there on windows :(
and some of them are old
Richard Smith
@r1chard5mith
Jun 05 2017 00:36
@Pagnito To use babel, you need to be running a pre-processor, like grunt or webpack, I think
Pagnito
@Pagnito
Jun 05 2017 00:36
but yea ill def let u know
@r1chard5mith hmm, the video i was watching last, had me install node and then babel right after
Gulsvi
@gulsvi
Jun 05 2017 00:37
image.png
@bytao7mao right-click and inspect the element to see how it is styled
Richard Smith
@r1chard5mith
Jun 05 2017 00:37
@Pagnito Are you making a node app? Or a front-end thing?
Pagnito
@Pagnito
Jun 05 2017 00:37
@r1chard5mith yea im taking steps to learn
Gulsvi
@gulsvi
Jun 05 2017 00:38
so, for your "Menu", use:
.navbar-default .navbar-brand {
    color: whatever color you want;
}
Pagnito
@Pagnito
Jun 05 2017 00:38
but ultimately yes
Richard Smith
@r1chard5mith
Jun 05 2017 00:38
@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
Pagnito
@Pagnito
Jun 05 2017 00:39
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
Richard Smith
@r1chard5mith
Jun 05 2017 00:39
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
Pagnito
@Pagnito
Jun 05 2017 00:39
yea i know
web starter kit?
Richard Smith
@r1chard5mith
Jun 05 2017 00:39
yup
Pagnito
@Pagnito
Jun 05 2017 00:39
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)
Marius Nicolae
@bytao7mao
Jun 05 2017 00:40
@SkyC0der ok man, ty
CamperBot
@camperbot
Jun 05 2017 00:40
bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1610 | @skyc0der |http://www.freecodecamp.com/skyc0der
Pagnito
@Pagnito
Jun 05 2017 00:41
@r1chard5mith hmm, ok thanks
CamperBot
@camperbot
Jun 05 2017 00:41
pagnito sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
Richard
@rylew0925
Jun 05 2017 00:45
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?
Marius Nicolae
@bytao7mao
Jun 05 2017 00:46
@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 ?
J-Mag Guthrie
@baseballpoetess
Jun 05 2017 00:51
hello and good <time-of-day> to everyone. I have a question.
TehNuuki
@TehNuuki
Jun 05 2017 00:53
Good <time-of-day> to you too @baseballpoetess
J-Mag Guthrie
@baseballpoetess
Jun 05 2017 00:54
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....
J-Mag Guthrie
@baseballpoetess
Jun 05 2017 00:55
I don't know the vocabulary so I can't look up what I want to do.
Thank you.
@r1chard5mith gracias
CamperBot
@camperbot
Jun 05 2017 00:56
baseballpoetess sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
Richard Smith
@r1chard5mith
Jun 05 2017 00:56
de nada
Marius Nicolae
@bytao7mao
Jun 05 2017 00:58
guys, how do you suggest is the simple way to move the logo a little upper ?
https://codepen.io/bytao7mao/pen/qjEEwv
with margin-top: -7px; it's ok ?
YozhikM
@YozhikM
Jun 05 2017 01:03
@YozhikM
Can anyone check my code? This is my first site
http://mysolaris.xyz/index.html
Cole Chambers
@colechamberss
Jun 05 2017 01:05
changed up my tribute project a bit! any feed back? https://codepen.io/colechamberss/pen/qmvjqB
Marcelo Laos
@mlaos1997
Jun 05 2017 01:15
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
Tom
@moT01
Jun 05 2017 01:18
@mlaos1997 i think its img-fluid for bootstrap 4
img-responsive for 3
Marcelo Laos
@mlaos1997
Jun 05 2017 01:19
@moT01 Thanks! Seems to have worked
CamperBot
@camperbot
Jun 05 2017 01:19
mlaos1997 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jun 05 2017 01:21
@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
Cole Chambers
@colechamberss
Jun 05 2017 01:23
Yeah, the more I look at it, the more it feels too much like buzzfeed to me
Tom
@moT01
Jun 05 2017 01:26
@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
YozhikM
@YozhikM
Jun 05 2017 01:31
@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
Paul Figler
@DUBNetworkPaul
Jun 05 2017 01:32
@Gr8ayu thank you. Sorry for the late reply.
CamperBot
@camperbot
Jun 05 2017 01:32
dubnetworkpaul sends brownie points to @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
Marius Nicolae
@bytao7mao
Jun 05 2017 01:33
can some1 tell me why in small-device mode my tabs do not expand ?
https://codepen.io/bytao7mao/pen/qjEEwv
JazzLiberation
@JazzLiberation
Jun 05 2017 01:35
Helloooo. Does anybody know if we are permitted to use css for this challenge? Thanks you! (:
Tom
@moT01
Jun 05 2017 01:36
@JazzLiberation yea, use it
JazzLiberation
@JazzLiberation
Jun 05 2017 01:37
@moT01 Great, thanks Tom!
CamperBot
@camperbot
Jun 05 2017 01:37
jazzliberation sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 701 | @mot01 |http://www.freecodecamp.com/mot01
Gulsvi
@gulsvi
Jun 05 2017 01:39
@bytao7mao Add your ID to your collapse menu:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Marius Nicolae
@bytao7mao
Jun 05 2017 01:42
@SkyC0der ty :D
CamperBot
@camperbot
Jun 05 2017 01:42
bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1611 | @skyc0der |http://www.freecodecamp.com/skyc0der
Adam Bohannon
@abohannon
Jun 05 2017 01:45
How do we connect to codepen over http? It seems their server defaults to https?
Gulsvi
@gulsvi
Jun 05 2017 01:49
@abohannon They enforce HTTPS now. No way to use HTTP
Adam Bohannon
@abohannon
Jun 05 2017 01:50
@SkyC0der thanks!
CamperBot
@camperbot
Jun 05 2017 01:50
abohannon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1612 | @skyc0der |http://www.freecodecamp.com/skyc0der
Bashir Harrell
@bookofbash
Jun 05 2017 01:52

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

Marius Nicolae
@bytao7mao
Jun 05 2017 02:02
Neither in Opera
Gulsvi
@gulsvi
Jun 05 2017 02:02
@bookofbash Use JSONP instead of that proxy.
Add this to the end of your weatherApi variable: + "?calback=?"
Botenga
@Botenga
Jun 05 2017 02:04
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
Marius Nicolae
@bytao7mao
Jun 05 2017 02:05
you want to use the image as your background?
Botenga
@Botenga
Jun 05 2017 02:06
yea
Marius Nicolae
@bytao7mao
Jun 05 2017 02:06
use this in css
body {background-image: url("")}
Botenga
@Botenga
Jun 05 2017 02:06
will it mess with my bootstrap grid latter on
Marius Nicolae
@bytao7mao
Jun 05 2017 02:07
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
Botenga
@Botenga
Jun 05 2017 02:10
so background-img{url"ehatever"
}
Marius Nicolae
@bytao7mao
Jun 05 2017 02:11
yes but the url in small parantheses ()
Botenga
@Botenga
Jun 05 2017 02:12
so i actually dont write url out i just put the url right
@bytao7mao
Marius Nicolae
@bytao7mao
Jun 05 2017 02:14
Marius Nicolae
@bytao7mao
Jun 05 2017 02:16
yeah like that
Botenga
@Botenga
Jun 05 2017 02:16
thats what i out but the img isnt coming out hold up let me refresh
its just a white page right now
fdemaa
@fdemaa
Jun 05 2017 02:18
@Botenga what happen to the other portfolio ?
Botenga
@Botenga
Jun 05 2017 02:19
lol scraped it
i can do better
Marius Nicolae
@bytao7mao
Jun 05 2017 02:20
man, use it like this : body{
background-image:url("http://www.vaahana.net/wp-content/uploads/2014/11/correct2-too-small.jpg");
}
you writed : background-img
fdemaa
@fdemaa
Jun 05 2017 02:21
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

Zach Berwaldt
@zberwaldt
Jun 05 2017 02:22
Hello does anyone know how to use Skycons from Dark Sky?
Marius Nicolae
@bytao7mao
Jun 05 2017 02:24
@fdemaa hey, can you be more specific ?
fdemaa
@fdemaa
Jun 05 2017 02:26

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
@Botenga
Jun 05 2017 02:27
hey i have a question can you use more then 1 container fluid
fdemaa
@fdemaa
Jun 05 2017 02:28
@Botenga you can use all the containers or containers-fluid you want
lol trying to put that computer img on the top
Marius Nicolae
@bytao7mao
Jun 05 2017 02:29
oh i see, @fdemaa but the grid is only horizontal
@fdemaa try ".col-md-offset-*" method
fdemaa
@fdemaa
Jun 05 2017 02:30
@bytao7mao thanks! i will keep trying
CamperBot
@camperbot
Jun 05 2017 02:30
:cookie: 120 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
fdemaa sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Jun 05 2017 02:34
@fdemaa you can push/pull at certain screen sizes: http://getbootstrap.com/css/#grid-column-ordering
fdemaa
@fdemaa
Jun 05 2017 02:43
@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
haha
Gulsvi
@gulsvi
Jun 05 2017 02:44
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.
fdemaa
@fdemaa
Jun 05 2017 02:48
@SkyC0der i didnt know about that ! nice !
Zach Berwaldt
@zberwaldt
Jun 05 2017 02:49
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.
Gulsvi
@gulsvi
Jun 05 2017 02:50
@spiredarc Dark Sky requires JSONP and the fetch() API you're using doesn't support JSONP
fdemaa
@fdemaa
Jun 05 2017 02:51

@fdemaa okey check the layout for the movile class; you will like it ;)

https://codepen.io/fdemaa/pen/oWOMMX?editors=1100

i deserve to get hired lol
Zach Berwaldt
@zberwaldt
Jun 05 2017 02:51
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
fdemaa
@fdemaa
Jun 05 2017 02:52
@SkyC0der
xd
Gulsvi
@gulsvi
Jun 05 2017 02:54
Nice work @fdemaa :p
Botenga
@Botenga
Jun 05 2017 02:55
@fdemaa im learing from my good freind google. You have a typo other than that its look great
*learnig
learning
lolz
fdemaa
@fdemaa
Jun 05 2017 02:56
@Botenga yes of course i have to double check that, i m not native speaking and im not use to writing in english xd
Clinton Shepard
@Taslack
Jun 05 2017 02:56
@fdemaa Page looks good!
fdemaa
@fdemaa
Jun 05 2017 02:57
@Taslack hi man! and thanks!
CamperBot
@camperbot
Jun 05 2017 02:57
:cookie: 371 | @taslack |http://www.freecodecamp.com/taslack
fdemaa sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
Clinton Shepard
@Taslack
Jun 05 2017 02:58
@fdemaa Hello. Ya it came together nicely...besides the typos. ;-P
fdemaa
@fdemaa
Jun 05 2017 03:00
@Taslack haha the important thing is the coding right ? :shipit:
haha
Zach Berwaldt
@zberwaldt
Jun 05 2017 03:01
Does anyone know how to use Skycons on codepen?
I didn't see you were using a proxy - overlooked the skycons part of that error message ;)
Zach Berwaldt
@zberwaldt
Jun 05 2017 03:02
Thank you for this, @SkyC0der
CamperBot
@camperbot
Jun 05 2017 03:02
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
Clinton Shepard
@Taslack
Jun 05 2017 03:04
@fdemaa Ya looks good, a lot you will change later on I am sure.
fdemaa
@fdemaa
Jun 05 2017 03:07
@Taslack yest that for sure ! what are you working on ?
Clinton Shepard
@Taslack
Jun 05 2017 03:08
@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
@Botenga
Jun 05 2017 03:13
in the html code or css part
Clinton Shepard
@Taslack
Jun 05 2017 03:14
@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
fdemaa
@fdemaa
Jun 05 2017 03:15
@Taslack the margin of the container dissapear when it hit the smaller classes like xs right ?
Clinton Shepard
@Taslack
Jun 05 2017 03:16
@fdemaa Exactly, due to the responsivness of class="container-fluid" that bootstrap defines.
Alvin-Capello
@Alvin-Capello
Jun 05 2017 03:18
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
Clinton Shepard
@Taslack
Jun 05 2017 03:18
@Botenga Check out this: https://css-tricks.com/box-sizing/
Botenga
@Botenga
Jun 05 2017 03:18
@Taslack @fdemaa thanks it worked
CamperBot
@camperbot
Jun 05 2017 03:18
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
Botenga
@Botenga
Jun 05 2017 03:19
literally been googling all over the place since yesterday trying to fix that
Clinton Shepard
@Taslack
Jun 05 2017 03:20
@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
@Alvin-Capello
Jun 05 2017 03:31
I would really appreciate some help
Gulsvi
@gulsvi
Jun 05 2017 03:36
@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
Alvin-Capello
@Alvin-Capello
Jun 05 2017 03:44
@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!
CamperBot
@camperbot
Jun 05 2017 03:44
alvin-capello sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1614 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 05 2017 03:45
@Alvin-Capello I should have clarified a <button> inside a <form> fires submit. Otherwise, it's just a button :)
Alvin-Capello
@Alvin-Capello
Jun 05 2017 03:46
@SkyC0der I will write that down so I can remember it later. Everyone on fCC is so helpful!
TehNuuki
@TehNuuki
Jun 05 2017 03:52
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?
Netrunner21
@Netrunner21
Jun 05 2017 03:54
Hey guys I need some help with the Twitch API.
Alvin-Capello
@Alvin-Capello
Jun 05 2017 03:54
@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.
Clinton Shepard
@Taslack
Jun 05 2017 03:55
@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
Netrunner21
@Netrunner21
Jun 05 2017 03:55
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).
Clinton Shepard
@Taslack
Jun 05 2017 03:56
@TehNuuki Then code it onto the screen. But dont get too technical, because your port is something you wil come back to a lot.
Netrunner21
@Netrunner21
Jun 05 2017 03:57
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.
Clinton Shepard
@Taslack
Jun 05 2017 03:57
@Netrunner21 You want them to flicker at the same time....or dont want them too?
Netrunner21
@Netrunner21
Jun 05 2017 03:57
I want them to
TehNuuki
@TehNuuki
Jun 05 2017 03:57
@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
CamperBot
@camperbot
Jun 05 2017 03:57
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
Netrunner21
@Netrunner21
Jun 05 2017 03:57
I need them to add the animation class after the loop is finished
Clinton Shepard
@Taslack
Jun 05 2017 03:58
@Netrunner21 Flicker for me at the same time.
Netrunner21
@Netrunner21
Jun 05 2017 03:58
The don't for me, and sometimes they don't all flicker, or one of them will be white
it's aq mixed bag
Clinton Shepard
@Taslack
Jun 05 2017 03:58
@Netrunner21 What browser you using?
Netrunner21
@Netrunner21
Jun 05 2017 03:59
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
Clinton Shepard
@Taslack
Jun 05 2017 04:01
@Netrunner21 Ya it will be fine if you ignore it.
@Netrunner21 They blink at the same time on firefox for me as well.
Netrunner21
@Netrunner21
Jun 05 2017 04:03
Might just be my end then
@Taslack thanks man
CamperBot
@camperbot
Jun 05 2017 04:03
netrunner21 sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @taslack |http://www.freecodecamp.com/taslack
Long Nguyen
@longnt80
Jun 05 2017 04:04
@Netrunner21 no they blink differently on my browser too. Chrome here
Netrunner21
@Netrunner21
Jun 05 2017 04:05
@longnt80 can you look at my code and see if there is a solution?
Long Nguyen
@longnt80
Jun 05 2017 04:08
@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
so maybe adding the class outside the for loop?
Clinton Shepard
@Taslack
Jun 05 2017 04:13
@Netrunner21 try $(".green").addClass("animated zoomIn infinite").on(), line 68
why isnt my headshot going to the right
i did pull-right
and tried changing the grid for BS but i wont change
Netrunner21
@Netrunner21
Jun 05 2017 04:16
@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
CamperBot
@camperbot
Jun 05 2017 04:17
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
Gulsvi
@gulsvi
Jun 05 2017 04:18
@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
@Botenga
Jun 05 2017 04:18
what does offset do @SkyC0der
Long Nguyen
@longnt80
Jun 05 2017 04:18
@Netrunner21 works perfectly on my end! good jobs! :+1:
Gulsvi
@gulsvi
Jun 05 2017 04:19
@Botenga An offset is like putting an empty column before it. In that example, col-xs-offset-9 is like 9 empty columns
Netrunner21
@Netrunner21
Jun 05 2017 04:19
Thanks Nguyen
TehNuuki
@TehNuuki
Jun 05 2017 04:20
is w3schools a good sight for reference?
Clinton Shepard
@Taslack
Jun 05 2017 04:21
@TehNuuki So much information to know, its better to just have a reference in your head on where to find things.
Suyog RK
@SuyogRK
Jun 05 2017 04:22
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(' ');
}
TehNuuki
@TehNuuki
Jun 05 2017 04:22
@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
Clinton Shepard
@Taslack
Jun 05 2017 04:22
@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.
TehNuuki
@TehNuuki
Jun 05 2017 04:24
@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!
CamperBot
@camperbot
Jun 05 2017 04:24
tehnuuki sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:warning: tehnuuki already gave taslack points
Gulsvi
@gulsvi
Jun 05 2017 04:26
@SuyogRK There's nothing wrong with using .map() for that challenge
Clinton Shepard
@Taslack
Jun 05 2017 04:26
@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.
Gulsvi
@gulsvi
Jun 05 2017 04:27
But it can be solved more efficiently I think...
TehNuuki
@TehNuuki
Jun 05 2017 04:28
@Taslack That's good advice, I'll keep at it!
Clinton Shepard
@Taslack
Jun 05 2017 04:31
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
Botenga
@Botenga
Jun 05 2017 04:31
@SkyC0der which i a better resource for bootstrap the bootsrap website or w3s
Gulsvi
@gulsvi
Jun 05 2017 04:33
@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
goodm0urning
@goodm0urning
Jun 05 2017 04:34
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
Gulsvi
@gulsvi
Jun 05 2017 04:36
@goodm0urning This won't work with navigator.geolocation: var weatherURL = getGeolocation(); unless you use a promise(). Put your getJSON in the function(position)
goodm0urning
@goodm0urning
Jun 05 2017 04:37
@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?
Gulsvi
@gulsvi
Jun 05 2017 04:38
@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.
goodm0urning
@goodm0urning
Jun 05 2017 04:40
@SkyC0der Okay, I'll give that a shot
@SkyC0der thanks
CamperBot
@camperbot
Jun 05 2017 04:40
goodm0urning sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1615 | @skyc0der |http://www.freecodecamp.com/skyc0der
Pagnito
@Pagnito
Jun 05 2017 04:47
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
fdemaa
@fdemaa
Jun 05 2017 04:48
@Pagnito what are you talking about? xd
Amit Patel
@AmitP88
Jun 05 2017 04:51
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
Pagnito
@Pagnito
Jun 05 2017 05:10
@fdemaa u havent heard of beta freecodecamp? its gonna replace this one
fdemaa
@fdemaa
Jun 05 2017 05:16
@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 ?
Pagnito
@Pagnito
Jun 05 2017 05:19
type in google beta freecodecamp and check out the map
fdemaa
@fdemaa
Jun 05 2017 05:19
@Pagnito thanks!
CamperBot
@camperbot
Jun 05 2017 05:19
fdemaa sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @pagnito |http://www.freecodecamp.com/pagnito
Henry
@GitHub-Henry
Jun 05 2017 05:20
http://beta.freecodecamp.com/en/signin login and see for yourself
fdemaa
@fdemaa
Jun 05 2017 05:27
:+1:
Amit Patel
@AmitP88
Jun 05 2017 05:28
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
fdemaa
@fdemaa
Jun 05 2017 05:29
@AmitP88 hi bro! with a flu but coding anyway :sparkles:
Marius Nicolae
@bytao7mao
Jun 05 2017 05:30
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">
Amit Patel
@AmitP88
Jun 05 2017 05:30
@fdemaa oh damn, that sucks dude.
fdemaa
@fdemaa
Jun 05 2017 05:30
@AmitP88 You are working on the porftolio ?
Amit Patel
@AmitP88
Jun 05 2017 05:30
@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
Sudeep Narkar
@sudeepnarkar
Jun 05 2017 05:32
Hey guys
fdemaa
@fdemaa
Jun 05 2017 05:33
@AmitP88 is looking good anyway haha
Amit Patel
@AmitP88
Jun 05 2017 05:33
@fdemaa thanks lol
CamperBot
@camperbot
Jun 05 2017 05:33
amitp88 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 05 2017 05:33
@AmitP88 it load fast too
Amit Patel
@AmitP88
Jun 05 2017 05:33
@sudeepnarkar hey Sudeep
@fdemaa hmmm, on Google Pagespeed Insights though the score isn't good
fdemaa
@fdemaa
Jun 05 2017 05:35
@AmitP88 i will check that
Poor
53 / 100
Haha
thats mine
xd
still learning tho xd
Amit Patel
@AmitP88
Jun 05 2017 05:37
@fdemaa lol no worries :)
I'm trying to make my Demo and Repo buttons not opaque though. They're too transparent
chinaemereike18
@chinaemereike18
Jun 05 2017 05:38
how can I get the link of my tribute page?
fdemaa
@fdemaa
Jun 05 2017 05:39
just copythe url of your tribute page
chinaemereike18
@chinaemereike18
Jun 05 2017 05:39
ok.! just making sure
fdemaa
@fdemaa
Jun 05 2017 05:39
@chinaemereike18 :+1:
chinaemereike18
@chinaemereike18
Jun 05 2017 05:39
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
fdemaa
@fdemaa
Jun 05 2017 05:57
what do you want to center ?
i mean your image above the text ?
Botenga
@Botenga
Jun 05 2017 05:57
do you see about me text
its vertically idk why
fdemaa
@fdemaa
Jun 05 2017 05:58
because you put 3 col for that text wich is huge put 6 or 8 and it will display much better
Kien Ngoc Nguyen
@tgsoon2002
Jun 05 2017 05:59
Hi guys.
Botenga
@Botenga
Jun 05 2017 05:59
i dont understand
the higher the # the smaller the box
Kien Ngoc Nguyen
@tgsoon2002
Jun 05 2017 05:59
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 .
fdemaa
@fdemaa
Jun 05 2017 06:01

@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
Botenga
@Botenga
Jun 05 2017 06:02
thanks fdeema I really need to understand how this grid system works
thanks @fdemaa
CamperBot
@camperbot
Jun 05 2017 06:02
botenga sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 135 | @fdemaa |http://www.freecodecamp.com/fdemaa
Botenga
@Botenga
Jun 05 2017 06:02
lol want you get some cookies
hehe
*to
Kien Ngoc Nguyen
@tgsoon2002
Jun 05 2017 06:04
@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.
fdemaa
@fdemaa
Jun 05 2017 06:04

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
Botenga
@Botenga
Jun 05 2017 06:06
@fdemaa but wont that make my headshot be below my bio
fdemaa
@fdemaa
Jun 05 2017 06:09

@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
Sanjay Sanathanan
@sanjays95
Jun 05 2017 06:12
hello i need some help on front end ?
a task which i cant figure how to do
Botenga
@Botenga
Jun 05 2017 06:13
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
fdemaa
@fdemaa
Jun 05 2017 06:14
@Botenga cheers man, goodnight!
@sanjays95 im a noob but maybe i can help you ?
Sanjay Sanathanan
@sanjays95
Jun 05 2017 06:17
check pm
thanks :)
@fdemaa
fdemaa
@fdemaa
Jun 05 2017 06:23
@sanjays95 man i can make it works im sorry :(
Sanjay Sanathanan
@sanjays95
Jun 05 2017 06:23
aww
its okay
Kien Ngoc Nguyen
@tgsoon2002
Jun 05 2017 06:29
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
Lovro Mekiš
@LovroM
Jun 05 2017 06:29
@padunk Thank you!
CamperBot
@camperbot
Jun 05 2017 06:29
lovrom sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @padunk |http://www.freecodecamp.com/padunk
Lovro Mekiš
@LovroM
Jun 05 2017 06:31
@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:
abraham anak agung
@padunk
Jun 05 2017 06:41
@LovroM np, i try it before and it work just fine
Xarri Jorge
@xarrijorge
Jun 05 2017 06:43
Brace yourselves! I'm starting my Tic-tac-toe game this week and the questions will start pouring.
monk
@monkingame
Jun 05 2017 06:43
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();
the simulation clicking works at the same time,not one by one
Matúš Námešný
@LordMathis
Jun 05 2017 07:03
@monkingame lookup setTimeout()
you can then chain the functions by adding them to setTimeout() function one after another
Ataraxia
@AtaraxiaBlue
Jun 05 2017 07:06
Anyone working on their portfolio page?
monk
@monkingame
Jun 05 2017 07:19
@LordMathis for example?thanks!
Xarri Jorge
@xarrijorge
Jun 05 2017 07:22
@AtaraxiaBlue yeah? why?
Matúš Námešný
@LordMathis
Jun 05 2017 07:25
function simulateClicks(i) {
   if (i >== simonArray.length) return;

  var grid = simonArray[i];
  grid.mousedown();
  setTimeout(function() {
    grid.mouseup();
   simulateClicks(i+1);
  }, 350);

}
monk
@monkingame
Jun 05 2017 07:30
@LordMathis Wow!great work!they works excellent.Thanks thanks!
CamperBot
@camperbot
Jun 05 2017 07:30
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @lordmathis |http://www.freecodecamp.com/lordmathis
Ataraxia
@AtaraxiaBlue
Jun 05 2017 08:27
Working on mine and I'd like to find buddy to work with @kodinglife
IvyXia123
@IvyXia123
Jun 05 2017 08:51
excuse me, is there anyone who has used Canvas to draw the map ?
blob
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
monk
@monkingame
Jun 05 2017 08:58
@LordMathis excuse me,another question ,thanks
CamperBot
@camperbot
Jun 05 2017 08:58
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @lordmathis |http://www.freecodecamp.com/lordmathis
monk
@monkingame
Jun 05 2017 08:58

//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!
HappyRedditor59
@HappyRedditor59
Jun 05 2017 08:59
How do i make my paragraph <p>Some text here</p> inline with my image <img src = "something.com/pic">?
IvyXia123
@IvyXia123
Jun 05 2017 09:02
make p element display:inline-block;
HappyRedditor59
@HappyRedditor59
Jun 05 2017 09:04
@IvyXia123 can you please clarify that? thanks
CamperBot
@camperbot
Jun 05 2017 09:04
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.
Francois NOEL
@fanfoune
Jun 05 2017 09:08
Hello ! This is my tribute page. Do not hesitate to tell me what i could do better... Thks!!
h1tag
@h1tag
Jun 05 2017 09:09
@HappyRedditor59 p is a block element by default
IvyXia123
@IvyXia123
Jun 05 2017 09:09
@HappyRedditor59 you can use <span> instead of <p> also
Saeed Jassani
@saeedjassani
Jun 05 2017 09:26
@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
chetan-rathod
@chetan-rathod
Jun 05 2017 09:36
Hello World
Saeed Jassani
@saeedjassani
Jun 05 2017 09:47
hello @chetan-rathod
Henry
@GitHub-Henry
Jun 05 2017 09:57
@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.
HappyRedditor59
@HappyRedditor59
Jun 05 2017 10:40
how do i center an image? preferably with bootstrap
HappyRedditor59
@HappyRedditor59
Jun 05 2017 10:46
that did it! thanks @h1tag !
CamperBot
@camperbot
Jun 05 2017 10:46
happyredditor59 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 829 | @h1tag |http://www.freecodecamp.com/h1tag
Alexandru Dondera
@ADondi
Jun 05 2017 11:11
Hi! Can someone help me with this error for geolocation? [Violation] Only request geolocation information in response to a user gesture.
Matúš Námešný
@LordMathis
Jun 05 2017 11:14

@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
Alexandru Dondera
@ADondi
Jun 05 2017 11:17
@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?
Matúš Námešný
@LordMathis
Jun 05 2017 11:19
@ADondi do you have a codepen or some code snippet I can look at?
Alexandru Dondera
@ADondi
Jun 05 2017 11:19
@LordMathis here you are: https://codepen.io/ADondi/pen/gRbLOP
Matúš Námešný
@LordMathis
Jun 05 2017 11:24
@ADondi you have a typo: latitude instead of lattitude, other than that it works fine for me
Alexandru Dondera
@ADondi
Jun 05 2017 11:27
@LordMathis Great, thanks! Guess it's what happens when you stair too long at a screen :P
CamperBot
@camperbot
Jun 05 2017 11:27
adondi sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @lordmathis |http://www.freecodecamp.com/lordmathis
YozhikM
@YozhikM
Jun 05 2017 11:40
Is it possible to hide one element using Jquery after the page loads about five seconds and ask another display: block?
alpox
@alpox
Jun 05 2017 11:46
@YozhikM Sure
@YozhikM
$(document).ready(function() {
    var $element =  $(...);
   $element.hide();
   setTimeout(function() {
       $element.show();
   }, 5000);
});
YozhikM
@YozhikM
Jun 05 2017 11:49
@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);
});

?

alpox
@alpox
Jun 05 2017 11:56
@YozhikM What is the question?
Long Nguyen
@longnt80
Jun 05 2017 12:53
@YozhikM yes, google setTimeOut()
Scott Mac Donald
@Corinos
Jun 05 2017 12:56
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!
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:02
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??
Long Nguyen
@longnt80
Jun 05 2017 13:05
@Mr-Henderson why do you want to do that?
Tom
@moT01
Jun 05 2017 13:08
@Mr-Henderson need to show some activity
either complete a challenge
monk
@monkingame
Jun 05 2017 13:09
@LordMathis Oh thanks!I tested your code:(function recure(i){recure(i)})(0); and it works very well.
CamperBot
@camperbot
Jun 05 2017 13:09
:cookie: 338 | @lordmathis |http://www.freecodecamp.com/lordmathis
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
Tom
@moT01
Jun 05 2017 13:09
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 ^^^
monk
@monkingame
Jun 05 2017 13:12
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!
Scott Mac Donald
@Corinos
Jun 05 2017 13:19
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.
JD Tadlock
@jdtdesigns
Jun 05 2017 13:20
@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} `
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:23
@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)
Tom
@moT01
Jun 05 2017 13:24
say thanks and click my name, ...will give me points, and fill the box
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:25
@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
Tom
@moT01
Jun 05 2017 13:26
thanks @Mr-Henderson
CamperBot
@camperbot
Jun 05 2017 13:26
mot01 sends brownie points to @mr-henderson :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @mr-henderson |http://www.freecodecamp.com/mr-henderson
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:26
@moT01 ok Im clicking your name and typing
hmmm not working though what am i doing wrong?
Tom
@moT01
Jun 05 2017 13:27
you need to type thanks or ty or thx or some other recognized version
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:28
@moT01 ty
CamperBot
@camperbot
Jun 05 2017 13:28
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @mot01 |http://www.freecodecamp.com/mot01
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:28
sweet
Tom
@moT01
Jun 05 2017 13:28
go check your boxes
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:28
@moT01 thank you
CamperBot
@camperbot
Jun 05 2017 13:28
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: mr-henderson already gave mot01 points
Toby J. Henderson
@Mr-Henderson
Jun 05 2017 13:28
great
MrDrDr
@MrDrDr
Jun 05 2017 13:31
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">
Matthias Lang
@MatLang
Jun 05 2017 13:32
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/
Scott Mac Donald
@Corinos
Jun 05 2017 13:32
@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.
Tom
@moT01
Jun 05 2017 13:33
@MrDrDr right click the picture, click view image, and then copy and use that url
MrDrDr
@MrDrDr
Jun 05 2017 13:35
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
Tom
@moT01
Jun 05 2017 13:35
@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
@MrDrDr
Jun 05 2017 13:37
Ah - @moT01 - thank you!
CamperBot
@camperbot
Jun 05 2017 13:37
mrdrdr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @mot01 |http://www.freecodecamp.com/mot01
Matthias Lang
@MatLang
Jun 05 2017 13:37
@moT01 thanks a lot! will check out flexbox.
CamperBot
@camperbot
Jun 05 2017 13:37
matlang sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 704 | @mot01 |http://www.freecodecamp.com/mot01
Matthias Lang
@MatLang
Jun 05 2017 13:44
@moT01 looks good, but there's no good way to combine this with bootstrap, right?
Tom
@moT01
Jun 05 2017 13:48
sure there is @MatLang
bootstrap is just css styling
Matthias Lang
@MatLang
Jun 05 2017 13:49
@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 -.-
JD Tadlock
@jdtdesigns
Jun 05 2017 13:49
@Corinos You can simply do things like:
$.getJSON('api-url')
.then(function(data) {
  var city = data.location.city;

  $('#location').text(`City: ${city}`);
});
Tom
@moT01
Jun 05 2017 13:49
@MatLang ill take a look
whats the problem
looks good
Matthias Lang
@MatLang
Jun 05 2017 13:51
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.
Tom
@moT01
Jun 05 2017 13:53
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
Matthias Lang
@MatLang
Jun 05 2017 13:55
@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
CamperBot
@camperbot
Jun 05 2017 13:56
matlang sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: matlang already gave mot01 points
Tom
@moT01
Jun 05 2017 13:56
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
Matthias Lang
@MatLang
Jun 05 2017 14:13
@moT01 it worked! wow thats pretty cool
Tom
@moT01
Jun 05 2017 14:17
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
Ehsan Shadmehri
@ehsansh
Jun 05 2017 14:25
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.
Matúš Námešný
@LordMathis
Jun 05 2017 14:27
@ehsansh $.getJSON is the jquery way to get json data
Ehsan Shadmehri
@ehsansh
Jun 05 2017 14:29
@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?
Matúš Námešný
@LordMathis
Jun 05 2017 14:33
@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
Ehsan Shadmehri
@ehsansh
Jun 05 2017 14:39
@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.
Matúš Námešný
@LordMathis
Jun 05 2017 14:41
@ehsansh what error it returns?
Ehsan Shadmehri
@ehsansh
Jun 05 2017 14:41
@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.
Ashley Owens
@yelhsa
Jun 05 2017 14:44
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
Matúš Námešný
@LordMathis
Jun 05 2017 14:45
@ehsansh Cross Origin must be allowed on the server that you are getting your data from
Ehsan Shadmehri
@ehsansh
Jun 05 2017 14:46
@LordMathis So maybe that website does not allow getting JSON data? But it is possible to see the data by click on their url.
Matúš Námešný
@LordMathis
Jun 05 2017 14:47
@yelhsa the first li floats right then the second floats right etc. Wrap your li tags in an ul tag and float that one
Ashley Owens
@yelhsa
Jun 05 2017 14:47
ok thanks @LordMathis that makes perfect sense.
CamperBot
@camperbot
Jun 05 2017 14:47
yelhsa sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @lordmathis |http://www.freecodecamp.com/lordmathis
Nick Sladic
@Nickadiemus
Jun 05 2017 14:48

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
Matúš Námešný
@LordMathis
Jun 05 2017 14:49
@ehsansh Yeah, I think that's probably whats going on
Ehsan Shadmehri
@ehsansh
Jun 05 2017 14:50
@LordMathis thanks. I saw your website you have a very good resume. Good luck.
CamperBot
@camperbot
Jun 05 2017 14:50
ehsansh sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @lordmathis |http://www.freecodecamp.com/lordmathis
Matúš Námešný
@LordMathis
Jun 05 2017 14:51
@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
Eric Voigt
@ericvoigt
Jun 05 2017 14:51
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
Nick Sladic
@Nickadiemus
Jun 05 2017 14:52
@LordMathis could you give me an a small code example of you can?
Ashley Owens
@yelhsa
Jun 05 2017 14:53
I can't help you with your problem, but I just wanted to say that I think your project looks great! @ericvoigt
Eric Voigt
@ericvoigt
Jun 05 2017 14:54
@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
CamperBot
@camperbot
Jun 05 2017 14:54
ericvoigt sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @yelhsa |http://www.freecodecamp.com/yelhsa
Ashley Owens
@yelhsa
Jun 05 2017 14:57
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
CamperBot
@camperbot
Jun 05 2017 14:57
yelhsa sends brownie points to @ericvoigt :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @ericvoigt |http://www.freecodecamp.com/ericvoigt
Ashley Owens
@yelhsa
Jun 05 2017 14:58
i mean like fix that it stays on the page as you scroll, not fix as if something's wrong with it
Matúš Námešný
@LordMathis
Jun 05 2017 15:00

@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
CamperBot
@camperbot
Jun 05 2017 15:01
lordmathis sends brownie points to @ehsansh :sparkles: :thumbsup: :sparkles:
:cookie: 83 | @ehsansh |http://www.freecodecamp.com/ehsansh
Michael Duh
@mikaeloduh
Jun 05 2017 15:03
Quick qustion: is a display:none element click-able?
Eric Voigt
@ericvoigt
Jun 05 2017 15:04
@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
Nick Sladic
@Nickadiemus
Jun 05 2017 15:04
@LordMathis Awesome, that's how I thought it would go but I just needed reassurance. Thank you man!
CamperBot
@camperbot
Jun 05 2017 15:04
:cookie: 341 | @lordmathis |http://www.freecodecamp.com/lordmathis
nickadiemus sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
Eric Voigt
@ericvoigt
Jun 05 2017 15:04
i @yelhsa i knew what you meant with "fixed" header.. fixed to the top of the page while scroll
Matúš Námešný
@LordMathis
Jun 05 2017 15:07
@ericvoigt I think the images aren't inline because of margins and paddings. To get the desired result you might want to try flexbox
Tom
@moT01
Jun 05 2017 15:08
@mikaeloduh pretty sure something displayed: none, will not be clickable
Ashley Owens
@yelhsa
Jun 05 2017 15:12
@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
Michael Duh
@mikaeloduh
Jun 05 2017 15:13
@moT01 testing someing on mobile, a display:none element hover to visiable is hard to implement on a touch device. It result clickable
Eric Voigt
@ericvoigt
Jun 05 2017 15:51
@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...
Andrew Hickman
@ahickman3
Jun 05 2017 16:06
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?
Gulsvi
@gulsvi
Jun 05 2017 16:09
@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
Michael Duh
@mikaeloduh
Jun 05 2017 16:13
@SkyC0der thanks, i guess its a mobile version problem
CamperBot
@camperbot
Jun 05 2017 16:13
:star2: 1616 | @skyc0der |http://www.freecodecamp.com/skyc0der
mikaeloduh sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
Andrew Hickman
@ahickman3
Jun 05 2017 16:16
gotcha. Yeah it works half of the time and i never know why lol
Ashley Owens
@yelhsa
Jun 05 2017 16:16
@ericvoigt I know. I've got a long ways to go. lol
Nikki L.R.
@nikkilr88
Jun 05 2017 16:27
Could anyone help me out with some CSS? I can't get flexbox to display properly in IE.
Gulsvi
@gulsvi
Jun 05 2017 16:31

@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)

Jake
@JakeDVirus
Jun 05 2017 16:34
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()
Łukasz Starosielec
@R0ttenApple
Jun 05 2017 16:35
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.
alpox
@alpox
Jun 05 2017 16:37
@NeelDVirus remove the () of window.onload = init()
Gulsvi
@gulsvi
Jun 05 2017 16:38
@NeelDVirus Also, should there be a . in front of logo_official?
Is it a class name?
Łukasz Starosielec
@R0ttenApple
Jun 05 2017 16:38
Also I have tested it on Opera and Firefox and works just fine as well.
alpox
@alpox
Jun 05 2017 16:38
@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.
Jake
@JakeDVirus
Jun 05 2017 16:38
@alpox if i remove () then the function object will be retrieved instead of executing it
alpox
@alpox
Jun 05 2017 16:39
@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
Gulsvi
@gulsvi
Jun 05 2017 16:43
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);}
}
Jake
@JakeDVirus
Jun 05 2017 16:43
@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.
Gulsvi
@gulsvi
Jun 05 2017 16:43
Maybe that helps explain better
Jake
@JakeDVirus
Jun 05 2017 16:44
@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();
Gulsvi
@gulsvi
Jun 05 2017 16:48
@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");
Jake
@JakeDVirus
Jun 05 2017 16:48
@SkyC0der yeah that was a typo. i put the dot latter but still not working man
Oros Alexandru
@AlexOros
Jun 05 2017 16:48
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 ?:(\
Ashley Owens
@yelhsa
Jun 05 2017 16:51
@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.
Gulsvi
@gulsvi
Jun 05 2017 16:51
@NeelDVirus It seems to work fine - the class "smaller" is added to the image on scroll: https://codepen.io/skycoder/pen/bRNaXB
Ashley Owens
@yelhsa
Jun 05 2017 16:51
And to spend tons of time figuring out why what you do does or does not work @AlexOros
Oros Alexandru
@AlexOros
Jun 05 2017 16:52
@yelhsa Well here i go , thanks for the advice
CamperBot
@camperbot
Jun 05 2017 16:52
alexoros sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @yelhsa |http://www.freecodecamp.com/yelhsa
Jake
@JakeDVirus
Jun 05 2017 16:55
@SkyC0der let me check it on mine and i ll put my code in codepen
Ashley Owens
@yelhsa
Jun 05 2017 16:58
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
Nick Sladic
@Nickadiemus
Jun 05 2017 16:59
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?
Minoy
@minoy
Jun 05 2017 17:06
Hello!
Ashley Owens
@yelhsa
Jun 05 2017 17:07
hello! @minoy
Jake
@JakeDVirus
Jun 05 2017 17:08
@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
Gulsvi
@gulsvi
Jun 05 2017 17:08
@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
Yojj
@Yojj
Jun 05 2017 17:09
hello!
Jake
@JakeDVirus
Jun 05 2017 17:11
@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
Gulsvi
@gulsvi
Jun 05 2017 17:12
@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?
alpox
@alpox
Jun 05 2017 17:13
@NeelDVirus Yea works perhaps, but doesn't do what it should. It doesn't run the code on window load - it runs it directly
Jake
@JakeDVirus
Jun 05 2017 17:13
@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.
Ghost
@ghost~59209a78d73408ce4f6102e8
Jun 05 2017 17:14
can someone tell me why my external link isnt working? https://codepen.io/willybeans/pen/zwePKg
Gulsvi
@gulsvi
Jun 05 2017 17:14
I haven't suggested anything yet :)
Minoy
@minoy
Jun 05 2017 17:14

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?

Gulsvi
@gulsvi
Jun 05 2017 17:14
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/
Jake
@JakeDVirus
Jun 05 2017 17:14
yeah exactly.. the changing of size of navigation bar with same pattern
Eric Voigt
@ericvoigt
Jun 05 2017 17:15
@SkyC0der thanks
CamperBot
@camperbot
Jun 05 2017 17:15
ericvoigt sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1617 | @skyc0der |http://www.freecodecamp.com/skyc0der
Eric Voigt
@ericvoigt
Jun 05 2017 17:16
@SkyC0der how can i use a specific image from unsplash.. trying https://unsplash.it/200/300?image=0
Gulsvi
@gulsvi
Jun 05 2017 17:16
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
Jake
@JakeDVirus
Jun 05 2017 17:16
@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
Gulsvi
@gulsvi
Jun 05 2017 17:19
@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 :)
Matúš Námešný
@LordMathis
Jun 05 2017 17:20
@NeelDVirus what are you working on?
Jake
@JakeDVirus
Jun 05 2017 17:20
@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..
Andrei Pavlenko
@andpawlenko
Jun 05 2017 17:20
@willybeans you sould use full url to external website. Just add http:// before webiste address in your href attribute
Jake
@JakeDVirus
Jun 05 2017 17:21
@LordMathis working on to build a website of mine like this website http://massive.markup.themebucket.net/index.html
Ghost
@ghost~59209a78d73408ce4f6102e8
Jun 05 2017 17:21
@andpawlenko thank you so much!
CamperBot
@camperbot
Jun 05 2017 17:21
willybeans sends brownie points to @andpawlenko :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @andpawlenko |http://www.freecodecamp.com/andpawlenko
Matúš Námešný
@LordMathis
Jun 05 2017 17:23
@NeelDVirus and without any framework? Damn. Good luck :smile:
Gulsvi
@gulsvi
Jun 05 2017 17:23
^^ :)
Minoy
@minoy
Jun 05 2017 17:23
@willybeans just add http:// in href attribute
Jake
@JakeDVirus
Jun 05 2017 17:24
@LordMathis i dont know whether it is possible or just sound unrealistic. just giving it a try for personal saticfaction :D :D
Gulsvi
@gulsvi
Jun 05 2017 17:24
@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.
Jake
@JakeDVirus
Jun 05 2017 17:25
@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..
Matúš Námešný
@LordMathis
Jun 05 2017 17:26
@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
Jake
@JakeDVirus
Jun 05 2017 17:26
yeah i know the feeling of demotivation, i feel that sometime. but persistance in me dominate over the demontivation..
Gulsvi
@gulsvi
Jun 05 2017 17:26
@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: 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.
Jake
@JakeDVirus
Jun 05 2017 17:28
@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
Gulsvi
@gulsvi
Jun 05 2017 17:28
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
Jake
@JakeDVirus
Jun 05 2017 17:30
@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
Gulsvi
@gulsvi
Jun 05 2017 17:30
It's around 150 lines of codes with comments, line breaks, etc
Jake
@JakeDVirus
Jun 05 2017 17:31
@SkyC0der i am being blunt here. and the link has jquery implemented
Gulsvi
@gulsvi
Jun 05 2017 17:32
@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
Jake
@JakeDVirus
Jun 05 2017 17:35
@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/
venkyafhs
@venkyafhs
Jun 05 2017 17:43
hi
Gulsvi
@gulsvi
Jun 05 2017 17:43
@NeelDVirus I'm happy to help where I can :)
your feedback plz!!!
Gulsvi
@gulsvi
Jun 05 2017 17:44
Probably can't collaborate in an official sense though, I have some other projects I'm working on at the moment
Jake
@JakeDVirus
Jun 05 2017 17:50
@SkyC0der oops that's fine. thanks for assisting though
CamperBot
@camperbot
Jun 05 2017 17:50
neeldvirus sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1618 | @skyc0der |http://www.freecodecamp.com/skyc0der
Matúš Námešný
@LordMathis
Jun 05 2017 17:51
@venkyafhs looks nice but the main image is a little low resolution or too streched out
hda
@whdhli
Jun 05 2017 18:07
need help! my title text is overlapping when on mobile.. https://codepen.io/whdhli/full/GEgxry/
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:09
Hi @whdhli I can't help much but when I removed the "jumbotron" class it worked fine
hda
@whdhli
Jun 05 2017 18:10
@monicaparrillo fixed! it was my line height
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:10
Wahoo! Well done :D
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 18:18

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.

Monica Parrillo
@monicaparrillo
Jun 05 2017 18:19
hi @JuanP97 this is a common problem with CORS on codepen, you might need to use a CORS proxy in front of the url
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 18:19
Hi @monicaparrillo , how do you recommend I do that?
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:20
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/
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 18:22
@monicaparrillo Thanks for the insights, I'll check it out
CamperBot
@camperbot
Jun 05 2017 18:22
juanp97 sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:22
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/
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 18:24
I was trying precisely that one, but it still doesn't work :(
I'll check JSONP,
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 18:27
Thanks again Monica :) I'll let you know if I can figure it out
vorousja
@vorousja
Jun 05 2017 18:55
im having trouble accessing values from JSON objects im retrieving from a random quote api
anyone wanna check out my code?
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:56
i can try
vorousja
@vorousja
Jun 05 2017 18:57
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);
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:57
also you can try to console.log of your json data and open developer tools (if not already done)
vorousja
@vorousja
Jun 05 2017 18:57
not including ending }); and what not
i can retrieve the object and display in object notation in html
Monica Parrillo
@monicaparrillo
Jun 05 2017 18:58
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
vorousja
@vorousja
Jun 05 2017 19:00
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/"}] '

Monica Parrillo
@monicaparrillo
Jun 05 2017 19:01
so this is an array, which contains 1 object
vorousja
@vorousja
Jun 05 2017 19:02
oh so i should be using brackets because its 0-indexed
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:02
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
vorousja
@vorousja
Jun 05 2017 19:02
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));
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:02
but you dont want the stringify
its fine to just access the object inside the array
vorousja
@vorousja
Jun 05 2017 19:03
ok so to access the the values of the only object in the array i would do something like... 'jsonData[0].content'?
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:03
yes!
vorousja
@vorousja
Jun 05 2017 19:03
cool beans, it helps to talk through ideas with someone
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:04
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
vorousja
@vorousja
Jun 05 2017 19:05
thank you monica =D
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:05
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
vorousja
@vorousja
Jun 05 2017 19:05
right it wouldnt be JSON at that point so that makes sense
Ghafor Yaqubi
@ghafor
Jun 05 2017 19:16
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?
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:19
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!
Ghafor Yaqubi
@ghafor
Jun 05 2017 19:20
@monicaparrillo i know to get it, but the problem is it tht how to use those info for getting local weather.
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:20
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 Yaqubi
@ghafor
Jun 05 2017 19:21
@monicaparrillo ok thanks...i'm gonna check it out.
CamperBot
@camperbot
Jun 05 2017 19:21
ghafor sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:22
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
Ingram Jones
@Iggy1906
Jun 05 2017 19:23
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
Johnny
@jtan3
Jun 05 2017 19:32
@Iggy1906 you want a fixed navbar?
andrewmparker
@andrewmparker
Jun 05 2017 19:33
just started on my portfolio page can someone tell me why my buttons are doing this: https://codepen.io/andrewmparker/pen/MoYwpB
Monica Parrillo
@monicaparrillo
Jun 05 2017 19:33
@Iggy1906 look into position fixed, and the z-index so it's on top
andrewmparker
@andrewmparker
Jun 05 2017 19:33
just do class"navbar-fixed-top"@iggy1906
Ingram Jones
@Iggy1906
Jun 05 2017 19:34
@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.
andrewmparker
@andrewmparker
Jun 05 2017 19:38
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
Johnny
@jtan3
Jun 05 2017 19:38
@Iggy1906 a fixed navbar "navbar-fixed-top means the navbar will stay at top always even when scrolling down. There's also fixed-bottom.
Jake
@JakeDVirus
Jun 05 2017 19:40
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 <a><img src="logog"></a> 100px so the height of <nav> element becomes 100px.
https://codepen.io/neel111/pen/VWYQKw?editors=1100
Johnny
@jtan3
Jun 05 2017 19:40
@andrewmparker you forgot the https in front of your bootstrap
Ingram Jones
@Iggy1906
Jun 05 2017 19:42
@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.
andrewmparker
@andrewmparker
Jun 05 2017 19:45
oh ok
Johnny
@jtan3
Jun 05 2017 19:45
@Iggy1906 play around with margins
Heather
@GingerJava
Jun 05 2017 19:50
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...
andrewmparker
@andrewmparker
Jun 05 2017 20:01
it still works the same @jtan3
so how would i fix my buttons
Isabel Garcia
@Isabelgarcia3
Jun 05 2017 20:19
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
vorousja
@vorousja
Jun 05 2017 20:21
who cares how long it is
Johnny
@jtan3
Jun 05 2017 20:22
@andrewmparker get rid of your width in your .button css
Isabel Garcia
@Isabelgarcia3
Jun 05 2017 20:22
sometimes the link is pages long
vorousja
@vorousja
Jun 05 2017 20:22
so?
download it and link it locally then if you dont want to scroll through it all
Isabel Garcia
@Isabelgarcia3
Jun 05 2017 20:23
what does linking it locally mean?
vorousja
@vorousja
Jun 05 2017 20:23
wont work with the basic version of code pen though
andrewmparker
@andrewmparker
Jun 05 2017 20:24
thx @jtan3
CamperBot
@camperbot
Jun 05 2017 20:24
andrewmparker sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @jtan3 |http://www.freecodecamp.com/jtan3
vorousja
@vorousja
Jun 05 2017 20:24
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"/>
andrewmparker
@andrewmparker
Jun 05 2017 20:26
@jtan3 why aren't my images working??
vorousja
@vorousja
Jun 05 2017 20:27
the example i just used would require you to be using a text editor, not codepen though
Isabel Garcia
@Isabelgarcia3
Jun 05 2017 20:28
oh okay
vorousja
@vorousja
Jun 05 2017 20:28
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
Johnny
@jtan3
Jun 05 2017 20:28
@andrewmparker your linkshttps://mail.google.com/mail/u/1/?ui=2&ik=979911f0d4&view=att&th=15c74de77ec979b9&attid=0.1&disp=safe&zw gets a 404
andrewmparker
@andrewmparker
Jun 05 2017 20:29
no like how do i fix how big they are @jtan3
Johnny
@jtan3
Jun 05 2017 20:30
@andrewmparker use height and width?
Gulsvi
@gulsvi
Jun 05 2017 20:30
@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.
vorousja
@vorousja
Jun 05 2017 20:30
anybody wanna look at my javascript? trying to figure a couple things out
andrewmparker
@andrewmparker
Jun 05 2017 20:31
thx @SkyC0der @jtan3
CamperBot
@camperbot
Jun 05 2017 20:31
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
Tyler Johnson
@tylerjj17
Jun 05 2017 20:32
can someone please help none of the data is displaying on my weather app
https://codepen.io/tylerjj17/pen/XgWpRj
vorousja
@vorousja
Jun 05 2017 20:33
@SkyC0der would you be able to look at my code?
Gulsvi
@gulsvi
Jun 05 2017 20:34
@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?
vorousja
@vorousja
Jun 05 2017 20:34
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
Gulsvi
@gulsvi
Jun 05 2017 20:36
@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
vorousja
@vorousja
Jun 05 2017 20:37
theres no way to handle that any other way?
Gulsvi
@gulsvi
Jun 05 2017 20:37
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
vorousja
@vorousja
Jun 05 2017 20:39
ok let me try
Gulsvi
@gulsvi
Jun 05 2017 20:39
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
vorousja
@vorousja
Jun 05 2017 20:40
wheres the best spot to place the $.ajaxSetup?
Isabel Garcia
@Isabelgarcia3
Jun 05 2017 20:40
@SkyC0der Thank you!!
CamperBot
@camperbot
Jun 05 2017 20:40
isabelgarcia3 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1620 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 05 2017 20:40
@vorousja $.ajaxSetup should be right before your line with the $.getJSON in this case
vorousja
@vorousja
Jun 05 2017 20:40
ok trying..
damn. ajax is so cool
Gulsvi
@gulsvi
Jun 05 2017 20:41
:)
vorousja
@vorousja
Jun 05 2017 20:42
thanks @SkyC0der
CamperBot
@camperbot
Jun 05 2017 20:42
vorousja sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1621 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 05 2017 20:42
@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.
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:43

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.

vorousja
@vorousja
Jun 05 2017 20:43
isnt there a term for that? that i should probably know...
andrewmparker
@andrewmparker
Jun 05 2017 20:43
how do you align images in the center of your webpage???
Gulsvi
@gulsvi
Jun 05 2017 20:43
hmmm, I'm not sure. Probably, but I don't know it either lol :)
There are lots of design patterns for coding
vorousja
@vorousja
Jun 05 2017 20:44
@andrewmparker are you using bootstrap?
andrewmparker
@andrewmparker
Jun 05 2017 20:44
yes
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:44
@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
andrewmparker
@andrewmparker
Jun 05 2017 20:45
@JuanP97 you would put that into css??
Gulsvi
@gulsvi
Jun 05 2017 20:45
@andrewmparker That codepen above may help
vorousja
@vorousja
Jun 05 2017 20:45
i tend to use margin-left:auto margin-right:auto;
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:45
yep, again that is one way to do it. There's a lot of ways
Gulsvi
@gulsvi
Jun 05 2017 20:45
I do not recommend position relative unless you know what you're doing. Relative and Absolute positioning can really mess things up :)
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:46
@SkyC0der true
vorousja
@vorousja
Jun 05 2017 20:46
whatever allows for the most flexibility and least css-ing
Gulsvi
@gulsvi
Jun 05 2017 20:47
@JuanP97 Were you just asking about JSONP?
vorousja
@vorousja
Jun 05 2017 20:47
not i, no
andrewmparker
@andrewmparker
Jun 05 2017 20:47
@SkyC0der i love the page lmao
Andrew Hickman
@ahickman3
Jun 05 2017 20:47
whenever i add my background image, it adds this annoying line below the navbar, any idea why? https://prnt.sc/fgakym
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:47
I'm trying to execute a function once a JSONP is loaded but I'm receiving a weird error message
Gulsvi
@gulsvi
Jun 05 2017 20:47
lol @andrewmparker I built it so I could learn back when I started :p
almost had it copied lol
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:48
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
Gulsvi
@gulsvi
Jun 05 2017 20:49
callback in that case should just be ?callback=?
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:49
yep, it was just a variable because i was experimenting :)
Gulsvi
@gulsvi
Jun 05 2017 20:49
log the full URL and make sure it looks like that ^^
CamperBot
@camperbot
Jun 05 2017 20:49
Archives for HelpFrontEnd
Gulsvi
@gulsvi
Jun 05 2017 20:50
log
CamperBot
@camperbot
Jun 05 2017 20:50
Archives for HelpFrontEnd
Gulsvi
@gulsvi
Jun 05 2017 20:50
oh cbot...
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:50
@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)
Gulsvi
@gulsvi
Jun 05 2017 20:51
@JuanP97 Maybe try it this way:
  function connectToApi (target) {
      target = target + "?";
      url = url + target + callback;
    $.getJSON(url, function(json) {
      StreamerObjCreate(json, target)
    });
  }
andrewmparker
@andrewmparker
Jun 05 2017 20:53
@SkyC0der will you see what is wrong with my images they are still not working: https://codepen.io/andrewmparker/pen/JJoBLE
Gulsvi
@gulsvi
Jun 05 2017 20:53
Your profile pic is really making me hungry
But sure :)
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:53
@SkyC0der Yep that works >.< It's just that I wanted to separate it into more than one function. but thanks :)
CamperBot
@camperbot
Jun 05 2017 20:53
juanp97 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1622 | @skyc0der |http://www.freecodecamp.com/skyc0der
andrewmparker
@andrewmparker
Jun 05 2017 20:53
i <3 pancakes
srry
Gulsvi
@gulsvi
Jun 05 2017 20:54
@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: $.getJSON(url, json => StreamerObjCreate(json, target));
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:54
@andrewmparker First thing add an alt="description of image" on each image of your html
andrewmparker
@andrewmparker
Jun 05 2017 20:55
ok
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:55
It will display a text ir the image is not loaded properly
Gulsvi
@gulsvi
Jun 05 2017 20:55
I can't access your gmail inbox, so the first two show up as broken images
Juan Pablo Jaramillo
@JuanP97
Jun 05 2017 20:56
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.
andrewmparker
@andrewmparker
Jun 05 2017 20:57
yeah i was about to start working on those two
Gulsvi
@gulsvi
Jun 05 2017 20:59
@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
Frostbites
@Frostbites
Jun 05 2017 21:00
Hey guys
Gulsvi
@gulsvi
Jun 05 2017 21:00
remove this from all of your images: img="responsive" and add img-responsive as a class name: class="imgfix img-responsive"
Frostbites
@Frostbites
Jun 05 2017 21:01
This is my pen but it does not seem to work
Gulsvi
@gulsvi
Jun 05 2017 21:01
  <img id="img4" class="img-responsive imgfix" alt="favorite city" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Atlanta_Skyline_from_Buckhead.jpg">
Frostbites
@Frostbites
Jun 05 2017 21:01
I decided to use buttons instead of nav (and thanks to codeplanet for their code)
Gulsvi
@gulsvi
Jun 05 2017 21:02
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
vorousja
@vorousja
Jun 05 2017 21:02
@SkyC0der whats the best practice for checking if my quote box has a quote in it already?
andrewmparker
@andrewmparker
Jun 05 2017 21:02
@SkyC0der thx
CamperBot
@camperbot
Jun 05 2017 21:02
andrewmparker sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: andrewmparker already gave skyc0der points
vorousja
@vorousja
Jun 05 2017 21:02
can i check to see if getQuote() has been called and then call it if not?
Gulsvi
@gulsvi
Jun 05 2017 21:03
@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
Matúš Námešný
@LordMathis
Jun 05 2017 21:04
@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">
vorousja
@vorousja
Jun 05 2017 21:04
trying...
Frostbites
@Frostbites
Jun 05 2017 21:04
Thanks Matus, let me try this
Gulsvi
@gulsvi
Jun 05 2017 21:05
@Frostbites You might have more luck with the navbar component? https://v4-alpha.getbootstrap.com/components/navbar/
vorousja
@vorousja
Jun 05 2017 21:07
doesnt seem to be working
should that work on the loading of the page?
Andrew Hickman
@ahickman3
Jun 05 2017 21:08
how can i center text so that its center to the page minus the scrollbar?
vorousja
@vorousja
Jun 05 2017 21:08
text:center;
Andrew Hickman
@ahickman3
Jun 05 2017 21:09
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 :\
vorousja
@vorousja
Jun 05 2017 21:09
link your codepen
Gulsvi
@gulsvi
Jun 05 2017 21:09
@fullmetal7777 check out innerWidth, outerWidth, and scrollWidth properties
Sudeep Narkar
@sudeepnarkar
Jun 05 2017 21:10

'''var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];

// Setup
var lastName = "Lovelace";

// Only change code below this line.
var thirdLetterOfLastName = lastName;
'''

CamperBot
@camperbot
Jun 05 2017 21:10
:bulb: to format code use backticks! ``` more info
vorousja
@vorousja
Jun 05 2017 21:10
@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();
}
});
Andrew Hickman
@ahickman3
Jun 05 2017 21:10
@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
Sudeep Narkar
@sudeepnarkar
Jun 05 2017 21:11
var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];

// Setup
var lastName = "Lovelace";

// Only change code below this line.
var thirdLetterOfLastName = lastName;
andrewmparker
@andrewmparker
Jun 05 2017 21:11
@JuanP97 how do i make a google photo public exactly
Andrew Hickman
@ahickman3
Jun 05 2017 21:11
@SkyC0der judging from the title, thatl solve my problem lol thanks. Started learning bootstrap for my portfolio btw, maaaaan it is the shit
CamperBot
@camperbot
Jun 05 2017 21:11
fullmetal7777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1623 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 05 2017 21:11
@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
vorousja
@vorousja
Jun 05 2017 21:14
so i could jsut call getQuote when the document is ready?
Gulsvi
@gulsvi
Jun 05 2017 21:15
Yeah, then you'll get a quote every time the page loads
Eric Voigt
@ericvoigt
Jun 05 2017 21:15
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
Gulsvi
@gulsvi
Jun 05 2017 21:15
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
Matúš Námešný
@LordMathis
Jun 05 2017 21:16
@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
Frostbites
@Frostbites
Jun 05 2017 21:38
Hmmm
Nick
@WhereIsMikeHawk
Jun 05 2017 21:42
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
Emmanuel Eze
@ezdevelopers
Jun 05 2017 21:59
@artoodeeto
Tyler Johnson
@tylerjj17
Jun 05 2017 22:01
my weatherBox div isnt working can someone help
https://codepen.io/tylerjj17/pen/XgWpRj
it shouldnt have a 100% width
Ashley Owens
@yelhsa
Jun 05 2017 22:02
@WhereIsMikeHawk maybe separate sections using divs then some how nest an image?
Nick
@WhereIsMikeHawk
Jun 05 2017 22:03
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
fdemaa
@fdemaa
Jun 05 2017 22:08
use divs and put the background image to each div @WhereIsMikeHawk
Nick
@WhereIsMikeHawk
Jun 05 2017 22:11
My problem is with that, the height of the image is only what I have displayed
Johnny
@jtan3
Jun 05 2017 22:11
@tylerjj17 you spelled background-color wrong
@WhereIsMikeHawk you can use height and width?
Ingram Jones
@Iggy1906
Jun 05 2017 22:14
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
Tom
@moT01
Jun 05 2017 22:16
@Iggy1906 on top or in front?
the z-index property can bring things to the front or move them back
Ingram Jones
@Iggy1906
Jun 05 2017 22:17
@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.
Nick
@WhereIsMikeHawk
Jun 05 2017 22:17
Johnny, I tried using width 100% and height auto, or just height 100% but I'm still getting the bottom half cropped
Ingram Jones
@Iggy1906
Jun 05 2017 22:17
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.
Tom
@moT01
Jun 05 2017 22:18
maybe put the image in an <img> tag and just put it above the nav?
Ingram Jones
@Iggy1906
Jun 05 2017 22:20
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.
Johnny
@jtan3
Jun 05 2017 22:20
@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.
Nick
@WhereIsMikeHawk
Jun 05 2017 22:22
Here lemme give you the link, so I can show you
It's the orange one, says redeux
Jose Diaz
@jsd540
Jun 05 2017 22:28
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...
joshc1224
@joshc1224
Jun 05 2017 22:30
anyone want to review my portfolio page? https://codepen.io/Joshdc/pen/eRYLxr
Ravi Kishore Thella
@ravikishorethella
Jun 05 2017 22:34
@joshc1224 good. It seems the facebook link is broken and the fcc link is not correct
joshc1224
@joshc1224
Jun 05 2017 22:36
Right on, which FCC link are we supposed to use? I just clicked on my picture and linked to the profile page.
Conor Hinchee
@captnstarburst
Jun 05 2017 22:37
Hello All! Hope everyone is well
Gulsvi
@gulsvi
Jun 05 2017 22:38
@joshc1224 double check that URL: https://www.freecodecamp.com/joshc1224Free Code Camp
looks fine aside from the Free Code Camp text at the end
Ravi Kishore Thella
@ravikishorethella
Jun 05 2017 22:38
@joshc1224 give your progress page link
the link address usually will be www.freecodecamp.com/yourname
Gulsvi
@gulsvi
Jun 05 2017 22:39
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
Johnny
@jtan3
Jun 05 2017 22:40
@WhereIsMikeHawk you might have to resize the picture in an image editor. Not sure if there's a better way.
Nick
@WhereIsMikeHawk
Jun 05 2017 22:40
Okay thank you!
joshc1224
@joshc1224
Jun 05 2017 22:44
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.
Ken Haduch
@khaduch
Jun 05 2017 23:31
@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.
Amit Patel
@AmitP88
Jun 05 2017 23:33
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.
optimize.png
r0ulito
@r0ulito
Jun 05 2017 23:36
@AmitP88 don't change this
Using CDN is a good way
I've got a pb with my own switch button (stylized checkbox)
Amit Patel
@AmitP88
Jun 05 2017 23:39
@R0ulito ah I see. ok, I'll move on to the other optimization steps. Hopefully I can still get to above 90% score
r0ulito
@r0ulito
Jun 05 2017 23:39
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:
Gulsvi
@gulsvi
Jun 05 2017 23:45
@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/
Tyler Johnson
@tylerjj17
Jun 05 2017 23:46
can someone help me please my backgrounds arent showing up
https://codepen.io/tylerjj17/pen/XgWpRj
Gulsvi
@gulsvi
Jun 05 2017 23:46
You could probably also try to minify your css and js @AmitP88 - might give a slight boost?