Skip to content

README.md

Latest commit

 

History

History
162 lines (106 loc) · 4.7 KB

README.md

File metadata and controls

162 lines (106 loc) · 4.7 KB

#A curated collection of beginner to intermediate-level front-end web development mini projects created using HTML, CSS, and JavaScript. These projects are perfect for learners looking to build hands-on experience with interactive UI components, responsive layouts, and basic JavaScript logic.

📁 Projects Overview

  1. 🎧 Spotify Clone --A basic front-end recreation of Spotify's UI:

--Responsive layout with a sidebar, controls, and playlist section.

--Interactive play/pause buttons.

--Mimics Spotify’s theme and aesthetic using CSS Flexbox and Grid.

--JavaScript used to handle audio play functionality and dynamic updates.

  1. 🏦 Banking Website --A multi-page banking website concept:

-Homepage with sections like services, features, and testimonials.

-Responsive navbar and footer.

-CSS animations for smooth scrolling and transitions.

-Could include forms for login or sign-up (depending on code).

  1. 📋 Menu Bar --An animated and responsive menu/navigation bar:

-Horizontal navbar with dropdowns or hover animations.

-Mobile responsiveness with a hamburger menu using JavaScript.

-CSS hover effects and transitions for a polished UI.

🛠️ Technologies Used #HTML5 for structuring content.

#CSS3 with Flexbox/Grid and animations for layout and design.

#JavaScript (ES6) for dynamic interactivity (DOM manipulation, event handling).

4.📋To-Do List App with Priority Sorting

Description

This is a simple web-based To-Do List application that allows users to add tasks with associated priorities (High, Medium, Low). Tasks can be marked as completed using checkboxes, and the list dynamically sorts tasks based on their priority to help users focus on the most important items first.

Features

  • Add tasks with priority selection.
  • Display tasks sorted by priority (High → Medium → Low).
  • Mark tasks as completed by checking the checkbox (text gets strikethrough).
  • Real-time console logging of current tasks and completed tasks.
  • Clear input after task addition.

How to Use

  1. Add a Task:

    • Enter the task description in the task input box.
    • Select the priority from the dropdown.
    • Click the Add Task button.

  2. View Tasks:

    • Tasks will be displayed in a list sorted by priority.
    • Each task shows a checkbox to mark it complete or incomplete.

  3. Mark Task Completed:

    • Click the checkbox next to a task to mark it completed (it will be crossed out).
    • Uncheck to mark it incomplete.

Code Structure Overview

  • HTML Elements:

    • Task input field
    • Priority dropdown selector
    • Add Task button
    • Ordered list (<ol>) for tasks display

  • JavaScript:

    • Array todo stores task objects: { task: string, priority: string }
    • addTaskButton event listener adds tasks and calls displayTasksByPriority()
    • displayTasksByPriority():
      • Sorts todo array by priority
      • Clears and repopulates task list with sorted tasks
      • Attaches checkbox event listeners to handle completion toggling
  1. 🎮 Simon Says Game

A simple and fun Simon Says game built using HTML, CSS, and JavaScript. Test your memory as the game shows an increasingly long sequence of colors, and your job is to repeat it correctly!

🛠️ Features

  • Four colorful buttons: Red, Green, Yellow, and Purple
  • Random sequence generation each level
  • Click-based input for player interaction
  • Game starts on any key press
  • Game over feedback and reset option

📁 Project Structure

simon-game/ │ ├── index.html # Main HTML structure ├── style.css # Styling of the game ├── app.js # JavaScript game logic └── README.md # Project description (this file)

pgsql Copy Edit

🚀 How to Run the Game

  1. Clone or download this repository.
  2. Open index.html in any modern web browser.
  3. Press any key to start playing.
  4. Repeat the sequence of button flashes by clicking them in the correct order.

🧠 Game Rules

  • The game generates a random color sequence.
  • Each level, one new color is added to the sequence.
  • You must click the colors in the same order.
  • If you click the wrong color, the game ends.
  • Press any key to restart the game after game over.

🖼️ Demo

(You can add a screen recording or live demo link here if available)

🧑‍💻 Technologies Used

  • HTML5
  • CSS3
  • Vanilla JavaScript (no external libraries)

✨ Screenshots

(Add screenshots here if needed)

📌 To-Do (Optional)

  • Add sound feedback for each color.
  • Mobile-friendly layout.
  • Scoreboard / highest score tracking.

📃 License

This project is open-source and available under the MIT License.

Happy Coding! ✨🎮 Launch the index.html file in your browser (or use Live Server in VS Code).