https://github.com/immortalwebdev/background-changer
This Background Changer is a React-based project that allows you to smoothly change the background color of a webpage using buttons. Built with Vite for fast development, it leverages Tailwind CSS for styling along with some custom vanilla CSS for hover effects and transitions, ensuring a clean UI/UX.
https://github.com/immortalwebdev/background-changer
javascript react tailwindcss vanilla-css vercel-deployment vite
Last synced: 2 months ago
JSON representation
This Background Changer is a React-based project that allows you to smoothly change the background color of a webpage using buttons. Built with Vite for fast development, it leverages Tailwind CSS for styling along with some custom vanilla CSS for hover effects and transitions, ensuring a clean UI/UX.
- Host: GitHub
- URL: https://github.com/immortalwebdev/background-changer
- Owner: immortalWebDev
- Created: 2024-09-11T13:45:20.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-12T12:01:36.000Z (almost 2 years ago)
- Last Synced: 2025-07-06T05:43:18.716Z (12 months ago)
- Topics: javascript, react, tailwindcss, vanilla-css, vercel-deployment, vite
- Language: JavaScript
- Homepage: https://bg-changer-piyush.vercel.app
- Size: 102 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🌈 Background Changer
A simple web application that allows users to change the background color of a webpage with a click of a button. Built using Vite, React, Tailwind CSS, and a little custom CSS.
### ✨ Features
- 🎨 Change background colors with a button click.
- 📱 Responsive design with a clean and simple user interface.
- ⚡ Fast and lightweight, thanks to Vite and React.
### 🚀 Getting Started
- 🛠️ Prerequisites
- Ensure you have Node.js installed on your system.
### 📥 Installation
- Clone the Repository:
```git clone https://github.com/immortalWebDev/background-changer.git```
- Navigate to the Project Directory:
```cd background-changer```
- Install Dependencies
- ```npm install```
- Run the Development Server
- ```npm run dev```
The application will be available at http://localhost:xxxx.
### 🧑💻 Usage
Open the application in your browser.
Click the buttons to see the background color change with smooth transition
### 🛠️ Built With
- ⚡ Vite - A fast build tool for modern web applications.
- ⚛️ React - A JavaScript library for building user interfaces.
- 🎨 Tailwind CSS - A utility-first CSS framework for rapid UI development.
- 🖌️ Custom CSS - For additional styling and layout.
### 📜 License
- This project is open-source and available under the MIT License.
### 🙌 Acknowledgments
- 🚀 Vite for a blazing-fast development experience.
- ⚛️ React for the component-based architecture.
- 🎨 Tailwind CSS for rapid styling.
### 📞 Contact
- Feel free to get in touch (pgbadgujar007@gmail.com)
#### Created with 💖 by Piyush