Welcome to the repository of my JavaScript projects! ๐ 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.
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
๐ง Technologies: **HTML, CSS, JavaScript (OOP), jQuery**
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)**
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**
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)**
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
andTaskList
classes
๐ง Technologies: **HTML5, CSS, JavaScript (OOP)**
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**
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)**
- โ Learn basic and OOP-style JavaScript
- ๐ Practice DOM manipulation
- ๐งช Validate user input and handle interactions
- ๐ผ๏ธ Dynamically manage images and UI updates
- ๐งฉ Understand data structures and logic flow
All projects are standalone and do not require a backend server. Simply open the index.html
(or indexBollo.html
) in a modern browser.
- Add localStorage to persist data
- Make layouts responsive with media queries
- Improve UI using frameworks like Bootstrap or Tailwind
- Convert some projects into SPAs using React
These mini-projects are ideal for students learning front-end development. They offer hands-on experience with:
- JavaScript event handling
- DOM manipulation
- OOP principles in the browser
- Form validation techniques
- Simple yet effective UI logic
These applications were created for educational and demonstration purposes only.
I welcome your feedback, contributions, or collaboration ideas!
๐ฌ Feel free to reach out on GitHub or by email!
If you find my work useful and would like to support me, you can buy me a coffee! Your support helps me keep creating and improving my projects. Thank you! ๐