Calculator Tutorial - HTML, CSS, and JavaScript

Опубликовано: 18 Ноябрь 2022
на канале: 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!

На этой странице сайта вы можете посмотреть видео онлайн Calculator Tutorial - HTML, CSS, and JavaScript длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Jeff Claybrook 18 Ноябрь 2022, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 24,255 раз и оно понравилось 799 зрителям. Приятного просмотра!