These are chat archives for FreeCodeCamp/Help

23rd
Jun 2016
German Alvarez
@TheGiver14
Jun 23 2016 00:00
@LForde not too far ahead, im on adding images to your website or #23
LForde
@LForde
Jun 23 2016 00:01
@TheGiver14 Ok, I will have to catch up to you after I go for a run. Need to unscramble my wee brain, lol! Catch ya later. Writing down your username.
Thanks again!
Critter
@cjohnso2
Jun 23 2016 00:01
Need some help with challenge "Override Class Declarations with Inline Styles" i put in <span style= "color: white;"> but the last check mark is uchecked
Jim Morris
@killjoy82
Jun 23 2016 00:02
<div class="row">
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>
</div>....how are these buttons nested with <div class="col-xs-4">???
German Alvarez
@TheGiver14
Jun 23 2016 00:03
@LForde no prob
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:04
@killjoy82 you want to put them nested inside that <div class="col-xs-4">?
@cjohnso2 that should be enough, could you send some screenshot?
Jim Morris
@killjoy82
Jun 23 2016 00:05
@carlosfilhomedeiros each of these buttons needs to be nested with that div class
@carlosfilhomedeiros I have all the other ckeckpoints for this challenge, just missing this one
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:07

@killjoy82 I think what you need is

<div class="row">

<div class="col-xs-4">

<button class="btn btn-block btn-primary">Like</button>

<button class="btn btn-block btn-info">Info</button>

<button class="btn btn-block btn-danger">Delete</button>
</div>
</div> isnt?

Vinicius T Pereira
@trovao1990
Jun 23 2016 00:08
Hello Guys. I want to change the position of my navbar items, How could I do it? I want it to be a little bit more to centre http://codepen.io/trovao1990/pen/qNqMjY
Jim Morris
@killjoy82
Jun 23 2016 00:08
@carlosfilhomedeiros thanks, ill try it :smile:
CamperBot
@camperbot
Jun 23 2016 00:08
killjoy82 sends brownie points to @carlosfilhomedeiros :sparkles: :thumbsup: :sparkles:
:cookie: 163 | @carlosfilhomedeiros |http://www.freecodecamp.com/carlosfilhomedeiros
Critter
@cjohnso2
Jun 23 2016 00:08
blob
blob
blob
@carlosfilhomedeiros
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:09
@cjohnso2 dont use span, just put it in you h1! <h1 style="color: white">
Jim Morris
@killjoy82
Jun 23 2016 00:10
@carlosfilhomedeiros that didnt work
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:10
@cjohnso2 exacly what @dylan-snyder said
@killjoy82 send us some screenshot
Critter
@cjohnso2
Jun 23 2016 00:11
thank you
JR Woods
@jrwoods42
Jun 23 2016 00:13
Ok, so I went through HTML5, CSS, JQuery, etc... Now, I'm starting my portfolio and have no idea what I'm doing. Did I miss something? Where do I start?
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:15
@jrwoods42 Try to use bootstrap framework to build up your portfolio...
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:15
@jrwoods42 Tough right? Haha yeah I don't really like how FCC throws you into this project and gives you a VERY advanced example.
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:16
@dylan-snyder thats SO true haha
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:16
But try and give it a shot, maybe take a look at the CodeReview chat room on here to see other peoples examples. Just make sure you don't copy! :D
Jim Morris
@killjoy82
Jun 23 2016 00:16
@carlosfilhomedeiros I don't know how to share screenshots on here
Rob
@mylife-myworld
Jun 23 2016 00:17

hmm I am stuck again, I have followed what it says, not sure if I am tired and just missed something or not. But I am stuck here

<form action="/submit-cat-photos">

<input type="text" placeholder="cat photo URL">
</form>
Can anyone tell me what I am missing please?

Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:17
@killjoy82 me neither, new here... can anyone help us?
Jim Morris
@killjoy82
Jun 23 2016 00:17
hahaha
Vinicius T Pereira
@trovao1990
Jun 23 2016 00:18
I want to change the position of my navbar items. I want it to be a little bit more to centre http://codepen.io/trovao1990/pen/qNqMjY Can anyone help me?
German Alvarez
@TheGiver14
Jun 23 2016 00:18
@killjoy82 you also just link it
you can also just link it @killjoy82 @carlosfilhomedeiros
Jim Morris
@killjoy82
Jun 23 2016 00:19
https://www.freecodecamp.com/challenges/use-the-bootstrap-grid-to-put-elements-side-by-side#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Ch2%20class%3D%22red-text%20text-center%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%20%20%3Cp%3EClick%20here%20for%20%3Ca%20href%3D%22%23%22%3Ecat%20photos%3C%2Fa%3E.%3C%2Fp%3E%0A%0A%20%20%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%3C%2Fa%3E%0A%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-running-cats%22%20class%3D%22img-responsive%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%20%20%0A%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-primary%22%3ELike%3C%2Fbutton%3E%0A%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-info%22%3EInfo%3C%2Fbutton%3E%0A%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-danger%22%3EDelete%3C%2Fbutton%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cp%3EThings%20cats%20love%3A%3C%2Fp%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%20%20%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%20%20%3Col%3E%0A%20%20%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%20%20%3C%2Fol%3E%0A%20%20%3Cform%20fccfaa%3D%22%2Fsubmit-cat-photo%22%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Indoor%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Outdoor%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Loving%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Lazy%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Crazy%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%20required%3E%0A%20%20%20%20%3Cbutton%20type%3D%22submit%22%3ESubmit%3C%2Fbutton%3E%0A%20%20%3C%2Fform%3E%0A%3C%2Fdiv%3E%0A
German Alvarez
@TheGiver14
Jun 23 2016 00:20
@killjoy82 nevermind then, hahahhha
Jim Morris
@killjoy82
Jun 23 2016 00:20
@TheGiver14 lol
would really love to move on...been stuck on this one for 2 days
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:23
@killjoy82 now I got it, just a sec

@killjoy82 @killjoy82 I think what you need is

<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>

German Alvarez
@TheGiver14
Jun 23 2016 00:24
but for future reference you could use gyazo, its an app that lets you take screen pics and compiles it into a link for you
Jim Morris
@killjoy82
Jun 23 2016 00:26
@TheGiver14 @carlosfilhomedeiros thanks for the help!! :+1:
CamperBot
@camperbot
Jun 23 2016 00:26
killjoy82 sends brownie points to @thegiver14 and @carlosfilhomedeiros :sparkles: :thumbsup: :sparkles:
:cookie: 24 | @thegiver14 |http://www.freecodecamp.com/thegiver14
:warning: killjoy82 already gave carlosfilhomedeiros points
Mandy
@YoungPlutus
Jun 23 2016 00:26
how do I center the center boxes?? http://codepen.io/YoungPlutus/pen/BzQpjV
and the image
Samuel Johnson
@samuelsincera
Jun 23 2016 00:28
Hey guys I'm stuck on responsively styling radio buttons. I nested them in <div class="row"></div>. Then, I nested each individual button in <div class="col-xs-6"></div>
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:29
@YoungPlutus try to use Bootstraps row and colums to put them in the middle colum
Mandy
@YoungPlutus
Jun 23 2016 00:31
@carlosfilhomedeiros How do I do that??????
Rodney
@devshades
Jun 23 2016 00:31
Hi all, for the first set of tutorials, I am stuck a little with this simple one, lol. "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%."

this is what i have "

<style>
.red-text {
color: red;
font-size: 16px
}
</style>"

Chris Paulino
@MenaceZero
Jun 23 2016 00:31
Im having trouble with the responsively style radio buttons in html
anyone know how I am supposed to do it?
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:32
@devshades make sure your element has its class set to "red-text"!
Rodney
@devshades
Jun 23 2016 00:32
Thank you @dylan-snyder
CamperBot
@camperbot
Jun 23 2016 00:32
devshades sends brownie points to @dylan-snyder :sparkles: :thumbsup: :sparkles:
:cookie: 141 | @dylan-snyder |http://www.freecodecamp.com/dylan-snyder
alex guzman
@Campcoder40
Jun 23 2016 00:32
have anyone here made it far to the tribute page part ?
rphares
@rphares
Jun 23 2016 00:32
@devshades , it doesn't want you to set the size by class
it want you to give the p elements that size,
you can set the css for specific elements,
for example, ill give my h2 elements the font-size of 30px
Rodney
@devshades
Jun 23 2016 00:33
Ohh so would it be <p font-size 16px> text</p> ?
rphares
@rphares
Jun 23 2016 00:33
<style>
h2 {
font-size: 30px;
}
</style>
not in the tag,
in the style section, like above, but for p and to 16 ;)
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:33
@devshades no! you have the class written correctly in your style tags
Rob
@mylife-myworld
Jun 23 2016 00:33

I can't get past this, I have gone over and over it and can't see what I am missing

<form action="/submit-cat-photos">
<input type="text" placeholder="cat photo URL">
</form>

rphares
@rphares
Jun 23 2016 00:34
yes, he has the class written correctly, @dylan-snyder -- but only one p element may have that class,
its in the instructions
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:34
@devshades now it should be <p class="red-text"></p>
rphares
@rphares
Jun 23 2016 00:34
so he shouldnt set the size by class,
he should set the size by element
(he should have that class, as you are suggesting, for the first p
and also his h2
but he isn't supposed to make his h2 size 16,
the class should remain as it was at the start of the lesson)
Rodney
@devshades
Jun 23 2016 00:35
ahh thank you! @rphares
CamperBot
@camperbot
Jun 23 2016 00:35
devshades sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5253 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 00:35
sure thing~ Happy coding!
Boris
@Boris1011
Jun 23 2016 00:36
@mylife-myworld have you add in the button for submit??
Rob
@mylife-myworld
Jun 23 2016 00:36
I'm not at that part yet, I htink that's the next bit
I get this
Make sure your form has an action attribute which is set to /submit-cat-photo
before I can continue
Debra Allison
@iloveteachingspanish
Jun 23 2016 00:37
Hi. First time trying to post a question. Do I just copy and paste my url on my task to ask my question?
Boris
@Boris1011
Jun 23 2016 00:37
There you go....
Dylan Snyder
@dylan-snyder
Jun 23 2016 00:38
You can, but its a matter of preference. I typically like a screenshot or just relaying the question to us
Karthiek Naagaraj
@karthiekn215
Jun 23 2016 00:38
I assigned the class "red-text" to both my p sections. Why is this incorrect?
Rob
@mylife-myworld
Jun 23 2016 00:38
But it looks to me like I have the action attribute @Boris1011 ?
Chris Paulino
@MenaceZero
Jun 23 2016 00:39

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
    </div>
  </div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive">
  <div class="row">
    <div class="col-xs-6">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-6">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-6">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>
Debra Allison
@iloveteachingspanish
Jun 23 2016 00:39
what does it mean- Give the text input in your form the class form-control.
rphares
@rphares
Jun 23 2016 00:39
because it has only told you to give that class to the first one-- the class contains details other than the font-size, and it doesn't want those details for all the paragraphs @karthiekn215
Chris Paulino
@MenaceZero
Jun 23 2016 00:39
Sorry for the wall of text but I can't see where im messing up the radio button s
Davey Morales
@davey08
Jun 23 2016 00:39
help
CamperBot
@camperbot
Jun 23 2016 00:39

CamperBot

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. e.g. find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

meet CamperBot in FreeCodeCamp/camperbotPlayground

:pencil: read more about camperbot on the FCC Wiki

rphares
@rphares
Jun 23 2016 00:40
Which lesson, @MenaceZero ?
Davey Morales
@davey08
Jun 23 2016 00:40
how do i post my screenshot?
rphares
@rphares
Jun 23 2016 00:40
explain format
CamperBot
@camperbot
Jun 23 2016 00:40

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

rphares
@rphares
Jun 23 2016 00:40
@davey08 :point_up:
Chris Paulino
@MenaceZero
Jun 23 2016 00:40
Responsively style radio buttons
rphares
@rphares
Jun 23 2016 00:41
ah-- it want you to put them in divs, right, @MenaceZero ?
these are your radio buttons:
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:42
@YoungPlutus for the image, you can add the class img-responsive center-block. For the boxe you can do an offset of 1 colum by adding the class col-xs-offset-1
@YoungPlutus tried here and worked
rphares
@rphares
Jun 23 2016 00:42
but they arent nested (put inside) their own <div class="col-xs-6">s, and both of those nested in a row ... @MenaceZero
Boris
@Boris1011
Jun 23 2016 00:42
@mylife-myworld this is what I have for my submit cat photo, if this helps at all....... <form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
Davey Morales
@davey08
Jun 23 2016 00:43
i still do not know how to post my screen shot
Chris Paulino
@MenaceZero
Jun 23 2016 00:43
oh okay im dumb
rphares
@rphares
Jun 23 2016 00:43
nope, not at all, happens all the time-- give it a go and let us know if still stuck, @MenaceZero ~ Happy coding! :blush:
Chris Paulino
@MenaceZero
Jun 23 2016 00:44
Thanks @rphares
CamperBot
@camperbot
Jun 23 2016 00:44
menacezero sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5256 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 00:44
@davey08 , type three backticks ` (they are near the esc key on most keyboards, same key as the ~
then press shift + enter for a new line
paste your code
then press shift + enter for another new line
then press command + enter(mac)
or control + enter (pc)
to send the code, formatted
Rob
@mylife-myworld
Jun 23 2016 00:45
@Boris1011 well from what I can see, because I'm not at the submit button point yet, I have done it correct but it's saying I haven't!! haha
Boris
@Boris1011
Jun 23 2016 00:46
Ok what do you have for code???
Rob
@mylife-myworld
Jun 23 2016 00:46
<form action="/submit-cat-photos">
<input type="text" placeholder="cat photo URL">
</form>
rphares
@rphares
Jun 23 2016 00:47
no s
at the end of <form action="/submit-cat-photo"> @mylife-myworld
Rob
@mylife-myworld
Jun 23 2016 00:47
omg is that it?
Boris
@Boris1011
Jun 23 2016 00:48
Also I think after the placeholder="cat photoURL" you need the word required...
Davey Morales
@davey08
Jun 23 2016 00:48
https://www.freecodecamp.com/challenges/use-a-css-class-to-style-an-element#?solution=%0A%3Cstyle%3E%0A%20%20h2%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%20red-text%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cp%20class%3D%20red-text%3EKitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.%3C%2Fp%3E%0A
Rob
@mylife-myworld
Jun 23 2016 00:48
jesus haha thanks @rphares
CamperBot
@camperbot
Jun 23 2016 00:48
mylife-myworld sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5257 | @rphares |http://www.freecodecamp.com/rphares
Christian Boxley
@ChristianBoxley
Jun 23 2016 00:48
The engine is saying, "Apple the red-text class to your h2 and p elements." I applied the red text to the h2, but when i try the same process on the p element, it doesn't work. Any help?
Rob
@mylife-myworld
Jun 23 2016 00:48
@Boris1011 I think the required part is on the next one as it hasn't said to put it yet
rphares
@rphares
Jun 23 2016 00:48
no worries! Glad you got it and happy coding~ @mylife-myworld
Christian Boxley
@ChristianBoxley
Jun 23 2016 00:49
Apply i meant, not apple lol
Panagiotis Sopides
@PanagiotisSop
Jun 23 2016 00:49
Guys, do you know how to pass a class to the body element in codepen through html?
rphares
@rphares
Jun 23 2016 00:49
@ChristianBoxley , could you paste the code you are trying, please?
Boris
@Boris1011
Jun 23 2016 00:49
Ok @mylife-myworld!! Hard to remember what I did when.....
Davey Morales
@davey08
Jun 23 2016 00:49
```
rphares
@rphares
Jun 23 2016 00:49
@davey08 , you got the formatting! Could you paste the actual code you are trying that way, please? :blush:
Christian Boxley
@ChristianBoxley
Jun 23 2016 00:49
@rphares I'm not sure how to do that
rphares
@rphares
Jun 23 2016 00:49
explain format
CamperBot
@camperbot
Jun 23 2016 00:49

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

rphares
@rphares
Jun 23 2016 00:50
@ChristianBoxley :point_up:
Rob
@mylife-myworld
Jun 23 2016 00:50
no worries @Boris1011 I am at the early stages haha
rphares
@rphares
Jun 23 2016 00:50
:point_up: June 22, 2016 5:44 PM here is where i go through how, line by line :blush: click the date link for more detailed instructions, if needed, @ChristianBoxley ~
Davey Morales
@davey08
Jun 23 2016 00:50
<style>
  h2 {
    color: red;
  }
</style>

<h2 class= red-text>CatPhotoApp</h2>

<p class= red-text>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
Boris
@Boris1011
Jun 23 2016 00:51
Have fun with the rest @mylife-myworld!!!
rphares
@rphares
Jun 23 2016 00:51
ah, okay--
Davey Morales
@davey08
Jun 23 2016 00:51
got it
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:51
@PanagiotisSop what do you mean by "pass a class to the body element"?
rphares
@rphares
Jun 23 2016 00:51
@davey08 , you have applied the color by element,
you want to apply it by making a class,
Christian Boxley
@ChristianBoxley
Jun 23 2016 00:51
@rphares This is so confusing haha, i'll figure this out
rphares
@rphares
Jun 23 2016 00:51
you od that in two parts,
first, you make the class in your css-- that is where you write the details of the class, @davey08
i will make a fake class called example-class as an example:
Christian Boxley
@ChristianBoxley
Jun 23 2016 00:52
@davey08 oh thank you davey!!
CamperBot
@camperbot
Jun 23 2016 00:52
christianboxley sends brownie points to @davey08 :sparkles: :thumbsup: :sparkles:
:cookie: 16 | @davey08 |http://www.freecodecamp.com/davey08
Panagiotis Sopides
@PanagiotisSop
Jun 23 2016 00:52
@carlosfilhomedeiros I want to do <body class="my-class">
rphares
@rphares
Jun 23 2016 00:52
<style>
.example-class {
color: blue;
}
</style>
then, you apply the class to the elements-
you almost did that, but you need quotes
example:
Boris
@Boris1011
Jun 23 2016 00:52
Alright I need help with where I am up to in the cat photo app.... doing the .container fluid part and have no idea what to do.....
rphares
@rphares
Jun 23 2016 00:53
<h2 class= "example-class">Text</h2> @davey08
Davey Morales
@davey08
Jun 23 2016 00:53
@rphares thanks!!
CamperBot
@camperbot
Jun 23 2016 00:53
davey08 sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5258 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 00:53
@Boris1011 , you just need to put all the html in a div,
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:53
@PanagiotisSop you can just create thte body tag, isnt?
rphares
@rphares
Jun 23 2016 00:53
to do so, you want to open the div right at the beginning, after the end of the </style> section, @Boris1011
and close it at the very end,
literally the last line,
then everything is inside it
(and be sure to give it the class = "container-fluid" ;) )
Boris
@Boris1011
Jun 23 2016 00:53
Alright, I'll see how that goes....
Panagiotis Sopides
@PanagiotisSop
Jun 23 2016 00:54
@carlosfilhomedeiros are you sure it wont create any bugs?
mcorby17
@mcorby17
Jun 23 2016 00:54
Does anyone here know about using git and github? Having some issues
Jacob Orson
@Jacoborson108
Jun 23 2016 00:54
How do I apply the class to the img element after establishing the class?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 00:54
Boris
@Boris1011
Jun 23 2016 00:54
Yay, thankyou @rphares
CamperBot
@camperbot
Jun 23 2016 00:54
boris1011 sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5259 | @rphares |http://www.freecodecamp.com/rphares
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:54
@PanagiotisSop thats how we learne! by knowing the bugs... try it
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 00:55
Can anyone tell me how to set the navbar to active after I click?
Jacob Orson
@Jacoborson108
Jun 23 2016 00:55
Anyone know how to apply the class .smaller-image to this img element? <img src ="https://bit.ly/fcc-relaxing-cat" >
rphares
@rphares
Jun 23 2016 00:55
anytime~ Congrats and happy coding, @Boris1011 ~
Boris
@Boris1011
Jun 23 2016 00:55
=D
Panagiotis Sopides
@PanagiotisSop
Jun 23 2016 00:56
@carlosfilhomedeiros ok thanks =D
CamperBot
@camperbot
Jun 23 2016 00:56
panagiotissop sends brownie points to @carlosfilhomedeiros :sparkles: :thumbsup: :sparkles:
:cookie: 164 | @carlosfilhomedeiros |http://www.freecodecamp.com/carlosfilhomedeiros
Tony Johnson
@tnyjhnsn
Jun 23 2016 00:56
@Jacoborson108 you add the class=“my-class-name” to the image tag
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 00:56
@Jacoborson108 add the class="smaller-image" and be sure you created the CSS of it
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 00:56
Can anyone help me with setting the navbar to active once its been selected? Here is the project https://codepen.io/morphed/pen/PzbpGr
Jacob Orson
@Jacoborson108
Jun 23 2016 00:57
Do I add it after after img src= ?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 00:57
between img and src @Jacoborson108
jobbanshee
@jobbanshee
Jun 23 2016 00:57
ive been trying to figure this out for a lil minute now ,still dont get it.it says Your img element should have the class smaller-image. and i put this

<img src="https://bit.ly/fcc-relaxing-cat"

<style>.smaller-image
{width: 100px;}</style>.

Jacob Orson
@Jacoborson108
Jun 23 2016 00:58
Got it thanks @SecondarySpawn !
CamperBot
@camperbot
Jun 23 2016 00:58
jacoborson108 sends brownie points to @secondaryspawn :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @secondaryspawn |http://www.freecodecamp.com/secondaryspawn
jobbanshee
@jobbanshee
Jun 23 2016 00:58
can someone help me understand?please
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 00:58
@jobbanshee We just brought it up above, to add a class you need to use the class="" within the img bracket
Xlepto
@Xlepto
Jun 23 2016 00:58
This lesson keeps telling me to "make sure each p element has a closing tag. but they all do
Jacob Orson
@Jacoborson108
Jun 23 2016 00:59
Thanks @Gabriel de Paula
CamperBot
@camperbot
Jun 23 2016 00:59
jacoborson108 sends brownie points to @gabriel :sparkles: :thumbsup: :sparkles:
:cookie: 11 | @gabriel |http://www.freecodecamp.com/gabriel
Boris
@Boris1011
Jun 23 2016 00:59
@jobbanshee it should be <img class="smaller-image" src="etc.">
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 00:59
so you would do <img class="image-whatever" src="blah.com">
^^ Yep
Xlepto
@Xlepto
Jun 23 2016 00:59
figured it out nvm
Panagiotis Sopides
@PanagiotisSop
Jun 23 2016 01:00
@carlosfilhomedeiros yess it works as it should =D
jobbanshee
@jobbanshee
Jun 23 2016 01:00
of course thank you @SecondarySpawn and @Boris1011
CamperBot
@camperbot
Jun 23 2016 01:00
:warning: could not find receiver for boris1011
jobbanshee sends brownie points to @secondaryspawn and @boris1011 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @secondaryspawn |http://www.freecodecamp.com/secondaryspawn
Boris
@Boris1011
Jun 23 2016 01:02
Anytime @jobbanshee have fun coding!!!!!! =D
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:02
@Boris1011 Can you help me out ?
Boris
@Boris1011
Jun 23 2016 01:02
I can attempt.... Try me!!
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:03
Do you have any idea how to set a navbar active once its selected? https://codepen.io/morphed/pen/PzbpGr
About is set to active, but I would like to set the others active once it is clicked
CamperBot
@camperbot
Jun 23 2016 01:03
you need to ask about @someone!
tasha6923
@tasha6923
Jun 23 2016 01:03
i don't really get what the div/division element is for can someone explain?
Boris
@Boris1011
Jun 23 2016 01:04
Sorry @SecondarySpawn I don't know that.... I'm not that far into coding yet!!!
Valentino
@beachcoconut
Jun 23 2016 01:04
Help, cant get out of this challenge. Does anyone see any missing div in this code
CamperBot
@camperbot
Jun 23 2016 01:04
no wiki entry for: cant get out of this challenge does anyone see any missing div in this code
Valentino
@beachcoconut
Jun 23 2016 01:04
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-7">


<label><input type="radio" name="indoor-outdoor"> Indoor</label>



<label><input type="radio" name="indoor-outdoor"> Outdoor</label>



<label><input type="checkbox" name="personality"> Loving</label>



<label><input type="checkbox" name="personality"> Lazy</label>



<label><input type="checkbox" name="personality"> Crazy</label>



<input type="text" class="form-control" placeholder="cat photo URL" required>

<div class="col-xs-5"><button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button> </div>
</div>
</div>
</form>
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:05
@tasha6923 From what I understand, it ultimately sets divisions within the page. It allows you modify certain parts of the pages with class,etc. without affecting the rest
Do a little research yourself, that is what I gathered from the challenges :)
@beachcoconut whats the challenge?
tasha6923
@tasha6923
Jun 23 2016 01:05
thank you that helps alot
Boris
@Boris1011
Jun 23 2016 01:05
@beachcoconut will need to know the challenge...
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:06
@tasha6923 Anytime :)
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 01:06
@SecondarySpawn is it like "button" that you want? try adding class="btn"
Valentino
@beachcoconut
Jun 23 2016 01:06
Line up Form Elements Responsively with Bootstrap
Boris
@Boris1011
Jun 23 2016 01:06
And what do you have to do???
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:06
nope, I just want to set it to active...in other words, I want the background of the bar to be darker to represent a clicking action
@beachcoconut ^
Valentino
@beachcoconut
Jun 23 2016 01:06
@Boris1011 Line up Form Elements Responsively with Bootstrap
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:06
@carlosfilhomedeiros ^^ sorry wrong person lol
Valentino
@beachcoconut
Jun 23 2016 01:07
@Boris1011 Line up Form Elements Responsively with Bootstrap
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:07
@beachcoconut You are missing a lot of code for that challenge
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 01:08
@SecondarySpawn i think ill need jQuery there
Debra Allison
@iloveteachingspanish
Jun 23 2016 01:08
Pls advise- Nest your form submission button in a div with the class col-xs-5. <button type="submit" class="btn btn-primary" div class="col-xs-5"><i class="fa fa-paper-plane"></i> Submit</button> How do i fix this?
Davey Morales
@davey08
Jun 23 2016 01:08
i hope i can get the hang of coding i am so in to it
Valentino
@beachcoconut
Jun 23 2016 01:09
@SecondarySpawn I just showed the code im working on
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:09
@carlosfilhomedeiros What do you mean?
@beachcoconut Oh okay
Carlos Medeiros Filho
@carlosfilhomedeiros
Jun 23 2016 01:09
@carlosfilhomedeiros did you get through jQuery? I think you have to set an click action.. and then when the action clicked is set... you addClass("active") to where you clicked
@SecondarySpawn Maybe there is a easier way, buy thats what I can think of now
Valentino
@beachcoconut
Jun 23 2016 01:10
@SecondarySpawn everything is fine except for a missing closing div
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:10
@beachcoconut Okay, so for that challenge you will need 3 div class row
Debra Allison
@iloveteachingspanish
Jun 23 2016 01:10
Pls advise- Nest your form submission button in a div with the class col-xs-5. <button type="submit" class="btn btn-primary" div class="col-xs-5"><i class="fa fa-paper-plane"></i> Submit</button> How do i fix this?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:11
@beachcoconut You will need to add a div for the radios, checkboxes, and one for the submit button. Let me know if that makes sense
Valentino
@beachcoconut
Jun 23 2016 01:11
@SecondarySpawn Please explain im new to this and so are my contant headaches
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 01:12
@beachcoconut Want me to private message you, I dont want to crowd the chat with code
Manish Giri
@Manish-Giri
Jun 23 2016 01:12
@iloveteachingspanish could you paste your whole code?
Boris
@Boris1011
Jun 23 2016 01:13
When you add a second image, do you need a second <a> element???
Debra Allison
@iloveteachingspanish
Jun 23 2016 01:13

@Manish-Giri

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
h2 {
font-family: Lobster, Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

</style>

<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="cat photo URL" required>
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
</form>
</div>
</div>

Manish Giri
@Manish-Giri
Jun 23 2016 01:13
@iloveteachingspanish what’s the challenge name?
Debra Allison
@iloveteachingspanish
Jun 23 2016 01:14
@Manish-Giri Line up Form Elements Responsively with Bootstrap
Manish Giri
@Manish-Giri
Jun 23 2016 01:15
@iloveteachingspanish here,
    <div class="row">
      <div class="col-xs-7"><input type="text" class="form-control" placeholder="cat photo URL" required></div>
    <div class="col-xs-5"><button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div>
    </div>
@iloveteachingspanish first, close up the div that contains your input element, this is the div class=“col-xs-7”
Debra Allison
@iloveteachingspanish
Jun 23 2016 01:15
@Manish-Giri thanks! i'll digest this and see if it makes sense
CamperBot
@camperbot
Jun 23 2016 01:15
iloveteachingspanish sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 1305 | @manish-giri |http://www.freecodecamp.com/manish-giri
Boris
@Boris1011
Jun 23 2016 01:16
When you add a second image, do you need a second <a> element???
Manish Giri
@Manish-Giri
Jun 23 2016 01:16
@iloveteachingspanish then, you must create a similar div that will contain the button, this div will have the class col-xs-5
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:16

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Manish Giri
@Manish-Giri
Jun 23 2016 01:16
@iloveteachingspanish thereby, your input and button will be lined up side by side
Dylan Snyder
@dylan-snyder
Jun 23 2016 01:16
@Boris1011 the <a> tag is for links, so unless the challenge wants two images with two links, no! just <img> ;)
Boris
@Boris1011
Jun 23 2016 01:17
Thankyou @dylan-snyder!!!!
CamperBot
@camperbot
Jun 23 2016 01:17
boris1011 sends brownie points to @dylan-snyder :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @dylan-snyder |http://www.freecodecamp.com/dylan-snyder
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:17
how would i resize the image in that code to 100 pixels, while also placing it in the smaller-image category?
Boris
@Boris1011
Jun 23 2016 01:18
@ChristianBoxler .smaller-image { width: 100px} <img class="smaller-image">
@ChristianBoxley sorry
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:18
@Boris1011 Thanks!
CamperBot
@camperbot
Jun 23 2016 01:18
:warning: could not find receiver for boris1011
christianboxley sends brownie points to @boris1011 :sparkles: :thumbsup: :sparkles:
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:19
Why the apology?
Boris
@Boris1011
Jun 23 2016 01:19
spelt it wrong....
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:19
ohh you're fine haha
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:25
@Boris1011 this is not working for some reason, where exactly do i place the code?
Boris
@Boris1011
Jun 23 2016 01:26
the .smaller-image will go in the style element and then <img class,etc> will go somewhere outside of it...
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:28

@Boris1011

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image { width: 100px}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

this is what ive just tried but that didnt work
Broc
@JayhawkChief
Jun 23 2016 01:29
I'm having that same trouble too.
Manish Giri
@Manish-Giri
Jun 23 2016 01:29
@ChristianBoxley you also need to apply the class
<img class=“smaller-image" src="https://bit.ly/fcc-relaxing-cat”>
Boris
@Boris1011
Jun 23 2016 01:30
Essentially that above @ChristianBoxley and @JayhawkChief
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:30
@Manish-Giri i'll add it, and i see you like chess lol i do too
Manish Giri
@Manish-Giri
Jun 23 2016 01:31
:blush:
Broc
@JayhawkChief
Jun 23 2016 01:31
Got it. Thanks!
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:32
got it too, thanks guys
Boris
@Boris1011
Jun 23 2016 01:33
Glad too help guys, and thankyou to those who have helped me, I must take leave to do other things and might be on later!!! Essentially, goodbye for now!!!!
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:35
see ya!
Yama
@FuegoYama
Jun 23 2016 01:43

I just got codepen, did the h1 successfully (<h1>Hello World</h1>). But I'm having trouble coloring it with text-primary. All I put was:

$("h1").addClass("text-primary");

Should I have opened the CSS with $(document).ready ..... ?

Tate Morgan
@TateM
Jun 23 2016 01:45
someone want to check out my tribute page? I need input on where to put some links http://codepen.io/TateM/full/BzQLZy/
also why does it look so much different when i look at it in full page on codepen
Chris
@ChrisHogue
Jun 23 2016 01:48
can anyone confirm that all of my "p" elements are closed?

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<P> <a href="http://www.freecatphotoapp.com">cat photos</a> View More </p>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

rphares
@rphares
Jun 23 2016 01:49
you have a capital p elemwnt, @ChrisHogue , <P> <a href="http://www.freecatphotoapp.com">cat photos</a> View More </p>
Tate Morgan
@TateM
Jun 23 2016 01:49
@ChrisHogue you have a capital
@rphares beat me to it lol
Yama
@FuegoYama
Jun 23 2016 01:49
@ChrisHogue they all look closed to me; as mentioned there's a cap
Chris
@ChrisHogue
Jun 23 2016 01:49
holy crap. thanks everyone
rphares
@rphares
Jun 23 2016 01:50
@ChristianBoxley "class1 smaller-image"".thick-green-border { border-color: green; border-width: 10px; border-style: solid;class2" is the problem...
Yama
@FuegoYama
Jun 23 2016 01:51
@TateM I'd put the link at the bottom, inside a nice, lightly colored box. But instead of saying "link" or putting the hyperlink, put something like "connect with the American wilderness here" or some call to action lol. Page looks really good tho!
rphares
@rphares
Jun 23 2016 01:52
the actual class in there, .thick-green-border { border-color: green; border-width: 10px; border-style: solid;} should be in the <style> section, not the tag, @ChristianBoxley
Amilyn
@amilynamanilla
Jun 23 2016 01:52

hi everyone.. need some help.. i have a JSON, let's say

var myPlants = [
  { 
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }  
];

if i want to access "list" of "trees" but i don't know that it's called "list", all I know is that it is the 2nd property of the 2nd array, how can i do it?

rphares
@rphares
Jun 23 2016 01:52
i dont th you have a class1, that probably came from someones example, @ChristianBoxley
Christian Boxley
@ChristianBoxley
Jun 23 2016 01:52
@rphares i tried that at first but it didnt work, ill try it again and tweak something
Pritesh Gandhi
@prijuly2000
Jun 23 2016 01:54
need help with code
function updateRecords(id, prop, value)
{
if(prop=="tracks" && value!=="")
{
if(!collection[id][prop])
{
collection[id][prop]=[];
}
collection[id][prop].push(value);
}
else if(value!=="")
{
collection[id][prop]=value;
}
return collection;
}
@erichoonpark
@erictleung
function updateRecords(id, prop, value) { if(value!=="") { if(prop=="tracks") { if(!collection[id].hasOwnProperty(prop)) { collection[id][prop]=[]; } collection[id][prop].push(value); } else { collection[id][prop]=value; } } return collection; }
syedfarooq
@syedfarooq
Jun 23 2016 01:58
hi
rphares
@rphares
Jun 23 2016 02:00
are you trying to uncomment it?
@syedfarooq
syedfarooq
@syedfarooq
Jun 23 2016 02:00
yes
rphares
@rphares
Jun 23 2016 02:00
remove the comment marksd--
the <!-- and the -->
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:00
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border{
border-color:green;
border-width:10px;
border-style:solid;
}
</style>
Amilyn
@amilynamanilla
Jun 23 2016 02:00
@rphares can you help me?
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:01
Im changing the border here, but what i did was incorrect, how do i tweat this?
tweak, i meant.
rphares
@rphares
Jun 23 2016 02:01
better, @ChristianBoxley -- can we see the rest?
@amilynamanilla , whats the name of the challenge?
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:01
yes, hold up

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border{
border-color:green;
border-width:10px;
border-style:solid;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class= smaller-image src="https://bit.ly/fcc-relaxing-cat">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Amilyn
@amilynamanilla
Jun 23 2016 02:01
@rphares profile lookup
rphares
@rphares
Jun 23 2016 02:01
so,you need to applythe class, @ChristianBoxley
( @amilynamanilla , i terrible at explaining that one-- you'll do better to ask in https://gitter.im/FreeCodeCamp/HelpJavaScript,
syedfarooq
@syedfarooq
Jun 23 2016 02:02
@rphares Thnx
CamperBot
@camperbot
Jun 23 2016 02:02
syedfarooq sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5261 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:02
try pasting your formatted code there, they are experts at that one, i cant explain it well...)
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:02
@rphares where do i apply the class? in the style section?
rphares
@rphares
Jun 23 2016 02:02
You've made the class in your css, @ChristianBoxley , but you still need to add it to the tag of what you want to give the border to,
no,
Amilyn
@amilynamanilla
Jun 23 2016 02:03
@rphares ok!
rphares
@rphares
Jun 23 2016 02:03
the <style> section is okay-- that where you write the details of the class, @ChristianBoxley
but you have to tell the html which element gets that class,
you do it by adding class="your-class-name" to the element that gets the class,
(in this case, the class would be thick-green-border, NOT my example i just wrote ;) )
you add that to the tag of what needs the class-- check the instructions, I'm not sure, it might be the image?
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:04
@rphares yes its the image
rphares
@rphares
Jun 23 2016 02:04
an example of giving an image TWO classes. one class is named classOne and one is named smaller-image:
Arees Sghair
@Ressoo
Jun 23 2016 02:04
I need help <p>Click here for <a #href="http://www.freecatphotoapp.com">cat photos</a>.</p> is this correct
i need to have a deadlink
rphares
@rphares
Jun 23 2016 02:05
<img class= "classOne smaller-image" src= "www.example.com"> @ChristianBoxley
@Ressoo , you replace the link with the #
a href=
See how i put BOTH class names after class=" in that tag, @ChristianBoxley ?
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:06
yes, i have that, but how do i do that for the borders?
rphares
@rphares
Jun 23 2016 02:06
you can do the same with your image-- just add the new class name (thick-green-border, i think) after the first class, smaller-imagewhere it says class="
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:06
do i do, <img class="thick-green-border"
rphares
@rphares
Jun 23 2016 02:06
yes, but that will give it the new class only,
Arees Sghair
@Ressoo
Jun 23 2016 02:06
@rphares it worked thanks
CamperBot
@camperbot
Jun 23 2016 02:06
ressoo sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5262 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:07
you already have a class, "smaller-image" (should be in quotes, btw)
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:07

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border{
border-color:green;
border-width:10px;
border-style:solid;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class= "smaller-image" src="https://bit.ly/fcc-relaxing-cat">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

rphares
@rphares
Jun 23 2016 02:07
so you need to have BOTH smaller-image thick-green-border in the same set of quotes, @ChristianBoxley
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:08
this is what i have, im not excactly sure what you're saying, where would i start?
so "smaller-image thick-green-border" ?
rphares
@rphares
Jun 23 2016 02:08
yep
you have:
<img class= "smaller-image" src="https://bit.ly/fcc-relaxing-cat">
you need to replace "smaller-image" with what you just wrote,
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:09
ok it worked
thanks, that was sooo confusing haha @rphares
CamperBot
@camperbot
Jun 23 2016 02:09
christianboxley sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5263 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:09
thats how you add multiple classes, @ChristianBoxley -- with a space, in the same set of "" :blush:
anytime! congrats and happy coding@
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:10
im going to favorite you because i will have many more questions lol @rphares
rphares
@rphares
Jun 23 2016 02:11
aww, thanks! anytime i can! (please note, as you reach projects or the more advanced JS, i am not so useful, I'm a beginner myself. until then, happy to help~ :blush: @ChristianBoxley )
CamperBot
@camperbot
Jun 23 2016 02:11
rphares sends brownie points to @christianboxley :sparkles: :thumbsup: :sparkles:
:cookie: 25 | @christianboxley |http://www.freecodecamp.com/christianboxley
Christian Boxley
@ChristianBoxley
Jun 23 2016 02:12
thank you! for now i must go, have loads of AP packets to do @rphares
CamperBot
@camperbot
Jun 23 2016 02:12
christianboxley sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:warning: christianboxley already gave rphares points
Allysa Fletcher
@alldanmos
Jun 23 2016 02:14
<input class="btn" type="button">Like</input>
^^ input is highlighted like it's not valid? WTF?
The closing input, not the first one. Won't let me pass.
rphares
@rphares
Jun 23 2016 02:16
did it tell you to use input, or button, @alldanmos ? (lesson name? )
(hint: guessing it wants you to use <button></button>)
CamperBot
@camperbot
Jun 23 2016 02:17
:construction: Spoilers are only in the Bonfire's Custom Room :point_right:
Allysa Fletcher
@alldanmos
Jun 23 2016 02:17
@rphares create a new button element. Should I use <button>Like</button>
rphares
@rphares
Jun 23 2016 02:18
yeah, seems likely by the name :blush:
Allysa Fletcher
@alldanmos
Jun 23 2016 02:18
@rphares Yeah that was it! Thanks. Now I feel dumb.
CamperBot
@camperbot
Jun 23 2016 02:18
alldanmos sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5264 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:18
no worries, happens all the time!
(couldn't find that lesson, hmm, whats wrong with my profile? thats why my answer was indirect, apologies if that sounded smart-alecky, wasn't meant to be! )
Allysa Fletcher
@alldanmos
Jun 23 2016 02:21
No, you're fine. :)
Matt
@northern11
Jun 23 2016 02:22
question.. is there a way to link multiple attributes in the same element?
Sean Wilson
@seanc
Jun 23 2016 02:22
@northern11 what do you mean?
Matt
@northern11
Jun 23 2016 02:23
stuck on making a required input field, but keeping a placeholder in it as well
Sean Wilson
@seanc
Jun 23 2016 02:23
what do you have right now?
Matt
@northern11
Jun 23 2016 02:23
<form action="/submit-cat-photo">
<input type="text" required; placeholder="cat photo URL">

<button type="submit">Submit</button>
</form>
Sean Wilson
@seanc
Jun 23 2016 02:23
all you have to do is remove the ;
:P
; is not valid in html markup, it is just used as a delimiter for statements in javascript
Matt
@northern11
Jun 23 2016 02:24
oh i thought the ; would allow me to add additional things..
Sean Wilson
@seanc
Jun 23 2016 02:24
ah no, you can add multiple attributes, you just need to delimit them with a space
Matt
@northern11
Jun 23 2016 02:24
oh, ok thankS1
thanks!*
Sean Wilson
@seanc
Jun 23 2016 02:24
here's an example
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> </a>
just put a space :)
Matt
@northern11
Jun 23 2016 02:25
got it
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:26
Hello everyone hope you are all having a great day
here with a little problem
is asking me to: Give your body element the color property of green.
so i did and it wont work how do i unbug my code her
here is what i wrote

<h1>hello world</h1>

<style>
body {
background-color: green;
}
body {
font-family: monospace;
}

</style>

<body class="green-background">
</body>

Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:29
how to call JSON with an api key?
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:31
anyone
?
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:32
change background-color to color
Rodney
@devshades
Jun 23 2016 02:32
@sbarrantes631 ^
Jesus Hilario H.
@jesushilarioh
Jun 23 2016 02:32
This message was deleted
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:33
yes
Rodney
@devshades
Jun 23 2016 02:34
Welcome @Mrprofessor
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:34
@devshades
im on a stop light trying to figure this out
but nothing is working
Rodney
@devshades
Jun 23 2016 02:35
@sbarrantes631 - change background-color to color 'mentioned by @Hawkite
Try using it within the same body code also
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:36

<h1>hello world</h1>

<style>

body {
background-color: green;
}

body {
font-family: monospace;
}

</style>

Preet Patel
@aixranger
Jun 23 2016 02:36
Hello!
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:36
\like that
Preet Patel
@aixranger
Jun 23 2016 02:36
anyone willing to help me?
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:37
@aixranger with?
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:37
it will go green but it is still wrong for some reason
Preet Patel
@aixranger
Jun 23 2016 02:37
I am stuck on the Use an ID Attribute Style an Element
rphares
@rphares
Jun 23 2016 02:37
@sbarrantes631 , you want to put the <h1> below the </style> section, and capitalise monospace....
Preet Patel
@aixranger
Jun 23 2016 02:38
How should I give my form element a background-color as green?
rphares
@rphares
Jun 23 2016 02:38
@aixranger , can you paste the code you are trying, please?
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:38
@aixranger #idOfForm{ background-color: green;}
Aaron Yu
@aaronyu1
Jun 23 2016 02:38

Guys, trying to put the Radio buttons together:<label><input tupe="radio" name="indoor-outdoor">indoor</label>

<label><input tupe="radio" name="indoor-outdoor">outdoor</label>

Preet Patel
@aixranger
Jun 23 2016 02:38
You want the entire code @rphares ?
Aaron Yu
@aaronyu1
Jun 23 2016 02:38
Anything wrong with the above?
rphares
@rphares
Jun 23 2016 02:38
typo, input type @aaronyu1
@aixranger , yes please. and please try to format
explain format
CamperBot
@camperbot
Jun 23 2016 02:39

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:39
lets see
Aaron Yu
@aaronyu1
Jun 23 2016 02:39
@rphares oh man! Thanks!
CamperBot
@camperbot
Jun 23 2016 02:39
aaronyu1 sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5265 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:40
sure thing~ Happy coding! :)
Rodney
@devshades
Jun 23 2016 02:40
Has anybody received certification yet? If so, how do you obtain the certificate, is it a pdf, mailed etc.. ?
Preet Patel
@aixranger
Jun 23 2016 02:40

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

.gray-background {
background-color: gray;
}

#cat-photo-element {
background-color: green;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

rphares
@rphares
Jun 23 2016 02:40
two things, @aixranger --
Preet Patel
@aixranger
Jun 23 2016 02:41
I am sorry I'm new to this so I do not know how to format @rphares
rphares
@rphares
Jun 23 2016 02:41
was the ID cat-photo-element, or cat-photo-form (please check the directions, one was the example and one was the instructed ID ;) )
Errol
@eikalina
Jun 23 2016 02:41
Hey guys I need help, how can I have text under an image and make so that it isn't centered? I need the text under the image to be left aligned
rphares
@rphares
Jun 23 2016 02:41
second, you need to apply that ID to the element, @aixranger -
you can do that the same way you apply a class--
Rodney
@devshades
Jun 23 2016 02:41
+rep @rphares
Preet Patel
@aixranger
Jun 23 2016 02:42
ohhhhh I see my mistake... @rphares
Thank you! @rphares
CamperBot
@camperbot
Jun 23 2016 02:42
aixranger sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5267 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:42
for a class, you add class="class-name" @aixranger . for an ID, you add id="id-name" to the tag, @aixranger
sure thing, anytime!
Omid Nowrouzi
@onowrouzi
Jun 23 2016 02:42
@eikalina you can use text-right class if using bootstrap.
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:42

@rphares like this

<style>
body {
background-color: green;
}

body {
font-family: Monospace;
}
</style>

<h1>hello world</h1>

but it wont work
rphares
@rphares
Jun 23 2016 02:43
better-- beauty oddest need body twice, @sbarrantes631
you can put all the details in the same body section, @sbarrantes631
also, if i recall, there was a background-color AND a color on that one,
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:43
does http://codepen.io/FreeCodeCamp/full/bELRjV work for any of you guys?
Errol
@eikalina
Jun 23 2016 02:43
@onowrouzi will try that now, will let you know
Tate Morgan
@TateM
Jun 23 2016 02:43
how can i move my link down toward the bottom of the page? http://codepen.io/TateM/full/BzQLZy/
rphares
@rphares
Jun 23 2016 02:43
i think the color was green and the background-color was black? (you will want to double check its been a while, @sbarrantes631 )
Preet Patel
@aixranger
Jun 23 2016 02:43
How useful is padding? @rphares
rphares
@rphares
Jun 23 2016 02:43
@aixranger , very,
Rodney
@devshades
Jun 23 2016 02:44
@Hawkite yes
Preet Patel
@aixranger
Jun 23 2016 02:44
Thank you @rphares
CamperBot
@camperbot
Jun 23 2016 02:44
aixranger sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:warning: aixranger already gave rphares points
Omid Nowrouzi
@onowrouzi
Jun 23 2016 02:44
@eikalina I meant text-left. Oops.
rphares
@rphares
Jun 23 2016 02:44
you want your page to be legible at minimum and attractive is better, @aixranger :blush:
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:44
@devshades what temperature stats does it list because it does not work for me.
Magnus Holm
@mghlm
Jun 23 2016 02:44
Hi all. I have tried searching on this, but I can’t figure it out. I am making my tribute page, using HTML and CSS (no bootstrap), and I want to align som text <p> and <li> with my picture, so that the text has same width as the image. How do I do that?
Rodney
@devshades
Jun 23 2016 02:45
Nevermind the run is not working, @Hawkite
,
°C
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:45
@devshades I fixed it, my ad-blocker was messing with it
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:45
@rphares ha i forgot about that
Omid Nowrouzi
@onowrouzi
Jun 23 2016 02:45
@m4gnusholm use a nested div.
Nivethalahari
@Nivethalahari
Jun 23 2016 02:45
<p>Here's a <a herf="http://freecatphotoapp.com"> cat phots</a>for you to follow</p>..what is the mistake??
Rodney
@devshades
Jun 23 2016 02:45
@Hawkite ahh, neat - will keep that in mind also
Joseph Ruiz
@bigfish012
Jun 23 2016 02:45
Having some trouble completing a lesson enclosing buttons in a div tag, can anyone help me out?
rphares
@rphares
Jun 23 2016 02:46
@Nivethalahari , cat photos (typo) for one,
not certain on the sentence, though--
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:46
so is -- body { color: green; }
Magnus Holm
@mghlm
Jun 23 2016 02:46
@onowrouzi So I nest both text and img in a div and center that?
rphares
@rphares
Jun 23 2016 02:46
isn't it View more cat photos? @Nivethalahari (name of lesson, please? )
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:46
and the bacgroung-color is black
Magnus Holm
@mghlm
Jun 23 2016 02:46
rphares
@rphares
Jun 23 2016 02:46
kinda, @sbarrantes631 -- ALL the details go in the same set of {} as it is all for body, @sbarrantes631
so, example
Omid Nowrouzi
@onowrouzi
Jun 23 2016 02:46
@m4gnusholm Depending on what you are trying to do. Yes.
Magnus Holm
@mghlm
Jun 23 2016 02:47
And I want to align the text and timeline with the image
Stuart Barrantes
@sbarrantes631
Jun 23 2016 02:47
done thanks @rphares
CamperBot
@camperbot
Jun 23 2016 02:47
:star2: 5268 | @rphares |http://www.freecodecamp.com/rphares
sbarrantes631 sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
Nivethalahari
@Nivethalahari
Jun 23 2016 02:47
its anchor element for linking content outside of current pg
Preet Patel
@aixranger
Jun 23 2016 02:47
padding comes in CSS or HTML? @rphares
Charles Sexton
@Grimlek
Jun 23 2016 02:47
I am going through the coding map and I have a question. Does it get harder or does it stay this easy? It really gives you the answers....Not looking to learn this way, would rather start a side project or something....
padding is in css or inline style using html
rphares
@rphares
Jun 23 2016 02:47
oh, sweet, nm then! Congrats and happy coding~
CSS, @aixranger ~
Alexey Bakhtin-Bibikov
@Hawkite
Jun 23 2016 02:47
@aixranger padding is in css
rphares
@rphares
Jun 23 2016 02:47
it'll come up in later lessons
@Grimlek , it does get significantly harder, later on,
Errol
@eikalina
Jun 23 2016 02:48
@onowrouzi I meant the text is to be under the image but aligned along the left edge of the image and the image is centered on the page.
Preet Patel
@aixranger
Jun 23 2016 02:48
Thanks @Grimlek @Hawkite @rphares
CamperBot
@camperbot
Jun 23 2016 02:48
aixranger sends brownie points to @grimlek and @hawkite and @rphares :sparkles: :thumbsup: :sparkles:
:cookie: 11 | @grimlek |http://www.freecodecamp.com/grimlek
:warning: aixranger already gave rphares points
:cookie: 176 | @hawkite |http://www.freecodecamp.com/hawkite
Charles Sexton
@Grimlek
Jun 23 2016 02:48
thank you just wanted to make sure....didnt want to waste my time
rphares
@rphares
Jun 23 2016 02:48
if you know this stuff already, you may use the map to navigate ahead-- only challenges marked with * are required for certification, @Grimlek ,
Rodney
@devshades
Jun 23 2016 02:48
Seeking followers - Adding some project respiratories at the end of the week - please follow me :)
Omid Nowrouzi
@onowrouzi
Jun 23 2016 02:48
@Grimlek There are projects at the end of sections that are largely replication without answers.
rphares
@rphares
Jun 23 2016 02:48
the algorithims and projects, essentially @Grimlek
Charles Sexton
@Grimlek
Jun 23 2016 02:49
thank you @rphares
CamperBot
@camperbot
Jun 23 2016 02:49
grimlek sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star2: 5269 | @rphares |http://www.freecodecamp.com/rphares
rphares
@rphares
Jun 23 2016 02:49
Sure thing-- happy coding! :)
Omid Nowrouzi
@onowrouzi
Jun 23 2016 02:49
@eikalina probably best to use id's or classes.
Rodney
@devshades
Jun 23 2016 02:49
+Brownie Pts to all followers
Preet Patel
@aixranger
Jun 23 2016 02:51
I am following the #100DaysOfCoding! My second day today, how many of you already finished it?
Nivethalahari
@Nivethalahari
Jun 23 2016 02:52
@rphares its anchor element for linking content outside the current pg
Magnus Holm
@mghlm
Jun 23 2016 02:53
Can someone tell me how I get the caption + list aligned with the picture here? https://codepen.io/m4gnusholm/pen/yJVMmp
Preet Patel
@aixranger
Jun 23 2016 02:54
Is it mandatory to read the section on the left where they tell you what it is?
Sean Wilson
@seanc
Jun 23 2016 02:57

@m4gnusholm do you mean like
TITLE----------------- IMAGE
CAPTION

... LIST

Rob Tuck
@robtuck93
Jun 23 2016 02:58

It says Between the style tags, give the p elements font-size of 16px

'''<style>
.red-text {
color: red;
font-size: 16px;
}
</style>
'''

is this the correct way to do it?

CamperBot
@camperbot
Jun 23 2016 02:58
:bulb: to format code use backticks! ``` more info
Sean Wilson
@seanc
Jun 23 2016 02:58
@robtuck93 yeah, however they might mean all elements, in that case instead of .red-text it would be p
not sure but yes you have it right
Magnus Holm
@mghlm
Jun 23 2016 02:58
@seanc No I just mean so that the pages width becomes the same as the photo. So that the text starts when the picture does, and not sits out in the left side.
Sean Wilson
@seanc
Jun 23 2016 02:59
ah you could put them all in the a container
the largest element would set the container's width
Magnus Holm
@mghlm
Jun 23 2016 03:00
is that <div class=“container”> ?
Sean Wilson
@seanc
Jun 23 2016 03:00
yeah
Magnus Holm
@mghlm
Jun 23 2016 03:00
ok i’ll try, thanks
Rob Tuck
@robtuck93
Jun 23 2016 03:00
@seanc Thank You
CamperBot
@camperbot
Jun 23 2016 03:00
robtuck93 sends brownie points to @seanc :sparkles: :thumbsup: :sparkles:
:cookie: 20 | @seanc |http://www.freecodecamp.com/seanc
Sean Wilson
@seanc
Jun 23 2016 03:01
@robtuck93 np :)
Magnus Holm
@mghlm
Jun 23 2016 03:01
@seanc hmm, the text is still too far to the left
Sean Wilson
@seanc
Jun 23 2016 03:02
Magnus Holm
@mghlm
Jun 23 2016 03:02
but for some reason it’s only if i make the window more than 1200px wide
yes!
Sean Wilson
@seanc
Jun 23 2016 03:02
i went ahead and used flexbox, but i'm not sure if you know much about that yet :P
Magnus Holm
@mghlm
Jun 23 2016 03:03
damn, i dont, haha
this is the first thing i’ve ever coded
I tried putting all the elements inside <div class=“col-lg-12> but it didnt work. unless i make the screens width less than 1200px, then it does
Tate Morgan
@TateM
Jun 23 2016 03:04
can you layer images in CSS?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:04
@m4gnusholm Use col-xs-12
The "col" rules apply to all sizes larger or equal to what you specify.
Chances are 1200px falls under medium.
Sean Wilson
@seanc
Jun 23 2016 03:05
wasn't even aware he had bootstrap :P
Magnus Holm
@mghlm
Jun 23 2016 03:05
@onowrouzi it is shown as the same
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:06
@TateM Using z index you can.
Magnus Holm
@mghlm
Jun 23 2016 03:06
xs and lg, it looks the same
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:06
hmmm....
Magnus Holm
@mghlm
Jun 23 2016 03:06
but only with the windows width more than 1200px. under, it looks good
mine is 1400px
Tate Morgan
@TateM
Jun 23 2016 03:07
@onowrouzi thanks ill look it up
CamperBot
@camperbot
Jun 23 2016 03:07
tatem sends brownie points to @onowrouzi :sparkles: :thumbsup: :sparkles:
:cookie: 177 | @onowrouzi |http://www.freecodecamp.com/onowrouzi
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:07
Alright, I just got to my desktop. @m4gnusholm
So what was it exactly you were trying to do?
I had trouble following on my phone.
Magnus Holm
@mghlm
Jun 23 2016 03:09
@onowrouzi I am just trying to align the text and list under the photo with the photo. so that the text has the same margin as the photo.
right now the text starts out left.
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:16
My goodness that is frustrating.
Let me work on this...
Tate Morgan
@TateM
Jun 23 2016 03:18
what else needs to be done for my tribute page? http://codepen.io/TateM/full/BzQLZy/
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:19
@TateM Looks good. Could use some slight tweaks to styling/responsiveness. Possibly some more info as well.
Lemmy
@imnotlammy
Jun 23 2016 03:20
@m4gnusholm try add margin-left: -25px to #list?
Tate Morgan
@TateM
Jun 23 2016 03:20
@onowrouzi what kind of styling tweaks would you say?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:21
@TateM Little things to make things seem more lively: border-radius for less rigidity. Maybe more cohesive colors. And it seems that the picture at the bottom floats out of place when resizing.
Magnus Holm
@mghlm
Jun 23 2016 03:21
@imnotlammy then the list aligns with the caption, and they both align with the photo if the window’s width is under 1200px. but above that, and they are still off to the left
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:21
@TateM As you can probably see from the other current convos, images and resizing are the biggest pain in the butt for aesthetics.
Lemmy
@imnotlammy
Jun 23 2016 03:23
@m4gnusholm you can try to put the photo and the text below in the div
and set the margins of the div
Magnus Holm
@mghlm
Jun 23 2016 03:23
@imnotlammy ok i’ll try that
Rodney
@devshades
Jun 23 2016 03:24
@m4gnusholm that's an interesting display picture haha :P
Tate Morgan
@TateM
Jun 23 2016 03:24
@onowrouzi thanks, and yeah i just can't seem to get the resizing down
CamperBot
@camperbot
Jun 23 2016 03:24
tatem sends brownie points to @onowrouzi :sparkles: :thumbsup: :sparkles:
:warning: tatem already gave onowrouzi points
Nicholasontheroad
@Nicholasontheroad
Jun 23 2016 03:24
hi i need some help

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
.gray-background-color {background-color:gray;

}


</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background-color">

<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

Magnus Holm
@mghlm
Jun 23 2016 03:24
@devshades yah, better change it before shit gets serious :smile:
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:25
@Nicholasontheroad What's the problem?
Magnus Holm
@mghlm
Jun 23 2016 03:25
@imnotlammy nah, doesn’t work - then the picture isn’t centered anymore
Lemmy
@imnotlammy
Jun 23 2016 03:26
@m4gnusholm hmm
Nicholasontheroad
@Nicholasontheroad
Jun 23 2016 03:26
it still says Give your div element the class gray-background.
Your div element should have a gray background.
Lemmy
@imnotlammy
Jun 23 2016 03:26
how about put the picture and caption in a div
and the list in a separate div
@m4gnusholm
Gabriel
@3ndsuer
Jun 23 2016 03:26
Hi. im having trouble knowing where to place the id="cat-photo-form" element in my <form action="/submit-cat-photo"> element. any help please?
Magnus Holm
@mghlm
Jun 23 2016 03:27
@imnotlammy I already tried that. the picture is centered by display: block and margin:auto but the text is still floating to the left. even if they are in the same div
Gabriel
@3ndsuer
Jun 23 2016 03:28
do i just remove the action word and put id in its place and add the word form to cat-photo-?
elektra8875
@elektra8875
Jun 23 2016 03:28
@3ndsuer I think that's just <form action="/submit-cat-photo-element">
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:28
@m4gnusholm Have you tried setting the pics width to 100% and removing it's left and right margins?
Nicholasontheroad
@Nicholasontheroad
Jun 23 2016 03:29
@onowrouzi i am attempting to complete these objective 1)Give your div element the class gray-background.
2)Your div element should have a gray background.
elektra8875
@elektra8875
Jun 23 2016 03:29
can someone help with the "responsively style checkboxes" challenge" this is what I have so far
Magnus Holm
@mghlm
Jun 23 2016 03:29
@onowrouzi YES! that worked
elektra8875
@elektra8875
Jun 23 2016 03:29
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
Gabriel
@3ndsuer
Jun 23 2016 03:29
@elektra8875 yea but its telling me to give my form element the id cat-photo-form. so im not sure if i should add that to that form that you just typed
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:29
@Nicholasontheroad Which challenge title is it so I can go back and look?
Magnus Holm
@mghlm
Jun 23 2016 03:29
@onowrouzi Thank you!!
CamperBot
@camperbot
Jun 23 2016 03:29
m4gnusholm sends brownie points to @onowrouzi :sparkles: :thumbsup: :sparkles:
:cookie: 178 | @onowrouzi |http://www.freecodecamp.com/onowrouzi
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:29
@m4gnusholm No prob! Glad to hlep.
Magnus Holm
@mghlm
Jun 23 2016 03:29
@onowrouzi But why wasn’t the width of the picture 100% to begin with??
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:30
The width attribute is how much of the div for the element to fill.
So the image's natural size wasn't big enough.
Gabriel
@3ndsuer
Jun 23 2016 03:30
@elektra8875 nevermind. i got it. thanks.
CamperBot
@camperbot
Jun 23 2016 03:30
3ndsuer sends brownie points to @elektra8875 :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @elektra8875 |http://www.freecodecamp.com/elektra8875
Nicholasontheroad
@Nicholasontheroad
Jun 23 2016 03:31
@onowrouzi front end 48
@onowrouzi Give a Background Color to a Div Element
elektra8875
@elektra8875
Jun 23 2016 03:32
@3ndsuer your welcome
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:33
@Nicholasontheroad The class name is gray-background not gray-background-color.
Tate Morgan
@TateM
Jun 23 2016 03:34
what would be the easiest way to apply a border to both my h1 and h2 elements?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:34
@TateM I'd say a common class.
Tate Morgan
@TateM
Jun 23 2016 03:34
tried a div class but it put a border around my whole page
Nicholasontheroad
@Nicholasontheroad
Jun 23 2016 03:35
@onowrouzi thanks
CamperBot
@camperbot
Jun 23 2016 03:35
nicholasontheroad sends brownie points to @onowrouzi :sparkles: :thumbsup: :sparkles:
:cookie: 179 | @onowrouzi |http://www.freecodecamp.com/onowrouzi
DuskyPixel
@DuskyPixel
Jun 23 2016 03:35
h1, h2{ border: 1px solid grey;} << something like that?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:35
@TateM Make a class called something like "my-border" with the specified values you want and then give both elements that class, each.
Tate Morgan
@TateM
Jun 23 2016 03:35
@onowrouzi the only thing is my h1 is on top of my h2 and i was to include them both in the same border. here check out my page http://codepen.io/TateM/pen/BzQLZy/
@onowrouzi if i do what you suggest then it splits them
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:37
@TateM I'm not sure I'm getting exactly what you are trying to do. Please explain further.
@TateM When you tried the div approach did you close the div after the h2 element?
Tate Morgan
@TateM
Jun 23 2016 03:39
@onowrouzi i did. ill do it again and show you what it does
@onowrouzi heres what it looks like http://codepen.io/TateM/full/BzQLZy/
i just want the top where the headings are to be in the border
DuskyPixel
@DuskyPixel
Jun 23 2016 03:41
@TateM why did you put the myborder twice?
@TateM if you just remove the 2nd myborder that does what you want I think........
Tate Morgan
@TateM
Jun 23 2016 03:42
@DuskyPixel ill give that one a shot
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:45
@TateM First, and I don't mean to sound rude, but formatting will do wonders for maintenance.
Also the issue seems to be that:
-The two elements h1 and h2 each have their own background rather than sharing one in a div.
-There seems to be some height issues with said elements.
I'm not sure why, possibly due to the wood image?
Tate Morgan
@TateM
Jun 23 2016 03:48
@onowrouzi does this clean that up a bit? http://codepen.io/TateM/full/BzQLZy/
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:50
@TateM The product seems much better but the code still needs formatting.
General rules:
-Each tag should attempt to only use one line.
-CSS attributes should take up on line each.
For example:
body {
color: black;
background-color: white;
}
DuskyPixel
@DuskyPixel
Jun 23 2016 03:51
press enter after each semi color:/
semi colon
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:51
And try to indent with each nested element tag.

Example:

<div>
<img>
<a></a>
</img>
</div>

Ah... that didn't work in here... but you get my meaning.
Tate Morgan
@TateM
Jun 23 2016 03:54
@onowrouzi check it now and see if this is ok http://codepen.io/TateM/pen/BzQLZy
Lemmy
@imnotlammy
Jun 23 2016 03:54
Hi all, looking for someone to explain filter() method
function diffArray(arr1, arr2) {
  var newArr = []; 
  var arr3 = arr1.concat(arr2);
  function isUniq(element, index, array) {
    if (element !== array.indexOf(index)) {
      return true;
    }
    else {
      return false;
    }
  }
  newArr = arr3.filter(isUniq);
  return newArr;
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
not sure why this isn't working
Errol
@eikalina
Jun 23 2016 03:54
hey guys, how do I post my code pen here so you guys can help me with a problem?
Lemmy
@imnotlammy
Jun 23 2016 03:55
@eikalina copy paste link
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:55
@TateM CSS looks better but HTML still looks a little cluttered. You'll get the hang of it though.
Errol
@eikalina
Jun 23 2016 03:56
@imnotlammy thank you
CamperBot
@camperbot
Jun 23 2016 03:56
eikalina sends brownie points to @imnotlammy :sparkles: :thumbsup: :sparkles:
Tate Morgan
@TateM
Jun 23 2016 03:56
yeah thanks for the info though @onowrouzi
CamperBot
@camperbot
Jun 23 2016 03:56
:cookie: 96 | @imnotlammy |http://www.freecodecamp.com/imnotlammy
tatem sends brownie points to @onowrouzi :sparkles: :thumbsup: :sparkles:
:warning: tatem already gave onowrouzi points
Errol
@eikalina
Jun 23 2016 03:56
here's what I'm currently up to right now guys http://codepen.io/eikalina/pen/mErXaB
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 03:57
Can someone help??? I've literally used every type of way to add a damn navbar and it wont work, the codes that worked before isnt working now for some reason...can anyone explain?
Errol
@eikalina
Jun 23 2016 03:57
I need the text under the image to be left aligned along the left edge of the image
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:57
@imnotlammy What error does it throw?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 03:57
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:57
@Errol Check a little ways above for the conversation with @m4gnusholm
Lemmy
@imnotlammy
Jun 23 2016 03:58
@onowrouzi its just not returning what I need
Errol
@eikalina
Jun 23 2016 03:58
@onowrouzi okay will do
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 03:58
Please help. Ive been at this for 2 hours trying to figure out why the navbar wont show...
Errol
@eikalina
Jun 23 2016 03:58
@onowrouzi thanks
CamperBot
@camperbot
Jun 23 2016 03:58
eikalina sends brownie points to @onowrouzi :sparkles: :thumbsup: :sparkles:
:cookie: 181 | @onowrouzi |http://www.freecodecamp.com/onowrouzi
Lemmy
@imnotlammy
Jun 23 2016 03:58
trying to check for unique elements in array and pushing them to new array
Omid Nowrouzi
@onowrouzi
Jun 23 2016 03:58
@imnotlammy Is it a specific exercise or just personal?
I just started this site so I'm not that far yet.
Lemmy
@imnotlammy
Jun 23 2016 03:59
ahh
not sure if you're that far yet
@SecondarySpawn can you link?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 03:59
I called bootstrap and jQ and nothing...
Lemmy
@imnotlammy
Jun 23 2016 04:01
@SecondarySpawn try use this instead?
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:02
kinda works, but the funny thing is that it worked before... check it out with your code http://codepen.io/morphed/pen/WxoaWJ
AjamesP
@AjamesP
Jun 23 2016 04:06
can anyone help me?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:06
I somehow got it to work.. wth?
@AjamesP Whats up
AjamesP
@AjamesP
Jun 23 2016 04:06
i have a question with a FCC exercise
Lemmy
@imnotlammy
Jun 23 2016 04:06
@SecondarySpawn lol it looked ok to me
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:06
@SecondarySpawn Night programming, am I right?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:07
I was a few navbars from throwing my computer out the window haha
@AjamesP Ask away
AjamesP
@AjamesP
Jun 23 2016 04:07

<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("animated shake btn-primary");

});
</script> so im supposed to "only add one class with each of the 3 selectors" but i messed up somewhere i guess. where did i go wrong

Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:08
whast the name of the challenge?
AjamesP
@AjamesP
Jun 23 2016 04:08
Target the same element with multiple jQuery Selectors
Now you know three ways of target
Target the same element with multiple jQuery Selectors
i have everything else right except for just the one thing
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:09
Ahh okay
@AjamesP For the 4th script, instead of having "animated...blah blah blah" replace it with "btn-primary"
AjamesP
@AjamesP
Jun 23 2016 04:10
does the order matter?
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:11
Order of scripts? No. But you do not need to have animated and shake inside of the #target1 script
Tate Morgan
@TateM
Jun 23 2016 04:11
so I'm pretty sure when i was resizing my background image i really messed up the other aspects of my page. will someone double check this for me? seems as if my margins are way off. http://codepen.io/TateM/full/BzQLZy/
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:11
it should be $("#target1").addClass("btn-primary"); @AjamesP
AjamesP
@AjamesP
Jun 23 2016 04:11
Oh i thought it was asking me to put all 3 in. that would make more sense lol
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:11
:)
@imnotlammy Thank you Lemmy, can i ask one more question?
CamperBot
@camperbot
Jun 23 2016 04:12
secondaryspawn sends brownie points to @imnotlammy :sparkles: :thumbsup: :sparkles:
:cookie: 97 | @imnotlammy |http://www.freecodecamp.com/imnotlammy
TJ Bear
@tjbear
Jun 23 2016 04:12
Anyone know how I can get cursor: pointer to work on an img element without it being nested in an a element?
Tate Morgan
@TateM
Jun 23 2016 04:12
also if anyone looks at it, do you think the header is needed? since the name of the park is already on the sign
Lemmy
@imnotlammy
Jun 23 2016 04:12
@SecondarySpawn whats up
AjamesP
@AjamesP
Jun 23 2016 04:12
Thank man @SecondarySpawn
CamperBot
@camperbot
Jun 23 2016 04:12
ajamesp sends brownie points to @secondaryspawn :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @secondaryspawn |http://www.freecodecamp.com/secondaryspawn
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:13
@imnotlammy http://codepen.io/morphed/pen/WxoaWJ Would you be able to tell me how to make a certain navbar tab active once it has been clicked?
At the moment I have About as active default, how would I make it so once it is clicked it will show I a darker background behind the tab...
Lemmy
@imnotlammy
Jun 23 2016 04:15
@SecondarySpawn seems you need to use jquery
Errol
@eikalina
Jun 23 2016 04:15
@m4gnusholm how did you get the text to align left of the image?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:16
@SecondarySpawn Do you intend on using a router of any sort?
Tate Morgan
@TateM
Jun 23 2016 04:16
can someone check my margins? the code seems to be way off but the product looks decent
Magnus Holm
@mghlm
Jun 23 2016 04:16
@eikalina I put the width of the pic to 100%, but make sure you have it all in a container :)
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:16
@onowrouzi You mean as a destination? I plan on making it route to the same page.
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:16
I mean using a framework like angular or ui-router.
I ask because they have built in functionality for that.
TJ Bear
@tjbear
Jun 23 2016 04:18
blah, nevermind, scratch that, the cursor:pointer works fine on img elements without being nested in an a, I was just being a noob and wasn't preprocessing my sass file
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:18

Here's mine from a while back:

<nav class="navbar navbar-default animated fadeIn"> <div class="container-fluid"> <div class="navbar-header"> <div class="navbar-brand"> Omid Nowrouzi <i class="glyphicon glyphicon-copyright-mark"></i> </div> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li ui-sref-active="active"><a ui-sref="home">About Me </a></li> <li ui-sref-active="active"><a ui-sref="blog">Blog </a></li> <li ui-sref-active="active"><a ui-sref="resume">Resume </a></li> <li ui-sref-active="active"><a ui-sref="contact">Contact </a></li> <li ui-sref-active="active"><a ui-sref="projects">Projects</a></li> </ul> </div> </div>

Ghost
@ghost~56a80c91e610378809be5d28
Jun 23 2016 04:18
help format
CamperBot
@camperbot
Jun 23 2016 04:18

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Josh
@In7ro
Jun 23 2016 04:19
What's up homies!
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:19
Howdy @In7ro
Lemmy
@imnotlammy
Jun 23 2016 04:20
you need to toggle classes on click to alternate styles
@SecondarySpawn or try do it enitrely in css?
Errol
@eikalina
Jun 23 2016 04:22
@m4gnusholm I've spent close to 4 hours trying to figure how to do that, thank you, it worked!
CamperBot
@camperbot
Jun 23 2016 04:22
eikalina sends brownie points to @m4gnusholm :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @m4gnusholm |http://www.freecodecamp.com/m4gnusholm
Gabriel De Paula
@SecondarySpawn
Jun 23 2016 04:23
@imnotlammy Thanks for the links. I will have to study them a bit more since im not too familiar with JS
CamperBot
@camperbot
Jun 23 2016 04:23
secondaryspawn sends brownie points to @imnotlammy :sparkles: :thumbsup: :sparkles:
:warning: secondaryspawn already gave imnotlammy points
Lemmy
@imnotlammy
Jun 23 2016 04:23
@SecondarySpawn you might be able to do it entirely in css
Magnus Holm
@mghlm
Jun 23 2016 04:23
@eikalina Haha, I had troubles with it too - it was @onowrouzi who helped me :)
RARE_ICE
@Architect001
Jun 23 2016 04:36
what about this demand ? -- " Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%."
Geared up
@gearedupcoding
Jun 23 2016 04:40
What does this mean?
Change the button with id target4 by emphasizing its text.
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target4").html.text("textchange");
});
</script>
Change Text Inside an Element Using jQuery
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:43
@gearedupcoding $("#target4").html.text("<em>#target4</em>");
mosesmuchemi
@mosesmuchemi
Jun 23 2016 04:43
@gearedupcoding when you give an element an id you can zero in on the specific element using the name of the id you gave
Sorin Ruse
@sorinr
Jun 23 2016 04:44
@tjbear add to your css img:hover{} state and make your pointer look like you want it to be. but be aware this will change the pointer for all images.
Geared up
@gearedupcoding
Jun 23 2016 04:45
what is <em> tag do?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 04:45
emphasize... or italics essentially.
Geared up
@gearedupcoding
Jun 23 2016 04:45
@onowrouzi @mosesmuchemi thank you
CamperBot
@camperbot
Jun 23 2016 04:45
gearedupcoding sends brownie points to @onowrouzi and @mosesmuchemi :sparkles: :thumbsup: :sparkles:
:cookie: 182 | @onowrouzi |http://www.freecodecamp.com/onowrouzi
:cookie: 176 | @mosesmuchemi |http://www.freecodecamp.com/mosesmuchemi
Geared up
@gearedupcoding
Jun 23 2016 04:45
got it
mosesmuchemi
@mosesmuchemi
Jun 23 2016 04:45
@gearedupcoding em makes the element italicized
w3schools.com has good reference material you can always look up for further data
dlargin1996
@dlargin1996
Jun 23 2016 04:51
So im on my first challenge and i keep finding myself looking back to the lessons. Is this normal?
nabaraj17
@nabaraj17
Jun 23 2016 04:54
when i can see live class in Mentive ?
Ken HIll
@hillk8
Jun 23 2016 04:55
@dlargin1996 I believe it is designed for that
dlargin1996
@dlargin1996
Jun 23 2016 04:57
Awesome thanks
Joshua Oliphant
@JoshuaOliphant
Jun 23 2016 05:06
@dlargin1996 I think you should consider the lessons as resources to look back on. If you keep going back to the same lessons for the same info, you might consider writing it down in a notebook or creating a doc of frequently used info
Takaia
@Takaia
Jun 23 2016 05:07
does anyone know about bootstrap's scrollspy?
I'm trying to get it to work on my codepen page for the part where I'm supposed to make a portfolio and I can't get it do work.
Takaia
@Takaia
Jun 23 2016 05:12
here's the pen I made just to try to test scrollspy... http://codepen.io/Takaia/pen/rLWQMB
Julien
@julienamorgan
Jun 23 2016 05:17
Hey im having trouble with the form and id element
how do I reference an id attribute within a form
Omid Nowrouzi
@onowrouzi
Jun 23 2016 05:18
@Takaia You're using #navbar instead of .navbar
Takaia
@Takaia
Jun 23 2016 05:18
<form id="ID">
oh my god is it that simple
it still doesn't work, same pen changed to .navbar D:
@julienamorgan (sorry forgot to ping you before) you do it like this <form id="YOUR ID">
Takaia
@Takaia
Jun 23 2016 05:24
@onowrouzi ^
Omid Nowrouzi
@onowrouzi
Jun 23 2016 05:24
Yeah I'm comparing it to the official example and seeing what could be hinky about it.
dlargin1996
@dlargin1996
Jun 23 2016 05:26
@JoshuaOliphant
Thanks, i think im going to work on a notebook tomorrow with my common errors
Omid Nowrouzi
@onowrouzi
Jun 23 2016 05:26
@Takaia The only thing I can think of is that the "active" class isn't being added even when clicked.
Takaia
@Takaia
Jun 23 2016 05:28
@onowrouzi I wonder why it wouldn't be added though :/
Vignesh V
@Viggu27
Jun 23 2016 05:30
What is h1 element?
in the first challenge
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:30
@Viggu27 it's an heading element.
@Viggu27 You enclose the main heading of a website inside <h1>
Vignesh V
@Viggu27
Jun 23 2016 05:31
Ok now how to change the text
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:32
@Viggu27 Probably you have to change the content inside the <h1> and </h1> tabs
tags*
Vignesh V
@Viggu27
Jun 23 2016 05:33
@IshtmeetSingh acn u give me the code for this?? PleaseTo pass the test on this challenge, change your h1 element's text to say "Hello World" instead of "Hello". Then click the "Run tests" button.
*8Can
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:33
@Viggu27 Paste your code over here.
Vignesh V
@Viggu27
Jun 23 2016 05:34
<h1>Hello</h1>
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:34
@Viggu27 you just have to do this
<h1>Hello World!</h1>
Vignesh V
@Viggu27
Jun 23 2016 05:34
i did
Rylee Watson
@Ryleesan
Jun 23 2016 05:34
Hi there! This is my first time on here can anyone help me with a newbie queastion??
question
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:34
first character in upper cases and followed by an exclamatory mark.
@Ryleesan sure
@Viggu27 change your hello to Hello World!
Vignesh V
@Viggu27
Jun 23 2016 05:35
Ok But nowhere it mentions the exclamatory mark
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:36
@Viggu27 Didn't the challenge ask you to write Hello World! inside the <h1> tags?
Vignesh V
@Viggu27
Jun 23 2016 05:36
it asked to write Hello World
thats it
i have copy pasted it
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:36
Did it work?
Vignesh V
@Viggu27
Jun 23 2016 05:36
PleaseTo pass the test on this challenge, change your h1 element's text to say "Hello World" instead of "Hello". Then click the "Run tests" button.
Yes it did work bro
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:37
ah okay, fine.
I thought it was Hello World@
!*
Coy Sanders
@coymeetsworld
Jun 23 2016 05:38
what's up @Ryleesan ?
Vignesh V
@Viggu27
Jun 23 2016 05:39
No but wat code u gave only worked
i also completed the next challenge
h2 element
Thanks a lot
Takaia
@Takaia
Jun 23 2016 05:39
anyone else have any ideas about my scrollspy not working? http://codepen.io/Takaia/pen/rLWQMB
Josh
@In7ro
Jun 23 2016 05:39
User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:39
@Viggu27 great, now worries, Challenges are easy.
Josh
@In7ro
Jun 23 2016 05:39
What do they mean by placeholders? anyone
Takaia
@Takaia
Jun 23 2016 05:40
@In7ro dummy images instead of screenshots of actual projects
Josh
@In7ro
Jun 23 2016 05:40
@Takaia so just pictures of anything?
Takaia
@Takaia
Jun 23 2016 05:40
for example a solid grey image
yeah basically
Josh
@In7ro
Jun 23 2016 05:41
So i can put a picture of my ass
Sweet
Takaia
@Takaia
Jun 23 2016 05:41
that might or might not be against codepen TOS so you better check
Coy Sanders
@coymeetsworld
Jun 23 2016 05:41
the idea is that you can do the portfolio and put the structure of what you're projects would look like before you actually do them @In7ro
Takaia
@Takaia
Jun 23 2016 05:41
otherwise yes
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:41
Josh
@In7ro
Jun 23 2016 05:42
@IshtmeetSingh lmao
Coy Sanders
@coymeetsworld
Jun 23 2016 05:42
placeholders are temporary, eventually you would want to replace them with thumbnails of the projects you eventually finish as you continue through the coursework
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:42
@In7ro like coy said :point_up: June 22, 2016 10:42 PM they;re just some replaceable content that you want to put instead of images, so you can change whenever you want.
Josh
@In7ro
Jun 23 2016 05:43
@coymeetsworld eventually the thumbnail will direct you to a page where your project was made, correct?
Coy Sanders
@coymeetsworld
Jun 23 2016 05:43
yeah @In7ro
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:43
@In7ro yes. They link to your project
Josh
@In7ro
Jun 23 2016 05:44
@coymeetsworld @IshtmeetSingh @Takaia Sweet, thanks guys.
CamperBot
@camperbot
Jun 23 2016 05:44
in7ro sends brownie points to @coymeetsworld and @ishtmeetsingh and @takaia :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
:cookie: 127 | @takaia |http://www.freecodecamp.com/takaia
:star2: 1185 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jun 23 2016 05:44
you can give it a link to the URL where your project resides
the thumbnail could be a preview of what your page looks like, but since you don't have any projects they're just placeholders for now
i still haven't gotten back to mine and added them yet lol and im just about done
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:45
I use images of blackholes/pulsars/quasars for placeholders.
Josh
@In7ro
Jun 23 2016 05:45
Feedback on my portfolio page? Don't laugh i'm only 2 weeks into this stuff lol http://codepen.io/In7ro/pen/yJaYjO
Lesie
@Lesie
Jun 23 2016 05:46
Hi needs a little help in here. Does anyone know the code for the ADD BORDERS AROUND YOUR ELEMENTS? Thanks!
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:46
@In7ro it's really nice. It would be more appealing if you give your About me section a background color of black. It would look better
@Lesie
any-element{
border: 5px solid black;
}
Vignesh V
@Viggu27
Jun 23 2016 05:46
Uncomment HTML
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:47
@Lesie you can change the width from 5px to anything you want
Coy Sanders
@coymeetsworld
Jun 23 2016 05:47
not bad for 2 weeks @In7ro :thumbsup:
Vignesh V
@Viggu27
Jun 23 2016 05:47
how to uncomment HTML
wat is uncommenting?
Josh
@In7ro
Jun 23 2016 05:47
Thanks!
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:47

@Viggu27 remove all the

<!--

and

--->

from your code

@Viggu27 removing comments.
Vignesh V
@Viggu27
Jun 23 2016 05:47
Ok ok
Wait will try it
Omid Nowrouzi
@onowrouzi
Jun 23 2016 05:48
@Takaia It's a problem with the script linking.

Past this at the top of your html:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

I guess either CodePen has it in the wrong order internally or is just missing something.
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:49
@onowrouzi someone told me, in HTML 5, you can do that anywhere.
Omid Nowrouzi
@onowrouzi
Jun 23 2016 05:49
Typically yes, but the order of each individual link matters.
Some libraries use others.
Takaia
@Takaia
Jun 23 2016 05:50
:o omg you fixed it thank you so much @onowrouzi!! Also thanks @IshtmeetSingh for trying :D
CamperBot
@camperbot
Jun 23 2016 05:50
takaia sends brownie points to @onowrouzi and @ishtmeetsingh :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @onowrouzi |http://www.freecodecamp.com/onowrouzi
:cookie: 440 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:50
@onowrouzi Yes
@Takaia nice
Lesie
@Lesie
Jun 23 2016 05:50
@IshtmeetSingh i tried it but does not work
@IshtmeetSingh my instructionsYour img element should have the class smaller-image.
Your img element should have the class thick-green-border.
Give your image a border width of 10px.
Give your image a border style of solid.
The border around your img element should be green.
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:51
@Lesie what's your code?
Vignesh V
@Viggu27
Jun 23 2016 05:52
@IshtmeetSingh it worked
Omid Nowrouzi
@onowrouzi
Jun 23 2016 05:52
.thick-green-border {
border: 10px solid green;
}
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:52
@Lesie yes then you have to add border to a class, and apply that class to your html element
.class-smaller{
border: 10px solid green;
}
Vignesh V
@Viggu27
Jun 23 2016 05:52
But in the challenge dey dont specifically menytion
mention
Josh
@In7ro
Jun 23 2016 05:52
@IshtmeetSingh Tried to put the About Me in a block like the 1st page and it messed everything up.. any idea?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:53
@Viggu27 yes commenting is actually wrapping <!--- and -->around a piece of code
@In7ro one sec
Josh
@In7ro
Jun 23 2016 05:53
k
Renee Harris
@maniacalkitten
Jun 23 2016 05:53
@In7ro paste your code
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:53
@In7ro can't see it, can you share your pen's link again?
Ahmed Shaaban
@AhmedShab
Jun 23 2016 05:54
Hi everyone, I decided to move from the MEAN stack to reactjs full stack
I understand the client side of react but have't trouble building client with express using React. Can Anyone please direct me to a useful resource I can start with? Thank you, I appreciate all the support :smile:
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:56
@In7ro add any class to the div containing your about me section, and in css and try doing this in css
` that-classs{ background-color: black; }
@AhmedShab did you try code.academy's youtube playlist?
Ahmed Shaaban
@AhmedShab
Jun 23 2016 05:57
@IshtmeetSingh Do the have full stack one?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 05:57
this is introduction tho
Ahmed Shaaban
@AhmedShab
Jun 23 2016 05:59
AWESOME, thanks you so much @IshtmeetSingh :D
CamperBot
@camperbot
Jun 23 2016 05:59
ahmedshab sends brownie points to @ishtmeetsingh :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:00
@AhmedShab no worries good luck :)
Josh
@In7ro
Jun 23 2016 06:02
@IshtmeetSingh how's it look now? http://codepen.io/In7ro/pen/yJaYjO
JRGJON
@JRGJON
Jun 23 2016 06:02
I am doing the jquery session.How am I actually targetting the id with this command.
$(".target:nth-child(3)").addClass("animated bounce");
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:03
@JRGJON change .target to #target
zarwaemaan
@zarwaemaan
Jun 23 2016 06:03
@IshtmeetSingh i need help
Josh
@In7ro
Jun 23 2016 06:03
@IshtmeetSingh eh, looks pretty weird on mobile :(
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:04
@In7ro looks nice on wide screen, but why isn't it responsive? Try adding .img-responsive class to your image
@zarwaemaan what's up?
zarwaemaan
@zarwaemaan
Jun 23 2016 06:04

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

<h1 style=color:white>

Dan
@dcgoings
Jun 23 2016 06:05
all done with my quote gen!!
http://codepen.io/dcgoings/full/mEOXwE/
thoughts, comments, critiques?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:05
@zarwaemaan `<h1 style="color:white">
@zarwaemaan put color:white inside quotation marks "
zarwaemaan
@zarwaemaan
Jun 23 2016 06:06
it still did,nt work
JRGJON
@JRGJON
Jun 23 2016 06:06
Thank you @IshtmeetSingh
CamperBot
@camperbot
Jun 23 2016 06:06
jrgjon sends brownie points to @ishtmeetsingh :sparkles: :thumbsup: :sparkles:
:cookie: 442 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:06
@zarwaemaan what are they asking you to do/
zarwaemaan
@zarwaemaan
Jun 23 2016 06:07
h1 element shoulb be white.. override to id declaration
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:07
@dcgoings it's really nice :)
Dan
@dcgoings
Jun 23 2016 06:07
thanks!! @IshtmeetSingh
CamperBot
@camperbot
Jun 23 2016 06:07
dcgoings sends brownie points to @ishtmeetsingh :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
Jessica Mattick
@jmatty16
Jun 23 2016 06:07
Hello, I am working on my tribute page with bootstrap and I have three columns (class="col-sm-4") with different amounts of content in them, but I want them to all be the same height. I'm struggling to figure out how to do this in a way that still allows it to be responsive. Does anyone have suggestions?
Josh
@In7ro
Jun 23 2016 06:07
@IshtmeetSingh to what, the background img?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:08
@In7ro no add img-responsive class to your image, that's near the about me section.
@jmatty16 can I see your code?
Coy Sanders
@coymeetsworld
Jun 23 2016 06:09
you can try specifying a height @jmatty16
hnry
@hnry
Jun 23 2016 06:09
@jmatty16 height is already responsive, by default the height of an element is controlled by the content, so in order to make them the same height you have to specify a fixed height
Coy Sanders
@coymeetsworld
Jun 23 2016 06:09
you should only have one container class too
everything should be nested inside one container
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:10
@zarwaemaan did you pass the challenge
Jessica Mattick
@jmatty16
Jun 23 2016 06:10
ahhh so If i wanted to have the boxes still I should use .row instead of different containers?
Omid Nowrouzi
@onowrouzi
Jun 23 2016 06:10
@dcgoings fantastic work and content. The quote placement is currently a bit obstructive at the moment though.
zarwaemaan
@zarwaemaan
Jun 23 2016 06:10
@IshtmeetSingh h1 element should be white
nooo @IshtmeetSingh
Dan
@dcgoings
Jun 23 2016 06:11
@onowrouzi interesting, how so?
Coy Sanders
@coymeetsworld
Jun 23 2016 06:11
yeah @jmatty16
Dan
@dcgoings
Jun 23 2016 06:11
ah nvm, if you're running it in the gitter codepen link then yeah.
Omid Nowrouzi
@onowrouzi
Jun 23 2016 06:12
It may be because I am on a rather small phone but the quote overlays the links.
Josh
@In7ro
Jun 23 2016 06:12
@IshtmeetSingh then what do i do with that class?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:17
@in7ro it's a bootstrap class, that makes images responsive
@zarwaemaan do this
<h1 id="orange-text" style="color:white" class="pink-text blue-text">Hello World!</h1>
Jessica Mattick
@jmatty16
Jun 23 2016 06:20
thanks! @coymeetsworld
CamperBot
@camperbot
Jun 23 2016 06:20
jmatty16 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jun 23 2016 06:20
np @jmatty16 :thumbsup: hope that helped
Josh
@In7ro
Jun 23 2016 06:21
@IshtmeetSingh okay I did that and the img is still overlapping into the non-existent 3rd page
zarwaemaan
@zarwaemaan
Jun 23 2016 06:22
thanx @IshtmeetSingh
CamperBot
@camperbot
Jun 23 2016 06:22
zarwaemaan sends brownie points to @ishtmeetsingh :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
Josh
@In7ro
Jun 23 2016 06:22
@IshtmeetSingh maybe I have to make the img smaller?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:23
@In7ro try adding width of 30%
Jessica Mattick
@jmatty16
Jun 23 2016 06:25
@coymeetsworld That helped to get the height the same for when it's full screen, but when I shrink my screen so that the width is less, the height stays the same instead of scaling down with the width.
Coy Sanders
@coymeetsworld
Jun 23 2016 06:25
maybe try specifying min-height @jmatty16
instead of height
Josh
@In7ro
Jun 23 2016 06:26
@IshtmeetSingh that just makes the img very small on widescreen and it looks stupid lol..looks nice on mobile tho
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:26
@In7ro haha
@In7ro what about 50%?
Josh
@In7ro
Jun 23 2016 06:27
@IshtmeetSingh nope :(
maybe make the text smaller?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 06:29
@In7ro yes try it.
@In7ro you don't need to check it on mobile, you can use this to check if your site is responsive or not http://mobiletest.me/
Josh
@In7ro
Jun 23 2016 06:34
@IshtmeetSingh when i use that site my pen looks awful no matter what device I use lol?
mayuri nayak
@mayuri14
Jun 23 2016 06:55
$(".target:nth-child(2)").addClass("bounce")
Anything wrong with this code
DJ
@qualitymanifest
Jun 23 2016 06:57
@mayuri14 i dont see anything wrong there. what challenge is this?
mayuri nayak
@mayuri14
Jun 23 2016 06:58
Target a specific child of an element using jQuery

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$(".target:nth-child(2)").addClass("bounce");
});
</script>

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>

DJ
@qualitymanifest
Jun 23 2016 06:59
@mayuri14 needs to be "animated bounce"
mayuri nayak
@mayuri14
Jun 23 2016 07:00
@qualitymanifest tganks
@qualitymanifest thanks
CamperBot
@camperbot
Jun 23 2016 07:00
mayuri14 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1217 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
DJ
@qualitymanifest
Jun 23 2016 07:00
no problem :+1:
Kevin
@kebincao
Jun 23 2016 07:02
can anyone help me with the size your images challenge
.smaller-image {
width: 100px;
}
is this the right class?
zarwaemaan
@zarwaemaan
Jun 23 2016 07:02
@kebincao yes it,s rit
Kevin
@kebincao
Jun 23 2016 07:04
hmm it doesnt seem to be working
Shusil Banjade
@shusil123
Jun 23 2016 07:05
@kebincao , you have to give the class of smaller-image to your image
zarwaemaan
@zarwaemaan
Jun 23 2016 07:05
your code looks right @kebincao
Shusil Banjade
@shusil123
Jun 23 2016 07:05
<img src="" class="smaller-image">
@kebincao
Kevin
@kebincao
Jun 23 2016 07:05
oh so i dont place it in style?
Shusil Banjade
@shusil123
Jun 23 2016 07:06
@kebincao , yo do. But first give the class to the image in html
and then style that class in style
zarwaemaan
@zarwaemaan
Jun 23 2016 07:06
yes it place ins tyle
Kevin
@kebincao
Jun 23 2016 07:07
how would i give the class to image
zarwaemaan
@zarwaemaan
Jun 23 2016 07:07
firt give style it in element style and then in element html
Kevin
@kebincao
Jun 23 2016 07:07
img {
shweta rajput
@ShwetaRajput
Jun 23 2016 07:07
how to emphasize text of any button using jquery
Shusil Banjade
@shusil123
Jun 23 2016 07:07
@kebincao . like this <img class="smaller-image" src="">

And then in between styles,

.smaller-image {width: 100px;}

zarwaemaan
@zarwaemaan
Jun 23 2016 07:08
.smaller-image {
width: 100px;
}
Shusil Banjade
@shusil123
Jun 23 2016 07:08
@ShwetaRajput , you have to use .html on the button $("#target")
I guess
shweta rajput
@ShwetaRajput
Jun 23 2016 07:09
please someone help withemphasizing the text of a button using jquery
zarwaemaan
@zarwaemaan
Jun 23 2016 07:09
also give in html like this href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"
Shusil Banjade
@shusil123
Jun 23 2016 07:09
@ShwetaRajput , Paste the code here
zarwaemaan
@zarwaemaan
Jun 23 2016 07:10
did u solve the challenge ? @kebincao
shweta rajput
@ShwetaRajput
Jun 23 2016 07:11
$("h3").html("<em>jQuery Playground</em>");
Hamza Anwer
@ImHamzaAnwer
Jun 23 2016 07:11
@ShwetaRajput
$("#target4").html("<em>#target4</em>");
shweta rajput
@ShwetaRajput
Jun 23 2016 07:14
@ImHamzaAnwer thanku it worked. but if we have to change its size like to some h1 or h2?
CamperBot
@camperbot
Jun 23 2016 07:14
shwetarajput sends brownie points to @imhamzaanwer :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @imhamzaanwer |http://www.freecodecamp.com/imhamzaanwer
Jaren Escueta
@jarenescueta731
Jun 23 2016 07:14
was there any maintenance being done recently (like the last 20 minutes) to the algorithm challenges? i posted my code to HelpJavaScript but when i reloaded the browser based on someone's recommendation I noticed that the function name changed...
when i copy-pasted, the function name was:
function whereAreYou(collection, source) {
...
}
then after i restarted the browser it became:
function whatIsInAName(collection, source) {
...
}
wat
Manjot Singh
@msingh18
Jun 23 2016 07:16
I need some help regarding a challenge
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 07:17
@msingh18 yes?
@ShwetaRajput you would replace <em> with <h1> then.
Manjot Singh
@msingh18
Jun 23 2016 07:18
Am I allowed to post links here?
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 07:18
yes
Manjot Singh
@msingh18
Jun 23 2016 07:18
Okay I will try
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 07:18
@msingh18 try pasting your code instead

Manjot Singh
@msingh18
Jun 23 2016 07:19

@IshtmeetSingh <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-test {
color: pink;
}
</style>

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

What is wrong in this?
Jaren Escueta
@jarenescueta731
Jun 23 2016 07:19
@msingh18 help format
help format
CamperBot
@camperbot
Jun 23 2016 07:19

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Manjot Singh
@msingh18
Jun 23 2016 07:19
help format
CamperBot
@camperbot
Jun 23 2016 07:19

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 07:21
@msingh18 your code is fine, try reloading your browser
or just copy paste your code again
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text{
    color: pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>
Manjot Singh
@msingh18
Jun 23 2016 07:22
@IshtmeetSingh thank you
CamperBot
@camperbot
Jun 23 2016 07:22
msingh18 sends brownie points to @ishtmeetsingh :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @ishtmeetsingh |http://www.freecodecamp.com/ishtmeetsingh
Manjot Singh
@msingh18
Jun 23 2016 07:22
@jarenescueta731 thank you
CamperBot
@camperbot
Jun 23 2016 07:22
msingh18 sends brownie points to @jarenescueta731 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @jarenescueta731 |http://www.freecodecamp.com/jarenescueta731
Ishtmeet Singh
@IshtmeetSingh
Jun 23 2016 07:23
@msingh18 :+1:
Jaren Escueta
@jarenescueta731
Jun 23 2016 07:24
@msingh18 you're welcome
Manjot Singh
@msingh18
Jun 23 2016 07:26
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-test {
    color: pink;
  }
</style>
<h1 class="pink-test">Hello World!</h1>
Sorry for that, it was just a test
@IshtmeetSingh Still getting the same error, in Google Chrome
Manish Giri
@Manish-Giri
Jun 23 2016 07:30
@msingh18 pink-text, not pink-test
Manjot Singh
@msingh18
Jun 23 2016 07:31
@Manish-Giri lol I guess I need some sleep
@Manish-Giri thank you
CamperBot
@camperbot
Jun 23 2016 07:31
msingh18 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 1306 | @manish-giri |http://www.freecodecamp.com/manish-giri
Manish Giri
@Manish-Giri
Jun 23 2016 07:32
@msingh18 welcome!