These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Jun 2017
Devin Cenatiempo
@dcenatiempo
Jun 11 2017 00:08
@Jayellrey Critique: Its a little ugly, but its responsive. Eventually you will need to figure the design part out a little better. Also, I’d put CSS in seperate file. Its pretty easy to do in codepen- just cut and paste. On your local computer, you will need to create a folder called css and put a your css there in main.css (or whatever you want to call it) The in the header put: <link rel="stylesheet" href="css/main.css">
teevik
@teevik
Jun 11 2017 00:25
@Jayellrey I would definitely add a shadow to the gray div, making it stand out from the red background
ChrisAB74
@ChrisAB74
Jun 11 2017 01:14
How can i place text over an image?
If you have code that isn't working, share a codepen and maybe we can spot the error
ChrisAB74
@ChrisAB74
Jun 11 2017 01:22
Thank you. I got the text to show up.
rugano
@rugano
Jun 11 2017 01:22
Hey campers,am missing button number 3,don't know why?
Any idea?
Devin Cenatiempo
@dcenatiempo
Jun 11 2017 01:29
@rugano its hiding behind the ‘=‘ button
moaazmf90
@moaazmf90
Jun 11 2017 01:29
@rugano try fixing the margin-left of the #equalButton
num 3 is hiding under the equalButton
Gulsvi
@gulsvi
Jun 11 2017 01:33
@rugano This might work better:
#equalButton{
  position: absolute;
  height:90px;
  right: 20px;
  bottom: 0;
}
Marius Nicolae
@bytao7mao
Jun 11 2017 01:41
guys, does anybody know the formula for "Bootstrap affix" ? i want to use it in clean css/without Bootstra[
Long Nguyen
@longnt80
Jun 11 2017 02:02
@bytao7mao use .offset().top and .scrollTop()
kirontoo
@kirontoo
Jun 11 2017 02:03
hey guys i'm not finished with the javascript yet, buuut what do you think of the design? https://codepen.io/kironto/pen/GEZqVW
Daniel Acosta
@danny1428
Jun 11 2017 02:04
how am i suppose to set up an api with the OpenWeatherMap when i have https on chrome and its not allowing me to make a mixed connection with http???
Long Nguyen
@longnt80
Jun 11 2017 02:05
@kirontoo I don't like the font, it's might be good for heading
for body text, it's hard to read
Marius Nicolae
@bytao7mao
Jun 11 2017 02:05
@longnt80 i want to use on this header:
<div id="header">
    <h1>LOREM IPSUM TAO's PORTFOLIO NIGGA BLYAT</h1>
    </div>
shivam gupta
@shivamg11000
Jun 11 2017 02:05
@kirontoo design is ok, the text above the search box is unreadable, increase its font or change the font-family
Marius Nicolae
@bytao7mao
Jun 11 2017 02:06
@longnt80 i will add #header in the paranteses?
kirontoo
@kirontoo
Jun 11 2017 02:08
ok cool thanks @shivamg11000 @longnt80
CamperBot
@camperbot
Jun 11 2017 02:08
kirontoo sends brownie points to @shivamg11000 and @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @longnt80 |http://www.freecodecamp.com/longnt80
:cookie: 272 | @shivamg11000 |http://www.freecodecamp.com/shivamg11000
Long Nguyen
@longnt80
Jun 11 2017 02:12
@bytao7mao if you're not familiar with javascript or jquery then use the bootstrap for now
Marius Nicolae
@bytao7mao
Jun 11 2017 02:12
@longnt80 it's not possible without bootstrap or js ?
Long Nguyen
@longnt80
Jun 11 2017 02:12
you need to use javascript
Marius Nicolae
@bytao7mao
Jun 11 2017 02:13
i see ok, @longnt80 ty
CamperBot
@camperbot
Jun 11 2017 02:13
bytao7mao sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @longnt80 |http://www.freecodecamp.com/longnt80
jjb1990
@jjb1990
Jun 11 2017 02:47
hello world
how is everyone doing?
I need some assistance
I am currently working on my tribute page, but I cannot get am image to work with .img-responsive
fdemaa
@fdemaa
Jun 11 2017 02:50
@jjb1990 you have bootstrap 4
link
use the bootstrap 3 version link
and paste it
on quick add
jjb1990
@jjb1990
Jun 11 2017 02:53
cant find it
fdemaa
@fdemaa
Jun 11 2017 02:54
okey
i will paste it
jjb1990
@jjb1990
Jun 11 2017 02:54
thanks
jjb1990
@jjb1990
Jun 11 2017 02:54
@fdemaa thanks
CamperBot
@camperbot
Jun 11 2017 02:54
jjb1990 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 11 2017 02:54
put that and delete the bootstrap 4 link
fcc teach bootstrap v3, so used this on the future
jjb1990
@jjb1990
Jun 11 2017 02:55
perfect that worked
fdemaa
@fdemaa
Jun 11 2017 02:56
:+1:
Lazarushen
@Lazarushen
Jun 11 2017 02:57
can anyone please tell me how to use images from google?
shivam gupta
@shivamg11000
Jun 11 2017 02:58
@Lazarushen For using google photo on codepen, you have to host the pics on image-hosting sites like immbd
then use the src from there
Lazarushen
@Lazarushen
Jun 11 2017 03:00
@shivamg11000 great thank!!
CamperBot
@camperbot
Jun 11 2017 03:00
lazarushen sends brownie points to @shivamg11000 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @shivamg11000 |http://www.freecodecamp.com/shivamg11000
gabewolf
@gabewolf
Jun 11 2017 03:20
how do i get it to work so it pens my social media page? https://codepen.io/gabewolf3880/pen/dWepPO
*opens
Johnny
@jtan3
Jun 11 2017 03:30
@gabewolf do you know what anchor tags are?
@gabewolf try putting target="_blank after your instagram url
Botenga
@Botenga
Jun 11 2017 03:50
hey can anyone help me. I am trying to make a progress bar for my portfolio project and i am having trouble making/understanding the concept to make the progress bar. Keep in mind i only know html and css right now. Any help will be aprectiated :smile: !
Shashank Shekhar
@shashank2806
Jun 11 2017 03:53
hey help me i can't get image centred
https://codepen.io/shashank2806/pen/rmYQOa
fdemaa
@fdemaa
Jun 11 2017 03:57
@shashank2806 you have bootstrap 4 and you are using classes from bootstrap 3
Botenga
@Botenga
Jun 11 2017 03:57
style="margin:0 auto\
fdemaa
@fdemaa
Jun 11 2017 03:58
use the link of bootstrap 3 in codepen
and it will work
Botenga
@Botenga
Jun 11 2017 03:58
just use a style=margin:0 auto;
fdemaa
@fdemaa
Jun 11 2017 03:58
but all the other bootstrap classes will not work , he should put the correct link
Botenga
@Botenga
Jun 11 2017 03:58
@fdemaa do you know how i can make a progress bar? been stuck on this issue for a couple of days know!
fdemaa
@fdemaa
Jun 11 2017 03:59
progress bar ?
heroiczero
@heroiczero
Jun 11 2017 03:59
@shashank2806 bootstrap 3 link is https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
fdemaa
@fdemaa
Jun 11 2017 03:59
@Botenga the bootstrap progress bar you want to use?
Botenga
@Botenga
Jun 11 2017 04:00
yea i want to make a progress bar for how much percentage of alanguage i know in my portfolio
fdemaa
@fdemaa
Jun 11 2017 04:00

i dont know how to do with animation,but here you can have a static progress bar:

https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Botenga
@Botenga
Jun 11 2017 04:00
@fdemaa i have html, css. js. i want to make a progress for each
@fdemaa will i be responsive
*it
fdemaa
@fdemaa
Jun 11 2017 04:02
i dont know , i never used it
but it looks good
check if its responsive
Botenga
@Botenga
Jun 11 2017 04:02
hopefully
fdemaa
@fdemaa
Jun 11 2017 04:02
or maybe there is a way to make it responsive
Botenga
@Botenga
Jun 11 2017 04:03
i will get there once i get there
firrt need to make it
first
Shashank Shekhar
@shashank2806
Jun 11 2017 04:03
@heroiczero @fdemaa not working even with bootstrap 3
Botenga
@Botenga
Jun 11 2017 04:04
@shashank2806 just use a style=margin:0 auto;
heroiczero
@heroiczero
Jun 11 2017 04:04
@shashank2806 need to use <div class="center-block">...</div> the class center-block instead of text-center
fdemaa
@fdemaa
Jun 11 2017 04:06
<img class="img-responsive"src="http://cdn.images.express.co.uk/img/dynamic/1/590x/Mathematician-Alan-Turing-Imitation-Game-Notebook-553128.jpg"></div>
that way you make the img responsive
also if you want to center add to the class "center-block"
<img  class="img-responsive center-block"src="http://cdn.images.express.co.uk/img/dynamic/1/590x/Mathematician-Alan-Turing-Imitation-Game-Notebook-553128.jpg"></div>
@shashank2806
Botenga
@Botenga
Jun 11 2017 04:09
i used center-block when i forked it but i didnt work most likely because he isnt running Boostrap 3
@shashank2806 make sure your running bootstrap 3
Botenga
@Botenga
Jun 11 2017 04:26
@fdemaa thanks you
CamperBot
@camperbot
Jun 11 2017 04:26
botenga sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 218 | @fdemaa |http://www.freecodecamp.com/fdemaa
Botenga
@Botenga
Jun 11 2017 04:26
you really help me out a lot today
fdemaa
@fdemaa
Jun 11 2017 05:32
@Botenga no problem bro ! :+1:
Luke Miller
@dalumiller
Jun 11 2017 05:43
Can someone help me understand what I'm doing wrong with escaping?
image.png
fdemaa
@fdemaa
Jun 11 2017 05:45
you have to put more " " i think
Luke Miller
@dalumiller
Jun 11 2017 05:45
I've played around with that
fdemaa
@fdemaa
Jun 11 2017 05:45
the name of the exercise ?
i will look at my
case
Luke Miller
@dalumiller
Jun 11 2017 05:46
Escape Sequences in Strings
in the JavaScript challenge
fdemaa
@fdemaa
Jun 11 2017 05:47
yes
Luke Miller
@dalumiller
Jun 11 2017 05:47
yes what?
fdemaa
@fdemaa
Jun 11 2017 05:47
you have to add a backslash
before and after
SecondLine
because the example
This message was deleted
\\secondLine\\
thats what you want to achieve
Luke Miller
@dalumiller
Jun 11 2017 05:49
like this?
image.png
Ah! \ is what makes one \
@fdemaa Thanks!
CamperBot
@camperbot
Jun 11 2017 05:50
dalumiller sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 11 2017 05:50
yes
and you have one
make sure to ad two
backslash
before and after
secondline
var myStr='FirstLine\n\\SecondLine\\\rThirdLine'; // Change this line
like that
Luke Miller
@dalumiller
Jun 11 2017 05:51
Yup, got it
gabewolf
@gabewolf
Jun 11 2017 05:54
can someone help me get my instagram button open onto my instagram page please? https://codepen.io/gabewolf3880/pen/dWepPO
fdemaa
@fdemaa
Jun 11 2017 05:56
@gabewolf if you want to use font awesome first you must add it to the quick add
section
gabewolf
@gabewolf
Jun 11 2017 05:56
i added it to the top of the page
@fdemaa
fdemaa
@fdemaa
Jun 11 2017 05:57

codepen works best if you add , on the quick add

Go to css

and add this

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

gabewolf
@gabewolf
Jun 11 2017 05:58
im trying to get it to open up my social media page
@fdemaa
fdemaa
@fdemaa
Jun 11 2017 06:01
wich
thing
a word
a button
what do you want to link ?
gabewolf
@gabewolf
Jun 11 2017 06:01
my instagram
and now the ig button symbol has vanished
@fdemaa
Faiz Ahmed
@Faiz7412
Jun 11 2017 06:03
has anyone here done something like this http://cb.vu/ ?
fdemaa
@fdemaa
Jun 11 2017 06:03
<h4 class="center-text">follow me on instagram<a href="https://www.instagram.com/gabe_wolf3880/" class="fa fa-instagram">instagram</a></h4
Faiz Ahmed
@Faiz7412
Jun 11 2017 06:03
or maybe whoismrrobot.com kind of website
fdemaa
@fdemaa
Jun 11 2017 06:04
@gabewolf put it like that man
gabewolf
@gabewolf
Jun 11 2017 06:05
ill see if that works
gabewolf
@gabewolf
Jun 11 2017 06:10
it took me to a white screen and did not open up my instagram @fdemaa
fdemaa
@fdemaa
Jun 11 2017 06:11
<h4 class="center-text">follow me on instagram<a href="https://www.instagram.com/gabe_wolf3880/" target="_blank">instagram</a></h4>
i paste the wrong code
put that it work
@gabewolf
Johnny
@jtan3
Jun 11 2017 06:14
@gabewolf https://blog.codepen.io/2014/02/06/opening-links-pens/ an explanation on why your links don't work on codepen
gabewolf
@gabewolf
Jun 11 2017 06:15
thank you @fdemaa
CamperBot
@camperbot
Jun 11 2017 06:15
gabewolf sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 11 2017 06:16
no problem read what @jtan3 send you
it will help you
@jtan3 hi man
!
Johnny
@jtan3
Jun 11 2017 06:17
hi
fdemaa
@fdemaa
Jun 11 2017 06:17
3 am here , i think i will call it a night xd
gabewolf
@gabewolf
Jun 11 2017 06:17
now i just messed it up and none of my t images are centered someone help me plz how do i center the images
fdemaa
@fdemaa
Jun 11 2017 06:18

to center images you can use
display:block;
margin:0 auto;

or if you are using bootstrapV3:

use the class="img-responsive display-block"

check what version of bootstrap you use
here on fcc they teach you the version 3.3.7
Johnny
@jtan3
Jun 11 2017 06:25
@gabewolf have you learn bootstrap?
gabewolf
@gabewolf
Jun 11 2017 06:26
yes but i stopped coding for 2 months beacause of this challenge and am returning today
Johnny
@jtan3
Jun 11 2017 06:27
@gabewolf i think it would be much easier for you to finish your page after learning bootstrap again
gabewolf
@gabewolf
Jun 11 2017 06:27
did not work anything else?
@fdemaa
Johnny
@jtan3
Jun 11 2017 06:34
@gabewolf https://www.w3schools.com/bootstrap/bootstrap_templates.asp you can shape your portfolio like these templates using bootstrap
fdemaa
@fdemaa
Jun 11 2017 06:38

@jtan3 i post my portfolio on the forums of fcc

And some guy post this:

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

what he is talking about?
can anyone exlpain me ? xd
Johnny
@jtan3
Jun 11 2017 06:39
no clue
fdemaa
@fdemaa
Jun 11 2017 06:40
haha i dont know what he is talking
oh i delete my comment and now it says that
maybe when you delete in 24 hrs , it will be out for real
Long Nguyen
@longnt80
Jun 11 2017 06:46
@mfaheemakhtar you meant you didn't pass the test? or you didn't understand the requirement?
fdemaa
@fdemaa
Jun 11 2017 06:46
whats up long
:+1:
Long Nguyen
@longnt80
Jun 11 2017 06:50
@mfaheemakhtar Cash in register is 1.01 but you only have a one dollar and a one cent (penny), how do you give fifty cents?
@mfaheemakhtar it's not how much you have, you just don't have the money type
Long Nguyen
@longnt80
Jun 11 2017 07:12
@fdemaa hey what's up
fdemaa
@fdemaa
Jun 11 2017 07:12
finishing the basics of js man
still a noob
on this thing xd
M-C-Haker
@M-C-Haker
Jun 11 2017 07:17
can i get some feedback from anyone on this? is this what they're looking for for the Tribute project? https://codepen.io/M-C-Haker/full/pwgBNY/
fdemaa
@fdemaa
Jun 11 2017 07:18
yes
that
;)
good job
M-C-Haker
@M-C-Haker
Jun 11 2017 07:19
@fdemaa Thanks! 2 very frustrating hours!
CamperBot
@camperbot
Jun 11 2017 07:19
m-c-haker sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 222 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 11 2017 07:19
BUT !!!!!
one thing
you should fix
the image is not responsive !
when i resize the browser
because you put the class="img-responsive"
on a div
M-C-Haker
@M-C-Haker
Jun 11 2017 07:19
I did the "img-responsive class"
fdemaa
@fdemaa
Jun 11 2017 07:19
and not on the image
M-C-Haker
@M-C-Haker
Jun 11 2017 07:19
ohhh alright brain fart let me fix that thanks
fdemaa
@fdemaa
Jun 11 2017 07:20
sure man
Long Nguyen
@longnt80
Jun 11 2017 07:20

@fdemaa

finishing the basics of js man

I finished the advanced algorithm and still feel like noob

fdemaa
@fdemaa
Jun 11 2017 07:20
that the only thing that breaks the page
@longnt80 but you know your stuff man
haha
the algorithms help to get the concepts right?
I want to get to that part soon
Long Nguyen
@longnt80
Jun 11 2017 07:22
it's like the more I know, I also find more things about javascript that I still don't understand
yes, algorithm is more fun
fdemaa
@fdemaa
Jun 11 2017 07:23
by the way do you watch some tutorials on java
or lessons ?
or you just read the documentation and code
?
javascript*
Long Nguyen
@longnt80
Jun 11 2017 07:24
mostly the doc
I only watched a tutorial about JSON and AJAX because FCC didn't cover that part very well
fdemaa
@fdemaa
Jun 11 2017 07:25
cool man, also you are doing some stuffs from the beta?
I didnt check yet
Long Nguyen
@longnt80
Jun 11 2017 07:25
the doc is faster to learn
I didn't check the beta yet
fdemaa
@fdemaa
Jun 11 2017 07:26
4 am here :| , im going to sleep, :smile:
bye!
Long Nguyen
@longnt80
Jun 11 2017 07:26
alright man
good night
or morning
fdemaa
@fdemaa
Jun 11 2017 07:26
haha
mhdns
@mhdns
Jun 11 2017 07:50
guys having some problem building JS calculator..currently working with the plus button only. after I press AC button and to another calculation..the answers are repeated.. the number of repeats keep increasing each time I press AC. Whats wrong with my code..is it the AC portion that is wrong? or the addition portion?
Radek
@radekjohn
Jun 11 2017 08:25
@mhdns love your "don't touch this" comment on the end. I do it as well:-)
is there some simple way how to mesure mp3 duration? I need to know how long are the sounds for the simon game provided by fcc
Adam Faraj
@adamfaraj
Jun 11 2017 09:03
userInput !== null || userInput !== ""
this basically checks if the text field is not empty, right?
userInput is an input
i'm trying to build a form authenticator, and if the username field is filled out, i want it display that the Username is not taken.
but it's doing it while i have the input field empty
Long Nguyen
@longnt80
Jun 11 2017 09:15
@mhdns holy sh.., if you add event for each individual number like that, it's gonna be very hard
@mhdns you should use regexp to target numeric character
so you would have 5 types of button: digits, math operators, evaluation button, ac and ce
Jayellrey
@Jayellrey
Jun 11 2017 09:21
@teevik @dcenatiempo thanks
CamperBot
@camperbot
Jun 11 2017 09:21
jayellrey sends brownie points to @teevik and @dcenatiempo :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @dcenatiempo |http://www.freecodecamp.com/dcenatiempo
:cookie: 102 | @teevik |http://www.freecodecamp.com/teevik
Jayellrey
@Jayellrey
Jun 11 2017 09:22
@teevik bookmarking your dropshadow examples
Thanks @teevik
CamperBot
@camperbot
Jun 11 2017 09:22
jayellrey sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:warning: jayellrey already gave teevik points
mhdns
@mhdns
Jun 11 2017 09:22
@longnt80 you're right..its a mess now..need to fix it!
Jayellrey
@Jayellrey
Jun 11 2017 09:24
@dcenatiempo
I know it ain't the prettiest but I don't have any design experience
I want to keep working on it and improving it as I learn
mhdns
@mhdns
Jun 11 2017 09:25
@radekjohn yeah its a pain when you keep forgetting which brackets are for what
Kaushal Malkan
@kaushalmalkan
Jun 11 2017 09:35
Can anyone please tell me, how do I fix my navigation bar so that other stuff doesn't overlap? https://codepen.io/kaushalmalkan/full/LLGeaO/
Ashan Mohammed
@AshanMohammed
Jun 11 2017 09:35
Hello,
Any one have experience in working with skycon icons? I
Markus Ivancsics
@ivancsicsmarkus
Jun 11 2017 09:40

@kaushalmalkan Add

z-index: 100;

to your #menu!

Kaushal Malkan
@kaushalmalkan
Jun 11 2017 09:42
thank youu :D @ivancsicsmarkus
CamperBot
@camperbot
Jun 11 2017 09:42
kaushalmalkan sends brownie points to @ivancsicsmarkus :sparkles: :thumbsup: :sparkles:
:cookie: 603 | @ivancsicsmarkus |http://www.freecodecamp.com/ivancsicsmarkus
teevik
@teevik
Jun 11 2017 10:35
@AshanMohammed I used the react component version if that helps
Aniculaesei
@Aniculaesei
Jun 11 2017 12:22
Hello guys!I have a problem with my random quote machine.....when the quote is big,on mobile version,I can't see the first words of the quote from the start--I have to scroll it myself to the top....what can I do?Thank you
https://codepen.io/Aniculaesei/pen/aWgaGb
Long Nguyen
@longnt80
Jun 11 2017 12:22
@Aniculaesei let me see
Aniculaesei
@Aniculaesei
Jun 11 2017 12:24
@longnt80 thank you :)
CamperBot
@camperbot
Jun 11 2017 12:24
aniculaesei sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Jun 11 2017 12:25
@Aniculaesei looks like you need responsive design
media query
Aniculaesei
@Aniculaesei
Jun 11 2017 12:25
i used bottstrap :)
it's easyer :))
Long Nguyen
@longnt80
Jun 11 2017 12:26
@Aniculaesei no bootstrap only help to certain point, you might still need to add your own css in cases such as this one
let me try something
Aniculaesei
@Aniculaesei
Jun 11 2017 12:27
ok...thank you
the problem is only when I watch from my mobile....I just want to see from the first line....
Long Nguyen
@longnt80
Jun 11 2017 12:29
@Aniculaesei first, you should use px for border-radius of #background-quote
don't use %
% will cause your corner to looks weird
Aniculaesei
@Aniculaesei
Jun 11 2017 12:30
ok.....i change now
Long Nguyen
@longnt80
Jun 11 2017 12:32
@Aniculaesei you should remove min-height: 500px; on #background-quote too because with it will be waste of space with short quote
Aniculaesei
@Aniculaesei
Jun 11 2017 12:35
Yes..I know...but if the quote will have 10 letters...then it will be more weird to show a 1 line div :)))
on the hole page
Long Nguyen
@longnt80
Jun 11 2017 12:36
here's the media query to add at the bottom of your css:
@media screen and (max-width: 500px) {
    #background-quote {
        min-height: auto;
    }

    #quote p {
        font-size: 20px;
    }
}
this will remove the min-height on small screen and reduce the font-size
Shubham Singh
@imshubhamsingh
Jun 11 2017 12:40
Hey guys...Hope ur all doing well ...Last year I learnt Nodejs and Express and developed a project using it..But never deployed it..Well since this weekend I got lot of free time ..So I deployed it..Hope you guys like it . Its not much ..Just wanted to learn some concept of Nodejs... https://github.com/imshubhamsingh/BookReviewLibrary/
https://book-review-library.herokuapp.com/
Aniculaesei
@Aniculaesei
Jun 11 2017 12:41
ok...but I can't jus use it for the #background-quote? @longnt80
because if the quote is short....the page is only a half..other halpf is white(on the mobile)
Long Nguyen
@longnt80
Jun 11 2017 12:44
then the problem is the background
@Aniculaesei add this at the top of your css to remove the white part:
html, body {
    height: 100%;
}
Aniculaesei
@Aniculaesei
Jun 11 2017 12:46
maybe it's posible to change only the div backgound quote
@longnt80 Thank you :)
CamperBot
@camperbot
Jun 11 2017 12:50
aniculaesei sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: aniculaesei already gave longnt80 points
Aniculaesei
@Aniculaesei
Jun 11 2017 12:50
Do you know java script? :D
I would like to add "" to the quote :D But I don't know how
Aniculaesei
@Aniculaesei
Jun 11 2017 12:56
@longnt80 hmmm..also.....on the big quotes there is an white part down....
Long Nguyen
@longnt80
Jun 11 2017 13:00
@Aniculaesei yeah, I think we have to use javascript for that. Let me check
Aniculaesei
@Aniculaesei
Jun 11 2017 13:02
also..the problem with the white line is not resolved :D
Long Nguyen
@longnt80
Jun 11 2017 13:02

@Aniculaesei you only need this to display the quote:

$("#quote").html(data[0].content);

no need for append

Aniculaesei
@Aniculaesei
Jun 11 2017 13:04
what is the difference between html..and appends?It's not the same?
Long Nguyen
@longnt80
Jun 11 2017 13:06
append will add to existing content
html rewrite the whole thing
Aniculaesei
@Aniculaesei
Jun 11 2017 13:07
ok...
Long Nguyen
@longnt80
Jun 11 2017 13:07
so html is the correct one because you will replace the whole quote with new one
@Aniculaesei to add the ", you just need to add css:
#quote p:before,
#quote p:after {
  content:'"';
}
jason.song
@sxj1011
Jun 11 2017 13:08
I need help
function miniMax (pad,depth,isAi){
        var str = checkBoard(pad);
        if(str === 'win'){
            return 10-depth;
        }
        if(str === 'lose'){
            return -10+depth;
        }
        if(str === 'draw'){
            return 0;
        }

        var moves = [];
        var scores = [];
        pad.map(function(e,index){
            if(e === 0){
                pad[index] = isAi ? 1 : -1;
                scores.push(miniMax(pad,depth+1,!isAi));
                moves.push(index);
                pad[index] = 0;
            }
        });

        if(isAi){
            aiStep = moves[scores.indexOf(Math.max.apply(null,scores))];
            return Math.max.apply(null,scores);
        }else{
            aiStep = moves[scores.indexOf(Math.min.apply(null,scores))];
            return Math.min.apply(null,scores);
        }
    }
The minMax function ,how can I control the depth
This is the miniMax algorithm
Who knows?
Long Nguyen
@longnt80
Jun 11 2017 13:16
you'll get more help there with javascript
rosstoev
@rosstoev
Jun 11 2017 13:16
hi guys, i'm little stuck with my weather app, can you give me some help :(
jason.song
@sxj1011
Jun 11 2017 13:17
@longnt80 OK,I will try
Killermise
@Killermise
Jun 11 2017 13:28
Hey guys I'm stuck on the Dr Norman Borlaug challenge as in I don't even know how to start it. Any advice?
Ben said
@BenSaidRachid
Jun 11 2017 14:19
@Killermise you just have to fulfill the user story;image,history and wiki link if i remember
do your best
shelton louis
@louiss0
Jun 11 2017 14:20

<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</header>

<div class="container-fluid">
<ul class= "nav nav-pills">
<li>
<a href="#">Shelton Louis</a>
</li>
<li>
<a href="#">Bio</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li >
<a href="#">Contact Me</a>
</li>
<li>
<a href="#">LinkedIn</a>
</li>
</ul>

<div class="pageone">

</div>

<div class="pagetwo"

</div>
<div class="pagethree"

</div>
<div class="pagefour"

</div>
This is what my Html code looks like for my web portfolio whats going on the buttons i used wont move and one image overlaps another image

shelton louis
@louiss0
Jun 11 2017 14:34

@longnt80 shelton louis @louiss0 10:20

<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</header>

<div class="container-fluid">

<ul class= "nav nav-pills">

<li>
<a href="#">Shelton Louis</a>
</li>

<li>
<a href="#">Bio</a>
</li>

<li>
<a href="#">Portfolio</a>
</li>

<li >
<a href="#">Contact Me</a>
</li>

<li>
<a href="#">LinkedIn</a>
</li>
</ul>

<div class="pageone">
</div>

<div class="pagetwo" </div>

<div class="pagethree" </div>

<div class="pagefour" </div>
This is what my Html code looks like for my web portfolio whats going on the buttons i used wont move and one image overlaps another image
_

@Aniculaesei shelton louis @louiss0 10:20

<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</header>

<div class="container-fluid">

<ul class= "nav nav-pills">

<li>
<a href="#">Shelton Louis</a>
</li>

<li>
<a href="#">Bio</a>
</li>

<li>
<a href="#">Portfolio</a>
</li>

<li >
<a href="#">Contact Me</a>
</li>

<li>
<a href="#">LinkedIn</a>
</li>
</ul>

<div class="pageone">
</div>

<div class="pagetwo" </div>

<div class="pagethree" </div>

<div class="pagefour" </div>
This is what my Html code looks like for my web portfolio whats going on the buttons i used wont move and one image overlaps another image
_

@khaduch im trying to build a web portfolio with four pages
VinayVijayJoshi
@VinayVijayJoshi
Jun 11 2017 14:41
"FirstLine\n\SecondLine\\rThirdLine" why cant we use \n instaed of \r?
tiennguyen15
@tiennguyen15
Jun 11 2017 14:42
what youe mean @VinayVijayJoshi
VinayVijayJoshi
@VinayVijayJoshi
Jun 11 2017 14:46
ThirdLine is a newline so shouldnt we use /n?
tiennguyen15
@tiennguyen15
Jun 11 2017 14:48
\n as an end-of-line terminator in Unix text files
\r like for MAC
but in front end we use \n
sometime depend on browser
Josh
@JBayne1
Jun 11 2017 14:50
Hey, can anyone give me a hand with my portfolio page im building in code pen? Im trying to write a title in the h1 element, however whenever i put the closing </h1> tag in it pushes the div with the buttons in down so its not in line with the banner style im going for. Also if i try adding a margin top to the h1 element it pushed the whole div down, im trying to just center the text in the div.
that looks terrible in a tiny window. im bad at this
tiennguyen15
@tiennguyen15
Jun 11 2017 14:57
do you know how to use flexbox @josh
Josh
@JBayne1
Jun 11 2017 15:01
i do not
i will do the google
M-C-Haker
@M-C-Haker
Jun 11 2017 15:05
really want my image to be image response - and i have set it to do so, but it does not appear to resize when i move my broswer. What am I missing? https://codepen.io/M-C-Haker/pen/pwgBNY
Tevvin Strong
@StrongT
Jun 11 2017 15:10
what am I doing wrong?
border.PNG
Mukul Agrawal
@mukul09
Jun 11 2017 15:11
@StrongT add class smaller-image to <img>
Saikat-Sinha
@Saikat-Sinha
Jun 11 2017 15:14
how to make quarter Circle using CSS? please help
Tevvin Strong
@StrongT
Jun 11 2017 15:14
@mukul09 done that
M-C-Haker
@M-C-Haker
Jun 11 2017 15:18
@Saikat-Sinha border-radius: 100%;
would be circle so maybe 25% for quarter
Saikat-Sinha
@Saikat-Sinha
Jun 11 2017 15:19
@M-C-Haker nope doesn't work
tiennguyen15
@tiennguyen15
Jun 11 2017 15:22
what ya mean Sakat
Saikat-Sinha
@Saikat-Sinha
Jun 11 2017 15:22
@tiennguyen15 i mean 1/4th of a circle
using css
tiennguyen15
@tiennguyen15
Jun 11 2017 15:24
1 second
border-radius:
Saikat-Sinha
@Saikat-Sinha
Jun 11 2017 15:27
nicee @tiennguyen15 thanks
CamperBot
@camperbot
Jun 11 2017 15:27
saikat-sinha sends brownie points to @tiennguyen15 :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @tiennguyen15 |http://www.freecodecamp.com/tiennguyen15
Ben said
@BenSaidRachid
Jun 11 2017 15:38
hi all,does my pomoro clock fulfill the user story?https://codepen.io/abdel974/pen/pwgXYO?editors=0010
it doesn't look a clock yet but i test it,when the session is finished it start the break,when the break is finished it start the session
shivam gupta
@shivamg11000
Jun 11 2017 15:40
@shivamg11000
can someone review my js code , I want to check the readability and better approach to put the functions
https://codepen.io/shivamg11000/pen/EXKgKx?editors=0010
Le Nguyen
@nguyenlekhtn
Jun 11 2017 15:45
hello, about the first project Build a Tribute Page, do I need to create the same web or have to create a different context?
does viewing the code in editor mode considers as a cheat action or not?
Gulsvi
@gulsvi
Jun 11 2017 15:48
@nguyenlekhtn You should build a different page, a tribute to a different person. You should not look at the code in editor mode :)
Use google and read the bootstrap + codepen documentation to try and figure it out. Ask for help here whenever needed.
tiennguyen15
@tiennguyen15
Jun 11 2017 15:51
=_=
try to understand mate
do not try to read cheat
Ken Haduch
@khaduch
Jun 11 2017 15:52
@louiss0 - do you have a URL that you can post for your project, or are you working locally? Just quickly looking at your HTML, you need to have some information in the href="#" attributes that link your buttons to the individual sections. Like on your "pagetwo" div, add an attribute in addition to what you have id="pagetwo" and in the link at the top, add href="#pagetwo" which establishes a linkage between the button and the section in the page.
Le Nguyen
@nguyenlekhtn
Jun 11 2017 15:55
@SkyC0der Thank you very much. Any suggestion for similar tribute page that I can practice on?
CamperBot
@camperbot
Jun 11 2017 15:55
nguyenlekhtn sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1656 | @skyc0der |http://www.freecodecamp.com/skyc0der
Ken Haduch
@khaduch
Jun 11 2017 15:56
@M-C-Haker - it looks like your image is responsive now - did you make a change? Maybe I missed some commentary in the chat...
Gulsvi
@gulsvi
Jun 11 2017 15:58
@nguyenlekhtn If you want some inspiration, try searching for "tribute page" on https://codepen.io. Try to write all the HTML by yourself though - use what you learned in the free code camp challenges :)
Ken Haduch
@khaduch
Jun 11 2017 15:59
@abdel974 - one thing that needs to be corrected - if I click the start button multiple times, it appears to be starting multiple timers so that the clock functionality goes a little bonkers. Also, you should label your settings for which one is the "work" time and which one the "break" time. And I noticed that I can set the first of the two settings all the way to 0 - i think that's the break time setting?
Le Nguyen
@nguyenlekhtn
Jun 11 2017 16:01
@SkyC0der thank you
CamperBot
@camperbot
Jun 11 2017 16:01
nguyenlekhtn sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: nguyenlekhtn already gave skyc0der points
Ken Haduch
@khaduch
Jun 11 2017 16:02
@abdel974 - also, I didn't hear any sounds playing at the end of a time. That is something that I think is implied in the description of the clock, when he (or the text says) that the timer "goes off", I think that means a sound. It seems that a sound is pretty helpful here, unless you want to sit and watch the clock or keep checking it to see if it's time for work or break?
Jen
@jenhurd8
Jun 11 2017 16:11
Ever since I asked a question in here I get emails saying there are 96 comments etc in Help Front End. Do I need to mark question as resolved? I cannot find my way back to it? or does everyone get these once you have made a comment...
Gulsvi
@gulsvi
Jun 11 2017 16:13
@jenhurd8 Change the notification settings so you only get notified when you are mentioned - then you'll be able to find your way back to it
In a browser, type /notify-mute
Click the settings button in the top, right-hand corner for more options
Jen
@jenhurd8
Jun 11 2017 16:14
awesome, found it @SkyC0der thank you!
CamperBot
@camperbot
Jun 11 2017 16:14
jenhurd8 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
api offline
All bot systems are go!
botVersion: 0.0.12
env: prod
botname: camperbot
khazarr
@khazarr
Jun 11 2017 16:40
var coolData = {};
var iter = 0;

function myRequest(url, tipoRequest) {
  return new Promise((resolve) => {
  var rawData, data;
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      rawData = this.response;
      data = JSON.parse(this.response);
      coolData[iter] = data;
      iter++;
      resolve(data)
    }
  }
  request.send();
  })
}

function getData(channelName) {
  var clientId = 'c8a3wkkb56yqjhlcui7tcfyjvs65dy6';
  var url = 'https://api.twitch.tv/kraken/streams/' + channelName + '?client_id=' + clientId;
  var tipoRequest = '';

  myRequest(url, tipoRequest).then((data) => {
   // console.log(data);

  })
}


 console.log(coolData);
 console.log(coolData[0]);

I have a problem that coolData in console looks ok, but coolData[0] returns undefined.
That is strange to me because when I type coolData[0] directly in browser console i get Object {stream: null, _links: Object} which is desired.

Could somebody please explain what is happening?

Baibhav Gautam
@baibhavx
Jun 11 2017 16:42
I am working on Random Quote Machine. I am able to use an API to get random quotes and render it to the screen. Now I am looking into how to use the Twitter API to post new tweets. I am not sure if I need an Auth key or something like that. Getting random quote was straight forward
function getQuote() {
  $.ajax({
    url: 'http://quotes.stormconsultancy.co.uk/random.json',
    method: 'get',
    success: function(data) {
      document.querySelector('#message').textContent = data.quote;
    }
    });
}
tiennguyen15
@tiennguyen15
Jun 11 2017 16:43
yeap
@khazarr
it is deffer promised
the api have not resolve
so the variable will undfined
Baibhav Gautam
@baibhavx
Jun 11 2017 16:46

I am working on Random Quote Machine. I am able to use an API to get random quotes and render it to the screen. Now I am looking into how to use the Twitter API to post new tweets. I am not sure if I need an Auth key or something like that. Getting random quote was straight forward

function getQuote() {
  $.ajax({
    url: 'http://quotes.stormconsultancy.co.uk/random.json',
    method: 'get',
    success: function(data) {
      document.querySelector('#message').textContent = data.quote;
    }
    });
}

Can anyone please tell me what direction I should go? I looked at Twitter API documentations but I didn't find it very helpful

tiennguyen15
@tiennguyen15
Jun 11 2017 16:47
base on the link
it like public link
Gulsvi
@gulsvi
Jun 11 2017 16:47
@khazarr Your console.log runs before the promise is fulfilled. The browser console will update when that promise is fulfilled. This is why you'll get undefined when your javascript logs coolData[0] but milliseconds later be able to see it in your console.
tiennguyen15
@tiennguyen15
Jun 11 2017 16:47
no authen required
Baibhav Gautam
@baibhavx
Jun 11 2017 16:47
ok thanks I'll give it a shot
firas omrane
@firou1925
Jun 11 2017 16:48
hello world
khazarr
@khazarr
Jun 11 2017 16:49
@tiennguyen15 @SkyC0der Thank you!
So simple setTimeout() should fix it?
CamperBot
@camperbot
Jun 11 2017 16:49
khazarr sends brownie points to @tiennguyen15 and @skyc0der :sparkles: :thumbsup: :sparkles:
:cookie: 5 | @tiennguyen15 |http://www.freecodecamp.com/tiennguyen15
:star2: 1658 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 11 2017 16:51
@khazarr No, don't use setTimeout. Use .then() to get the data from your promise.
You can also use fetch() - it might be a little easier
function myRequest(url, tipoRequest) {
 return fetch(url).then(res => res.json());
}

function getData(channelName) {
  var clientId = 'c8a3wkkb56yqjhlcui7tcfyjvs65dy6';
  var url = 'https://api.twitch.tv/kraken/streams/' + channelName + '?client_id=' + clientId;
  var tipoRequest = '';

  myRequest(url, tipoRequest).then((data) => {
   console.log(data);
  });
}

getData('freecodecamp')
firas omrane
@firou1925
Jun 11 2017 16:52
can anyone help me
I am trying to get my table in the console but it's empty
https://codepen.io/firou1925/pen/GEZvYx?editors=0010
tiennguyen15
@tiennguyen15
Jun 11 2017 16:52
dot not set timeout
it could be longer than timeout if the speed of the API so long :D
khazarr
@khazarr
Jun 11 2017 16:53
@SkyC0der Whoa! that makes sense! thanks again! I not fully understand promise but now I am starting to get it ;)
CamperBot
@camperbot
Jun 11 2017 16:53
khazarr sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: khazarr already gave skyc0der points
BrunoM24
@BrunoM24
Jun 11 2017 16:57
@firou1925 you dont need this:
document.createElement('tr')
firas omrane
@firou1925
Jun 11 2017 17:00
@BrunoM24 what to do so?
BrunoM24
@BrunoM24
Jun 11 2017 17:02
@firou1925 if you will use a table make your html with the table, and them append the rows
tiennguyen15
@tiennguyen15
Jun 11 2017 17:05
hi
@firou1925 I am trying to get my table in the console but it's empty
console.log() you mean
i tested it ad the table work
firas omrane
@firou1925
Jun 11 2017 17:07
@tiennguyen15 isn't empty?
tiennguyen15
@tiennguyen15
Jun 11 2017 17:08
image.png
BrunoM24
@BrunoM24
Jun 11 2017 17:08

@firou1925 simple way to make that working
on the html add:

<table></table>

on the javaScript:
change your url on the getJson, you will need the channels information:

$.getJSON('https://wind-bow.gomix.me/twitch-api/channels/'+channel+'?callback=?', function(data)

then add this line after the function

$("table").append("<tr><td>"+data.name+"</td><td>"+data.game+"</td></tr>");
Lazarushen
@Lazarushen
Jun 11 2017 17:10
hi everyone, im currently building a tribute page. Im trying to set a thumbnail with my photo not sure whats wrong with my code. i thought maybe i didnt close my div but i checked many times. any thoughts?
<div><img class="thumbnail" src="http://res.cloudinary.com/dhs4g0jdw/image/upload/c_scale,w_536/v1497198836/landscape-1487365300-delish-ryan-gosling-getty-pascal_mo8qiw.jpg">
<div class="caption text-center">"the man the, myth the legand"</div>
</div>
firas omrane
@firou1925
Jun 11 2017 17:14
@BrunoM24 thank u
just xant to try a new method to create a table
CamperBot
@camperbot
Jun 11 2017 17:14
firou1925 sends brownie points to @brunom24 :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @brunom24 |http://www.freecodecamp.com/brunom24
BrunoM24
@BrunoM24
Jun 11 2017 17:15
Im not saying that your method dont work, I dont have tested, I just think that using append ir more easy
Gulsvi
@gulsvi
Jun 11 2017 17:15
@Lazarushen Your HTML syntax is valid, but you need Bootstrap to use the thumbnail, caption, and text-center classes.
M-C-Haker
@M-C-Haker
Jun 11 2017 17:15
@khaduch I did thanks, apparently the bootstrap link in codepen doesn't work and someone shot me the link to actually make the image responsive. works now
CamperBot
@camperbot
Jun 11 2017 17:15
m-c-haker sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2973 | @khaduch |http://www.freecodecamp.com/khaduch
^^ Two different versions with different class names
rosstoev
@rosstoev
Jun 11 2017 17:16

i'm stuck with changing C/F temperature. So i made one button and when you click they have to change. They are saved in two varibales for C and for F. And i want to visualise into a div

hey guys i upload my weather app in code pen, but the content doesn't show. Can you help me with this problem?

Ben said
@BenSaidRachid
Jun 11 2017 17:18
@khaduch ok i get it,i have to block the start button after the click and add a sound for the session end and for the break end
thanks a lot
BrunoM24
@BrunoM24
Jun 11 2017 17:19
@rosstoev you are using the openweather api, that works with HTTP protocol, since day 1 of this moth I think code pen just accept HTTPS protocol
Lazarushen
@Lazarushen
Jun 11 2017 17:19
@SkyC0der I thought i had bootstrap selected, but i will check again, thanks!
CamperBot
@camperbot
Jun 11 2017 17:19
lazarushen sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1659 | @skyc0der |http://www.freecodecamp.com/skyc0der
BrunoM24
@BrunoM24
Jun 11 2017 17:20
I have the same problem with my project, I have made with openweather and work for 2 days, now dont work anymore
rosstoev
@rosstoev
Jun 11 2017 17:20
damnn
can i fix that
or i have to use another api
BrunoM24
@BrunoM24
Jun 11 2017 17:20
yes, the FCC give you another api to use
James Czekaj
@JamesCzekaj
Jun 11 2017 17:21
When do I learn git/github? I'm on the basic js module at the momemt
BrunoM24
@BrunoM24
Jun 11 2017 17:21
@rosstoev Dark Sky API -> https://darksky.net/dev/docs/forecast
Ken Haduch
@khaduch
Jun 11 2017 17:21
@M-C-Haker - :point_up: June 11, 2017 1:15 PM - yeah, Bootstrap 4 has a lot of changes, the img-responsive is now img-fluid - there is a migration document if you're interested in seeing what the changes are: https://v4-alpha.getbootstrap.com/migration/ = Bootstrap V4 V3 Migration v4 migration
rosstoev
@rosstoev
Jun 11 2017 17:21
thanks man
tiennguyen15
@tiennguyen15
Jun 11 2017 17:21
you can do it now
rosstoev
@rosstoev
Jun 11 2017 17:21
:)
tiennguyen15
@tiennguyen15
Jun 11 2017 17:22
@JamesCzekaj
:D
git and git not related to JS
just a repo to manage project
BrunoM24
@BrunoM24
Jun 11 2017 17:23
@JamesCzekaj the FCC just have one lesson about github and is on the Back End classes
but if you want to learn git and gitHub you have anothers good option, I recommend the course on the Udacity.com
James Czekaj
@JamesCzekaj
Jun 11 2017 17:23
moment @tiennguyen15 Yeah, I know, I was just wondering
@BrunoM24 k, thanks
CamperBot
@camperbot
Jun 11 2017 17:23
jamesczekaj sends brownie points to @brunom24 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @brunom24 |http://www.freecodecamp.com/brunom24
BrunoM24
@BrunoM24
Jun 11 2017 17:24
@rosstoev when you say thanks to someone who help you mention the person to give them a cookie
CamperBot
@camperbot
Jun 11 2017 17:24
brunom24 sends brownie points to @rosstoev :sparkles: :thumbsup: :sparkles:
:cookie: 22 | @rosstoev |http://www.freecodecamp.com/rosstoev
BrunoM24
@BrunoM24
Jun 11 2017 17:24
@JamesCzekaj :+1: I have take the course on Udacity, and I have learn alot about git & gitHub
tiennguyen15
@tiennguyen15
Jun 11 2017 17:26
udemy some cheap or free course
try to understand
Ben said
@BenSaidRachid
Jun 11 2017 17:26
how could i add a background sound?
tiennguyen15
@tiennguyen15
Jun 11 2017 17:27
add tag object link music , play auto loop and displayy none
:D
most cheating one
BrunoM24
@BrunoM24
Jun 11 2017 17:29
Udacity also have free courses, I just have done free courses, I havent pay for nothing and I already have done 7 courses, in Java, Android, javaScript, git & gitHub
Ben said
@BenSaidRachid
Jun 11 2017 17:30

@tiennguyen15 what's does"tag object link music"mean?
i tried

<embed src="http://soundbible.com/mp3/front-desk-bells-daniel_simon.mp3" width="180" height="90" loop="true" autostart="true" hidden="true" />

and

<audio src="http://soundbible.com/mp3/front-desk-bells-daniel_simon.mp3">
  <p>If you are reading this, it is because your browser does not support the audio element.     </p>
</audio>

there's no sound

@tiennguyen15 i found something thanks a lot
CamperBot
@camperbot
Jun 11 2017 17:33
abdel974 sends brownie points to @tiennguyen15 :sparkles: :thumbsup: :sparkles:
:cookie: 6 | @tiennguyen15 |http://www.freecodecamp.com/tiennguyen15
tiennguyen15
@tiennguyen15
Jun 11 2017 17:33
<audio src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" controls autoplay style="display: none">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
syllov
@syllov
Jun 11 2017 17:35
$.getJSON('https://api.darksky.net/forecast/0df4e72cb673ba1aef24b98229f0f9cd/'+lat','+lon, function(data){
am I doing this right? Im having some troube understanding how APIs work :/
tiennguyen15
@tiennguyen15
Jun 11 2017 17:39
what do you dont understand
Sara
@skd726
Jun 11 2017 17:39
hello! I'm working on my weather app and trying to get the background to change along with the weather. I've put the images I'd like to use in a an array and am trying to trigger them with 'if / else statements' but I'm not sure if I can do that using only F or if I need to write a case for F and C. or if I jsut have bad code / code in the wrong place, and now the other parts of it aren't working now. can anyone help? https://codepen.io/skd726/pen/ybjZwX?editors=1111
syllov
@syllov
Jun 11 2017 17:40
@tiennguyen15 dont know how to get/use the data...
Adam Bohannon
@abohannon
Jun 11 2017 17:43
Hey everyone, I'm attempting to pass each Twitch channel URL to my getJSON function in order to create html elements for each. I can successfully do it for one, so I know it at least works on a simple level. My loop at the top successfully returns the URLS of each channel, but I'm having issues successfully passing them into the function at the bottom. Can anyone give me a hint?
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "Starladder5", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0; i < channels.length; i++){
  var chanURLS = [];
  var apiURL = "https://wind-bow.gomix.me/twitch-api/users/"+ channels[i] +"?callback=?";
  chanURLS.push(apiURL);
  console.log(chanURLS);
}

$.getJSON(chanURLS, function(data){
  console.log(data);

  var userURL = "https://www.twitch.tv/" + data.name;

  console.log(userURL);

    $("#js-display-results").append(
      "<div class='card horizontal hoverable'><div class='card-stacked'><div class='card-content'><a class='js-link' href="+ userURL +"><img id='js-image' src="+ data.logo +"></a><h5 id='js-title'>"+ data.display_name +"</h5><p id='js-description'>"+ data.bio +"</p></div><div class='card-action'><a class='js-link' href="+ userURL +">WATCH NOW</a></div></div></div>"
    );


});
It only creates the last channel in the array
tiennguyen15
@tiennguyen15
Jun 11 2017 17:44
@syllov
the call api is deffered promise
BrunoM24
@BrunoM24
Jun 11 2017 17:47
@abohannon put the getJSON inside the for loop and use your apiURL instead of the chanURLS on the getJSON
Adam Bohannon
@abohannon
Jun 11 2017 17:50
@BrunoM24 that worked! Thank you! However, my linter is telling me not to put functions inside for loops. Is that generally not a good idea?
CamperBot
@camperbot
Jun 11 2017 17:50
abohannon sends brownie points to @brunom24 :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @brunom24 |http://www.freecodecamp.com/brunom24
BrunoM24
@BrunoM24
Jun 11 2017 17:52
@abohannon in this case is the way I saw everybody doing, but you can ask the opinion to someone with more knowledge
Adam Bohannon
@abohannon
Jun 11 2017 17:53
@BrunoM24 ok cheers, appreciate the help.
tiennguyen15
@tiennguyen15
Jun 11 2017 17:53
does the API allow call many channels in one
if not you have to call loop
coz of API
Ben said
@BenSaidRachid
Jun 11 2017 17:53
hi all,i'm on tic tac toe game project,i need some hint,i don't know how to create a computer that can play with me,and any other advice is welcomed
BrunoM24
@BrunoM24
Jun 11 2017 17:54
@abohannon :thumbsup:
@abdel974 in that I cant help you, Im on the calculator
Daniel Kang
@a1mighty
Jun 11 2017 18:09
Anyone know how they made the search bar in the wikipedia viewer
when you click the magnifying glass it turn into a search bar
Marius Nicolae
@bytao7mao
Jun 11 2017 18:10
Hello guys, why my boxex are not aligned properly ? can someone help me in this problem ?
https://codepen.io/bytao7mao/pen/dRMZzx
spadiee
@spadiee
Jun 11 2017 18:20
I have a question about the portfolio project. when I choose background images, do they all have to be my own property, or can I use other's pictures and cite them properly?
Johnny
@jtan3
Jun 11 2017 18:25
@bytao7mao the card boxes?
Marius Nicolae
@bytao7mao
Jun 11 2017 18:25
@jtan3 yeah
Johnny
@jtan3
Jun 11 2017 18:26
@bytao7mao align to what?
Marius Nicolae
@bytao7mao
Jun 11 2017 18:26
i want them into the entire line , each line with 3 boxes
Johnny
@jtan3
Jun 11 2017 18:28
@bytao7mao how come you're not using bootstrap?
@bytao7mao so much easier with bootstrap lol
Marius Nicolae
@bytao7mao
Jun 11 2017 18:29
i thought to learn css first and after bootstrap ... :)
Johnny
@jtan3
Jun 11 2017 18:29
css is just styling
https://www.w3schools.com/bootstrap/bootstrap_templates.asp you can make your page look like these templates
Marius Nicolae
@bytao7mao
Jun 11 2017 18:30
i know but bootstrap uses library so, to understand bootstrap, i have to work a little with css
Matthias Lang
@MatLang
Jun 11 2017 18:31
Hi@all! Just a quick one: How can I prevent my quote box from sliding down when hovering over the "get quote" btn? thx in advance. Check codepen here. https://codepen.io/ltcMatt/pen/VWeoMW
Johnny
@jtan3
Jun 11 2017 18:32
@bytao7mao you want 1,2,3 in the same row?
<div class="row">
      <div class="card card-1">card 1</div>
      <div class="card card-2">card 2</div>
      <div class="card card-1">card 3</div>
    </div>
Marius Nicolae
@bytao7mao
Jun 11 2017 18:35
yeah, and to be at the same width with the the rest of the content
Johnny
@jtan3
Jun 11 2017 18:35
@bytao7mao try it like that
cryptorganic
@cryptorganic
Jun 11 2017 18:35
Build a Tribute Page
any help on that
Marius Nicolae
@bytao7mao
Jun 11 2017 18:35
@jtan3 k
cryptorganic
@cryptorganic
Jun 11 2017 18:36
I am cant understand how to do it exactly?
Marius Nicolae
@bytao7mao
Jun 11 2017 18:38
@cryptorganic you have a lot of work :)
cryptorganic
@cryptorganic
Jun 11 2017 18:38
yes
but how to do it in codepen
Marius Nicolae
@bytao7mao
Jun 11 2017 18:39
@jtan3 i did it, i had some <br> tags between div cards =)) , my fault ... ty man.
CamperBot
@camperbot
Jun 11 2017 18:39
bytao7mao sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @jtan3 |http://www.freecodecamp.com/jtan3
@jtan3 any ideea about what to add next ? in the page ?
Johnny
@jtan3
Jun 11 2017 18:40
@bytao7mao add margin to your cards
Marius Nicolae
@bytao7mao
Jun 11 2017 18:40
@cryptorganic what do you mean ?
Johnny
@jtan3
Jun 11 2017 18:40
to space it out
cryptorganic
@cryptorganic
Jun 11 2017 18:41
@bytao7mao I have managed to open codepen but I am strugling to move on
Johnny
@jtan3
Jun 11 2017 18:42
@bytao7mao all the boxes are touching each other
Marius Nicolae
@bytao7mao
Jun 11 2017 18:45
@jtan3 i ve added some margins, i was asking about what content to add,
https://codepen.io/bytao7mao/pen/dRMZzx
@cryptorganic you have to be perseverent man, the first move it's so important, i'm struggling too :))
Johnny
@jtan3
Jun 11 2017 18:46
@bytao7mao make your contact section? not sure what else you need. Is this the portfolio project?
Marius Nicolae
@bytao7mao
Jun 11 2017 18:46
yeah
Johnny
@jtan3
Jun 11 2017 18:47
@bytao7mao look back at the example. Also your page isn't responsive. When you resize the page the content breaks. Bootstrap is good for being responsive.
Marius Nicolae
@bytao7mao
Jun 11 2017 18:48
@jtan3 is the @media making it responsive ?
Johnny
@jtan3
Jun 11 2017 18:49
@bytao7mao resize your page to see
Marius Nicolae
@bytao7mao
Jun 11 2017 18:49
@jtan3 i see that it isn't responsive, but how can i do it with css ?
Johnny
@jtan3
Jun 11 2017 18:50
not sure without bootstrap
Marius Nicolae
@bytao7mao
Jun 11 2017 18:50
if i add now bootstrap, it's ok ? it will work ?
Johnny
@jtan3
Jun 11 2017 18:51
you'll have to change how you made the page
looks like you understand html and css well enough. You can probably move on.
@bytao7mao you made a calculator?
Marius Nicolae
@bytao7mao
Jun 11 2017 18:56
@jtan3 nop
@jtan3 in js right ?
Johnny
@jtan3
Jun 11 2017 18:57
yes
@bytao7mao i still haven't finished my calculator
Francois NOEL
@fanfoune
Jun 11 2017 19:17
Hi!! Someone counld explain to me how to right-center "about" et "portfolio" in my navbar ??
Saikat-Sinha
@Saikat-Sinha
Jun 11 2017 19:20
any knows how to create css triangle with border and no-fill
??
Juli Cheng
@julicheng
Jun 11 2017 19:22
hello so im a little confused on the profile lookup challenge. i got the answer correct but i dont understand why it only works when i put i < contacts.length but doesnt work when i put i <= contacts.length. someone please enlighten me!
//Setup
var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["Javascript", "Gaming", "Foxes"]
    }
];


function lookUpProfile(firstName, prop){
// Only change code below this line
  for (var i = 0; i < contacts.length; i++) {
 if (contacts[i].firstName === firstName) {
   if (contacts[i].hasOwnProperty(prop)) {
     return contacts[i][prop];
     }
   else {
     return "No such property";
   }
   }
 }
  return "No such contact";
// Only change code above this line
}

// Change these values to test your function
lookUpProfile("Akira", "likes");
Marius Nicolae
@bytao7mao
Jun 11 2017 19:25
@fanfoune i've added some margin
.navbar-nav {
  margin-left:600px;
}
or you can add more, if you want to put if further.
Francois NOEL
@fanfoune
Jun 11 2017 19:26
@bytao7mao woooowww!!! amazing it works!!
THANK YOU!!!!
Marius Nicolae
@bytao7mao
Jun 11 2017 19:27
@fanfoune hahah :D np man
Francois NOEL
@fanfoune
Jun 11 2017 19:27
@bytao7mao could you explain to me how you reason to fix it ??
tyl-er
@tyl-er
Jun 11 2017 19:27

Hey I need some help with CSS animations. I'm trying to add a card flip animation to the first square on the page but for some reason it's not working. I thought It had something to do with positioning, but not sure.

https://codepen.io/tyl-er/pen/jwEKov?editors=0110

Francois NOEL
@fanfoune
Jun 11 2017 19:27
why margin ?
@bytao7mao why did you use margin ?
Marius Nicolae
@bytao7mao
Jun 11 2017 19:31
@fanfoune you can use padding or margin, it works both ways, you have to think that "about" and "Portofolio" are 2 items, content inside a div which is "navbar-nav" and that is one of the ways to move it. It works with float too , but you will complicate yourself too much .
Francois NOEL
@fanfoune
Jun 11 2017 19:37
@bytao7mao ok so you consider the <ul class="navbar-nav"> as the parent div and you apply margin or padding inside this div
right ??
this is the way you think to fix it ?
Sahejdeep Singh
@Sah3j
Jun 11 2017 19:39
Hey guys, I'm on the tribute page challenge. I have added an image using
Marius Nicolae
@bytao7mao
Jun 11 2017 19:39
@fanfoune yeah, the parent div of the "about" and "portforlio" childs :)
Sahejdeep Singh
@Sah3j
Jun 11 2017 19:40
Hey guys, I'm on the tribute page challenge. I have added an image using <img src="https://i.ytimg.com/vi/iJrwY2MYFDU/maxresdefault.jpg" id="casey"> but when i call the image in css using #casey{img-width:10px;} i do not see any change to the image.
okay, its working all of a sudden :smile:
Marko
@vuckookv3
Jun 11 2017 19:42
Hey guys, here is my weather project: https://codepen.io/Wolfdog/pen/NpEpXV . I need to fix so I get my long and lat on time, before other function runs. How do I fix this?
BrunoM24
@BrunoM24
Jun 11 2017 19:46
@vuckookv3 you need to put your function getTemp inside the function that gives you the lat and long
to just run the getTemp after have the lat and long
MoonC
@MasterMoonC
Jun 11 2017 19:49
can someone hlp me with javascript?
BrunoM24
@BrunoM24
Jun 11 2017 19:51
@MasterMoonC what you need?
MoonC
@MasterMoonC
Jun 11 2017 19:51
it deals with escape sequences
it ask me to use 3 in a string but tells me I am incorrectly inputting it
Sahejdeep Singh
@Sah3j
Jun 11 2017 19:52
I want my webpage background blue, I am writing body{background-color:blue} in css but its not changing?
Marko
@vuckookv3
Jun 11 2017 19:52
@BrunoM24 ok, but now I get diffrent error, saying: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access
MoonC
@MasterMoonC
Jun 11 2017 19:53
var myStr; FirstLine\n\SecondLine\ThirdLine\r
BrunoM24
@BrunoM24
Jun 11 2017 19:54
@vuckookv3 show me your pen
I just added crossorigin.me/..., maybe I will fix it with this
MoonC
@MasterMoonC
Jun 11 2017 19:55
and it should be FirstLinenewlinebackslashSecondLinebackslashcarriage-returnThirdLine
Conrad Kay
@conradkay
Jun 11 2017 19:56
having trouble with react-redux app
https://github.com/conradkay/myCounter
BrunoM24
@BrunoM24
Jun 11 2017 19:58
@vuckookv3 I know how to solve that using jQuery, but I never had used a ajax get
Marko
@vuckookv3
Jun 11 2017 19:59
how?
Adam Bohannon
@abohannon
Jun 11 2017 20:04
Can anyone help me understand why my offline/online status seems to be random? Every time i refresh, one channel that said ONLINE before now says OFFLINE.
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "Starladder5", "habathcx", "RobotCaleb", "noobs2ninjas", "storbeck"];

for (var i = 0; i < channels.length; i++){
  var streamURL = "https://wind-bow.gomix.me/twitch-api/streams/"+ channels[i] +"?callback=?";
  console.log(streamURL);
  var apiURL = "https://wind-bow.gomix.me/twitch-api/users/"+ channels[i] +"?callback=?";

  $.getJSON(streamURL, function(strData){

    if (strData.stream === null){
      status = "<span class='new badge red' data-badge-caption='Offline'></span>";
    }
    else {
      status = "<span class='new badge' data-badge-caption='Online'></span>";
    }
console.log(status);

});

  $.getJSON(apiURL, function(data){
    // console.log(data);
    var bio,
        logo;

    if (data.bio === null){
      bio = "No description exists for this channel";
    } else {
      bio = data.bio;
    }
    if (data.logo === null){
      logo = "http://www.colorado.edu/ocg/sites/default/files/styles/small/public/people/person-placeholder_43.jpg";
    } else {
      logo = data.logo;
    }


    var userURL = "https://www.twitch.tv/" + data.name;
    // console.log(userURL);
    $(document).ready(function(){

      $("#js-display-results").append(
        "<div class='card horizontal hoverable'><div class='card-stacked'><div class='card-content'><a class='js-link' href="+ userURL +"><img id='js-image' src="+ logo +"></a><h5 id='js-title'>"+ data.display_name +"</h5><p id='js-description'>"+ bio +"</p></div><div class='card-action'><a class='js-link' href="+ userURL +">"+ status +"WATCH NOW</a></div></div></div>"
      );
    });

});


}
Gulsvi
@gulsvi
Jun 11 2017 20:08

@vuckookv3 you'll need to use JSONP to use the dark sky API:

    $.ajax({
      url: apiURL,
      dataType: "jsonp"
    }).done(showWeatherDetails);

No need for crossorigin.me if you do that.

BrunoM24
@BrunoM24
Jun 11 2017 20:08
@abohannon its always the same channel?
Gulsvi
@gulsvi
Jun 11 2017 20:08
You can also avoid using crossorigin.me if you use https://ipinfo.io/json for your location
Adam Bohannon
@abohannon
Jun 11 2017 20:09
i'm returning a few and it seems like the offline/online status is just random
however, console.log for both streamURL and apiURL always return in the same order
Also, the creation of each of my HTML elements is randomized. Every time I refresh, the channels are listed in a different order.
BrunoM24
@BrunoM24
Jun 11 2017 20:11
@abohannon that is normal, in my page too, because you are doing a request to a server, and dont respond always at same time, the first infomation comming is the first being appended
in my page the OgamingSC2 is always the first, but the second is always different
Adam Bohannon
@abohannon
Jun 11 2017 20:13
@BrunoM24 ah i see, that makes sense. So I wonder how to return the stream status at the same time as the channel data
I could try to include then both in the same getJSON request i suppose...
BrunoM24
@BrunoM24
Jun 11 2017 20:15
@abohannon I have done the second request inside of the first and dont have that problem
Tamas Csonka
@csnktms
Jun 11 2017 20:20
hey, can somebody help me with resolving a webpack problem?
Baibhav Gautam
@baibhavx
Jun 11 2017 20:34
https://codepen.io/baibhavx/pen/GEZyVG?editors=1012
This does not work in codePen but works in google chrome when I run it locally. Has anyone had a similar problem?
Its a simple API call does not work in codepen
Gulsvi
@gulsvi
Jun 11 2017 20:36
@baibhavx Codepen requires us to use https:// for all of our API calls. Unfortunately, the quote API you chose does not support https
Baibhav Gautam
@baibhavx
Jun 11 2017 20:36
Oh really?
thanks @SkyC0der I'll look for another API
CamperBot
@camperbot
Jun 11 2017 20:36
baibhavx sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1660 | @skyc0der |http://www.freecodecamp.com/skyc0der
Lots of people use this one: https://quotesondesign.com/api-v4-0/
Baibhav Gautam
@baibhavx
Jun 11 2017 20:37
Awesome thank you so much
Adam Bohannon
@abohannon
Jun 11 2017 20:42
@BrunoM24 the first getJSON request is just a test?
aRtoo
@artoodeeto
Jun 11 2017 20:45
hey guys do you have a tutorial how make a button random display in jquery?
Baibhav Gautam
@baibhavx
Jun 11 2017 20:46
@artoodeeto what do you mean by random display?
aRtoo
@artoodeeto
Jun 11 2017 20:47
@baibhavx like when i press the button it returns a random post. this is for quote challenge
BrunoM24
@BrunoM24
Jun 11 2017 20:47
@abohannon yes, to work just need two, I forget to delete the test
Baibhav Gautam
@baibhavx
Jun 11 2017 20:49
@artoodeeto I dont think there is any tutorial for that. I am working on the same problem as well. We need to find an API that returns a random quote in each call. I found one but since it did not support https request, I am looking for another one
aRtoo
@artoodeeto
Jun 11 2017 20:50
@baibhavx mine too. i just put 's' to make it https and it worked.
Baibhav Gautam
@baibhavx
Jun 11 2017 20:50
which api did you use?
Adam Bohannon
@abohannon
Jun 11 2017 21:13
@BrunoM24 just finished. Thank you for sharing your code, it really helped me understand forEach. I
CamperBot
@camperbot
Jun 11 2017 21:13
abohannon sends brownie points to @brunom24 :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @brunom24 |http://www.freecodecamp.com/brunom24
Adam Bohannon
@abohannon
Jun 11 2017 21:13
I'd been struggling.
BrunoM24
@BrunoM24
Jun 11 2017 21:16
@abohannon you dont need to use forEach, you can use normal for, yesterday I have read that is faster, but for this projects I will continue use forEach
Adam Bohannon
@abohannon
Jun 11 2017 21:17
forEach seemed more straightforward to me. My for loop was making things messy.
Botenga
@Botenga
Jun 11 2017 21:53
hey can anyone help me. I have been trying to center my progrs bar next to each other / side by side under my language symbols. I used bootstrap grid system and I cant figure why there next going in the same row.
please help in my proyect, i cant make jquery works
please help
jquery doesnt works and i dont know why
@Botenga put them in divs each one
i think soo..
Marius Nicolae
@bytao7mao
Jun 11 2017 22:03
@ingignacio92 nice choice :D
Clinton Shepard
@Taslack
Jun 11 2017 22:03
@ingign Your html structure is off.
Botenga
@Botenga
Jun 11 2017 22:04
@ingignacio92 can you elaborate more on what you mean
Ignacio Cano
@ingignacio92
Jun 11 2017 22:04
how??
whats wrong with my html ?
Clinton Shepard
@Taslack
Jun 11 2017 22:05
@ingignacio92 Where are you supposed to put <script>......scripting magic....</script>?
Ignacio Cano
@ingignacio92
Jun 11 2017 22:05
html or js ?
Clinton Shepard
@Taslack
Jun 11 2017 22:06
@ingignacio92 html is not a scripting language.
Marius Nicolae
@bytao7mao
Jun 11 2017 22:06
=)))
Clinton Shepard
@Taslack
Jun 11 2017 22:07
@ingignacio92 but you are supposed to put you scripting language into a certain place within <html><html>
Ignacio Cano
@ingignacio92
Jun 11 2017 22:07
noo
but my question is why cant i make jquery works
Clinton Shepard
@Taslack
Jun 11 2017 22:07
@ingignacio92 What is the proper place within <html><html> to put <script></script>?
Ignacio Cano
@ingignacio92
Jun 11 2017 22:07
head
?
Marius Nicolae
@bytao7mao
Jun 11 2017 22:08
@Taslack he don't need to put those <script> tags because in codepen you can add it in settings sepparately
Clinton Shepard
@Taslack
Jun 11 2017 22:08
@ingignaci And where do you have it now?
@bytao7mao I know...but they may now be using codepen and just copy and pasted.
hey can anyone help me. I have been trying to center my progrs bar next to each other / side by side under my language symbols. I used bootstrap grid system and I cant figure why there next going in the same row.
this is my code, i have configurated jquery in js settings and still doesnt works
Adam Bohannon
@abohannon
Jun 11 2017 22:10
anyone have a tip on how to hide a parent div when it contains a child with a particular class? on click I want to hide an element when there's an "offline" class in a child div.
Clinton Shepard
@Taslack
Jun 11 2017 22:11
@ingignacio92 Are you using codepen exclusively?
Ignacio Cano
@ingignacio92
Jun 11 2017 22:11
yes clinton
@Taslack
Clinton Shepard
@Taslack
Jun 11 2017 22:11
@ingignacio92 delete your <script></script> out of the html bar.
Ignacio Cano
@ingignacio92
Jun 11 2017 22:12
ok then?
Clinton Shepard
@Taslack
Jun 11 2017 22:12
@ingignacio92 Put it in the JS section.
@ingignacio92 And delete your font-awesome link.......since it is not linked to anything.
Ignacio Cano
@ingignacio92
Jun 11 2017 22:13
ok
done
but jquery doesnt works still
addClass function still doesnt work
Clinton Shepard
@Taslack
Jun 11 2017 22:14
@ingignacio92 Yep....I am getting there.
Ignacio Cano
@ingignacio92
Jun 11 2017 22:14
it works?
Clinton Shepard
@Taslack
Jun 11 2017 22:15
@ingignacio92 You missing the $ in front of your addClass.....$() is the jquery class, and you have to tell js that your using jquery to addClass.
$('h1').addClass('move');
Botenga
@Botenga
Jun 11 2017 22:16
:worried:
Ignacio Cano
@ingignacio92
Jun 11 2017 22:16
still doesnt works
Alem Kahrovic
@alemkahrov
Jun 11 2017 22:17
hey folks.. now i'm starting with the first challenge..a tribute page, my problem is that bootstrap isnt working properly. Here the link of my code:
Clinton Shepard
@Taslack
Jun 11 2017 22:18
@ingignacio92 And you are not going to be able to use font-awesome unless you fix the href to goto an actuall link.
@ingignacio92 Your still missing that little $
@abohannon Are you using jquery?
Adam Bohannon
@abohannon
Jun 11 2017 22:19
@Taslack yes
Ignacio Cano
@ingignacio92
Jun 11 2017 22:20
$(document).ready(function() {
$('h1').addClass('animated shake');
});
ihave this code
i think it is fine but it doesnt workd
Clinton Shepard
@Taslack
Jun 11 2017 22:21
@ingignacio92 your not loading in the proper css.....are you trying to use animate.css?
Ignacio Cano
@ingignacio92
Jun 11 2017 22:22
yess
what should i do ?
oo yaa
donee
i added animate css in the settings
that was all the problem
Clinton Shepard
@Taslack
Jun 11 2017 22:23
@abohannon Use jquery to select the child class and apply hide() on the parent div.
Adam Bohannon
@abohannon
Jun 11 2017 22:23
ok, i will give it a shot. Thank you @Taslack
CamperBot
@camperbot
Jun 11 2017 22:23
abohannon sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @taslack |http://www.freecodecamp.com/taslack
Botenga
@Botenga
Jun 11 2017 22:25
@alemkahrov its because you are not running bootstrap 3. your running bootstrap 4 paste this in your external css
Clinton Shepard
@Taslack
Jun 11 2017 22:28
@abohannon there are a lof of ways....you can add a hide class to that div....on button click
@ingignacio92 I see you have it working now.
Ignacio Cano
@ingignacio92
Jun 11 2017 22:29
ye, thanks a lot clinton
Clinton Shepard
@Taslack
Jun 11 2017 22:30
@ingignacio92 yep, no problem.
@abohannon $("button").click(function(){ $( "child class" ).parent().hide(); });
Clinton Shepard
@Taslack
Jun 11 2017 22:36
@Botenga Are you fogeting to define the row?
Chasen Bettinger
@chasen-bettinger
Jun 11 2017 22:37
I am having a problem with jquery deleting html, can anyone help me?
Clinton Shepard
@Taslack
Jun 11 2017 22:37
@chasen-bettinger Sure
it loads the html and then deletes it
In the DOM, my html doesn't exist
Botenga
@Botenga
Jun 11 2017 22:38
@Taslack what do you mean
Clinton Shepard
@Taslack
Jun 11 2017 22:42

@Botenga Bootstraps basic structure.
``` <div class="row"> <div class="col-*-*"></div>
</div>

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

<div class="row">
...
</div> ```

Chasen Bettinger
@chasen-bettinger
Jun 11 2017 22:43
figured it out
Clinton Shepard
@Taslack
Jun 11 2017 22:44
@chasen-bettinger Excellent, sorry was getting to you next. ;-)
Chasen Bettinger
@chasen-bettinger
Jun 11 2017 22:45
No problem, thank you for reaching out
Clinton Shepard
@Taslack
Jun 11 2017 22:46
@chasen-bettinger I like your backround transition. You have an eye for color matching.
Adam Bohannon
@abohannon
Jun 11 2017 22:48
@Taslack so i figure it out but is there a way to dry this out?
```
$(".js-online").click(function(){
  $(".red, .grey").parent().parent().parent().parent().hide();
  $(".green").parent().parent().parent().parent().show();
});
so many parents
Clinton Shepard
@Taslack
Jun 11 2017 22:48
@abohannon lol....that works?
Adam Bohannon
@abohannon
Jun 11 2017 22:48
haha yes
Clinton Shepard
@Taslack
Jun 11 2017 22:49
@abohannon how far in is your child?
Adam Bohannon
@abohannon
Jun 11 2017 22:49
there's gotta be a simpler way to say "On click, target this class and if it's present, hide this element"
A few divs in. I'm using MaterializeCss framework and each result is formatted in a card
i need to hide the cards onclick based on online status
Clinton Shepard
@Taslack
Jun 11 2017 22:50
@abohannon ya you can just target the parent. You have a pen?
Adam Bohannon
@abohannon
Jun 11 2017 22:51
still working in atom right now, but i can get it in a pen in asecond
Clinton Shepard
@Taslack
Jun 11 2017 22:51
@abohannon no thats fine
@abohannon so you can do .hasClass
Adam Bohannon
@abohannon
Jun 11 2017 22:55
ok i will play around with that
Clinton Shepard
@Taslack
Jun 11 2017 22:55
$(".red, .grey").parent().hasClass("Parent class").hide();
Botenga
@Botenga
Jun 11 2017 22:56
@Taslack my rows are difined
Botenga
@Botenga
Jun 11 2017 23:04
:worried: (
Clinton Shepard
@Taslack
Jun 11 2017 23:10
@Botenga K looking through it, your missing some div....have some extra /div in the beginning. Just doing some code cleanup right now.
Botenga
@Botenga
Jun 11 2017 23:10
@Taslack i will get to it
Clinton Shepard
@Taslack
Jun 11 2017 23:11
@Botenga Wish I could save it for you. ;-P
Botenga
@Botenga
Jun 11 2017 23:11
@Taslack
did it line up thoguh
Botenga
@Botenga
Jun 11 2017 23:13
@Taslack thanks for the advice about clean up the code i will get to that . Though the progress bar still didnt line up
CamperBot
@camperbot
Jun 11 2017 23:13
botenga sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @taslack |http://www.freecodecamp.com/taslack
Clinton Shepard
@Taslack
Jun 11 2017 23:14
@Botenga Check out the pen again.
Botenga
@Botenga
Jun 11 2017 23:15
lol why did it line up this time
is it because you cleaned up
Clinton Shepard
@Taslack
Jun 11 2017 23:16
@Botenga So be carefull with your closing of divs.....just proper closing of your divs fixed the problem.
Botenga
@Botenga
Jun 11 2017 23:16
@Taslack whereare the divs i messed up on near the begining or end
Clinton Shepard
@Taslack
Jun 11 2017 23:17

@Botenga ```

<div class="col-xs-4"> Whatever Progress Bar </div>
```

None of your col class had closing divs.....or they were not in the right place.
@Botenga Just every once in a while to a tidy on your code....and maybe an Analyze as well.
@Botenga And remember all your link have to be https.....to include images. Codepen is that way now.
Botenga
@Botenga
Jun 11 2017 23:22
@Taslack once i start writting alot of code its kinda hard to follow cause it looks correct because there is so much code
Clinton Shepard
@Taslack
Jun 11 2017 23:23
@abohannon You did a trump quote generator.....is it good?
@Botenga LOL, especially when you start adjusting and playing around with it. The one thing I noticed with your code is the structure problems. You have to get in the habit of keeping the structure correct, just going back and making sure, especially before you go on and troubleshoot. Most codeing errors are caused by improper structure.
@Botenga When you open something, create the closing tag as well.
@Botenga Eventually you will notice these problems right away, you just have to keep codeing and making those mistakes to get there. ;-P
Clinton Shepard
@Taslack
Jun 11 2017 23:29
@Botenga then once you get it down you will start using a proper IDE like "Atom", and you will be like why didnt I use one of these from the start.
@Botenga IDE = Integrated Development Environment
@Botenga Can I delete that pen?
Botenga
@Botenga
Jun 11 2017 23:36
@Taslack im failing to see why you have 7 closing divs instead of 5
and why did you close the js col on itself
Clinton Shepard
@Taslack
Jun 11 2017 23:37
@Botenga those may have been my fault.
@Botenga I just threw a bunch of /divs in there.
@Botenga What line for the js col?
@Botenga the image or the progress bar?
Botenga
@Botenga
Jun 11 2017 23:39
        <div class="col-xs-4">
        </div>
you closed the js col and didnt nest any divs inside it
Clinton Shepard
@Taslack
Jun 11 2017 23:39
@Botenga Oh that, was just playing around with something.
@Botenga do a refresh, should be different now.
@Botenga unless you forked it.
Botenga
@Botenga
Jun 11 2017 23:40
@Taslack i would never just copy the code without understanding that is a big no no if you are trying to become a programmer
Clinton Shepard
@Taslack
Jun 11 2017 23:41
@Botenga I like your style and jib my friend.
Botenga
@Botenga
Jun 11 2017 23:42
@Taslack are you sure you fixed it
im rerunning and still seeing same result
@Botenga I am not sure how fast codepen updates.....it appears to be slow.
Botenga
@Botenga
Jun 11 2017 23:48
@Taslack lol i check back to my code and that js issue was my mistake hahahaha
nvm
Clinton Shepard
@Taslack
Jun 11 2017 23:52
@Botenga LOL, oh, ya was wondering. I did move your code to see if I could just put the progress bars under your images without using another row.
Botenga
@Botenga
Jun 11 2017 23:52
lol
Clinton Shepard
@Taslack
Jun 11 2017 23:53
@Botenga It works but I didnt like the formating.
Botenga
@Botenga
Jun 11 2017 23:56
i have been doing this project for a while now and i really appreciate how FFC give people these projects to do because it really is a learning experience you will never forget. Also you feel proud of the project when you go back on it because you know the hard work you put into it.