Mid-Semester Test for Digital Business and AI

MafuSaku · Jan 7, 2025 · dbe9604 · dbe9604
1 parent daa55e2
commit dbe9604
Show file tree

Hide file tree

Showing 7 changed files with 265 additions and 0 deletions.
diff --git a/2024/Mid Semester Test/ข้อ 1/index.html b/2024/Mid Semester Test/ข้อ 1/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop Thingy - saku</title>
+
+    <!-- Latest compiled and minified CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Latest compiled JavaScript -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+<body>
+    <main>
+        <div class="container mt-3">
+            <h1>My Shop</h1>
+            <p>ร้านค้าของพวกเราได้ทำการขายเสื้อสีเทาหลายขนาด</p>
+
+            <div class="card">
+                <div class="card-header">
+                    <h2>
+                        <p class="h2" id="productName1">Gray Shirt</p>
+                    </h2>
+                </div>
+                <div class="card-body">
+                    <img src="shop-images/re_1_2_12.jpg" alt="" height="520px" width="520px">
+                    <p>Price ฿399</p>
+                    <p>Amount Left: <span id="amountLeft1">3</span></p>
+                    <button id="buyButton1" type="button" class="btn btn-success">Buy</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <h2>
+                        <p class="h2" id="productName2">Cotton Gray Shirt</p>
+                    </h2>
+                </div>
+                <div class="card-body">
+                    <img src="shop-images/080bbf5373c3f9d88114ee6228aa6b42b2d27c9b_xxl-1.jpg" alt="" height="520px" width="520px">
+                    <p>Price ฿299</p>
+                    <p>Amount Left: <span id="amountLeft2">3</span></p>
+                    <button id="buyButton2" type="button" class="btn btn-success">Buy</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <h2>
+                        <p class="h2" id="productName3">Gray Shirt Set</p>
+                    </h2>
+                </div>
+                <div class="card-body">
+                    <img src="shop-images/572e60a0d03f6c21f6b71fd595ae78259818b9a4_xxl-1.jpg" alt="" height="520px" width="520px">
+                    <p>Price ฿499</p>
+                    <p>Amount Left: <span id="amountLeft3">3</span></p>
+                    <button id="buyButton3" type="button" class="btn btn-success">Buy</button>
+                </div>
+            </div>
+
+            <!-- <p>Some buttons:</p>
+            <button type="button" class="btn btn-primary">Primary</button>
+            <button type="button" class="btn btn-secondary">Secondary</button>
+            <button type="button" class="btn btn-success">Success</button>
+            <button type="button" class="btn btn-danger">Danger</button>
+            <button type="button" class="btn btn-warning">Warning</button>
+            <button type="button" class="btn btn-info">Info</button> -->
+        </div>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/2024/Mid Semester Test/ข้อ 1/script.js b/2024/Mid Semester Test/ข้อ 1/script.js
@@ -0,0 +1,68 @@
+// Total Product Amount
+let productAmount1 = 3;
+let productAmount2 = 3;
+let productAmount3 = 3;
+
+// Amount Left Displays and Buy Buttons
+const amountLeft1 = document.getElementById("amountLeft1");
+const buyButton1 = document.getElementById("buyButton1");
+
+const amountLeft2 = document.getElementById("amountLeft2");
+const buyButton2 = document.getElementById("buyButton2");
+
+const amountLeft3 = document.getElementById("amountLeft3");
+const buyButton3 = document.getElementById("buyButton3");
+
+// Product Names
+const productName1 = document.getElementById("productName1");
+const productName2 = document.getElementById("productName2");
+const productName3 = document.getElementById("productName3");
+
+// Button Event
+buyButton1.addEventListener('click', function () {
+
+    amountLeft1.innerHTML = productAmount1;
+    productAmount1--;
+
+    if (productAmount1 > 0) {
+        amountLeft1.innerHTML = productAmount1;
+        alert(`คุณได้ซื้อสินค้า ${productName1.textContent} อย่างสำเร็จ!\nสินค้าเหลืออยู่ ${productAmount1} ตัว`);
+    } else {
+        amountLeft1.innerHTML = "Sold Out!";
+        buyButton1.style.display = "none";
+        alert(`คุณได้ซื้อสินค้า ${productName1.textContent} อย่างสำเร็จ!\nสินค้านี้หมดแล้ว!`);
+    }
+
+});
+
+buyButton2.addEventListener('click', function () {
+
+    amountLeft2.innerHTML = productAmount2;
+    productAmount2--;
+
+    if (productAmount2 > 0) {
+        amountLeft2.innerHTML = productAmount2;
+        alert(`คุณได้ซื้อสินค้า ${productName2.textContent} อย่างสำเร็จ!\nสินค้าเหลืออยู่ ${productAmount2} ตัว`);
+    } else {
+        amountLeft2.innerHTML = "Sold Out!";
+        buyButton2.style.display = "none";
+        alert(`คุณได้ซื้อสินค้า ${productName2.textContent} อย่างสำเร็จ!\nสินค้านี้หมดแล้ว!`);
+    }
+
+});
+
+buyButton3.addEventListener('click', function () {
+
+    amountLeft3.innerHTML = productAmount3;
+    productAmount3--;
+
+    if (productAmount3 > 0) {
+        amountLeft3.innerHTML = productAmount3;
+        alert(`คุณได้ซื้อสินค้า ${productName3.textContent} อย่างสำเร็จ!\nสินค้าเหลืออยู่ ${productAmount3} ตัว`);
+    } else {
+        amountLeft3.innerHTML = "Sold Out!";
+        buyButton3.style.display = "none";
+        alert(`คุณได้ซื้อสินค้า ${productName3.textContent} อย่างสำเร็จ!\nสินค้านี้หมดแล้ว!`);
+    }
+
+});
diff --git a/...ester Test/ข้อ 1/shop-images/080bbf5373c3f9d88114ee6228aa6b42b2d27c9b_xxl-1.jpg b/...ester Test/ข้อ 1/shop-images/080bbf5373c3f9d88114ee6228aa6b42b2d27c9b_xxl-1.jpg
diff --git a/...ester Test/ข้อ 1/shop-images/572e60a0d03f6c21f6b71fd595ae78259818b9a4_xxl-1.jpg b/...ester Test/ข้อ 1/shop-images/572e60a0d03f6c21f6b71fd595ae78259818b9a4_xxl-1.jpg
diff --git a/2024/Mid Semester Test/ข้อ 1/shop-images/re_1_2_12.jpg b/2024/Mid Semester Test/ข้อ 1/shop-images/re_1_2_12.jpg
diff --git a/2024/Mid Semester Test/ข้อ 2/index.html b/2024/Mid Semester Test/ข้อ 2/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="th" data-bs-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form - saku</title>
+
+    <!-- Latest compiled and minified CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Latest compiled JavaScript -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <span>
+        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+            <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+            </symbol>
+            <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+            </symbol>
+            <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </symbol>
+        </svg>
+    </span>
+
+    <main>
+        <div class="container mt-3">
+            <h2><p class="h2">แบบฟอร์ม</p></h2>
+
+            <div id="successPrompt" style="display: none;">
+                <div class="alert alert-success d-flex align-items-center" role="alert">
+                    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
+                        <use xlink:href="#check-circle-fill" />
+                    </svg>
+                    <div>
+                        คุณได้กรอกแบบฟอร์มนี้อย่างสำเร็จ!
+                    </div>
+                </div>
+            </div>
+
+            <form id="form">
+
+                <div class="mb-3 mt-3">
+                    <label for="name">ชื่อ-สกุล:</label>
+                    <input type="text" class="form-control" id="name" placeholder="โปรดกรอก ชื่อ-สกุล ของท่าน" name="name" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="nickname">ชื่อเล่น:</label>
+                    <input type="text" class="form-control" id="nickname" placeholder="โปรดกรอกชื่อเล่นของท่าน" name="nickname" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="age">อายุ:</label>
+                    <input type="number" class="form-control" id="age" placeholder="โปรดกรอกอายุของท่าน" name="age" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="birthdate">วันเดือนปีเกิด:</label>
+                    <input type="date" class="form-control" id="birthdate" placeholder="โปรดกรอกวันเดือนปีเกิดของท่าน" name="birthdate" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="address">ที่อยู่:</label>
+                    <input type="text" class="form-control" id="address" placeholder="โปรดกรอกที่อยู่ของท่าน" name="address" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="domicile">ภูมิลำเนา:</label>
+                    <input type="text" class="form-control" id="domicile" placeholder="โปรดกรอกภูมิลำเนาของท่าน" name="domicile" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="status">สถาณะ:</label>
+                    <div class="form-check">
+                        <input type="radio" class="form-check-input" id="single" name="status" value="โสด" checked>โสด
+                        <label class="form-check-label" for="single"></label>
+                    </div>
+                    <div class="form-check">
+                        <input type="radio" class="form-check-input" id="hasPartner" name="status" value="มีแฟน">มีแฟน
+                        <label class="form-check-label" for="hasPartner"></label>
+                    </div>
+                    <div class="form-check">
+                        <input type="radio" class="form-check-input" id="married" name="status" value="แต่งงานแล้ว">แต่งงานแล้ว
+                        <label class="form-check-label" for="married"></label>
+                    </div>
+                    <div class="form-check">
+                        <input type="radio" class="form-check-input" id="widow" name="status" value="หม้าย">หม้าย
+                        <label class="form-check-label" for="widow"></label>
+                    </div>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="job">อาชีพ:</label>
+                    <input type="text" class="form-control" id="job" placeholder="โปรดกรอกอาชีพของท่าน" name="job" required>
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="salary">รายได้:</label>
+                    <input type="number" class="form-control" id="salary" placeholder="โปรดกรอกรายได้ของท่าน (เช่น ฿10,200)" name="salary" required>
+                </div>
+
+                <button type="submit" class="btn btn-primary" id="formSubmit" value="Submit">Submit</button>
+            </form>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/2024/Mid Semester Test/ข้อ 2/script.js b/2024/Mid Semester Test/ข้อ 2/script.js
@@ -0,0 +1,10 @@
+// Elements
+const form = document.getElementById("form");
+const successPrompt = document.getElementById("successPrompt");
+
+form.addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent from refreshing
+
+    form.style.display = "none";
+    successPrompt.style.display = "block";
+});