This is the Svelte code I wrote to create a counter.
Link to code
<script>
let number = $state(0);
let currentValue = $derived(number);
const addByOne = () => (number += 1);
const decreaseByOne = () => (number > 0 ? (number -= 1) : 0);
const reset = () => (number = 0);
const multiplyByTwo = () => (number *= 2);
</script>
<div class="container">
<h1>Counter: {number}</h1>
<button class="addBtn" By One</button>
<button class="decreaseBtn" By One</button>
<button
<button By Two</button>
<p>Current Value is: {currentValue}</p>
</div>
<style>
:root {
--backgound_color: #1e293b;
--font_family: fantasy;
--btn_color: #18181b;
--btn_add_color: #047857;
--btn_decrease_color: #dc2626;
}
.container {
background-color: var(--backgound_color);
font-family: var(--font_family);
text-align: center;
max-width: 100%;
height: 100vh;
padding: 3rem;
}
h1 {
font-size: 3rem;
}
button {
background-color: var(--btn_color);
border: none;
border-radius: 5px;
font-family: var(--font_family);
font-size: 18px;
padding: 10px;
}
.addBtn {
background-color: var(--btn_add_color);
}
.decreaseBtn {
background-color: var(--btn_decrease_color);
}
p {
font-size: 2rem;
}
</style>
Top comments (1)
ᛞᛁᛞ ᛁᛏ ᚹᛟᚱᚲ? ᛞᛟ ᚢᛖ ᚢᚾᛞᛖᚱᛋᛏᚨᚾᛞ ᚱᚢᚾᛖᛋ ᚾᚨᚹ?