Repo erstellt

2024-01-19 09:39:23 +01:00
parent 9dae96d20a
commit 3d5ccd880b
9 changed files with 289 additions and 0 deletions
@@ -0,0 +1,107 @@
+<!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>