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
}

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

@ -1,7 +1,7 @@
<script> <script>
import {todos} from "$lib/stores/todos.js"; import { todos } from '$lib/stores/todos.js';
let todo_text = ""; let todo_text = '';
let todo_type = "active"; let todo_type = 'active';
let filteredTodo = []; let filteredTodo = [];
let addTodo = () => { let addTodo = () => {
if (todo_text.length > 0) { if (todo_text.length > 0) {
@ -9,65 +9,74 @@
text: todo_text, text: todo_text,
date: Date.now, date: Date.now,
done: false done: false
} };
todo_text = ""; todo_text = '';
if (todo_type == "done") todo_type = "all"; if (todo_type == 'done') todo_type = 'all';
$todos = [todo, ...$todos]; $todos = [todo, ...$todos];
} }
} };
let solveTodo = (todo) => { let solveTodo = (todo) => {
if(todo.done) { if (todo.done) {
todo.done = false; todo.done = false;
} } else {
else {
todo.done = true; todo.done = true;
} }
$todos = $todos $todos = $todos;
} };
let clearTodo = (todo) => { let clearTodo = (todo) => {
$todos = $todos.filter(x => x != todo) $todos = $todos.filter((x) => x != todo);
} };
let filterTodo = (type) => { let filterTodo = (type) => {
todo_type = type; todo_type = type;
switch (type) { switch (type) {
case 'active': case 'active':
filteredTodo = $todos.filter(todo => !todo.done); filteredTodo = $todos.filter((todo) => !todo.done);
break; break;
case 'done': case 'done':
filteredTodo = $todos.filter(todo => todo.done); filteredTodo = $todos.filter((todo) => todo.done);
break; break;
case 'all': case 'all':
filteredTodo = $todos; filteredTodo = $todos;
break; break;
} }
} };
$: { $: {
filteredTodo = $todos; filteredTodo = $todos;
filterTodo(todo_type) filterTodo(todo_type);
} }
</script> </script>
<div class = "panel"> <div class="panel">
<h2 class= "title">todo</h2> <h2 class="title">todo</h2>
<hr/> <hr />
<div class="todo-input"> <div class="todo-input">
<input class="todo-text" bind:value="{todo_text}" placeholder="title"/> <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> <button
on:click={addTodo}
disabled={todo_text.length == 0}
class="todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button
>
</div> </div>
<div class="todo-filter"> <div class="todo-filter">
<button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button> <button on:click={() => filterTodo('active')} class={todo_type == 'active' ? 'disabled' : ''}
<button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button> >active</button
<button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>all</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> </div>
<ul class = "todo-list"> <ul class="todo-list">
{#each filteredTodo as todo} {#each filteredTodo as todo}
<li class = "todo {todo.done ? 'done' : ''}"> <li class="todo {todo.done ? 'done' : ''}">
<p>{todo.text}</p> <p>{todo.text}</p>
<div class = "todo-buttons"> <div class="todo-buttons">
{#if todo.done} {#if todo.done}
<button class = "clear" on:click="{() => clearTodo(todo)}">✗</button> <button class="clear" on:click={() => clearTodo(todo)}>✗</button>
{/if} {/if}
<button class = "solve" on:click="{() => solveTodo(todo)}">✓</button> <button class="solve" on:click={() => solveTodo(todo)}>✓</button>
</div> </div>
</li> </li>
{/each} {/each}
@ -75,25 +84,23 @@
</div> </div>
<style> <style>
* {
* { --cream: #fef9ef;
--cream: #FEF9EF;
--blue: #227c9d; --blue: #227c9d;
--blue-disabled: #aabac0; --blue-disabled: #aabac0;
--green: #17C3B2; --green: #17c3b2;
--yellow: #FFCB77; --yellow: #ffcb77;
--red: #FE6D73; --red: #fe6d73;
} }
.panel {
.panel {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
background-color: var(--cream); background-color: var(--cream);
font-size: 1rem; font-size: 1rem;
font-family: 'Atkinson Hyperlegible', sans-serif; font-family: 'Atkinson Hyperlegible', sans-serif;
} }
@media only screen and (min-width: 500px) { @media only screen and (min-width: 500px) {
.panel { .panel {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -101,22 +108,22 @@
border: solid var(--cream) 0px; border: solid var(--cream) 0px;
border-radius: 10px; border-radius: 10px;
} }
} }
.title { .title {
margin-left: 2rem; margin-left: 2rem;
font-weight: 400; font-weight: 400;
font-size: 3rem; font-size: 3rem;
color: var(--yellow); color: var(--yellow);
} }
hr { hr {
margin-left: 1rem; margin-left: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 2px solid var(--yellow); border: 2px solid var(--yellow);
} }
button { button {
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
background-color: var(--blue); background-color: var(--blue);
@ -125,14 +132,14 @@ button {
color: white; color: white;
font-family: 'Atkinson Hyperlegible', sans-serif; font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem; font-size: 1rem;
} }
.todo-input { .todo-input {
font-size: 0px; font-size: 0px;
margin: 1rem; margin: 1rem;
display: flex; display: flex;
} }
.todo-text { .todo-text {
padding: 1rem; padding: 1rem;
margin: 0px; margin: 0px;
border: solid white 2px; border: solid white 2px;
@ -143,52 +150,52 @@ button {
font-family: 'Atkinson Hyperlegible', sans-serif; font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem; font-size: 1rem;
width: 100%; width: 100%;
} }
.todo-text:focus { .todo-text:focus {
outline: none; outline: none;
border-bottom-color: var(--blue); border-bottom-color: var(--blue);
} }
.todo-add { .todo-add {
padding: 1rem; padding: 1rem;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
} }
.disabled { .disabled {
background-color: var(--blue-disabled); background-color: var(--blue-disabled);
border-color: var(--blue-disabled); border-color: var(--blue-disabled);
} }
button:active { button:active {
background-color: var(--yellow); background-color: var(--yellow);
border-color: var(--yellow); border-color: var(--yellow);
color: black; color: black;
} }
button:active.disabled { button:active.disabled {
background-color: var(--blue-disabled); background-color: var(--blue-disabled);
border-color: var(--blue-disabled); border-color: var(--blue-disabled);
color: white; color: white;
} }
.todo-filter { .todo-filter {
margin-top: 1rem; margin-top: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 1rem; padding-left: 1rem;
} }
.todo-filter button { .todo-filter button {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
margin-right: 1px; margin-right: 1px;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
} }
.todo-list { .todo-list {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;
padding: 1rem; padding: 1rem;
@ -212,62 +219,59 @@ button:active.disabled {
+ (12*3)px (36px) + (12*3)px (36px)
*/ */
min-height: calc(11.5rem + 48px); min-height: calc(11.5rem + 48px);
}
} .todo {
.todo {
padding: 0.5rem; padding: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background-color: var(--cream); background-color: var(--cream);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.todo-buttons { .todo-buttons {
margin-left: auto; margin-left: auto;
} }
.todo.done { .todo.done {
background-color: var(--cream); background-color: var(--cream);
} }
/* common properties */ /* common properties */
.todo button { .todo button {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
padding: 0rem; padding: 0rem;
border: solid 0.2rem; border: solid 0.2rem;
border-radius: 1rem; border-radius: 1rem;
} }
/* sovle button */
/* sovle button */ .todo button.solve {
.todo button.solve {
background-color: var(--cream); background-color: var(--cream);
border-color: var(--green); border-color: var(--green);
color: transparent; color: transparent;
} }
.todo.done button.solve { .todo.done button.solve {
background-color: var(--cream); background-color: var(--cream);
color: var(--green) color: var(--green);
} }
/* clear button */ /* clear button */
.todo button.clear { .todo button.clear {
background-color: var(--red); background-color: var(--red);
border-color: var(--red); border-color: var(--red);
color: var(--cream); color: var(--cream);
} }
/* active buttons */ /* active buttons */
.todo button:active { .todo button:active {
background-color: var(--yellow); background-color: var(--yellow);
border-color: var(--yellow) border-color: var(--yellow);
} }
.todo.done button:active { .todo.done button:active {
background-color: var(--yellow); background-color: var(--yellow);
border-color: var(--yellow) border-color: var(--yellow);
} }
</style> </style>

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

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

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

@ -3,8 +3,8 @@
</script> </script>
<nav> <nav>
<a class = "nav-button" href="{base}/">home</a> <a class="nav-button" href="{base}/">home</a>
<a class = "nav-button" href="{base}/about">about</a> <a class="nav-button" href="{base}/about">about</a>
</nav> </nav>
<style> <style>
@ -17,5 +17,4 @@
padding: 8px; padding: 8px;
border-bottom: solid 1px black; border-bottom: solid 1px black;
} }
</style> </style>

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

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

23
src/routes/__layout.svelte
View File

@ -1,31 +1,30 @@
<script> <script>
import Nav from "$lib/components/nav.svelte" import Nav from '$lib/components/nav.svelte';
import Footer from "$lib/components/footer.svelte" import Footer from '$lib/components/footer.svelte';
</script> </script>
<div class="site"> <div class="site">
<Nav/> <Nav />
<slot></slot> <slot />
<Footer/> <Footer />
</div> </div>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
:global(*) { :global(*) {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
text-decoration: none; text-decoration: none;
list-style-type: none; list-style-type: none;
color : black; color: black;
--gray: rgb(160, 160, 160); --gray: rgb(160, 160, 160);
--lightgray: rgb(240, 240, 240); --lightgray: rgb(240, 240, 240);
} }
.site { .site {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
</style> </style>

2
src/routes/about.svelte
View File

@ -1,4 +1,4 @@
<div class = "panel"> <div class="panel">
<h1>About this</h1> <h1>About this</h1>
<p>This is a test website using sveltekit</p> <p>This is a test website using sveltekit</p>
</div> </div>

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

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

6
src/routes/index.svelte
View File

@ -1,12 +1,10 @@
<div class="panel">
<div class = "panel">
<h1>APPS</h1> <h1>APPS</h1>
<ul> <ul>
<li><a href="/apps/todo">todo</a></li> <li><a href="/apps/todo">todo</a></li>
</ul> </ul>
</div> </div>
<style> <style>
.panel { .panel {
margin: 1em; margin: 1em;
@ -17,6 +15,6 @@
margin: 2em; margin: 2em;
} }
li { li {
list-style-type:circle; list-style-type: circle;
} }
</style> </style>