Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

svelte

A to-do app in Svelte

Aeman Akram

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
CSS File
  • Now, the JSON package will contain all the information regarding the ports, plugins, server, and hosts.
{
"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"
}
}
JSON package

Source code

The source includes the basic functionalities of the application.

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
Main application code

  • 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:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

RELATED TAGS

svelte

CONTRIBUTOR

Aeman Akram
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring