-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (107 loc) · 5.87 KB
/
index.html
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
102
103
104
105
106
107
108
109
110
111
<!-- 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 meta tag defines meta information in the HTML document. In this case, we are defining the charset. UTF-8 allows us to use emojis in the CodeSandbox environment -->
<meta charset="UTF-8" />
<!-- 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</title>
<!-- The <link> element specifies a relationship between this HTML page and an external resource, namely the styles.css file here. 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>
<!-- The <nav> tag semantically defines a set of navigation links. It doesn't have many properties different from a <div>, and exists purely for semantic naming. -->
<nav>
<!-- The <ul> tag represents an unordered list, where items in the list are rendered on a vertical bulleted list. While we are listing the days of the exercises on this navbar, we are positioning them horizontally without the bullets. This is done using CSS, and you can preview the syntax in styles.css (do a search for "nav ul"). -->
<ul>
<li>
<!-- An <a> tag defines a hyperlink, linking one page to another. The page to link to will be added to the "href" property of the tag. -->
<a href="index.html">Home</a>
</li>
<li>
<!-- An <a> tag defines a hyperlink, linking one page to another. The page to link to will be added to the "href" property of the tag. -->
<a href="day01-data-manipulation-and-functions/in-class/index.html"
>Day 1</a
>
</li>
<li>
<a href="day02-if-statements-boolean-operators/in-class/index.html"
>Day 2</a
>
</li>
<li>
<a href="day03-program-state/in-class/index.html">Day 3</a>
</li>
<li>
<a href="day04-loops/in-class/index.html">Day 4</a>
</li>
<li>
<a href="day05-mad-libs/in-class/index.html">Day 5</a>
</li>
<li>
<a href="day07-moar-cards/in-class/index.html">Day 7</a>
</li>
<li class="project">
<a href="project3-blackjack/index.html">Blackjack</a>
</li>
<li class="project">
<a href="project2-beat-that/index.html">Beat That!</a>
</li>
<li class="project">
<a href="project1-sps/index.html">Scissors Paper Stone</a>
</li>
</ul>
</nav>
<!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
<h1 id="header">🚀 Basics Batch 14! 🚀</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">
<h2>Starter Code</h2>
<div class="instructions-text">
<p>
The starter code in the home page is your playground. Feel free to
experiment or demonstrate any designs or code here.
</p>
</div>
<!-- The <hr> tag represents a horizontal rule. It is used if you want to add line dividers across your page. -->
<hr />
<!-- 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 Form</button>
<p>Output:</p>
<div class="output-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>