These are chat archives for FreeCodeCamp/Help

8th
Feb 2017
Rob
@robbyg4307
Feb 08 2017 00:00

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

Here's the correct answer. Thanks all!
Alex Uvere
@alexuvere
Feb 08 2017 00:01
@Noby707 Oh ok I am sorry!! I havent been on here since November. Sorry
Ahmed Osman
@Noby707
Feb 08 2017 00:01
No it's ok
juana pu
@juanapu
Feb 08 2017 00:01
@ImJustKenny i copied the same code from codepen to sublime, it works well in sublime~~
Alex Uvere
@alexuvere
Feb 08 2017 00:01
@Noby707 The name of the challenege is size your image. its a hard one for me.
I still can figure it out.
Cant*
Cherie Tabb
@Cherietabb
Feb 08 2017 00:02
having issues with Applied Visual Design
<style>
  div{
    height:40px;
    width: 70%;
    background:black;
    margin: 50 auto;
    border-radius: 5px;
    position: relative;
  }

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
  0% {
    background-color: blue;
    left: 0px;

  }
  50% {
    background-color: green;
    left: 25px;

  }
  100% {
    background-color: yellow;
    left: -25px;

  }
}
</style>

<div id="rect"></div>
Why doesn't this pass?
hejchel
@hejchel
Feb 08 2017 00:03
@Noby707 thank you :)
CamperBot
@camperbot
Feb 08 2017 00:03
hejchel sends brownie points to @noby707 :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @noby707 |http://www.freecodecamp.com/noby707
Ahmed Osman
@Noby707
Feb 08 2017 00:03
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
this is the code to resize the image
np
ndajiya
@ndajiya
Feb 08 2017 00:03
hello, does anyone have any experience using Qwilr?
Alex Uvere
@alexuvere
Feb 08 2017 00:04
Do I replace that with a current code?
Ahmed Osman
@Noby707
Feb 08 2017 00:04
show me your current code pls
Alex Uvere
@alexuvere
Feb 08 2017 00:04
okay How do I do that?
Ahmed Osman
@Noby707
Feb 08 2017 00:04
copy paste your current <img code line
Chris
@dsean4688
Feb 08 2017 00:04
anyone know where i put class="smaller-image"{width: 100px;} ?
Alex Uvere
@alexuvere
Feb 08 2017 00:04
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " smaller-image {width: 100px:}>
Andrew
@Koalaphant
Feb 08 2017 00:04
When in mobile view the borders for the body of text overlaps the container, how can i change that? http://codepen.io/Koalaphant/full/dNqOLa/
ndajiya
@ndajiya
Feb 08 2017 00:05
I'm trying to figure out how to use CSS to make a two column paragraph, but there's not really a place for me to put html for me to target anything if that makes sense
Ahmed Osman
@Noby707
Feb 08 2017 00:05
@alexuvere before src=.. add a class
Alex Uvere
@alexuvere
Feb 08 2017 00:05
oh!!!!
Ahmed Osman
@Noby707
Feb 08 2017 00:05
class="smaller-image"
Alex Uvere
@alexuvere
Feb 08 2017 00:05
See it didnt say to do tthat
let me try
jem_commander
@josemujica
Feb 08 2017 00:06

May someone help me please? Give the submit button in your form the classes btn btn-primary.

<button type="submit"><i class="fa fa-paper-plane btn btn-primary"></i> Submit</button>

ndajiya
@ndajiya
Feb 08 2017 00:07
anyone available to assist?
Eric
@husheric
Feb 08 2017 00:08
@ndajiya a simple way is to use bootstrap and create two col-sm-6
Cherie Tabb
@Cherietabb
Feb 08 2017 00:08
is anyone working on Applied Visual Design: Create Movement Using CSS Animation?
epzclock
@epzclock
Feb 08 2017 00:08
@josemujica <button class = "" type="submit"><i class="fa fa-paper-plane"></i> Submit</button>
Chris
@dsean4688
Feb 08 2017 00:09
thanks @Noby707 oby707
CamperBot
@camperbot
Feb 08 2017 00:09
dsean4688 sends brownie points to @noby707 :sparkles: :thumbsup: :sparkles:
:cookie: 115 | @noby707 |http://www.freecodecamp.com/noby707
ndajiya
@ndajiya
Feb 08 2017 00:09
@husheric I guess my question is somewhat simpler. I believe I can accomplish it by using float left and right, I'm just not using a css editor I'm used to
it's a customization option on Qwilr
Alex Uvere
@alexuvere
Feb 08 2017 00:10
its still not working.. @Noby707
jem_commander
@josemujica
Feb 08 2017 00:11
thank you @epzclock
CamperBot
@camperbot
Feb 08 2017 00:11
josemujica sends brownie points to @epzclock :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @epzclock |http://www.freecodecamp.com/epzclock
Eric
@husheric
Feb 08 2017 00:13
@alexuvere can you post your code
punchdance
@punchdance
Feb 08 2017 00:13
@alexuvere post your code, I was just having issue with that but I figured it out
Eric
@husheric
Feb 08 2017 00:13
@ndajiya im not sure what you're trying to accomplish
Ahmed Osman
@Noby707
Feb 08 2017 00:13
@alexuvere <img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "> try this
Alex Uvere
@alexuvere
Feb 08 2017 00:13
ok
jcota
@jcota
Feb 08 2017 00:14
hey guys
Alex Uvere
@alexuvere
Feb 08 2017 00:14
Yes!!!!! Thank you :)
jcota
@jcota
Feb 08 2017 00:14
I need help
Ahmed Osman
@Noby707
Feb 08 2017 00:14
np
Alex Uvere
@alexuvere
Feb 08 2017 00:14
I have been on that one for like 30 mins
jcota
@jcota
Feb 08 2017 00:14
what wrong with my script
script> $(document).ready(function()});</script>
Ahmed Osman
@Noby707
Feb 08 2017 00:15
< missing at the front
and {
Eric
@husheric
Feb 08 2017 00:15
<script> $(document).ready(function() { })
with semicolon
jcota
@jcota
Feb 08 2017 00:16
ahh okay thanks @husheric @Noby707
Ahmed Osman
@Noby707
Feb 08 2017 00:16
$(".well:2th-child(2)").addClass("animated bounce"); need help pls
firemedic15
@firemedic15
Feb 08 2017 00:16
Hello all. I am a bit confused on adding a button element with bootstrap
<label><input type="button" class="btn">Like</label>
Eric
@husheric
Feb 08 2017 00:17
replace label with button
firemedic15
@firemedic15
Feb 08 2017 00:18
Thank you!!!
NamdyFit Dev
@NAMDY
Feb 08 2017 00:19
need help with this challenge "Make Dead Links using the Hash Symbol", what is the code like?
Here is my code <p>Click here for <a href="#"> cat photos </a>.</p>
Ahmed Osman
@Noby707
Feb 08 2017 00:21
you are right
<p>Click here for <a href="#">cat photos</a>.</p>
NamdyFit Dev
@NAMDY
Feb 08 2017 00:24
@Noby707 but when i run it doesn't work
it doesnt go to next challege
Jiana
@freecodecampjiana
Feb 08 2017 00:24
Thanks guys! :)
Ahmed Osman
@Noby707
Feb 08 2017 00:25
refresh or post the whole code
NamdyFit Dev
@NAMDY
Feb 08 2017 00:25
it was a bug
i refreshed the page
epzclock
@epzclock
Feb 08 2017 00:25
@NAMDY try removing the . between </a> and </p>
NamdyFit Dev
@NAMDY
Feb 08 2017 00:25
been stuck for liek 30 mins
so stupid
Ahmed Osman
@Noby707
Feb 08 2017 00:26
@epzclock need help with the Target a Specific Child of an Element Using jQuery
NamdyFit Dev
@NAMDY
Feb 08 2017 00:26
@epzclock it works now, i was right. the page just got stuck i think
William O'Mooney
@womooney
Feb 08 2017 00:27
Hello all. I joined yesterday and I have no prior experience with front-end development. I'm working on my tribute page (https://codepen.io/Williamov/full/dNjVyK) and I am first wanting to know how to overlay the band's logo (http://data.whicdn.com/images/113482638/original.png) on top of (and in the centre of) the uppermost image. I have tried using the position property in CSS but I haven't found a way of doing it correctly.
epzclock
@epzclock
Feb 08 2017 00:27
@Noby707 post the code
Ahmed Osman
@Noby707
Feb 08 2017 00:28
(".well:2th-child(2)").addClass("animated bounce");
epzclock
@epzclock
Feb 08 2017 00:29
$(.target
William O'Mooney
@womooney
Feb 08 2017 00:29
Oops. I'll repost the image link: data.whicdn.com/images/113482638/original.png
epzclock
@epzclock
Feb 08 2017 00:29
or the children of the well sorry, @Noby707
Ahmed Osman
@Noby707
Feb 08 2017 00:30
haha I misunderstood that completely. Thank you @epzclock
CamperBot
@camperbot
Feb 08 2017 00:30
noby707 sends brownie points to @epzclock :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @epzclock |http://www.freecodecamp.com/epzclock
dyl4810
@dyl4810
Feb 08 2017 00:38
How do I format the code in the chat? I forgot
@Noby707 How do I format the code in the chat? I forgot
Eric
@husheric
Feb 08 2017 00:40
@dyl4810 there's a markdown help on the bottom right side of the comments
dyl4810
@dyl4810
Feb 08 2017 00:40
<div class = "container-fluid row">
  <div class = "well col-xs-12">
  <div class = "row text-center">
  <h1>President Muhyun Roh</h1>
  </div>

  <div class = "row text-center">
  <h3>A courageous South Korean leader who had passion and determination to fight for true democracy </h3>
  </div>

  <div class = "row text-center">
    <img src ="http://i2.cdn.turner.com/cnn/2007/WORLD/asiapcf/12/08/talkasia.roh/art.RohMoohyun.cnn.jpg" alt ="Roh Muhyun">
   </div>
 </div>
</div>
This is my tribute page project I am stuck because I am having trouble sizing the row and adding background color
Eric
@husheric
Feb 08 2017 00:41
@dyl4810 you need a row div
@dyl4810 before your col
dyl4810
@dyl4810
Feb 08 2017 00:43
@husheric I am lost, would you be able to elaborate?
Eric
@husheric
Feb 08 2017 00:43
@dyl4810 check this link out https://v4-alpha.getbootstrap.com/layout/grid/
dyl4810
@dyl4810
Feb 08 2017 00:45
@husheric But I don't have any column in my code
@husheric Can't size row without having columns?
Eric
@husheric
Feb 08 2017 00:47
@dyl4810 your well div has a col?
jem_commander
@josemujica
Feb 08 2017 00:47
May someone please help? Make sure each of your div elements has a closing tag.
<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="cat photo URL" required></div>
</div>
<div class="row">
<div class="col-xs-5">
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></form></div>
epzclock
@epzclock
Feb 08 2017 00:48
@josemujica missing a </div> at the end
dyl4810
@dyl4810
Feb 08 2017 00:48
@husheric That's my attempt to size the row. You can remove it and solve the problem
Eric
@husheric
Feb 08 2017 00:48
@dyl4810 can you link your codepen?
Eric
@husheric
Feb 08 2017 00:50
@dyl4810 you're using row's incorrectly i think they should be their own div
@dyl4810 try to follow the layout in the link
like container-fluid should be it's own div
another div for row
etc
jem_commander
@josemujica
Feb 08 2017 00:52
@epzclock I tried that but to no avail ... what should I try next?
Eric
@husheric
Feb 08 2017 00:54
@josemujica you have a close form tag but no form tag
iluvtazzy
@iluvtazzy
Feb 08 2017 00:54
@josemujica what is that </form> for?
@josemujica try to remive it..@eric is right.. you have close tag </form> but no opening
dyl4810
@dyl4810
Feb 08 2017 00:55
@husheric How do you center columns?
@husheric In bootstrap?
Coy Sanders
@coymeetsworld
Feb 08 2017 00:56
@josemujica you should only have one row
Eric
@husheric
Feb 08 2017 00:56
in css you can do
Coy Sanders
@coymeetsworld
Feb 08 2017 00:56
2 columns that add up to 12 should be in that row. And you're closing the form before the div, thats the wrong order
jem_commander
@josemujica
Feb 08 2017 00:56
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
  <div class="row">
  <div class="col-xs-7">
    <input type="text" class="form-control" placeholder="cat photo URL" required></div>
</div>
  <div class="row">
  <div class="col-xs-5">
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></form></div>
</div>
Eric
@husheric
Feb 08 2017 00:57
.col-class {
float: none;
margin: 0 auto;
}
dyl4810
@dyl4810
Feb 08 2017 01:00
@husheric hm.. I don't know if I want to do that? shouldn't I only be using bootstrap?
stockharry
@stockharry
Feb 08 2017 01:02
hi all, does anyone know how many challenges there are in total?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:02
@stockharry check ur map
Eric
@husheric
Feb 08 2017 01:02
@dyl4810 that's just basic css which you're going to have to learn
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:03
the option on the same line as ur fcc avi and login/out ooption
jem_commander
@josemujica
Feb 08 2017 01:03
Help ; can someone read my code above and let me know what's wrong with it?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:03
@josemujica could u send me a link to ur challenge?
dyl4810
@dyl4810
Feb 08 2017 01:04
@husheric The example didn't use it
https://codepen.io/freeCodeCamp/pen/NNvBQW
Xavier Corena
@corenaxavier
Feb 08 2017 01:04
Hello
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:04
@corenaxavier hi
Xavier Corena
@corenaxavier
Feb 08 2017 01:05
for the life of me i can use and ID attribute to style an Element
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:05
@dyl4810 dint use css?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:05
@corenaxavier yes u can
Xavier Corena
@corenaxavier
Feb 08 2017 01:05
I believe I have the code down correctly within the styles

cat-photo-element {

background-color: green;
}
dyl4810
@dyl4810
Feb 08 2017 01:05
@Dorcy-ndg3 didn't use css to center the div table
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:05
@corenaxavier what were the instructions
Eric
@husheric
Feb 08 2017 01:05
@dyl4810 he used the class "text-center" and offsets
Xavier Corena
@corenaxavier
Feb 08 2017 01:06
Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:06
@josemujica ur code is correct... try refreshing your browser
Xavier Corena
@corenaxavier
Feb 08 2017 01:06
Try giving your form, which now has the id attribute of cat-photo-form, a green background.
jem_commander
@josemujica
Feb 08 2017 01:06
@Dorcy-ndg3 ok ill try
dyl4810
@dyl4810
Feb 08 2017 01:06
@husheric "text-center" center the text not the rows and columns table
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:06
@corenaxavier exactly cat-photo-form
William Rosales
@WilliamRR23
Feb 08 2017 01:07
can someone help me use css class to style an element
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:07
@corenaxavier u have cat-photo-element
@WilliamRR23 yes sure
iluvtazzy
@iluvtazzy
Feb 08 2017 01:07

@burreahmed <style>
h2 {color : blue;}
</style>

<h2>CatPhotoApp</h2>

Eric
@husheric
Feb 08 2017 01:07
@dyl4810 he used offsets to center the cols check this out and tbh i don't think you should try to copy the example codepen
iluvtazzy
@iluvtazzy
Feb 08 2017 01:07
@WilliamRR23 bring it on
Xavier Corena
@corenaxavier
Feb 08 2017 01:07
correct but I have added # infront and it has taken out all color out of the app
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:08
@corenaxavier have u changed form to element?
sorry the other way round
William Rosales
@WilliamRR23
Feb 08 2017 01:08
@mumtazkunhammed ok but its telling me to use .red-text to set up a class and every time i do the color of the element goes away
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:09
@WilliamRR23 show ur code
William Rosales
@WilliamRR23
Feb 08 2017 01:09

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

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball n atnip eat the grass sniff.</p>

D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:09
@WilliamRR23 ur not using .red-text anywhere
William Rosales
@WilliamRR23
Feb 08 2017 01:10
right every time i do it doesnt work
iluvtazzy
@iluvtazzy
Feb 08 2017 01:10
@WilliamRR23 did you call it in html??
Jr Heather
@jrdotaytch
Feb 08 2017 01:10
Hey guys i have 2 imgs on my page, and its img no.2 the border/color of border and border-radius. Does anyone know how i can make it so the code only affects img.no1?
jem_commander
@josemujica
Feb 08 2017 01:10

@Dorcy-ndg3 I refreshed my browser but it made no difference. here is the code I typed.... <div>
<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="cat photo URL" required></div>
</div>
<div class="col-xs-5">

<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div></div>

D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:10
@WilliamRR23 do it thn show ur code
@josemujica which browser are you using
Jr Heather
@jrdotaytch
Feb 08 2017 01:10
that sounded wrong oops
William Rosales
@WilliamRR23
Feb 08 2017 01:10

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

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball n atnip eat the grass sniff.</p>

jem_commander
@josemujica
Feb 08 2017 01:10
firefox
iluvtazzy
@iluvtazzy
Feb 08 2017 01:10
@WilliamRR23 check your style code. you lack the class style. @Dorcy-ndg3 is right
Jr Heather
@jrdotaytch
Feb 08 2017 01:11
I have 2 imgs. The code i have for img no.1 is affecting img no.2. Giving img no.2 the properties i gave img no.1.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:11
@WilliamRR23 u need to add red-text to ur p element back in ur html
ndajiya
@ndajiya
Feb 08 2017 01:11
I'm trying to have two columns that have related text horizontally, but every time I start a new bullet it shifts everything. I'm using just this; ul { column-count: 2;} Does anyone know how I can have the bullet points on both columns pair up horizontally no matter how many bullets I create?
dyl4810
@dyl4810
Feb 08 2017 01:11
@husheric offset in the example only applied to the timeline not the table itself?
iluvtazzy
@iluvtazzy
Feb 08 2017 01:11
@WilliamRR23 you should class the class in p
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:11
@jrdotaytch because ur using img to style maybe
Sophie
@selias323
Feb 08 2017 01:11
how do I add an alt element to this IMG <img src="https://bit.ly/fcc-relaxing-cat">
dyl4810
@dyl4810
Feb 08 2017 01:12
@husheric How was the example able to pull off centering the content without css?
jem_commander
@josemujica
Feb 08 2017 01:12
@Dorcy-ndg3 I'm using firefox browser
Sophie
@selias323
Feb 08 2017 01:12
I mean how do I add an alt atribute to an image
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:12
@selias323 right after "https://bit.ly/fcc-relaxing-cat"
Sophie
@selias323
Feb 08 2017 01:12
<img src="https://bit.ly/fcc-relaxing-cat">
iluvtazzy
@iluvtazzy
Feb 08 2017 01:12
@WilliamRR23 <h2 class="red-text">
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:12
@josemujica paste ur code in chrome and see if it works
jem_commander
@josemujica
Feb 08 2017 01:12
ok
ndajiya
@ndajiya
Feb 08 2017 01:13
I'm trying to have two columns that have related text horizontally, but every time I start a new bullet it shifts everything. I'm using just this; ul { column-count: 2;} Does anyone know how I can have the bullet points on both columns pair up horizontally no matter how many bullets I create?
Jr Heather
@jrdotaytch
Feb 08 2017 01:13
@Dorcy-ndg3 so what do i do?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:13
@selias323 <img src="https://bit.ly/fcc-relaxing-cat" alt="">
Jr Heather
@jrdotaytch
Feb 08 2017 01:13
Use a class instead eh?
Xavier Corena
@corenaxavier
Feb 08 2017 01:13
@Dorcy-ndg3 I have
from .cat-photo-element {
background-color: green;
to # .cat-photo-element {
background-color: green;
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:14
@jrdotaytch try giving one of ur images a class or an id.. u can always style by id or class... that way the style only affects the elememt with that specific id or class
Xavier Corena
@corenaxavier
Feb 08 2017 01:14
and it took the colors off. Otherwise, everything else is fine except the
Your form element should have the background-color of green. (checkbox)
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:15
@corenaxavier its #cat-photo-form you dont need the dot... # are for ids and . are for classes
William Rosales
@WilliamRR23
Feb 08 2017 01:15

Classes are reusable styles that can be added to HTML elements.

Here's an example CSS class declaration:

<style>
.blue-text {
color: blue;
}
</style>
You can see that we've created a CSS class called blue-text within the <style> tag.

You can apply a class to an HTML element like this:

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

Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.

Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.

Give your h2 element the class attribute with a value of 'red-text'.

iluvtazzy
@iluvtazzy
Feb 08 2017 01:16
@WilliamRR23 now instead of using blue, use red..change or edit it to red
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:16
@WilliamRR23 those are crystal clear examples man
just change staff up accodingly
Jr Heather
@jrdotaytch
Feb 08 2017 01:17
appreciate the help @Dorcy-ndg3
William Rosales
@WilliamRR23
Feb 08 2017 01:17
ive done it and it doesnt work
iluvtazzy
@iluvtazzy
Feb 08 2017 01:17
@Dorcy-ndg3 😊
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:17
u have the code all ur missing is giving p the class ur using in ur style tags
@jrdotaytch :thumbsup:
Xavier Corena
@corenaxavier
Feb 08 2017 01:18
@Dorcy-ndg3 correct, I took that off, and till everything but the form element checkbox is not working
iluvtazzy
@iluvtazzy
Feb 08 2017 01:18
@WilliamRR23 where is your code so we can check and tell you?
Xavier Corena
@corenaxavier
Feb 08 2017 01:18

cat-photo-element {

background-color: green;
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:18
Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.
how can i slowe this
???
Xavier Corena
@corenaxavier
Feb 08 2017 01:18

cat-photo-element {

background-color: green;

}
</style>

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

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

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

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

D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:18
@corenaxavier bruh its cat-photo-form ive said tht so far
#cat-photo-form
not #cat-photo-element
Xavier Corena
@corenaxavier
Feb 08 2017 01:19
lmao.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:19
@corenaxavier we are targeting this id <form action="/submit-cat-photo" id="cat-photo-form">
iluvtazzy
@iluvtazzy
Feb 08 2017 01:20
@zivkovicmartin add p element in style and font-size set to 16px
Xavier Corena
@corenaxavier
Feb 08 2017 01:20
@Dorcy-ndg3 thank you, i understand it now.
CamperBot
@camperbot
Feb 08 2017 01:20
corenaxavier sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 524 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:20
@corenaxavier :thumbsup:
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:20
@mumtazkunhammed tnx
CamperBot
@camperbot
Feb 08 2017 01:20
zivkovicmartin sends brownie points to @mumtazkunhammed :sparkles: :thumbsup: :sparkles:
:cookie: 24 | @mumtazkunhammed |http://www.freecodecamp.com/mumtazkunhammed
iluvtazzy
@iluvtazzy
Feb 08 2017 01:21
@Dorcy-ndg3 gonna continue to sleep now..glad you are a great help her
here i mean
dyl4810
@dyl4810
Feb 08 2017 01:21
How do you center the table?
William Rosales
@WilliamRR23
Feb 08 2017 01:21

<style>

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

<h2>CatPhotoApp</h2>

<p> ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball n atnip eat the grass sniff.</p>

D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:21
@mumtazkunhammed sleep tight ... and ty for helping out too
CamperBot
@camperbot
Feb 08 2017 01:21
dorcy-ndg3 sends brownie points to @mumtazkunhammed :sparkles: :thumbsup: :sparkles:
:cookie: 25 | @mumtazkunhammed |http://www.freecodecamp.com/mumtazkunhammed
William Rosales
@WilliamRR23
Feb 08 2017 01:21
how do i make the catphoapp red
catphotoapp
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:22
@WilliamRR23 sir using .red-text means ur targeting a class... i dont see any classes in ur html.. do u know how to add classes ?
iluvtazzy
@iluvtazzy
Feb 08 2017 01:23
@WilliamRR23 depends on the instruction..if it says changing it be external or in style or internal style sheet
Eric
@husheric
Feb 08 2017 01:23
@dyl4810 change <div class = "col-xs-8"> to <div class = "col-xs-8 col-xs-offset-2">
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:23
@mumtazkunhammed i dont know how to do that
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:23
@WilliamRR23 if u want to make <h2>CatPhotoApp</h2> red .. then add the class red-text to it so it can pick up this styling
.red-text {
color:red;
}
William Rosales
@WilliamRR23
Feb 08 2017 01:23
figured it out thanks everyone

<style>

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

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

<p> ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball n atnip eat the grass sniff.</p>

ndajiya
@ndajiya
Feb 08 2017 01:23
I'm trying to make these unordered lists match up can anyone help?
William Rosales
@WilliamRR23
Feb 08 2017 01:24
this is how it worked
iluvtazzy
@iluvtazzy
Feb 08 2017 01:24
@WilliamRR23 everytime you use class style that is .red-text, you should call it inside the html wh8ch is h2
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:24
@WilliamRR23 glad u finally saw the trick :thumbsup:
iluvtazzy
@iluvtazzy
Feb 08 2017 01:24
@WilliamRR23 exactly..now you know it..c9ngratz
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:24
@mumtazkunhammed Your typing in ur sleep :laughing:
dyl4810
@dyl4810
Feb 08 2017 01:25
@husheric Thanks that worked!
CamperBot
@camperbot
Feb 08 2017 01:25
dyl4810 sends brownie points to @husheric :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @husheric |http://www.freecodecamp.com/husheric
William Rosales
@WilliamRR23
Feb 08 2017 01:25
yeah i am very new to coding thanks for all the help
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:25
@husheric whoooaaa that was a long one
iluvtazzy
@iluvtazzy
Feb 08 2017 01:25
@Dorcy-ndg3 does it really shows?? or just like me calling out "brains brains"
@zivkovicmartin send me your code
Gulsvi
@gulsvi
Feb 08 2017 01:26
@ndajiya http://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns
ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
iluvtazzy
@iluvtazzy
Feb 08 2017 01:26
@Dorcy-ndg3 zombie mode on
Damien Breaux
@dlionz
Feb 08 2017 01:26
can someone explain the difference between the strictly operators and just the normal ones "==" as apposed to "==="
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:26
@mumtazkunhammed :smile: copy that
u had to come back for the brownies
dyl4810
@dyl4810
Feb 08 2017 01:27
@husheric Now why is it not taking my margin-top code?
https://codepen.io/dyl4810/pen/bgvrBN
ndajiya
@ndajiya
Feb 08 2017 01:27
thanks @SkyCoder01
CamperBot
@camperbot
Feb 08 2017 01:27
ndajiya sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @skycoder01 |http://www.freecodecamp.com/skycoder01
iluvtazzy
@iluvtazzy
Feb 08 2017 01:27
hahaha..yeah..just give some to me later..im quite hungry now..will have snacks in my dream.brains brains brains
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:27
@dlionz using === means ur comparing while = means ur setting
ndajiya
@ndajiya
Feb 08 2017 01:28
I'm still having issues when I add more content to my paragraphs though. It throws the whole alignment out of order @SkyCoder01
Gulsvi
@gulsvi
Feb 08 2017 01:28
@dyl4810 Remove the space between 60 px so it is 60px
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:28
@mumtazkunhammed i will ... I know hunger trust me.. Ive been here long enough
Eric
@husheric
Feb 08 2017 01:28
@dyl4810 remove space in 60px
dyl4810
@dyl4810
Feb 08 2017 01:28
@husheric Thanks!
CamperBot
@camperbot
Feb 08 2017 01:28
dyl4810 sends brownie points to @husheric :sparkles: :thumbsup: :sparkles:
:warning: dyl4810 already gave husheric points
Damien Breaux
@dlionz
Feb 08 2017 01:29
@Dorcy-ndg3 but what about "==" its seems these are similar but diffrent "==="
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:29
:skull: :skull: :skull: :skull: :skull: :skull:
@dlionz not really... just that === is more strict
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:29
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
How do i nest my i element within my button??
im stuck
Gulsvi
@gulsvi
Feb 08 2017 01:29
@ndajiya Can you update your codepen to show what you mean?
iluvtazzy
@iluvtazzy
Feb 08 2017 01:30
@Dorcy-ndg3 😂 and since you are hear for life then when i start coding i expect you to help me out
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:30
@UnconqueredMindz ur code please
iluvtazzy
@iluvtazzy
Feb 08 2017 01:30
nahnyt!!!
Mac
@itchick85
Feb 08 2017 01:30
Apply the Default Bootstrap Button Style what's wrong with this?<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="bnt bnt-default"></button>
<button class="bnt bnt-default"></button>
<button class="bnt bnt-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="bnt bnt-default"></button>
<button class="bnt bnt-default"></button>
<button class="bnt bnt-default"></button>
</div>
</div>
</div>
</div>
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:30
<i class="fa fa-thumbs-up">
<button class="btn btn-block btn-primary">Like</button></i>
iluvtazzy
@iluvtazzy
Feb 08 2017 01:30
@Dorcy-ndg3 here not hear..i really need to sleep now
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:30
@mumtazkunhammed Il be here.. we shall keep sharing the brownies too... :wave:
Mac
@itchick85
Feb 08 2017 01:30
never mind i see
Gulsvi
@gulsvi
Feb 08 2017 01:31
Use backticks so your code looks nice
```html
put your HTML in here
```
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:31

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


}
</style>

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

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<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>

help with this
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:31
@UnconqueredMindz what ur trying to do is nesting the button inside the i instead
@zivkovicmartin what conditions are not passing
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:33
Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:33
@zivkovicmartin u need to give p 16px
not giving red-text
rstispada
@rstispada
Feb 08 2017 01:34
I am having an issue with the img element should have the class smaller-image but the code works but I can't continue <img class="smaller-image">SmallerImage<img>
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:34
how to do that
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:34
<style>
.red-text {
color: red;
}
p{

}
</style>
@zivkovicmartin
put the code between those { and }
@rstispada all u needed to do was give the class the rest is wrong
zivkovicmartin
@zivkovicmartin
Feb 08 2017 01:35
ohhh thank u very much
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:35
@Dorcy-ndg3
ya i know right
but i just dont see what im doing wrong
rstispada
@rstispada
Feb 08 2017 01:36
ok I think I am doing that now
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:37
<i class="fa fa-thumbs-up">
<button class="btn btn-block btn-primary">Like</button></i>
@Dorcy-ndg3
oops
my bad
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:37
<img class="smaller-image" PUT BACK YOUR ORIGINAL CODE HERE> @rstispada
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:37
no that was it
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:37
@UnconqueredMindz <i class="fa fa-thumbs-up"> should be inside ur button
rstispada
@rstispada
Feb 08 2017 01:37
<img class="smaller-image">smallerimage<img>
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:38
didnt i do that? @Dorcy-ndg3
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:38
@rstispada try to reset ur code... then only add this class="smaller-image"
dont remove the rest
@UnconqueredMindz no u put ur button inside ur i
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:40
@Dorcy-ndg3 how?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:41

@UnconqueredMindz


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

Looks better?

ndajiya
@ndajiya
Feb 08 2017 01:41
@SkyCoder01 this is where I'm actually trying to make this appear https://qwilr.com/ImCDkGT3SX6S this is the updated pen https://codepen.io/ndajiya/pen/QdVpyV
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:42
ahhh maan really
see thats what i get for reading the instructions wrong
wow,,thankx man smh
rstispada
@rstispada
Feb 08 2017 01:43
this is what I what i have <img Class="smaller-image">
UnconqueredMindz
@UnconqueredMindz
Feb 08 2017 01:43
@Dorcy-ndg3 thankx
CamperBot
@camperbot
Feb 08 2017 01:43
unconqueredmindz sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 525 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
doZer
@doZertheBee
Feb 08 2017 01:43

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
pink-text: pink;
}
</style>

<h1 pink-text>Hello World!</h1>

how do i set this class to pink?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:43
@rstispada what are you doing witht the rest of the code?
rstispada
@rstispada
Feb 08 2017 01:44
Sizing an image the size changed although the class didn't change
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:44
@doZertheBee its class="pink-text"
rstispada
@rstispada
Feb 08 2017 01:44
I'd assume if the picture changed then the code is accurate
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:44
@rstispada send me the link to ur challenge
rstispada
@rstispada
Feb 08 2017 01:44
I just started this program in my free time while I work on my Bachelor's in IT
Jessica Harbauer
@HarbauerJess
Feb 08 2017 01:45
@rstispada i'm stuck on the same one
rstispada
@rstispada
Feb 08 2017 01:46
I tried duplicating the h2 class and just swap the info and it won't go
ndajiya
@ndajiya
Feb 08 2017 01:46
is there a way to create vertical and horizontally aligned columns in css?
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:46

@doZertheBee u can space selectors like this

body{
background-color:black;
}
.pink-text{
color:maroon;
}

so after correcting ur code like i showed u before.. also correct the code in ur style tags

@rstispada first of all u need only one set of style tags
rstispada
@rstispada
Feb 08 2017 01:47
ok
I got a bunch of duplicates I know
I fixed that
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:48
@rstispada this is how they set a class
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
doZer
@doZertheBee
Feb 08 2017 01:48
@Dorcy-ndg3 thank you
CamperBot
@camperbot
Feb 08 2017 01:48
dozerthebee sends brownie points to @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 526 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:48
as u can see i dint mess with the rest of the code
@doZertheBee :thumbsup:
rstispada
@rstispada
Feb 08 2017 01:49
oh ok I tried that but mine was a little different thank you I will try it
doZer
@doZertheBee
Feb 08 2017 01:49
did not realize that the pink-text would be outside of the body
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:49
It had to
:smile:
@HarbauerJess let me see ur code
rstispada
@rstispada
Feb 08 2017 01:50
Thank you I tired that before not sure what I did wrong but thanks for the help
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:50
@rstispada does it work now?
I-am-candy
@I-am-candy
Feb 08 2017 01:50
I am having difficulty trying to get one of the codes on freecodecamp and I (think) I wrote everything correctly but idk.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:51
@I-am-candy show ur code
I-am-candy
@I-am-candy
Feb 08 2017 01:51
ok
rstispada
@rstispada
Feb 08 2017 01:51
yes thank you it turned the src white the first time I think it was a spacing issue I had to learn that on Python
when I tried it the first time
ndajiya
@ndajiya
Feb 08 2017 01:52
does anyone know if there is a way to create vertically and horizontally aligned columns in css for two columns of unordered lists?
Chuck Taylor
@cbtaylor2
Feb 08 2017 01:52
How do I change the value of the "a" elements href attribute with a # , to turn it into a dead link?
Need help writing this line of code.
ndajiya
@ndajiya
Feb 08 2017 01:52
post what you have so far
for the line
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:52
@cbtaylor2 set href="#" like that
Chuck Taylor
@cbtaylor2
Feb 08 2017 01:53
I/
robsabol1
@robsabol1
Feb 08 2017 01:54
I need help with making a class for smaller-image and where do I put it?
Chuck Taylor
@cbtaylor2
Feb 08 2017 01:54
I'm trying that.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:56
@robsabol1 :point_up: February 8, 2017 3:48 AM
robsabol1
@robsabol1
Feb 08 2017 01:56

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

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

h2 {
font-family: Lobster, Monospace;
}

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

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

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

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

Chuck Taylor
@cbtaylor2
Feb 08 2017 01:56
hey guys thanks. It worked. Thanks Black-Ace.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:56
@ndajiya so u need 1 and 4 in the same vertical line then 1 and 2 in the same horizontal line right
I-am-candy
@I-am-candy
Feb 08 2017 01:57
this is what's going on:<!--- Only change code above this line. --->
it's askin me
for the comment
robsabol1
@robsabol1
Feb 08 2017 01:57
my objective is to create a class called smaller-image but I don't know where?
ndajiya
@ndajiya
Feb 08 2017 01:57
yeah @Dorcy-ndg3
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:57
@I-am-candy its asking u not to change code below that line
I-am-candy
@I-am-candy
Feb 08 2017 01:58
yeah, i know
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:58
:point_up: February 8, 2017 3:56 AM @robsabol1
I-am-candy
@I-am-candy
Feb 08 2017 01:58
i did that but yet it puts an x and says "Your comment should have the text Only change code above this line."
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:58
@I-am-candy ur not showing me ur code
I-am-candy
@I-am-candy
Feb 08 2017 01:58
I'll try
I'm new to this, so I don't really know how to send a picture of the code..
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:59
@ndajiya why did u put them in the same paragraph
robsabol1
@robsabol1
Feb 08 2017 01:59
thanks black ace
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:59
@I-am-candy just copy paste it here
I-am-candy
@I-am-candy
Feb 08 2017 01:59
ok.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 01:59
@robsabol1 cool
Jessica
@jdubbz1113
Feb 08 2017 02:00
i am having trouble making my button say submitform action="/submit-cat-photo"><button type="submit"> <input type="text" placeholdertext="Submit"></button>
</form>
can any1 help me out a bit?
I-am-candy
@I-am-candy
Feb 08 2017 02:02
;-; I can't paste...
khaled6
@khaled6
Feb 08 2017 02:03
hello
can not understand this Nest the existing img element within an a element.
Jessica
@jdubbz1113
Feb 08 2017 02:03
hello
khaled6
@khaled6
Feb 08 2017 02:04
i wrote it as <p>Click here for <a href="#"> <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera. ">cat photos</a></p>
ndajiya
@ndajiya
Feb 08 2017 02:05
@Dorcy-ndg3 does this illustrate it better? https://codepen.io/ndajiya/pen/QdVpyV
Jessica
@jdubbz1113
Feb 08 2017 02:05
close your image tag b4 cat photos
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:05
@ndajiya https://codepen.io/ndajiya/pen/QdVpyV i believe thats it
JuicyITer
@juicyiter
Feb 08 2017 02:06
<button type="submit">Submit</button>
Jessica👆🏻
Sophie
@selias323
Feb 08 2017 02:06
@selias323
how do I zoom an image
Your image should be 100 pixels wide. Browser zoom should be at 100%.
Toni
@astiles2559
Feb 08 2017 02:06
so hey guys i was wondering a few things. on eis how do i move my search button to the top right on the computer? im doing the portfolio
Jessica
@jdubbz1113
Feb 08 2017 02:07
would that be before input type?
Toni
@astiles2559
Feb 08 2017 02:07
<form action="SubmitStilesPortfolio">
<input type="text" required>
<button type="submit"> Search</button>
</form>
JuicyITer
@juicyiter
Feb 08 2017 02:07
you could do that
Toni
@astiles2559
Feb 08 2017 02:08
but i want to move it to the top right of the whole page doing my portfolio?
you know most web pages have it on the top left?
JuicyITer
@juicyiter
Feb 08 2017 02:09
i mean yes😁
Toni
@astiles2559
Feb 08 2017 02:09
the bootstrap grid isnt working to well i guess. jk need help plz
Jessica
@jdubbz1113
Feb 08 2017 02:10
thankyou so much @ethanman
CamperBot
@camperbot
Feb 08 2017 02:10
jdubbz1113 sends brownie points to @ethanman :sparkles: :thumbsup: :sparkles:
:cookie: 64 | @ethanman |http://www.freecodecamp.com/ethanman
robsabol1
@robsabol1
Feb 08 2017 02:10
I'm stuck. says your image should be 100 pixels
how do I make it 100
ndajiya
@ndajiya
Feb 08 2017 02:11
@Dorcy-ndg3 now with that I'm trying to get 4 aligned with 3 and 5 aligned with 6 etc
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:12
@ndajiya u can just follow up with my code
its simple and clear
there is a div on the right and one on the left
put the bullets accodingly
if u want 3 on the right and 4 on the left.. dont put them in the same div
Martian
@Martian1431
Feb 08 2017 02:16
Hello guys, I'm stuck in challenge: how to disable an Element Using jQuery. The task is to Disable only the target1 button. Can anyone help!
Frankie Law
@Cowwy
Feb 08 2017 02:17
@Martian1431 check your spell on the word disable. I made a mistake of using disabled
Martian
@Martian1431
Feb 08 2017 02:21
@Cowwy I wrote this code: $(button").prop("disable", true) but still nothing. the task is to disable a specific button not all.
Frankie Law
@Cowwy
Feb 08 2017 02:22
@Martian1431 your button quote is missing
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:23
@Martian1431 $("button")
CoreyE513
@CoreyE513
Feb 08 2017 02:24
if someone could pm me I have a quick question
Martian
@Martian1431
Feb 08 2017 02:25
@Cowwy @Dorcy-ndg3 my bad, the issue is fixed thanks for the help
CamperBot
@camperbot
Feb 08 2017 02:25
martian1431 sends brownie points to @cowwy and @dorcy-ndg3 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @cowwy |http://www.freecodecamp.com/cowwy
:cookie: 527 | @dorcy-ndg3 |http://www.freecodecamp.com/dorcy-ndg3
Frankie Law
@Cowwy
Feb 08 2017 02:26
Yes brownies!!!! Lol
Frankie Law
@Cowwy
Feb 08 2017 02:26
@CoreyE513 what is your question?
Your p element end tag have some issue.
CoreyE513
@CoreyE513
Feb 08 2017 02:28
yes
Pantamia
@Pantamia
Feb 08 2017 02:28
have not been on here in months so how do I do 108 for jQuery
Frankie Law
@Cowwy
Feb 08 2017 02:28
@CoreyE513 /p
CoreyE513
@CoreyE513
Feb 08 2017 02:29
I figured it out lol smh
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:29
Okay somebody tell me what I'm doing wrong. I can't see it with my tired eyes.
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:30
we cant see what to correct lol @NewbieChelsea
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:30

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

h2 {
font-family: Lobster, Monospace;
}

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

.smaller-image {
width: 100px;
}
img .thick-green-border{Border-color:green; Border-width:10px; border-style:solid;}
</style>

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

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

D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:30
@Pantamia 108 is ur number of brownie points.. challenges dont have numbers
Coy Sanders
@coymeetsworld
Feb 08 2017 02:30
@NewbieChelsea theres no class1, class2, classn attributes
watertthewet
@watertthewet
Feb 08 2017 02:30
I was just about to ask about this exact same issue...
Paul O'Donnell
@academicjargon
Feb 08 2017 02:31
@NewbieChelsea try closing quote after back.
Coy Sanders
@coymeetsworld
Feb 08 2017 02:31
its only class, and if you want to give multiple classes you separate them w/ a space
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:31
@NewbieChelsea its class="class1 class2 class3" classes are separated by a space
Andy
@andythedandyone
Feb 08 2017 02:31
@NewbieChelsea wrap your post with back ticks ``` that way it shows as code
Coy Sanders
@coymeetsworld
Feb 08 2017 02:31
i.e. class="class1 class2 class3"
also there is no border-width class, and your thick-green-border class needs work
Frankie Law
@Cowwy
Feb 08 2017 02:31
@NewbieChelsea your img tag is using attributes that don't exist. Class1 class2 etc. Put them all in class instead.
Coy Sanders
@coymeetsworld
Feb 08 2017 02:31
nothing should be capitalized in there, and you shouldn't specify img after the class
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:32
u also need a space here border-width"src="https://bit.ly/fcc-relaxing-cat" between width" and src
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:32
Okay guys. I'll try this stuff. thanks for the expedient replies.
Paul O'Donnell
@academicjargon
Feb 08 2017 02:33
@NewbieChelsea class="smaller-image thick-green-border border-width border-width"
NamdyFit Dev
@NAMDY
Feb 08 2017 02:33
who knows when the sass course will be uploaded
Paul O'Donnell
@academicjargon
Feb 08 2017 02:33
@NewbieChelsea provided thick-green-border etc are actually classes.
NamdyFit Dev
@NAMDY
Feb 08 2017 02:34
really want to take the sass course
when wil the sass course be uploaded
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:34
@NAMDY try asking in the forum
Coy Sanders
@coymeetsworld
Feb 08 2017 02:35
@NAMDY you can learn without FCC
D O R C ¥
@Dorcy-ndg3
Feb 08 2017 02:35
:wave: everyone
Coy Sanders
@coymeetsworld
Feb 08 2017 02:35
its great but nothing too crazy
helps organize your CSS and adds some DRY principles
watertthewet
@watertthewet
Feb 08 2017 02:36
I'm also having issues with that exercise Chelsea was on but I think it's a different issue?
NamdyFit Dev
@NAMDY
Feb 08 2017 02:36
@coymeetsworld i thought it helps in teaching css better
watertthewet
@watertthewet
Feb 08 2017 02:36

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

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

.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

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

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

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

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

Pantamia
@Pantamia
Feb 08 2017 02:36
Can anyone help me with challenge 108
Coy Sanders
@coymeetsworld
Feb 08 2017 02:36
no its something you should learn after you're comfortable with CSS @NAMDY
watertthewet
@watertthewet
Feb 08 2017 02:36
Like this the image just doesn't show up
Coy Sanders
@coymeetsworld
Feb 08 2017 02:36
@watertthewet you closed your img tag prematurely
watertthewet
@watertthewet
Feb 08 2017 02:36
aah
khaled6
@khaled6
Feb 08 2017 02:36
<p>Click here for <a href="#"> <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera" />cat photos</a></p>
watertthewet
@watertthewet
Feb 08 2017 02:37
aaaaaaah I got it, thanks :>
khaled6
@khaled6
Feb 08 2017 02:37
is it ok for Nest the existing img element within an a element.
NamdyFit Dev
@NAMDY
Feb 08 2017 02:37
@coymeetsworld thanks man, sass keeps popping up everywhere i thought i had to learn it now haha
CamperBot
@camperbot
Feb 08 2017 02:37
namdy sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 2039 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
disujha
@disujha
Feb 08 2017 02:37
I need to upload form data to mysql ... there are mulitple types of images( I am NOT asking multiple image upload) but different fields for different images in a single form.... Can anyone suggest good reference or tutorial?
Coy Sanders
@coymeetsworld
Feb 08 2017 02:38
np @NAMDY take a look at the guide, tells you what makes it great
its ultimately better for larger projects where you can have alot of styles.
Colin Griffin
@cdogcodes
Feb 08 2017 02:38
can anyone help me with challenge 9 don't know what im doing wrong..
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:38
I must be too tired for this
Colin Griffin
@cdogcodes
Feb 08 2017 02:39
brand new to this..
Chad Bruner
@chadgbruner
Feb 08 2017 02:39
fCC Bootcamp.PNG
trying to add target id and it's not working
Sophie
@selias323
Feb 08 2017 02:40
Ok what the heck why is this not working
Coy Sanders
@coymeetsworld
Feb 08 2017 02:40
@chadgbruner targetX are ids, not classes
Chad Bruner
@chadgbruner
Feb 08 2017 02:40
ah thx!
Coy Sanders
@coymeetsworld
Feb 08 2017 02:40
np
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:40
@cdogcodes you will be fine. It's actually fun and people are pretty helpful just do it when you're awake
Sophie
@selias323
Feb 08 2017 02:40

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

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

}
}

h2 {
font-family: Lobster, Monospace;
}

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

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

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

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

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

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

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

Coy Sanders
@coymeetsworld
Feb 08 2017 02:40
@selias323 2 things
Sophie
@selias323
Feb 08 2017 02:40
and I need to do this Give your image a border width of 10px.
Give your image a border style of solid.
The border around your img element should be green.
Coy Sanders
@coymeetsworld
Feb 08 2017 02:41
thick-green-border should not be nested inside the red-text class, needs to be separate
Sophie
@selias323
Feb 08 2017 02:41
ohhhh ok
Coy Sanders
@coymeetsworld
Feb 08 2017 02:41
and you only need one image tag, the one you have
toiletwrecker
@toiletwrecker
Feb 08 2017 02:41
in this .blue-text
Chad Bruner
@chadgbruner
Feb 08 2017 02:41
another question i have is how does one place a nice looking image here rather than copy/paste text or the small image i dragged and dropped?
Colin Griffin
@cdogcodes
Feb 08 2017 02:41
:+1: @NewbieChelsea
Coy Sanders
@coymeetsworld
Feb 08 2017 02:41
remove this one you created <img class="thick-green-border"> and give the other img the thick-green-border also
toiletwrecker
@toiletwrecker
Feb 08 2017 02:41
is the period going to stay when i put it in my h2 element?
Coy Sanders
@coymeetsworld
Feb 08 2017 02:41
@selias323 there should be an example in the challenge on how to add multiple classes to an element
NamdyFit Dev
@NAMDY
Feb 08 2017 02:41
@coymeetsworld ok thanks, I learning web dev so i can build an app as an online personal trainer where i can connect and track client's progress. will definitely read through the guide and learn it when i have a hang of css. still a long way to go but hopefully will be done in a couple months. thanks man
CamperBot
@camperbot
Feb 08 2017 02:41
namdy sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: namdy already gave coymeetsworld points
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:42
@selias323 did that code work for you? I'm one the same "lesson" and I got stuck.
Coy Sanders
@coymeetsworld
Feb 08 2017 02:42
@NAMDY you're never truly done with webdev :), but yeah you can build something in a few months
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:42
https://www.freecodecamp.com/challenges/nest-an-anchor-element-within-a-paragraph#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Ca%20href%3D%22http%3A%2F%2Fwww.freecatphotoapp.com%22%3Ecat%20photos%3C%2Fa%3E%0A%3Cp%3E%0A%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%3E%0A%0A%3Cp%20class%3D%22red-text%22%3EKitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.%3C%2Fp%3E%0A%3Cp%20class%3D%22red-text%22%3EPurr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.%3C%2Fp%3E%0A
why doesnt this work?
Coy Sanders
@coymeetsworld
Feb 08 2017 02:42
and w/ that im off to dinner bbl every1
Sophie
@selias323
Feb 08 2017 02:43
@coymeetsworld its not working
Sophie
@selias323
Feb 08 2017 02:44
still not working...
argh
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:44
@SpookyWolfNLD I'm stuck on the same one
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:45
i just dont get it
CoreyE513
@CoreyE513
Feb 08 2017 02:45
its telling me to that my A element should be a dead link href att set to #
does that mean dele href and add #
?
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:46
@SpookyWolfNLD @selias323 we are all stuck on the same problem... there something missing.
Manish Giri
@Manish-Giri
Feb 08 2017 02:46
@CoreyE513 replace http link with #
@NewbieChelsea post all of your code pls.
Robert
@robertgaovang
Feb 08 2017 02:47
I can't figure out why my h2 element is not red. please tell me where I am incorrect in this code

<h2 class="red-text">

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

</style>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Manish Giri
@Manish-Giri
Feb 08 2017 02:48
@robertgaovang you were to add the class to this h2 element -
<h2>CatPhotoApp</h2>
not sure why you made one above the style tags.
Robert
@robertgaovang
Feb 08 2017 02:48
i am truly new to coding
KasnZhang
@KasnZhang
Feb 08 2017 02:48
Create a Bootstrap Row
<div class="container-fluid">
<div class="row">
<h3 class="text-primary text-center">
<div class="row">
jQuery Playground
</div>
</h3>
</div>
</div>
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:49
me to but in an hour i have learned a lot
KasnZhang
@KasnZhang
Feb 08 2017 02:49
HELP!
CoreyE513
@CoreyE513
Feb 08 2017 02:49
@Manish-Giri thank u
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:50

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

h2 {
font-family: Lobster, Monospace;}

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

.smaller-image {
width: 100px;}

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

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

<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " "border-color" "border-width" "border-style">

Manish Giri
@Manish-Giri
Feb 08 2017 02:50
" "border-color" "border-width" "border-style" - on the img tag is wrong
first remove img from here
img .thick-green-border
{border-color: green;
border-width: 10px;
border-style: solid;}
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:51
@NewbieChelsea where not having the same problem lol
Manish Giri
@Manish-Giri
Feb 08 2017 02:51
@NewbieChelsea then add the thick-green-border class to this img element -
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:51

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

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

h2 {
font-family: Lobster, Monospace;
}

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

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

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

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

<p> view more <a href="http://www.freecatphotoapp.com">cat photos</a> </p>

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

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

im stuck at the nesting part
S1ant
@S1antCodez
Feb 08 2017 02:52
Could Someone tell me why this doesn't make it 100 pixels wide?

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

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

h2 {
font-family: Lobster, Monospace;
}

.smaller-image {
width: 100 px;
}

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

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

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

<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
Feb 08 2017 02:53
@SpookyWolfNLD <p> view more <a href="http://www.freecatphotoapp.com">cat photos</a> </p>
Capitalize V in View, and remove space before it.
@S1antCodez width: 100 px;
remove the space before px.
S1ant
@S1antCodez
Feb 08 2017 02:53
That'll do it Thanks!
Yeah Thanks So Much!
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:54
@Manish-Giri still doesnt work?
Manish Giri
@Manish-Giri
Feb 08 2017 02:55
@SpookyWolfNLD post your challenge URL here then. Click "run tests" first.
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:55
@Manish-Giri like this?
<img class="smaller-image" "thick-green-boarder" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
Manish Giri
@Manish-Giri
Feb 08 2017 02:56
@NewbieChelsea almost, get rid of the quotes in between, and fix the typo in border
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 02:56
i clicked run test like a thousand time XD https://www.freecodecamp.com/challenges/nest-an-anchor-element-within-a-paragraph#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Ca%20href%3D%22http%3A%2F%2Fwww.freecatphotoapp.com%22%3Ecat%20photos%3C%2Fa%3E%0A%3Cp%3E%0A%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%3E%0A%0A%3Cp%20class%3D%22red-text%22%3EKitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.%3C%2Fp%3E%0A%3Cp%20class%3D%22red-text%22%3EPurr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.%3C%2Fp%3E%0A
Jack Kussmann
@eLusivex
Feb 08 2017 02:56
is...bootstrap 4.0+ unable to use pull-right for nav nav-pills function?
Manish Giri
@Manish-Giri
Feb 08 2017 02:56
<img class="smaller-image thick-green-border"
@NewbieChelsea
@SpookyWolfNLD this is the code I see in your link

<a href="http://www.freecatphotoapp.com">cat photos</a>
<p>
NewbieChelsea
@NewbieChelsea
Feb 08 2017 02:57
@Manish-Giri you are a saint. Thank you
CamperBot
@camperbot
Feb 08 2017 02:57
newbiechelsea sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4109 | @manish-giri |http://www.freecodecamp.com/manish-giri
Manish Giri
@Manish-Giri
Feb 08 2017 02:59
@NewbieChelsea welcome :smile:
Thomas
@Thomaso54
Feb 08 2017 02:59
@SpookyWolfNLD you need to put the <a href="http://www.freecatphotoapp.com">cat photos</a> inside your <p> after the <h2> and have a closing p </p>, like <p>aaaa<<a href="http://www.freecatphotoapp.com">cat photos</a></p>
Jack Kussmann
@eLusivex
Feb 08 2017 03:00
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active"><a href="#">Jack Kussmann</a></li>
<li role="#" class="pull-right"><a href="#">Home</a></li>
<li role="#" class="pull-right"><a href="#">Portfolio</a></li>
<li role="#" class="pull-right"><a href="#">About</a></li>
<li role="#" class="pull-right"><a href="#">Contact</a></li>
</ul>
I don't understand why.... "pull-right" is not pulling the items to the right
in bootstrap 4.0
via codepen
SpookyWolfNLD
@SpookyWolfNLD
Feb 08 2017 03:02
@Thomaso54 @Manish-Giri i already fixed it the page was glitched or something like that
S1ant
@S1antCodez
Feb 08 2017 03:02
@Manish-Giri Your Website has a Type-O! It says: "I am always trying to building cool things" Wait now that I look at it... Did you mean to make it that or is it a type-O?
Now I'm on Anchor Methods! I know alllll about these from a book :)
Manish Giri
@Manish-Giri
Feb 08 2017 03:03
@S1antCodez yeah I meant that, what typo did you find?
S1ant
@S1antCodez
Feb 08 2017 03:03
That was what I found I was just tripping : -/
You're a Very good Web Designer!
Manish Giri
@Manish-Giri
Feb 08 2017 03:04
haha
@S1antCodez ty
CamperBot
@camperbot
Feb 08 2017 03:04
manish-giri sends brownie points to @s1antcodez :sparkles: :thumbsup: :sparkles:
:cookie: 28 | @s1antcodez |http://www.freecodecamp.com/s1antcodez
S1ant
@S1antCodez
Feb 08 2017 03:04
How Do you send Brownie Points? ,3
<3
Manish Giri
@Manish-Giri
Feb 08 2017 03:04
you can tag the person and say thanks
S1ant
@S1antCodez
Feb 08 2017 03:04
@Manish-Giri Thanks
CamperBot
@camperbot
Feb 08 2017 03:04
s1antcodez sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4110 | @manish-giri |http://www.freecodecamp.com/manish-giri
NamdyFit Dev
@NAMDY
Feb 08 2017 03:04
@S1antCodez when you say thanks
CamperBot
@camperbot
Feb 08 2017 03:04
:cookie: 29 | @s1antcodez |http://www.freecodecamp.com/s1antcodez
namdy sends brownie points to @s1antcodez :sparkles: :thumbsup: :sparkles:
S1ant
@S1antCodez
Feb 08 2017 03:05
@NAMDY Thanks!
CamperBot
@camperbot
Feb 08 2017 03:05
s1antcodez sends brownie points to @namdy :sparkles: :thumbsup: :sparkles:
:cookie: 65 | @namdy |http://www.freecodecamp.com/namdy
S1ant
@S1antCodez
Feb 08 2017 03:05
xD
@Manish-Giri Will you teach me your Web Designing Secrets??
Manish Giri
@Manish-Giri
Feb 08 2017 03:06
lol
S1ant
@S1antCodez
Feb 08 2017 03:06
xD
@Manish-Giri How Do you host your website? (Sorry if I'm bothering you!)
Manish Giri
@Manish-Giri
Feb 08 2017 03:08
@S1antCodez this particular on is hosted on GoDaddy. The rest of my domains are in NameCheap!
it's much cheaper and better than GD.
S1ant
@S1antCodez
Feb 08 2017 03:08
@Manish-Giri ok Thanks
CamperBot
@camperbot
Feb 08 2017 03:08
s1antcodez sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:warning: s1antcodez already gave manish-giri points
JM
@jaydray1
Feb 08 2017 03:08

</style>

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

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

<a href="http://www.freecatphotoapp.com">cat photos</a>

S1ant
@S1antCodez
Feb 08 2017 03:08
aww :(
Manish Giri
@Manish-Giri
Feb 08 2017 03:08
haha
JM
@jaydray1
Feb 08 2017 03:08
Your a element should be nested within your new p element.
S1ant
@S1antCodez
Feb 08 2017 03:08
I want to solve it!
Manish Giri
@Manish-Giri
Feb 08 2017 03:08
@S1antCodez yes, it works only once per hour
JM
@jaydray1
Feb 08 2017 03:08
isn't it nested in their?
there
S1ant
@S1antCodez
Feb 08 2017 03:09
What is your Problem @jaydray1 ?
Manish Giri
@Manish-Giri
Feb 08 2017 03:10
@jaydray1 what is this doing outside the p?
<a href="http://www.freecatphotoapp.com">cat photos</a>
S1ant
@S1antCodez
Feb 08 2017 03:10
Thats What I was going to ask :(
JM
@jaydray1
Feb 08 2017 03:14
ugh...got it, haha. Thank you! I was so confused. I had literally created a new 'p' element after the h2 instead of inserting it before the 'a' element that already existed. thank you :)
S1ant
@S1antCodez
Feb 08 2017 03:17
Wait Wait Wait Why isn't this working????

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

<p>Click here for <a #="http://www.freecatphotoapp.com">cat photos</a>.</p>

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

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

It is where is says to Change 'href' to '#'
it says*
__mifflin__
@cdrainxv
Feb 08 2017 03:18

@S1antCodez:

Replace the value of your a element's href attribute with a #, also known as a hash symbol, to turn it into a dead link.


href is an attribute and its value is in quotes "value"
so together href="value"… currently your value is a link (http://www.freecatphotoapp.com) … so replace the link with # which will make it dead… so upon clicking it… it will not redirect you anywhere.

S1ant
@S1antCodez
Feb 08 2017 03:19
oh Ok!
Manish Giri
@Manish-Giri
Feb 08 2017 03:19
@S1antCodez
S1ant
@S1antCodez
Feb 08 2017 03:20
Thanks so much I should've thoroughly read the instructions!
What is it @Manish-Giri ?
Yes?
Manish Giri
@Manish-Giri
Feb 08 2017 03:20
click the link and read the first post
about the href thing
CamperBot
@camperbot
Feb 08 2017 03:21
you need to ask about @someone!
Manish Giri
@Manish-Giri
Feb 08 2017 03:21
but you got it, so nvm
S1ant
@S1antCodez
Feb 08 2017 03:22
Got to go
Tom
@moT01
Feb 08 2017 03:32
anyone wanna help me?
I-am-candy
@I-am-candy
Feb 08 2017 03:33
@moT01 I can help you
ImJustKenny
@ImJustKenny
Feb 08 2017 03:33
what seems to be the problem @moT01
bill zhang
@likefatboy
Feb 08 2017 03:34
where can i find the explan for html
Tom
@moT01
Feb 08 2017 03:34
im trying to make my little key on the right to have a gradient
to match the colorscale
Alex Cota
@alexandracota
Feb 08 2017 03:35
Anyone know how to add smaller-image to the img tag?
howdyjacko
@howdyjacko
Feb 08 2017 03:35
Hello Coding pros! I have a basic question for you. Within my style sheet certain fields remain highlighted even though I have set values for them (e.g. border-color=green; and border-style=solid;). To recap, "green" and "solid" remain highlighted. What must I change in order for the edit to stick?
I-am-candy
@I-am-candy
Feb 08 2017 03:35
@alexandracota I do
ImJustKenny
@ImJustKenny
Feb 08 2017 03:35
@alexandracota first
you need to declare it in a style tag
Alex Cota
@alexandracota
Feb 08 2017 03:36
@ImJustKenny alright, I've done that. What's next?
Robert
@robertgaovang
Feb 08 2017 03:37

i believe my code is wrong somewhere? <style>
.red-text {
color: red;
}

p {
font-size: 16px;
}

</style>

i trying to get the font size to be 16px
Alex Cota
@alexandracota
Feb 08 2017 03:38
@I-am-candy I've declared it in the style tag already. Do you know what I'm supposed to do next?
ImJustKenny
@ImJustKenny
Feb 08 2017 03:38

@alexandracota so you have

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

Alex Cota
@alexandracota
Feb 08 2017 03:38
@ImJustKenny yup, got it
ImJustKenny
@ImJustKenny
Feb 08 2017 03:39
@robertgaovang did you do class="font-size" in the p tag?
Sanjana Sinha
@ss1841
Feb 08 2017 03:39
hi! i changed the href attribut to # but still i can not submit the code
Manish Giri
@Manish-Giri
Feb 08 2017 03:39
@robertgaovang post your challenge url here, click "run tests" first..
Robert
@robertgaovang
Feb 08 2017 03:39
no i haven't, thanks i will try it
ImJustKenny
@ImJustKenny
Feb 08 2017 03:39
then go to the image tag you need to do it and put this <img class="smaller-image" and whate ever else is in there
Alex Cota
@alexandracota
Feb 08 2017 03:40
@ImJustKenny It worked! Thank you!
CamperBot
@camperbot
Feb 08 2017 03:40
alexandracota sends brownie points to @imjustkenny :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @imjustkenny |http://www.freecodecamp.com/imjustkenny
Robert
@robertgaovang
Feb 08 2017 03:40
would it be like this then
p {
class=font-size: 16px;
}
ImJustKenny
@ImJustKenny
Feb 08 2017 03:40
no
@robertgaovang got to the p tags <p>
and do this on the first p tag <p class=font-size">
Sanjana Sinha
@ss1841
Feb 08 2017 03:41
hello everyone! can anyone help me with replacing href
Manish Giri
@Manish-Giri
Feb 08 2017 03:41
@ss1841 show your code?
Sanjana Sinha
@ss1841
Feb 08 2017 03:42
<p>Click here for <a # ="http://www.freecatphotoapp.com">cat photos</a> </p>
ImJustKenny
@ImJustKenny
Feb 08 2017 03:42
take out the http all together
Manish Giri
@Manish-Giri
Feb 08 2017 03:42
@ss1841 you need to replace the http link with #
Thomas
@Thomaso54
Feb 08 2017 03:42
it should be <a href=#> @ss1841
ImJustKenny
@ImJustKenny
Feb 08 2017 03:42
it should be <a="#"</a>
Manish Giri
@Manish-Giri
Feb 08 2017 03:42
put the href back in
M Denise
@colemanallme
Feb 08 2017 03:43

Hi everyone. i have a question hope someone can clarify. I am doing Use RGb to mix Colors., color code for rgb is correct, but it says use rgb for color red. This is what it looks like:<style>
.red-text {
color:rgb(255, 0, 0)
}
.orchid-text {
color: rgb(218, 112, 214)
}
.sienna-text {
color:rgb(160, 82, 45)
}
.blue-text {
color:rgb(0, 0, 255)
}
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="orchid-text">I am orchid!</h1>

<h1 class="sienna-text">I am sienna!</h1>

<h1 class="blue-text">I am blue!</h1>
I do not see what i am missing for me to move forward to the next challenge.

ImJustKenny
@ImJustKenny
Feb 08 2017 03:43
<a href*
Manish Giri
@Manish-Giri
Feb 08 2017 03:43
@colemanallme you're missing the closing ;
ImJustKenny
@ImJustKenny
Feb 08 2017 03:43
(0, 0 , 255); for all of them @colemanallme
put the ; after the closing (); is what i mean
Robert
@robertgaovang
Feb 08 2017 03:44
I was given this code to follow for changing my 2nd paragraph to 16px
p {
class=font-size: 16px;
}

right now i have this code <style>
.red-text {
color: red;
}

<p class="font-size">: 16px;
</p>

</style>

ImJustKenny
@ImJustKenny
Feb 08 2017 03:45
@robertgaovang got to the <p></p> that you need to change
Sanjana Sinha
@ss1841
Feb 08 2017 03:45
Thanks!
M Denise
@colemanallme
Feb 08 2017 03:47
@Manish-Giri you were correct i was missing the ; it is crazy how a comma or semi colon makes your code. I always double check my code before i post in chat. I TThanks Manish Girl
@Manish-Girl THANKS i got it
CamperBot
@camperbot
Feb 08 2017 03:47
colemanallme sends brownie points to @manish-girl :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for manish-girl
Manish Giri
@Manish-Giri
Feb 08 2017 03:48
@colemanallme it's an i at the end, not an l
but welcome
ImJustKenny
@ImJustKenny
Feb 08 2017 03:48

@robertgaovang

<style>

p {
font-size: 16px;
}

</style>

<p class="font-size"> THIS IS HOW </p>

M Denise
@colemanallme
Feb 08 2017 03:49
@Manish-Giri -no problem
Manish Giri
@Manish-Giri
Feb 08 2017 03:49
@ImJustKenny quit posting incorrect code.
Thomas
@Thomaso54
Feb 08 2017 03:50
you wouldn't need a class for the <p> would you since you changed it in style?
ImJustKenny
@ImJustKenny
Feb 08 2017 03:50
I dont remember im passes that part im trying to get my jQuerry stuff done tbh
Manish Giri
@Manish-Giri
Feb 08 2017 03:51
well if you don't remember stuff then you shouldn't post code to help
people might get more confused with that
howdyjacko
@howdyjacko
Feb 08 2017 03:52
Resolved my question from earlier. The difference between : and this ; is small but significant. It hung me up for the last 10 minutes. Lesson: details [matter]. Lesson 2: starting over is okay.
ImJustKenny
@ImJustKenny
Feb 08 2017 03:52
I thought i had it right but i just remembered i was thinking of something else @Manish-Giri
M Denise
@colemanallme
Feb 08 2017 03:56
@howdyjacko that's good but i think explanation in learning is key, and challenges listed in left column are not self explanatory which is good for research. All for a better learner.
Ronald Gidrey
@Gidr99
Feb 08 2017 03:57

Hello everyone new at this stuck on this problem: Use a CSS Class to Style an Element
Classes are reusable styles that can be added to HTML elements.

Here's an example CSS class declaration:

<style>
.blue-text {
color: blue;
}
</style>
You can see that we've created a CSS class called blue-text within the <style> tag.

You can apply a class to an HTML element like this:

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

Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.

Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.

Give your h2 element the class attribute with a value of 'red-text'.

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

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
Above is the problem

kevinspaceyfrankunderwood
@kevinspaceyfrankunderwood
Feb 08 2017 04:00
Curious..for my first day of FCC, is getting to #50 decent??
Thomas
@Thomaso54
Feb 08 2017 04:01
@Gidr99 in your <style> only have .red-text{color:red;}, no h2, then to add the class to h2 you do <h2 class="red-text">
ImJustKenny
@ImJustKenny
Feb 08 2017 04:02
change .blue-text to .red-text and color from blue to red then instead of <h2 class="blue-text"> it should be <h2 class="red-text">
toiletwrecker
@toiletwrecker
Feb 08 2017 04:04
how do i apply the font-family of Lobster to my h2 element
Faddah Wolf
@faddah
Feb 08 2017 04:04

@Gidr99 your issue is that you did the CSS —

h2.red-text {
  color: red;
}

however, if you want the text for all h2’s to be red, you would have to do —

h2 {
  color: red;
}

…or, if you just want elements with a .red-text class to be red, then it should be —

.red-text {
  color: red;
}

… and in your HTML —

<h2 class=“red-text">My Red Text</h2>
...

hope this helps.

toiletwrecker
@toiletwrecker
Feb 08 2017 04:05
do i have to make a css class thingy
Andrew Shieh
@andrewlikes
Feb 08 2017 04:06
@faddah color: is the same as font-color: ?
Faddah Wolf
@faddah
Feb 08 2017 04:06
@andrewlikes yes. i don’t know anyone who uses font-color, only color. is font-color even in MDN?
Rachel Gering
@RachelGering
Feb 08 2017 04:07
Can someone help me find my error? It won't let me progress when I Run tests. It says, "Make sure your "a" element has a closing tag." But as far as I can see, it does. Just want to identify the problem so I can keep going. Thanks.
<p class="red-text">Kitty ipsum
<a href="http://freecatphotoapp.com"> cat photos</a>
dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
SaiChand Duppala
@saichandd
Feb 08 2017 04:07

@toiletwrecker , no noeed of class, h2 {

font-family: 'Lobster', cursive;

}

Amol Borkar
@Amminexx
Feb 08 2017 04:07
im in the falsy bouncer challenge and this is my fucntion ```
function bouncer(arr) {
  // Don't show a false ID to this bouncer.
  arr = arr.filter(function(x) { 
    return [false, null, 0, "", undefined, NaN].indexOf(x) <= -1;
  });
  return arr;
}
but its not working for some cases and returns [null] when it should return [] help
Thomas
@Thomaso54
Feb 08 2017 04:09
@RachelGering you need the <a></a> section to be outside of your <p></p> section, right now it is inside of your <p></p>
Faddah Wolf
@faddah
Feb 08 2017 04:09
@andrewlikes yeah, i don’t see any font-color property here — https://developer.mozilla.org/en-US/docs/Web/CSS/font
Andrew Shieh
@andrewlikes
Feb 08 2017 04:09
@faddah I haven't gotten to JS yet. I was taught to write font-color when I learned html/css
Faddah Wolf
@faddah
Feb 08 2017 04:10
@andrewlikes far as i know, it has always been color, not anything with font- in front of it.
Andrew Shieh
@andrewlikes
Feb 08 2017 04:12
@faddah ah, my mistake. You are right.. I just double checked haha
Robert Arifin
@renkachan
Feb 08 2017 04:18
guys how to make that -- become 1ine?
Rachel Gering
@RachelGering
Feb 08 2017 04:18

Thanks, @Thomaso54 The challenge I'm on is asking me to use it in the middle of a paragraph. Here is their example. I can't see what I'm missing...

"<p>Here's a <a href="http://freecodecamp.com"> link to Free Code Camp</a> for you to follow.</p>

Create an a element that links to http://freecatphotoapp.com and has "cat photos" as its anchor text."

CamperBot
@camperbot
Feb 08 2017 04:18
:cookie: 100 | @thomaso54 |http://www.freecodecamp.com/thomaso54
rachelgering sends brownie points to @thomaso54 :sparkles: :thumbsup: :sparkles:
bitcointroy
@bitcointroy
Feb 08 2017 04:19
Anybody know why a code snippet from w3schools (which looks perfect in their editor) gets all messed up in the codepen editor?
I've tried adding and deleting the style sheets and script src elements. Nothing changes.
versus
Thomas
@Thomaso54
Feb 08 2017 04:26
@RachelGering you need to create a new <p></p> below your <h2></h2> and place the <a></a> linking to "http://www.freecatphotoapp.com" inside your <p></p> like <p <a href="http://www.freecatphotoapp.com">text</a></p>
Thomas
@Thomaso54
Feb 08 2017 04:27
@RachelGering wait actually its <p><a></a></p> not <p<a>> </a></p>
Joel
@JoelFive6Two
Feb 08 2017 04:29
Need help
Rachel Gering
@RachelGering
Feb 08 2017 04:30
well, i finally refreshed the page, and it worked. i feel dumb. ha!
Vizij
@Vizij
Feb 08 2017 04:35
@JoelFive6Two What with?
pranjal-manchanda
@pranjal-manchanda
Feb 08 2017 04:36
Hey so under Front End Development Certification > HTML5 and CSS > Add images to your Website, it states that "Note that in most cases, img elements are self-closing". What does it mean by self closing?
Vizij
@Vizij
Feb 08 2017 04:36
@pranjal-manchanda You don't need an end tag, i.e. </img> doesn't exist.
ekacg97
@ekacg97
Feb 08 2017 04:36
how
pranjal-manchanda
@pranjal-manchanda
Feb 08 2017 04:37
@Vizij Thanks!
CamperBot
@camperbot
Feb 08 2017 04:37
pranjal-manchanda sends brownie points to @vizij :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @vizij |http://www.freecodecamp.com/vizij
jkcousart
@jkcousart
Feb 08 2017 04:37
hey guys just wondering how to put in an id
where do i put an id in in <form action="/submit-cat-photo">
Thomas
@Thomaso54
Feb 08 2017 04:38
like how you add a class to something, except id instead such as <h1 id="idHere"></h1>
jkcousart
@jkcousart
Feb 08 2017 04:39
do i put the id between form and action?
Thomas
@Thomaso54
Feb 08 2017 04:39
yes
Faddah Wolf
@faddah
Feb 08 2017 04:39
@andrewlikes no worries, man. glad you’re getting it sorted.
Chris Jantzen
@XXiphias
Feb 08 2017 04:41
@jkcousart Just so you know, the order of the aruments does not matter. You can do < form id="" action=""> OR <form action="" id=""> Both are equivalent :)
the same goes for any html element
and any arugments
ekacg97
@ekacg97
Feb 08 2017 04:45
what mean ? Make your h1 element visible on your page by uncommenting it.
MiguelM47
@MiguelM47
Feb 08 2017 04:45
<script>
  $(document).ready(function() {

  });
</script>

<!-- Only change code above this line. -->

<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">
        <script>
          $("button").addClass("animated");
          $(".btn").addClass("shake");
          $("#target1").addClass("btn-primary");
        </script>
        <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>
My #target1 element should have the classes animated, shake, and btn-primary. I am confused on how I am supposed to get those other classes within my #target1 element. Any help will be appreciated.
Matt
@Misaiah
Feb 08 2017 04:45
Can someone help me with this? :smile:
Your div element should have a silver background.....
<div slver-background class="silver-background">
</div>
danielland77
@danielland77
Feb 08 2017 04:46
Hi there!
Chris Jantzen
@XXiphias
Feb 08 2017 04:46
@ekacg97 Uncomment it. So remove the <!-- --> around your h1 element
Matt
@Misaiah
Feb 08 2017 04:46
Hello all!
Thomas
@Thomaso54
Feb 08 2017 04:46
@Misaiah you don't need the first silver background, just <div class="silver-background">
ekacg97
@ekacg97
Feb 08 2017 04:47
@XXiphias thank you :)
CamperBot
@camperbot
Feb 08 2017 04:47
ekacg97 sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 21 | @xxiphias |http://www.freecodecamp.com/xxiphias
danielland77
@danielland77
Feb 08 2017 04:47
does anyone know how to create "a" element that can be linked to a website and has some anchor text?
Samyam Chandra Shrestha
@samyamstha
Feb 08 2017 04:47
Anybody interested in spring framework?
Chris Jantzen
@XXiphias
Feb 08 2017 04:47
@MiguelM47 You can do it the same way you did the first
$("#target1").addClass("btn-primary");
Just repeat that line for classes animated and btn-primary
er.. animated and shake
Matt
@Misaiah
Feb 08 2017 04:48
@Thomaso54 thank you! it still is not working though
CamperBot
@camperbot
Feb 08 2017 04:48
misaiah sends brownie points to @thomaso54 :sparkles: :thumbsup: :sparkles:
Samyam Chandra Shrestha
@samyamstha
Feb 08 2017 04:48
<a href="#" target="_blank">text info</a>
CamperBot
@camperbot
Feb 08 2017 04:48
:cookie: 102 | @thomaso54 |http://www.freecodecamp.com/thomaso54
Deepak8717
@Deepak8717
Feb 08 2017 04:48

Can someone explain.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body style="height:1500px">

<nav class="navbar navbar-inverse navbar-fixed-top">

      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container" style="margin-top:50px">
  <h3>Fixed Navbar</h3>
  <div class="row">
    <div class="col-md-4">
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>    
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
    </div>
  </div>
</div>

<h1>Scroll this page to see the effect</h1>

</body>
</html>

I copied this from w3scools its working there but when i paste on codepen it is not working.

Thomas
@Thomaso54
Feb 08 2017 04:48
@danielland77 <a href="link here, include quotes">text for link here</a>
Gulsvi
@gulsvi
Feb 08 2017 04:48

@MiguelM47 I think you want to move this:

        <script>
          $("button").addClass("animated");
          $(".btn").addClass("shake");
          $("#target1").addClass("btn-primary");
        </script>

Up to your document.ready(function()

Thomas
@Thomaso54
Feb 08 2017 04:49
@Misaiah do you have the silver-background class named in your <style></style>?
bitcointroy
@bitcointroy
Feb 08 2017 04:49
@Deepak8717 I'm having the same issue.
Chris Jantzen
@XXiphias
Feb 08 2017 04:49
@danielland77 Just do a normal a element and set the src="" but at the end of the url add #anchor, replacing anchor with you anchor text
danielland77
@danielland77
Feb 08 2017 04:50
thanks@XXiphias ....let me try this
Matt
@Misaiah
Feb 08 2017 04:51

@Thomaso54
<div class="silver-background"> </div>

</style>

thats what I have so far
and its still not working
Chris Jantzen
@XXiphias
Feb 08 2017 04:51
@Matt in your <style></style> block add background-color: silver;
er.. in .silver-background { } in your style block
Camille Gainer Jones
@Drummette
Feb 08 2017 04:53

Having problems passing this challenge it is The Line up Form Elements Responsively with Bootstrap challenge

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

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

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

</style>

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

Gustavo Santana
@santanaG
Feb 08 2017 04:53
I just killed "nesting for loops" on the javascript section by attempting to implement a recursive function. Any ideas on how to keep the page from loading the JS so that it does not continue to freeze every time I try to solve it?
Matt
@Misaiah
Feb 08 2017 04:54
@XXiphias like this?:
<div class="silver-background">
.silver-background {background-color: silver;}</div>
Chris Jantzen
@XXiphias
Feb 08 2017 04:54
no
two seperate pieces
Thomas
@Thomaso54
Feb 08 2017 04:55

@Misaiah

<style>

woops
MiguelM47
@MiguelM47
Feb 08 2017 04:55
@SkyCoder01 I added the additional classes but I'm still having issues:
<script>
  $(document).ready(function() {
  <script>
          $("button").addClass("animated");
          $(".btn").addClass("shake");
          $("#target1").addClass("btn-primary");
          $("#target1").addClass("shake");
          $("#target1").addClass("animated");
  </script>
  });
</script>
Chris Jantzen
@XXiphias
Feb 08 2017 04:55
<style>
    .silver-background { background-color: silver; }
</style>
 <div class="silver-background"></div>
Thomas
@Thomaso54
Feb 08 2017 04:55

<style>
.silver-background{background-color:silver;}
</style>

<div class="silver-background">
</div>

Deepak8717
@Deepak8717
Feb 08 2017 04:55
@bitcointroy any idea why ?
Chris Jantzen
@XXiphias
Feb 08 2017 04:56
ya, like that ^
Gulsvi
@gulsvi
Feb 08 2017 04:56
@MiguelM47 Only one set of <script> tags is needed and only one class added to #target1
<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>
bitcointroy
@bitcointroy
Feb 08 2017 04:56
@Deepak8717 I posted a few minutes before you the same issue. I have no idea. It looks perfect on w3school.
Matt
@Misaiah
Feb 08 2017 04:57
@Thomaso54 @XXiphias thanks guys!!! I finally got it. It clicked once I was informed it was two separate pieces
One section went in <style></style> and another section a class
MiguelM47
@MiguelM47
Feb 08 2017 04:57
@SkyCoder01 Thank you, it worked out perfectly!
CamperBot
@camperbot
Feb 08 2017 04:57
miguelm47 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 146 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 08 2017 04:58

@Drummette ``` try using backticks to format your code https://github.com/freeCodeCamp/freeCodeCamp/wiki/Code-Formatting

```
<html goes here>
```

@MiguelM47 :+1:
Deepak8717
@Deepak8717
Feb 08 2017 04:59
@bitcointroy Hope they fix the problem soon.
Matt
@Misaiah
Feb 08 2017 04:59
you guys have a fantastic evening. Thanks for all of your help!
bitcointroy
@bitcointroy
Feb 08 2017 05:00
@Deepak8717 You think it's a bug? I was thinking I didn't have the right external CSS / JS links.
@Deepak8717 I've tried putting them in the code editor, and in the slots in the "Settings" - neither worked.
Camille Gainer Jones
@Drummette
Feb 08 2017 05:02
@SkyCoder01 I'm not really understanding what I'm supposed to do
Deepak8717
@Deepak8717
Feb 08 2017 05:05
@bitcointroy i think its codepen problem.
bitcointroy
@bitcointroy
Feb 08 2017 05:05
@Deepak8717 OK. I'll pick it up again tomorrow.
@Deepak8717 Is there anywhere we can report the bug?
Matthew Kelly
@mattkellz13
Feb 08 2017 05:06
I'm trying to do the Responsive Design Mission and I can't figure out how to give the div element the class "container-fluid", any help?
Deepak8717
@Deepak8717
Feb 08 2017 05:08
@bitcointroy not sure where we can report it. i am just new in programming world.
Jeremy Soto
@XenSoto
Feb 08 2017 05:08
I'm having a problem with "Link to External Pages with Anchor Elements". It seems I have everything correct, but I'm not sure since it's not accepting it as being done.
Manish Giri
@Manish-Giri
Feb 08 2017 05:08

@mattkellz13 create a new div, give it the class container-fluid, and put all your html inside it

<div class="container-fluid">
//all html here
</div>

HTML is all code below the closing </style> tag

Matthew Kelly
@mattkellz13
Feb 08 2017 05:09
@Manish-Giri worked, thank you!
CamperBot
@camperbot
Feb 08 2017 05:09
mattkellz13 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 4114 | @manish-giri |http://www.freecodecamp.com/manish-giri
bitcointroy
@bitcointroy
Feb 08 2017 05:09
@Deepak8717 I'm new too. If I find a bug report option, I'll let you know.
Manish Giri
@Manish-Giri
Feb 08 2017 05:09
@mattkellz13 welcome
Camille Gainer Jones
@Drummette
Feb 08 2017 05:09

hello everyone still having problems with this challenge it is the Line up Form elements Responsively with Bootstrap '''

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

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

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

</style>

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

CamperBot
@camperbot
Feb 08 2017 05:09
:bulb: to format code use backticks! ``` more info
bitcointroy
@bitcointroy
Feb 08 2017 05:09
@Deepak8717 Thanks
CamperBot
@camperbot
Feb 08 2017 05:09
bitcointroy sends brownie points to @deepak8717 :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @deepak8717 |http://www.freecodecamp.com/deepak8717
toiletwrecker
@toiletwrecker
Feb 08 2017 05:10
i need help with challenge number 28
Deepak8717
@Deepak8717
Feb 08 2017 05:10
@bitcointroy thanks, bythway where have you reached in FCC curriculum ?
CamperBot
@camperbot
Feb 08 2017 05:10
deepak8717 sends brownie points to @bitcointroy :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @bitcointroy |http://www.freecodecamp.com/bitcointroy
toiletwrecker
@toiletwrecker
Feb 08 2017 05:10
im using the a element with the exact template that it gave in the example but its not working
Jeremy Soto
@XenSoto
Feb 08 2017 05:10

Is there something I'm doing wrong.

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

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

h2 {
font-family: Lobster, Monospace;
}

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

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

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

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

<a href="http://freecatphotoapp.com" >cat photos </a>

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

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

bitcointroy
@bitcointroy
Feb 08 2017 05:11
@Deepak8717 I'm on the Portfolio challenge.
@fortMaximus Thanks. I'm looking to report a bug to codepen though.
CamperBot
@camperbot
Feb 08 2017 05:11
bitcointroy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Deepak8717
@Deepak8717
Feb 08 2017 05:11
me too @bitcointroy you think we both can work together ?
toiletwrecker
@toiletwrecker
Feb 08 2017 05:12
@XenSoto dont you need the paragraph element around the a element?
bitcointroy
@bitcointroy
Feb 08 2017 05:12
@Deepak8717 Sure. That would be good.
Deepak8717
@Deepak8717
Feb 08 2017 05:13
would you like to be connected on any other platform ?
Deepak8717
@Deepak8717
Feb 08 2017 05:13
would you like to be connected on any other platform ? @bitcointroy
Jeremy Soto
@XenSoto
Feb 08 2017 05:14
@toiletwrecker That's what I did at first and It still wouldn't work. I just input it once again and it's still not working.
bitcointroy
@bitcointroy
Feb 08 2017 05:15
@fortMaximus Thanks again!
CamperBot
@camperbot
Feb 08 2017 05:15
bitcointroy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: bitcointroy already gave fortmaximus points
bitcointroy
@bitcointroy
Feb 08 2017 05:15
@Deepak8717 I PM'd you here, but yes, I'm on a few other platforms.
Gulsvi
@gulsvi
Feb 08 2017 05:17
@bitcointroy @Deepak8717 Does this pen work for you? http://codepen.io/skycoder/pen/dNqzGX
You'll need to use these bootstrap files in your codepen: https://www.bootstrapcdn.com/
bitcointroy
@bitcointroy
Feb 08 2017 05:19
@SkyCoder01 Thanks. Do you use those bootstrap files instead of the "quick add" files in codepen, or in addition to?
CamperBot
@camperbot
Feb 08 2017 05:19
bitcointroy sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 08 2017 05:19
@bitcointroy It's really annoying, but codepen just changed to some alpha version 4 of bootstrap in the quick add.
I have to manually go in and add version 3.7 instead to get it to work
bitcointroy
@bitcointroy
Feb 08 2017 05:20
@SkyCoder01 A Ha
Chris Jantzen
@XXiphias
Feb 08 2017 05:21
@XenSoto Just a guess but it might be the space after "cat photos" stopping it from working. Otherwise it looks fine
bitcointroy
@bitcointroy
Feb 08 2017 05:21
@SkyCoder01 That did it
@Deepak8717 Did you see that?
Gulsvi
@gulsvi
Feb 08 2017 05:21
I think they changed it on Friday or Saturday....been looking for a blog or a twitter post. No heads up or anything. :(
bitcointroy
@bitcointroy
Feb 08 2017 05:22
Those bastards!
(Cartman, eat your heart out.)
Gulsvi
@gulsvi
Feb 08 2017 05:22
lol
Jeremy Soto
@XenSoto
Feb 08 2017 05:26
@XXiphias I restarted it a few times and it finally took it. I have no idea what I changed.
Chris Jantzen
@XXiphias
Feb 08 2017 05:26
nice :)
Jeremy Soto
@XenSoto
Feb 08 2017 05:26
Thanks for the help though. :)
Chris Jantzen
@XXiphias
Feb 08 2017 05:26
no worries
ChuChuTran
@ChuChuTran
Feb 08 2017 05:27
hi can anyone show me where the bootstrap library the instructor talked about?
thanks
Coy Sanders
@coymeetsworld
Feb 08 2017 05:28
@ChuChuTran can also check http://getbootstrap.com
click the getting started and it will have links to the cdns you can copy
Deepak8717
@Deepak8717
Feb 08 2017 05:29
@bitcointroy yes i saw. thanks @SkyCoder01 how did you do that. Sorry i am kinda busy. i am at work.
CamperBot
@camperbot
Feb 08 2017 05:29
deepak8717 sends brownie points to @bitcointroy and @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: deepak8717 already gave bitcointroy points
:cookie: 148 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 08 2017 05:32
@Deepak8717 Don't use the "Quick Add" menu in codepen. They switched to an alpha pre-release version of Bootstrap Version 4. Use this URL instead: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
h1tag
@h1tag
Feb 08 2017 05:33
Can someone help me on the Roman Numeral Converter (this is my 3rd day on this challenge). I saw the hints at FCC's github. It says to create 2 array: one for decimal numbers and one for roman numbers. After that, I'm thinking of using if else if but idk how to the conditional statements should be or where to start from.
Gulsvi
@gulsvi
Feb 08 2017 05:34
I can probably spend 20-30 minutes searching around to figure this out :p but maybe someone here as a quicker answer...
How can I make it so my <input> doesn't allow <script></script> execution?
In my wikipedia viewer, I can run any javascript just by submitting it between <script></script> in the search box...
Obviously, I can watch for the <script> tag, but I'm guessing there's more ways to run code that I haven't figured out yet...
Deepak8717
@Deepak8717
Feb 08 2017 05:35
@SkyCoder01 is it just for bootstrap or for any css and javascript ?
Gulsvi
@gulsvi
Feb 08 2017 05:36
@Deepak8717 Just for bootstrap - both the CSS and the JavaScript files. Here's the links to both: https://www.bootstrapcdn.com/
Chris Jantzen
@XXiphias
Feb 08 2017 05:36
@SkyCoder01 you could write a parser function that looks for <script> or </script>
would be really simple regex
although probably doesnt need regex really if those are the only tags to strip out
Gulsvi
@gulsvi
Feb 08 2017 05:37
Yeah, I just don't know if there are other ways to run JavaScript. Was hoping for a "noscript" parameter or some input sanitizer plugin
h1tag
@h1tag
Feb 08 2017 05:38
I keep getting ignored for the 3rd day :worried: idk what I've done to deserve this :worried:
Chris Jantzen
@XXiphias
Feb 08 2017 05:38
oh. so you want the textbox itself to not allow that to be written in it? Or the form to not take it?
Matthew Kelly
@mattkellz13
Feb 08 2017 05:38
Just a question on adding i elements to buttons, where do you put the i class in the button element?<button class="btn btn-block btn-primary"
>Like</button>
Gulsvi
@gulsvi
Feb 08 2017 05:39
@XXiphias I just don't want any code to be run in my text box, not sure if <script> is the only thing to deny
Coy Sanders
@coymeetsworld
Feb 08 2017 05:39
its an i tag @mattkellz13, and you nest it in the button
Deepak8717
@Deepak8717
Feb 08 2017 05:39
@SkyCoder01 thank you so much once again. You saved a lot of my time and frustration.
CamperBot
@camperbot
Feb 08 2017 05:39
deepak8717 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: deepak8717 already gave skycoder01 points
Chris Jantzen
@XXiphias
Feb 08 2017 05:39
right. so the worry is when they hit submit and the form is submitted by js that the code will run, no?
Gulsvi
@gulsvi
Feb 08 2017 05:40
@Deepak8717 :+1: glad the time I wasted helped you save some time :p
Matthew Kelly
@mattkellz13
Feb 08 2017 05:40
@coymeetsworld where do i nest it in the button? I keep trying to make the tag and it won't work
Louine Wailes
@LKWIII
Feb 08 2017 05:40
Screen Shot 2017-02-07 at 21.36.58.png
Matthew Kelly
@mattkellz13
Feb 08 2017 05:40
<button class="btn btn-block btn-primary" >Like</button>
Louine Wailes
@LKWIII
Feb 08 2017 05:40
Im stuck on something. I have been trying to get my tribute page to be responsive across screen sizes by adding in the div tags. So I'm going back in to add them in one at a time, but even the first part to center my tributee's name is not working! what am I missing?
Coy Sanders
@coymeetsworld
Feb 08 2017 05:40
anywhere in the button, can be before or after the text @mattkellz13
Gulsvi
@gulsvi
Feb 08 2017 05:40
Yes @XXiphias that's the main concern
Chris Jantzen
@XXiphias
Feb 08 2017 05:41
@fortMaximus give us more info. some people may not know the challenge you mean but if you tell us what you're trying to accomplish someone might help
@SkyCoder01 could you then in the js that accepts the form run a parser?
Deepak8717
@Deepak8717
Feb 08 2017 05:42
@bitcointroy so how much portfolio have you built so far ? wana share any homework ? or any tips ?
Matthew Kelly
@mattkellz13
Feb 08 2017 05:42
@coymeetsworld got it, thanks!
CamperBot
@camperbot
Feb 08 2017 05:42
mattkellz13 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 2042 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Louine Wailes
@LKWIII
Feb 08 2017 05:42
As you can see, even with the class="text-center", her name is left side.
Gulsvi
@gulsvi
Feb 08 2017 05:42
@XXiphias Yes, I just don't know what to parse
Coy Sanders
@coymeetsworld
Feb 08 2017 05:42
np @mattkellz13
Tyson Seow
@tysonseow93
Feb 08 2017 05:42
  1. Give the submit button in your form the classes btn btn-primary.
  2. Add a <i class="fa fa-paper-plane"></i> within your submit button element.
    I keep getting Xs on these two but I don't know why. Help please
    <input class="form-control" type="text" placeholder="cat photo URL" required>
    <button class="btn btn-primary"type="submit "><i class="fa fa-paper-plane"> Submit </i> </button>
    </form>
Gulsvi
@gulsvi
Feb 08 2017 05:42
And honestly think that if every developer has to write their own parser, the web is broken with cross-site scripting attacks everywhere :)
Coy Sanders
@coymeetsworld
Feb 08 2017 05:42
you don't nest the text inside the i tag @tysonseow93
Louine Wailes
@LKWIII
Feb 08 2017 05:42
Screen Shot 2017-02-07 at 21.41.11.png
Chris Jantzen
@XXiphias
Feb 08 2017 05:43
when you get the data from that form field you can parse that. if using jquery when you do .text() it will stip html automatically. if no jquery a regex string can remove html
Gulsvi
@gulsvi
Feb 08 2017 05:43
I don't think you can use .text() on a text field, just .val()
Chris Jantzen
@XXiphias
Feb 08 2017 05:43
you can grab the data then run .text() on it
("#input").val().text();
h1tag
@h1tag
Feb 08 2017 05:44
@XXiphias it's a challenge where you have to convert decimal numerals to roman numerals. But I already gave the challenge name, so anyone can look it up in the map and see what the challenge asks
Gulsvi
@gulsvi
Feb 08 2017 05:44
Hmmm, I'll try that
Tyson Seow
@tysonseow93
Feb 08 2017 05:44
@coymeetsworld I removed the text and it still is telling me it's wrong
Chris Jantzen
@XXiphias
Feb 08 2017 05:44
you could use something like this: https://github.com/leizongmin/js-xss but I think its overkill
Coy Sanders
@coymeetsworld
Feb 08 2017 05:44
@tysonseow93 didn't say remove, said it shouldn't be nested in the i tags
ZenZate
@ZenZate
Feb 08 2017 05:44
good morning
Gulsvi
@gulsvi
Feb 08 2017 05:44
Yeah, thought there would be some w3c standard for this, like a noscript attribute, but can't find anything
Uncaught TypeError: $(...).val(...).text is not a function
Chris Jantzen
@XXiphias
Feb 08 2017 05:45
:/
give me a minute and ill figure it out and send you a jsfiddle
oh. did you do .text() (with brackets?)
MiguelM47
@MiguelM47
Feb 08 2017 05:46
<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $(button id="#target4").html("<em>#target4</em>");
  });
</script>

<!-- Only change code above this line. -->

<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>
How do I select button id="target4" with JQuery?
Chris Jantzen
@XXiphias
Feb 08 2017 05:46
$("#target4");
Coy Sanders
@coymeetsworld
Feb 08 2017 05:47
@XXiphias don't give out answers like that please
Gulsvi
@gulsvi
Feb 08 2017 05:47
Thanks for trying @XXiphias
I did ($('#input').val()).text() and $('#input').val().text()
CamperBot
@camperbot
Feb 08 2017 05:47
skycoder01 sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 44 | @xxiphias |http://www.freecodecamp.com/xxiphias
Louine Wailes
@LKWIII
Feb 08 2017 05:47
can someone help with a bootstrap div question?
Coy Sanders
@coymeetsworld
Feb 08 2017 05:47
@MiguelM47 its just like you did with target1
bitcointroy
@bitcointroy
Feb 08 2017 05:49
@LKWIII fire away ... that's what this forum is for.
Louine Wailes
@LKWIII
Feb 08 2017 05:51
I have created a tribute page that looks good on larger screens, but because I didn't use the bootstrap <div> tags, it was not working right on my phone. It needed to be centered on the screen.
Chris Jantzen
@XXiphias
Feb 08 2017 05:51
@SkyCoder01 I think I figured it out. Try:
$($('#input').val()).text();
ZenZate
@ZenZate
Feb 08 2017 05:51
put a container-fluid div around everything
@LKWIII
Louine Wailes
@LKWIII
Feb 08 2017 05:52
So, I have gone back and tried to start layering them in, but the first attempt (to center my title isn't working right....
Screen Shot 2017-02-07 at 21.36.58.png
ZenZate
@ZenZate
Feb 08 2017 05:53
is this on codepen
Have you added bootstrap
Coy Sanders
@coymeetsworld
Feb 08 2017 05:53
you don't need bootstrap necessarily @LKWIII, you could look into media queries, or even better Flexbox
Gulsvi
@gulsvi
Feb 08 2017 05:55
@XXiphias Hmmm, that doesn't give an error but doesn't give search results either. I'll see if I can figure out why
Louine Wailes
@LKWIII
Feb 08 2017 05:55
Yes in codepen. Even with container-fluid, a row and "text-center it isn't centering the name in the row.
Ankur0077
@Ankur0077
Feb 08 2017 05:55
why do we provide value attribute while making radio button??
Coy Sanders
@coymeetsworld
Feb 08 2017 05:56
@Ankur0077 its for when you submit the data in the form
communicates what radio button was clicked
Ankur0077
@Ankur0077
Feb 08 2017 05:57
@coymeetsworld ohkkk thanks man!
CamperBot
@camperbot
Feb 08 2017 05:57
ankur0077 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 2043 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Feb 08 2017 05:57
np
Chris Jantzen
@XXiphias
Feb 08 2017 05:57
@fortMaximus If it suggests arrays you could use two arrays, one with numbers and one with roman numerals. Then you can use one to conver to the other in a recursive function using divison and mod. if (x > 1000) { y = x mod 10; use y to get roman numeral; x = x / 1000; } else if (x > 100) {. .. }
Ankur0077
@Ankur0077
Feb 08 2017 05:58
can anybody tell me what javascript used for? can we make anything which we use to make, simple example like to make a chat window like this
Chris Jantzen
@XXiphias
Feb 08 2017 05:58
there are probably nicer ways of accomplishing it but thats my first thought on the problem
you could make something like this Ankur. you can program dynamic contant with it that doesnt need a [page reload to get new data
it can be used for making apps, or even games as well
Coy Sanders
@coymeetsworld
Feb 08 2017 05:59
javascript gets your webpages behavior @Ankur0077
Ankur0077
@Ankur0077
Feb 08 2017 06:00
@XXiphias is there any need to learn some technologies as well to make all that , techno like node.js or something or we can simply use javascript to make a site of my choice
Chris Jantzen
@XXiphias
Feb 08 2017 06:00
you would need more than just js
with a website html provides the frame. js manipulates it.
then you have the backend which you can use js for with node.js
among others such as php
Coy Sanders
@coymeetsworld
Feb 08 2017 06:01
node.js is for the backend
Ankur0077
@Ankur0077
Feb 08 2017 06:01
or asp as well
Coy Sanders
@coymeetsworld
Feb 08 2017 06:01
its server-side javascript
h1tag
@h1tag
Feb 08 2017 06:01
@XXiphias why the x = x/1000 , to reduce the x after using the mod on it?
Ankur0077
@Ankur0077
Feb 08 2017 06:01
am i right?
okhh thanks guys, can you please check out the site like trivago, can we make that too with javascript or do we also need node.js
Chris Jantzen
@XXiphias
Feb 08 2017 06:02
you might not need to the mod, i didnt think it through fully. but you want to keep dividing down by the biggest number possible
and getting the roman numerals for each as you go
Ankur0077
@Ankur0077
Feb 08 2017 06:02
@coymeetsworld @Ankur0077
am i right?
okhh thanks guys, can you please check out the site like trivago, can we make that too with javascript or do we also need node.js
CamperBot
@camperbot
Feb 08 2017 06:02
ankur0077 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: ankur0077 already gave coymeetsworld points
Chris Jantzen
@XXiphias
Feb 08 2017 06:03
jsut reviewed roman numerals
you'd divide by 1000 if you can, if so, add an M. if not, divide by 500 if you can, if so, add a D. if not, divide by 100, add a C.
and so on
Coy Sanders
@coymeetsworld
Feb 08 2017 06:03
i haven't delved into node.js, but it depends on what you want to do @Ankur0077
Ankur0077
@Ankur0077
Feb 08 2017 06:03
@XXiphias @Ankur0077
can you please check out the site like trivago, can we make that too with javascript or do we also need node.js
Coy Sanders
@coymeetsworld
Feb 08 2017 06:04
you don't necessarily need javascript
Chris Jantzen
@XXiphias
Feb 08 2017 06:04
any site you need that stores and data will need a backend language such as js
*ANY
h1tag
@h1tag
Feb 08 2017 06:04
@XXiphias thanks. I haven't thought of that before, maybe this what was getting me stuck. I hope I'll be able to solve it :smile:
CamperBot
@camperbot
Feb 08 2017 06:04
fortmaximus sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 45 | @xxiphias |http://www.freecodecamp.com/xxiphias
Coy Sanders
@coymeetsworld
Feb 08 2017 06:05
you don't need JS necessarily to store data. It can be done with other languages
it goes beyond HTML/CSS which is purely front-end
Ankur0077
@Ankur0077
Feb 08 2017 06:05
@coymeetsworld i want to make something like trivago, is it possible to make with js
Coy Sanders
@coymeetsworld
Feb 08 2017 06:05
yes @Ankur0077
but it depends on specifically what you're referring to
Chris Jantzen
@XXiphias
Feb 08 2017 06:05

no worries fortMaximus :) hope that gets you a bit further

actually, i dont think you even need arrays really. although you might be able to reduce the code a bit that way

Coy Sanders
@coymeetsworld
Feb 08 2017 06:06
javascript touches both front and back end now so you could potentially do everything with JS, but i don't have alot of exp with node.js so can't speak to it for now at least
if you want to make your website more interactive on front-end JS is pretty much your only option
Ankur0077
@Ankur0077
Feb 08 2017 06:07
@coymeetsworld okk bascialy you means that we can do that with js as well and can built something similar to trivago, have you checked the site and its functionality
Chris Jantzen
@XXiphias
Feb 08 2017 06:07
@Ankur0077 almost every site on the web will use multiple languages, not just js. you can do a lot with js but not everything. well technically you probably could but it would be pretty inefficent :P and you'd still need to know how to write html regardless
Coy Sanders
@coymeetsworld
Feb 08 2017 06:07
no i don't know what that is
I'll keep it simple, if you want to do web development, you should learn JS @Ankur0077
at least for the the front-end its a no-brainer, backend there's other options but you can also use JS for backend now
Ankur0077
@Ankur0077
Feb 08 2017 06:08
@XXiphias thanks for explaining mate
CamperBot
@camperbot
Feb 08 2017 06:08
ankur0077 sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 46 | @xxiphias |http://www.freecodecamp.com/xxiphias
Chris Jantzen
@XXiphias
Feb 08 2017 06:09
no worries. as Coy said, js is useful if you want to do web dev. its practically a requirement these days with interactive sites
Ankur0077
@Ankur0077
Feb 08 2017 06:09
@coymeetsworld okhh man! thanks for the explanation!! and can you please go and check what it do www.trivago.com, so that you will get to know what i am trying to ask
CamperBot
@camperbot
Feb 08 2017 06:09
ankur0077 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: ankur0077 already gave coymeetsworld points
Darren
@DarrenfJ
Feb 08 2017 06:10
evening fCC
Coy Sanders
@coymeetsworld
Feb 08 2017 06:11
@Ankur0077 idk how they implemented their page, or what specifically you're trying to do. You trying to make another trivago?
Darren
@DarrenfJ
Feb 08 2017 06:11
@coymeetsworld hey man :D
Coy Sanders
@coymeetsworld
Feb 08 2017 06:11
@DarrenfJ :wave:
西安小哥
@holidaying
Feb 08 2017 06:11
Emphasize the text in your target4 button by adding HTML tags.
Make sure the text is otherwise unchanged.
how to understand?
Chris Jantzen
@XXiphias
Feb 08 2017 06:11
if you look at trivago's source, yes they are using JS
Ankur0077
@Ankur0077
Feb 08 2017 06:12
@coymeetsworld haha not like that
Darren
@DarrenfJ
Feb 08 2017 06:12
@holidaying I think they give an example for syntax.
@holidaying $("h3").html("<em>jQuery Playground</em>");
that emphasizes the h3 text... which is <h3>jQuery Playground</h3> (as an example of how to do it) @holidaying
Help
Darren
@DarrenfJ
Feb 08 2017 06:15
@holidaying so what is the text on the target4 button?
wrong one... i need help sizing
Darren
@DarrenfJ
Feb 08 2017 06:16
@cjbrown08 coolcool.. what have you tried and what are you stuck on?
Christopher Brown
@cjbrown08
Feb 08 2017 06:17
Not sure where to place my nor how to set class for image
Darren
@DarrenfJ
Feb 08 2017 06:18
@cjbrown08 ok look at teh example they give for syntax.. something like:
.larger-image