How to Build an Expense Tracker App with JavaScript | Step by Step Tutorial
#TheflutistProgrammer #webdevelopment #expensetracker #website How to create an app to track your expenses with JavaScript, HTML and CSS Step by Step with detailed information ✨ What you’ll learn: - Use the reducer array method - Local Storage mechanism - Data Persistence ✅ Watch This Next: https://youtu.be/DGHW3vnNZFg ⁉️ QUESTION - Have a question about Youtube or online video ? Drop in the comments and I will be more than happy to help you 😊! 💻 Repository: Github: https://github.com/The-Flutist-Programmer/expense-tracker-app 🌐 Social Networks: LinkedIn: https://www.linkedin.com/in/carlos-miguel-hudson-d%C3%ACaz-137045141/ Instagram: https://www.instagram.com/theflutistprogrammer/ TikTok: https://www.tiktok.com/@theflutistprogrammer TABLE OF CONTENT 00:00 Introduction 00:29 Like Share & Subscribe 00:39 Comment your questions on the comment section 00:46 Live Demo of the Expense Tracker App 03:59 Create necessary files for the project and open with VS Code 04:56 Code on index.html file 11:33 Code on styles.css file 20:54 Code on script.js file 20:59 Declare const variables and get HTML elements by using document.getElementById() 23:25 Declare let variable transactions to get values from localstorage 24:02 Create function of addTransaction() 27:16 Create function of addTransactionDOM() 32:28 Create function of updateValues() 40:57 Create function of removeTransaction() 42:22 Create function of updateLocalStorage() 43:15 Create function of init() 44:13 Add event listener to the form 44:54 Fix spelling issues with transactions and form variables 46:04 Test application after coding session 47:35 Check Localstorage mechanism on the browser ℹ️ About: In this video I am going to teach you how can you code a expense tracker app with JavaScript, HTML and CSS from scratch with detailed steps.
Download
1 formatsVideo Formats
Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.