Build a Calculator that works offline with JavaScript - 47 Lines of Code!!! PWA Tutorial
Building a calculator can be a challenging task for developers of any skill level. In this video, I will teach you how to build a calculator with JavaScript (JS) and how to make your calculator installable, and work offline. We'll be working with pure HTML, pure CSS and JavaScript.
Make your calculator work offline: https://youtu.be/h1EhsJNVpxY
Link to the hosted app: https://ebenezerdon.github.io/calculator-app
Link to the icons: https://github.com/ebenezerdon/calculator-app/tree/master2/assets
Link to the GitHub repo: https://github.com/ebenezerdon/calculator-app
Follow me on LinkedIn: https://linkedin.com/in/ebenezerdon
Follow me on Twitter: https://twitter.com/ebenezerDN
Follow me on GitHub: https://github.com/ebenezerdon
Outline:
00:00:00 - Introduction
00:00:42 - What we're building
00:01:55 - Setting up our app
00:05:02 - Structuring our app with HTML code
00:07:20 - Styling our calculator with CSS code
00:18:23 - Displaying value on our calculator screen with JavaScript
00:29:40 - Creating the calculate function
00:34:38 - Using the calculate function
00:38:52 - Homework
00:44:16 - Making our calculator work offline - PWA tutorial
#webdevelopment #programming #pwa #softwaredevelopment #javascript #coding
Видео Build a Calculator that works offline with JavaScript - 47 Lines of Code!!! PWA Tutorial канала Ebenezer Don
Make your calculator work offline: https://youtu.be/h1EhsJNVpxY
Link to the hosted app: https://ebenezerdon.github.io/calculator-app
Link to the icons: https://github.com/ebenezerdon/calculator-app/tree/master2/assets
Link to the GitHub repo: https://github.com/ebenezerdon/calculator-app
Follow me on LinkedIn: https://linkedin.com/in/ebenezerdon
Follow me on Twitter: https://twitter.com/ebenezerDN
Follow me on GitHub: https://github.com/ebenezerdon
Outline:
00:00:00 - Introduction
00:00:42 - What we're building
00:01:55 - Setting up our app
00:05:02 - Structuring our app with HTML code
00:07:20 - Styling our calculator with CSS code
00:18:23 - Displaying value on our calculator screen with JavaScript
00:29:40 - Creating the calculate function
00:34:38 - Using the calculate function
00:38:52 - Homework
00:44:16 - Making our calculator work offline - PWA tutorial
#webdevelopment #programming #pwa #softwaredevelopment #javascript #coding
Видео Build a Calculator that works offline with JavaScript - 47 Lines of Code!!! PWA Tutorial канала Ebenezer Don
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Make Your Web App Work Offline with Javascript - PWA tutorial | Build and Deploy Calculator with JS](https://i.ytimg.com/vi/h1EhsJNVpxY/default.jpg)
![how to build a simple calculator using javascript](https://i.ytimg.com/vi/1jAEyP9a1hg/default.jpg)
![10 CSS Pro Tips - Code this, NOT that!](https://i.ytimg.com/vi/Qhaz36TZG5Y/default.jpg)
![What is THIS keyword in JavaScript? - Tutorial for beginners](https://i.ytimg.com/vi/fVXp7ZWjlO4/default.jpg)
![Light/Dark Theme Toggle with CSS and JavaScript](https://i.ytimg.com/vi/xodD0nw2veQ/default.jpg)
![Only HTML For Dynamic Web Apps? UNBELIEVABLE - HTMX With JetBrains Developer Advocate, Khalid](https://i.ytimg.com/vi/nUTI70v6ZCg/default.jpg)
![Build A Calculator With JavaScript Tutorial](https://i.ytimg.com/vi/j59qQ7YWLxw/default.jpg)
![Asking Millionaires How To Make $1,000,000](https://i.ytimg.com/vi/rPB8tBib-iA/default.jpg)
![Front-end dev reacts to mind-blowing Codepens](https://i.ytimg.com/vi/2B5rbsOoIUE/default.jpg)
![Solve This Coding Problem and Win $200](https://i.ytimg.com/vi/UsnRGo4y5FQ/default.jpg)
![Coding Snake in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas](https://i.ytimg.com/vi/7Azlj0f9vas/default.jpg)
![Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial](https://i.ytimg.com/vi/Q7AOvWpIVHU/default.jpg)
![Build A Clock With JavaScript](https://i.ytimg.com/vi/Ki0XXrlKlHY/default.jpg)
![Make a static site work offline (by hand) - Progressive Web App Training](https://i.ytimg.com/vi/dXuvT4oollQ/default.jpg)
![CSS & Javascript Working Calculator UI Design | Claymorphism @Online Tutorials](https://i.ytimg.com/vi/Q6FkM7CIKbc/default.jpg)
![Simple JavaScript Calculator for beginners!](https://i.ytimg.com/vi/d1HLzyavjZ0/default.jpg)
![Build A Simple Calculator With JavaScript | Mini Project For Beginners](https://i.ytimg.com/vi/0Vg4EiYPCUc/default.jpg)
![Create a Calculator with HTML, CSS, and Vanilla JavaScript | The HTML & CSS](https://i.ytimg.com/vi/EuwzyB_FQNs/default.jpg)
![Test-Driven Development // Fun TDD Introduction with JavaScript](https://i.ytimg.com/vi/Jv2uxzhPFl4/default.jpg)
![How to use IndexedDB to store data for your web application in the browser](https://i.ytimg.com/vi/yZ26CXny3iI/default.jpg)