Creating public-images and src-components folder

src/App.svelte

@@ -4,7 +4,6 @@
 
 <main>
 	<h1>Hello {name}!</h1>
-	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>
 
 <style>
@@ -16,7 +15,7 @@
 	}
 
 	h1 {
-		color: #ff3e00;
+		color: rgb(174, 43, 226);;
 		text-transform: uppercase;
 		font-size: 4em;
 		font-weight: 100;

src/components/Todoitem.svelte

@@ -0,0 +1,57 @@
+<script>
+    import Todoitem from './Todos.svelte';
+
+    //Variables
+    let newToDoTitle = '';
+    let currentFilter = 'all';
+    let nextId = 4;
+
+    let todos = [
+        {
+            id: 1,
+            title: 'My first todo',
+            completed: false
+        },
+        {
+            id: 2,
+            title: 'My second todo',
+            completed: false
+        },
+        {
+            id: 3,
+            title: 'My third todo',
+            completed: false
+        }
+    ];
+
+</script>
+
+<div class="container">
+    <img src={'./images/flagAfrica.png'} alt="Flags of African countries in African continent" class="logo">
+
+    <h1>
+        To Do App
+    </h1>
+    <input type="text" class="todo-input" placeholder="Insert to-do item" bind:value={newToDoTitle} on:keydown={addToDo}>
+
+    <!-- Output -->
+    {#each filteredTodos as todo}
+        <div class="todo-item">
+            <Todoitem {...todo} on:deleteTodo={handleDeleteTodo} on:toggleComplete={handleToggleComplete} />
+        </div>
+    {/each}
+
+    <div class="inner-container">
+        <div><label><input class="inner-container-input" type="checkbox" on:change={checkAllTodos}>Check All</label></div>
+        <div>{todosRemaining} items left</div>
+    </div>
+</div>
+
+
+
+<style>
+   .logo {
+       max-width: 100px;
+       border-radius: 10px;
+   }
+</style>

src/main.js

@@ -3,7 +3,7 @@ import App from './App.svelte';
 const app = new App({
 	target: document.body,
 	props: {
-		name: 'world'
+		name: 'NewCoderCA'
 	}
 });