i want to display data from Supabase to my Website i want it that everytime you click the upload button it selects a random row from my Database and displays the infomation on the Website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Page</title>
</head>
<script>
import { createClient } from "../utils/supabaseClient";
// Create a single supabase client for interacting with your database
const supabase = createClient('Your Supabase Website', 'Your Supabase Key')
const { data, error } = await supabase
.from('events')
.select()
</script>
<style>
.background{
background-color: #1b1b1b;
}
.id-text{
color: #3e3e3e;
font-family: 'Outfit', sans-serif;
margin-top: 30px;
margin-left: 30px;
}
.foto{
margin-left: 30px;
}
.label{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: white;
font-size: 40px;
font-weight: bolder;
vertical-align: top;
}
.beschreibung{
color: white;
font-family: 'Outfit', sans-serif;
word-wrap: break-word;
width: 400px;
}
.div-margin-top{
margin-top: 30px;
}
.div-margin-left{
margin-left: 30px;
}
.div-margin-bottom{
margin-bottom: 30px;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.float-center{
float: inline-start;
}
.myButton-green {
background-color:#44c767;
border-radius:23px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:20px;
padding:16px 31px;
text-decoration:none;
}
.myButton-green:hover {
background-color:#5cbf2a;
}
.myButton-green:active {
position:relative;
top:1px;
}
.myButton-red {
background-color:#ff0000;
border-radius:28px;
border:1px solid #ab1919;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
}
.myButton-red:hover {
background-color:#c90000;
}
.myButton-red:active {
position:relative;
top:1px;
}
</style>
<body class="background">
<div class="id-text">
<a>id:0</a>
</div>
<div class="div-margin-top float-right">
<img class="foto" src="image url here">
</div>
<div class="div-margin-left">
<label class="label">Trödelmarkt Äppelallee</label>
</div>
<div class="beschreibung div-margin-left">
<a>Das ist eine Beschreibung zum Trödelmarkt TestTestTestTest TestTestTestTestTestTestTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Day: 21.08.2024 - 21.08.2024</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event Time: 08:00 Uhr - 16:00 Uhr</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Location: Äppelallee Center</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event City: Wiesbaden</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Kategorie: Verkauf</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event Priority: Hoch</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Veranstalter: Wiesbaden Bürgerbüro</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event Url: https://www.wiesbaden.de/</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Weitere Infos: Joa, sonst nichts</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Status: in Progress</a>
</div>
<div class="div-margin-top float-left">
<button onclick="fetchData()" class="myButton-green">Upload</button>
</div>
<div class="div-margin-top float-right">
<button class="myButton-red">Delete</button>
</div>
</body>
</html>
I already read through the Docs from Supabase but doesn’t really help me and excuse my english, english isn’t my Home Language. And btw the Text in the Divs are just Temporary there it should be the things from the database.
Thx