These are chat archives for FreeCodeCamp/Help

27th
Aug 2017
Gustavo Azevedo
@gustavoaz7
Aug 27 2017 00:41
@mbmontana this is a great opportunity to use (and learn) ES6 'spread operator'
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
You can replace that .apply with a simple Math.max(...arr). Now you are comparing that max value of every element in that arr
Razvan
@razvanlikespizza
Aug 27 2017 00:49
@media only screen and (min-width:320px and max-width:450px)whats wrong?
Margaret
@Margaret2
Aug 27 2017 01:12
@razvanlikespizza MDN example:
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) { ... }
and is outside of parentheses ^
Razvan
@razvanlikespizza
Aug 27 2017 01:13
@Margaret2 Thank you.
CamperBot
@camperbot
Aug 27 2017 01:13
razvanlikespizza sends brownie points to @margaret2 :sparkles: :thumbsup: :sparkles:
:star2: 2897 | @margaret2 |http://www.freecodecamp.com/margaret2
Ginger
@GingerChew
Aug 27 2017 02:23
Hey all, can somebody help me with this function? I'm trying to set up the second argument as a variable, but I'm not sure how to reference it?
function sym(args) {
  var A = args, B = args, C = [];
  A.forEach(function(element) {
    if (element == B[0]) {
      C.push(element);
    }
  });
  return C;
}

sym([1, 2, 3], [5, 2, 1, 4]);
other than hard coding it in
I used to have A set to args[0] but that was equal to 1 and not [1,2,3]
Amit Patel
@AmitP88
Aug 27 2017 02:24
hey guys, I need some help on my Markdown Previewer project using ReactJS. https://codepen.io/AmitP88/pen/VzBNqZ?editors=0010 atm I'm stuck on how to pass the user input from the <textarea> tag within my Input component into my Output component. I'm pretty sure I have to use props, but even after looking at (and understanding) various tutorials on props, I'm not sure how I would apply it here since it's user-defined data on the fly
Moisés Man
@moigithub
Aug 27 2017 02:26
@GingerChew sym function is called with 2 arrays
but its declared with only 1 parameter (args)
soo to access the second array u need to use the arguments object
mdn.io/arguments
there are also lot videos on youtube explaining how to use this
Ginger
@GingerChew
Aug 27 2017 02:27
oh I've used it in the past, I just was racking my brain trying to remember how I did it in the past
thanks m8 @moigithub
CamperBot
@camperbot
Aug 27 2017 02:29
gingerchew sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3608 | @moigithub |http://www.freecodecamp.com/moigithub
Mike Batista
@mbmontana
Aug 27 2017 03:02
@Margaret2 @longnt80 @ehutchllew Thanks! But why is the null needed before the arr[i]?
function largestOfFour(arr) {
  // You can do this!
 var finalArray = [];
  for (i=0; i < arr.length; i++)  {


  finalArray.push(Math.max.apply(null, arr[i]));}

 return finalArray;

}

largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]);
CamperBot
@camperbot
Aug 27 2017 03:02
mbmontana sends brownie points to @margaret2 and @longnt80 and @ehutchllew :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @longnt80 |http://www.freecodecamp.com/longnt80
:cookie: 356 | @ehutchllew |http://www.freecodecamp.com/ehutchllew
:star2: 2898 | @margaret2 |http://www.freecodecamp.com/margaret2
Ginger
@GingerChew
Aug 27 2017 03:25
Can someone help me understand why this
function checkCashRegister(price, cash, cid) {
  var change = cash-price, payout = [];
  function giveChange(change,cid){
    if (change > 100) {
      change -= 100;
      payout.push('ONEHUNDRED',100.00);
    }
  }
  // Here is your change, ma'am.
  if (change > cid) {
    return "Insufficient Funds";
  } else if (change == cid) {
    return "Closed";
  }
  giveChange();
  return payout;
}
returns an empty array but this
function checkCashRegister(price, cash, cid) {
  var change = cash-price, payout = [];
  function giveChange(change,cid){
      change -= 100;
      payout.push('ONEHUNDRED',100.00);
  }
  // Here is your change, ma'am.
  if (change > cid) {
    return "Insufficient Funds";
  } else if (change == cid) {
    return "Closed";
  }
  giveChange();
  return payout;
}
returns the right change?
*not the right change but the .push of 'ONE HUNDRED',100.00. I'll finish up the rest of the change in there too
Raymond Berger
@RayBB
Aug 27 2017 03:52
@GingerChew do you have example input? Basically it's because if change < 100 you're not pushing anything to the array
Ginger
@GingerChew
Aug 27 2017 03:54
I should've prefaced that I made it so that the change was more than 100 to force the conditional and it still didn't work
Raymond Berger
@RayBB
Aug 27 2017 04:01
@GingerChew it's because you're not passing the variables to givechage so it sees them as undefined
Ginger
@GingerChew
Aug 27 2017 04:03
ohhhh, but I don't even need to do that right? I can write it as function giveChange(){ and it would just be a function with no parameters right?
Raymond Berger
@RayBB
Aug 27 2017 04:04
That's correct
But that's not really considered best practice
because then if you change the variable names outside of the function you have to remember to change them inside the function as well
Ginger
@GingerChew
Aug 27 2017 04:08
okay, so what would be best practice to avoid that?
Ruchika Sharma
@ruchika90
Aug 27 2017 04:08
@Manish-Giri thx!
CamperBot
@camperbot
Aug 27 2017 04:08
ruchika90 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6469 | @manish-giri |http://www.freecodecamp.com/manish-giri
Raymond Berger
@RayBB
Aug 27 2017 04:10
@GingerChew well it looks like you're still developing your tool so you might want it to be more extendable but generally it's best if functions are given all the inputs they need and don't modify variables outside of the function but rather return values. In the case of what you're writing it seems it would be best to just do it without the second function
function checkCashRegister(price, cash, cid) {
  var change = cash-price, payout = [];
  // Here is your change, ma'am.
  if (change > cid) {
    return "Insufficient Funds";
  } else if (change == cid) {
    return "Closed";
  }

  if (change > 100) {
    change -= 100;
    payout.push('ONEHUNDRED',100.00);
  }
  return payout;
}
Something like that may be more advisable since it reads in the order of execution.
Ginger
@GingerChew
Aug 27 2017 04:11
okay, I'll try that, I've had to build it out a bit more so I don't know how manageable that will be but I'll give it a shot
Raymond Berger
@RayBB
Aug 27 2017 04:13
There are many options and no single best way to do it :)
Ginger
@GingerChew
Aug 27 2017 04:14
that may be the most frustrating thing lol
Raymond Berger
@RayBB
Aug 27 2017 04:18
@GingerChew It may be frustrating at first but I think it's something we all grow to appreciate because it allows creativity
Ginger
@GingerChew
Aug 27 2017 04:19
True! :smile:
@RayBB thanks m8
CamperBot
@camperbot
Aug 27 2017 04:19
gingerchew sends brownie points to @raybb :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @raybb |http://www.freecodecamp.com/raybb
柯摩
@ExcaliburEX
Aug 27 2017 04:20
:sparkles:
Raymond Berger
@RayBB
Aug 27 2017 04:20
@GingerChew how long have you been learning to program?
Ginger
@GingerChew
Aug 27 2017 04:31
since march of this year or so?
give or take a week
I work 30+ hours a week and go to school part time and take care of my mom, but I code at least 20 hours a week
or try to at least
Ginger
@GingerChew
Aug 27 2017 04:51

function checkCashRegister(price, cash, cid) {
  var change = cash - price,
    payout = [],
    BOH = 0;

  var till = function() {
    function round() {
      BOH *= 100;
      BOH = Math.round(BOH);
      BOH /= 100;
    }
    for (var i = 0; i < 9; i++) {
      BOH += cid[i][1];
    }
    round();
  };
  till();
  if (change > BOH) {
    return "Insufficient Funds";
  } else if (change == BOH) {
    return "Closed";
  } else if (change < BOH) {
    while (change>0) {
      if (change >=100.00 && cid[8][1] > 0) {
        change -= 100.00;
        cid[8][1] -= 100.00;
        payout.push(["ONE HUNDRED",100.00]);
      } else if (change>=20.00 && cid[7][1] > 0){
        change -= 20.00;
        cid[3][1] -= 20.00;
        payout.push(["TWENTY",20.00]);
      }else if (change>=10.00 && cid[6][1] > 0){
        change -= 10.00;
        cid[3][1] -= 10.00;
        payout.push(["TEN",10.00]);
      }else if (change>=5.00 && cid[5][1] > 0){
        change -= 5.00;
        cid[3][1] -= 5.00;
        payout.push(["FIVE",5.00]);
      }else if (change>=1.00 && cid[4][1] > 0){
        change -= 1.00;
        cid[3][1] -= 1.00;
        payout.push(["ONE",1.00]);
      }else if (change>=0.25 && cid[3][1] > 0){
        change -= 0.25;
        cid[3][1] -= 0.25;
        payout.push(["QUARTER",0.25]);
      }else if (change>=0.10 && cid[2][1] > 0){
        change -= 0.10;
        cid[3][1] -= 0.10;
        payout.push(["DIME",0.10]);
      }else if (change>=0.05 && cid[1][1] > 0){
        change -= 0.05;
        cid[3][1] -= 0.05;
        payout.push(["NICKEL",0.05]);
      }else if (change>=0.01 && cid[0][1] > 0){
        change -= 0.01;
        cid[3][1] -= 0.01;
        payout.push(["PENNY",0.01]);
      }
    }
  }
  return payout;
}

checkCashRegister(19.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);

// This returns [["QUARTER",0.25],["QUARTER",0.25]] but I need it to add the change that is the same together? I was thinking of using payout.reduce() to get the job done, but I can't figure out how to do that
Also is there anyway to do this that avoids a while loop? I'd like to be more concise if possible but this is all I could wrap my head around
prakash chandra yadav
@prakashyadav008
Aug 27 2017 05:25
@prakashyadav008
hey can anyone help me out
https://codepen.io/prakashyadav008/pen/brjQOb
i cant see the background color in section1-1
Ken Haduch
@khaduch
Aug 27 2017 05:26
@GingerChew - I think that you need some type of loop - I used a while loop, somewhat differently from the way you did, but still had a while loop.
@prakashyadav008 - I see just the tiniest little rectangle of green at the left hand side and beneath the input text element.
prakash chandra yadav
@prakashyadav008
Aug 27 2017 05:28
@khaduch
how do i remove the space between the search bar and search button
Ginger
@GingerChew
Aug 27 2017 05:32
@prakashyadav008 put the icon and the input on the same html line
Ken Haduch
@khaduch
Aug 27 2017 05:37
@prakashyadav008 - it looks like you are now getting the background-color? Changing the size of the div made it work?
prakash chandra yadav
@prakashyadav008
Aug 27 2017 05:48
ya
@GingerChew ya that works but thats not a good coding style
right
is there any other way
Ginger
@GingerChew
Aug 27 2017 05:55
I mean you could try messing with the padding and margins but that creates its own mess of problems
Long Nguyen
@longnt80
Aug 27 2017 06:04

@GingerChew

Also is there anyway to do this that avoids a while loop? I'd like to be more concise if possible but this is all I could wrap my head around

To make it shorter, I'd suggest putting the money names (ONE HUNDRED) and their values in an object or array
This will make it easier to maintain too
Here's the object I used:

var money = {
  "PENNY": 0.01,
  "NICKEL": 0.05,
  "DIME": 0.10,
  "QUARTER": 0.25,
  "ONE": 1.00,
  "FIVE": 5.00,
  "TEN": 10.00,
  "TWENTY": 20.00,
  "ONE HUNDRED": 100.00
};
Aliaksandr Falkouski
@falk42
Aug 27 2017 06:16
hello all, what i do? if i don't want named my credit card in create account cloud9. how i can complete 'Manage Packages with npm' challeng?
what me do? *
piteto
@piteto
Aug 27 2017 06:36
@falk42 Can you install node on your computer?
Aliaksandr Falkouski
@falk42
Aug 27 2017 06:40
@KirstaA i going on CodeTast, but thx
CamperBot
@camperbot
Aug 27 2017 06:40
falk42 sends brownie points to @kirstaa :sparkles: :thumbsup: :sparkles:
:cookie: 4 | @kirstaa |http://www.freecodecamp.com/kirstaa
piteto
@piteto
Aug 27 2017 06:40
:sparkles: :sparkles:
keycz
@keycz
Aug 27 2017 08:45
<p>View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>
why can't run tests?
Rajan
@ProgramNovice
Aug 27 2017 09:08
Hi guys
I have a doubt in the challenge "Create a Form Element"
There is a sentence " You can build web forms that actually submit data to a server"
What does it mean? Is it like the web from will take the input by the user and send it to the server?
korzo
@korzo
Aug 27 2017 09:11
@ProgramNovice Yes
Rajan
@ProgramNovice
Aug 27 2017 09:11
@keycz Hi keycz. Which challenge is that? Maybe I might be able to help.
korzo
@korzo
Aug 27 2017 09:11
@ProgramNovice Data you enter in form fields are send to server
Rajan
@ProgramNovice
Aug 27 2017 09:11
@korzo Ok thanks korzo :)
CamperBot
@camperbot
Aug 27 2017 09:11
programnovice sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Aug 27 2017 09:13
@ProgramNovice If method is GET, form data are in URL, if POST, form data are in request body
Rajan
@ProgramNovice
Aug 27 2017 09:14
@korzo oh ok thanks :)
CamperBot
@camperbot
Aug 27 2017 09:14
programnovice sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:warning: programnovice already gave korzo points
Jonny Blewitt
@Jonny-B
Aug 27 2017 09:19
Hello have a css linking problem. Can anyone lend a hand?
korzo
@korzo
Aug 27 2017 09:29
@Jonny-B sure. Post link to your code
Jonny Blewitt
@Jonny-B
Aug 27 2017 09:33
@korzo File path lib/assets/css/table.css -- lib/views/index.erb
<link rel="stylesheet" href="lib/assets/table.css">

```<!DOCTYPE html>

<html>
<head>
<title>Budget</title>
<link rel="stylesheet" href="lib/assets/table.css">
</head>
<table>
<tr>
<% @csv_header.each_with_index do |csvheader, i| %>
<th id="tableHeader
<%= i%>"><%= csv_header %></th>
<% end %>
</tr>

<%@csv_body.each_with_index do |csv_row, row_i| %>
<tr>
  <% csv_row.each do |csv_element|%>
  <td id="tableRow_<%= row_i%>"><%= csv_element %></td>
  <% end %>
</tr>
<% end %>

</table>
</html>```

hmm that didn't wok out so well.
korzo
@korzo
Aug 27 2017 09:34
@Jonny-B You need to wrap your code in 3x `
@Jonny-B Anyway, path lib/assets/table.css is relative to current document.
@Jonny-B ` have to end with new line
@Jonny-B
'''
code
'''
Just replace ' with `
CamperBot
@camperbot
Aug 27 2017 09:39
:bulb: to format code use backticks! ``` more info
korzo
@korzo
Aug 27 2017 09:44
@Jonny-B Here something about how relative URLs work http://www.webreference.com/html/tutorial2/3.html
Jonny Blewitt
@Jonny-B
Aug 27 2017 09:46
So I've tried every path under the sun without success... I've also tried bringing the two files into the same folder and changing the link to <link rel="stylesheet" href="table.css">
Still get a 404
korzo
@korzo
Aug 27 2017 09:47
@Jonny-B table.css is relative to document. If url is localhost/myapp , css file url will be localhost/myapp/table.css
If your app is in web root, you can use /table.css, which is relative to to domain
@Jonny-B Or you can use <base> tag to set base url https://developer.mozilla.org/en/docs/Web/HTML/Element/base
Long Nguyen
@longnt80
Aug 27 2017 09:52
@Jonny-B you can inspect the href of the link with devtool and hover over the href. It will show you the path it actually go to the css file. Then you can see if the path is correct.
Jonny Blewitt
@Jonny-B
Aug 27 2017 09:53
Thats the thing. I have and its correct...
So I just put the index.erb and table.css in the same folder.
called views
tried both <link rel="stylesheet" href="views/table.css">
and <link rel="stylesheet" href="table.css">
404 error reads Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:9292/views/table.css
Thats the address its looking at.
I'm sure its something silly... but its been driving me crazy.
korzo
@korzo
Aug 27 2017 09:57
@Jonny-B Is folder views in your web root?
Jonny Blewitt
@Jonny-B
Aug 27 2017 09:59
Well, the index.erb is being called by main.rb which is in lib > assets,views,main.rb
@korzo does that little file path make sense..
@korzo, So I think main.rb is my root.
korzo
@korzo
Aug 27 2017 10:07
@Jonny-B I don't know Ruby, but isn't there some command to display path to document root?
Jonny Blewitt
@Jonny-B
Aug 27 2017 10:11
I think settings.root
but that show me the root back to my c drive not.
korzo
@korzo
Aug 27 2017 10:14
@Jonny-B Then put some image there and try to access it over http://localhost:9292/image.jpg
Jonny Blewitt
@Jonny-B
Aug 27 2017 10:15
@korzo ok will try that.
@korzo No luck with this either.
korzo
@korzo
Aug 27 2017 10:34
@Jonny-B How do you start your server?
Jonny Blewitt
@Jonny-B
Aug 27 2017 10:34
@korzo rack
korzo
@korzo
Aug 27 2017 10:36
@Jonny-B Is this rails app?
Jonny Blewitt
@Jonny-B
Aug 27 2017 10:36
@korzo sinatra
Jonny Blewitt
@Jonny-B
Aug 27 2017 10:42
@korzo I'm too burnt out. I think I'll get some sleep and take a crack at it when I wake up.
@korzo Thanks for the help.
CamperBot
@camperbot
Aug 27 2017 10:42
jonny-b sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @korzo |http://www.freecodecamp.com/korzo
edburdett1980
@edburdett1980
Aug 27 2017 11:19
Hello all! I'm having issues. Struggled with navbar on my portfolio page for hours and hours. Just wasn't working. Finally decided to see how it looked in Dreamweaver. Beautiful in Dreamweaver. What am I missing?
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 11:21
@edburdett1980 do you have a codepen link?
James Price
@JamesDavidPrice
Aug 27 2017 11:27
24610490Ab@
Mukesh Kumar Angrish
@MukeshAngrish
Aug 27 2017 11:35
Hey guys, I need some help as my Tic Tac Toe app is not working properly. I have fairly good reasons to believe that is issue is with the minmax() function as I have tried running the app without using the minmax()function and it worked. Also I have some issue with the html/css maybe as the divs move from their location when I click on them.
Guess that would help, huh?
Josebuendia
@Josebuendia
Aug 27 2017 11:55

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

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

h2 {
font-family: Lobster, Monospace;
}

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

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

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

<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>
<a>
<img class="img responsive" src= "https://bit.ly/fcc-running-cats">
</a>
</form>
</div>
It says: Your new image should be below your old one and have the class img-responsive.
but I have done that, no?

heroiczero
@heroiczero
Aug 27 2017 12:03
@Josebuendia <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> this is your old image i think
Josebuendia
@Josebuendia
Aug 27 2017 12:06
Got it, I'd to include a dash and have the 2nd image directly below.
koder3
@koder3
Aug 27 2017 12:08
@koder3
anyone here who has used VScode? i cant seem to use xmlhttprequests to extract information using an API
the same code works in jsfiddle and codepen but in VScode none of the javascript runs
heroiczero
@heroiczero
Aug 27 2017 12:09
@edburdett1980 you are using bootstrap 4 make sure you are using bootstrap 4 doc: https://getbootstrap.com/docs/4.0/components/navs/ and you need bootstrap 4.js in your Setting->Javascript if you are using bootstrap 4. FCC taught you bootstrap 3
edburdett1980
@edburdett1980
Aug 27 2017 12:21
thanks @heroiczero .
CamperBot
@camperbot
Aug 27 2017 12:21
edburdett1980 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1661 | @heroiczero |http://www.freecodecamp.com/heroiczero
edburdett1980
@edburdett1980
Aug 27 2017 12:23
OK. Thought I fixed all that but still not working right. Probably something obvious I'm missing
Mukesh Kumar Angrish
@MukeshAngrish
Aug 27 2017 12:35
Hey guys, I need some help as my Tic Tac Toe app is not working properly. I have fairly good reasons to believe that is issue is with the minmax() function as I have tried running the app without using the minmax()function and it worked. Also I have some issue with the html/css maybe as the divs move from their location when I click on them.
Josebuendia
@Josebuendia
Aug 27 2017 13:16
If button looks like this: <button type="submit">this button submits the form</button>
How is giving a button the btn class done?
korzo
@korzo
Aug 27 2017 13:21
@Josebuendia <button type="submit" class="btn">this button submits the form</button>
Josebuendia
@Josebuendia
Aug 27 2017 13:23
Thanks @korzo
CamperBot
@camperbot
Aug 27 2017 13:23
josebuendia sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 418 | @korzo |http://www.freecodecamp.com/korzo
BERTINI Nickolas
@BERTININickolas
Aug 27 2017 13:48
Hello, can someone help me with my scrollspy with bootstrap 4 ? i cant fint where is my mistake https://codepen.io/Ophe/pen/WEgaLy
kealan-parr
@kealan-parr
Aug 27 2017 15:13
Can anyone help with a Js solution?

https://www.codewars.com/kata/friend-or-foe/train/javascript

My code:

function friend(friends){
var i = 0;
while (i < friends.length) {

if (friends[i].length != 4 ) { friends.splice(i, 1) }
  i++;

}
return friends;
}

Johnny
@JohnnyBizzel
Aug 27 2017 15:17
@kealan-parr I am just looking
kealan-parr
@kealan-parr
Aug 27 2017 15:18
@JohnnyBizzel Thank you
CamperBot
@camperbot
Aug 27 2017 15:18
kealan-parr sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1744 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Aug 27 2017 15:18
@kealan-parr I think the problem is you are modifying the length of the array every time you splice
@kealan-parr I would make a copy of the array and splice that
kealan-parr
@kealan-parr
Aug 27 2017 15:19
@JohnnyBizzel Hmmmmmmmm. So I should create a new array and push it?
@JohnnyBizzel Thanks !
CamperBot
@camperbot
Aug 27 2017 15:19
kealan-parr sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:warning: kealan-parr already gave johnnybizzel points
Johnny
@JohnnyBizzel
Aug 27 2017 15:19
@kealan-parr or do that yes :D
kealan-parr
@kealan-parr
Aug 27 2017 15:19
@JohnnyBizzel Spot on :smile:
Johnny
@JohnnyBizzel
Aug 27 2017 15:20
@kealan-parr slice() method to duplicate the array (or a for loop)
Rimi.
@Codevotee
Aug 27 2017 15:22

can someone tell me why when I do this:

document.getElementsByTagName("tr")[i].innerHTML = "<a class='pageLinks' target='_blank'>" + "<td>" + tdContent + "</td>" + "</a>";

my <a></a> element is closing before the <td> element begins despite that I placed the td tags inside the a element?
image.png

kealan-parr
@kealan-parr
Aug 27 2017 15:23
@JohnnyBizzel Thanks I never knew that existed
CamperBot
@camperbot
Aug 27 2017 15:23
kealan-parr sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:warning: kealan-parr already gave johnnybizzel points
Johnny
@JohnnyBizzel
Aug 27 2017 15:24
@kealan-parr Push onto an new array is the way I think.
Rimi.
@Codevotee
Aug 27 2017 15:25
this is my tdContent variable:
var tdContent = "<strong>" + "<em>" + resultsNames[i] + "</em>" + "</strong>" + "<br>" + "<small>" + resultsDescriptions[i] + "</small>";
Johnny
@JohnnyBizzel
Aug 27 2017 15:26
@APRim05 Is that valid HTML? I did not think you could put a <td> inside an <a> tag
Rimi.
@Codevotee
Aug 27 2017 15:28
@JohnnyBizzel well i thought it was but i just searched and it said anchor elements can only wrap around most elements except from form elements
but then if i just wrap the td content, it only makes the text clickable and not the whole td
Johnny
@JohnnyBizzel
Aug 27 2017 15:33
@APRim05 Definitely not allowed
Johnny
@JohnnyBizzel
Aug 27 2017 15:38
@APRim05 I personally would not use tables for this. I would use Divs
Rimi.
@Codevotee
Aug 27 2017 15:43
ok i might change it after
Darren
@DarrenfJ
Aug 27 2017 15:50
morning fCC
Johnny
@JohnnyBizzel
Aug 27 2017 15:50
Afternoon
:clock5:
How's Canadia?
Darren
@DarrenfJ
Aug 27 2017 15:51
@JohnnyBizzel goodGood.. kinda cool and breezey. i love it
Johnny
@JohnnyBizzel
Aug 27 2017 15:51
Same here
Darren
@DarrenfJ
Aug 27 2017 15:51
nice
Johnny
@JohnnyBizzel
Aug 27 2017 15:51
:sunglasses:
I'm knackered from waking up in the night to listen to the fight.
Darren
@DarrenfJ
Aug 27 2017 15:52
oh yah woulda been late night early morning there...
Johnny
@JohnnyBizzel
Aug 27 2017 15:53
5am :zzz:
knight2
@knight2
Aug 27 2017 15:54
Anyone experienced with D3 and tooltips? I've been trying for a while but don't understand why my tooltip isn't showing on the webpage https://codepen.io/knight2/pen/mMxXzv?editors=0011
Maybe it has to do with my X and Y/left/top positioning of it?
Johnny
@JohnnyBizzel
Aug 27 2017 15:55
@DarrenfJ How's Codewars going? What rank are you?
Darren
@DarrenfJ
Aug 27 2017 15:55
@JohnnyBizzel dang! that's late/early
Johnny
@JohnnyBizzel
Aug 27 2017 15:56
@DarrenfJ And I set the alarm for 4am Doh!
Darren
@DarrenfJ
Aug 27 2017 15:56
@knight2 haven't really looked into D3 yet... sorry brutha :/
@JohnnyBizzel just started in on Codewars.. think I'n only at 7 or 6th or something... trying to do one a day.. but already see some crossover with the fCC and hackerrank challenges/algos
but I'm finding i can do them so much more quickly now
Johnny
@JohnnyBizzel
Aug 27 2017 15:57
@DarrenfJ That's good. I am 5 Kyu but tried doing some in different languages
Darren
@DarrenfJ
Aug 27 2017 15:57
want to try a few in Ruby though.. just started codecademy on Ruby and loving the language.. still cna;t really do much with it though
Johnny
@JohnnyBizzel
Aug 27 2017 15:57
:thumbsup:
Darren
@DarrenfJ
Aug 27 2017 15:58
@JohnnyBizzel yah i really like the layout and the interface.... seems pretty intiutive... or maybe i'm just more used to code challenges now
brb off for a :coffee:
:D
Amit Patel
@AmitP88
Aug 27 2017 16:00
hey guys, I'm working on the Markdown Previewer project and I'm stuck on an error that I need help overcoming.
error.png
I'm trying to use react-bootstraps' grid system for my app. I know that the error says that I likely forgot to export my component , but I don't understand that because I exported my App component at the bottom of the file. Also, since <Code> is part of react-bootstrap, I thought that as long as I imported that part of the framework that it should work. I dunno, I'm confused =/
kealan-parr
@kealan-parr
Aug 27 2017 16:01
@JohnnyBizzel This did the trick. Many thanks




    function friend(friends){
    var i = 0;
    var friendly = [];
    while (i < friends.length) {
    if (friends[i].length == 4 ) { friendly.push(friends[i]) }
      i++;
    }
    return friendly;
    }
CamperBot
@camperbot
Aug 27 2017 16:01
kealan-parr sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:warning: kealan-parr already gave johnnybizzel points
Johnny
@JohnnyBizzel
Aug 27 2017 16:04
@knight2 To do the mouseover use this technique inside your function: d3.select(this).style("fill", 'red')
@kealan-parr Yes, well done. Of course there is a filter function you can use. Investigate this for a better solution.
Stephen James
@sjames1958gm
Aug 27 2017 16:05
@AmitP88 In your import, maybe try { FormGroup }
Johnny
@JohnnyBizzel
Aug 27 2017 16:06
@AmitP88 there are a lot of components there!!
knight2
@knight2
Aug 27 2017 16:06

@JohnnyBizzel so for

    .on("mouseover", function(d) {
    return 
    tooltip.style('visibility', 'visibile');
      tooltip.html('GPD: $' + GPD[i] + " billions")
        .style("left", 400 + "px")
        .style("top", 250 + "px");
    })
    .on("mouseout", function(d) {
    return 
      tooltip.style("visibility", 'hidden');
    });

I would do d3.select(this).style('visiblity', 'visibile') and d3.select(this).html()?

Amit Patel
@AmitP88
Aug 27 2017 16:06
@sjames1958gm hmmm, it didn't work. same error
knight2
@knight2
Aug 27 2017 16:07
instead of tooltip.style?
Johnny
@JohnnyBizzel
Aug 27 2017 16:07
@knight2 I made my tooltip separately. See this pen for explanation: https://codepen.io/JohnnyBizzel/pen/jwpYVg
@knight2 I must go out now sorry
Amit Patel
@AmitP88
Aug 27 2017 16:08
@JohnnyBizzel do you think I should split this one component into several? I thought of that, but for this project I need to use state for the user input, and state's can only be used on components that dont affect other components (from what I understand)
knight2
@knight2
Aug 27 2017 16:09

@JohnnyBizzel I did as well here var tooltip = d3.select(".chart").append("div") .attr('visibility', 'hidden') .attr("id", "tooltip");

Thanks though

CamperBot
@camperbot
Aug 27 2017 16:09
knight2 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1745 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Aug 27 2017 16:09
@AmitP88 My solution has 2 components. This looks complicated.
Ok, good luck & have fun y'all
Amit Patel
@AmitP88
Aug 27 2017 16:10
@JohnnyBizzel have a good one :)
knight2
@knight2
Aug 27 2017 16:14
Still confused on my tooltip if anyone else knows what to do. I mean, a tooltip is really just a div element that is adjusted based on what you want it to do, position + the text and visibility.
Darren
@DarrenfJ
Aug 27 2017 16:21
@JohnnyBizzel and thanks for all your help in the fCC help room :D
CamperBot
@camperbot
Aug 27 2017 16:21
darrenfj sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1746 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
knight2
@knight2
Aug 27 2017 16:32
guess ill use this 630 page d3 guide to fill in the gaps that FCC didn't offer yet requires implementation of this for their code challenge. https://leanpub.com/D3-Tips-and-Tricks
Darren
@DarrenfJ
Aug 27 2017 16:34
630 pages of gap ;) lol!
thanks @knight2 for the link. will save it and likely have to gapFill too :D
CamperBot
@camperbot
Aug 27 2017 16:34
darrenfj sends brownie points to @knight2 :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @knight2 |http://www.freecodecamp.com/knight2
knight2
@knight2
Aug 27 2017 16:35
Yeah it is super thorough!
Darren
@DarrenfJ
Aug 27 2017 16:35
muchly appreciated
Stephen James
@sjames1958gm
Aug 27 2017 16:38
@AmitP88 You might look at the compiled React code and see what is being passed to the createComponent in error
Amit Patel
@AmitP88
Aug 27 2017 16:39
@sjames1958gm actually, I was able to resolve it. Trying to style my inner divs within the Cols, but having some trouble (styles aren't showing up, but there are no errors)
I gave the divs classNames and used .(className) equal my styles just like a regular css class, but it's not working for some reason
error.png
Supra01
@Supra01
Aug 27 2017 17:15
function factorialize(num){var count =num; if(count==0){return 1; }else for(var i=1; i<count; i++){num = num*i;}}return num;} factorialize(5)
Why do I have to use count?
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 17:22
how do you pm someone who isnt online?
Supra01
@Supra01
Aug 27 2017 17:23
I'm not sure why I can't just use num? Is it because the iteration will change the value of num?
Darren
@DarrenfJ
Aug 27 2017 17:23
@Supra01 lemme take a look..
gonna repost it with markdown so it's cleaner
function factorialize(num){
var count =num; 
if(count==0){
     return 1; 
     }else for(var i=1; i<count; i++){
         num = num*i;}}
        return num;
        }    
factorialize(5)
@Supra01 you could just use num for your first if.. but factorializing is like.. 5! is 5x4x3x2x1 so you need to count down...
Stephen James
@sjames1958gm
Aug 27 2017 17:27
@AmitP88 Did you get it working?
Amit Patel
@AmitP88
Aug 27 2017 17:28
@sjames1958gm yeah, I needed to import the css for react-bootstrap. I assumed it was included in the npm install but I guess not
Darren
@DarrenfJ
Aug 27 2017 17:28
@Supra01 i take it back, yer starting at 1 and counting up to num...
Amit Patel
@AmitP88
Aug 27 2017 17:28
@sjames1958gm just working on getting display: flex to work for the container now
Supra01
@Supra01
Aug 27 2017 17:29
@DarrenfJ (Sorry I don't know how to post code in Markdown)
Darren
@DarrenfJ
Aug 27 2017 17:29
@Supra01 this syntax looks off, think you are mising a { after else?
 }else for(var i=1; i<count; i++){
         num = num*i;}}
@Supra01 no worries.. here's a quick vid on it
Supra01
@Supra01
Aug 27 2017 17:33
@DarrenfJ (cool I'll look the vid up! )I'm sorry I don't follow yet. If count is equal to num. Why can't just leave it at num?
Darren
@DarrenfJ
Aug 27 2017 17:33
you can start the count at 2 too, cause anything times 1 is itself...
you can leave it at num for this; if(count==0){ return 1;
just make it if (num ...
@Supra01 but you run into an issue with this:
for(var i=1; i<count; i++){
         num = num*i;}
if you make it num here, num keeps increasing
every run through
so if it's 5.. when i =2 num become 10.. now the for loop will want to run until i = 9 (you only want it to run til i=4)
then i = 3 and it will run until i = 29 etc etc
so count in this case is an upper limit for the for loop
you can get around this by using num, but having the for loop count from num down to 1
Supra01
@Supra01
Aug 27 2017 17:40
Ok I think I got it by using num= count I can keep the i below 5
Darren
@DarrenfJ
Aug 27 2017 17:42
@Supra01 coolCool
gotta run
Supra01
@Supra01
Aug 27 2017 17:42
@DarrenfJ Thank you and I will make sure to post code in markdown
CamperBot
@camperbot
Aug 27 2017 17:42
supra01 sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 1990 | @darrenfj |http://www.freecodecamp.com/darrenfj
Darren
@DarrenfJ
Aug 27 2017 17:42
oh thanks man @Supra01 yah markdown just makes it easier to read ;)
CamperBot
@camperbot
Aug 27 2017 17:42
darrenfj sends brownie points to @supra01 :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @supra01 |http://www.freecodecamp.com/supra01
Darren
@DarrenfJ
Aug 27 2017 17:42
ok I'm off for an afternoon of lollygagging and podcasts ;)
Stephen James
@sjames1958gm
Aug 27 2017 18:45
@DarrenfJ You leave and so does everyone else :)
Morchid Chellali
@Morched23MJ
Aug 27 2017 19:26
I want to fix position of the two h1 in my Pomodoro project, because when the timer starts they keep moving, and thus the icon between them moves too. I set position to absolute but they collapse when the screen gets smaller.
Here is the pen: https://codepen.io/Morched23MJ/pen/PKeQYQ
I know I could use media queries to fix it when the screen gets smaller, but I would see if there is a better way to do it.
Daniel
@dkapexhiu
Aug 27 2017 20:01
@dkapexhiu
hi to all! i've created a database with table in mysql localhost and wanted to connect this db with reactjs application.. how to do that?
here's the reactjs app: https://codesandbox.io/s/BBVxqNVRo
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:15

@tiagocorreiaalmeida

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
< class="background">
  <div class="green"><audio class="greenaudio" src='https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'></audio></div>
    <div class="red"><audio class="redaudio" src='https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'></audio></div>
   <div class="yellow"><audio class="yellowaudio" src='https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'></audio></div>
  <div class="blue"><audio class="blueaudio" src='https://s3.amazonaws.com/freecodecamp/simonSound4.mp3'></audio></div>
  <div class="vertical"></div>
  <div class="horizontal"></div>
    <div class="panel">
      <p>Simon</p>
      <div class="state"><a></a></div>
            <div class="row">
      <div class="result"><a></a></div>

       <div>       <button class="start">start</button></div>
               <div><button class="strict">Strict</button></div>
      </div>
      <div class="power">
        <i class="fa fa-power-off"></i>
      </div>
      </div>
    </div>

got this html

but now I need 2 creat 1 div to get the 4 colors inside , red yewllow,blue, green
if I create the needed div it goes all black any idea why?
Gersho
@Gersho
Aug 27 2017 20:35
@tiagocorreiaalmeida i think we'd need to see the css too (link your pen ?) also you don't need to have your audios in your div's would probably be easier to read if you load them at the top/bottom of your body along with the scripts
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:38
@Gersho https://codepen.io/tiagocorreia/pen/QMVRxr if possible to look into it
I need to create a div so I can use those 4 divs to click on
Gersho
@Gersho
Aug 27 2017 20:45
i don't understand why you need additional div, you can already grab input from those (tho my personal preference would put them id each)
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:46
yeah maybe id would be smarter you are right nm
@Gersho meh still need it to do it this way
$(".row-button div").click(function() {
based on a div click I get the div value
bla bla
but its ok
since i only use the id's one
but isnt using id a bad idea?
Gersho
@Gersho
Aug 27 2017 20:48
that seem complicated to me, but i guess everyone has it's own preference, i use $("#id").on("click",function() {
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:49
yeah but I have 4 ids
Gersho
@Gersho
Aug 27 2017 20:49
with an html like that
    <audio id="audio-green" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" autostart="false" ></audio>
    <audio id="audio-red" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" autostart="false" ></audio>
    <audio id="audio-yellow" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" autostart="false" ></audio>
    <audio id="audio-blue" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" autostart="false" ></audio>


    <div class='green-off' id='green'></div>
    <div class='red-off' id='red'></div>
    <div class='yellow-off' id='yellow'></div>
    <div class='blue-off' id='blue'></div>
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:49
that would make me create 4 click function?
Gersho
@Gersho
Aug 27 2017 20:49
yes
is that why you said using id is a bad idea ?
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:49
dont like that :p
Gersho
@Gersho
Aug 27 2017 20:50
i have ~8 lines per buttons, i can understand your reluctance
kinda want to have a look at it when you're done :) i'm sure i'll learn some interesting stuff
oh and in case you were wondering, yes i had 9 click function for the tictactoe
Tiago Correia
@tiagocorreiaalmeida
Aug 27 2017 20:51
@Gersho is there a way to check if a div has a id attr?
Gersho
@Gersho
Aug 27 2017 20:52
assuming you already know where to look (you triggered it via it's class for exemple) you should be able to find that info in the DOM
but i can't help you much on that beside telling you it exists and go look the doc :P
Randell Dawson
@RandellDawson
Aug 27 2017 21:41
@tiagocorreiaalmeida - Are you asking how to target a div with a specific id?
Morchid Chellali
@Morched23MJ
Aug 27 2017 22:22
@tiagocorreiaalmeida you could target your element and use the method hasAttribute()
var hasId = $('a').hasAttribute('id') returns true if it has, false otherwise.
Moisés Man
@moigithub
Aug 27 2017 22:33
u can also work with data attribute
Luke-Rogerson
@Luke-Rogerson
Aug 27 2017 22:49
Hi everyone
I've been finishing up the "Build a Personal Portfolio Webpage".
The HTML and CSS is a mess, but I've learnt a lot.
I'm just wondering if anyone can advise me why my "Contact" container is of a different size to my "About" and "Portfolio" ones? And how can I make it the same size as the others (ie. with a nice margin on both sides)?
Here's a link to my CodePen: https://codepen.io/CarpetMatt/pen/qXJWje
Morchid Chellali
@Morched23MJ
Aug 27 2017 22:57

You can add the css code:

margin-right: 120px;
margin-left: 120px;

to the id #contact, so it looks exactly the same as the other containers.

@Luke-Rogerson
Moisés Man
@moigithub
Aug 27 2017 23:04
<div class="container">
    <div id="about"> ....</div>
    <div id="portfolio"> ....</div>

</div>

    <div id="contact"> ....</div>  <---------------------
maybe if u move ur "contact" block inside the same "container" @Luke-Rogerson