clean code

3 years ago · abf21ca360
parent 27c9ec486e
commit abf21ca360
161 changed files with 0 additions and 7313 deletions
--- a/3d-boxes-background/index.html
+++ b/3d-boxes-background/index.html
@ -1,20 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>3D Boxes Background</title>
  </head>
  <body>
    <button id="btn" class="magic">Magic 🎩</button>
    <div id="boxes" class="boxes big"></div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/3d-boxes-background/script.js
+++ b/3d-boxes-background/script.js
@ -1,17 +0,0 @@
 const boxesContainer = document.getElementById('boxes')
 const btn = document.getElementById('btn')
 btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
 function createBoxes() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      const box = document.createElement('div')
      box.classList.add('box')
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      boxesContainer.appendChild(box)
    }
  }
 }
 createBoxes()
--- a/3d-boxes-background/style.css
+++ b/3d-boxes-background/style.css
@ -1,93 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #fafafa;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
 }
 .magic {
  background-color: #f9ca24;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  border: 0;
  border-radius: 3px;
  font-size: 16px;
  padding: 12px 20px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  letter-spacing: 1px;
  box-shadow: 0 3px rgba(249, 202, 36, 0.5);
  z-index: 100;
 }
 .magic:focus {
  outline: none;
 }
 .magic:active {
  box-shadow: none;
  transform: translateY(2px);
 }
 .boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 500px;
  width: 500px;
  position: relative;
  transition: 0.4s ease;
 }
 .boxes.big {
  width: 600px;
  height: 600px;
 }
 .boxes.big .box {
  transform: rotateZ(360deg);
 }
 .box {
  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
  background-repeat: no-repeat;
  background-size: 500px 500px;
  position: relative;
  height: 125px;
  width: 125px;
  transition: 0.4s ease;
 }
 .box::after {
  content: '';
  background-color: #f6e58d;
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg);
 }
 .box::before {
  content: '';
  background-color: #f9ca24;
  position: absolute;
  bottom: -15px;
  left: 8px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg);
 }
--- a/_project_starter_/index.html
+++ b/_project_starter_/index.html
@ -1,13 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>My Project</title>
  </head>
  <body>
    <h1>Project Starter</h1>
    <script src="script.js"></script>
  </body>
 </html>
--- a/_project_starter_/script.js
+++ b/_project_starter_/script.js
@ -1 +0,0 @@
--- a/_project_starter_/style.css
+++ b/_project_starter_/style.css
@ -1,16 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
--- a/animated-countdown/index.html
+++ b/animated-countdown/index.html
@ -1,28 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Countdown</title>
  </head>
  <body>
    <div class="counter">
      <div class="nums">
        <span class="in">3</span>
        <span>2</span>
        <span>1</span>
        <span>0</span>
      </div>
      <h4>Get Ready</h4>
    </div>
    <div class="final">
      <h1>GO</h1>
      <button id="replay">
        <span>Replay</span>
      </button>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/animated-countdown/script.js
+++ b/animated-countdown/script.js
@ -1,40 +0,0 @@
 const nums = document.querySelectorAll('.nums span')
 const counter = document.querySelector('.counter')
 const finalMessage = document.querySelector('.final')
 const replay = document.querySelector('#replay')
 runAnimation()
 function resetDOM() {
  counter.classList.remove('hide')
  finalMessage.classList.remove('show')
  nums.forEach((num) => {
    num.classList.value = ''
  })
  nums[0].classList.add('in')
 }
 function runAnimation() {
  nums.forEach((num, idx) => {
    const nextToLast = nums.length - 1
    num.addEventListener('animationend', (e) => {
      if (e.animationName === 'goIn' && idx !== nextToLast) {
        num.classList.remove('in')
        num.classList.add('out')
      } else if (e.animationName === 'goOut' && num.nextElementSibling) {
        num.nextElementSibling.classList.add('in')
      } else {
        counter.classList.add('hide')
        finalMessage.classList.add('show')
      }
    })
  })
 }
 replay.addEventListener('click', () => {
  resetDOM()
  runAnimation()
 })
--- a/animated-countdown/style.css
+++ b/animated-countdown/style.css
@ -1,163 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  height: 100vh;
  overflow: hidden;
 }
 h4 {
  font-size: 20px;
  margin: 5px;
  text-transform: uppercase;
 }
 .counter {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
 }
 .counter.hide {
  transform: translate(-50%, -50%) scale(0);
  animation: hide 0.2s ease-out;
 }
@keyframes hide {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
  }
 }
 .final {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  text-align: center;
 }
 .final.show {
  transform: translate(-50%, -50%) scale(1);
  animation: show 0.2s ease-out;
 }
@keyframes show {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.4);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
 }
 .nums {
  color: #3498db;
  font-size: 50px;
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 50px;
 }
 .nums span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(120deg);
  transform-origin: bottom center;
 }
 .nums span.in {
  transform: translate(-50%, -50%) rotate(0deg);
  animation: goIn 0.5s ease-in-out;
 }
 .nums span.out {
  animation: goOut 0.5s ease-in-out;
 }
@keyframes goIn {
  0% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  30% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(10deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
 }
@keyframes goOut {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-120deg);
  }
 }
 #replay{
  background-color: #3498db;
  border-radius: 3px;
  border: none;
  color: aliceblue;
  padding: 5px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
 }
 #replay span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.3s;
 }
 #replay span:after{
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
 }
 #replay:hover span{
  padding-right: 25px;
 }
 #replay:hover span:after{
  opacity: 1;
  right: 0;
 }
--- a/animated-navigation/index.html
+++ b/animated-navigation/index.html
@ -1,26 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Navigation</title>
  </head>
  <body>
    <nav class="active" id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </button>
    </nav>
    <script src="script.js"></script>
    <!-- Dribbble link: https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui -->
  </body>
 </html>
--- a/animated-navigation/script.js
+++ b/animated-navigation/script.js
@ -1,4 +0,0 @@
 const toggle = document.getElementById('toggle')
 const nav = document.getElementById('nav')
 toggle.addEventListener('click', () => nav.classList.toggle('active'))
--- a/animated-navigation/style.css
+++ b/animated-navigation/style.css
@ -1,107 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #eafbff;
  background-image: linear-gradient(
    to bottom,
    #eafbff 0%,
    #eafbff 50%,
    #5290f9 50%,
    #5290f9 100%
  );
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
 }
 nav {
  background-color: #fff;
  padding: 20px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: width 0.6s linear;
  overflow-x: hidden;
 }
 nav.active {
  width: 350px;
 }
 nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 0;
  transition: width 0.6s linear;
 }
 nav.active ul {
  width: 100%;
 }
 nav ul li {
  transform: rotateY(0deg);
  opacity: 0;
  transition: transform 0.6s linear, opacity 0.6s linear;
 }
 nav.active ul li {
  opacity: 1;
  transform: rotateY(360deg);
 }
 nav ul a {
  position: relative;
  color: #000;
  text-decoration: none;
  margin: 0 10px;
 }
 .icon {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  height: 30px;
  width: 30px;
 }
 .icon:focus {
  outline: 0;
 }
 .icon .line {
  background-color: #5290f9;
  height: 2px;
  width: 20px;
  position: absolute;
  top: 10px;
  left: 5px;
  transition: transform 0.6s linear;
 }
 .icon .line2 {
  top: auto;
  bottom: 10px;
 }
 nav.active .icon .line1 {
  transform: rotate(-765deg) translateY(5.5px);
 }
 nav.active .icon .line2 {
  transform: rotate(765deg) translateY(-5.5px);
 }
--- a/auto-text-effect/index.html
+++ b/auto-text-effect/index.html
@ -1,19 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Auto Text Effect</title>
  </head>
  <body>
    <h1 id="text">Starting...</h1>
    <div>
      <label for="speed">Speed:</label>
      <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/auto-text-effect/script.js
+++ b/auto-text-effect/script.js
@ -1,22 +0,0 @@
 const textEl = document.getElementById('text')
 const speedEl = document.getElementById('speed')
 const text = 'We Love Programming!'
 let idx = 1
 let speed = 300 / speedEl.value
 writeText()
 function writeText() {
    textEl.innerText = text.slice(0, idx)
    idx++
    if(idx > text.length) {
        idx = 1
    }
    setTimeout(writeText, speed)
 }
 speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)
--- a/auto-text-effect/style.css
+++ b/auto-text-effect/style.css
@ -1,38 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: darksalmon;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 div {
  position: absolute;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  font-size: 18px;
 }
 input {
  width: 50px;
  padding: 5px;
  font-size: 18px;
  background-color: darksalmon;
  border: none;
  text-align: center;
 }
 input:focus {
  outline: none;
 }
--- a/background-slider/index.html
+++ b/background-slider/index.html
@ -1,61 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Background Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div
        class="slide active"
        style="
          background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ></div>
      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');
        "
      ></div>
      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ></div>
      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
        "
      ></div>
      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ></div>
      <button class="arrow left-arrow" id="left">
        <i class="fas fa-arrow-left"></i>
      </button>
      <button class="arrow right-arrow" id="right">
        <i class="fas fa-arrow-right"></i>
      </button>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/background-slider/script.js
+++ b/background-slider/script.js
@ -1,40 +0,0 @@
 const body = document.body
 const slides = document.querySelectorAll('.slide')
 const leftBtn = document.getElementById('left')
 const rightBtn = document.getElementById('right')
 let activeSlide = 0
 rightBtn.addEventListener('click', () => {
  activeSlide++
  if (activeSlide > slides.length - 1) {
    activeSlide = 0
  }
  setBgToBody()
  setActiveSlide()
 })
 leftBtn.addEventListener('click', () => {
  activeSlide--
  if (activeSlide < 0) {
    activeSlide = slides.length - 1
  }
  setBgToBody()
  setActiveSlide()
 })
 setBgToBody()
 function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage
 }
 function setActiveSlide() {
  slides.forEach((slide) => slide.classList.remove('active'))
  slides[activeSlide].classList.add('active')
 }
--- a/background-slider/style.css
+++ b/background-slider/style.css
@ -1,79 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  background-position: center center;
  background-size: cover;
  transition: 0.4s;
 }
 body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
 }
 .slider-container {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 70vh;
  width: 70vw;
  position: relative;
  overflow: hidden;
 }
 .slide {
  opacity: 0;
  height: 100vh;
  width: 100vw;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -15vh;
  left: -15vw;
  transition: 0.4s ease;
  z-index: 1;
 }
 .slide.active {
  opacity: 1;
 }
 .arrow {
  position: fixed;
  background-color: transparent;
  color: #fff;
  padding: 20px;
  font-size: 30px;
  border: 2px solid orange;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
 }
 .arrow:focus {
  outline: 0;
 }
 .left-arrow {
  left: calc(15vw - 65px);
 }
 .right-arrow {
  right: calc(15vw - 65px);
 }
--- a/blurry-loading/index.html
+++ b/blurry-loading/index.html
@ -1,15 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Blurry Loading</title>
  </head>
  <body>
    <section class="bg"></section>
    <div class="loading-text">0%</div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/blurry-loading/script.js
+++ b/blurry-loading/script.js
@ -1,23 +0,0 @@
 const loadText = document.querySelector('.loading-text')
 const bg = document.querySelector('.bg')
 let load = 0
 let int = setInterval(blurring, 30)
 function blurring() {
  load++
  if (load > 99) {
    clearInterval(int)
  }
  loadText.innerText = `${load}%`
  loadText.style.opacity = scale(load, 0, 100, 1, 0)
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
 }
 // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
 const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
 }
--- a/blurry-loading/style.css
+++ b/blurry-loading/style.css
@ -1,32 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Ubuntu', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .bg {
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
    no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
 }
 .loading-text {
  font-size: 50px;
  color: #fff;
 }
--- a/button-ripple-effect/index.html
+++ b/button-ripple-effect/index.html
@ -1,13 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Button Ripple Effect</title>
  </head>
  <body>
    <button class="ripple">Click Me</button>
    <script src="script.js"></script>
  </body>
 </html>
--- a/button-ripple-effect/script.js
+++ b/button-ripple-effect/script.js
@ -1,23 +0,0 @@
 const buttons = document.querySelectorAll('.ripple')
 buttons.forEach(button => {
    button.addEventListener('click', function (e) {
        const x = e.clientX
        const y = e.clientY
        const buttonTop = e.target.offsetTop
        const buttonLeft = e.target.offsetLeft
        const xInside = x - buttonLeft
        const yInside = y - buttonTop
        const circle = document.createElement('span')
        circle.classList.add('circle')
        circle.style.top = yInside + 'px'
        circle.style.left = xInside + 'px'
        this.appendChild(circle)
        setTimeout(() => circle.remove(), 500)
    })
 })
--- a/button-ripple-effect/style.css
+++ b/button-ripple-effect/style.css
@ -1,51 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #000;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 button {
  background-color: purple;
  color: #fff;
  border: 1px purple solid;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 20px 30px;
  overflow: hidden;
  margin: 10px 0;
  position: relative;
 }
 button:focus {
  outline: none;
 }
 button .circle {
  position: absolute;
  background-color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: scale 0.5s ease-out;
 }
@keyframes scale {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
 }
--- a/content-placeholder/index.html
+++ b/content-placeholder/index.html
@ -1,37 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header">&nbsp;</div>
      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
          &nbsp;
        </h3>
        <p class="card-excerpt" id="excerpt">
          &nbsp;
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              >&nbsp;</strong
            >
            <small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/content-placeholder/script.js
+++ b/content-placeholder/script.js
@ -1,26 +0,0 @@
 const header = document.getElementById('header')
 const title = document.getElementById('title')
 const excerpt = document.getElementById('excerpt')
 const profile_img = document.getElementById('profile_img')
 const name = document.getElementById('name')
 const date = document.getElementById('date')
 const animated_bgs = document.querySelectorAll('.animated-bg')
 const animated_bg_texts = document.querySelectorAll('.animated-bg-text')
 setTimeout(getData, 2500)
 function getData() {
  header.innerHTML =
    '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
  title.innerHTML = 'Lorem ipsum dolor sit amet'
  excerpt.innerHTML =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
  profile_img.innerHTML =
    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
  name.innerHTML = 'John Doe'
  date.innerHTML = 'Oct 08, 2020'
  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
 }
--- a/content-placeholder/style.css
+++ b/content-placeholder/style.css
@ -1,106 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #ecf0f1;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 img {
  max-width: 100%;
 }
 .card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  width: 350px;
 }
 .card-header {
  height: 200px;
 }
 .card-header img {
  object-fit: cover;
  height: 100%;
  width: 100%;
 }
 .card-content {
  background-color: #fff;
  padding: 30px;
 }
 .card-title {
  height: 20px;
  margin: 0;
 }
 .card-excerpt {
  color: #777;
  margin: 10px 0 20px;
 }
 .author {
  display: flex;
 }
 .profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
 }
 .author-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 100px;
 }
 .author-info small {
  color: #aaa;
  margin-top: 5px;
 }
 .animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
 }
 .animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
 }
@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: -150% 0;
  }
 }
--- a/custom-range-slider/.vscode/settings.json
+++ b/custom-range-slider/.vscode/settings.json
@ -1,3 +0,0 @@
 {
    "liveServer.settings.port": 5501
 }
--- a/custom-range-slider/index.html
+++ b/custom-range-slider/index.html
@ -1,18 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Custom Range Slider</title>
  </head>
  <body>
    <h2>Custom Range Slider</h2>
    <div class="range-container">
      <input type="range" id="range" min="0" max="100">
      <label for="range">50</label>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/custom-range-slider/script.js
+++ b/custom-range-slider/script.js
@ -1,27 +0,0 @@
 const range = document.getElementById('range')
 range.addEventListener('input', (e) => {
    const value = +e.target.value
    const label = e.target.nextElementSibling
    const range_width = getComputedStyle(e.target).getPropertyValue('width')
    const label_width = getComputedStyle(label).getPropertyValue('width')
    const num_width = +range_width.substring(0, range_width.length - 2)
    const num_label_width = +label_width.substring(0, label_width.length - 2)
    const max = +e.target.max
    const min = +e.target.min
    const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)
    label.style.left = `${left}px`
    label.innerHTML = value
 })
 // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
 const scale = (num, in_min, in_max, out_min, out_max) => {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
  }
--- a/custom-range-slider/style.css
+++ b/custom-range-slider/style.css
@ -1,108 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 h2 {
  position: absolute;
  top: 10px;
 }
 .range-container {
  position: relative;
 }
 input[type='range'] {
  width: 300px;
  margin: 18px 0;
  -webkit-appearance: none;
 }
 input[type='range']:focus {
  outline: none;
 }
 input[type='range'] + label {
  background-color: #fff;
  position: absolute;
  top: -25px;
  left: 110px;
  width: 80px;
  padding: 5px 0;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 /* Chrome & Safari */
 input[type='range']::-webkit-slider-runnable-track {
  background: purple;
  border-radius: 4px;
  width: 100%;
  height: 10px;
  cursor: pointer;
 }
 input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid purple;
  margin-top: -7px;
  cursor: pointer;
 }
 /* Firefox */
 input[type='range']::-moz-range-track {
  background: purple;
  border-radius: 4px;
  width: 100%;
  height: 13px;
  cursor: pointer;
 }
 input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid purple;
  margin-top: -7px;
  cursor: pointer;
 }
 /* IE */
 input[type='range']::-ms-track {
  background: purple;
  border-radius: 4px;
  width: 100%;
  height: 13px;
  cursor: pointer;
 }
 input[type='range']::-ms-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid purple;
  margin-top: -7px;
  cursor: pointer;
 }
--- a/dad-jokes/index.html
+++ b/dad-jokes/index.html
@ -1,17 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Dad Jokes</title>
  </head>
  <body>
    <div class="container">
      <h3>Don't Laugh Challenge</h3>
      <div id="joke" class="joke">// Joke goes here</div>
      <button id="jokeBtn" class="btn">Get Another Joke</button>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/dad-jokes/script.js
+++ b/dad-jokes/script.js
@ -1,36 +0,0 @@
 const jokeEl = document.getElementById('joke')
 const jokeBtn = document.getElementById('jokeBtn')
 jokeBtn.addEventListener('click', generateJoke)
 generateJoke()
 // USING ASYNC/AWAIT
 async function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  }
  const res = await fetch('https://icanhazdadjoke.com', config)
  const data = await res.json()
  jokeEl.innerHTML = data.joke
 }
 // USING .then()
 // function generateJoke() {
 //   const config = {
 //     headers: {
 //       Accept: 'application/json',
 //     },
 //   }
 //   fetch('https://icanhazdadjoke.com', config)
 //     .then((res) => res.json())
 //     .then((data) => {
 //       jokeEl.innerHTML = data.joke
 //     })
 // }
--- a/dad-jokes/style.css
+++ b/dad-jokes/style.css
@ -1,61 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #686de0;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 20px;
 }
 .container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  padding: 50px 20px;
  text-align: center;
  max-width: 100%;
  width: 800px;
 }
 h3 {
  margin: 0;
  opacity: 0.5;
  letter-spacing: 2px;
 }
 .joke {
  font-size: 30px;
  letter-spacing: 1px;
  line-height: 40px;
  margin: 50px auto;
  max-width: 600px;
 }
 .btn {
  background-color: #9f68e0;
  color: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  padding: 14px 40px;
  font-size: 16px;
  cursor: pointer;
 }
 .btn:active {
  transform: scale(0.98);
 }
 .btn:focus {
  outline: 0;
 }
--- a/double-click-heart/index.html
+++ b/double-click-heart/index.html
@ -1,18 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Double Click Heart</title>
  </head>
  <body>
    <h3>Double click on the image to <i class="fas fa-heart"></i> it</h3>
    <small>You liked it <span id="times">0</span> times</small>
    <div class="loveMe"></div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/double-click-heart/script.js
+++ b/double-click-heart/script.js
@ -1,42 +0,0 @@
 const loveMe = document.querySelector('.loveMe')
 const times = document.querySelector('#times')
 let clickTime = 0
 let timesClicked = 0
 loveMe.addEventListener('click', (e) => {
    if(clickTime === 0) {
        clickTime = new Date().getTime()
    } else {
        if((new Date().getTime() - clickTime) < 800) {
            createHeart(e)
            clickTime = 0
        } else {
            clickTime = new Date().getTime()
        }
    }
 })
 const createHeart = (e) => {
    const heart = document.createElement('i')
    heart.classList.add('fas')
    heart.classList.add('fa-heart')
    const x = e.clientX
    const y = e.clientY
    const leftOffset = e.target.offsetLeft
    const topOffset = e.target.offsetTop
    const xInside = x - leftOffset
    const yInside = y - topOffset
    heart.style.top = `${yInside}px`
    heart.style.left = `${xInside}px`
    loveMe.appendChild(heart)
    times.innerHTML = ++timesClicked
    setTimeout(() => heart.remove(), 1000)
 }
--- a/double-click-heart/style.css
+++ b/double-click-heart/style.css
@ -1,53 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Oswald');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Oswald', sans-serif;
  text-align: center;
  overflow: hidden;
  margin: 0;
 }
 h3 {
  margin-bottom: 0;
  text-align: center;
 }
 small {
  display: block;
  margin-bottom: 20px;
  text-align: center;
 }
 .fa-heart {
  color: red;
 }
 .loveMe {
  height: 440px;
  width: 300px;
  background: url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')
    no-repeat center center/cover;
  margin: auto;
  cursor: pointer;
  max-width: 100%;
  position: relative;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  overflow: hidden;
 }
 .loveMe .fa-heart {
  position: absolute;
  animation: grow 0.6s linear;
  transform: translate(-50%, -50%) scale(0);
 }
@keyframes grow {
  to {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
  }
 }
--- a/double-vertical-slider/index.html
+++ b/double-vertical-slider/index.html
@ -1,48 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Vertical Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div class="left-slide">
        <div style="background-color: #FD3555">
          <h1>Nature flower</h1>
          <p>all in pink</p>
        </div>
        <div style="background-color: #2A86BA">
          <h1>Bluuue Sky</h1>
          <p>with it's mountains</p>
        </div>
        <div style="background-color: #252E33">
          <h1>Lonely castle</h1>
          <p>in the wilderness</p>
        </div>
        <div style="background-color: #FFB866">
          <h1>Flying eagle</h1>
          <p>in the sunset</p>
        </div>
      </div>
      <div class="right-slide">
        <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div>
      </div>
      <div class="action-buttons">
        <button class="down-button">
          <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/double-vertical-slider/script.js
+++ b/double-vertical-slider/script.js
@ -1,31 +0,0 @@
 const sliderContainer = document.querySelector('.slider-container')
 const slideRight = document.querySelector('.right-slide')
 const slideLeft = document.querySelector('.left-slide')
 const upButton = document.querySelector('.up-button')
 const downButton = document.querySelector('.down-button')
 const slidesLength = slideRight.querySelectorAll('div').length
 let activeSlideIndex = 0
 slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`
 upButton.addEventListener('click', () => changeSlide('up'))
 downButton.addEventListener('click', () => changeSlide('down'))
 const changeSlide = (direction) => {
    const sliderHeight = sliderContainer.clientHeight
    if(direction === 'up') {
        activeSlideIndex++
        if(activeSlideIndex > slidesLength - 1) {
            activeSlideIndex = 0
        }
    } else if(direction === 'down') {
        activeSlideIndex--
        if(activeSlideIndex < 0) {
            activeSlideIndex = slidesLength - 1
        }
    }
    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
 }
--- a/double-vertical-slider/style.css
+++ b/double-vertical-slider/style.css
@ -1,97 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }
 body {
  font-family: 'Open Sans', sans-serif;
  height: 100vh;
 }
 .slider-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
 }
 .left-slide {
  height: 100%;
  width: 35%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
 }
 .left-slide > div {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
 }
 .left-slide h1 {
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: -30px;
 }
 .right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 35%;
  width: 65%;
  transition: transform 0.5s ease-in-out;
 }
 .right-slide > div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
 }
 button {
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
 }
 button:hover {
  color: #222;
 }
 button:focus {
  outline: none;
 }
 .slider-container .action-buttons button {
  position: absolute;
  left: 35%;
  top: 50%;
  z-index: 100;
 }
 .slider-container .action-buttons .down-button {
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
 }
 .slider-container .action-buttons .up-button {
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
 }
--- a/drag-n-drop/index.html
+++ b/drag-n-drop/index.html
@ -1,20 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Drag N Drop</title>
  </head>
  <body>
    <div class="empty">
      <div class="fill" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/drag-n-drop/script.js
+++ b/drag-n-drop/script.js
@ -1,39 +0,0 @@
 const fill = document.querySelector('.fill')
 const empties = document.querySelectorAll('.empty')
 fill.addEventListener('dragstart', dragStart)
 fill.addEventListener('dragend', dragEnd)
 for(const empty of empties) {
    empty.addEventListener('dragover', dragOver)
    empty.addEventListener('dragenter', dragEnter)
    empty.addEventListener('dragleave', dragLeave)
    empty.addEventListener('drop', dragDrop)
 }
 function dragStart() {
    this.className += ' hold' 
    setTimeout(() => this.className = 'invisible', 0)
 }
 function dragEnd() {
    this.className = 'fill'
 }
 function dragOver(e) {
    e.preventDefault()
 }
 function dragEnter(e) {
    e.preventDefault()
    this.className += ' hovered'
 }
 function dragLeave() {
    this.className = 'empty'
 }
 function dragDrop() {
    this.className = 'empty'
    this.append(fill)
 }
--- a/drag-n-drop/style.css
+++ b/drag-n-drop/style.css
@ -1,44 +0,0 @@
 * {
  box-sizing: border-box;
 }
 body {
  background-color: steelblue;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .empty {
  height: 150px;
  width: 150px;
  margin: 10px;
  border: solid 3px black;
  background: white;
 }
 .fill {
  background-image: url('https://source.unsplash.com/random/150x150');
  height: 145px;
  width: 145px;
  cursor: pointer;
 }
 .hold {
  border: solid 5px #ccc;
 }
 .hovered {
  background-color: #333;
  border-color: white;
  border-style: dashed;
 }
@media (max-width: 800px) {
  body {
    flex-direction: column;
  }
 }
--- a/drawing-app/index.html
+++ b/drawing-app/index.html
@ -1,21 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Drawing App</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="700"></canvas>
    <div class="toolbox">
      <button id="decrease">-</button>
      <span id="size">10</span>
      <button id="increase">+</button>
      <input type="color" id="color">
      <button id="clear">X</button>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/drawing-app/script.js
+++ b/drawing-app/script.js
@ -1,86 +0,0 @@
 const canvas = document.getElementById('canvas');
 const increaseBtn = document.getElementById('increase');
 const decreaseBtn = document.getElementById('decrease');
 const sizeEL = document.getElementById('size');
 const colorEl = document.getElementById('color');
 const clearEl = document.getElementById('clear');
 const ctx = canvas.getContext('2d');
 let size = 10
 let isPressed = false
 colorEl.value = 'black'
 let color = colorEl.value
 let x
 let y
 canvas.addEventListener('mousedown', (e) => {
    isPressed = true
    x = e.offsetX
    y = e.offsetY
 })
 document.addEventListener('mouseup', (e) => {
    isPressed = false
    x = undefined
    y = undefined
 })
 canvas.addEventListener('mousemove', (e) => {
    if(isPressed) {
        const x2 = e.offsetX
        const y2 = e.offsetY
        drawCircle(x2, y2)
        drawLine(x, y, x2, y2)
        x = x2
        y = y2
    }
 })
 function drawCircle(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2)
    ctx.fillStyle = color
    ctx.fill()
 }
 function drawLine(x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.lineWidth = size * 2
    ctx.stroke()
 }
 function updateSizeOnScreen() {
    sizeEL.innerText = size
 }
 increaseBtn.addEventListener('click', () => {
    size += 5
    if(size > 50) {
        size = 50
    }
    updateSizeOnScreen()
 })
 decreaseBtn.addEventListener('click', () => {
    size -= 5
    if(size < 5) {
        size = 5
    }
    updateSizeOnScreen()
 })
 colorEl.addEventListener('change', (e) => color = e.target.value)
 clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))
--- a/drawing-app/style.css
+++ b/drawing-app/style.css
@ -1,46 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
 }
 canvas {
  border: 2px solid steelblue;
 }
 .toolbox {
  background-color: steelblue;
  border: 1px solid slateblue;
  display: flex;
  width: 804px;
  padding: 1rem;
 }
 .toolbox > * {
  background-color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  height: 50px;
  width: 50px;
  margin: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;
 }
 .toolbox > *:last-child {
  margin-left: auto;
 }
--- a/drink-water/index.html
+++ b/drink-water/index.html
@ -1,37 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Drink Water</title>
  </head>
  <body>
    <h1>Drink Water</h1>
    <h3>Goal: 2 Liters</h3>
    <div class="cup">
      <div class="remained" id="remained">
        <span id="liters"></span>
        <small>Remained</small>
      </div>
      <div class="percentage" id="percentage"></div>
    </div>
    <p class="text">Select how many glasses of water that you have drank</p>
    <div class="cups">
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/drink-water/script.js
+++ b/drink-water/script.js
@ -1,49 +0,0 @@
 const smallCups = document.querySelectorAll('.cup-small')
 const liters = document.getElementById('liters')
 const percentage = document.getElementById('percentage')
 const remained = document.getElementById('remained')
 updateBigCup()
 smallCups.forEach((cup, idx) => {
    cup.addEventListener('click', () => highlightCups(idx))
 })
 function highlightCups(idx) {
    if (idx===7 && smallCups[idx].classList.contains("full")) idx--;
    else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) {
        idx--
    }
    smallCups.forEach((cup, idx2) => {
        if(idx2 <= idx) {
            cup.classList.add('full')
        } else {
            cup.classList.remove('full')
        }
    })
    updateBigCup()
 }
 function updateBigCup() {
    const fullCups = document.querySelectorAll('.cup-small.full').length
    const totalCups = smallCups.length
    if(fullCups === 0) {
        percentage.style.visibility = 'hidden'
        percentage.style.height = 0
    } else {
        percentage.style.visibility = 'visible'
        percentage.style.height = `${fullCups / totalCups * 330}px`
        percentage.innerText = `${fullCups / totalCups * 100}%`
    }
    if(fullCups === totalCups) {
        remained.style.visibility = 'hidden'
        remained.style.height = 0
    } else {
        remained.style.visibility = 'visible'
        liters.innerText = `${2 - (250 * fullCups / 1000)}L`
    }
 }
--- a/drink-water/style.css
+++ b/drink-water/style.css
@ -1,104 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
 :root {
  --border-color: #144fc6;
  --fill-color: #6ab3f8;
 }
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #3494e4;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
 }
 h1 {
  margin: 10px 0 0;
 }
 h3 {
  font-weight: 400;
  margin: 10px 0;
 }
 .cup {
  background-color: #fff;
  border: 4px solid var(--border-color);
  color: var(--border-color);
  border-radius: 0 0 40px 40px;
  height: 330px;
  width: 150px;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
 }
 .cup.cup-small {
  height: 95px;
  width: 50px;
  border-radius: 0 0 15px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 5px;
  transition: 0.3s ease;
 }
 .cup.cup-small.full {
  background-color: var(--fill-color);
  color: #fff;
 }
 .cups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 280px;
 }
 .remained {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  transition: 0.3s ease;
 }
 .remained span {
  font-size: 20px;
  font-weight: bold;
 }
 .remained small {
  font-size: 12px;
 }
 .percentage {
  background-color: var(--fill-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  height: 0;
  transition: 0.3s ease;
 }
 .text {
  text-align: center;
  margin: 0 0 5px;
 }
--- a/event-keycodes/index.html
+++ b/event-keycodes/index.html
@ -1,17 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Event KeyCodes</title>
  </head>
  <body>
    <div id="insert">
      <div class="key">
        Press any key to get the keyCode
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/event-keycodes/script.js
+++ b/event-keycodes/script.js
@ -1,20 +0,0 @@
 const insert = document.getElementById('insert')
 window.addEventListener('keydown', (event) => {
  insert.innerHTML = `
  <div class="key">
  ${event.key === ' ' ? 'Space' : event.key} 
  <small>event.key</small>
 </div>
 <div class="key">
  ${event.keyCode}
  <small>event.keyCode</small>
 </div>
 <div class="key">
  ${event.code}
  <small>event.code</small>
 </div>
  `
 })
--- a/event-keycodes/style.css
+++ b/event-keycodes/style.css
@ -1,48 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #e1e1e1;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .key {
  border: 1px solid #999;
  background-color: #eee;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  flex-direction: column;
  margin: 10px;
  min-width: 150px;
  position: relative;
 }
 .key small {
  position: absolute;
  top: -24px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #555;
  font-size: 14px;
 }
@media(max-width:768px){
 .key{
   margin: 10px 0px;
  }
 }
--- a/expanding-cards/index.html
+++ b/expanding-cards/index.html
@ -1,31 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Explore The World</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Wild Forest</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
        <h3>Sunny Beach</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
        <h3>City on Winter</h3>
      </div>
      <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3>Mountains - Clouds</h3>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/expanding-cards/script.js
+++ b/expanding-cards/script.js
@ -1,14 +0,0 @@
 const panels = document.querySelectorAll('.panel')
 panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
 })
 function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
 }
--- a/expanding-cards/style.css
+++ b/expanding-cards/style.css
@ -1,63 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .container {
  display: flex;
  width: 90vw;
 }
 .panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  -webkit-transition: all 700ms ease-in;
 }
 .panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
 }
 .panel.active {
  flex: 5;
 }
 .panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
 }
@media (max-width: 480px) {
  .container {
    width: 100vw;
  }
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
 }
--- a/faq-collapse/index.html
+++ b/faq-collapse/index.html
@ -1,82 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>FAQ</title>
  </head>
  <body>
    <h1>Frequently Asked Questions</h1>
    <div class="faq-container">
      <div class="faq active">
        <h3 class="faq-title">
          Why shouldn't we trust atoms?
        </h3>
        <p class="faq-text">
          They make up everything
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="faq">
        <h3 class="faq-title">
          What do you call someone with no body and no nose?
        </h3>
        <p class="faq-text">
          Nobody knows.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="faq">
        <h3 class="faq-title">
          What's the object-oriented way to become wealthy?
        </h3>
        <p class="faq-text">
          Inheritance.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="faq">
        <h3 class="faq-title">
          How many tickles does it take to tickle an octopus?
        </h3>
        <p class="faq-text">
          Ten-tickles!
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="faq">
        <h3 class="faq-title">
          What is: 1 + 1?
        </h3>
        <p class="faq-text">
          Depends on who are you asking.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/faq-collapse/script.js
+++ b/faq-collapse/script.js
@ -1,7 +0,0 @@
 const toggles = document.querySelectorAll('.faq-toggle')
 toggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
        toggle.parentNode.classList.toggle('active')
    })
 })
--- a/faq-collapse/style.css
+++ b/faq-collapse/style.css
@ -1,107 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Muli', sans-serif;
  background-color: #f0f0f0;
 }
 h1 {
  margin: 50px 0 30px;
  text-align: center;
 }
 .faq-container {
  max-width: 600px;
  margin: 0 auto;
 }
 .faq {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
 }
 .faq.active {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
 }
 .faq.active::before,
 .faq.active::after {
  content: '\f075';
  font-family: 'Font Awesome 5 Free';
  color: #2ecc71;
  font-size: 7rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 0;
 }
 .faq.active::before {
  color: #3498db;
  top: -10px;
  left: -30px;
  transform: rotateY(180deg);
 }
 .faq-title {
  margin: 0 35px 0 0;
 }
 .faq-text {
  display: none;
  margin: 30px 0 0;
 }
 .faq.active .faq-text {
  display: block;
 }
 .faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
 }
 .faq-toggle:focus {
  outline: 0;
 }
 .faq-toggle .fa-times {
  display: none;
 }
 .faq.active .faq-toggle .fa-times {
  color: #fff;
  display: block;
 }
 .faq.active .faq-toggle .fa-chevron-down {
  display: none;
 }
 .faq.active .faq-toggle {
  background-color: #9fa4a8;
 }
--- a/feedback-ui-design/index.html
+++ b/feedback-ui-design/index.html
@ -1,33 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Let Us Know Your Feedback</title>
  </head>
  <body>
    <div id="panel" class="panel-container">
      <strong>How satisfied are you with our <br /> customer support performance?</strong>
      <div class="ratings-container">
        <div class="rating">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
          <small>Unhappy</small>
        </div>
        <div class="rating">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
          <small>Neutral</small>
        </div>
        <div class="rating active">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
          <small>Satisfied</small>
        </div>
      </div>
      <button class="btn" id="send">Send Review</button>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/feedback-ui-design/script.js
+++ b/feedback-ui-design/script.js
@ -1,38 +0,0 @@
 const ratings = document.querySelectorAll('.rating')
 const ratingsContainer = document.querySelector('.ratings-container')
 const sendBtn = document.querySelector('#send')
 const panel = document.querySelector('#panel')
 let selectedRating = 'Satisfied'
 ratingsContainer.addEventListener('click', (e) => {
    if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.nextElementSibling.innerHTML
    } else if(
        e.target.parentNode.classList.contains('rating') &&
        e.target.previousSibling &&
        e.target.previousElementSibling.nodeName === 'IMG'
    ) {
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.innerHTML
    }
 })
 sendBtn.addEventListener('click', (e) => {
    panel.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>Thank You!</strong>
        <br>
        <strong>Feedback: ${selectedRating}</strong>
        <p>We'll use your feedback to improve our customer support</p>
    `
 })
 function removeActive() {
    for(let i = 0; i < ratings.length; i++) {
        ratings[i].classList.remove('active')
    }
 }
--- a/feedback-ui-design/style.css
+++ b/feedback-ui-design/style.css
@ -1,90 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #fef9f2;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .panel-container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  max-width: 400px;
 }
 .panel-container strong {
  line-height: 20px;
 }
 .ratings-container {
  display: flex;
  margin: 20px 0;
 }
 .rating {
  flex: 1;
  cursor: pointer;
  padding: 20px;
  margin: 10px 5px;
 }
 .rating:hover,
 .rating.active {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .rating img {
  width: 40px;
 }
 .rating small {
  color: #555;
  display: inline-block;
  margin: 10px 0 0;
 }
 .rating:hover small,
 .rating.active small {
  color: #111;
 }
 .btn {
  background-color: #302d2b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 12px 30px;
  cursor: pointer;
 }
 .btn:focus {
  outline: 0;
 }
 .btn:active {
  transform: scale(0.98);
 }
 .fa-heart {
  color: red;
  font-size: 30px;
  margin-bottom: 10px;
 }
--- a/form-input-wave/index.html
+++ b/form-input-wave/index.html
@ -1,37 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Form Input Wave</title>
  </head>
  <body>
    <div class="container">
      <h1>Please Login</h1>
      <form>
        <div class="form-control">
          <input type="text" required>
          <label>Email</label>
          <!-- <label>
            <span style="transition-delay: 0ms">E</span>
              <span style="transition-delay: 50ms">m</span>
              <span style="transition-delay: 100ms">a</span>
              <span style="transition-delay: 150ms">i</span>
              <span style="transition-delay: 200ms">l</span>
        </label> -->
        </div>
        <div class="form-control">
          <input type="password" required>
          <label>Password</label>
        </div>
        <button class="btn">Login</button>
        <p class="text">Don't have an account? <a href="#">Register</a> </p>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/form-input-wave/script.js
+++ b/form-input-wave/script.js
@ -1,8 +0,0 @@
 const labels = document.querySelectorAll('.form-control label')
 labels.forEach(label => {
    label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
        .join('')
 })
--- a/form-input-wave/style.css
+++ b/form-input-wave/style.css
@ -1,101 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: steelblue;
  color: #fff;
  font-family: 'Muli', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 5px;
 }
 .container h1 {
  text-align: center;
  margin-bottom: 30px;
 }
 .container a {
  text-decoration: none;
  color: lightblue;
 }
 .btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
 }
 .btn:focus {
  outline: 0;
 }
 .btn:active {
  transform: scale(0.98);
 }
 .text {
  margin-top: 30px;
 }
 .form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
 }
 .form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
 }
 .form-control input:focus,
 .form-control input:valid {
  outline: 0;
  border-bottom-color: lightblue;
 }
 .form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
 }
 .form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 .form-control input:focus + label span,
 .form-control input:valid + label span {
  color: lightblue;
  transform: translateY(-30px);
 }
--- a/github-profiles/index.html
+++ b/github-profiles/index.html
@ -1,19 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Github Profiles</title>
  </head>
  <body>
    <form class="user-form" id="form">
      <input type="text" id="search" placeholder="Search a Github User">
    </form>
    <main id="main"></main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
 </html>
--- a/github-profiles/script.js
+++ b/github-profiles/script.js
@ -1,92 +0,0 @@
 const APIURL = 'https://api.github.com/users/'
 const main = document.getElementById('main')
 const form = document.getElementById('form')
 const search = document.getElementById('search')
 async function getUser(username) {
    try {
        const { data } = await axios(APIURL + username)
        createUserCard(data)
        getRepos(username)
    } catch(err) {
        if(err.response.status == 404) {
            createErrorCard('No profile with this username')
        }
    }
 }
 async function getRepos(username) {
    try {
        const { data } = await axios(APIURL + username + '/repos?sort=created')
        addReposToCard(data)
    } catch(err) {
        createErrorCard('Problem fetching repos')
    }
 }
 function createUserCard(user) {
    const userID = user.name || user.login
    const userBio = user.bio ? `<p>${user.bio}</p>` : ''
    const cardHTML = `
    <div class="card">
    <div>
      <img src="${user.avatar_url}" alt="${user.name}" class="avatar">
    </div>
    <div class="user-info">
      <h2>${userID}</h2>
      ${userBio}
      <ul>
        <li>${user.followers} <strong>Followers</strong></li>
        <li>${user.following} <strong>Following</strong></li>
        <li>${user.public_repos} <strong>Repos</strong></li>
      </ul>
      <div id="repos"></div>
    </div>
  </div>
    `
    main.innerHTML = cardHTML
 }
 function createErrorCard(msg) {
    const cardHTML = `
        <div class="card">
            <h1>${msg}</h1>
        </div>
    `
    main.innerHTML = cardHTML
 }
 function addReposToCard(repos) {
    const reposEl = document.getElementById('repos')
    repos
        .slice(0, 5)
        .forEach(repo => {
            const repoEl = document.createElement('a')
            repoEl.classList.add('repo')
            repoEl.href = repo.html_url
            repoEl.target = '_blank'
            repoEl.innerText = repo.name
            reposEl.appendChild(repoEl)
        })
 }
 form.addEventListener('submit', (e) => {
    e.preventDefault()
    const user = search.value
    if(user) {
        getUser(user)
        search.value = ''
    }
 })
--- a/github-profiles/style.css
+++ b/github-profiles/style.css
@ -1,113 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #2a2a72;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .user-form {
  width: 100%;
  max-width: 700px;
 }
 .user-form input {
  width: 100%;
  display: block;
  background-color: #4c2885;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
 }
 .user-form input::placeholder {
  color: #bbb;
 }
 .user-form input:focus {
  outline: none;
 }
 .card {
  max-width: 800px;
  background-color: #4c2885;
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 3rem;
  margin: 0 1.5rem;
 }
 .avatar {
  border-radius: 50%;
  border: 10px solid #2a2a72;
  height: 150px;
  width: 150px;
 }
 .user-info {
  color: #eee;
  margin-left: 2rem;
 }
 .user-info h2 {
  margin-top: 0;
 }
 .user-info ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  max-width: 400px;
 }
 .user-info ul li {
  display: flex;
  align-items: center;
 }
 .user-info ul li strong {
  font-size: 0.9rem;
  margin-left: 0.5rem;
 }
 .repo {
  text-decoration: none;
  color: #fff;
  background-color: #212a72;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
 }
@media (max-width: 500px) {
  .card {
    flex-direction: column;
    align-items: center;
  }
  .user-form {
    max-width: 400px;
  }
 }
--- a/good-cheap-fast/index.html
+++ b/good-cheap-fast/index.html
@ -1,36 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Good, Cheap, Fast</title>
  </head>
  <body>
    <h2>How do you want your project to be?</h2>
    <div class="toggle-container">
      <input type="checkbox" id="good" class="toggle">
      <label for="good" class="label">
        <div class="ball"></div>
      </label>
      <span>Good</span>
    </div>
    <div class="toggle-container">
      <input type="checkbox" id="cheap" class="toggle">
      <label for="cheap" class="label">
        <div class="ball"></div>
      </label>
      <span>Cheap</span>
    </div>
    <div class="toggle-container">
      <input type="checkbox" id="fast" class="toggle">
      <label for="fast" class="label">
        <div class="ball"></div>
      </label>
      <span>Fast</span>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/good-cheap-fast/script.js
+++ b/good-cheap-fast/script.js
@ -1,22 +0,0 @@
 const toggles = document.querySelectorAll('.toggle')
 const good = document.querySelector('#good')
 const cheap = document.querySelector('#cheap')
 const fast = document.querySelector('#fast')
 toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))
 function doTheTrick(theClickedOne) {
    if(good.checked && cheap.checked && fast.checked) {
        if(good === theClickedOne) {
            fast.checked = false
        }
        if(cheap === theClickedOne) {
            good.checked = false
        }
        if(fast === theClickedOne) {
            cheap.checked = false
        }
    }
 }
--- a/good-cheap-fast/style.css
+++ b/good-cheap-fast/style.css
@ -1,83 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .toggle-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 200px;
 }
 .toggle {
  visibility: hidden;
 }
 .label {
  position: relative;
  background-color: #d0d0d0;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  margin: 0 15px 0;
  width: 80px;
  height: 40px;
 }
 .toggle:checked + .label {
  background-color: #8e44ad;
 }
 .ball {
  background: #fff;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  align-items: center;
  justify-content: center;
  animation: slideOff 0.3s linear forwards;
 }
 .toggle:checked + .label .ball {
  animation: slideOn 0.3s linear forwards;
 }
@keyframes slideOn {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(40px) scale(1);
  }
 }
@keyframes slideOff {
  0% {
    transform: translateX(40px) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
 }
--- a/hidden-search/index.html
+++ b/hidden-search/index.html
@ -1,19 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Hidden Search</title>
  </head>
  <body>
    <div class="search">
      <input type="text" class="input" placeholder="Search...">
      <button class="btn">
        <i class="fas fa-search"></i>
      </button>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/hidden-search/script.js
+++ b/hidden-search/script.js
@ -1,8 +0,0 @@
 const search = document.querySelector('.search')
 const btn = document.querySelector('.btn')
 const input = document.querySelector('.input')
 btn.addEventListener('click', () => {
    search.classList.toggle('active')
    input.focus()
 })
--- a/hidden-search/style.css
+++ b/hidden-search/style.css
@ -1,57 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-image: linear-gradient(90deg, #7d5fff, #7158e2);
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .search {
  position: relative;
  height: 50px;
 }
 .search .input {
  background-color: #fff;
  border: 0;
  font-size: 18px;
  padding: 15px;
  height: 50px;
  width: 50px;
  transition: width 0.3s ease;
 }
 .btn {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: transform 0.3s ease;
 }
 .btn:focus,
 .input:focus {
  outline: none;
 }
 .search.active .input {
  width: 200px;
 }
 .search.active .btn {
  transform: translateX(198px);
 }
--- a/hoverboard/index.html
+++ b/hoverboard/index.html
@ -1,13 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Hoverboard</title>
  </head>
  <body>
    <div class="container" id="container"></div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/hoverboard/script.js
+++ b/hoverboard/script.js
@ -1,29 +0,0 @@
 const container = document.getElementById('container')
 const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
 const SQUARES = 500
 for(let i = 0; i < SQUARES; i++) {
    const square = document.createElement('div')
    square.classList.add('square')
    square.addEventListener('mouseover', () => setColor(square))
    square.addEventListener('mouseout', () => removeColor(square))
    container.appendChild(square)
 }
 function setColor(element) {
   const color = getRandomColor()
   element.style.background = color
   element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
 }
 function removeColor(element) {
   element.style.background = '#1d1d1d'
   element.style.boxShadow = '0 0 2px #000'
 }
 function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
 }
--- a/hoverboard/style.css
+++ b/hoverboard/style.css
@ -1,34 +0,0 @@
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 400px;
 }
 .square {
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  height: 16px;
  width: 16px;
  margin: 2px;
  transition: 2s ease;
 }
 .square:hover {
  transition-duration: 0s;
 }
--- a/image-carousel/index.html
+++ b/image-carousel/index.html
@ -1,37 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Image Carousel</title>
  </head>
  <body>
    <div class="carousel">
      <div class="image-container" id="imgs">
        <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
       alt="first-image"
       />
    <img
       src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
       alt="second-image"
       />
    <img
       src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
       alt="third-image"
       />
    <img
       src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"
       alt="fourth-image"
       />
      </div>
      <div class="buttons-container">
        <button id="left" class="btn">Prev</button>
        <button id="right" class="btn">Next</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/image-carousel/script.js
+++ b/image-carousel/script.js
@ -1,41 +0,0 @@
 const imgs = document.getElementById('imgs')
 const leftBtn = document.getElementById('left')
 const rightBtn = document.getElementById('right')
 const img = document.querySelectorAll('#imgs img')
 let idx = 0
 let interval = setInterval(run, 2000)
 function run() {
    idx++
    changeImage()
 }
 function changeImage() {
    if(idx > img.length - 1) {
        idx = 0
    } else if(idx < 0) {
        idx = img.length - 1
    }
    imgs.style.transform = `translateX(${-idx * 500}px)`
 }
 function resetInterval() {
    clearInterval(interval)
    interval = setInterval(run, 2000)
 }
 rightBtn.addEventListener('click', () => {
    idx++
    changeImage()
    resetInterval()
 })
 leftBtn.addEventListener('click', () => {
    idx--
    changeImage()
    resetInterval()
 })
--- a/image-carousel/style.css
+++ b/image-carousel/style.css
@ -1,55 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
 }
 img {
  width: 500px;
  height: 500px;
  object-fit: cover;
 }
 .carousel {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  height: 530px;
  width: 500px;
  overflow: hidden;
 }
 .image-container {
  display: flex;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
 }
 .buttons-container {
  display: flex;
  justify-content: space-between;
 }
 .btn {
  background-color: rebeccapurple;
  color: #fff;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  width: 49.5%;
 }
 .btn:hover {
  opacity: 0.9;
 }
 .btn:focus {
  outline: none;
 }
--- a/incrementing-counter/index.html
+++ b/incrementing-counter/index.html
@ -1,30 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Increment Counter</title>
  </head>
  <body>
    <div class="counter-container">
      <i class="fab fa-twitter fa-3x"></i>
      <div class="counter" data-target="12000"></div>
      <span>Twitter Followers</span>
    </div>
    <div class="counter-container">
      <i class="fab fa-youtube fa-3x"></i>
      <div class="counter" data-target="5000"></div>
      <span>YouTube Subscribers</span>
    </div>
    <div class="counter-container">
      <i class="fab fa-facebook fa-3x"></i>
      <div class="counter" data-target="7500"></div>
      <span>Facebook Fans</span>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/incrementing-counter/script.js
+++ b/incrementing-counter/script.js
@ -1,21 +0,0 @@
 const counters = document.querySelectorAll('.counter')
 counters.forEach(counter => {
    counter.innerText = '0'
    const updateCounter = () => {
        const target = +counter.getAttribute('data-target')
        const c = +counter.innerText
        const increment = target / 200
        if(c < target) {
            counter.innerText = `${Math.ceil(c + increment)}`
            setTimeout(updateCounter, 1)
        } else {
            counter.innerText = target
        }
    }
    updateCounter()
 })
--- a/incrementing-counter/style.css
+++ b/incrementing-counter/style.css
@ -1,36 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #8e44ad;
  color: #fff;
  font-family: 'Roboto Mono', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 30px 50px;
 }
 .counter {
  font-size: 60px;
  margin-top: 10px;
 }
@media (max-width: 580px) {
  body {
    flex-direction: column;
  }
 }
--- a/insect-catch-game/index.html
+++ b/insect-catch-game/index.html
@ -1,65 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Catch The Insect</title>
  </head>
  <body>
    <div class="screen">
      <h1>Catch The Insect</h1>
      <button class="btn" id="start-btn">Play Game</button>
    </div>
    <div class="screen">
      <h1>What is your "favorite" insect?</h1>
      <ul class="insects-list">
        <li>
          <button class="choose-insect-btn">
            <p>Fly</p>
            <img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Mosquito</p>
            <img
               src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
               alt="mosquito"
               />
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Spider</p>
            <img
               src="http://pngimg.com/uploads/spider/spider_PNG12.png"
               alt="spider"
               />
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Roach</p>
            <img
               src="http://pngimg.com/uploads/roach/roach_PNG12163.png"
               alt="roach"
               />
          </button>
        </li>
      </ul>
    </div>
    <div class="screen game-container" id="game-container">
      <h3 id="time" class="time">Time: 00:00</h3>
      <h3 id="score" class="score">Score: 0</h3>
      <h5 id="message" class="message">
        Are you annoyed yet? <br>
        You are playing an impossible game!!
      </h5>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/insect-catch-game/script.js
+++ b/insect-catch-game/script.js
@ -1,78 +0,0 @@
 const screens = document.querySelectorAll('.screen');
 const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');
 const start_btn = document.getElementById('start-btn')
 const game_container = document.getElementById('game-container')
 const timeEl = document.getElementById('time')
 const scoreEl = document.getElementById('score')
 const message = document.getElementById('message')
 let seconds = 0
 let score = 0
 let selected_insect = {}
 start_btn.addEventListener('click', () => screens[0].classList.add('up'))
 choose_insect_btns.forEach(btn => {
    btn.addEventListener('click', () => {
        const img = btn.querySelector('img')
        const src = img.getAttribute('src')
        const alt = img.getAttribute('alt')
        selected_insect = { src, alt }
        screens[1].classList.add('up')
        setTimeout(createInsect, 1000)
        startGame()
    })
 })
 function startGame() {
    setInterval(increaseTime, 1000)
 }
 function increaseTime() {
    let m = Math.floor(seconds / 60)
    let s = seconds % 60
    m = m < 10 ? `0${m}` : m
    s = s < 10 ? `0${s}` : s
    timeEl.innerHTML = `Time: ${m}:${s}`
    seconds++
 }
 function createInsect() {
    const insect = document.createElement('div')
    insect.classList.add('insect')
    const { x, y } = getRandomLocation()
    insect.style.top = `${y}px`
    insect.style.left = `${x}px`
    insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
    insect.addEventListener('click', catchInsect)
    game_container.appendChild(insect)
 }
 function getRandomLocation() {
    const width = window.innerWidth
    const height = window.innerHeight
    const x = Math.random() * (width - 200) + 100
    const y = Math.random() * (height - 200) + 100
    return { x, y }
 }
 function catchInsect() {
    increaseScore()
    this.classList.add('caught')
    setTimeout(() => this.remove(), 2000)
    addInsects()
 }
 function addInsects() {
    setTimeout(createInsect, 1000)
    setTimeout(createInsect, 1500)
 }
 function increaseScore() {
    score++
    if(score > 19) {
        message.classList.add('visible')
    }
    scoreEl.innerHTML = `Score: ${score}`
 }
--- a/insect-catch-game/style.css
+++ b/insect-catch-game/style.css
@ -1,150 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #516dff;
  color: #fff;
  font-family: 'Press Start 2P', sans-serif;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  text-align: center;
 }
 a {
  color: #fff;
 }
 h1 {
  line-height: 1.4;
 }
 .btn {
  border: 0;
  background-color: #fff;
  color: #516dff;
  padding: 15px 20px;
  font-family: inherit;
  cursor: pointer;
 }
 .btn:hover {
  opacity: 0.9;
 }
 .btn:focus {
  outline: 0;
 }
 .screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  transition: margin 0.5s ease-out;
 }
 .screen.up {
  margin-top: -100vh;
 }
 .insects-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  padding: 0;
 }
 .insects-list li {
  margin: 10px;
 }
 .choose-insect-btn {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  width: 150px;
  height: 150px;
 }
 .choose-insect-btn:hover {
  background-color: #fff;
  color: #516dff;
 }
 .choose-insect-btn:active {
  background-color: rgba(255, 255, 255, 0.7);
 }
 .choose-insect-btn img {
  width: 100px;
  height: 100px;
  object-fit: contain;
 }
 .game-container {
  position: relative;
 }
 .time,
 .score {
  position: absolute;
  top: 20px;
 }
 .time {
  left: 20px;
 }
 .score {
  right: 20px;
 }
 .message {
  line-height: 1.7;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 20px;
  z-index: 100;
  text-align: center;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -150%);
  transition: transform 0.4s ease-in;
 }
 .message.visible {
  transform: translate(-50%, 150%);
  opacity: 1;
 }
 .insect {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s ease-in-out;
 }
 .insect.caught {
  transform: translate(-50%, -50%) scale(0);
 }
 .insect img {
  width: 100px;
  height: 100px;
 }
--- a/kinetic-loader/index.html
+++ b/kinetic-loader/index.html
@ -1,14 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Kinetic Loader</title>
  </head>
  <body>
    <div class="kinetic"></div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/kinetic-loader/style.css
+++ b/kinetic-loader/style.css
@ -1,69 +0,0 @@
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .kinetic {
  position: relative;
  height: 80px;
  width: 80px;
 }
 .kinetic::after,
 .kinetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #fff;
  animation: rotateA 2s linear infinite 0.5s;
 }
 .kinetic::before {
  transform: rotate(90deg);
  animation: rotateB 2s linear infinite;
 }
@keyframes rotateA {
  0%,
  25% {
    transform: rotate(0deg);
  }
  50%,
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
 }
@keyframes rotateB {
  0%,
  25% {
    transform: rotate(90deg);
  }
  50%,
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(450deg);
  }
 }
--- a/live-user-filter/index.html
+++ b/live-user-filter/index.html
@ -1,25 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Live User Filter</title>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <h4 class="title">Live User Filter</h4>
        <small class="subtitle">Search by name and/or location</small>
        <input type="text" id="filter" placeholder="Search">
      </header>
      <ul id="result" class="user-list">
        <li>
          <h3>Loading...</h3>
        </li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/live-user-filter/script.js
+++ b/live-user-filter/script.js
@ -1,42 +0,0 @@
 const result = document.getElementById('result')
 const filter = document.getElementById('filter')
 const listItems = []
 getData()
 filter.addEventListener('input', (e) => filterData(e.target.value))
 async function getData() {
    const res = await fetch('https://randomuser.me/api?results=50')
    const { results } = await res.json()
    // Clear result
    result.innerHTML = ''
    results.forEach(user => {
        const li = document.createElement('li')
        listItems.push(li)
        li.innerHTML = `
            <img src="${user.picture.large}" alt="${user.name.first}">
            <div class="user-info">
                <h4>${user.name.first} ${user.name.last}</h4>
                <p>${user.location.city}, ${user.location.country}</p>
            </div>
        `
        result.appendChild(li)
    })
 }
 function filterData(searchTerm) {
    listItems.forEach(item => {
        if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
            item.classList.remove('hide')
        } else {
            item.classList.add('hide')
        }
    })
 }
--- a/live-user-filter/style.css
+++ b/live-user-filter/style.css
@ -1,94 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: #f8f9fd;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
 }
 .container {
  border-radius: 5px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 300px;
 }
 .title {
  margin: 0;
 }
 .subtitle {
  display: inline-block;
  margin: 5px 0 20px;
  opacity: 0.8;
 }
 .header {
  background-color: #3e57db;
  color: #fff;
  padding: 30px 20px;
 }
 .header input {
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  padding: 10px 15px;
  width: 100%;
 }
 .header input:focus {
  outline: none;
 }
 .user-list {
  background-color: #fff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
 }
 .user-list li {
  display: flex;
  padding: 20px;
 }
 .user-list img {
  border-radius: 50%;
  object-fit: cover;
  height: 50px;
  width: 50px;
 }
 .user-list .user-info {
  margin-left: 10px;
 }
 .user-list .user-info h4 {
  margin: 0 0 10px;
 }
 .user-list .user-info p {
  font-size: 12px;
 }
 .user-list li:not(:last-of-type) {
  border-bottom: 1px solid #eee;
 }
 .user-list li.hide {
  display: none;
 }
--- a/mobile-tab-navigation/index.html
+++ b/mobile-tab-navigation/index.html
@ -1,39 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Mobile Tab Navigation</title>
  </head>
  <body>
    <div class="phone">
      <img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80" alt="home" class="content show">
      <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="work" class="content">
      <img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="blog" class="content">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="about" class="content">
      <nav>
        <ul>
          <li class="active">
            <i class="fas fa-home"></i>
            <p>Home</p>
          </li>
          <li>
            <i class="fas fa-box"></i>
            <p>Work</p>
          </li>
          <li>
            <i class="fas fa-book-open"></i>
            <p>Blog</p>
          </li>
          <li>
            <i class="fas fa-users"></i>
            <p>About Us</p>
          </li>
        </ul>
      </nav>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/mobile-tab-navigation/script.js
+++ b/mobile-tab-navigation/script.js
@ -1,21 +0,0 @@
 const contents = document.querySelectorAll('.content')
 const listItems = document.querySelectorAll('nav ul li')
 listItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
        hideAllContents()
        hideAllItems()
        item.classList.add('active')
        contents[idx].classList.add('show')
    })
 })
 function hideAllContents() {
    contents.forEach(content => content.classList.remove('show'))
 }
 function hideAllItems() {
    listItems.forEach(item => item.classList.remove('active'))
 }
--- a/mobile-tab-navigation/style.css
+++ b/mobile-tab-navigation/style.css
@ -1,74 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  background-color: rgba(155, 89, 182, 0.7);
  font-family: 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
 }
 .phone {
  position: relative;
  overflow: hidden;
  border: 3px solid #eee;
  border-radius: 15px;
  height: 600px;
  width: 340px;
 }
 .phone .content {
  opacity: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
 }
 .phone .content.show {
  opacity: 1;
 }
 nav {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: -5px;
  width: 100%;
 }
 nav ul {
  background-color: #fff;
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 60px;
 }
 nav li {
  color: #777;
  cursor: pointer;
  flex: 1;
  padding: 10px;
  text-align: center;
 }
 nav ul li p {
  font-size: 12px;
  margin: 2px 0;
 }
 nav ul li:hover,
 nav ul li.active {
  color: #8e44ad;
 }
--- a/movie-app/index.html
+++ b/movie-app/index.html
@ -1,20 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Movie App</title>
  </head>
  <body>
    <header>
      <form id="form">
        <input type="text" id="search" class="search" placeholder="Search">
      </form>
    </header>
    <main id="main"></main>
    <script src="script.js"></script>
  </body>
 </html>
--- a/movie-app/script.js
+++ b/movie-app/script.js
@ -1,65 +0,0 @@
 const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
 const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
 const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
 const main = document.getElementById('main')
 const form = document.getElementById('form')
 const search = document.getElementById('search')
 // Get initial movies
 getMovies(API_URL)
 async function getMovies(url) {
    const res = await fetch(url)
    const data = await res.json()
    showMovies(data.results)
 }
 function showMovies(movies) {
    main.innerHTML = ''
    movies.forEach((movie) => {
        const { title, poster_path, vote_average, overview } = movie
        const movieEl = document.createElement('div')
        movieEl.classList.add('movie')
        movieEl.innerHTML = `
            <img src="${IMG_PATH + poster_path}" alt="${title}">
            <div class="movie-info">
          <h3>${title}</h3>
          <span class="${getClassByRate(vote_average)}">${vote_average}</span>
            </div>
            <div class="overview">
          <h3>Overview</h3>
          ${overview}
        </div>
        `
        main.appendChild(movieEl)
    })
 }
 function getClassByRate(vote) {
    if(vote >= 8) {
        return 'green'
    } else if(vote >= 5) {
        return 'orange'
    } else {
        return 'red'
    }
 }
 form.addEventListener('submit', (e) => {
    e.preventDefault()
    const searchTerm = search.value
    if(searchTerm && searchTerm !== '') {
        getMovies(SEARCH_API + searchTerm)
        search.value = ''
    } else {
        window.location.reload()
    }
 })
--- a/movie-app/style.css
+++ b/movie-app/style.css
@ -1,112 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
 :root {
  --primary-color: #22254b;
  --secondary-color: #373b69;
 }
 * {
  box-sizing: border-box;
 }
 body {
  background-color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
  margin: 0;
 }
 header {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  background-color: var(--secondary-color);
 }
 .search {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  color: #fff;
 }
 .search::placeholder {
  color: #7378c5;
 }
 .search:focus {
  outline: none;
  background-color: var(--primary-color);
 }
 main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 }
 .movie {
  width: 300px;
  margin: 1rem;
  background-color: var(--secondary-color);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
 }
 .movie img {
  width: 100%;
 }
 .movie-info {
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:0.2rem;
  padding: 0.5rem 1rem 1rem;
  letter-spacing: 0.5px;
 }
 .movie-info h3 {
  margin-top: 0;
 }
 .movie-info span {
  background-color: var(--primary-color);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-weight: bold;
 }
 .movie-info span.green {
  color: lightgreen;
 }
 .movie-info span.orange {
  color: orange;
 }
 .movie-info span.red {
  color: red;
 }
 .overview {
  background-color: #fff;
  padding: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  transform: translateY(101%);
  overflow-y: auto;
  transition: transform 0.3s ease-in;
 }
 .movie:hover .overview {
  transform: translateY(0);
 }
--- a/netflix-mobile-navigation/index.html
+++ b/netflix-mobile-navigation/index.html
@ -1,47 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Netflix Mobile Navigation</title>
  </head>
  <body>
    <button class="nav-btn open-btn">
      <i class="fas fa-bars"></i>
    </button>
    <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_Logo_2014-700x188.png" alt="Logo" class="logo">
    <p class="text">Mobile Navigation</p>
    <div class="nav nav-black">
      <div class="nav nav-red">
        <div class="nav nav-white">
          <button class="nav-btn close-btn">
            <i class="fas fa-times"></i>
          </button>
          <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_Logo_2014-700x188.png" alt="Logo" class="logo">
          <ul class="list">
            <li><a href="#">Teams</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Life at Netflix</a></li>
            <li>
              <ul>
                <li><a href="#">Netflix culture memo</a></li>
                <li><a href="#">Work life balance</a></li>
                <li><a href="#">Inclusion & diversity</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/netflix-mobile-navigation/script.js
+++ b/netflix-mobile-navigation/script.js
@ -1,11 +0,0 @@
 const open_btn = document.querySelector('.open-btn')
 const close_btn = document.querySelector('.close-btn')
 const nav = document.querySelectorAll('.nav')
 open_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.add('visible'))
 })
 close_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.remove('visible'))
 })
--- a/netflix-mobile-navigation/style.css
+++ b/netflix-mobile-navigation/style.css
@ -1,110 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 * {
  box-sizing: border-box;
 }
 body {
  font-family: 'Muli', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
 }
 .text {
  text-transform: uppercase;
 }
 .logo {
  width: 150px;
 }
 .nav-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
 }
 .open-btn {
  position: fixed;
  top: 10px;
  left: 10px;
 }
 .nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
 }
 .nav.visible {
  transform: translateX(0);
 }
 .nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;
 }
 .nav-black.visible {
  transition-delay: 0s;
 }
 .nav-red {
  background-color: rgb(229, 9, 20);
  width: 95%;
  transition-delay: 0.2s;
 }
 .nav-red.visible {
  transition-delay: 0.2s;
 }
 .nav-white {
  background-color: #fff;
  width: 95%;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
 }
 .nav-white.visible {
  transition-delay: 0.4s;
 }
 .close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
 }
 .list {
  list-style-type: none;
  padding: 0;
 }
 .list li {
  margin: 20px 0;
 }
 .list li a {
  color: rgb(34, 31, 31);
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
 }
 .list ul {
  list-style-type: none;
  padding-left: 20px;
 }
--- a/notes-app/index.html
+++ b/notes-app/index.html
@ -1,18 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Notes App</title>
  </head>
  <body>
    <button class="add" id="add">
      <i class="fas fa-plus"></i> Add note
    </button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
    <script src="script.js"></script>
  </body>
 </html>
--- a/Show More
+++ b/Show More