Counter web app

About

A simple counter app using html,css,js and go(for backend).

Link to repo:

Overview

We serve the frontend using go's http server package.
It serves the index.html with the assets on "http://localhost:8080".
We open the url in the browser and we get the app.

How app works

1.If we click the '+' button, it increments the counter.
2.If we click the '-' button, it decrements the counter.
3.If we click on the counter number, it resets the counter(🛑 be careful! 🛑).

Project structure

Steps

1.Create project directory: counter-web-app.
2.cd into it.
3.run: go mod init counter
Here,we are initialising go module with name counter.
4.run: touch counter.go
This file is the entry point to the http server that serves our web app.
5.Fill counter.go with the below lines:

package main

import (
    "fmt"
    "net/http"
)

func main() {
    fs := http.FileServer(http.Dir("./public/"))
    http.Handle("/", fs)

    fmt.Println("Server is running on http://localhost:8080")
    http.ListenAndServe(":8080", nil)
}

Explanation:
1) main() function is the entry point.
2) This line:

fs := http.FileServer(http.Dir("./public/"))

Creates a file server that serves the public folder.
3) This line:

http.Handle("/", fs)

Sets the default url to public folder, so that when a user accesses the website,it serves the index.html file in the public folder.
4) Last line:

http.ListenAndServe(":8080", nil)

Serves the app on "http://localhost:8080".

6.Create directory 'public'(for frontend code):
mkdir public

7.Create three files:

touch public/index.html public/index.js public/styles.css

8.Fill the 'index.html' file with:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Counter</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js" defer></script>
  </head>
  <body>
    <div class="counter-container">
      <div class="counter-contents">
        <h1>Counter</h1>
        <button class="counter-btn" onclick="incrementCounter()">+</button>
        <span
          id="counter-value"
          style="text-align: center"
          onclick="resetCounter()"
          >0</span
        >
        <button class="counter-btn" onclick="decrementCounter()">-</button>
      </div>
    </div>
  </body>
</html>

Explanation:
1) In the head:
-> We set the title to 'Counter'.
-> We link the css style sheet 'styles.css'.
-> We link the js script 'index.js'(with the defer attribute).
2) In the body:
-> We need 2 buttons for '+' and '-' and a <span> element for holding the counter value.
-> But to align them correctly we put them inside two div elements for using flex box.
-> And also an h1 heading saying "Counter".

9.Now, css!
Fill the 'styles.css' file with:

* {
  margin: 0;
}

h1 {
  font-size: 40px;
  text-align: center;
  padding-bottom: 20px;
}

.counter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.counter-contents {
  display: flex;
  gap: 5px;
  flex-direction: column;
  padding: 30px;
  background: #e2af39; /* #e2af39 */
}

.counter-btn {
  background: #dd6036;

  font-size: 6rem;
  margin: 0 3rem;
  padding: 1rem, 2rem;
  cursor: pointer;
}

#counter-value {
  font-size: 5rem;
  min-width: 80px;
  cursor: pointer;
}

Explanation:
1) We make the counter-container div flex and move it to center.
2) We make the counter-contents div flex and set the flex direction to 'column', so that it aligns the items vertically.
3) And the rest is normal styling!

10.Finally, js!
Fill the 'index.js' file with:

function incrementCounter() {
  let value = document.getElementById("counter-value").innerText;
  value = parseInt(value) + 1;
  document.getElementById("counter-value").innerText = value;
}

function decrementCounter() {
  let value = document.getElementById("counter-value").innerText;
  if (value > 0) {
    value = parseInt(value) - 1;
    document.getElementById("counter-value").innerText = value;
  }
}

function resetCounter() {
  document.getElementById("counter-value").innerText = 0;
}

Explanation:
We have three functions:
1) incrementCounter() -> that increments the counter when user clicks '+' button.
2) decrementCounter() -> that decrements the counter when user clicks '-' button.
3) resetCounter() -> that resets the counter value to 0,when user clicks the counter number (<span>).

11.Now, all is set!
Just run: go run .
and open the browser with the given url.
12.Done!

csm @csm18