diff --git a/01-color-flipper/setup/app.js b/01-color-flipper/setup/app.js
index 901729f46..c41c78412 100644
--- a/01-color-flipper/setup/app.js
+++ b/01-color-flipper/setup/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 = getRandom(colors.length);
+
+ color.textContent = colors[randomNumber];
+ document.body.style.backgroundColor = colors[randomNumber];
+})
+
+function getRandom (n) {
+ return Math.floor(Math.random() * n);
+}
\ No newline at end of file
diff --git a/01-color-flipper/setup/hex.js b/01-color-flipper/setup/hex.js
index 88aba8183..567d4e2d5 100644
--- a/01-color-flipper/setup/hex.js
+++ b/01-color-flipper/setup/hex.js
@@ -1 +1,18 @@
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
+const btn = document.getElementById('btn');
+const color = document.querySelector('.color');
+
+btn.addEventListener('click', function () {
+ let hexColor = '#';
+ for (let i = 0; i < 6; i++) {
+ const randomNumber = getRandom(hex.length);
+ hexColor += hex[randomNumber];
+ }
+
+ color.textContent = hexColor;
+ document.body.style.backgroundColor = hexColor;
+})
+
+function getRandom (n) {
+ return Math.floor(Math.random() * n);
+}
\ No newline at end of file
diff --git a/01-color-flipper/setup/index.html b/01-color-flipper/setup/index.html
index 2aff83646..5b130cb46 100644
--- a/01-color-flipper/setup/index.html
+++ b/01-color-flipper/setup/index.html
@@ -9,7 +9,32 @@
- color flipper
+
+
+
+
+ background color :
+
+ #f1f5f8
+
+
+
+
+