These are chat archives for FreeCodeCamp/Help

15th
Mar 2016
gasmyr
@syntrydy
Mar 15 2016 00:00
i am new here
Andrew Idi
@LordAetherKTA
Mar 15 2016 00:00
@EtherWolf Will do!
Joe Ipmat
@joeIpmat
Mar 15 2016 00:03
Hi, I'm new to this web dev thing, how can you change a color for just one word in a sentence with bootstrap? For example, I want to colour 'Joe' to red in 'I am Joe'. Any help would be appreciated
Jared Pranke
@EtherWolf
Mar 15 2016 00:05
<style>
h1 {
color: red;
}
</style>

<h1> Sup!? I am joe</h1>
Bootstrap is a combination of a long css file with some jQuery/js dependencies
Willys McCaughan
@addictedotaku
Mar 15 2016 00:07

<h1> Hello World </h1>

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

</style>

need help with this
lesson 53
@EtherWolf
missing these 2 prerequisites
Give your body element the color property of green.
and
Your h1 element should inherit the color green from your body element.
gasmyr
@syntrydy
Mar 15 2016 00:09
@joe01001010 I am<font color="red">Joe</font>
Jared Pranke
@EtherWolf
Mar 15 2016 00:09
Ok, try keeping your html elements beneath your style tags for now. Just make sure your style declarations are inserted directly beneath the body tag
@addictedotaku When you add a style to your body, as long as you don't have a class or id attributed to the element contained within, that element will automatically inherit the properties you add to the body selector.
Joe Ipmat
@joeIpmat
Mar 15 2016 00:11
@syntrydy thankss
Willys McCaughan
@addictedotaku
Mar 15 2016 00:12

<h1> Hello World </h1>

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

still no pass
but background is green
and font is monospace
Jared Pranke
@EtherWolf
Mar 15 2016 00:13
<style>
  body {
    background-color: black;
    color: green;
    font-family: Monospace;
  }

</style>

<h1> Hello World</h1>
try it this way
Post your elements after your style declaration
Willys McCaughan
@addictedotaku
Mar 15 2016 00:14
excelent @EtherWolf Thank you!!
CamperBot
@camperbot
Mar 15 2016 00:14
addictedotaku sends brownie points to @etherwolf :sparkles: :thumbsup: :sparkles:
:warning: addictedotaku already gave etherwolf points
Jared Pranke
@EtherWolf
Mar 15 2016 00:14
@addictedotaku :+1: :fire:
Candice
@smrtsmrf
Mar 15 2016 00:19
I could use some help on the random quote generator
Willys McCaughan
@addictedotaku
Mar 15 2016 00:19
how do i change the css class of the text to pink in the h1 body
Candice
@smrtsmrf
Mar 15 2016 00:21
@addictedotaku <h1 style=“color:pink”>text goes here</h1>
is that what you’re looking for?
Willys McCaughan
@addictedotaku
Mar 15 2016 00:21

Prioritize One Style Over Another

Sometimes your HTML elements will receive multiple styles that conflict with one another.

For example, your h1 element can't be both green and pink at the same time.

Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?

Create a CSS class called pink-text that gives an element the color pink.

Give your h1 element the class of pink-text.

that
Jared Pranke
@EtherWolf
Mar 15 2016 00:21
Body refers to ALL the content in an html document. When you already have properties connected to the body, you need to override those properties by using a class or id.
<style>
  .pink-text {
    color: pink;
  }
  body {
    background-color: black;
    font-family: Monospace;
    color: green;

  }
To attribute a class to an html element, you would for example type <h1 class="someclass">sometext</h1>
Willys McCaughan
@addictedotaku
Mar 15 2016 00:25
this is what i have

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

body {
background-color: black;
font-family: Monospace;
color: green;

}
</style>

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

Jared Pranke
@EtherWolf
Mar 15 2016 00:25
almost there
you only include the . when you are selecting the class in your style sheet
Willys McCaughan
@addictedotaku
Mar 15 2016 00:26
word got it
First project, simple, im just starting out
odinolove
@odinolove
Mar 15 2016 00:31
can some 1 help me with this challenge
im putting this in line 4 $("#target4").html("<i>jQuery Playground</i>");
Jared Pranke
@EtherWolf
Mar 15 2016 00:34
The text you want to italicize is #target4
marcoe0
@marcoe0
Mar 15 2016 00:34
@odinolove u want to italicize #target4
odinolove
@odinolove
Mar 15 2016 00:35
$ ("<i>#target4</i>") ?
Franco Zapata
@Francozt01
Mar 15 2016 00:35
@odinolove you copied the code from the instructions
yes
Willys McCaughan
@addictedotaku
Mar 15 2016 00:35

}
.blue-text{
color: blue;
}
.pink-text {
color: pink;
}
</style>

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

any idea whats wrong
odinolove
@odinolove
Mar 15 2016 00:35
thanks a lot
got it
Franco Zapata
@Francozt01
Mar 15 2016 00:36
just that @odinolove $("#target4").html("<i>#target4</i>");
Jared Pranke
@EtherWolf
Mar 15 2016 00:36
@addictedotaku you can consolidate those class attributes
@addictedotaku class="pink-text blue-text"
marcoe0
@marcoe0
Mar 15 2016 00:36
@addictedotaku try <h1 class="pink-text blue-text">Hello World!</h1>
odinolove
@odinolove
Mar 15 2016 00:37
@Francozt01 thanks
CamperBot
@camperbot
Mar 15 2016 00:37
odinolove sends brownie points to @francozt01 :sparkles: :thumbsup: :sparkles:
UnknownRandomer
@UnknownRandomer
Mar 15 2016 00:37
Hey sorry but could someone remind me how to nest an I element into a button element?
CamperBot
@camperbot
Mar 15 2016 00:37
:star: 567 | @francozt01 | http://www.freecodecamp.com/francozt01
Logan Copper
@TheManWhoSawGreatness
Mar 15 2016 00:37
How do I, "Give my form element the id of cat-photo-form."?
Franco Zapata
@Francozt01
Mar 15 2016 00:37
@UnknownRandomer <button> <i>write here </i> </button>
David Wilbanks
@dwilbank68
Mar 15 2016 00:38
<nest>
    <bird></bird>
</nest>
Josh
@jnknox
Mar 15 2016 00:38
@UnknownRandomer <button> <i> </i><button>.... just a hair too late!
*edit <button> <i> </i></button> forgot to close out button
uCtrlr
@uCtrlr
Mar 15 2016 00:39
@TheManWhoSawGreatness <form id=cat-photo-form> </form>
UnknownRandomer
@UnknownRandomer
Mar 15 2016 00:39
Thank you @Francozt01 and @jnknox
CamperBot
@camperbot
Mar 15 2016 00:39
unknownrandomer sends brownie points to @francozt01 and @jnknox :sparkles: :thumbsup: :sparkles:
:star: 159 | @jnknox | http://www.freecodecamp.com/jnknox
:star: 568 | @francozt01 | http://www.freecodecamp.com/francozt01
David Wilbanks
@dwilbank68
Mar 15 2016 00:39
quotes needed
Logan Copper
@TheManWhoSawGreatness
Mar 15 2016 00:39
@uCtrlr Thanks
CamperBot
@camperbot
Mar 15 2016 00:39
themanwhosawgreatness sends brownie points to @uctrlr :sparkles: :thumbsup: :sparkles:
:star: 299 | @uctrlr | http://www.freecodecamp.com/uctrlr
Franco Zapata
@Francozt01
Mar 15 2016 00:39
@TheManWhoSawGreatness
<form id="cat-photo-form"> </form>
@UnknownRandomer np
Logan Copper
@TheManWhoSawGreatness
Mar 15 2016 00:40
Thanks
Franco Zapata
@Francozt01
Mar 15 2016 00:40
@TheManWhoSawGreatness np :D
marcoe0
@marcoe0
Mar 15 2016 00:40
I posted this earlier but it was never resolved. I am trying to change my background color to blue but it stops half way. I know it has something to do with the Bootstrap link I have at the top because when i remove it my background changes to blue. But then my navigational bar disappears and I don't want that. Can anyone help?http://codepen.io/marcoe0/pen/pyEXOx
uCtrlr
@uCtrlr
Mar 15 2016 00:40
you're welcome!
Franco Zapata
@Francozt01
Mar 15 2016 00:41
@marcoe0 if u are using Bootstrap and u try to change the color to an element and it doesn't change add !important after the color declaration
@marcoe0
<style>
h1 {
  color: red !important;
}
</style>
marcoe0
@marcoe0
Mar 15 2016 00:43
wow that fixed it! @Francozt01 thank u
CamperBot
@camperbot
Mar 15 2016 00:43
marcoe0 sends brownie points to @francozt01 :sparkles: :thumbsup: :sparkles:
:star: 569 | @francozt01 | http://www.freecodecamp.com/francozt01
marcoe0
@marcoe0
Mar 15 2016 00:43
@Francozt01 would the same work for background images
Franco Zapata
@Francozt01
Mar 15 2016 00:44
@marcoe0 np :D yes
Milenko Vidakovic
@Milenk0
Mar 15 2016 00:44
could someone show me how to center an image? I'm doing the front end development projects
Franco Zapata
@Francozt01
Mar 15 2016 00:45
@marcoe0 bootstrap has some predefined rules that are priority
Kia Farhang
@KiaFarhang
Mar 15 2016 00:45
@Milenk0 can you share your pen or code?
Milenko Vidakovic
@Milenk0
Mar 15 2016 00:45
@KiaFarhang how do you share your pen?
Kia Farhang
@KiaFarhang
Mar 15 2016 00:47
If you're on code pen, just copy+paste a link to the pen you're working on.
MuhammadRe
@MuhammadRe
Mar 15 2016 00:49
use margun
Franco Zapata
@Francozt01
Mar 15 2016 00:49
@Milenk0 lol my tribute page was about Nikola Tesla too... :D
MuhammadRe
@MuhammadRe
Mar 15 2016 00:49
margin
margin: 10px 200px 10px 200px;
Milenko Vidakovic
@Milenk0
Mar 15 2016 00:50
Thanks @MuhammadRe
CamperBot
@camperbot
Mar 15 2016 00:50
milenk0 sends brownie points to @muhammadre :sparkles: :thumbsup: :sparkles:
uCtrlr
@uCtrlr
Mar 15 2016 00:50
This message was deleted
CamperBot
@camperbot
Mar 15 2016 00:50
:star: 174 | @muhammadre | http://www.freecodecamp.com/muhammadre
bitgrower
@bitgrower
Mar 15 2016 00:50

If anyone needs visualization for rot13
http://codepen.io/topher6345/full/KpQBxZ

nice

marcoe0
@marcoe0
Mar 15 2016 00:50
@Francozt01 I can't get my desired background image now haha... what am I missing here: html, body { background-image:"https://www.dropbox.com/sc/824lvuflgabtt6k/AABXyooGlqS9TCuKqcihI_C2a" !important}
bmetcalfe1
@bmetcalfe1
Mar 15 2016 00:51
How do i get this thing to stop sendibg me notifications
priya
@priyya
Mar 15 2016 00:51
This message was deleted
Scott Stringfellow
@stringf5
Mar 15 2016 00:51
Has anyone else had trouble with test cases in Friendly Date Ranges bonfire?
Kia Farhang
@KiaFarhang
Mar 15 2016 00:51
@Milenk0 - Add the class "center-block" to your image.
Franco Zapata
@Francozt01
Mar 15 2016 00:51
@marcoe0 " ; " after the !important?
@marcoe0 just
body {
background-image: url("https://www.dropbox.com/sc/824lvuflgabtt6k/AABXyooGlqS9TCuKqcihI_C2a") !important;
}
marcoe0
@marcoe0
Mar 15 2016 00:53
@Francozt01 ive tried that as well
@Francozt01 could it be the link itself
Franco Zapata
@Francozt01
Mar 15 2016 00:53
@marcoe0 yea that could be
also u have to use () around the link
body {
background-image: url (" Link ") !important;
}
MuhammadRe
@MuhammadRe
Mar 15 2016 00:55
@marcoe0 the link is working as well
marcoe0
@marcoe0
Mar 15 2016 00:58
@Francozt01 that did it
thank u
Franco Zapata
@Francozt01
Mar 15 2016 00:58
@marcoe0 np :D
ACubed10
@ACubed10
Mar 15 2016 00:59
Can anyone help explain a waypoint for me? The waypoint "Nesting For Loops". I have the solution, but just need help understanding what is going on, step by step
Kevin Phung
@kphung29
Mar 15 2016 00:59

Hello everyone! I'm having trouble with this current lesson : Set the ID of an Element .. Give your form element the id = cat-photo-form ... can't seem to figure this one out.. here's my code : <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;
}
.gray-background {
background-color: gray;
}
</style>

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

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

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

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

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


</form>

thank you in advance
ACubed10
@ACubed10
Mar 15 2016 01:00
This message was deleted

can anyone explain what this does line by line for me? ```
function multiplyAll(arr) {
var product = 1;
// Only change code below this line
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
product *= arr[i][j];
}
}
// Only change code above this line
return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);
```

marcoe0
@marcoe0
Mar 15 2016 01:01
@kphung29 <form action="/submit-cat-photo" id="cat-photo-form">
Manish Giri
@Manish-Giri
Mar 15 2016 01:02
@kphung29 combine these two
<form action="/submit-cat-photo">
<id="cat-photo-form”>
mjqblade
@mjqblade
Mar 15 2016 01:02
hey guys
Ron Cruz
@Ronolibert
Mar 15 2016 01:03
@ACubed10 var product = 1; is basically an accumulator
Kevin Phung
@kphung29
Mar 15 2016 01:03
awesome.. thank you so much @marcoe0 @Manish-Giri !!!
CamperBot
@camperbot
Mar 15 2016 01:03
kphung29 sends brownie points to @marcoe0 and @manish-giri :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for marcoe0
:star: 758 | @manish-giri | http://www.freecodecamp.com/manish-giri
Ron Cruz
@Ronolibert
Mar 15 2016 01:03
@ACubed10 since the goal is to multiply all the values into an array to a final number, you need to initialize a variable that will contain the final multiplied out number
multiply all the values in an array to find a final number*
ACubed10
@ACubed10
Mar 15 2016 01:04
@Ronolibert i guess im having issues with Arrays then, because I'm not sure why this code works
Greg Klein
@gregkleintv
Mar 15 2016 01:04

This is my code for the "Create Custom Heading" lesson.

<div class="row">
<div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>
<div class="col-xs-4"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></div>
</div>

Ron Cruz
@Ronolibert
Mar 15 2016 01:04
I kind of remember what exercise that is, but basically, the first for loop is iterating over the array
Greg Klein
@gregkleintv
Mar 15 2016 01:04
it's saying i dont have a closing div tag for each element, but i do...
max77p
@max77p
Mar 15 2016 01:04
quick question, how would one load something in jquery on codepen on page load?
Ron Cruz
@Ronolibert
Mar 15 2016 01:04
the second for loop is iterating over the values of the array
mjqblade
@mjqblade
Mar 15 2016 01:04
sry how does a script element look like
max77p
@max77p
Mar 15 2016 01:04
is it onload or .load()?
Ron Cruz
@Ronolibert
Mar 15 2016 01:05
since its a nested array, you need a nested for loop to be able to access the second layer of multidimensional array
product*=arr[i][j] is targetting the value of the current iteration
mjqblade
@mjqblade
Mar 15 2016 01:05
@gregkleintv try
ACubed10
@ACubed10
Mar 15 2016 01:06
@Ronolibert thank you for the clarification. Is there any location I can go and read up on nested for Loops and Multi dimensional arrays? They are confusing me
Ron Cruz
@Ronolibert
Mar 15 2016 01:06
and it's multiplying it into your accumulator and assigning it to the variable product
CamperBot
@camperbot
Mar 15 2016 01:06
acubed10 sends brownie points to @ronolibert :sparkles: :thumbsup: :sparkles:
:star: 278 | @ronolibert | http://www.freecodecamp.com/ronolibert
mjqblade
@mjqblade
Mar 15 2016 01:06
<div class="row"</div>
<div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>
<div class="col-xs-4"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></div>
</div>
mjqblade
@mjqblade
Mar 15 2016 01:06
try this @gregkleintv
Greg Klein
@gregkleintv
Mar 15 2016 01:06
ok
Ron Cruz
@Ronolibert
Mar 15 2016 01:07
@ACubed10 it helps me to follow it through at least 1 cycle, to see what values I'm dealing with
ACubed10
@ACubed10
Mar 15 2016 01:07
thank you so much @Ronolibert for all the help, appreciate it
CamperBot
@camperbot
Mar 15 2016 01:07
:warning: acubed10 already gave ronolibert points
acubed10 sends brownie points to @ronolibert :sparkles: :thumbsup: :sparkles:
mjqblade
@mjqblade
Mar 15 2016 01:07
did it work @gregkleintv
Ron Cruz
@Ronolibert
Mar 15 2016 01:08
@ACubed10 No problem, it also helps to use the chrome console, so you can test what values you're actually targetting, instead of trying to do mental gymnastics without ever actually seeing the results of what you're trying
Greg Klein
@gregkleintv
Mar 15 2016 01:08
no, it's saying a have an extra </div> tag now
mjqblade
@mjqblade
Mar 15 2016 01:08
what s the name of the challenge
@gregkleintv
@gregkleintv
Greg Klein
@gregkleintv
Mar 15 2016 01:11
Create A Custom Heading
mjqblade
@mjqblade
Mar 15 2016 01:12
<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">
  <h2 class="text-primary text-center">CatPhotoApp</h2>

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

  <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">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>
that should work
Tmore23
@Tmore23
Mar 15 2016 01:13
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
Will Yoo
@willyoo42
Mar 15 2016 01:13
i don't understand the directions for
Change the Font Size of an Element
It says Do not add a class attribute to the second p element, without removing it from the first one.
Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.
Tmore23
@Tmore23
Mar 15 2016 01:13
why doesnt it let me actually drop down?
Will Yoo
@willyoo42
Mar 15 2016 01:13
Isn't this contradictory?
Candice
@smrtsmrf
Mar 15 2016 01:13
$.ajax({
            url: 'http://quotes.stormconsultancy.co.uk/random.json',
            type: 'GET',
            dataType: 'jsonp',
            success: callback()
        });
function callback(json) {
   alert(json); $("#quote").html(JSON.stringify(json));
}
Greg Klein
@gregkleintv
Mar 15 2016 01:13
the thing you posted doesn't use divs for the section it needs to...
Candice
@smrtsmrf
Mar 15 2016 01:14
can anyone help me out here? json is coming back as undefined
Will Yoo
@willyoo42
Mar 15 2016 01:15

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

p.font-size {
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 ="font-size"> Purr jump eat the grass.</p>

priya
@priyya
Mar 15 2016 01:18
Hello everyone. Having trouble replicating the results of a challenge using regular text editor. The challenge itself says it's correct but when I open the same code in my browser, jQuery doesn't work. Can someone please help?
Ron Cruz
@Ronolibert
Mar 15 2016 01:19
what challenge?
priya
@priyya
Mar 15 2016 01:20
Target HTML Elements with Selectors Using jQuery
Ron Cruz
@Ronolibert
Mar 15 2016 01:20
oh, i believe its because within the exercise, they include jQuery already and they don't include it in the code
to get the same effect in the browser you're gonna need to link jquery into your html file
Tmore23
@Tmore23
Mar 15 2016 01:21
is there a difference between the bootstrap 3.3.5 to the 3.3.6?
Will Yoo
@willyoo42
Mar 15 2016 01:21
Screen Shot 2016-03-14 at 9.21.36 PM.png
priya
@priyya
Mar 15 2016 01:22
I included the Google CDN for jQuery in the head. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Will Yoo
@willyoo42
Mar 15 2016 01:22
anyone? really annoyed by this on
Ron Cruz
@Ronolibert
Mar 15 2016 01:22
paste you're code
Will Yoo
@willyoo42
Mar 15 2016 01:23

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

p.font-size {
font-size: 16px;
}

}
</style>

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

<p> class = "font-size"> 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 ="font-size"> Purr jump eat the grass.</p>

Jared Pranke
@EtherWolf
Mar 15 2016 01:23
@priyya Include a basic html boilerplate in your document, jquery loads in the head, javascript file will load beneath the body content.
Ron Cruz
@Ronolibert
Mar 15 2016 01:24
@willyoo42 what was the problem you're ahving?
having*
Will Yoo
@willyoo42
Mar 15 2016 01:25
@Ronolibert basically FCC says
Do not add a class attribute to the second p element, without removing it from the first one.
Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.
Ron Cruz
@Ronolibert
Mar 15 2016 01:25
I think first, when you're referencing a class, you don't need to add the element of that class
Tmore23
@Tmore23
Mar 15 2016 01:25
@willyoo42 I personally dont have the h2 before the .red-text
Saturnino Abril
@saturninoabril
Mar 15 2016 01:26

Hi there!

http://www.freecodecamp.com/challenges/arguments-optional

For this challenge on "Arguments Optional", I had this code worked and passed the test but I am not convince with my coding style. Could you help me write a more elegant code on this challenge?
Here's the code:

function add(a, b) {
// check whether an argument is a number
var isNumber = function(val) {
return typeof val === "number";
};

// return undefined if arguments are not type of number.
// return a function with one argument if initial argument is one
// add arguments if length is equal to two
if (arguments.length === 1 && isNumber(a)) {
return function(c) {
if (isNumber(c)) {
return a + c;
} else {
return undefined;
}
};
} else if (arguments.length === 2) {
if (isNumber(a) && isNumber(b)) {
return a + b;
} else {
return undefined;
}
} else {
return undefined;
}
}

Will Yoo
@willyoo42
Mar 15 2016 01:26
@Tmore23 @Ronolibert got it
i’ll try without those
Do not add a class attribute to the second p element, without removing it from the first one.
Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.
Still
Tmore23
@Tmore23
Mar 15 2016 01:26
This message was deleted
This message was deleted
Will Yoo
@willyoo42
Mar 15 2016 01:26
I feel like those are contradictory
Tmore23
@Tmore23
Mar 15 2016 01:26
@willyoo42 and the second <p> should have the whole Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched
Will Yoo
@willyoo42
Mar 15 2016 01:27
@Tmore23 yup got that.
Ron Cruz
@Ronolibert
Mar 15 2016 01:27
what's the exercise called?
Will Yoo
@willyoo42
Mar 15 2016 01:27
Basically if I add the class to both under parameter "Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.” How can I not do it for the first p….
Tmore23
@Tmore23
Mar 15 2016 01:27
@willyoo42 i think that means that just make sure that your browser zoom is to 100% inorder for you to tell the difference.
Will Yoo
@willyoo42
Mar 15 2016 01:27
Change the Font Size of an Element
Tmore23
@Tmore23
Mar 15 2016 01:28
@Ronolibert Change the Font Size of an Element
priya
@priyya
Mar 15 2016 01:28
@EtherWolf the entirety of my code looks like:
Ron Cruz
@Ronolibert
Mar 15 2016 01:28
OH
i get what you're saying
priya
@priyya
Mar 15 2016 01:28

<!DOCTYPE html>

<html lang="en-us">
<head>

<meta charset="utf-8" />
<meta name="#" content="#">

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

<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});

</script>

</head>

<body>

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

</body>
</html>

Will Yoo
@willyoo42
Mar 15 2016 01:29
@Ronolibert yeah, i’m stuck in this weird paradox
Ron Cruz
@Ronolibert
Mar 15 2016 01:29
Weird, my exercise doesn't look like that
oh wait i see
Will Yoo
@willyoo42
Mar 15 2016 01:30
@Ronolibert not sure what to do :/
Ron Cruz
@Ronolibert
Mar 15 2016 01:31
wait are you sure its the exercise Change the Font Size of an Element?
Will Yoo
@willyoo42
Mar 15 2016 01:31
@Ronolibert yup
Jared Pranke
@EtherWolf
Mar 15 2016 01:31
@priyya Is your html displaying when you open your document in your browser?
Joshua Headrick
@JoshuaHeadrick
Mar 15 2016 01:32
Hey is anyone able to assist me for task "Create a form element" i just can't wrap my head around it and get it right
Donnie Reese
@donniereese
Mar 15 2016 01:33
@JoshuaHeadrick Yea, what’s up?
priya
@priyya
Mar 15 2016 01:33
@EtherWolf Yes, everything shows up as it should except for the jQuery button bounce.
Joshua Headrick
@JoshuaHeadrick
Mar 15 2016 01:34
I just can't get the form to have the action, just comes up as text on the phone
rbunz
@rbunz08
Mar 15 2016 01:34
Can someone help me with a problem I am having on a website>
?
Jared Pranke
@EtherWolf
Mar 15 2016 01:34
@priyya Are you using chrome by any chance?
Ron Cruz
@Ronolibert
Mar 15 2016 01:35

@willyoo42 ```

<style>
.red-text {
color: red;
}
p{
font-size:16px;
}
</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>

Donnie Reese
@donniereese
Mar 15 2016 01:36
@JoshuaHeadrick Would you like to PM about it or do a pair coding?
Ron Cruz
@Ronolibert
Mar 15 2016 01:36
@willyoo42 that condition to pass the test is just weirdly worded
Joshua Headrick
@JoshuaHeadrick
Mar 15 2016 01:36
@donniereese both work for me :)
Ron Cruz
@Ronolibert
Mar 15 2016 01:36
@willyoo42 you don't need to add a class, you just need to target all of the p tags and make their font size 16px
i think it would have made more sense if they just didn't include the "without removing it from the first one"
priya
@priyya
Mar 15 2016 01:37
@EtherWolf Yes, but I also tried Safari and Firefox and the results were no different.
Jared Pranke
@EtherWolf
Mar 15 2016 01:37
@priyya Ok, right click the page, click on inspect and the developer window will open. Click the console tab, and just input $('div') into the console. Does it return anything?
Donnie Reese
@donniereese
Mar 15 2016 01:37
@JoshuaHeadrick Do you use Screenhero?
Joshua Headrick
@JoshuaHeadrick
Mar 15 2016 01:38
@donniereese No sorry, just realised its probably easier to PM
rbunz
@rbunz08
Mar 15 2016 01:39
Can someone help me with this?? http://www.integratingedutech.ca/ go to the second post down and you can see that the numbers overlap the picture a bit. I am not sure why it is doing this because I have float on, the words never do this, and the ol is indented. Its like the indent turns off or something when its by the picture ?? Any ideas what I can use to change this?
priya
@priyya
Mar 15 2016 01:41
@EtherWolf Yup. It also said this before I wrote anything: Uncaught Error: Bootstrap's JavaScript requires jQuery
Jared Pranke
@EtherWolf
Mar 15 2016 01:43
@priyya It might be the order, try including jquery before bootstrap in your document
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Simon
@Si7summers
Mar 15 2016 01:45
Hi there, can someone please help me understand why my code isn’t working in the "Return Largest Numbers in Arrays” Challenge
rbunz
@rbunz08
Mar 15 2016 01:45
@Si7summers its been a while but i can try!
Simon
@Si7summers
Mar 15 2016 01:46
how do i add the code here @rbunz08 , do i type it out, copy paste or link a pic? Im new to this
Jared Pranke
@EtherWolf
Mar 15 2016 01:46
wiki code formatting
CamperBot
@camperbot
Mar 15 2016 01:46

: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

rbunz
@rbunz08
Mar 15 2016 01:47
type \\ and then paste the code I believe
thanks @camperbot
CamperBot
@camperbot
Mar 15 2016 01:47
rbunz08 sends brownie points to @camperbot :sparkles: :thumbsup: :sparkles:
:star: 1361 | @camperbot | http://www.freecodecamp.com/camperbot
Simon
@Si7summers
Mar 15 2016 01:47

\function largestOfFour(arr) {
var max = 0;
var maxArr = [];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
if (arr[i][j] > max) {
max = arr[i][j];
}
}
maxArr[i] = max;
}
return maxArr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

that doesn’t look right
rbunz
@rbunz08
Mar 15 2016 01:48
``` and then paste
or click on the speech bubbles in your comment box
Ron Cruz
@Ronolibert
Mar 15 2016 01:48
``` shift + enter paste
Simon
@Si7summers
Mar 15 2016 01:49
function largestOfFour(arr) {
  var max = 0;
  var maxArr = [];
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr[i].length; j++) {
      if (arr[i][j] > max) {
        max = arr[i][j];
      }
    }
    maxArr[i] = max;
  }
  return maxArr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
ok cool thank you guys
Will Yoo
@willyoo42
Mar 15 2016 01:49
@Ronolibert it’s not working
rbunz
@rbunz08
Mar 15 2016 01:50
k gimme a sec...
Simon
@Si7summers
Mar 15 2016 01:50
no problem
Ron Cruz
@Ronolibert
Mar 15 2016 01:50
really? Refresh the browser and paste my code in agai
the whole goal of the exercise is to be able to select an element and add styling to it that would apply to all instances of that element
priya
@priyya
Mar 15 2016 01:51
@EtherWolf I think you're onto something. Trying it now.
Will Yoo
@willyoo42
Mar 15 2016 01:53
@Ronolibert your code is for the previous chellenge i believe
Ron Cruz
@Ronolibert
Mar 15 2016 01:53
the challenge is 'Change the font size of an element"
Will Yoo
@willyoo42
Mar 15 2016 01:54
yeah
but your code doesn’t change the font size for p

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

.font-size {
font-size: 16px;
}

}
</style>

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

<p class = "font-size" > 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>

there’s no reason my code should not work…i believe the test is flawed
Ron Cruz
@Ronolibert
Mar 15 2016 01:55
take out the font-size class
d wilder
@alhazen1
Mar 15 2016 01:55
help wikipedia
CamperBot
@camperbot
Mar 15 2016 01:55
no wiki entry for: wikipedia
Ron Cruz
@Ronolibert
Mar 15 2016 01:55
the only class the first p should have is red-text
your .font-size css selector should just be p{ }
so that it applies to all p elements
Josh
@jnknox
Mar 15 2016 01:55
Is there a good way to include/host an image for use on a site I'm making in code pen?
Will Yoo
@willyoo42
Mar 15 2016 01:56
interesting. did not know you could do that….
:?
thank you so much @Ronolibert
CamperBot
@camperbot
Mar 15 2016 01:56
willyoo42 sends brownie points to @ronolibert :sparkles: :thumbsup: :sparkles:
:star: 279 | @ronolibert | http://www.freecodecamp.com/ronolibert
Pawan
@pawan92
Mar 15 2016 01:56
random question..is anyone good with matlab/stat?
rbunz
@rbunz08
Mar 15 2016 01:57
@Si7summers ok so what is happening is that it will only pick a number that is higher than the number before it... so when the highest number in the first array is for example 27, it will not say the highest number in the second array is 5 because 5 is lower than 27 so it says 27 again
Ron Cruz
@Ronolibert
Mar 15 2016 01:57
No problem, yeah, you can have elements as css selectors, not just classes and ids
its so you can target an entire type of selector, then later on down the css you can change the styling for specific classes you want to change the behavior of
Simon
@Si7summers
Mar 15 2016 01:58
@rbunz08 oh ok, well do you havea suggestion as to how i should change things?
Will Yoo
@willyoo42
Mar 15 2016 01:58
@Ronolibert i feel like that wasn’t mentioned anywhere tbh
Ron Cruz
@Ronolibert
Mar 15 2016 01:59
It is! "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)."
i guess loosely
Simon
@Si7summers
Mar 15 2016 01:59
@rbunz08 if i put the varaible inside the for-loop that should work right? since then everytime it loops it wil make the var max equal to zero
@rbunz08 yes that worked - thank you!
CamperBot
@camperbot
Mar 15 2016 02:00
si7summers sends brownie points to @rbunz08 :sparkles: :thumbsup: :sparkles:
:star: 245 | @rbunz08 | http://www.freecodecamp.com/rbunz08
Tmore23
@Tmore23
Mar 15 2016 02:02
can someone tell me what class should I give the navbar so that I can always view it while scrolling in the page?
rbunz
@rbunz08
Mar 15 2016 02:02
@Si7summers o ok.. I did it this way which worked too
Josh
@jnknox
Mar 15 2016 02:03
@Tmore23 Try navbar-fixed-top
rbunz
@rbunz08
Mar 15 2016 02:03
function largestOfFour(arr) {
  var maxArr = [];
  for (var i = 0; i < arr.length; i++) {
      var max = arr[i][0];

    for (var j = 0; j < arr[i].length; j++) {
      if (arr[i][j] > max) {
         max = arr[i][j];
      }
    }
    maxArr.push(max);
  }
  return maxArr;
}

largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
Simon
@Si7summers
Mar 15 2016 02:04
thats helpful, thank you, and thanks for your time, much appreciated @rbunz08
rbunz
@rbunz08
Mar 15 2016 02:05
@Si7summers no problem!
bitgrower @bitgrower kicks @camperbot -- why didn't you give points to rbunz08 after @Si7summers thanked them ?
Candice
@smrtsmrf
Mar 15 2016 02:06
how can I vertically center text inside a div?
rbunz
@rbunz08
Mar 15 2016 02:07
@bitgrower it did earlier, its ok!
bitgrower
@bitgrower
Mar 15 2016 02:07
LOL ... :)
rbunz
@rbunz08
Mar 15 2016 02:07
try top: 50% @smrtsmrf
Simon
@Si7summers
Mar 15 2016 02:08
@smrtsmrf do you mean with the text running lef to right or top to bottom?
left to right*
with css its "text-align: center;"
Candice
@smrtsmrf
Mar 15 2016 02:09
@Si7summers I have a #quote inside a #quote-box. I want the #quote centered vertically. I already got the horizontal centring.
@rbunz08 didn’t work. :(
Simon
@Si7summers
Mar 15 2016 02:11
@smrtsmrf text-align:center; should work
or maybe
margin-left:auto;
margin-right:auto;
Tmore23
@Tmore23
Mar 15 2016 02:11
@jnknox thank you but now its blocking the top text. and i added the margin-top to the h1 but its not happening.
CamperBot
@camperbot
Mar 15 2016 02:11
tmore23 sends brownie points to @jnknox :sparkles: :thumbsup: :sparkles:
:star: 160 | @jnknox | http://www.freecodecamp.com/jnknox
Josh
@jnknox
Mar 15 2016 02:14
@Tmore23 I had an issue with that too, but didn't quite get an easy fix for it.... can you link the page so I can try a couple things?
@jnknox
O.o so its working here, but not when i go to full view on the page. ... is that normal?
Candice
@smrtsmrf
Mar 15 2016 02:16
@Si7summers those are both for horizontal centering. I want vertical
Tmore23
@Tmore23
Mar 15 2016 02:16
and the dropdown went back to not working here.
Simon
@Si7summers
Mar 15 2016 02:16
then maybe try
margin-top:auto;
margin-botom:auto;
David Weedmark
@DavidWeedmark
Mar 15 2016 02:17
@smrtsmrf vertical centering can be tricky depending on what you're working on. here's a resource I've bookmarked http://vanseodesign.com/css/vertical-centering/
Moisés Delgado
@mdelgadonyc
Mar 15 2016 02:17
@smrtsmrf Here is a resource (probably containing the same information as @DavidWeedmark 's recommendation): https://css-tricks.com/centering-css-complete-guide/
@smrtsmrf If you go to the vertical section it will then ask you to click on a few things to narrow it down before suggesting CSS code.
Josh
@jnknox
Mar 15 2016 02:19
@Tmore23 Looking at the code, I see that if you add a padding to the top text, it fixes that issue, but then has some issues with where the links direct the page. (It's off by a few pixels). Still trying to work at it.
drunkenirish
@drunkenirish
Mar 15 2016 02:19
can someone help me I am a noob trying to learn code and cant get past the exersise in HTML Inherit Styles from the Body Element
Tmore23
@Tmore23
Mar 15 2016 02:20
@jnknox ok thank you
CamperBot
@camperbot
Mar 15 2016 02:20
tmore23 sends brownie points to @jnknox :sparkles: :thumbsup: :sparkles:
:warning: tmore23 already gave jnknox points
Francisco Gonzalez
@frankglezCR
Mar 15 2016 02:21
hey guys I am stuck in "Give a Background Color to a Div Element", when I create class gray-background it does not apply to the div element, can someone help me, sorry about my english.
Candice
@smrtsmrf
Mar 15 2016 02:22
@DavidWeedmark I think I found a workable solution. Thanks!
CamperBot
@camperbot
Mar 15 2016 02:22
smrtsmrf sends brownie points to @davidweedmark :sparkles: :thumbsup: :sparkles:
:star: 395 | @davidweedmark | http://www.freecodecamp.com/davidweedmark
David Weedmark
@DavidWeedmark
Mar 15 2016 02:22
@drunkenirish want to paste what you have so far?
William Campbell
@Sufuninja
Mar 15 2016 02:22
@frankglezCR Can we see your code?
David Weedmark
@DavidWeedmark
Mar 15 2016 02:23
@mdelgadonyc nice link. I like the flowchart approach
Francisco Gonzalez
@frankglezCR
Mar 15 2016 02:23
@Sufuninja sure, how can i share my code?, just copy and paste to the chat?
William Campbell
@Sufuninja
Mar 15 2016 02:24
I’m having a problem with my modal not working in codepen. works fine when ran in the browser.
http://codepen.io/Sufuninja/pen/aNBZEr?editors=1100
drunkenirish
@drunkenirish
Mar 15 2016 02:25

I got nothin everything I've tried makes the page go white or gives me bracketed text so... <style>
body {
background-color: black;
color: green
}

<h1>Hello World</h1>
</style>

Moisés Delgado
@mdelgadonyc
Mar 15 2016 02:25
@DavidWeedmark Yea I find it is useful for a topic like this that as you pointed out is not as straight forward as doing a horizontal centering.
William Campbell
@Sufuninja
Mar 15 2016 02:25
I think you need to use this:
(shift+enter for line break) var code = "formatted"; @frankglezCR
Francisco Gonzalez
@frankglezCR
Mar 15 2016 02:25

@Sufuninja <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;
}

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


</style>

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

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

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

<div class="gray-background">
<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>

David Weedmark
@DavidWeedmark
Mar 15 2016 02:26
@drunkenirish try moving </style> above your <h1> line
drunkenirish
@drunkenirish
Mar 15 2016 02:26
a point in the right direction like where the body element starts...?
thanks trying now
William Campbell
@Sufuninja
Mar 15 2016 02:27
.gray-background{
background-color=gray;
}
you type ‘=‘ instead of ‘:’
should be
background-color: gray;
@frankglezCR ^
David Weedmark
@DavidWeedmark
Mar 15 2016 02:28
@drunkenirish <h1> is html, which determines "What" is on the page, while <style> determines "How" it appears, so it can't go inside the <style> tags
Francisco Gonzalez
@frankglezCR
Mar 15 2016 02:28
@Sufuninja ohhh man, thank you very much.
CamperBot
@camperbot
Mar 15 2016 02:28
frankglezcr sends brownie points to @sufuninja :sparkles: :thumbsup: :sparkles:
:star: 267 | @sufuninja | http://www.freecodecamp.com/sufuninja
William Campbell
@Sufuninja
Mar 15 2016 02:29
@frankglezCR
np ;)
Josh
@jnknox
Mar 15 2016 02:29
@Tmore23 I'm at a loss on this one.. I was able to do it using some padding-top:50px on each of my sections and that seemed to fix the issue. however, that would require some reworking of your divs. There must be a better way, but I can't seem to come up with one.
Matthew
@aspiringguru
Mar 15 2016 02:30
bah.... doing the 'Truncate a string' exercise and if/else logic is confusing me. am I the only one misreading the problem?
David Weedmark
@DavidWeedmark
Mar 15 2016 02:30
@drunkenirish secondly, notice how the provided line of code ends? background-color: black;
@aspiringguru which part is confusing you?
Tmore23
@Tmore23
Mar 15 2016 02:34
@jnknox thank you I'll give it another look.
CamperBot
@camperbot
Mar 15 2016 02:34
tmore23 sends brownie points to @jnknox :sparkles: :thumbsup: :sparkles:
:warning: tmore23 already gave jnknox points
Joseph Gereghty
@joegereghty1989
Mar 15 2016 02:35
hey guys this might be a simple question but im pretty new at this and not getting the instructions. I'm trying to make a CSS Selector for my h2 elements. im trying to make my h2 elements blue. <style> <h2>CatPhotoApp</h2> </style>
and sorry if i didnt write that correctly
Ron Cruz
@Ronolibert
Mar 15 2016 02:36
in style tags, you want to select the element you want to alter
so for example, to select your h2 tag
it would be
<style>
    h2{
        //what you want to style
    }
</style>
and in between you would want
color: blue;
Joseph Gereghty
@joegereghty1989
Mar 15 2016 02:39
<style>
<h2{color: blue;}>CatPhotoApp</h2>
</style>
like that?
Ron Cruz
@Ronolibert
Mar 15 2016 02:39
<style>
    h2{
        color: blue;
    }
</style>
No, take out the CatPhotoApp
within the style tags, you onl yneed a css selecter for the tag you want to style
the html stays in the body half of the html document
drunkenirish
@drunkenirish
Mar 15 2016 02:40

Thanks David Weedmark I did this: <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
</style>

<h1>Hello World!</h1>

It worked
Ron Cruz
@Ronolibert
Mar 15 2016 02:40
the html in the body remains untouched because that is what you are looking to style
the style tags just provide a place for you to add CSS to the elements you select
David Weedmark
@DavidWeedmark
Mar 15 2016 02:41
@drunkenirish excellent!
Joseph Gereghty
@joegereghty1989
Mar 15 2016 02:41
ok
Ron Cruz
@Ronolibert
Mar 15 2016 02:42
so what that css selector does is for all h2 tags, it will be the color blue
Joseph Gereghty
@joegereghty1989
Mar 15 2016 02:45
am i not trying to make the CatPhotoApp blue?
Ron Cruz
@Ronolibert
Mar 15 2016 02:45
Link your entire html
You are
but since CatPhotoApp is within the <h2></h2> tags
Sean
@ofperfection
Mar 15 2016 02:45
Can someone please tell me why this code won't work:
function rot13(str) { // LBH QVQ VG!


  var answer = [];


  for(var i=0; i<str.length; i++){
    if(str.charCodeAt(i) == 32 ){
answer.push(32);  
    } else {
     answer.push(str.charCodeAt(i) -13);  
    }

  }

  var realAnswer = String.fromCharCode(answer);

  return realAnswer;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");
Ron Cruz
@Ronolibert
Mar 15 2016 02:45
and in your style tags, you are targetting h2 elements and making their color blue
Sean
@ofperfection
Mar 15 2016 02:46
I KNOW it's this line: var realAnswer = String.fromCharCode(answer);
doesn't return anything
Ron Cruz
@Ronolibert
Mar 15 2016 02:46
it is selecting that element, and changing what is inside of that element
Sean
@ofperfection
Mar 15 2016 02:46
not even an error
Ron Cruz
@Ronolibert
Mar 15 2016 02:47
i'm guessing 32 is a blank string?
Sean
@ofperfection
Mar 15 2016 02:47
yes
32 is space
Ron Cruz
@Ronolibert
Mar 15 2016 02:47
you are passing in
an array
to your fromCharCode function
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 02:48
```
Sean
@ofperfection
Mar 15 2016 02:48
ahhhhh, gotcha.
Thanks @Ronolibert
CamperBot
@camperbot
Mar 15 2016 02:48
seansaibot sends brownie points to @ronolibert :sparkles: :thumbsup: :sparkles:
:star: 282 | @ronolibert | http://www.freecodecamp.com/ronolibert
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 02:48
```
Ron Cruz
@Ronolibert
Mar 15 2016 02:48
No problem, what you should be passing in are integers
William Campbell
@Sufuninja
Mar 15 2016 02:49
Has anyone used bootstrap modals in Codeine?
Sean
@ofperfection
Mar 15 2016 02:49
the docs made it look like integers separated by commas
William Campbell
@Sufuninja
Mar 15 2016 02:49
Codepen*
Ron Cruz
@Ronolibert
Mar 15 2016 02:49
they are
but integers separated by commas is not an array
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 02:50
function chunk(arr, size) {
  var arr2 = [], arr3 = []; //temporary for loop
  for (var i = 0; i < arr.lenght; i+=size) {
    if (size === arr3.push(arr[i])) { //push should return length
      arr2.push(arr3); 
      arr3 = [];
    }
  }
  if (arr3.length > 0) arr2.push(arr3); //final flush
  console.log(arr2);
  return arr2;
}
chunk(["a", "b", "c", "e"], 2);

//non-slice metod
//maybe I misunderstood slice()
Hello campers! That's how i'm trying to solve Chunk Monkey
and this code doesn't work.
Ron Cruz
@Ronolibert
Mar 15 2016 02:51
@SeanSaibot also, you should be checking for another condition to make sure it deciphers it properly
Sean
@ofperfection
Mar 15 2016 02:52
I can't even get it to decipher improperly
answer.join("").toString();
William Campbell
@Sufuninja
Mar 15 2016 02:53
for (var i = 0; i < arr.lenght; i+=size)
spelling error on length
@vl-doit
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 02:53
f* it!
Ron Cruz
@Ronolibert
Mar 15 2016 02:53
@SeanSaibot so after the for loop
you have an array of integers
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 02:54
@Sufuninja thank you. that was spelling error. but still no result.
CamperBot
@camperbot
Mar 15 2016 02:54
vl-doit sends brownie points to @sufuninja :sparkles: :thumbsup: :sparkles:
:star: 268 | @sufuninja | http://www.freecodecamp.com/sufuninja
William Campbell
@Sufuninja
Mar 15 2016 02:54
sorry…it’s a start! @vl-doit
Ron Cruz
@Ronolibert
Mar 15 2016 02:54
the fromCharCode only accepts integers separated by commas
@SeanSaibot I think you should reconsider what is happening inside the for loop first, so the things happening on the outside get easier
@SeanSaibot You could try just directly making the string into an array, so it's easier to loop through
Sean
@ofperfection
Mar 15 2016 02:58
doesn't charcodeat only work on strings
Alexander Køpke
@alexanderkopke
Mar 15 2016 02:58
@SeanSaibot answer will be an array.. String.fromCharCode requires a number but you give it an array and so realAnswer will be empty
gerbermein
@gerbermein
Mar 15 2016 02:58
Hello guys! I'm currently doing "Mutations" but I can't seem to return false for "hello" and "hey", please help. Thanks!
function mutation(arr) {
  arr[0] = arr[0].toLowerCase();
  arr[1] = arr[1].toLowerCase().split("");

  for(i=0; i<arr[1].length; i++) {
    if(arr[0].indexOf(arr[1][i]) < 0) {
      return false;
    } else {
      return true;
    }
  }
}
mutation(["hello", "hey"]);
Ron Cruz
@Ronolibert
Mar 15 2016 02:59
Yes, it works on strings
Alexander Køpke
@alexanderkopke
Mar 15 2016 02:59
@SeanSaibot so you could iterate through the array using the String.fromCharCode and push the result of each iteration to realAnswer
Ron Cruz
@Ronolibert
Mar 15 2016 02:59
but if the string was an array, you can be iterating through each character
Sean
@ofperfection
Mar 15 2016 03:01
fromCharCode works with numbers separated by commas, right?
Ron Cruz
@Ronolibert
Mar 15 2016 03:01
yes
OH, i see what you're getting at, you could try it that way, just to get an output
Sean
@ofperfection
Mar 15 2016 03:02
answer.join(",").toString();
is not working
Ron Cruz
@Ronolibert
Mar 15 2016 03:02
try answer.join(',')
you don't need it to be a string, you need it to be integers
Actyually, the problem is you need to convert it to integers
Sean
@ofperfection
Mar 15 2016 03:03
yeah
Ron Cruz
@Ronolibert
Mar 15 2016 03:03
because when you use join an an array, it becomes a string
Sean
@ofperfection
Mar 15 2016 03:03
riiiiiiiiiiiiiiight.
Ron Cruz
@Ronolibert
Mar 15 2016 03:05
parseInt() converts a value to an integer
but to a single integer
Alexander Køpke
@alexanderkopke
Mar 15 2016 03:05
@gerbermein your code returns true on the first letter and that stops the iteration I think.
Brian
@n1dee
Mar 15 2016 03:05
Hello
Brian
@n1dee
Mar 15 2016 03:06
can anyone help me with this? http://prntscr.com/afe871
Ron Cruz
@Ronolibert
Mar 15 2016 03:06
I would just rethink your for loop, do most of the work inside the for loop so it's easier to work with
that way you can handle most of the work while on that value, instead of doing getting its unicode value and pushjing it to an array to do the conversions later outside of the loop
@joegereghty1989 yup, you can also copy and paste your code by typing ``` shift+enter -> paste your code
Alexander Køpke
@alexanderkopke
Mar 15 2016 03:08
@n1dee you didn't use the margin property for your green box class. margin:40px 20px 20px 40px;
Brian
@n1dee
Mar 15 2016 03:08
I tried, I dont know what I did wrong http://prntscr.com/afe8th
Alexander Køpke
@alexanderkopke
Mar 15 2016 03:09
@n1dee no commas between the values
Brian
@n1dee
Mar 15 2016 03:09
oooh
thanks a lot @alexanderkopke
CamperBot
@camperbot
Mar 15 2016 03:09
n1dee sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 509 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
Alexander Køpke
@alexanderkopke
Mar 15 2016 03:09
:)
Candice
@smrtsmrf
Mar 15 2016 03:10
I have some html inside a button. when that button is clicked, I would like to add to that html (not replace it). I looked at using jquery’s after, but I think it only takes text. I have a value from a function that I want to pass in as text. help?
William Campbell
@Sufuninja
Mar 15 2016 03:12
@gerbermein remind me what mutation does again?
gerbermein
@gerbermein
Mar 15 2016 03:15
@alexanderkopke @Sufuninja But that's not the case. The code is supposed to return false if every letter from the array1 is not within array[0], and true if all characters are in array[0]. I think @alexanderkopke is right, it might have just stopped looping after the first iteration.
I assumed that it'll continue looping until the end and returns the final answer, but I guess that's not the case.
Brian
@n1dee
Mar 15 2016 03:17
need some help again http://prntscr.com/afeb0r
Joseph Gereghty
@joegereghty1989
Mar 15 2016 03:18
how do you link your code to the chat?
Brian
@n1dee
Mar 15 2016 03:18
donee
Sean
@ofperfection
Mar 15 2016 03:18
n1dee I don't see the body element in your html?
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 03:18
Chunk Monkey solved. thx to SaintPeter.
William Campbell
@Sufuninja
Mar 15 2016 03:19
@gerbermein yeah, you’ll need one loop nested in the other.
loop through arr1 and check arr[1][0] for each; then do the same for arr1 and so on
Sean
@ofperfection
Mar 15 2016 03:19
or is it implied in the html section, I don't remember
Vladimir Logachev
@VladimirLogachev
Mar 15 2016 03:19
@joegereghty1989 ` three times in the beginningand three times in the end
@joegereghty1989 there's a hint on the right side of text box
Tyler Moeller
@TylerMoeller
Mar 15 2016 03:20

@smrtsmrf Something like this should work for you:

  var myText = 'hello ' + $('.button-class-name').html();
  $('.button-class-name').html(myText);

This would update the button with the word "hello" in front of the previous text

@joegereghty1989
Candice
@smrtsmrf
Mar 15 2016 03:22
@TylerMoeller I see. that’s pretty slick.
Tyler Moeller
@TylerMoeller
Mar 15 2016 03:22
help format
CamperBot
@camperbot
Mar 15 2016 03:22

: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

Alexander Køpke
@alexanderkopke
Mar 15 2016 03:23
@gerbermein actually there exists a continue statement in JavaScript which make the iteration continue with the next item in case of true.. if false it will return false as normal.. then outside of the loop you can return true as a default because if it reaches there it means there was no return false
Candice
@smrtsmrf
Mar 15 2016 03:23
@TylerMoeller though, I’m finding my problem is a bit more complex than just that. I want to be able to somehow grab the text on my page and share that via social media (rather than sharing the whole page - since it’s a random quote generator)
Tyler Moeller
@TylerMoeller
Mar 15 2016 03:23
@smrtsmrf You can replace .html() with .text() for just the text contents if that's what you mean. var tweetText = $('.quote-text-class-name').text();
sudama101
@sudama101
Mar 15 2016 03:24
it wont submit,

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target4").html("<i>jQuery Playground</i>");
});
</script>

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

Tyler Moeller
@TylerMoeller
Mar 15 2016 03:24
help format
CamperBot
@camperbot
Mar 15 2016 03:24

: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

gerbermein
@gerbermein
Mar 15 2016 03:26
@alexanderkopke ok I'll check out the continue statement
sudama101
@sudama101
Mar 15 2016 03:27

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target4").text("<i>jQuery Playground</i>");
});
</script>

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

Alexander Køpke
@alexanderkopke
Mar 15 2016 03:28
for(i=0; i<arr[1].length; i++) {
    if(arr[0].indexOf(arr[1][i]) < 0) {
      console.log("false");
      return false;

    } else {
      continue;
    }
  }
  console.log("true");
  return true;
@gerbermein this is what I mean.. you need to test it tho
@sudama101 what is the name of the challenge please
@sudama101 you need to use the .html method instead of the .text method. Also the text inside target4 should remain the same #target4
Sean
@ofperfection
Mar 15 2016 03:32
function rot13(str) { // LBH QVQ VG!


  var answer = [];


  for(var i=0; i<str.length; i++){
    if(str.charCodeAt(i) == 32 ){
answer.push(32);  
    } else {
     answer.push(str.charCodeAt(i) -13);  
    }

  }

  answer.toString();

  for(var x=0; x<answer.length; x++){
    answer[x] = parseInt(answer[x]);
  }


  //var realAnswer = String.fromCharCode(answer);

  return answer;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");
why is answer still returning as an array
when I call answer.toString()
it's still returning an array
Alister Najib Mada
@alistermada
Mar 15 2016 03:35
@SeanSaibot answer.toString() creates a new string from answer, but it doesn't change answer itself. You'll have to assign the results of answer.toString() to answer
gerbermein
@gerbermein
Mar 15 2016 03:35
@alexanderkopke It's working. I see I see, thank you so much!
CamperBot
@camperbot
Mar 15 2016 03:35
gerbermein sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 510 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
Sean
@ofperfection
Mar 15 2016 03:35
thanks @alistermada
CamperBot
@camperbot
Mar 15 2016 03:35
seansaibot sends brownie points to @alistermada :sparkles: :thumbsup: :sparkles:
:star: 384 | @alistermada | http://www.freecodecamp.com/alistermada
Alister Najib Mada
@alistermada
Mar 15 2016 03:36
You're welcome
Tikh
@atikh
Mar 15 2016 03:37
I need help :(
I’m on this lesson: Return Early Pattern for Functions
Tikh
@atikh
Mar 15 2016 03:38
// Setup
function abTest(a, b) {
  // Only change code below this line
  if (a < 0 && b < 0) {
    return "undefined";
  }
}  

  // Only change code above this line

  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// Change values below to test your code
abTest(2,2);
what is wrong here
Modify the function abTest so that if a or b are less than 0 the function will immediately exit with a value of undefined.
Sean
@ofperfection
Mar 15 2016 03:38
you ahve and instead of or
*have
&& AND
|| or
Tikh
@atikh
Mar 15 2016 03:38
or is ||
ahhh
that’s right!
gah, still not working :(
what am I doing wrong
// Setup
function abTest(a, b) {
  // Only change code below this line
  if (a < 0 || b < 0) {
    return undefined;
  }
}  

  // Only change code above this line

  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// Change values below to test your code
abTest(2,2);
Alexander Køpke
@alexanderkopke
Mar 15 2016 03:40
var realAnswer =[];
  for(var x=0; x<answer.length; x++){
    realAnswer.push(String.fromCharCode(answer[x]));
  }
@SeanSaibot I thought you were going in this direction
Alister Najib Mada
@alistermada
Mar 15 2016 03:42
@joegereghty1989 Your <h2> shouldn't be in between the <style> tags. The <style> tags should be on top of the rest of your code
Alexander Køpke
@alexanderkopke
Mar 15 2016 03:42
@joegereghty1989 inside <style> </style> shouldn't be other tags like <h2> but h2{color:blue;] would work
Sean
@ofperfection
Mar 15 2016 03:44
@atikh what challenge are you on
Tikh
@atikh
Mar 15 2016 03:44
any thoughts @SeanSaibot
op!
the Return Early Pattern for Functions @SeanSaibot
Alister Najib Mada
@alistermada
Mar 15 2016 03:45

@joegereghty1989 To change the <h2>'s color check out the example given:

<style>
  h2 {color: red;}
</style>

That would change its color to red. What you need to do is change it to blue.

Alexander Køpke
@alexanderkopke
Mar 15 2016 03:45
<style>
//here goes css styling
// you select the element like this
h2{
    color:blue;
    }
</style>
//now comes the html part
<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>
@joegereghty1989 This is one way of doing it
Sean
@ofperfection
Mar 15 2016 03:46
@atikh I pasted your code into mine and it ran
You may have a bug
I used this: if(a < 0 || b<0){
return undefined;
}
you might try clearing your cache, refreshing your challenge, and pasting it in
Tikh
@atikh
Mar 15 2016 03:48
good thinking! let me try @SeanSaibot
thanks so much for your help. greatly appreciated! @SeanSaibot
CamperBot
@camperbot
Mar 15 2016 03:48
atikh sends brownie points to @seansaibot :sparkles: :thumbsup: :sparkles:
:star: 282 | @seansaibot | http://www.freecodecamp.com/seansaibot
Sean
@ofperfection
Mar 15 2016 03:48
I spent a lot of time trying to fix code when it was a bug in the ide :P
Joseph Gereghty
@joegereghty1989
Mar 15 2016 03:49
<style>
h2 {color: blue;}
</style>
<h2>CatPhotoApp</h2>
gotcha
thanks guys
Alister Najib Mada
@alistermada
Mar 15 2016 03:49
:+1:
Sean
@ofperfection
Mar 15 2016 03:50
if I wanted to change a series of string numbers to integers
why wouldn't this work:
for(var x=0; x<answer3.length; x++){
answer3[x] = parseInt(answer3[x]);
}
it's throwing an error about 'cannot assign to read only property '0' of string
Richard
@richao03
Mar 15 2016 03:55
hey guys
is anyone here?
Sean
@ofperfection
Mar 15 2016 03:55
Yes.
Richard
@richao03
Mar 15 2016 03:55
hello sean sei bot
sorry, seansaibot
Sean
@ofperfection
Mar 15 2016 03:56
Hi
DJ
@qualitymanifest
Mar 15 2016 03:56
@SeanSaibot can you paste the full code or at least show me what answer3 is
Richard
@richao03
Mar 15 2016 03:56
im stuck on creating a div element that nests all the HTML code
Sean
@ofperfection
Mar 15 2016 03:56
I'd be happy to try to help while someone tries to help me
DJ
@qualitymanifest
Mar 15 2016 03:57
@SeanSaibot my first thought is i would use Number() instead of parseInt(), but that's just me
Richard
@richao03
Mar 15 2016 03:57
does that mean ,<div> at the very very top of the page?
Sean
@ofperfection
Mar 15 2016 03:57
Okay, @qualitymanifest Here is the code: full disclosure, I know it's not a very efficient way to do it, but I'm just trying to fumble through
Adam Snetiker
@ajsnetiker
Mar 15 2016 03:57
@richao03 <div> HTML code </div>
Sean
@ofperfection
Mar 15 2016 03:57
function rot13(str) { // LBH QVQ VG!


  var answer = [];


  for(var i=0; i<str.length; i++){
    if(str.charCodeAt(i) == 32 ){
answer.push(32);  
    } else {
     answer.push(str.charCodeAt(i) -13);  
    }

  }

 var answer3 =answer.toString();

  for(var x=0; x<answer3.length; x++){
    answer3[x] = parseInt(answer3[x]);
  }


  var realAnswer = String.fromCharCode(answer3);

  return answer;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");
David Young
@dayvidwhy
Mar 15 2016 03:57
@qualitymanifest i think hes assuming they are numbers
Sean
@ofperfection
Mar 15 2016 03:58
I'm trying to take a string of numbers and turn them into a series of integers
ctal
@ctal
Mar 15 2016 03:58
@SeanSaibot In javascript string are immutable, which means you can't reassign a single character in a string with string[n] = ...
Alister Najib Mada
@alistermada
Mar 15 2016 03:58
@SeanSaibot Strings are immutable. That means you can't change them. What you can do however is split it into an array, change the values in that array, and join them back together
Sean
@ofperfection
Mar 15 2016 03:58
Thanks @ctal and @alistermada
CamperBot
@camperbot
Mar 15 2016 03:58
seansaibot sends brownie points to @ctal and @alistermada :sparkles: :thumbsup: :sparkles:
:warning: seansaibot already gave alistermada points
:star: 281 | @ctal | http://www.freecodecamp.com/ctal
David Young
@dayvidwhy
Mar 15 2016 03:59
@SeanSaibot you might have wanted to provide some more context with your input
it looked like you were talking about an array
DJ
@qualitymanifest
Mar 15 2016 03:59
looks like it got taken care of
Sean
@ofperfection
Mar 15 2016 03:59
I don't know enough to know I don't know enough
for you to know enough
you know?
Richard
@richao03
Mar 15 2016 04:02
so im trying to add <div .container-fluid> HTML code </div>
does that mean i add it all the way to the top of the page?
because i tried... but it says im wrong
David Young
@dayvidwhy
Mar 15 2016 04:04
you’re not applying the class to the div correctly, should be <div class=“class1 class2”></div>
Richard
@richao03
Mar 15 2016 04:04
because it should be <div class = container-fluid> HTML code </div>
thank you sir
Sean
@ofperfection
Mar 15 2016 04:04
make sure to put the class name in parentheses
Richard
@richao03
Mar 15 2016 04:04
like <div class = (container-fluid)>
that?
Sean
@ofperfection
Mar 15 2016 04:05
<div class="classname">
Richard
@richao03
Mar 15 2016 04:05
got it!
Sean
@ofperfection
Mar 15 2016 04:05
i am tired
Richard
@richao03
Mar 15 2016 04:05
ty
Sean
@ofperfection
Mar 15 2016 04:05
lmao
quotation marks
Richard
@richao03
Mar 15 2016 04:05
did u get ur javascript to work seansai?
im better at JS than i am at CSS
Sean
@ofperfection
Mar 15 2016 04:05
ehhhhhhhhhh no
Richard
@richao03
Mar 15 2016 04:05
i can try
@SeanSaibot i can try to help
waruwaruwaru
@waruwaruwaru
Mar 15 2016 04:11

Hello classmates, I have a little trouble understanding the section in "Convert JSON Data to HTML"
In this code

json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<b>" + key + "</b>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});

I'm not sure how this code is working. What function am I calling and what value am I passing in to these function. Also I'm not very familiar with the syntax: html += "<div class ='cat'>"

David Young
@dayvidwhy
Mar 15 2016 04:12
foreach is just an iterator like a for loop
for each thing your doing that function where each time the value is called key
waruwaruwaru
@waruwaruwaru
Mar 15 2016 04:15
in this code, where is it getting all the data like:
id: 2
imageLink: https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg
codeNames: The Doctor,Loki,Joker
David Young
@dayvidwhy
Mar 15 2016 04:16
from the json that got returned
waruwaruwaru
@waruwaruwaru
Mar 15 2016 04:17
where in the code does it show that we put these information in our json data
David Young
@dayvidwhy
Mar 15 2016 04:17
do you have the rest of the code
waruwaruwaru
@waruwaruwaru
Mar 15 2016 04:17
<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        json.forEach(function(val) {
          var keys = Object.keys(val);
          html += "<div class = 'cat'>";
          keys.forEach(function(key) {
            html += "<b>" + key + "</b>: " + val[key] + "<br>";
          });
  html += "</div><br>";
        });


        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>
o ok i see the .getJSON nvm i didnt catch that part
Candice
@smrtsmrf
Mar 15 2016 04:18
I need some help fixing my buttons to the bottom right corner of my div. I can’t get them exactly where I want, and when I change the size of my browser window they go all over the place
David Young
@dayvidwhy
Mar 15 2016 04:18
@waruwaruwaru cats.json will contain the object its iterating over
Alister Najib Mada
@alistermada
Mar 15 2016 04:21
@smrtsmrf Please post your code
It’s my facebook and twitter buttons that I’m trying to position at the bottom right of my quote-box
waruwaruwaru
@waruwaruwaru
Mar 15 2016 04:24
lol that quote
Alister Najib Mada
@alistermada
Mar 15 2016 04:26
Hmm... CSS is not something I'm really good at but I'll take a look
@smrtsmrf When you adjust the positions of your buttons, you are positioning them relative to the element they're immediately contained in
Candice
@smrtsmrf
Mar 15 2016 04:31
@alistermada yeah. right now they’re inside my quote-box div
Alister Najib Mada
@alistermada
Mar 15 2016 04:32
Your buttons are immediately within <div class="col-md-2 "> though
not the quote-box
Which is why your buttons aren't moving to the bottom of the quote-box
If you want to move both buttons, you'll have to move their common parent, <div class="row" > which is the immediate child of your quote-box
@smrtsmrf Try giving <div class="row" > a unique id or class and then adjust the CSS for that div instead of the buttons directly
Candice
@smrtsmrf
Mar 15 2016 04:38
@alistermada That seems to get me closer. But still when I go to the full view, they show up at the top. I used this code
#buttonRow {
  display: table-cell;
  vertical-align: bottom;
}
That same idea is what I used to center the text
Alister Najib Mada
@alistermada
Mar 15 2016 04:43
I'm just as confused... hmmm
@smrtsmrf What classes does your buttonRow have?
Try removing the Bootstrap "col" classes from your buttonRow div. Don't think they are needed
William Campbell
@Sufuninja
Mar 15 2016 04:52
I got it this far but I have to goto sleep. Maybe it will help> @smrtsmrf
http://codepen.io/Sufuninja/pen/PNbbGv?editors=1100
ACubed10
@ACubed10
Mar 15 2016 04:53
@Ronolibert how exactly can i use the chrome console to see what values i'm targeting, this is the 1st im hearing of this
William Campbell
@Sufuninja
Mar 15 2016 04:55
right click; inspect element: you’ll see tabs. you want to see ‘style’ on the right, and ‘elements 'on the main. you can change values and look through your html. @ACubed10
on mac, it’s command + control + i, to bring up the dev tools^
ACubed10
@ACubed10
Mar 15 2016 05:02
thanks @Sufuninja
CamperBot
@camperbot
Mar 15 2016 05:02
acubed10 sends brownie points to @sufuninja :sparkles: :thumbsup: :sparkles:
:star: 270 | @sufuninja | http://www.freecodecamp.com/sufuninja
Jose Mario
@jomesario
Mar 15 2016 05:07
ey, somebody, can help here
thanks @waruwaruwaru
CamperBot
@camperbot
Mar 15 2016 05:07
jomesario sends brownie points to @waruwaruwaru :sparkles: :thumbsup: :sparkles:
:star: 276 | @waruwaruwaru | http://www.freecodecamp.com/waruwaruwaru
Candelario Eguia
@CDEguia
Mar 15 2016 05:10
Hello coders :)

I could use a little help with this: function palindrome(str) {
str= str.toLowerCase();
str = str.replace(/\s+|,|./g,'');
str = str.replace(/0-0/,'0_0');
var temp = str.split('').reverse().join('');
// Good luck!
return temp === str;
}

palindrome("0_0 (: /-\ :) 0-0");

returns false :(
William Campbell
@Sufuninja
Mar 15 2016 05:14
@CDEguia you can inclose your code in three single quotes ‘ : three before and three after to format it.
Candelario Eguia
@CDEguia
Mar 15 2016 05:15
'''function palindrome(str) {
str= str.toLowerCase();
str = str.replace(/\s+|,|./g,'');
str = str.replace(/0-0/,'0_0');
var temp = str.split('').reverse().join('');
// Good luck!
return temp === str;
}'''
CamperBot
@camperbot
Mar 15 2016 05:15
:bulb: to format code use backticks! ``` more info
Candelario Eguia
@CDEguia
Mar 15 2016 05:15
function palindrome(str) { str= str.toLowerCase(); str = str.replace(/\s+|,|./g,''); str = str.replace(/0-0/,'0_0'); var temp = str.split('').reverse().join(''); // Good luck! return temp === str; }
@Sufuninja cool thanks
CamperBot
@camperbot
Mar 15 2016 05:15
cdeguia sends brownie points to @sufuninja :sparkles: :thumbsup: :sparkles:
:star: 271 | @sufuninja | http://www.freecodecamp.com/sufuninja
Alister Najib Mada
@alistermada
Mar 15 2016 05:15
@CDEguia You should remove all non-alphanumeric characters first. That means "0_0 (: /-\ :) 0-0" would become "0000" by the time you check if it's a palindrome
Candelario Eguia
@CDEguia
Mar 15 2016 05:16
@alistermada what that seems like a total cheat... but I guess it would work
William Campbell
@Sufuninja
Mar 15 2016 05:17
function palindrome(str) {
str= str.toLowerCase();
str = str.replace(/\s+|,|./g,'');
str = str.replace(/0-0/,'0_0');
var temp = str.split('').reverse().join('');
// Good luck!
return temp === str;
}
Alister Najib Mada
@alistermada
Mar 15 2016 05:17

@CDEguia That's exactly what it asks for though.

You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols)

William Campbell
@Sufuninja
Mar 15 2016 05:17
there it is
Candelario Eguia
@CDEguia
Mar 15 2016 05:18
@alistermada woow you are totaly right. I missed that
@Sufuninja @alistermada thanks
CamperBot
@camperbot
Mar 15 2016 05:18
cdeguia sends brownie points to @sufuninja and @alistermada :sparkles: :thumbsup: :sparkles:
:warning: cdeguia already gave sufuninja points
:star: 386 | @alistermada | http://www.freecodecamp.com/alistermada
Alister Najib Mada
@alistermada
Mar 15 2016 05:18
:+1:
Candelario Eguia
@CDEguia
Mar 15 2016 05:24
function palindrome(str) {
  str = str.toLowerCase().replace(/\s+|,|\.|[^A-Za-z0-9]/g,'');
  var temp = str.split('').reverse().join('');
  // Good luck!
  return temp === str;
}
works beautifully
Thanks again
DJ
@qualitymanifest
Mar 15 2016 05:37
@CDEguia that's good but in regards to the regex, think about what you're saying here: \s+|,|\.|[^A-Za-z0-9] that's saying: replace spaces, commas, periods, and anything that isnt a letter or number
so replacing spaces, commas, and periods is unnecessary since you're going to replace non letters and non numbers anyway
Dilki Fernando
@DilFernando
Mar 15 2016 05:39
how to Nest a text input element within a form element.(Create a Form Element)
TheCodeJones
@TheCodeJones
Mar 15 2016 05:44
hello everyone, im having some trouble understanding the Target a Specific Child of an Element Using jQuery challenge, the very last line of the description says you must target the children of the element with the target class. i dont really understand that since the point is to animate the second child of the well element
i mean i got it to work, i just dont understand why i wouldnt use .well instead of .target
Iury Lazoski
@herbae
Mar 15 2016 05:58
Hi @TheCodeJones , could you get the help you need?
TheCodeJones
@TheCodeJones
Mar 15 2016 05:58
not really
i dont understand how $".target:nth-child(2)").addClass("animated bounce"); gets down to the second child of well, therse no "target" id so what is .target pointing at?
Iury Lazoski
@herbae
Mar 15 2016 06:01
heeh
i'm not sure
have you looked up the reference?
TheCodeJones
@TheCodeJones
Mar 15 2016 06:01
. is classes!
ctal
@ctal
Mar 15 2016 06:06
$($.target:nth-child(2)")... affects the second child element with class "target"

@TheCodeJones So within the parent well div, you have the following code

      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>

$".target:nth-child(2)").addClass("animated bounce"); looks for elements with class "target". If the element is the second occurrence of class "target" within the parent element, it makes that element bounce

TheCodeJones
@TheCodeJones
Mar 15 2016 06:09
@ctal ok cool, that makes sense, but how does it know to do that for both wells?
ctal
@ctal
Mar 15 2016 06:13
@TheCodeJones Actually what I said wasn't quite true - $(".target:nth-child(2)").addClass("animated bounce"); looks for all cases where class "target" is the second child element of a parent element. Because class "target" is the second child element in both well divs, the code causes both of them to bounce
TheCodeJones
@TheCodeJones
Mar 15 2016 06:15
so any time i have 2 or more targets under a single element it would bounce with this set up?
ctal
@ctal
Mar 15 2016 06:15
Anytime the class "target" is on the second element under an element (aka anytime the class "target" is on a child element)
Olzhas Aitkaliyev
@borsik
Mar 15 2016 06:16
This message was deleted
ctal
@ctal
Mar 15 2016 06:17
@TheCodeJones For example, the second element here would bounce:
<div class="well" id="left-well">
        <button class="btn btn-default not-target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default not-target" id="target3">#target3</button>
      </div>
But the second element would not bounce here:

<div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default not-target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
TheCodeJones
@TheCodeJones
Mar 15 2016 06:19
so for example, if i also added the class target to both of the wells, the right one would bounce, because its the second child of div class=col-xs-6?
simranjeet singh
@sima5911
Mar 15 2016 06:22
Use an ID Attribute to Style an Element [Try giving your form, which now has the id attribute of cat-photo-form, a green background.]. i didnt mean it.. somebody pls help me
Use an ID Attribute to Style an Element......
Maulik Darji
@maulikdarji
Mar 15 2016 06:26
@sima5911 You do it like:
#id_of_element{
style-property:value;
}
Mudit Bhutani
@muditbhutani
Mar 15 2016 06:28
This message was deleted
This message was deleted
ctal
@ctal
Mar 15 2016 06:28
@TheCodeJones Close, each well is under it's own <div class="well"> element
Each well is under its own <div class="col-xs-6">* element
But, each well is also the second child under the col-xs-6 div element <h4> being the first child
Mudit Bhutani
@muditbhutani
Mar 15 2016 06:29
what is wrong here
simranjeet singh
@sima5911
Mar 15 2016 06:29
Use an ID Attribute to Style an Element
Mudit Bhutani
@muditbhutani
Mar 15 2016 06:30
blob
TheCodeJones
@TheCodeJones
Mar 15 2016 06:30
i get it now
thanks @ctal
CamperBot
@camperbot
Mar 15 2016 06:30
thecodejones sends brownie points to @ctal :sparkles: :thumbsup: :sparkles:
:star: 283 | @ctal | http://www.freecodecamp.com/ctal
ctal
@ctal
Mar 15 2016 06:30
@TheCodeJones So, if you add "taget" to the classes for the left well and the right well, they will both bounce because they are both the second element under their parent element (second to h4)
Malin Sundin
@MaoMaolin
Mar 15 2016 06:31
good morning
TheCodeJones
@TheCodeJones
Mar 15 2016 06:32
on an only mildly related note, is .target included in these classes just for things like that ( as far as these challenges go)?
Maulik Darji
@maulikdarji
Mar 15 2016 06:32
@muditbhutani return collection;
Mudit Bhutani
@muditbhutani
Mar 15 2016 06:32
@maulikdarji thanks..such a dumb mistake
CamperBot
@camperbot
Mar 15 2016 06:32
muditbhutani sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:star: 559 | @maulikdarji | http://www.freecodecamp.com/maulikdarji
ctal
@ctal
Mar 15 2016 06:34
The .target class here appears to be just for the purpose of targeting elements to make them bounce in this case (at least I don't see any other effects)
Shinoy Jacob
@Borsaliino
Mar 15 2016 06:36
Hey guys. Just trying to do the portfolio website, but I'm kinda in a block. Any tips?
Just a mental block.
David Young
@dayvidwhy
Mar 15 2016 06:36
add some cats
did you make a footer?
are you using a framework like react or bootstrap?
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:37
@deedubwhy crazyCatLady.addClass(“allTheCats”);
cat people want more than just SOME
Marc Schöni
@marcschoeni
Mar 15 2016 06:37
<div class="col-md-3">
        <button class="btn btn-block" href="http://www.freecodecamp.com/marcschoeni"target="_blank">Free Code Camp</button>
      </div>
why open not the window when i click on the Button
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:40
@Borsaliino Develop a concept. Write out your different sections on paper. About Me, My Work, Social Media . Then figure out how you’re gonna build the site… from scratch, or with Bootstrap? If you’re using bootstrap use the starter template then maybe add a jumbotron underneath, maybe some thumbnails (components) for your portfolio section, icons for your social media links
David Young
@dayvidwhy
Mar 15 2016 06:40
@marcschoeni need to use <a href=“”></a> tags
@marcschoeni the browser doesnt understand why your putting a href inside a button tag
Shinoy Jacob
@Borsaliino
Mar 15 2016 06:41
Thanks, @ajsnetiker
CamperBot
@camperbot
Mar 15 2016 06:41
borsaliino sends brownie points to @ajsnetiker :sparkles: :thumbsup: :sparkles:
:star: 301 | @ajsnetiker | http://www.freecodecamp.com/ajsnetiker
David Young
@dayvidwhy
Mar 15 2016 06:41
the <a> tag has a click event listener built into it by default in html5, you need to add one using js if you want <button> to as well
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:41
@Borsaliino Here’s mine you can look at. I used Bootstrap with variosu components and font-awesome links for social media along with custom CSS. (Look up fontawesome, it gives you a ton of icons you can use that make it very easy).
http://www.adamsonlineportfolio.com/apps/portfolio/
It’s not perfect but I didn’t spend too much time on it, just wanted to do something unique that I haven’t done before.
Marc Schöni
@marcschoeni
Mar 15 2016 06:42
hehe grml thanks @deedubwhy
CamperBot
@camperbot
Mar 15 2016 06:42
marcschoeni sends brownie points to @deedubwhy :sparkles: :thumbsup: :sparkles:
:star: 334 | @deedubwhy | http://www.freecodecamp.com/deedubwhy
Malin Sundin
@MaoMaolin
Mar 15 2016 06:43
how do i make a label in jquery for the challenge in fcc?
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:43
@MaoMaolin what kind of label? What exactly does it say?
Malin Sundin
@MaoMaolin
Mar 15 2016 06:43

ust like we labeled our wells, we want to label our buttons.

Give each of your button elements text that corresponds to its id's selector.

i made a id for each button
David Young
@dayvidwhy
Mar 15 2016 06:44
@MaoMaolin so put text inside the tags with the id’s that matches them
TheCodeJones
@TheCodeJones
Mar 15 2016 06:44
what is DOM that i have been hearing about?
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:45
@MaoMaolin That would be something like
 $(#buttonID’).text(“whatever here”);
Malin Sundin
@MaoMaolin
Mar 15 2016 06:45
it looks like this atm
how do i paste it in here?
found it
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1"></button>
        <button class="btn btn-default target" id="target2"></button>
        <button class="btn btn-default target" id="target3"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4"></button>
        <button class="btn btn-default target" id="target5"></button>
        <button class="btn btn-default target" id="target6"></button>
      </div>
    </div>
  </div>
</div>
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:46
@TheCodeJones DOM stands for Document Object Model. It refers to the heirarchy of an HTML page, which includes all tags and attributes and things. So, for example, in order to manipulate different tags, you use selectors like ‘a’ for links, ‘body’, ‘img’, etc. for different tags, along with classes and IDs. It’s manipulated through javascript, jquery etc. in order to dynamically edit a page
Malin Sundin
@MaoMaolin
Mar 15 2016 06:47
i get that i should put the label in each of the button lines
TheCodeJones
@TheCodeJones
Mar 15 2016 06:47
ok thanks @ajsnetiker
CamperBot
@camperbot
Mar 15 2016 06:47
thecodejones sends brownie points to @ajsnetiker :sparkles: :thumbsup: :sparkles:
:star: 302 | @ajsnetiker | http://www.freecodecamp.com/ajsnetiker
Malin Sundin
@MaoMaolin
Mar 15 2016 06:47
but i dont know what to write, cause just label="target1" dont do it
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:47
@MaoMaolin This has nothing to do with jQuery then. Like @deedubwhy said, put the name of the target before </button>. So it’ll be Target1, Target2, etc. between those 2 tags
then those buttons will show that text
Malin Sundin
@MaoMaolin
Mar 15 2016 06:47
aha so just the text then
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:47
yeah
Malin Sundin
@MaoMaolin
Mar 15 2016 06:47
haha i feel so stupid now :P
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:48
but if you were doing it in jQuery it would be the way I just did it
Malin Sundin
@MaoMaolin
Mar 15 2016 06:48
thanks @ajsnetiker @deedubwhy
CamperBot
@camperbot
Mar 15 2016 06:48
maomaolin sends brownie points to @ajsnetiker and @deedubwhy :sparkles: :thumbsup: :sparkles:
:star: 303 | @ajsnetiker | http://www.freecodecamp.com/ajsnetiker
:star: 335 | @deedubwhy | http://www.freecodecamp.com/deedubwhy
Malin Sundin
@MaoMaolin
Mar 15 2016 06:48
aha
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:48

In this case it would be

$(‘button#target1’).text(“Target1”);

and you would do the same thing for the other 5

Malin Sundin
@MaoMaolin
Mar 15 2016 06:49
ok
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:49
for jquery. For regular javascript it would be document.getElementById(“target1”).text(“Target1”); JQuery just makes the first part shorter
Malin Sundin
@MaoMaolin
Mar 15 2016 06:50
slow down there, im a really n00b yet :P
started coding yesterday
David Young
@dayvidwhy
Mar 15 2016 06:50
text() is a jquery function
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:50
lol you got through quite a bit then!
yeah
David Young
@dayvidwhy
Mar 15 2016 06:50
your looking for .innerHTML()
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:50
my bad it would be innerHTML
David Young
@dayvidwhy
Mar 15 2016 06:50

ditchjquery

Adam Snetiker
@ajsnetiker
Mar 15 2016 06:51
yeah a lot of people say that actually
Malin Sundin
@MaoMaolin
Mar 15 2016 06:51
well it was really fun and rewarding so i almost couldnt stop :P
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:51
I’ve read that one already!
David Young
@dayvidwhy
Mar 15 2016 06:51
¯_(ツ)_/¯
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:51
I love jQuery but I can do without it also. I’ve been using it in my FCC apps though because it’s really easy, especially once I learned how to access the APIs for weather and stuff
David Young
@dayvidwhy
Mar 15 2016 06:51
no choice, industry wont ditch it
yeah
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:52
i hope they don’t, I don’t think they should personally but it depends what you want to accomplish
it IS javascript, so you can mix and match, but its nice to be consistent
David Young
@dayvidwhy
Mar 15 2016 06:52
some functions are pretty bloated
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:52
i used to hate programming, i thought even jquery was super advanced and would be ridiculously hard to learn but i never focused on it
David Young
@dayvidwhy
Mar 15 2016 06:52
its okay we can make faster computers
not overly
but like the guy said
he basically rewrote jquery
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:53
now i feel like an expert compared to beginners even though I’m really not an expert… but since i started FreeCodeCamp I’ve learned more by helping people than the learning itself because i can find ways to help solve their problems
although ive learned the most by googling trying to do projects, they don’t tell you how to use API’s you have to look that up yourself
it took me HOURS to figure out how to read the random quote api but once i figured it out it was like the best day of my life
Malin Sundin
@MaoMaolin
Mar 15 2016 06:54
@ajsnetiker i got really happy yesterday that i actually got where the problem was in 2cases when people asked here
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:54
thats good!
@MaoMaolin good job
Malin Sundin
@MaoMaolin
Mar 15 2016 06:54
it´s not much but since i wouldnt have none 2days ago its a nice leap
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:55
yep
Malin Sundin
@MaoMaolin
Mar 15 2016 06:55
i really really hope that i will like this so much right now as in a couple of weeks
David Young
@dayvidwhy
Mar 15 2016 06:55
@MaoMaolin you probably won't
it does get harder
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:55
The more you learn the more you’ll realize you know when people start asking basic questions like “how do I add the id CatPhotoApp to a div tag?"
David Young
@dayvidwhy
Mar 15 2016 06:55
the idea is to keep going even if you don’t like it, because if you give it time it gets better
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:56
it does get harder, but I love it more than ever, i used to REALLY hate it
Malin Sundin
@MaoMaolin
Mar 15 2016 06:56
@deedubwhy yes i know, and i study other things right now so. But i get really happy when i actually GET the things i done, and that wont change
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:56
but i love problem solving. I had one job where i worked on algorithsm for DVD games to optimize use of the memory space and figure out next player and scoring and stuff. It’s like a big puzzle, a big game, and its amazing once you get it to work properly
Malin Sundin
@MaoMaolin
Mar 15 2016 06:56
i think im finally up for the challenge
Adam Snetiker
@ajsnetiker
Mar 15 2016 06:57
The biggest thing for me is even though I’m doing a tutorial through here i’ve made every single project my own, and I want to make sure it looks nothing like anybody else's
Malin Sundin
@MaoMaolin
Mar 15 2016 06:57
@ajsnetiker haha well that´s a challenge
i wont tell anyone that i am doing this until maybe a year or so, cause i wanna do this all for myself.
well okay i must tell people, cause im hoping to do code and coffee :P
AslamKhan810
@AslamKhan810
Mar 15 2016 07:31

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

h2 {
font-family: Lobster, Monospace;
}

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

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

img {src="https://bit.ly/fcc-relaxing-cat"
}
</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>

need to resize image to 100 px
i have added the style element
but it doesnt work
anybody online
Tej Pratap
@tejscript
Mar 15 2016 07:45
@AslamKhan810 remove img {src="https://bit.ly/fcc-relaxing-cat"
}
you already have added it in your html, you don't need it in style
AslamKhan810
@AslamKhan810
Mar 15 2016 07:50

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

h2 {
font-family: Lobster, Monospace;
}

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

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

doesnt work
Tej Pratap
@tejscript
Mar 15 2016 07:51
remove </style><style> tag which is before .smaller-image class
your whole css should be under one style tag
AslamKhan810
@AslamKhan810
Mar 15 2016 07:53
the error shows that img element should have the class smaller image
Tej Pratap
@tejscript
Mar 15 2016 08:01
<h2 class="red-text smaller-image">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat">
put the class smaller-image inside h2 element class.
like shown above
manoelbueno
@manoelbueno
Mar 15 2016 08:13
@thecodejones open a page and press f12 if you are using firefox or google chrome. that's the dom working
Akkal Bista
@akkalbist55
Mar 15 2016 08:25
i nead help Delete all three of your jQuery functions from your document ready function.
Ashraful Islam
@iashraful
Mar 15 2016 08:36
morning! :coffee:
Malin Sundin
@MaoMaolin
Mar 15 2016 08:37
morning @iashraful :shipit:
Ashraful Islam
@iashraful
Mar 15 2016 08:37
@MaoMaolin can't ship my coffee, I need to drink it myself
:D
Malin Sundin
@MaoMaolin
Mar 15 2016 08:37
@iashraful i already drank my coffee
Ashraful Islam
@iashraful
Mar 15 2016 08:38
:D I wish we could share coffee in github
just clone, build and drink :D
Malin Sundin
@MaoMaolin
Mar 15 2016 08:39
:coffee: for every1!
i so wish i could clone myself, and have like a mastermind who get all the knowledge
heathcliff
@Allen-one
Mar 15 2016 08:44
Browser and Text zoom should be at 100%?How doing?
Niko Salonen
@nikosalonen
Mar 15 2016 08:48
@Allen-one Ctrl 0
@MaoMaolin surely one cup isn't enough for swede? :D
Malin Sundin
@MaoMaolin
Mar 15 2016 08:52
@nikosalonen never, and it should be as dark as a black hole in the universe
Niko Salonen
@nikosalonen
Mar 15 2016 08:53
exacly :D
Malin Sundin
@MaoMaolin
Mar 15 2016 08:55
@nikosalonen when i was in Florida once, well the coffee was tea
Niko Salonen
@nikosalonen
Mar 15 2016 09:00
but their coffee isn't as good.
i usually buy arvid nordquist
slovelys
@slovelys
Mar 15 2016 09:01
大家好
heathcliff
@Allen-one
Mar 15 2016 09:01
@nikosalonen thx.it's ok
CamperBot
@camperbot
Mar 15 2016 09:01
allen-one sends brownie points to @nikosalonen :sparkles: :thumbsup: :sparkles:
:star: 340 | @nikosalonen | http://www.freecodecamp.com/nikosalonen
heathcliff
@Allen-one
Mar 15 2016 09:02
@slovelys china?
slovelys
@slovelys
Mar 15 2016 09:02
yes
Malin Sundin
@MaoMaolin
Mar 15 2016 09:09
@nikosalonen very good choice, i buy that coffee too
heathcliff
@Allen-one
Mar 15 2016 09:16
me too @slovelys
Bill
@billcanada
Mar 15 2016 09:40
@nikosalonen how do you use Ctrl 0 and how?
xysti
@xysti
Mar 15 2016 09:45
how to make one class with 3 selectors?
Khalid Dar
@khaldar34uk
Mar 15 2016 09:47

Could someone help me with changing the color of text <h2 style="color:blue">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>

Malin Sundin
@MaoMaolin
Mar 15 2016 09:52

Could someone help me with changing the color of text <h2 style="color:blue">CatPhotoApp</h2>

<p style="color:red">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>

try that
<p style="color:red">
Kaesang Abimanyu
@kaesang
Mar 15 2016 09:53
@xysti one class with 3 selectors? <div class="red border box"></div>
Malin Sundin
@MaoMaolin
Mar 15 2016 09:53
@khaldar34uk check that
Khalid Dar
@khaldar34uk
Mar 15 2016 09:53
Ok, thanks @MaoMaolin !
CamperBot
@camperbot
Mar 15 2016 09:53
khaldar34uk sends brownie points to @maomaolin :sparkles: :thumbsup: :sparkles:
:star: 113 | @maomaolin | http://www.freecodecamp.com/maomaolin
xysti
@xysti
Mar 15 2016 09:53
im doing the target the same element with multiple jquery selectors see
Varun
@varunamrutiya
Mar 15 2016 09:54
var sentmail = Async.runSync(function(){ var temp; bm.messages.sent.list(function(value) { //console.log(value); temp = value; }); console.log(temp); }); }
temp variable remains undefined
xysti
@xysti
Mar 15 2016 09:54
@kaesang
Varun
@varunamrutiya
Mar 15 2016 09:54
'''
CamperBot
@camperbot
Mar 15 2016 09:54
:bulb: to format code use backticks! ``` more info
Varun
@varunamrutiya
Mar 15 2016 09:56
var sentmail = Async.runSync(function(){ var temp; bm.messages.sent.list(function(value) { //console.log(value); temp = value; }); console.log(temp); }); }
Varun
@varunamrutiya
Mar 15 2016 09:57
var sentmail = Async.runSync(function(){
          var temp;
          bm.messages.sent.list(function(value) {
              //console.log(value);
              temp = value;
            });
            console.log(temp);
          });
        }
temp is not populated
xysti
@xysti
Mar 15 2016 10:03
anyone?
Blauelf
@Blauelf
Mar 15 2016 10:03
@xysti Use three selectors, addClass one of the three classes to each.
Kaesang Abimanyu
@kaesang
Mar 15 2016 10:07

@xysti use this <script>
$(document).ready(function() {

$("button").each(function(){

  $(this).addClass("animated");

});

$(".btn").each(function(){

  $(this).addClass("animated");

});

$("#target1").each(function(){

  $(this).addClass("animated");

});

$("#target1").each(function(){

  $(this).addClass("animated shake btn-primary");

});

});
</script>

Niko Salonen
@nikosalonen
Mar 15 2016 10:07
@billcanada just press ctrl and 0 to reset zoom if you have any. if nothing happens you probably don't have any zoom active
Blauelf
@Blauelf
Mar 15 2016 10:08
@kaesang Why .each? $("button").addClass("animated"); works well. Also, this is not how it is meant to work, the three selectors should get different classes, making #target1 (which is targeted by all three) get all three classes.
Kaesang Abimanyu
@kaesang
Mar 15 2016 10:10
This message was deleted
This message was deleted
@xysti the correct this one
<script>
$(document).ready(function() {

$("button").addClass("animated");

$(".btn").addClass("animated");

$("#target1").addClass("animated");

$("#target1").addClass("animated shake btn-primary");

});
</script>
Blauelf
@Blauelf
Mar 15 2016 10:13

One possible solution would be

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

(could be any combination, as long as the three selectors get different classes)

Age
@Shirmardi
Mar 15 2016 10:15
for the random quote generator, did I miss the part on Freecodecamp where they teach you how to put a tweet button on your page?
Kaesang Abimanyu
@kaesang
Mar 15 2016 10:16
@Blauelf thanks
CamperBot
@camperbot
Mar 15 2016 10:16
kaesang sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star: 1416 | @blauelf | http://www.freecodecamp.com/blauelf
Brendan Kinahan
@BKinahan
Mar 15 2016 10:16
@Shirmardi nope, but google has your back :D
Age
@Shirmardi
Mar 15 2016 10:17
@BKinahan I've tried googling, I get a load of dev stuff I don't understand. In the end I just used twitters own little tweet button maker, but now I'm stuck with not knowing how to copy the quote in to the actual tweet automatically.
Blauelf
@Blauelf
Mar 15 2016 10:19
https://dev.twitter.com/web/tweet-button/web-intent is probably most useful, update that link (at least its text parameter) on quote generation.
Brendan Kinahan
@BKinahan
Mar 15 2016 10:21
@Shirmardi use a javascript function to update the href attribute of the link each time a new quote is generated.
ajaybti
@ajaybti
Mar 15 2016 10:41
how to nest two div class element in single div class as how to do in this code <div class="row">
<div class="col-xs-6">
<div class="col-xs-6">
David Young
@dayvidwhy
Mar 15 2016 10:43
you can put divs, inside divs.
<div>
  <div>
  </div>
</div>
Sanne
@sannek
Mar 15 2016 10:43
What is your question? Remember you need to close your <div> tags
joinkumaresh
@joinkumaresh
Mar 15 2016 10:48
thanks @sannek
CamperBot
@camperbot
Mar 15 2016 10:48
joinkumaresh sends brownie points to @sannek :sparkles: :thumbsup: :sparkles:
:warning: joinkumaresh already gave sannek points
ajaybti
@ajaybti
Mar 15 2016 10:48
@sannek my question is how to nest two div class of col-xs-6 in div class of row in this code <div class="row">
<div class="col-xs-6">
<div class="col-xs-6">
</div>
slovelys
@slovelys
Mar 15 2016 10:50
@Allen-one haha hao qiao a
Mufaddal B
@invinciblemuffi
Mar 15 2016 11:20
wiki Arguments Optional
CamperBot
@camperbot
Mar 15 2016 11:20

:point_right: algorithm arguments optional [wiki]

Explanation:

It can be quite complicated to understand what needs to be done. There are always many ways to do something when coding but regardless of the algorithm used, we have to create a program that does the following:

  • It has to add two numbers passed as parameters and return the sum.
  • It has to check if any of the numbers are actual numbers, otherwise return undefined and stop the program right there.
  • It has to check if it has one or two arguments passed. More are ignored.
  • If it has only one argument then it has to return a function that uses that number and expects another one, to then add it.

:pencil: read more about algorithm arguments optional on the FCC Wiki

Robert Trigg
@rtrigg
Mar 15 2016 11:22
Heh, haven't seen philosoraptor in a while :)
Tolulope folorunso
@Tolufolorunso
Mar 15 2016 11:26
Im new here.... What to do to be a good web developer. Please help
Alexander Køpke
@alexanderkopke
Mar 15 2016 11:26
why.... oh why did they have to go extint before we could harnest its ironclad argumentations!
Robert Trigg
@rtrigg
Mar 15 2016 11:26
@Tolufolorunso did you try the exercises under the "map" on the main site?
@alexanderkopke :)
Alexander Køpke
@alexanderkopke
Mar 15 2016 11:30
I guess to be a good web developer you need practice. Projects, exercises, challenges, motivational articles, goals might help with that. Never give up. Come here often if you have trouble and also to help. Make it part of your life. Incidently, you have come to the possibly best course there is. Welcome @Tolufolorunso
mfadel
@mfadel
Mar 15 2016 11:34
echo "hello world";
CamperBot
@camperbot
Mar 15 2016 11:34
@mfadel said: echo "hello world";
Pradnya Joshi
@pradxj07
Mar 15 2016 11:36
Hello @mfadel
Alexander Køpke
@alexanderkopke
Mar 15 2016 11:37
php eh?
Bill
@billcanada
Mar 15 2016 11:37
@nikosalonen Got it. Thanks
CamperBot
@camperbot
Mar 15 2016 11:37
billcanada sends brownie points to @nikosalonen :sparkles: :thumbsup: :sparkles:
:star: 341 | @nikosalonen | http://www.freecodecamp.com/nikosalonen
Alexander Køpke
@alexanderkopke
Mar 15 2016 11:38
it's time for Archer! archer
Robert Trigg
@rtrigg
Mar 15 2016 11:39
new episode came out?
jayhomz
@jayhomz
Mar 15 2016 11:42
need help with this please Write a function queue which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The queue function should then return the element that was removed.
This message was deleted
function queue(arr, item) {
  // Your code here
  arr.push([6]);
 arr.shift();

  return item;  // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));
Niko Salonen
@nikosalonen
Mar 15 2016 11:45
push the iteminto your arr
jayhomz
@jayhomz
Mar 15 2016 11:47
can you post a sample code @nikosalonen
Robert Trigg
@rtrigg
Mar 15 2016 11:49
@nikosalonen do you mean arr.push([item]) instead of arr.push([6]) ?
Josemaría Navarro-Rubio Coello de Portugal
@josemarianrcdp
Mar 15 2016 11:51
Can someone help me? Your p element should be red.
Your p element should have the class red-text.
Captura de pantalla 2016-03-15 a las 12.52.06.png
Robert Trigg
@rtrigg
Mar 15 2016 11:53
@josemarianrcdp you changed the h2 element, the p element needs the class reference in it
jayhomz
@jayhomz
Mar 15 2016 11:53
just did this and it worked, i even don't understand it
Robert Trigg
@rtrigg
Mar 15 2016 11:53
the "Kitty ipsum..."
jayhomz
@jayhomz
Mar 15 2016 11:53
function queue(arr, item) {
  // Your code here
  arr.push(item);
 item = arr.shift();

  return item;  // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));
Josemaría Navarro-Rubio Coello de Portugal
@josemarianrcdp
Mar 15 2016 11:53
@rtrigg ThankYou!!
Robert Trigg
@rtrigg
Mar 15 2016 11:54
@jayhomz you are pushing "item" which is equal to 6 when you call the queue function in the second to last line
jayhomz
@jayhomz
Mar 15 2016 11:55
@josemarianrcdp do insert the class inside the p tag
<p class="red-text">Kitty ipsum,...... </p>
Josemaría Navarro-Rubio Coello de Portugal
@josemarianrcdp
Mar 15 2016 11:58
@jayhomz Thanks! it worked
CamperBot
@camperbot
Mar 15 2016 11:58
josemarianrcdp sends brownie points to @jayhomz :sparkles: :thumbsup: :sparkles:
:star: 186 | @jayhomz | http://www.freecodecamp.com/jayhomz
Robert Trigg
@rtrigg
Mar 15 2016 12:10
@jayhomz you could have "return arr.shift();" and get rid of the item = arr.shift();" line, I believe
William
@dwynewilly
Mar 15 2016 12:14
Hello Campers.. I am stuck at this challenge Of Basic Java Script the challenge is "Storing Values with the Equal Operator" I think i changed the code where i am not supposed to n i cant remember what to write
can anyone Help me Please
Thank You
jayhomz
@jayhomz
Mar 15 2016 12:15
post the code please @dwynewilly
Robert Trigg
@rtrigg
Mar 15 2016 12:15
@dwynewilly there is a "reset" button
William
@dwynewilly
Mar 15 2016 12:17
i saw the reset button
oooh Boy...
Thanks @rtrigg
CamperBot
@camperbot
Mar 15 2016 12:17
dwynewilly sends brownie points to @rtrigg :sparkles: :thumbsup: :sparkles:
:star: 66 | @rtrigg | http://www.freecodecamp.com/rtrigg
Michael Nazari
@mikenaza
Mar 15 2016 12:42
I'm having a little trouble with the quote machine. When the button is clicked a quote arrives. Clicking the button again doesn't do anything
I think it has to do with the following line of code
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback="
The button is probably working, it's just showing the same post when clicked. Above where is says "[post_per_page]=1". If you change the 1 to a different number you get a different quote
So maybe we could randomize that number?
Robert Trigg
@rtrigg
Mar 15 2016 12:52
@mikenaza sounds like a good plan, maybe this will help http://www.w3schools.com/jsref/jsref_random.asp
Michael Nazari
@mikenaza
Mar 15 2016 12:54
I'm just wondering where can I use that method?
I mean it's a URL link so I can mess with it right?
Robert Trigg
@rtrigg
Mar 15 2016 12:54
sure
well, i'm not sure, but try it :)
you might have to do some string manipulation
Michael Nazari
@mikenaza
Mar 15 2016 12:55
Oh I can concatenate
Robert Trigg
@rtrigg
Mar 15 2016 12:56
Yeah, try generating the random number, and then placing it in place of "1" in the link, you might have to split the string and then concatenate the pieces and the number
Michael Nazari
@mikenaza
Mar 15 2016 12:58
It works!
@rtrigg Thanks!
CamperBot
@camperbot
Mar 15 2016 12:58
mikenaza sends brownie points to @rtrigg :sparkles: :thumbsup: :sparkles:
:star: 87 | @rtrigg | http://www.freecodecamp.com/rtrigg
Robert Trigg
@rtrigg
Mar 15 2016 12:59
np
DinnerFingers
@DinnerFingers
Mar 15 2016 13:16
Hey has anyone done the Accessing Nested Objects in JSON challenge yet?
I'm a little stuck, just cleared my code as I think it was awful lol
Struggling with the glovebox part
// Setup
var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

// Only change code below this line

var gloveBoxContents = myStorage.car[inside]."glove box"; // Change this line
Michael Nazari
@mikenaza
Mar 15 2016 13:22
Remember you can use dot notation for names that have a space
Robert Trigg
@rtrigg
Mar 15 2016 13:23
that's wild
Michael Nazari
@mikenaza
Mar 15 2016 13:23
@DinnerFingers Bracket notation should be used when referencing a value with a space in it
DinnerFingers
@DinnerFingers
Mar 15 2016 13:24
I worked it out finally lol, thanks!! @mikenaza
CamperBot
@camperbot
Mar 15 2016 13:24
dinnerfingers sends brownie points to @mikenaza :sparkles: :thumbsup: :sparkles:
:star: 280 | @mikenaza | http://www.freecodecamp.com/mikenaza
DinnerFingers
@DinnerFingers
Mar 15 2016 13:24
~I was being idiotic basically :p
Michael Nazari
@mikenaza
Mar 15 2016 13:24
@DinnerFingers Glad I could help :)
I do that a lot haha
DinnerFingers
@DinnerFingers
Mar 15 2016 13:25
The worst part of coding is knowing when it doesn't work the way you expect its because you're the idiot lol
also the best part too if you can get over it quickly :D
Robert Trigg
@rtrigg
Mar 15 2016 13:25
=]
Michael Nazari
@mikenaza
Mar 15 2016 13:26
It's good to remember it's usually something simple. Something that's so clear and easy that we look past it, expecting it to be complicated
codercooooder
@codercooooder
Mar 15 2016 13:28
I'd invite anyone in this room who thinks they have a good eye to confirm that the second line in the following divs (the location names) are not centered. Am I right? It is barely off center, but it is off, no? http://codepen.io/ihatecoding/pen/qZqVyB?editors=1100#
DinnerFingers
@DinnerFingers
Mar 15 2016 13:30
Is this a padding problem?
Eurgh I am stuck again but same reason, I'm being dumb today apparently
codercooooder
@codercooooder
Mar 15 2016 13:32
@DinnerFingers are you talkin' to me? :0
sroujiel
@sroujiel
Mar 15 2016 13:33
Can someone explain how i should do this Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.
sorry i mean
DinnerFingers
@DinnerFingers
Mar 15 2016 13:33
sorry @codercooooder the comment about padding was lol
sroujiel
@sroujiel
Mar 15 2016 13:33
Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.
DinnerFingers
@DinnerFingers
Mar 15 2016 13:33
@sroujiel whats the name of the challenge?
sroujiel
@sroujiel
Mar 15 2016 13:34
Use the Bootstrap Grid to Put Elements Side By Side
Robert Trigg
@rtrigg
Mar 15 2016 13:34
^ this
sroujiel
@sroujiel
Mar 15 2016 13:34

this is what i have done so far

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

Blauelf
@Blauelf
Mar 15 2016 13:35
Maybe put some <div class="col-xs-4"> and </div> around each button?
Robert Trigg
@rtrigg
Mar 15 2016 13:35
@Blauelf has it
sroujiel
@sroujiel
Mar 15 2016 13:35
ohh separately but shouldn't div group things together ?
Robert Trigg
@rtrigg
Mar 15 2016 13:36
i feel like this isn't too different from @codercooooder's issue
DinnerFingers
@DinnerFingers
Mar 15 2016 13:36
@Blauelf is totally right @sroujiel
@sroujiel true enough, but divs in divs is normal
codercooooder
@codercooooder
Mar 15 2016 13:37
someone is having my issue??
sroujiel
@sroujiel
Mar 15 2016 13:37
Thanks @blauelf - im just curious why a <div class=col-xs-4"> </div> aroun all 3 at the same time didin't work cause before i had them the same way the "row" class what there
CamperBot
@camperbot
Mar 15 2016 13:37
sroujiel sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
codercooooder
@codercooooder
Mar 15 2016 13:37
do you guys agree the second lines are off?
CamperBot
@camperbot
Mar 15 2016 13:37
:star: 1421 | @blauelf | http://www.freecodecamp.com/blauelf
Robert Trigg
@rtrigg
Mar 15 2016 13:38
@codercooooder yeah they are
@codercooooder I think you might also need to use <div class="col-xs-4"></div> around your cities, maybe not xs-4, but another
codercooooder
@codercooooder
Mar 15 2016 13:40
huh? what you sayin' @rtrigg ?
:)
is that a css recognized class, @rtrigg ?
Robert Trigg
@rtrigg
Mar 15 2016 13:44
I'm not sure, as I'm still learning, but I see your span and div classes, but nothing to indicate a second line, in my window Sarah is the first person on the second line, but this changes if i resize my browser window, it looks like it's just printing however many it can and then going to the second line @codercooooder
codercooooder
@codercooooder
Mar 15 2016 13:45
but i mean, what do you mean by theis class name: div class="col-xs-4"
DinnerFingers
@DinnerFingers
Mar 15 2016 13:46

Hey can anyone tell me how I effed this up?

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

// Only change code below this line

var secondTree = myPlants.type[1].list[2];

I am having a hard time braining today

DinnerFingers
@DinnerFingers
Mar 15 2016 13:47
come to think of it I need list1
greg
@wearenotgroot
Mar 15 2016 13:47
@DinnerFingers try ------>
var secondTree = myPlants[1].list[2];
Robert Trigg
@rtrigg
Mar 15 2016 13:47
@codercooooder especially that image
Blauelf
@Blauelf
Mar 15 2016 13:47
A div with class "col-xs-4" creates a column that is 4/12 of a row (bootstrap uses multiples of 1/12) on XtraSmall or larger devices.
Robert Trigg
@rtrigg
Mar 15 2016 13:48
^
DinnerFingers
@DinnerFingers
Mar 15 2016 13:49
Thanks @wearenotgroot I managed to work out why I was wrong too :D
CamperBot
@camperbot
Mar 15 2016 13:49
dinnerfingers sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 966 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
Blauelf
@Blauelf
Mar 15 2016 13:49
@DinnerFingers myPlants is using an array literal ([...]), so it is an array containing objects, just like the property list of those objects holds an array each.
codercooooder
@codercooooder
Mar 15 2016 13:49
@rtrigg no bootstrap!!
Blauelf
@Blauelf
Mar 15 2016 13:50
col-xs-4 is bootstrap.
codercooooder
@codercooooder
Mar 15 2016 13:50
@Blauelf that's why i didn't know it @rtrigg
Robert Trigg
@rtrigg
Mar 15 2016 13:51
oh, you can't use it?
codercooooder
@codercooooder
Mar 15 2016 13:51
i don't want to
Robert Trigg
@rtrigg
Mar 15 2016 13:51
hehe
codercooooder
@codercooooder
Mar 15 2016 13:51
@rtrigg i want to keep it simple, use as few libraries as possible
@rtrigg i could do a table but i want to see if I can do this without one
Mayur godhani
@mayurgodhani
Mar 15 2016 13:53
Hi all
Robert Trigg
@rtrigg
Mar 15 2016 13:55
@codercooooder I don't know a lot of css, but maybe this might be a start? they talk about floats and inline blocks https://stackoverflow.com/questions/4938716/align-div-elements-side-by-side
@mayurgodhani hi
Mayur godhani
@mayurgodhani
Mar 15 2016 13:57
hi @rtrigg
ctal
@ctal
Mar 15 2016 14:01
@codercooooder are you having trouble centering the text
For each name (within the li)? Or centering each row of names?
codercooooder
@codercooooder
Mar 15 2016 14:03
@ctal i only want to center within the box..I'm not even 100% sure things are off, they look shifted ever so slightly further right than they should be though, am I crazy?
@ctal I want the names and the places perfectly centered within the box
Josemaría Navarro-Rubio Coello de Portugal
@josemarianrcdp
Mar 15 2016 14:06
how can i do this step? Your img element should have the class smaller-image.
Your image should be 100 pixels wide. Browser zoom should be at 100%.
Captura de pantalla 2016-03-15 a las 15.06.17.png
Matija
@Kozmo97
Mar 15 2016 14:08
put class="smaller-image" inside your img tag to apply a class to your image and inside your style tags create a new class .smaller-image { width: 100px; }
@josemarianrcdp
greg
@wearenotgroot
Mar 15 2016 14:08

@josemarianrcdp add a class smaller-image on the img elemet,

<img class="smaller-image">

but first you need to declare it in the style -tag as mentioned above

sroujiel
@sroujiel
Mar 15 2016 14:08

Hey guys - what am i doing wrong?

Your fa-thumbs-up icon should be located within the Like button.
Nest your i element within your button element.

<div class="col-xs-4">
<i class="fa fa-thumbs-up"><button class="btn btn-block btn-primary fa fa-thumbs-up">Like</button></i>
</div>

codercooooder
@codercooooder
Mar 15 2016 14:08
@ctal co you agree that my text is not perfectly centered int he box?? The deviation might not even be there, but I swear it looks slightly off to me.
Manish Giri
@Manish-Giri
Mar 15 2016 14:09
@sroujiel you have to nest the i element within the button element
sroujiel
@sroujiel
Mar 15 2016 14:10
Is that how you next it?
< <i class="fa fa-thumbs-up"> button class="btn btn-block btn-primary fa fa-thumbs-up">Like</button></i>
</div>
shubham7858
@shubham7858
Mar 15 2016 14:10
<script>
$(document).ready(function() {
$("button ").addClass("animated bounce ");
$(" .text-primary ").addclass("animated shake");

});
</script>
ctal
@ctal
Mar 15 2016 14:10
@codercooooder I see what you mean now, it does look like it could be slightly off, but it's so minor I'm not sure...
shubham7858
@shubham7858
Mar 15 2016 14:10
how to add well class in this code
ctal
@ctal
Mar 15 2016 14:10
The css looks right to center it to me, though I'm not a css expert
shubham7858
@shubham7858
Mar 15 2016 14:11
for animated and shake function
sroujiel
@sroujiel
Mar 15 2016 14:11
I've tried to next it inide the button but it still doesn't work - not sure if im nesting it properly
TDog-Masen
@TDog-Masen
Mar 15 2016 14:11

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

<style>
.smaller-imgae {
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">
<img class="smaller-imgae">

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

why is my image not smaller :((

sroujiel
@sroujiel
Mar 15 2016 14:11
< <i class="fa fa-thumbs-up"> button class="btn btn-block btn-primary fa fa-thumbs-up">Like</button></i>
</div>
Manish Giri
@Manish-Giri
Mar 15 2016 14:12
@sroujiel you're not nesting it at all, your i is outside the button, should be the reverse

@TDog-Masen combine these two

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

into

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

There should be only 1 image, you need to specify the class in that itself

Matija
@Kozmo97
Mar 15 2016 14:13
@TDog-Masen try like this <img src="https://bit.ly/fcc-relaxing-cat" class="smaller-image"> and then create a new class inside your style tag like so .smaller-image
shubham7858
@shubham7858
Mar 15 2016 14:13
<button><i class="fa fa-thumbs-up">like</i></button>
TDog-Masen
@TDog-Masen
Mar 15 2016 14:13
@Kozmo97 @Manish-Giri
Thanks a lot!
Manish Giri
@Manish-Giri
Mar 15 2016 14:13
@TDog-Masen also, your class smaller-image is spelled wrong in css
Matija
@Kozmo97
Mar 15 2016 14:13
@TDog-Masen np:D
Josemaría Navarro-Rubio Coello de Portugal
@josemarianrcdp
Mar 15 2016 14:14
@Kozmo97 @wearenotgroot ThankYou!!!!
sroujiel
@sroujiel
Mar 15 2016 14:15
@Manish-Giri thanks buddy
CamperBot
@camperbot
Mar 15 2016 14:15
sroujiel sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star: 759 | @manish-giri | http://www.freecodecamp.com/manish-giri
Manish Giri
@Manish-Giri
Mar 15 2016 14:15
@sroujiel welcome
codercooooder
@codercooooder
Mar 15 2016 14:16
guys i did all the work to post on stackOverflow, let's see what those ocd bastards figure out.
shubham7858
@shubham7858
Mar 15 2016 14:25
how to Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addclass(" animated fadeout");
});
</script>
Josemaría Navarro-Rubio Coello de Portugal
@josemarianrcdp
Mar 15 2016 14:27
How can i apply a class to my cat photo??? Create a class called thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo.
Manish Giri
@Manish-Giri
Mar 15 2016 14:27
@josemarianrcdp
<img class="className" src="source">
Matija
@Kozmo97
Mar 15 2016 14:27
@josemarianrcdp put class="thick-green-border" in the <img> tag
TDog-Masen
@TDog-Masen
Mar 15 2016 14:27

hey one question why can't i give my image a border 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;
}

.smaller-image {
width: 100px;
}


.thin-red-border img {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>

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

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

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

Manish Giri
@Manish-Giri
Mar 15 2016 14:28
@shubham7858 addClass has capital C
$("#target3").addclass(" animated fadeout");
John Deegan
@JohnDeegs
Mar 15 2016 14:29

Hey all :)

Anyone know why the background image I'm using in the d1 section of my portfolio http://codepen.io/JohnDeegs/pen/WwxwRp disappears when I view it on my mobile? When I change the screen size on my PC it scales perfectly, but it just disappears on my mobile and there's just a white background instead. Any ideas? Here's my CSS for quick viewing.

.d1{
  background: url("http://i.imgur.com/c5BfYzI.jpg") no-repeat center center fixed;
  background-size:cover;
  height: 855px;
  padding-top: 200px;
}

h2{
  color: #fff;
}

.btn{
  font-size: 20px;
  margin-top: 20%;
  border-radius: 17px;
}

.well {
  margin-top:12%;
}

img {
  height: 100%;
  width: 100%;
}

.d2{
  background: url("http://wallpaperswide.com/download/simple_gray_background-wallpaper-1366x768.jpg") no-repeat center center fixed;;
  background-size:cover;
  height: 855px;
  padding-top: 50px;
}
Matija
@Kozmo97
Mar 15 2016 14:29
<img class="smaller-image thin-red-border" src="https://bit.ly/fcc-relaxing-cat"> try this
@TDog-Masen
shubham7858
@shubham7858
Mar 15 2016 14:29
thanku @Manish-Giri
Kris Tarling
@KrisTarling
Mar 15 2016 14:31
@JohnDeegs the image isn't loading on my screen either - probably imgur blocking the link
Robert Trigg
@rtrigg
Mar 15 2016 14:31
so much learning
rahulmidha
@rahulmidha
Mar 15 2016 14:31
hi freecoders. i need mysqlyog.!! tried downloading from repository of github(https://github.com/webyog/sqlyog-community/wiki/Downloads). But when a try to create a connection, it gives an error that connection can not be made on localhost.. PLEASE HELP>>!!
John Deegan
@JohnDeegs
Mar 15 2016 14:31
@KrisTarling Does imgur have known compatibility issues with codepen?
Kris Tarling
@KrisTarling
Mar 15 2016 14:31
@JohnDeegs yep, I tried a different image and it works. Try hosting it somewhere else
John Deegan
@JohnDeegs