• HTML
  • CSS
  • JS
  • Folien
      <!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)