oysteikt/IT2
oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Add task

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit 2020-04-02 13:24:30 +02:00
parent fd215743fa
commit 31abcf72aa
3 changed files with 76 additions and 0 deletions
html/tasks/chapter_8/notes
oppgave.htmlscript.js
index.html

27
html/tasks/chapter_8/notes/oppgave.html Executable file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Notes</title>
<link rel="stylesheet" href="../../../../resources/css/main.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script async src="./script.js"></script>
</head>
<body>
<h1>Notes</h1>
<div class="center">
<form id="noteInput">
<input type="text" id="noteInputText">
<label for="noteInputSubmit">Legg til notis</label>
<input type="submit" id="noteInputSubmit">
</form>
<div id="notes" class="textboxGrid"></div>
</div>
</body>
</html>

48
html/tasks/chapter_8/notes/script.js Executable file

@ -0,0 +1,48 @@
// @ts-check
/* Register HTML DOM elements by variables */
const noteForm = document.getElementById('noteInput');
const noteText = document.getElementById('noteInputText');
const noteSubmit = document.getElementById('noteInputSubmit');
const notes = document.getElementById('notes');
/* Add event listeners */
noteForm.addEventListener('submit', addNote);
/* Initialize HTML with functions */
notes.innerHTML = localStorage.getItem('notes');
jQuery('button').click('click', buttonDelete);
/* Functions */
function addNote(evt) {
evt.preventDefault();
const text = noteText.value;
noteText.value = '';
const noteBox = document.createElement('div');
noteBox.setAttribute('class', 'gridElement');
const note = document.createElement('p');
note.innerHTML = text;
const button = document.createElement('button');
button.innerHTML = '🗑️';
button.setAttribute('class', 'hoverable');
button.addEventListener('click', buttonDelete);
noteBox.appendChild(note);
noteBox.appendChild(button);
notes.appendChild(noteBox);
localStorage.setItem('notes', notes.innerHTML);
}
function buttonDelete(evt) {
evt.currentTarget.parentNode.parentNode.removeChild(evt.currentTarget.parentNode);
localStorage.setItem('notes', notes.innerHTML);
}

1
index.html

@ -46,6 +46,7 @@
<h2>Kapittel 8</h2>
<p><a href="./html/tasks/chapter_8/highcharts/oppgave.html">Highcharts</a></p>
<p><a href="./html/tasks/chapter_8/notes/oppgave.html">Notes</a></p>
<p><a href="./html/tasks/chapter_8/task3_randomArrayData/oppgave.html">Oppgave 3 - Random Array Data</a></p>
<h2>Kapittel 10</h2>