<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Uniform Infringements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "container">
<h1>CC Uniform Infringements</h1>
<div id = "form">
<input id = "fname" type = "text" placeholder="Student first name">
<br>
<input id = "lname" type = "text" placeholder="Student last name"><br>
<select id="year-level">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br>
<select id="infringement">
<option value="No Hat">No Hat</option>
<option value="Shirt Untucked">Shirt Untucked</option>
<option value="Incorrect Shoes">Incorrect Shoes</option>
<option value="Incorrect wearing of uniform">Incorrect Uniform</option>
</select>
<br>
<button id = "submit" onclick="addItem()">Submit </button>
</div>
<p id ="listTitle">List of recordered students</p>
<div id = "list-view">
<Ul id = "log-list" >
</ul>
<button id ="clear" onclick="clearall()">Clear List</buttoon>
</div>
</div>
</body>
<script src = "script.js"></script>
</html>
var firstname = null;
var lastname = null;
var year = 0;
var infringement = null;
function addItem(){
if(document.getElementById("fname").value!="" && document.getElementById("lname").value !=""){
firstname = document.getElementById("fname").value;
lastname = document.getElementById("lname").value;
year = document.getElementById("year-level").value;
infringement = document.getElementById("infringement").value;
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var y = date.getFullYear();
var list = document.getElementById("log-list");
list.innerHTML+="<li>"+ day+"/"+month+"/"+y + " - "+firstname + " " + lastname + " - " + year + " - "+infringement +"</li>";
lastname = document.getElementById("lname").value ="";
//clear contents
document.getElementById("fname").value="";
document.getElementById("lname").value="";
}
}
//clear all contents of the infringment list
function clearall(){
// Get the <ul> element with id="myList"
var list = document.getElementById("log-list");
// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #444;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#container{
margin:auto;
align-content: center;
min-width: 600px;
text-align: center;
}
#form{
border:4px;
border-color:black;
border-radius:5px;
background:#c6c655;
padding:5px;
font-size:25px;
}
#list-view{
background:#c6c655;
padding:5px;
border-radius: 5px;
}
#listTitle{
color:red;
font-size:20px;
background-color: white
}
ul {
list-style-type: none;
}