JavaScript Practice Projects

This repository contains my beginner-to-intermediate practice work in HTML, CSS, and JavaScript. It includes small exercises, DOM-based mini projects, and hands-on experiments built while learning core frontend development concepts.

The code in this repo is intentionally practice-oriented. Some files are simple, some are repeated in improved versions, and together they show my learning progress from JavaScript basics to interactive browser projects.

What This Repository Covers

• Basic HTML page structure
• CSS styling for buttons, layouts, and UI states
• JavaScript syntax and logic building
• DOM selection and DOM updates
• Event handling with onclick, keyboard events, and addEventListener
• Functions, callbacks, arrow functions, and timers
• Arrays, loops, objects, array methods, and local storage
• Small browser projects like calculators, todo lists, and rock-paper-scissors

Core Concepts Used In This Codebase

HTML

• Semantic page structure with headings, buttons, inputs, paragraphs, and containers
• Form-related elements such as text inputs, number inputs, and date inputs
• Script and stylesheet linking across separate files

CSS

• Button styling and hover-ready UI structure
• Class-based styling
• Layout with CSS Grid
• Spacing, colors, typography, borders, and rounded shapes
• State-based visual changes using classes like is-subscribed and is-toggled

JavaScript Fundamentals

• Variables with let and const
• Primitive values, strings, numbers, and booleans
• Conditional logic with if, else if, and else
• Comparison and logical operators
• Template literals
• Type conversion using Number() and unary +
• Console debugging with console.log()
• User input with prompt() and browser feedback with alert()

Functions

• Function declarations
• Function expressions
• Reusable logic through custom functions
• Passing functions as values
• Callback functions
• Arrow functions
• Compact arrow function syntax

Arrays And Loops

• Array creation and indexing
• Updating arrays with push() and splice()
• Looping with for and while
• Iterating through arrays
• Accumulator pattern for totals
• Using array methods like forEach(), map(), and filter()

Objects

• Creating objects with properties
• Nested objects
• Methods inside objects
• Dot notation and bracket notation
• Object comparison by reference
• Destructuring
• Shorthand property syntax
• JSON conversion with JSON.stringify() and JSON.parse()

DOM Manipulation

• Selecting elements with document.querySelector(), document.querySelectorAll(), and document.getElementById()
• Reading and updating innerHTML, innerText, textContent, and value
• Creating interactive UI behavior from JavaScript
• Updating the page based on user actions

Events

• Inline click handlers with onclick
• Keyboard handling with event.key
• onkeydown and onkeyup
• Event listeners with addEventListener()
• Triggering actions from both button clicks and keyboard input

Browser Features

• localStorage for saving score and calculator state
• setTimeout() for delayed UI updates
• setInterval() for repeated actions and autoplay behavior
• Date object usage for time-based practice
• Math.random() for game logic

Mini Projects In This Repo

1. Rock Paper Scissors

Files:

• 06-rock-paper-scissors.html
• 10-dom-projects.html
• 12-dom-projects.html

Concepts used:

• Conditional game logic
• Random computer move generation
• Score tracking
• DOM rendering
• localStorage
• CSS-based UI styling
• setInterval() autoplay
• Event listeners

2. Todo List

Files:

• 11-Todo-list.html
• 11-Todo.js
• 11-todo-list.css
• 12-Todo-list.html
• 12-Todo.js
• 12-todo-list.css

Concepts used:

• Arrays of objects
• Rendering lists dynamically
• Form input handling
• Validation
• Delete actions
• Destructuring
• CSS Grid layout
• DOM updates after state changes
• Transition from inline events to addEventListener()

3. Calculator

Files:

• calculator-final.html

Concepts used:

• Dynamic button generation
• DOM element creation
• Event-driven updates
• State persistence with localStorage
• Array-driven UI rendering
• Basic error handling with try...catch

4. Subscribe / Shipping / Toggle UI Practice

Files:

• 09-dom-projects.html
• abc.html

Concepts used:

• Class toggling with classList
• Visual state changes
• Input-based calculation
• Keyboard-driven submission
• Interactive button behavior

5. Logic And Syntax Practice

Files:

• 06-boolean.html
• a6.html
• parkDiscout.html
• 11-Arrays-and-loops.html
• 01-objects.html
• advanced-function.html
• 12a.html
• 12j.html

Concepts used:

• Booleans and conditions
• Time-based logic
• Objects and methods
• Loops and accumulators
• Callbacks and higher-order functions
• Arrow functions
• map() and filter()
• Timers with setTimeout() and setInterval()

Folder Structure

.
|-- Advanced-function/
|-- Dom(Document Object Model/
|-- objects/
|-- scripts/
|-- styles/
|-- *.html practice files

How To Run

1. Clone or download this repository.
2. Open any .html file in your browser.
3. Start with the main practice files or open the mini-project files directly.

No build tools or package installation are required.

What This Repository Shows

This project is not a single production app. It is a practice collection that shows:

• My JavaScript learning journey
• My understanding of core frontend concepts
• My hands-on work with DOM-based browser projects
• My progress from simple scripts to more structured interactive apps

Notes

• Some files are older practice files and may contain repeated ideas in different versions.
• A few projects show the same concept implemented first in a simple way and later in a cleaner way.
• This is useful as a learning archive and a public progress repository.

Next Improvement Ideas

• Refactor inline onclick handlers into addEventListener() everywhere
• Store todo items in localStorage
• Split JavaScript into more reusable modules
• Improve naming consistency across files
• Add better validation and error messages
• Add a small homepage linking to each practice project

Author

Practice repository by a frontend learner focused on HTML, CSS, and JavaScript fundamentals.