fundamentals-starter-code/index.html at main · rocketacademy/fundamentals-starter-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--  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>
    <!-- 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>SWE Fundamentals</title>
    <!-- The <style> element contains information relating to the layout and style of the webpage. The syntax within a <style> tag is referred to as CSS - Cascading Style Sheets. -->
    <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: 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%;
      }
    </style>
  </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>
    <!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
    <h1 id="header">SWE Fundamentals! 🚀</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 id="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>
    <!-- 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
        var output = document.querySelector("#output-div");
        output.innerHTML = result;

        // Reset input value
        input.value = "";
      });
    </script>
  </body>
</html>