JS calculator-bleeding edge alpha

This is my calculator. There are many like it but this one is mine.

Very rough, just passed last night. No libraries but I did do some fun things with the CSS. Ill do another version in React at some point. lots of bugs still, but please dont hold back.

[https://codepen.io/Magopolis/pen/VwzqBxW?editors=0010](https://JS Calculator)

Your calculator looks good @magopolis. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
      (The one for HTML misses things which is why I recommend W3C)
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Run the following calc, 7 / 3 =
    you may want to contain the answer
    and while that calculation works, 7 / 0 = , gives a surprising answer
  • There’s a horizontal scrollbar on large and small screens
  • it’s a nit but on a regular sized device the “phone” will fit. Maybe adjust so the user doesn’t have to scroll to see it.
1 Like

Your calculator looks good @magopolis. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
      (The one for HTML misses things which is why I recommend W3C)
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Run the following calc, 7 / 3 =
    you may want to contain the answer
    and while that calculation works, 7 / 0 = , gives a surprising answer
  • There’s a horizontal scrollbar on large and small screens
  • it’s a nit but on a regular sized device the “phone” will fit. Maybe adjust so the user doesn’t have to scroll to see it.

Thanks so much for the feedback. I think ‘7/0=70’ is appending 7 with the ‘0’ from the innerHTML in the display. I knew about W3C but forgot about it. 7/3 is an easy fix . I literally got to the point where I was afraid to fix things because of the ripple effect so stuff like that which will make it presentable, I put on the back burner.

Horizontal scroll bar for the calculator or for the display screen? At some point a few iterations down the line I want to make a cellphone app for it where it will all be ditted to the device screen. I think I can fix the display with a limit to string length and maybe a line to use scientific notation. (Ill have to research my options. Thanks again, all great comments!
Mike

It’s a good calculator. Working normally. But when you hover your mouse on top of those buttons, it spins.
I suggest you to make it enlarge instead of make it spin.

Yeah, this is sort of a crazy concept car of a project. I submitted it ASAP when it passed. Was afraid I would break it again (I would have, and I will).

I played around with a few hover effects and will need to update those. I appreciate the comment. You think enlarge on hover or on click?

As it stands right now the code is messy: variables that aren’t even in use, greyed out console.logs, This is the messy desk version, I had fun using JS to manipulate CSS, to put movement on :hover, make them swell by moving the border radii, then change to white on click. I appended the CSS object needlessly. I created a pen to explore the button tag as a JS object. I even figured out (but cant remember how i did now) to log every single “key” in the prototype button obj onto the console. The “this” value in foreEach() is still kind of my white whale. React takes care of scope and bootstrap offers a lot of tools but I never felt like the JS cert on FCC showed me the web tools of JS, though it was super thorough in general. So This was all about building it ground up with no libraries-counter intuitive I know seeing as how its the library cert but I wanted to get deeper into the code. I used a marked.js library in the last project but I still didn’t understand the deeper language of how to get mouse clicks to append strings on the screen. So this is a jerry-rig extraordinaire. held together with duct tape. I made the “DOT” button to eliminated the (problem) of scope in the question of “why isn’t my decimal showing up”.

const testScope was created on an earlier vesrion and the inner HTML gave me clues along with the countless logs like “line 35, conditional works!”.
Here is a pen I created just to practice with buttons.

Button practice

I was thinking of changing the black backing of the calculator body with a lighter color to accommodate the button shadows. Maybe some sounds.

Thanks again, I really appreciate you taking the time to look at it.