Add assigment
This commit is contained in:
parent
1730241869
commit
4581f41517
61
Exercise 5/index.html
Normal file
61
Exercise 5/index.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
95
Exercise 5/script.js
Normal file
95
Exercise 5/script.js
Normal file
@ -0,0 +1,95 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Part 2 */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
console.log('PART 2')
|
||||
|
||||
/* Log i from 1 until i is no longer less than or equal to 20 */
|
||||
for (i=1; i<=20; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Part 3 */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
console.log('PART 3')
|
||||
|
||||
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
||||
|
||||
/* A function that returns eplekake, eple, kake or n based on what n can be divided by */
|
||||
const eplekakeCheck = (n) => {
|
||||
/* if it's divisible by 15 (which is 3*5), it's also divisible by both 3 and 5 */
|
||||
if (i % 15 == 0) return 'eplekake';
|
||||
else if (i % 3 == 0) return 'eple';
|
||||
else if (i % 5 == 0) return 'kake';
|
||||
else return String(n);
|
||||
}
|
||||
|
||||
/* Print the output of eplekakeCheck for each element in numbers */
|
||||
for (i of numbers) {
|
||||
console.log(eplekakeCheck(i));
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Part 4 */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Store the DOM node as a variable and change its innerText */
|
||||
const title = document.getElementById("title");
|
||||
title.innerText = 'Hello JavaScript';
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Part 5 */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const magicBox = document.getElementById('magic');
|
||||
|
||||
function changeDisplay () {
|
||||
magicBox.style.display = 'none'
|
||||
}
|
||||
|
||||
function changeVisibility () {
|
||||
magicBox.style.display = 'block'
|
||||
magicBox.style.visibility = 'hidden'
|
||||
}
|
||||
|
||||
function reset () {
|
||||
magicBox.style.display = 'block'
|
||||
magicBox.style.visibility = 'visible'
|
||||
}
|
||||
|
||||
/* Connect each button to their respective function */
|
||||
document.getElementById('displayButton').addEventListener('click', changeDisplay);
|
||||
document.getElementById('visibilityButton').addEventListener('click', changeVisibility);
|
||||
document.getElementById('resetButton').addEventListener('click', reset);
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Part 6 */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const technologies = [
|
||||
'HTML5',
|
||||
'CSS3',
|
||||
'JavaScript',
|
||||
'Python',
|
||||
'Java',
|
||||
'AJAX',
|
||||
'JSON',
|
||||
'React',
|
||||
'Angular',
|
||||
'Bootstrap',
|
||||
'Node.js'
|
||||
];
|
||||
|
||||
const technologyList = document.getElementById("tech");
|
||||
|
||||
/*
|
||||
for each technology, create an HTML element, add the technology as innertext and append
|
||||
the element as a child of the list
|
||||
*/
|
||||
for (technology of technologies) {
|
||||
const listElement = document.createElement('li');
|
||||
listElement.innerText = technology;
|
||||
technologyList.appendChild(listElement);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user