JavaScript Calculator Project - Front End Libraries Projects - Help Needed

JavaScript
1

Hi, everyone.

I’m developing this locally and can hopefully find a free hosting solution. I also made a GitHub repository and pushed the files onto it.

I’m having problems, though. Right now nothing is rendering to the browser (I’m serving it locally it on LiveServer for testing). And I can’t figure out what I’m doing wrong. I hope someone on here can help me out with this.

I have my script tag’s type set to text/babel module (the script tag for loading the JS code into the page); I’m also wondering if that’s okay or it’s a problem for the HTML.

Thanks in advance for any replies and help.

Edit: Whenever I console.log anything, it doesn’t appear in the console. Even doing so below the imports doesn’t do anything. What’s going on and how do I fix this?

2

I would suggest you use create react app.

3

I want to have control over the version of ESLint the project uses as well as to have everything locally.

I tried running the eject command before but then I ran the start command and had errors. If I do want to run eject, how should I test the app? Would LiveServer suffice?

And is there no way to get this to work if I don’t do it with create react app? I don’t want to tear down the GitHub repo, the SASS script, ESLint config and everything else after the work I’ve put into it.

4

Why do you need to control the version? As for the config, you should be able to extend it. Random article, google search

As far as I can tell you are not adding React or Babel anywhere?

I would suggest you use a build step if nothing else, you can try a search for something like minimum react setup and see if there are any useful articles.

5

I import React at the top of JS code, along with some other stuff, and I have “text/babel” set as the script type (along with “module”; I wonder if this is really okay). So I think I’m adding in React and Babel. I don’t get errors about React being undefined or about “<” characters being unexpected in the code, so yeah.

How else do I add React and Babel? Is there something else I need to do? I also installed Babel using NPM and set it as the parser in my .eslintrc.json file.

And I just like using the latest version of things. With create-react-app, I get an earlier version of ESLint and I don’t like that. Sorry for being picky.

6

Yes but where is that code being imported from? It won’t magically get React and Babel with that code. You have to actually load the libraries that you use in the browser. As for npm packages they usually get bundle up with the rest of the code using some build step. I mean where are you actually loading the React, Babel, or any package code from?

I would really suggest you drop the approach you are taking now and go with something more “normal”. I have never really used React without a build step so I’m not the right person to help with that. It is not something I would spend too much time on as it is not how real apps are made.

Sure React has some “drop in and use” support but that is just so you can play around with it or add some tiny bit of React into an existing web site. It is not meant for building complete React apps.

That is not a very good reason to go through so much trouble for. Why do you need the latest version? What does it give you?

7

I have a package called “react-is” in node_modules. It has react-is.development.js and react-is.production.js files inside it.

As for why I want the latest version of ESLint: I just feel it’s better to use the latest features. I also have the latest version of Node installed.

I’d also rather have control over the linter configuration. This is my current configuration (.eslintrc.json):

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "standard"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020,
        "parser": "babel",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "prefer-const": "error",
        "space-before-function-paren": "off",
        "yoda": "error",
        "eqeqeq": "error",
        "no-var": "error"
    }
}

I’m currently reading the Create React App documentation and I just came across this:

Note that any rules set to "error" will stop the project from building.

I like having prefer-const set to “error”. And I’ve also heard that in modern JavaScript, that’s the recommended setting because preferring const is better.

Do I have to put the script tags for React into the HTML document? I had them before but I still didn’t have anything being rendered to the browser.

Edit: Just installed React using NPM, just in case I needed to.

8

OK, so locally you may have access to the libraries, but what about the project as it is running in the browser when you upload it to some host? Where is it going to get the library code from? That is why we use a build step so you get a bundle(s) with all the code inside it.

Anyway, I’m not sure I can be of much help to you in your current endeavor. I would still suggest you use a build step (Webpack, Parcel, Snowpack, etc.).

9

If I install Webpack, will that resolve the build step issue?

If I import React, do I still need these script tags in the HTML?

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

And I just installed Webpack.

10

Well, it will give you a build tool.

If you want to learn how to set up a React project from the ground up using a build tool there are articles/tutorials out there. Just know, it is kind of a lot of work compared to using create react app. You can look at the search results from the minimum react setup link I gave.

You need the React library code coming from somewhere. I don’t know if the import will work when you load the libraries like that. You might have access to React on the Window object maybe? Like I said I have never used React like that and I’m not going to. So I can’t really help you without having to research it.

11

I created a new project with npx create-react-app command and copied all of my code in. Needed to make some changes and add in a button for +, but I got it to at least show up.

But I can’t get the buttons I’ve added event listeners for to work correctly. The number and equals buttons. I also need to need to fix the app’s look so that the buttons don’t all appear on one line, but I think I’ll try to fix that later.

Here’s the new repository link. Any help is appreciated. Thanks in advance.

Note: right now when I click on anything at all in the keypad, the display element disappears. And when the page loads, the display should have “0” in it, but it doesn’t.

What do I need to do to fix the functionality so far?

Edit: @lasjorg By the way, React does work if you just add the script tags; I was getting an “undefined” error on it from ESLint but then I followed this tutorial on the React docs that shows you can just create a regular HTML document and add in the two script tags for React and ReactDOM respectively and it’ll work, and it did work.

Anyway, yeah, I really need help on actually getting the calculator functionality to work.

12

  1. Your styles are not being applied because they are scoped to a main element. If you change the React.Fragment element in App.js to a main element the styles will be applied. I think the container is just collapsing, try setting a height on main #display.

  2. You have your handler functions (handleNumberButtonClick, handleEqualsButtonClick) inside the useEffect hook. Move them out and just keep the event listening setup code inside the hook.

  3. In the handleNumberButtonClick function event.target is the button element and it does not have a value attribute. You can use event.target.innerText to get the text value instead.

  4. The expr-eval library is throwing an error in your handleEqualsButtonClick function. I didn’t really look at the library or what values it is expecting but maybe it is just missing the operator in the string it is parsing?

13

Thanks for the reply.

  1. I fixed that by nesting the root div inside a main element inside the actual HTML document. Before I set that height, I want to fix the Display.props problem somehow.

  2. Thanks. I’ll fix that. So it’s fine to assign multiple handlers in the same useEffect call?

  3. So this is why I have undefined in the Display component for its properties?

  4. I’ll have to look at what error it’s throwing first.

Anyway. The reason I opened another thread for this is that I thought I should make a different for asking about functionality since this one was about nothing being rendered to the screen. Was I overthinking things, then? And yeah, the two threads probably should be merged.

14

The code in the repository is updated now. I made some changes to the styling and to App.js.

I tried adding a Boolean wasOperatorClicked to state and set it to false initially, and toggled it in the operator click handler. But it gets set to to true even when I click on a second number button after having clicked on one already. I wonder if it’s a bad idea to have this variable in state. I’ll try to see if making it a regular variable will help.

Either way, I’d like some help in solving this problem. Thanks in advance.

15

As the title says, my calculator’s Display doesn’t work as expected; I passed in values for p elements to be displayed on the calculator’s screen, so that when the page first loads there’s a “0” there, but on page load the display screen is empty. And one I click something, the display element just collapses. I need help figuring out what I did wrong and how I should fix it.

Code is on GitHub here.

I also need to know if it’s okay to attach multiple event listeners in the same useEffect effect, or if I should make a different useEffect call for each event listener I need to add. Also, is it a good idea to use document.addEventListener or should I do it a different way?

Edit:
I tried doing console.log(Display.props.currentValue) in Display.js, here:

import React from "react";
import PropTypes from "prop-types";

const Display = props => {
  return (
    <div id="display">
      <p id="stored">{props.storedValue}</p>
      <p id="current">{props.currentValue}</p>
    </div>
  );
};
Display.propTypes = {
  storedValue: PropTypes.string.isRequired,
  currentValue: PropTypes.string.isRequired
};
console.log(Display.props.currentValue);

export default Display;

And it gives me this error:

TypeError: Cannot read property 'currentValue' of undefined

How did Display.props become undefined? I also experimented a bit by putting Display component’s definition inside App.js, but that didn’t work either.

Really. How do I fix this?

16

Hey Osman.

  • there is a missing dependency expr-eval. You import it in App.js, but it is in the devDependencies

  • when I import it correctly, the app breaks when I want do a calculation

Error: unexpected TEOF: EOF
handleEqualsButtonClick
src/js/components/App.js:212

  209 | const handleEqualsButtonClick = event => {
  210 |   if (event.target.textContent === "=") {
  211 |     setStoredValue(storedValue.concat(currentValue));
> 212 |     setCurrentValue(parser.parse(storedValue).evaluate());
  213 |     setStoredValue("");
  214 |   }
  215 | };

I also get this problem when running it on codesandbox, so I think it would be important to fix this first, so other people could help you too.

Looking forward to helping you. :slightly_smiling_face:

17

I gave an answer in your other thread as well. Not sure if we should merge the threads or what?

18

I fixed that style problem by adding a main element in the HTML.

About the expr-eval library: after adding it to dependencies instead of devDependencies, what else should I do to fix the error? I don’t have operator button handling code yet because I wanted to get the props being passed to the Display component and the the number buttons working first. I guess I shouldn’t have defined the equals button handler yet either.

19

@miku86 I’m not finished implementing the logic for all of the buttons yet.

But there are problems in what I did try to do, too. When I click on two number buttons, the Boolean I have in state that should be set to true when an operator button is clicked gets toggled on its own for some reason. Then the current value gets replaced and the string that should appear at the top where the actual calculation should go doesn’t get updated.

The code in the repository is updated now. Just look there to see what I have.

@lasjorg I gave a reply in the thread too.

And yeah, I think the two threads should be merged.

20

In addition to what I said above: for some reason, after enough button clicks, random stuff from the CSS or the HTML appears on the display.

I can’t figure out how to have the number a user clicks or triggers right after clicking an operator appear at the top in the #stored paragraph element and also have its value replace the textContent or innerText of the #current paragraph (the current value). I’m trying to implement the functionality for the display that’s found in the calculator app on Windows desktops and laptops.

Would someone please help me out here? Right now when I click on a number, then an operator, and then a number, what happens is that the second number gets appended to the current value paragraph instead of replacing it like I want it to and it doesn’t get appended to the stored value string in the top paragraph element.