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

Prettyfied

main
Giulio Alessandrini 4 months ago
parent
ef42761ce4
commit
171559802f
9 changed files with 336 additions and 330 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      .vscode/settings.json
  2. 474
      src/lib/apps/todoApp.svelte
  3. 21
      src/lib/components/footer.svelte
  4. 27
      src/lib/components/nav.svelte
  5. 44
      src/lib/stores/todos.js
  6. 41
      src/routes/__layout.svelte
  7. 16
      src/routes/about.svelte
  8. 4
      src/routes/apps/todo.svelte
  9. 34
      src/routes/index.svelte

5
.vscode/settings.json
View File

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

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

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

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

@ -1,14 +1,15 @@
<footer>
<p>
made with ❤️
and
<a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
</p>
<p>
made with ❤️ and
<a href="https://svelte.dev/">
<img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a
>
</p>
</footer>
<style>
footer {
margin: 1em;
padding: 1em;
}
</style>
footer {
margin: 1em;
padding: 1em;
}
</style>

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

@ -1,21 +1,20 @@
<script>
import { base } from '$app/paths';
import { base } from '$app/paths';
</script>
<nav>
<a class = "nav-button" href="{base}/">home</a>
<a class = "nav-button" href="{base}/about">about</a>
<a class="nav-button" href="{base}/">home</a>
<a class="nav-button" href="{base}/about">about</a>
</nav>
<style>
nav {
margin: 1em;
padding: 1em;
display: flex;
}
.nav-button {
padding: 8px;
border-bottom: solid 1px black;
}
</style>
nav {
margin: 1em;
padding: 1em;
display: flex;
}
.nav-button {
padding: 8px;
border-bottom: solid 1px black;
}
</style>

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

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

41
src/routes/__layout.svelte
View File

@ -1,31 +1,30 @@
<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>
<Footer/>
<Nav />
<slot />
<Footer />
</div>
<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(*) {
padding: 0px;
margin: 0px;
text-decoration: none;
list-style-type: none;
color : black;
:global(*) {
padding: 0px;
margin: 0px;
text-decoration: none;
list-style-type: none;
color: black;
--gray: rgb(160, 160, 160);
--lightgray: rgb(240, 240, 240);
}
--gray: rgb(160, 160, 160);
--lightgray: rgb(240, 240, 240);
}
.site {
display: flex;
flex-direction: column;
}
</style>
.site {
display: flex;
flex-direction: column;
}
</style>

16
src/routes/about.svelte
View File

@ -1,11 +1,11 @@
<div class = "panel">
<h1>About this</h1>
<p>This is a test website using sveltekit</p>
<div class="panel">
<h1>About this</h1>
<p>This is a test website using sveltekit</p>
</div>
<style>
.panel {
margin: 1em;
padding: 1em;
}
</style>
.panel {
margin: 1em;
padding: 1em;
}
</style>

4
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/>
<ToDo />

34
src/routes/index.svelte
View File

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

Write Preview
Loading…
Cancel
Save