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> <body>
<BasicLayout> <BasicLayout>
<h1>{pageTitle}</h1> <h1>{pageTitle}</h1>
<form> <form id="add-comment">
<label for="name-input">name: <input type="text" id="name-input" required></label> <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" id="website-input"></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" id="math-question" required></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> <label for="message-input">message: </label>
<textarea required id="message-input" rows="8" cols=55"></textarea> <textarea required name="message-input" id="message-input" rows="8" cols=55"></textarea>
<button class="submit">send message</button> <button type="submit">send message</button>
</form> </form>
<h3>comments</h3> <h3>comments</h3>
<ul class="comments"> <ul class="comments">
</ul> </ul>
<script>
import "../../scripts/guestbook-send-comment"
</script>
<script> <script>
import "../../scripts/guestbook-list-comments" import "../../scripts/guestbook-list-comments"
</script> </script>

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

@ -1,14 +1,33 @@
import { createClient } from "@supabase/supabase-js"; 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( const supabase = createClient(
"https://kddqzqkvjumaslnljhqv.supabase.co", "https://kddqzqkvjumaslnljhqv.supabase.co",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtkZHF6cWt2anVtYXNsbmxqaHF2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDAyMDM5NTEsImV4cCI6MjA1NTc3OTk1MX0.wXhRoE7Jh2aaCdPlBiqEI7F4yj8-7beoeWEPvtVn0kg" "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtkZHF6cWt2anVtYXNsbmxqaHF2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDAyMDM5NTEsImV4cCI6MjA1NTc3OTk1MX0.wXhRoE7Jh2aaCdPlBiqEI7F4yj8-7beoeWEPvtVn0kg"
); );
const { error } = await supabase.from("guestbook-comments").insert({ const commentForm = document.querySelector("#add-comment");
name: "emma",
website: "https://emmas.place", const name = commentForm.elements["name-input"];
comment: "lmao", const website = commentForm.elements["website-input"];
"bot-check": 17, 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();
}); });