Learn How to Develop a To Do App Using Golang, HTML, JavaScript and CSS

Let us do something fun in this tutorial. In this blog, we are going to use Golang for Android app development.And we are also going to employ basic HTML, CSS and JavaScript for the styling and the frontend.

So, let us get into it without further ado.

Initial Task

First, a new directory has to be created. I’ll use Command Prompt as I’m using Windows. You must use Terminal if you’re using Linux or macOS, though. All of my projects are saved in go-workspace, so I’ll type:

cd go-workspace

mkdir list

cd list

code .

With the last code, the VS Code opens up (my choice of text editor). You can also use Goland, Vim, etc. as per your wish.

Start with Coding in VS Code

Now, we will type the following code in VS Code, in the Go source file named main.go under the directory ‘list’.

package main

import (

            “html/template”

            “log”

            “net/http”

)

var tmpl *template.Template

type List struct {

            Article string

            End bool

}

type Material struct {

            Title string

            Todos []List

}

• Ok, let us comprehend the code. We’ll use templates in a variety of functions throughout the code as well as in other places. The reason for this is that we will need to access the template.
• We’ll need to make a global variable called var tmpl *template.Template in order to allow this. We are creating a reference and a template object when calling this tmpl. As you can understand, the importing of the net/http package is a must.
• Next, we have two structs. These are the List and Material. We have two data fields in the List struct. These are End of type boolean and Article of type string. In the Material struct, the array of items Todos []List, and Title data field of type string.

func list(w http.ResponseWriter, r *http.Request) {

            data := Material {

                        Title: “ToDo List”,

                        Todos: []List{

                                    {Article: “Take notes”, End: true},

                                    {Article: “Revise notes”, End: false},

                                    {Article: “Take test”, End: false},

                        },

            }

            tmpl.Execute(w, data)

}

• Next, as you can see, we developed a list function. The arguments w http.ResponseWriter and r *http.Request has also been given. It is clear that a response writer and pointer to the request object are being used. A key component in creating an HTTP response is the ResponseWriter interface. The HTTP methods, such as GET, POST, etc., are mentioned in the Request method.
• The values of Material are then sent into an object data that is created after that. This is an inline instantiation of the Material that we are performing. For this reason, the title “ToDo List” is necessary.
• The next step is to create an array of the Todos. Here, each array will make a reference to a fundamental struct. With tmpl.Execute (w, data), which essentially takes the template objects, we wrap up the function. Just the ResponseWriter and the data are being sent.

Next, we move on.

func main() {

            mux := http.NewServeMux()

            tmpl = template.Must(template.ParseFiles(“templates/signature.gohtml”))

            fs := http.FileServer(http.Dir(“./static”))

            mux.Handle(“/static/”, http.StripPrefix(“/static/”, fs))

            mux.HandleFunc(“/list”, list)

            log.Fatal(http.ListenAndServe(“:8080”, mux))

}

• Let us understand this chunk of code. We are starting off with a straightforward setup. A mux server is being built here: mux:= http.NewServeMux. The NewServeMux carries out the task of allocating and returning a nascent ServeMux.
• An HTTP request multiplexer is the ServeMux. After comparing the URL of each incoming request to a register of patterns, it runs the handler.
• As we have established a function with the name list, we are building an endpoint for the URL that will be “/list” and have the method list.
• The statement tmpl = template.Must(template.ParseFiles(“templates/signature.gohtml”)), instantiates tmpl. Wrapping around the templates requires the template.Must. The software will crash if it is missing since it did not obtain the necessary templates. The string of templates is represented by the following code, template.ParseFiles.
• In order to run the server, we type log.Fatal(http.ListenAndServe(“:8080”, mux)).
•             fs := http.FileServer(http.Dir(“./static”))

            mux.Handle(“/static/”, http.StripPrefix(“/static/”, fs))

In these two statements, we are creating a file server with fs. Next, we use the http directory “./static/”. After handling the “static,” we must then Strip the Prefix of the “/static/.”

Are you still with us in this Golang android app development? Great, let’s move on.

Moving on to Signature.gohtml File

Next, we create a ‘templates’ folder inside the ‘list’ directory. FInally, we create a source file named signature.gohtml inside ‘templates’ folder and we type:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <link rel=”stylesheet” href=”/static/css/outline.css”>

    <title>TODO</title>

</head>

<body>

    <h1>{{ .Title }}</h1>

    <ul>

        {{ range .Todos }}

            {{ if .End }}

                <li class=”end”>{{.Object}}</li>

            {{ else }}

                <li>{{.Article}}</li>

            {{ end }}

        {{ end }}

    </ul>

    <script src=”/static/js/text.js” type=”text/javascript”></script>

</body>

</html>

The code is self-explanatory. So, no discussion is necessary here.

Move on to the Static Folder

Next, we go to the static folder (which is present inside the directory ‘list’). This folder consists of css and js folders. The css folder in turn consists of outline.css file and the js folder consists of the text.js file.

Coding in the outline.css File

We type:

body {

    background-color: orange;

    color: steelblue;

    width: 50%;

    margin: 0 auto;

}

ul li {

    cursor: pointer;

}

.end {

    text-decoration: line-through;

}

Coding in the text.js File

We type:

let articles = document.getElementsByTagName(“li”)

for (let i=0; i<articles.length; i++) {

 articles[i].addEventListener(“click”, () => {

        articles[i].classList.toggle(“finish”)

    })

}

Finally, Run the Program

In this section, we will run the code. For this, we type: go run main.go. As we do so, we get no errors. Then we run the application on the portal 8080.

Thus, the program is successful. And with this tutorial, you are aware of both the frontend and backend development.