6 changed files with 39 additions and 1467 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,11 @@
  </head>
  <body>
    <h1>GDG Counter Website</h1>
-    <div id="app"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <div class="app">
+      <div id="counter-value">???</div>
+      <button id="btn-decrement">Decrementa</button>  
+      <button id="btn-increment">Incrementa</button>
+    </div>
+    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,10 +6,6 @@
        "build": "vite build"
    },
    "devDependencies": {
-        "@preact/preset-vite": "^2.5.0",
        "vite": "^3.2.3"
-    },
-    "dependencies": {
-        "preact": "^10.13.0"
    }
 }
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +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}`
+}
+
+incrementButton.addEventListener('click', async () => {
+    const res = await fetch('/api/increment', { method: 'POST' })
+    const data = await res.json()
+    updateCounter(data)
+})
+
+decrementButton.addEventListener('click', async () => {
+    const res = await fetch('/api/decrement', { method: 'POST' })
+    const data = await res.json()
+    updateCounter(data)
+})
+
+async function main() {
+    const res = await fetch('/api/value')
+    const data = await res.json()
+    updateCounter(data)
+}
+
+main()
--- a/src/main.jsx
+++ b/src/main.jsx
@ -1,38 +0,0 @@
-import { render } from 'preact'
-import { useState, useEffect } from 'preact/hooks'
-
-const App = ({}) => {
-    const [counter, setCounter] = useState(0)
-
-    useEffect(() => {
-        fetch('/api/value')
-            .then(res => res.json())
-            .then(count => setCounter(count))
-    }, [])
-
-    return (
-        <>
-            <div>{counter}</div>
-            <button
-                onClick={() => {
-                    fetch('/api/decrement', { method: 'POST' })
-                        .then(res => res.json())
-                        .then(count => setCounter(count))
-                }}
-            >
-                Decrementa
-            </button>
-            <button
-                onClick={() => {
-                    fetch('/api/increment', { method: 'POST' })
-                        .then(res => res.json())
-                        .then(count => setCounter(count))
-                }}
-            >
-                Incrementa
-            </button>
-        </>
-    )
-}
-
-render(<App />, document.querySelector('#app'))
--- a/vite.config.js
+++ b/vite.config.js
@ -1,4 +1,3 @@
-import preactPlugin from '@preact/preset-vite'
 import { defineConfig } from 'vite'

 export default defineConfig({
@ -8,5 +7,4 @@ export default defineConfig({
            '/api': 'http://localhost:4000/',
        },
    },
-    plugins: [preactPlugin()],
 })