These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Jun 2017
Marius Nicolae
@bytao7mao
Jun 21 2017 00:00
@MRLSU you want to remove bullets?
MRLSU
@MRLSU
Jun 21 2017 00:00
what no
Marius Nicolae
@bytao7mao
Jun 21 2017 00:00
what then ?
CallMeOrange
@EgnaroDev
Jun 21 2017 00:00
@bytao7mao bullet was too far from text
MRLSU
@MRLSU
Jun 21 2017 00:01
the bullet has still not moved from the text :(
i am sad guys
*moved toward
Marius Nicolae
@bytao7mao
Jun 21 2017 00:02
@MRLSU don't panic man
CallMeOrange
@EgnaroDev
Jun 21 2017 00:02
@MRLSU I give up :runner:
MRLSU
@MRLSU
Jun 21 2017 00:03
<html>
<center>

<title> Chance The Rapper</title>
<h1> Chancelor Johnathan Bennett</h1>

<h2>More than a musician</h2>

<body>

<img src="http://www.trbimg.com/img-58a1e518/turbine/ct-chance-the-rapper-grammy-awards-photos-2017-031" class="img-responsive" alt="Chance The Rapper at the Grammys">

<p><i> Chancelor Bennet performing at at the 2017 Grammy Awards(Stage name Chance the Rapper)</i></p>

<p>Here is a timeline of Bennet's Life<p>
<div class="pink-background">
<div class="row">
<div class="col-xs-20">
<ul>
<li><strong>April 16 1993 - Birth in Chicago, Illinois on the Southside to a middle-class family in Chatnam.</strong></li>
<li>2004- Bought The College Dropout</li>
<li>May 28 2015- Relase of Surf (with Donnie Trumpet And The Social Experiment)</li>
<li>Filler</li>
<li>Filler</li>
<li>Filler</li>
<li>April 3 2012-Release of 10 Day</li>
<li>April 30 2013-Release of Acid Rap</li>
<li>November 2014- Named Chicago's Outstanding Youth of the Year by Chicago Mayor Rahm Emanuel for actively fighting gun violence with the #SaveChicago campaign.</li>
<li><strong>May 13 2016-Relase of Coloring Book (First Streaming-Exclusive Album to Chart on
<a href="http://www.billboard.com/articles/columns/chart-beat/7378361/<chance-the-rapper-coloring-book-first-streaming-> </chance-the-rapper-coloring-book-first-streaming->exclusive">Billboard 200)</a></strong></li>
<li><strong> March 7 2017 - One million dollars donated to
<a href="https://www.nytimes.com/2017/03/07/arts/chance-rapper-chicago-schools-donation.html?mcubz=2"> Chicago's Public Schools</a> </strong>
</ul>
</div>
</div>
<p><i>"What’s better than yelling is hollerin’ love
What’s better than rhymes, nickels, dimes and dollars and dubs
Is dialing up your darling just for callin’ her up
It ain’t nothing better than fallin’ in love"</i></p>
</div>
<h3 class="font-family:Impact"> If you would like more information about Chance the Rapper please
<a href="https://en.wikipedia.org/wiki/Chance_the_Rapper">click here</a> </h3>
</body>
</center>

</html>
CamperBot
@camperbot
Jun 21 2017 00:03
holler back!
Marius Nicolae
@bytao7mao
Jun 21 2017 00:03
holly
@MRLSU no copeden ?
MRLSU
@MRLSU
Jun 21 2017 00:04
what you mean
ohh
how do i share that
i see the share button but i dont see a link or anything
CallMeOrange
@EgnaroDev
Jun 21 2017 00:05
@MRLSU just post the URL here
CallMeOrange
@EgnaroDev
Jun 21 2017 00:06
yea
MRLSU
@MRLSU
Jun 21 2017 00:06
you see what im saying with the bulletpoints
CallMeOrange
@EgnaroDev
Jun 21 2017 00:06
Yeah
MRLSU
@MRLSU
Jun 21 2017 00:06
that shit is not gangster
CallMeOrange
@EgnaroDev
Jun 21 2017 00:07
Damn I have no idea how to fix it
I dont know why bullet points is like that
MRLSU
@MRLSU
Jun 21 2017 00:07
well sir i guess you are fired
jk
Marius Nicolae
@bytao7mao
Jun 21 2017 00:08
@MRLSU and you want to ? put the bullet near text ?
MRLSU
@MRLSU
Jun 21 2017 00:08
I think it has somethin to do with columns and rows
yeah
I obviously need to fix up alot of stuff but one step at a time you know
ok so i took out my center tags
and i think im just going to center my ul elements and see what that does
CallMeOrange
@EgnaroDev
Jun 21 2017 00:09
@MRLSU Cant help but remove style tags in css...
Gulsvi
@gulsvi
Jun 21 2017 00:09
@MRLSU Use list-style-position: inside; in your CSS
MRLSU
@MRLSU
Jun 21 2017 00:10
not effective
CallMeOrange
@EgnaroDev
Jun 21 2017 00:10
style tags are not supposed to be in CSS
Gulsvi
@gulsvi
Jun 21 2017 00:10
ul {
  font-size: 20px;
  font-family: Comic Sans MS;
  font-weight: bold;
  list-style-position: inside;
}
MRLSU
@MRLSU
Jun 21 2017 00:10
oh shit really?
Gulsvi
@gulsvi
Jun 21 2017 00:10
and remove that <style></style>
CallMeOrange
@EgnaroDev
Jun 21 2017 00:10
Just leave it like style tags is already there
MRLSU
@MRLSU
Jun 21 2017 00:10
ohhhh
ok
dang i didnt see anything like that list style position in the tutorial
Do i need the html and body tags in my HTML?
Marius Nicolae
@bytao7mao
Jun 21 2017 00:12
@MRLSU and if you want to you cant remove <center> class, and add in body css : text-align:center; ... you don;t need
MRLSU
@MRLSU
Jun 21 2017 00:12
I removed the center tags
Marius Nicolae
@bytao7mao
Jun 21 2017 00:12
html tags and css tags
in codepen
CallMeOrange
@EgnaroDev
Jun 21 2017 00:12
@MRLSU you dont need html and body tags
you can just add links in the setting
this is what i have now
im removing the body tags
Marius Nicolae
@bytao7mao
Jun 21 2017 00:13
add text-align:center; in body
you can keep body
CallMeOrange
@EgnaroDev
Jun 21 2017 00:14
Honestly at first I saw that page I thought these guys was showing middle fingers lol
Marius Nicolae
@bytao7mao
Jun 21 2017 00:14
it's ok for guidance
MRLSU
@MRLSU
Jun 21 2017 00:14
lmao
Marius Nicolae
@bytao7mao
Jun 21 2017 00:14
hahaha
MRLSU
@MRLSU
Jun 21 2017 00:15
i might not do this guy as my tribute page it was just the first thing i thought of
CallMeOrange
@EgnaroDev
Jun 21 2017 00:15
I see
MRLSU
@MRLSU
Jun 21 2017 00:15
@bytao7mao as a class?
like <body class ="text-align:center">
Marius Nicolae
@bytao7mao
Jun 21 2017 00:15
nono
Add it in css in body
MRLSU
@MRLSU
Jun 21 2017 00:15
in my css
CallMeOrange
@EgnaroDev
Jun 21 2017 00:15
@MRLSU Honestly I tried to make tribute page but failed twice
MRLSU
@MRLSU
Jun 21 2017 00:15
yeah
i got u
CallMeOrange
@EgnaroDev
Jun 21 2017 00:15
Couldnt think of a person
MRLSU
@MRLSU
Jun 21 2017 00:15
thanks for the help @bytao7mao
CamperBot
@camperbot
Jun 21 2017 00:15
mrlsu sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
CallMeOrange
@EgnaroDev
Jun 21 2017 00:15
At first, deadpool then daredevil...
MRLSU
@MRLSU
Jun 21 2017 00:16
thanks...for...the..moral support...i guess? @MCTwoDigitZero
CamperBot
@camperbot
Jun 21 2017 00:16
mrlsu sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 251 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
Marius Nicolae
@bytao7mao
Jun 21 2017 00:16
@MRLSU show us your tribute page
David Miolard
@GwadaKing
Jun 21 2017 00:16
@MRLSU Even if you don't wanna use bootstrap or flexbox, I advice you to wrap your elements in divs or spans
Marius Nicolae
@bytao7mao
Jun 21 2017 00:16
sry
MRLSU
@MRLSU
Jun 21 2017 00:16
this is my tribute page
Marius Nicolae
@bytao7mao
Jun 21 2017 00:16
@MCTwoDigitZero i mean you show us the tribute page
:DDD
CallMeOrange
@EgnaroDev
Jun 21 2017 00:16
oh
there
Marius Nicolae
@bytao7mao
Jun 21 2017 00:17
@MRLSU looks nice man.
MRLSU
@MRLSU
Jun 21 2017 00:17
its getting there
thanks tho
@MCTwoDigitZero thats skill
CallMeOrange
@EgnaroDev
Jun 21 2017 00:17
Yeah thanks guys
Marius Nicolae
@bytao7mao
Jun 21 2017 00:17
@MCTwoDigitZero haha looks like a hacker page
MRLSU
@MRLSU
Jun 21 2017 00:17
i wouldnt even know how to make a cursor bar or anything lol
CallMeOrange
@EgnaroDev
Jun 21 2017 00:17
lol
you mean navbar?
MRLSU
@MRLSU
Jun 21 2017 00:18
yeah
how long have you been doing this
CallMeOrange
@EgnaroDev
Jun 21 2017 00:18
You just add class fixed-top
I was working on it like nearly a week
Marius Nicolae
@bytao7mao
Jun 21 2017 00:18
i will keep my tribute page and laugh at myself 5 yrs in the future :D
MRLSU
@MRLSU
Jun 21 2017 00:18
no i mean how long have you been coding?
CallMeOrange
@EgnaroDev
Jun 21 2017 00:18
Because of coding.. its looks simple but its not
oh I think a year
MRLSU
@MRLSU
Jun 21 2017 00:18
oh
i started like last week lulz
CallMeOrange
@EgnaroDev
Jun 21 2017 00:18
I was bad at first
lol
MRLSU
@MRLSU
Jun 21 2017 00:18
or more like 11 days ago
CallMeOrange
@EgnaroDev
Jun 21 2017 00:19
@MRLSU wanna see my old tribute page?
MRLSU
@MRLSU
Jun 21 2017 00:19
ok
CallMeOrange
@EgnaroDev
Jun 21 2017 00:19
its horrible
MRLSU
@MRLSU
Jun 21 2017 00:19
thats what my mom said when i was born
CallMeOrange
@EgnaroDev
Jun 21 2017 00:19
lol
Image dont work for some reason
MRLSU
@MRLSU
Jun 21 2017 00:20
it wont even load
lol
CallMeOrange
@EgnaroDev
Jun 21 2017 00:20
See? I didnt know anything about nav classes, bootstrap grid system, scrolling, and div elements
MRLSU
@MRLSU
Jun 21 2017 00:20
I need to go back through bootstrap
CallMeOrange
@EgnaroDev
Jun 21 2017 00:21
I see
Good luck with it
MRLSU
@MRLSU
Jun 21 2017 00:21
thx
What else should I do with this page
CallMeOrange
@EgnaroDev
Jun 21 2017 00:21
Nothing really just fix the font size of this If you would like more information about Chance the Rapper please click here
MRLSU
@MRLSU
Jun 21 2017 00:22
the h3 element?
should i make it small
CallMeOrange
@EgnaroDev
Jun 21 2017 00:22
You can
MRLSU
@MRLSU
Jun 21 2017 00:22
im horrible at aesthetics
CallMeOrange
@EgnaroDev
Jun 21 2017 00:22
lol
Marius Nicolae
@bytao7mao
Jun 21 2017 00:22
@MRLSU you cand add a footer.
MRLSU
@MRLSU
Jun 21 2017 00:22
my idea in my brain was to make it look sort of like a concert advertisement but i kind of blew it
CallMeOrange
@EgnaroDev
Jun 21 2017 00:22
yeah same here
MRLSU
@MRLSU
Jun 21 2017 00:22
is footer just <h4>
Marius Nicolae
@bytao7mao
Jun 21 2017 00:23
i see that
CallMeOrange
@EgnaroDev
Jun 21 2017 00:23
cool right? That was when I thought I could make one same as above with deadpool or daredevil
But failed..
MRLSU
@MRLSU
Jun 21 2017 00:23
"where is harvey dent?"
Marius Nicolae
@bytao7mao
Jun 21 2017 00:24
with deadpool it's a good ideea to make
MRLSU
@MRLSU
Jun 21 2017 00:24
do you put your real name on all your projects
or a username
Marius Nicolae
@bytao7mao
Jun 21 2017 00:25
like a meme deadpool tribute page
@MRLSU why not, it's your work after all
MRLSU
@MRLSU
Jun 21 2017 00:26
Hey so if I have multiple p elements can I give them different style elements?
Marius Nicolae
@bytao7mao
Jun 21 2017 00:27
sure you can
MRLSU
@MRLSU
Jun 21 2017 00:27
How would I go about doing that do I have to set up each p element with its own class
or change the elements to like <p> <p1> so on
Marius Nicolae
@bytao7mao
Jun 21 2017 00:28
own class or specify in css the child
MRLSU
@MRLSU
Jun 21 2017 00:28
can you show me an example if you got a minute
Marius Nicolae
@bytao7mao
Jun 21 2017 00:28
like this :
p:first-child 
{ 
    background-color: yellow;
}
MRLSU
@MRLSU
Jun 21 2017 00:29
and I set the class as "first-child"
Marius Nicolae
@bytao7mao
Jun 21 2017 00:30
yes but be carefull to see exactly the parent of which you want to select the child
MRLSU
@MRLSU
Jun 21 2017 00:30
p:first-child {
font-size: 30px;
}
<p class="first-child">Here is a timeline of Bennet's Life<p>
i think im missing something
Marius Nicolae
@bytao7mao
Jun 21 2017 00:31
like that but ypou can put the parent too
MRLSU
@MRLSU
Jun 21 2017 00:32
so <p class="p:first-child">?
Marius Nicolae
@bytao7mao
Jun 21 2017 00:32
no
what method you want to use ? method with class or childs ?
MRLSU
@MRLSU
Jun 21 2017 00:32
what do you by the parent
what is chils Ive only done the first tutorials lol
like HTML & css and bootstrap
and Ive done jquery but I dont think i need that
Marius Nicolae
@bytao7mao
Jun 21 2017 00:33
to make it simple for you, use the "inline style" method
i'll show and example
in HTML for any <p> you can add a style to it by <p style="color:green;"> HELLO WORLD </p>
MRLSU
@MRLSU
Jun 21 2017 00:34
Yes
Marius Nicolae
@bytao7mao
Jun 21 2017 00:35
^ inline style method
also inline style have highest priority for styling
MRLSU
@MRLSU
Jun 21 2017 00:39
I did my <p>'s with that
just now
sandman2o
@sandman2o
Jun 21 2017 00:39
hey does anyone know how to change the background color of a page using bootstrap
Marius Nicolae
@bytao7mao
Jun 21 2017 00:40
you can change it without using bootstrap
sandman2o
@sandman2o
Jun 21 2017 00:41
ya
css?
Marius Nicolae
@bytao7mao
Jun 21 2017 00:42
@sandman2o yep
sandman2o
@sandman2o
Jun 21 2017 00:43
how would you do that
Marius Nicolae
@bytao7mao
Jun 21 2017 00:43
@MRLSU looks nice man, you can move further
to Portfolio page
@sandman2o entire background ?
of the whole page?
@sandman2o one example in css type:
* {
background-image: url ("#");
}
sandman2o
@sandman2o
Jun 21 2017 00:50
didnt work
Marius Nicolae
@bytao7mao
Jun 21 2017 00:52
share the codepen
sandman2o
@sandman2o
Jun 21 2017 00:52
do you add the color code in the ("#") part ?
Weston
@westonedwards
Jun 21 2017 00:53
Can anyone help me with the Twitch API project?
I put the call in a for loop, is it not working because of the callback using the last value of "i" which is outside of the array's boundaries?
I thought using let i = 0 was supposed to have fixed that
Marius Nicolae
@bytao7mao
Jun 21 2017 00:55
@westonedwards sry, i'm noob, i didn't get so far ... but you can ask on stackoverflow.com
CallMeOrange
@EgnaroDev
Jun 21 2017 01:07
@westonedwards you could go on JS help room instead
Why come here? :/
Paul
@candlefish
Jun 21 2017 01:17
I'm working on the Wikipedia Viewer project. I'm getting the images, titles, and descriptions just fine in the ajax response. The HTML for each resulting page is dynamically constructed and includes some Bootstrap column settings, but they aren't working and I don't know why. Can someone help me with this? I know I could do this using float and media queries, but I really want to understand where I'm going wrong with Bootstrap. I totally stripped down the HTML and CSS for troubleshooting, so there's no search fields or buttons. I'm just setting the searchQuery variable manually to see how different results look. Thanks in advance for any help! Here's my codepen link: https://codepen.io/candlefish/pen/mwRpEZ
Marius Nicolae
@bytao7mao
Jun 21 2017 01:22
@MCTwoDigitZero u here ?
Gulsvi
@gulsvi
Jun 21 2017 01:27
@candlefish Your bootstrap looks great - you just don't have the CSS added to your project.
Settings -> CSS -> Quick-add -> Bootstrap 3
Marius Nicolae
@bytao7mao
Jun 21 2017 01:29
lul.jpg
=)))
Paul
@candlefish
Jun 21 2017 01:32
@SkyC0der I can't believe I didn't see that. Seriously. Hours. I had accidentally added the JS one instead of the CSS one. Thanks @SkyC0der !
CamperBot
@camperbot
Jun 21 2017 01:32
candlefish sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1792 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 21 2017 01:33
No problem, sometimes a second pair of eyes really helps!
Marius Nicolae
@bytao7mao
Jun 21 2017 01:41
@SkyC0der man, why is my contact section floating ? or why i see the image between contact section and portfolio section ?
Gulsvi
@gulsvi
Jun 21 2017 01:49
@bytao7mao I'm not very good at flexbox - it appears to be because of this in your CSS though:
flex-flow:row wrap;
.cards {
  height:800px;
  width:80%;
  margin:auto; 
  display:flex;
  flex-flow:row wrap;
  justify-content:space-around;
}
BrianWilliams28
@BrianWilliams28
Jun 21 2017 01:49
why isn't my button taking on the border properties that I'm giving it in CSS???
https://codepen.io/BrianWilliams28/pen/VWbWgM
Marius Nicolae
@bytao7mao
Jun 21 2017 01:52
@SkyC0der i solved it with a padding to the contact section ... i thhink that maybe is from the navbar floating because it's the same size as navbar, altough the "clear:both" didn't solved the problem.
@BrianWilliams28 i solved it
https://codepen.io/bytao7mao/pen/EXmQyp
BrianWilliams28
@BrianWilliams28
Jun 21 2017 01:59
@bytao7mao what did you do?
@bytao7mao nvm i see it now
Marius Nicolae
@bytao7mao
Jun 21 2017 02:00
i pulled out the id class and i gived the inline style to text color.
Ashley Owens
@yelhsa
Jun 21 2017 02:25
is there a way to use font-awesome icons without downloading?
Princu
@Princu7
Jun 21 2017 02:26
@yelhsa I am not totally sure but I guess you do have to include a link to the font-awesome source in your page.
Hi Guys. Why does my footer not stick at the bottom of the page on smaller screens? Also, why is the page always so long even when the contents don't occupy so much space. Please help.
https://codepen.io/ShortAndSimple/pen/XgNBvV?editors=1000
Play with it on dev tools and please check. Thanks!
Marius Nicolae
@bytao7mao
Jun 21 2017 02:31
@yelhsa yep
with CDN
Ashley Owens
@yelhsa
Jun 21 2017 02:31
I got it. :)
Jeffrey Hui
@okamiko
Jun 21 2017 02:31
Hi guys I just started the big project, the one with the tribute and was wondering where I could get images links? I tried quincy's cat image link https://bit.ly/fcc-relaxing-cat which works but not sure where I can get my own images? I tried using flickr but the image never appeared when i linked it.
Marius Nicolae
@bytao7mao
Jun 21 2017 02:32
@yelhsa i'm noob, i found out 2 days ago about ;)))
Ashley Owens
@yelhsa
Jun 21 2017 02:32
I think the footer is floating because of your padding. you've given it 25px of space on all sides @Princu7
I found out about the smileys totally by accident lol @bytao7mao
Princu
@Princu7
Jun 21 2017 02:35
@yelhsa Doesn't solve the issue :(
Ashley Owens
@yelhsa
Jun 21 2017 02:36
Hm. @Princu7 what exactly are we trying to do?
Johnusquin
@Johnusquin
Jun 21 2017 02:37
Hey all. I'm looking at the portfolio challenge and I'm totally overwhelmed by the example. Am I expected to be able to make something that looks that good by now? I also don't understand any of the jquery code used in the example. Did I miss something?
Ashley Owens
@yelhsa
Jun 21 2017 02:37
have your footer be flush with the bottom of the page?
@Johnusquin No. Its a crazy large jump from the lessons to this challenge. So don't worry if you feel lost.
Johnusquin
@Johnusquin
Jun 21 2017 02:39
Okay. Any recommendations for resources to help me get through? I've been plugging away for a few days but it's really not coming together for me.
Marius Nicolae
@bytao7mao
Jun 21 2017 02:39
@Johnusquin what u need?
Princu
@Princu7
Jun 21 2017 02:39
@yelhsa Yes. I want the footer to be at the bottom of the page. I also don't understand that why the page is so big on so many screens when the content is small enough. A lot of white space is seen.
Mr-Benjamin
@Mr-Benjamin
Jun 21 2017 02:40
hi all I am adding page to CSS, and url as background
SIMAABAMIR
@SIMAABAMIR
Jun 21 2017 02:40
can any one please tell me , why all text are not showing in same line https://codepen.io/SIMAABAMIR/full/xrggOg/
Ashley Owens
@yelhsa
Jun 21 2017 02:40
Break it down into sections, use https://www.w3schools.com/html/default.asp, and just google like crazy.
Princu
@Princu7
Jun 21 2017 02:40
Okay. Thanks @yelhsa
CamperBot
@camperbot
Jun 21 2017 02:40
princu7 sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @yelhsa |http://www.freecodecamp.com/yelhsa
Ashley Owens
@yelhsa
Jun 21 2017 02:40
@Johnusquin it'll probably take a while
Mr-Benjamin
@Mr-Benjamin
Jun 21 2017 02:41
.pageOne {background:url("http//#")} this is correct?
Johnusquin
@Johnusquin
Jun 21 2017 02:41
@yelhsa Yeah I'm thinking it probably will. Thanks for the link!
CamperBot
@camperbot
Jun 21 2017 02:41
johnusquin sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @yelhsa |http://www.freecodecamp.com/yelhsa
Mr-Benjamin
@Mr-Benjamin
Jun 21 2017 02:42
@yelhsa @Johnusquin taking me some time, I was like doing it deleting it doing it etc, still going
but not deleting
Johnusquin
@Johnusquin
Jun 21 2017 02:45
Yeah I've deleted a lot in this one. Trying to build the page the way I like it before I delve into the interactive bits like the scroll buttons.
Ashley Owens
@yelhsa
Jun 21 2017 02:47
@Mr-Benjamin I think that background is good except I used background-image I'm not sure if it'll work both ways though
Jeffrey Hui
@okamiko
Jun 21 2017 02:48
<img class="center-block smaller-image" src="https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg" alt="A cute orange cat lying on its back. ">
anyone know where to get better images???????
ones that aren't dead? lol
Ashley Owens
@yelhsa
Jun 21 2017 02:48
@Johnusquin I've deleted mines at least 4 times. But after banging my head against a wall for forever I finally feel like I'm getting somewhere. The goal is to try to not be so ambitious. Keep it simple.
@Create415 you could try unsplash.com
Jeffrey Hui
@okamiko
Jun 21 2017 02:51
@yelhsa do you know why <img class="center-block smaller-image" src="https://unsplash.com/?photo=nI4OwVnz0dw" alt="hmm">
this wont display the image?
Ashley Owens
@yelhsa
Jun 21 2017 02:51
@Princu7 I'm playing around in your codepen. Idk if you can see the changes I'm making. lol I'm trying to figure out this problem now would you like me to stop?
Jeffrey Hui
@okamiko
Jun 21 2017 02:51
i tried unsplash
Ashley Owens
@yelhsa
Jun 21 2017 02:52
@Create415 you've got to use to image address.
Ravi Kishore Thella
@ravikishorethella
Jun 21 2017 02:52
@Create415 try imagebb
Jeffrey Hui
@okamiko
Jun 21 2017 02:53
@yelhsa can you be a bit more specific?
@ravikishorethella I tried that also, the image is not showing but the empty image box is
meaning it recognizes it , but isnt displaying
https://codepen.io/Create415/pen/gRWoJY i just started the project any help is appreciated
Ashley Owens
@yelhsa
Jun 21 2017 02:55
you're using a link to the page not the image @Create415
Jeffrey Hui
@okamiko
Jun 21 2017 02:56
how would I get the image? @yelhsa
Ashley Owens
@yelhsa
Jun 21 2017 02:57
right click and copy the image address @Create415
@Create415 also you can move all of your css to the css tab and remove the style tags
if you want
Jeffrey Hui
@okamiko
Jun 21 2017 02:59
ahh ok cool
i refactor things up a bit, but if I right click save as Local, wouldn't the image still not work?
@yelhsa not too sure what you mean when you say copy the image address
Princu
@Princu7
Jun 21 2017 03:02
@yelhsa Thanks buddy. You can stop. If I don't figure it out, I will ping you again :)
CamperBot
@camperbot
Jun 21 2017 03:02
:warning: princu7 already gave yelhsa points
princu7 sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
Ashley Owens
@yelhsa
Jun 21 2017 03:02
I just literally right click on the image. it'll bring up a list of options and I choose the copy image address option. then I paste that into my background image @Create415
Jeffrey Hui
@okamiko
Jun 21 2017 03:03
@yelhsa cool i see it on some images thanks!
CamperBot
@camperbot
Jun 21 2017 03:03
create415 sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 132 | @yelhsa |http://www.freecodecamp.com/yelhsa
Paul
@candlefish
Jun 21 2017 03:03
@SIMAABAMIR Your closing </a> tags are missing the slash.
Ashley Owens
@yelhsa
Jun 21 2017 03:07
are you in the right chat? @candlefish lol
ok I'm almost done. The only thing I cannot figure out is how to get this dropdown menu working. If anyone could help that'd be great. https://codepen.io/yelhsa/pen/YQKewG?editors=1100
Ashley Owens
@yelhsa
Jun 21 2017 03:18
oh nevermind I didn't even see @SIMAABAMIR up there
kalzimonium
@kalzimonium
Jun 21 2017 03:36
hey guys, I need help, please
Jeffrey Hui
@okamiko
Jun 21 2017 03:36
? what's up
kalzimonium
@kalzimonium
Jun 21 2017 03:37
@Create415 check this out and tell me how I can make that light gray box around the whole body of the page, please.
Jeffrey Hui
@okamiko
Jun 21 2017 03:39
trying using the jumbotron class
kalzimonium
@kalzimonium
Jun 21 2017 03:39
@Create415 what is that? never heard of it.
Marius Nicolae
@bytao7mao
Jun 21 2017 03:39
@kalzimonium add container-fluid and add ad it: what you want
@kalzimonium i used this on my project <div class="jumbotron jumbotron-fluid">
and if you don't want to extend to the end of the screen use a container class
kalzimonium
@kalzimonium
Jun 21 2017 03:41
@Create415 does that go on the whole html or the body? and also, what css tags do you use to make it like a box around the body?
Raezor-E
@Raezor-E
Jun 21 2017 03:41

Can't seem to get the font for my h1 text to change.

CSS:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

.playfair-font{
font-family: 'Playfair Display', serif;
}

HTML:

<div>
<h1 class= "green-text large-text middle playfair-font">This Day in History</h1>
</div>

Ken Haduch
@khaduch
Jun 21 2017 03:47
@Raezor-E - https://codepen.io/khaduch/pen/jwmzKJ - i set up this codepen page with your code. looks like it works?
@Raezor-E - i didn't have all of the classes, but the font seems to be there?
Raezor-E
@Raezor-E
Jun 21 2017 03:51

Maybe there's a problem with the rest of my code?

<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

.playfair-font{
font-family: 'Playfair Display', serif;
}

.green-text {
color: green;
}

.large-text {
font-size: 35px;
}

.middle {
text-align: center;
}

.body-color {
background-color: pink;
}

HTML:

<body class= "body-color">


<div>
<h1 class= "green-text large-text middle playfair-font">This Day in History</h1>
</div>

<p> Each day respresents something in history. Maybe today is when Jaws first appeared in 1975. Maybe today is the day the Beatles first performed. Maybe today is the day the elevator was invented. History.com has a section dedicated to anything hisotrically relevant that happened on that given day. A video is usually provided along with a text descritpion of the event. </p>

</body>

Raezor-E
@Raezor-E
Jun 21 2017 03:57
Could it be something other than my code?
Hamza Saleemi
@Azmah21
Jun 21 2017 03:58
hey guys!
Jeffrey Hui
@okamiko
Jun 21 2017 03:59
hi hamza
Hamza Saleemi
@Azmah21
Jun 21 2017 03:59
when I open my codepen on my phone the background image disappears for my first section only and I can't seem to figure it out
all of my other background images still work in mobile
and all the sections including the first one work when I open the pen in my laptop
Ken Haduch
@khaduch
Jun 21 2017 04:00
@Raezor-E - do you have this in a separate HTML file that you are running locally, or in a codepen? You need <style> tags surrounding your CSS code, if you are doing your own HTML file. How are you running this?
Hamza Saleemi
@Azmah21
Jun 21 2017 04:01
https://codepen.io/Azmah21/pen/gRbQrX?editors=1000
here's my code if anyone's interested
Jeffrey Hui
@okamiko
Jun 21 2017 04:01
@Azmah21 could it be your image was too big?
Hamza Saleemi
@Azmah21
Jun 21 2017 04:01
@Create415 the image as 1080p resolution which is the same as my other background images
and when I swap out the image in the first section it still doesn't display
Raezor-E
@Raezor-E
Jun 21 2017 04:02
I am running it through codepen @khaduch
Hamza Saleemi
@Azmah21
Jun 21 2017 04:02
so I don't think it's a problem with the image specifically
Jeffrey Hui
@okamiko
Jun 21 2017 04:02
which image is it? @Azmah21
Ken Haduch
@khaduch
Jun 21 2017 04:02
@Raezor-E want to post your url?
Raezor-E
@Raezor-E
Jun 21 2017 04:03

<p data-height="265" data-theme-id="0" data-slug-hash="LLyepz" data-default-tab="html,result" data-user="Raezor" data-embed-version="2" data-pen-title="Tribute Page" class="codepen">See the Pen <a href="https://codepen.io/Raezor/pen/LLyepz/">Tribute Page</a> by Elise (<a href="https://codepen.io/Raezor">@Raezor</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Raezor-E
@Raezor-E
Jun 21 2017 04:03
Let me send the shorter one, sorry.
Ken Haduch
@khaduch
Jun 21 2017 04:06
@Raezor-E - take that link out of the CSS panel, and just move the URL part of it into one of the CSS external links (in the gearbox icon. If you look at the way I did it in the URL for my sample codepen https://codepen.io/khaduch/pen/jwmzKJ - it is the correct way to put any external library references in a codepen page.
mrgrizzlie33
@mrgrizzlie33
Jun 21 2017 04:06

Hey guys, what am I doing wrong with my object lookup?

// Setup
function phoneticLookup(val) {
var result = "";

// Only change code below this line

var lookup = {"alpha": "Adams", "bravo": "Boston", "charlie": "Chicago", "delta": "Denver", "echo": "Easy", "foxtrot": "Frank",};

// Only change code above this line
return result;
}

// Change this value to test
phoneticLookup("alpha");

Ken Haduch
@khaduch
Jun 21 2017 04:07
@mrgrizzlie33 - you are not assigning any new value to the result variable? That's the "lookup" part of the function - using val and accessing the lookup object to set result to a value.
Jeffrey Hui
@okamiko
Jun 21 2017 04:07
@Azmah21 could be just your phone
I tried loading it mobile and it works fine
Hamza Saleemi
@Azmah21
Jun 21 2017 04:08
@Create415 is there any way to correct it?
I'm running it on chrome on my oneplus 3t
Ken Haduch
@khaduch
Jun 21 2017 04:09
@Raezor-E - in other words, paste this: https://fonts.googleapis.com/css?family=Playfair+Display into a CSS "Add External CSS" text in the CSS configuration panel on your pen.
Raezor-E
@Raezor-E
Jun 21 2017 04:09
@khaduch I fixed it. Thank you!
CamperBot
@camperbot
Jun 21 2017 04:09
raezor-e sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3017 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 21 2017 04:09
@Raezor-E -great! Good luck with that!
Paul
@candlefish
Jun 21 2017 04:10
@mrgrizzlie33 So far, you have passed the value "alpha" into your function, but you haven't tested it against the lookup array. Also, you have an extra comma after "Frank" that you don't need.
kalzimonium
@kalzimonium
Jun 21 2017 04:21
just finished my pen project. Here is the URL. take a look and let me what you think. also, I can't seem to be able to make it my phone's screen. https://codepen.io/kalzimonium/pen/GEWrBX?editors=1000
to make it fit my phone's screen I meant
Marius Nicolae
@bytao7mao
Jun 21 2017 04:24
@kalzimonium add,img-fluid class to your image
img-responsive
not fluid
kalzimonium
@kalzimonium
Jun 21 2017 04:28
@bytao7mao thanks a lot. That is a lot better. still not fitting the screen, but much better than the previous one.
CamperBot
@camperbot
Jun 21 2017 04:28
kalzimonium sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:cookie: 132 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
Marius Nicolae
@bytao7mao
Jun 21 2017 04:29
@kalzimonium yeah i know, just a minute
i ll give the fork
Ken Haduch
@khaduch
Jun 21 2017 04:31
@kalzimonium - you should not have the CSS style definitions in the HTML panel. Move those into the CSS panel. Codepen requirements.
Marius Nicolae
@bytao7mao
Jun 21 2017 04:33
@kalzimonium also, you can adjust it how you want.
kalzimonium
@kalzimonium
Jun 21 2017 04:35
@khaduch done. thanks :)
CamperBot
@camperbot
Jun 21 2017 04:35
kalzimonium sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3018 | @khaduch |http://www.freecodecamp.com/khaduch
kalzimonium
@kalzimonium
Jun 21 2017 04:37
@bytao7mao wow. much better. I just want the picture to be a little bigger
Marius Nicolae
@bytao7mao
Jun 21 2017 04:37
adjust the width higher, and let height to auto
Hemakshi Sachdev
@hemakshis
Jun 21 2017 04:44
if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      latitude = position.coords.latitude,
      longitude = position.coords.longitude;
    });
please someone tell me what is wrong in this.. when i request for the forecast data.. and check on the console it tells latitude and longitude are undefined
Paul
@candlefish
Jun 21 2017 04:48
@hemakshis You need to change that comma to a semi-colon after latitude :)
kalzimonium
@kalzimonium
Jun 21 2017 04:50
@bytao7mao That worked perfectly, thank you very much.
CamperBot
@camperbot
Jun 21 2017 04:50
kalzimonium sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:warning: kalzimonium already gave bytao7mao points
Hemakshi Sachdev
@hemakshis
Jun 21 2017 04:50
@candlefish still it says undefined
shivam gupta
@shivamg11000
Jun 21 2017 04:50
@hemakshis It also might be that you have disable tracking on your brower, or your browser does not support it
Paul
@candlefish
Jun 21 2017 04:51
@hemakshis Also be sure you declare your variables latitude and longitude somewhere with the var keyword
shivam gupta
@shivamg11000
Jun 21 2017 04:51
which browser? If chrome, check a small greyish circle in the http bar at the right, click it
Hemakshi Sachdev
@hemakshis
Jun 21 2017 04:52
wait let me show u the error on the console
shivam gupta
@shivamg11000
Jun 21 2017 04:53
@hemakshis send the link to your codepen
@shivamg11000
Zhanibek
@zhann1982
Jun 21 2017 05:02
@hemakshis Nothing happened when i opened your pen
shivam gupta
@shivamg11000
Jun 21 2017 05:03
@hemakshis try this
var lat;
var long;
navigator.geolocation.watchPosition(function(position) {
  lat = position.coords.latitude;
  long = position.coords.longitude;
  console.log(lat,long);
}  
);
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:03
@zhann1982 yes first i'm checking whether my code is working or not
Zhanibek
@zhann1982
Jun 21 2017 05:04
@hemakshis console shows error on CORS headers
shivam gupta
@shivamg11000
Jun 21 2017 05:04
try this in different pen to check whether geolocation working or not @hemakshis
the code I sent
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:07
@shivamg11000 yes it is working but for the api request it still shows undefined
shivam gupta
@shivamg11000
Jun 21 2017 05:07
@hemakshis change your geolocation code to mine, although your should work but dont know why
also add this
?callback=?
at the end of your api url
Zhanibek
@zhann1982
Jun 21 2017 05:08
@hemakshis That is happening because of "http" in url. Should be "https".
shivam gupta
@shivamg11000
Jun 21 2017 05:08
@zhann1982 where http?
Zhanibek
@zhann1982
Jun 21 2017 05:10
@shivamg11000 There is a problem with api requests on codepen. You cannot request "http", cause there are security issues
shivam gupta
@shivamg11000
Jun 21 2017 05:11
@hemakshis hey I changes the added the callback at the api url of your codepen, its working , check this https://codepen.io/shivamg11000/pen/qjmYMY?editors=0011
@zhann1982 but the api url does not contain http://, its https://
@hemakshis you there?
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:13
@shivamg11000 thanks.. but what about the forecast that i want to put on the console..??
CamperBot
@camperbot
Jun 21 2017 05:13
hemakshis sends brownie points to @shivamg11000 :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @shivamg11000 |http://www.freecodecamp.com/shivamg11000
shivam gupta
@shivamg11000
Jun 21 2017 05:13
@hemakshis whats the message
on the console
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:13
@shivamg11000
api.darksky.net/forecast/0aa1a11f9d125cee414d4fb19068e328/?callback=?undefined,undefined Failed to load resource: the server responded with a status of 404 (Not Found)
index.html:1 XMLHttpRequest cannot load https://api.darksky.net/forecast/0aa1a11f9d125cee414d4fb19068e328/?callback=?undefined,undefined. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 404.
shivam gupta
@shivamg11000
Jun 21 2017 05:14
send the link to your codepen again
Zhanibek
@zhann1982
Jun 21 2017 05:15
@hemakshis I think that is happening because of getJSON grabs lat and lon before they are loaded
shivam gupta
@shivamg11000
Jun 21 2017 05:16
@hemakshis add callback at the last
https://api.darksky.net/forecast/yourkey/+lat+","+long"+"?callback=?"
Adam Faraj
@adamfaraj
Jun 21 2017 05:18
how to properly cache with an AJAX call?
$.ajax({
  method: 'GET',
  url: "https://www.quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1,",
  cache: false,
  dataType: "json"
}).then(function(data){
  $(".btn").on('click', function(){
  $.each(data, function(i, data){
        $('.quote__container--text').html(JSON.stringify(data.content));
        $('.quote__container--author').html(JSON.stringify(data.title));
        console.log(data)
}); 
});
});
i want to set it to false, so it doesn't cache the URL
it keeps giving me the same quote, but when i refresh, i get a different quote
Gulsvi
@gulsvi
Jun 21 2017 05:24
@adamfaraj You have it correct, just put the ajax call in your click function:
$(".btn").on("click", function() {
  $.ajax({
    url: "https://www.quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1,",
    cache: false
  }).then(function(data) {
    $(".quote__container--text").html(JSON.stringify(data[0].content));
    $(".quote__container--author").html(JSON.stringify(data[0].title));
  });
});
no need for $.each either - only one result [0] is returned
(And no need for .stringify(), but maybe you want that for now)
Adam Faraj
@adamfaraj
Jun 21 2017 05:28
@SkyC0der thank you!!!
CamperBot
@camperbot
Jun 21 2017 05:28
adamfaraj sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1793 | @skyc0der |http://www.freecodecamp.com/skyc0der
Adam Faraj
@adamfaraj
Jun 21 2017 05:28
why does putting the ajax call in my click function fix it?
Zhanibek
@zhann1982
Jun 21 2017 05:29
@hemakshis Hey ! I solved your problem. I got the data
Markus Ivancsics
@ivancsicsmarkus
Jun 21 2017 05:29
@adamfaraj You have to get a quote only on click. :)
Zhanibek
@zhann1982
Jun 21 2017 05:29

@hemakshis Here is the code ```$(document).ready(function(){

console.log("test");
var prom = new Promise(function(resolve,reject){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
lat = position.coords.latitude;
long = position.coords.longitude;
console.log(lat, long);
resolve();
});
}
}).then(function(){
$.getJSON("https://api.darksky.net/forecast/0aa1a11f9d125cee414d4fb19068e328/"+lat+","+long+"?callback=?",function(forecast){
console.dir(forecast);
});

});

}); ```

Adam Faraj
@adamfaraj
Jun 21 2017 05:30
@ivancsicsmarkus right. lol. it's working now
Zhanibek
@zhann1982
Jun 21 2017 05:30
@hemakshis You can see data in console of the brawser. I used promise for async work
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:32
@zhann1982 what is Promise ??
Zhanibek
@zhann1982
Jun 21 2017 05:34
@hemakshis Promise is function that waits for certain actions, when it sees resolve function is running it goes to function in 'then' method and runs it
Markus Ivancsics
@ivancsicsmarkus
Jun 21 2017 05:34
@hemakshis Promises: MDN, Youtube.
Zhanibek
@zhann1982
Jun 21 2017 05:35
@hemakshis in your case getJSON waits for navigation
Vasundhara sharma
@vasundharak
Jun 21 2017 05:35
Hi, guys how can i make my navigation bar fixed with respect to the page and how can I make the text on the image responsive?
Adam Faraj
@adamfaraj
Jun 21 2017 05:36
@vasundharak position: fixed; in CSS
responsive how?
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:36
thanks a lot @zhann1982 @ivancsicsmarkus it worked
CamperBot
@camperbot
Jun 21 2017 05:36
hemakshis sends brownie points to @zhann1982 and @ivancsicsmarkus :sparkles: :thumbsup: :sparkles:
:cookie: 630 | @ivancsicsmarkus |http://www.freecodecamp.com/ivancsicsmarkus
:cookie: 332 | @zhann1982 |http://www.freecodecamp.com/zhann1982
Paul
@candlefish
Jun 21 2017 05:37
  ```
  $.ajax({
  type: 'GET',
  dataType: 'JSONP', 
  url: 'https://api.darksky.net/forecast/[api-key]/'
       + latitude +',' + longitude,
  success: function(forecast) {
    console.log(forecast);
  }
});
```
Hemakshi Sachdev
@hemakshis
Jun 21 2017 05:37
thanku @candlefish it worked
CamperBot
@camperbot
Jun 21 2017 05:37
hemakshis sends brownie points to @candlefish :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @candlefish |http://www.freecodecamp.com/candlefish
Paul
@candlefish
Jun 21 2017 05:38
Sorry, I was having trouble pasting the code in properly
Vasundhara sharma
@vasundharak
Jun 21 2017 05:39
@adamfaraj I have tried, position: fixed in Css , it is not working. Here is my code:https://codepen.io/vasundharak/pen/JJWbXq?editors=1000
Markus Ivancsics
@ivancsicsmarkus
Jun 21 2017 05:48
What are you trying to do?
Vasundhara sharma
@vasundharak
Jun 21 2017 05:50
I want my navigation bar to fix on the top, while the page scrolls and i have placed text and buttons on the image, when i am resizing the page the text and buttons are not in the same position relative to the image
Gulsvi
@gulsvi
Jun 21 2017 05:56
@vasundharak use the navbar-fixed-top class, not navbar-static-top
<nav class="navbar navbar-inverse navbar-fixed-top">
When you add that class, you also need to add padding to your <body> element:
body {
  padding-top: 70px;
}
Vasundhara sharma
@vasundharak
Jun 21 2017 06:00
@SkyC0der Thanks, it worked :-D
CamperBot
@camperbot
Jun 21 2017 06:00
vasundharak sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1794 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 21 2017 06:01
No problem :)
tsss85
@tsss85
Jun 21 2017 06:18
hi all,
MRLSU
@MRLSU
Jun 21 2017 06:26
Anyone here got a minute to help me figure out whats wrong with one of my div closing tags?
on codepen
okay ):
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:29
@MRLSU write the pen link down
check out my footer and my <ul>
why are those </div>'s highlighted?
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:32
you've forgotten to close the ul
MRLSU
@MRLSU
Jun 21 2017 06:32
man im retartded
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:32
close it like that after the 19th line </ul>
MRLSU
@MRLSU
Jun 21 2017 06:32
its 1:30 am here maybe i should take a break
i shouldnt be missing stuff like that lol
thanks
i forgot to close my footer too
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:33
you're welc ^^
MRLSU
@MRLSU
Jun 21 2017 06:33
@Lartwel how long have you been coding?
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:33
yeah haha I've forgotten to tell you about the footer
I was coding other stuff, but for the web since a few months
MRLSU
@MRLSU
Jun 21 2017 06:34
I got it bro!
like coding what back end type stuff?
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:34
front-end
but I'm more interested in being a full-stack so I'm working on that
MRLSU
@MRLSU
Jun 21 2017 06:35
same
I actually want to learn server type of stuff as far as things like Data Scientists do, but I don't think this website provides much of that
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:38
I don't know enough about big data and stuff like that, but there're 200 hrs of data visualization on the website
how long have you been coding?
MRLSU
@MRLSU
Jun 21 2017 06:41
like about 12 days lol
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:45
You can code better on code editors like Brackets / Sublime
Vasundhara sharma
@vasundharak
Jun 21 2017 06:53
hi, can someone help me with positioning the text and buttons on the responsive image
alpox
@alpox
Jun 21 2017 06:53
@Lartwel not to forget VSCode
Mahmoud Ahmed
@Lartwel
Jun 21 2017 06:54
@alpox yeah sure haha
@vasundharak if the code is on codepen, you can send me the link
Vasundhara sharma
@vasundharak
Jun 21 2017 06:59
tsss85
@tsss85
Jun 21 2017 07:07
I all, in the weather local chalenge, when i tried the exemple it doesn't works. I-ve tried with many browser and device, but the localisation doesn't works
Long Nguyen
@longnt80
Jun 21 2017 07:11
anyone want to review my TicTacToe game? Criticisms are welcome
https://s.codepen.io/longnt80/debug/BZWBxm/wQMPoZbZXmqk
kirbyedy
@kirbyedy
Jun 21 2017 07:13
@longnt80 looks ok, works well
its not unbeatable, but its good
Mahmoud Ahmed
@Lartwel
Jun 21 2017 07:15
@vasundharak the buttons have position: absolute and the nearest parent that has a relative position is the "Container"
Long Nguyen
@longnt80
Jun 21 2017 07:15
@kirbyedy I haven't done with the algorithm yet, I sucks at tic tac toe though lol
Mahmoud Ahmed
@Lartwel
Jun 21 2017 07:16
so they're are positioned according to the container
@vasundharak You may put the buttons in a relative holder so the can be positioned according to it instead of the bootstrap container
kirbyedy
@kirbyedy
Jun 21 2017 07:20
@longnt80 you dont need to make it unbeatable dough as it was requested before
Long Nguyen
@longnt80
Jun 21 2017 07:21
@kirbyedy I know, I'm still working on that
just want to find other issues beside that
@kirbyedy thanks for testing
CamperBot
@camperbot
Jun 21 2017 07:21
longnt80 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2099 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
lazzlo
@lazzlo
Jun 21 2017 07:54
Hey guys! Quick question. If I want to add sounds to my pomodoro timer, do I have to download them from somewhere and upload them so I can have a link to them or something? I'm not quite sure how to access the audio files
kirbyedy
@kirbyedy
Jun 21 2017 07:55
@Lazzlo yea, thats a good way to do it
host them somewhere where you can grant a public access
h1tag
@h1tag
Jun 21 2017 07:56
@Lazzlo There's an audio tag in HTML
lazzlo
@lazzlo
Jun 21 2017 07:56
@kirbyedy Do you have any example where I can host them?
kirbyedy
@kirbyedy
Jun 21 2017 07:58
github, dropbox and similar...
h1tag
@h1tag
Jun 21 2017 07:58
@Lazzlo don't they give you the links to the audio files in the project description page?
kirbyedy
@kirbyedy
Jun 21 2017 07:58
maybe he wants to use some custom sounds
lazzlo
@lazzlo
Jun 21 2017 07:58
@h1tag No not for the pomodoro challenge
h1tag
@h1tag
Jun 21 2017 07:59
Hey guys! Quick question. If I want to add sounds to my pomodoro timer
lazzlo
@lazzlo
Jun 21 2017 07:59
@h1tag @kirbyedy Actually I found one now. Just looked at the example project. Thanks guys
CamperBot
@camperbot
Jun 21 2017 07:59
lazzlo sends brownie points to @h1tag and @kirbyedy :sparkles: :thumbsup: :sparkles:
:cookie: 861 | @h1tag |http://www.freecodecamp.com/h1tag
:star2: 2100 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
lazzlo
@lazzlo
Jun 21 2017 08:03
Nope, that didn't work. Link broken
h1tag
@h1tag
Jun 21 2017 08:05
@Lazzlo you want to use your own sound files?
kirbyedy
@kirbyedy
Jun 21 2017 08:07
I think I used the cuckoo clock for mine :D
h1tag
@h1tag
Jun 21 2017 08:08
:smile:
lazzlo
@lazzlo
Jun 21 2017 08:10
@h1tag I don't really care what sound I use as long as there is a sound there. I just have no idea where to find a link with an mp3
lazzlo
@lazzlo
Jun 21 2017 08:12
@h1tag Thanks man
CamperBot
@camperbot
Jun 21 2017 08:12
lazzlo sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:warning: lazzlo already gave h1tag points
lazzlo
@lazzlo
Jun 21 2017 08:13
@kirbyedy Do you mind posting the exact link you used to link to the audio?
Long Nguyen
@longnt80
Jun 21 2017 08:15
you can find more at the same website https://www.soundjay.com
lazzlo
@lazzlo
Jun 21 2017 08:15
@longnt80 Sweet! I appreciate it! :)
abraham anak agung
@padunk
Jun 21 2017 08:16
do we need sound for pomodoro challenge?
Long Nguyen
@longnt80
Jun 21 2017 08:16
@padunk it's up to you
but sound is nice, and it makes sense for a timer
Denver Jackson
@denveloperj
Jun 21 2017 08:27
Hi - Has anyone used TotalJS before?
Dipti Nayan
@diptinayan
Jun 21 2017 08:51
hey can anybody tell me how to get those alien stuffs in the portfolio page
i havent seen that kind of things ever!!!!
and i really need to create that one in order to get going withmy training.....HELP!!!!!!!!!
devg02
@devg02
Jun 21 2017 09:05
hi, I am not sure how to phrase this but what is the blog type effect called so that the content is in the middle of the screen in portfolio page. https://codepen.io/freeCodeCamp/full/YqLyXB
@diptinayan can you take a screenshot to let us know exactly what you are talking about?
Dipti Nayan
@diptinayan
Jun 21 2017 09:09
image.png
the codes in css and js
@devg02
Adam Faraj
@adamfaraj
Jun 21 2017 09:11
@devg02 middle of the screen? what do you mean
devg02
@devg02
Jun 21 2017 09:13
@adamfaraj on large screen on the portfolio page the about us, portfolio and contact section only take about 3/4th of the page width rest it is surrounded by a grey background.
Adam Faraj
@adamfaraj
Jun 21 2017 09:14
so the darker gray will be the body background and the lighter gray will be a div background that has a different width than the body
if i'm making sense
body{
background-color: gray;
}
div.blog_container{
background-color: light-gray;
}
div.blog_container{
width: 500px
}
something like that
Marcus Zierke
@marcuszierke
Jun 21 2017 09:17
hey guys, I am having trouble with the weather app. More concrete: with defining variables within my script
            $(document).ready(function() {
                if(navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var lat = position.coords.latitude;
                        var long = position.coords.longitude;
                    });
                }
                $("#click").click(function() {
                    $("#message").text("this is the long " + long + " and this is the lat" + lat);
                });
            });
that's the code: how can I define variables so I can use them later on in the script!?
Jim Tryon
@jimtryon
Jun 21 2017 09:18
@marcuszierke which variable is giving you an issue?
Adam Faraj
@adamfaraj
Jun 21 2017 09:18
variables will be scoped to their function
you can define them outside of the function and make them global, but that's bad practice
Jim Tryon
@jimtryon
Jun 21 2017 09:18
If you define them within document.ready, their scope will only be within the function
but if you define them outside of document.ready, you can you them anywhere in the code
devg02
@devg02
Jun 21 2017 09:20
@adamfaraj I am not sure if the blog_container would be a fixed width it looks to be responsive. Also the content looks like it has a 3d effect where the content looks to be superimposed on the background.
Marcus Zierke
@marcuszierke
Jun 21 2017 09:21
@jimtryon the definition of var lat and var long I tried to define them outside the if statement as well. nada!
when I try to display them on the html page nothing is happening
Adam Faraj
@adamfaraj
Jun 21 2017 09:22
@marcuszierke are they still taking the position argument?
@devg02 look up flexbox
Jim Tryon
@jimtryon
Jun 21 2017 09:22
@marcuszierke I don’t see their usage in your code
Adam Faraj
@adamfaraj
Jun 21 2017 09:24
@marcuszierke try moving your click event listener to inside the .ready function?
might keep your variables local?
lazzlo
@lazzlo
Jun 21 2017 09:24
@marcuszierke You have to declare the variables outside the function, but assigning them values happens inside the function
Adam Faraj
@adamfaraj
Jun 21 2017 09:24
idk
devg02
@devg02
Jun 21 2017 09:25
@diptinayan I am not sure about that but pretty sure you can complete a similar looking portfolio page with normal css and js
Marcus Zierke
@marcuszierke
Jun 21 2017 09:26
@adamfaraj and @Lazzlo that's what I did, look:
            $(document).ready(function() {
                var long;
                var lat;
                if(navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        lat = position.coords.latitude;
                        long = position.coords.longitude;
                    });
                }
                $("#click").click(function() {
                    $("#message").text("this is the long " + long + " and this is the lat" + lat);
                });
            });
click event is inside the ready function and var are defined outside but if I want to display it it give me back "this is the long undefined and this is the lat undefined"
h1tag
@h1tag
Jun 21 2017 09:30
@marcuszierke can you share the link to the pen?
Also, does it ask for a permission to access your location when you run it?
Dipti Nayan
@diptinayan
Jun 21 2017 09:30
@devg02 ok! :+1:
Marcus Zierke
@marcuszierke
Jun 21 2017 09:32
it does ask for permission, yes @h1tag
let me put it in the pen, I prefer to work with sublime ... give me a second
h1tag
@h1tag
Jun 21 2017 09:32
@marcuszierke me too ;)
devg02
@devg02
Jun 21 2017 09:34
@adamfaraj on googling i found flexbox for bootstrap 4 and css3? which one should i look into?
teevik
@teevik
Jun 21 2017 09:34
???
Flexbox is for css, bootstrap4 uses flexbox which is in css
Adam Faraj
@adamfaraj
Jun 21 2017 09:35
css3
what he said
Marcus Zierke
@marcuszierke
Jun 21 2017 09:35
there you go, @h1tag
Marcus Zierke
@marcuszierke
Jun 21 2017 09:35
it's not asking me for permission in the pen tough
Adam Faraj
@adamfaraj
Jun 21 2017 09:36
it just asked me
teevik
@teevik
Jun 21 2017 09:36
@marcuszierke If you prefer working on local and not copying it to codepen constantly, you could use github with github hosting
Marcus Zierke
@marcuszierke
Jun 21 2017 09:37
good hint, @teevik Thanks
CamperBot
@camperbot
Jun 21 2017 09:37
marcuszierke sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 143 | @teevik |http://www.freecodecamp.com/teevik
Adam Faraj
@adamfaraj
Jun 21 2017 09:37
@marcuszierke $("#message").text(JSON.html(stringify(json)));
you're not calling stringify correctly
JSON.stringify
Marcus Zierke
@marcuszierke
Jun 21 2017 09:39
no? that's how it was shown in the tutorial here on FCC
ah no, you are right. I fucked up
but it's still not working
Adam Faraj
@adamfaraj
Jun 21 2017 09:41
$(document).ready(function() {
  var long;
  var lat;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      $("#click").click(function() {
        $.getJSON(
          "https://openweathermap.org/data/2.5/find?lat=" +
            position.coords.latitude +
            "&lon=" +
            position.coords.longitude +
            "&cnt=10&appid=b1b15e88fa797225412429c1c50c122a1",
          function(json) {
            $("#message").text(JSON.html(stringify(json)));
          }
        );
      });
    });
  }
});
i don't see where you defined long or lat
José Cabeda
@Cabeda
Jun 21 2017 09:42
Hi! I was trying to do the challenge Validate US Phone Numbers but the regular expression I'm using somehow doesn't validate the first number one. I was testing it here and everything should be working but on FCC it isn't. Could anyone help me?
Marcus Zierke
@marcuszierke
Jun 21 2017 09:48
@adamfaraj right after the first $(document).ready statement
h1tag
@h1tag
Jun 21 2017 09:48
@marcuszierke you have an error, check the browser console
Adam Faraj
@adamfaraj
Jun 21 2017 09:49
right, you're declaring a variable, but not assigning it anything
h1tag
@h1tag
Jun 21 2017 09:50
though I couldn't figure out why this version didn't work, wierd :laughing:
But if u fix the error, the one on codepen should work
You basically need to user another API for the weather, because this one doesn't work with https
Marcus Zierke
@marcuszierke
Jun 21 2017 09:53
@h1tag what kind of error? I think I asked for too many API requests already ... might that be the problem!? @adamfaraj right, I changed the code because I thought if I do the click event within the if statement there is no need to define variables
h1tag
@h1tag
Jun 21 2017 09:53
@marcuszierke a mixed content error
Marcus Zierke
@marcuszierke
Jun 21 2017 09:57
@h1tag can you explain that a bit more detailed?
Marcus Zierke
@marcuszierke
Jun 21 2017 10:00
I gonna check it out, thanks @h1tag
CamperBot
@camperbot
Jun 21 2017 10:00
marcuszierke sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 862 | @h1tag |http://www.freecodecamp.com/h1tag
Mikhail Kirillov
@w96k
Jun 21 2017 10:31
Hey guys!
https://codepen.io/w96k/pen/MomvPp
Need help with this test. What should I do?
1. The navbar should always be at the top of the viewport.
Adam Faraj
@adamfaraj
Jun 21 2017 10:33

nav-bar{

position: fixed;
}
#nav-bar{
position: fixed;
}
Mikhail Kirillov
@w96k
Jun 21 2017 10:35
Test doesn’t pass for some reason
Adam Faraj
@adamfaraj
Jun 21 2017 10:36
<nav id="nav-bar" class="ui inverted menu" style="
    position: fixed;
    width: 100%;
    z-index: 1000;
">
played around in the console
sorta worked. lol
Mikhail Kirillov
@w96k
Jun 21 2017 10:37
@adamfaraj Thanks
CamperBot
@camperbot
Jun 21 2017 10:37
w96k sends brownie points to @adamfaraj :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @adamfaraj |http://www.freecodecamp.com/adamfaraj
Mikhail Kirillov
@w96k
Jun 21 2017 10:37
The problem was that I should use this on #header lel
Adam Faraj
@adamfaraj
Jun 21 2017 10:38
lol
Mikhail Kirillov
@w96k
Jun 21 2017 10:39
Now should fix layout :(
Next time I will read the tests first
abdullahdiriye
@abdullahdiriye
Jun 21 2017 10:40
@diomed thank u so much
CamperBot
@camperbot
Jun 21 2017 10:40
abdullahdiriye sends brownie points to @diomed :sparkles: :thumbsup: :sparkles:
:star2: 5010 | @diomed |http://www.freecodecamp.com/diomed
devg02
@devg02
Jun 21 2017 10:47
Can someone check my navigation bar code and tell me why the navbar doesn't open on mobile view? https://codepen.io/devg02/pen/WOjaex
h1tag
@h1tag
Jun 21 2017 10:48
@devg02 add jquery and bootstrap.js
devg02
@devg02
Jun 21 2017 10:51
@h1tag thanks a lot
CamperBot
@camperbot
Jun 21 2017 10:51
devg02 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 863 | @h1tag |http://www.freecodecamp.com/h1tag
ResoGuy
@Resoguy
Jun 21 2017 10:54
hi everyone! can someone pls tell me why my calculator css acts weird when i push button?
https://codepen.io/ResoGuy/pen/dRWzgg
h1tag
@h1tag
Jun 21 2017 10:57
@Resoguy you mean when the calculator display is full?
ResoGuy
@Resoguy
Jun 21 2017 11:00
no i mean when you push any button it adds to the screen thats intended but the borders are acting weird and after some text it exits from the div completely goes insane
its like borders are dancing :D
h1tag
@h1tag
Jun 21 2017 11:02
@Resoguy I don't see that, except when the calculator display is full
devg02
@devg02
Jun 21 2017 11:08
@Resoguy seems fine to me.
Boris Yordanov
@borisyordanov
Jun 21 2017 11:08
@Resoguy did you fix your problem already? it's happening to me as well
@Resoguy i can't find what's causing the jumping though. In any case - why are you using tables? They are notoriously hard to work with. If you haven't worked with it yet, this would be a good opportunity to learn and use flexbox. Check out this course - https://flexbox.io/
tundeiness
@tundeiness
Jun 21 2017 11:16
can someone help me with this little challenge of mine? my button keeps extending beyond the viewport when viewed on certain mobile devices. By the way, I am using bootstrap. the button element inside the div keeps extending beyond the view port whenever it is viewed as a mobile device. Though I have tried so many tricks like float, position and offset, pull/push, it doesn't fit in to where I would like it to be. I need heads up on this please. all other things are secondary, as far as i am concerned, getting the structure right will go a long way. The code is shown here:> https://codepen.io/highness/pen/jwPVVw
ResoGuy
@Resoguy
Jun 21 2017 11:24
@borisyordanov no i didnt fix it yet i gave a break, about flexbox yess i really want to learn it but i felt lazy to learn today so i went with tables :P i guess i need to learn thanks for the link
CamperBot
@camperbot
Jun 21 2017 11:24
resoguy sends brownie points to @borisyordanov :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @borisyordanov |http://www.freecodecamp.com/borisyordanov
AnneLee
@littleAnneLee
Jun 21 2017 11:53
Is anybody here?Would you like to tell me why i can't register the CodePen?
h1tag
@h1tag
Jun 21 2017 11:59
@littleAnneLee I think it's because you're in China. Ask in this room: https://gitter.im/FreeCodeCamp/chinese
AnneLee
@littleAnneLee
Jun 21 2017 12:02
thanks
JesperKSmith
@JesperKSmith
Jun 21 2017 12:12

Hi! I'm looking for a way to create a loop that can iterate through each file in a given directory, and return the file name, in Javascript.

I'm not really sure as to how I should go about this, so any tips are welcome :) Example of what I got so far:

function fnGetImages(id) {
    var sUrl = 'img/properties/' + id + '/';
// Here I want to create a loop that iterates through each file in the sUrl directory

}
h1tag
@h1tag
Jun 21 2017 12:24
@JesperKSmith I haven't came across this before, but you can find a solution online
Dan Couper
@DanCouper
Jun 21 2017 12:28
@JesperKSmith const fs = import 'fs' then fs.readdirSync(pathToImagesDir)
Which gives you a list of all the files in the directory
This is assuming Node, because you can't access the actual filesystem from the browser; if you have a directory that you know the filenames (like image1 image2 etc), you just loop for (let i = 0; i <= numberOfImages; i++) imageNameArray.push(img/properties/image${i}.jpg);`
Dan Couper
@DanCouper
Jun 21 2017 12:33
Ah, gitter borked my formatting, the string inside push should be surrounded by backticks
JamesVitaly
@JamesVitaly
Jun 21 2017 12:38
working on the wtwitch api thingy and trying to get it to load up what streams are online or offline and atm i have made one work but the other doesnt show up and i cant figure out why can someone help ill past code now

// Outputs basic data for ESL Stream data
function retrieveESLdata () {
//API
let api = "https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2";

// GET JSON DATA

$.getJSON (api, function(data){

let statusOfStreamESL = data.stream.stream_type;
let currentGame = data.stream.game;

// FINDS OUT IF ONLINE OR OFFLINE

if ( statusOfStreamESL == "live") { $("#channelESL").html( "ESL_SC2: Currently online streaming" + ' ' + currentGame) }
else{ $("#channelESL").html("ESL_SC2 is currently offline")
};

});
}

// Outputs basic data for ESL Stream data
function retrieveFCCdata () {
//API
let api = "https://wind-bow.glitch.me/twitch-api/streams/freecodecamp";

// GET JSON DATA

$.getJSON (api, function(data){

let streamNull = data.stream;
let statusOfStream = data.stream.stream_type;
let currentGame = data.stream.game;

// FINDS OUT IF ONLINE OR OFFLINE

if ( streamNull == null) { $("#freecodecamp").html( "freecodecamp is offline" ) }
else{ $("#freecodecamp").html("fcc different status")
};

});
}

retrieveFCCdata();

retrieveESLdata();

// Outputs basic data for ESL Stream data
function retrieveESLdata () {
//API
let api = "https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2";

// GET JSON DATA

$.getJSON (api, function(data){

let statusOfStreamESL = data.stream.stream_type;
let currentGame = data.stream.game;

// FINDS OUT IF ONLINE OR OFFLINE

if ( statusOfStreamESL == "live") { $("#channelESL").html( "ESL_SC2: Currently online streaming" + ' ' + currentGame) }
else{ $("#channelESL").html("ESL_SC2 is currently offline")
};

});
}

// Outputs basic data for ESL Stream data
function retrieveFCCdata () {
//API
let api = "https://wind-bow.glitch.me/twitch-api/streams/freecodecamp";

// GET JSON DATA

$.getJSON (api, function(data){

let streamNull = data.stream;
let statusOfStream = data.stream.stream_type;
let currentGame = data.stream.game;

// FINDS OUT IF ONLINE OR OFFLINE

if ( streamNull == null) { $("#freecodecamp").html( "freecodecamp is offline" ) }
else{ $("#freecodecamp").html("fcc different status")
};

});
}

retrieveFCCdata();

retrieveESLdata();

damn how do i send markup

\\ js // Outputs basic data for ESL Stream data
function retrieveESLdata () {
//API
let api = "https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2";

// GET JSON DATA

$.getJSON (api, function(data){

let statusOfStreamESL = data.stream.stream_type;
let currentGame = data.stream.game;

// FINDS OUT IF ONLINE OR OFFLINE

if ( statusOfStreamESL == "live") { $("#channelESL").html( "ESL_SC2: Currently online streaming" + ' ' + currentGame) }
else{ $("#channelESL").html("ESL_SC2 is currently offline")
};

});
}

// Outputs basic data for ESL Stream data
function retrieveFCCdata () {
//API
let api = "https://wind-bow.glitch.me/twitch-api/streams/freecodecamp";

// GET JSON DATA

$.getJSON (api, function(data){

let streamNull = data.stream;
let statusOfStream = data.stream.stream_type;
let currentGame = data.stream.game;

// FINDS OUT IF ONLINE OR OFFLINE

if ( streamNull == null) { $("#freecodecamp").html( "freecodecamp is offline" ) }
else{ $("#freecodecamp").html("fcc different status")
};

});
}

retrieveFCCdata();

retrieveESLdata();

\\

```
```js
JamesVitaly
@JamesVitaly
Jun 21 2017 12:45
sorry i cant seem to copy the markup into it liek i have seen others do
heres a link to my codepen
Eric Weiss
@eweiss17
Jun 21 2017 12:52
```
u do it like this
```
JamesVitaly
@JamesVitaly
Jun 21 2017 12:52
ok thanks!
Eric Weiss
@eweiss17
Jun 21 2017 12:53
what is with your text in the html
JamesVitaly
@JamesVitaly
Jun 21 2017 12:53
oops , i was just storing it their momentarily and forgot to delete\
Eric Weiss
@eweiss17
Jun 21 2017 12:53
you said one works? i don't see any working
sorry i kept trying different things deleting bits and rearrangging
so esl works but freecodecamp doesnt output anything
not anything at all and i cant seem to figure out why
Eric Weiss
@eweiss17
Jun 21 2017 12:55
well
one is online
the other is offline
clearly your online works, but offline doesn't
your code is hard to read
  if ( streamNull == null) { $("#freecodecamp").html( "freecodecamp is offline" ) }
    else{  $("#freecodecamp").html("fcc different status")
if ( streamNull == null) { 
     $("#freecodecamp").html( "freecodecamp is offline" ) 
}
else {
     $("#freecodecamp").html("fcc different status") 
}
is easier to read, right?
JamesVitaly
@JamesVitaly
Jun 21 2017 12:58
yeh much
Eric Weiss
@eweiss17
Jun 21 2017 13:00
it's not grabbing anything
console.log(streamNull);
console.log(statusOfStream);
console.log(currentGame);
JamesVitaly
@JamesVitaly
Jun 21 2017 13:00
yeh i tried this and nothing came and i dont know why the stream link takes me to a json form thing
Eric Weiss
@eweiss17
Jun 21 2017 13:01
well that's the data you want
JamesVitaly
@JamesVitaly
Jun 21 2017 13:02
and when its online it gives a full list and when offline it only has stream:null
is there a way of searchign for data and if that object/property doesnt exist then executing code
Mikhail Kirillov
@w96k
Jun 21 2017 13:03
Hey guys, can you check whats wrong?
11. Each element with the class of "nav-link" should contain text that corresponds to the <header> text within each <section> (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world"). ‣ AssertionError: Check that these headers have corresponding .nav-link elements and be mindful of case! : Lorem ipsum ,Pellentesque ,Sed magna ,In purus ,Nullam viverra : expected 5 to equal 0
https://codepen.io/w96k/pen/YQVgXW
JamesVitaly
@JamesVitaly
Jun 21 2017 13:03
i thought null or undefined would do that but tried
Eric Weiss
@eweiss17
Jun 21 2017 13:03
can i ask why you are using 'let'
Mikhail Kirillov
@w96k
Jun 21 2017 13:04
Everything should be fine, but test #11 doesn’t pass
JamesVitaly
@JamesVitaly
Jun 21 2017 13:05
i read some stuff about scope and thought i would try it, because oiriginally i did use var
and it didnt work so i tried let
no change
i was trial and errorring
Eric Weiss
@eweiss17
Jun 21 2017 13:06
In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function:
Benjamin
@DarkInterval
Jun 21 2017 13:06
w @Dar0n Ok. I'll check that. Thanks!
CamperBot
@camperbot
Jun 21 2017 13:06
darkinterval sends brownie points to @dar0n :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @dar0n |http://www.freecodecamp.com/dar0n
JamesVitaly
@JamesVitaly
Jun 21 2017 13:07
oh so var would be more useful in my case ? or not much different but better practice to use var?
Eric Weiss
@eweiss17
Jun 21 2017 13:08
the example they gave was
let x = 1;
if (blank == blank) {
x is out of scope in here
}
JamesVitaly
@JamesVitaly
Jun 21 2017 13:09
right i see
Eric Weiss
@eweiss17
Jun 21 2017 13:09
but you could still use x if it was declared as a var
I'd just ditch it and start over
you have to use an array anyway
You can do some SUCCESS, FAILURE, ajax functions
JamesVitaly
@JamesVitaly
Jun 21 2017 13:09
ah i see ill have a read
and probably start over as you sad
said*
Eric Weiss
@eweiss17
Jun 21 2017 13:12
I used a success: function
and an error: function
to grab the ones that returned data, and the ones that 404'd essentially (user deleted)
I made 2 ajax calls in mine
JamesVitaly
@JamesVitaly
Jun 21 2017 13:17
ok cool thanks for th advice
thanks eric weiss
how do you give bronwie points lol
Be1ar
@Be1ar
Jun 21 2017 13:25
Can someone help me with collapsible button? https://codepen.io/Beiar/full/BZRmmx/
The dropdown provided by the button is hardly noticeable and covered with my "row" block? How to make it distinct?
vinitadashoralk
@vinitadashoralk
Jun 21 2017 13:32
can someone help me to correct this code ...i am stuck
<form action="/submit-cat-photo">
<lable><input type="radio" name="indoor-outdoor">
Indoor</lable>
<lable><input type="radio" name="indoor-outdoor">
Outdoor</lable>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
TWoerner94
@TWoerner94
Jun 21 2017 13:36
Hey guys, I basically finished the calculator challenge. The calculator works perfectly and does everything it's supposed to do, there are just some small cosmetic details which I would like to fix. Is this here the right group?
Brandon
@bd1887
Jun 21 2017 13:38
@TWoerner94 Yep :-)
TWoerner94
@TWoerner94
Jun 21 2017 13:39
Great :D
My two main problems are that the numbers arent dead center inside the buttons and i dont know how to fix it
And right now its possible when you type in a really long number for that number to extend beyond the "screen" of the calculator, also no idea what to do about that
And I'm also open for any other suggestions or advice :D
ResoGuy
@Resoguy
Jun 21 2017 13:43
@TWoerner94 it looks very good im doing calculater too! but im very bad at css :P
TWoerner94
@TWoerner94
Jun 21 2017 13:44
Haha yeah CSS is a real pain, I've used flexbox a lot in this assignment, thoroughly recommend it :D
It makes everything so much easier
Mikhail Kirillov
@w96k
Jun 21 2017 13:45

1. On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.

https://codepen.io/w96k/pen/YQVgXW

Once again. Can someone help me to pass this test. Everything seems fine. :(
ResoGuy
@Resoguy
Jun 21 2017 13:46
@TWoerner94 yea i was doing with tables and boris told me to use flex too and i used it now its really way more easy and way more stable
@TWoerner94 about your javascript code i think it would be better if you put one click event listener on your machine and do your issues over it. So it helps performance very much and you wont DRY.
TWoerner94
@TWoerner94
Jun 21 2017 13:47
I thought about that but couldnt figure out how to do it
TWoerner94
@TWoerner94
Jun 21 2017 13:48
I kind of realized as I wrote it that it's an unelegant way of doing things
ResoGuy
@Resoguy
Jun 21 2017 13:49
i dont know elegancy actually but i tried to use it few times and its way more easy to use when u get used to
@TWoerner94 http://eloquentjavascript.net/14_event.html check this one too if you'd like.
Brandon
@bd1887
Jun 21 2017 13:50

@Be1ar Hi it looks like this is what's preventing your navbar from moving the other elements down when it unfurls.

/* nav{
  height:80px;
  opacity:0.7;
} */

I'm not exactly sure why it is doing that, but if you comment it out, it functions as Bootstrap intended. Sorry I don't have a better explanation.

ResoGuy
@Resoguy
Jun 21 2017 13:51
btw is it ok to share these kind of links on here? or am i doing something wrong?
TWoerner94
@TWoerner94
Jun 21 2017 13:53
Going to read through both these thanks @Resoguy
CamperBot
@camperbot
Jun 21 2017 13:53
twoerner94 sends brownie points to @resoguy :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @resoguy |http://www.freecodecamp.com/resoguy
Be1ar
@Be1ar
Jun 21 2017 13:57
@bd1887 Thank you
CamperBot
@camperbot
Jun 21 2017 13:57
be1ar sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @bd1887 |http://www.freecodecamp.com/bd1887
Brandon
@bd1887
Jun 21 2017 13:58

@TWoerner94 To number centering, style your buttons like so:

button {
  height: 50px;
  width: 50px;
  margin: 2%;
  background-color: #1e2b3f;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: center;
  border: 1px black solid;
  border-radius: 10%;
}

The key things here being to get rid of the padding and just set the height and width and to add the property vertical-align: center;

@Be1ar No problem!
Be1ar
@Be1ar
Jun 21 2017 13:59
@Be1ar I changed height:80px to min-height:80px. Now it is working.
TWoerner94
@TWoerner94
Jun 21 2017 13:59
Thank you @bd1887 , that fixed it :D
CamperBot
@camperbot
Jun 21 2017 13:59
twoerner94 sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @bd1887 |http://www.freecodecamp.com/bd1887
CXmanager
@CXmanager
Jun 21 2017 13:59
how to get codepen link for pasting in the tribute page challenge
can't see any url
Brandon
@bd1887
Jun 21 2017 14:01
@TWoerner94 The way to solve the numbers going off the screen I think should probably be done in the JS. I think on your functions you should be looking at the screen's .length value and when it exceeds a certain amount, display ERROR instead, as a real calculator might.
Be1ar
@Be1ar
Jun 21 2017 14:01
@CXmanager maybe your browser is full width now?
Long Nguyen
@longnt80
Jun 21 2017 14:01
please review my TicTacToe game
https://codepen.io/longnt80/full/BZWBxm/
Brandon
@bd1887
Jun 21 2017 14:02
@TWoerner94 Also, glad it works :-)
CXmanager
@CXmanager
Jun 21 2017 14:02
tsss85
@tsss85
Jun 21 2017 14:03
hi,
The Json doen't work on my local weather chalenge, somebody can help me please ?
https://codepen.io/tsss85/pen/EXmOoj
Andrew Hickman
@ahickman3
Jun 21 2017 14:05
So, my buttons keep copying the .css properties of my js files, although they should because they dont share the .bg class, any clue as to why this is happening? https://codepen.io/mcoker/pen/VWbrLj
the code in particular
$('.bg').fadeOut(500, function() {
        if(isReverse==1){
            $(this).css('background-image', imgCss).fadeIn(700);
        }
        else{
            $(this).css('background-image', imgCss).fadeIn(700);
        }                        
    });
shouldnt*
ResoGuy
@Resoguy
Jun 21 2017 14:10
@tsss85 You did not added jquery
Andrew Hickman
@ahickman3
Jun 21 2017 14:11
yep, thatl do it, kinda need jquery lol
ResoGuy
@Resoguy
Jun 21 2017 14:11
@Resoguy Even after adding jquery it won't work cuz the api is not 'https://' link aka. not a secure link i dont know if there is a workaround this but i would use another api
@tsss85 and next time dont tag yourself in chat :D
Andrew Hickman
@ahickman3
Jun 21 2017 14:13
Aint nothing wrong with taggin yourself bro
@fullmetal7777 Damn son, you look handsome
@fullmetal7777 Thanks man, you too
CamperBot
@camperbot
Jun 21 2017 14:13
sorry fullmetal7777, you can't send brownie points to yourself! :sparkles: :sparkles:
ResoGuy
@Resoguy
Jun 21 2017 14:13
hahahaha
Andrew Hickman
@ahickman3
Jun 21 2017 14:13
See, it works out lol
so anyone got any ideas why my buttons copy the .css change properties in my js code even though they dont have class .bg?
changed some stuff so they dont dissapear to make it easier https://codepen.io/fullmetal7777/pen/vZmqve
Brandon
@bd1887
Jun 21 2017 14:16
@tsss85 If you're using Chrome and right click on the page and select "Inspect" and go to the "Console" you can read the error messages. The first error message you get is this:
"Uncaught ReferenceError: $ is not defined
at pen.js:23:9"
This error message happens because since you haven't installed the jquery library. The $ character has no significance and isn't recognized by Javascript
@tsss85 If you go to Settings -> JavaScript -> Quick-add and select "jQuery" then "Save and Close" you'll see that this error goes away. Unfortunately, there is then another error...
tsss85
@tsss85
Jun 21 2017 14:19
@Resoguy @bd1887 Thank's ! but it's not the only problem. But it makes me progress
CamperBot
@camperbot
Jun 21 2017 14:19
tsss85 sends brownie points to @resoguy and @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @resoguy |http://www.freecodecamp.com/resoguy
:cookie: 369 | @bd1887 |http://www.freecodecamp.com/bd1887
Brandon
@bd1887
Jun 21 2017 14:19

@tsss85 If you now try to run the code, you'll see this error in the console:
"VM132 jquery.min.js:4 Mixed Content: The page at 'YOUR CODE PEN' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://samples.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=b1b15e88fa797225412429c1c50c122a1'. This request has been blocked; the content must be served over HTTPS."

This happens because you are connecting to Codepen through a secure HTTPS connection but are then trying to connect to another endpoint with an unsecure HTTP connection. Chrome prevents this for security reasons.

@tsss85 I was able to fix this by just hosting the content on my own server with an HTTP connection, which probably doesn't help you much. Looks like there's some discussion of the problem here which might offer a solution for you. Sorry I don't have a solution for this one. Good luck!

https://forum.freecodecamp.com/t/weather-app-weather-api-callback-not-working/11731/14

tsss85
@tsss85
Jun 21 2017 14:27
@bd1887 thank's you ! My English is not very good, and I really struggle to find information about this
CamperBot
@camperbot
Jun 21 2017 14:27
tsss85 sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:warning: tsss85 already gave bd1887 points
Brandon
@bd1887
Jun 21 2017 14:35

@tsss85 Well, ok. I actually scanned through the posts because I'm awesome and this seems to fix it:

$(document).ready(function() {
    $("#getWeather").on("click", function() {
      var url = "https://cors-anywhere.herokuapp.com/http://samples.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=b1b15e88fa797225412429c1c50c122a1";
      $.getJSON(url, function(json) {
          $('#zone').text(json.name + ' ' + json.weather[0].description);
          console.log(json);
      });
    });
  });

If you look in either your browser's console or the CodePen console (bottom left) you can see the full object that is returned.

@Resoguy Guess I should have tagged you as well. The work-around is above.
Long Nguyen
@longnt80
Jun 21 2017 14:39
please review my game, any criticisms is welcome:
https://codepen.io/longnt80/full/BZWBxm/
Kshitijaa Jaglan
@KshitijaaJaglan
Jun 21 2017 14:40
would someone share their codepens for the 'build a tribute page' challenge?
I am starting with one, and would love to view some samples
vsupek
@vsupek
Jun 21 2017 14:42
@KshitijaaJaglan me too, but i dont feel like im capable of doing it
alican karalar
@alicankaralar
Jun 21 2017 14:46
hello, does anybody have any experience with react + typescript?
Brandon
@bd1887
Jun 21 2017 14:47

@KshitijaaJaglan Hi Kshitijaa. Do you know how to install Bootstrap 4 on Codepen? If so, I recommend starting with one of these templates:
http://v4-alpha.getbootstrap.com/examples/

I also use this site a lot to help me with Bootstrap 4:
https://hackerthemes.com/bootstrap-cheatsheet/

ResoGuy
@Resoguy
Jun 21 2017 14:47
@bd1887 ohso it works with cors proxy huh? i thought cors proxy is working just when the "access-allow-origin-something" is missing error Thanks!
CamperBot
@camperbot
Jun 21 2017 14:47
resoguy sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @bd1887 |http://www.freecodecamp.com/bd1887
ResoGuy
@Resoguy
Jun 21 2017 14:48
@alicankaralar i have angular + typescript experience a little why?
alican karalar
@alicankaralar
Jun 21 2017 14:49
well it is about the componentWillReceiveProps lifecycle method of react and how to do that with typescript
it gives a funny error
ResoGuy
@Resoguy
Jun 21 2017 14:49
@alicankaralar oh can't help about that then sorry
@alicankaralar but i guess you r not laughing?:P
Brandon
@bd1887
Jun 21 2017 14:49
@KshitijaaJaglan In case you don't know how to install Bootstrap in Codepen, go to
Settings -> CSS -> Quick-add ->Bootstrap 4
and also
Settings -> JavaScript -> Quick-add -> Bootstrap 4
alican karalar
@alicankaralar
Jun 21 2017 14:50
no not laughing at all :(
'Class 'Component<any, IAppState>' defines instance member function 'componentWillReceiveProps', but extended class 'Page' defines it as instance member property.’
WHAT THE HELL DOES THIS MEAN NOW
Kshitijaa Jaglan
@KshitijaaJaglan
Jun 21 2017 14:51
thanks @bd1887
CamperBot
@camperbot
Jun 21 2017 14:51
:cookie: 371 | @bd1887 |http://www.freecodecamp.com/bd1887
kshitijaajaglan sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
alican karalar
@alicankaralar
Jun 21 2017 14:51
how do i elevate that into instance member property
Brandon
@bd1887
Jun 21 2017 14:52
@KshitijaaJaglan No problem :-) Good luck!
alican karalar
@alicankaralar
Jun 21 2017 14:53
OHOHOHOHO
WAIT
I SOLVED IT
O MG
you can’t use arrow functions with lifecycle methods
lesson learned
it binds this automatically
which is somehow a problem
god
lucky to find out
just by chance
wooo it works
Nick Sladic
@Nickadiemus
Jun 21 2017 14:54
Can anybody help me with an overlay?
Andrew Hickman
@ahickman3
Jun 21 2017 14:55
ok so, i have a jQuery that makes my bg fade in and out, and when i move my buttons in front of it (which dont share the same class), they fade as well. Any idea how to fix this?
$('.bg').fadeOut(500, function() {
        if(isReverse==1){
            $(this).css('background-image', imgCss).fadeIn(700);
        }
        else{
            $(this).css('background-image', imgCss).fadeIn(700);
        }                        
    });
Be1ar
@Be1ar
Jun 21 2017 14:56
Can someone tell me if it works ok on your devices?
Brandon
@bd1887
Jun 21 2017 14:57
@fullmetal7777 I'd guess the buttons are nested inside the element that you're fading out?
Andrew Hickman
@ahickman3
Jun 21 2017 14:58
@bd1887 nope, which is weird which its doing that
@Be1ar you can check through chrome
Nick Sladic
@Nickadiemus
Jun 21 2017 14:58
@fullmetal7777 do you have the codepen?
or the code
Andrew Hickman
@ahickman3
Jun 21 2017 14:58
@Be1ar or dl a chrome extension that will check for yo
Brandon
@bd1887
Jun 21 2017 15:00

@Be1ar The Bootstrap seems to be working as intended. I'd avoid writing long text with h1 and also try using horizontal rules instead of just dashes, since they can be styled more easily. Here are some examples:

https://codepen.io/ibrahimjabbari/pen/ozinB

Andrew Hickman
@ahickman3
Jun 21 2017 15:01
@Be1ar no homo but the dude that plays ragnar is probly the cutest guy ive ever seen lol
@Nickadiemus @bd1887 also, its the mediaquery min-height that affects the height of my buttons, and thats what triggers the fade if i put them over the background
dorealex
@dorealex
Jun 21 2017 15:06
I'm having a hard time with the wikipedia query string.... I want it to return a snippet, but it doesn't recognize &srprop=snippet....
h1tag
@h1tag
Jun 21 2017 15:07
@Be1ar It's working. I really like the design (elegant and simple). Although I see that the font size should be smaller and when I tried resizing the browser window (to simulate a mobile screen) the section titles go out of their border. Overall good job.
Andrew Hickman
@ahickman3
Jun 21 2017 15:07
@dorealex post code
dorealex
@dorealex
Jun 21 2017 15:08
well, here's the URL I am working with, I just put in star wars as a placeholder string:
states srprop is there
Andrew Hickman
@ahickman3
Jun 21 2017 15:08
oh goodness, that looks pretty gnarly, do this and post as code $('body').html(<pre>${JSON.stringify(jsonData, null, '\t')}</pre>);
Nick Sladic
@Nickadiemus
Jun 21 2017 15:09
@fullmetal7777 where are you adding the fadein/fadeout?
Andrew Hickman
@ahickman3
Jun 21 2017 15:09
assuming you use getJSON to get that code, if not then... Yeahhh lol
dorealex
@dorealex
Jun 21 2017 15:09
I'm gonna format the result
my issue is with the url
Andrew Hickman
@ahickman3
Jun 21 2017 15:10
@Nickadiemus in js showZone function. Its all kinda confusing, all you needa look at is that snippet
$('.bg').fadeOut(500, function() {
        if(isReverse==1){
            $(this).css('background-image', imgCss).fadeIn(700);
        }
        else{
            $(this).css('background-image', imgCss).fadeIn(700);
        }                        
    });
@dorealex $('body').html(<pre>${JSON.stringify(jsonData, null, '\t')}</pre>); will format it for you
so you can see what your working with. I use it a lot
jsonData being the jsonData variable
also hmm, not sure. Im almost done with the random quote machine so kinda familiar with this stuff
Be1ar
@Be1ar
Jun 21 2017 15:11
@bd1887 thanks, using <hr> is better indeed. Now they don't change with resizing
CamperBot
@camperbot
Jun 21 2017 15:11
be1ar sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @bd1887 |http://www.freecodecamp.com/bd1887
dorealex
@dorealex
Jun 21 2017 15:11
ok, but the issue is with the wikipedia api url
Andrew Hickman
@ahickman3
Jun 21 2017 15:11
I dont actually know what a snippet is lol
dorealex
@dorealex
Jun 21 2017 15:11
will post codepen
Andrew Hickman
@ahickman3
Jun 21 2017 15:11
gotcha, so you cant retrieve the json data? Sorry, still not fully understanding lol
h1tag
@h1tag
Jun 21 2017 15:11
@dorealex there's a simpler value you could use for the action parameter in your URL
it's called opensearch, action=opensearch
Be1ar
@Be1ar
Jun 21 2017 15:13
That is the thing I was expecting from dashes to do. It didn't work out, but now it works:)
Andrew Hickman
@ahickman3
Jun 21 2017 15:13
so @Nickadiemus any ideas? im at a loss lol
Brandon
@bd1887
Jun 21 2017 15:15

@fullmetal7777 Is there a reason you're using a div to house your background image? I wonder if you just set the body to house the background image, would the problem still happen?

If so, you could, instead of using jquery, use CSS animation to ease-in the background image which might have the same effect that you're looking for

Andrew Hickman
@ahickman3
Jun 21 2017 15:16
@bd1887 tried the ease, it caused a bunch of problem, cant go down that route again lol not sure though. Lemme try
Be1ar
@Be1ar
Jun 21 2017 15:16
Does anybody know a way to make the fonts change with resizing too? My grid blocks are responsive but the text is not. The size doesn't change, I want it to be adaptive too, so it is more comfortable to read on phone
dorealex
@dorealex
Jun 21 2017 15:16
@Be1ar I think you can use ems for that
Andrew Hickman
@ahickman3
Jun 21 2017 15:16
@bd1887 yep everything dissapeared, that aint gunnna work either.
@Be1ar I use media queries, ems and what not get confusing for me.
@Be1ar ex
@media only screen and (min-width: 0px) and (max-width: 460px) {
    h2{
        font-size: 22px;
    }

    h3{
        font-size: 18px;
    }
Nick Sladic
@Nickadiemus
Jun 21 2017 15:18
@fullmetal7777 yeah
@fullmetal7777 Maybe try positioning your bg to load at the very end
Andrew Hickman
@ahickman3
Jun 21 2017 15:18
in responsiveness, media queries are life
Nick Sladic
@Nickadiemus
Jun 21 2017 15:18
^
see here I just moved your background to the bottom
Andrew Hickman
@ahickman3
Jun 21 2017 15:19
@Nickadiemus ..? Are you saying to change like.. Everything? Im confused, i only see the bg in that codepen
Nick Sladic
@Nickadiemus
Jun 21 2017 15:19
your display gets messed up but the fadein and out of the background works perfectly
@fullmetal7777 you'd have to change your media queries around
Andrew Hickman
@ahickman3
Jun 21 2017 15:20
the fade in and fade out of the background worked as intended, it was that it was fading the buttons that drove me nuts haha
Gulsvi
@gulsvi
Jun 21 2017 15:20
@fullmetal7777 Your div with the background is 100% tall, when it fades out, your buttons move up off the screen and out of view
Andrew Hickman
@ahickman3
Jun 21 2017 15:20
@SkyC0der they were just fading with the bg, the didnt move
Gulsvi
@gulsvi
Jun 21 2017 15:20
Add this to your .bg class in your CSS:
  position: relative;
  z-index: -1;
That will keep it from affecting the location of other elements on the screen
Gulsvi
@gulsvi
Jun 21 2017 15:21
One test - remove height: 100% from your .bg class and watch everything disappear
Andrew Hickman
@ahickman3
Jun 21 2017 15:22
ok @SkyC0der that did it lol once again, canadian dad comes to the rescue. Your the man, thanks :) ive been working on this for hours lol
CamperBot
@camperbot
Jun 21 2017 15:22
fullmetal7777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1795 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 21 2017 15:22
After you remove height:100%,right-click your page, select inspect, and find your button elements - they're way up above the screen
Andrew Hickman
@ahickman3
Jun 21 2017 15:22
@SkyC0der so why then was it making the buttons fade in and out with the bg when they were moved in front of it? this was the js doing the fading
$('.bg').fadeOut(500, function() {
        if(isReverse==1){
            $(this).css('background-image', imgCss).fadeIn(700);
        }
        else{
            $(this).css('background-image', imgCss).fadeIn(700);
        }                        
    });
Eric Weiss
@eweiss17
Jun 21 2017 15:22
was the problem parent elements affecting children?
Gulsvi
@gulsvi
Jun 21 2017 15:23
I had trouble with your code, shouldn't it be reverseEh? This american coding style confuses me
Andrew Hickman
@ahickman3
Jun 21 2017 15:23
the bg wasnt a parent element to begin with
@SkyC0der reverseEh?
Gulsvi
@gulsvi
Jun 21 2017 15:23
isReverse, reverseEh?
Eh?
Andrew Hickman
@ahickman3
Jun 21 2017 15:24
ahaha just got it
Nick Sladic
@Nickadiemus
Jun 21 2017 15:24
@eweiss17 It shouldn't have because it didn't have anything nested inside of it
Andrew Hickman
@ahickman3
Jun 21 2017 15:24
lmao
im always the last one in the group to get jokes lmao
Eric Weiss
@eweiss17
Jun 21 2017 15:25
i saw that on reddit like 3 weeks ago
Andrew Hickman
@ahickman3
Jun 21 2017 15:25
canadian dad being canadian dad
@Nickadiemus right? it was so weird, i have no idea why it was acting like that
Gulsvi
@gulsvi
Jun 21 2017 15:25
Hi always the last one in the group to get jokes lmao, I'm dad
Andrew Hickman
@ahickman3
Jun 21 2017 15:25
I refuse to even giggle for that last one
drawing the line there, im cutting you off
Gulsvi
@gulsvi
Jun 21 2017 15:26
haha
Nick Sladic
@Nickadiemus
Jun 21 2017 15:26
@SkyC0der that's my go to joke lmao
Gulsvi
@gulsvi
Jun 21 2017 15:27
Always gets a giggle haha, unless it's @fullmetal7777
Andrew Hickman
@ahickman3
Jun 21 2017 15:28
I may have just finished my random quote machine. Omg yes
Literally spent half a day with those stupid buttons.
Eric Weiss
@eweiss17
Jun 21 2017 15:28
9 days?
Nick Sladic
@Nickadiemus
Jun 21 2017 15:29
@fullmetal7777 Nice man
Eric Weiss
@eweiss17
Jun 21 2017 15:31
7 days in internet time is like a year
make any of those volume controls or password validation memes? @SkyC0der
Andrew Hickman
@ahickman3
Jun 21 2017 15:32
is that actually a joke or for real lol
Eric Weiss
@eweiss17
Jun 21 2017 15:33
it's actually a real joke
Gulsvi
@gulsvi
Jun 21 2017 15:33
lol
@eweiss17 Funny you should mention it https://codepen.io/skycoder/pen/BZogap
Got my slider ready, and got my bouncy ball ready https://codepen.io/skycoder/pen/BZLbvo
now I just need to shoot the ball out of the sound icon
Eric Weiss
@eweiss17
Jun 21 2017 15:35
looks good
gave me that old DVD screensaver of waiting for the ball to hit the corners
Andrew Hickman
@ahickman3
Jun 21 2017 15:37
so yep, random quote machines pretty much done, everyone tell me how pretty i am http://andrewsawesomesite.com/
Eric Weiss
@eweiss17
Jun 21 2017 15:38
tweet it button didn't do anything
Andrew Hickman
@ahickman3
Jun 21 2017 15:38
Omg the stupid twitter button, forgot about making that thing functional. Fml i dont even care about social media lol
Eric Weiss
@eweiss17
Jun 21 2017 15:38
i can just give u the code to insert
Andrew Hickman
@ahickman3
Jun 21 2017 15:38
... Do i have to make an account to get that thing working?
Eric Weiss
@eweiss17
Jun 21 2017 15:38
no
Andrew Hickman
@ahickman3
Jun 21 2017 15:38
Please... for the love of god lol
I dont even care about it
My weather api is not working anymore
can anyone help to fix it??? :worried:
Alex Schiffer
@alexjschiffer
Jun 21 2017 15:41
I can't get the OpenWeatherMap API to work. Can anyone help me, please?
// Create an empty object to hold weather information
var Weather = { cache: {} };

// Get the users current location
$.getJSON("http://ip-api.com/json/", function(data) {
  var c = Weather.cache;
  c.lat = data.lat;
  c.lon = data.lon;
  $("#GeoResults").append(c.lat + ", " + c.lon);
  $.getJSON(
    "http://api.openweathermap.org/data/2.5/weather?lat=" +
      c.lat +
      "&lon=" +
      c.lon +
      "&units=imperial&appid=3acc16ffae9e45df92a064e41646355f",
    function(data) {
      c.location = data.name;
      c.country = data.sys.country;
      c.fahrenheit = Math.round(data.main.temp);
      c.celcius = Math.round((c.fahrenheit - 32) * 5 / 9);
      c.icon = data.weather[0].id;
      c.coverage = data.weather[0].main;
      c.sunrise = data.sys.sunrise;
      c.sunset = data.sys.sunset;
    });
});
$("#GeoResults").append(Weather.cache.location);
Ahmed Ramy
@Shadilix
Jun 21 2017 15:46
hey can someone remind me how did we use to add font-icons to our code ?
Ravi Kishore Thella
@ravikishorethella
Jun 21 2017 15:47
@Shadilix are you talking about the font-awesome icons?
@Shadilix if you want to add the link to your codepen then, you need to add the font-awesome cdn into your css.
Brandon
@bd1887
Jun 21 2017 15:51
@Soumyoahona200 @alexjschiffer Paste this in front of the API's URL:
https://cors-anywhere.herokuapp.com/FULL-API-URL-GOES-HERE
The problem is a mixed content error. Since Codepen switched to HTTPS secure connections, browsers may prevent scripts from connecting to unsecure HTTP connections as it can be a security risk.
Alex Schiffer
@alexjschiffer
Jun 21 2017 15:57
@bd1887 Thank you so much! Fixed my problem. I was beating my head against a wall for so long with this one.
CamperBot
@camperbot
Jun 21 2017 15:57
alexjschiffer sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @bd1887 |http://www.freecodecamp.com/bd1887
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 15:57

@bd1887 ~
$(document).ready(function(){

var city;
app_id="7f2b21feef63e4b13774f5f41c60b690";
$.getJSON('https://ipinfo.io', function(data){
console.log(data.loc);
$('#city').text(data.city);
city=data.city;

$.getJSON('http://api.apixu.com/v1/current.json?key=9d0cd1578db54006b43170237170904&q='+city, function(r){
console.log("mail us for more gtechxd@gmail.com");
$('#ic').html('<img id="ic" src="http:'+r.current.condition.icon+'"/>');
$('#fc').text(r.current.condition.text);
$('#state').html('( '+r.location.region+', '+data.country+' )');
$('#temp').html(r.current.temp_c);
var toggle=0;
$('#f').on('click',function(event){
event.preventDefault();
if(toggle==1){
$('#temp').html(r.current.temp_c);
$('#f').text('°C');
toggle=0;
}
else {
$('#temp').html(r.current.temp_f);
$('#f').text('°F');
toggle=1;}
});
})
})

})
~

where should I add it???

~

~
$(document).ready(function(){

var city;
app_id="7f2b21feef63e4b13774f5f41c60b690";
$.getJSON('https://ipinfo.io', function(data){
console.log(data.loc);
$('#city').text(data.city);
city=data.city;

$.getJSON('http://api.apixu.com/v1/current.json?key=9d0cd1578db54006b43170237170904&q='+city, function(r){
console.log("mail us for more gtechxd@gmail.com");
$('#ic').html('<img id="ic" src="http:'+r.current.condition.icon+'"/>');
$('#fc').text(r.current.condition.text);
$('#state').html('( '+r.location.region+', '+data.country+' )');
$('#temp').html(r.current.temp_c);
var toggle=0;
$('#f').on('click',function(event){
event.preventDefault();
if(toggle==1){
$('#temp').html(r.current.temp_c);
$('#f').text('°C');
toggle=0;
}
else {
$('#temp').html(r.current.temp_f);
$('#f').text('°F');
toggle=1;}
});
})
})

})
~

Brandon
@bd1887
Jun 21 2017 16:00
@Soumyoahona200
$.getJSON('https://cors-anywhere.herokuapp.com/http://api.apixu.com/v1/current.json?key=9d0cd1578db54006b43170237170904&q='+city,  ...
@alexjschiffer No problem!
dorealex
@dorealex
Jun 21 2017 16:02
made some decent progress on the wikipedia challenge...
Ahmed Ramy
@Shadilix
Jun 21 2017 16:02
@ravikishorethella yes , font awesome icons
but i dont remember how to do that really :D
Brandon
@bd1887
Jun 21 2017 16:05

@alexjschiffer I hope you don't mind if I make one more quick suggestion. If you style your body like this...

body{ 
  background-image: url(http://soumyoworkshop.xtgem.com/dd01d0d0ac4355fa69309153c8cf49c1.jpg);
 animation-name: back;
  animation-duration:50s;
 animation-delay:2s;
  animation-iteration-count: infinite;
  background: no-repeat center center fixed;
  background-size: cover;
  color: white;
  }

... then you can avoid having to repeat the image at the bottom. It cuts off some of the image to preserve the aspect ratio, but I think looks better than having it repeat imho.

dorealex
@dorealex
Jun 21 2017 16:06
@Shadilix <i class="fa fa-icon-name></i>
make sure to import it first though
by importing this in the settings in codepen
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:08

@bd1887 I made the changes but it didn't worked :worried:
~
$(document).ready(function(){

var city;
app_id="7f2b21feef63e4b13774f5f41c60b690";
$.getJSON('https://cors-anywhere.herokuapp.com/https://ipinfo.io', function(data){
console.log(data.loc);
$('#city').text(data.city);
city=data.city;

$.getJSON('https://cors-anywhere.herokuapp.com/http://api.apixu.com/v1/current.json?key=9d0cd1578db54006b43170237170904&q='+city, function(r){
console.log("mail us for more gtechxd@gmail.com");
$('#ic').html('<img id="ic" src="http:'+r.current.condition.icon+'"/>');
$('#fc').text(r.current.condition.text);
$('#state').html('( '+r.location.region+', '+data.country+' )');
$('#temp').html(r.current.temp_c);
var toggle=0;
$('#f').on('click',function(event){
event.preventDefault();
if(toggle==1){
$('#temp').html(r.current.temp_c);
$('#f').text('°C');
toggle=0;
}
else {
$('#temp').html(r.current.temp_f);
$('#f').text('°F');
toggle=1;}
});
})
})

})
~~

dorealex
@dorealex
Jun 21 2017 16:08
@Soumyoahona200 you can get geolcation data straight from the browser
https://www.w3schools.com/html/html5_geolocation.asp
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:12
@dorealex my geolocation api is working but the weather api is not working because this codepen switched to https...I need help :worried:
shivam gupta
@shivamg11000
Jun 21 2017 16:12
@Soumyoahona200 use callback
dorealex
@dorealex
Jun 21 2017 16:12
I'm assuming apixu is your weather api?
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:14
@dorealex yes
@shivamg11000 how to do that?
shivam gupta
@shivamg11000
Jun 21 2017 16:15
Use this at the end of the url
?callback=?
@Soumyoahona200
dorealex
@dorealex
Jun 21 2017 16:16
in codepen, change view to debug mode and see if your browser gives you an error
if its an allow origin thing you can swap out your cors-anywhere proxy with a different one like https://crossorigin.me/
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:18
it is giving lots of error in debug mode
dorealex
@dorealex
Jun 21 2017 16:19
it seems to work... just a bit weird, lots of patchiness
I would slow down the images
try adding an https to your image src
instead of http
shivam gupta
@shivamg11000
Jun 21 2017 16:20
@Soumyoahona200 it fetching data atleast
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:20
but it's not showing the weather?
dorealex
@dorealex
Jun 21 2017 16:20
it does for me
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:20
how?
dorealex
@dorealex
Jun 21 2017 16:20
shows my city, the temp, and weather
keeps changing picture
shivam gupta
@shivamg11000
Jun 21 2017 16:21
its showin 29 C
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:21
did you made any changes?
dorealex
@dorealex
Jun 21 2017 16:21
maybe your browser blocked the location and it doesn't work only for you because your browser didn't send any data?
but, from my end it works....
shivam gupta
@shivamg11000
Jun 21 2017 16:22
@Soumyoahona200 refresh the page
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:22
check the link
shivam gupta
@shivamg11000
Jun 21 2017 16:22
@shivamg11000 dary ganj
29 C
dorealex
@dorealex
Jun 21 2017 16:22
seems to work
shivam gupta
@shivamg11000
Jun 21 2017 16:22
it shows
dorealex
@dorealex
Jun 21 2017 16:22
15.9 C, patchy rain
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:22
I am using chrome
shivam gupta
@shivamg11000
Jun 21 2017 16:23
@Soumyoahona200 refresh the page
dorealex
@dorealex
Jun 21 2017 16:23
did a chrome popup ask you to share location? if you clicked no, it won't work.
try adding error catching in case no geo location data is presnet
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:24
no it didnt asked
dorealex
@dorealex
Jun 21 2017 16:24
click on the i in the circle in your address bar and look at location
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:26
YEs,it has been allowed
still it's neither showing my location nor my temperature :worried:
shivam gupta
@shivamg11000
Jun 21 2017 16:27
send the screenshot of your broser
browser*
Soumyojyoti Majumdar
@SoumyoNawab8
Jun 21 2017 16:34
can i upload an img file over here?
shivam gupta
@shivamg11000
Jun 21 2017 16:35
yes
control + V
Andrew Hickman
@ahickman3
Jun 21 2017 16:39
thanks for the
Woollymammoth
@Wollymammoth
Jun 21 2017 16:41
hey guys, how can I center an image in codepen? i can't seem to have any luck with it. thank you!
Johnny
@jtan3
Jun 21 2017 16:44
@Wollymammoth can you show your codepen?
Woollymammoth
@Wollymammoth
Jun 21 2017 16:46
@jtan3 do i send you the url of my page or copy paste the code?
Johnny
@jtan3
Jun 21 2017 16:46
@Wollymammoth the url is fine
Woollymammoth
@Wollymammoth
Jun 21 2017 16:46
dorealex
@dorealex
Jun 21 2017 16:46
@jtan3 one way to to it is to wrap it in a div with a class of text-center
Woollymammoth
@Wollymammoth
Jun 21 2017 16:47
@dorealex i tried that and failed somehow, i ll try again
worked!!!
@dorealex thanks! @jtan3 thanks!
CamperBot
@camperbot
Jun 21 2017 16:48
wollymammoth sends brownie points to @dorealex and @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @dorealex |http://www.freecodecamp.com/dorealex
:cookie: 420 | @jtan3 |http://www.freecodecamp.com/jtan3
Nathan
@clarken1996
Jun 21 2017 16:52
Hey can someone tell me why this is not working? trying to share a quote on tumblr with the random quote machine
$(".post-quote").on("click", function(event){
event.preventDefault();
window.open('https://www.tumblr.com/widgets/share/tool?canonicalUrl=&caption=' + $('#quoteText').text() + $('#authorName').text());
brings me to an error page
dorealex
@dorealex
Jun 21 2017 16:55
do you know if it is getting the text values properly?
BeauBo
@BeauBo
Jun 21 2017 17:04
hi everyone. I'm new to freecodecamp. I'm doing the portfolio project and trying to add image from my laptop.But it doesn't work. Can anybody help me? Thanks
Gulsvi
@gulsvi
Jun 21 2017 17:06
@clarken1996 You're going to have to get the right documentation on how to share text. This works:
https://www.tumblr.com/widgets/share/tool/preview?canonicalUrl=https%3A%2F%2Fcodepen.io
But doesn't add the caption text....something in their Share API may have changed.
@BeauBo Upload the image from your laptop to a service like https://postimage.io and they will give you a link you can use.
Ravi Kishore Thella
@ravikishorethella
Jun 21 2017 17:07
@Shadilix did you fix that?
Andrew Hickman
@ahickman3
Jun 21 2017 17:09
My backgrounds get hella blurry the shorter the width of the page, anyways to fix this?
@BeauBo also, the link will look something like this
background-image: url("http://i.imgur.com/sxwO4y3.jpg");
BeauBo
@BeauBo
Jun 21 2017 17:11
@SkyC0der Thank you so much problem solved
CamperBot
@camperbot
Jun 21 2017 17:11
beaubo sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1796 | @skyc0der |http://www.freecodecamp.com/skyc0der
YozhikM
@YozhikM
Jun 21 2017 17:31
Can yu check my first site in desktop and mobile versions? Pages: Main => Rofas Roof => Roof Ruukki http://new.rofas.kz
Nick Sladic
@Nickadiemus
Jun 21 2017 17:40
@SkyC0der could you help me with a question
dorealex
@dorealex
Jun 21 2017 17:40
Hi all, I have a question for the twitch.tv challenge. Here's my codepen. How would I vertical-align the names (h1) with the images? Also, anyone have luck with the api to get more than 1 user at a time? Performance-wise this ain't too good.
also, the current stream status is a tough one, do I have to get the user ID first, then resubmit a request using that ID but as a stream id of sorts?
Madhava Di Florio
@mierz00
Jun 21 2017 17:51
@dorealex You could put the name and the image in it's own div. You can also use flexbox to stack them on top of each other.
dorealex
@dorealex
Jun 21 2017 17:53
I want the name to the right, but at the same level vertically...
BeauBo
@BeauBo
Jun 21 2017 17:54
Hi folks. I'm trying to add a image placeholder on my web page and I think it's different than text placeholders. Anyone has idea about that? Thanks
Madhava Di Florio
@mierz00
Jun 21 2017 17:57
@dorealex You can then use two divs. Wrapped in a flexbox container and use space-between
@dorealex Are you familiar with flexbox?
dorealex
@dorealex
Jun 21 2017 17:58
@mierz00 unfortunately, no...
Madhava Di Florio
@mierz00
Jun 21 2017 17:59
@dorealex In regards to checking stream status, data.stream === null tells you if it is offline.
dorealex
@dorealex
Jun 21 2017 17:59
from the user?
Roxroy
@roxroy
Jun 21 2017 18:00
@BeauBo , usually I will create images tags in my design using placeholder images from here, https://placeholder.com. Note that you can use the site to create image with the exact height and width that you will use in the final site. Later you only need to swap the sample pics for real ones.
dorealex
@dorealex
Jun 21 2017 18:01
@mierz00 I do my first api to get the user info, I don't see it returning any stream info...
Madhava Di Florio
@mierz00
Jun 21 2017 18:02
@dorealex One sec, just testing on my pen
dorealex
@dorealex
Jun 21 2017 18:03
@mierz00 for example: https://wind-bow.glitch.me/twitch-api/users/ESL_SC2 would be the equivalent of the first API
just1witness
@just1witness
Jun 21 2017 18:03

<style>
$(document).ready(function(){
$("#target1").css("color" , "blue"); });
</style>
<!-- jquery style section above -->

<div><div class="well bg-warning thin-green-border">'<h1 class="font-size text-center purple-text"> My accomplishiments</h1></div>
<div>
<button class= "btn btn-default target" id="target1"> About </button>
<button class="btn btn-default target" id="target2"> Gallary </button>
<button class="btn btn-default target" id="target3"> Contact </button>
</div></div>

for the life of me I can't get my jquery style to work
Madhava Di Florio
@mierz00
Jun 21 2017 18:04
@dorealex Okay, I am not sure why. But I used a slightly different api call than you did. I haven't checked the differences but this is my api call url.
That allowed for me to check data.stream. If it is null the user is offline.
dorealex
@dorealex
Jun 21 2017 18:04
@mierz00 thanks will give it a shot
CamperBot
@camperbot
Jun 21 2017 18:04
dorealex sends brownie points to @mierz00 :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @mierz00 |http://www.freecodecamp.com/mierz00
Madhava Di Florio
@mierz00
Jun 21 2017 18:05
@dorealex If you have the time, check out https://flexbox.io/ to learn flexbox. It will make your life much easier with positioning elements.
dorealex
@dorealex
Jun 21 2017 18:06
alright, it seems easy enough
BeauBo
@BeauBo
Jun 21 2017 18:08
@roxroy thank you so much problem solved
CamperBot
@camperbot
Jun 21 2017 18:08
beaubo sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:star2: 1014 | @roxroy |http://www.freecodecamp.com/roxroy
Madhava Di Florio
@mierz00
Jun 21 2017 18:11
@just1witness Because your jQuery is wrapped in a <style> tag instead of <script>
just1witness
@just1witness
Jun 21 2017 18:11

Can someone take a look at my code and help me understand what I'm doing wrong? I can't get Jquery to do anything at all.

<style>
$(document).ready(function(){
$("#target1").css("color" , "blue"); });
</style>
<!-- jquery style section above -->

<div><div class="well bg-warning thin-green-border">'<h1 class="font-size text-center purple-text"> My accomplishiments</h1></div>
<div>
<button class= "btn btn-default target" id="target1"> About </button>
<button class="btn btn-default target" id="target2"> Gallary </button>
<button class="btn btn-default target" id="target3"> Contact </button>
</div></div>

OH! Thank you!!!!!
How do I send brownie points... total noob :P
Madhava Di Florio
@mierz00
Jun 21 2017 18:12
Haha, no problem.
@just1witness add the @ symbol then my username
and a thank you comment
just1witness
@just1witness
Jun 21 2017 18:13
ok, thank you :) so I changed it, but it still didn't do anything
@mierz00 tahnk you
oops
lol
@mierz00 Thank you
CamperBot
@camperbot
Jun 21 2017 18:13
just1witness sends brownie points to @mierz00 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @mierz00 |http://www.freecodecamp.com/mierz00
Madhava Di Florio
@mierz00
Jun 21 2017 18:13
@just1witness One sec, I will test it.
just1witness
@just1witness
Jun 21 2017 18:14
It still isn't working though ca you see anything else?
ok, thank you
Gulsvi
@gulsvi
Jun 21 2017 18:14
@Nickadiemus Sure, what's up?
(Not sure if you got an answer already)
just1witness
@just1witness
Jun 21 2017 18:15
@mierz00 is checking my code right now. :)
Madhava Di Florio
@mierz00
Jun 21 2017 18:15
@just1witness Where are you testing it? Are you doing it on freecodecamp?
@just1witness Is it a challenge?
just1witness
@just1witness
Jun 21 2017 18:15
codepen, I', working on the portfolio page challange
I'm*
@mierz00
Gulsvi
@gulsvi
Jun 21 2017 18:16
@dorealex Performance is taking a hit because you're passing all your api calls through a proxy
just1witness
@just1witness
Jun 21 2017 18:16
huh, whaaa?
@mierz00
Madhava Di Florio
@mierz00
Jun 21 2017 18:16
@just1witness Have you added jQuery to your pen? (In the settings)
just1witness
@just1witness
Jun 21 2017 18:16
lol, what does that mean? @mierz00
Madhava Di Florio
@mierz00
Jun 21 2017 18:17
@just1witness link me your codepen
dorealex
@dorealex
Jun 21 2017 18:17
@mierz00 I have to? codepen doesn't like cross origin stuff
David Miolard
@GwadaKing
Jun 21 2017 18:18
Hi all ! I've got a click event handling problem in my Simon Says app : it enters duplicate datas in my arrays. I think it's a kind of bubbling caused by jquery. I tried event.stopPropagation, event.preventDefault and even return false at the end of the listener functions but I don't get through. I am lost in the callback hell ! Should I remove jquery events and try with the DOM API selectors ?
https://codepen.io/GwadaKing/pen/RgKJeg?editors=1111
Gulsvi
@gulsvi
Jun 21 2017 18:18
@dorealex You do not need a cross origin proxy for any of the APIs recommended by Free Code Camp.
just1witness
@just1witness
Jun 21 2017 18:18
How do I correctly link you?
@mierz00
dorealex
@dorealex
Jun 21 2017 18:18
@SkyC0der I had a really hard time on all my other API projects....
Madhava Di Florio
@mierz00
Jun 21 2017 18:19
@just1witness save your pen. Then copy and paste the url here
@just1witness the browser url
Gulsvi
@gulsvi
Jun 21 2017 18:19
You did 3 projects yesterday, it's supposed to take like 100 hours :p
just1witness
@just1witness
Jun 21 2017 18:19
ok
Madhava Di Florio
@mierz00
Jun 21 2017 18:20
@just1witness remove the jquery from the html and paste it into the JS section. It works.
dorealex
@dorealex
Jun 21 2017 18:20
@sky me? haha?
Gulsvi
@gulsvi
Jun 21 2017 18:21
@dorealex Yes, you may be moving too quickly. Need to understand what CORS is.
A Proxy is a workaround for that, but as you see, you have no control over it and it can go down/slow down without notice. There are other solutions.
just1witness
@just1witness
Jun 21 2017 18:21
@mierz00 your the best
@mierz00 Thank you
CamperBot
@camperbot
Jun 21 2017 18:21
just1witness sends brownie points to @mierz00 :sparkles: :thumbsup: :sparkles:
:warning: just1witness already gave mierz00 points
Gulsvi
@gulsvi
Jun 21 2017 18:22
@dorealex For example, with wikipedia: https://stackoverflow.com/questions/23952045/wikipedia-api-cross-origin-requests
(All you have to do is add origin=* to your URL, like they show here: https://stackoverflow.com/a/38921370 )
Madhava Di Florio
@mierz00
Jun 21 2017 18:22
@just1witness No drams
dramas
Nick Sladic
@Nickadiemus
Jun 21 2017 18:22
@SkyC0der I haven't lol. Any suggestions on how to toggle an overlay display?
just1witness
@just1witness
Jun 21 2017 18:22
:)
Gulsvi
@gulsvi
Jun 21 2017 18:23
@Nickadiemus you could add a class/remove a class on click?
or show/hide
Nick Sladic
@Nickadiemus
Jun 21 2017 18:23
@SkyC0der that's what i'm doing, I just can't seem to get it to work more than once
dorealex
@dorealex
Jun 21 2017 18:24
@SkyC0der Thanks, I will go back and modify my stuff
CamperBot
@camperbot
Jun 21 2017 18:24
dorealex sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1797 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nick Sladic
@Nickadiemus
Jun 21 2017 18:24
$("#homeSection button").on("click", function(e){
      console.log(e);
      e.preventDefault();
      var buttonName = "#" + $(this).attr('id');
      if(buttonName === "#contactListenerB"){

        $("#contactOverlay").toggleClass("fade-in one on")
      }
      else{
        console.log("Hire");
      }
    });

    $("#exitB").on("click", function(){
      console.log("button clicked");
      $("#contactOverlay").removeClass("fade-in one on")
      $("#contactOverlay").toggleClass("fade-out o")
      setTimeout(function(){
        $("#contactOverlay").toggleClass("off");
      },2000);
    });
CallMeOrange
@EgnaroDev
Jun 21 2017 18:25
Not really.. its because http links was loaded but the URL was https and that is called mixed content
Nick Sladic
@Nickadiemus
Jun 21 2017 18:25
this is my snippet. The fade-in and fade-out are just a keyframe class I made. the on and off are just changing the display value
Gulsvi
@gulsvi
Jun 21 2017 18:25
I haven't used toggleClass before :/ why not addClass/removeClass?
CallMeOrange
@EgnaroDev
Jun 21 2017 18:25
Oops I was too late
Gulsvi
@gulsvi
Jun 21 2017 18:25
I should play with that method some more...but haven't tried using toggleClass yet
CallMeOrange
@EgnaroDev
Jun 21 2017 18:25
@SkyC0der :wave:
Gulsvi
@gulsvi
Jun 21 2017 18:25
Hello @MCTwoDigitZero
Nick Sladic
@Nickadiemus
Jun 21 2017 18:26
@SkyC0der I tried that :/ and it still didn't work. I might try to use the fadeIn and fadeOut jquery built in annimations
Madhava Di Florio
@mierz00
Jun 21 2017 18:26
@Nickadiemus If you are doing this on codepen, link your pen
Gulsvi
@gulsvi
Jun 21 2017 18:27
He hates codepen lol
Nick Sladic
@Nickadiemus
Jun 21 2017 18:27
@mierz00 Sadly i am not :/ Im using my own environment
Madhava Di Florio
@mierz00
Jun 21 2017 18:27
@Nickadiemus Ah, haha.
CallMeOrange
@EgnaroDev
Jun 21 2017 18:28
@Nickadiemus c'mon you really should use codepen then get used to it
dorealex
@dorealex
Jun 21 2017 18:28
Also having a hard time with getJSON, I want the data it gets out of that scope...
Eric Weiss
@eweiss17
Jun 21 2017 18:28
codepen is lame lol
CallMeOrange
@EgnaroDev
Jun 21 2017 18:28
@SkyC0der wow that actually was my idea to make portfolio
dorealex
@dorealex
Jun 21 2017 18:28
@SkyC0der that looks good...
CallMeOrange
@EgnaroDev
Jun 21 2017 18:28
But I gave up lol
Gulsvi
@gulsvi
Jun 21 2017 18:29
It's all copy/paste from other pens I've made...
CallMeOrange
@EgnaroDev
Jun 21 2017 18:29
oh..
Oh I meant deadpool tribute page not portfolio
I was working on it then gave up :/
That was when HxH came in
Gulsvi
@gulsvi
Jun 21 2017 18:30
I thought you were working on Giotto's tribute
CallMeOrange
@EgnaroDev
Jun 21 2017 18:30
@SkyC0der First Giotto --> Deadpool --> DareDevil
Nick Sladic
@Nickadiemus
Jun 21 2017 18:30
@MCTwoDigitZero Codepen is nice and all but I'm used to developing in a text editor much more. I also love using Node project manager to install libraries
CallMeOrange
@EgnaroDev
Jun 21 2017 18:30
Okay
Eric Weiss
@eweiss17
Jun 21 2017 18:30
@SkyC0der your image gallery wasn't showing anything for me
Jorge
@OrangeKulture
Jun 21 2017 18:31
hey guys
CallMeOrange
@EgnaroDev
Jun 21 2017 18:31
@OrangeKulture Yo
Nick Sladic
@Nickadiemus
Jun 21 2017 18:31
@OrangeKulture Whats up
Gulsvi
@gulsvi
Jun 21 2017 18:31
Oh wow, broken in chrome
Jorge
@OrangeKulture
Jun 21 2017 18:31
not broken for me .. im using chrome
all good guys?
CallMeOrange
@EgnaroDev
Jun 21 2017 18:31
yeah
@OrangeKulture I think he meant image gallery
Jorge
@OrangeKulture
Jun 21 2017 18:32
yeah exactly .. thats what i mean .. image gallery is working correctly for me, in chrome
CallMeOrange
@EgnaroDev
Jun 21 2017 18:32
oh
dorealex
@dorealex