Svelte Counter I made to understand runes

#svelte #javascript #webdev #html

The final result.

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" onclick={addByOne}>Add By One</button>
  <button class="decreaseBtn" onclick={decreaseByOne}>Decrease By One</button>
  <button onclick={reset}>Reset</button>
  <button onclick={multiplyByTwo}>Multiply 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>