A tiny vanilla-JS demo that changes the page background to a new random colour each time the Change Background Color button is pressed. Useful as an introductory exercise in DOM manipulation and event handling.
/
├─ index.html # markup with a button and colour read-out
├─ backColorChanger.css # minimal styling
└─ backColorChanger.js # JS logic that generates and applies colours
- HTML displays a heading, a
<p>element that shows the current hex code, and a button. - JavaScript attaches a click-listener to the button.
- On each click a six-digit random hex value is generated, the
<body>background colour is updated, and the new hex code is written to the<span id="bg-hex-code">.
No build step is required.
# clone or download this repo
cd random-background-color-changer
# simply open index.html in a browser- Copy the hex code to clipboard when clicked.
- Add RGB / HSL display modes.
- Animate smooth transitions between colours.