Update App.svelte

[monalibabde]

<script> import{onMount} from 'svelte'; let pages=[]; let currentPageIndex = 0; let title = 'New Note'; let note = 'Today is an excellent day !!'; onMount( () => { const savedPages=localStorage.getItem("pages"); if(savedPages){ pages=JSON.parse(savedPages); title=pages[currentPageIndex] || "New Page"; note=localStorage.getItem(title); } else{ addPage(); } }); function saveNote(){ const storedPageName = pages[currentPageIndex]; if(storedPageName != title){ localStorage.removeItem(storedPageName); pages[currentPageIndex]=title; } localStorage.setItem(title ,note); localStorage.setItem("pages",JSON.stringify(pages)); } function addPage(){ pages.push("New Page"); selectPage(pages.length ? pages.length -1 : 0); } function selectPage(index){ currentPageIndex=index; title=pages[currentPageIndex]; note=localStorage.getItem(title); } </script>

{#each pages as page , index}

•      <button on:click={() =>selectPage(index)} class="{index==currentPageIndex ? 'bg-dark-gray' : ''} py-2 px-3 text-gray-900 rounded-lg">{page}</button>
       
     </li>
     {/each}
  
     <li class="text-center">
       <button on:click={addPage} class="font-medium">
          + Add page
       </button>
     </li>
      
   </ul>
  

Save

---

<textarea class=" mt-3 block w-full bg-gray-50 border border-gray-300 rounded-lg text-gray-900 p-2.5" bind:value={note}></textarea> <style> .bg-light-gray{ background:#FBFBFB; } .bg-dark-gray{ background: #EFEFEF; } </style>