Skip to content

Latest commit

 

History

History
240 lines (199 loc) · 8.2 KB

README.md

File metadata and controls

240 lines (199 loc) · 8.2 KB

🖱️ 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.

Live Demo GitHub Stars GitHub Forks License

🧭 Table of Contents

🚀 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