88 lines
2.0 KiB
Svelte
88 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props<{ html: string }>();
|
|
let people = $state(data.people);
|
|
let tents = $state(data.tents);
|
|
let cars = $state(data.cars);
|
|
|
|
function add(type) {
|
|
if (type == "people") people += 1;
|
|
if (type == "tents") tents += 1;
|
|
if (type == "cars") cars += 1;
|
|
}
|
|
function subtract(type) {
|
|
if (type == "people") people -= 1;
|
|
if (type == "tents") tents -= 1;
|
|
if (type == "cars") cars -= 1;
|
|
}
|
|
</script>
|
|
|
|
<section>
|
|
<h1>How many people are at Sludge Fest {data.year}?</h1>
|
|
<div>
|
|
<div>
|
|
<h3>~{people} people</h3>
|
|
<button onclick={() => add("people")}>+</button>
|
|
<button onclick={() => subtract("people")}>-</button>
|
|
</div>
|
|
<div>
|
|
<h3>~{tents} tents</h3>
|
|
<button onclick={() => add("tents")}>+</button>
|
|
<button onclick={() => subtract("tents")}>-</button>
|
|
</div>
|
|
<div>
|
|
<h3>~{cars} cars</h3>
|
|
<button onclick={() => add("cars")}>+</button>
|
|
<button onclick={() => subtract("cars")}>-</button>
|
|
</div>
|
|
</div>
|
|
<form method="POST">
|
|
<input hidden name="people" value={people} />
|
|
<input hidden name="cars" value={cars} />
|
|
<input hidden name="tents" value={tents} />
|
|
<button>Save</button>
|
|
</form>
|
|
</section>
|
|
|
|
<style lang="scss">
|
|
@use "/src/app.scss" as *;
|
|
@use "sass:color";
|
|
|
|
section {
|
|
max-width: 60rem;
|
|
margin: 1rem auto 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
div {
|
|
text-align: center;
|
|
width: 100%;
|
|
div {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
h3 {
|
|
font-size: 1.75rem;
|
|
grid-column: 1 / 3;
|
|
}
|
|
button {
|
|
background: $yellow;
|
|
border: solid 3px $yellow;
|
|
border-radius: 0.25rem;
|
|
margin: 0 1rem;
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
}
|
|
form button {
|
|
font-size: 2rem;
|
|
margin: 1rem;
|
|
background: $yellow;
|
|
border: solid 3px $yellow;
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|