Skip to content

Project User Details Displayed in the screen where you can delete and added them with dark mode toggle

Notifications You must be signed in to change notification settings

BinodRai123/Ui-list

Repository files navigation

🃏 UI Card List with Dark Mode Toggle 🌙

This project is a simple UI card list that displays descriptions of different people. It has:

  • An Add button at the top to add new cards.
  • A Delete button on each card that moves the card to the bottom of the list when clicked.
  • A Dark Mode toggle switch that lets you switch between light and dark themes. It saves your theme preference so the next time you visit the page, it remembers your choice!

🚀 Features

  • Add New Card: Click the "Add" button to add the previous delted card to the list.
  • Delete Card: Each card has a "Delete" button. When clicked, the card is removed from the screen.
  • Dark Mode: You can switch between dark and light mode using a toggle. The best part is, it remembers your theme using localStorage so you don’t have to switch it every time you reload the page!
  • Responsive: The website looks good on both mobile and desktop.

🛠️ Technologies Used

  • HTML: To build the structure of the page and the cards.
  • SCSS: For stylish and neat design.
  • JavaScript: To add interactivity, like adding/removing cards and toggling dark mode.
  • LocalStorage: To save the dark mode setting across page reloads.

📝 Installation

  1. Clone the repo to your computer:
    git clone https://github.com/BinodRai123/Ui-list.git

About

Project User Details Displayed in the screen where you can delete and added them with dark mode toggle

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published