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 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>color flipper</h1>
+    <nav>
+      <div class="nav-center">
+        <h4>color flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">simple</a></li>
+          <li><a href="hex.html">hex</a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <main>
+      <div class="container">
+        <h2>background color: <span class="color">#f1f5f8</span></h2>
+        <button class="btn btn-hero" id="btn">click me</button>
+      </div>
+    </main>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>
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
