From 1d20b9ca806134f0a17a427e4b81015eea4ab7f2 Mon Sep 17 00:00:00 2001
From: Lee Chuan Xin <chuanxin@gametize.com>
Date: Thu, 10 Feb 2022 02:20:48 +0800
Subject: [PATCH] feat: new styling.

---
 index.html | 77 +++++++++++++++++++-----------------------------------
 styles.css | 55 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 50 deletions(-)
 create mode 100644 styles.css
diff --git a/index.html b/index.html
index 196a2c1..15a00cf 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,48 @@
+<!--  All HTML files begin with the following line: -->
 <!DOCTYPE html>
+<!-- This indicates that the rest of the lines that follow are to be interpreted as HTML. It tells the browser about what document type to expect. -->
+<!-- All text enclosed in angled brackets are known as HTML element tags. There are usually, but not always, starting and closing element "tags", each representing a HTML element.
+The <html> element is known as the root element of a HTML page. All other elements are encased within it. -->
 <html>
+  <!-- The <head> element contains meta information about the HTML page, information that is not rendered or displayed by the browser -->
   <head>
-    <title>SWE101</title>
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family: sans-serif;
-        margin-left: 30px;
-        margin-right: 30px;
-      }
-
-      #header {
-        text-align: center;
-      }
-
-      #container {
-        background-color: pink;
-        margin: 40px auto;
-        max-width: 800px;
-        padding: 38px 31px;
-      }
-
-      input {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 9px;
-        width: 74%;
-      }
-
-      button {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 6px;
-        width: 25%;
-      }
-
-      #output-div {
-        background-color: lightgrey;
-        margin: 20px auto;
-        padding: 20px;
-        width: 100%;
-      }
-    </style>
+    <!-- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) and is the default name given to a bookmark of a webpage. -->
+    <title>Basics: Drawing</title>
+    <!-- The <link> element specifies a relationship between this HTML page and an external resource, namely the styles.css file here. For the syntax '../../' in '../../styles.css', we are referring to the styles.css file (in the main directory) found 2 folders above the current one. In this case, we are linking a stylesheet which is a CSS file containing information relating to the layout and style of the webpage. The syntax within the styles.css file is also referred to as CSS - Cascading Style Sheets. -->
+    <link rel="stylesheet" href="styles.css" />
   </head>
 
+  <!-- The <body> element defines the document's body, and is a container for all the visible contents that will be rendered by the browser.  -->
   <body>
-    <h1 id="header">SWE101: Drawing 🚀</h1>
-    <div id="container">
+    <!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
+    <h1 id="header">🚀 Basics: Drawing 🚀</h1>
+    <!-- The <div> tag defines a division or a section in an HTML document, and is commonly use as a "container" for nested HTML elements. -->
+    <div class="container">
+      <!-- The <p> tag defines a paragraph element. -->
       <p>Input:</p>
+      <!-- The self-closing <input /> tag represents a field for a user to enter input. -->
       <input id="input-field" />
+      <!-- The self-closing <br /> tag represents a line break - a line's worth of spacing before dispalying the next element. -->
+      <br />
+      <!-- The <button> tag represents.. you guessed it! a button. -->
       <button id="submit-button">Submit</button>
       <p>Output:</p>
-      <div id="output-div"></div>
+      <div class="output-div" id="output-div"></div>
     </div>
-    <!-- Import program logic -->
+    <!-- Everything below this is incorporating JavaScript programming logic into the webpage. -->
+    <!-- The script tag encloses JavaScript syntax for the browser to interpret programtically -->
+    <!-- The following line imports all code written in the script.js file -->
     <script src="script.js"></script>
     <!-- Define button click functionality -->
     <script>
+      // Declare and define a variable that represents the Submit Button
       var button = document.querySelector("#submit-button");
+      // When the submit button is clicked, access the text entered by the user in the input field
+      // And pass it as an input parameter to the main function as defined in script.js
       button.addEventListener("click", function () {
         // Set result to input value
         var input = document.querySelector("#input-field");
+        // Store the output of main() in a new variable
         var result = main(input.value);
 
         // Display result in output element
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..9c1b59c
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,55 @@
+/*
+  The syntax within the styles.css file is also referred to as CSS - Cascading Style Sheets.
+  CSS describes how HTML elements are to be displayed on the screen.
+*/
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin-left: 30px;
+  margin-right: 30px;
+  background-color: #e0e0e0;
+}
+
+#header {
+  text-align: center;
+}
+
+.container {
+  background-color: #ffffff;
+  margin: 40px auto;
+  max-width: 800px;
+  padding: 38px 31px;
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+}
+
+input {
+  font-size: 21px;
+  line-height: 33px;
+  margin: 0 0 23px 0;
+  padding: 0 9px;
+  width: 100%;
+}
+
+button {
+  font-size: 21px;
+  line-height: 33px;
+  margin: 0 0 23px 0;
+  padding: 0 6px;
+}
+
+.output-div {
+  background-color: lightgrey;
+  margin: 20px auto;
+  padding: 20px;
+  width: 100%;
+}
+
+.divider {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
