From 6bafaa3d5f8d2488b3dd3febde2a9a3e4330af7d Mon Sep 17 00:00:00 2001 From: "jason.zhu" Date: Tue, 11 May 2021 09:48:21 +1000 Subject: [PATCH] Working on 1. Color Flipper --- 1-color-flipper/app.js | 13 +++++++++++++ 1-color-flipper/index.html | 17 ++++++++++++++++- README.md | 2 +- 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/1-color-flipper/app.js b/1-color-flipper/app.js index 901729f..7109967 100644 --- a/1-color-flipper/app.js +++ b/1-color-flipper/app.js @@ -1 +1,14 @@ const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; + +const btn = document.getElementById('btn'); +const color = document.querySelector(".color"); + +btn.addEventListener('click', function () { + const randomNumber = getRandomNumber(); + document.body.style.backgroundColor = colors[randomNumber]; + color.textContent = colors[randomNumber]; +}) + +function getRandomNumber() { + return Math.floor(Math.random()*4); +} \ No newline at end of file diff --git a/1-color-flipper/index.html b/1-color-flipper/index.html index 2aff836..328d616 100644 --- a/1-color-flipper/index.html +++ b/1-color-flipper/index.html @@ -9,7 +9,22 @@ -

color flipper

+ + +
+
+

background color: #f1f5f8

+ +
+
diff --git a/README.md b/README.md index 5f37413..6ce35d6 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # README -This is a practice repo following https://github.com/john-smilga/javascript-basic-projects \ No newline at end of file +This is a practice repo following https://github.com/john-smilga/javascript-basic-projects, which is part of [40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS](https://www.freecodecamp.org/news/javascript-projects-for-beginners/#how-to-create-a-color-flipper) \ No newline at end of file