a very simple theme

go.mod

@@ -1,9 +1,3 @@
 module gdg-counter-website
 
 go 1.19
-
-require (
-	github.com/r3labs/sse/v2 v2.10.0 // indirect
-	golang.org/x/net v0.0.0-20191116160921-f9c825593386 // indirect
-	gopkg.in/cenkalti/backoff.v1 v1.1.0 // indirect
-)

go.sum

@@ -1,15 +0,0 @@
-github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/r3labs/sse/v2 v2.10.0 h1:hFEkLLFY4LDifoHdiCN/LlGBAdVJYsANaLqNYa1l/v0=
-github.com/r3labs/sse/v2 v2.10.0/go.mod h1:Igau6Whc+F17QUgML1fYe1VPZzTV6EMCnYktEmkNJ7I=
-github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/net v0.0.0-20191116160921-f9c825593386 h1:ktbWvQrW08Txdxno1PiDpSxPXG6ndGsfnJjRRtkM0LQ=
-golang.org/x/net v0.0.0-20191116160921-f9c825593386/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-gopkg.in/cenkalti/backoff.v1 v1.1.0 h1:Arh75ttbsvlpVA7WtVpH4u9h6Zl46xuptxqLxPiSo4Y=
-gopkg.in/cenkalti/backoff.v1 v1.1.0/go.mod h1:J6Vskwqd+OMVJl8C33mmtxTBs2gyzfv7UDAkHu8BrjI=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

index.html

@@ -3,6 +3,7 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GDG Talk Counter</title>
+    <link rel="stylesheet" href="/src/style.css">
   </head>
   <body>
     <h1>GDG Counter Website</h1>

main.go

@@ -4,8 +4,6 @@ import (
 	"encoding/json"
 	"log"
 	"net/http"
-
-	"github.com/r3labs/sse/v2"
 )
 
 func main() {
@@ -22,25 +20,11 @@ func main() {
 	log.Fatal(server.ListenAndServe())
 }
 
-func broadcastCounterUpdate(srv *sse.Server, id string, value int) {
-	bytes, err := json.Marshal(value)
-	if err != nil {
-		log.Fatal(err)
-	}
-
-	srv.Publish(id, &sse.Event{Data: bytes})
-}
-
 func setupRoutes(mux *http.ServeMux) {
-	sseServer := sse.New()
-	sseServer.CreateStream("new-counter-value")
-
 	counter := 0
 
 	// API Routes
 
-	mux.HandleFunc("/api/events", sseServer.ServeHTTP)
-
 	mux.HandleFunc("/api/status", func(w http.ResponseWriter, r *http.Request) {
 		if r.Method != http.MethodGet {
 			http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
@@ -84,8 +68,6 @@ func setupRoutes(mux *http.ServeMux) {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-
-		broadcastCounterUpdate(sseServer, "new-counter-value", counter)
 	})
 
 	mux.HandleFunc("/api/decrement", func(w http.ResponseWriter, r *http.Request) {
@@ -102,8 +84,6 @@ func setupRoutes(mux *http.ServeMux) {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-
-		broadcastCounterUpdate(sseServer, "new-counter-value", counter)
 	})
 
 	// Static Files

src/main.js

@@ -1,26 +1,27 @@
 const counterElement = document.querySelector('#counter-value')
+const incrementButton = document.querySelector('#btn-increment')
+const decrementButton = document.querySelector('#btn-decrement')
 
 function updateCounter(value) {
     counterElement.textContent = `Counter: ${value}`
 }
 
-const counterTickSource = new EventSource('/api/events?stream=new-counter-value')
-counterTickSource.addEventListener('message', e => {
-    const data = JSON.parse(e.data)
+incrementButton.addEventListener('click', async () => {
+    const res = await fetch('/api/increment', { method: 'POST' })
+    const data = await res.json()
     updateCounter(data)
 })
 
-const incrementButton = document.querySelector('#btn-increment')
-const decrementButton = document.querySelector('#btn-decrement')
-
-incrementButton.addEventListener('click', () => {
-    fetch('/api/increment', { method: 'POST' })
+decrementButton.addEventListener('click', async () => {
+    const res = await fetch('/api/decrement', { method: 'POST' })
+    const data = await res.json()
+    updateCounter(data)
 })
 
-decrementButton.addEventListener('click', () => {
-    fetch('/api/decrement', { method: 'POST' })
-})
+async function main() {
+    const res = await fetch('/api/value')
+    const data = await res.json()
+    updateCounter(data)
+}
 
-fetch('/api/value')
-    .then(res => res.json())
-    .then(data => updateCounter(data))
+main()

src/style.css

@@ -0,0 +1,72 @@
+*,
+*::before,
+*::after {
+    font-family: inherit;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: 'Open Sans', sans-serif;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+}
+
+h1 {
+    text-align: center;
+    font-weight: 700;
+}
+
+.app {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+}
+
+#counter-value {
+    grid-column: span 2;
+
+    place-self: center;
+
+    font-weight: 200;
+    font-size: 32px;
+
+    padding: 1rem 0;
+}
+
+button {
+    /* box-shadow: 0 0 4px 0 #00000018, 0 0 32px 0 #00000010; */
+
+    border: 1px solid #d4d4d4;
+    background: linear-gradient(to bottom, #f8f8f8 0%, #f0f0f0 50%, #d8d8d8 100%);
+
+    color: #333;
+
+    font-size: 15px;
+    font-weight: 400;
+
+    border-radius: 0.5rem;
+    height: 2rem;
+    padding: 0 1rem;
+
+    cursor: pointer;
+
+    transition: all 250ms ease-in-out;
+}
+
+button:hover {
+    /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */
+
+    border: 1px solid #d0d0d0;
+    background: linear-gradient(to bottom, #fdfdfd 0%, #ededed 40%, #ededed 60%, #d0d0d0 100%);
+}
+
+button:active {
+    /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */
+
+    border: 1px solid #c8c8c8;
+    background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 50%, #c8c8c8 100%);
+}