Creating UI using Kotlin

The index.html page contains all the HTML code. We need to now move that HTML code to Kotlin. Kotlin has the capability to manipulate the DOM element and it can also deal with the tree elements and their hierarchy.

Simply put two <script> tags and a parent <div> tag in an HTML page and everything will go to a Kotlin page:

    <div id="container">    </div>

Now, in Main.kt we will write the HTML code that we previously wrote inside index.html. Main.kt and it will look as follows:

    fun main(args: Array<String>) {      createUserInput()    }    fun createUserInput() {      val root = document.getElementById("container")      root?.innerHTML = "<label>Enter zip code : <input id=\"zipCode\"        type=\"number\"></label>" +            "<button id=\"submitZipCode ...

Get Kotlin Blueprints now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.