These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Feb 2017
Gulsvi
@gulsvi
Feb 18 2017 00:00
It's like trying to put two clickable items in one.
Zack Richardson
@ZackRich12
Feb 18 2017 00:03
@SkyCoder01 what about this
 <div class = "">
<form style="display: inline" action="http:/facebook.com" method="get">
  <button>Visit Website</button>
</form>



  </div>

<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
Gulsvi
@gulsvi
Feb 18 2017 00:05
@ZackRich12 It should be https://facebook.com, but I don't think that will work in an iFrame
Arash D
@ArashDai
Feb 18 2017 00:05
my bad, lear, something new everyday
Gulsvi
@gulsvi
Feb 18 2017 00:05
Depends on where you have the code, I guess
In the end, just use a <a> for navigating somewhere - that's guaranteed to work.
Defane-Albaster
@Defane-Albaster
Feb 18 2017 00:08
im on the build a tribute page project part
havetn started yet
how did you guys like it?
Gulsvi
@gulsvi
Feb 18 2017 00:16
@Defane-Albaster Honestly, it was good practice, but I had more fun with the weather project :)
Defane-Albaster
@Defane-Albaster
Feb 18 2017 00:17
@SkyCoder01 alrite thanks bro
CamperBot
@camperbot
Feb 18 2017 00:17
defane-albaster sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Defane-Albaster
@Defane-Albaster
Feb 18 2017 00:18
ive already forgotten the basics lol. since i was a bit busy. this is gonna be interesting
Zack Richardson
@ZackRich12
Feb 18 2017 00:43
 <div class = "">
<form style="display: inline" action="http:/facebook.com" method="get">
  <button>Visit Website</button>
</form>



  </div>

<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
what is the purpose of style= "display: inline"
Gulsvi
@gulsvi
Feb 18 2017 00:51
@ZackRich12 <form> is a block element, where <button> behaves like an inline element, so it's an attempt to emulate a button by making it inline.
Try this:
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
and compare with a normal button:
<button>button</button>
<button>button</button>
<button>button</button>
Gulsvi
@gulsvi
Feb 18 2017 00:56
image.png
Zack Richardson
@ZackRich12
Feb 18 2017 00:58
@SkyCoder01 Gotcha, Thank you
CamperBot
@camperbot
Feb 18 2017 00:58
zackrich12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Zack Richardson
@ZackRich12
Feb 18 2017 00:58
@SkyCoder01 you have been a big help tonight
@SkyCoder01 i ended up using a form element for the button
Gulsvi
@gulsvi
Feb 18 2017 01:00
Happy to help :+1:
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:33
hello guys I am at a "Build a Tribute Page" section
It is not letting me to go forward, anyone knows why?
anyone here
nobody is here?
Daris Shamsi
@darshams
Feb 18 2017 01:38
Hey all
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:39
hi
Daris Shamsi
@darshams
Feb 18 2017 01:39
@pshiwakoti1 You must complete the challenge or refresh the browser
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:39
ok
Daris Shamsi
@darshams
Feb 18 2017 01:39
I am just starting this challenge myself
Anyone have a recommendation on where to start
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:39
this is a tricky challenge
Daris Shamsi
@darshams
Feb 18 2017 01:39
Yeah!
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:39
i don't know how to start and where
Daris Shamsi
@darshams
Feb 18 2017 01:39
I'm overwhelmed haha
same
I'm going to just look at the damn code lol
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:40
do I have to open a new account at codePen.io
Daris Shamsi
@darshams
Feb 18 2017 01:40
yeah
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:40
and create a website?
Daris Shamsi
@darshams
Feb 18 2017 01:40
no
watch the video
it will explain
Prakash Shiwakoti
@pshiwakoti1
Feb 18 2017 01:40
ok watching
mattiheubner
@mattiheubner
Feb 18 2017 03:30
Hey guys, I basically made it to the tribute page exercise in like 3-4h - so it thought it was pretty easy. But now with the tribute page I am pretty overwhelmed. Any hints?
Tony Miri
@TonyMiri
Feb 18 2017 03:31
Hey everyone. Just started working on my tic-tac-toe game and I'm wondering if there is a good way to maintain aspect ratio when dealing with resizing screens. I've been using vmin to make my div elements responsive, but that gives me a rectangle when I would like my game board to remain square at all times.
Alex
@Sevohan
Feb 18 2017 03:32
Hey guys, I'm trying to put an image up online so I can use it in my portfolio but I don't really know where I should go to put up a picture of myself as a profile picture. Any suggestions?
Tony Miri
@TonyMiri
Feb 18 2017 03:33
@mattiheubner That feeling of being overwhelmed is very common. When starting a project it helps to break down everything you'll need to do in pseudo-code (meaning plain english comments), then take everything one step at a time.
@Sevohan You can use dropbox or a similar cloud hosting service, or you can use AWS to host your files.
@mattiheubner If you are really stumped it might not hurt to go over to Codecademy and try out some of their website building modules for a little more practice before you dive in.
mattiheubner
@mattiheubner
Feb 18 2017 03:36
@FatTone225 thanks so much :) Will check it out!
CamperBot
@camperbot
Feb 18 2017 03:36
mattiheubner sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @fattone225 |http://www.freecodecamp.com/fattone225
Arash D
@ArashDai
Feb 18 2017 03:43
does anybody here know redux/react
that and how to use promises
im just going to walk away before i burn my computer to the ground
mnghm
@mnghm
Feb 18 2017 03:48
@Sevohan Have you tried Dropbox?
Nazar
@IsaakNazar
Feb 18 2017 04:02
@sorinr ok thx
CamperBot
@camperbot
Feb 18 2017 04:02
isaaknazar sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1176 | @sorinr |http://www.freecodecamp.com/sorinr
Arash D
@ArashDai
Feb 18 2017 04:06
woohoo just finished my weather app, it took all day which is dissapointing
Nazar
@IsaakNazar
Feb 18 2017 04:07
hi everyone Does anybody here use atom or brackets?
Arash D
@ArashDai
Feb 18 2017 04:07
vs code here
Bashir Harrell
@bookofbash
Feb 18 2017 04:09
Im having an issue with the <p> and <img> in my #about <div> I cant get them to sit side by side and also when I scroll they go above the #menu
Please help
Arash D
@ArashDai
Feb 18 2017 04:09
display:inline
Patrick
@PatrickonGitHub
Feb 18 2017 04:09
<div class = "silver-background">
.silver-background {
background-color:silver
}
<p>Things cats love:</p>
Arash D
@ArashDai
Feb 18 2017 04:10
is that a question patrick
Bashir Harrell
@bookofbash
Feb 18 2017 04:10
@ArashDai was that an answer to me?
Patrick
@PatrickonGitHub
Feb 18 2017 04:10
Having trouble with the adding color to div element exercise...any thoughts Haha...supposed to be
Arash D
@ArashDai
Feb 18 2017 04:11
yes book
Patrick
@PatrickonGitHub
Feb 18 2017 04:11
I established the class, but I can't get it to successfully assign the silver color. Does that look okay?
Arash D
@ArashDai
Feb 18 2017 04:12
looks fine to me but let me see it on codepe
codepen*
Priyanka
@erpriyanka
Feb 18 2017 04:12
hii guys, I am at a "Build a Tribute Page" section
Which user stories I should use ??
badalsaibo
@heyDante
Feb 18 2017 04:12
@PatrickonGitHub .silver-background { background-color:silver } this should go under style
Patrick
@PatrickonGitHub
Feb 18 2017 04:12
Thanks, Arash...how do I share it on codepen? I'm new to this, so I don't know
Arash D
@ArashDai
Feb 18 2017 04:13
listen to badal
yea that should all be in your css sheet
well the css
im a bad teacher
here one sec
badalsaibo
@heyDante
Feb 18 2017 04:13
@erpriyanka Fulfill the user stories said and just make the tribute page to anyone you feel like.
Bashir Harrell
@bookofbash
Feb 18 2017 04:13
@ArashDai Really? I cant imagine it just my computer. The text inside the <p> moves out of the <div> when i make my screen smaller, the <img> does as well
Patrick
@PatrickonGitHub
Feb 18 2017 04:13
Gotcha....thanks everyone! i'll give it a whirl
badalsaibo
@heyDante
Feb 18 2017 04:13
@ArashDai lol it happens sometimes
Priyanka
@erpriyanka
Feb 18 2017 04:14
thank u was bit confused how to start it @heyDante
CamperBot
@camperbot
Feb 18 2017 04:14
erpriyanka sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @heydante |http://www.freecodecamp.com/heydante
Arash D
@ArashDai
Feb 18 2017 04:15
im working on reading your code book but it aint easy lol
Bashir Harrell
@bookofbash
Feb 18 2017 04:16
@ArashDai Its a mess I am sure, started out nice, but then started having problems and moving things so much!
Arash D
@ArashDai
Feb 18 2017 04:17
so basicly
if you want them next to each other i would put them inside the same parent div and give them display:inline in your css
but
your columns are also making the p take up the full with because you have col-md-12
I think you need to take some time to learn the basics of css, judging by your class names
Bashir Harrell
@bookofbash
Feb 18 2017 04:20
Thats good advice, off to MDN for me
Arash D
@ArashDai
Feb 18 2017 04:21
i would help more but im tired, best of luck
Bashir Harrell
@bookofbash
Feb 18 2017 04:21
Thanks
@ArashDai Thank you for the help. Get some rest.
CamperBot
@camperbot
Feb 18 2017 04:21
:cookie: 156 | @arashdai |http://www.freecodecamp.com/arashdai
bookofbash sends brownie points to @arashdai :sparkles: :thumbsup: :sparkles:
Mac
@itchick85
Feb 18 2017 04:41
how do I move elements to like the lower middle of the page?
judge2dt
@judge2dt
Feb 18 2017 04:45
does anyone know how to evenly distribute buttons with bootstrap? Im working on my portfolio and theyre all squished together
badalsaibo
@heyDante
Feb 18 2017 04:46
@itchick85 you mean positioning
@judge2dt <span> it
judge2dt
@judge2dt
Feb 18 2017 04:52
@heyDante where would i but <span>?
Johnny
@jtan3
Feb 18 2017 04:53
@judge2dt link your page
badalsaibo
@heyDante
Feb 18 2017 05:00
@judge2dt where you want the buttons
Johnny
@jtan3
Feb 18 2017 05:01
@judge2dt https://www.w3schools.com/css/css_navbar.asp read this for a navbar
badalsaibo
@heyDante
Feb 18 2017 05:01
@judge2dt shift your style codes to the CSS bar
judge2dt
@judge2dt
Feb 18 2017 05:02
@heyDante Why's that?
badalsaibo
@heyDante
Feb 18 2017 05:03
@judge2dt they have given a separate block for your CSS code. It makes the code looks more organised
judge2dt
@judge2dt
Feb 18 2017 05:05
@thanks!
@heyDante Thanks!
CamperBot
@camperbot
Feb 18 2017 05:05
judge2dt sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @heydante |http://www.freecodecamp.com/heydante
Harrison
@VideoGC
Feb 18 2017 05:06
I could use some help. What is is the statement for importing google's fonts, and what file do you place it in?
Johnny
@jtan3
Feb 18 2017 05:06
@judge2dt https://www.w3schools.com/howto/howto_js_topnav.asp i think you want to this with your buttons?
badalsaibo
@heyDante
Feb 18 2017 05:07
@VideoGC https://fonts.google.com/ see there
judge2dt
@judge2dt
Feb 18 2017 05:07
@jtan3 I'll try it
badalsaibo
@heyDante
Feb 18 2017 05:09
@judge2dt you know the grid system
Harrison
@VideoGC
Feb 18 2017 05:10
@heyDante thanks, bro
CamperBot
@camperbot
Feb 18 2017 05:10
videogc sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @heydante |http://www.freecodecamp.com/heydante
judge2dt
@judge2dt
Feb 18 2017 05:12
@heyDante are you talking about col--?
ex: col-xs-8
badalsaibo
@heyDante
Feb 18 2017 05:13
yep.
judge2dt
@judge2dt
Feb 18 2017 05:14
mine is messed up, idk what to do about it since it wont let me do col-md-8 only xs for some reason
badalsaibo
@heyDante
Feb 18 2017 05:15
follow the guys lesson up there. pretty much good documentation for boostrap and all.
Alexander Makarov
@Nexmean
Feb 18 2017 05:27
<div class="thumbnail">
    <img src="https://dfmonet.files.wordpress.com/2012/09/astral_14-sept-65daysofstatic.jpg" alt="65daysofstatic" class="img-responsive">
    <div class="caption text-center">
            They made really fantastic music.
    </div>
</div>
Hi, guys. What's wrong with this thumbnails? It just don't work.
Ken Nawrocki
@nawrockp
Feb 18 2017 05:31
@Nexmean Are you sure you have bootstrap loaded?
Alexander Makarov
@Nexmean
Feb 18 2017 05:31
@nawrockp yes, i sure
Ken Nawrocki
@nawrockp
Feb 18 2017 05:32
well from what I see that image should be responsive.. When you resize the browser ,does it decrease in size?
@Nexmean If you want to make it like a bootstrap thumbnail, you should also add this class to the image: img-thumbnail
Alexander Makarov
@Nexmean
Feb 18 2017 05:34

well from what I see that image should be responsive.. When you resize the browser ,does it decrease in size?

No, cause I am idiot that use img-responsive on image nested in <div class="container">

Nazar
@IsaakNazar
Feb 18 2017 05:35
guys does anybody here work with brackets?
Alexander Makarov
@Nexmean
Feb 18 2017 05:37
@nawrockp strange, there is no information about img-thumbnail on https://getbootstrap.com/components/#thumbnails-custom-content
@Nexmean I can't say I have ever really used that class though.
@Nexmean but it seems you want you image to be smaller? If so you would have to give the "thumbnail" class a max-width
badalsaibo
@heyDante
Feb 18 2017 05:41
<div class="thumbnail">
    <img src="https://dfmonet.files.wordpress.com/2012/09/astral_14-sept-65daysofstatic.jpg" alt="65daysofstatic" class="img-responsive">
    <div class="caption text-center">
            They made really fantastic music.
    </div>
</div>
Hi, guys. What's wrong with this thumbnails? It just don't work.
Alexander Makarov
@Nexmean
Feb 18 2017 05:41
@nawrockp I want to put sentence into thumbnail with picture, but it does not work
badalsaibo
@heyDante
Feb 18 2017 05:41
code seems fine. it works for me
Alexander Makarov
@Nexmean
Feb 18 2017 05:43
@heyDante look at this: https://codepen.io/nexmean/pen/KaLQQv. It does not work here.
Ken Nawrocki
@nawrockp
Feb 18 2017 05:46
David Espinoza
@DavidEspinoza
Feb 18 2017 05:58
should i use bootstrap for the portfolio? I feel I have to know html and css well and the underlying concepts to get bootstrap.
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 06:24
@DavidEspinoza Bootstrap has a bigger learning curve than HTML and CSS. Unless you get comfortable with CSS, don't go for any frameworks :)
Victor
@Evaderei
Feb 18 2017 06:32
Hi, I'm working on Leaderboard project
I'm trying to make it so my table rows have alternating background colors
David Espinoza
@DavidEspinoza
Feb 18 2017 06:38
thnx @NitinNair89
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 06:38
@Evaderei You can do it via CSS. Something like this -
tr:nth-child(odd) { /*  Replace this with 'even' to affect even rows (2,4,6,...) */
  background-color:orange; /* Any color you wish */
}
CamperBot
@camperbot
Feb 18 2017 06:38
davidespinoza sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 06:39
You're welcome @DavidEspinoza If you face difficulties in Bootstrap, let me know. I will try to help you :)
Victor
@Evaderei
Feb 18 2017 06:40
@NitinNair89 oh snap, thank you
CamperBot
@camperbot
Feb 18 2017 06:40
evaderei sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 06:40
You're welcome @Evaderei :)
thoughts?
it's good enough for me haha
alrighty, onward to the next exercise
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 06:51
@Evaderei Maybe center the serial numbers and add some padding for the contents. :)
Atharva Pandey
@atharvajava
Feb 18 2017 06:52
https://codepen.io/atharvajava/pen/YNRBBa?editors=0010 i dont get it what i messed up but when i do multiple calculation this doesnt come riight ?
zeddmacharia
@zeddmacharia
Feb 18 2017 06:55
<div class="container-fluid">
<div class="row"><div class="col-xs-12">
<div class="well">
</div>
</div>
</div>
am stuck,how do i create a wellin the above code
danraybernard
@danraybernard
Feb 18 2017 06:57
http://codepen.io/danraybernard/pen/GrLLBL
I was having trouble trying to make my anchor links smooth scroll. I found some code from searching google and it works, but I'm having a really hard time understanding why. Can someone help explain the jQuery code?
particularly the weird mountain looking symbols here if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 06:59
It's Regular Expressions @danraybernard
@zeddmacharia Did you import necessary Bootstrap files?
@atharvajava Your multiplication is working fine
danraybernard
@danraybernard
Feb 18 2017 07:01
@NitinNair89 thanks! I'll have to look into it and try to see if I can understand more but now I know what to search for
CamperBot
@camperbot
Feb 18 2017 07:01
danraybernard sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:03
welcome
zeddmacharia
@zeddmacharia
Feb 18 2017 07:14
@NitinNair89 which bootstrap files
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:16
the CSS and JS files @zeddmacharia
Finagl3
@Finagl3
Feb 18 2017 07:18
Anyone still here?
zeddmacharia
@zeddmacharia
Feb 18 2017 07:19
@NitinNair89 no i did not,this is my first front end development project,how do i do that
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:20
if you are using codepen, then go to the pen settings window and you can add from there @zeddmacharia
Atharva Pandey
@atharvajava
Feb 18 2017 07:28
@NitinNair89 it is i know the thing that is not working fine is suppose i do 10 * 5 / 5 it gives some weired answer similarly when i do 10+5-5 it gives weired answer it is working only when i am not changing between operators
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:29
maybe something to do with the way you store and display values.
Atharva Pandey
@atharvajava
Feb 18 2017 07:30
@NitinNair89 well i guess i am just not getting it what the shit is going on here ;-; i am stuck here since a week
i think i ll just rewrite all the jquery
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:33
:P
Finagl3
@Finagl3
Feb 18 2017 07:34
On my portfolio project, the background-size: cover; stopped working. For no discernable reason...
how do i make my image smaller
zeddmacharia
@zeddmacharia
Feb 18 2017 07:52
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:55
@zeddmacharia write you CSS inside CSS window only. Don't write it inside HTML window. And the property name is width not width-size
  img{
    width: 20px;
  }
Please check
Zhanibek
@zhann1982
Feb 18 2017 07:57
Hello everyone! I have problem with google chrome. My local weather pen works in IE and Firefox, but it doesn't work in Chrome. Someone told me that the reason is the difference between http and https. But i don't think so. What do you say? http://codepen.io/zhann1982/pen/XpGgXJ
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 07:57
check developer console of google chrome
Zhanibek
@zhann1982
Feb 18 2017 07:59
@NitinNair89 yes! :(
@NitinNair89 The problem is https
@NitinNair89 Any suggestions how to fix it?
zeddmacharia
@zeddmacharia
Feb 18 2017 08:01
@NitinNair89 i finally got it..thanx for the help#
CamperBot
@camperbot
Feb 18 2017 08:01
zeddmacharia sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:02
Welcome @zeddmacharia :)
@zhann1982 check the crossorigin.me website
Nazar
@IsaakNazar
Feb 18 2017 08:09
whats up guys, need some help with text editors!
@NitinNair89 hi!
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:11
Hi @IsaakNazar :)
Zhanibek
@zhann1982
Feb 18 2017 08:11
@NitinNair89 where should i use crossorigin.me. In the address of codepen or in url for json?
Victor
@Evaderei
Feb 18 2017 08:12
how do i make it so pressing enter on a form doesnt go anywhere?
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:12
@zhann1982 From their website - "When you need to access a resource from a website that isn't CORS-enabled, append 'http://crossorigin.me' to the beginning of that URL"
Nazar
@IsaakNazar
Feb 18 2017 08:12
@NitinNair89 Can I ask U, every html files must be named "index"?
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:13
@IsaakNazar No, it depends on the dev
@Evaderei Why you need form? Remove the action attribute
just keep <form> tag
Essentially
$("#formId").submit(function(e){
    return false;
});
Idk if that's what you were asking
Nazar
@IsaakNazar
Feb 18 2017 08:17
@NitinNair89 I've watched on Youtube, and every html files must be named index, coz with index files starts the main page of browsers
Victor
@Evaderei
Feb 18 2017 08:17
@aboorde thanks, workedl ike a charm
CamperBot
@camperbot
Feb 18 2017 08:17
evaderei sends brownie points to @aboorde :sparkles: :thumbsup: :sparkles:
CamperBot
@camperbot
Feb 18 2017 08:17
:cookie: 438 | @aboorde |http://www.freecodecamp.com/aboorde
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:19
@IsaakNazar As i said before, it depends on the Developer and how the server handles it. I can serve HTML files with a name other than index.html in my web server. It's not a mandate, but rather a practice.
zeddmacharia
@zeddmacharia
Feb 18 2017 08:19
how do i center my p element
@NitinNair89 http://codepen.io/macharia95/pen/PWvPLa how do i center my p element
Nazar
@IsaakNazar
Feb 18 2017 08:20
@NitinNair89 ok :+1:
zeddmacharia
@zeddmacharia
Feb 18 2017 08:21
@NitinNair89 ive seen the error
Zhanibek
@zhann1982
Feb 18 2017 08:21
@NitinNair89 i used crossorigin.me and dev console is empty. But my navigator.geolocation didn't work out.
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:23
@zeddmacharia Your <p> is already centered with the "text-center" class.
@zhann1982 Oh, not sure.
Zhanibek
@zhann1982
Feb 18 2017 08:26
@NitinNair89 My pen works in IE and Firefox. Is it ok if I send my pen as finished to FCC? Or should I first fix the problem?
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:27
it's ok if you send :)
Zhanibek
@zhann1982
Feb 18 2017 08:27
Ok @NitinNair89 thank you!
CamperBot
@camperbot
Feb 18 2017 08:27
zhann1982 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 08:35
:)
Ievgen
@myteststudy
Feb 18 2017 08:59
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
And I have a question: How to create JSON file to be available? How to make a link on him?
My code is next (not work):
$(document).ready(function() {
    $(".nextButton").on("click", function(){
      $.getJSON("http://api.forismatic.com/api/1.0/", function(json) {
        $(".quoteText").html(JSON.stringify(json));        
      });     });  });
Ievgen
@myteststudy
Feb 18 2017 09:07
@shawon1165 I already seen this, but i didn't know what to do with this. In freecodecamp courses tell nothing about it.
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 09:08
@myteststudy You have to read their documentation on how to use API
Ievgen
@myteststudy
Feb 18 2017 09:09
@NitinNair89 please give me a link
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 09:11
Ievgen
@myteststudy
Feb 18 2017 09:12
@NitinNair89 thank you
CamperBot
@camperbot
Feb 18 2017 09:12
myteststudy sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
WiseKodama
@WiseKodama
Feb 18 2017 09:26
Greetings, can I get anyone to test drive my local weather app?
Finagl3
@Finagl3
Feb 18 2017 09:27
@WiseKodama in would but none of them work on my phine. Something funny with location settings or something. You can try asking on the FCC earth fb page
WiseKodama
@WiseKodama
Feb 18 2017 09:28
@Finagl3 Ok, I'll see if anyone else wants to
Ievgen
@myteststudy
Feb 18 2017 10:11
@NitinNair89 I don't get it, where I must use "getQuote" method? Instead a "getJSON" method?
And how to set parameters: "format", "key", "lang" and other.
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 10:12
@myteststudy your URL should be something like this - http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote similar to what @shawon1165 said
Ievgen
@myteststudy
Feb 18 2017 10:16
@NitinNair89 Like this?
$(document).ready(function() {
    $(".nextButton").on("click", function(){
      $.getQuote(" http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote", function(json) {
        $(".quoteText").html(JSON.stringify(json));
              });    });  });
Nitin Chandran Nair
@NitinNair89
Feb 18 2017 10:21
yes
theghost1980
@theghost1980
Feb 18 2017 10:28
Hi there guys. is there a guide with basic commands? I'm running parity on MacOS, but it has stopped, so i would like to run it manually also know what's the problem
lazypterodactyl
@lazypterodactyl
Feb 18 2017 10:29
Does anyone think they could help me with the simon says project? I need to figure out how to stop the overlapped part of my buttons from being pressable/ interfering with the "face" part of my simon says. http://codepen.io/Lazypterodactyl/pen/xgMYBV
lazypterodactyl
@lazypterodactyl
Feb 18 2017 11:09
Nvm Got it
Stefaan Walleghem
@lawfets
Feb 18 2017 11:09
good midday everyone, I have a question, I'm starting with the twitch tv api and I checked the example, but if I click on a link in the example, all I get is a blank screen, is that only me? Or do other people have the same problem?
lazypterodactyl
@lazypterodactyl
Feb 18 2017 11:13
I'm can run it fine. You might want to change browsers. Which one are you using?
h1tag
@h1tag
Feb 18 2017 11:13
@lawfets no, I think everybody has this problem, it's because of Codepen sandboxing
Stefaan Walleghem
@lawfets
Feb 18 2017 11:47
@fortMaximus ah, ok, thx
CamperBot
@camperbot
Feb 18 2017 11:47
lawfets sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Stefaan Walleghem
@lawfets
Feb 18 2017 11:47
@lazypterodactyl were you talking to me? sorry, I was afk for a while
Josh
@joshfilippi
Feb 18 2017 11:53
Hello, I'm working on the alarm clock and want to use an audio file. Is there a good audio file hosting website anyone can suggest?
lazypterodactyl
@lazypterodactyl
Feb 18 2017 11:58
@lawfets Yeah, it's all cool
Dany Din
@danydin
Feb 18 2017 12:10
Few questions regarding my code:
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
  1. Why if I write the ul.textContent = ''; outside the eventListener it won't reset the ul element?
  2. How I make the li to update just last li row and not all the li elements
  3. How I bind the eventListener to run before the function as right now it starts to listen from the second submit-button click .
  4. How I make it to work inside an object
    Thanks!!
playingwithinfinity
@playingwithinfinity
Feb 18 2017 12:40
Anybody done with the Tic Tac Game? If so, are there any good resources for Minimax?
Evan
@EvanDCP
Feb 18 2017 13:35
hey guys can you check if my tic tac toe is working? http://codepen.io/EvanDCP18/full/PWvddL/
achudoz
@achudoz
Feb 18 2017 13:35
Hi, can anyone advice me on why my second . getJSON doesn't run when loading the page? I can get it to run just fine by binding it to a button (which you can see is commented out for now), but I want the code to run when loading the page. I am sure it is a matter of some stupidly simple rule I ignored
http://codepen.io/achudoz/pen/bgJQLx?editors=1011
@EvanDCP it seems to work. One minor thing i noticed is that the game does not announce a draw
Stefaan Walleghem
@lawfets
Feb 18 2017 13:38
@lazypterodactyl thx
CamperBot
@camperbot
Feb 18 2017 13:38
lawfets sends brownie points to @lazypterodactyl :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @lazypterodactyl |http://www.freecodecamp.com/lazypterodactyl
Daniel Aguila
@MxLooney
Feb 18 2017 13:38
@EvanDCP it works
achudoz
@achudoz
Feb 18 2017 13:38
@EvanDCP also when a turn is made, the buttons change size. It would look much better with fixed-size buttons
Evan
@EvanDCP
Feb 18 2017 13:41
@achudoz how come the buttons change size? O.o oh the draw thing! thanks man
CamperBot
@camperbot
Feb 18 2017 13:41
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @achudoz |http://www.freecodecamp.com/achudoz
achudoz
@achudoz
Feb 18 2017 13:44
@EvanDCP the button changes to accomodate the character in it and since #, X and 0 all have different widths, the button too changes its size to mach the character. To put it plainly, when I make a move as X, the button shrinks by about 5px
Evan
@EvanDCP
Feb 18 2017 13:46
@achudoz I see, that's weird tho because I've put all buttons size 40px. They are supposed to all have the same height/width/size :/
achudoz
@achudoz
Feb 18 2017 13:49
@EvanDCP when I run it in editor view, the buttons stay fixed. In full view however, they are resizing like crazy
which is strange...
Evan
@EvanDCP
Feb 18 2017 13:49
what about now? can you check? I've done some changes http://codepen.io/EvanDCP18/full/PWvddL/
achudoz
@achudoz
Feb 18 2017 13:51
now it looks great. button resizing is gone
Evan
@EvanDCP
Feb 18 2017 13:51
@achudoz awesome! thanks man
CamperBot
@camperbot
Feb 18 2017 13:51
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave achudoz points
achudoz
@achudoz
Feb 18 2017 13:52
:thumbsup:
Robert Collins
@robbiemu
Feb 18 2017 13:55
can anyone help me get this SCSS working? https://jsfiddle.net/sp5xhmoo/4/
Yerrapotu Manojkiran
@nani554
Feb 18 2017 14:05
Hi guys
how many here felt that json and ajax is more of spoon feeding and very less of learning
the only thing i did was copy and paste and zero learning
@freecodecamp if you are seeing this ,change it
achudoz
@achudoz
Feb 18 2017 14:14
@nani554 well yeah that is exactly what it is. It was a big step from that to the first intermediate front-end project. But thanks to it being like that I really got used to googling stuff and not just having it served to me from here. Don't know if that is intentional, but certainly was beneficial in the end.
CamperBot
@camperbot
Feb 18 2017 14:14
achudoz sends brownie points to @nani554 :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @nani554 |http://www.freecodecamp.com/nani554
WiseKodama
@WiseKodama
Feb 18 2017 14:27
Anyone here who has done the wiki viewer?
Robert Collins
@robbiemu
Feb 18 2017 14:28

can someone help me debug this scss?

$weights: 100,200,300,400,500,600,700,800;
$formats: 'opentype','opentype','opentype','truetype',
  'opentype','truetype','opentype','opentype';
$fonts: 'Montserrat-Hairline.otf','Montserrat-UltraLight.otf','Montserrat-Light.otf',
  'Montserrat-Regular.ttf','Montserrat-SemiBold.otf','Montserrat-Bold.ttf',
  'Montserrat-ExtraBold.otf','Montserrat-Black.otf';

@mixin fontFace($weight) {
  $i: index($weight, $weights);
  @font-face {
    font-family: "Montserrat";
    src: url("static/fonts/" + nth($fonts, $i)) format(nth($formats, $i));
    font-weight: $weight;
  }
}

using it like this:

@import './montserrat.scss'

@include fontFace(600)
@include fontFace(400)

I get this error:

 error  in ./src/App.vue

Module build failed:
undefined
^
      Media query expression must begin with '('
Ievgen
@myteststudy
Feb 18 2017 14:38
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
I already know that I must work with http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en
but I still don't get what to do with this. How take quote and input it by click the button.
$(document).ready(function() {
    $(".nextButton").on("click", function(){
      $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {
        $(".quoteText").html(json);        
      });    });  });
Robert Collins
@robbiemu
Feb 18 2017 14:41
for anyone that is interested, I got the SCSS working. index(list, item) not index(item, list), and semicolons after include and import statements :)
h1tag
@h1tag
Feb 18 2017 14:43
@myteststudy can I see the full code (code pen)
@WiseKodama yes
h1tag
@h1tag
Feb 18 2017 14:48
@myteststudy if you look into the console, you're getting this error:
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Idk what exactly is causing it, but maybe it's because the API is loaded over HTTP and the tweet button uses HTTPS
so you need to find a Random Quote API that works over HTTPS
I used this one in my project quotesondesign, so my suggestion is to use it
Ievgen
@myteststudy
Feb 18 2017 14:55
@fortMaximus I don't understand how to use it. I still don't get how take quote and input it by click the button.
Dean Hollstrom
@DeanHollstrom
Feb 18 2017 14:55
Quick question for you guys. If Im using an article tag in my portfolio, do I need to use the p tag as well, or do I leave it out?
h1tag
@h1tag
Feb 18 2017 14:57
@myteststudy what is it that you understand how to use it? You're already doing it the right way in your code
@DeanHollstrom what do you mean by an article tag?
WiseKodama
@WiseKodama
Feb 18 2017 14:58
@fortMaximus
{
"batchcomplete": "",
"continue": {
"grncontinue": "0.115760904205|0.115761386548|41479409|0",
"continue": "grncontinue||"
},
"query": {
"pages": {
"15401469": {
"pageid": 15401469,
"ns": 0,
"title": "Colibi River",
"extract": "The Colibi River is a tributary of the Runcu River in Romania...."
}
}
}
this is my json response
how would I reach extract?
Dean Hollstrom
@DeanHollstrom
Feb 18 2017 14:59
In html5, the <article> element @fortMaximus
h1tag
@h1tag
Feb 18 2017 14:59
@DeanHollstrom oh, haven't used it before. You can research how it's used
Dean Hollstrom
@DeanHollstrom
Feb 18 2017 15:00
@fortMaximus I know I can research it, just thought it might be quicker to ask here...
h1tag
@h1tag
Feb 18 2017 15:01
@WiseKodama response.15401469.extract, I think
WiseKodama
@WiseKodama
Feb 18 2017 15:01
yeah but I cant get to the number
h1tag
@h1tag
Feb 18 2017 15:01
@WiseKodama full code (codepen)
the return from my json is in several levels
I would have to know the number in order to reach extract
works like this
Ievgen
@myteststudy
Feb 18 2017 15:04
@fortMaximus I don't know what do next. I delete 'tweet button' but my code doesn't work.
Moisés Man
@moigithub
Feb 18 2017 15:07
@WiseKodama ur for..in to iterate on ur object..
or Object.keys to create a list of keys(array) and iterate that
WiseKodama
@WiseKodama
Feb 18 2017 15:08
There is no way to access the extracts
h1tag
@h1tag
Feb 18 2017 15:08
@WiseKodama you can use the opensearch action instead of query, I believe it's better suited for this challenge
WiseKodama
@WiseKodama
Feb 18 2017 15:08
I can go apiResults.query.pages. but then I would need to know the pageid
This is for the random article @fortMaximus
h1tag
@h1tag
Feb 18 2017 15:08
oh
why do you need to access it?
WiseKodama
@WiseKodama
Feb 18 2017 15:09
to grab the content of it
h1tag
@h1tag
Feb 18 2017 15:10
if you think this is required, it's not, you need to only open the link in a new tab
WiseKodama
@WiseKodama
Feb 18 2017 15:10
I know. but if everyone did everything on the web just so it would work, then it would be very very very ugly
Chorp
@mfthrmdhn
Feb 18 2017 15:10
hello guys, I have a question. Do I have to completed a challenge with asterisk (or whatever this * called for) before I could move to the next lesson?
WiseKodama
@WiseKodama
Feb 18 2017 15:11
I want to have my personal touch on it
h1tag
@h1tag
Feb 18 2017 15:11
@myteststudy no, don't delete the twitter button, just use a different random quotes API
that uses https
Moisés Man
@moigithub
Feb 18 2017 15:12
soo did u check for..in syntax ?? or Object.keys ??
read somewhere ... "google is ur best friend" @WiseKodama
WiseKodama
@WiseKodama
Feb 18 2017 15:12
hmmm then why is everyone else helping other people? if everything is on google?
Chorp
@mfthrmdhn
Feb 18 2017 15:12
like I completed the Tribute Page challenge already, then should I take a Personal Portfolio Webpage or move to Basic Javascript lesson first?
Ievgen
@myteststudy
Feb 18 2017 15:13
@fortMaximus OK, how to get a quote on the screen.
Sorin Ruse
@sorinr
Feb 18 2017 15:13
@mfthrmdhn yes * marked challanges are a must
Moisés Man
@moigithub
Feb 18 2017 15:13
cuz search is a skill U must master if u wanna be a coder
no1 gonna be here forever to do ur job
WiseKodama
@WiseKodama
Feb 18 2017 15:13
ok then so you are telling me you never asked a question on this chat room?
André
@pennyJack
Feb 18 2017 15:13
@mfthrmdhn Do as you like. Eventually you have to do both if you want the certificate.
h1tag
@h1tag
Feb 18 2017 15:14
@myteststudy you're already doing it right $(#"element-id").html();
Moisés Man
@moigithub
Feb 18 2017 15:14
FIRST thing u should do is investigate things on ur own... and only ask here if u get stuck
WiseKodama
@WiseKodama
Feb 18 2017 15:14
exactly
that is why I am asking
Moisés Man
@moigithub
Feb 18 2017 15:14
already gave u what "instruction" u should check
so.. go ahead.. find info about that
h1tag
@h1tag
Feb 18 2017 15:19
@myteststudy but you also need to use the right selectors to select the data you need to display on the page from the returned object
Fabio
@Gentarozzo
Feb 18 2017 15:20
But +canali[i] does not works...

var canali = ["freecodecamp","streamerhouse","monstercat","nintendo"];

$.each(canali, function(){
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i]+"?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})

Ievgen
@myteststudy
Feb 18 2017 15:21
@fortMaximus I understand but do not know how to implement. Tell me where to read about it?
Moisés Man
@moigithub
Feb 18 2017 15:21
whats i ?? where is declared ? what values it have? @Gentarozzo
h1tag
@h1tag
Feb 18 2017 15:22
@myteststudy do you mean this: https://quotesondesign.com/api-v4-0/
Fabio
@Gentarozzo
Feb 18 2017 15:23
@moigithub it's i = 0 ... like in a for cycle
WiseKodama
@WiseKodama
Feb 18 2017 15:23
@moigithub that worked flawlessly! thank you
CamperBot
@camperbot
Feb 18 2017 15:23
wisekodama sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2705 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Feb 18 2017 15:23
@Gentarozzo soo on ur code u have that line ??
i =0
where it increase?? or always gonna be = 0 ?
WiseKodama
@WiseKodama
Feb 18 2017 15:23
No need for the atittude btw
Moisés Man
@moigithub
Feb 18 2017 15:24
:+1: :clap: well done @WiseKodama
Fabio
@Gentarozzo
Feb 18 2017 15:24
@moigithub you're right... I'm trying to increase it... but having problem with it, that's where I'm stuck...

@moigithub var canali = ["freecodecamp","streamerhouse","monstercat","nintendo"];

$.each(canali, function(){
var i = 0;
i++;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i]+"",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})

Moisés Man
@moigithub
Feb 18 2017 15:28

@Gentarozzo

$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});

http://api.jquery.com/jquery.each/ << example from here

Sorin Ruse
@sorinr
Feb 18 2017 15:28
@WiseKodama no need for all that ajax call to just get a random wiki page. i would just use for that an <a> tag with a href pointing to https://en.wikipedia.org/wiki/Special:Random
Moisés Man
@moigithub
Feb 18 2017 15:29
@Gentarozzo if u declare i=0 inside ur $.each
everytime it loops back.. gonna reset to 0
but if u check the syntax.. on the function callback.. it have its own index tracker.. so u no need to declare a extra i varaible
Fabio
@Gentarozzo
Feb 18 2017 15:30
@moigithub ok declared outside and it seems to work with the i... now I'm checking where's the other index you're talking about
h1tag
@h1tag
Feb 18 2017 15:30
@sorinr Hi and everybody hi too
Sorin Ruse
@sorinr
Feb 18 2017 15:30
@fortMaximus hi
Brandon Carlino
@bacarlino
Feb 18 2017 15:34
Hey guys, I'm getting close to diving into the last 4 front end projects - starting with the calculator. Question: Did anybody here take the time to learn an organizational framework prior to doing these? My projects up until this point have been pretty sloppy... I've stepped away and took Udacity's JS Design Patterns course, so I have a little bit of knowledge now about MVC organization and they also touched on knockout and backbone. I know Angular and the library React are kinda regarded as the big dogs... I haven't exposed myself to either one yet at this point. Thoughts?
Fabio
@Gentarozzo
Feb 18 2017 15:36
@moigithub $.each(canali, function(i){
i++;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i],
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
Moisés Man
@moigithub
Feb 18 2017 15:37
each jquery function will increase the index for u (that functionality already comes pre-packed) @Gentarozzo
so u can omit i++ (if u gonna use its callback index)
Fabio
@Gentarozzo
Feb 18 2017 15:37
@moigithub yeah thanks a lot... love it, when somebody just give me some hints to work on
CamperBot
@camperbot
Feb 18 2017 15:37
gentarozzo sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2706 | @moigithub |http://www.freecodecamp.com/moigithub
Sorin Ruse
@sorinr
Feb 18 2017 15:43
@bacarlino to accomplish this 4 projects u are free to use any framework be it css or js u want. so, just go. if u stuck place a Q in one of the fcc chats
Ievgen
@myteststudy
Feb 18 2017 15:47
@fortMaximus thanks a lot
CamperBot
@camperbot
Feb 18 2017 15:47
myteststudy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Styrene
@Styrene
Feb 18 2017 16:28
blob
I have a question on this code, guys.
I apologize for breaking any house rules ahead of time
my question essentially is: why is condition 1 not satisfied?
I compared my answer to the correct one. If i omit the "else { return true; }" and put in "return true;" right before I close my function, then my code is on the money.
Styrene
@Styrene
Feb 18 2017 16:33
Would anyone be able to assist me when you have a minute?
Thank you.
Ghulam Shabir
@ghulamshabir
Feb 18 2017 16:37
@Styrene that's because returns inside if-else block will stop the loop and function execution at the first iteration of loop
@Styrene returning false for non existent letter is good because no need of further checking you have to eventually return false
@Styrene and if you get out of the loop successully after all of the iterations it means all the letters exist that's why js engine can execute the return true right before of the function
hoddedman
@hoddedman
Feb 18 2017 16:47
I have a dumb question about using pen.io
I'm trying to style a div using css. do I still need style brackets somewhere, or should I just be able to call the class in the css window?
<div class="background">
<h1 class="text-primary">Ada Lovelace</h1></div>
I have this. can I just use .background: red;
Styrene
@Styrene
Feb 18 2017 16:50
blob
thanks, @ghulamshabir
based on what you said, could you elaborate on this one as well?
CamperBot
@camperbot
Feb 18 2017 16:50
styrene sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1861 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Dean Hollstrom
@DeanHollstrom
Feb 18 2017 17:03
I know Im probably missing something really simple but my escape sequences arent working :worried:
var myStr = 'FirstLine \r \ SecondLine\ \r ThirdLine'; // Change this line
Dean Hollstrom
@DeanHollstrom
Feb 18 2017 17:06
@heyDante thanks
CamperBot
@camperbot
Feb 18 2017 17:06
deanhollstrom sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @heydante |http://www.freecodecamp.com/heydante
Ghaith Ali
@ghaithAqidi
Feb 18 2017 17:20
Hello everyone, I would appriciate it if you take a look at my portfolio profile and give me some feedback, its on the current git rep:
https://github.com/ghaithAqidi/myPortfolio
Thanks a lot! :)
Ghulam Shabir
@ghulamshabir
Feb 18 2017 17:22
@Styrene what don't you understand ? indexOf ? it searches given value in the array/string and returns it's index if it finds it otherwise -1 is returned meaning that not found
Yanislav
@qnidageto
Feb 18 2017 17:32
het can anyone help me with a quetion for handlebars.js
mattiheubner
@mattiheubner
Feb 18 2017 17:33
Hey there! Will someone might look over my code? http://codepen.io/mattiheubner/full/jyoZYm/
Ghaith Ali
@ghaithAqidi
Feb 18 2017 17:36
@mattiheubner looks pretty good, but to me it look as a copy from the challenge example ;)
mattiheubner
@mattiheubner
Feb 18 2017 17:40
@ghaithAqidi that´s somewhat true. I applied the same look but didn´t looked at the example code. I am sill having some flaws in it. For example I´d like to have some space between the picture and the text below
Ghaith Ali
@ghaithAqidi
Feb 18 2017 17:45
@mattiheubner you can do that by adding a class for example class=“exampleClass” and give it the current css .exampleClass{margin-bottom: 30px;}
Regi Alston
@tensax31
Feb 18 2017 17:45
Hi Guys, A newbie here. I'm trying to figure out how to use an image from my google drive in a pen.
Can you help me?
Ghaith Ali
@ghaithAqidi
Feb 18 2017 17:46
@mattiheubner and by the way Steve jobs was also responsible for a lot of innovation in Pixar company (toy story etc…) ;)
Martine Ross
@moi238
Feb 18 2017 17:47
Hi @tensax31 you'll need to use something like imgur.com and then use the link to the image from there in your HTML
Regi Alston
@tensax31
Feb 18 2017 17:50
Thank you very much @moi238 . Theres a lot more for me to learn than I thought.
CamperBot
@camperbot
Feb 18 2017 17:50
tensax31 sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @moi238 |http://www.freecodecamp.com/moi238
Ievgen
@myteststudy
Feb 18 2017 17:52
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
Please help. I don't understand why new quote does not replace the placeholder and does not change?
$(document).ready(function() {
    $(".nextButton").on("click", function(){
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {        
  $(".quoteText").append(a[0].content + "<p>&mdash; " + a[0].title + "</p>")
});  });  });
Martine Ross
@moi238
Feb 18 2017 17:52
@tensax31 no problem it took me a while to work that one out 😃
h1tag
@h1tag
Feb 18 2017 17:54
@myteststudy codepen please
h1tag
@h1tag
Feb 18 2017 17:56
@myteststudy it's because you're using append, you need to use .html() like you were doing before
append():
The append() method inserts specified content at the end of the selected elements.
html():
The html() method sets or returns the content (innerHTML) of the selected elements.
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:01
@myteststudy With that API, the request gets cached. Disable cache for getJSON so you get a different quote every time: $.ajaxSetup({cache: false});
Jasmin Parent
@charlesdarkwind
Feb 18 2017 18:01
Hi, why is this not loging "error" when i put spaces or write nothing?
if (this.trim().length() > 0) {
        console.log(this);
      } else {
        console.log("error");
      }
theSyndical
@theSyndical
Feb 18 2017 18:02
@charlesdarkwind cause length is not a function
@charlesdarkwind you shouldnt use it like this length(), use it without the braces
Ievgen
@myteststudy
Feb 18 2017 18:03
@fortMaximus thanks , now I see. But it still not change.
CamperBot
@camperbot
Feb 18 2017 18:03
myteststudy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 18 2017 18:04
yea, @myteststudy I saw that, I was checking it. Check Tyler Moeller advice
Jasmin Parent
@charlesdarkwind
Feb 18 2017 18:05
@LazyDesigner thanks, i was cheking at a java doc :s
CamperBot
@camperbot
Feb 18 2017 18:05
charlesdarkwind sends brownie points to @lazydesigner :sparkles: :thumbsup: :sparkles:
:warning: @lazydesigner's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Ievgen
@myteststudy
Feb 18 2017 18:07
@TylerMoeller @fortMaximus thanks , now it works. But I do not know "ajaxSetup" method. Can I somehow do without him?
CamperBot
@camperbot
Feb 18 2017 18:07
myteststudy sends brownie points to @tylermoeller and @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: myteststudy already gave fortmaximus points
:star2: 1494 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
h1tag
@h1tag
Feb 18 2017 18:08
@myteststudy if you add &_jsonp=? at the end of the URL, instead of &callback=? it works too
Though I'm not sure why
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:09
@myteststudy You can use the second code example in the documentation instead: https://quotesondesign.com/api-v4-0/
getJSON is just a shorthand version of ajax - ajaxsetup lets you specify more options if you still prefer not to use ajax.
Notice how they have cache: false in that second code example
Ievgen
@myteststudy
Feb 18 2017 18:10
@fortMaximus just add "$.ajaxSetup({cache: false});" intomy code
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:12
@TylerMoeller @myteststudy hi guys ,i feel json and ajax section is just copy and paste thing no learning at all ,even @quincy felt the same ,could you guys please tell me what do you think
is it usefull for beginners
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:12
@myteststudy I suppose you could also change this parameter in the URL to a number larger than 1 filter[posts_per_page]=1 and then grab a random one.
@nani554 Most of the challenges, aside from the algorithms, are copy/paste. I found it necessary to read a lot and practice every time a new concept was introduced.
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:15
i have spoken to Fcc developer ,he said he made improvement and gave me a link for another fcc-beta version but even it is same
Good to know that they are people who think alike on this thing@tyler
@TylerMoeller
Yanislav
@qnidageto
Feb 18 2017 18:21
Hey everyone i want to ask if i made photo gallery page do i need to do all the photos with handlebars.js template
Ievgen
@myteststudy
Feb 18 2017 18:22
@fortMaximus @TylerMoeller thank you again
CamperBot
@camperbot
Feb 18 2017 18:22
myteststudy sends brownie points to @fortmaximus and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: myteststudy already gave fortmaximus points
:warning: myteststudy already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:22
@nani554 Are you in need of help with ajax/getJSON?
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:22
yeah i need some basics
@TylerMoeller
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:24
@nani554 getJSON is shorthand for ajax. They both do the same thing. At a basic level, they get an object and store it in a variable for you.
Yanislav
@qnidageto
Feb 18 2017 18:24
anyone ?
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:24
@qnidageto You don't need handlebars.js to create a photo gallery
@nani554 You can then use that object as desired in your code.
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:24
and that variable is called as object
@TylerMoeller
eg: ```
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:25
@nani554 That variable refers to that object, yes.
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:25
var sure = {
     first:"what",
     second:2

}
Yanislav
@qnidageto
Feb 18 2017 18:26
@TylerMoeller yea i know but ive been doing a course on coursera and now the subject is handebars and they say its better composed script and can help me in the future with web apps to seperate the structure from the contents and i read about it and i still dont understand it 100 % thats why i just ask if i want to use it i need to make it for every single photo
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:27
@nani554 Visit this URL in your browser: http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=
You will see an object. getJSON/ajax will store that object for you in a variable called data if you do this:
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data) {
  console.log(data); // the data will be logged to the console
});
@qnidageto This forum is for Free Code Camp Front-End Development projects. Sorry, I can't help you with coursera
Yanislav
@qnidageto
Feb 18 2017 18:28
ok thanks anyway
Jasmin Parent
@charlesdarkwind
Feb 18 2017 18:29
simple question i guess: how is this an array if there is a key and a value? Shouldnt it be an object?
var currWeather = new Array();
        currWeather['currTemp'] = Math.round(data.main.temp);
        currWeather['description'] = data.weather[0].description;
        currWeather['icon'] = "http://openweathermap.org/img/w/"+data.weather[0].icon+".png";
        currWeather['cloudiness'] = data.clouds.all;
        currWeather['city'] = data.name;
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:30
@charlesdarkwind Maybe not such a simple answer, but an array is an object :)
Arrays can contain JSON and JSON can contain arrays
To simplify things, I'm referring to JSON as data between curly braces {} and arrays as data between brackets []
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:32
@charlesdarkwind yes u r right its a object in javascript but in other languages its an array,bcoz js doesnt support "string index" as it only supports numbered index for arrays
string index is called as object so its better define it as a object
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:34

In that Quotes API, for example, they return this:

[{
  "ID": 78,
  "title": "Chris Bangle",
  "content": "<p>Designers think everything done by someone else is awful, and that they could do it better themselves, which explains why I designed my own living room carpet, I suppose.  <\/p>\n",
  "link": "https:\/\/quotesondesign.com\/chris-bangle\/"
}]

If you set the data variable equal to it, you would access the title as data[0].title

Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:36
@TylerMoeller i have opened it and found a object
Jasmin Parent
@charlesdarkwind
Feb 18 2017 18:36
so im not sure i understand why it uses the Array keyword and not just declare a json object, im pretty mindfuck
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:37
@nani554 Yes, getJSON grabs that object for you and lets you access it. Not sure if that helps better understand what getJSON is doing.
@charlesdarkwind Not sure where you're getting that code, but it often can be confusing trying to understand someone else's thought process. This is why we add code comments.
oooooooowen
@oooooooowen
Feb 18 2017 18:39
just got to the Tribute Page challenge after starting FCC a few days ago and I feel like a noob
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:39
From the looks of it, they're creating an array to store the data. They could use a JSON object instead, but there's no way to know why they chose to do it that way unless you talk to them :) there are lots of ways to get from point A to point B with code.
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:39
i think i need to use ide and use it to understand @TylerMoeller yler
oooooooowen
@oooooooowen
Feb 18 2017 18:39
any advice on starting out with the Tribute Page? or do I just have to go back and review the previous html & css & bootstrap lessons
Regi Alston
@tensax31
Feb 18 2017 18:40
@oooooooowen , I'm in the same place feeling the same way
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:40
@nani554 Yes, that is a good way to practice it. Create a new codepen and start playing around with an API. Ask questions here if you get stuck.
Muhammad Hasham
@MohammadHasham
Feb 18 2017 18:41
i have made a cheatsheet (A pretty basic one) for flexbox CSS but i am not sure that i have learnt it.How can i prove to myself and satisfy myself.That is a really bad feeling because i saw several videos.Did that froggyflexbox game completed.What can i do?
@TylerMoeller
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:41
@TylerMoeller thanks
CamperBot
@camperbot
Feb 18 2017 18:41
nani554 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1495 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
oooooooowen
@oooooooowen
Feb 18 2017 18:41
@tensax31 FCC seems pretty insistent on not looking at other people's examples for their code so I feel like I've quickly reached an impasse haha
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:42
@oooooooowen and @tensax31 At this point, you're expected to spend around 50 hours building on the basic bootstrap, CSS, and HTML you have learned so far to build the tribute page and a basic portfolio page. That will take some reading and practicing - I'd recommend starting with the Bootstrap documentation. Read all of it, copy/paste the code samples and manipulate the code to see what happens.
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:42
@charlesdarkwind are you there
Jasmin Parent
@charlesdarkwind
Feb 18 2017 18:42
yes
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:42
iam trying to find the resource where i have learned about that index array
oooooooowen
@oooooooowen
Feb 18 2017 18:43
@TylerMoeller gotcha
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:43
wait
oooooooowen
@oooooooowen
Feb 18 2017 18:43
@TylerMoeller that 50 hrs allocation makes more sense now
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:43
Yeah, it's time to roll up your sleeves and have some fun :)
oooooooowen
@oooooooowen
Feb 18 2017 18:44
😬
David Veytsman
@Thrage1
Feb 18 2017 18:45
hey everyone
just wanted to confirm before I dive back into FCC is this the place where I can ask questions if I get stuck
Muhammad Hasham
@MohammadHasham
Feb 18 2017 18:46
@TylerMoeller can you please answer my query if possible.
Jasmin Parent
@charlesdarkwind
Feb 18 2017 18:46
@TylerMoeller aah ok, I see, so if I want to declare an array that will have objects(with 3 keys each) in it, then I would just create an array the same way?
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:46
@MohammadHasham May I ask why you are asking me about flexbox?
David Veytsman
@Thrage1
Feb 18 2017 18:47
Ok I'm going to assume yes???
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:47
@Thrage1 surely this is one of the place ,note: this is not the only place!
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:47
@Thrage1 Yes, this is one of many chat rooms to ask for help
David Veytsman
@Thrage1
Feb 18 2017 18:48
@nani554 thanks.
CamperBot
@camperbot
Feb 18 2017 18:48
thrage1 sends brownie points to @nani554 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @nani554 |http://www.freecodecamp.com/nani554
David Veytsman
@Thrage1
Feb 18 2017 18:48
@TylerMoeller thanks
Pavan kalyan K
@Pavanpavik
Feb 18 2017 18:48
how to write jqueries in codepen
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:48
@charlesdarkwind Yes, you could definitely do that
David Veytsman
@Thrage1
Feb 18 2017 18:48
@TylerMoeller thanks. Yup thats how I found this chat room.
CamperBot
@camperbot
Feb 18 2017 18:48
thrage1 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1496 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:49
@Pavanpavik u could do it using keyboard
it works
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:49
:) lol
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:49
jokes apart yes yu can write
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:49
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:49
just by adding external link in settings
Linus
@nusli
Feb 18 2017 18:50
hey i'm doing the first front end project (tribute page) and want to include an image. Can i use any image i find on the web for this? I'm unsure bc of copyright etc since its not a real website.
Pavan kalyan K
@Pavanpavik
Feb 18 2017 18:50
no problem
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:50
@TylerMoeller how come you are soo fast and precise
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:51
@nani554 It's google not me :)
Yerrapotu Manojkiran
@nani554
Feb 18 2017 18:51
@nusli you are not prince george ,to file a case against and sue u ,no one cares just do it
@TylerMoeller iam learning angularjs now a days ,i found two types of codes one goes like this
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:54
@nusli This is a very helpful list that I use for photography/images/graphics and they sort it by license so you can be sure: https://github.com/neutraltone/awesome-stock-resources
r2d2
@UsamaHameed
Feb 18 2017 18:56
Hi guys, this is a twitter bot that I made using twitter API and node.js.
https://twitter.com/kingsofeurope7
Any feedback would be very helpful.
If you follow it, it follows you back.
If you tweet to it, it retweets your tweet.
It looks for new tweets on selected accounts on twitter and tweets them.
Muhammad Hasham
@MohammadHasham
Feb 18 2017 18:56
@TylerMoeller i thought that you have vast exp. in web dev so maybe you could help me somehow
Tyler Moeller
@TylerMoeller
Feb 18 2017 18:57
@MohammadHasham If you need help with a Free Code Camp front-end project, I'm happy to see what I can do
Muhammad Hasham
@MohammadHasham
Feb 18 2017 18:58
No that was kind of general thing not directly related to FCC projects @TylerMoeller
Yerrapotu Manojkiran
@nani554
Feb 18 2017 19:00
@MohammadHasham shoot ur question who know he might answer or
show u the right direction towards ur answer
Muhammad Hasham
@MohammadHasham
Feb 18 2017 19:00
i have made a cheatsheet (A pretty basic one) for flexbox CSS but i am not sure that i have learnt it.How can i prove to myself and satisfy myself.That is a really bad feeling because i saw several videos.Did that froggyflexbox game completed.What can i do?
@nani554
do i need to make or build something else
Tyler Moeller
@TylerMoeller
Feb 18 2017 19:02
@MohammadHasham I don't know of any flexbox tests or certification exams that can help you prove your knowledge. Best advice I can give is to try and build things. If you see a nice design somewhere on the web, try to emulate it by using flexbox.
Muhammad Hasham
@MohammadHasham
Feb 18 2017 19:03
@TylerMoeller Thanks.Okay i'll try that.
CamperBot
@camperbot
Feb 18 2017 19:03
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1497 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 18 2017 19:04
@MohammadHasham Uplabs has a series on "Can you code this UI Concept?" sometimes there are fun things to try, for example: https://stories.uplabs.com/can-you-code-this-design-concept-efe0132b9744
Dribbble is good to browse through as well
Muhammad Hasham
@MohammadHasham
Feb 18 2017 19:04
@TylerMoeller i'll surely give that a try.Thanks once again.
CamperBot
@camperbot
Feb 18 2017 19:04
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave tylermoeller points
johnnydemol
@johnnydemol
Feb 18 2017 19:12

Hey guys,

so this is pretty basic but can't seem to figure it out. I use a query .click() method to show some text when you click the button, but for some reason the text is already there once I load the page.
http://codepen.io/svenhendrikx/pen/qRgdvR

Yerrapotu Manojkiran
@nani554
Feb 18 2017 19:15
@TylerMoeller i found that very interesting and excited to start doing one of that project which you have given to mohammed
achudoz
@achudoz
Feb 18 2017 19:16
Hi, I had some problems with geolocation before. It should be ok now, but can anyone please just check if it works and looks properly?
http://codepen.io/achudoz/full/bgJQLx/
@johnnydemol use this:
$("#buttonID").on("click", function() {
*do something you want the button to do*
});
Robert
@Brayn7
Feb 18 2017 19:22
anyone have an idea of how i could, best way i could describe it, do what mouseover does but only whilst holding mousedown in react. I am building the game of life project and thought it would be a nice thing to have.
Nathan Dalton
@NRD89
Feb 18 2017 19:23
Hello Campers! I just started my tribute page and am having trouble centering an image with bootstrap. I have tried center-block with img-responsive andit is still not centering properly. Can anyone give me some tips?
johnnydemol
@johnnydemol
Feb 18 2017 19:23
@achudoz thanks but that leads to another problem. The text only appears for a second and then disappears. When I use a div as button it works.
CamperBot
@camperbot
Feb 18 2017 19:23
johnnydemol sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @achudoz |http://www.freecodecamp.com/achudoz
Moisés Man
@moigithub
Feb 18 2017 19:24
@NRD89 use its grid system
Yerrapotu Manojkiran
@nani554
Feb 18 2017 19:24
@NRD89 text-center
Johnny
@jtan3
Feb 18 2017 19:25
@NRD89 did you add bootstrap 3 instead of 4?
Philipp_Lypniakov
@RAYDENFilipp
Feb 18 2017 19:25
Hello, Campers! I've got a problem: when i try to reduce a scale in my browser so to imitate a large screen display, my picture drags to the left side, but i want it to be in the center. Here's the link: http://codepen.io/RAYDENFilipp/pen/xgNErr
Nathan Dalton
@NRD89
Feb 18 2017 19:25
@jtan3 i think it is 4
@jtan3 its the default bootstrap in CodePen
Moisés Man
@moigithub
Feb 18 2017 19:26
row
     col-5
     col-2  
            img
    col-5
/row
Nathan Dalton
@NRD89
Feb 18 2017 19:27
@jtan3 @moigithub here is my Pen https://codepen.io/nrd89/pen/pRmdPx
Robert
@Brayn7
Feb 18 2017 19:28
@RAYDENFilipp need margin: auto on div holding the figure and img elements the col-12 one
Hermes
@hermesalexis
Feb 18 2017 19:29
hi can help me, i try to put css in this project in codepen.io but i does't have changes http://codepen.io/hermesalexis1/pen/VPORMj/?editors=1100
my css doesn't work
Alexey
@iatomat
Feb 18 2017 19:30

please help)

<style>
id

orange-text {color: orange;}

body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
<h1 id="orange-text">
</style>

<h1 class="pink-text blue-text">Hello World!</h1>

Give your h1 element the id of orange-text.
what i missing ?

Philipp_Lypniakov
@RAYDENFilipp
Feb 18 2017 19:30
@Brayn7 can you explain more, pls?
Moisés Man
@moigithub
Feb 18 2017 19:30
@NRD89 @RAYDENFilipp or define a width ie: the image gonna be "col-md-8"
since bootstrap uses a 12 col system.. 4 left.. (from 8) push 2 on left.. and will be centered
MSaif
@msaiff
Feb 18 2017 19:31
@iatomat pls send me the challenge link.
Nathan Dalton
@NRD89
Feb 18 2017 19:31
@jtan3 thanks man, that worked!
CamperBot
@camperbot
Feb 18 2017 19:31
nrd89 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @jtan3 |http://www.freecodecamp.com/jtan3
Yerrapotu Manojkiran
@nani554
Feb 18 2017 19:32
@hermesalexis its working fine for me
achudoz
@achudoz
Feb 18 2017 19:32
@johnnydemol it seems to work like this:
http://codepen.io/achudoz/pen/jyoJQQ?editors=1010#0
Moisés Man
@moigithub
Feb 18 2017 19:32
<div class="row">
      <img class="col-md-8 offset-md-2" src="....">
</div>
Yerrapotu Manojkiran
@nani554
Feb 18 2017 19:32
@iatomat h1 ending tag
MSaif
@msaiff
Feb 18 2017 19:33
@iatomat html: <h1 id="">..... css: #id-name {}
Nathan Dalton
@NRD89
Feb 18 2017 19:33
@jtan3 why didn't centering work with Bootstrap 4?
Robert
@Brayn7
Feb 18 2017 19:33
@RAYDENFilipp you have and html parent that has 3 children in it a figure element, img element, and a figcaption element in it yes?
MSaif
@msaiff
Feb 18 2017 19:34

@iatomat <style>

orange-text {color: orange;}

body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}

</style>

<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

Philipp_Lypniakov
@RAYDENFilipp
Feb 18 2017 19:35
@Brayn7 yes. I tried not to use css directly. I even tried without bootstrap
Robert
@Brayn7
Feb 18 2017 19:35
@RAYDENFilipp that element, the one with the mentioned elements and also with the class col-xs-12, sits inside an element that is wider. so easy fix is to make this div have a css style margin: auto
@RAYDENFilipp i can private message if you need more info
Philipp_Lypniakov
@RAYDENFilipp
Feb 18 2017 19:36
@Brayn7 that would be great
Johnny
@jtan3
Feb 18 2017 19:36
@NRD89 i think its too new or its codepen's fault
Muhammad Hasham
@MohammadHasham
Feb 18 2017 19:37
Do you have to make a framework like bootstrap or need to understand it's in depth css coding to become a successful front end dev.? or it's only that you should know how to use frameworks not how to make them for your own?
Alexey
@iatomat
Feb 18 2017 19:39
msaif tnx a lottt!!!!
MSaif
@msaiff
Feb 18 2017 19:39
@iatomat Welcome!
johnnydemol
@johnnydemol
Feb 18 2017 19:43
@achudoz thanks. The reason why it didn't work was because the button was nested within form tags. Not sure why that would cause a problem though
CamperBot
@camperbot
Feb 18 2017 19:43
johnnydemol sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:warning: johnnydemol already gave achudoz points
achudoz
@achudoz
Feb 18 2017 19:44
@johnnydemol yeah me neither. but when I removed them, it started to work. Laso it did work before but only after two clicks (it disappeared after the first click)... weird
Dylan-Clelland
@Dylan-Clelland
Feb 18 2017 19:45
I need some help with the "Escape Sequences in Strings" lesson I took a break for a month and now I'm not too sure what it's asking haha
Tyler Moeller
@TylerMoeller
Feb 18 2017 19:57
@nani554 share one when complete - would like to check it out. I may build one this weekend too if I get the time.
Tom Frenken
@Blackioo
Feb 18 2017 20:07
Besides my spaghetti code, does someone have a clue why the pictures are so small instead of the 100%height I defined :<? http://codepen.io/blackioo/pen/JEVKRG
Abhijeet Singh
@abhijeetps
Feb 18 2017 20:57
v
Hey Guys, anybody knows how to add Weather images to the weather app?
Ken Nawrocki
@nawrockp
Feb 18 2017 21:02
@Blackioo height 100% does not really work with CSS like width 100%
you could use height:100vh
Tom Frenken
@Blackioo
Feb 18 2017 21:03
and vh is like … viewheight or something?
Ken Nawrocki
@nawrockp
Feb 18 2017 21:03
although support for that might not be 100% in all browsers still
yeah
Tom Frenken
@Blackioo
Feb 18 2017 21:03
ah ok
Thx @nawrockp
CamperBot
@camperbot
Feb 18 2017 21:03
blackioo sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @nawrockp |http://www.freecodecamp.com/nawrockp
Ken Nawrocki
@nawrockp
Feb 18 2017 21:04
@Blackioo seems support is better recently : http://caniuse.com/#feat=viewport-units
Chelsea Scott
@chelseas9210
Feb 18 2017 21:09
hello everyone! i'm wondering how i make a "contact" button scroll down to the end of my cite to my contact section? basically i want it to be like the example
thank you
there's the example page and when you press contact it goes all the way down for you to fill out a form
i have never done this before so i don't know the exact code i should look up
and my google searches have been useless
Ken Nawrocki
@nawrockp
Feb 18 2017 21:17
@chelseas9210 I just checked out the codepen for that and it seems to be using this: https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Chelsea Scott
@chelseas9210
Feb 18 2017 21:17
ok i will check it out
Ken Nawrocki
@nawrockp
Feb 18 2017 21:20
@chelseas9210 although how they got that to work in codepen I dont know
Chelsea Scott
@chelseas9210
Feb 18 2017 21:20
awesome! that's exactly what i'm looking for thank you @nawrockp
CamperBot
@camperbot
Feb 18 2017 21:20
chelseas9210 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @nawrockp |http://www.freecodecamp.com/nawrockp
Chelsea Scott
@chelseas9210
Feb 18 2017 21:21
well if that's not that then nevermind thats not what i'm looking for but still thank you
Ken Nawrocki
@nawrockp
Feb 18 2017 21:28
@chelseas9210 actually the code that makes it scroll seems to be custom, although it requires the jQuery easing plugin. you can find the code snippet at the end of the javscript
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {$('body').on('click', 'a.scrollable', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
event.preventDefault();
});
});
Arash D
@ArashDai
Feb 18 2017 21:36
hey im just curious, how long does it take people to complete the simon challenge
Zach
@zgarsh
Feb 18 2017 21:55
@nawcrockp sorry that was me! Deleted the post once I saw it had just been asked. I'm still new to this so not really sure how to make that work. @chelseas9210 any luck?
I found this but the 'advanced' scares me https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Ken Nawrocki
@nawrockp
Feb 18 2017 21:58
@ArashDai The simon challenge is pretty detailed, since you have many buttons and the game can be in many different "states". Also the styling was a bit of a challenge for me, since I tried to do it all with CSS
@zgarsh this might make it a bit more simple
seems you need jquery and bootstrap.js, both of which you can add via codepen
@zgarsh you wont be able to add the custom attributes to the body element in codepen though, so you would have to make another element the scrollable area
Zach
@zgarsh
Feb 18 2017 22:05
@nawrockp Thanks! This looks much friendlier. Would you recommend using a giant div instead of the body as the scrollable area?
CamperBot
@camperbot
Feb 18 2017 22:05
zgarsh sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @nawrockp |http://www.freecodecamp.com/nawrockp
Ken Nawrocki
@nawrockp
Feb 18 2017 22:07
@zgarsh Yeah you are not going to have much of a choice in codepen since you cant change the body tag, at least AFAIK. But you could just add a div something like this and wrap the content : <div id="scrollarea" data-spy="scroll" data-target="#navbar">
Zach
@zgarsh
Feb 18 2017 22:08
@nawrockp Great. Thanks again
CamperBot
@camperbot
Feb 18 2017 22:08
zgarsh sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:warning: zgarsh already gave nawrockp points
Abhijeet Singh
@abhijeetps
Feb 18 2017 22:13
Hey Guys!
Check out my Weather App. Note: Don't use Chrome 50.0+
http://codepen.io/aps120797/full/BQXRZr
Arash D
@ArashDai
Feb 18 2017 22:15
@nawrockp thanks man, I was just looking ahead in the curriculum and that challange stood out as the toughest lol
CamperBot
@camperbot
Feb 18 2017 22:15
arashdai sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @nawrockp |http://www.freecodecamp.com/nawrockp
Michael Grienauer
@mgrienauer
Feb 18 2017 22:23
hey just wondering why is my background color cutting off? http://codepen.io/mike93og/pen/pRmmrP
anyone?
Hector Garcia
@augmt
Feb 18 2017 22:38
@mike93og93 you've only assigned your background-color styling to the .container-fluid
you need to assign it to your div, but before that you need to get the link to bootstrap out of your HTML
Michael Grienauer
@mgrienauer
Feb 18 2017 22:39
@augmt that's the only way i've gotten it to work, do you mean put it in the head settings in codepen?
Hector Garcia
@augmt
Feb 18 2017 22:40
@mike93og93 yes, your links should go in pen settings and css preferably in the css section
Michael Grienauer
@mgrienauer
Feb 18 2017 22:41
@augmt also shouldnt the whole background (except for my quote block) show as blue? since its the main container?
Hector Garcia
@augmt
Feb 18 2017 22:43
@mike93og93 not exactly: in this case, only the content inside the .container-fluid that's not already styled will be blue
if .container-fluid were empty, then nothing would be blue
that is, unless you assigned a width and/or a height to .container-fluid
Michael Grienauer
@mgrienauer
Feb 18 2017 22:48
@augmt hmmm kind of confusing... how would i make the whole background except for the column blue then?
@augmt also thanks for the help
CamperBot
@camperbot
Feb 18 2017 22:48
mike93og93 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @augmt |http://www.freecodecamp.com/augmt
Hector Garcia
@augmt
Feb 18 2017 22:51

@mike93og93 you can add

body {
  background-color: #4c90b1;
}

to your css but that won't do anything at the moment

you'd also have to get rid of the link to bootstrap in your html content
bootstrap sets the body's background-color to white and linking to it in your html content overrides your css
Michael Grienauer
@mgrienauer
Feb 18 2017 22:53
@augmt so i shouldnt use bootstrap at all for this project?
Hector Garcia
@augmt
Feb 18 2017 22:53
@mike93og93 you can, but you should only link to bootstrap in your pen settings
Lee
@LeeConnelly12
Feb 18 2017 22:55

Hi everybody, I have some css I am having trouble with.

   <img src="https://media.giphy.com/media/wvS4BcmuoRqFi/giphy.gif" alt="">
    <h1 id="mainHeader">Benedict Cumberbatch name generator</h1>
* {
    font-family: verdana, sans-serif;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: auto;
} 
#mainHeader {
    font-size: 20px;
    text-align: center;
    position: relative;
    top: 15%;
}

img:first-of-type {
    width: 25%;
    height: 300px;
    position: relative;
    left: 40%;
    top: 20%;
}

I am trying to position img:first-of-type 20% from the top, for responsive reasons, I can move it 20px form top but not 20%, anybody have suggestions?

Michael Grienauer
@mgrienauer
Feb 18 2017 22:55
@augmt got it thanks man, i deleted it at the top
Hector Garcia
@augmt
Feb 18 2017 23:00
@LeeConnelly12 i can't say if this helps, but percentages refer to the height of the containing block for top
Lee
@LeeConnelly12
Feb 18 2017 23:01
@augmt Thanks for replying, what I dont understand is that the header is being positioned correctly, 15% from the top, but the image is not moving when using top %, i can use left % just fine as well
CamperBot
@camperbot
Feb 18 2017 23:01
leeconnelly12 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @augmt |http://www.freecodecamp.com/augmt
Gulsvi
@gulsvi
Feb 18 2017 23:02
@LeeConnelly12 use position: absolute
Otherwise, with relative positioning, use margin-top: 20%
And * {height: 100%} is going to cause all sorts of headaches :) best to be a bit more specific if possible
Lee
@LeeConnelly12
Feb 18 2017 23:04
@SkyCoder01 Yeah I meant to do html 100%, but I just fixed it, I changed the header's display to inline instead
@SkyCoder01 ty anyway appreciate it
CamperBot
@camperbot
Feb 18 2017 23:04
leeconnelly12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Arash D
@ArashDai
Feb 18 2017 23:05
can someone please help me debug my weather app
Gulsvi
@gulsvi
Feb 18 2017 23:06
@aps120797 More than 50% of people on the web use chrome 50+, best to fix your weather app so it works for the majority of people out there on the web. Use https://freegeoip.net/json for location instead, or use a weather API like Dark Sky that supports HTTPS so you can use navigator.geolocation
Arash D
@ArashDai
Feb 18 2017 23:06
it works properly when I run it locally but when I deployed on heroku my ajax requests dont work
Gulsvi
@gulsvi
Feb 18 2017 23:07
I've never used heroku :(
Arash D
@ArashDai
Feb 18 2017 23:08
you still might be able to help
lol
Gulsvi
@gulsvi
Feb 18 2017 23:08
But I finished the weather app, if you can show the same problem on codepen
Arash D
@ArashDai
Feb 18 2017 23:08
I have my code in that repository
I kinda went a little bigger than the spec
im using react redux
Gulsvi
@gulsvi
Feb 18 2017 23:09
I haven't gotten to the data visualization stuff yet, don't know anything about react
Can you make it work in a gh-pages branch?
Arash D
@ArashDai
Feb 18 2017 23:09
here it is on heroku
ive never used gh pages
lol
Gulsvi
@gulsvi
Feb 18 2017 23:09
just create a branch named 'gh-pages' then go to: https://ArashDai.github.io/cityWeather
It should pick up index.html if you've set up the paths correctly
Arash D
@ArashDai
Feb 18 2017 23:10
ok
has anyone here use react-redux and promises?
I really dont feel like redeploying this on gh pages for no reason
Michael Grienauer
@mgrienauer
Feb 18 2017 23:17
http://codepen.io/mike93og/pen/pRmmrP just wondering why is my twitter button not showing up below my author?
do i need to use a container?
or do i need to use a new column?
Gulsvi
@gulsvi
Feb 18 2017 23:19
@ArashDai I'm just not comfortable navigating to some unknown heroku instance. Set it up on github and I can see the code before deciding to run it. All you have to do is enter 'gh-pages' in the branch text box to create a new branch. That's all there is to it.
Bigyan Karki
@bigyankarki
Feb 18 2017 23:21
var userName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (i=0; i< userName.length;i++){
  var url= 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i] + '/?callback=?';
  console.log(url);
$.ajax({
  url: url,
  type: "GET",
  dataType: "json",
  success: function(twitch) {
  if (twitch.stream === null) {
    console.log(userName[i]);
  }
    else {

    }
},
  error: function(){
    alert("Unable load page. Please try again later.");
}
});
  };
Gulsvi
@gulsvi
Feb 18 2017 23:21
@mike93og93 Because the 'pull-right' class has no effect when using v4.0 of bootstrap. Use v3.3.7 instead.
Bigyan Karki
@bigyankarki
Feb 18 2017 23:21
what is wrong with this code?
Gulsvi
@gulsvi
Feb 18 2017 23:23
@bigyankarki Do you know how to view errors in your browser console?
Bigyan Karki
@bigyankarki
Feb 18 2017 23:23
yup
but i didnt get what it means
Michael Grienauer
@mgrienauer
Feb 18 2017 23:24
@SkyCoder01 i changed to 3.3.7 now the font awesome isnt working
Bigyan Karki
@bigyankarki
Feb 18 2017 23:24
Uncaught Error: Bootstrap tooltips require Tether
this is the error i got
Gulsvi
@gulsvi
Feb 18 2017 23:24
It means you need to use var before defining a variable i is not defined is the error I'm seeing
Jean Marco Romero
@volkranium
Feb 18 2017 23:24
How can i make a set container div to height: 100% without the content inside overlapping
Gulsvi
@gulsvi
Feb 18 2017 23:24
VM201 pen.js:4 Uncaught ReferenceError: i is not defined
Michael Grienauer
@mgrienauer
Feb 18 2017 23:25
@SkyCoder01 whoops i changed it back, but i am using bootstrap 3.37 and still not working properly
Gulsvi
@gulsvi
Feb 18 2017 23:25
@mike93og93 Font awesome is a separate CSS file
Gulsvi
@gulsvi
Feb 18 2017 23:25
@mike93og93 Click Settings and then click CSS - what version of bootstrap do you see?
I still see 4.0
Bigyan Karki
@bigyankarki
Feb 18 2017 23:26
is bootstrap updated?
Gulsvi
@gulsvi
Feb 18 2017 23:27
Codepen changed to use some pre-release version4 with the quick add, but we learned 3.3 here at FCC
Arash D
@ArashDai
Feb 18 2017 23:27
@SkyCoder01 the code is here if you want to browse it https://github.com/ArashDai/cityWeather I dont see how gh-pages is safer than heroku, but perhaps you know something I dont
Bigyan Karki
@bigyankarki
Feb 18 2017 23:28
hmm @SkyCoder01 bu i think i need to use 3.3 for that project
Gulsvi
@gulsvi
Feb 18 2017 23:28
@bigyankarki No, I was referring to the issue that Watto is hitting with the twitter button and the pull-right class.
Bigyan Karki
@bigyankarki
Feb 18 2017 23:29
oh :D
Gulsvi
@gulsvi
Feb 18 2017 23:29
Your issue is different - if you're still needing help after fixing the i is not defined
Michael Grienauer
@mgrienauer
Feb 18 2017 23:30
@SkyCoder01 ooo ok thanks i was chaning html
CamperBot
@camperbot
Feb 18 2017 23:30
mike93og93 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 18 2017 23:36
@ArashDai I don't know what code you've deployed to heroku, I'd have to trust you. Phishing attacks are hosted there all the time and for all I know, since I can't view what you've deployed there, you could be showing up at the cafe I'm sitting at now after collecting my IP address and location on that server. With github pages, I know exactly what you're deploying. With codepen, you don't get to log data about who visits your web app.
Arash D
@ArashDai
Feb 18 2017 23:36
damn my issues is because openweathermap doesnt accept https requests
its ok
dont worrk
forsure i understand
is there a way to get rid of the mixed resourse error
like loading http get requests on an https site?
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:38
That's a bit paranoid @SkyCoder01 :p but I like it lol
Mixed-content errors come from trying to use HTTP over a secure (HTTPS) connection @ArashDai
Arash D
@ArashDai
Feb 18 2017 23:39
i know where the errors come from
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:39
Use all HTTPS whenever possible
Arash D
@ArashDai
Feb 18 2017 23:39
I just want to knw how to get around it
well yes but this api charges $ for https requests
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:40
Then only use HTTP and pop up a warning if a user visits your web app over HTTPS
Michael Grienauer
@mgrienauer
Feb 18 2017 23:40
now the main div isnt centering proerly though http://codepen.io/mike93og/pen/pRmmrP
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:40
navigator.geolocation doesn't work over http, but you could use https://ipinfo.io/json or a similar service
Arash D
@ArashDai
Feb 18 2017 23:41
thats the service im using
but openweathermap.org is http only https is paid
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:41
Okay, then you'll only be able to visit your web app with an HTTP address
Arash D
@ArashDai
Feb 18 2017 23:42
OMG IM DUMB
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:42
https://yourwebsite/your-weather-app won't work unless you use a different Weather API like Dark Sky, Weather Underground, Apixu, etc.. that support HTTPS
Arash D
@ArashDai
Feb 18 2017 23:42
http://floating-depths-82603.herokuapp.com/ gaze upon the glory of my weather app
or dont its cool im not stealing your info i promise
Gulsvi
@gulsvi
Feb 18 2017 23:43
:)
Arash D
@ArashDai
Feb 18 2017 23:44
you guys like it =)
it took me wayy too much time
Michael Grienauer
@mgrienauer
Feb 18 2017 23:45
any idea why my text aint centering?
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:45
@mike93og93 I'm sorry, but I think you need to spend some more time on the bootstrap docs. The tribute page + portfolio should have involved about 50 hours of work with bootstrap, so you should be very familiar with the grid system by now.
You simply aren't implementing it correctly.
Michael Grienauer
@mgrienauer
Feb 18 2017 23:46
@TylerMoeller http://codepen.io/mike93og/pen/egjBxM?editors=1100 yea probably.... there was a big chunk of javacript in between though
@TylerMoeller would i put a div on either side on my col?
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:47
@mike93og93 You'll want to use offsets to center a lg-6 column: http://getbootstrap.com/css/#grid-offsetting
And you can't nest a container inside another: http://getbootstrap.com/css/#overview-container
This pen shows some examples of offsetting and other things to help with learning the grid system: http://codepen.io/TylerMoeller/pen/qNrbok
Michael Grienauer
@mgrienauer
Feb 18 2017 23:50
@TylerMoeller aesome thanks for the help
CamperBot
@camperbot
Feb 18 2017 23:50
mike93og93 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1498 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 18 2017 23:50
Good luck :+1: