Merge pull request #8 from danrusu/grid-layout

Grid layout
danrusu · Jan 18, 2025 · c3e69a9 · c3e69a9
2 parents b948799 + f29b39f
commit c3e69a9
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 106 deletions.
diff --git a/src/html/feedback.html b/src/html/feedback.html
@@ -4,104 +4,34 @@
 <head>
   <meta charset="utf-8" />
   <title>Feedback</title>
-  <style>
-    body {
-      font-size: 20px;
-      font-family: Arial, Helvetica, sans-serif;
-    }
-
-    h1 {
-      margin-top: 3em;
-      font-size: 2em;
-      text-align: center;
-    }
-
-    h2 {
-      margin-top: 1em;
-      font-size: 1em;
-      text-align: center;
-    }
-
-    #form {
-      font-size: 1em;
-      margin-top: 1.5em;
-    }
-
-    button,
-    textarea,
-    #notification {
-      margin: auto;
-      display: block;
-    }
-
-    button {
-      margin-top: 1.5em;
-    }
-
-    a {
-      text-decoration: none;
-      color: orange;
-    }
-
-    #notification {
-      margin-top: 1.5em;
-      text-align: center;
-    }
-
-    textarea:valid {
-      border: 2px solid orange;
-    }
-  </style>
+  <link rel="stylesheet" href="feedback.css">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
 <body>
-  <h1>
-    <a title="feedbacks" href="https://github.com/danrusu/anonymous-feedback.git">
-      Anonymous Feedback
-    </a>
-  </h1>
-  <h2>
-    JS For Testers Workshop
-  </h2>
-
-  <div id="form">
-    <textarea id="question" type="textarea" rows="10" cols="50"
-      placeholder="Type your feedback here. You can use markdown.">
-    </textarea>
-    <button onclick="submitFeedback()">SUBMIT</button>
-    <div id="notification"></div>
+  <div class="grid-container">
+    <div>
+      <h1>
+        <a title="feedbacks" href="https://github.com/danrusu/anonymous-feedback.git">
+          Anonymous Feedback
+        </a>
+      </h1>
+      <h2>
+        JS For Testers Workshop
+      </h2>
+
+      <div id="form">
+        <textarea id="question" type="textarea" rows="15" cols="50"
+          placeholder="Type your feedback here. You can use markdown.">
+        </textarea>
+        <button onclick="submitFeedback()">SUBMIT</button>
+        <div id="notification"></div>
+      </div>
+    </div>
   </div>
 
-  <script>
-    const BACKEND = 'https://testutils-4abbd3f39c31.herokuapp.com';
-    // const BACKEND = 'http://localhost:1111';
-    const feedbackElement = document.querySelector('#question');
-    feedbackElement.value = '';
-    const submitFeedback = async () => {
-      const notificationElement = document.querySelector('#notification');
-      if (feedbackElement.value.length < 10) {
-        alert(`Questions must have at least 10 characters!`);
-      } else {
-        const response = await fetch(`${BACKEND}/feedback`, {
-          method: 'POST',
-          headers: {
-            'content-type': 'application/json',
-          },
-          body: JSON.stringify({ feedback: feedbackElement.value }),
-        });
-        if (response.status === 200) {
-          feedbackElement.value = '';
-          notificationElement.innerText = 'Feedback submitted!';
-          notificationElement.style.color = 'green';
-        }
-        else {
-          notification.innerText = 'Failed to submit Feedback. Try again.'
-          notification.style.color = 'red';
-        }
-        setTimeout(() => { notificationElement.innerText = ''; }, 3000);
-      }
-    };    
-  </script>
+  <script src="feedback.js" async defer></script>
+
 </body>
 
 </html>
diff --git a/src/html/index.html b/src/html/index.html
@@ -38,8 +38,6 @@ <h3>JS4Testers Workshop</h3>
     </address>
   </footer>
 
-  <script>
-  </script>
 </body>
 
 </html>
diff --git a/src/html/public/feedback.css b/src/html/public/feedback.css
@@ -0,0 +1,53 @@
+:root {
+  font-size: 20px;
+  font-family: "Libre Franklin", sans-serif;
+}
+
+.grid-container {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  font-size: 2rem;
+  text-align: center;
+}
+
+h2 {
+  margin-top: 1rem;
+  font-size: 1rem;
+  text-align: center;
+}
+
+#form {
+  font-size: 1rem;
+  margin-top: 1.5rem;
+}
+
+button,
+textarea,
+#notification {
+  margin: auto;
+  display: block;
+}
+
+button {
+  margin-top: 1.5rem;
+}
+
+a {
+  text-decoration: none;
+  color: orange;
+}
+
+#notification {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+textarea:valid {
+  border: 2px solid orange;
+}
diff --git a/src/html/public/feedback.js b/src/html/public/feedback.js
@@ -0,0 +1,31 @@
+const BACKEND = 'https://testutils-4abbd3f39c31.herokuapp.com';
+// const BACKEND = 'http://localhost:1111';
+
+const feedbackElement = document.querySelector('#question');
+feedbackElement.value = '';
+
+async function submitFeedback() {
+  const notificationElement = document.querySelector('#notification');
+  if (feedbackElement.value.length < 10) {
+    alert(`Questions must have at least 10 characters!`);
+  } else {
+    const response = await fetch(`${BACKEND}/feedback`, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+      },
+      body: JSON.stringify({ feedback: feedbackElement.value }),
+    });
+    if (response.status === 200) {
+      feedbackElement.value = '';
+      notificationElement.innerText = 'Feedback submitted!';
+      notificationElement.style.color = 'green';
+    } else {
+      notification.innerText = 'Failed to submit Feedback. Try again.';
+      notification.style.color = 'red';
+    }
+    setTimeout(() => {
+      notificationElement.innerText = '';
+    }, 3000);
+  }
+}
diff --git a/src/html/public/main.css b/src/html/public/main.css
@@ -1,37 +1,42 @@
 :root {
+  /* vars */
   --main-text-color: black;
   --link-color: darkblue;
 
   --header-background: white;
   --footer-background: white;
 
-  --small-padding: 10px;
+  --small-padding: 2vh;
+
+  font-family: "Libre Franklin", sans-serif;
+  line-height: 1.5;
+  color: var(--main-text-color);
 }
 
 body {
   min-height: 100vh;
-  margin: 0;
   display: grid;
   grid-template-rows: auto 1fr auto;
 
-  color: var(--main-text-color);
+  margin: 0;
+  padding: 0;
 }
 
 header {
-  min-height: 50px;
+  min-height: 10vh;
   background: var(--header-background);
   border-bottom: 1px solid var(--main-text-color);
+  padding-top: calcvar(--small-padding);
 }
 
 footer {
-  min-height: 20px;
+  min-height: 3vh;
   background: var(--footer-background);
   border-top: 1px solid var(--main-text-color);
 
   text-align: center;
   font-size: small;
   font-weight: bold;
-  padding: 5px;
 }
 
 footer address {
@@ -46,26 +51,23 @@ main span {
 }
 
 h1 {
-  margin-top: calc(var(--small-padding) * 4);
-  font-size: 2em;
+  font-size: 2rem;
   text-align: center;
 }
 
 h2 {
   margin-top: var(--small-padding);
-  font-size: 1em;
+  font-size: 1rem;
   text-align: center;
 }
 
 a {
   color: var(--link-color);
-  padding: 10px;
   text-decoration: none;
   cursor: pointer;
 }
 
 #js4testers div {
   margin-bottom: var(--small-padding);
   text-align: center;
-
 }