<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Todo App</title>
<meta name="author" content="Andreas Roth">
<meta name="keywords" content="Todo">
<meta name="description" content="First Todo App">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Welcome to my todo app</h1>
<form id="form" onSubmit="event.preventDefault()">
<input id="input" type="text" placeholder="Insert Todo text here">
<button id="button">Save</button>
</form>
<ul id="list">
</ul>
</main>
<script src="script.js"></script>
</body>
</html>
html, body, main {
font-family: Tahoma;
height: 100%;
margin: 0;
padding: 0;
}
main {
box-shadow: 0px 0px 5px #444;
margin:0 auto;
width: 500px;
}
h1 {
border-bottom: 1px solid #444;
padding: 10px;
text-align: center;
}
form {
text-align: center;
}
input {
padding:5px;
}
form button {
padding: 5px;
}
ul button {
margin-right: 5px;
}
ul {
list-style-type: none;
padding:0;
}
ul li:nth-child(odd) {
background-color: #eee;
}
ul li {
padding:15px;
}
var appendTodo = function(textKarton) {
// Füge hier den Code aus der vorherigen Aufgabe ein.
// Suche die richtige ID im HTML-File
var ul = document.getElementById('list')
// Hier wird ein li Element erstellt
var li = document.createElement('li')
// Erstelle hier ein button Element
var button = document.createElement('button')
//
// Hier wird der Text x an den Button angehängt.
button.appendChild(document.createTextNode('X'))
// Hier wird der Button an das li Element angehängt
li.appendChild(button)
// Hänge das li Element an das ul Element.
ul.appendChild(li)
//
// Hier wird ein TextElement mit dem Inhalt aus textKarton an li angehängt.
li.appendChild(document.createTextNode(textKarton))
}
var button = document.getElementById('button');
// Suche hier das Element mit der ID input und lege es in der Variable input ab.
var input = document.getElementById('input');
//
var handleClick = function() {
var inputKarton = input.value
// Rufe hier die Funktion appendTodo mit dem Inhalt aus input Karton auf.
appendTodo(inputKarton)
//
}
button.addEventListener('click', handleClick)