zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish comment submitting scripts

Browse Source 
submits comment to supabase from form element
This commit is contained in:
emma 2025-02-22 23:00:02 -05:00
parent e067b9cd74
commit 2cfd3b2775
2 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/site/guestbook.astro
View File

@ -54,20 +54,22 @@ const pageTitle = "emma's guestbook"
<body>
<BasicLayout>
<h1>{pageTitle}</h1>
<form>
<label for="name-input">name: <input type="text" id="name-input" required></label>
<label for="website-input">website (optional): <input type="text" id="website-input"></label>
<label for="math-question">what is seven plus 10: <input type="number" id="math-question" required></label>
<form id="add-comment">
<label for="name-input">name: <input type="text" id="name-input" name="name-input" required></label>
<label for="website-input">website (optional): <input type="text" name="website-input" id="website-input"></label>
<label for="math-question">what is seven plus 10: <input type="number" name="math-question" id="math-question" required></label>
<label for="message-input">message: </label>
<textarea required id="message-input" rows="8" cols=55"></textarea>
<button class="submit">send message</button>
<textarea required name="message-input" id="message-input" rows="8" cols=55"></textarea>
<button type="submit">send message</button>
</form>
<h3>comments</h3>
<ul class="comments">
</ul>
<script>
import "../../scripts/guestbook-send-comment"
</script>
<script>
import "../../scripts/guestbook-list-comments"
</script>

31
src/scripts/guestbook-send-comment.js
View File

@ -1,14 +1,33 @@
import { createClient } from "@supabase/supabase-js";
// this string provides public access to the db, it is not a secret key
// Create a single supabase client for interacting with your database
const supabase = createClient(
"https://kddqzqkvjumaslnljhqv.supabase.co",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtkZHF6cWt2anVtYXNsbmxqaHF2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDAyMDM5NTEsImV4cCI6MjA1NTc3OTk1MX0.wXhRoE7Jh2aaCdPlBiqEI7F4yj8-7beoeWEPvtVn0kg"
);
const { error } = await supabase.from("guestbook-comments").insert({
name: "emma",
website: "https://emmas.place",
comment: "lmao",
"bot-check": 17,
const commentForm = document.querySelector("#add-comment");
const name = commentForm.elements["name-input"];
const website = commentForm.elements["website-input"];
const question = commentForm.elements["math-question"];
const comment = commentForm.elements["message-input"];
const submit = async () => {
const nameValue = name.value;
const websiteValue = website.value;
const questionValue = parseInt(question.value);
const commentValue = comment.value;
const { error } = await supabase.from("guestbook-comments").insert({
name: nameValue,
website: websiteValue,
"bot-check": questionValue,
comment: commentValue,
});
};
commentForm.addEventListener("submit", (event) => {
event.preventDefault();
submit();
});