up

2026-07-02 21:25:36 +07:00
commit c1820e5ec4
6 changed files with 632 additions and 0 deletions
--- a/my_web/index.html
+++ b/my_web/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <ul>
+        <li></li>
+    </ul>
+
+   
+    <input name="title" type="text" placeholder="tên danh mục">
+    <button onclick="addCategorie()">thêm</button>
+   
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.18.1/axios.min.js" integrity="sha512-l1tCs7ua0mpVzhqYBRTbxh05c4bT7cu1Ma5vSpcwT9yP75wEkbGhwIe1kxmowZRVXxwjTMCbogc3A7y4SUfT7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+
+        async function getCategories() {
+            return await axios.get("http://127.0.0.1:3000/categories")
+            .then(res => {
+                return res.data
+            })
+        }
+
+        function renderUi(categories) {
+            let htmlResult = ``
+            for(cate of categories) {
+                htmlResult += `
+                   <li>${cate.title}</li> 
+                `
+            }
+
+            document.querySelector("ul").innerHTML = htmlResult;
+        }
+
+
+        async function loadDataAndRender() {
+            let data = await getCategories();
+            console.log("data", data)
+
+            renderUi(data)
+        }
+
+        function addCategorie() {
+            let newCategory = {
+                title: document.querySelector("input").value
+            }
+
+            axios.post("http://127.0.0.1:3000/categories", newCategory)
+            .then(res => {
+                console.log("res", res)
+                loadDataAndRender()
+            })
+        }
+
+        loadDataAndRender()
+        
+    </script>
+</body>
+</html>