add edit style in blog post thml

yennanliu · Nov 21, 2023 · a25d00d · a25d00d
1 parent 86551e8
commit a25d00d
Showing 1 changed file with 50 additions and 7 deletions.
diff --git a/springBootBlog/src/main/resources/templates/post/create_post.html b/springBootBlog/src/main/resources/templates/post/create_post.html
@@ -1,19 +1,62 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en" xmlns:th="https://www.thymeleaf.org">
 <head>
-<!--    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
-    <meta charset="UTF-8" name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
-    <title>This is the title of the Spring Boot POC!</title>
+    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
+    <title>Create A New Post</title>
+    <style>
+        #content {
+            width: 100%;
+            height: 200px;
+            font-size: 16px;
+            font-family: Arial, sans-serif;
+            color: #333;
+        }
+
+        #font-size, #font-style, #font-color {
+            margin-right: 10px;
+        }
+    </style>
 </head>
 <body>
 <div th:insert="header"></div>
 <h1 align="center">Create A New Post</h1>
 <hr/>
 <form action="#" th:action="@{/posts/create}" th:object="${CreatePost}" method="post" align="center">
     <p>Title: <input type="text" th:field="*{title}" required minlength="1" /></p>
-<!--    <p>Author ID: <input type="number" th:field="*{id}"  required minlength="1" /></p>-->
-    <p>Content: <textarea name="courseMemo" rows="6" cols="60" th:field="*{content}">blog content</textarea></p>
+    <p>Content:</p>
+    <div>
+        <label for="font-size">Font Size:</label>
+        <select id="font-size" onchange="changeStyle()">
+            <option value="12px">12px</option>
+            <option value="16px">16px</option>
+            <option value="20px">20px</option>
+        </select>
+
+        <label for="font-style">Font Style:</label>
+        <select id="font-style" onchange="changeStyle()">
+            <option value="Arial, sans-serif">Arial</option>
+            <option value="Times New Roman, serif">Times New Roman</option>
+            <option value="Courier New, monospace">Courier New</option>
+        </select>
+
+        <label for="font-color">Font Color:</label>
+        <input type="color" id="font-color" onchange="changeStyle()">
+    </div>
+    <textarea id="content" name="courseMemo" th:field="*{content}" oninput="changeStyle()">blog content</textarea>
     <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
 </form>
+
+<script>
+        function changeStyle() {
+            var content = document.getElementById('content');
+            var fontSize = document.getElementById('font-size').value;
+            var fontStyle = document.getElementById('font-style').value;
+            var fontColor = document.getElementById('font-color').value;
+
+            content.style.fontSize = fontSize;
+            content.style.fontFamily = fontStyle;
+            content.style.color = fontColor;
+        }
+    </script>
 </body>
-</html>
+</html>