acm-mjct · Mofaji · Oct 30, 2022 · Oct 30, 2022
diff --git a/AlarmClock/Siemen/app.js b/AlarmClock/Siemen/app.js
@@ -0,0 +1,50 @@
+let para = document.getElementById('para');
+let text = document.getElementById('txt');
+let text2 = document.getElementById('txt2');
+let btn = document.getElementById('btn');
+let btn2 = document.getElementById('btn2');
+
+window.addEventListener('load', () => {
+  text.placeholder = new Date().getHours();
+  text2.placeholder = new Date().getMinutes();
+});
+
+btn.addEventListener('click', alarm);
+let x;
+function alarm() {
+  if (text.value && text2.value) {
+    x = setInterval(() => {
+      setAlarm();
+    }, 1000);
+  } else {
+    alert('ENTER THE HRS AND MINS!');
+  }
+}
+
+function setAlarm() {
+  let d = new Date().toLocaleDateString();
+  let then = new Date(`${d} ${text.value}:${text2.value}`).getTime();
+  // text.value = text.value % 12 || 12;
+  let now = new Date().getTime();
+
+  let distance = then - now;
+  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+  para.innerHTML = `ALARM IN - ${hours}:${minutes}:${seconds}`;
+
+  if (distance < 0) {
+    clearInterval(x);
+    para.innerHTML = `IT'S ALARM TIME!`;
+    let audio = new Audio('sound.mp3');
+    audio.play();
+    btn2.style.visibility = 'visible';
+    btn2.addEventListener('click', () => {
+      para.innerHTML = ``;
+      audio.pause();
+      btn2.style.visibility = 'hidden';
+      text.value = '';
+      text2.value = '';
+    });
+  }
+}
diff --git a/AlarmClock/Siemen/index.html b/AlarmClock/Siemen/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ALARM APP!</title>
+    <link rel="stylesheet" href="/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/6f260fee7a.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+
+    <nav>
+        <h1>ALARM APP
+            <i class="far fa-clock"></i>
+        </h1>
+    </nav>
+
+    <div class="container">
+        <p>Enter the time</p>
+        <div class="inputs">
+            <input type="number" id="txt" placeholder="" class="time" autocomplete="off">
+            <span>:</span>
+            <input type="number" id="txt2" placeholder="" class="time" autocomplete="off">
+        </div>
+
+        <div class="btns">
+            <button id="btn" class="butt">SET</button>
+            <button id="btn2" class="butt">STOP</button>
+        </div>
+        <div class="info">
+            <p id="para"></p>
+        </div>
+    </div>
+
+    <script src="/app.js"></script>
+</body>
+
+</html>
diff --git a/AlarmClock/Siemen/readme.md b/AlarmClock/Siemen/readme.md
@@ -0,0 +1,5 @@
+## Alarm Clock app using Vanilla js.
+
+Set the time and let the app remind you when the time expires!
+
+![ezgif-4-83ae0e2bd697](https://user-images.githubusercontent.com/62604902/137862910-a6029567-6cf3-4944-9fd4-7066ad8f3855.gif)
diff --git a/AlarmClock/Siemen/sound.mp3 b/AlarmClock/Siemen/sound.mp3
diff --git a/AlarmClock/Siemen/style.css b/AlarmClock/Siemen/style.css
@@ -0,0 +1,69 @@
+:root {
+  --bg-prim: #12181b;
+  --bg-sec: #383838;
+  --clr: #ffffff;
+}
+
+body {
+  font-family: 'Montserrat', sans-serif;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  background-color: var(--bg-prim);
+}
+
+nav {
+  text-align: center;
+  padding: 0.1rem;
+  color: var(--clr);
+  background-color: var(--bg-sec);
+}
+
+.container {
+  margin: 5rem auto;
+  background-color: var(--bg-sec);
+  padding: 1rem;
+  color: var(--clr);
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+  align-items: center;
+  width: 40rem;
+  border-radius: 10px;
+}
+span {
+  font-size: 1.3rem;
+}
+.time {
+  text-align: center;
+  outline: none;
+  font-size: 1.5rem;
+  height: 3rem;
+  margin: 1rem;
+  width: 5rem;
+}
+.butt {
+  font-size: 1rem;
+  margin-top: 0.6rem;
+  outline: none;
+  border: none;
+  width: 5rem;
+  padding: 0.55rem;
+  cursor: pointer;
+  color: #fff;
+  border-radius: 4px;
+  background-color: hsl(217deg 99% 65%);
+}
+#btn2 {
+  visibility: hidden;
+  display: block;
+}
+p {
+  font-size: 1.3rem;
+}
+
+@media (max-width: 650px) {
+  .container {
+    width: 20rem;
+  }
+}
diff --git a/AnnoyingButtonGame/MBECKDEV/Readme.md b/AnnoyingButtonGame/MBECKDEV/Readme.md
@@ -0,0 +1,10 @@
+# Annoying Button Game
+
+Buttons are annoying when they seem to be moving around!
+
+This is a game where you have to find the correct button out of all the buttons before the timer finishes.
+
+How to play:
+
+1. Click the start button.
+2. Click all the buttons until you win.
diff --git a/AnnoyingButtonGame/MBECKDEV/app.js b/AnnoyingButtonGame/MBECKDEV/app.js
@@ -0,0 +1,151 @@
+'use strict';
+
+let gameState = {
+  state: 'initial', // initial, playing, or finished
+  timeLeft: '', // keeps track of timer to use when finished
+};
+
+let domThings = {
+  buttonsArea: document.getElementById('buttons-area'),
+  timeNumber: document.getElementById('countdown-timer'),
+  buttonStartOrPlayAgain: document.getElementById('button-start-or-play-again'),
+  highScoreSeconds: document.getElementById('high-score-seconds'),
+  winLoseMessage: document.getElementById('win-lose-message'),
+  countdownTimerContainer: document.getElementById('countdown-timer-container'),
+  highscoreContainer: document.getElementById('highscore-container'),
+};
+
+let pastHighScore = 0;
+let buttons = [];
+
+function drawButtons() {
+  let specialIndex = Math.floor(Math.random() * 16);
+
+  for (let i = 0; i < 16; i++) {
+    let oneSection = document.createElement('div');
+    oneSection.classList.add('section');
+    domThings.buttonsArea.appendChild(oneSection);
+
+    let oneButton = document.createElement('button');
+    oneButton.classList.add('initial');
+    oneButton.classList.add('huehue');
+    oneButton.textContent = 'Click Me!';
+    oneSection.appendChild(oneButton);
+
+    oneButton.addEventListener('click', (e) => {
+      aButtonWasClicked(e, i);
+    });
+
+    buttons.push(oneButton);
+
+    if (i === specialIndex) {
+      oneButton.classList.add('special');
+    }
+  }
+}
+
+function aButtonWasClicked(e, buttonIndex) {
+  if (gameState.state === 'playing') {
+    let thisButton = e.target;
+
+    if (thisButton.classList.contains('initial')) {
+      thisButton.classList.remove('initial');
+      thisButton.classList.add('moved-1');
+    } else if (thisButton.classList.contains('moved-1')) {
+      // if it's the special button, make it moved-2, else, delete it
+      if (thisButton.classList.contains('special')) {
+        thisButton.classList.remove('moved-1');
+        thisButton.classList.add('moved-2');
+      } else {
+        thisButton.classList.remove('moved-1');
+        thisButton.classList.add('hidden');
+      }
+    } else if (thisButton.classList.contains('moved-2')) {
+      // this only happens on the special button
+      thisButton.classList.remove('moved-2');
+      thisButton.classList.add('moved-3');
+    } else if (thisButton.classList.contains('moved-3')) {
+      // this only happens on the special button
+      thisButton.classList.remove('moved-3');
+      thisButton.classList.add('moved-win');
+      youWon(thisButton);
+    }
+  }
+}
+
+function youWon(thisButton) {
+  clearInterval(intervalA);
+  gameState.state = 'finished';
+  thisButton.textContent = 'Stop clicking me! You win!';
+  domThings.winLoseMessage.textContent = 'YOU WIN!';
+
+  if (pastHighScore <= gameState.timeLeft) {
+    pastHighScore = gameState.timeLeft;
+    domThings.highScoreSeconds.textContent = pastHighScore;
+
+    if (domThings.highscoreContainer.classList.contains('hidden')) {
+      domThings.highscoreContainer.classList.remove('hidden');
+    }
+  }
+
+  resetStartButton();
+}
+
+// tell the startbutton that if you click start, you start playing.
+domThings.buttonStartOrPlayAgain.addEventListener('click', startPlaying);
+
+let timerIncrement = 100; // in ms
+const maxTime = 10000;
+
+let intervalA = '';
+let timerTime = 0;
+
+function startPlaying() {
+  // Show countdown timer first time hitting the start button
+  if (domThings.countdownTimerContainer.classList.contains('hidden')) {
+    domThings.countdownTimerContainer.classList.remove('hidden');
+  }
+
+  // Delete buttons if not first time playing
+  let buttonsArea = document.getElementById('buttons-area');
+
+  while (buttonsArea.firstChild) {
+    buttonsArea.firstChild.remove();
+  }
+
+  // Hide win lose message and start button
+  domThings.winLoseMessage.textContent = '';
+  domThings.buttonStartOrPlayAgain.classList.add('hidden');
+
+  // Set the state of the game and do other things
+  gameState.state = 'playing';
+  drawButtons();
+  startTimer();
+}
+
+function startTimer() {
+  timerTime = 0;
+  intervalA = setInterval(countDown, timerIncrement);
+}
+
+function youLose() {
+  gameState.state = 'finished';
+  clearInterval(intervalA);
+  domThings.winLoseMessage.textContent = 'YOU LOSE';
+  resetStartButton();
+}
+
+function resetStartButton() {
+  domThings.buttonStartOrPlayAgain.textContent = 'Play Again';
+  domThings.buttonStartOrPlayAgain.classList.remove('hidden');
+}
+
+function countDown() {
+  timerTime += timerIncrement;
+  gameState.timeLeft = (maxTime - timerTime) / 1000;
+  domThings.timeNumber.textContent = gameState.timeLeft;
+
+  if (gameState.timeLeft <= 0) {
+    youLose();
+  }
+}
diff --git a/AnnoyingButtonGame/MBECKDEV/index.html b/AnnoyingButtonGame/MBECKDEV/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Annoying Button Game</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="shortcut icon" href="#" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <header><h1>Annoying Button Game</h1></header>
+    <main>
+      <div id="game-area">
+        <div id="game-info">
+          <p>Click the correct button</p>
+          <p id="highscore-container" class="hidden">
+            Highscore: <span id="high-score-seconds"></span> seconds left
+          </p>
+          <p id="win-lose-message"></p>
+          <div id="countdown-timer-container" class="hidden">
+            <span id="countdown-timer"></span> seconds left
+          </div>
+          <div id="start-button-container">
+            <button id="button-start-or-play-again">Start</button>
+          </div>
+        </div>
+        <div id="buttons-area"></div>
+      </div>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>