These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
May 2017
Zachary
@Bazill03
May 01 2017 00:00
@PreatzalGamer99 Much better. Close your row and container divs though.
Zachary
@Bazill03
May 01 2017 00:04
@PreatzalGamer99 Definitely change the link color to black.
PreatzalGamer99
@PreatzalGamer99
May 01 2017 00:06
how do you do that
Gulsvi
@gulsvi
May 01 2017 00:10
@PreatzalGamer99 There are some issues with your codepen settings. There's a v3.3.7 Bootstrap JS file in your CSS settings (only CSS files go there) and a Bootstrap 4 JS file in your JavaScript settings (which doesn't match your CSS version). You don't need either of the JS files - remove them from your settings :)
Add the img-responsive class to your image and it will scale down smaller for mobile devices.
This CSS isn't needed:
center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
To make your link black, assign it a class and give it a color, like:
a.black-text,
a:hover.black-text {
  color: black;
}
Alan Saber
@Alan95
May 01 2017 00:18
is it even worth to finish the frontend certificate since the new beta is coming soon?
Eduar Tua
@eduartua
May 01 2017 00:19
Hi guys
do you recommend to switch to the beta versión?
Gulsvi
@gulsvi
May 01 2017 00:20
If you switch to the beta, save your progress. It won't be saved when the beta is finished.
Eduar Tua
@eduartua
May 01 2017 00:21
Then it is better to wait
Gulsvi
@gulsvi
May 01 2017 00:22
I'm waiting, but I'm not in a hurry - this is just a hobby for now
Lots of good lessons in the beta
Keon Samuel
@keonsam
May 01 2017 00:23
Im in hurry
speed
Gulsvi
@gulsvi
May 01 2017 00:23
Yeah, I can tell :)
Keon Samuel
@keonsam
May 01 2017 00:23
I want everything .
how old are you Sky?
Gulsvi
@gulsvi
May 01 2017 00:26
21
Keon Samuel
@keonsam
May 01 2017 00:26
lol
me and you the same age.
Gulsvi
@gulsvi
May 01 2017 00:27
nice :)
Keon Samuel
@keonsam
May 01 2017 00:27
I thought you were 15.
Gulsvi
@gulsvi
May 01 2017 00:27
Saw you talking about jobs yesterday, was thinking there must be a lot of jobs for websites - so much tourism in your area
Nah, I'm in college
I study languages - that's why I wanted to know some colloquialisms from your area
Keon Samuel
@keonsam
May 01 2017 00:30
bachelor or community?
Gulsvi
@gulsvi
May 01 2017 00:31
bachelor, it's a university
Keon Samuel
@keonsam
May 01 2017 00:31
cool
Keon Samuel
@keonsam
May 01 2017 00:36
lol, I would like to make $5000 us per month that is prime minster salary in my country.
Eduar Tua
@eduartua
May 01 2017 00:37
I too old
Keon Samuel
@keonsam
May 01 2017 00:38
too old for what?
Gulsvi
@gulsvi
May 01 2017 00:39
You could make $2000 for a website pretty easily in Canada. Make a few wordpress websites a month for small businesses - sign up as a freelancer.
6000/month. Invite the prime minister over for dinner
Eduar Tua
@eduartua
May 01 2017 00:39
I am 30 and many people say is too late to start in programming field
Keon Samuel
@keonsam
May 01 2017 00:40
I don't think so @eduartua
Gulsvi
@gulsvi
May 01 2017 00:40
30 is young
Eduar Tua
@eduartua
May 01 2017 00:40
I am still doing my best, I am electrical engineer but love web development
Keon Samuel
@keonsam
May 01 2017 00:46
@SkyCoder01 maybe we can collaborate.
Gulsvi
@gulsvi
May 01 2017 00:47
I'm just going to be a student for now and see where it takes me :)
Eduar Tua
@eduartua
May 01 2017 00:52
Languages and coding is a good combination
c0d0er2
@c0d0er2
May 01 2017 00:55

Can somebody please help me with Replacing If Else Chains with Switch in JavaScript? Here is my code:

function chainToSwitch(val) {
  var answer = "";
  // Only change code below this line

  switch (val === "bob") {
    case 1:
      answer = "Marley";
      break;
    case 2:
      answer = "The Answer";
      break;
    case 3:
      answer = "There is no #1";
      break;
    case 4:
      answer = "Missed me by this much!";
      break;
    default:
      answer = "Ate Nine";
      break;
  }

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

// Change this value to test
chainToSwitch(7);

Here is the link: https://www.freecodecamp.com/challenges/replacing-if-else-chains-with-switch

Keon Samuel
@keonsam
May 01 2017 00:59
@SkyCoder01 but we can make millions.
Gulsvi
@gulsvi
May 01 2017 01:01
I would gladly work for you some day @keonsam :) have a dream job in the Caribbean
Sit on the beach, code all day. Drink rum. Sounds perfect
Keon Samuel
@keonsam
May 01 2017 01:01
haha
Eduar Tua
@eduartua
May 01 2017 01:02
I tried rum while coding. It didn't work for me got drunk too quickly
Gulsvi
@gulsvi
May 01 2017 01:02
Rum is for after coding lol
Eduar Tua
@eduartua
May 01 2017 01:02
Lol
Keon Samuel
@keonsam
May 01 2017 01:02
probably won't want to code drunk.
Gulsvi
@gulsvi
May 01 2017 01:02
Keon would fire us for drinking on the job
Reeson55
@Reeson55
May 01 2017 01:03
are there any issues with using images off google for my background images on codepen for projects?
Eduar Tua
@eduartua
May 01 2017 01:03
Use postimage.io
Gulsvi
@gulsvi
May 01 2017 01:03
It depends on the image, some are copyright, but I doubt anyone would notice
Reeson55
@Reeson55
May 01 2017 01:04
i mean im just using the url link
to post a background on codepen its nothing live
Eduar Tua
@eduartua
May 01 2017 01:05
It depends on the rights as @SkyCoder01 says. If it is not a production site there will no be problems
Reeson55
@Reeson55
May 01 2017 01:10
heres my tribute so far what do you guys think? http://codepen.io/Reeson55/pen/pPbMPN
Gulsvi
@gulsvi
May 01 2017 01:14
image.png
@Reeson55 Good work for desktop, it should resize better for mobile :)
Reeson55
@Reeson55
May 01 2017 01:14
@SkyCoder01 thanks, yeah not sure where to start there lol
CamperBot
@camperbot
May 01 2017 01:14
reeson55 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1232 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 01 2017 01:15
Click the down arrow, in the top right-hand corner of the HTML + CSS panels and select the Analyze option. It will give you some suggestions
Reeson55
@Reeson55
May 01 2017 01:17
maybe using flex-container?
Gulsvi
@gulsvi
May 01 2017 01:28

@Reeson55 In general, don't use large values in pixels. You can remove this to help a lot:

width:1200px;

And take advantage of bootstrap. For example, on your image, use class="img-responsive"

And remove this from the CSS for that image:
  margin-left: 160px;
Think of a phone that's 280px wide. You've just pushed it to the left by 160px, over half the width of the phone's screen
Reeson55
@Reeson55
May 01 2017 01:31
if i do that my image wont be centered
Gulsvi
@gulsvi
May 01 2017 01:31
image.png
Those 3 changes make it look like this instead:
Add the center-block class to your image to center it
Reeson55
@Reeson55
May 01 2017 01:35
okay I centered image but what about the width of the container?
Lucas Mazzitelli
@duffmckagan
May 01 2017 01:36

<html lang="en">
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="jumbotron text-center">

<h1>Lucas Mazzitelli</h1>
<p>Full Stack Developer</p>
</div>

</body>
</html>

.jumbotron{
background-color: #f4511e;
color: #000

My css doesnt work, but when i put in the html with the tag <style></style> its works
Someone can help me?
sorry for my english, is a total crap haha

here is my pen
Gulsvi
@gulsvi
May 01 2017 01:37
@Reeson55 If you don't want it to get too wide, but still want it to be responsive, use max-width: 1200px for your container. http://codepen.io/skycoder/pen/NjjXqy
@duffmckagan Click "Settings" in codepen and add all of this to your settings instead:
<head>
  <title>Portfolio</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
^^ And that jQuery version looks very old. Latest version is 3.2
Reeson55
@Reeson55
May 01 2017 01:39
@SkyCoder01 is that done with css? or add a class to the element
Gulsvi
@gulsvi
May 01 2017 01:42
@Reeson55 max-width is a CSS property
Reeson55
@Reeson55
May 01 2017 01:42
@SkyCoder01 ok thanks il try it out
CamperBot
@camperbot
May 01 2017 01:42
reeson55 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: reeson55 already gave skycoder01 points
Reeson55
@Reeson55
May 01 2017 01:43
@SkyCoder01 wow thanks alot that changed everything.
CamperBot
@camperbot
May 01 2017 01:43
reeson55 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: reeson55 already gave skycoder01 points
Gulsvi
@gulsvi
May 01 2017 01:43
Yeah, just small changes needed :)
Chris
@bestintown23
May 01 2017 01:48
how do I remove underline from link
jonathanpuc
@jonathanpuc
May 01 2017 01:58
@vanessavalentine Thank you! No I hadn't, I had another learning resource as well!
CamperBot
@camperbot
May 01 2017 01:58
jonathanpuc sends brownie points to @vanessavalentine :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @vanessavalentine |http://www.freecodecamp.com/vanessavalentine
Corri Taylor
@corritaylor
May 01 2017 02:05
How do you sow your code on Gitter?
Alan Saber
@Alan95
May 01 2017 02:13
hey guys, how can i remove this placeholder after a short of time, like 2 seconds? is there any delay option? after i created it: input.attr("placeholder", "Hello"); (jquery)
Jean Mesa
@roninjay
May 01 2017 02:32
@duffmckagan put this in your head tag: <link rel="stylesheet" type="text/css" href="yourStylesheet.css">
Gulsvi
@gulsvi
May 01 2017 02:32
@corritaylor share a link to your codepen project
Or, if you want to format the code with black background, use markdown. https://github.com/freeCodeCamp/freeCodeCamp/wiki/Code-Formatting
Gulsvi
@gulsvi
May 01 2017 02:49
input.attr("placeholder", "Hello")
  .delay(2000)
  .queue(() => $(input).attr("placeholder", "").dequeue());
Jorge
@flawedLogic506
May 01 2017 02:53
hey guys
Alan Saber
@Alan95
May 01 2017 02:54
thanks @SkyCoder01
CamperBot
@camperbot
May 01 2017 02:54
alan95 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1234 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Alan Saber
@Alan95
May 01 2017 02:54
hey
Gulsvi
@gulsvi
May 01 2017 02:54
Hello Jorge
Jorge
@flawedLogic506
May 01 2017 02:55
hows your Sunday going guys
Corri Taylor
@corritaylor
May 01 2017 02:56
Thank you @SkyCoder01 I actually found out how in another room. I appreciate your help.
CamperBot
@camperbot
May 01 2017 02:56
corritaylor sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1235 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ben Carp
@carpben
May 01 2017 03:02

Hi, in the tic tac toe project, I'm trying to control some of the data in an object. Take a look at the last property:

    game: {
      _gameBoard: [
        ["", "", ""],
        ["", "", ""],
        ["", "", ""]
      ],
      player1starts: Boolean(Math.round(Math.random())),
      nextMove: 1, //between 1 and 9
      player1Move: this.player1starts
    },

for some reason my assignment of the last property doesn't work, and it is left undefined.

Any idea why, and which solution can I implement?
Ken Haduch
@khaduch
May 01 2017 04:02
@carpben - you probably have to do that outside of the object? I don't think that there is anything that will make that sequence through the properties in the order that you have them written, but I don't have an authoritative answer on that? That's a gut feeling that I have about it.
Ken Haduch
@khaduch
May 01 2017 04:08
@OrangeKulture - hey there, Sunday was good, thanks. How about you? Have a happy Monday!
CamperBot
@camperbot
May 01 2017 04:08
khaduch sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @orangekulture |http://www.freecodecamp.com/orangekulture
Ken Haduch
@khaduch
May 01 2017 04:16
@carpben - this might be a question on stackoverflow with a better answer: http://stackoverflow.com/questions/6824129/how-do-i-reference-the-same-objects-properties-during-its-creation
Ken Haduch
@khaduch
May 01 2017 04:30

@carpben - something like this might work, then, based on one of the late answers in that question:

    game: {
      _gameBoard: [
        ["", "", ""],
        ["", "", ""],
        ["", "", ""]
      ],
      player1starts: Boolean(Math.round(Math.random())),
      nextMove: 1, //between 1 and 9
       get player1Move () {
          return this.player1starts;
      }

    },

But I guess that it depends on what you're doing in other parts of your code? That would always give the same return for game.player1starts and game.player1Move - might not be what you want. But those are some ideas?

tanwanjern
@tanwanjern
May 01 2017 06:05
Hi, in the tribute page project. do i need to copy all the content story? or i need to find another story to create my project?
LiuHuilong528
@LiuHuilong528
May 01 2017 06:10
@tanwanjern I think just copy!
Zachary
@Bazill03
May 01 2017 07:01
I'm trying to build a text based game. I'm trying to make it so that every room is an object. And while in that room the player can give commands such as "look" to say, list out an array of items to look at in that object. Now, when moving across rooms I'm changing the currentRoom part of the object to either false, or true based on how the player is moving. If I want to make an if statement that says "if the player types look, call the look function and give it the current room the player is in". How can I keep track of what room the player is in?
LiuHuilong528
@LiuHuilong528
May 01 2017 07:33
I'm tring to build a tribute page. I extend bootrap , but it can't work.
There is no bootsrap in link element. I don't know why ! I do what the tutorial tells me ! Is there anyone help me?
Augusto
@hackedWifi
May 01 2017 07:52
hello everyone. I am lost on the local weather project. I dont know how to start
Markus Ivancsics
@ivancsicsmarkus
May 01 2017 07:54
@hackedWifi
  • Write the html and css. Design it!
  • Search for a weather api (yahoo, openweathermap, google)
  • Implement the api, with ajax!
@hackedWifi You can check a complete walkthrough here.
h1tag
@h1tag
May 01 2017 07:56
@LiuHuilong528 can you paste your pen link here?
Ming Zhu
@chocobrownie
May 01 2017 07:57
Hi I just realized the existence of Sass and Mixin Libraries. Ppl say it is absolutely worth it to learn one of those. But I'm scared that it is less flexible. It's like I'm learning html and ppl say I should learn CMS instead and I got ruined cuz I don't know the basic development anymore. Is my worry necessary?
Augusto
@hackedWifi
May 01 2017 08:03
@ivancsicsmarkus THANK you for your input. It seems a lot of things going on :)
CamperBot
@camperbot
May 01 2017 08:03
hackedwifi sends brownie points to @ivancsicsmarkus :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @ivancsicsmarkus |http://www.freecodecamp.com/ivancsicsmarkus
Emmanuel Sucilan
@HeartOfKings
May 01 2017 08:30
@chocobrownie When you jump in learning CMS. youll need to have atleast experience in using those tools that are in CMS already so why practice CSS and HTML
it be you good foundation
Luv Suneja
@chiz
May 01 2017 08:54
http://codepen.io/chiiz/pen/MmmVNq I'm trying to get collapse to work when the browser width is resized smaller. Doesen't seem to work. Would love some help.
Ming Zhu
@chocobrownie
May 01 2017 09:23
@HeartOfKings got it thanks!
CamperBot
@camperbot
May 01 2017 09:23
chocobrownie sends brownie points to @heartofkings :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @heartofkings |http://www.freecodecamp.com/heartofkings
Ming Zhu
@chocobrownie
May 01 2017 09:41
Hi, I am looking back at my personal portfolio webpage. My submission for actually doesn't work cuz there's nowhere to submit the data to. Do we need a personal database system with it's own SQL and metadata? Or is there any other ways to achieve that?
Josh Morel
@joshmorel
May 01 2017 10:26
Yes or have that work as an email submission. Either way you need some back-end work unless you use a service like this one - https://formspree.io/. Note I'm not endorsing as haven't tried it yet but this could be worth exploring.
h1tag
@h1tag
May 01 2017 10:34
@chocobrownie you can just launch the default email client on the user's pc after the user clicks submit
Josh Morel
@joshmorel
May 01 2017 11:09
@h1tag Good idea. I was just going to provide a link to my email and skip the form. But I'll try that to see how it works.
PreatzalGamer99
@PreatzalGamer99
May 01 2017 11:17
how do I change the color of a link
alpox
@alpox
May 01 2017 11:23
@PreatzalGamer99 In the css: color: green;
PreatzalGamer99
@PreatzalGamer99
May 01 2017 11:27
thanks
Omotoso Yusuf
@Omott
May 01 2017 12:04
Hello guys,just joining the community here, anything like an intro?
Yahia
@y-zaky
May 01 2017 12:12
hi guys
@Omott hi dude welcome :)
i wondered
what am i doing wrong?
<div class = "container fluid">
<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;
  }

  .container-fluid{

  }
</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" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>
on the
Use Responsive Design with Bootstrap Fluid Containers challenge
instructions:
To get started, we should nest all of our HTML in a div element with the class container-fluid.
is my first line wrong?
or my container-fluid class>
how do i "nest all my html" in the div element?
h1tag
@h1tag
May 01 2017 12:14
@bowssy88 for this challenge, you'll have to nest them all excluding the style and link elements
because usually these go into the head tag
Yahia
@y-zaky
May 01 2017 12:16
@h1tag
<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;
  }

  .container-fluid{

  }
</style>

<div class = "container fluid">
<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" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>
like so?
h1tag
@h1tag
May 01 2017 12:16
yes
Yahia
@y-zaky
May 01 2017 12:16
@h1tag thank you, why do they usually go in the head tag?
CamperBot
@camperbot
May 01 2017 12:16
bowssy88 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 756 | @h1tag |http://www.freecodecamp.com/h1tag
h1tag
@h1tag
May 01 2017 12:17
@bowssy88 also you don't to create the container fluid class between ur style tags
it's a bootstrap class, which is imported for you in the background
Yahia
@y-zaky
May 01 2017 12:19
@h1tag cheers
PreatzalGamer99
@PreatzalGamer99
May 01 2017 12:20
look good?
Yahia
@y-zaky
May 01 2017 12:22
perfect ! @h1tag
Omotoso Yusuf
@Omott
May 01 2017 12:23
@bowssy88 thank you
CamperBot
@camperbot
May 01 2017 12:23
omott sends brownie points to @bowssy88 :sparkles: :thumbsup: :sparkles:
:cookie: 187 | @bowssy88 |http://www.freecodecamp.com/bowssy88
Yahia
@y-zaky
May 01 2017 12:25
no worries :) @Omott
hey guys
  <img  src="https://bit.ly/fcc-running-cats" class="btn img-responsive"  alt="Large Cat ">
how do i give the button the text like?
h1tag
@h1tag
May 01 2017 12:27
@PreatzalGamer99 looks good and neat
@bowssy88 why are you giving the classbtn to an img?
PreatzalGamer99
@PreatzalGamer99
May 01 2017 12:28
thanks i just trying to change the jumbotron color and I cant seem to figure it out
h1tag
@h1tag
May 01 2017 12:28
@PreatzalGamer99 you mean override it?
PreatzalGamer99
@PreatzalGamer99
May 01 2017 12:29
I think
yes
h1tag
@h1tag
May 01 2017 12:30
@PreatzalGamer99 you can check the Bootstrap source code and try to work from there
PreatzalGamer99
@PreatzalGamer99
May 01 2017 12:30
and how do I do that
h1tag
@h1tag
May 01 2017 12:31
@PreatzalGamer99 you can download it from their official website and open it in your text editor
PreatzalGamer99
@PreatzalGamer99
May 01 2017 12:31
?
Yahia
@y-zaky
May 01 2017 12:35
guys
can someone explain in their own words
what bootstrap is
and how it is different from html>
?
PreatzalGamer99
@PreatzalGamer99
May 01 2017 12:36
idk that
but if you googled it you'd probably find out
Yahia
@y-zaky
May 01 2017 12:38
i know but i want it in someones own words ... better than google
Alexander Lazaris
@alexandlazaris
May 01 2017 12:39

@bowssy88 - Bootstrap is a component based FE framework. It gives you modular pieces to put together for your page.

HTML is the barebones of a website, the skeleton and is needed to show this content

HTML is required (well not so much recently with the latest and greatest frameworks replacing it). Bootstrap is just an option
Omotoso Yusuf
@Omott
May 01 2017 12:40
Like foundation is too. Exactly correct @alexandlazaris
Yahia
@y-zaky
May 01 2017 12:40
@alexandlazaris what does component based fe framework mean, in plain english?
and how can you tell when someone has used bootstrap?
Alexander Lazaris
@alexandlazaris
May 01 2017 12:42
@bowssy88 - You probably should look more into HTML (how to design a site). Don't jump into the deepend if you're not comfortable yet
Yahia
@y-zaky
May 01 2017 12:42
@alexandlazaris ok cheers
h1tag
@h1tag
May 01 2017 12:44
@PreatzalGamer99 had a disconnect. Here you can download the Bootstrap source code: https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
alpox
@alpox
May 01 2017 12:44

@bowssy88 Bootstrap is just utility on top of HTML and CSS.
As you probably know, you can define styles for your page through adding a class to an element and add some styles to the CSS.

Bootstrap predefines such style-classes for you, which you can add to your html elements for their styling. It doesn't do much else except defining some bit javascript which adds some few functionalities.

Yahia
@y-zaky
May 01 2017 12:47
@alpox thank you thats exactly what i wanted
CamperBot
@camperbot
May 01 2017 12:47
bowssy88 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 993 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
May 01 2017 12:48
@bowssy88 You're welcome :-)
Tardigra
@Tardigra
May 01 2017 12:54
Hi there, I have navbar issues with code pen. No matter how I try to get the items in a row, they always collapse to a column. Does anybody have a solution to this.
alpox
@alpox
May 01 2017 13:00
@Benelino only if you show your pen
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:01
hi guys can i have any feedback about my portfolio site? what else should i add here? https://codepen.io/Rocky-Balboa/full/KmmgGL/
alpox
@alpox
May 01 2017 13:05
@Benelino You have a real mixture of bootstrap includes ^^ best would be to first clean that up. In your css panel you include bootstrap version 4.0. In the stuff for head you include version 3.3.7 and in the html you try to include 3.3.7 again - not needed
So decide for one bootstrap version and stick with it. Include it in the css panel and put the javascript in the javascript panel. No need to clutter the stuff for head or your html with it
Yahia
@y-zaky
May 01 2017 13:09
@Rocky-Balboa Hi, site looks good, maybe try and make the gif actually move?
so make it a flying cat
also the colour scheme could change, brown is a little boring?
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:10
@bowssy88 That nyan its just a placeholder for my photo :D
Yahia
@y-zaky
May 01 2017 13:10
thats jut my opinion though
haha i see :clap: @Rocky-Balboa
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:10
@bowssy88 What colour would you choose :D?
alpox
@alpox
May 01 2017 13:11
@Rocky-Balboa Few things: your navbar has an active highlight which will always stay on home: now. Not sure if this makes sense.
The divs could use some padding at some parts so the content of the containers don't align right with the outer border of the container - as example for the contact section.
Also, the input elements could use a more fitting outline than blue - maybe some beige color like your page, just a bit darker?
Yahia
@y-zaky
May 01 2017 13:11
@Rocky-Balboa Whiite and green xD
alpox
@alpox
May 01 2017 13:11
@bowssy88 Ugh :D i actually like the brownish :D
Yahia
@y-zaky
May 01 2017 13:11
@alpox fair enough each to their own ! hope that helped anyway :)
alpox
@alpox
May 01 2017 13:12
Just hard blue in the brown doesn't fit for me :D
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:12
@alpox @bowssy88 I think its just a personal liking thigns :D
Yahia
@y-zaky
May 01 2017 13:12
@alpox same lol , but yeah i guess its a personal thing !
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:12
@alpox Ok i will take care of these div paddings
Yahia
@y-zaky
May 01 2017 13:13
guys i have a question
can someone explain in more detail
the col-xs-* grid
i don't understand how it works... for example:
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:14
@bowssy88 I have used them in my project
Yahia
@y-zaky
May 01 2017 13:14
div class="col-xs-4" - if i increase the number 4 , the item moves to the right
and keeps moving
alpox
@alpox
May 01 2017 13:14
@bowssy88 The col is always the prefix for a column. Then the xs is one of 4 definitions for page-sizes. Where you put the * there comes a number from 1-12.
One row always consists of 12 "slots"
Yahia
@y-zaky
May 01 2017 13:14
is it just a matter or trial and error to see which one 'fits' or is there an easy way to figure it out?
alpox
@alpox
May 01 2017 13:15
Well you usually design your page in a way to split up the horizontal space for sections.
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:15
@bowssy88 if you have one row, then you need to split them like 6 and 6 i think
if you want 2 columns
the same size
but you can split them like 4 4 4 so you have 3 columns same size
or
2 6 4
alpox
@alpox
May 01 2017 13:15
@bowssy88 So if you want to have a left-sidebar, content, right-sidebar, you probably go for something like: 2-8-2 or 3-6-3
Tardigra
@Tardigra
May 01 2017 13:16
@alpox : Thank's alot. That is, because I copied samples into my pen.... Should be more careful. I will check it tomorrow.
CamperBot
@camperbot
May 01 2017 13:16
benelino sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 994 | @alpox |http://www.freecodecamp.com/alpox
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:16
@alpox I fixed that home button haha
alpox
@alpox
May 01 2017 13:16
@Rocky-Balboa :thumbsup:
Yahia
@y-zaky
May 01 2017 13:16
@Rocky-Balboa @alpox makes sense ! and the way you do it is that you basically put all the "left sidebar" text within a div element that should say row= horizontal?
or vertical? *
alpox
@alpox
May 01 2017 13:17
@bowssy88 A row is always horizontal, you don't have to specify that
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:17
row horizontal column vertical
alpox
@alpox
May 01 2017 13:18
@bowssy88 But a row wraps your content if the content exceeds the size of the row - if you as example add more than 12 slots
Yahia
@y-zaky
May 01 2017 13:18
@alpox @Rocky-Balboa so the div class=column ?
alpox
@alpox
May 01 2017 13:18
@bowssy88 There is no such thing
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:18
@alpox <div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
alpox
@alpox
May 01 2017 13:18
@bowssy88 You define a div to be a column with the col-xs-* already
Yahia
@y-zaky
May 01 2017 13:19
i see
so for navigation, content, right sidebar
you would do
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:19
@alpox this is for one row splitted in 3 columns if you want another row below that you copy the same, but remember to keep it with one div class="container
Yahia
@y-zaky
May 01 2017 13:19
<div class="row">
<div class="col-sm-2">.col-sm-4</div>
<div class="col-sm-8">.col-sm-4</div>
<div class="col-sm-2">.col-sm-4</div>
</div>
alpox
@alpox
May 01 2017 13:19
@bowssy88 And with adding versions for xs sm md and lg you can define different column sizes for different screen widths
Which is good for responsivity
@Rocky-Balboa You tag the wrong man :D
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:20
@alpox ye i know <div class="container"> xD
Yahia
@y-zaky
May 01 2017 13:20
@alpox @Rocky-Balboa lool
ok so when building a site
alpox
@alpox
May 01 2017 13:21
@Rocky-Balboa Hmm? :D
Yahia
@y-zaky
May 01 2017 13:21
you can add all different versions for different screen widths? so how would it look is u wanted left side content right sidebar
alpox
@alpox
May 01 2017 13:21
Does anyone know functional dependencies for database relation normalization? :D
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:21
@alpox Och sorry man, i'm just tired i didnt understand you, ;D i slept like 3 hours was late for work and i came back now cleaned all the house im sleeping with my eyes opend sorry :D
@alpox I didnt want to tag you
alpox
@alpox
May 01 2017 13:22
@Rocky-Balboa Hihi :D i know such days. Better get some rest soon :-)
Yahia
@y-zaky
May 01 2017 13:22
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">.col-sm-4</div>
<div class="col-sm-8 col-md-2 col-lg-2">.col-sm-4</div>
<div class="col-sm-2 col-md-2 col-lg-2">.col-sm-4</div>
</div>
@alpox @Rocky-Balboa is that right?
for say small md and large screen sizes
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:23
@bowssy88 I think for LG the summary should be 12
@bowssy88 so 4 4 4 instead of 222
alpox
@alpox
May 01 2017 13:23
@bowssy88 Yes thats right. Just be aware that for middle and big screens, you only define 6 slots to be filled
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:23
@bowssy88 and remember to keep it in container to make it responsive
alpox
@alpox
May 01 2017 13:23
@Rocky-Balboa Well that would work if he uses a col-md-offset-3 too to keep all of them in the middle :D
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:24
@alpox thats cool didnt know, i found out about bootsrap 2 days ago still learning :D
Yahia
@y-zaky
May 01 2017 13:24
@Rocky-Balboa @alpox perfect xD thanks guys !
CamperBot
@camperbot
May 01 2017 13:24
bowssy88 sends brownie points to @rocky-balboa and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @rocky-balboa |http://www.freecodecamp.com/rocky-balboa
:warning: bowssy88 already gave alpox points
alpox
@alpox
May 01 2017 13:24
@Rocky-Balboa There are always new things to learn :-) there is also bootstrap v4 now! :D
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:25
@alpox Haha i know, i was using it and i didn't even know :-D. I was wondering why my nav wasn't working (i used nav from bootsrap 3) and somebody told me that i have bootsrap 4 in my codepen .. i jsut added it by button and it added alpha v4 instead of v3 :X
alpox
@alpox
May 01 2017 13:25
But ofc. one should keep in mind that this is only ONE library - there are thousands more @Rocky-Balboa and one always learns them through their documentation when needed.
Usually its better to know how they work (Know how to handle html and css yourself) instead of using the framework. One can adapt very fast to other frameworks then
shivam gupta
@shivamg11000
May 01 2017 13:26
hey guys check out my tribute page
Yahia
@y-zaky
May 01 2017 13:26
@alpox @Rocky-Balboa why do they keep changing bootstrap?
alpox
@alpox
May 01 2017 13:26
Yes codepen lately switched that button to include v4 instead of v3 ^^
Yahia
@y-zaky
May 01 2017 13:26
and nowadays, do people just use all bootstrap instead of custom style css?
alpox
@alpox
May 01 2017 13:26
@bowssy88 Because technology changes and new possibilities come up.
It was time for them to base their framework on the new techs like Flexbox
Yahia
@y-zaky
May 01 2017 13:26
@alpox whats that ?
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:27
@shivamg11000 It looks nice, I would use diffrent font for H's tough, it looks a bit childish
alpox
@alpox
May 01 2017 13:27
@bowssy88 Its a CSS3 specification which is implemented in all major browsers allowing easy positioning of elements.
@bowssy88 And no, there are lots of companies which don't use bootstrap. Bootstrap can stand in your way like a rock and you have to work around it in some cases.
Often its easier to build own css if you don't want to style the bootstrap way.
Bootstrap is good for giving a fast go on a website because the styling takes quite a long time else.
@bowssy88 You will find that about all webpages with a quite own style use their own css
@bowssy88 For a bigger web app with lots of userinputs i would go with https://semantic-ui.com/ now
Instead of bootstrap
Brandon Dalton
@dabigin
May 01 2017 13:29
Are you supposed to put a ton of work into the tribute page? Or make it look like the one that you get the example of?
alpox
@alpox
May 01 2017 13:30
@dabigin It should fulfill a similar purpose like the example. But you are not supposed to make a clone. You can style the page as you want and give tribute to your own idol
Brandon Dalton
@dabigin
May 01 2017 13:31
Ahh, I don't have any idols, but I'll just do one on Steve Irwin
alpox
@alpox
May 01 2017 13:31
@dabigin Me neither, so i took just someone i like :D
Brandon Dalton
@dabigin
May 01 2017 13:32
Thanks a lot @alpox
CamperBot
@camperbot
May 01 2017 13:32
dabigin sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 995 | @alpox |http://www.freecodecamp.com/alpox
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:33
@dabigin you have 50 hours in summary for 2 projects, so use this time wisely :-d
Brandon Dalton
@dabigin
May 01 2017 13:34
there are only 2 projects?
Yahia
@y-zaky
May 01 2017 13:34
@alpox thats cool
Brandon Dalton
@dabigin
May 01 2017 13:34
for this part?
So I do this as a project and not a pen?
Yahia
@y-zaky
May 01 2017 13:35
so how to people/companies build frameworks? @alpox
Brandon Dalton
@dabigin
May 01 2017 13:35
@Rocky-Balboa only 2 projects for this first project thing for 50 hours?
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:43
@dabigin this is what website said
@dabigin i dont know these 2 projects took me 20 hours in summary, but i dont feel completed yet, im going to review all the html and css basics again
Brandon Dalton
@dabigin
May 01 2017 13:44
I've been on codeacademy as well as freecodecamp
I was just going to make a page that looks like the one they displayed, I figured there would be more projects
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:45
@dabigin there are . the first 2 are just like a quick reminding of html and css
@dabigin after these you have more projects wy more
Brandon Dalton
@dabigin
May 01 2017 13:46
yeah, but thats after learning basic javascript
thanks @Rocky-Balboa I'm going to try and make a nice tribute page now.
CamperBot
@camperbot
May 01 2017 13:48
dabigin sends brownie points to @rocky-balboa :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @rocky-balboa |http://www.freecodecamp.com/rocky-balboa
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:49
@dabigin Ye, i just finished my portfolio project, good luck with your tribute page!
Brandon Dalton
@dabigin
May 01 2017 13:49
@Rocky-Balboa 100 more hours of projects later...fun fun
Rocky-Balboa
@Rocky-Balboa
May 01 2017 13:49
@dabigin brb dinner time
alpox
@alpox
May 01 2017 13:50
@bowssy88 They see that they need something which doesn't exist but they need, so they create it :D
Brandon Dalton
@dabigin
May 01 2017 13:50
cheers @Rocky-Balboa see ya later
Brandon Dalton
@dabigin
May 01 2017 13:58
I am so confused since I learned from 2 sources. I want to put most of my information in the CSS file and just use that for my html page, so it is nice and tidy. Do they want you to do that or just use the <style> tags instead.
Lazilifestyle
@lazilifestyle
May 01 2017 14:19
Hi guys im new to coding learning some front-end stuff right now
Yahia
@y-zaky
May 01 2017 14:34
@lazilifestyle hi ! welcome :)
Spyrantis Theodoros
@thodorisanta
May 01 2017 14:36

in my project if you choose two player game (cause 1 player game doesnt work yet) and some of the users win, i have a fadeIn that will show you exactly on top of the box, who's the player that plays next(the one who won), that will appear 4 seconds after someone wins. BUT! if you press "reset" on the top right corner before those 4 seconds pass. then you are moved to the first menu, but after those 4 seconds the message of who player plays first will still apear. how can i fix that? if you didnt understand something message me.

http://codepen.io/oshikurou/pen/RVRqLM

Yahia
@y-zaky
May 01 2017 14:45
hi guys
i am struggling to nest a "like" thumbs up icon within a button?
    <div class="col-xs-4">

      <i<button class="fa fa-thumbs-up btn btn-block btn-primary">Like</button></i>
    </div>
where am i going wron
alpox
@alpox
May 01 2017 14:46
@bowssy88 <i<button is no valid html
Yahia
@y-zaky
May 01 2017 14:47
@alpox hmm how would you do it
alpox
@alpox
May 01 2017 14:47
@bowssy88 you probably wanted <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button>
Johnathan Brown
@Legend28469
May 01 2017 14:47
@thodorisanta Setting your player2 class to hidden worked for me
Yahia
@y-zaky
May 01 2017 14:48
@alpox aha
so you just nest the word Like
Johnathan Brown
@Legend28469
May 01 2017 14:48
style: display: none
Yahia
@y-zaky
May 01 2017 14:48
thank you @alpox
CamperBot
@camperbot
May 01 2017 14:48
bowssy88 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 996 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
May 01 2017 14:48
@bowssy88 Hmm wait i don't know where you wanted the Like. This one will not show now. If you wanted a thumbsup followed by Like it would be:
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up" />Like</button>
Yahia
@y-zaky
May 01 2017 14:49
its the Add Font Awesome Icons to our Buttons challenge
@alpox no closing tag for the <i here>
? *
or is there no need
Spyrantis Theodoros
@thodorisanta
May 01 2017 14:50
@Legend28469 how? i already do that in the reset button in JS line 49
Johnathan Brown
@Legend28469
May 01 2017 14:50
Lemme check
tonytrrr
@tonytrrr
May 01 2017 14:56
having trouble using API, anyone here have sometime to help?
Johnathan Brown
@Legend28469
May 01 2017 14:58
@thodorisanta still looking at it. Just trying to isolate the problem
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:03
@Legend28469 i dont think that there is a code problem. i just need something like "when reset is clicked. eliminate every other on going project"
Johnathan Brown
@Legend28469
May 01 2017 15:06
That’s actually really strange that it still shows up
PreatzalGamer99
@PreatzalGamer99
May 01 2017 15:09
how do i space out a list
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:09
@Legend28469 i think its normal. cause it will show up in the given time. and reset just hides it the moment you press it
Johnathan Brown
@Legend28469
May 01 2017 15:10
Ahh
I see
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:11
@Legend28469 yeah i think i need something like .stop
Johnathan Brown
@Legend28469
May 01 2017 15:12
@thodorisanta Try hiding the div containing the elements instead
@thodorisanta http://imgur.com/a/bI4D5
In theory. Hiding the div should work
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:14
@Legend28469 but then i have to show the div again when needed. shouldnt i? i think that will make it more complex
Yahia
@y-zaky
May 01 2017 15:16
hi guys
im having trouble adding a paper plane icon to my submit button
the grammar is wrong but can't figure out where
    <button type="submit" class= "btn btn-primary"><i class="fa fa-paper-plane>Submit</i></button>
Johnathan Brown
@Legend28469
May 01 2017 15:17
@thodorisanta Got it
Lemme fork it and fix so you can compare
Yahia
@y-zaky
May 01 2017 15:17
how do you know where to put the <i? and </i> ?
Johnathan Brown
@Legend28469
May 01 2017 15:18
You need to close the class
Jason Luboff
@JLuboff
May 01 2017 15:18
@bowssy88 It should be <i class="fa fa-paper-plane"></i>Submit
Johnathan Brown
@Legend28469
May 01 2017 15:19

<i class="fa fa-paper-plane”>

What he said but

Jason Luboff
@JLuboff
May 01 2017 15:19
@Legend28469 Ya...missed a quote there...thanks lol
CamperBot
@camperbot
May 01 2017 15:19
jluboff sends brownie points to @legend28469 :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @legend28469 |http://www.freecodecamp.com/legend28469
Johnathan Brown
@Legend28469
May 01 2017 15:19
No worries
@thodorisanta The problem was in the code this whole time
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:20
@Legend28469 what was it?
You had conflicting code
if (playsFirst === player1) {
    //$(".player1").delay(4000).fadeIn(500);
  } else {
    //$(".player2").delay(4000).fadeIn(500);
  }
Commenting that out fixed it
Yahia
@y-zaky
May 01 2017 15:21
@JLuboff @Legend28469 thank you, how do you know where to put it? always after the first class?
CamperBot
@camperbot
May 01 2017 15:21
bowssy88 sends brownie points to @jluboff and @legend28469 :sparkles: :thumbsup: :sparkles:
:star2: 1660 | @jluboff |http://www.freecodecamp.com/jluboff
:cookie: 484 | @legend28469 |http://www.freecodecamp.com/legend28469
Johnathan Brown
@Legend28469
May 01 2017 15:22
It = the quote?
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:22
@Legend28469 but i need this code to show to the user that the person who won the previous round plays first :/ :P
Yahia
@y-zaky
May 01 2017 15:22
@Legend28469 = the icon
the <i
Jason Luboff
@JLuboff
May 01 2017 15:22
@bowssy88 Yes, that is how font-awesome works.
Yahia
@y-zaky
May 01 2017 15:23
i get confused as to where to put it, why can't it go just after the button
so <button<i and then close both later
if you see what i mean
Johnathan Brown
@Legend28469
May 01 2017 15:23
@thodorisanta Will have to change when it triggers
As of right now. It triggers after being told to hide. Which brings it back in
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:24
@Legend28469 thats cause this code says "show after 4 seconds" <-- we need to stop this part of code
Johnathan Brown
@Legend28469
May 01 2017 15:24
When do you want to show it? Out of curiousity
@thodorisanta
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:25
@Legend28469 when the new round starts
Johnathan Brown
@Legend28469
May 01 2017 15:25
For a little while?
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:25
@Legend28469 until the next move
Johnathan Brown
@Legend28469
May 01 2017 15:25
Ah I see
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:25
but when the user presses "reset" meaning to stop the game in the middle. i want to hide it
Johnathan Brown
@Legend28469
May 01 2017 15:26
Lol. It hides for me when the user presses it
When I
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:26
@Legend28469 presses what?
Johnathan Brown
@Legend28469
May 01 2017 15:27
When I press reset. The “player 1 or 2 GO!” div hides
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:27
@Legend28469 first win the game and then immediately press reset and see :)
Johnathan Brown
@Legend28469
May 01 2017 15:27
One sec
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:27
after the reset you get the message
while you shouldnt
Johnathan Brown
@Legend28469
May 01 2017 15:28
I don’t get the message
Until I start the game again
I was able to confuse it at one point and have it show both messages at the same time
But that’s likely an easy fix
It work?
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:31
@Legend28469 it still does it :P
just win the game and press reset fast
Johnathan Brown
@Legend28469
May 01 2017 15:32
@thodorisanta Let me get this right. So as soon as you win. Press reset right?
PreatzalGamer99
@PreatzalGamer99
May 01 2017 15:32
how do I edit list text
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:33
@Legend28469 yeah
press reset before the "who won" message fades out
Johnathan Brown
@Legend28469
May 01 2017 15:33
Ohhhhh
Lol
I had to wait for it to fade in
I gotcha
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:33
haha :P
Johnathan Brown
@Legend28469
May 01 2017 15:36
Should be an easy fix. We can just add an if after the delay. I’ll try it
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:36
i think we need something like .stop().fadeIn() or something in here
Johnathan Brown
@Legend28469
May 01 2017 15:37
Yeah because right now. It fades in no mattter what
So we can instead use setTimeout instead of delay
This way we can add a boolean to see if reset was pressed
@thodorisanta Fixed
Johnathan Brown
@Legend28469
May 01 2017 15:42
function checkReset() {
  if (playsFirst === player1) {
    $(".player1").delay(4000).fadeIn(500);
  } else {
    $(".player2").delay(4000).fadeIn(500);
  }

  if (resetPressed) {
     $(".player1").fadeIn(500);
     $(".player2").fadeIn(500);
     resetPressed = false;
  } else {
    setTimeout(checkReset, 1000); // check again in a second
  }
}
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:42
@Legend28469 try to win the game without pressing reset and see :P
Johnathan Brown
@Legend28469
May 01 2017 15:43
Oh. Right. That’ll be a problem
Lol
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:43
:)
Johnathan Brown
@Legend28469
May 01 2017 15:52
Making progress. It only messes up on the first playthrough now
Yahia
@y-zaky
May 01 2017 15:53
hi guys
I'm stuck on the creat bootstrap wells challenge
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">

    <div class="well">
    <div class=" col-xs-6">
      </div>

    </div>
    <div class=" col-xs-6">

    </div>
  </div>
</div>
can't figure out how to "Nest one div element with the class well within each of your col-xs-6 div elements."
Johnathan Brown
@Legend28469
May 01 2017 15:55
@thodorisanta Fixed for real this time
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:55
yayyy
Christopher McCormack
@cmccormack
May 01 2017 15:55
@bowssy88 Nesting something inside would mean that your well div would be between inside divs with the col- classes, not above
Johnathan Brown
@Legend28469
May 01 2017 15:55
My own implementation makes no sense to me. It shouldn’t work. But it does lol
Spyrantis Theodoros
@thodorisanta
May 01 2017 15:56
but i dont get the message when i win and dont press the reset button :(
Christopher McCormack
@cmccormack
May 01 2017 15:56
@Legend28469 Time to walk through slowly and add comments :)
Johnathan Brown
@Legend28469
May 01 2017 15:56
Lol. Not a bad idea
Oh. Just for the first click
Yahia
@y-zaky
May 01 2017 15:57
@cmccormack still not working?
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="well col-xs-6">

    </div>
    <div class=" col-xs-6">

    </div>
  </div>
</div>
Gulsvi
@gulsvi
May 01 2017 15:57
@bowssy88
    <div class="col-xs-6">
      <!-- Your well would go in here -->
    </div>
A div element with the class well looks like:
<div class="well"></div>
Yahia
@y-zaky
May 01 2017 15:59
@SkyCoder01 hmmmm still not working
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">

    <div class=" col-xs-6">
<div class="well"> 
      </div>
    </div>

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

    </div>
  </div>
</div>
Gulsvi
@gulsvi
May 01 2017 16:00
@bowssy88 "Nest one div element with the class well within each of your col-xs-6 div elements."
each of your col-xs-6 div elements
Yahia
@y-zaky
May 01 2017 16:01
@SkyCoder01 thank you for your patience!
CamperBot
@camperbot
May 01 2017 16:01
bowssy88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1236 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 01 2017 16:02
No patience required :p
Good job, now to the next challenge
Ayush Bahuguna
@relentless-coder
May 01 2017 16:03
Hey, is anyone in here good with angular 1.5?? I need help, I tried angular chat room, but haven't received a response since yesterday
Carlos García de Castro
@garciadecastro
May 01 2017 16:04
Hello everyone. I almost finished my portfolio, I wanted to know if anyone knows where you can post this project to be visible online? Thank you.
Gulsvi
@gulsvi
May 01 2017 16:05
@garciadecastro Github and Codepen are used a lot for publishing Free Code Camp front end projects.
Carlos García de Castro
@garciadecastro
May 01 2017 16:07
@SkyCoder01 I'm new to this and I did not know, thank you! I'm on it. :smile:
CamperBot
@camperbot
May 01 2017 16:08
garciadecastro sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1237 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@flawedLogic506
May 01 2017 16:08
hey guys, good morning
Gulsvi
@gulsvi
May 01 2017 16:11
Good morning, Jorge!
Jorge
@flawedLogic506
May 01 2017 16:12
whats happening sky .. all good?
you already collecting your cert? :D .. you are pretty close at the very least, right?
Johnathan Brown
@Legend28469
May 01 2017 16:14
@thodorisanta Lol. I think this is the one
Nvm
Not it
Gulsvi
@gulsvi
May 01 2017 16:16
@OrangeKulture All good! Sorry, stepped away :p
Johnathan Brown
@Legend28469
May 01 2017 16:17
@thodorisanta Got it and was able to simplify it too
Gulsvi
@gulsvi
May 01 2017 16:17
Probably not going to collect a cert until the beta releases, keep hearing a couple of months to go and I'm in no rush. Still lots to learn.
Jorge
@flawedLogic506
May 01 2017 16:17
no probs
ahh ok cool .. yeah makes sense
Johnathan Brown
@Legend28469
May 01 2017 16:17
@thodorisanta Using promises helped (promises enabled a then() feature) so you can do something and then when it’s done. Do something else
Jorge
@flawedLogic506
May 01 2017 16:17
you are not studying anything web dev related tho, right?
i mean in school
Gulsvi
@gulsvi
May 01 2017 16:18
Yeah, just linguistics and spanish now
Jorge
@flawedLogic506
May 01 2017 16:19
ahh that's nice .. i love languages, dunno why it;s kinda easy for me
Gulsvi
@gulsvi
May 01 2017 16:19
I started with chemistry, way too hard. Languages are easy for me too
Spyrantis Theodoros
@thodorisanta
May 01 2017 16:21
@Legend28469 what did you change in the code/
Jorge
@flawedLogic506
May 01 2017 16:21
i love organic chemistry .. really interesting, most of this stuff, i learn on my own
Johnathan Brown
@Legend28469
May 01 2017 16:21
$(".winner").delay(4000).fadeOut(500).promise().done(function() {
    //fade in the player who plays first(winner).
  if (!resetPressed) {
    if (playsFirst === player1) {
    $(".player1").fadeIn(500);
  } else {
    $(".player2").fadeIn(500);
  }
    resetPressed = false;
  }
Jorge
@flawedLogic506
May 01 2017 16:21
what made you wanna code then, Sky? just curiosity, or ...
Johnathan Brown
@Legend28469
May 01 2017 16:22
But um. I just realized I’ve reversed the problems now. When the game starts it doesn’t show who’s starting on reset
Spyrantis Theodoros
@thodorisanta
May 01 2017 16:23
@Legend28469 :P
its such a simple problem and so confused to solve it. do you know how to use the .stop ? cause it will propably be usefull here
Gulsvi
@gulsvi
May 01 2017 16:23
My roommate is a CS major, introduced me to FCC
Johnathan Brown
@Legend28469
May 01 2017 16:23
I haven’t looked into it
Jorge
@flawedLogic506
May 01 2017 16:24
ahh ok cool .. yeah, you may have mentioned that before, sry .. still a little hung over :S
Gulsvi
@gulsvi
May 01 2017 16:24
haha, weekends are fun :)
Jorge
@flawedLogic506
May 01 2017 16:25
yeah .. today is a holiday here, so yesterday was pretty active for a Sunday
Johnathan Brown
@Legend28469
May 01 2017 16:25
@thodorisanta You won’t need it
It’s perfect now
I had to add another check on the reset button
Same link
Gulsvi
@gulsvi
May 01 2017 16:27
Happy May Day :)
Spyrantis Theodoros
@thodorisanta
May 01 2017 16:27
@Legend28469 okay thanks :)
CamperBot
@camperbot
May 01 2017 16:27
thodorisanta sends brownie points to @legend28469 :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @legend28469 |http://www.freecodecamp.com/legend28469
Johnathan Brown
@Legend28469
May 01 2017 16:27

Here’s the logic

If the reset button is pressed then don’t show.
Otherwise show it after the game is rendered (which is the promise part)

Set the reset check to false after each game to ensure the next game starts with it on. No problem =D

Jorge
@flawedLogic506
May 01 2017 16:28
haha thanks! yeh it's our Work Day ..
man .. dunno why the twitch streamer cretetion has such an awful logo
also .. i've seen it before and it's happening for me, if you re direct from codepen to freecodecamps twitch channel, it never loads ... has anyone experienced this as well ?
Gulsvi
@gulsvi
May 01 2017 16:33
Yeah, I don't have cretetion in my app
You can't link to a twitch channel from inside an iFrame. A security policy on their site I think
Eduar Tua
@eduartua
May 01 2017 16:35
Hi felas
Jorge
@flawedLogic506
May 01 2017 16:35
ohh right .. yeah i was reading about it late last night, thanks! ill see what's up with that
Eduar Tua
@eduartua
May 01 2017 16:35
for those who are not in Canada and US Happy International Workers' Day
Jorge
@flawedLogic506
May 01 2017 16:35
hey whats happening Eduar
Eduar Tua
@eduartua
May 01 2017 16:36
I'll start with the API section, yesterday I finished the basic algorithm challenge
Jorge
@flawedLogic506
May 01 2017 16:38
thanks, happy work day for you too
Eduar Tua
@eduartua
May 01 2017 16:39
thanks @OrangeKulture
CamperBot
@camperbot
May 01 2017 16:39
eduartua sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @orangekulture |http://www.freecodecamp.com/orangekulture
alpox
@alpox
May 01 2017 16:39
I automated my tictactoe for that it plays against itself: http://codepen.io/alpox/pen/XRRopw?editors=0100
Thats fun :D
Johnathan Brown
@Legend28469
May 01 2017 16:41
That’s amazing
Yahia
@y-zaky
May 01 2017 16:43
hi guys
im struggling to know how add elements within elements
i keep getting the grammar wrong

Above your left-well, inside its col-xs-6 div element, add a h4 element with the text #left-well.

Above your right-well, inside its col-xs-6 div element, add a h4 element with the text #right-well.

```
<div class="col-xs-6"><h4>#left-well</h4>

  <div class="well" id="left-well">
    <button class="btn btn-default target"></button>
    <button class="btn btn-default target"></button>
    <button class="btn btn-default target"></button>
  </div>
</div>
<div class="col-xs-6">

  <div class="well" id="right-well"><h4>#right-well</h4>

    ```
whats the right way to do it?
alpox
@alpox
May 01 2017 16:46
@bowssy88 They wanted you to put the h4 one line down of where you put it
In the empty line
Yahia
@y-zaky
May 01 2017 16:47
@alpox why?
still doesn't work
````
<div class="col-xs-6">
  <h4>#left-well</h4>

  <div class="well" id="left-well">
    <button class="btn btn-default target"></button>
    <button class="btn btn-default target"></button>
    <button class="btn btn-default target"></button>
  </div>
</div>
<div class="col-xs-6">

  <div class="well" id="right-well">
    <h4>#right-well</h4>

 ````
Mamun Abdullah
@thetradecoder
May 01 2017 16:48
add the requirements between opening and closing div for each time, then gp for another div @bowssy88
alpox
@alpox
May 01 2017 16:48
@bowssy88 Looks right now for the left well, but wrong for the right well
Yahia
@y-zaky
May 01 2017 16:48
@fsdmamun how do you know the correct way to put it within the opening and closing div? this is where i struggle
Mamun Abdullah
@thetradecoder
May 01 2017 16:49
<div> here your h4 </div>
Gulsvi
@gulsvi
May 01 2017 16:50
Nice work @alpox !!
Mamun Abdullah
@thetradecoder
May 01 2017 16:51
hi sky
Yahia
@y-zaky
May 01 2017 16:51
thanks @fsdmamun @alpox
CamperBot
@camperbot
May 01 2017 16:51
bowssy88 sends brownie points to @fsdmamun and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 997 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 355 | @fsdmamun |http://www.freecodecamp.com/fsdmamun
alpox
@alpox
May 01 2017 16:51
@SkyCoder01 Hi there, and thanks :D
CamperBot
@camperbot
May 01 2017 16:51
alpox sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1238 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Yahia
@y-zaky
May 01 2017 16:51
don't you all get confused with the amount of divs that appear on one page ? @alpox @alpox @fsdmamun @SkyCoder01
i get lost when i try and work out what divs are for what
alpox
@alpox
May 01 2017 16:52
@SkyCoder01 I just put there some tweaks around my normal tictactoe - not really good code - to just make it do that :D
Yahia
@y-zaky
May 01 2017 16:52
is there a way the system simplifies it?
Mamun Abdullah
@thetradecoder
May 01 2017 16:52
if you get confused, always use comment which is closing
Gulsvi
@gulsvi
May 01 2017 16:52
@bowssy88 It gets easier. You should notice that a <div> without a closing </div> will be higlighted in your code editor.
Garo
@Garabed96
May 01 2017 16:52
@SkyCoder01 thank you I was stuck on that for an amount of time that was making me senile
CamperBot
@camperbot
May 01 2017 16:52
garabed96 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1239 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 01 2017 16:53
@Garabed96 Glad you got it working :)
alpox
@alpox
May 01 2017 16:53
@bowssy88 Later, on bigger projects, you make use of modularization, namely components, which increases the readability and flexibility of the whole design
Gulsvi
@gulsvi
May 01 2017 16:53
@alpox It's really cool to watch! How long have you let it run for? Is it always a draw?
alpox
@alpox
May 01 2017 16:53
@SkyCoder01 I let it run up to 200 before
Its always draw
Yahia
@y-zaky
May 01 2017 16:54
@alpox @SkyCoder01 great cheers
Works faster now :D
I increased the speed
Gulsvi
@gulsvi
May 01 2017 17:00
Nice :)
Very cool!
Gulsvi
@gulsvi
May 01 2017 17:08
@alpox Next project, machine learning :) https://github.com/harthur-org/brain.js
guys to access this with json can I do $(".weather").html(data.temperature);
for getting the current weather or something like $(".weather").html(data[currently].temperature);
Chris
@bestintown23
May 01 2017 17:15
how to adjust contrast to a background image?
alpox
@alpox
May 01 2017 17:16
@SkyCoder01 http://codepen.io/alpox/pen/XRRopw?editors=0110 now you can adjust the speed
@SkyCoder01 Nice projects :D
Gulsvi
@gulsvi
May 01 2017 17:22
@Garabed96 That API returns a few different datapoints by default. currently and forecasts for minutely, hourly, and daily. https://darksky.net/dev/docs/response#data-point
So, if you want the current temperature, it should be something like: data.currently.temperature. You can make the object a little easier to navigate by excluding some of the data points you don't want. https://darksky.net/dev/docs/forecast
caseym94
@caseym94
May 01 2017 17:25
hello
Garo
@Garabed96
May 01 2017 17:25
@SkyCoder01 thanks, I have to grab that anyways, put it into a variable then set it in a jquery
CamperBot
@camperbot
May 01 2017 17:25
garabed96 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: garabed96 already gave skycoder01 points
caseym94
@caseym94
May 01 2017 17:25
I want to grab dynamic images from google to load on my webpage, what should I learn?
Garo
@Garabed96
May 01 2017 17:25
I was looking at my random quote generator so I thought it was [] for some reason instead of .
Gulsvi
@gulsvi
May 01 2017 17:29
@caseym94 There's the custom search API: https://developers.google.com/custom-search/
But if you want random images and don't care about the source - Unsplash is going to be easier to use and won't have a 100-search/day limit.
Anthony
@jawaka72
May 01 2017 17:40

Hey, I'm having trouble with my Twitchtv project. xhr only logs objects with values from the final element of my forEach loop, and I need each object to be an element of that loop. I've tried several
things, but can't figure this out. Here's my code:

var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var urlChannels = 'https://wind-bow.glitch.me/twitch-api/channels/';
var newChannels;

var xhr = new XMLHttpRequest();

channels.forEach(function(c) {
  newChannels = urlChannels + c
  // console.log(newChannels);
  xhr.open('GET', newChannels);
  console.log(xhr);
  });

I hope my explanation makes sense. Any help is much appreciated.

alpox
@alpox
May 01 2017 17:45
@jawaka72 Using plain XMLHttpRequests is maybe too advanced for the beginning to use on this project.
@jawaka72 You reuse the same XMLHttpRequest there for all the channels - but you would need a new one for each of them
Anthony
@jawaka72
May 01 2017 17:48
@alpox I know. I wasn't sure if you could use the same xhr for multiple urls, so I tried it and it hasn't worked out. I really want to learn just JS. I know it's a lot harder, but I also don't want to be dependent on a library.
So, essentially, I would have to create new xhrs for each url, if I were to do it with vanilla JS?
Gulsvi
@gulsvi
May 01 2017 17:50
@jawaka72 It will be easier to use Fetch() if you want to use vanilla JS
alpox
@alpox
May 01 2017 17:50
@jawaka72 You will be using libraries all time. Also, there is the new fetch API as vanilla JS requests which is based on promises:
fetch(url)
    .then(res => res.json())
    .then(data => {
        // Do something with data
    });
Anthony
@jawaka72
May 01 2017 17:50
Awesome. Time to learn something new. Thanks @SkyCoder01 and @alpox
CamperBot
@camperbot
May 01 2017 17:50
jawaka72 sends brownie points to @skycoder01 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 998 | @alpox |http://www.freecodecamp.com/alpox
:star2: 1240 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 01 2017 17:51
^^ Otherwise, you'd have to do something like: http://stackoverflow.com/questions/30008114/how-do-i-promisify-native-xhr
alpox
@alpox
May 01 2017 17:51
Yup, its arkward
@jawaka72 You will almost never have to write xhr requests yourself. And if you would have to, it would look about like this - which is not nice:
function makeRequest (opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    // We'll need to stringify if we've been given an object
    // If we have a string, this is skipped.
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}
D'oh same link
Anthony
@jawaka72
May 01 2017 17:54
Yea, I know vanilla JS can be verbose. I just want some deeper knowledge of the language.
Jorge
@flawedLogic506
May 01 2017 17:55
so there is no way to redirect to FCC twitch channel without going in debug mode?
Gulsvi
@gulsvi
May 01 2017 17:55
by "redirect", do you mean open a link to a Twitch Channel in a new tab?
alpox
@alpox
May 01 2017 17:56
@OrangeKulture If you want it to open in a new tab you can use target="_blank" as html attribute on the link
Jorge
@flawedLogic506
May 01 2017 17:56
yeah
no i mean for it to load ..
alpox
@alpox
May 01 2017 17:56
@OrangeKulture Load in what matter?
Gulsvi
@gulsvi
May 01 2017 17:56
Yeah, no way to do that with Twitch.
Look at all the other Twitch projects in codepen edit or full view and they'll fail to do it as well
alpox
@alpox
May 01 2017 17:57
Ah that was the iframe matter which twitch doesn't allow
Jorge
@flawedLogic506
May 01 2017 17:58
@alpox yeap .. sorry, forgot to mention that
Gulsvi
@gulsvi
May 01 2017 17:59
Twitch still uses flash - they will be all HTML5 soon and it will likely start working again
Jorge
@flawedLogic506
May 01 2017 17:59
@SkyCoder01 right .. allright, yeah, guess we can still show it in debug and itll be fine
Gulsvi
@gulsvi
May 01 2017 17:59
Or host it on github
Eduar Tua
@eduartua
May 01 2017 17:59
Guys, I reach the Build a Random Quote Machine. Do I have enough information to build that?
Gulsvi
@gulsvi
May 01 2017 17:59
Yes :)
Eduar Tua
@eduartua
May 01 2017 18:00
I mean, the material covered so far is enough?
that seems pretty hard, it says that I have to twit the quote (bonus) How the hell i'll do that?
Gulsvi
@gulsvi
May 01 2017 18:00
You learned the basics of accessing JSON properties, the getJSON method, and converting JSON data to HTML.
Should be enough to start reading more, learning more, and knowing what kinds of questions to ask here when you get stuck.
Eduar Tua
@eduartua
May 01 2017 18:01
Where are the quotes?
Gulsvi
@gulsvi
May 01 2017 18:01
Google :)
Lots and lots of quotes APIs out there
This one is used a lot: https://quotesondesign.com/api-v4-0/
Jorge
@flawedLogic506
May 01 2017 18:02
you guys wanna check it out? Went for a minimal theme, kinda going with the logo Twitch APP
still needs some debugging .. the closed accounts and what not
Eduar Tua
@eduartua
May 01 2017 18:03
I'll check it out. Thank you @SkyCoder01
CamperBot
@camperbot
May 01 2017 18:03
:star2: 1241 | @skycoder01 |http://www.freecodecamp.com/skycoder01
eduartua sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
May 01 2017 18:03
@OrangeKulture Nice work :)
Eduar Tua
@eduartua
May 01 2017 18:04
@SkyCoder01 You meant, I shouldn't ask that here right?
Gulsvi
@gulsvi
May 01 2017 18:04
@eduartua No, not at all :) you asked where the quotes are, and I said that they're on Google
Jorge
@flawedLogic506
May 01 2017 18:04
@SkyCoder01 thanks!
CamperBot
@camperbot
May 01 2017 18:04
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1242 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Eduar Tua
@eduartua
May 01 2017 18:05
Thanks you @SkyCoder01
CamperBot
@camperbot
May 01 2017 18:05
eduartua sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: eduartua already gave skycoder01 points
Gulsvi
@gulsvi
May 01 2017 18:05
@eduartua There are lots of quotes apis out there if you want to use a different one than most other people. I didn't use a quote API, I just got random jokes off of reddit.com
Eduar Tua
@eduartua
May 01 2017 18:06
Lol that is creative @SkyCoder01
Gulsvi
@gulsvi
May 01 2017 18:06
They had an easier API lol
So, kind of lazy too :p
Eduar Tua
@eduartua
May 01 2017 18:07
Going reddit and check their API for integration is not laziness
@SkyCoder01
Buhaianu Remus
@Remus432
May 01 2017 18:07
guys can somebody help me with a problem?
it's about javascript
Gulsvi
@gulsvi
May 01 2017 18:09
@Remus432 we can try
Buhaianu Remus
@Remus432
May 01 2017 18:09
yeah I was practicing on js and I tried making a bookmarking program
the code must be run on a local machine
after you add the name of the website and the url and you click submit you should get below the page with the options to visit it and delete it from the bookmarks
the problem is that it doesn't show up and if I go to the localstorage
the values don't change
if you enter let's say google and the url to google and enter it
in the localstorage files you can see it
if you add another page then the localstorage files don't change
it's still the first page
it doesn't add another page
only the first one you entered is added
need help
Sandesh Shrestha
@UnovaXan
May 01 2017 18:30
@PreatzalGamer99 what are you having problem with?
Markus Ivancsics
@ivancsicsmarkus
May 01 2017 18:36
@PreatzalGamer99 I would be happy if I could help you. What is the problem?
PreatzalGamer99
@PreatzalGamer99
May 01 2017 19:00
idk
how do I center the buttons
Gulsvi
@gulsvi
May 01 2017 19:06
@PreatzalGamer99 Center buttons the same way you would center an image. Use the center-block class on the button, or text-center on the parent element.
PreatzalGamer99
@PreatzalGamer99
May 01 2017 19:07
thanks
Gulsvi
@gulsvi
May 01 2017 19:07
<div class="text-center">
  <a class="btn btn-secondary" href="https://www.google.com" target="_blank">Google</a>
</div>
Always use the <a> tag and style it like a button if you're linking to another web page
In bootstrap 4, center-block was changed to d-block mx-auto
Chris Rutherford
@cjrutherford
May 01 2017 19:39
is anyone here familiar with Angular 1x?
Humberto Villarino
@HumbertoVillarino
May 01 2017 19:45
I'm working with the Tribute Page project
But when I try to upload the image, Code Pen says that I need to upgrade to CodePenPro, because it's allowed to upload only text files to the project.
Does anyone know if it's ok that I need to upgrade my account?
Eduar Tua
@eduartua
May 01 2017 19:48
just use http://postimage.io @HumbertoVillarino
Garo
@Garabed96
May 01 2017 19:49
we can copy paste code from https://www.w3schools.com/howto/howto_css_switch.asp right?
or does that mess with integrity?
Humberto Villarino
@HumbertoVillarino
May 01 2017 19:50
Thanks @eduartua
CamperBot
@camperbot
May 01 2017 19:50
humbertovillarino sends brownie points to @eduartua :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @eduartua |http://www.freecodecamp.com/eduartua
Eduar Tua
@eduartua
May 01 2017 19:55
you are welcome @HumbertoVillarino
Dan Sack
@DanPete
May 01 2017 20:17

I am trying to access the weather.main in open weather api, but is seems to be in an array or something. so far I have

      $.ajax({
    url: url + lat + "&lon=" + lon + "&units=metric&appid=" + weatherAPI,
    // contentType:"application/json; charset=utf-8",
    success: function(data) {
      $("#temperature").text(data.main.temp + " C");
      $("#location").text(data.name + ", " + data.sys.country);
      $("#clouds").text(data.weather);
    }
});

but it just shows up as [object Object]
here is the json:

{"coord":{"lon":19.03,"lat":47.53},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":287.15,"pressure":1014,"humidity":76,"temp_min":287.15,"temp_max":287.15},"visibility":10000,"wind":{"speed":1.5},"clouds":{"all":75},"dt":1493667000,"sys":{"type":1,"id":5724,"message":0.0146,"country":"HU","sunrise":1493609139,"sunset":1493661418},"id":7284843,"name":"Budapest II. keruelet","cod":200}

and when I try

$("#clouds").text(data.weather.main);

nothing shows up

Gulsvi
@gulsvi
May 01 2017 20:18
@DanPete weather is an array []
Dan Sack
@DanPete
May 01 2017 20:18
@SkyCoder01 So how do I access it?
Gulsvi
@gulsvi
May 01 2017 20:19
@DanPete The same way you would access the number 1 in this array:
var array = [1];
(sorry for being a little unclear, trying not to give away the answer directly)
Dan Sack
@DanPete
May 01 2017 20:20
@SkyCoder01 Ah, perfect
 $("#clouds").text(data.weather[0].main);
is this a little hacky, or an okay way to do it?
Gulsvi
@gulsvi
May 01 2017 20:20
Perfect way to do it
Dan Sack
@DanPete
May 01 2017 20:20
@SkyCoder01 Awesome, thanks!
CamperBot
@camperbot
May 01 2017 20:20
danpete sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1244 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Eduar Tua
@eduartua
May 01 2017 20:42
Guys how can I fit that background to the hole screen size?
https://codepen.io/eduar/pen/YVVbmd
I meant whole
Eduar Tua
@eduartua
May 01 2017 20:48
Need some help on this
Gulsvi
@gulsvi
May 01 2017 20:48
@eduartua I think you're looking to do something like this?
body {
  background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  min-height: 100vh;
}
Actually, looks like you don't need quite that much... *edit*
Eduar Tua
@eduartua
May 01 2017 20:50
Yes, that was what I was looking for, thank you @SkyCoder01
CamperBot
@camperbot
May 01 2017 20:50
eduartua sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1245 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 01 2017 20:51
Got rid of a couple of properties that weren't needed, but happy to help :)
Arezohayeman
@Arezohayeman
May 01 2017 20:51
A
Eduar Tua
@eduartua
May 01 2017 21:03
Thank you @SkyCoder01
CamperBot
@camperbot
May 01 2017 21:03
eduartua sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: eduartua already gave skycoder01 points
Eduar Tua
@eduartua
May 01 2017 21:54
I am applying border-radius to a button but it does not work. What can be the problem?
Keon Samuel
@keonsam
May 01 2017 22:01
post pen.
Eduar Tua
@eduartua
May 01 2017 22:02
I got it. I was adding the css style to the parent div.
Keon Samuel
@keonsam
May 01 2017 22:02
you can add css directly to a button.
Eduar Tua
@eduartua
May 01 2017 22:02
Yes, that was what I did
thank you @keonsam
CamperBot
@camperbot
May 01 2017 22:03
eduartua sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @keonsam |http://www.freecodecamp.com/keonsam
Aaron Peck
@apeck14
May 01 2017 22:19
@SkyCoder01 Can you help me, please?
Or @keonsam ?
I just have a quick question
Eduar Tua
@eduartua
May 01 2017 22:20
What's the problem @apeck14
?
My textboxes arent logging there value to the console
Well they are, but not on the first input. I have no idea why
Just try typing something in the first box and look at the console, thats what Im talking about
Do you know why?
Eduar Tua
@eduartua
May 01 2017 22:24
Let me check it!
Aaron Peck
@apeck14
May 01 2017 22:31
@eduartua Nevermind, I have to use onkeyup instead of onkeydown
Eduar Tua
@eduartua
May 01 2017 22:32
did you fix it? Sorry I didn't answer rapidly
Gulsvi
@gulsvi
May 01 2017 22:48
@apeck14 You should use javascript to bind onkeyup rather than adding it as a property to the element. Did you get the rest figured out?
Aaron Peck
@apeck14
May 01 2017 22:50
@SkyCoder01 Wait, what?
bind?
Gulsvi
@gulsvi
May 01 2017 22:50
@apeck14 addEventListener()
Aaron Peck
@apeck14
May 01 2017 22:51
What does that do?
Gulsvi
@gulsvi
May 01 2017 22:51
It "binds" an event to an element. Instead of this:
<div id="myDiv" onclick="myFunction()"></div>
Aaron Peck
@apeck14
May 01 2017 22:52
Im using onkeyup is that fine?
Gulsvi
@gulsvi
May 01 2017 22:52
do:
document.getElementById('myDiv').addEventListener('click', function() ....
Aaron Peck
@apeck14
May 01 2017 22:52
Why click?
Gulsvi
@gulsvi
May 01 2017 22:52
onkeyup, onkeydown, onclick, onload... they're all events
Aaron Peck
@apeck14
May 01 2017 22:52
Ok
ty
Gulsvi
@gulsvi
May 01 2017 22:53
you "bind" them to an element when you want something to happen when an event fires for that element
Aaron Peck
@apeck14
May 01 2017 22:54
@SkyCoder01 Do I have it set up correctly?
Gulsvi
@gulsvi
May 01 2017 22:56

With this HTML:

  <input id="h1" name="gradeInput" onkeyup="validate('1')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H1"/>
  <input id="h2" name="gradeInput" onkeyup="validate('2')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H2"/>
  <input id="h3" name="gradeInput" onkeyup="validate('3')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H3"/>
  <input id="h4" name="gradeInput" onkeyup="validate('4')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H4"/>
  <input id="h5" name="gradeInput" onkeyup="validate('5')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H5"/>
  <input id="h6" name="gradeInput" onkeyup="validate('6')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H6"/>
  <input id="h7" name="gradeInput" onkeyup="validate('7')" type="text" maxlength="2" style="text-transform:uppercase" placeholder="H7"/>

All the onkeyup attributes should be handled in your JavaScript and all the style attributes should be in your CSS

I don't think you need a name attribute either - not sure what your intention is for that
Aaron Peck
@apeck14
May 01 2017 22:56
@SkyCoder01 Alright I'll change it
@SkyCoder01 How did you get so good at coding?
I'd do whatever it takes to be like you
Gulsvi
@gulsvi
May 01 2017 22:59
I just study here at Free Code Camp and help people in chat. Still a noob with many things
Aaron Peck
@apeck14
May 01 2017 23:00
Are you done with the FCC course?
Gulsvi
@gulsvi
May 01 2017 23:00
Keep practicing stuff like this - you'll learn with every project, and hey, we get GPAs in college too :)
I decided to wait for the Beta Free Code Camp to finish.
Aaron Peck
@apeck14
May 01 2017 23:01
Ah gotcha, I'm on backend and I decided to take a break and work on some side projects that interest me more
For the time being
Gulsvi
@gulsvi
May 01 2017 23:02
Looks like you just have to finish Simon?
Aaron Peck
@apeck14
May 01 2017 23:02
Yah, and like two algorithms
I skipped Data Vis. as well
It doesnt look finished yet, so I was like fuck it
Gulsvi
@gulsvi
May 01 2017 23:03
And meet your user stories for the ones you've finished :)
Aaron Peck
@apeck14
May 01 2017 23:03
I didnt?
Gulsvi
@gulsvi
May 01 2017 23:03
It's more about learning the JS though
Aaron Peck
@apeck14
May 01 2017 23:03
Which ones didnt I meet the user stories?
I might not have updated the codepen link if so
Gulsvi
@gulsvi
May 01 2017 23:04
Pomodoro, I can stop it and restart it
Calculator has floating point arithmetic issues
Aaron Peck
@apeck14
May 01 2017 23:05
Oh yah, I couldnt figure it out so I gave up on the calc
And for the clock, I must've missed that. I'll go back and fix that
Gulsvi
@gulsvi
May 01 2017 23:05
Twitch doesn't show placeholder images for non-existent accounts
Aaron Peck
@apeck14
May 01 2017 23:06
Your killing me man :')
Keon Samuel
@keonsam
May 01 2017 23:06
lol
Gulsvi
@gulsvi
May 01 2017 23:06
@apeck14 Lol, sorry :/
Keon is guilty of that too haha
Eduar Tua
@eduartua
May 01 2017 23:06
Lol, that is good!
Keon Samuel
@keonsam
May 01 2017 23:06
how far are you? @apeck14
Aaron Peck
@apeck14
May 01 2017 23:06
It's ok, constructive critisicm is good :)
@keonsam back-end
almost
Eduar Tua
@eduartua
May 01 2017 23:06
So you have work to finish @apeck14
Keon Samuel
@keonsam
May 01 2017 23:07
you finished data vis?
Aaron Peck
@apeck14
May 01 2017 23:07
@eduartua Yes, I'm working on side projects for a little bit
Gulsvi
@gulsvi
May 01 2017 23:07
You did do a very good job on them - almost finished :)
Eduar Tua
@eduartua
May 01 2017 23:07
That is OK
Aaron Peck
@apeck14
May 01 2017 23:07
@keonsam No its not finished
@SkyCoder01 Ty:)
CamperBot
@camperbot
May 01 2017 23:07
apeck14 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1247 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Eduar Tua
@eduartua
May 01 2017 23:08
I am in the intermediate algorithm challenges
a little far
Aaron Peck
@apeck14
May 01 2017 23:08
Nice! Keep going
Im 15, I'm hoping to get a summer internship from completing FCC next year
Dan Sack
@DanPete
May 01 2017 23:11
@SkyCoder01 What is Beta Free Code Camp? Are they going to release a new curriculum or something?
Aaron Peck
@apeck14
May 01 2017 23:11
beta.freecodecamp.com
Gulsvi
@gulsvi
May 01 2017 23:11
@DanPete Yeah, it seems like it's close to being finished. https://beta.freecodecamp.com
The current courses are a couple of years old
Keon Samuel
@keonsam
May 01 2017 23:12
about @apeck14
CamperBot
@camperbot
May 01 2017 23:12
:cookie: 301 | @apeck14 |http://www.freecodecamp.com/apeck14
Aaron Peck
@apeck14
May 01 2017 23:12
@SkyCoder01 Is bind() === .addEventListener()?
Dan Sack
@DanPete
May 01 2017 23:12
Oh interesting, I'll have to check it out. So is a lot of this outdated then?
Aaron Peck
@apeck14
May 01 2017 23:12
@keonsam What?
Keon Samuel
@keonsam
May 01 2017 23:13
you're jumping all over the place.
Aaron Peck
@apeck14
May 01 2017 23:13
wdym
Keon Samuel
@keonsam
May 01 2017 23:13
what?
Aaron Peck
@apeck14
May 01 2017 23:14
Sorry I'm confused what your getting at, lol
Gulsvi
@gulsvi
May 01 2017 23:14
@apeck14 yeah, I think bind() is very similar. Don't know the exact differences
Keon Samuel
@keonsam
May 01 2017 23:14
you can't walk before you creep.
Aaron Peck
@apeck14
May 01 2017 23:14
Ok, is there a better way to do it with jQuery?
@keonsam ?
Gulsvi
@gulsvi
May 01 2017 23:15
.on() or .one() with jQuery. There's also a .bind() method in jQuery
But I think .bind() is now obsolete in jQuery, I don't use it
Aaron Peck
@apeck14
May 01 2017 23:15
Ok, so it would like .on("keyup", ...)?
Gulsvi
@gulsvi
May 01 2017 23:15
^^ Yep, exactly
Aaron Peck
@apeck14
May 01 2017 23:15
Ok coolio
@SkyCoder01 Also:
In this case, is e representing the input?
$("#h1").on("keyup", function(e){});
Gulsvi
@gulsvi
May 01 2017 23:17
e represents the event
Ben Carp
@carpben
May 01 2017 23:17
Hi, I'm trying to create a 'Tab Space' in html. I know there is no tab char, but also &emsp doesn't work, maybe because I'm using template literals.
Aaron Peck
@apeck14
May 01 2017 23:17
So I dont need a parameter then?
Paradox5
@Paradox5
May 01 2017 23:17
E represents the event
Gulsvi
@gulsvi
May 01 2017 23:18

Open your browser's debug console and do:

$("#h1").on("keyup", function(e){
  console.log(e);
});

Look at the object that gets logged - tons of data about what happened when you keyed up

Aaron Peck
@apeck14
May 01 2017 23:18
Ok will do
Ben Carp
@carpben
May 01 2017 23:18
Hi, I'm trying to create a 'Tab Space' in html. I know there is no tab char, but also &emsp doesn't work, maybe because I'm using template literals. Any suggestions?
Aaron Peck
@apeck14
May 01 2017 23:18
@SkyCoder01 its an error :')
"too much data"
Gulsvi
@gulsvi
May 01 2017 23:19
Your browser's console, not codepen :)
But yeah, it's a lot of data
Aaron Peck
@apeck14
May 01 2017 23:19
It doesnt read jquery does it?
Anyways, do I need a parameter then?
Gulsvi
@gulsvi
May 01 2017 23:20
It depends on what you want to do, but usually no
Aaron Peck
@apeck14
May 01 2017 23:21
Ok ty
Gulsvi
@gulsvi
May 01 2017 23:21
If you use ES6, for example, you need it because the this keyword won't work
$("#h1").on("click", e => {
  $(e.target).css('color', 'blue')
});
instead of:
$("#h1").on("click", function() {
  $(this).css('color', 'blue')
});
Aaron Peck
@apeck14
May 01 2017 23:22
Alright ty
Ill see what I can do :)
I still don't understand how I would prevent the input from being inputted though, if its a number.
$("#h1").on("keyup", function(){
    if(isNaN($("#h1").val()) === false){

    }
});
@SkyCoder01
I've seen preventDefault on stackoverflow, not really sure though
Gulsvi
@gulsvi
May 01 2017 23:26
@apeck14 You can use a regExp to make sure it's a number and then return if it is not.
I'm dealing with that headache with my calculator now...
Aaron Peck
@apeck14
May 01 2017 23:27
But wont that still display the input?
Like if they type a "3", the 3 will show up
And can I see your calc?
Gulsvi
@gulsvi
May 01 2017 23:28
It's not even close to done, but the UI is finished for the most part: http://codepen.io/skycoder/pen/XRXJJP?editors=0010
Aaron Peck
@apeck14
May 01 2017 23:29
babel?
:')
Thats a sick calculator, though. Nice work!
Gulsvi
@gulsvi
May 01 2017 23:30
because I use ES6, so it transpiles to ES5 for older browsers
Thx
Aaron Peck
@apeck14
May 01 2017 23:34
Wait, when is the beta not going to be a beta anymore? Like when will it be released?
Keon Samuel
@keonsam
May 01 2017 23:37
@SkyCoder01 you should be sending your free time on thots not programming.
Gulsvi
@gulsvi
May 01 2017 23:38
lol
Keon Samuel
@keonsam
May 01 2017 23:39
hell I wish I was in university.
Gulsvi
@gulsvi
May 01 2017 23:40
:)
Any idea why this gives me a capital letter?
$('#myInput').on('keydown', function(e) {
  console.log(String.fromCharCode(e.keyCode))
});
Aaron Peck
@apeck14
May 01 2017 23:41
Just .toLowerCase() it
Gulsvi
@gulsvi
May 01 2017 23:41
nvm, I have to use keypress
$('#myInput').on('keypress', function(e) {
  const keyPressed = String.fromCharCode(e.keyCode);
  if(!/[0-9]/.test(keyPressed)) e.preventDefault();
});
to only allow numbers ^^
Aaron Peck
@apeck14
May 01 2017 23:46
Doesnt this work the same?
$("#h1").on("keyup", function(){
    for(var i = 0; i< $("#h1").val().length; i++){
        if(isNaN($("#h1").val()[i]) === false){
            $("#h1").val("");
        }
    }
});
Gulsvi
@gulsvi
May 01 2017 23:46
though probably better not to use regEx and just look at charcodes
You end up blanking out the entire value. My code prevents it from being entered
Aaron Peck
@apeck14
May 01 2017 23:47
Ok I will try yours
Gulsvi
@gulsvi
May 01 2017 23:47
You probably just want numbers and decimals?
Aaron Peck
@apeck14
May 01 2017 23:47
Letters
and "-"
It works!
Thanks @SkyCoder01
CamperBot
@camperbot
May 01 2017 23:48
apeck14 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: apeck14 already gave skycoder01 points
Aaron Peck
@apeck14
May 01 2017 23:49
!/[a-z]/ how do I get that to be letters and "-"
Gulsvi
@gulsvi
May 01 2017 23:50
Do it this way:
$('#myInput').on('keypress', function(e) {
  if(e.keyCode > 57) e.preventDefault();
});
that way you can also use backspace and other command keys
You'll always get someone right-click pasting some crap in tho
Aaron Peck
@apeck14
May 01 2017 23:51
Alright awesone
Gulsvi
@gulsvi
May 01 2017 23:51
so many things to check for...
Aaron Peck
@apeck14
May 01 2017 23:51
It doesnt work now :')
Gulsvi
@gulsvi
May 01 2017 23:52
Sorry, you want letters, not numbers...
Aaron Peck
@apeck14
May 01 2017 23:53
ty