Refactor index.html and scripts: update title, add theme options, and…

… replace script files
kevinlee-06 · Jan 20, 2025 · 9f53fcf · 9f53fcf
1 parent a06a79a
commit 9f53fcf
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 129 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,12 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>URL Shortener</title>
+    <title>Linklie - URL Shortener</title>
     <link rel="stylesheet" href="/public/styles.css">
     <link rel="icon" href="/public/favicon.ico" type="image/x-icon">
 </head>
-<body>
+<body class="orange-theme">
     <h1><a href="https://github.com/kevinlee-06/linklie">Linklie - A URL Shortener</a></h1>
+
     <div class="container">
         <h2>Create Short URL</h2>
         <form id="postForm">
@@ -37,6 +38,7 @@ <h2>Delete Short URL</h2>
             <button type="submit">Delete Short URL</button>
         </form>
     </div>
+
     <div class="container">
         <h2 id="response-h2" title="A json will be returned if success.">Response:
             <label style="display: inline-block; font-size: 0.5em;" for="response-h2" title="A json will be returned if success.">[tips]</label>
@@ -50,11 +52,15 @@ <h2 id="response-h2" title="A json will be returned if success.">Response:
             <option value="orange-theme">Orange</option>
             <option value="green-theme">Green</option>
             <option value="blue-theme">Blue</option>
+            <option value="pink-theme">Pink</option>
             <option value="dark-blue-theme">Dark</option>
+            <option value="black-theme">Black</option>
         </select>
 
     </div>
 
-    <script src="/public/script.js"></script>
+    <script src="/public/scripts/delete.js"></script>
+    <script src="/public/scripts/post.js"></script>
+    <script src="/public/scripts/styles.js"></script>
 </body>
 </html>
diff --git a/public/script.js b/public/script.js
diff --git a/public/scripts/delete.js b/public/scripts/delete.js
@@ -0,0 +1,30 @@
+document.getElementById('deleteForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const deleteId = document.getElementById('deleteId').value;
+    const deletePassword = document.getElementById('deletePassword').value;
+
+    const data = {
+        password: deletePassword
+    };
+
+    fetch(`/${deleteId}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok: ' + response.statusText);
+        }
+        return response.text();
+    })
+    .then(message => {
+        document.getElementById('responseMessage').textContent = message;
+    })
+    .catch(error => {
+        document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+    });
+});
diff --git a/public/scripts/post.js b/public/scripts/post.js
@@ -0,0 +1,35 @@
+document.getElementById('postForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const url = document.getElementById('url').value;
+    const id = document.getElementById('id').value;
+    const password = document.getElementById('password').value;
+
+    const data = {
+        url: url,
+        id: id,
+        password: password
+    };
+
+    fetch('/shorten', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.text().then(text => {
+                throw new Error(text);
+            });
+        }
+        return response.json();
+    })
+    .then(data => {
+        document.getElementById('responseMessage').textContent = JSON.stringify(data, null, 2);
+    })
+    .catch(error => {
+        document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+    });
+});
diff --git a/public/scripts/styles.js b/public/scripts/styles.js
@@ -0,0 +1,3 @@
+document.getElementById('theme').addEventListener('change', function() {
+    document.body.className = this.value;
+});
diff --git a/public/styles.css b/public/styles.css
@@ -1,59 +1,9 @@
-:root, .orange-theme {
-  --background-color: #fff3e0;
-  --container-background: #ffffff;
-  --label-color: #ff9800;
-  --input-border: #ff9800;
-  --input-focus-border: #ffb74d;
-  --button-background: #ff9800;
-  --button-hover-background: #f57c00;
-  --link-color: #ff9800;
-  --link-hover-color: #f57c00;
-  --button-text-color: #ffffff;
-  --text-color: #000000;
-}
-
-
-.green-theme {
-  --background-color: #e8f5e9;
-  --container-background: #ffffff;
-  --label-color: #4caf50;
-  --input-border: #4caf50;
-  --input-focus-border: #81c784;
-  --button-background: #4caf50;
-  --button-hover-background: #388e3c;
-  --link-color: #4caf50;
-  --link-hover-color: #388e3c;
-  --button-text-color: #ffffff;
-  --text-color: #000000;
-}
-
-.blue-theme {
-  --background-color: #e3f2fd;
-  --container-background: #ffffff;
-  --label-color: #2196f3;
-  --input-border: #2196f3;
-  --input-focus-border: #90caf9;
-  --button-background: #2196f3;
-  --button-hover-background: #1976d2;
-  --link-color: #2196f3;
-  --link-hover-color: #1976d2;
-  --button-text-color: #ffffff;
-  --text-color: #000000;
-}
-
-.dark-blue-theme {
-  --background-color: #0d1b2a; /* Dark background */
-  --container-background: #303234; /* Darker container */
-  --label-color: #b7d6fc; /* Dark blue label */
-  --input-border: #7c98bb; /* Dark blue input border */
-  --input-focus-border: #ffffff; /* Lighter dark blue on focus */
-  --button-background: #3d6ea9; /* Dark blue button */
-  --button-hover-background: rgb(30, 74, 128); /* Darker blue on hover */
-  --link-color: #b5d6ff; /* Dark blue link */
-  --link-hover-color: #619ce5; /* Darker blue on hover */
-  --button-text-color: #ffffff; /* White text */
-  --text-color: #ffffff;
-}
+@import url('themes/blue.css');
+@import url('themes/orange.css');
+@import url('themes/green.css');
+@import url('themes/pink.css');
+@import url('themes/darkblue.css');
+@import url('themes/black.css');
 
 body {
   display: flex;

diff --git a/public/themes/black.css b/public/themes/black.css
@@ -0,0 +1,13 @@
+.black-theme {
+    --background-color: #000000;
+    --container-background: #000000;
+    --label-color: #ffffff;
+    --input-border: #ffffff;
+    --input-focus-border: #00ff73;
+    --button-background: #000000;
+    --button-hover-background: rgb(31, 31, 31);
+    --link-color: #ffffff;
+    --link-hover-color: #00ff80;
+    --button-text-color: #ffffff;
+    --text-color: #ffffff;
+  }
diff --git a/public/themes/blue.css b/public/themes/blue.css
@@ -0,0 +1,13 @@
+.blue-theme {
+    --background-color: #e3f2fd;
+    --container-background: #ffffff;
+    --label-color: #2196f3;
+    --input-border: #2196f3;
+    --input-focus-border: #90caf9;
+    --button-background: #2196f3;
+    --button-hover-background: #1976d2;
+    --link-color: #2196f3;
+    --link-hover-color: #1976d2;
+    --button-text-color: #ffffff;
+    --text-color: #000000;
+  }
diff --git a/public/themes/darkblue.css b/public/themes/darkblue.css
@@ -0,0 +1,13 @@
+.dark-blue-theme {
+    --background-color: #0d1b2a;
+    --container-background: #303234;
+    --label-color: #b7d6fc;
+    --input-border: #7c98bb;
+    --input-focus-border: #ffffff;
+    --button-background: #3d6ea9;
+    --button-hover-background: rgb(30, 74, 128);
+    --link-color: #b5d6ff;
+    --link-hover-color: #619ce5;
+    --button-text-color: #ffffff;
+    --text-color: #ffffff;
+  }
diff --git a/public/themes/green.css b/public/themes/green.css
@@ -0,0 +1,13 @@
+.green-theme {
+    --background-color: #e8f5e9;
+    --container-background: #ffffff;
+    --label-color: #4caf50;
+    --input-border: #4caf50;
+    --input-focus-border: #81c784;
+    --button-background: #4caf50;
+    --button-hover-background: #388e3c;
+    --link-color: #4caf50;
+    --link-hover-color: #388e3c;
+    --button-text-color: #ffffff;
+    --text-color: #000000;
+  }
diff --git a/public/themes/orange.css b/public/themes/orange.css
@@ -0,0 +1,13 @@
+.orange-theme {
+    --background-color: #fff3e0;
+    --container-background: #ffffff;
+    --label-color: #ff9800;
+    --input-border: #ff9800;
+    --input-focus-border: #ffb74d;
+    --button-background: #ff9800;
+    --button-hover-background: #f57c00;
+    --link-color: #ff9800;
+    --link-hover-color: #f57c00;
+    --button-text-color: #ffffff;
+    --text-color: #000000;
+  }
diff --git a/public/themes/pink.css b/public/themes/pink.css
@@ -0,0 +1,13 @@
+.pink-theme {
+    --background-color: #fce4ec; /* Light pink background */
+    --container-background: #ffffff; /* White container */
+    --label-color: #d81b60; /* Pink label color */
+    --input-border: #d81b60; /* Pink input border */
+    --input-focus-border: #f48fb1; /* Light pink focus border */
+    --button-background: #d81b60; /* Pink button background */
+    --button-hover-background: #c2185b; /* Darker pink on hover */
+    --link-color: #d81b60; /* Pink link color */
+    --link-hover-color: #c2185b; /* Darker pink on hover */
+    --button-text-color: #ffffff; /* White text on buttons */
+    --text-color: #000000; /* Black text */
+}