These are chat archives for FreeCodeCamp/Help

16th
Mar 2016
cfwack
@cfwack
Mar 16 2016 00:00
@demiir - How do you post - get the color code to show up in the black box like you did in your last post??
Michael Kelly
@Keydose
Mar 16 2016 00:03
@cfwack If you click the little M button in the bottom right of the chatbox, you will see the markdown help
@cfwack I think that's what you mean
Benjamin Gonzalez
@xasuma
Mar 16 2016 00:07
show format
I always forget how to say it, lol ^
explain format
CamperBot
@camperbot
Mar 16 2016 00:08

: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 the code.

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

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

Alex Soong
@asoong-94
Mar 16 2016 00:19
stuck on required for html
Manish Giri
@Manish-Giri
Mar 16 2016 00:21
@asoong-94 whats your question
Benjamin Gonzalez
@xasuma
Mar 16 2016 00:30
I am stuck. I have an element with zero padding everywhere, and it's all good. But when I add a 'col-...-...' class to it, the bottom padding gets bigger somehow. (Its at the end of html and css just in case you want to see it)
http://codepen.io/xasuma/pen/BKLzJJ
Chris
@MrChristofferson
Mar 16 2016 00:33
@xasuma which element?
Benjamin Gonzalez
@xasuma
Mar 16 2016 00:34
@MrChristofferson .portfolioButtons {} in css (line 145 css) , used in line 58 of html.
Marguelgtz
@Marguelgtz
Mar 16 2016 00:34
@xasuma Im just about to start with that project, how ever I dont really have a lot of knowledge about how to use navbar . any advice?
Benjamin Gonzalez
@xasuma
Mar 16 2016 00:35
@Marguelgtz yes use this as reference http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Chris
@MrChristofferson
Mar 16 2016 00:37
If it's only happening when you add the class, that means Bootstrap is trumping your css, you'll have to use some dirty !importants
Matt
@YoshiBlues
Mar 16 2016 00:40
On average, how many browny point do ya'll average a week :D
Benjamin Gonzalez
@xasuma
Mar 16 2016 00:40
@MrChristofferson I tried it. I added it to the padding style, but it didn't work :(
cfwack
@cfwack
Mar 16 2016 00:41

var code = "formatted";<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
pink-text {
color: pink;
}
</style>

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

Benjamin Gonzalez
@xasuma
Mar 16 2016 00:41
@YoshiBlues it deppends on how many challenges vs projects you are doing at the moment , when you are working on projects you won't get any unless you help in chat
@cfwack explain format
explain format
CamperBot
@camperbot
Mar 16 2016 00:42

: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 the code.

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

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

cfwack
@cfwack
Mar 16 2016 00:43

why won't my Hello World display in pink??<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
pink-text {
color: pink;
}
</style>

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

Matt
@YoshiBlues
Mar 16 2016 00:43
Thanks @xasuma
CamperBot
@camperbot
Mar 16 2016 00:43
yoshiblues sends brownie points to @xasuma :sparkles: :thumbsup: :sparkles:
:star: 140 | @xasuma | http://www.freecodecamp.com/xasuma
Jack
@yakschuss
Mar 16 2016 00:44
Hello World!
CamperBot
@camperbot
Mar 16 2016 00:44

welcome to FreeCodeCamp @yakschuss!

Matt
@YoshiBlues
Mar 16 2016 00:45
@cfwack at the bottom, add ">" to the end of 'h1'. That might fix it'
Collin
@collinferry
Mar 16 2016 00:45
@yakschuss Welcome aboard Jack!
Jack
@yakschuss
Mar 16 2016 00:45
thanks!
Benjamin Gonzalez
@xasuma
Mar 16 2016 00:45
@cfwack becuase when you create a class inside <style> you start with a dot.
.pink-text {}
welcome @yakschuss
Matt
@YoshiBlues
Mar 16 2016 00:45
^ xasuma's got it
Michael Kelly
@Keydose
Mar 16 2016 00:46
This message was deleted
cfwack
@cfwack
Mar 16 2016 00:47
@xasuma - that did it!! and it makes sense - this place is awesome!!!
Bryan Knight
@Harmicide
Mar 16 2016 01:11

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-div">
<div class="col-xs-div">
</div>
</div>

</div>
</div>

Why is this not correct for the following "Nest two div class="col-xs-6" elements within your div class="row" element."

sorry, corrected the <div class="col-xs-div">

<div class="col-xs-div"> to use the proper 6 syntax.

Michael Kelly
@Keydose
Mar 16 2016 01:14
<div class="row">
    <div class="col-xs-6">
    </div>
    <div class="col-xs-6">
    </div>
</div>
@Harmicide
Bryan Knight
@Harmicide
Mar 16 2016 01:15
What is this life @Keydose It looks so good xD
Michael Kelly
@Keydose
Mar 16 2016 01:15
@Harmicide The glory of markdown ;)
explain format
CamperBot
@camperbot
Mar 16 2016 01:15

: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 the code.

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

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

Bryan Knight
@Harmicide
Mar 16 2016 01:16
So is it absolutely necessary to close </div> RIGHT after the line starting with <div>?
Michael Kelly
@Keydose
Mar 16 2016 01:17
@Harmicide No I was just making it compact, as if there's no code inside them
Bryan Knight
@Harmicide
Mar 16 2016 01:17
Gotcha.
I assume that's a good habit to form?
Michael Kelly
@Keydose
Mar 16 2016 01:17
@Harmicide The only rule is that every opening tag must have a closing tag, preferably indented the same amount
@Harmicide Every time you put something inside another tag, indent once via tab or two spaces, some people like four spaces but I think two is the convention for HTML
@Harmicide You don't get punished for incorrect indentation but it makes your code a LOT easier to follow
Bryan Knight
@Harmicide
Mar 16 2016 01:20
@Keydose Thank you for your help.
CamperBot
@camperbot
Mar 16 2016 01:20
harmicide sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 49 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 01:20
@Harmicide It's no problem :)
Srinivasan
@kksrini89
Mar 16 2016 01:23
I don't understand that how to handle the timeout issue between Asp.Net Mvc and WebAPI.
anyone help me?
Rakesh Shah
@rakeshshahmd
Mar 16 2016 01:24
I doing the exercise - Responsively style Radio Buttons- in Bootstrap. It is asking me to - Nest all of your radio buttons inside one div with the class row.
Nest each of your radio buttons inside its own div with the class col-xs-6.
Make sure each of your div elements has a closing tag.
I already have this in the code
<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>
how do I do it ?
Bryan Knight
@Harmicide
Mar 16 2016 01:26
you need another </div> at the bottom I think @rakeshshahmd
Rakesh Shah
@rakeshshahmd
Mar 16 2016 01:26
@Harmicide no, I tried, its not going through
Brian
@sludge256
Mar 16 2016 01:27
@rakeshshahmd Those aren't your radio buttons.
Rakesh Shah
@rakeshshahmd
Mar 16 2016 01:28
@sludge256 then which one are, can you guide me?
Brian
@sludge256
Mar 16 2016 01:28
search for the text radio
Bryan Knight
@Harmicide
Mar 16 2016 01:28
So I've only been doing this for like 6 hours, is it normal to get hooked onto webdev like this xD
Rakesh Shah
@rakeshshahmd
Mar 16 2016 01:28
@sludge256 How?
Brian
@sludge256
Mar 16 2016 01:29
Look at your code
Eric Lehmann
@mystere3
Mar 16 2016 01:29
Is it just my browser or are there a handful of the early html5 exercises that have no way of submitting?
Rakesh Shah
@rakeshshahmd
Mar 16 2016 01:29
@sludge256 Let me see
Brian
@sludge256
Mar 16 2016 01:29
@mystere3 They should be there
You might have to scroll down on the left pane
@Harmicide :+1:
Eric Lehmann
@mystere3
Mar 16 2016 01:29
hmm, theres a handful that have no button and ctrl + enter not working
Brian
@sludge256
Mar 16 2016 01:30
Does refreshing do anything?
bitgrower
@bitgrower
Mar 16 2016 01:30
@Harmicide - no you're completely unusual -- they have to drag people kicking and screaming to to webdev ... (NOT)
Brian
@sludge256
Mar 16 2016 01:30
and it won't submit if your code is incorrect
Eric Lehmann
@mystere3
Mar 16 2016 01:30
yeah but the button isn't even there
Brian
@sludge256
Mar 16 2016 01:30
refreshing might help
I can't say I've ever experienced a missing submit button
Túlio Isaak
@Tulio-Isaak
Mar 16 2016 01:31
hello, I'm trying to change the size of an image. I've criated a .smaller-image class{width: 100px;} than, I've used <img class ="smaller-image" src="image link"> but it did not work. What can I be wrong?
Brian
@sludge256
Mar 16 2016 01:31
Did you modify the existing image or create a new one?
Túlio Isaak
@Tulio-Isaak
Mar 16 2016 01:32
I think tha I use a new one
Michael Kelly
@Keydose
Mar 16 2016 01:32
@Tulio-Isaak Could you paste the code as it is?
Túlio Isaak
@Tulio-Isaak
Mar 16 2016 01:32
@Keydose I think tha I use a new one!

@Keydose <link href="http://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 clas="smaller-image" src="https://bit.ly/fcc-relaxing-cat">

Michael Kelly
@Keydose
Mar 16 2016 01:32
typo
clas instead of class
After img
Túlio Isaak
@Tulio-Isaak
Mar 16 2016 01:33
lol... tks
Rakesh Shah
@rakeshshahmd
Mar 16 2016 01:34
@sludge256 Done. Thanks
CamperBot
@camperbot
Mar 16 2016 01:34
rakeshshahmd sends brownie points to @sludge256 :sparkles: :thumbsup: :sparkles:
:star: 1863 | @sludge256 | http://www.freecodecamp.com/sludge256
Túlio Isaak
@Tulio-Isaak
Mar 16 2016 01:34
@Keydose lol tks
Michael Kelly
@Keydose
Mar 16 2016 01:34
@Tulio-Isaak You're welcome :)
Arpan
@sahooarpan
Mar 16 2016 01:36
How to import google font and set it as font family of h2 element where h2 is already class
Túlio Isaak
@Tulio-Isaak
Mar 16 2016 01:37
@Keydose typical error of who is starting! I hate this kind of error, but I'll overcome! =D by, tks again!
CamperBot
@camperbot
Mar 16 2016 01:37
tulio-isaak sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 62 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 01:37
@Tulio-Isaak No problem! Cya around :)
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<style>
  .fontize {
    font-family: 'Open Sans', sans-serif;
  }
</style>

<h2 class="fontize">

</h2>
@sahooarpan Does that help?
thewildsea
@thewildsea
Mar 16 2016 01:41

Can someone tell me why the code below wont align my example class?:

<style>
.example{
align: center;
}
</style>

Michael Kelly
@Keydose
Mar 16 2016 01:42
@thewildsea What's the HTML code?
@thewildsea Including the element with the example class and all parents
Michael Mazzone
@GitMazzone
Mar 16 2016 01:43
Can anyone help me achieve a frosted glass blur effect? I describe it fully in this reddit post: https://www.reddit.com/r/webdev/comments/4agm2o/is_there_a_good_way_to_achieve_a_frosted_glass/
Michael Kelly
@Keydose
Mar 16 2016 01:45
@GitMazzone Take a look at this: http://jsfiddle.net/nallenscott/wtqjy/41/
thewildsea
@thewildsea
Mar 16 2016 01:45

@Keydose just one element

<style>
.example{
align: center;
}
</style>

<div class="example" >
<h4 >pig</h4><img class="pic" ; src="http://...jpg"></img></div>

Michael Kelly
@Keydose
Mar 16 2016 01:47
@thewildsea Could you not just use <center> and </center> in that case?
thewildsea
@thewildsea
Mar 16 2016 01:49
@Keydose that works. do you know why it isnt working when I assign it in the style? curious as to why that method doesnt work
Michael Kelly
@Keydose
Mar 16 2016 01:50
@thewildsea It isn't supported in HTML5
@thewildsea If I'm not mistaken
thewildsea
@thewildsea
Mar 16 2016 01:50
got it, thanks @Keydose
CamperBot
@camperbot
Mar 16 2016 01:50
thewildsea sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 63 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 01:50
@thewildsea No worries, don't quote me on that though ;P
Matthew Horsman
@Karnivool89
Mar 16 2016 01:50
Hey guys, I'm confused by a paragraph in one of the challenges I'm on right now...it says: Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).
jarci123
@jarci123
Mar 16 2016 01:51
how do i give the text input in my form the class of form-control?
Matthew Horsman
@Karnivool89
Mar 16 2016 01:51
How do I "create an entry" specifically for p elements?
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 01:53
This message was deleted
Michael Kelly
@Keydose
Mar 16 2016 01:53
<style>
  p {
    font-size: 16px;
  }
</style>
@Karnivool89 I think that's what it means
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 01:53
Also why didn't my code format right lol
Michael Mazzone
@GitMazzone
Mar 16 2016 01:53
@Keydose That uses an img in html, I'm using a CSS background, which I feel is the better way to do it, is it not?
Michael Kelly
@Keydose
Mar 16 2016 01:53
@jarci123 What's your current code?
Matthew Horsman
@Karnivool89
Mar 16 2016 01:54
Awesome, thanks @Keydose
CamperBot
@camperbot
Mar 16 2016 01:54
karnivool89 sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 64 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 01:54
@effinglame
explain format
CamperBot
@camperbot
Mar 16 2016 01:54

: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 the code.

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

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

jarci123
@jarci123
Mar 16 2016 01:54
@Keydose what do you mean? i am doing the cat photo app
Michael Kelly
@Keydose
Mar 16 2016 01:54
@jarci123 What code do you currently have, so I can give you an edited version with the change made
jarci123
@jarci123
Mar 16 2016 01:55
@Keydose I have an HTML code
Michael Kelly
@Keydose
Mar 16 2016 01:55
@jarci123 Could you paste it here?
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 01:56

EDITED FOR FORMATTING:
Hi all,
I'm doing the "Profile Lookup" Javascript exercise, and I'm trying to create a nested for-loop to go through a multidimensional array (named "contacts"). Right now I'm testing it by using the variable "match", adding one to it every time the whole loop is completed. However, when I return "match", I always get 0. Can you tell what I'm doing wrong?

var match = 0;

for (var i = 0; i < contacts.length; i++) {
  for (var x = 0; x < contacts[i].length; x++) {
    match++;
return match;

Thanks!

jarci123
@jarci123
Mar 16 2016 01:56

@Keydose <link href="http://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="http://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>
<input type="text" placeholder="cat photo URL" required>
<button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>
</form>
</div>

Michael Kelly
@Keydose
Mar 16 2016 01:57
@effinglame You appear to be missing closing curly braces are you not?
<input type="text" class="form-control" placeholder="cat photo URL" required>
@jarci123 ^
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 01:59
@Keydose Oh, youre right! That was an issue with my copy paste, not in the actual code.
Arpan
@sahooarpan
Mar 16 2016 01:59
ya thanx @Keydose
CamperBot
@camperbot
Mar 16 2016 01:59
sahooarpan sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 65 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 01:59
Ah so that's not what's the issue then? @effinglame
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:00
@Keydose No, I've got them in the actual code. Here it is with curlys:
var match = 0;


for (var i = 0; i < contacts.length; i++) {
  for (var x = 0; x < contacts[i].length; x++) {
    match++;
  }
}
return match;
sorry lol, let me try that again
Michael Kelly
@Keydose
Mar 16 2016 02:01
It's okay, you can hover over the right-side of the message and click the three dots then edit
And edit it for formatting after posting
So I'm guessing match is supposed to be the total amount of contacts in the array?
tungnhuxua
@tungnhuxua
Mar 16 2016 02:02
hi
Michael Kelly
@Keydose
Mar 16 2016 02:02
@tungnhuxua Hey
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:02
@Keydose
Yeah, it's going to be a True/False in the actual code, but I just wanted to check if the loop was functional first
This message was deleted
CodingwithGreenTea
@CodingwithGreenTea
Mar 16 2016 02:04
Hi all! For the telephone number challenge, I'm trying to match parentheses via regex, but the escape backslash isn't working.
Michael Kelly
@Keydose
Mar 16 2016 02:05
@effinglame I honestly can't seem to figure that out
@effinglame All I can think of is if contacts.length is returning 0
CodingwithGreenTea
@CodingwithGreenTea
Mar 16 2016 02:06
For example, I have str.match(/\(/) to find an open parenthesis, but I'm just told this is invalid syntax
Michael Kelly
@Keydose
Mar 16 2016 02:06
@effinglame Could you try removing the word var from the for loops?
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:06
@Keydose Sure
Michael Kelly
@Keydose
Mar 16 2016 02:06
@effinglame I have no idea if it matters but I've never used that in mine before
@CodingwithGreenTea Hey! I'm not very good with Regex myself, but this is the best website I know of for testing it: http://www.regexr.com/
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:07
@Keydose That didn't do it, unfortunately
Michael Kelly
@Keydose
Mar 16 2016 02:08
@effinglame Could you maybe try pasting more of the code? I don't know how long it is though
CodingwithGreenTea
@CodingwithGreenTea
Mar 16 2016 02:08
@Keydose thanks. I'll check that website out. I did a lot of searching through stackoverflow and found nothing yet
CamperBot
@camperbot
Mar 16 2016 02:08
codingwithgreentea sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 66 | @keydose | http://www.freecodecamp.com/keydose
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:08
@Keydose Yeah, one moment. It's a little long.
//Setup
var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["Javascript", "Gaming", "Foxes"]
    }
];


function lookUp(firstName, prop){
// Only change code below this line
  var match = 0;
  var first = firstName;

  for (i = 0; i < contacts.length; i++) {
    for (x = 0; x < contacts[i].length; x++) {
      match++;
    }
  }
  return match;
// Only change code above this line
}

// Change these values to test your function
lookUp("Akira", "likes");
Arthur
@Arthurmb
Mar 16 2016 02:09
Hello World. My name is Arthur. Heard about FreecodeCamp from a friend. I wnat to learn how to code to improve business processes
CamperBot
@camperbot
Mar 16 2016 02:09

welcome to FreeCodeCamp @Arthurmb!

cannelflow
@cannelflow
Mar 16 2016 02:10
welcome to FreeCodeCamp @Arthurmb
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:10
@Arthurmb Welcome!
Murat
@muratkh
Mar 16 2016 02:11
has anyone run into bug in jquery first lesson where it doesn't jump to next lesson and won't mark it as done?
Michael Kelly
@Keydose
Mar 16 2016 02:11
@effinglame Ah, so I'm guessing the issue is that it's thinking you're trying to reference a property of the contact called "length"
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:11
@Keydose Huh, how can I clarify?
Alexander Køpke
@alexanderkopke
Mar 16 2016 02:12
@muratkh it happens sometimes. Clear the cache with ctrl+r and try again
yoni chanowitz
@yonichanowitz
Mar 16 2016 02:12
@Arthurmb , hola!
Murat
@muratkh
Mar 16 2016 02:12
let me try
idk it didn't work but i'll try it at home i guess thanks @alexanderkopre
CamperBot
@camperbot
Mar 16 2016 02:13
muratkh sends brownie points to @alexanderkopre :sparkles: :thumbsup: :sparkles:
Arthur
@Arthurmb
Mar 16 2016 02:13
Thanks for the welcome guys :)
CamperBot
@camperbot
Mar 16 2016 02:13
:warning: could not find receiver for alexanderkopre
Murat
@muratkh
Mar 16 2016 02:13
@alexanderkopke sorry
Alexander Køpke
@alexanderkopke
Mar 16 2016 02:14
@muratkh does your code look like this
<script>
$(document).ready(function(){

});

</script>
Michael Kelly
@Keydose
Mar 16 2016 02:14
for (i = 0; i < contacts.length; i++) {
  if (contacts[i].firstName == first) {
    return contacts[i].likes;
  }
}
@effinglame
Maybe something like that provides an insight?
Murat
@muratkh
Mar 16 2016 02:14
@alexanderkopke yes
Alexander Køpke
@alexanderkopke
Mar 16 2016 02:15
@muratkh ok are you using firefox? Chrome browser is recommended for the challenges
Murat
@muratkh
Mar 16 2016 02:15
everything runs fine i get the points but won't mark as done or go on the next lesson
chrome
Alexander Køpke
@alexanderkopke
Mar 16 2016 02:15
ah ok.. sorry :(
Michael Kelly
@Keydose
Mar 16 2016 02:15
@muratkh Try clearing your cache
@muratkh CTRL+H then Clear browsing data
Murat
@muratkh
Mar 16 2016 02:16
@Keydose now it did idk what worked lol
Michael Kelly
@Keydose
Mar 16 2016 02:16
@muratkh Ah, good to hear
Alexander Køpke
@alexanderkopke
Mar 16 2016 02:16
@muratkh you can move to next challenge manually
Murat
@muratkh
Mar 16 2016 02:16
i just erased the code and rewrote it
Alexander Køpke
@alexanderkopke
Mar 16 2016 02:16
:)
Murat
@muratkh
Mar 16 2016 02:16
oh well thanks guys
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:17
@Keydose Oh! So this checks for firstName without doing a second for-loop?
Michael Kelly
@Keydose
Mar 16 2016 02:18
@effinglame Yeah :)
galoch8
@galoch8
Mar 16 2016 02:18
hello
i need some help
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:18
@Keydose Cool, thanks!
CamperBot
@camperbot
Mar 16 2016 02:18
effinglame sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 68 | @keydose | http://www.freecodecamp.com/keydose
galoch8
@galoch8
Mar 16 2016 02:18
can someone help?
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:18
@Keydose Question though, is it common for .length to have that issue?
Michael Kelly
@Keydose
Mar 16 2016 02:19
@effinglame Think of each contact being an object with four properties each, you want to loop through each contact and check their firstName property to see if it's the one you're looking for, if so, return the property you're looking for
@effinglame I think it's because of the format of the array
galoch8
@galoch8
Mar 16 2016 02:19
i am at the add border to your element task
i created a class but it is not doing anything
Michael Kelly
@Keydose
Mar 16 2016 02:19
@effinglame I actually didn't do that snippet properly right, it should be this:
for (i = 0; i < contacts.length; i++) {
  if (contacts[i].firstName == first) {
    return contacts[i].prop;
  }
}
The change being prop instead of likes
That should work fine
@galoch8 What is your current code
galoch8
@galoch8
Mar 16 2016 02:20
<link href="http://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;}

   .thik-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }


</style>

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


<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>
cannelflow
@cannelflow
Mar 16 2016 02:20
@galoch8 show your code
Michael Kelly
@Keydose
Mar 16 2016 02:20
Typo @galoch8
Jacob Hanawalt
@JacobHanawalt
Mar 16 2016 02:20
@Keydose Cool! I'm going to start tinkering with that until I understand it better. Thanks again!
CamperBot
@camperbot
Mar 16 2016 02:20
effinglame sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:warning: effinglame already gave keydose points
Michael Kelly
@Keydose
Mar 16 2016 02:21
You typed .thik-green-border instead of .thick-green-border
@effinglame Hey no problem man :)
galoch8
@galoch8
Mar 16 2016 02:22
wow. super.. i need to work on my spelling :)
thank you @Keydose
CamperBot
@camperbot
Mar 16 2016 02:22
galoch8 sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 70 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 02:22
@galoch8 It's probably the most common mistake when you're just beginning, don't feel bad about it ;P
Tia Holiday
@tlholiday
Mar 16 2016 02:24

HELP! What am I doing wrong? I don't see the border and not sure how/where to place the class into the HTML...THANKS in advance! :smile:

<link href="http://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;
}
img
.thick-green-border {
border-color: green;
border-width: 10x;
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>

CamperBot
@camperbot
Mar 16 2016 02:24
no wiki entry for: what am i doing wrong i dont see the border and not sure howwhere to place the class into the htmlthanks in advance smile link hrefhttpfontsgoogleapiscomcssfamilylobster relstylesheet typetextcssstyle red-text color red h2 font-family lobster monospace p font-size 16px font-family monospace img thick-green-border border-color green border-width 10x border-style solid styleh2 classred-textcatphotoapph2img classsmaller-image srchttpsbitlyfcc-relaxing-catp classred-textkitty ipsum dolor sit amet shed everywhere shed everywhere stretching attack your ankles chase the red dot hairball run catnip eat the grass sniffpp classred-textpurr jump eat the grass rip the couch scratched sunbathe shed everywhere rip the couch sleep in the sink fluffy fur catnip scratchedp
Michael Kelly
@Keydose
Mar 16 2016 02:26
Hey @tlholiday, so first off, the class in your style shouldn't be img .thick-green-border, it should just be .thick-green-border, and as for adding it to your image:
Richard
@strawstack
Mar 16 2016 02:26
This is like more a curriculum development issue, but I'm wondering if anyone knows how I could add a new bondfire to the challenge section of the site? I found the correct github page, and can make a pull request, but don't know how to generate a new id for a problem: https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json
Michael Kelly
@Keydose
Mar 16 2016 02:27
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat">
Manish Giri
@Manish-Giri
Mar 16 2016 02:27

@tlholiday you add the class name(from your css) to your img element, like this

<link href="http://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: 10x;
border-style: solid;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<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>

also, when writing css rules for a class, just prefix it with a ., you don’t need the element name that class is applied on.

RyanEnright
@RyanEnright
Mar 16 2016 02:28
t
Tia Holiday
@tlholiday
Mar 16 2016 02:30
Gotcha, THANKS! @Manish-Giri & @Keydose!
CamperBot
@camperbot
Mar 16 2016 02:30
tlholiday sends brownie points to @manish-giri and @keydose :sparkles: :thumbsup: :sparkles:
:star: 763 | @manish-giri | http://www.freecodecamp.com/manish-giri
:star: 75 | @keydose | http://www.freecodecamp.com/keydose
RyanEnright
@RyanEnright
Mar 16 2016 02:30
@tlholiday don't know if this is causing you problems but you have 10x; instead of 10px; on border width
Michael Kelly
@Keydose
Mar 16 2016 02:30
@tlholiday @RyanEnright Nicely spotted, that will cause an issue ;P
@tlholiday No problem :)
Tia Holiday
@tlholiday
Mar 16 2016 02:31
Whoops, good catch @RyanEnright ! Sadly that didn't fix it though :( Mer.
@RyanEnright thanks again for the catch. Found another issue that fixed it :-)
CamperBot
@camperbot
Mar 16 2016 02:33
tlholiday sends brownie points to @ryanenright :sparkles: :thumbsup: :sparkles:
:star: 132 | @ryanenright | http://www.freecodecamp.com/ryanenright
RyanEnright
@RyanEnright
Mar 16 2016 02:35
@tlholiday Awesome :smile:
Carley Tripp
@Jax05
Mar 16 2016 02:42
could someone help me figure out why the link color changes to blue when I have :hover and :active set to the same color? http://codepen.io/Jax05/pen/mVZPqe
Arpan
@sahooarpan
Mar 16 2016 02:46
thanx @galoch8 galoch8
CamperBot
@camperbot
Mar 16 2016 02:46
sahooarpan sends brownie points to @galoch8 :sparkles: :thumbsup: :sparkles:
:star: 28 | @galoch8 | http://www.freecodecamp.com/galoch8
hnry
@hnry
Mar 16 2016 02:47
@Jax05 i'm not seeing the blue, but try setting :visited too
Michael Kelly
@Keydose
Mar 16 2016 02:47
@Jax05 Hey! Found the solution for you
a.nav-links:active, a.nav-links:hover, a.nav-links:focus {
  color: black !important;
}
Coy Sanders
@coymeetsworld
Mar 16 2016 02:49
looks fine to me @Jax05
Carley Tripp
@Jax05
Mar 16 2016 02:50
yes! thank you so much @Keydose
CamperBot
@camperbot
Mar 16 2016 02:50
jax05 sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 91 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 02:50
@Jax05 You're welcome :)
Coy Sanders
@coymeetsworld
Mar 16 2016 02:51
you shoudn't need to mark it as important, @hnry brought up a good point w/ the visited pseudoclass too, maybe include that as well
Michael Kelly
@Keydose
Mar 16 2016 02:51
Yeah you shouldn't need to mark it as important, that was just from where I tested that first, but there's no harm in keeping it there if it's absolutely detrimental that they can't be overriden
overridden*
And @coymeetsworld That would make the text black when not in focus and has been clicked, which would make it blend in with the navbar background
Matt
@YoshiBlues
Mar 16 2016 02:52
I'm just curious as to why, but does anyone know why you must begin an id style with # as opposed to "."?
Michael Kelly
@Keydose
Mar 16 2016 02:52
@YoshiBlues They're different things
Coy Sanders
@coymeetsworld
Mar 16 2016 02:52
yeah i see that now you don't want that @Keydose
Michael Kelly
@Keydose
Mar 16 2016 02:53
@YoshiBlues An id is intended to only be used for a single element
@YoshiBlues It's mainly used for stuff like animation when you want to animate a specific element, you can get the element by its id
Matt
@YoshiBlues
Mar 16 2016 02:54
@Keydose Thank you, Freecodecamp just hasn't explained the difference yet.
CamperBot
@camperbot
Mar 16 2016 02:54
yoshiblues sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 92 | @keydose | http://www.freecodecamp.com/keydose
Coy Sanders
@coymeetsworld
Mar 16 2016 02:54
could be also that there is css from bootstrap that is causing the issues too with the navbar too
Michael Kelly
@Keydose
Mar 16 2016 02:55
Yeah the first step I do with trying to troubleshoot any CSS issue is set my changes to !important
Just to make sure that I'm not overlooking it just being overridden
@YoshiBlues Yeah no problem, it doesn't really matter all that much other than general convention
@YoshiBlues Can you imagine though, having three paragraphs with the ids paragraphOne, paragraphTwo, paragraphThree, but all with the same class paragraphBase
RyanEnright
@RyanEnright
Mar 16 2016 02:56
I'm kind of nitpicking but this annoys me: Anyone know how I can get the page to land a bit higher when selecting the about/portfolio/contact links? I've tried multiple ways. http://codepen.io/RyanlEnright/full/MyjrqK/
Michael Kelly
@Keydose
Mar 16 2016 03:01
@RyanEnright I found a way
Coy Sanders
@coymeetsworld
Mar 16 2016 03:01
@RyanEnright probably don't use hr's in your code
Michael Kelly
@Keydose
Mar 16 2016 03:01
<row>
    <div id="one"></div>
</row>
Coy Sanders
@coymeetsworld
Mar 16 2016 03:01
or sections
Michael Kelly
@Keydose
Mar 16 2016 03:01
Put that above the hr with the about id
and then tell the button to take you to #one instead
Arpan
@sahooarpan
Mar 16 2016 03:02

Make Circular Images with a Border Radius

In addition to pixels, you can also specify a border-radius using a percentage.

Give your cat photo a border-radius of 50%.
Your image should have a border radius of 50%, making it perfectly circular.
Be sure to use a percentage instead of a pixel value.

Coy Sanders
@coymeetsworld
Mar 16 2016 03:02
should only be one container and put your rows and columns in there
Teh
@yestka
Mar 16 2016 03:05

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

p {
font-size: 16px;
font-family: Sans-serif;
}
</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>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Hi, Im trying to perform > Make all of your p elements use the Monospace font.
Added font family in STYLE tag as below:
<style>
.red-text {
color: red;
}

p {
font-size: 16px;
font-family: Sans-serif;
}
</style>
Coy Sanders
@coymeetsworld
Mar 16 2016 03:07
Monospace is a font-family attribute @yestka
replace Sans-serif with Monospace
Teh
@yestka
Mar 16 2016 03:07
i see ok..
RyanEnright
@RyanEnright
Mar 16 2016 03:07
@coymeetsworld are you saying not to use hr's in this example or as in its a bad practice period?
Coy Sanders
@coymeetsworld
Mar 16 2016 03:08
i mean Monospace is a font-family value too, not attribute just FYI my mistake
Teh
@yestka
Mar 16 2016 03:08
got it. TQVM
Coy Sanders
@coymeetsworld
Mar 16 2016 03:08
not an expert in it but yeah I think it's a little deprecated @RyanEnright
RyanEnright
@RyanEnright
Mar 16 2016 03:09
@coymeetsworld got it, thanks
CamperBot
@camperbot
Mar 16 2016 03:09
ryanenright sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 342 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
RyanEnright
@RyanEnright
Mar 16 2016 03:09
@Keydose thanks
CamperBot
@camperbot
Mar 16 2016 03:09
ryanenright sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 93 | @keydose | http://www.freecodecamp.com/keydose
Coy Sanders
@coymeetsworld
Mar 16 2016 03:10
what i would do is for each bootstrap row (i.e. div) you specify, give it the id you gave those HRs instead
then your links will go to the beginning of that div
and if you want to adjust where the link actually goes you can style the id and specify a margin-top value
This message was deleted
guess you already do that so nvm don't need to show an example for that
RyanEnright
@RyanEnright
Mar 16 2016 03:13
@coymeetsworld that seems like the logical way to do it. I don't know how I missed that. Thanks for the advice, I appreciate it.
CamperBot
@camperbot
Mar 16 2016 03:13
ryanenright sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: ryanenright already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Mar 16 2016 03:14
yeah np
Bryan Castleman
@castlemaninc
Mar 16 2016 03:15
Does anyone know a good API for the Random Quote Generator? I don't want to write my own quotes. I want to try to get the API to work with my Pen.
Pivotal Expert
@SingaporeClouds
Mar 16 2016 03:16
Is there an API to access the FreeCodeCamp progress that I've made? I am looking to programatically access the number on my http://www.freecodecamp.com/<GITHUBID> page.
RyanEnright
@RyanEnright
Mar 16 2016 03:16
@coymeetsworld I just noticed you also said not to use sections. I thought this was good practice using semantic value if its a defined section. Am I looking at this wrong?
Coy Sanders
@coymeetsworld
Mar 16 2016 03:18
where did you read that from? I'm not too familiar with that tag I just used divs which can be used for same thing
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
RyanEnright
@RyanEnright
Mar 16 2016 03:19
I read that in the prep-work for Viking-code-school. I'm also new to all this so may have misunderstood
Coy Sanders
@coymeetsworld
Mar 16 2016 03:19
yeah so am I, it actually is in HTML5
i guess you could use it and it could work, but its not the intended use of that tag
RyanEnright
@RyanEnright
Mar 16 2016 03:21
@coymeetsworld I'll have to read up on it, I may have misunderstood it. I
Coy Sanders
@coymeetsworld
Mar 16 2016 03:23
was this on viking code school or their free version the Odin Project?
link maybe?
RyanEnright
@RyanEnright
Mar 16 2016 03:24
Viking school- I don't remember where I'd have to look. Most of the study material was linked to elsewhere.
@coymeetsworld This is very similar to what I read http://blog.teamtreehouse.com/use-html5-sectioning-elements
Arpan
@sahooarpan
Mar 16 2016 03:29

<link href="http://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;
}
<p>Here's a
<a href="http://freecatphotoapp.com">
link to cat photos.com </a>
for you to follow.</p>
</style>

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

bitgrower
@bitgrower
Mar 16 2016 03:29
div is to html tags like white is to color ...
Arpan
@sahooarpan
Mar 16 2016 03:29

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

what is error vin my code??
in
Coy Sanders
@coymeetsworld
Mar 16 2016 03:29
i can't say its bad @RyanEnright, just may be easier to just utilize bootstrap a little more for this type of project
i would think things like the section and article tags would be more useful for creating something like a blog post or a story, at least thats what im reading what they elude to
style tag closed too late @sahooarpan
you have some html in there, should only be css between the style tags
Arpan
@sahooarpan
Mar 16 2016 03:33
so what to do??
where to palce style tag??
place
RyanEnright
@RyanEnright
Mar 16 2016 03:34
@coymeetsworld Found the material from Viking http://learn.shayhowe.com/html-css/getting-to-know-html/. As I'm looking at it now with more experience it's certainly subjective. I'm still not sure I understand it. I think you're right though, seems best for blog posts or story, if at all. Also, I agree with utilizing boostrap but I found I was relying on it a bit much and not learning how to actually style elements.
Coy Sanders
@coymeetsworld
Mar 16 2016 03:34
only css code goes between the <style> tags, no other tags should be nested between them @sahooarpan
thats kind of the point @RyanEnright , having the heavy lifting done for you :)
also bootstrap styling is just optional on some things
Arpan
@sahooarpan
Mar 16 2016 03:35
okk thanks @coymeetsworld
CamperBot
@camperbot
Mar 16 2016 03:35
sahooarpan sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 343 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Mar 16 2016 03:35
it doesn't style something like a row or a column, what you would do is give that column or row or whatever your own id or class and style that yourself
np @sahooarpan
M. Matthews
@mmatthews1981
Mar 16 2016 03:40
hey guys. I've totally stalled out on the tic-tac-to project. If you've completed it, can you post a link to your project? I'd love to see how other people approached this project
Tú T. Đỗ
@Young1906
Mar 16 2016 03:45
Hey, anyone working on the anchor text>
Tia Holiday
@tlholiday
Mar 16 2016 03:46
@Young1906 I just finished it! What's up! maybe I can help
Uili Fecteau
@Uili-Simteau
Mar 16 2016 03:54
Hi there, just joined Free Code Camp. Stoked.
Coy Sanders
@coymeetsworld
Mar 16 2016 03:55
welcome @Uili-Simteau good luck on your learning
Derin
@JDSpoel
Mar 16 2016 03:57
how do i add an action attribute to a form element?
MoneyPoole
@MoneyPoole
Mar 16 2016 03:59
how do i add background image
.gray-background {background-color: gray;}
David Young
@dayvidwhy
Mar 16 2016 04:00
@MoneyPoole you can link to urls using background-image: (url);
James S.
@Mrblue27
Mar 16 2016 04:01
anyone know where am I going wrong.
http://www.freecodecamp.com/challenges/link-to-external-pages-with-anchor-elements#?solution=%3Clink%20href%3D%22http%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{%0A%20%20%20%20color%3A%20red%3B%0A%20%20}%0A%0A%20%20h2%20{%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20}%0A%0A%20%20p%20{%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20}%0A%0A%20%20.thick-green-border%20{%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}%0A%0A%20%20.smaller-image%20{%0A%20%20%20%20width%3A%20100px%3B%0A%20%20}%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%0A%0A%3Cp%20class%3D%22red-text%22%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%3Cp%20class%3D%22red-text%22%3EPurr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.%3C%2Fp%3E%0A%3Cp%3E%20Here%27s%20a%20%3Ca%20href%3D%22http%3A%2F%2Ffreecatphotoapp.com%22%3Elink%20to%20Free%20Cat%20Photo%3C%2Fa%3E%20for%20%22cat%20photos%22.%3C%2Fp%3E
MoneyPoole
@MoneyPoole
Mar 16 2016 04:02
@deedubwhy thanks but how do i add the background color to a div element in the tutorial
CamperBot
@camperbot
Mar 16 2016 04:02
moneypoole sends brownie points to @deedubwhy :sparkles: :thumbsup: :sparkles:
:star: 346 | @deedubwhy | http://www.freecodecamp.com/deedubwhy
Coy Sanders
@coymeetsworld
Mar 16 2016 04:02
@mrblue27 anchor text means text between the anchor <a> tags
David Young
@dayvidwhy
Mar 16 2016 04:02
@MoneyPoole you want to add that class to the div element you want to have the colour. so you made a class with that background color, let the div also have class=“myclass” in the opening tag
NormalWare
@Centuriom
Mar 16 2016 04:04
Hello guys, how can i overlay one div over another div ?
Jeff
@meankraken
Mar 16 2016 04:06

@Centuriom

<div>
<div>

</div>
</div>

NormalWare
@Centuriom
Mar 16 2016 04:08
@meankraken Not that way
James S.
@Mrblue27
Mar 16 2016 04:08
@coymeetsworld Thanks I figured it out
CamperBot
@camperbot
Mar 16 2016 04:08
mrblue27 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 344 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Mar 16 2016 04:09
cool
gj @Mrblue27
Jeff
@meankraken
Mar 16 2016 04:10
@Centuriom are you talking about visually putting one div over another? in that case you can just move it via position, top, left, etc properties... and set the z-index: 100
MoneyPoole
@MoneyPoole
Mar 16 2016 04:10

<link href="http://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>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>
<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>

how do i code the background color to a div element and where do i input it?

NormalWare
@Centuriom
Mar 16 2016 04:10
@meankraken Oh thanks man
CamperBot
@camperbot
Mar 16 2016 04:10
centuriom sends brownie points to @meankraken :sparkles: :thumbsup: :sparkles:
:star: 287 | @meankraken | http://www.freecodecamp.com/meankraken
Jeff
@meankraken
Mar 16 2016 04:11
@Centuriom np lmk know if it doesnt work
Coy Sanders
@coymeetsworld
Mar 16 2016 04:13
@MoneyPoole use the attribute background-color to an id or class, and give the div you want to change the background to that class
or id
but your example has no divs, do you mean change the background color of the entire page?
MoneyPoole
@MoneyPoole
Mar 16 2016 04:20
@coymeetsworld i’m trying change the background from the starting point of Things cats love ending at other cats
Coy Sanders
@coymeetsworld
Mar 16 2016 04:24
oh i see
Bree Penninger
@breesocrafty
Mar 16 2016 04:24
General Question: Why does my project look completely different in codepen than it did in my browser when I loaded it locally? (Sorry, brand-new dumb question.)
Coy Sanders
@coymeetsworld
Mar 16 2016 04:24
yeah so you want to give the div a style
and you would use the background-color attribute
Julia Bellaflores Blake
@juliabb
Mar 16 2016 04:25
p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image {
width: 100px;
}
</style>
OK so what's wrong? :-(
Coy Sanders
@coymeetsworld
Mar 16 2016 04:25
@breesocrafty which project? and how different does it look?
Bree Penninger
@breesocrafty
Mar 16 2016 04:25
@coymeetsworld - I'm on the tribute page. My background color is not showing, and my google fonts aren't loading. And my h2 color is wrong.
I've never used codepen before.... so I'm just wondering if I linked something wrong?
Coy Sanders
@coymeetsworld
Mar 16 2016 04:26
did you copy your css to a file on your computer, and link the html to it?
thats probably the issue i would guess
did you put your css code inside the css section on codepen? or is it in the html section between <style> tags?
Bree Penninger
@breesocrafty
Mar 16 2016 04:27
Ohhhhh.... Okay, I put the CSS in my codepen.
Coy Sanders
@coymeetsworld
Mar 16 2016 04:27
yeah
Bree Penninger
@breesocrafty
Mar 16 2016 04:27
So I probably need to change the link, am I right?
Coy Sanders
@coymeetsworld
Mar 16 2016 04:27
so if you want to view it on your browser, in your <head> tags you need to link the css file
more like add a link
codepen does that automatically for you
same goes with the javascript code too
Bree Penninger
@breesocrafty
Mar 16 2016 04:28
I wrote everything in Sublime - and saved in my folder.. then copy/pasted into codepen.
So - the links are still there.
So, I should remove the old links ...
Coy Sanders
@coymeetsworld
Mar 16 2016 04:29
yeah probably since it won't know how to refer to those files
if you want to link me the codepen i can look
Bree Penninger
@breesocrafty
Mar 16 2016 04:30
Ok. I think I figured it out - and there is a place to add external CSS (so my bootstrap, google fonts, etc.)??
Coy Sanders
@coymeetsworld
Mar 16 2016 04:30
yes so google fonts you'll keep the same
you're referencing an external css file
and you can keep bootstrap if you want
but, codepen does something cool where you can specify to add it in your pen
if you go to Settings->CSS->Add External CSS
Bree Penninger
@breesocrafty
Mar 16 2016 04:31
So if I click on settings, then I can add external.
Yes.
Coy Sanders
@coymeetsworld
Mar 16 2016 04:31
yeah, you can add the google fonts css there too if you like
Bree Penninger
@breesocrafty
Mar 16 2016 04:32
Okay! Thank you! This is my first try and I have no clue what I'm doing. :)
I see! Ok!
Coy Sanders
@coymeetsworld
Mar 16 2016 04:32
and the dropdown box has common css files, inc bootstrap
yeah np, don't think thats true page looks good!
Bree Penninger
@breesocrafty
Mar 16 2016 04:32
And it will automatically add my own css if I copy/paste it into the css box.
MoneyPoole
@MoneyPoole
Mar 16 2016 04:32
@coymeetsworld still having a problem getting it to work…i’m still a beginner at this
Bree Penninger
@breesocrafty
Mar 16 2016 04:32
Thank you!! Couple of issues to fix still. Thanks, sorry if I interrupted you guys @MoneyPoole !!! Thank you!!
CamperBot
@camperbot
Mar 16 2016 04:32
breesocrafty sends brownie points to @moneypoole :sparkles: :thumbsup: :sparkles:
:star: 44 | @moneypoole | http://www.freecodecamp.com/moneypoole
Coy Sanders
@coymeetsworld
Mar 16 2016 04:33
ok so what part you having trouble with @MoneyPoole ?
Bree Penninger
@breesocrafty
Mar 16 2016 04:33
Thank you @coymeetsworld for all your help!!
CamperBot
@camperbot
Mar 16 2016 04:33
breesocrafty sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 345 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Mar 16 2016 04:33
np @breesocrafty :)
actually @MoneyPoole which campfire are you working on specifically? i haven't done those in a few months
MoneyPoole
@MoneyPoole
Mar 16 2016 04:34

@coymeetsworld this is what I have so far

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

Coy Sanders
@coymeetsworld
Mar 16 2016 04:35
you need to surround gray-background in quotes
MoneyPoole
@MoneyPoole
Mar 16 2016 04:36
@coymeetsworld I’m on HTML5 & CSS Lesson #37
Coy Sanders
@coymeetsworld
Mar 16 2016 04:36
on freecodecamp?
MoneyPoole
@MoneyPoole
Mar 16 2016 04:37
@coymeetsworld yes
Coy Sanders
@coymeetsworld
Mar 16 2016 04:37
oh i see
MoneyPoole
@MoneyPoole
Mar 16 2016 04:38
@coymeetsworld here’s the example it gives…I’m not sure how to code it and where to put…style or div?
.green-background {
background-color: green;
}
Coy Sanders
@coymeetsworld
Mar 16 2016 04:38
so thats an example of the css code
you put that between your style tags, which is where css code goes
MoneyPoole
@MoneyPoole
Mar 16 2016 04:39
ok let me try it
Coy Sanders
@coymeetsworld
Mar 16 2016 04:39
ya, and you did the part above on how to reference it
where you give the div a class
MoneyPoole
@MoneyPoole
Mar 16 2016 04:40
EUREKA!!!! It worked. Thanks! @coymeetsworld
Coy Sanders
@coymeetsworld
Mar 16 2016 04:41
cool np @MoneyPoole
RyanEnright
@RyanEnright
Mar 16 2016 04:43
What's a good resource for cross browser testing?
All I've come across are pay for use versions
Joseph Gereghty
@joegereghty1989
Mar 16 2016 04:56
Can someone help me? My a element has the anchor text, and it has a closing tag, but where am i supposed to put the a element? http://www.freecodecamp.com/challenges/link-to-external-pages-with-anchor-elements#?solution=%3Clink%20href%3D%22http%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%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%0A%0A%3Cp%20class%3D%22red-text%22%3EKitty%20ipsum%20%3Ca%20href%3D%22http%3A%2F%2Fwww.freecodecamp.com%2Fchallenges%2Flink-to-external-pages-with-anchor-elements%22%3E%20%22cat%20photos%22%3C%2Fa%3E%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%3Cp%20class%3D%22red-text%22%3EPurr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.%3C%2Fp%3E%0A
cannelflow
@cannelflow
Mar 16 2016 04:59
@joegereghty1989 <a href="#">abc</a>
Joseph Gereghty
@joegereghty1989
Mar 16 2016 05:03
@cannelflow I don't think i get what you're hinting at. I'm sorry.
cannelflow
@cannelflow
Mar 16 2016 05:05
it says Create an a element that links to http://freecatphotoapp.com and has "cat photos" as its anchor text.
so do like
<a href="http://freecatphotoapp.com">cat photos</a>
so i had given hint like 
<a href="#">abc</a>
@joegereghty1989
Nick
@wani0402
Mar 16 2016 05:06
Anchor text is "abc" in his example. The anchor text must be wrapped in the anchor tag (or element)
Joseph Gereghty
@joegereghty1989
Mar 16 2016 05:07
@cannelflow @wani0402 lol I pasted the wrong link and couldn't figure out what i did wrong. My bad guys. Thanks for the help.
CamperBot
@camperbot
Mar 16 2016 05:07
joegereghty1989 sends brownie points to @cannelflow and @wani0402 :sparkles: :thumbsup: :sparkles:
:star: 930 | @cannelflow | http://www.freecodecamp.com/cannelflow
:star: 65 | @wani0402 | http://www.freecodecamp.com/wani0402
cannelflow
@cannelflow
Mar 16 2016 05:08
@joegereghty1989 :+1:
Nick
@wani0402
Mar 16 2016 05:08
That's why we're all here
:D
Mudit Bhutani
@muditbhutani
Mar 16 2016 05:25
not able to find the error
blob
MacKenzie Whalen
@mkwhalen
Mar 16 2016 05:25
What does it mean when it says "Do not add a class attribute to the second p element, without removing it from the first one."?
Mudit Bhutani
@muditbhutani
Mar 16 2016 05:26
where @mkwhalen
MacKenzie Whalen
@mkwhalen
Mar 16 2016 05:27
How can I show you a screenshot of my screen?
Mudit Bhutani
@muditbhutani
Mar 16 2016 05:28
click print screen and then ctrl + v here
@mkwhalen
MacKenzie Whalen
@mkwhalen
Mar 16 2016 05:29
Nothing happens when I hit ctrl + v
blob
jk got it haha
Joseph Gereghty
@joegereghty1989
Mar 16 2016 05:30
is there a way to shorten a URL so when i put it in the chat its not like 10 paragraphs long?
Nick
@wani0402
Mar 16 2016 05:31
@joegereghty1989 go to goo.gl
MacKenzie Whalen
@mkwhalen
Mar 16 2016 05:31
@muditbhutani
Mudit Bhutani
@muditbhutani
Mar 16 2016 05:32
@mkwhalen means u only add class to the first p element
Joseph Gereghty
@joegereghty1989
Mar 16 2016 05:32
@wani0402 life saver
Nick
@wani0402
Mar 16 2016 05:32
@mkwhalen you have a class on your h2 text but the class doesn't exist in your style
Mudit Bhutani
@muditbhutani
Mar 16 2016 05:32
because it only is to be made red
yes what wani said
class doesnt exist and also give that class to the <p>
Nick
@wani0402
Mar 16 2016 05:33
It should state:
h2 {
color: red;
}
p {
font-size:16px;
}
MacKenzie Whalen
@mkwhalen
Mar 16 2016 05:35
@wani0402 @muditbhutani Thank you!!
CamperBot
@camperbot
Mar 16 2016 05:35
mkwhalen sends brownie points to @wani0402 and @muditbhutani :sparkles: :thumbsup: :sparkles:
:star: 282 | @muditbhutani | http://www.freecodecamp.com/muditbhutani
:star: 87 | @wani0402 | http://www.freecodecamp.com/wani0402
Nick
@wani0402
Mar 16 2016 05:35
:+1:
Leonardo Galante
@lndgalante
Mar 16 2016 05:37
Hi guys! Before I submit my Tribute Page do I have to show or can I it to someone first? So I can have some feedback?
Omar Mahamed
@Illmaster
Mar 16 2016 05:38
@Fenwil can i see it?
Joseph Gereghty
@joegereghty1989
Mar 16 2016 05:43
did freecodecamp go down for you guys too?
its back
Leonardo Galante
@lndgalante
Mar 16 2016 05:45
@Illmaster Yes!!
@Illmaster I will make a commit and send you the GitHub link because I don't have it yet on CodePen
Omar Mahamed
@Illmaster
Mar 16 2016 05:48
@Fenwil cool
Michael Nazari
@mikenaza
Mar 16 2016 05:51
Hey guys, my quote machine is behaving weird. Sometimes it gives a quote and sometimes it doesn't!
OneRandomJamie
@OneRandomJamie
Mar 16 2016 05:51
I am apparently stuck on the Uncomment HTML section. The only part it says I have wrong is Be sure to delete all trailing tags. Nothing looks wrong to me
Omar Mahamed
@Illmaster
Mar 16 2016 05:52
@OneRandomJamie lets see
crakapps
@crakapps
Mar 16 2016 05:52
hey I have question about background imgs and bootstrap. How can I make my background image take 100% of container and not repeat?
OneRandomJamie
@OneRandomJamie
Mar 16 2016 05:53

@Illmaster <!--Hello World-->

<h1>Hello World</h1>
<!--CatPhotoApp-->

<h2>CatPhotoApp</h2>
<!--Hello Paragraph-->

<p>Hello Paragraph</p>

Nick
@wani0402
Mar 16 2016 05:54
background-repeat: no-repeat;
crakapps
@crakapps
Mar 16 2016 05:54
@wani0402 thank you
CamperBot
@camperbot
Mar 16 2016 05:54
crakapps sends brownie points to @wani0402 :sparkles: :thumbsup: :sparkles:
:star: 106 | @wani0402 | http://www.freecodecamp.com/wani0402
Michael Nazari
@mikenaza
Mar 16 2016 05:54
js
#home {
  display: block;
  background: url(      "http://i63.tinypic.com/vqtrvp.jpg") no-repeat center center fixed;
  height: 947px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
@crakapps This is the css that made mine cover/not repeat
Jeff
@meankraken
Mar 16 2016 05:55
@OneRandomJamie Jamie, you need to delete all of the comments, so remove all of the lines that start with <!--
Omar Mahamed
@Illmaster
Mar 16 2016 05:55

@OneRandomJamie try this <!--Hello World-->

<h1>Hello World</h1>
CatPhotoApp

<h2>CatPhotoApp</h2>
Hello Paragraph

<p>Hello Paragraph</p>

Coy Sanders
@coymeetsworld
Mar 16 2016 05:55
@mikenaza think the problem is with your url
crakapps
@crakapps
Mar 16 2016 05:56
@mikenaza @mikenaza tyty
Coy Sanders
@coymeetsworld
Mar 16 2016 05:56
once the number gets too big you get a 502 error
Michael Nazari
@mikenaza
Mar 16 2016 05:56
@coymeetsworld I copied it directly from the website. I had to concatenate it and randomize the number
Coy Sanders
@coymeetsworld
Mar 16 2016 05:57
from what website?
Matt Burd
@EskimoBurd
Mar 16 2016 05:57
Michael Nazari
@mikenaza
Mar 16 2016 05:57
Okay I'll try a smaller number
Omar Mahamed
@Illmaster
Mar 16 2016 05:58

@OneRandomJamie <!--Hello World

<h1>Hello World</h1>
CatPhotoApp

<h2>CatPhotoApp</h2>
Hello Paragraph

<p>Hello Paragraph</p> -->

OneRandomJamie
@OneRandomJamie
Mar 16 2016 05:58
@Illmaster now it says they are all wrong
Coy Sanders
@coymeetsworld
Mar 16 2016 05:58
you don't need a number for that @mikenaza
its already randomized for you, you're only changing how many entries you're returning
Nick
@wani0402
Mar 16 2016 05:59
@OneRandomJamie Can you send a screengrab
Coy Sanders
@coymeetsworld
Mar 16 2016 05:59
you keep changing the posts_per_page number, but you don't want to do that, you only want 1 so that stays constant
if you look at the call, you can see it already randomizes it by randomizing the order the quotes come in, and when you specify 1 as # posts_per_page, it just shows you the first one
so yeah, you don't need the random function at all if you use this API
Omar Mahamed
@Illmaster
Mar 16 2016 06:01
This message was deleted
This message was deleted
Joseph Gereghty
@joegereghty1989
Mar 16 2016 06:02
Can someone give me a hint, i cant figure out how to replace the value of my a elements href with a # http://goo.gl/SOq9AW
lol why did that pic come up
Michael Nazari
@mikenaza
Mar 16 2016 06:03
@coymeetsworld Oh okay, but when I take it out it doesn't seem to work
DJ
@qualitymanifest
Mar 16 2016 06:03
@joegereghty1989 <a href="whatever you want"></a>...
Ahmed Eid
@eidJunior
Mar 16 2016 06:03
you want to replace the value of the attribute href ? with what ? jqurey ?
or statically replace it ?
Nick
@wani0402
Mar 16 2016 06:03
@joegereghty1989 <a href="#"
Coy Sanders
@coymeetsworld
Mar 16 2016 06:03
take out what? what i put up there is all you need in your api call
DJ
@qualitymanifest
Mar 16 2016 06:03
sounds like he wants to replace with a hash so its a dead link.
Joseph Gereghty
@joegereghty1989
Mar 16 2016 06:04
oh the =sign
thank you
Guillermo Escalente Ramirez
@memo2519
Mar 16 2016 06:05
hi, how do Turn an Image into a Link? plis
DJ
@qualitymanifest
Mar 16 2016 06:06
@memo2519 how do you create a link?
Nick
@wani0402
Mar 16 2016 06:06
@memo2519 wrap your <img> tag in <a> tags
<a href="#"><img src="#"></a>
Michael Nazari
@mikenaza
Mar 16 2016 06:06
@coymeetsworld When I take out my own randomize code. So I paste the code you put of there in place of the URL
Matt
@YoshiBlues
Mar 16 2016 06:06
Hi, how do I create a button element with a class of btn and text of "Like"?
I think this is HTML
Nick
@wani0402
Mar 16 2016 06:07
@YoshiBlues <button class="btn">Like</button>
Matt
@YoshiBlues
Mar 16 2016 06:07
Thank you @wani0402
CamperBot
@camperbot
Mar 16 2016 06:07
yoshiblues sends brownie points to @wani0402 :sparkles: :thumbsup: :sparkles:
:star: 119 | @wani0402 | http://www.freecodecamp.com/wani0402
DJ
@qualitymanifest
Mar 16 2016 06:08
@wani0402 the goal here is to help people learn, not just give them the solution
Michael Nazari
@mikenaza
Mar 16 2016 06:09
It's really weird, it gives one quote then stops after that. http://codepen.io/mikenaza/pen/MyaqKv?editors=0010
Coy Sanders
@coymeetsworld
Mar 16 2016 06:09
hmm let me look
i don't even get the one
Guillermo Escalente Ramirez
@memo2519
Mar 16 2016 06:11
@qualitymanifest Nest the existing img element within an a element. just i need know that, plis
Michael Nazari
@mikenaza
Mar 16 2016 06:11
Sometimes it does, but it's unpredictable
DJ
@qualitymanifest
Mar 16 2016 06:12
@memo2519 <nest><bird></bird></nest>. in this case the "nest" is the a element and the "bird" is the img element.
Coy Sanders
@coymeetsworld
Mar 16 2016 06:12
hasn't worked once for me
did you change anything else?
Michael Nazari
@mikenaza
Mar 16 2016 06:14
No just reverted back to the URL. This may be a weird test but click with a different source if possible(mouse/touchpad)
DJ
@qualitymanifest
Mar 16 2016 06:14
@mikenaza it works for me, the problem has to do with your json call. you have [posts_per_page]=1 which gives you one quote. if you change it to [posts_per_page]=10 it gives you 10 quotes (in which case you would have to choose from them randomly)
@mikenaza i'm not familiar with this API and i don't have the energy to read about it but you should look at the docs
Michael Nazari
@mikenaza
Mar 16 2016 06:15
@qualitymanifest Thanks I'll do that
CamperBot
@camperbot
Mar 16 2016 06:15
mikenaza sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star: 1073 | @qualitymanifest | http://www.freecodecamp.com/qualitymanifest
Coy Sanders
@coymeetsworld
Mar 16 2016 06:16
@qualitymanifest he doesn't need to do that
Guillermo Escalente Ramirez
@memo2519
Mar 16 2016 06:16
@qualitymanifest look this is my code but something is wrong <p>Click here for <a href="#"><img src="#"></a>.</p>
DJ
@qualitymanifest
Mar 16 2016 06:16
@coymeetsworld who doesnt need to do what
Coy Sanders
@coymeetsworld
Mar 16 2016 06:16
the api call randomly orders the quotes and hes returning the top 1
something is wrong with the javascript now im not sure what
click functionality seems to be right
Jeff
@meankraken
Mar 16 2016 06:18
@memo2519 you have a random period in there memo
Coy Sanders
@coymeetsworld
Mar 16 2016 06:18
but nothing is happening in the getJSON call
DJ
@qualitymanifest
Mar 16 2016 06:18
@coymeetsworld interesting. i was getting one quote before (which didnt change on subsequent clicks), now i'm getting an error. something must have changed
Coy Sanders
@coymeetsworld
Mar 16 2016 06:19
yeah hes changing it right now
i don't remember what he had before but i still dont see whats wrong w/ that code now
Michael Nazari
@mikenaza
Mar 16 2016 06:19
it should be the same now
I was just messing with the number after [posts_per_page]
Jeff
@meankraken
Mar 16 2016 06:21
@mikenaza I will say that clicking the button does give a quote, but it's the exact same quote every time by some dude named Nick longo.. if you go through the API documentation I'm sure you'll figure out why it's not returning a random one
Michael Nazari
@mikenaza
Mar 16 2016 06:22
@meankraken Yea I have I feeling its the same quote that's being returned
Coy Sanders
@coymeetsworld
Mar 16 2016 06:22
"Error: Internal Server Error"
Guillermo Escalente Ramirez
@memo2519
Mar 16 2016 06:22
@mikenaza thanks!! so how do i solve it
CamperBot
@camperbot
Mar 16 2016 06:22
memo2519 sends brownie points to @mikenaza :sparkles: :thumbsup: :sparkles:
:star: 281 | @mikenaza | http://www.freecodecamp.com/mikenaza
Coy Sanders
@coymeetsworld
Mar 16 2016 06:22
guys lol, idk what youre looking at but the api call is random
oh im an idiot
Michael Nazari
@mikenaza
Mar 16 2016 06:24
Maybe the quote it's putting the new quote into the message box with each subsequent click
Coy Sanders
@coymeetsworld
Mar 16 2016 06:24
no its the url
Michael Nazari
@mikenaza
Mar 16 2016 06:25
What's the issue with the URL?
Coy Sanders
@coymeetsworld
Mar 16 2016 06:27
thought the www was missing and that caused the issue
you still need that in there
but still not the problem
Michael Nazari
@mikenaza
Mar 16 2016 06:28
Yea
I have to head to work now :/
@coymeetsworld thanks for all your help!
CamperBot
@camperbot
Mar 16 2016 06:29
mikenaza sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 350 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Mar 16 2016 06:29
yeah sorry man not sure whats the deal
going to look at it for another min if i see something ill private chat you lol
its kind of bugging me
especially considering i just finished all the API ziplines
Michael Nazari
@mikenaza
Mar 16 2016 06:29
Cool I'll check it later
Yea I understand that aha
Have a good one!
Joseph Gereghty
@joegereghty1989
Mar 16 2016 06:30
good night everybody. thank you for the help
Ahmed Eid
@eidJunior
Mar 16 2016 06:31
Your p element should contain the first few words of the provided additional kitty ipsum text.
what does that even mean ?
anybody could help ?
Coy Sanders
@coymeetsworld
Mar 16 2016 06:33
@eidJunior put the text between <p> tags
Ahmed Eid
@eidJunior
Mar 16 2016 06:35
there are 2x <p> tags with lots of lorem cat ipsum in them
what text do I put exactly ?
Coy Sanders
@coymeetsworld
Mar 16 2016 06:36
whats the campfire you're working on?
Ahmed Eid
@eidJunior
Mar 16 2016 06:37
@coymeetsworld you there ?
Coy Sanders
@coymeetsworld
Mar 16 2016 06:38
yes, i asked what campfire you're working on? Dont have enough context to go on here @eidJunior
crakapps
@crakapps
Mar 16 2016 06:39
well, I am hitting the hay. thanks for the help goodnight
Ahmed Eid
@eidJunior
Mar 16 2016 06:40
@coymeetsworld should I provide the link ?
Coy Sanders
@coymeetsworld
Mar 16 2016 06:40
yes :)
Tmore23
@Tmore23
Mar 16 2016 06:41
@eidJunior it has to invlude the whole red text
include*
Ahmed Eid
@eidJunior
Mar 16 2016 06:43
What includes the whole red text ?
its sayingn : * Your p element should contain the first few words of the provided additional kitty ipsum text
thats the task im stuck on !
Tmore23
@Tmore23
Mar 16 2016 06:44
your second <p>
you need to add a second <p> with the whole red text
Coy Sanders
@coymeetsworld
Mar 16 2016 06:45
Create a second p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
NormalWare
@Centuriom
Mar 16 2016 06:45
can someone explain me, how slideToggle(); works ? in depth please.
Coy Sanders
@coymeetsworld
Mar 16 2016 06:45
yeah
Upendra Kumar Devisetty
@upendrak
Mar 16 2016 06:45
I'm a newbie in html and i just started my challenges and i got stuck in here - Create an a element that links to http://freecatphotoapp.com and has "cat photos" as its anchor text.
Here is my code - "cat photos" <a href="http://freecatphotoapp.com" </a>
What am i doing wrong here?
Jeff
@meankraken
Mar 16 2016 06:47
@upendrak Welcome aboard, you have to close the first tag: <a href="http://freecatphotoapp.com"> Cat Photos </a> In between the open a and closing a is the text that will be displayed to the user, which is cat photos
Ahmed Eid
@eidJunior
Mar 16 2016 06:47

@Tmore23

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

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

<p>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">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>

Upendra Kumar Devisetty
@upendrak
Mar 16 2016 06:48
Awesome @meankraken. It worked!
Kevin
@KevinBruland
Mar 16 2016 06:52
I have a quick and kind of dumb question, I am in the early phases of starting... is there a reason you assign things both a class and an id? Is it so you can change it independently easily?
Srinivasan
@kksrini89
Mar 16 2016 06:52
Did anyone use bar chart with scatter line for kendo chart...??
I'm facing issue in that..
Ahmed Eid
@eidJunior
Mar 16 2016 06:52
@Benalron yes
Coy Sanders
@coymeetsworld
Mar 16 2016 06:52
@Benalron id is used to identify one element in html, class can be used for more than one element
Srinivasan
@kksrini89
Mar 16 2016 06:52
Scatter line is not coming
Kevin
@KevinBruland
Mar 16 2016 06:53
OK, thats what I figured... but it was not super clear, and I wanted to make sure I understood correctly
thanks both of you
Coy Sanders
@coymeetsworld
Mar 16 2016 06:53
yeah, if you only specify the section once you could use a class if you wanted still too
Ahmed Eid
@eidJunior
Mar 16 2016 06:53
@coymeetsworld I'm still stuck with that silly task !!!
Coy Sanders
@coymeetsworld
Mar 16 2016 06:53
just depends on what you want
paste your code here @eidJunior ?
Ahmed Eid
@eidJunior
Mar 16 2016 06:54

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

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

<p>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">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>

Coy Sanders
@coymeetsworld
Mar 16 2016 06:54
also if you put it in between ``` tags it will make it all pretty
also makes it easier to read
so
<style>
.red-text {
color: red;
}
p{
font-size : 16px
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>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">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>
your font-size attribute
needs a semicolon at the end
Ahmed Eid
@eidJunior
Mar 16 2016 06:55

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

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

<p>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">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>
`

Coy Sanders
@coymeetsworld
Mar 16 2016 06:55
three quotes ```
Ahmed Eid
@eidJunior
Mar 16 2016 06:55

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

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

<p>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">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>
``

Coy Sanders
@coymeetsworld
Mar 16 2016 06:55
or backticks rather
anyways fix that in your css then try to submit again
Ahmed Eid
@eidJunior
Mar 16 2016 06:56
@coymeetsworld what's wrong with my css ?
Coy Sanders
@coymeetsworld
Mar 16 2016 06:57
read up
in your p selector
you don't terminate your statement inside with a semicolon
Ahmed Eid
@eidJunior
Mar 16 2016 06:57
the task i'm stuck at says : Your p element should contain the first few words of the provided additional kitty ipsum text
Coy Sanders
@coymeetsworld
Mar 16 2016 06:58
yeah and you need to copy that part exactly how they tell you
that content is wrong
"Create a second p element with the following kitty ipsum 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>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
thats what your 2nd p should be
Ahmed Eid
@eidJunior
Mar 16 2016 06:59
okay it worked ! how did you figure that out ?
Thank you
Coy Sanders
@coymeetsworld
Mar 16 2016 07:02
read the instructions :)
at least for the <p> issue
for the css issue just noticed it
Ahmed Eid
@eidJunior
Mar 16 2016 07:03
Okay thank you
Coy Sanders
@coymeetsworld
Mar 16 2016 07:03
np
StephenYangQi
@StephenYangQi
Mar 16 2016 07:09
hello everyone
Is there any people?
Coy Sanders
@coymeetsworld
Mar 16 2016 07:10
ya
vamsi1310
@vamsi1310
Mar 16 2016 07:10

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

p{
font-size:16 px;
}
</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>

<p>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>

what is wrong with this?
NormalWare
@Centuriom
Mar 16 2016 07:11
Hello guys, everytime i use slideToggle();
If the element display: inline, it will change to display:none
else if the element display:none, it will change to display:inline ?
That's how slideToggle(); works ??
Jeff
@meankraken
Mar 16 2016 07:12
@vamsi1310 if you scroll up they just talked about that one, but make sure your second <p> element has the correct text
vamsi1310
@vamsi1310
Mar 16 2016 07:12
@meankraken Cool. I will check that out!! Thank You!
CamperBot
@camperbot
Mar 16 2016 07:12
vamsi1310 sends brownie points to @meankraken :sparkles: :thumbsup: :sparkles:
:star: 293 | @meankraken | http://www.freecodecamp.com/meankraken
StephenYangQi
@StephenYangQi
Mar 16 2016 07:13
Are you all from the United States?
Jeff
@meankraken
Mar 16 2016 07:13
@Centuriom here's some documentation on slideToggle: http://www.w3schools.com/jquery/eff_slidetoggle.asp
vijay varma
@vjvarma2
Mar 16 2016 07:13
hello everyone!! i have got a doubt. plz help me
the question:

Style Text Inputs as Form Controls
You can add the fa-paper-plane Font Awesome icon by adding <i class="fa fa-paper-plane"></i> within your submit button element.

Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane.

Run tests (ctrl + enter)
Reset Help Bug
Give the submit button in your form the classes btn btn-primary.
Add a <i class="fa fa-paper-plane"></i> within your submit button element.
Give the text input in your form the class form-control.
Make sure each of your i elements has a closing tag.

"Give the text input in your form the class form-control."
i am having trouble undersanding this condition
Coy Sanders
@coymeetsworld
Mar 16 2016 07:16
code? @vjvarma2
vijay varma
@vjvarma2
Mar 16 2016 07:16
<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>
<input type="text" placeholder="cat photo URL required">
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane">Submit</i></button>
</form>
Coy Sanders
@coymeetsworld
Mar 16 2016 07:18
its a little confusing, but don't nest Submit in the <i> tags
<i class="fa fa-paper-plane"></i>Submit
vijay varma
@vjvarma2
Mar 16 2016 07:18
ok.trying
vamsi1310
@vamsi1310
Mar 16 2016 07:20

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

p{
font-size:16 px;
}
</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>

<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

I have copy pasted the second P text and I still get the error
Error says
Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.
Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:23
<label name="indoor"><input type="radio" name="indoor-outdoor"></label>
<label for="outdoor"><input type="radio" name="indoor-outdoor"></label>
vijay varma
@vjvarma2
Mar 16 2016 07:23
@coymeetsworld Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane.
Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:23
Can someone tell me what i am doing wrong
It says that the radiobutton should have the label outdoor
Tell me what i am doing wrong
Coy Sanders
@coymeetsworld
Mar 16 2016 07:24
@AlbinKarlsson99 should be label name="outdoor" no?
Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:24
Naah... Still the same error
One of your radio buttons should have the label outdoor.
Coy Sanders
@coymeetsworld
Mar 16 2016 07:25
yeah they shouldn't be the same
the name of the input type i don't think
dont think anything goes in the label tag either
@vjvarma2 when you apply a class, you don't give it a name
you specify class
Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:25
<label><input type="radio" name="indoor-outdoor"></label>
<label><input type="radio" name="indoor-outdoor"></label>
Still the same error
Coy Sanders
@coymeetsworld
Mar 16 2016 07:26
like <p class="red-text"></p>
Jeff
@meankraken
Mar 16 2016 07:26
@vamsi1310 vamsi, try 16px - no space
Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:26
I have no idea what i am doing haha
vamsi1310
@vamsi1310
Mar 16 2016 07:26
@meankraken Just figured that out...I was about to post the same..
Thank You!
Aleksander Gębicki
@Takumar
Mar 16 2016 07:27
@AlbinKarlsson99 put names Indoor and Outdoor on the radio buttons.
<label><input type="radio" name="indoor-outdoor">Indoor</label>
Coy Sanders
@coymeetsworld
Mar 16 2016 07:27
sorry @AlbinKarlsson99 try giving the label a name
<label for="outdoor"> change to <label name="outdoor">
Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:28
Still isnt working :(
Coy Sanders
@coymeetsworld
Mar 16 2016 07:30
what is the campfire?
Aleksander Gębicki
@Takumar
Mar 16 2016 07:31

@AlbinKarlsson99 I've told you add text to button:

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

and the Outdoor for the second button instead of "Indoor"

Albin Karlsson
@AlbinKarlsson99
Mar 16 2016 07:32
Yea, i fixed it now ;D
Thanks for your hel @coymeetsworld @Takumar
CamperBot
@camperbot
Mar 16 2016 07:32
albinkarlsson99 sends brownie points to @coymeetsworld and @takumar :sparkles: :thumbsup: :sparkles:
:star: 351 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
:star: 2739 | @takumar | http://www.freecodecamp.com/takumar
Aleksander Gębicki
@Takumar
Mar 16 2016 07:33
@AlbinKarlsson99 you are welcome :-)
Malin Sundin
@MaoMaolin
Mar 16 2016 07:35
Good morning :coffee:
LujunW
@LujunWeng
Mar 16 2016 07:39
:smile:
Kevin
@KevinBruland
Mar 16 2016 07:43
I have a quick kind of dumb question about colors
If using the format, rgb(X, X, X) is more characters, wouldn't it be "better" to just convert the colors into hex and always use that format?
or is there a benefit for the rgb(X, X, X) format?
Niko Salonen
@nikosalonen
Mar 16 2016 07:48
I'd say it's matter of personal taste
Kevin
@KevinBruland
Mar 16 2016 07:48
that makes sense, I was just curious, thanks
Niko Salonen
@nikosalonen
Mar 16 2016 07:48
but with rgba() you have also the alpha value to adjust opacity and that gives benefit if needed
Kevin
@KevinBruland
Mar 16 2016 07:49
ah, good to know
is it something people use interchangeably, or do people typically stick to one type?
Niko Salonen
@nikosalonen
Mar 16 2016 07:51
I think it varies. I generally use hex because it's easier to copy out from photoshop
Ngaosathe
@ThekhoN
Mar 16 2016 07:51
How to run this recursion successfully?
//global state is false
var state = false;

function checkIfStateTrue(){
    //var this_state = state;
    console.log('state is still false!');

    if(state) {
        console.log('state is now true, recursion ended!');
        return true;
    }

    else {
        checkIfStateTrue();
    }
}

function setStateTrue(){
    state = true;
    console.log('state has been set true!!!');
}

checkIfStateTrue();
setTimeout(function(){setStateTrue();}, 2500 );
what am i doing wrong here? please help
Ahmed Eid
@eidJunior
Mar 16 2016 08:01
You code is hung on the chechIfstateTrue();
it will never finish executing that function
Aleksander Gębicki
@Takumar
Mar 16 2016 08:01
@ThekhoN maybe just reverse order of lines:
setTimeout(function(){setStateTrue();}, 2500 );
checkIfStateTrue();
Ngaosathe
@ThekhoN
Mar 16 2016 08:05
@eidJunior yes i can see that but when i set the global variable 'state' to true, why isn't it getting passed on to it?
@Takumar i reversed it but no help man
donshius
@donshius
Mar 16 2016 08:09
@ThekhoN you might want a while loop inside your check function or something like that
Ahmed Eid
@eidJunior
Mar 16 2016 08:11
do you mean the var " state " in the beginning of the code ?
Maddy
@maddymaster
Mar 16 2016 08:12

Hi Guys I get this error when I try to do a 'npm publish ' ''maddymaster:~/workspace/myproject $ npm publish
npm ERR! Linux 4.2.0-c9
npm ERR! argv "/home/ubuntu/.nvm/versions/node/v4.3.2/bin/node" "/home/ubuntu/.nvm/versions/node/v4.3.2/bin/npm" "publish"
npm ERR! node v4.3.2
npm ERR! npm v3.8.1
npm ERR! code ENEEDAUTH

npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using npm adduser

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/workspace/myproject/npm-debug.log''

Ahmed Eid
@eidJunior
Mar 16 2016 08:13
If you mean the variable " state " at the beginning of the code : then it terminates just fine
if you mean setStateTrue() function : it will never get to that function
Maddy
@maddymaster
Mar 16 2016 08:13

Hi Guys I get this error when I try to do a 'npm publish ' 'maddymaster:~/workspace/myproject $ npm publish
npm ERR! Linux 4.2.0-c9
npm ERR! argv "/home/ubuntu/.nvm/versions/node/v4.3.2/bin/node" "/home/ubuntu/.nvm/versions/node/v4.3.2/bin/npm" "publish"
npm ERR! node v4.3.2
npm ERR! npm v3.8.1
npm ERR! code ENEEDAUTH

npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using npm adduser

'npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/workspace/myproject/npm-debug.log' '

Ahmed Eid
@eidJunior
Mar 16 2016 08:13
@maddymaster try to google it
Maddy
@maddymaster
Mar 16 2016 08:14
@eidJunior tried many things from google, no go.
Ngaosathe
@ThekhoN
Mar 16 2016 08:14
@donshius ok i'll try
@eidJunior what if i change the order in which the functions run?
setTimeout(function(){setStateTrue();}, 1000 );
checkIfStateTrue();
Ahmed Eid
@eidJunior
Mar 16 2016 08:17
@ThekhoN No I don't think that would help either
AliciadW
@AliciadW
Mar 16 2016 08:17
help search and replace
CamperBot
@camperbot
Mar 16 2016 08:17

:point_right: algorithm search and replace [wiki]

Problem Explanation:

  • You will create a program that takes a sentence, then search for a word in it and replaces it for a new one while preserving the uppercase if there is one.
:pencil: read more about algorithm search and replace on the FCC Wiki
Ahmed Eid
@eidJunior
Mar 16 2016 08:18
@maddymaster I don't really know make sure all you dependencies are installed !
Niko Salonen
@nikosalonen
Mar 16 2016 08:21
@maddymaster the error message tells you what is wrong npm ERR! need auth You need to authorize this machine using npm adduser
justoy
@wordhardqi
Mar 16 2016 08:27
how to skip the easy challenge
Niko Salonen
@nikosalonen
Mar 16 2016 08:31
@wordhardqi click map link and choose next but notice if the challenge has * it's mandatory
justoy
@wordhardqi
Mar 16 2016 08:34
@nikosalonen Great! Thanks
CamperBot
@camperbot
Mar 16 2016 08:34
wordhardqi sends brownie points to @nikosalonen :sparkles: :thumbsup: :sparkles:
:star: 345 | @nikosalonen | http://www.freecodecamp.com/nikosalonen
genuinegirl
@genuinegirl
Mar 16 2016 08:55
i need help with challenge 75
@nikosalonen i need help with challenge 75
Robert Uivarosi
@URobert
Mar 16 2016 09:04
@genuinegirl which one is challenge 75 ? Post the link of your exercise and I will take a lok
look*
genuinegirl
@genuinegirl
Mar 16 2016 09:05
Make Images Mobile Responsive challenge
@
@URobert
Robert Uivarosi
@URobert
Mar 16 2016 09:05
@genuinegirl link it
@genuinegirl so I can see what you have done, and what is the problem\
Robert Uivarosi
@URobert
Mar 16 2016 09:08
@genuinegirl where have you added the second image?
genuinegirl
@genuinegirl
Mar 16 2016 09:09
i didnt ,i tried to add img in element a but hasnot succeeded\
@URobert
Robert Uivarosi
@URobert
Mar 16 2016 09:10
Look below
  <a href="#"><img class="smaller-image thick-green-border" src="http://bit.ly/fcc-relaxing-cat"></a>
that is line 33
you need to add another line of code like that under it
but
your img class and src will be different
as specified in the requirements
so on your new line
img class will be "img-responsive"
and only that
your src link will be the one from the instructions
syntax remains the same
give it a try, and let me know how it goes @genuinegirl
genuinegirl
@genuinegirl
Mar 16 2016 09:17
<a href="#"><img-responsive class="smaller-image thick-green-border" src="http://bit.ly/fcc-running-cats"></a> this is what i did nad i am getting wrong why @URobert
AliciadW
@AliciadW
Mar 16 2016 09:17
help pig latin
CamperBot
@camperbot
Mar 16 2016 09:17

:point_right: algorithm pig latin [wiki]

Problem Explanation:

  • You need to create a program that will translate from English to Pig Latin. Check the instructions for converting to Pig Latin from the initial description or the wiki page. It might not be obvious but you need to remove all the consonants up to the first vowel in the case there letter does not start with a vowel.
:pencil: read more about algorithm pig latin on the FCC Wiki
Robert Uivarosi
@URobert
Mar 16 2016 09:17
@URobert look at my highlighted line
@genuinegirl you set img-responsive before class, but you need to replace the classes from the example with img-responsive
@genuinegirl just swap "smaller-image thick-green-border" with "img-responsive"
@genuinegirl you must have img class="..."
genuinegirl
@genuinegirl
Mar 16 2016 09:21
thanks @URobert
CamperBot
@camperbot
Mar 16 2016 09:21
genuinegirl sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 699 | @urobert | http://www.freecodecamp.com/urobert
Robert Uivarosi
@URobert
Mar 16 2016 09:22
@genuinegirl yw
Aleksander Gębicki
@Takumar
Mar 16 2016 09:22
@ThekhoN your recursion function will never stop because it keeps JS busy all the time and your setTimeout() method will never run setStateTrue() function.
Please read this:
Calling setTimeout will add a message to the queue after the time passed as second argument. If there is no other message in the queue, the message is processed right away; however, if there are messages, the setTimeout message will have to wait for other messages to be processed. For that reason the second argument indicates a minimum time and not a guaranteed time.
It is from this link
Richard
@richao03
Mar 16 2016 09:24
hello
i am trying to get my navbar to stick to the top of the page, but i've tried everything i can think of... can some one help take a look at my coe?
code?*
Ngaosathe
@ThekhoN
Mar 16 2016 09:37
@Takumar thanks..I am still trying to get the recursion running.
CamperBot
@camperbot
Mar 16 2016 09:37
thekhon sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
:star: 2746 | @takumar | http://www.freecodecamp.com/takumar
utxnarendra
@utxnarendra
Mar 16 2016 09:53
Hi richao03
Alin Cheie
@Cheie1990
Mar 16 2016 09:56
Hi guys, I just started this amazing Web Developing journey and i would need help please. Need to comment out the 'h1' and 'p' elements but i did not manage.
<!--h1,p--> IS THIS CORRECT?
Rachel
@totallyrhombus
Mar 16 2016 10:00
You just need to add <!-- before the code you had originally, and then --> at the end. You do not delete anything

it should look like:

<!--
<h1>Hello World</h1>
-->
<h2>CatPhotoApp</h2>
<!--
<p>Hello Paragraph</p>
-->

Do you see how the <!-- and --> is around what you want to comment out?

@Cheie1990
Rain NG
@igigi
Mar 16 2016 10:02
click run tests success, no next, don't retry
utxnarendra
@utxnarendra
Mar 16 2016 10:02
Try to add CSS like position : fixed; width:100%; to your navbar
Alin Cheie
@Cheie1990
Mar 16 2016 10:04
Thanks Rachel:) I managed!
Saurabh
@SaurabhNitnaware333
Mar 16 2016 10:23
Hi guys need help... how to nest <a> tag within <p> tag
Alin Cheie
@Cheie1990
Mar 16 2016 10:23
Another thing totallyrhombus
<h2 style="color:red">CatPhotoApp</h2>
cannelflow
@cannelflow
Mar 16 2016 10:24
@SaurabhNitnaware333 <p><a></a></p>
Alin Cheie
@Cheie1990
Mar 16 2016 10:24
need to change color of h2 element but when changing it and clicking run is not working
is it correct the above formula?
cannelflow
@cannelflow
Mar 16 2016 10:25
@Cheie1990 show your code
which exercise?
@SaurabhNitnaware333 ?
Saurabh
@SaurabhNitnaware333
Mar 16 2016 10:27
@cannelflow thanks !
CamperBot
@camperbot
Mar 16 2016 10:27
saurabhnitnaware333 sends brownie points to @cannelflow :sparkles: :thumbsup: :sparkles:
:star: 931 | @cannelflow | http://www.freecodecamp.com/cannelflow
Alin Cheie
@Cheie1990
Mar 16 2016 10:29
issue.png
@cannelflow attached
cannelflow
@cannelflow
Mar 16 2016 10:31
@Cheie1990 remove the extra h2
tag
Alin Cheie
@Cheie1990
Mar 16 2016 10:31
done
Thanks:)
cannelflow
@cannelflow
Mar 16 2016 10:31
@userName thanks @Cheie1990
CamperBot
@camperbot
Mar 16 2016 10:31
cannelflow sends brownie points to @username and @cheie1990 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for cheie1990
:warning: could not find receiver for username
Alin Cheie
@Cheie1990
Mar 16 2016 10:41
issue.png
any help here pls
Alexander Køpke
@alexanderkopke
Mar 16 2016 10:44
This message was deleted
Pradnya Joshi
@pradxj07
Mar 16 2016 10:46

@Cheie1990 , did you delete the line with

<h2></h2>?

You need to delete the styling of h2 (inside <style> tag)
Alexander Køpke
@alexanderkopke
Mar 16 2016 10:48
<style>
  h2{
    color:blue;
  }
</style>

<h2>CatPhotoApp</h2>

<p>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>
Alin Cheie
@Cheie1990
Mar 16 2016 10:48
Thanks @alexanderkopke and @pradxj07 !
CamperBot
@camperbot
Mar 16 2016 10:48
cheie1990 sends brownie points to @alexanderkopke and @pradxj07 :sparkles: :thumbsup: :sparkles:
:star: 514 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
:star: 77 | @pradxj07 | http://www.freecodecamp.com/pradxj07
Pradnya Joshi
@pradxj07
Mar 16 2016 10:49
@Cheie1990, you are welcome!
Francis Asare
@fasare
Mar 16 2016 10:56
any help here?
David da Silva
@dasilvacontin
Mar 16 2016 10:56
Shoot! :)
Francis Asare
@fasare
Mar 16 2016 10:58
stuck
Vitaliy
@VforVitaliy
Mar 16 2016 10:58
Hello everybody! I just started the course and I found the idea of FreeCodeCamp really great!
Francis Asare
@fasare
Mar 16 2016 10:58
having problem changing font size
David da Silva
@dasilvacontin
Mar 16 2016 11:00

@fasare:

  <p> font-size: 16px
  </p>
  }

should be

p {
  font-size: 16px;
}
Francis Asare
@fasare
Mar 16 2016 11:01
great
David da Silva
@dasilvacontin
Mar 16 2016 11:01
Syntax is:
<css-selector> {
  <css-rules>
}
Francis Asare
@fasare
Mar 16 2016 11:01
let me try it
Saurabh
@SaurabhNitnaware333
Mar 16 2016 11:01
Hi guys... how to make a text field required in html form
Mudit Bhutani
@muditbhutani
Mar 16 2016 11:02
whats the mistake
blob
Albert Marius Lazar
@albert-marius
Mar 16 2016 11:03
@SaurabhNitnaware333 add required
David da Silva
@dasilvacontin
Mar 16 2016 11:03
@muditbhutani obj[firstName]vs (obj['firstName'] or obj.firstName)
Francis Asare
@fasare
Mar 16 2016 11:04
@dasilvacontin still cant run!!
David da Silva
@dasilvacontin
Mar 16 2016 11:04
In the first one you are using the value stored in the variable firstName as the key for the property you are trying to access
Saurabh
@SaurabhNitnaware333
Mar 16 2016 11:05
@albert-marius thanks!
CamperBot
@camperbot
Mar 16 2016 11:05
saurabhnitnaware333 sends brownie points to @albert-marius :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for albert-marius
David da Silva
@dasilvacontin
Mar 16 2016 11:06
Share again @fasare. Tests passed with the change I suggested :/
David da Silva
@dasilvacontin
Mar 16 2016 11:07
@fasare Check your font-size rule.
Francis Asare
@fasare
Mar 16 2016 11:07
okay
David da Silva
@dasilvacontin
Mar 16 2016 11:08
@fasare also, the rule delimitator for .red-text is open {, but not closed }.
Mudit Bhutani
@muditbhutani
Mar 16 2016 11:08
@dasilvacontin still not able to get it
Francis Asare
@fasare
Mar 16 2016 11:08
great!
got it
thank you.
David da Silva
@dasilvacontin
Mar 16 2016 11:09
@fasare congrats :)
David da Silva
@dasilvacontin
Mar 16 2016 11:11
@muditbhutani I suggest cleaning up your code (refactoring it) by doing var person = contacts[i] first thing inside the loop
person will then hold a reference to the object at contacts[i]
Mudit Bhutani
@muditbhutani
Mar 16 2016 11:13
@dasilvacontin thanks
CamperBot
@camperbot
Mar 16 2016 11:13
muditbhutani sends brownie points to @dasilvacontin :sparkles: :thumbsup: :sparkles:
:star: 7 | @dasilvacontin | http://www.freecodecamp.com/dasilvacontin
David da Silva
@dasilvacontin
Mar 16 2016 11:15
@muditbhutani No problem. Code is easier to understand when it's clean and simple. And therefore it's easier to tell where the error is.
Mudit Bhutani
@muditbhutani
Mar 16 2016 11:17
:)
Alexander Køpke
@alexanderkopke
Mar 16 2016 11:17
@Michaeldoa add the class to your image like this <img class="smaller-image"
@Michaeldoa and in the css section classes are selected with dots: .smaller-image{width:100px;}
problem with inserting an image
help!!
CamperBot
@camperbot
Mar 16 2016 11:22

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

Basic Commands:

  • find TOPIC find all entries about topic. ex: 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

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

Chethan Ashwatha Reddy
@ChethanAshwathaReddy
Mar 16 2016 11:24
Need help with challenge 151 - Target the same element with multiple jQuery Selectors
How do I code for the test case:
Only add one class with each of your three selectors.
Your #target1 element should have the classes animated‚ shake and btn-primary.
Only use jQuery to add these classes to the element.

script code is as below:

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

Alexander Køpke
@alexanderkopke
Mar 16 2016 11:27
@ChethanAshwathaReddy the third one has addclass.. should be addClass <-- notice big C
Brendan Kinahan
@BKinahan
Mar 16 2016 11:28
@ChethanAshwathaReddy Also you should only add one class with each of your three selectors. Your third selector adds three classes.
Chethan Ashwatha Reddy
@ChethanAshwathaReddy
Mar 16 2016 11:30
I agree alex.. I have corrected..
Surbhi Oberoi
@surbhioberoi
Mar 16 2016 11:31
i need help with the wikipedia viewer app..
Chethan Ashwatha Reddy
@ChethanAshwathaReddy
Mar 16 2016 11:31
Now,
Your #target1 element should have the classes animated‚ shake and btn-primary. --> Goes green/success
Only use jQuery to add these classes to the element. -> Goes green/success
Only add one class with each of your three selectors. --> goes red/Fails
LujunW
@LujunWeng
Mar 16 2016 11:33
@fasare Your <img> tag is enclosed by <style>. That's the problem, I think.
Chethan Ashwatha Reddy
@ChethanAshwathaReddy
Mar 16 2016 11:33

Now I changed the code to,

<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("animated");
$("#target1").addClass("animated");
});
</script>

updated,
<button class="animated shake btn-primary" id="target1">#target1</button>
Francis Asare
@fasare
Mar 16 2016 11:33
@LujunWeng thanks Got it.
CamperBot
@camperbot
Mar 16 2016 11:33
fasare sends brownie points to @lujunweng :sparkles: :thumbsup: :sparkles:
:star: 308 | @lujunweng | http://www.freecodecamp.com/lujunweng
Chethan Ashwatha Reddy
@ChethanAshwathaReddy
Mar 16 2016 11:34
Only use jQuery to add these classes to the element. --> Goes red/fails.. :(
David Young
@dayvidwhy
Mar 16 2016 11:35
which classes
Rob raig
@rdcraigII
Mar 16 2016 11:38
```

function golfScore(par, strokes) {
// Only change code below this line
if (strokes == 1){
return "Hole-in-one!";
}
else if (strokes <- par-1) {
return "Eagle";
}
else if (strokes == par) {
return "Par";
}
else if (strokes == par + 1) {
return "Bogey";
}
else if (strokes == par + 2) {
return "Double Bogey";
}
else if (strokes <= 'par + 3') {
return "Go Home";
}
return "3";
// Only change code above this line
}

// Change these values to test
golfScore(4, 2);

function golfScore(par, strokes) {
  // Only change code below this line
   if (strokes == 1){
     return "Hole-in-one!";
   }
  else if (strokes <- par-1) {
    return "Eagle";
  }
  else if (strokes == par) {
    return "Par";
  }
  else if (strokes == par + 1) {
    return "Bogey";
  }
  else if (strokes == par + 2) {
    return "Double Bogey";
  }
  else if (strokes <= 'par + 3') {
    return "Go Home";
  }
  return "3";
  // Only change code above this line
}

// Change these values to test
golfScore(4, 2);
the else if statement is failing
LujunW
@LujunWeng
Mar 16 2016 11:38
@ChethanAshwathaReddy I think animated is added too many times
Francis Asare
@fasare
Mar 16 2016 11:39

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

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

.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>

problem with width adjustment.
LujunW
@LujunWeng
Mar 16 2016 11:41
@ChethanAshwathaReddy animated to all button tags, shake to all .btn classes and btn-primary to #target
Chethan Ashwatha Reddy
@ChethanAshwathaReddy
Mar 16 2016 11:41
<script>
$(document).ready(function() {
$("button").addClass("btn-primary");
$(".btn").addClass("shake");
$("#target1").addClass("animated");
});
</script>
this code worked..: :+1:
thank you @LujunWeng
CamperBot
@camperbot
Mar 16 2016 11:42
chethanashwathareddy sends brownie points to @lujunweng :sparkles: :thumbsup: :sparkles:
:star: 309 | @lujunweng | http://www.freecodecamp.com/lujunweng
Michael Kelly
@Keydose
Mar 16 2016 11:45
@rdcraigII strokes <- par-1 should be strokes <= par-1
LujunW
@LujunWeng
Mar 16 2016 11:45
@ChethanAshwathaReddy it will pass all testcases. But I think there is a minor problem in your code.
@fasare basically, .smaller-image cannot be found.
Francis Asare
@fasare
Mar 16 2016 11:47
what do i need to fix @LujunWeng
Michael Kelly
@Keydose
Mar 16 2016 11:48
@fasare <img src="https://bit.ly/fcc-relaxing-cat"> should be <img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat">
LujunW
@LujunWeng
Mar 16 2016 11:48
@Keydose +1
Neil Clyde
@RenamonDude14
Mar 16 2016 11:53

Can some one help me please? I just started today and I need help with this line of code:<style>
h2 {color:red;}
</style>

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

<p>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>

Neil Clyde
@RenamonDude14
Mar 16 2016 11:55
But how do you create a stylesheet though?
Francis Asare
@fasare
Mar 16 2016 11:56
@RenamonDude14 red text should be in qoutation "red-text"
Michael Kelly
@Keydose
Mar 16 2016 11:56
@RenamonDude14 Just a file with the extension .css with the same code that you'd put inside <style> tags
<style>
  .red-text {text-color:red;}
</style>

<h2 class="red-text">CatPhotoApp</h2>
@RenamonDude14
aneesh987
@aneesh987
Mar 16 2016 11:58
can somebody help me with this challenge?
http://www.freecodecamp.com/challenges/create-a-bootstrap-button#?solution=%3Clink%20href%3D%22http%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%22http%3A%2F%2Fbit.ly%2Ffcc-running-cats%22%20class%3D%22img-responsive%22%3E%0A%20%20%3Clabel%3E%3Cinput%20type%3D%22button%22%20name%3D%20%22button%22%20class%22btn%22%3Elike%3C%2Flabel%3E%0A%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
Age
@Shirmardi
Mar 16 2016 11:58
I know this is really messy code, but at least it works (sort of) can someone tell my why when you tweet the quote, the author becomes "undefined" x2? http://codepen.io/Shirmardi/pen/MyeJJx
also, can someone also tell me how I can take away the blue text from a href link?
aneesh987
@aneesh987
Mar 16 2016 11:59
and how to we put a picture of our code?
like @Keydose did
Michael Kelly
@Keydose
Mar 16 2016 11:59
explain format
CamperBot
@camperbot
Mar 16 2016 11:59

: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 the code.

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

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

Michael Kelly
@Keydose
Mar 16 2016 12:00
@aneesh987 Right under where it says 'Multi line code'
aneesh987
@aneesh987
Mar 16 2016 12:00
thanks @Keydose
CamperBot
@camperbot
Mar 16 2016 12:00
aneesh987 sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 125 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 12:00
@aneesh987 You're welcome :)
Aleksander Gębicki
@Takumar
Mar 16 2016 12:01
@ThekhoN please write a note if you manage to solve this problem.
Neil Clyde
@RenamonDude14
Mar 16 2016 12:01
Okay, So I tried to try it again, and I have a question, before the .red-text, Do I need to add a h2 opening tag?
Aleksander Gębicki
@Takumar
Mar 16 2016 12:02
@RenamonDude14 h2 {} is element selector, you select all headings <h2> with that type.
The other way to change look of heading is using class: <h2 class="red-text"> in this way you change only this one headings look. So you use class selector: .red-text {} for that (remember about dot before name of class!)
LujunW
@LujunWeng
Mar 16 2016 12:02
@Shirmardi I was doing this project too. I don't know much about twitter. But as for the second problem, I think you could do this through color attribute
Neil Clyde
@RenamonDude14
Mar 16 2016 12:03
oh, ok then
Mike Ekkel
@Murkrage
Mar 16 2016 12:04
function lookUp(firstName, prop){
// Only change code below this line
  for (var i = 0; i < contacts.length; i++) {
    // If firstName is an actual contact and the given property is there, return value
    if (contacts[i].firstName === firstName && undefined !== contacts[i][prop]) {     
      console.log(contacts[i][prop]);
    } 
    // If firstName is not a contact, return string
      else if (contacts[i].firstName !== firstName){
      console.log("No such contact");
    } 
    // If there is property to that contact, return string
      else if (contacts[i][prop] === undefined) {
      console.log("No such property");
    }
  }
// Only change code above this line
}
Okay so… I’ve got it working. Well, in theory. Using console.log it prints out exactly what I need it to print out. However, when I start returning the statements it just doensn’t return the very first one (so the properties aren’t returned). Can anyone help?
Age
@Shirmardi
Mar 16 2016 12:04
@LujunWeng thanks, I solved the twitter issue I was having just now, I just deleted line 51 53 and 56. Also, color property doesn't work :(
color: black; does nothing in the css
Aleksander Gębicki
@Takumar
Mar 16 2016 12:05
@Murkrage you cannot say that there is "No such contact" before you check all records in your array, that means you should return such message after your loop!!!
LujunW
@LujunWeng
Mar 16 2016 12:08
@Shirmardi a { color: black } this works for me
Aleksander Gębicki
@Takumar
Mar 16 2016 12:08
@Murkrage correct only this one thing and you should pass all tests.
Michaeldoa
@Michaeldoa
Mar 16 2016 12:08

<link href="http://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;
}

<img class:"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>

Age
@Shirmardi
Mar 16 2016 12:08
@LujunWeng ahh sorry, I was trying to style the tweetBtn ID
David Young
@dayvidwhy
Mar 16 2016 12:09
@Michaeldoa having trouble?
Age
@Shirmardi
Mar 16 2016 12:09
didn't think to style the anchor itself. Thanks @LujunWeng
CamperBot
@camperbot
Mar 16 2016 12:09
shirmardi sends brownie points to @lujunweng :sparkles: :thumbsup: :sparkles:
:star: 310 | @lujunweng | http://www.freecodecamp.com/lujunweng
Michael Kelly
@Keydose
Mar 16 2016 12:09
@Michaeldoa <img class... should not be within <style> </style>
@Michaeldoa Replace that with this:
LujunW
@LujunWeng
Mar 16 2016 12:10
@Shirmardi if you apply color attribute to button, I think it will be overwritten by a's color attribute.
Michael Kelly
@Keydose
Mar 16 2016 12:10
.smaller-image {
  width: 100px;
}
And then add class="smaller-image" to your image of the relaxing cat
Age
@Shirmardi
Mar 16 2016 12:11
@LujunWeng have you completed your one? I was taking a look on your profile and don't see it up.
LujunW
@LujunWeng
Mar 16 2016 12:13
@Shirmardi no. tweet button hasn't been added.
TDog-Masen
@TDog-Masen
Mar 16 2016 12:13
Replace the value of your a element's href attribute with a #, also known as a hash symbol, to turn it into a dead link.
i don't get the question
what should i do with #?
Michael Kelly
@Keydose
Mar 16 2016 12:13
@TDog-Masen <a href="#">
TDog-Masen
@TDog-Masen
Mar 16 2016 12:13
in <style>?
btw thanks for the fast answer
Michael Kelly
@Keydose
Mar 16 2016 12:13
@TDog-Masen No, the anchor tag ;P
TDog-Masen
@TDog-Masen
Mar 16 2016 12:14
Thanks @Keydose
CamperBot
@camperbot
Mar 16 2016 12:14
tdog-masen sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 132 | @keydose | http://www.freecodecamp.com/keydose
Michael Kelly
@Keydose
Mar 16 2016 12:14
@TDog-Masen no problem
Neil Clyde
@RenamonDude14
Mar 16 2016 12:16
Ok, I figured it out and got it! Thanks for all the wonderful help! :smile:
Mike Ekkel
@Murkrage
Mar 16 2016 12:18
Thanks @Takumar . I got it working now. I’ve taken the “No such contact” statement out of the loop, so it iterates through the entire loop and then if no matches are found it returns that. Not sure if I can make it any better, but it’s working. Maybe you can check if it can be better?
CamperBot
@camperbot
Mar 16 2016 12:18
murkrage sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
:star: 2749 | @takumar | http://www.freecodecamp.com/takumar
Mike Ekkel
@Murkrage
Mar 16 2016 12:19
function lookUp(firstName, prop){
// Only change code below this line
  for (var i = 0; i < contacts.length; i++) {
    // If firstName is an actual contact and the given property is there, return value
    if (contacts[i].firstName === firstName && undefined !== contacts[i][prop]) {     
      return contacts[i][prop];
    } 
    // If there is property to that contact, return string
      else if (contacts[i].firstName === firstName && contacts[i][prop] === undefined) {
      return "No such property";
    }
  }

  if (i === contacts.length) {
      return "No such contact";
    }
// Only change code above this line
}
Rob raig
@rdcraigII
Mar 16 2016 12:24
function myTest(val) {
  var answer = "";
  // Only change code below this line
  switch (val) {
    case alphpa

      break;
    case beta:

    case gamma:

      break;
    case delta:

      break;
  }


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

// Change this value to test
myTest(1);
Aleksander Gębicki
@Takumar
Mar 16 2016 12:25
@Murkrage notice that you check twice if contacts[i].firstName === firstName that is waste of time, you can nest your conditions:
if (contacts[i].firstName === firstName) {
  if (contacts[i][prop] === undefined) {}
  else {  }
}
Rob raig
@rdcraigII
Mar 16 2016 12:25
the obective is test value(val) for answers alpha, beta gamma, delta.
aneesh987
@aneesh987
Mar 16 2016 12:25

<link href="http://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>

<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>

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

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

<img src="http://bit.ly/fcc-running-cats" class="img-responsive">
<label><input type="button" name= "button" class"btn">like</label>

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

Rob raig
@rdcraigII
Mar 16 2016 12:27
@aneesh987 use 3 ``` next to the number 1 on your keyboard then paste your code and hit ctrl+enter to send it so it shoulds up like a block like @Takumar 's or mine
Michael Kelly
@Keydose
Mar 16 2016 12:27
@aneesh987
explain format
CamperBot
@camperbot
Mar 16 2016 12:27

: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 the code.

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

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

Rob raig
@rdcraigII
Mar 16 2016 12:28
@camperbot thanks
CamperBot
@camperbot
Mar 16 2016 12:28
rdcraigii sends brownie points to @camperbot :sparkles: :thumbsup: :sparkles:
:star: 1368 | @camperbot | http://www.freecodecamp.com/camperbot
Pistacue
@Pistacue
Mar 16 2016 12:29

Hey all! I am working on Convert HTML Entities and I ran into problem with array ("<>")
The problem is, that my for loop doens't work with the second symbol.

function convert(str){
   var re1 = /[^A-Z^a-z^\s]/g;
   var A = [];
   str = str.split("");
    for(i=0;i<str.length;i++){      
      if(re1.test(str[i])){
        var b = str[i].charCodeAt();
          A.push(b);        
      }
    }  
}
.
.
.

When i return A, I get only 1 value of the first symbol.
I got this problem only when the symbols are next to each other, for example if I run convert('Stuff in "quotation marks"') and return A I get 2 values, where is problem? (I hope i formated it well)

acr187
@acr187
Mar 16 2016 12:30
Would you say it's important to memorize the code your learning? or is knowing it exists and Googling it enough?
Michael Kelly
@Keydose
Mar 16 2016 12:30
@acr187 Understanding how it works is the real important part
@acr187 If you ever forget something, if you understand how it works and what it is, you'll find it immediately with a Google search
@acr187 Then within seconds you'll be like "Ahh! I remember now, cool."
Rob raig
@rdcraigII
Mar 16 2016 12:30
I dont get nor understand this challenge at all
function myTest(val) {
  var answer = "1";
  // Only change code below this line
  switch (val) {
    case alphpa
      var answer = 1;
      break;
    case beta:
     var answer = 2;
      break;
    case gamma:
      var answer =3;
      break;
    case delta:
      var answer=4;
      break;
  }


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

// Change this value to test
myTest(1);
Write a switch statement which tests val and sets answer for the following conditions:
1 - "alpha"
2 - "beta"
3 - "gamma"
4 - "delta"
Michael Kelly
@Keydose
Mar 16 2016 12:31
@rdcraigII Typo: alphpa should be alpha ;P
Wait, ah, I see
Ontop of that, val is the number and answer is the string
Rob raig
@rdcraigII
Mar 16 2016 12:32
yup
Michael Kelly
@Keydose
Mar 16 2016 12:32
So that's just the wrong way round
Mike Ekkel
@Murkrage
Mar 16 2016 12:32
Shouldn’t the entry be a string?
So case “alpha"
?
acr187
@acr187
Mar 16 2016 12:32
@Keydose I thought so. I don't want to spend so much time going over everything.
thanks @Keydose
CamperBot
@camperbot
Mar 16 2016 12:33
acr187 sends brownie points to @keydose :sparkles: :thumbsup: :sparkles:
:star: 142 | @keydose | http://www.freecodecamp.com/keydose
Mike Ekkel
@Murkrage
Mar 16 2016 12:33
@acr187 I can recommend doing it though. Even if it’s just 10 - 15 minutes a day. Understanding is better than just knowing. You can use the same principles for different languages
Michael Kelly
@Keydose
Mar 16 2016 12:33
function myTest(val) {
  var answer = "";
  // Only change code below this line
  switch (val) {
    case 1:
      var answer = "alpha";
      break;
    case 2:
     var answer = "beta";
      break;
    case 3:
      var answer = "gamma";
      break;
    case 4:
      var answer = "delta";
      break;
  }


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

// Change this value to test
myTest(1);
@rdcraigII
Mike Ekkel
@Murkrage
Mar 16 2016 12:34
@Takumar Yes :), thank you
CamperBot
@camperbot
Mar 16 2016 12:34
murkrage sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
:warning: murkrage already gave takumar points
Rob raig
@rdcraigII
Mar 16 2016 12:34
function myTest(val) {
  var answer = "1";
  // Only change code below this line
  switch (val) {
    case "alpha"
      answer = 1;
      break;
    case "beta"
     answer = 2;
      break;
    case "gamma"
      answer =3;
      break;
    case "delta"
      answer=4;
      break;
  }


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

// Change this value to test
myTest(1);
acr187
@acr187
Mar 16 2016 12:34
@Murkrage True, I learned some php last year and some of it is relevant to javascript
Michael Kelly
@Keydose
Mar 16 2016 12:34
@rdcraigII val is being passed in as a number, so use the code that I provided :)
Michaeldoa
@Michaeldoa
Mar 16 2016 12:34

<link href="http://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">

<img class="thick-green-border">

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

Rob raig
@rdcraigII
Mar 16 2016 12:35
I am learning too many forms o programming for a traditional hardware/OS guy
I am trying to use freecodecamp for various languages, have a PHP/MySQL book
oh i see
Ryan Beckett
@RyanBeckett
Mar 16 2016 12:37
Anyway I can kinda skip the beginner stuff? CS Student just looking to work on open source software :smile:
Michael Kelly
@Keydose
Mar 16 2016 12:37
@RyanBeckett If you click the map button you can choose what you want to do
Mike Ekkel
@Murkrage
Mar 16 2016 12:37
@RyanBeckett That’s the way it works :), you choose what you want to do
Michael Kelly
@Keydose
Mar 16 2016 12:37
@RyanBeckett However I don't believe you can receive certification if you don't complete everything within it
acr187
@acr187
Mar 16 2016 12:38
@RyanBeckett You need all the certificates to do the non-profit projects
Mike Ekkel
@Murkrage
Mar 16 2016 12:38
@Keydose You can get a certification if you finish all challenges that have an asterisk (*)
aneesh987
@aneesh987
Mar 16 2016 12:39
<link href="http://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>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

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

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

  <img src="http://bit.ly/fcc-running-cats" class="img-responsive">
  <label><input type="button" name= "button" class"btn">like</label>

  <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>
  <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>
Michael Kelly
@Keydose
Mar 16 2016 12:40
@Murkrage Ah, thanks
CamperBot
@camperbot
Mar 16 2016 12:40
keydose sends brownie points to @murkrage :sparkles: :thumbsup: :sparkles:
:star: 229 | @murkrage | http://www.freecodecamp.com/murkrage
aneesh987
@aneesh987
Mar 16 2016 12:40
can anybody tell me how do i correct my error of creating a bootstrap button
Michael Kelly
@Keydose
Mar 16 2016 12:40
@aneesh987 A bootstrap button needs class="btn"
@aneesh987 Ah, I see where you mean now
aneesh987
@aneesh987
Mar 16 2016 12:42
so like i proceed normally like we do for checkboxes and radio buttons? @Keydose
Aleksander Gębicki
@Takumar
Mar 16 2016 12:42
@aneesh987 class="btn">Like...
You have forgotten equals character.
Michael Nazari
@mikenaza
Mar 16 2016 12:43
Can someone take a look at my JS code for the QuoteMachine? It seems to be calling only one quote
aneesh987
@aneesh987
Mar 16 2016 12:43
<link href="http://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>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

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

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

  <img src="http://bit.ly/fcc-running-cats" class="img-responsive">
  <label><input type="button" name= "button" class"btn">like</label>

  <p>Things cats love:</p