107 lines
3.7 KiB
HTML
107 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
|
|
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
|
<style>
|
|
|
|
body{
|
|
height: 100%;
|
|
background-image: linear-gradient(to right, rgba(21, 45, 70, 0.192), rgba(40, 16, 63, 0.178)), url(Download.jpg);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
.demo-list-control {
|
|
width: 300px;
|
|
}
|
|
.button1{
|
|
background-color: #bcbe1a;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function clearTodo(){
|
|
todolist.innerHTML ="";
|
|
}
|
|
function addTodo(){
|
|
// alert("Hallo");
|
|
|
|
todolist.innerHTML += `
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
<i class="material-icons mdl-list__item-avatar">extension</i>
|
|
<p style="color: #1E72DF" >${todofield.value}</p>
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
|
|
<input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
`;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- Always shows a header, even in smaller screens. -->
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<!-- Title -->
|
|
<span class="mdl-layout-title">To Do Liste</span>
|
|
<!-- Add spacer, to align navigation to the right -->
|
|
<div class="mdl-layout-spacer"></div>
|
|
<!-- Navigation. We hide it in small screens. -->
|
|
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<div class="mdl-layout__drawer">
|
|
<span class="mdl-layout-title">To Do Liste</span>
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
</nav>
|
|
</div>
|
|
<main class="mdl-layout__content">
|
|
<div class="page-content"><!-- Your content goes here -->
|
|
|
|
<form onsubmit="return false;">
|
|
<div class="mdl-textfield mdl-js-textfield">
|
|
<input class="mdl-textfield__input" type="text" id="todofield">
|
|
<label class="mdl-textfield__label" for="todofield">To do einfügen</label>
|
|
</div>
|
|
|
|
|
|
|
|
<button onclick="addTodo()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
|
|
Speichern
|
|
</button>
|
|
</form>
|
|
|
|
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
|
|
ToDo leeren
|
|
</button>
|
|
|
|
|
|
<ul class="demo-list-control mdl-list" id="todolist">
|
|
|
|
</ul>
|
|
<button onclick="clearTodo()" class="button1" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" >
|
|
Liste leeren
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html> |