footer

app.css

@@ -4,8 +4,25 @@ body {
   transition-duration: 3s;
 }
 
+button{
+  cursor: pointer;
+}
+
 canvas{
   height: 50rem;
+  cursor: pointer;
+}
+
+footer {
+  position: absolute;
+  padding: 1rem;
+  bottom: 0;
+  right: 0;
+}
+
+footer p {
+  text-align: right;
+  cursor: pointer;
 }
 
 html {
@@ -19,6 +36,7 @@ input {
 
 li {
   padding: 0.75rem;
+  cursor: pointer;
 }
 
 ul {
@@ -27,6 +45,7 @@ ul {
   text-align: center;
 }
 
+
 .add-item-button {
   height: 2rem;
   width: 15.5rem;
@@ -47,11 +66,6 @@ ul {
   box-shadow: 0 0.1rem 0 -0.1rem #6082B6, 0 0.15rem 0 -0.05rem black;
 }
 
-.close-arrow {
-  width: 1rem;
-  height: 1rem;
-}
-
 .counter {
   font-size: 24px;
   text-align: center;
@@ -105,7 +119,6 @@ ul {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  margin-left: 5rem;
   width: 60rem;
   text-align: center;
 }
@@ -140,4 +153,8 @@ ul {
     transform: translate(0, 0);
     margin: 0;
   }
+
+  footer {
+    position: relative;
+  }
 }

index.html

@@ -13,9 +13,6 @@
       <img class="moon-sun" src='static/moon.png' alt="mode">
     </div>
     <div class="menu">
-      <!-- <div class="open-close-menu">
-        <img class="close-arrow" src="static/right-arrow.png" alt="close menu" />
-      </div> -->
       <p class="counter"></p>
       <label for="new-item">Item name</label>
       <input name="new-item" minlength="1" maxlength="20" />
@@ -27,5 +24,11 @@
       <div class="winner"></div>
       <canvas></canvas>
     </div>
+    <footer>
+      <div hidden="true" class="icons-authors">
+        <img class="moon-sun" src='static/moon.png' alt="mode"> <img class="moon-sun" src='static/sun.png' alt="mode"> Made by made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+      </div>
+      <p>Icons</p>
+    </footer>
   </body>
 </html>

src/app.ts

@@ -291,3 +291,9 @@ function beginAnimateRoulette() {
     animateWinner();
   }
 }
+
+const footerEl = document.querySelector('footer')!;
+const authorsEl = document.getElementsByClassName('icons-authors')[0]! as HTMLDivElement;
+footerEl.addEventListener('click', () => {
+  authorsEl.hidden = !authorsEl.hidden;
+});