These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Aug 2017
Liam Docherty
@ldocherty1
Aug 20 2017 00:32
Anyone got any good links for a Microsoft document which is a front-end web developer CV template?
Pagnito
@Pagnito
Aug 20 2017 00:52
whats the point of using css loaders in webpack?
Bryan Jay B. Panesa
@bryanpanesa
Aug 20 2017 00:54
@virtualhandshake you're welcome
Joseph Davidson
@jojacino
Aug 20 2017 01:00
Webpack is BOSS
The CSS loaders help with SASS and such
to convert your pack to CSS
Webpack allows multiple small files to be used as one large file
But it can't translate without the loaders
Hope that helps
Pagnito
@Pagnito
Aug 20 2017 02:32
anyone familiar with webpack?
@jojacino hey man
im havvn a problem and im stumped

1 | body {
| ^
2 | background-color: #e8eaed;
3 | }
4 |

@ ./src/index.js 3:0-31
webpack: Failed to compile.

```
module: {
      rules: [
        {
          use: 'babel-loader',
          test: /.\js$/,
          exclude: /node_modules/
        },
        {
          use: ['style-loader', 'css-loader'],
          test: /\.css$/
        }
      ]


    },
```
my config seems right, my css is right, i cant figure out this dan error
William Watts
@Braillon7
Aug 20 2017 02:42
I'm looking for help to see if someone can find a way to have my search results open in a new window. I tried a few things but nothing is working for me... https://codepen.io/Braillon7/pen/rzdOvZ
Ahmed Osman
@Noby707
Aug 20 2017 02:45
Hello
iso
@iso1048
Aug 20 2017 02:48
@Braillon7 in the anchor tag, add target="_blank"
Bryan Jay B. Panesa
@bryanpanesa
Aug 20 2017 02:51
@Noby707 Hi there!
Ahmed Osman
@Noby707
Aug 20 2017 02:52
I need help with a challenge I originally completed (Return early pattern for function)
William Watts
@Braillon7
Aug 20 2017 02:55
$('#output').html('');
for(var i=0;i<data[1].length;i++){
$('#output').prepend("<li><a href= "+data[3][i]+">"+data[1][i] +"</a><p>"+data[2][i]+"'target='_blank'></p></li>"); //this is what I have and it doesn't work. any suggestions?
iso
@iso1048
Aug 20 2017 02:58
@Braillon7 <a href="" target="_blank"></a> you have currently got it within a p tag.
@bryanpanesa your portfolio is great
Bryan Jay B. Panesa
@bryanpanesa
Aug 20 2017 03:05
@gothamknight thanks, it's outdated tho. :)
CamperBot
@camperbot
Aug 20 2017 03:05
bryanpanesa sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @gothamknight |http://www.freecodecamp.com/gothamknight
Roxroy
@roxroy
Aug 20 2017 03:06

@Braillon7 , there is an issue with your html that makes the output show up in a narrow column,

    </div>
    <ul id="output">

switch the lines to match the above

William Watts
@Braillon7
Aug 20 2017 03:06
ooohh. thanks @gothamknight . let me try that and see what happens
CamperBot
@camperbot
Aug 20 2017 03:06
braillon7 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @gothamknight |http://www.freecodecamp.com/gothamknight
William Watts
@Braillon7
Aug 20 2017 03:09
i got rid of the <p> tag and still nothing
Ruchika Sharma
@ruchika90
Aug 20 2017 03:11
@Manish-Giri thx again!
CamperBot
@camperbot
Aug 20 2017 03:11
ruchika90 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6442 | @manish-giri |http://www.freecodecamp.com/manish-giri
William Watts
@Braillon7
Aug 20 2017 03:12
getting rid of the <p> tag only get rid of my css property nothing else
Roxroy
@roxroy
Aug 20 2017 03:14
@Braillon7 , the html is not valid, there is an extra div in your ul list tag and is affecting your layout
   <ul id="output">
      </div>    <--- remove this line
  </ul>
William Watts
@Braillon7
Aug 20 2017 03:24
thanks for noticing @roxroy . i removed that line but i haven't noticed a difference
CamperBot
@camperbot
Aug 20 2017 03:24
braillon7 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:star2: 1119 | @roxroy |http://www.freecodecamp.com/roxroy
Tai Jones
@taiJones00
Aug 20 2017 03:25
What did you guys use for the tabs in the twitch.tv project
Roxroy
@roxroy
Aug 20 2017 03:35
@taiJones00 , I used <a> tags to simulate tabs. Kept track of the active link and styled accordingly to make it look like a tabbed page as the user select a different tab.
Ryan Kim
@ILoveImages
Aug 20 2017 03:57
[title](https://codepen.io/Ryan57/pen/JyWJww?editors=101
Help me plz I still don't know why my API ain't working I guess something wrong in my code
I was building random quote machine
a*
iso
@iso1048
Aug 20 2017 03:59
@ILoveImages your url is http. codepen is served over https so the url can't work
@ILoveImages look on your console.
Ryan Kim
@ILoveImages
Aug 20 2017 04:03
@gothamknight Thanks a million It just started working well!
CamperBot
@camperbot
Aug 20 2017 04:03
iloveimages sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @gothamknight |http://www.freecodecamp.com/gothamknight
Znadams
@Znadams
Aug 20 2017 04:16
Hey guys
I need a bit of assistance with this udemy course
I cant seem to get the background image to cover the entire background
iso
@iso1048
Aug 20 2017 04:20
@Znadams background: url("https://source.unsplash.com/xulIYVIbYIc"); you were missing the ;. background-size:cover and all should work fine now
Znadams
@Znadams
Aug 20 2017 04:21
hah
dont you lvoe dumb thigns like that
iso
@iso1048
Aug 20 2017 04:22
haha
just need a fresh pair of eyes i guess
Znadams
@Znadams
Aug 20 2017 04:25
many thanks
iso
@iso1048
Aug 20 2017 04:26
no problem
prakash chandra yadav
@prakashyadav008
Aug 20 2017 04:32
works fine @Znadams
Znadams
@Znadams
Aug 20 2017 04:32
Thank you!
Lallo Vigil
@lalov1
Aug 20 2017 04:36
Need help with the Simon project. I’m having trouble with it not turning a different color when it is the same color twice and when the user misses one it doesn’t restart. Any tips? https://codepen.io/lalov1/full/MvgvxY/
Can anyone tell me why my onload function doesn't hide the 2 temp. buttons?
BuntyBru
@BuntyBru
Aug 20 2017 05:53
hi,
I am creating the Random Quote Generator
Can anyone tell me how should i put up a transparent box in the middle of the page
where i can put up the quotes
Johnny
@jtan3
Aug 20 2017 06:02
@BuntyBru do you know how to make a box?
BuntyBru
@BuntyBru
Aug 20 2017 06:10
i have made the box
@jtan3
.centered is for the box
iso
@iso1048
Aug 20 2017 06:13
@BuntyBru use rgba() to set a background color - this takes 4 values; the first three are the same as rgb(), and the last value controls opacity and ranges from 0 to 1.... i think
BuntyBru
@BuntyBru
Aug 20 2017 06:14
@gothamknight
as of now ignore the background color
i actually want the box to be in the centre
Johnny
@jtan3
Aug 20 2017 06:14
@BuntyBru are you working in codepen?
BuntyBru
@BuntyBru
Aug 20 2017 06:14
@jtan3
yes
iso
@iso1048
Aug 20 2017 06:14
oh. try margin:auto;
Johnny
@jtan3
Aug 20 2017 06:15
@BuntyBru link the codepen
BuntyBru
@BuntyBru
Aug 20 2017 06:16
ok
Johnny
@jtan3
Aug 20 2017 06:18
.centered{

    width:300px;
    height:100px; 
    margin: 50px auto;
    background-color:#FFA500;
}
@BuntyBru this horizontal centers the box
BuntyBru
@BuntyBru
Aug 20 2017 06:21
@jtan3
i want to put it in the very middle
Johnny
@jtan3
Aug 20 2017 06:23
@BuntyBru i don't know how to center it vertical without flexbox.
BuntyBru
@BuntyBru
Aug 20 2017 06:25
@jtan3
ok let me try

@jtan3
margin: 250px auto:

brings the box in the middle

BuntyBru
@BuntyBru
Aug 20 2017 06:41
@jtan3
Johnny
@jtan3
Aug 20 2017 06:44
@BuntyBru try a different color. It blends into the background
body
{
  background: url("https://lh3.googleusercontent.com/4Bn4zdADhWhegRcmxS1xmHxbxIBzEgB8ADfeaCmiwT9iF7y2mN9Wc5L7gFLxUo2bgl3V-97EFrOyE9OXfkvip3pkpNxYe50GiapeT41p7D7tNJm3oEdV8Y-7toGyvz0UZ8VgDACVTUEdzzVVm2NtQSCroSvmo4gL3u0ty-KAyKnah9vIitfw2Rs1MuNzQq6vmzUcw1_4obGAKmk_Nx0dD33RSy1jbT8D61kxERbOu0pHUciywIO2EeUX8iOcJfHHQwVW3lGYcZKSiimGjBUvzHILrSpVZQ1xUlj0U21EeY4Hil1ZaJQaX47hQezcxZj7H8GyWhNv2TzQ7EU8DS3_MonCLxXlnXfk-80nncPa8DxN_UlIzJeOPDiWPSLXFaDJn_ywCutx-0onw5rcSC815_krGHXKt3L_weD5pq_e_2WI3BRZndcR2jOYLz9BiUp52ouDBIDw2OzrDtUgxne9NaQ2tOJwaIR26N1un92ChTLhXZF2F2NoS3Do96TY6A5dP6RsXQzK6G0Z6oj5XtYx-p--PrdP8wiDPAzOqXQkXbJaX8l2qPi3nTYrD8rB-eKyL2E1q9xQ=w1600-h766") no-repeat center center fixed;
  background-size: cover;
}
@BuntyBru try this to your background
BuntyBru
@BuntyBru
Aug 20 2017 06:51
@jtan3
well i will put quotes there
i think a bit blending in is necessary
Johnny
@jtan3
Aug 20 2017 06:55
@BuntyBru you can barely see the box right now. What's the point of the box if you can't see it. You can pick a darker color and make it transparent.
BuntyBru
@BuntyBru
Aug 20 2017 06:56
@jtan3
agreed
increased the opacity

one more question
should i directly put various quotes on my javascript code
or call an API for that

the problem with latter is i do not know much about how to call API

Johnny
@jtan3
Aug 20 2017 06:57
@BuntyBru changing it to black works too
@BuntyBru you can do either. If you learn about api now, it will help with the next few projects.
Sorin Ruse
@sorinr
Aug 20 2017 06:58
@BuntyBru another option for centering is flexbox like in this example
BuntyBru
@BuntyBru
Aug 20 2017 07:04

@sorinr

wow
how you did that

Sorin Ruse
@sorinr
Aug 20 2017 07:07
@BuntyBru more on flexbox also here
BuntyBru
@BuntyBru
Aug 20 2017 07:08
@jtan3
i looked for the API assignments in freecodecamp
they are too vague
Johnny
@jtan3
Aug 20 2017 07:10
@BuntyBru google other resources. There's tons of youtube videos too .
Praful-cs
@Praful-cs
Aug 20 2017 07:11
How to stop ongoing song in Howler Js?
iso
@iso1048
Aug 20 2017 07:17
@BuntyBru i found this helpful: https://learn.jquery.com/ajax/
BuntyBru
@BuntyBru
Aug 20 2017 07:22
@gothamknight
thanks a lot
CamperBot
@camperbot
Aug 20 2017 07:22
buntybru sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @gothamknight |http://www.freecodecamp.com/gothamknight
Reinoud Zuyderhoff
@Reinoud-Zuyderhoff
Aug 20 2017 08:12
hey guys, quick question! I'm learning AngularJS, I want to add a line in some strings in angular, but it just logs <br> whenever I add it. do you know how to add a line in Angular?
Sorin Ruse
@sorinr
Aug 20 2017 08:27
@Reinoud-Zuyderhoff what kind of line? horizontal one? then it should be <hr> not <br>
BuntyBru
@BuntyBru
Aug 20 2017 08:34
@gothamknight
Quite big article it is
i guess i will finish the html part then will dive into the APIs
i just have to add two buttons
namely New Quote and Tweet it
iso
@iso1048
Aug 20 2017 08:38
@BuntyBru whatever suits bro
Long Nguyen
@longnt80
Aug 20 2017 08:41
@Reinoud-Zuyderhoff @sorinr
is it just Angular now or AngularJS is a different framework?
iso
@iso1048
Aug 20 2017 08:48
@longnt80 would you mind if I pm you for some help?
Long Nguyen
@longnt80
Aug 20 2017 08:48
@gothamknight go ahead
BuntyBru
@BuntyBru
Aug 20 2017 09:22
hi everyone
what should i do to override the align-items: center;
under body in CSS
AS i want to place the next button below the transparent box
below to the right
please help
@gothamknight @sorinr @jtan3
Sorin Ruse
@sorinr
Aug 20 2017 09:25
@BuntyBru change your css like:
  display: flex;
  flex-direction: column;
BuntyBru
@BuntyBru
Aug 20 2017 09:28
@sorinr
it worked
i just have to put the button aside to the right side
and put up a tweet button on the left
Sorin Ruse
@sorinr
Aug 20 2017 09:44
@BuntyBru you need something like in html and css
heroiczero
@heroiczero
Aug 20 2017 09:52
@BuntyBru you want a <div> container after your <body> like
<body>
    <div>
  <div class="centered ">

    </div>
    <div>
<button class="button" style="vertical-align:middle"><span>Next </span></button>
</div>
    </div>

  </body>
BuntyBru
@BuntyBru
Aug 20 2017 09:53
@sorinr
thanks a lott
CamperBot
@camperbot
Aug 20 2017 09:53
buntybru sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1327 | @sorinr |http://www.freecodecamp.com/sorinr
BuntyBru
@BuntyBru
Aug 20 2017 09:54
@heroiczero thanks mate
CamperBot
@camperbot
Aug 20 2017 09:54
buntybru sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1629 | @heroiczero |http://www.freecodecamp.com/heroiczero
Sorin Ruse
@sorinr
Aug 20 2017 09:56
@BuntyBru if you want your buttons withs some space left or right just make the width: 500px smaller on the class .btns
BuntyBru
@BuntyBru
Aug 20 2017 09:58
yeah i get that
thanks again btw
@sorinr
Adit
@adittyagi
Aug 20 2017 10:48
Hey guys! Any advice before I start my random quote machine ?
Ken Haduch
@khaduch
Aug 20 2017 11:32
@adittyagi - hello - you can do just about anything with this project. If you are familiar with using API sites and AJAX, you can use a site that serves random quotes, I see a lot of people use "quotesondesign.com". If you are still learning about APIs, then you can design this using an array of quotes of your own choosing, and randomly select and display. You can disconnect the design of the UI from the quote source, and start with array of quotes, then as you learn about API interaction, switch to using an API for your source of quotes.
Ken Haduch
@khaduch
Aug 20 2017 11:42
@adittyagi - there are many quote servers out there, too - you can google for them and choose something that you like, as well...
Adit
@adittyagi
Aug 20 2017 11:57
@khaduch Hey! Thank you for the info.
CamperBot
@camperbot
Aug 20 2017 11:57
adittyagi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3222 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Aug 20 2017 11:58
@adittyagi - you're welcome... good luck on the project!
Adit
@adittyagi
Aug 20 2017 11:58
:smile:
Manuel Reyes
@Androbat
Aug 20 2017 12:36
Hi guys
Who could help me here.
I have to solve the counting FCC challenge.

``` var count = 0;

function cc(card) {
// Only change code below this line
switch(card){
case 2:
case 3:
case 4:
case 5:
case 6:
count++;
break;
case 7:
case 8:
case 9:
count = 0;
break;
case 10:
case 'J':
case 'Q':
case 'K':
case 'A':
count--;
}

if (count > 0){
return count + " Bet";
}
else{
return count + " Hold";
}

// Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A'); ```

Wael Azar
@Waelazar
Aug 20 2017 13:11
return count + (count > 0 ? " Bet" : " Hold");
@Androbat
return the function instant of creating a if statement
mstellaluna
@mstellaluna
Aug 20 2017 13:36
@Androbat count = 0; this is resetting the counter back to 0.
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 13:42
Hey guys, I need some help to format the minutes to minutes : seconds in my pomodoro clock app. Can anyone please help. I found some method on stackOverflow but it won’t work.
Manuel Reyes
@Androbat
Aug 20 2017 13:42
@mstellaluna @Waelazar Yes, I solved it. My problem was from 0 to 9 cases.
@mstellaluna @Waelazar Thanks.
CamperBot
@camperbot
Aug 20 2017 13:43
androbat sends brownie points to @mstellaluna and @waelazar :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @waelazar |http://www.freecodecamp.com/waelazar
:cookie: 676 | @mstellaluna |http://www.freecodecamp.com/mstellaluna
Tom
@moT01
Aug 20 2017 13:47
@MukeshAngrish what do you have so far?
assuming the user inputs a whole minute, i might first translate it to seconds
2 minutes = 120 seconds
then when you subtract one when the timer starts you can translate that back to minutes:seconds
Tom
@moT01
Aug 20 2017 13:53
119 % 60 = 59 which is your seconds
and (119 - 59)/60 = minutes
not sure if thats the best way to go but it would probly work
and if (seconds < 10) { seconds = '0'+seconds } - for a leading 0
or maybe check out http://momentjs.com/
cumibulat
@cumibulat
Aug 20 2017 14:18
hi guys, i have questions regarding twitch api project. i used the example twitch user who regulerly streams.. let say i only use 4 user, should i use for loop to check whether they are online or not, or the api can do checking for multiple user at the same time ?
for now i'm using for loop, but the api return the result after the looping finish, and it giving inconsistent result.
Teo
@Teo03
Aug 20 2017 14:21

function convertHTML(str) {
  str = str.split('');
  console.log(str);
   for(var i = 0; i < str.length; i++){
    switch(str[i]){
      case '&':
        str[i].replace(str[i], '&amp;');
        break;
      case '>':
        str[i].replace(str[i], '&lt;');
        break;
      case '<':
        str[i].replace(str[i], '&gt;');
        break;
      case '"':
        str[i].replace(str[i], '&quot;');
        break;
      case "'":
        str[i].replace(str[i], '&apos;');
        break;
    }
   }
  return str.join('');
}

convertHTML("Dolce & Gabbana");
Can someone help?
Long Nguyen
@longnt80
Aug 20 2017 14:27
@Teo03 what about space?
Teo
@Teo03
Aug 20 2017 14:28
@longnt80 What's wrong with space?
Koderkid1936
@Koderkid1936
Aug 20 2017 14:28
a width of 960px is what many web developers when designing for 1024 x 768 but what resolution to use when design for 1440px?
Teo
@Teo03
Aug 20 2017 14:30
@longnt80 ??
Long Nguyen
@longnt80
Aug 20 2017 14:32
@Teo03 str[i].replace(str[i], '&amp;'); this is not right
Teo
@Teo03
Aug 20 2017 14:33
@longnt80 I can't figure out what to do here
Long Nguyen
@longnt80
Aug 20 2017 14:33
replace doesn't change the string
it only returns the result
cumibulat
@cumibulat
Aug 20 2017 14:34
@moT01 thanks. will try this now..
CamperBot
@camperbot
Aug 20 2017 14:34
cumibulat sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 800 | @mot01 |http://www.freecodecamp.com/mot01
Long Nguyen
@longnt80
Aug 20 2017 14:34
you need to assign that result to a new variable
@Teo03
@Teo03 so something like this: str[i] = str[i].replace(str[i], '&amp;');
but then you could just modify the value directly without using replace: str[i] = '&amp;';
Teo
@Teo03
Aug 20 2017 14:39
@longnt80 Thanks :)
CamperBot
@camperbot
Aug 20 2017 14:39
teo03 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @longnt80 |http://www.freecodecamp.com/longnt80
cumibulat
@cumibulat
Aug 20 2017 14:39
@moT01 it works like a charm. thanks a bunch..
CamperBot
@camperbot
Aug 20 2017 14:39
cumibulat sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: cumibulat already gave mot01 points
Pagnito
@Pagnito
Aug 20 2017 15:39
anyone familiar with this error
/Users/pavelyeganov/My_Ish/Coding/FTW/node_modules/webpack-core/lib/LoadersList.js:58
if(element.loader) return element.loader.split("!");
i cant load my css T.T
Marat
@Marat89bluolyu
Aug 20 2017 15:58
Hi all. I'm stacked on event listeners in jquery ui calculator...
I have 2 inpits with values. If i change only one input - its ok. But when changed both inputs - output value is uncorrect. What's the problem?
https://codepen.io/marat89/pen/XaEjvX
Marat
@Marat89bluolyu
Aug 20 2017 16:05
if i change at first value on two core and then change 2nd value on 3 months - i getting wrong number in billing (900), but this value must be equality 1200.
If then i change 1st val to 3 core and then change to 2 core again - i getting correct number (1200);
And i think my event listeners isn't correct
But idk how i need relpace they for correct result
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 16:12
@wobytides If you look at my code you will realize that I had the same method you suggested in comments as it didn’t work.
cowCrazy
@cowCrazy
Aug 20 2017 16:42
@Pagnito have you used both css and style loaders? Can you share you webpack.config file?
Pagnito
@Pagnito
Aug 20 2017 16:43
@cowCrazy yea i figured it out
cowCrazy
@cowCrazy
Aug 20 2017 16:43
Cool :smile:
Pagnito
@Pagnito
Aug 20 2017 16:43
turned out ['style-loader', 'css-loader'] didnt worked as opposed to 'style-loader!css-loader'
kind of annoying lol
cowCrazy
@cowCrazy
Aug 20 2017 16:44
Yep.... webpack is a great tool, although it gives me hard times every now and then....
Pagnito
@Pagnito
Aug 20 2017 16:47
yea def
@cowCrazy hey do u know if extractTextPlugin is done differently now?
this doesnt seem to work
{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader'
        }),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ],
cowCrazy
@cowCrazy
Aug 20 2017 17:10
@Pagnito take a look here, if you are using webpack 2/3 it looks a bit different than what you used. I am not sure though cause I am not using this plugin :/
elad ben aderet
@eladonline
Aug 20 2017 17:31
@eladonline
a question i have a function inside a constractor the function have the this inside and i want to bind the this to the object anyone know how ?
@eladonline
obj = {
    numbers: [3,1,2]
}

function aConstractor(){
   this.func = function(){
     console.log(this.numbers)
  }
}
obj.makeNewObj = new aConstractor()
obj.makeNewObj.func() //this will not print the numbers becuse  this is bind to the function how can i unbind it ?
Gulsvi
@gulsvi
Aug 20 2017 18:05
@eladonline this.numbers is looking for numbers inside this.func. I think you'd want to do something like this:
obj = {
  numbers: [3, 1, 2]
};

function aConstractor(data) {
  this.func = function() {
    console.log(data.numbers);
  };
}

var makeNewObj = new aConstractor(obj);
makeNewObj.func(); // [3, 1, 2]
Also, minor comment, but it's constructor not constractor
elad ben aderet
@eladonline
Aug 20 2017 18:25
@SkyC0der ty very much and yea english s not my mother language i have lots of mistakes
CamperBot
@camperbot
Aug 20 2017 18:25
eladonline sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2504 | @skyc0der |http://www.freecodecamp.com/skyc0der
Eric Weiss
@eweiss17
Aug 20 2017 18:49
@SkyC0der nice pic
Daniel
@DanJP2016
Aug 20 2017 18:51
quick question, can I use requestAnimationFrame instead of a setTimeOut in my animation?
https://codepen.io/bones211/pen/YpoWmK
or is requestAnimationFrame just for canvas?
Simey de Klerk
@simeydk
Aug 20 2017 18:53
Hello, I need some help with CSS (boostrap), please! I'm trying to get the 'white button' styles . I am trying to imitate the buttons shown here in the Boostrap docs: https://v4-alpha.getbootstrap.com/components/button-group/#button-toolbar. However, when I copy and paste the code in a codepen with bootstrap https://codepen.io/simdk/pen/GvQzgX, the buttons show gray. please help.
Eric Weiss
@eweiss17
Aug 20 2017 19:14
@Simdk8 the btn-secondary is applying different colors in yours than on the main page
you can just change it to the color you want in the css
Gulsvi
@gulsvi
Aug 20 2017 19:16
@Simdk8 The instructions you link to are for Bootstrap 4 alpha. The version of bootstrap in your codepen is Bootstrap 4 Beta. That class changed in the beta to btn-light. So, change btn-secondary to btn-light and you'll have the buttons you want.

@eweiss17 This is all the CSS involved in a single button style for bootstrap:

.btn-secondary {
  color: #292b2c;
  background-color: #fff;
  border-color: #ccc;
}

.btn-secondary:hover {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-secondary:focus, .btn-secondary.focus {
  -webkit-box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
          box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  background-color: #fff;
  border-color: #ccc;
}

.btn-secondary:active, .btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: #292b2c;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}

It gets a little crazy trying to change the colors :)

Eric Weiss
@eweiss17
Aug 20 2017 19:18
didn't think to look for alpha and beta
Gulsvi
@gulsvi
Aug 20 2017 19:18
The beta changed everything I knew about the alpha :/
column offsets are gone
Simey de Klerk
@simeydk
Aug 20 2017 19:21
@SkyC0der Thanks! I saw alpha & beta in the links, but did not pay attention to it. Is it 'safe' to use v4 beta? or is it still a safer bet to stick to 3.3.7 until 4.0 gets officially released?
CamperBot
@camperbot
Aug 20 2017 19:21
simdk8 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2505 | @skyc0der |http://www.freecodecamp.com/skyc0der
Marat
@Marat89bluolyu
Aug 20 2017 19:23
somebody can help me with event listeners in my code?
Gulsvi
@gulsvi
Aug 20 2017 19:23
@Simdk8 It depends on what you mean by "safe". The class names and button styles won't change between the Beta and final release, but there might still be a lot of bugs. Bootstrap 3 is a requirement if you need to support older browsers.
@Marat89bluolyu Sure, what's the question?
Marat
@Marat89bluolyu
Aug 20 2017 19:23
I have 2 inpits with values. If i change only one input - its ok. But when changed both inputs - output value is uncorrect. What's the problem?
https://codepen.io/marat89/pen/XaEjvX
if i change at first value on two core and then change 2nd value on 3 months - i getting wrong number in billing (900), but this value must be equality 1200.
If then i change 1st val to 3 core and then change to 2 core again - i getting correct number (1200);
And i think my event listeners isn't correct
But idk how i need relpace they for correct result
Simey de Klerk
@simeydk
Aug 20 2017 19:24
@SkyC0der Thanks, that helps. However, I'm still not getting the light gray borders around my buttons and button-group? what am I still missing?
CamperBot
@camperbot
Aug 20 2017 19:24
simdk8 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: simdk8 already gave skyc0der points
Gulsvi
@gulsvi
Aug 20 2017 19:30
@Simdk8 You just changed your version of bootstrap to v3 :) that's what you're missing. btn-light doesn't exist in bootstrap 3
Marat
@Marat89bluolyu
Aug 20 2017 19:31
@SkyC0der ok ,i try to explain
Gulsvi
@gulsvi
Aug 20 2017 19:33
See the getting started instructions at those links above for the link to the version of bootstrap you need ^^ @Simdk8
Daniel
@DanJP2016
Aug 20 2017 19:33
it looks like the top slider is not testing the correct numbers
Simey de Klerk
@simeydk
Aug 20 2017 19:33
@SkyC0der THANKS!
CamperBot
@camperbot
Aug 20 2017 19:33
simdk8 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: simdk8 already gave skyc0der points
Eric Weiss
@eweiss17
Aug 20 2017 19:37
I realized making my portfolio with react makes no sense as a portfolio is fairly static
So I set it up via HTML5 Boiler plate and just doing base html/css
Marat
@Marat89bluolyu
Aug 20 2017 19:39
@SkyC0der data which contains a monthes (#polz5) work normaly, but if we change quantity (#polz1) , they are not synchronized
Raja
@virtualhandshake
Aug 20 2017 19:49
Hi friends I think I have really messed up my portfolio page project
please take a look, and see if you can guide me as to what did I do wrong
Gulsvi
@gulsvi
Aug 20 2017 20:12
@Marat89bluolyu I think this might work better - it seems to add up for me: https://s.codepen.io/anon/pen/MvVvjZ?editors=0011
Marat
@Marat89bluolyu
Aug 20 2017 20:16
@SkyC0der ohhh mg.. thank you!!! In this time i rewrite my code shortly!!! Sorry for big switch case statements =)
CamperBot
@camperbot
Aug 20 2017 20:16
marat89bluolyu sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2506 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 20 2017 20:16
I have trouble analyzing switch statements - converted those to lookup objects and made your variables local to all the functions where they were needed and it seems to have fixed the problem
It was probably an issue with the global variables
Daniel Ahn
@danii956
Aug 20 2017 20:27
Can someone help me why having an onClick function attached to a button does not query data using .ajax while just running the .ajax without anything attached does?
korzo
@korzo
Aug 20 2017 20:30
@danii956 You have to add event.preventDefault(), otherwise site navigate away (refresh)
Daniel Ahn
@danii956
Aug 20 2017 20:32
@korzo Thanks so much! It worked!
CamperBot
@camperbot
Aug 20 2017 20:32
danii956 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @korzo |http://www.freecodecamp.com/korzo
iso
@iso1048
Aug 20 2017 20:41
@SkyC0der you on bro?
Gulsvi
@gulsvi
Aug 20 2017 20:50
@gothamknight Yeah, what's up?
intcreate
@intcreate
Aug 20 2017 21:31
Why is the orange box being pushed down? Its suppose to be on the side of the blue box
korzo
@korzo
Aug 20 2017 21:35
@intcreate add vertical-align: botttom to orange box
intcreate
@intcreate
Aug 20 2017 21:35
i dont know why its doing that though
can u explain please
korzo
@korzo
Aug 20 2017 21:39
@intcreate It's because how baseline alignment works with inline elements
intcreate
@intcreate
Aug 20 2017 21:41
if I take the stuff out of the box it will work fine
and doesnt need vertical alignment
but when there is stuff in the box then I need vertical alignment
korzo
@korzo
Aug 20 2017 21:44
@intcreate You can read more about it here: https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
Default vertical-align is baseline
intcreate
@intcreate
Aug 20 2017 21:48
ok ty
Gulsvi
@gulsvi
Aug 20 2017 21:48
@intcreate This stack overflow answer a nice visual explanation of what's happening: https://stackoverflow.com/a/15217617
korzo
@korzo
Aug 20 2017 21:48
@intcreate Here is more about how baseline is calculated
https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
intcreate
@intcreate
Aug 20 2017 21:51
ok i will check it out
Marat
@Marat89bluolyu
Aug 20 2017 22:04
@SkyC0der i have a question.. if i have for example, 4 sliders and need synchronize them between self ?
Gulsvi
@gulsvi
Aug 20 2017 22:29

@Marat89bluolyu You synchronize your sliders with this code:

  var monthPrices = { 1: 250, 3: 750, 6: 1500, 12: 3000 },
    corePrices = {
      1: { 1: 0, 2: 150, 3: 300, 4: 450, 6: 750, 8: 850, 12: 1200 },
      3: { 1: 0, 2: 450, 3: 900, 4: 1350, 6: 2250, 8: 2550, 12: 3600 },
      6: { 1: 0, 2: 840, 3: 1560, 4: 2160, 6: 3450, 8: 4410, 12: 6600 },
      12: { 1: 0, 2: 1560, 3: 3000, 4: 4140, 6: 6600, 8: 8400, 12: 11880 }
    },
    coreCost = corePrices[$("#months-button").val()][$("#cores-button").val()],
    monthsCost = monthPrices[$("#months-button").val()],
    total = coreCost + ddrCost + hddCost + netFrequencyCost + monthsCost;

Add new objects for the ddrCost, hddCost, netFrequencyCost sliders - and then add their values together to come up with total

Marat
@Marat89bluolyu
Aug 20 2017 22:31
@SkyC0der ok, calc is work!! thank you again!!!
CamperBot
@camperbot
Aug 20 2017 22:31
marat89bluolyu sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2508 | @skyc0der |http://www.freecodecamp.com/skyc0der
aRtoo
@artoodeeto
Aug 20 2017 22:33
@SkyC0der yow dodong. how are you bro?
Gulsvi
@gulsvi
Aug 20 2017 22:36
@artoodeeto Hello Artoo
aRtoo
@artoodeeto
Aug 20 2017 22:37
@SkyC0der yow bro i got the same question from the last time. sorry i have to reformat my cheap laptop
Gulsvi
@gulsvi
Aug 20 2017 22:38
I don't use heroku :/
aRtoo
@artoodeeto
Aug 20 2017 22:38
@SkyC0der anyway bro. why is arr[0] hard coded here??

function dropElements(arr, func) {

  for(var i=0; i<arr.length; i++){
    if(func(arr[0])){
      break;
    }else{
      arr.shift();
    }
  }

  console.log(func(arr[0]));


  return arr;
}
@SkyC0der no. that one bro
Gulsvi
@gulsvi
Aug 20 2017 22:38
@artoodeeto arr.shift() takes the first element off the array.
So, arr[0] is continually checking the first element, then arr.shift() removes it
aRtoo
@artoodeeto
Aug 20 2017 22:39
@SkyC0der yea. so if its true it will loop again right? because of break
Gulsvi
@gulsvi
Aug 20 2017 22:39
if it's true, it breaks the loop, else remove the first element and check again
aRtoo
@artoodeeto
Aug 20 2017 22:39
if it will hit break then it will go outside the if else statement
Gulsvi
@gulsvi
Aug 20 2017 22:40
I wouldn't use break; there - it isn't necessary
aRtoo
@artoodeeto
Aug 20 2017 22:40
if it will continue why dod we need to use for lopp?
Gulsvi
@gulsvi
Aug 20 2017 22:41
You need to check all the elements in the array - that's what the for loop is for
aRtoo
@artoodeeto
Aug 20 2017 22:41
shift will just remove the first element right?
Gulsvi
@gulsvi
Aug 20 2017 22:41
Yeah, just the first one
aRtoo
@artoodeeto
Aug 20 2017 22:41
yea but arr[0] is hard coded
Gulsvi
@gulsvi
Aug 20 2017 22:41
After your shift() the first element off the array, arr[0] has a different value. It's pointing to the new first element, previously the second element
aRtoo
@artoodeeto
Aug 20 2017 22:42
we can just use. arr,shift then if we just need to return the modified array right?
Gulsvi
@gulsvi
Aug 20 2017 22:42
you still need to pass a value to func()
aRtoo
@artoodeeto
Aug 20 2017 22:44
ohh. so for the first loop if its false then it will go shift? so the array [0,1,0,1] will be 1,0,1 and if its true it will break then goes out the loop and goes to return arr?
Gulsvi
@gulsvi
Aug 20 2017 22:44
True, yes
aRtoo
@artoodeeto
Aug 20 2017 22:45
ohh. right. we need the loop because if the orignal array is [0,1,0,1] . it goes to the shift with a new value of the array [1,0,1]. and since n === 1 true it will break. im i right? @SkyC0der
Gulsvi
@gulsvi
Aug 20 2017 22:46
@artoodeeto Yes, exactly
aRtoo
@artoodeeto
Aug 20 2017 22:46
@SkyC0der ohh. thanks dong!! mwah. ill cook sinigang for you bro.
CamperBot
@camperbot
Aug 20 2017 22:46
artoodeeto sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2509 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 20 2017 22:46
:yum: lol
aRtoo
@artoodeeto
Aug 20 2017 22:48
@SkyC0der i got chu fam! haha
Gulsvi
@gulsvi
Aug 20 2017 22:49
Taratitat ka talaga ;)
Charot!
aRtoo
@artoodeeto
Aug 20 2017 22:50
@SkyC0der tanginaaaaa pinoy ka talagang hayoffff ka! hahahaha
@SkyC0der pinoy ka ampottttssss malapit na ma ubos english ko. hahaha
Gulsvi
@gulsvi
Aug 20 2017 22:51
lol, no entiedo, solo hablo un poquito de pinoy :)
aRtoo
@artoodeeto
Aug 20 2017 22:54
@SkyC0der nope. hahaha. wagka na. di ako naniniwala sayo tol. pinoy ka. marnunong ka lng mag spanish.
Gulsvi
@gulsvi
Aug 20 2017 22:55
lol, you'll never know :)
aRtoo
@artoodeeto
Aug 20 2017 22:57
@SkyC0der hahaha. alam ko tol. hahaha. una palang mahilig mag change ng profile pic ang pnoy. haha
iso
@iso1048
Aug 20 2017 23:00
@SkyC0der can I pm you.
Pagnito
@Pagnito
Aug 20 2017 23:31
@SkyC0der yo