🖱️ The Button That Does Nothing

A hilariously useless web project: a button that looks important, invites you to click it, and... absolutely does nothing. Perfect for procrastination, confusion, or just a good laugh.

---

🧭 Table of Contents

• 🚀 Live Demo
• 📂 File Structure
• ⚡ About the Project
• ✨ Features
  • 🖱️ Core Fun
  • 🎨 Multi-Theme System
  • 🔊 Sound & Interaction
  • 🕹️ Game Modes
  • ⏱️ Utilities
  • 🧠 Extras & Easter Eggs
• 🧩 Installation
• 🤝 How to Contribute
  • 🪜 Step-by-Step Guide
  • 💡 Contribution Tips
• 🏁 Contributors

---

🚀 Live Demo

👉 Launch The Button That Does Nothing
Click the most important button you’ll ever encounter — that still does absolutely nothing.

---

File Structure

the-button-that-does-nothing/
├── .vscode/
│   └── settings.json
├── audio/
│   ├── 8-bit.mp3
│   ├── boss.mp3
│   ├── click1.mp3
│   ├── click2.mp3
│   ├── click3.mp3
│   ├── click4.mp3
│   ├── click5.mp3
│   ├── click6.mp3
│   ├── click7.mp3
│   ├── click8.mp3
│   ├── failedClick.mp3
│   ├── horror.mp3
│   ├── lo-fi.mp3
│   └── suspence.mp3
├── css/
│   ├── clock.css
│   ├── epilepsywarning.css
│   ├── invisibleButton.css
│   ├── leaderboard.css
│   ├── motivation.css
│   ├── shop.css
│   └── style.css
├── image/
│   ├── animals.gif
│   ├── favicon.ico
│   └── Invisible-Egg.png
├── js/
│   ├── clock.js
│   ├── epilepsywarning.js
│   ├── invisibleButton.js
│   ├── leaderboard.js
│   ├── script.js
│   └── shop.js
├── FEATURES.md
├── index.html
├── LICENSE
├── motivation.html
├── package-lock.json
├── README.md
└── THEME_SYSTEM.md

⚡ About the Project

This is a fun, open-source experiment that celebrates the art of uselessness.
It’s built entirely with HTML, CSS, and JavaScript — no frameworks, no dependencies — just pure web creativity.

⚠️ Epilepsy Warning: Some effects include bright flashes and animations. Proceed with caution.

---

✨ Features

🖱️ Core Fun

• A large animated button that begs to be clicked — but does absolutely nothing.
• Fun hover and click effects that make you think something might happen (spoiler: nope).
• Click counter to track how many times you’ve achieved nothing.
• Motivational messages after repeated clicks (“You’re doing amazing at… nothing!”).

🎨 Multi-Theme System

• 10+ built-in color themes: neon, retro, pastel, vaporwave, galaxy, dark mode, etc.
• Custom Theme Creator — design your own color palette!
• Persistent Theme Storage — your theme stays even after refreshing.
• One-click theme cycling and theme selector with live previews.

🔊 Sound & Interaction

• Background music and click sounds for immersive nothingness.
• Sound toggle button for silence mode.
• Visual sync animations with rhythm-based effects.

🕹️ Game Modes

• Impossible Mode — button dodges your cursor for extra frustration.
• Time Attack Mode — see how many clicks of nothing you can get in 30 seconds.
• Achievements System — unlock badges for milestones like “1000 Clicks of Nothingness.”

⏱️ Utilities

• Real-time clock to track how long you’ve wasted time.
• Session timer and high score display for both regular and time attack modes.
• Share My Score button — brag about your record of doing nothing.

🧠 Extras & Easter Eggs

• Confetti explosions for major milestones.
• Hidden Easter Eggs (try clicking rapidly 😉).
• Dark Mode, Animations Toggle, and Reset Progress.
• “Impossible+” Secret Mode (can you even click it?)

---

🧩 Installation

No build steps. No NPM. No nonsense.
Just clone and open — that’s it.

# Clone the repository
git clone https://github.com/thecodersroom/the-button-that-does-nothing.git

# Go into the project folder
cd the-button-that-does-nothing

# Open the app
open index.html

---

🤝 How to Contribute

We love contributions! Follow these steps to contribute to The Button That Does Nothing:

🪜 Step-by-Step Guide

1. Check Assigned Issues

• Visit the Issues tab.
• Look for any open issues related to what you want to work on.
• If someone is already assigned, please pick a different one or ask to be assigned.

2. Get Assigned

• Comment on the issue saying:

  "I’d like to work on this issue., Can you please assign it to me?"

• Wait until a maintainer assigns you the issue.

3. Fork the Repository

• Click the Fork button (top right) on the main repository
• This creates your own copy of the repo under your GitHub account.

4. Clone Your Fork

git clone https://github.com/<your-username>/the-button-that-does-nothing.git
cd the-button-that-does-nothing

5. Create a New Branch fix or feat

git checkout -b feat/<your-branch-name>
git checkout -b feat/<your-branch-name>

6. Sync with the Latest Code Before starting, make sure your local copy is up-to-date:

git remote add upstream https://github.com/thecodersroom/the-button-that-does-nothing.git
git fetch upstream
git merge upstream/main

7. Make Your Changes

• Add or modify code, update docs, fix bugs — whatever your issue requires.
• Follow the project's existing code style and formatting.

8. Commit Your Changes

git add .
git commit -m "feat: add contribution guide section to README"

9. Push Your Branch

git push origin feat/<your-branch-name>

10. Create a Pull Request

• Go to your fork on GitHub.
• Click “Compare & Pull Request”.
• In the PR description, refer to the issue number (e.g., Fixes #186).
• Explain briefly what changes you made.

💡 Contribution Tips

• Keep PRs small and focused.
• Always pull the latest code before starting new work.
• Use meaningful commit messages.
• Be respectful and collaborative in discussions.

🏁 Contributors

---

• 🔝 Back to Top