Skip to content

feat: new styling. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
leechuanxin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: new styling. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 27 additions & 50 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
55 changes: 55 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}