initial

2023-07-15 15:44:20 +08:00 · 2023-07-15 15:44:20 +08:00 · 9b42405634
commit 9b42405634
2 changed files with 105 additions and 0 deletions
--- a/dishes.json
+++ b/dishes.json
@ -0,0 +1,11 @@
+[
+"鸦片鱼",
+"鸡胸肉",
+"鸡翅中",
+"红烧茄子",
+"肉末茄子",
+"红烧大排",
+"排骨汤",
+"炒蛋",
+"菜糊辣"
+]
--- a/index.html
+++ b/index.html
@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>What to Eat Today?</title>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            display: flex;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+        .wrapper {
+            max-width: 1200px;
+            text-align: center;
+        }
+        #dish-name {
+            font-size: 3rem;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+        #re-random {
+            width: 3rem;
+            margin: auto;
+            border-radius: 10%;
+            padding: .8rem;
+            background-color: cadetblue;
+            color: white;
+
+            user-select: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="wrapper">
+            <p>今天吃</p>
+            <p id="dish-name">Undefined</p>
+            <p id="re-random">换一个</p>
+        </div>
+    </div>
+</body>
+<script>
+    class DishRandom {
+
+        constructor(dishNameElement, dishes, reRandomElement) {
+            this.dishNameEl = dishNameElement
+            this.dishes = dishes
+
+            this.random()
+
+            if(reRandomElement) {
+                reRandomElement.addEventListener("click", () => {
+                    this.random()
+                })
+            }
+        }
+
+        get dishName() {
+            return this.dishNameEl.innerText
+        }
+
+        set dishName(name) {
+            this.dishNameEl.innerText = name
+        }
+
+        random() {
+            let index = Math.floor(Math.random() * this.dishes.length)
+            this.dishName = this.dishes[index]
+        }
+
+    }
+
+    fetch("./dishes.json").then(r => r.json()).then(dishes => {
+        new DishRandom(
+            document.getElementById("dish-name"),
+            dishes,
+            document.getElementById("re-random")
+        )
+    }).catch(e => {
+        document.getElementById("dish-name").innerText = "菜谱丢了"
+        console.error(e)
+    })
+
+    
+</script>
+</html>