githubnext · fratquintero · Nov 21, 2024 · Nov 29, 2024
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
-This repository is empty. Any task executed on it should be considered a new capability and needs to be created.
+Sleep time calculator
+Code in html/javascript the UI for the following problem. 
+I used to sleep 8 hours but because I have a new baby, 
+I only sleep 5 hours. How many less time am I going to sleep: per week (hours), per month(days), per year (in days). 
+Make it so the variables x = hours of sleep before newborn and y= hours of sleep after them can be changed by the user. Make it so the user can iterate the problem
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sleep Time Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Sleep Time Calculator</h1>
+    <form id="sleepForm">
+        <label for="hoursBefore">Hours of sleep before newborn (x):</label>
+        <input type="number" id="hoursBefore" name="hoursBefore" required>
+        <br>
+        <label for="hoursAfter">Hours of sleep after newborn (y):</label>
+        <input type="number" id="hoursAfter" name="hoursAfter" required>
+        <br>
+        <button type="submit">Calculate</button>
+    </form>
+    <div id="results">
+        <h2>Results</h2>
+        <p id="weeklyResult"></p>
+        <p id="monthlyResult"></p>
+        <p id="yearlyResult"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,14 @@
+document.getElementById('sleepForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const x = parseFloat(document.getElementById('hoursBefore').value);
+    const y = parseFloat(document.getElementById('hoursAfter').value);
+
+    const weeklyDifference = (x - y) * 7;
+    const monthlyDifference = (x - y) * 30 / 24;
+    const yearlyDifference = (x - y) * 365 / 24;
+
+    document.getElementById('weeklyResult').textContent = `You will sleep ${weeklyDifference} hours less per week.`;
+    document.getElementById('monthlyResult').textContent = `You will sleep ${monthlyDifference.toFixed(2)} days less per month.`;
+    document.getElementById('yearlyResult').textContent = `You will sleep ${yearlyDifference.toFixed(2)} days less per year.`;
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,67 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    color: #555;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#results {
+    max-width: 400px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+#results h2 {
+    text-align: center;
+    color: #333;
+}
+
+#results p {
+    margin: 10px 0;
+    color: #555;
+}
diff --git a/tictactoe.html b/tictactoe.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tic Tac Toe</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-color: #f0f0f0;
+    }
+
+    .board {
+      display: grid;
+      grid-template-columns: repeat(3, 100px);
+      grid-template-rows: repeat(3, 100px);
+      gap: 5px;
+    }
+
+    .cell {
+      width: 100px;
+      height: 100px;
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 2em;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      transition: background-color 0.3s;
+    }
+
+    .cell:hover {
+      background-color: #e0e0e0;
+    }
+
+    .cell.X {
+      color: #ff4d4d;
+    }
+
+    .cell.O {
+      color: #4da6ff;
+    }
+
+    .message {
+      margin-top: 20px;
+      font-size: 1.2em;
+    }
+
+    .one-more-button {
+      margin-top: 20px;
+      padding: 10px 20px;
+      font-size: 1em;
+      cursor: pointer;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      transition: background-color 0.3s;
+      display: none;
+    }
+
+    .one-more-button:hover {
+      background-color: #0056b3;
+    }
+
+    .scores {
+      margin-top: 20px;
+      font-size: 1.2em;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="board" id="board">
+    <div class="cell" data-index="0"></div>
+    <div class="cell" data-index="1"></div>
+    <div class="cell" data-index="2"></div>
+    <div class="cell" data-index="3"></div>
+    <div class="cell" data-index="4"></div>
+    <div class="cell" data-index="5"></div>
+    <div class="cell" data-index="6"></div>
+    <div class="cell" data-index="7"></div>
+    <div class="cell" data-index="8"></div>
+  </div>
+  <div class="message" id="message"></div>
+  <button class="one-more-button" id="oneMoreButton">One More</button>
+  <div class="scores" id="scores">
+    Games Played: <span id="gamesPlayed">0</span><br>
+    Human Wins: <span id="humanWins">0</span><br>
+    Computer Wins: <span id="computerWins">0</span><br>
+    Draws: <span id="draws">0</span>
+  </div>
+
+  <script>
+    const board = document.getElementById('board');
+    const message = document.getElementById('message');
+    const oneMoreButton = document.getElementById('oneMoreButton');
+    const gamesPlayedSpan = document.getElementById('gamesPlayed');
+    const humanWinsSpan = document.getElementById('humanWins');
+    const computerWinsSpan = document.getElementById('computerWins');
+    const drawsSpan = document.getElementById('draws');
+    let boardState = Array(9).fill(null);
+    let currentPlayer = 'X';
+    let humanStarts = true;
+    let gamesPlayed = 0;
+    let humanWins = 0;
+    let computerWins = 0;
+    let draws = 0;
+
+    function handleClick(event) {
+      const cell = event.target;
+      const index = cell.getAttribute('data-index');
+
+      if (boardState[index] || checkWinner() || checkDraw()) return;
+
+      boardState[index] = currentPlayer;
+      cell.textContent = currentPlayer;
+      cell.classList.add(currentPlayer);
+
+      if (checkWinner()) {
+        endGame(`Player ${currentPlayer} wins!`);
+        return;
+      }
+
+      if (checkDraw()) {
+        endGame('It\'s a draw!');
+        return;
+      }
+
+      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+      if (currentPlayer === 'O') {
+        setTimeout(computerMove, 500);
+      }
+    }
+
+    function computerMove() {
+      let bestScore = -Infinity;
+      let move;
+
+      for (let i = 0; i < boardState.length; i++) {
+        if (boardState[i] === null) {
+          boardState[i] = 'O';
+          let score = minimax(boardState, 0, false);
+          boardState[i] = null;
+          if (score > bestScore) {
+            bestScore = score;
+            move = i;
+          }
+        }
+      }
+
+      boardState[move] = 'O';
+      board.children[move].textContent = 'O';
+      board.children[move].classList.add('O');
+
+      if (checkWinner()) {
+        endGame('Computer wins!');
+        return;
+      }
+
+      if (checkDraw()) {
+        endGame('It\'s a draw!');
+        return;
+      }
+
+      currentPlayer = 'X';
+    }
+
+    function minimax(state, depth, isMaximizing) {
+      if (checkWinner('O')) return 1;
+      if (checkWinner('X')) return -1;
+      if (checkDraw()) return 0;
+
+      if (isMaximizing) {
+        let bestScore = -Infinity;
+        for (let i = 0; i < state.length; i++) {
+          if (state[i] === null) {
+            state[i] = 'O';
+            let score = minimax(state, depth + 1, false);
+            state[i] = null;
+            bestScore = Math.max(score, bestScore);
+          }
+        }
+        return bestScore;
+      } else {
+        let bestScore = Infinity;
+        for (let i = 0; i < state.length; i++) {
+          if (state[i] === null) {
+            state[i] = 'X';
+            let score = minimax(state, depth + 1, true);
+            state[i] = null;
+            bestScore = Math.min(score, bestScore);
+          }
+        }
+        return bestScore;
+      }
+    }
+
+    function checkWinner(player = currentPlayer) {
+      const winPatterns = [
+        [0, 1, 2], [3, 4, 5], [6, 7, 8],
+        [0, 3, 6], [1, 4, 7], [2, 5, 8],
+        [0, 4, 8], [2, 4, 6]
+      ];
+
+      return winPatterns.some(pattern => pattern.every(index => boardState[index] === player));
+    }
+
+    function checkDraw() {
+      return boardState.every(cell => cell !== null);
+    }
+
+    function endGame(result) {
+      message.textContent = result;
+      oneMoreButton.style.display = 'block';
+      gamesPlayed++;
+
+      if (result.includes('Player')) {
+        humanWins++;
+      } else if (result.includes('Computer')) {
+        computerWins++;
+      } else {
+        draws++;
+      }
+
+      gamesPlayedSpan.textContent = gamesPlayed;
+      humanWinsSpan.textContent = humanWins;
+      computerWinsSpan.textContent = computerWins;
+      drawsSpan.textContent = draws;
+    }
+
+    function restartGame() {
+      boardState = Array(9).fill(null);
+      currentPlayer = humanStarts ? 'X' : 'O';
+      message.textContent = '';
+      oneMoreButton.style.display = 'none';
+      for (let cell of board.children) {
+        cell.textContent = '';
+        cell.classList.remove('X', 'O');
+      }
+      humanStarts = !humanStarts;
+      if (currentPlayer === 'O') {
+        setTimeout(computerMove, 500);
+      }
+    }
+
+    board.addEventListener('click', handleClick);
+    oneMoreButton.addEventListener('click', restartGame);
+
+    // Start the game with human player
+    if (!humanStarts) {
+      setTimeout(computerMove, 500);
+    }
+  </script>
+</body>
+
+</html>