Building a Complete To-Do App with SvelteKit: Taking Your Skills to the Next Level
Tags: webdev, programming, svelte, javascript
Published: 2023-08-30 20:51:24

# Building a Complete To-Do App with SvelteKit: Taking Your Skills to the Next Level

Hello again, passionate developers! Our journey through Svelte's wonders has been remarkable, but the adventure continues. Today, we're stepping up our game by creating a full-fledged to-do app using the cutting-edge SvelteKit framework. Brace yourself for a transformative experience as we craft an interactive web app from scratch!

## Crafting a User-Friendly To-Do App

Our focus now shifts to the creation of a user-friendly to-do app, a quintessential project in web development. Leveraging the power of SvelteKit, we'll witness firsthand how effortlessly we can design engaging interfaces and manage user interactions.

## Getting Started with SvelteKit

Before diving into the details, let's set up our project using SvelteKit, the future-oriented framework designed for a seamless developer experience.

1. Initialize a new SvelteKit project:

   ```shell
   npm create svelte@latest my-todo-app
   ```

You will be prompted to select the SvelteKit Demo App and other options.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ticleslbsnmjlfv6r5lh.png)

Choose the "Skeleton project" option and proceed to the next prompt.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3hydf0i1dmhks0xzj74.png)

Choose:

> Yes, using JavaScript with JSDoc comments & Add ESLint for code linting


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myle214inmxyzllujnlh.png)

Navigate to our newly initialized app and install the required dependencies:

```
cd my-app
npm install
```

Now, run the command below to launch your project:
```
npm run dev -- --open

```
This will open a browser window with your empty SvelteKit app, as seen below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fumw90vv224fidjhxvd2.png)

Congratulations! You've now set up your SvelteKit project. Let's dive into creating the to-do app.


## Building the To-Do App

With the project foundation laid, it's time to begin crafting our to-do app. Open the src/routes/+page.svelte file and replace its content with the following:


```
<script>
    let tasks = [];
    let newTask = '';
  
    function addTask() {
      if (newTask) {
        tasks = [...tasks, newTask];
        newTask = '';
      }
    }
  
    function removeTask(index) {
      tasks.splice(index, 1);
      tasks = [...tasks]; // Update the tasks array to trigger reactivity
    }
  </script>
  
  <main>
    <h1>SvelteKit To-Do App</h1>
    <div class="add-task">
      <input class="task-input" bind:value={newTask} placeholder="Add a new task" />
      <button class="add-button" on:click={addTask}>Add</button>
    </div>
    
    <ul class="task-list">
      {#each tasks as task, index (task)}
        <li class="task-item">
          {task}
          <button class="remove-button" on:click={() => removeTask(index)}>Remove</button>
        </li>
      {/each}
    </ul>
  </main>
  
  <style>
    main {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
  
    h1 {
      color: #333;
    }
  
    .add-task {
      margin-bottom: 20px;
    }
  
    .task-input {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  
    .add-button {
      padding: 5px 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  
    .task-list {
      list-style-type: none;
      padding: 0;
    }
  
    .task-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
    }
  
    .remove-button {
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>

```

## Running the SvelteKit App 

With the to-do app in place, let's witness its magic:

Start the development server:
```
npm run dev
```

Open your browser and navigate to http://127.0.0.1:5173.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmbeo4330tfpzwvb2jye.png)

**Conclusion: Unleashing the Potential of SvelteKit
**Congratulations, you've achieved a remarkable feat by crafting a complete to-do app with the power of SvelteKit! The ease with which SvelteKit handles reactivity and routing demonstrates its prowess in modern web development.

As we conclude our journey, remember that SvelteKit offers a world of possibilities waiting to be explored. Keep pushing your boundaries, integrating dynamic features, and crafting exceptional web applications that captivate users.

Thank you for joining us on this incredible journey. Your skills have evolved, and you're now equipped to shape the digital landscape with remarkable SvelteKit-powered creations. Happy coding!

[Previous Day: Elevate Your Svelte App with Intelligent Interactions using ChatGPT API](https://dev.to/ironside/elevate-your-svelte-app-with-intelligent-interactions-using-chatgpt-api-python-flask-3c0c)