<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT2805 assignment 5: JavaScript introduction</title>
<style>
.box {
/* Sets the size and position of each box */
width: 200px;
height: 200px;
background-color: #185D8B;
margin: 10px;
/* Sets the font within each box*/
color: #fff;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
line-height: 200px;
font-size: 100px;
}
.buttons {
width: 200px;
margin: 10px;
text-align: center;
}
</style>
<script src="./script.js" defer></script>
<!--
I am including it here because it makes sense for
everything that's not content to be placed in the <head>.
I do know however that this usually causes problems with
accessing the DOM, because the script runs before the page
is loaded. The defer option will take care of this.
-->
</head>
<body>
<h1 id='title'></h1>
<h2>Part 5</h2>
<div class='buttons'>
<button id='displayButton'>Display: none </button>
<button id='visibilityButton'>Visibility: hidden</button>
<button id='resetButton'>Reset</button>
</div>
<div class='box' id='magic'> 1 </div>
<div class='box'> 2 </div>
<h2>Part 6</h2>
<ul id='tech'>
</ul>
</body>
</html>