From 9b42405634ab7553619c515528d05d9a13e89fa8 Mon Sep 17 00:00:00 2001
From: Taskeren <r0yalist@outlook.com>
Date: Sat, 15 Jul 2023 15:44:20 +0800
Subject: [PATCH] initial

---
 dishes.json | 11 +++++++
 index.html  | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 dishes.json
 create mode 100644 index.html
diff --git a/dishes.json b/dishes.json
new file mode 100644
index 0000000..ec73323
--- /dev/null
+++ b/dishes.json
@@ -0,0 +1,11 @@
+[
+"鸦片鱼",
+"鸡胸肉",
+"鸡翅中",
+"红烧茄子",
+"肉末茄子",
+"红烧大排",
+"排骨汤",
+"炒蛋",
+"菜糊辣"
+]
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..77fb48e
--- /dev/null
+++ 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>
\ No newline at end of file
