Kotlin Blueprints

Refactoring the HTML code using DSL

The DSL code to make a button with the title "Get Weather" looks as follows:

    button {      +"Get Weather"      type = ButtonType.button      onClickFunction = {        // Your code to handle button click goes here.      }    }

Simple and clean code.

Similarly, let's create a function that will display an entire div, which has a label, text input, and button:

    fun getInputDiv(): HTMLDivElement {      val inputDiv = document.create.div {        label {          +"Enter zip code : "          input {            id = "zipCode"            type = InputType.number            value = 411021.toString()          }      }        button {          +"Get Weather"          type = ButtonType.button          onClickFunction = {            // Your code to handle button click goes here          }        }      }      return inputDiv    }

Observe how we have provided ID, input types, and a default ...