About

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

Link to repo:

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

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:

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





    Enter fullscreen mode
    


    Exit fullscreen mode
    




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  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;
}




    Enter fullscreen mode
    


    Exit fullscreen mode
    




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;
}




    Enter fullscreen mode
    


    Exit fullscreen mode
    




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 (). 11.Now, all is set!
Just run: go run .
and open the browser with the given url.
12.Done!