timer.html

4 months ago · 2409c18e5e
2 changed files with 57 additions and 1 deletions
--- 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"
--- a/timer.html
+++ 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>