A to-do app in Svelte

Svelte

Svelte is a framework that helps developers to work on the front-end of webpages. It is an open-source interactive language that allows development of front-end pages in JavaScript.

A to-do app

A to-do app allows us to maintain the records of one's daily tasks digitally. It stores all the information in the form of a list with the most important task at the top and the least important at the bottom.

A to-do app in Svelte would have the following functionalities:

A task can be added to the list.
A task can be deleted in from the list.
A task can be marked completed.
A task can be browsed.

Implementation

For creating a To-Do app in Svelte, we need a CSS, JSON package, and npm install

We need CSS file for the front-end to style different components such as buttons, drop downs, logos, texts etc.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "rollup": "^1.10.1",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^4.2.3",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^4.0.4",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^0.4.4"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c -w",
    "dev": "run-p start:dev autobuild",
    "start": "sirv public --single --host 0.0.0.0",
    "start:dev": "sirv public --single --dev --host 0.0.0.0 --port 5000"
  }
}

app.svelte

main.js

<script>
  let todoItems = [];
  let newItem = "";
  function addTodoItem() {
    newItem = newItem.trim();
    if (newItem.length == 0) {
      return;
    }
    const todo = {
      text: newItem,
      checked: false,
      id: Date.now(),
    };
    todoItems = [
      ...todoItems,
      {
        text: newItem,
        checked: false,
        id: Date.now(),
      },
    ];
    newItem = "";
  }
  function toggleItemDone(id) {
    todoItems = todoItems.map((item) => {
      if (item.id === id) {
        item.checked = !item.checked;
      }
      return item;
    });
  }
  function deleteTodoItem(id) {
    todoItems = todoItems.filter((item) => item.id !== Number(id));
  }
</script>
<main>
  <div class="container">
    <h1 class="title">todos</h1>
    <ul class="todo-list">
      {#each todoItems as todo (todo.id)}
        <li class="todo-item {todo.checked? 'done': ''}">
          <input
            id={todo.id}
            type="checkbox"
            on:click={() => toggleItemDone(todo.id)}
          />
          <label for={todo.id} />
          <span class="todo-text">{todo.text}</span>
          <button
            class="delete-button"
            on:click={() => deleteTodoItem(todo.id)}
          >
            <svg class="icon"><use href="#delete-icon" /></svg>
          </button>
        </li>
      {/each}
    </ul>
    <form on:submit|preventDefault={addTodoItem}>
      <input
        class="todo-input"
        type="text"
        aria-label="Enter a new todo item"
        placeholder="E.g. Build a web app"
        bind:value={newItem}
      />
      <button class="add-button" type="submit">Add</button>
    </form>
  </div>
</main>
Footer

The newItem would add todo item, represents the input field text.
The addTodoItem() is a function that adds a new to-do item to the existing list. it would take the input field from the user.
The const todo create a new todo item object with the text from the input field.
The function toggleItemDone() will toggle a to-do item from the to-do list.
The function deleteTodoItem() will remove a to-do item from the to-do list.

Setup

We needed to add all these files to a folder and enter the following scripts.

NPM needed to be installed first so that we would enter the npm install command.
After installation, we need to start the npm so that we will enter npm start.
The application would respond to port 5000 and the local host.

Execution

The application would be executed as follow:

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.