<script>
  // @ts-nocheck

  let people = 1;

  function getPecentage(divisor) {
    return (100 / divisor).toFixed(0);
  }

  let cakeDivided = getPecentage(people);

  function update() {
    cakeDivided = getPecentage(people);
  }
</script>

<main>
  <h3>In how many parts shall we divide the cake?</h3>

  <input type="number" bind:value={people} placeholder="Enter a number" />
  <button on:click={update}>Update</button>
  <p>
    Each person eats <span class="highlight">{cakeDivided}%</span> of the cake
  </p>
</main>

<style>
  input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    width: 60%;
    max-width: 200px;
    margin-top: 1rem;
  }

  .highlight {
    color: #ff6347;
  }
</style>
