cubstart · amerl07 · Feb 28, 2025 · Feb 28, 2025 · Mar 7, 2025 · Mar 7, 2025
diff --git a/week4/yumo_liu/cookie_crunch.mp3 b/week4/yumo_liu/cookie_crunch.mp3
diff --git a/week4/yumo_liu/index.html b/week4/yumo_liu/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<body>
+    <br>
+    <h1>Factory Name: <input type=""text"></h1>
+    <br>
+
+    <div id="timer">
+        <h1>Challenge Timer</h1>
+        <h2>Click to start a 30 second timer. See how many cookies you can make!</h2>
+        <button onclick="setTimeout(challengeTimer, 300);">Try Me</button>
+    </div>
+
+    <div id="effects">
+    <br>
+        <button onclick="clearEffect(event);">Clear saturation</button>
+    </div>
+    <br>
+    <h1>
+        <span id="counter">0</span> cookies
+    </h1>
+
+    <img 
+    id="cookieImage"
+    src="https://images.cdn.us-central1.gcp.commercetools.com/4e5a974e-1287-4368-811f-41d06eb6c548/Chocolate%20Chip%20Silo%20-t71xMOs7.png" onclick="addOneToCounter()" 
+    />
+
+    <div id="upgrade">
+        <h1>Upgrades</h1>
+        <h2>5 MORE COOKIES per click</h2>
+        <h2>Trade cookies for this upgrade!</h2>
+        <h3>Can purchase multiple times</h3>
+        <button onclick=" clickerUpgrade();">Purchase</button>
+    </div>
+
+    <br>
+    <h2>Click on me. I will eat all your cookies.</h2>
+    <img
+    src="https://www.mashed.com/img/gallery/the-cookie-monsters-cookies-arent-what-you-think/intro-1642500635.jpg" onclick="resetCounter()"
+    />
+
+
+
+<script>
+var sound_click = new Audio('mouse_click.mp3');
+var sound_eat = new Audio('cookie_crunch.mp3');
+
+var clicker_update = 0;
+var price = 1;
+
+function addOneToCounter(){
+    var img = document.getElementById("cookieImage")
+
+    if (clicker_update === 0) {
+        document.getElementById("counter").innerText = parseInt(document.getElementById("counter").innerText) + 1
+    } else {
+        document.getElementById("counter").innerText = parseInt(document.getElementById("counter").innerText) + clicker_update * 5
+    }
+    sound_click.currentTime = 0
+    sound_click.play();
+
+    saturationValue += 1
+    img.style.filter = "saturate(2)";
+    img.style.transition = "filter 0.3s ease";
+}
+
+function clearEffect(){
+    var img = document.getElementById("cookieImage")
+    img.style.filter = "saturate(1)";
+}
+
+function resetCounter(){
+    document.getElementById("counter").innerText = 0
+    sound_eat.play();
+}
+
+function challengeTimer(){
+    const cookie_count = parseInt(document.getElementById("counter").innerText)
+    alert(`Time's Up. You made ${cookie_count} cookies in 30 seconds` );
+}
+
+function clickerUpgrade(){
+    if (parseInt(document.getElementById("counter").innerText) >= price * 50) {
+        document.getElementById("counter").innerText = parseInt(document.getElementById("counter").innerText) - 50
+        clicker_update += 1
+        price += 1
+
+      } else {
+        alert(`You need ${price * 50} cookies for this upgrade`);
+      }
+}
+</script>
+
+</body>
+</html>
+
diff --git a/week4/yumo_liu/mouse_click.mp3 b/week4/yumo_liu/mouse_click.mp3
diff --git a/week5/yumo_liu/index.html b/week5/yumo_liu/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Socket.IO chat</title>
+    <style>
+      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+
+      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
+      #input:focus { outline: none; }
+      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+
+      #messages { list-style-type: none; margin: 0; padding: 0; }
+      #messages > li { padding: 0.5rem 1rem; }
+      #messages > li:nth-child(odd) { background: #efefef; }
+    </style>
+  </head>
+  <body>
+    <ul id="messages"></ul>
+    <form id="form" action="">
+      <input id="input" autocomplete="off" /><button>Send</button>
+    </form>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      var socket = io();
+
+      var nickname = prompt("Enter a nickname") //ask user for a nickname
+      socket.emit("set nickname", nickname); //sends the entered nickname to the server
+
+      var messages = document.getElementById('messages');
+      var form = document.getElementById('form');
+      var input = document.getElementById('input');
+
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if (input.value) {
+          socket.emit('chat message', input.value);
+          input.value = '';
+        }
+      });
+
+      socket.on('chat message', function(msg) {
+        var item = document.createElement('li');
+        item.textContent = msg;
+        messages.appendChild(item);
+        window.scrollTo(0, document.body.scrollHeight);
+      });
+
+      socket.on("nickname set", function(message) {
+        alert(message);
+      });
+
+    </script>
+
+  </body>
+</html>
diff --git a/week5/yumo_liu/index.js b/week5/yumo_liu/index.js
@@ -0,0 +1,34 @@
+const express = require('express');
+const app = express();
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require("socket.io");
+const io = new Server(server);
+
+app.get('/', (req, res) => {
+  res.sendFile(__dirname + '/index.html');
+});
+
+io.on('connection', (socket) => {
+    console.log('A user connected');
+    io.emit('chat message', 'A new user has joined the chat');
+
+    socket.on('disconnect', () => {
+      console.log('A user disconnected');
+      io.emit('chat message', 'A user has left the chat');
+    });
+
+    socket.on('chat message', (msg) => {
+      io.emit('chat message', `${socket.nickname}: ${msg}`); //adds the stored nickname before the message
+    });
+
+    socket.on("set nickname", (nickname) => {
+        socket.nickname = nickname; //stores the nickname in server. In this file because in backend.
+        console.log(`${nickname} joined the chat`); //appears in terminal
+      });      
+
+  });
+
+server.listen(3000, () => {
+  console.log('listening on *:3000');
+});