diff --git a/1-color-flipper/setup/hex.html b/1-color-flipper/setup/hex.html
index 4b6878b79..69d382fb8 100644
--- a/1-color-flipper/setup/hex.html
+++ b/1-color-flipper/setup/hex.html
@@ -17,7 +17,7 @@
         <h4>color flipper</h4>
         <ul class="nav-links">
           <li><a href="index.html">simple</a></li>
-          <li><a href="hex.html">hex</a></li>
+          <li><a href="hex.html">hex</a></li>    
         </ul>
       </div>
     </nav>
diff --git a/1-color-flipper/setup/hex.js b/1-color-flipper/setup/hex.js
index 88aba8183..fa2618b23 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', ()=> {
+    let hexColor = '#' 
+    for (let i = 0; i < 6; i++) {
+        hexColor += hex[getRandomNumber()] 
+    } 
+    color.textContent = hexColor
+    document.body.style.backgroundColor = hexColor
+})
+
+const getRandomNumber = ()=> {
+    return Math.floor(Math.random() * hex.length)
+}
\ No newline at end of file