batracos/svelte-playground
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Prettyfied

Browse Source
This commit is contained in:
Giulio Alessandrini 2021-08-05 17:51:59 +02:00
parent ef42761ce4
commit 171559802f
9 changed files with 336 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.cursorBlinking": "smooth",
"editor.formatOnSave": true
}

76
src/lib/apps/todoApp.svelte
View File

@ -1,7 +1,7 @@
<script>
import {todos} from "$lib/stores/todos.js";
let todo_text = "";
let todo_type = "active";
import { todos } from '$lib/stores/todos.js';
let todo_text = '';
let todo_type = 'active';
let filteredTodo = [];
let addTodo = () => {
if (todo_text.length > 0) {
@ -9,41 +9,40 @@
text: todo_text,
date: Date.now,
done: false
}
todo_text = "";
if (todo_type == "done") todo_type = "all";
};
todo_text = '';
if (todo_type == 'done') todo_type = 'all';
$todos = [todo, ...$todos];
}
}
};
let solveTodo = (todo) => {
if (todo.done) {
todo.done = false;
}
else {
} else {
todo.done = true;
}
$todos = $todos
}
$todos = $todos;
};
let clearTodo = (todo) => {
$todos = $todos.filter(x => x != todo)
}
$todos = $todos.filter((x) => x != todo);
};
let filterTodo = (type) => {
todo_type = type;
switch (type) {
case 'active':
filteredTodo = $todos.filter(todo => !todo.done);
filteredTodo = $todos.filter((todo) => !todo.done);
break;
case 'done':
filteredTodo = $todos.filter(todo => todo.done);
filteredTodo = $todos.filter((todo) => todo.done);
break;
case 'all':
filteredTodo = $todos;
break;
}
}
};
$: {
filteredTodo = $todos;
filterTodo(todo_type)
filterTodo(todo_type);
}
</script>
@ -51,13 +50,23 @@
<h2 class="title">todo</h2>
<hr />
<div class="todo-input">
<input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
<button on:click="{addTodo}" disabled = {todo_text.length == 0} class = "todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button>
<input class="todo-text" bind:value={todo_text} placeholder="title" />
<button
on:click={addTodo}
disabled={todo_text.length == 0}
class="todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button
>
</div>
<div class="todo-filter">
<button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
<button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
<button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>all</button>
<button on:click={() => filterTodo('active')} class={todo_type == 'active' ? 'disabled' : ''}
>active</button
>
<button on:click={() => filterTodo('done')} class={todo_type == 'done' ? 'disabled' : ''}
>done</button
>
<button on:click={() => filterTodo('all')} class={todo_type == 'all' ? 'disabled' : ''}
>all</button
>
</div>
<ul class="todo-list">
{#each filteredTodo as todo}
@ -65,9 +74,9 @@
<p>{todo.text}</p>
<div class="todo-buttons">
{#if todo.done}
<button class = "clear" on:click="{() => clearTodo(todo)}">✗</button>
<button class="clear" on:click={() => clearTodo(todo)}>✗</button>
{/if}
<button class = "solve" on:click="{() => solveTodo(todo)}">✓</button>
<button class="solve" on:click={() => solveTodo(todo)}>✓</button>
</div>
</li>
{/each}
@ -75,17 +84,15 @@
</div>
<style>
* {
--cream: #FEF9EF;
--cream: #fef9ef;
--blue: #227c9d;
--blue-disabled: #aabac0;
--green: #17C3B2;
--yellow: #FFCB77;
--red: #FE6D73;
--green: #17c3b2;
--yellow: #ffcb77;
--red: #fe6d73;
}
.panel {
padding-top: 1rem;
padding-bottom: 1rem;
@ -212,7 +219,6 @@ button:active.disabled {
+ (12*3)px (36px)
*/
min-height: calc(11.5rem + 48px);
}
.todo {
@ -241,7 +247,6 @@ button:active.disabled {
border-radius: 1rem;
}
/* sovle button */
.todo button.solve {
background-color: var(--cream);
@ -250,7 +255,7 @@ button:active.disabled {
}
.todo.done button.solve {
background-color: var(--cream);
color: var(--green)
color: var(--green);
}
/* clear button */
@ -263,11 +268,10 @@ button:active.disabled {
/* active buttons */
.todo button:active {
background-color: var(--yellow);
border-color: var(--yellow)
border-color: var(--yellow);
}
.todo.done button:active {
background-color: var(--yellow);
border-color: var(--yellow)
border-color: var(--yellow);
}
</style>

7
src/lib/components/footer.svelte
View File

@ -1,8 +1,9 @@
<footer>
<p>
made with ❤️
and
<a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
made with ❤️ and
<a href="https://svelte.dev/">
<img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a
>
</p>
</footer>

1
src/lib/components/nav.svelte
View File

@ -17,5 +17,4 @@
padding: 8px;
border-bottom: solid 1px black;
}
</style>

14
src/lib/stores/todos.js
View File

@ -1,5 +1,5 @@
import { onMount } from 'svelte';
import { writable } from "svelte/store";
import { writable } from 'svelte/store';
const localStore = (key, initial) => {
const toString = (value) => JSON.stringify(value, null, 2);
@ -7,7 +7,7 @@ const localStore = (key, initial) => {
if (process.browser) {
if (localStorage.getItem(key) === null) {
localStorage.setItem(key, toString(initial))
localStorage.setItem(key, toString(initial));
}
const saved = toObject(localStorage.getItem(key));
@ -16,16 +16,16 @@ const localStore = (key, initial) => {
return {
subscribe,
set: value => {
set: (value) => {
// both return and save in the local storage
localStorage.setItem(key, toString(value));
return set(value)
return set(value);
},
update
};
}
}
}
};
// export const todos = localStore('todo-store', []);
console.log("here we are: " + typeof window);
console.log('here we are: ' + typeof window);
export const todos = writable([]);

7
src/routes/__layout.svelte
View File

@ -1,11 +1,11 @@
<script>
import Nav from "$lib/components/nav.svelte"
import Footer from "$lib/components/footer.svelte"
import Nav from '$lib/components/nav.svelte';
import Footer from '$lib/components/footer.svelte';
</script>
<div class="site">
<Nav />
<slot></slot>
<slot />
<Footer />
</div>
@ -27,5 +27,4 @@
display: flex;
flex-direction: column;
}
</style>

2
src/routes/apps/todo.svelte
View File

@ -1,5 +1,5 @@
<script>
import ToDo from "$lib/apps/todoApp.svelte"
import ToDo from '$lib/apps/todoApp.svelte';
</script>
<ToDo />

2
src/routes/index.svelte
View File

@ -1,4 +1,3 @@
<div class="panel">
<h1>APPS</h1>
<ul>
@ -6,7 +5,6 @@
</ul>
</div>
<style>
.panel {
margin: 1em;