This code snippet is a simple shopping list application built with the Svelte framework. It allows users to add, edit and delete items from their shopping list.

Snippet

<script>
  import { fade } from "svelte/transition";

  let items = ["Apples", "Oranges", "Bananas"];
  let newItem = "";

  function addItem(evt) {
    if (evt.key === "Enter") {
      items = [...items, newItem];
      newItem = "";
    }
  }

  function editItem(index) {
    const updatedItem = prompt("Edit item:", items[index]);
    if (updatedItem) {
      items[index] = updatedItem;
      items = items.slice();
    }
  }

  function deleteItem(index) {
    items = items.filter((_, i) => i !== index);
  }
</script>

<div class="container">
  <h1>Shopping List App</h1>
  <div class="input-container">
    <input type="text" placeholder="Add Item" bind:value={newItem} on:keydown={addItem} />
  </div>
  <h4>My Shopping List</h4>
  <ul>
    {#each items as item, index}
      <li transition:fade>
        <div class="list-item">
          {item}
          <div class="buttons">
            <button on:click={() => editItem(index)}>Edit</button>
            <button on:click={() => deleteItem(index)}>Delete</button>
          </div>
        </div>
      </li>
    {/each}
  </ul>
</div>

<style>
  :global(body) {
    font-family: "Arial", sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
  }

  .container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 5px;
  }

  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }

  .input-container {
    display: flex;
    justify-content: center;
  }

  input {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    flex: 1;
  }

  input:focus {
    outline: none;
    border-color: #0078d4;
  }

  input::placeholder {
    color: #999;
  }

  li {
    list-style: none;
    padding: 8px 0;
  }

  .list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    grid-gap: 10px;
  }

  .buttons {
    display: flex;
  }

  button {
    background-color: #0078d4;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 5px;
  }

  button:hover {
    background-color: #005a78;
  }

  button:focus {
    outline: none;
  }
</style>
  • addItem: Adds a new item to the shopping list when the user hits the “Enter” key. It adds the value of the newItem variable to the items array and resets the newItem variable to an empty string.
  • editItem: Allows the user to edit an existing item in the shopping list. It prompts the user to enter a new name for the item and updates the items array with the new value.
  • deleteItem: Removes an item from the shopping list by filtering out the item at the specified index.

Output

Usage

To use this code snippet, you can simply copy and paste it into your App.Svelte File.

Conclusion

This code snippet demonstrates how to build a simple shopping list application using the Svelte framework.

It shows how to define functions to add, edit, and delete items from a list, as well as how to apply transitions to elements for a smoother user experience.

With this code as a starting point, you can easily build more complex applications using Svelte’s reactive and component-based programming model.

Further Reading