first

zwn29 · Jul 12, 2022 · f85518b · f85518b
commit f85518b
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,31 @@
+console.log('i am in')
+
+const colorArr = ['t-red', 't-green', 't-blue']
+const keyboard = document.getElementById('keyboard')
+const book = document.getElementById('book')
+const h1 = document.querySelector('h1')
+
+let n = 0
+let c = 0
+
+//change the image in set intervals
+setInterval(() => {
+  if (n < colorArr.length) {
+    console.log(colorArr[n])
+    //remove all class from keyboard
+    keyboard.classList.remove(...colorArr)
+    keyboard.classList.add(colorArr[n])
+    book.classList.remove(...colorArr)
+    book.classList.add(colorArr[n])
+    if (n === colorArr.length - 1) {
+      n = 0
+    } else {
+      n++
+    }
+  }
+}, 1000)
+
+// setInterval(() => {
+//   h1.innerText = `${c}`
+//   c++
+// }, 1000)
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <style>
+    * {
+      background-color: rgb(16, 15, 15);
+    }
+    .t-green {
+      color: rgb(6, 209, 19);
+    }
+    .t-red {
+      color: #d92525;
+    }
+    .t-blue {
+      color: #6a68ed;
+    }
+  </style>
+  <body>
+    <pre class="h" id="keyboard">
+
+.-----------------------------------------------------------------------------.
+||Es| |F1 |F2 |F3 |F4 |F5 | |F6 |F7 |F8 |F9 |F10|                  C= AMIGA   |
+||__| |___|___|___|___|___| |___|___|___|___|___|                             |
+| _____________________________________________     ________    ___________   |
+||~  |! |" |§ |$ |% |& |/ |( |) |= |? |` || |<-|   |Del|Help|  |{ |} |/ |* |  |
+||`__|1_|2_|3_|4_|5_|6_|7_|8_|9_|0_|ß_|´_|\_|__|   |___|____|  |[ |]_|__|__|  |
+||<-  |Q |W |E |R |T |Z |U |I |O |P |Ü |* |   ||               |7 |8 |9 |- |  |
+||->__|__|__|__|__|__|__|__|__|__|__|__|+_|_  ||               |__|__|__|__|  |
+||Ctr|oC|A |S |D |F |G |H |J |K |L |Ö |Ä |^ |<'|               |4 |5 |6 |+ |  |
+||___|_L|__|__|__|__|__|__|__|__|__|__|__|#_|__|       __      |__|__|__|__|  |
+||^    |> |Y |X |C |V |B |N |M |; |: |_ |^     |      |A |     |1 |2 |3 |E |  |
+||_____|<_|__|__|__|__|__|__|__|,_|._|-_|______|    __||_|__   |__|__|__|n |  |
+|   |Alt|A  |                       |A  |Alt|      |<-|| |->|  |0    |. |t |  |
+|   |___|___|_______________________|___|___|      |__|V_|__|  |_____|__|e_|  |
+|                                                                             |
+`-----------------------------------------------------------------------------'
+    </pre>
+    <pre id="book">
+      __..._   _...__
+  _..-"      `Y`      "-._
+  \ Once upon |           /
+  \\  a time..|          //
+  \\\         |         ///
+   \\\ _..---.|.---.._ ///
+jgs \\`_..---.Y.---.._`//
+     '`               `'
+    </pre>
+    <h1>0</h1>
+    <script src="./app.js"></script>
+  </body>
+</html>