Skip to content

๐Ÿ“ 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.

License

Notifications You must be signed in to change notification settings

andredisa/JSDevHub

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

42 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Simple JavaScript Projects

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.

๐Ÿ“ฆ Project Overview

1. ๐Ÿ• 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

๐Ÿ”ง Technologies: **HTML, CSS, JavaScript (OOP), jQuery**


2. ๐ŸŽฐ 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)**


3. ๐Ÿ’ฐ 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**


4. ๐Ÿ“‹ 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)**


5. ๐Ÿ“ 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)**


6. ๐Ÿ’ฃ 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**


7. ๐Ÿฅฉ 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)**


๐ŸŽ“ Shared Educational Goals

  • โœ… 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

๐Ÿ“‚ How to Run

All projects are standalone and do not require a backend server. Simply open the index.html (or indexBollo.html) in a modern browser.


๐Ÿ› ๏ธ Ideas for Extension

  • 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

๐Ÿง  Educational Purpose

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

๐Ÿ‘จโ€๐Ÿ’ป About the Author

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!


โ˜• Support Me

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! ๐Ÿ˜Š

Buy Me A Coffee


๐Ÿง‘โ€๐Ÿ’ปโœจ Happy coding

About

๐Ÿ“ 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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published