DEV Community: Elid

Svelte Counter I made to understand runes

Elid — Mon, 18 Nov 2024 22:06:51 +0000

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>

The JS map() method

Elid — Mon, 13 May 2024 19:07:39 +0000

The map() method in JavaScript returns to you a new array by calling a function for every element it does not mutate. The original array just creates a copy this is used a lot in React so is something good to know along with other JS methods.

const numbersList = [1, 2, 4, 5];

// example
const mapArr = numbersList.map((n) => n + 1);
console.log(mapArr)

// Output [2, 3, 5, 6];
// I will also console the original array to see no changes made
console.log(numbersList);

Functions for beginners

Elid — Mon, 07 Nov 2022 20:22:06 +0000

JS functions are a block of code that can be reused anywhere in your code, one of the building blocks of JS the example will be a function declaration.

Example:
// Declaring a function
function twoNumbers(num1 , num2) {
return num1 * num2
}

// Calling the function
twoNumbers(10, 2);

//This code would output 20;

So you see from the example you put in the parameters whatever two numbers you like to put (num1, num2).Then when you are ready to call the function in the argument twoNumbers(10, 2) or whatever two numbers you like output it to the console in your browser.

console.log(twoNumbers(10, 2));

This will output in the console I use chrome so I click ctrl + shift + i

You can do the same in ES6 Arrow Functions which will be much more less code and no return statement needed if is one line.

// Arrow function
const twoNumbers = (num1 , num2) => num1 * num2;
console.log(twoNumbers(10, 2)); //20