RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added ui to update cards in flashcards tool!

Browse source
This commit is contained in:
RezHackXYZ 2025-06-12 11:32:35 +05:30
parent 8824a81972
commit dc4674f031
No known key found for this signature in database
GPG key ID: C4C90E569C9669E2
1 changed files with 45 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/routes/flashcards/editCards.svelte
View file

@ -1,27 +1,54 @@
<script>
import { SetNewDeck, deck } from "./logic.svelte";
import { SetNewDeck, deck, stats } from "./logic.svelte";
import toast from "svelte-5-french-toast";
let LocalDeck = $state.snapshot(deck);
let deckText = JSON.stringify(LocalDeck, null, 2); // Pretty print for textarea
let LocalDeck = $state($state.snapshot(deck));
function saveDeck() {
try {
const parsedDeck = JSON.parse(deckText);
localStorage.setItem("deck", JSON.stringify(parsedDeck));
SetNewDeck(parsedDeck);
toast.success("Deck saved successfully! You can now close this window.");
} catch (e) {
toast.error("Invalid JSON format!");
}
localStorage.setItem("deck", JSON.stringify(LocalDeck));
SetNewDeck(LocalDeck);
toast.success("Deck saved successfully! You can now close this window.");
}
</script>
<div class="flex flex-col items-center gap-2 rounded border-2 bg-zinc-800 p-3">
<textarea bind:value={deckText} class="input"></textarea>
<button on:click={saveDeck} class="btn">
<i class="nf nf-fa-save"></i>
Save
</button>
<div class="flex flex-col items-center gap-7 rounded border-2 bg-zinc-800 p-3">
<div class="flex w-full flex-col gap-2">
<div class="flex w-full gap-2 text-3xl">
<span class="flex-1">Question</span>
<span class="flex-1">Answer</span>
<button aria-label="delete" class="btn invisible"><i class="nf nf-md-delete"></i></button>
</div>
{#each LocalDeck as card, i}
<div class="flex w-full gap-2">
<input type="text" class="input flex-1" bind:value={card.Q} />
<input type="text" class="input flex-1" bind:value={card.a} />
<button
aria-label="delete"
onclick={() => {
if (confirm("Are you sure you want to delete this card?")) {
LocalDeck.splice(i, 1);
toast.success("Card deleted successfully! To make it apply, please save the deck.");
}
}}
class="btn dull"><i class="nf nf-md-delete"></i></button
>
</div>
{/each}
</div>
<div class="flex gap-3">
<button
onclick={() => {
LocalDeck.push({ Q: "", a: "" });
toast.success("New card added! To make it apply, please save the deck.");
}}
class="btn"
>
<i class="nf nf-md-card_plus"></i>
Add New Card
</button>
<button onclick={saveDeck} class="btn">
<i class="nf nf-fa-save"></i>
Save
</button>
</div>
</div>