diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..2ba986f6f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/1-color-flipper/setup/app.js b/1-color-flipper/setup/app.js
index 901729f46..7dacc16e7 100644
--- a/1-color-flipper/setup/app.js
+++ b/1-color-flipper/setup/app.js
@@ -1 +1,16 @@
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
+const btn = document.getElementById("btn");
+const color = document.querySelector(".color");
+
+btn.addEventListener("click", function () {
+ // get random number between 0-3
+ const randomNumber = getRandomNumber();
+ console.log(randomNumber);
+
+ document.body.style.backgroundColor = colors[randomNumber];
+ color.textContent = colors[randomNumber];
+});
+
+function getRandomNumber() {
+ return Math.floor(Math.random() * colors.length);
+}
diff --git a/1-color-flipper/setup/hex.js b/1-color-flipper/setup/hex.js
index 88aba8183..0705a3a5e 100644
--- a/1-color-flipper/setup/hex.js
+++ b/1-color-flipper/setup/hex.js
@@ -1 +1,17 @@
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++) {
+ hexColor += hex[getRandomNumber()];
+ }
+
+ color.textContent = hexColor;
+ document.body.style.backgroundColor = hexColor;
+});
+function getRandomNumber(){
+return Math.floor(Math.random() * hex.length)
+};
\ No newline at end of file
diff --git a/1-color-flipper/setup/index.html b/1-color-flipper/setup/index.html
index 2aff83646..de40cc002 100644
--- a/1-color-flipper/setup/index.html
+++ b/1-color-flipper/setup/index.html
@@ -1,16 +1,42 @@
-
-
-
- Color Flipper || Simple
-
-
-
-
- color flipper
-
-
-
-
+
+
+
+ Color Flipper || Simple
+
+
+
+
+
+
+
+
+
+
+ Background Colour : #f1f5f8
+
+
+
+
+
+
+
+
+
+
+