These are chat archives for FreeCodeCamp/Help

8th
Aug 2016
Cari
@CLHowat
Aug 08 2016 00:04
In codepen.io, do you use all 3 of the windows (HTML, CSS, and JS)? or can you do everything in one? I'm super new to this and this is my first time using it.
Boris
@Boris1011
Aug 08 2016 00:05
@CLHowat no you don't have to use all three!! I found that it is easier to use the ones that you are most familiar with!!
Cari
@CLHowat
Aug 08 2016 00:06
Ok, I just didn't want to close windows only to find out I needed them...and then not be able to find them again.
@Boris1011 Thanks!
CamperBot
@camperbot
Aug 08 2016 00:06
clhowat sends brownie points to @boris1011 :sparkles: :thumbsup: :sparkles:
:cookie: 165 | @boris1011 |http://www.freecodecamp.com/boris1011
Boris
@Boris1011
Aug 08 2016 00:06
Anytime mate!!!
nmaca
@nmaca
Aug 08 2016 00:08
I'm having trouble with the title case a sentence challenge
here's my code:

function titleCase(str) {
var strSplit = str.toLowerCase().split(" ");
for (i = 0; i<str.length; i++) {

return strSplit[i].join(" ");
}

}

titleCase("I'm a little tea pot");

I know how to split up the initial string but i dont know where to go next
Vince
@Vince33
Aug 08 2016 00:13
any webpack config ninjas around
?
greg
@wearenotgroot
Aug 08 2016 00:21
@nmaca check the condition of your for loop
hai.pn
@firefoxvt
Aug 08 2016 00:21
function updateRecords(id, prop, value) {

 if (prop == "tracks" && id[tracks] === "") {
    collection.id[tracks].push("");
    collection.id[tracks].push(tracks);
  } else if (prop == "tracks" && id[tracks] !== "") {
    collection.id[tracks].push(value);
  } else if (value === "") { 
    collection.id[tracks].pop();
  }

//   var addProp = {

//   };

  return collection;
}
I dont know why I get error, Anyone give me a hint? Thanks
This is at: Record Collection
greg
@wearenotgroot
Aug 08 2016 00:21
@nmaca why would you use str.length when the array is strSplit, also remember what return does, the loop will finish and the function return after just one loop iteration. Another thing arent you supposed to uppercase the first letter of every item in the strSplit array? you should use join immediately
@firefoxvt question what is id?(what does this do -------->id[tracks])
Megan
@rashida6
Aug 08 2016 00:26

Not sure why my image won't resize to 100 px. Would appreciate some help: <style>
.red-text {
color: red;
}
.smaller-image {
width: 100px;
}

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

hai.pn
@firefoxvt
Aug 08 2016 00:26
@wearenotgroot I think the id is: updateRecords(5439, "artist", "ABBA");
greg
@wearenotgroot
Aug 08 2016 00:26
@firefoxvt review -----> when to use .(dot) notation and bracket notation
@firefoxvt well id is just number so you cant do --------->id[tracks]
hai.pn
@firefoxvt
Aug 08 2016 00:27
@wearenotgroot thank you so much, @wearenotgroot . I will try
CamperBot
@camperbot
Aug 08 2016 00:27
firefoxvt sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1302 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Boris
@Boris1011
Aug 08 2016 00:27
@rashida6 when you put the smaller image into a class, it needs a - between the 2 words just like you put in the style element... so like <img class="smaller-image" etc...>
greg
@wearenotgroot
Aug 08 2016 00:27
@firefoxvt if you re-read the instruction, isnt it supposed to be test for if value ===""
Megan
@rashida6
Aug 08 2016 00:28
@Boris1011 well that was silly. Thank You!!
CamperBot
@camperbot
Aug 08 2016 00:28
rashida6 sends brownie points to @boris1011 :sparkles: :thumbsup: :sparkles:
:cookie: 166 | @boris1011 |http://www.freecodecamp.com/boris1011
hai.pn
@firefoxvt
Aug 08 2016 00:28
yes. It advice me to use === "" @greg
Matías Nicolás Romero
@matiromero2016
Aug 08 2016 00:28
Help.
CamperBot
@camperbot
Aug 08 2016 00:28

CamperBot

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

Basic Commands:

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

meet CamperBot in FreeCodeCamp/camperbotPlayground

:pencil: read more about camperbot on the FCC Wiki

Matías Nicolás Romero
@matiromero2016
Aug 08 2016 00:29
"Your <style> should have a pink-text CSS class with its color set to pink."

<style>
body {
background-color: black;
font-family: Monospace;
color: pink;

}
</style>

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

Boris
@Boris1011
Aug 08 2016 00:29
@rashida6 anytime mate!! :smile:
@matiromero2016 what is the name of the challenge???
greg
@wearenotgroot
Aug 08 2016 00:29
@firefoxvt hint! prop and id are keys to get values from collection object, and value is just the item you either push or set as new value to properties in collection object
Matías Nicolás Romero
@matiromero2016
Aug 08 2016 00:30
@Boris1011 Prioritize One Style Over Another
hai.pn
@firefoxvt
Aug 08 2016 00:32
@wearenotgroot thank you.
CamperBot
@camperbot
Aug 08 2016 00:32
firefoxvt sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: firefoxvt already gave wearenotgroot points
greg
@wearenotgroot
Aug 08 2016 00:32
@firefoxvt np
Boris
@Boris1011
Aug 08 2016 00:32

@matiromero2016 when its talking about prioritizing, it is talking about

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

<h1 class="pink-text">Hello World!</h1>
This way, the pink-text is being prioritized over the green color!!

Matías Nicolás Romero
@matiromero2016
Aug 08 2016 00:35
@Boris1011 thanks!!
CamperBot
@camperbot
Aug 08 2016 00:35
matiromero2016 sends brownie points to @boris1011 :sparkles: :thumbsup: :sparkles:
:cookie: 167 | @boris1011 |http://www.freecodecamp.com/boris1011
Boris
@Boris1011
Aug 08 2016 00:36
@matiromero2016 all good man!!
Norvin Burrus
@ndburrus
Aug 08 2016 00:46
@firefoxvt this may be helpful: :sparkles:
hai.pn
@firefoxvt
Aug 08 2016 00:47
thank you very much @ndburrus
CamperBot
@camperbot
Aug 08 2016 00:47
firefoxvt sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1434 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Aug 08 2016 00:48
@ndburrus you're welcome! enjoy! :palm_tree:
Ray Santiago
@RSantiago1186
Aug 08 2016 00:49
Anyone know how to move something from a template over to my showcase on CodePen?
Matías Nicolás Romero
@matiromero2016
Aug 08 2016 00:51

Your h1 element should be orange. <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}

orange-text {color-orange;}

</style>

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

Boris
@Boris1011
Aug 08 2016 00:51
@matiromero2016 what is the name of the challenge?????
Sandra Marie
@smariecode
Aug 08 2016 00:52
@matiromero2016 you need a period in front of orange-text
@matiromero2016 and the <div class= should be orange not the <div id=
@matiromero2016 or... put a # in front of orange-text in style to indicate that you are referencing an id

@matiromero2016 :sparkles:

  • delete the .blue-text class (within body)
  • add body within style tags, like this

    body {
      background-color: black;
      font-family: Monospace;
      color: green;
    }
  • remove this orange-text {color-orange;}

  • change this: h1 id="orange-text" class="pink-text blue-text" to h1 class="pink-text"...
Cari
@CLHowat
Aug 08 2016 00:57
@ndburrus awesome, thanks! I'll check those out!
CamperBot
@camperbot
Aug 08 2016 00:57
clhowat sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1435 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Aug 08 2016 00:57
@CLHowat you're welcome! enjoy! :palm_tree:
Edgar Andrade
@edgarandr
Aug 08 2016 01:04

Anyone know what Im doing wrong here...
```

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

Boris
@Boris1011
Aug 08 2016 01:05
@edgarandr challenge name???
Edgar Andrade
@edgarandr
Aug 08 2016 01:06
Its asking me to use RGB for the color red and I think I already did. "Use RGB to mix colors
Boris
@Boris1011
Aug 08 2016 01:09

@edgarandr you will need to add a ; after each color that you put in... so it ends up being:

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

c0d0er
@c0d0er
Aug 08 2016 01:10
hi, could anybody help me on this: why it shows: 1 != true // false;
0 != false // false. is 1==true and 0==false? or 1===true or 0===false?
Hi, could anybody help to answer me this question: is "x+=y" 100% equal to "x=x+y"?
Edgar Andrade
@edgarandr
Aug 08 2016 01:13
@Boris1011 thanks, that did it. there is two challenges on this RGB and just one example had the semicolon after parenthesis...
Another way you can represent colors in CSS is by using RGB values.

The RGB value for black looks like this:

rgb(0, 0, 0)

The RGB value for white looks like this:

rgb(255, 255, 255)

Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.

If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.

Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)
Your body element should have a black background.
Use rgb to give your body element a color of black. For example body { background-color: rgb(255, 165, 0); }
CamperBot
@camperbot
Aug 08 2016 01:13
edgarandr sends brownie points to @boris1011 :sparkles: :thumbsup: :sparkles:
:cookie: 168 | @boris1011 |http://www.freecodecamp.com/boris1011
Boris
@Boris1011
Aug 08 2016 01:16
@edgarandr :smile: Anytime mate!!
Norvin Burrus
@ndburrus
Aug 08 2016 01:16

@RSantiago1186 this may be helpful: :sparkles:

scroll down to... Organize Your Showcase

David
@ojocinco
Aug 08 2016 01:18
Hey guys, another question. I'm running into some problem with putting a silver background on

<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;
}
.silver-background {
background-color: silver;
}

</style>

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

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

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

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

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

Norvin Burrus
@ndburrus
Aug 08 2016 01:20
@ojocinco lesson name?
David
@ojocinco
Aug 08 2016 01:20
Give a Background Color to a Div Element
Geonett
@Geonett
Aug 08 2016 01:21
hey can anyone help me with class
i dont really understand it
GordonBme
@GordonBme
Aug 08 2016 01:21
cant see the class for it?? @ojocinco add a class to the <div> tag
Geonett
@Geonett
Aug 08 2016 01:22
me?
GordonBme
@GordonBme
Aug 08 2016 01:22
@Geonett for instance <div class=""
Geonett
@Geonett
Aug 08 2016 01:22
i havent learned div yet
im still on h2 and stuff
GordonBme
@GordonBme
Aug 08 2016 01:22
@Geonett u can use the class on any tag
Geonett
@Geonett
Aug 08 2016 01:22
how
oh
Norvin Burrus
@ndburrus
Aug 08 2016 01:22

@ojocinco ok, in this div :sparkles:

<div> ** here **
<p>Things cats love:</p>

we need to add the silver-background class
like this: <h2 class="blue-text">CatPhotoApp</h2>
reference code sample in "Use a CSS Class to Style an Element"

GordonBme
@GordonBme
Aug 08 2016 01:22
like i just showed u with that div
@Geonett
Geonett
@Geonett
Aug 08 2016 01:22
yeah lemme try that
GordonBme
@GordonBme
Aug 08 2016 01:24
but u need to close it tho lol
Norvin Burrus
@ndburrus
Aug 08 2016 01:25
This message was deleted
Abhinav Kapoor
@abkap02
Aug 08 2016 01:27
Style Text Inputs as Form Controls exercise:
Give the text input in your form the class form-control.
didn’t get it?
greg
@wearenotgroot
Aug 08 2016 01:28
@abkap02 class="that class" apply it to input and that input should be nested in the form
Abhinav Kapoor
@abkap02
Aug 08 2016 01:30
@wearenotgroot thanks mate! got it!
CamperBot
@camperbot
Aug 08 2016 01:30
abkap02 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1304 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Aug 08 2016 01:31
@abkap02 :+1:
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:35
guys
do you know how can i make my div scroll ?
Josh Lavely
@Azayzel
Aug 08 2016 01:37
@Sperkajugglite in your css add overflow: auto; to your div
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:37
@Azayzel i am using that rn
and haven't been able to figure it out :(
@Azayzel
GordonBme
@GordonBme
Aug 08 2016 01:37
@Sperkajugglite overflow-x or y in css
Chris Ruiz
@reecelol
Aug 08 2016 01:37
guys help me i dont know how to make next facebook
David
@ojocinco
Aug 08 2016 01:38
I don't think I'm getting the silver background with the div. but I think I'm done for the day. Thanks
Josh Lavely
@Azayzel
Aug 08 2016 01:38
ok do overflow-Y: scroll;
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:38
@GordonBme is not working either
can i post my code ?
Josh Lavely
@Azayzel
Aug 08 2016 01:38
ofcourse
GordonBme
@GordonBme
Aug 08 2016 01:38
@Sperkajugglite well something is messing with it then
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:38
$main-color: #e67a27;
$components-color: white;
$wood-color: #7C4916;
@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
@mixin box-shadow($width, $height, $radius, $propagation, $color) {
  -webkit-box-shadow: $width $height $radius $propagation $color;
  -moz-box-shadow: $width $height $radius $propagation $color;
  box-shadow: $width $height $radius $propagation $color;
}

body, html {
  width: 100%;
  height: 100%;
}

body {
  background-color: $main-color;
  background-image: url("./images/brick-wall-dark.png");
  font-size: 62.5%;
  h1 {
    text-align: center;
    font-size: 10em;
    margin: 0 0 5% 0;
  }
  #app {
    position: relative;
    width: 80%;
    min-height: 70%;
    max-height: 80%;
    margin: 0 auto;
    background-color: none;
    @include border-radius(5px);
    border: solid black 5px;
    border-bottom: solid $wood-color 20px;
    overflow: hidden;
    @include box-shadow(0, 5px, 5px, 0, black);
    .component {
      width: 50%;
      position: absolute;
      margin: 0;
      left: 0;
      padding: 2%;
      overflow: scroll;
      min-height: 100%;
      background-color: $components-color;
      font-size: 3em;
      background-image: url("./images/dust.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

    }
    #Board {
      border-right: solid black 2.5px;
      outline: 0;
      resize: none;
    }
    #Previewer {
      left: 50%;
      border-left: solid black 2.5px;
    }
    }
  }
Josh Lavely
@Azayzel
Aug 08 2016 01:39
your app css is taking over
add !important in your component
so; overflow-y: scroll!important;
or just overflow: auto
GordonBme
@GordonBme
Aug 08 2016 01:40
@Sperkajugglite div { overflow: scroll;} for instance, try that
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:40
@GordonBme @Azayzel , tried both and didn't work :(
this is my repo
Josh Lavely
@Azayzel
Aug 08 2016 01:40
so the content in your div is just being cut off?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:41
aja
exactly
GordonBme
@GordonBme
Aug 08 2016 01:41
@Sperkajugglite u dont usee html as a css selector
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:41
@GordonBme ?
it looks like this rn
GordonBme
@GordonBme
Aug 08 2016 01:41
@Sperkajugglite body, html {
width: 100%;
height: 100%;
not right
take out the html
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:42
@GordonBme its for the full height of the page
GordonBme
@GordonBme
Aug 08 2016 01:42
why would u use a html tag for css????? think
Josh Lavely
@Azayzel
Aug 08 2016 01:42
but your html will always be 100%
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:42
idk man
i guess ill erase it :P
Josh Lavely
@Azayzel
Aug 08 2016 01:43
lol
GordonBme
@GordonBme
Aug 08 2016 01:43
u are styling the whole goddamn page if u use the html selector???? why would u want to style the head tags lol??? @Sperkajugglite
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:43
body not taking full page height
GordonBme
@GordonBme
Aug 08 2016 01:43
u only start off with the body tag
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:43
idk man
Josh Lavely
@Azayzel
Aug 08 2016 01:43
you also dont need to call body #app .component
GordonBme
@GordonBme
Aug 08 2016 01:43
html tag dosnt get used with css
Josh Lavely
@Azayzel
Aug 08 2016 01:44
just call .component {}
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:44
I've seen it in various places
Josh Lavely
@Azayzel
Aug 08 2016 01:44
or #app{}
GordonBme
@GordonBme
Aug 08 2016 01:44
@Sperkajugglite well its wrong
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:44
@Azayzel ok :P
Josh Lavely
@Azayzel
Aug 08 2016 01:44
@Sperkajugglite it does but in very specific cases
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:44
ok, i trust you
ill erase it
GordonBme
@GordonBme
Aug 08 2016 01:44
lol bejesus
i aint gonna help anyone again
Josh Lavely
@Azayzel
Aug 08 2016 01:45
so..
body{}
#app{}
.component{}
LOL @GordonBme
GordonBme
@GordonBme
Aug 08 2016 01:46
@Azayzel well u try and tell people that have prolly been learning longer than me how to do it, and they think im on an agenda or something
Josh Lavely
@Azayzel
Aug 08 2016 01:46
npm is being so slow tonight :-(, probably jus my slow a$$ t1 AWS instance lol
Robert Richey
@0x0936
Aug 08 2016 01:47
@Sperkajugglite html selector is fine for height - I use it at times. nesting selectors is fine - great for organizing styles, easier to find what you need at a glance
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:47
:) thanks @0x0936
CamperBot
@camperbot
Aug 08 2016 01:47
sperkajugglite sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1643 | @0x0936 |http://www.freecodecamp.com/0x0936
GordonBme
@GordonBme
Aug 08 2016 01:47
@0x0936 u use body for that
man oh man
Josh Lavely
@Azayzel
Aug 08 2016 01:47
lol the beauty of web design
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:47
@Azayzel ok, i removed the thing :)
Josh Lavely
@Azayzel
Aug 08 2016 01:48
theres 5 ways to do this one thing
GordonBme
@GordonBme
Aug 08 2016 01:48
no wonder the web is full of bad code
Josh Lavely
@Azayzel
Aug 08 2016 01:48
still cutting off your content?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:48
@Azayzel just finished :P
Josh Lavely
@Azayzel
Aug 08 2016 01:48
try putting !important at the end of your overflow property for your .component class (not very recommended but will work ina pinch)
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:49
now
i erased html as you said
lood
Josh Lavely
@Azayzel
Aug 08 2016 01:49
lood?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:49
k*
:laughing:
Josh Lavely
@Azayzel
Aug 08 2016 01:50
kood? lol i dont understand
Brooks Van Buren
@woofiewilly
Aug 08 2016 01:50
I agree with @GordonBme, that should be done using body selector, not html. html should almost never be used, because it includes the head and the body. There are almost no cases in which you want to style head, nor will it even have any effect on the webpage. Leaving body as the thing you're styling, and at that point you should just use the body selector
Josh Lavely
@Azayzel
Aug 08 2016 01:50
"i am not a smart man"
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:50
look :P
Josh Lavely
@Azayzel
Aug 08 2016 01:50
lol
GordonBme
@GordonBme
Aug 08 2016 01:50
@Azayzel do u know css ? i think i know why it aint working
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:50
this is what happens if i erase html, http://prnt.sc/c2wal8
so it does work :P
GordonBme
@GordonBme
Aug 08 2016 01:51
@Azayzel the browser will read from top to bottom, theres a tip
Josh Lavely
@Azayzel
Aug 08 2016 01:51
lol
@GordonBme , i understand that; i dont think i need your tips :-P
GordonBme
@GordonBme
Aug 08 2016 01:51
@Azayzel so something thats put underneath it will be read last by the browser
will take precedence
and taken as the actuall css
so something is conflicting
Josh Lavely
@Azayzel
Aug 08 2016 01:52
well good @Sperkajugglite :-D
GordonBme
@GordonBme
Aug 08 2016 01:52
the browser will read that css from top to bottom
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:52
@Azayzel ? :P
Josh Lavely
@Azayzel
Aug 08 2016 01:53
will it read it from top to bottom @GordonBme ?
GordonBme
@GordonBme
Aug 08 2016 01:53
@Azayzel yes
Josh Lavely
@Azayzel
Aug 08 2016 01:53
lol
<sarcasm>
GordonBme
@GordonBme
Aug 08 2016 01:53
unless it can be manipulated
by js or something
Josh Lavely
@Azayzel
Aug 08 2016 01:54
you mean after DOM is loaded? ;-)
ad all CSS can be manipulated
  • and all...
anyways, im glad youre good to go @Sperkajugglite
GordonBme
@GordonBme
Aug 08 2016 01:55
@Azayzel ive only been looking at html/html5/css so i have very little knowledge of js
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:56
@Azayzel @GordonBme thanks a lot guys :)
CamperBot
@camperbot
Aug 08 2016 01:56
sperkajugglite sends brownie points to @azayzel and @gordonbme :sparkles: :thumbsup: :sparkles:
:cookie: 28 | @gordonbme |http://www.freecodecamp.com/gordonbme
:cookie: 321 | @azayzel |http://www.freecodecamp.com/azayzel
Kaushishal
@Kaushishal
Aug 08 2016 01:56
My h2 element is not turning blue whats wrong here please help <style>
<h2{color:blue;}CatPhotoApp</h2>
</style>
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:56
can you help me with the div tho ? :innocent: :P
Josh Lavely
@Azayzel
Aug 08 2016 01:56
whats up with your div?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:57
the scrolling thing
Josh Lavely
@Azayzel
Aug 08 2016 01:57
oh shoot, i thought you had that fixed... to me, it doesnt look like there is anything in your div
do you have it a set height?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:57
yes, its 100% parents div (idk if that counts)
Josh Lavely
@Azayzel
Aug 08 2016 01:57
thats really the only way the scroll will work; you mus set the div to a specific height, and if content goes beyond thats when overflow: auto; comes into play
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:57
it scrolls horizontally, but not vertically
@Azayzel so it has to be set on pixels?
Josh Lavely
@Azayzel
Aug 08 2016 01:58
sure, or percent
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:58
its on percent :P
Josh Lavely
@Azayzel
Aug 08 2016 01:58
thats fine, so your child div is 100% relational to your parent div right?
and your parent div is set to wht?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:58
aja
#app {
  position: relative;
  width: 80%;
  min-height: 70%;
  max-height: 80%;
  margin: 0 auto;
  background-color: none;
  @include border-radius(5px);
  border: solid black 5px;
  border-bottom: solid $wood-color 20px;
  overflow: hidden;
  @include box-shadow(0, 5px, 5px, 0, black);
  }
.component {
  width: 50%;
  position: absolute;
  margin: 0;
  left: 0;
  padding: 2%;
  overflow: scroll;
  min-height: 100%;
  background-color: $components-color;
  font-size: 3em;
  background-image: url("./images/dust.png");
    }
#Board {
  border-right: solid black 2.5px;
  outline: 0;
  resize: none;
}
#Previewer {
  left: 50%;
  border-left: solid black 2.5px;

}
Kaushishal
@Kaushishal
Aug 08 2016 01:59
My h2 element is not turning blue whats wrong here please help <style>
<h2{color:blue;}CatPhotoApp</h2>
</style>
Santiago Gómez
@Sperkajugglite
Aug 08 2016 01:59
well i think the min-height is stupid, right?
@Kaushishal you have a semi colon and should use style="color:blue" :P
i think
Josh Lavely
@Azayzel
Aug 08 2016 02:00

@Kaushishal try this
```

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

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

the min-height is not going to do much in that regard
@Sperkajugglite
do me a favor, just to see, set your parent div to like, 500px height then your child div, do like 300px
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:01
ok
:P
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:01
heights unfortunately don't really work like that with percentages
Josh Lavely
@Azayzel
Aug 08 2016 02:02
^^ true
especially combining with overflow
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:02
However, you can play with vh instead of %.
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:02
@Azayzel oh man
it worked :)
@Azayzel thanks a lot
CamperBot
@camperbot
Aug 08 2016 02:02
sperkajugglite sends brownie points to @azayzel :sparkles: :thumbsup: :sparkles:
:warning: sperkajugglite already gave azayzel points
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:02
@itsacoyote hi, btw
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:03
@Sperkajugglite hiya
Josh Lavely
@Azayzel
Aug 08 2016 02:03
np brotha
you can however, now set your child div height to % since its wrapped inside your parent
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:03
@Azayzel and how can i make the parent responsive ?
GordonBme
@GordonBme
Aug 08 2016 02:04
lol
Josh Lavely
@Azayzel
Aug 08 2016 02:04
so, this may get a bit tricky lol but look up media queries
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:05
@Azayzel oh
i think I'm going to pass then
Josh Lavely
@Azayzel
Aug 08 2016 02:05
its not hard, just more code
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:05
i hate them :P
thanks btw
@medias are a bitch
Josh Lavely
@Azayzel
Aug 08 2016 02:05
lol tere not that bad
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:05
ok
GordonBme
@GordonBme
Aug 08 2016 02:05
@Azayzel like i said, top to bottom
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:05
thanks a lot, really
Josh Lavely
@Azayzel
Aug 08 2016 02:05
np man
javad96
@javad96
Aug 08 2016 02:06
hello, how can i change the width of an image
i dont know whats wrong
Josh Lavely
@Azayzel
Aug 08 2016 02:06
@javad96 if you're using bootstrap just add "img-responsive" class to your img tag
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:07
i really don't get css
its now working with percentages :) :P
:laughing:
javad96
@javad96
Aug 08 2016 02:07
its css
GordonBme
@GordonBme
Aug 08 2016 02:08
i could explain and u would all understand better lol
i dont use bootstrap
Santiago Gómez
@Sperkajugglite
Aug 08 2016 02:08
i am so happy rn
javad96
@javad96
Aug 08 2016 02:10
im still stuck
begginer here btw
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:11
@javad96 what's the issue?
Robert Richey
@0x0936
Aug 08 2016 02:11
@javad96 what is the name of the challenge you're working on?
javad96
@javad96
Aug 08 2016 02:11
i dont know why the img width is not being changed
on css
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:12
@javad96 showing some code may help figure out where hte issue is
javad96
@javad96
Aug 08 2016 02:14

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

Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:16
@javad96 are you familiar with adding a css style?
Robert Richey
@0x0936
Aug 08 2016 02:16

@javad96 that looks like the size your images challenge.

Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.

javad96
@javad96
Aug 08 2016 02:17
yeh exactly! @0x0936
GordonBme
@GordonBme
Aug 08 2016 02:18
@javad96 copy this and it will work, just change the % in the inline style attribute lol <img style="width: 50%;" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
javad96
@javad96
Aug 08 2016 02:18
@itsacoyote i started learning it today! :worried:
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:18
@GordonBme I don't believe that's the way to fulfill teh requirements of the problem
GordonBme
@GordonBme
Aug 08 2016 02:19
@itsacoyote it will work tho
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:19
@GordonBme he's not learning then
@javad96 have a read through the instructions, it explains how to add styling to the image. You'll want a class name in the style block at the top like .red-text. You'll want the width set to a certain width. To change the html, you'll need to give an html element that class name, in this one we're adding the class to the img. Similar to how the h2 has a class of "red-text"
Josh Lavely
@Azayzel
Aug 08 2016 02:21
@GordonBme what do you use if not bootstrap? Just curious, foundation?
GordonBme
@GordonBme
Aug 08 2016 02:21
@Azayzel none, stand alone css
Josh Lavely
@Azayzel
Aug 08 2016 02:21
Why?
GordonBme
@GordonBme
Aug 08 2016 02:21
@Azayzel just like your bootstrap link gets put at the top of the head tags, i put my own link in
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:22
@Azayzel some prefer to have full control over the styling and layout of their designs without being placed in some framework like Bootstrap.
GordonBme
@GordonBme
Aug 08 2016 02:22
i can do whatever i wanted with plain ole css
Josh Lavely
@Azayzel
Aug 08 2016 02:22
I understand, but a lot of it is boilerplate
GordonBme
@GordonBme
Aug 08 2016 02:22
u guys cant
Edgar Andrade
@edgarandr
Aug 08 2016 02:22
@javad96 Let me know if this helps
<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>
Josh Lavely
@Azayzel
Aug 08 2016 02:22
Lol we can still do what we want, but if I like how bootstrap does modals, I'll use theirs
Scott
@scaley29
Aug 08 2016 02:22
Can someone look at my code.pen and tell me what I am doing wrong. I am trying to do a single page portfolio and I have my tabs listed in the nav bar but for some reason cannot figure out how to set different areas of the page for them so when I click on one it takes me to a different part of the page ? http://codepen.io/scaley29/pen/zBrGjq
Josh Lavely
@Azayzel
Aug 08 2016 02:22
Or if I like how foundation does off screen navbar I'll use theirs
GordonBme
@GordonBme
Aug 08 2016 02:22
@Azayzel its one's own preference i guess to what they want to learn
Josh Lavely
@Azayzel
Aug 08 2016 02:23
Why spend days making my own?
GordonBme
@GordonBme
Aug 08 2016 02:23
i wouldnt take days tho
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:23
@Azayzel mastery of understanding and full control over design. It could take 30 minutes, or it could take days, it depends on what you're making.
Josh Lavely
@Azayzel
Aug 08 2016 02:23
If I told you to make bootstraps modal you could do it in a couple hours?
GordonBme
@GordonBme
Aug 08 2016 02:24
once u learn how the browser works @Azayzel its very easy after that, like i said, top to bottom ;)
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:24
@Azayzel once you get familiar with html and css, a modal can be done in about 10 minutes
Josh Lavely
@Azayzel
Aug 08 2016 02:25
So the point in trying to make is, why re-invent the wheel if you don't have to? Obviously there will always be things you should do on your own
javad96
@javad96
Aug 08 2016 02:25
@edgarandr didnt work :worried:
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:25
@javad96 did you add the class name to the image element?
Robert Richey
@0x0936
Aug 08 2016 02:25
@scaley29 to link within the page, for the href value, give it the #id of what you want to link to.
<a href="#about">About</a>

<!-- some html content here -->

<h2 id="about">About</h2>
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:26
@Azayzel the reason I may not is because I don't want maybe 90% of the css styling and stuff they add to their framework. I'm also conscientious about the size of the css file I'm using for my design.
Josh Lavely
@Azayzel
Aug 08 2016 02:26
Well right but when you run your code through a build took it doesn't matter a whole lit
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:26
@Azayzel For the small 10% I can quickly and easily style things the way I need, and if I"m really lazy, I can just copy and paste some bootstrap stylings that I do need lol
Edgar Andrade
@edgarandr
Aug 08 2016 02:26
@javad96 this is what @itsacoyote refers to.
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
Josh Lavely
@Azayzel
Aug 08 2016 02:27
@itsacoyote that's what I'm trying to say lol
GordonBme
@GordonBme
Aug 08 2016 02:27
@itsacoyote yes but i do most/all my css in 1 file, i dont do the internal style tags like u lot do
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:27
@edgarandr well, it'd be easier if they could figure that out on their own.
@GordonBme and who says I do? I do for FCC because that's how it's asking it for. I certinaly don't do so in my personal projects.
Scott
@scaley29
Aug 08 2016 02:28
@0x0936 I was trying that bu tit was not working. if I was creating under contact all the different areas such as twitter, code.pen, facebook and so on do I create one each with the contact or put them all in it together
GordonBme
@GordonBme
Aug 08 2016 02:28
@itsacoyote oh ok
Edgar Andrade
@edgarandr
Aug 08 2016 02:28
@javad96 in that code there is two classes that can be separated by a space
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:28
@GordonBme good lord, Gordon, the FCC is just the baby steps of getting familiar with CSS first, once they're ready to take the jump into more deeper learning of CSS, they'll start learning to do proper css styling and structure.
Edgar Andrade
@edgarandr
Aug 08 2016 02:29
@javad96 "small-image" and "thick-green border" which are the ones you created in <style>
GordonBme
@GordonBme
Aug 08 2016 02:29
@itsacoyote yes but how long do u think i have been learning css ?? actually learning altogether?
Robert Richey
@0x0936
Aug 08 2016 02:29
@scaley29 just have one contact section. don't need individual links to each item within the contact section
GordonBme
@GordonBme
Aug 08 2016 02:29
@itsacoyote 3 months
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:30
@GordonBme I don't know and why should I care?
Everyone's process of education is different.
Everyone's first language here is also very different.
Michael Bomholt
@bomholtm
Aug 08 2016 02:30
i have a problem and im not sure how to describe it.. i know exactly where the problem is but yea :worried:
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:30
@bomholt what's the issue?
Robert Richey
@0x0936
Aug 08 2016 02:30
@bomholt :wave:
GordonBme
@GordonBme
Aug 08 2016 02:30
well i know more css than alot of people thats been learning on here for how long i have been teaching myself thats shocking
Michael Bomholt
@bomholtm
Aug 08 2016 02:30
@0x0936 hey everything allright?
javad96
@javad96
Aug 08 2016 02:31
i need just the width to be changed, and i kinda forgot how to do a class, maybe cause its my first day or im too stupid for this lol
Robert Richey
@0x0936
Aug 08 2016 02:31
just another day
Josh Lavely
@Azayzel
Aug 08 2016 02:31
@bomholt the first step is admitting you have a problem, congratulations :-D
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:31
It shouldn't be. Everyone has different process of learning. Plus not everyone has a lot of time to dedicate to learning @GordonBme
GordonBme
@GordonBme
Aug 08 2016 02:31
@itsacoyote yeah true
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:31
@javad96 a class in a html element is an attribute. <div class="classname"></div>
so add your class name, is it smaller-image?, to the img html tag.
Robert Richey
@0x0936
Aug 08 2016 02:32
@bomholt what's the issue? :)
Michael Bomholt
@bomholtm
Aug 08 2016 02:32
@itsacoyote well i have two functions and they cause a bug in one szenario its difficult to describe
Scott
@scaley29
Aug 08 2016 02:32
@0x0936 so i put <h2 id="about">contact</h2> at top or in section that I want it to be at
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:32
@GordonBme that's why the point for this chat here is to help people out to learn the CSS, not point out that you can do stylesheets in a different file rather than inline.
Michael Bomholt
@bomholtm
Aug 08 2016 02:33
select: function(event, ui){
      search(ui.item.value);
    }
  });
  $(".search").on("click", function(){
    search($("#top-bar-input").val());
  });
  $("input").on("keydown", function(){
    if(event.keyCode == 13){
      search($("#top-bar-input").val());
    }
  });
basically thats the part of code which is causing the trouble
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:33
@bomholt do you have a codepen to share? That might make it easier to debug.
Michael Bomholt
@bomholtm
Aug 08 2016 02:33
you guys worked with jquery autoselect?
GordonBme
@GordonBme
Aug 08 2016 02:33
@itsacoyote yes i came on here for knowledge myself, but all i have done is help people and explain things
javad96
@javad96
Aug 08 2016 02:33
@itsacoyote yeh smaller-image!
Robert Richey
@0x0936
Aug 08 2016 02:33
@scaley29 that's your target location. When someone clicks the link in your nav bar, you want to send them to whatever element has an id="about"
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:34
@GordonBme ah, then this chat is probably not the place for your level of understanding perhaps.
Michael Bomholt
@bomholtm
Aug 08 2016 02:34
Josh Lavely
@Azayzel
Aug 08 2016 02:34
@itsacoyote you have so much patience lol
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:34
@GordonBme I'm helping out because I have ten years understanding of CSS
GordonBme
@GordonBme
Aug 08 2016 02:34
@itsacoyote i was thinking that earlier but i dont know where else to go
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:34
@GordonBme best way for you to expand your knowledge is to find some blogs
lemme find my list
Edgar Andrade
@edgarandr
Aug 08 2016 02:35
@itsacoyote If he is just getting here asking for help after 10 minutes of trying to solve this then yes he is hurting himself by not trying a littler longer. I usually ask for help when I been stuck over 30 minutes and I don't mind just getting the answer as it would make sense as I already have tried different things and I would understand why my failed attempt didn't work. IDK just the way I see it , just trying to help
Michael Bomholt
@bomholtm
Aug 08 2016 02:36
basically the problem is that the results get doubled if i select and item from autocomplete with enter ... its because search() is called on keydown enter and on select from autocomplete @itsacoyote @0x0936
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:36
@GordonBme
A List Apart
CSS Tricks (great one)
Sidebar newsletter
Front End News
Versioning
UX Booth
Javascript Weekly
Creative Bloq
@bomholt looking through it...
GordonBme
@GordonBme
Aug 08 2016 02:36
@itsacoyote ok thank you
CamperBot
@camperbot
Aug 08 2016 02:36
gordonbme sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Michael Bomholt
@bomholtm
Aug 08 2016 02:37
@itsacoyote no hurry im going for a smoke... thought i kind of quit smoking but man this wikipedia **
GordonBme
@GordonBme
Aug 08 2016 02:37
@itsacoyote feel lucky thats my first brownie points i have gave out on here ;)
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:37
@bomholt okay, best way to handle this.
So you have a button to do the search, and a keydown for Enter on the search input?
@GordonBme It's quite alright, if you've got any more questions, feel free to ask. I personally have some ten years of CSS experience.
Michael Bomholt
@bomholtm
Aug 08 2016 02:38
@itsacoyote yea im trying to achieve something like google... enter should search and pressing a button should search as well
GordonBme
@GordonBme
Aug 08 2016 02:38
@itsacoyote nice
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:38
@bomholt still looking at the code and figuring out exactly where, but what you should do is just on keydown just do a click on the button with jquery
all the search and calculation and code is in the click function then
Michael Bomholt
@bomholtm
Aug 08 2016 02:39
@itsacoyote i also have the search function called when selecting an autocomplete item
@itsacoyote ? i dont understand
there is a on click
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:40
@bomholt In the keydown event. Instead of search($("#top-bar-input").val());
do $(".search").click();
We're going to do nothing in the keydown event except just click so that the click function can do its work.
Michael Bomholt
@bomholtm
Aug 08 2016 02:42
so you are telling me to remove keydown?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:43
@bomholt no, inside the keydown function, just replace the search function with the $(".search").click();
Michael Bomholt
@bomholtm
Aug 08 2016 02:44
@itsacoyote ??? why should i do that?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:45
@bomholt agh, nevermind, I'm still reading through it. I'm getting cross-eyed this late in the night. I'm looking at the wrong spot I think.
Michael Bomholt
@bomholtm
Aug 08 2016 02:45
the problem is with keydown and selected
keydown end calls search on $("#top-bar-input").val()
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:46
yep, I see that now, I'm going through that part now
Michael Bomholt
@bomholtm
Aug 08 2016 02:46
and the autocomplete select calls search on ui-menu.value
so if i select the autocomplete stuff with enter it does like two searches and doubles the results
thought i just need to get the styling done tonight but this bug seems really tricky
Robert Richey
@0x0936
Aug 08 2016 02:48
@bomholt problem seems fixed after commenting out the input.on('keydown') block
Michael Bomholt
@bomholtm
Aug 08 2016 02:48
@0x0936 yea that for sure
but you cant type and search on enter without selecting from autocomplete then
Tom
@CodePrime
Aug 08 2016 02:49
uhh, is someone available to help me with lesson 171:Stand in Line?
sorry for the intrusion
Michael Bomholt
@bomholtm
Aug 08 2016 02:50
comment out the keydown and then try just typing and search on enter. wont work anymore then
Robert Richey
@0x0936
Aug 08 2016 02:51
@bomholt yep. interesting problem
Michael Bomholt
@bomholtm
Aug 08 2016 02:51
haha you are not indruding. its everyone room. if someone needs to apologize its me for writing that much ^^ @CodePrime
Tom
@CodePrime
Aug 08 2016 02:51
thanks man ^_^
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:51
@bomholt remove the select function in the autocomplete
@CodePrime what's the issue?
Tom
@CodePrime
Aug 08 2016 02:52
I can't seem to figure this out. The requirement is to "Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The nextInLine function should then return the element that was removed."
so here's what i have
Michael Bomholt
@bomholtm
Aug 08 2016 02:52
@0x0936 haha i would like to have your spirit man.. interesting ... xD its to go crazy for ^^
Tom
@CodePrime
Aug 08 2016 02:52
function nextInLine(arr, item) {
// Your code here
var a=arr[0];
arr.shift();
arr.push(item);
return a; // Change this line
}
Michael Bomholt
@bomholtm
Aug 08 2016 02:52
@itsacoyote than it wont search on clicking an item from autocomplete ...
and that would be even worse right?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:53
@bomholt yeah, there seems to be some event propagation that's causing an issue with the enter key
Michael Bomholt
@bomholtm
Aug 08 2016 02:53
in that case you would need to select from autocomplete and then press button or enter again for searching
whats a propagation -_- :)
<- german
Tom
@CodePrime
Aug 08 2016 02:55
c.out<<"Hello World"
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:56
@bomholt sorry! It means something is happening down in a child element and it may be moving up and catching in another jquery event, like your keydown one.
Michael Bomholt
@bomholtm
Aug 08 2016 02:56
@CodePrime could you post a link to your stuff?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:56
@CodePrime You're shifting and pushing correctly it looks like.
Tom
@CodePrime
Aug 08 2016 02:57
would a direct copy of the link in the URL work?
Michael Bomholt
@bomholtm
Aug 08 2016 02:57
ah okay @itsacoyote is allready helping
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:57
@CodePrime however, it's asking you to return the item that was shifted. shift() will affect the array by removing that first element. However, where are you putting that shifted element?
Michael Bomholt
@bomholtm
Aug 08 2016 02:57
brb
Tom
@CodePrime
Aug 08 2016 02:57
I stored it in the variable a
then returned it at the end of the function
Sabrina Ferguson
@itsacoyote
Aug 08 2016 02:58
@CodePrime you've got that a, maybe you should put the shifted item in there.
@CodePrime looking at the code, all you did was set a = [0];
You're not assigning the shifted element to a.
Tom
@CodePrime
Aug 08 2016 02:59
@itsacoyote wait, i see var a=arr[0];
Robert Richey
@0x0936
Aug 08 2016 03:00
@bomholt I got a dirty hack for you
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:01
@CodePrime yep, you probably just want var a;
Then where you shift the arr, it's going to return the shifted number. Assign that to a.
Tom
@CodePrime
Aug 08 2016 03:01
oooooohhhhh
@itsacoyote i had no idea that .shift() returns a value!
still doesn't work. It's passing all the checks except when an empty array is passed as the function parameter
Robert Richey
@0x0936
Aug 08 2016 03:03
@bomholt declare and initialize a global app variable var keys = []; to keep track of the keyCodes user presses. Look for the down key (code 40), if in the array, don't call search
var keys = [];

// stuff ...

$("input").on("keydown", function(){
  keys.push(event.keyCode)    
  if(event.keyCode == 13 && !keys.includes(40)){
    search($("#top-bar-input").val());
  }
});

// when search is called, reset keys
if (input.length > 0){
      keys = [];
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:03
@CodePrime what's the current code look like?
Tom
@CodePrime
Aug 08 2016 03:04

function nextInLine(arr, item) {
  // Your code here
  var a=arr.shift();
  arr.push(item);
  return a;  // Change this line
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));
Rohan Parikh
@RohanParikh00
Aug 08 2016 03:04
Im confused on what to do for the Understand String Immutability challenge, help?
Robert Richey
@0x0936
Aug 08 2016 03:07
@bomholt and that's a really slick feature. first time that I've seen someone use autocomplete in a project
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:08
@CodePrime what's the challenge name? Trying to make sure I don't confuse anything in it
Tom
@CodePrime
Aug 08 2016 03:09
@itsacoyote Stand in Line in basic JS
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:09
@CodePrime oh, haha, push into the array first before you shift
Tom
@CodePrime
Aug 08 2016 03:10
@itsacoyote ..... I'm a moron.....
thank you
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:10
@CodePrime it's alright! just got to pay attention to the order of things!
Tom
@CodePrime
Aug 08 2016 03:11
mhm, will do ^_^
bradulz
@bradulz
Aug 08 2016 03:11
$(#String(index1)+String(indey1)).html = 1; anyway I could get this to function properly? I'm trying to get the ID to be based off two other variables (x and y values) concatinated
Ian Moone
@ianmoone01
Aug 08 2016 03:11
Hi, I'm stuck on "Give a Background Color to a Div Element".
Tom
@CodePrime
Aug 08 2016 03:11
@ianmoone01 hey! we can help!
that one I actually know haha
Ian Moone
@ianmoone01
Aug 08 2016 03:13
I put "div {background-color: silver;}" on <style> </style>
It's already silver on the phone but I cant pass. I dont know why
AcheronParth
@AcheronParth
Aug 08 2016 03:13
Guys I know this may sound really newbish but l'm trying to nest and form element with a text field and for some reason I can't get it to work.
Tom
@CodePrime
Aug 08 2016 03:13
@ianmoone01 can you paste your code in here?
@AcheronParth hey! we can help!
Michael Bomholt
@bomholtm
Aug 08 2016 03:13
@0x0936 seriously your the best. thanks a lot... i will try that. but the array would need to reset after each search too. but yea that should work somehow.. so far the best lead i have... as i said im going crazy :) and @itsacoyote thank you too
CamperBot
@camperbot
Aug 08 2016 03:13
bomholt sends brownie points to @0x0936 and @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
:star2: 1644 | @0x0936 |http://www.freecodecamp.com/0x0936
Ian Moone
@ianmoone01
Aug 08 2016 03:14
<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;
}
div {background-color: silver;}
</style>
Tom
@CodePrime
Aug 08 2016 03:14
I sound like a damn telecom employee....
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:14
@bomholt I'm still gonna find a way to do this better :<
It's driving me nuts now XD
Michael Bomholt
@bomholtm
Aug 08 2016 03:15
@0x0936 haha yea im basically copying google for wikipedia and autocomplete is important for that =)
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:15
@ianmoone01 does it say a specific div, or all divs?
Tom
@CodePrime
Aug 08 2016 03:15
@ianmoone01 you need to hold that css in a class
the instruction says "Create a class called silver-background with the background-color of silver. Assign this class to your div element."
Ian Moone
@ianmoone01
Aug 08 2016 03:17
@itsacoyote only one div
@CodePrime I dont know where to put .silver-background
Tom
@CodePrime
Aug 08 2016 03:18
it's a css class, you should have it between your <style></style> tags
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:18
@ianmoone01 you should be able to put a class name of silver-background to any one div and it should work.
Replace div on the background-color:silver with .silver-background
Tom
@CodePrime
Aug 08 2016 03:18
then assign the silver-background to the div you want to apply to
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:18
^^
Michael Bomholt
@bomholtm
Aug 08 2016 03:19
@itsacoyote is driving me nuts too. especially because i really worked my ass of for this wikipedia viewer and really tried to be as close to a google experience as its possible for me
Tom
@CodePrime
Aug 08 2016 03:19
@bomholt i wish i can get to the same challenge as you level soon...:(
Michael Bomholt
@bomholtm
Aug 08 2016 03:19
i think it will be a quite beautiful thing when its done ... IF IT GETS DONE ^^
@CodePrime you will.. just focus on the stuff your at and dont rush
Ian Moone
@ianmoone01
Aug 08 2016 03:22
@CodePrime I know it but I dont know exactly where I can put it
@itsacoyote It doesnt work
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:22
@bomholt GOT IT
Tom
@CodePrime
Aug 08 2016 03:23
@ianmoone01 you mean where to put .silver-background once you have the class already made?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:23
inside of the select function in the autocomplete,
if (event.which === 1) {
        search($("#top-bar-input").val());
}
Tom
@CodePrime
Aug 08 2016 03:23
in the html, you want to put it in <div class="silver-background"><div>
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:24
@bomholt just only do a search if it's a click
if (event.which === 1) {
    search($("#top-bar-input").val());
}
Michael Bomholt
@bomholtm
Aug 08 2016 03:24
@itsacoyote wow really? found a better way than Robert?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:24
that should work
I think I double checked on the keydown and click events
Ian Moone
@ianmoone01
Aug 08 2016 03:24
@CodePrime yes
Tom
@CodePrime
Aug 08 2016 03:24
@ianmoone01 did it work?
Michael Bomholt
@bomholtm
Aug 08 2016 03:25
@itsacoyote i will try it
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:25
@bomholt darn it, I think it's not setting up the proper word that was selected though if you click in the dropdown. Need to adjust that...
@bomholt
if (event.which === 1) {
    $('#top-bar-input').val(ui.item.value);
    search($("#top-bar-input").val());
}
Michael Bomholt
@bomholtm
Aug 08 2016 03:27
@itsacoyote haha thats what the check headline is for
so far its working
Ian Moone
@ianmoone01
Aug 08 2016 03:27
I mean that if I do only " div {background-color: silver;}", the background still silver but I cant pass. I think I have to put .silver-background somewhere beside "div {background-color: silver;}"
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:27
@bomholt need to insert the ui.item.value into the input if you click on a autocomplete dropdown item. If you look, it will be whatever the input text was not autocompleted that gets returned for results.
Michael Bomholt
@bomholtm
Aug 08 2016 03:28
@itsacoyote for me the first code is working too... what was your input to create an error?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:28
@ianmoone01 close, remove that "div" and put .silver-background there instead
Tom
@CodePrime
Aug 08 2016 03:28
@ianmoone01 change the "div" in "div {background-color: silver;}" with .silver-background
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:28
@bomholt hmm, I type something like foo in the input, click on foodog in the dropdown and I get results back for foo
Michael Bomholt
@bomholtm
Aug 08 2016 03:29
@itsacoyote ah okay its working for me with keyboard and select but not if i click the autocomplete to select
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:29
@bomholt yep, that's why I added that additional line to insert the value into the input on click
ashnel
@ashnel
Aug 08 2016 03:29
Can anyone help with the Stand In Line lesson involving queues? I have no idea what to do, very stuck.
AcheronParth
@AcheronParth
Aug 08 2016 03:29
I'm not so sure how to show you guys this but im stumped
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:29
@ashnel share the code!
Tom
@CodePrime
Aug 08 2016 03:30
@ashnel I just got unstuck from there
ashnel
@ashnel
Aug 08 2016 03:30

function nextInLine(arr, item) {
// Your code here

return item; // Change this line
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

And the instructions are: Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The nextInLine function should then return the element that was removed.
Tom
@CodePrime
Aug 08 2016 03:30
@ashnel have you tried to solve it yet?
ashnel
@ashnel
Aug 08 2016 03:30
I know it has something to do with .push and .shift that we learned earlier but I'm stuck
Yeah =/ I just reset the code.
Tom
@CodePrime
Aug 08 2016 03:31
@ashnel can you re-enter the code and we can tell you what's wrong?
Robert Richey
@0x0936
Aug 08 2016 03:31
@itsacoyote @bomholt works. nice solution coyote :+1:
select: function(event, ui){      
  if (event.which === 1) {        
    search(ui.item.value);
  }      
}
Michael Bomholt
@bomholtm
Aug 08 2016 03:31
@itsacoyote wow thats so beautifull... only one thing to fix and then only some css work for the results
ashnel
@ashnel
Aug 08 2016 03:31

@CodePrime
function nextInLine(arr, item) {
// Your code here
testArr.push(4);
testArr.shift(0);
item = testArr.shift(); // Change this line
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Ian Moone
@ianmoone01
Aug 08 2016 03:31
@CodePrime <div class="silver-background"><div> It work. Thank u
@itsacoyote I dont no why it doesnt work. But thank u btw
CamperBot
@camperbot
Aug 08 2016 03:31
ianmoone01 sends brownie points to @codeprime and @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 176 | @codeprime |http://www.freecodecamp.com/codeprime
:cookie: 318 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
ashnel
@ashnel
Aug 08 2016 03:32
The explanation of queue was really vague so it got me confused.
Tom
@CodePrime
Aug 08 2016 03:32
@ashnel so remember that that bracket notation for arrays require "[]" not "()"
Michael Bomholt
@bomholtm
Aug 08 2016 03:32
@0x0936 yea that what i was wondering... if the 2 line solution works i should be able to just use what you just posted
Tom
@CodePrime
Aug 08 2016 03:32
@ianmoone01 thank you ian
CamperBot
@camperbot
Aug 08 2016 03:32
codeprime sends brownie points to @ianmoone01 :sparkles: :thumbsup: :sparkles:
:cookie: 45 | @ianmoone01 |http://www.freecodecamp.com/ianmoone01
Michael Bomholt
@bomholtm
Aug 08 2016 03:32
@itsacoyote @0x0936 you guys are awesome
ashnel
@ashnel
Aug 08 2016 03:33
@CodePrime I remember that, and I even changed the brackets but nothing is still solved.
Tom
@CodePrime
Aug 08 2016 03:33
@ashnel and testArr doesn't exist, you need to use the array name passed as your function parameter
so you need arr instread of testArr
Michael Bomholt
@bomholtm
Aug 08 2016 03:33
just have one little problem with autocomplete to go... if i just type a word and then press enter without selecting something from dropdown.. the dropdown isnt closed
Robert Richey
@0x0936
Aug 08 2016 03:33
took a minute to realize event.which === 1 is the left mouse click
ashnel
@ashnel
Aug 08 2016 03:34
@CodePrime Oh okay. So I changed that just now but still the same issue, all of the requirements still marked wrong.
Tom
@CodePrime
Aug 08 2016 03:34
also the last line of the nextLine function, your function needs to return someting
Michael Bomholt
@bomholtm
Aug 08 2016 03:34
@0x0936 i had to google it but dont even understand how it fully works :D
Tom
@CodePrime
Aug 08 2016 03:35
so you need a return statement
Michael Bomholt
@bomholtm
Aug 08 2016 03:35
why isnt the keydown function called anymore
but it fixes nearly all of my problems i had
ashnel
@ashnel
Aug 08 2016 03:35
@CodePrime Fixed again, but still nothing is marked as correct >< I'm unsure of what I've done wrong.
Tom
@CodePrime
Aug 08 2016 03:35
@ashnel instead of "item = testArr.shift(); // Change this line", you need "return blank"
what does the instruction tell you to return?
ashnel
@ashnel
Aug 08 2016 03:36
The nextInLine function should then return the element that was removed.
Tom
@CodePrime
Aug 08 2016 03:36
yep
so now we need something to hold the element that was removed
ashnel
@ashnel
Aug 08 2016 03:36
I changed it to return arr.shift();
Tom
@CodePrime
Aug 08 2016 03:36
so create a variable at the beginning of the function
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:36
@bomholt augh, I think I know why
Tom
@CodePrime
Aug 08 2016 03:36
name it anything
Michael Bomholt
@bomholtm
Aug 08 2016 03:37
@0x0936 @itsacoyote haha i understand the logic of it now ... my brain is just ... ^^
Robert Richey
@0x0936
Aug 08 2016 03:37
@bomholt see the extra line? tell autocomplete to close
$("input").on("keydown", function(){
    if(event.keyCode == 13){
      $("#top-bar-input").autocomplete('close')
      search($("#top-bar-input").val());
    }
  });
Michael Bomholt
@bomholtm
Aug 08 2016 03:37
some kind of mushy stuff right now
Tom
@CodePrime
Aug 08 2016 03:37
@ashnel try that to see if it works actually
the .shift () function apparently returns a value
ashnel
@ashnel
Aug 08 2016 03:38
@CodePrime I did =S Nothing is still solved. Let me repaste what I have now.

function nextInLine(arr, item) {
// Your code here
var anything;
arr.push([4]);
arr.shift(xamarin/xamarin-android@a16673d);
return arr.shift(); // Change this line
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Tom
@CodePrime
Aug 08 2016 03:38
@ashnel please do
ashnel
@ashnel
Aug 08 2016 03:38
I dont know what that random bit of stuff is in purple o.o
Robert Richey
@0x0936
Aug 08 2016 03:38
@bomholt and chain .focus() right after closing
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:39
@0x0936 thank you, you helped my sanity there XD
CamperBot
@camperbot
Aug 08 2016 03:39
itsacoyote sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1645 | @0x0936 |http://www.freecodecamp.com/0x0936
Tom
@CodePrime
Aug 08 2016 03:39
@ashnel you need to assign the variable anything to the element you shifted
and you gotta assign it before anything is shifted
Michael Bomholt
@bomholtm
Aug 08 2016 03:39
@0x0936 @itsacoyote you guys are just beautiful. i wish i would have come here earlier. spent hours on reading through stackoverflow posts till nothing of my brain was left
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:39
@ashnel okay, let's go step by step
Robert Richey
@0x0936
Aug 08 2016 03:40
@itsacoyote @bomholt was a fun problem. thanks :)
CamperBot
@camperbot
Aug 08 2016 03:40
0x0936 sends brownie points to @itsacoyote and @bomholt :sparkles: :thumbsup: :sparkles:
:cookie: 544 | @bomholt |http://www.freecodecamp.com/bomholt
:cookie: 319 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
ashnel
@ashnel
Aug 08 2016 03:40
@itsacoyote Please =S I'm sorry for the hassle.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:40
@ashnel you are asked to push something onto the array. Next you need to shift something out of the array. Finally, you need to return the item you shifted out.
@ashnel so, we want to return that shifted item.
Lets create a var shiftedItem; that we'll give the item to later down the line.
We sent in the array we're working on as one argument, and the item as the second argument. That item is what we're going to push into the array.
@ashnel how do you push an item into the array?
ashnel
@ashnel
Aug 08 2016 03:42
@itsacoyote It would be .push(), yeah?
Michael Bomholt
@bomholtm
Aug 08 2016 03:42
@bomholt and chain .focus() right after closing
@0x0936 what exactly do you mean by that
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:43
@ashnel correct! And it needs to be attached to the array we're putting the item into. So what is your full push method look like.
Michael Bomholt
@bomholtm
Aug 08 2016 03:43
as i said not much of my brain left right now -_-
Robert Richey
@0x0936
Aug 08 2016 03:43
@bomholt that gives the input focus again after pressing enter
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:43
@0x0936 ooh, nice bit of usability there
ashnel
@ashnel
Aug 08 2016 03:43
@itsacoyote Would it be nextInLine.push(); ? Or testArr.push();?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:44
@ashnel close. We sent in the array to do stuff with into the function nextInLine. The array is called arr inside the function.
Michael Bomholt
@bomholtm
Aug 08 2016 03:44
@0x0936 ahh okay didn't thought of that.. should i have the input focused after pressing the search button too?
ashnel
@ashnel
Aug 08 2016 03:44
Oh I see now. So it would be arr.push(); ?
Norvin Burrus
@ndburrus
Aug 08 2016 03:45
@ashnel this may be helpful: :sparkles:
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:45
@ashnel Yes! And push needs something to put into the array. We want to put "item" in there. Without the quote though
Michael Bomholt
@bomholtm
Aug 08 2016 03:45
@0x0936 my input seem not to lose focus until i press the button
ashnel
@ashnel
Aug 08 2016 03:45
Oh.. You see I did that t first but when nothing came of it I thought i was wrong.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:46
@ashnel well that's because we're not done here. You were also trying to put an actual number in there, we don't want to do that, we are working with variables here.
ashnel
@ashnel
Aug 08 2016 03:46
@ndburrus Thank you I will have a look after this!
CamperBot
@camperbot
Aug 08 2016 03:46
ashnel sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1440 | @ndburrus |http://www.freecodecamp.com/ndburrus
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:47
@ashnel so how does your code look like now?
ashnel
@ashnel
Aug 08 2016 03:47

function nextInLine(arr, item) {
// Your code here
var shiftedItem;
arr.push(item);
arr.shift(item);
return arr.shift(); // Change this line
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Norvin Burrus
@ndburrus
Aug 08 2016 03:47
@ashnel you're welcome! enjoy! :palm_tree:
Robert Richey
@0x0936
Aug 08 2016 03:47
@bomholt yeah just noticed. not sure what I was seeing. but yeah, after clicking the search button, you can add $("#top-bar-input").focus();
ashnel
@ashnel
Aug 08 2016 03:47
@itsacoyote The errors from my previous attempt are still there
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:48
@ashnel looking good so far, we've got two more steps left.
ashnel
@ashnel
Aug 08 2016 03:48
@itsacoyote So next would be shifting right?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:48
@ashnel so we've pushed an item onto the array. Next we need to shift something out of the array.
AcheronParth
@AcheronParth
Aug 08 2016 03:48
Can someone help me it wanting me to nest my text input within a form element but i can't get it to work for me
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:48
@ashnel yes, and shift does not require anything in it to do it's shifting.
ashnel
@ashnel
Aug 08 2016 03:49
@itsacoyote Oh okay
Michael Bomholt
@bomholtm
Aug 08 2016 03:49
@0x0936 yea thats what i was going for. just wasn't sure if you created a szenario where focus was lost
oh man i am so happy
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:49
@ashnel it's actually going to remove the first item out of the array. So it will return an item, but right now it's going to go nowhere. We need to set it to a variable. Remember that variable we set up earlier?
ashnel
@ashnel
Aug 08 2016 03:50
@itsacoyote shiftedItem?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:50
@ashnel yep!
Kirstie Mack
@firstcreatedbydesign
Aug 08 2016 03:50
What does this mean? Do not change the order of the h1 h2 or p in the code.
I got everything else right, and I didn't change the order.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:51
@ashnel so now that we've set shiftedItem to that item that we shifted out of the array, we need to return it.
ashnel
@ashnel
Aug 08 2016 03:51
@itsacoyote Wait, how do I set shiftedItem to what we just shifted?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:52
@ashnel we set shiftedItem = your shift method here
ashnel
@ashnel
Aug 08 2016 03:52
@itsacoyote Oh so it would be shiftedItem = arr.shift(); ?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:52
@ashnel correct.
ashnel
@ashnel
Aug 08 2016 03:53
@itsacoyote Okay that was one of the major errors I did.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:53
@ashnel yep. You also attempted shift() twice in your original code
Michael Bomholt
@bomholtm
Aug 08 2016 03:53
@0x0936 just added it in the end of the search function to be sure input has focus :) so exited.. only boring css stuff left
ashnel
@ashnel
Aug 08 2016 03:54

@itsacoyote Here is my code again just to be sure I understood correctly:
function nextInLine(arr, item) {
// Your code here
var shiftedItem = arr.shift();
arr.push(item);
arr.shift();
// Change this line
return shiftedItem;
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Robert Richey
@0x0936
Aug 08 2016 03:54
@bomholt awesome! :+1: :)
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:55

@ashnel ah, you're off by a little there. shiftedItem does not need to be set to arr.shift() at the beginning. We created var shiftedItem at the beginning so it is ready to be used later.

You need to do shiftedItem = arr.shift() after the arr.push();

ashnel
@ashnel
Aug 08 2016 03:55
Oh
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:55
@ashnel the code goes down line by line. The way you did it now, it shifts first before it pushes. We don't want to do that.
ashnel
@ashnel
Aug 08 2016 03:56
@itsacoyote I see now, I changed it and I'm down to only one error: After nextInLine(testArr, 10), testArr[4] should be 10
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:57
@ashnel so how does your code look like now?
ashnel
@ashnel
Aug 08 2016 03:57

function nextInLine(arr, item) {
// Your code here
var shiftedItem;
arr.push(item);
shiftedItem = arr.shift();
arr.shift();
// Change this line
return shiftedItem;
}

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

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Oh. I see my error. >.>
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:57
:D
ashnel
@ashnel
Aug 08 2016 03:58
@itsacoyote Thank you so much for the walkthrough! This is the first time throughout the camp that I really got stumped on something. I greatly appreciate it.
CamperBot
@camperbot
Aug 08 2016 03:58
ashnel sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Boris
@Boris1011
Aug 08 2016 03:58
Question anyone!? Is there a way for an image to have some fade out???
Sabrina Ferguson
@itsacoyote
Aug 08 2016 03:58
@ashnel no problem! Hopefully that helps you to break down future problems into smaller parts and solve it!
@Boris1011 how do you want it to fade out?
ashnel
@ashnel
Aug 08 2016 03:59
@itsacoyote Indeed :) I think I may need to start writing them down in front of me instead of trying to figure it all out in my head xD
Boris
@Boris1011
Aug 08 2016 03:59
@itsacoyote Just so I don't have a straight square picture....
if that makes sense!?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:01
@ashnel yep! It's also a good idea to read through the description for the method you're using so you know what it does or returns. Googling something like "javascript shift MDN" should give you the Mozilla website describing the method. They have a good description and also examples of how the method is used.

@Boris1011 oh, a faded edge. Not do-able in CSS. However you can do

img {
  border-radius: 50%;
}

for some fancy circle image

Boris
@Boris1011
Aug 08 2016 04:02
what about html or jscript??? Need it for my portfolio page!?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:04
@Boris1011 sorry, not really. Definitely not in CSS or HTML, in javascript it's quite complicated.
Robert Richey
@0x0936
Aug 08 2016 04:04
@Boris1011 you can fade an image, just takes a bit of magic. here's an example pen
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:04
@0x0936 that's not a bad way of doing it, is it cross-browser compatible?
Robert Richey
@0x0936
Aug 08 2016 04:05
@itsacoyote linear-gradient looks good to go on all browsers http://caniuse.com/#search=linear-gradient
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:06
@0x0936 ooh nice
Boris
@Boris1011
Aug 08 2016 04:06
Thanks @itsacoyote and @0x0936 !! Gives me something to look at and play with :smile:
CamperBot
@camperbot
Aug 08 2016 04:06
boris1011 sends brownie points to @itsacoyote and @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1646 | @0x0936 |http://www.freecodecamp.com/0x0936
:cookie: 321 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Santiago Gómez
@Sperkajugglite
Aug 08 2016 04:07
dude
i started learning chess 3 hours ago
its addictive :P
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:07
Guys I need some help
Darren
@DarrenfJ
Aug 08 2016 04:08
@Sperkajugglite haven't played a good game of chess in a long time.. any sites you recommend?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 04:08
@DarrenfJ yes
i found this one
chessacademy
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:08
Will .removeClass from jQuery remove a class of that div that is a parent of the element .removeClass is pointing to?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 04:08
its great at teaching you moves tactics
everything from the beginning
Darren
@DarrenfJ
Aug 08 2016 04:09
@Sperkajugglite coolcool.. will check it out
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:09
Will .removeClass remove inherited classes from parent divs??
Santiago Gómez
@Sperkajugglite
Aug 08 2016 04:09
i took chess classes like 6 years ago, and never learnt a pice of what i have learnt today :P
@DarrenfJ :)
Darren
@DarrenfJ
Aug 08 2016 04:09
@Sperkajugglite right on...
@Nachosuperxs i don't use enough jQuery to tell yah
Fausto Usme
@faustousme
Aug 08 2016 04:11
guys, i need help
i need to jQuery addClass() function to give the classes animated and shake to all your elements with the class well
Darren
@DarrenfJ
Aug 08 2016 04:12
@Nachosuperxs but i would think it would be directed to the element itself only.. have you played around with it in one of the early FCC jQuery challenges?
Robert Richey
@0x0936
Aug 08 2016 04:12

@Nachosuperxs from the docs

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

Boris
@Boris1011
Aug 08 2016 04:12
This message was deleted
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:12
@Nachosuperxs I guess it depends on how you're pointing to the div you're removing class from
scottwerner1
@scottwerner1
Aug 08 2016 04:12
This message was deleted
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:13
@faustousme how does your current code look like?
Fausto Usme
@faustousme
Aug 08 2016 04:13
el challenge is Target Elements by Class Using jQuery
my code says: $("button").addClass("animated shake");
the div has the class well so:
<div class="well" id="right-well">
scottwerner1
@scottwerner1
Aug 08 2016 04:14
does anyone know what I'm doing wrong with the script tag <script $(document).ready(function() { });>
</script>
it won't let me continue
Fausto Usme
@faustousme
Aug 08 2016 04:15
@scottwerner1 try this:
<script> $(document).ready(function() { });
</script>
Darren
@DarrenfJ
Aug 08 2016 04:16
@faustousme the exercise asks you to "First, let's target your div elements with the class well by using the $(".well") selector" then do the .addClass part
scottwerner1
@scottwerner1
Aug 08 2016 04:16
thanks it worked
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:17

imagine my code is this:

<div class="x">

<div class="y">

<p>Hello</p>
</div>
</div>
and my script is:
$(".y").removeClass("x");

Would it work?
Would my div class y not have class x properties?
And if not, how could I fix that?

Darren
@DarrenfJ
Aug 08 2016 04:17
@scottwerner1 yah, what @faustousme said.. needs to be 'outside' the <script> tags.. specifically on the other side of the >
Derek
@DTJ357
Aug 08 2016 04:17
Hi. I'm having trouble with my Local Weather Challenge. Could someone explain to me why my jQuery commands aren't working? Here's the link to my CodePen: http://codepen.io/Code4Jesus/pen/BzqGog?editors=1010
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:17
@Nachosuperxs that does work, but you don't have a class x on the div, so nothing gets removed
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:18
<div class="x">
<div class="y">
<p>Hello</p>
</div>
</div>
So if I have this
How can I remove class x from applying to my div with class y?
jamesmillerho
@jamesmillerho
Aug 08 2016 04:18
@DTJ357 go to api.openweathermap.org/data/2.5/weather you don't have API key you need to register an account at that site to get the key
Fausto Usme
@faustousme
Aug 08 2016 04:19
@DarrenfJ , so: $("button").addClass("animated shake");
$("button").addClass(".well");
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:19
@Nachosuperxs how is class x applying to your div with class y?
iferspusher
@iferspusher
Aug 08 2016 04:19
is there an autocomplete button for tags on the online editor?
Fausto Usme
@faustousme
Aug 08 2016 04:19
i don´t understood
Robert Richey
@0x0936
Aug 08 2016 04:19
@Nachosuperxs using jQuery or vanilla JS?
Derek
@DTJ357
Aug 08 2016 04:19
Oh, I see! Thank you, @jamesmillerho !
CamperBot
@camperbot
Aug 08 2016 04:19
dtj357 sends brownie points to @jamesmillerho :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @jamesmillerho |http://www.freecodecamp.com/jamesmillerho
Darren
@DarrenfJ
Aug 08 2016 04:19
@Nachosuperxs what are you trying to do? you seem to be asking ".y" to remove class "X" but as @itsacoyote it's not in the class y statement
@faustousme close.. it seems to want you to addClass of animated and shake to the class .well
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:20
@DarrenfJ I know it is not, but because the div with class x is a parent of the div with class y it has the div of class x's properties
Darren
@DarrenfJ
Aug 08 2016 04:21
what you wrote here: $("button").addClass("animated shake"); added them to the html element 'button'
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:21
using jQuery, how can I remove the class x from applying to my class y div?
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:21
@Nachosuperxs so what styles do you not want applied to div.y?
@Nachosuperxs and you can't with jquery like that.
Darren
@DarrenfJ
Aug 08 2016 04:22
@faustousme you are adding it to 'button' when it wants you to add it to .well
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:23
imagine class x is really class="text-center". However, there is an element within my div with text-center where I don't want it's text centered, what do I do?
Darren
@DarrenfJ
Aug 08 2016 04:23
@Nachosuperxs I'm not sure the <div> of x is the parent of y since they are not 'nested' within each other.. correct me if I'm wrong on that one @itsacoyote
imagine class x is really class="text-center". However, there is an element within my div with text-center where I don't want it's text centered, what do I do?
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:24

<div class="x">
<div class="y">
<p>Hello</p>
</div>
</div>

Isn't div y nested inside div x?

Robert Richey
@0x0936
Aug 08 2016 04:24
it is. just hard to notice without formatting
Boris
@Boris1011
Aug 08 2016 04:24
Text-color isn't working!?
https://codepen.io/Boris1011/pen/akaGJZ
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:25
@DarrenfJ they are nested.
Darren
@DarrenfJ
Aug 08 2016 04:25
@Nachosuperxs oh yah.. I see what yer doing there
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:25
@Nachosuperxs just assign text-align: left on div.y
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:25
@DarrenfJ What can I do?
Darren
@DarrenfJ
Aug 08 2016 04:25
<div class="x">
<div class="y">
<p>Hello</p>
</div>
</div>
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:25
hm
@itsacoyote Ah! thank you!
CamperBot
@camperbot
Aug 08 2016 04:26
nachosuperxs sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:26
@Nachosuperxs or whatever you need to style for anything on div.y or inside div.y, assign styling to div.y
Fausto Usme
@faustousme
Aug 08 2016 04:26
@DarrenfJ thank you, i done
CamperBot
@camperbot
Aug 08 2016 04:26
faustousme sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:cookie: 684 | @darrenfj |http://www.freecodecamp.com/darrenfj
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:27
That kind of fixed it. So I guess I just have to write contradictory but more priority code for my exeptions
Becky
@jigsawBecky
Aug 08 2016 04:27
Does anyone know why the height of <h2> is so large?And even though I change the height or padding of <h2>, why the position of the word "simon" will not change? Thanks! http://codepen.io/jigsaw_Becky/pen/oLQLwy
Darren
@DarrenfJ
Aug 08 2016 04:27
@faustousme you got it?

that's probably a good fix.. the cascading part will override div y styling if the div x styling is annoying/wrong..

@Nachosuperxs or whatever you need to style for anything on div.y or inside div.y, assign styling to div.y

@faustousme virtual high five
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:29
@jigsawBecky you could try a position: absolute on the h2 and position it that way.
Jose Ignacio Rodriguez-Labra
@Nachosuperxs
Aug 08 2016 04:29
@DarrenfJ right
Darren
@DarrenfJ
Aug 08 2016 04:29
@Nachosuperxs it dos seem annoying that you can;t just 'clear' that class out or something
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:29
@DarrenfJ it's not really wrong, per say. That's how CSS works. YOu just have to be mindful of how and what you're stying and be sure to set that on things you want styled a certain way.
Darren
@DarrenfJ
Aug 08 2016 04:30
@itsacoyote i meant 'wrong' there as in a style you do not want for that element
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:31
@DarrenfJ for something like text-align, I believe text-align: initial should work on 'resetting' the styling
Becky
@jigsawBecky
Aug 08 2016 04:31
@itsacoyote Thanks, it works. Could you please tell me why?
CamperBot
@camperbot
Aug 08 2016 04:31
:cookie: 323 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
jigsawbecky sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:32

@jigsawBecky you've placed the container of h2 in the general area of where you want the h2 to be in. Absolute positioning you can position the top/bottom, left/right to exactly where you want.

As to why it was at the very bottom of the screen before, no idea why yet. Looking into it.

Darren
@DarrenfJ
Aug 08 2016 04:33
@itsacoyote thanks Sabrina
CamperBot
@camperbot
Aug 08 2016 04:33
darrenfj sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Becky
@jigsawBecky
Aug 08 2016 04:36
@itsacoyote Thanks a lot!!!!!!!!!!!!!!!
CamperBot
@camperbot
Aug 08 2016 04:36
jigsawbecky sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:warning: jigsawbecky already gave itsacoyote points
Robert Richey
@0x0936
Aug 08 2016 04:36
@jigsawBecky if you give #controls absolute positioning, then you'll want to give it's parent, #box a relative position. otherwise, controls will be absolute to the document
Sarah Stella
@gurlpower
Aug 08 2016 04:39
hey does anyone know how to take proper code notes?
Brenton Hand
@brenthand
Aug 08 2016 04:40
@gurlpower code notes?
Darren
@DarrenfJ
Aug 08 2016 04:40
@gurlpower not sure what you mean..
Sarah Stella
@gurlpower
Aug 08 2016 04:40
notes on coding
lol
Brenton Hand
@brenthand
Aug 08 2016 04:41
@gurlpower whichever way works best for you. I like to write detailed comments in my code for refference but everyone ha their own style
Darren
@DarrenfJ
Aug 08 2016 04:41
@gurlpower not sure there's any real set of rules on what's right and wrong with taking notes about a subject.. unless you mean 'formatting' or something
or as @brenthand said. comments in coding..
Ahmad alloush
@ghost1244
Aug 08 2016 04:42
Can someone help to uncomment an h2 element
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:42
@ghost1244 what does your h2 element look like right now?
Robert Richey
@0x0936
Aug 08 2016 04:42
@gurlpower there's no standard agreement on how to use comments. My opinion is to use comments to help you understand what your code is doing - especially after you take a break for a while and come back to it and forget what is going on - those comments can help save time
Darren
@DarrenfJ
Aug 08 2016 04:43
@ghost1244 what do you have so far? This the FCC exercise?
dlhill615
@dlhill615
Aug 08 2016 04:43
<!--
Sarah Stella
@gurlpower
Aug 08 2016 04:43
thank you!!
dlhill615
@dlhill615
Aug 08 2016 04:43
I am having trouble with run test freezing
Darren
@DarrenfJ
Aug 08 2016 04:44
@ghost1244 this one?
@ghost1244 "Comment out your h1 element and your p element, but leave your h2 element uncommented."
dlhill615
@dlhill615
Aug 08 2016 04:45
Help
CamperBot
@camperbot
Aug 08 2016 04:45

CamperBot

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

Basic Commands:

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

meet CamperBot in FreeCodeCamp/camperbotPlayground

:pencil: read more about camperbot on the FCC Wiki

Darren
@DarrenfJ
Aug 08 2016 04:45
you are given this code:
<!--
<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Hello Paragraph</p>
-->
Ahmad alloush
@ghost1244
Aug 08 2016 04:45

@itsacoyote like this ...

<h2>hello</h2>

Robert Richey
@0x0936
Aug 08 2016 04:45
@dlhill615 append &run=disabled to your challenge url
dlhill615
@dlhill615
Aug 08 2016 04:45
Huh
Darren
@DarrenfJ
Aug 08 2016 04:46
@gurlpower a good rule of thumb is to use variable names that make sense to you combined with your comments so when you come back to it it makes sense
dlhill615
@dlhill615
Aug 08 2016 04:46
Add a Negative Margin to an Element
Robert Richey
@0x0936
Aug 08 2016 04:47
@dlhill615 hmm, disregard my comment. I misunderstood and thought the web page was freezing.
dlhill615
@dlhill615
Aug 08 2016 04:47
Cant get past it
Darren
@DarrenfJ
Aug 08 2016 04:47
@ghost1244 if you surround any thing by these it comments them out
<!-- someCode -->
Ahmad alloush
@ghost1244
Aug 08 2016 04:47
@itsacoyote thank you and thanks to Darren I cant find him !!!!
CamperBot
@camperbot
Aug 08 2016 04:47
ghost1244 sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
dlhill615
@dlhill615
Aug 08 2016 04:47
Is it not
Ur welcome also @ghost1244
I did clue u, 😂
Robert Richey
@0x0936
Aug 08 2016 04:49
@dlhill615 please show us your code
dlhill615
@dlhill615
Aug 08 2016 04:50
Ive refreshed, don't know what else to do. I'm using chome 100%
Don't know what to do. It's been 2 hours now
Do I just copy the link or copy not paste
@mikeinmiami
Robert Richey
@0x0936
Aug 08 2016 04:52
@dlhill615 copy and paste your code here
Sarah Stella
@gurlpower
Aug 08 2016 04:53
awesomeness thx
dlhill615
@dlhill615
Aug 08 2016 04:53

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
margin: -15px;
}

.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}
</style>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

lestebat
@lestebat
Aug 08 2016 04:54
help anyone
CamperBot
@camperbot
Aug 08 2016 04:54
no wiki entry for: anyone
lestebat
@lestebat
Aug 08 2016 04:54
trying to do this
Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.
Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.
Only use jQuery to add these classes to the element.
and here is my code:
Robert Richey
@0x0936
Aug 08 2016 04:55
@dlhill615 your code works for me. click the reset button and try again
lestebat
@lestebat
Aug 08 2016 04:55
Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.
Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.
Only use jQuery to add these classes to the element.
not working
dlhill615
@dlhill615
Aug 08 2016 04:55
Done it at least 100x
Don't know how to move forward
Robert Richey
@0x0936
Aug 08 2016 04:57
@dlhill615 just making sure you know the difference between reset and refresh? otherwise, try a different browser. I'm on Chrome, and it works.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:57
@lestebat can you show your code?
@dlhill615 you have style of margin-bottom:-25px; on class .injected-text. Where is the html tag that has that classname?
Santiago Gómez
@Sperkajugglite
Aug 08 2016 04:58
ok
Good night guys :P
thanks for everything :P
Darren
@DarrenfJ
Aug 08 2016 04:58
@Sperkajugglite night!
Sabrina Ferguson
@itsacoyote
Aug 08 2016 04:59
@dlhill615 ooh, I see the -15 on the .green-box, and it's still not working?
Nowa Lubega
@nlubega
Aug 08 2016 05:01
HELP! I have this problem with my portfolio navigation menu. It does not do anything when I use it on an ipad. However it works on desktops, laptops and android devices. How do I get it to work on IPAD? Here is the code pen: http://codepen.io/nlubega/pen/wWYVXq
CamperBot
@camperbot
Aug 08 2016 05:01
no wiki entry for: i have this problem with my portfolio navigation menu it does not do anything when i use it on an ipad however it works on desktops laptops and android devices how do i get it to work on ipad here is the code pen httpcodepenionlubegapenwwyvxq
Nowa Lubega
@nlubega
Aug 08 2016 05:04
I checked a few free camp personal portfolio pens. None of their navigation menu clicks do anything when I run them on an IPAD. This is a big problem. Is there a fix?
Robert Richey
@0x0936
Aug 08 2016 05:07
@nlubega I don't have an ipad to test it on. works in device emulation mode. what version of ios is it running?
Nowa Lubega
@nlubega
Aug 08 2016 05:08
@0x0936 IOS version 9 also tried version 8.4.1 - same problem
Darth Skywalker
@adityaparab
Aug 08 2016 05:11
@nlubega : That's most probably an issue with codepen
dlhill615
@dlhill615
Aug 08 2016 05:11
I know the difference and reset, refreshed, I'm using chrome. I can't move forward. So frustrating
Darth Skywalker
@adityaparab
Aug 08 2016 05:11
can you deploy it locally and then check it on iPad?
@nlubega
Robert Richey
@0x0936
Aug 08 2016 05:12
@nlubega reading through bootstrap support and the only thing that catches my attention is this section
Nowa Lubega
@nlubega
Aug 08 2016 05:12
@adityaparab really? but it works on android devices, laptops, etc..
Robert Richey
@0x0936
Aug 08 2016 05:14
@dlhill615 try visiting my challenge with your code copy pasted into it. will it run for you?
Nowa Lubega
@nlubega
Aug 08 2016 05:14
@0x0936 which part? The one on scrolling?
Darth Skywalker
@adityaparab
Aug 08 2016 05:14
@nlubega : Yes. I had similar problem with my wiki viewer.
Nowa Lubega
@nlubega
Aug 08 2016 05:15
@adityaparab how did you solve it? Or did you just ignore it?
Robert Richey
@0x0936
Aug 08 2016 05:15
@nlubega I was thinking navbar-dropdowns as it mentions issues with clicking
lestebat
@lestebat
Aug 08 2016 05:16
can anyone help?
please
Darth Skywalker
@adityaparab
Aug 08 2016 05:17
@nlubega : I deployed my code locally and saw it working on all the problematic devices.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 05:17
@lestebat please show some code?
Nowa Lubega
@nlubega
Aug 08 2016 05:17
@adityaparab wow! interesting
lestebat
@lestebat
Aug 08 2016 05:17
this is the assignment
Use the $("button") selector.
Use the $(".btn") selector.
Use the $("#target1") selector.
Only add one class with each of your three selectors.
Your #target1 element should have the classes animated‚ shake and btn-primary.
Only use jQuery to add these classes to the element.
Darren
@DarrenfJ
Aug 08 2016 05:18
@lestebat what do yah go going on?
lestebat
@lestebat
Aug 08 2016 05:18
this is my code
Darren
@DarrenfJ
Aug 08 2016 05:18
@lestebat easy peasy brutha!
lestebat
@lestebat
Aug 08 2016 05:18
<script>
$(document).ready(function() {
$("#target1" "button" ".btn").addClass("animated bounce" "animated shake", "btn-primary");
</script>
not working
Darren
@DarrenfJ
Aug 08 2016 05:18
@lestebat you have t do one line for each of the three
Nowa Lubega
@nlubega
Aug 08 2016 05:18
@adityaparab will try local deployment so I can discern if its a code pen issue
lestebat
@lestebat
Aug 08 2016 05:19
but didn't it says "Only add one class with each of your three selectors"?
ElPops
@Elpops
Aug 08 2016 05:19
Hello everybody
lestebat
@lestebat
Aug 08 2016 05:20
confuse here, earlier I separated it, but this is still not correct
Darren
@DarrenfJ
Aug 08 2016 05:20

@lestebat "Using .addClass(), add only one class at a time to the same element, three different ways:

Add the animated class to all elements with type button.

Add the shake class to all the buttons with class .btn.

Add the btn-primary class to the button with id #target1"

lestebat
@lestebat
Aug 08 2016 05:20
Only add one class with each of your three selectors.
Sabrina Ferguson
@itsacoyote
Aug 08 2016 05:20
@lestebat only one set of quotes inside your jquery selector.
Darren
@DarrenfJ
Aug 08 2016 05:20
@lestebat you've got the right idea.. but three separate .addClass es
lestebat
@lestebat
Aug 08 2016 05:21
how do I code it?
dlhill615
@dlhill615
Aug 08 2016 05:21
I finally got it. Closed browser completely. Reopened and wallah
Thanks alot @dewhiz
CamperBot
@camperbot
Aug 08 2016 05:21
dlhill615 sends brownie points to @dewhiz :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @dewhiz |http://www.freecodecamp.com/dewhiz
Darren
@DarrenfJ
Aug 08 2016 05:21
one of each type... "#target1" "button" ".btn" @lestebat
lestebat
@lestebat
Aug 08 2016 05:22
I took out the quotes, but it is giving me a syntax error
Darren
@DarrenfJ
Aug 08 2016 05:22
@lestebat this line: $("#target1" "button" ".btn").addClass("animated bounce" "animated shake", "btn-primary"); should be three lines
$("#target1" ).addClass("whateverOfTheThreeTheyAskedYouForHere");
lestebat
@lestebat
Aug 08 2016 05:22
I have to repeat exactly the same code and repeat it 3x?
Darren
@DarrenfJ
Aug 08 2016 05:22
@lestebat not exactly
1 for #target
lestebat
@lestebat
Aug 08 2016 05:23
sorry, confuse here
Darren
@DarrenfJ
Aug 08 2016 05:23
1 for button
1 for .btn
and each has a different class to add..

from the exercise: "Add the animated class to all elements with type button.

Add the shake class to all the buttons with class .btn.

Add the btn-primary class to the button with id #target1"

lestebat
@lestebat
Aug 08 2016 05:23
but isn't that breaking this instruction:
Only add one class with each of your three selectors.
Manjot Singh
@msingh18
Aug 08 2016 05:23
I am working on the local weather challenge. Codepen does not allow the XMLHttpRequest to go through, how is one supposed to check the weather?
Darren
@DarrenfJ
Aug 08 2016 05:23
key words" "with each'
one class per selector
ZZPot
@ZZPot
Aug 08 2016 05:24
stuck at WikiViewer channelge
lestebat
@lestebat
Aug 08 2016 05:24
because I am adding .addClass 3x again
Darren
@DarrenfJ
Aug 08 2016 05:24
animated wiht button
shake with .btn
ZZPot
@ZZPot
Aug 08 2016 05:24
I dunno how to get more info with one request
Darren
@DarrenfJ
Aug 08 2016 05:24
and btn-primary with #target1
ZZPot
@ZZPot
Aug 08 2016 05:24
I already got title and snippet, but I need URl or Page ID
structures returned in response very poor, not enough information
Darren
@DarrenfJ
Aug 08 2016 05:25
also from the exercise: "Note
You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1"
because #target one is button, had ID .btn and class #target1
you are adding three things to three different selectors but all three 'apply' to that button
lestebat
@lestebat
Aug 08 2016 05:27
this is what I did @DarrenfJ
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".btn").addClass("animated shake");
$("#target1").addClass("#btn-primary");
</script>
syntax error
Darren
@DarrenfJ
Aug 08 2016 05:27
@lestebat teh class added is "animated" and "shake"
.btn ==> "shake"
button ==> "animated"
and #target1 ==> "btn-primary"
lestebat
@lestebat
Aug 08 2016 05:29
yes, but where would the .btn btn-primary goes?
Do I need to get that .addClass for three lines @DarrenfJ ?
Darren
@DarrenfJ
Aug 08 2016 05:29
@lestebat yer close.. you are just adding classes that aren't quite the ones they ask for
@lestebat yup, three .addClass lines is good
and the first part is good.. the $("button").addClass for all three is ok.. the last part thre three are wrong

"Add the animated class to all elements with type button.

Add the shake class to all the buttons with class .btn.

Add the btn-primary class to the button with id #target1"

lestebat
@lestebat
Aug 08 2016 05:31
I did this, it is still wrong
<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
</script>
Darren
@DarrenfJ
Aug 08 2016 05:31
<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
    </script>
lestebat
@lestebat
Aug 08 2016 05:32
that is what I have
Darren
@DarrenfJ
Aug 08 2016 05:32
here's what I have:
<script>
  $(document).ready(function() {
$("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>
@lestebat there yah go,,you are missing the }): between the last $(....) and the </script>
Yusuf Corr
@YusC3
Aug 08 2016 05:33
So how do I assign a class to an html, say h2
lestebat
@lestebat
Aug 08 2016 05:33
got it, I am missing this }); at the end, thanks a lot @DarrenfJ
CamperBot
@camperbot
Aug 08 2016 05:33
lestebat sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:cookie: 686 | @darrenfj |http://www.freecodecamp.com/darrenfj
Darren
@DarrenfJ
Aug 08 2016 05:33
@lestebat schweet! virtual high five
lestebat
@lestebat
Aug 08 2016 05:33
you are a life saver @DarrenfJ
Darren
@DarrenfJ
Aug 08 2016 05:33
@lestebat you had the right idea all along just needed to get the classes right and do it in 3 separate lines
lestebat
@lestebat
Aug 08 2016 05:34
how do you copy that image of the code, instead of me copying all the text when someone wants to see my code?
Darren
@DarrenfJ
Aug 08 2016 05:34
@lestebat no wories brutha
@lestebat it's not the image.. it's just using 'markdown' to format my cut and paste
makes it easier to read...
you type three ticks (key under the esc and not a '
lestebat
@lestebat
Aug 08 2016 05:35
when you say markdown, how do you do that? lol, you can tell, I am really new to this
Darren
@DarrenfJ
Aug 08 2016 05:35
three -> ` <- then your code and three more
lestebat
@lestebat
Aug 08 2016 05:35
then you copy after the three arrow sign?
Darren
@DarrenfJ
Aug 08 2016 05:36
just the three ticks
its hard to show you cause it treats them differently here than just typing them
lestebat
@lestebat
Aug 08 2016 05:36
still confuse sorry to bother you, I guess it's for me to learn it later
Darren
@DarrenfJ
Aug 08 2016 05:36
bu if oyu type explain fromatting camperbot also explains it
explain formatting
CamperBot
@camperbot
Aug 08 2016 05:37

:point_right: code formatting [wiki]

Multi line Code

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

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

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

Single line Code

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

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

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

Darren
@DarrenfJ
Aug 08 2016 05:37
@lestebat read that above me here ^^^^^
lestebat
@lestebat
Aug 08 2016 05:37
got it, thanks a billion
got it
Darren
@DarrenfJ
Aug 08 2016 05:37
@lestebat go ahead and try it out with yer code here
it's just so much easier to read
lestebat
@lestebat
Aug 08 2016 05:38

```$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");

});```

didn't work lol
```
Darren
@DarrenfJ
Aug 08 2016 05:39
I take that back.. you need to type shift enter to post your code one line down

```$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");

});```

$(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");

  });
so the ticks are three above the code and three at the very bottom
lestebat
@lestebat
Aug 08 2016 05:41
$(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");

  });
got it, lol, thanks a lot @DarrenfJ
CamperBot
@camperbot
Aug 08 2016 05:41
lestebat sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:warning: lestebat already gave darrenfj points
Darren
@DarrenfJ
Aug 08 2016 05:41
@lestebat schweet! virtual high five
lestebat
@lestebat
Aug 08 2016 05:42
learning a million from you @DarrenfJ
Darren
@DarrenfJ
Aug 08 2016 05:42
@lestebat no worries brutha!
k FCC HelpRoomies.. I gotta walk my puppies so I'm out for a bit.. if I don't see yah when I'm back have a good one...
thirumal2293
@thirumal2293
Aug 08 2016 05:46
i have a small problem in doing this task ......
how to add font awsome to a button
Rada
@Radascript
Aug 08 2016 05:48
hey guys, what are standards ways for activating animation when element gets into view?
lestebat
@lestebat
Aug 08 2016 05:51
having a problem again with this, please help:
Disable your target1 button.
Do not disable any other buttons.
Only use jQuery to add these classes to the element.
here is my code:
Kelly
@Kellyxlm
Aug 08 2016 05:53
@lestebat can't see your code?
lestebat
@lestebat
Aug 08 2016 05:54
$(document).ready(function() {
    $("#target1").css("color", "red");
    $("button", "#target1").prop("disabled", true);

  });

$(document).ready(function() {
$("#target1").css("color", "red");
$("button", "#target1").prop("disabled", true);

});

Abis Mal
@abisthecodermal
Aug 08 2016 05:54
What's wrong with this code?
//Diff Two Arrays

//Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other //words, return the symmetric difference of the two arrays.


function diffArray(arr1, arr2) {

  var a="";
  var b="";
  var arr10="";
  var arr20="";

  if (arr1.length===0)
    return arr2;

  if (arr2.length===0)
    return arr1;

  arr1.sort();
  arr2.sort();

  if (arr1[0]<arr2[0]){
    arr10=arr1[0];
    a=arr1.shift();
    return (arr10+diffArray(arr1,arr2));
  }

  else if(arr1[0]===arr2[0]){
    a=arr1.shift();
    b=arr2.shift();
    return(arr1,arr2);
  }
  else{
    arr20=arr2[0];
    b=arr2.shift();
    return (arr20+diffArray(arr1,arr2));
  }
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
Kelly
@Kellyxlm
Aug 08 2016 05:55
@lestebat remove "button" and true should be in quotes
@lestebat
 $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", "true");

  });
chaitanya ashtekar
@chaitanyaashtekar
Aug 08 2016 05:57
@manucpp you have made it too complex..try a simple one(indexOf)
lestebat
@lestebat
Aug 08 2016 05:57
$(document).ready(function() {
    $("#target1").css("color", "red");
    $("button", "#target1").prop("disabled", true);

  });
but the button is not being mentioned and on the example they don't have true in quotation
but let me try, thank you very much
Abis Mal
@abisthecodermal
Aug 08 2016 05:57
@chaitanyaashtekar , I try to avoid built in functions as much as I can...
Kelly
@Kellyxlm
Aug 08 2016 05:58
@lestebat ahh you're right, true is not in quotations. my mistake, good job catching that
chaitanya ashtekar
@chaitanyaashtekar
Aug 08 2016 05:58
@manucpp then write a simple for loop to check if the value exists
Abis Mal
@abisthecodermal
Aug 08 2016 06:00
@chaitanyaashtekar can you help me with an algo or a pseudocode or something? Because I need two for loops. One to loop the first array, another nested for loop to loop through second array.
Then I use this for loop "system" for the second array
Kelly
@Kellyxlm
Aug 08 2016 06:01
@lestebat It should be like this then. That's how I passed that challenge.
$(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
  });
Shusil Banjade
@shusil123
Aug 08 2016 06:04
@manucpp , You can use indexOf to test whether any elements of one array are present in another. And then return only unique elements. you can use filter method of JS Arrays in combination
Abis Mal
@abisthecodermal
Aug 08 2016 06:04
@shusil123 I try to avoid built in functions as much as I can...
and hence my dilemna
anurag6
@anurag6
Aug 08 2016 06:05
@manucpp You can use a simple for loop to implement your own indexOf yes?
Abis Mal
@abisthecodermal
Aug 08 2016 06:05
Please elaborate... @anurag6
Shusil Banjade
@shusil123
Aug 08 2016 06:06
@manucpp , Why's that? Simply using indexOf doesn't hurt. You can alter filter with for loops .
Abis Mal
@abisthecodermal
Aug 08 2016 06:08
using built in functions make me dependent on one language. If somehow I learn enough, I might be able to migrate to other languages. Also, I am trying to build my logic for a solution. @shusil123
Also, learning functions is too much for me @shusil123 :P
learn and remember each function, its implementation, its catches... its too much @shusil123 ;)
Calvoxel
@Calvoxel
Aug 08 2016 06:09

I'm working on the Twitch.tv API but for some reason, my "status" and "outputArea" variables are apparently null elements, and I don't understand why.

window.onload = function start() {
var arrayOfStreamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (i = 0; i < arrayOfStreamers.length; i++) {
var outputArea = document.getElementById('user' + (i + 1));
var status = document.getElementById("onoff" + (i + 1));
$.getJSON('https://api.twitch.tv/kraken/streams/' + arrayOfStreamers[i], function(data) {
// setStatus(arrayOfStreamers[i], i)
if (data.stream === null) {
var splitLink = data._links.self.split("/");
var displayName = splitLink[5];
console.log(displayName + " is offline");
status.innerHTML = "Offline"
} else {
var displayName = data.stream.channel.display_name;
console.log(displayName + " is online and playing " + data.stream.game);
status.innerHTML = "Online"
}
if (data.stream != null) {
// console.log(data.stream.channel.display_name)
channelName = data.stream.channel.display_name;
var outputArea = document.getElementById("user1");
outputArea.innerHTML = channelName;
}
if (data.stream == null) {
channelName = data._links.self.split("/")
// console.log(channelName[5]);
var nameOfChannel = channelName[5];
var output = document.getElementById("user1");
output.innerHTML = channelName[5];
}
outputArea.innerHTML = arrayOfStreamers[i];
});
}

My codepen is at http://codepen.io/Calvoxel/pen/AXdOpm

angelpawz
@angelpawz
Aug 08 2016 06:12
so im trying to to change my font size on all my paragraphs, the code seems right but im missing something. not sure what. any help would be lovely.
<style>
.red-text {
<p> font-size 16px </p>
color: red;

}
</style>
Calvoxel
@Calvoxel
Aug 08 2016 06:12
@angelpawz your font-size should be "font-size = 16px;", I think
angelpawz
@angelpawz
Aug 08 2016 06:13
ok thanks :)
Calvoxel
@Calvoxel
Aug 08 2016 06:13
:)
Anjar Husain
@AnjarHusain
Aug 08 2016 06:13
<style>
.red-text ;{
<p> font-size 16px </p>
color: red;

}
</style>
you forgot to add a semi colon beside the red-text @Calvoxel
angelpawz
@angelpawz
Aug 08 2016 06:14
omg lol im dub <3
Calvoxel
@Calvoxel
Aug 08 2016 06:15
@angelpawz it's a simple mistake, everybody makes them. No need to beat yourself up over it :)
@AnjarHusain Um, I dunno if that's necessary, considering I don't usually need it, but alright
angelpawz
@angelpawz
Aug 08 2016 06:16
:) one last thing my <p> </p> are highlighted. does that mean its wrong?
Anjar Husain
@AnjarHusain
Aug 08 2016 06:16
<p> tags will be outside the <style> tags
angelpawz
@angelpawz
Aug 08 2016 06:16
oh ok
Calvoxel
@Calvoxel
Aug 08 2016 06:17
@angelpawz Just a little reference for the future, style is considered a property sheet for each item, and so any HTML should be outside of it, usually after the </style>
angelpawz
@angelpawz
Aug 08 2016 06:18
ok :) thanks everyone for the tips
Calvoxel
@Calvoxel
Aug 08 2016 06:19
@angelpawz Anytime! ;)
esneadjr
@esneadjr
Aug 08 2016 06:33
Hey guys I hat to be redundant but I am having the same issue with changing font size of an element. This is what I have <style>
.red-text;{ <p>font-size 16px</p>
color: red;
}
</style>
Joshua Sullivan
@jaesulli95
Aug 08 2016 06:33
p { font-size:16px;}
.red-text { color:red; }
esneadjr
@esneadjr
Aug 08 2016 06:37
Excellent! Wow thank you! @jaesulli95
CamperBot
@camperbot
Aug 08 2016 06:37
esneadjr sends brownie points to @jaesulli95 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jaesulli95
Darren
@DarrenfJ
Aug 08 2016 06:40
back.. hi fellow helpChatRoomies
Shusil Banjade
@shusil123
Aug 08 2016 06:46
Hello @DarrenfJ .
:smile:
Darth Skywalker
@adityaparab
Aug 08 2016 06:46
Greetings @DarrenfJ
Tymon
@Tymon555
Aug 08 2016 06:49
Hi! I was wondering how to do the submit form, so with submit button you stay on the same page but trigger jquery request
could you help me with that? :)
Darth Skywalker
@adityaparab
Aug 08 2016 06:49
@Tymon555 Share your code please
Darren
@DarrenfJ
Aug 08 2016 06:50
hi guys!
Tymon
@Tymon555
Aug 08 2016 06:50
yep, sec
<form action = '#' method="post">
 <input type="text" name="search" placeholder="Search..">
 <input type = 'submit' value="submit">
</form>
thats my form
Darth Skywalker
@adityaparab
Aug 08 2016 06:51
@Tymon555 : Your action is action = '#' so you're gonna stay on same page.
Tymon
@Tymon555
Aug 08 2016 06:51
@adityaparab Yeah, I know
I don't know how to make my website take content the user textede
texted
and use it in my jquery query
Alexander Køpke
@alexanderkopke
Aug 08 2016 06:52
@DarrenfJ hi
Darth Skywalker
@adityaparab
Aug 08 2016 06:52
@Tymon555 : Is the an FCC challenge or you're doing something on your own?
Tymon
@Tymon555
Aug 08 2016 06:52
challenge
Darren
@DarrenfJ
Aug 08 2016 06:52
@alexanderkopke hey brutha! Howsit going?
Tymon
@Tymon555
Aug 08 2016 06:52
wikipedia wiever
viewer
Alexander Køpke
@alexanderkopke
Aug 08 2016 06:53
@DarrenfJ quite well. How about you?
Darren
@DarrenfJ
Aug 08 2016 06:53
same ole same ole... good so far :D
Darth Skywalker
@adityaparab
Aug 08 2016 06:54
@Tymon555 : Assuming you have only one form on your page, here is how you can do it
$(document).on('ready', function(){
    $('form').on('submit', function(e){
        e,preventDefault();
        var formData = $(this).serialize();
        console.log(formData); // {search : 'whatever you entered in your text box'}
    });
});
Alexander Køpke
@alexanderkopke
Aug 08 2016 06:54
:)
Tymon
@Tymon555
Aug 08 2016 06:55
@adityaparab thanks! I'll look what preventDefault and serialize functions do ;)
CamperBot
@camperbot
Aug 08 2016 06:55
tymon555 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Aug 08 2016 06:56
It will take each input element from your form and construct an object with the values of those inputs. Key for that value will be the name attribute you've defined on your input element.
@Tymon555 : Every native js event (submit) for instance has a default behavior. By default it will submit the form to the url specified under the action attribute on the form. We want to prevent this default action and do some processing before submitting the form. So we call the preventDefault() method of the event object.
LeeMinhua
@LeeMinhua
Aug 08 2016 07:00

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

orange-text {

color: orange;

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

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

Karolis
@Kaidu93
Aug 08 2016 07:01
Hey guys, is there something wrong iwht my img code?
<img src="https://bit.ly/fcc-relaxing-cat" alt="relaxing cat.">
the image doesnt show
Tymon
@Tymon555
Aug 08 2016 07:02
@adityaparab so 'e' in function(e) is is variable with the data typed by user?
Darth Skywalker
@adityaparab
Aug 08 2016 07:03
@Tymon555 : No. e is an event object passed implicitly by the JS
Coy Sanders
@coymeetsworld
Aug 08 2016 07:03
are you on https connection @Kaidu93 ?
Darth Skywalker
@adityaparab
Aug 08 2016 07:03
you can, however, get the data from the e object itself like
var searchText = $(e.currentTarget).find('input').val();
Coy Sanders
@coymeetsworld
Aug 08 2016 07:04
@LeeMinhua you have a typo in your style attribute for h1
style="color:while"
Karolis
@Kaidu93
Aug 08 2016 07:08
@coymeetsworld I just started learning HTML5, and am on the "Add Images to your Website" step. I seem to follow the instructions, but the image doesnt show
Coy Sanders
@coymeetsworld
Aug 08 2016 07:08
can you show entire code and lesson name?
Darren
@DarrenfJ
Aug 08 2016 07:11
@Kaidu93 where are you adding the img html?
Karolis
@Kaidu93
Aug 08 2016 07:11
Lesson name is Front End Development Certification -> HTML5 and CSS -> Add Images to your Website

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

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

h2 {
font-family: Lobster, Monospace;
}

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

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

and the full code
Coy Sanders
@coymeetsworld
Aug 08 2016 07:13
you have the image tag inside your style tags, doesn't belong there
only thing between the style tags should be CSS
Karolis
@Kaidu93
Aug 08 2016 07:14
im so stupid. Thank you very much
Coy Sanders
@coymeetsworld
Aug 08 2016 07:14
nah, and no problem :thumbsup: m
Karolis
@Kaidu93
Aug 08 2016 07:15
placed it outside of the style tags and it works fine now :)
Darren
@DarrenfJ
Aug 08 2016 07:15
@Kaidu93 yah, what @coymeetsworld said.. I was gonna say your img html is ok that's why i asked where you were adding it
Karolis
@Kaidu93
Aug 08 2016 07:15
thank you too Darren ;)
Darren
@DarrenfJ
Aug 08 2016 07:16
@Kaidu93 I almost always have to go back and look at the exercises to see if the instructions are clear about things like 'where' to put stuff...
Tymon
@Tymon555
Aug 08 2016 07:18
@adityaparab ```
``` e,preventDefault();
 e,preventDefault();
should there be '.' instead for ','?
Abhijitkohale
@abhijitkohale23
Aug 08 2016 07:20
during challenge did the red cross turn green after complition of challenge????????????
Tymon
@Tymon555
Aug 08 2016 07:21
@abhijitkohale23 yes
Darth Skywalker
@adityaparab
Aug 08 2016 07:22
@Tymon555 : Yes. THere should be a . not ,. Sorry. THat was a typo from my side. My bad
Abhijitkohale
@abhijitkohale23
Aug 08 2016 07:23
i have completed my challenge but it remain red,what should i do??
Bilyan Hadzhi
@bilyanhadzhi
Aug 08 2016 07:24
@abhijitkohale23 Well, you haven't completed it then
Darren
@DarrenfJ
Aug 08 2016 07:26
@abhijitkohale23 the bottom right column lists the tests and what have passed and what haven't
@abhijitkohale23 what challenge is it?
Tymon
@Tymon555
Aug 08 2016 07:27
08:20:47.370 Use of getPreventDefault() is deprecated. Use defaultPrevented instead.1my_version_wikib.html
RaymundRyan
@RaymundRyan
Aug 08 2016 07:27
hi
Tymon
@Tymon555
Aug 08 2016 07:27
what does it mean?
hi
RaymundRyan
@RaymundRyan
Aug 08 2016 07:30
can somebody help me?
Darren
@DarrenfJ
Aug 08 2016 07:30
@Tymon555 it's deprecated.. no longer used in a newer version of whatever you are using
RaymundRyan
@RaymundRyan
Aug 08 2016 07:33
it says "Nest your text input element within a form element." <form action="/submit-cat-photo"></form>
lordU