JavaScript Projects Ideas
This folder contains a series of simple and intuitive projects, created to demonstrate various practical applications of JavaScript. Each project is designed to be easily understandable and usable.
Projects
🍕 Pizzeria - Order Your Pizza:
Folder: `pizzeria/`
A simple pizza ordering interface where users click on pizza names to add them to an order. The list updates in real time using jQuery.
Dynamically adds pizzas to a table
🔁 "Reset" button to clear the order
🧠 JavaScript OOP with the `ListaPizze` class
📌 jQuery for DOM manipulation and event handling ation.
🔧 Technologies: HTML, CSS, JavaScript (OOP), jQuery
🎰 Slot Machine - Play and Win!
Folder: `slotmachine/`
A simple web project in HTML, CSS, and JavaScript that simulates a slot machine. Users can bet their credits and try to win prizes based on the results of the spins.
✅ Click the SPIN button to spin the slot machine
✅ View the results of the spins with fruit images
✅ Winning system based on number combinations
🔁 RESET button to restore the game and initial credits
🔧 Technologies: HTML5, CSS, JavaScript (OOP)
💰 Vehicle Tax Calculator
Folder: `calcoloBollo/`
Calculates vehicle tax based on vehicle type, fuel coefficient, and horsepower, with dynamic validation and images.
🚗 Select vehicle type and enter technical data
🔍 Validates chassis code, fuel type, and horsepower
💸 Tax is calculated using a custom formula
🖼️ Vehicle image changes based on input
🔧 Technologies: HTML, JavaScript (form validation, DOM), images
📋 Purchase Code Generator
Folder: `azienda/`
A form for simulating a business purchase, generating a structured purchase code with full field validation.
🏷️ Input for company, product, quantity, price, and date
🔐 Code format: `[AZIE][PRO][DD][MMM][YY][QQ][PPP]`
⚠️ Validations with real-time error messages
🔁 "Reset" button to clear the form
🔧 Technologies: HTML, CSS, JavaScript (validation, DOM)
📝 To Do List
Folder: `todolist/`
A simple To Do List application where users can add tasks, mark them as completed, remove tasks, and filter tasks by status. Events are sorted by date and urgency.
✅ Add new tasks with a due date
✅ Mark tasks as completed
✅ Remove tasks from the list
🔁 Simple and intuitive interface
🧠 Uses JavaScript OOP with the `Task` and `TaskList` classes
🔧 Technologies: HTML5, CSS, JavaScript (OOP)
💣 Minesweeper - Discover the Cells
Folder: `campoMinato/`
A simple web project in HTML, CSS, and JavaScript (with jQuery) that simulates the classic game of Minesweeper. The user can select cells in the grid and try to uncover all the cells without triggering the mines.
✅ Select the difficulty level to customize the game
✅ Click on the cells to uncover them and view the number of adjacent mines
✅ "Reset" button to reload the page and start the game over
🔁 Uses jQuery for simple and effective DOM manipulation
🔧 Technologies: HTML5, JavaScript (OOP + jQuery), CSS
🥩 Monthly Meat Consumption Tracker
Folder: `calcoloEmissioniCO2/`
A minimal web app to track your daily meat consumption per month, estimate your carbon footprint, and save your data locally.
✅ Add daily records of meat type and quantity
✅ View a list of all consumption entries for the selected month
🧮 Calculates estimated CO₂ emissions using a standard emission factor
💾 Stores data locally with `localStorage`
📆 Adjusts day input based on month (handles leap years)
🔧 Technologies: HTML, CSS, JavaScript (DOM, localStorage)