61 lines
1.3 KiB
HTML
61 lines
1.3 KiB
HTML
|
<!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>
|