Calculator Tutorial - HTML, CSS, and JavaScript

Veröffentlicht am: 18 November 2022
auf dem Kanal: Jeff Claybrook

24,255

799

TLDR;
Semantic HTML
CSS grid
Vanilla JavaScript with arrow functions

Demo link:
https://jeffclaybrook.github.io/Calcu...

Source code:
https://github.com/jeffclaybrook/Calc...

In this tutorial, you'll create a very basic calculator app using HTML, CSS, and Javascript. This tutorial is intended for beginners and anyone who appreciates clean symmetrical code.

Overview
The calculator is styled using CSS grid
The screen portion is a single input tag with a class and an ID. The class is for styling and the ID is used for accessing the element in JavaScript
Each button has a class of either 'symbol' or 'number', which are used for styling purposes
Each button also has an onclick function assigned to it
The wipe() function is used to clear the display by resetting the value of the input tag to an empty string
The show() function is used to type the corresponding value of the clicked button (represented as n in js file) into the input tag
The calc() function evaluates the value of the input tag and does the actual calculations

IMPORTANT - in order for the calc() function to work, the buttons onclick function must have the appropriate operator assigned to it, i.e:

/
*
-
+
=

Timestamps:
00:00 - HTML
03:04 - CSS
07:56 - JavaScript

Feedback is welcome! Happy coding!

Auf dieser Seite können Sie das Online-Video Calculator Tutorial - HTML, CSS, and JavaScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Jeff Claybrook 18 November 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 24,255 Mal angesehen und es wurde von 799 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

6,505

317