Skip to main content

Build a Monthly Spending Tracker with HTML, JavaScript and CSS

2h 26m 14s
English
Paid

Enhance your web development skills by building a personal budget management application. In this practical course, you will create an interactive and visually appealing interface that allows users to add expenses, select categories, and view results on a dynamic chart.

Course Objectives

By the end of the course, you will have developed a stylish and fully functional web application. Most importantly, you will build and reinforce key frontend development skills necessary for every developer.

Key Features

  • Interactive Interface: Design an interface where users can easily add expenses and select categories.
  • Dynamic Visualization: Utilize Chart.js to create visual, dynamic, and functional data representations.
  • Data Persistence: Learn to save data using localStorage, ensuring that user information remains intact even after refreshing the page.

Technologies You Will Learn

During this course, you will work with the following technologies:

  • HTML, JavaScript, and CSS: Build the core structure, functionality, and style of your application.
  • Chart.js: Integrate and customize charts to display data dynamically.
  • localStorage: Implement data storage solutions to persist user input.

Benefits of the Course

This course not only results in a useful application but also strengthens your abilities in frontend development. By participating, you gain hands-on experience that is essential for all web developers, enhancing both your practical skills and your portfolio.

About the Author: zerotomastery.io

zerotomastery.io thumbnail
Whether you are just starting to learn to code or want to advance your skills, Zero To Mastery Academy will teach you React, Javascript, Python, CSS and more to help you advance your career, get hired and succeed at some of the top companies in the world.

Watch Online 14 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 14 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (14)
#Lesson TitleDurationAccess
1
Introduction Demo
04:25
2
Form Elements UI
09:07
3
Form Styling UI
13:42
4
Date & Expenses Setup JS
10:56
5
Submit & LocalStorage JS
15:15
6
Chart Functionality JS
16:42
7
Let's Keep Learning Together!
01:23
8
Introduction
05:02
9
Mac / Linux Device Setup
05:35
10
Windows Device Setup
06:58
11
VSCode Setup & Template
19:27
12
VSCode Extensions
09:11
13
DevTools
13:57
14
GitHub
14:34
Unlock unlimited learning

Get instant access to all 13 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription