These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Oct 2018
newmoon
@newmoon
Oct 01 2018 00:11
@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
@newmoon Thank you!
jdc20181
@jdc20181
Oct 01 2018 01:45
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
Is there an idiot-proof way to store and get data with zero back-end experience?
jdc20181
@jdc20181
Oct 01 2018 01:47
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
I'll take al ook
jdc20181
@jdc20181
Oct 01 2018 01:49
You will need some JS knowledge maybe a few other flavors that are pretty easy though.
Aaron Benjamin
@abenjamin765
Oct 01 2018 01:50
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
:)
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:01
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
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
ah
jdc20181
@jdc20181
Oct 01 2018 02:02
What flavor are you doing this all in?
Angular? Node?
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:03
I'm building pages in Jekyll hosted on GitHub Pages
jdc20181
@jdc20181
Oct 01 2018 02:03
ohhhhhhh
so js?
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:03
yeah
jdc20181
@jdc20181
Oct 01 2018 02:03
alright give me a few mins to help ya
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:04
you rock
jdc20181
@jdc20181
Oct 01 2018 02:04
This may at least get you working towards the right direction
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:05
thnx!
jdc20181
@jdc20181
Oct 01 2018 02:05
np
Aaron Benjamin
@abenjamin765
Oct 01 2018 02:26
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
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
@AmitP88 you have a demo?
Amit Patel
@AmitP88
Oct 01 2018 03:20
@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
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
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
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
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
oh sorry, i saw you type "rect" and thought it said "react" :-x
Amit Patel
@AmitP88
Oct 01 2018 03:48
ah lol
Corey Lewis
@cursiv3
Oct 01 2018 03:50
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
that's what I was thinking too, if it was a bug in the bundle.js
Corey Lewis
@cursiv3
Oct 01 2018 03:58
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
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
I'm stumped
Claudio Restifo
@Marmiz
Oct 01 2018 05:25
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
@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
you aren't programming unless it does. Your just typing :P
Amit Patel
@AmitP88
Oct 01 2018 05:55
lol
I know, but still :P
Amit Patel
@AmitP88
Oct 01 2018 08:10
Christopher
@bradley1492
Oct 01 2018 10:16

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

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
@thodorisanta what about flexbox?
.radios{
  display: flex
}
Brad Collins
@BradleyCollins
Oct 01 2018 20:46
I used CSS Grid for this, but I assume some margin would help?
Spyrantis Theodoros
@thodorisanta
Oct 01 2018 20:48
margin pushes the whole like including the "question" @BradleyCollins
AJ Brommy
@AJ-Brommy
Oct 01 2018 21:01
@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
@thodorisanta you can use margin-left on the .ratings
Spyrantis Theodoros
@thodorisanta
Oct 01 2018 21:04
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
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
@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
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
@thodorisanta i think that is the closest you are gunna get without changing the font size.
Gianpaolo
@gianpaolodatu
Oct 01 2018 23:39
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
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
alright, I tried again ,removing the comma and the semicolon, but it doesn't work
AJ Brommy
@AJ-Brommy
Oct 01 2018 23:42
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);