index

Author: WernerWaage

public/index.html

@@ -27,6 +27,7 @@
   <options-component></options-component>
 
   <footer>
+
     <p><a href="https://github.com/WernerWaage/typescript-todo" class="underline">typescript-todo</a></p>
   </footer>
 

src/components/common-component-style.ts

@@ -34,11 +34,17 @@ export const commonStylesheet = css`
         background-color: #f082ac;
     }
 
+    h2 {
+            margin:20px;
+            padding-top:20px;    
+            display: block;
+            font-size: 1.5em;
+            margin-inline-start: 20px;
+            font-weight: bold;
+            line-height: 1.5em
+    }
+
     .taskContainer {
-        //box-shadow: outset, inset/h-offset v-offset blur spread color;
-        // width: 350px;
-        // height: 200px;
-        // border: solid 1px #555;
         max-width: 960px;
         margin: 0 auto;
         background-color: #fff;

src/components/options-component.ts

@@ -26,23 +26,21 @@ class OptionsComponent extends MobxLitElement {
         const optionsHtml = html`
             <div class="container taskContainer">
             <div>
-            Hello from options!
-            <h1 id="welcomeText">Welcome to the todo list</h1>
-            <b>[Import tasks]</b>-<b>Export tasks</b>-<b>Clear tasks</b>
-            <button class="button-1" role="button">Button 1</button>
+            <h2>Options</h2>
+
+            <button class="button-1" role="button">Import tasks</button>
+            <button class="button-1" role="button">Export tasks</button>
+            <button class="button-1" role="button">Clear tasks</button>
 
             <br>
 
 
                 <label>
                     <input
                         type="checkbox"
-                        
                     /> Toggle completed tasks
                     <br>
 
-                    <!-- <button @click=${() => myOptions.toggle()}>Toggle Options</button>
-     -->
                 </label>
 
 

src/components/todo-component.ts

@@ -26,22 +26,17 @@ export class ToDoList extends MobxLitElement {
 
     static styles = css`
         ${commonStylesheet}
-        h2 {
-            margin:20px;
-            padding-top:20px;    
-            display: block;
-            font-size: 1.5em;
-            margin-inline-start: 20px;
-            font-weight: bold;
-            line-height: 1.5em
-        }
+
         .innerList {
             padding: 1px;
         }
         .completed {
             text-decoration-line: line-through;
             color: #777;
         }
+        .feedback {
+            margin-left:20px;
+        }
         ul {
             list-style-type: none;
         }
@@ -111,18 +106,22 @@ export class ToDoList extends MobxLitElement {
                 </ul>
             </div>
         `
-        const caughtUpMessage = html` <p>You're all caught up!</p> `
+        const caughtUpMessage = html` <p class="feedback">You're all caught up!</p> `
         const renderPlaceholder =
             items.length > 0 ? renderTodoList : caughtUpMessage
         const outputHeader = html`<h2>To Do</h2>`
+
         // Main output of the component:
         return html`
             <div class="container taskContainer">
-                ${outputHeader} ${this._feedback} ${renderPlaceholder}
+                ${outputHeader}
+                <p class="feedback">${this._feedback}</p>
+                
+                ${renderPlaceholder}
 
                 <div class="inputContainer">
                     <input id="newitem" class="input-task" aria-label="New item" />
-                    <button @click=${this.addToDo}>Add</button>
+                    <button id="btnAddTodo" @click=${this.addToDo}>Add</button>
                 </div>
                     <br />
 
@@ -132,6 +131,8 @@ export class ToDoList extends MobxLitElement {
         `
     }
 
+
+
     toggleCompleted(item: Task) {
         item.completed = !item.completed
         this.requestUpdate()
@@ -190,3 +191,18 @@ export class ToDoList extends MobxLitElement {
         }
     }
 }
+
+    // Get the input field
+    var input = document.getElementById("newitem");
+
+    // Execute a function when the user presses a key on the keyboard
+    input?.addEventListener("keypress", function(event) {
+    // If the user presses the "Enter" key on the keyboard
+    if (event.key === "Enter") {
+    // Cancel the default action, if needed
+    event.preventDefault();
+    // Trigger the button element with a click
+        console.log("okay!")
+    document.getElementById("btnAddTodo")?.click();
+    }
+});

src/index.ts

@@ -18,16 +18,12 @@ const TodoListObserver = observable(person)
 
 const loadtimes = getLoadTimes()
 console.log('Loaded : ' + loadtimes + ' times')
-let timerCountdown1 = new Timer(3)
-
-const welcomeText = document.getElementById('welcomeText')
-const todoHeader = document.getElementById('todoHeader')
-
-welcomeText?.addEventListener('click', function handleClick(event) {
-    console.log('clicked the header!')
-    welcomeText!.innerHTML =
-        'Todo list - You have ' + timerCountdown1.timeLeft() + ' seconds left'
-})
+ 
+// welcomeText?.addEventListener('click', function handleClick(event) {
+//     console.log('clicked the header!')
+//     welcomeText!.innerHTML =
+//         'Todo list - You have ' + timerCountdown1.timeLeft() + ' seconds left'
+// })
 
 // counter
 function getLoadTimes(): number {
@@ -44,20 +40,4 @@ function getLoadTimes(): number {
     localStorage.setItem('LOADTIMES', loadtimes.toString())
     return loadtimes
 }
-
-// Model the application state.
-class ObservableTimer {
-    secondsPassed = 0
-
-    constructor() {
-        makeAutoObservable(this)
-    }
-
-    increase() {
-        this.secondsPassed += 1
-    }
-
-    reset() {
-        this.secondsPassed = 0
-    }
-}
+