These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Oct 2018
newmoon
@newmoon
Oct 01 2018 00:11 UTC
@jsjoe82 Three options:
  • remove width: 100vw from your header
  • set a margin of 0 for your body and remove the padding from your header.
  • set a margin of 0 for your body and add box-sizing: border-box to your header.
It's off center because vw is an absolute unit and will add on to existing padding + margins
I guess there's a 4th option too of using width: calc(100vw - 56px); for your header. The 56px is the sum of your header's padding and the body's margin.
jsjoe82
@jsjoe82
Oct 01 2018 00:26 UTC
@newmoon Thank you!
jdc20181
@jdc20181
Oct 01 2018 01:45 UTC
I know its late but could use a bit of help or advice at least
The site has a lot of white space in the right side of the screen on ipads and iphones
I haven't applied the font scaling fix yet so the menu is still overlapping excuse that part I am now trying to focus my efforts on finding out what is wrong with the extra white space and the fact it isn't stretching.
Aaron Benjamin
@abenjamin765
Oct 01 2018 01:47 UTC
Is there an idiot-proof way to store and get data with zero back-end experience?
jdc20181
@jdc20181
Oct 01 2018 01:47 UTC
You can use local storage or if you are comfortable try out firebase
Firebase is honestly so close to being a front end database system in all honesty
Aaron Benjamin
@abenjamin765
Oct 01 2018 01:49 UTC
I'll take al ook
jdc20181
@jdc20181
Oct 01 2018 01:49 UTC
You will need some JS knowledge maybe a few other flavors that are pretty easy though.
Aaron Benjamin
@abenjamin765
Oct 01 2018 01:50 UTC
I have a pretty basic understanding of getting data with fetch from a database, but i've never written data
Woot. I made a Firebase project and nothing appears to be broken or on fire... we're off to a good start
jdc20181
@jdc20181
Oct 01 2018 01:54 UTC
:)
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:01 UTC
ok... i think i have some data added to firebase... is there a pretty simplistic guide to fetch it and write to it? The docs are way over my head.
jdc20181
@jdc20181
Oct 01 2018 02:02 UTC
Let me see what I can find I don't mess with databases much I just know FB was always easy to work with with my developer friends
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:02 UTC
ah
jdc20181
@jdc20181
Oct 01 2018 02:02 UTC
What flavor are you doing this all in?
Angular? Node?
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:03 UTC
I'm building pages in Jekyll hosted on GitHub Pages
jdc20181
@jdc20181
Oct 01 2018 02:03 UTC
ohhhhhhh
so js?
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:03 UTC
yeah
jdc20181
@jdc20181
Oct 01 2018 02:03 UTC
alright give me a few mins to help ya
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:04 UTC
you rock
jdc20181
@jdc20181
Oct 01 2018 02:04 UTC
This may at least get you working towards the right direction
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:05 UTC
thnx!
jdc20181
@jdc20181
Oct 01 2018 02:05 UTC
np
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:26 UTC
I broke everything :(
Is there a simpler way to host a json file i can read/write too?
was looking at jsonstore.io ...but I can't seem to figure that out either
Amit Patel
@AmitP88
Oct 01 2018 02:29 UTC
hey guys, anyone finish the D3 treemap project?
I'm struggling trying to get the treemap project test 5 to pass
        // Create SVG element and append to container element. Pass in height and width variables as attributes
        const svg = d3.select(".container")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

        svg.append('g')
          .selectAll('rect')
          .data(rootNode.descendants())
          .enter()
          .append('rect')
          .attr('x', (d) => d.x0)
          .attr('y', (d) => d.y0)
          .attr('width', (d) => d.x1 - d.x0)
          .attr('height', (d) => d.y1 - d.y0)
          .attr("class", "tile")
          .attr("data-name", (d) => d.data.name)
          .attr("data-category", (d) => d.data.category)
          .attr("data-value", (d) => d.data.value)
          // Color code each rect element according to category
          .style("fill", (d) => {
              switch(d.data.category){
                  case 'Wii':
                    return 'orange';
                    break;
                  case 'NES':
                    return 'purple';
                    break;
                  case 'X360':
                    return 'lightgreen';
                    break;
                  case 'PS3':
                    return 'gray';
                    break;
                  case 'GB':
                    return 'pink';
test-5.png
Claudio Restifo
@Marmiz
Oct 01 2018 03:17 UTC
@AmitP88 you have a demo?
Amit Patel
@AmitP88
Oct 01 2018 03:20 UTC
@Marmiz I have a github, but not a gh-pages yet
I usually make the gh-pages branch last once all tests have passed
the thing is, the data-name, data-value-, and data-category attributes load correctly within the rect elements, yet the test won't pass (no errors in console either)
someone else had this same issue in the forums, but there weren't any answers
Claudio Restifo
@Marmiz
Oct 01 2018 03:38 UTC
just by looking is hard to find a reason why the test fails. Any other information in the error?
Amit Patel
@AmitP88
Oct 01 2018 03:41 UTC
Could not find property 'data-category' in tile: expected null to not equal null
AssertionError: Could not find property 'data-category' in tile: expected null to not equal null
    at s.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:521:1134)
    at s.e.(anonymous function) [as equal] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:457:126)
    at Function.n.isNotNull (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:546:1253)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:622:211940
    at NodeList.forEach (<anonymous>)
    at r.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:622:211817)
    at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:570:31654)
    at o.f.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:570:31590)
    at m.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:570:37160)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:570:38022
this was below the test error
in the pic
Corey Lewis
@cursiv3
Oct 01 2018 03:44 UTC
expected null to not equal null, so your data-category prop is null and it shouldn't be
are you setting those on the jsx?
Amit Patel
@AmitP88
Oct 01 2018 03:45 UTC
yeah, via d3 method .attr()
but the thing is, when I inspect the rect elements, the properties are there
(see pic above)
Corey Lewis
@cursiv3
Oct 01 2018 03:47 UTC
oh sorry, i saw you type "rect" and thought it said "react" :-x
Amit Patel
@AmitP88
Oct 01 2018 03:48 UTC
ah lol
Corey Lewis
@cursiv3
Oct 01 2018 03:50 UTC
yeah if it's showing up in the inspector and the test fails I'd say that's a problem with the test but
Amit Patel
@AmitP88
Oct 01 2018 03:52 UTC
that's what I was thinking too, if it was a bug in the bundle.js
Corey Lewis
@cursiv3
Oct 01 2018 03:58 UTC
I wonder if the test is running before d3 has finished rendering
so the test sees those properties aren't on the HTML cause d3 isn't done
Amit Patel
@AmitP88
Oct 01 2018 04:05 UTC
oh you know what, let me move the test cdn to the bottom of the body tag
didn't work
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>D3 Tree Map</title>
</head>
<body onload = "getData()">
    <h1 id="title">Video Game Sales</h1>
    <h3 id="description">Top 100 Most Sold Video Games Grouped by Platform</h3>

    <div class="container"></div>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
Amit Patel
@AmitP88
Oct 01 2018 04:43 UTC
I'm stumped
Claudio Restifo
@Marmiz
Oct 01 2018 05:25 UTC
still nothing?

try making it in codepen and see if it works :)
if so you know is some kind of test/your page interaction.

if not is something in your code @AmitP88

Amit Patel
@AmitP88
Oct 01 2018 05:40 UTC
@Marmiz thanks, i'll give it a shot :) but first i'll take a quick break. my head hurts lol
Brad
@bradtaniguchi
Oct 01 2018 05:41 UTC
you aren't programming unless it does. Your just typing :P
Amit Patel
@AmitP88
Oct 01 2018 05:55 UTC
lol
I know, but still :P
Amit Patel
@AmitP88
Oct 01 2018 08:10 UTC
Christopher
@bradley1492
Oct 01 2018 10:16 UTC

Hello, I think I have a bit of a dodgy question, but why is sass claiming to add variables to css, when css itself has variables to assign to?

is it because sass variables are faster to write?

Morchid Chellali
@Morched23MJ
Oct 01 2018 11:45 UTC
const units = [
    {unit: "ONE HUNDRED", val: 100},
    {unit: "TWENTY", val: 20},
    {unit: "TEN", val: 10},
    {unit: "FIVE", val: 5},
    {unit: "ONE", val: 1},
    {unit: "QUARTER", val: 0.25},
    {unit: "DIME", val: 0.10},
    {unit: "NICKEL", val: 0.05},
    {unit: "PENNY", val: 0.01}
  ];
function checkCashRegister(price, cash, cid) {
  var change = cash - price;
  let state = {
    status: null,
    change: []
  }
  let drawer = cid.reduce((acc, curr) => {
    acc.total += curr[1];
    acc[curr[0]] = curr[1];
    return acc;
  }, { total: 0 });

  if (drawer.total == change) {
    state.status = "CLOSED";
    state.change = cid;
    return state;
  }

  if (drawer.total < change) {
    state.status = "INSUFFICIENT_FUNDS";
    return state;
  }

  let changeArr = units.reduce((acc, curr) => {
    let value = 0;
    while (drawer[curr.unit] > 0 && change >= curr.val) {
      change -= curr.val;
      drawer[curr.name] -= curr.val;
      value += curr.val;
    }
    if (value > 0) acc.push([curr.unit, value]);
    return acc;
  }, []);

  if (changeArr.length == 0 || change > 0) {
    state.status = "INSUFFICIENT_FUNDS";
    return state;
  }
  state.status = "OPEN";
  state.change = changeArr;
  return state;
}

// Example cash-in-drawer array:
// [["PENNY", 1.01],
// ["NICKEL", 2.05],
// ["DIME", 3.1],
// ["QUARTER", 4.25],
// ["ONE", 90],
// ["FIVE", 55],
// ["TEN", 20],
// ["TWENTY", 60],
// ["ONE HUNDRED", 100]]

console.log(checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]));
What's wrong with my Cash Register? It does not pass the third test from the challenge: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register/
newmoon
@newmoon
Oct 01 2018 15:18 UTC
Object {
  DIME: 3.1,
  FIVE: 55,
  NICKEL: 2.05,
  ONE: 90,
  ONE HUNDRED: 100,
  PENNY: 1.01,
  QUARTER: 4.25,
  TEN: 20,
  total: 335.40999999999997,  // floating point issue
  TWENTY: 60
}
@Morched23MJ You may want to start investigating with drawer.total. When it has a floating point arithmetic problem like that, this code may not function as expected:
  if (drawer.total == change) {
    state.status = "CLOSED";
    state.change = cid;
    return state;
  }

  if (drawer.total < change) {
    state.status = "INSUFFICIENT_FUNDS";
    return state;
  }
Spyrantis Theodoros
@thodorisanta
Oct 01 2018 19:32 UTC

How can i make my radio buttons to be in the same line with the "How likely is that you would recommend freeCodeCamp to a friend?" question?

https://codepen.io/oshikurou/pen/ePNQmo?editors=1100

Nicolas Ramirez
@kamatheuska
Oct 01 2018 20:27 UTC
@thodorisanta what about flexbox?
.radios{
  display: flex
}
Brad Collins
@BradleyCollins
Oct 01 2018 20:46 UTC
I used CSS Grid for this, but I assume some margin would help?
Spyrantis Theodoros
@thodorisanta
Oct 01 2018 20:48 UTC
margin pushes the whole like including the "question" @BradleyCollins
AJ Brommy
@AJ-Brommy
Oct 01 2018 21:01 UTC
@thodorisanta pretty sure I used float:left;
and text-align:left;
so you float the button left of the label
Nicolas Ramirez
@kamatheuska
Oct 01 2018 21:02 UTC
@thodorisanta you can use margin-left on the .ratings
Spyrantis Theodoros
@thodorisanta
Oct 01 2018 21:04 UTC
note that everything is alright except for the radio buttons. they're not straight with the label
@AJ-Brommy
TCzechowski
@TCzechowski
Oct 01 2018 22:30 UTC
Hey guys! I want to complete Basic JavaScript: Profile Lookup section
I already checked how it should be done, but could you please tell me why my previous version of code wasn't working?
for (var x = 0; x < contacts.length; x++) {
  if  (contacts[x].firstName === name)  {
    if  (contacts[x].hasOwnProperty(prop))  {
        return contacts[x][prop];
    } else {
        return "No such property";
    }
  } else {
    return "No such contact";
  }
}
AJ Brommy
@AJ-Brommy
Oct 01 2018 23:31 UTC
@thodorisanta i see what you mean. I didn't really worry about it, it didn't look too bad with mine, maybe font sizes and such. I tried vertical-align: middle. But that doesn't look quite right either. You also haven't used labels as I did, I used actually label tags for each one, that should give you more to play with. Like paddings and such. Maybe that can solve it?
@thodorisanta just found out you can use units, and negative units, so you can do this vertical-align: -1px; which looks a little better.
Gianpaolo
@gianpaolodatu
Oct 01 2018 23:38 UTC
Hey guys could you explain me something?
this is the text from "Basic JavaScript: Accessing Object Properties with Bracket Notation"
AJ Brommy
@AJ-Brommy
Oct 01 2018 23:38 UTC
@thodorisanta i think that is the closest you are gunna get without changing the font size.
Gianpaolo
@gianpaolodatu
Oct 01 2018 23:39 UTC
Screenshot from 2018-10-02 01-32-37.png

To test what was written, I made an object in chrome's console. this is the code I wrote:
var obj = {
"nospace": "test",
}

When I tried to output the value of nospace in the console with:
console.log(obj[nospace]);

It gave me this error:
"Uncaught ReferenceError: nospace is not defined
at <anonymous>:1:17"

Is there a mistake in the text, or am I doing something wrong? please help

AJ Brommy
@AJ-Brommy
Oct 01 2018 23:40 UTC
take out the ","
you only have one line, so it is not needed
second, make you you finish with a ";"
i'm not sure if you need to use "nospace" or 'nospace' even tho there is no space
Gianpaolo
@gianpaolodatu
Oct 01 2018 23:42 UTC
alright, I tried again ,removing the comma and the semicolon, but it doesn't work
AJ Brommy
@AJ-Brommy
Oct 01 2018 23:42 UTC
I haven't got this far yet, but I've experience with other languages
ok
I've not used the console.log.. do you need a command like print?
I mean like if it was a basic variable say var = "name"; and you wrote console.log(var); would it write out name?
or does it need something else like console.log(print var);