Übung 04 - DOM
4.1 - Einkaufsliste
einkaufsliste.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Einkaufsliste</title>
<script src="einkaufsliste.js"></script>
</head>
<body>
<h1>Einkaufsliste</h1>
<label for="item">Enter a new item: </label><input id="item" onkeyup="myKeyup(event)" type="text">
<button onclick="additem()">Add item</button>
<button onclick="clearall()">Clear all</button>
<div id="liste"></div>
</body>
</html>
let liste = [];
function myKeyup(ev){
console.log(ev)
if (ev.key === "Enter") {
additem();
document.getElementById('item').value = "";
}
}
function additem() {
liste.push(document.getElementById('item').value);
document.getElementById('item').value = "";
renderlist();
}
function renderlist() {
let str = '<ul id="renderedlist">';
let counter = 0;
liste.forEach(function (l) {
str += `<li id="${counter}">` + l + ` <button onclick="deleteitem(${counter})">Delete</button>` + '</li>';
counter++;
});
str += '</ul>';
document.getElementById("liste").innerHTML = str;
}
function deleteitem(index) {
liste.splice(index, 1)
document.getElementById("renderedlist").remove();
renderlist();
}
function clearall(){
liste = [];
renderlist();
}
4.2 - Rednerliste
rednerliste.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rednerliste</title>
<script src="rednerliste.js"></script>
</head>
<body>
<h1>Rednerliste</h1>
<label for="item">Neuer Redner </label><input id="item" onkeyup="myKeyup(event)" type="text">
<button onclick="additem()">Add item</button>
<button onclick="clearall()">Clear all</button>
<div id="liste"></div>
</body>
</html>
let liste = [];
let starttime;
let elapsedtime = 0;
let timerinterval;
let running;
function myKeyup(ev) {
if (ev.key === "Enter") {
additem();
document.getElementById('item').value = "";
}
}
function additem() {
var redner = {name: document.getElementById('item').value, time: 0}
liste.push(redner);
document.getElementById('item').value = "";
renderlist();
start(liste.length - 1);
}
function renderlist() {
if (liste.length !== 0) {
if (running !== undefined) {
stop(running);
}
let str = '<ul id="renderedlist">';
let counter = 0;
liste.forEach(function (l) {
str += `<li>${l.name} ` + `<span id="${counter}">${timeToString(l.time)}</span>` +
` <button onclick="start(${counter})">Start!</button>` +
` <button onclick="stop(${counter})" style="display: none">Stop!</button>` +
'</li>';
counter++;
});
str += '</ul>';
document.getElementById("liste").innerHTML = str;
}
}
function clearall() {
if (running !== undefined) {
stop(running);
running = undefined;
}
liste = [];
document.getElementById("renderedlist").remove();
}
function start(id) {
if (running !== undefined) {
stop(running);
}
running = id;
starttime = Date.now() - liste[id].time;
timerinterval = setInterval(function printtime() {
elapsedtime = Date.now() - starttime;
document.getElementById(id).innerHTML = timeToString(elapsedtime)
}, 10);
const btn = document.getElementById(id).nextElementSibling;
btn.style.display = "none";
btn.nextElementSibling.style.display = "inline";
}
function timeToString(time) {
let diffInHrs = time / 3600000;
let hh = Math.floor(diffInHrs);
let diffInMin = (diffInHrs - hh) * 60;
let mm = Math.floor(diffInMin);
let diffInSec = (diffInMin - mm) * 60;
let ss = Math.floor(diffInSec);
let diffInMs = (diffInSec - ss) * 100;
let ms = Math.floor(diffInMs);
let formattedMM = mm.toString().padStart(2, "0");
let formattedSS = ss.toString().padStart(2, "0");
let formattedMS = ms.toString().padStart(2, "0");
return `${formattedMM}:${formattedSS}:${formattedMS}`;
}
function stop(id) {
clearInterval(timerinterval);
liste[id].time = elapsedtime;
const btn = document.getElementById(id).nextElementSibling;
btn.style.display = "inline";
btn.nextElementSibling.style.display = "none";
}
4.3 - Tabellenkalkulation
tabellenkalkulation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabellenkalkulation</title>
<script src="tabellenkalkulation.js"></script>
<style>
table, td {
border: 1px solid black;
}
table {
width: 25%;
border-collapse: collapse;
}
td {
width: 50%;
height: 16px;
text-align: right;
}
</style>
</head>
<body>
<h1>Tabellenkalkulation mit contentEditable</h1>
<p>Mögliche Funktionen: sum, sub, mul, div nach dem Schema =SUM(A2,B2)</p>
<h3>Wie groß soll die Tabelle sein?</h3>
<label for="reihen">Reihen: </label><input id="reihen" min="1" required type="number">
<button onclick="createTable()" type="submit">Erstelle Tabelle</button>
<br><br>
<div id="tablewrapper"></div>
</body>
</html>
let formula;
function createTable() {
var reihen = document.getElementById("reihen").value;
let table = `<table id="table">`;
for(let i = 1; i <= reihen; i++){
table +=`<tr><td>${toAbc(i)} = </td><td contenteditable="true" id="${toAbc(i)}2" onblur="calc(false)"></td>`;
}
table += `<tr><td>Sum = </td><td contenteditable="true" id="sumfield" onblur="calc(true)"></td></tr>`;
table += '</table>';
document.getElementById("tablewrapper").innerHTML = table;
calc();
}
function calc(b) {
console.log(formula)
if(b) formula = document.getElementById("sumfield").innerHTML.toLowerCase();
console.log(formula.slice(5,7))
var f = formula.slice(1,4)
var z = parseInt(document.getElementById(formula.slice(5,7)).innerHTML);
var w = parseInt(document.getElementById(formula.slice(8,10)).innerHTML);
var res = window[f](z,w)
console.log(res)
document.getElementById("sumfield").innerHTML = res;
}
function toAbc(i){
return ((i%26)+9).toString(36);
}
function sum(x,y){
return x+y;
}
function mul(x,y){
return x*y;
}
function sub(x,y){
return x-y;
}
function div(x,y){
return x/y;
}
4.4 - Editor
editor.html
<!-- https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor</title>
<script src="https://kit.fontawesome.com/311699e670.js" crossorigin="anonymous"></script>
<script src="editor.js"></script>
<style>
body {
margin: 0 auto;
width: 600px;
font-family: 'Dosis', serif;
}
a {
cursor: pointer;
}
#editor {
box-shadow: 0 0 2px #CCC;
min-height: 150px;
overflow: auto;
padding: 1em;
margin-top: 20px;
resize: vertical;
outline: none;
}
.toolbar {
text-align: center;
}
.toolbar a,
.fore-wrapper,
.back-wrapper {
border: 1px solid #AAA;
background: #FFF;
border-radius: 1px;
color: black;
padding: 5px;
width: 1.5em;
margin: 10px -2px -2px;
display: inline-block;
text-decoration: none;
box-shadow: 0 1px 0 #CCC;
}
.toolbar a:hover,
.fore-wrapper:hover,
.back-wrapper:hover {
background: #f2f2f2;
border-color: #8c8c8c;
}
a[data-command='redo'],
a[data-command='strikeThrough'],
a[data-command='justifyFull'],
a[data-command='insertOrderedList'],
a[data-command='outdent'],
a[data-command='p'],
a[data-command='superscript'] {
margin-right: 5px;
border-radius: 0 3px 3px 0;
}
a[data-command='undo'],
.fore-wrapper,
a[data-command='justifyLeft'],
a[data-command='insertUnorderedList'],
a[data-command='indent'],
a[data-command='h1'],
a[data-command='subscript'] {
border-radius: 3px 0 0 3px;
}
.fore-palette,
.back-palette {
display: none;
}
.fore-wrapper,
.back-wrapper {
display: inline-block;
cursor: pointer;
}
.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
display: block;
float: left;
position: absolute;
padding: 3px;
background: #FFF;
border: 1px solid #DDD;
box-shadow: 0 0 5px #CCC;
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
</style>
</head>
<body onload="addlisteners(); addColorListener();">
<div class="toolbar">
<a href="#" data-command='undo'><i class='fa fa-undo'></i></a>
<a href="#" data-command='redo'><i class='fa fa-repeat'></i></a>
<div class="fore-wrapper"><i class='fa fa-font' style='color:#C96;'></i>
<div class="fore-palette">
<input data-command="forecolor" type="color" value="#000000">
</div>
</div>
<div class="back-wrapper"><i class='fa fa-font' style='background:#C96;'></i>
<div class="back-palette">
<input data-command="backcolor" type="color" value="#000000">
</div>
</div>
<a href="#" data-command='bold'><i class='fa fa-bold'></i></a>
<a href="#" data-command='italic'><i class='fa fa-italic'></i></a>
<a href="#" data-command='underline'><i class='fa fa-underline'></i></a>
<a href="#" data-command='strikeThrough'><i class='fa fa-strikethrough'></i></a>
<a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a>
<a href="#" data-command='justifyCenter'><i class='fa fa-align-center'></i></a>
<a href="#" data-command='justifyRight'><i class='fa fa-align-right'></i></a>
<a href="#" data-command='justifyFull'><i class='fa fa-align-justify'></i></a>
<a href="#" data-command='indent'><i class='fa fa-indent'></i></a>
<a href="#" data-command='outdent'><i class='fa fa-outdent'></i></a>
<a href="#" data-command='insertUnorderedList'><i class='fa fa-list-ul'></i></a>
<a href="#" data-command='insertOrderedList'><i class='fa fa-list-ol'></i></a>
<a href="#" data-command='h1'>H1</a>
<a href="#" data-command='h2'>H2</a>
<a href="#" data-command='createlink'><i class='fa fa-link'></i></a>
<a href="#" data-command='unlink'><i class='fa fa-unlink'></i></a>
<a href="#" data-command='insertimage'><i class='fa fa-image'></i></a>
<a href="#" data-command='p'>P</a>
<a href="#" data-command='subscript'><i class='fa fa-subscript'></i></a>
<a href="#" data-command='superscript'><i class='fa fa-superscript'></i></a>
</div>
<div id='editor' contenteditable>
<h1>A WYSIWYG Editor.</h1>
<p>Try making some changes here. Add your own text or maybe an image.</p>
</div>
</body>
</html>
editor.js
function addlisteners() {
document.querySelectorAll('.toolbar a').forEach(el => {
el.addEventListener('click', function () {
var command = this.dataset.command;
if (command === 'h1' || command === 'h2' || command === 'p'){
document.execCommand('formatBlock', false, command);
}
if (command == 'createlink' || command == 'insertimage') {
url = prompt('Enter the link here: ','http:\/\/');
document.execCommand(command, false, url);
} else document.execCommand(command, false, null);
})
})
}
function addColorListener(){
document.querySelectorAll('.toolbar input').forEach(el => {
el.addEventListener('change', function (){
console.log("change")
var command = this.dataset.command;
console.log(command);
if (command == 'forecolor' || command == 'backcolor') {
document.execCommand(command, false, this.value);
}
})
})
}