From 70e62ab4dd6cc0b8ddd33244510140e884ffa54c Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Thu, 3 Feb 2022 01:18:15 -0300
Subject: [PATCH] timer.html

---
 build.sh   |  2 +-
 timer.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 timer.html
diff --git a/build.sh b/build.sh
index ad5de78..54f06fa 100755
--- a/build.sh
+++ b/build.sh
@@ -29,7 +29,7 @@ markdown () {
 outdir=build
 mkdir -p $outdir
 # Autocopiarnos :)
-cp ./*.sh ./*.md ./*.css ./*.png ./*.mp4 ./*.svg "$outdir"
+cp ./*.sh ./*.md ./*.css ./*.png ./*.mp4 ./*.svg ./*.html "$outdir"
 
 index="$outdir/index.html"
 inicio=true header=false template "nulo.in" > "$index"
diff --git a/timer.html b/timer.html
new file mode 100644
index 0000000..3eb078f
--- /dev/null
+++ b/timer.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta name=viewport content='width=device-width, initial-scale=1.0'>
+<link rel=stylesheet href=https://nulo.in/drip.css>
+<title>Timer de guita</title>
+<style>
+body {
+	display: flex;
+	min-height: 100vh;
+	justify-content: center;
+	align-items: center;
+	padding: 0;
+}
+main {
+	text-align: center;
+	padding: 0 1em;
+}
+input {
+	width: 5em;
+}
+</style>
+
+<main>
+	<h1>Guita: <span id="guita" data-guita="0">$ 0.00</span></h1>
+	<div>
+		<label for="por-hora">Guita por hora por persona:</label>
+		<input value="0" type="number" id="por-hora" />
+	</div>
+	<div>
+		<label for="personas">Cantidad de personas:</label>
+		<input value="1" type="number" id="personas" />
+	</div>
+	<button>Empezar</button>
+</main>
+
+<script>
+const guitaEl = document.querySelector('#guita')
+const porHoraEl = document.querySelector('#por-hora')
+const personasEl = document.querySelector('#personas')
+const buttonEl = document.querySelector('button')
+
+let interval = null
+
+buttonEl.addEventListener('click', event => {
+	if (interval) {
+		clearInterval(interval)
+		buttonEl.textContent = 'Empezar'
+	} else {
+		interval = setInterval(() => {
+			guitaEl.dataset.guita = parseFloat(guitaEl.dataset.guita) + (porHoraEl.value / 60 / 60) * personasEl.value
+			guitaEl.textContent = `$ ${parseFloat(guitaEl.dataset.guita).toFixed(2)}`
+		}, 1000)
+		buttonEl.textContent = 'Parar'
+	}
+})
+</script>
