1.

<button on:click={handleClick}>Update the belt colour</button>

const handleClick = () =>{

beltColour = 'orange';
}

2. npm install -g degit

mkdir propel
cd propel
code.
npm install
npm run dev

3. <input type="text" on:input={handleInput}>

4. <input type="text" bind:value={beltColour}>

5. reactive values -
$: fullName = `${firstName} ${lastName}`;

6. reactive statement - both reactive values and reactive statements change when
there is an event or value change.

$: console.log(beltColour);

$:{
console.log(beltColour);
console.log(fullName);
}

7. loop

{#each people as person}

<h4>{person.name}</h4>
<p>{person.age} years old and is a {person.beltColour} belt</p>
{/each}

{#each people as person (person.id)} //here person.id acts as a unique key

<h4>{person.name}</h4>
<p>{person.age} years old and is a {person.beltColour} belt</p>

{/each}

using else:

{#each people as person}

<div>
<h4>{person.name}</h4>
<p>{person.age} years old and is a {person.beltColour} belt</p>
</div>
{:else}
<p>There are no people to show</p>
{/each}

8.
 {#if num > 20}
<p>Greater than 20</p>
{#else if num >100}
<p>Greater than 100</p>
{#else}
<p>Greater than 1000</p>
{/if}

9. css conditional

let isPromo = true;

<div class = 'backdrop' class:promo={isPromo}>

if isPromo is true then div will have backdrop and promo classes both.
i.e. class = backdrop promo

10.