Learn KOTLIN-JS-WASM with Real Code Examples

# kotlin/demo/Main.kt
import kotlin.js.*

fun main() {
    console.log("Hello, Kotlin WASM!")
}

A basic Kotlin/JS program compiled to WebAssembly that prints 'Hello, Kotlin WASM!' to the browser console.

# kotlin/demo/Button.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLParagraphElement

fun main() {
    val button = document.createElement("button") as HTMLButtonElement
    button.textContent = "Click Me"
    document.body?.appendChild(button)

    val p = document.createElement("p") as HTMLParagraphElement
    document.body?.appendChild(p)

    button.onclick = {
        p.textContent = "Button clicked!"
        Unit
    }
}

Adds a button to the page that updates text when clicked.

# kotlin/demo/Input.kt
import kotlin.browser.document
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.HTMLParagraphElement

fun main() {
    val input = document.createElement("input") as HTMLInputElement
    document.body?.appendChild(input)

    val p = document.createElement("p") as HTMLParagraphElement
    document.body?.appendChild(p)

    input.oninput = {
        p.textContent = input.value
        Unit
    }
}

Reads value from an input field and displays it in a paragraph.

# kotlin/demo/Conditional.kt
import kotlin.browser.document
import org.w3c.dom.HTMLParagraphElement

fun main() {
    val show = true
    val p = document.createElement("p") as HTMLParagraphElement
    document.body?.appendChild(p)

    if (show) {
        p.textContent = "Condition is true"
    } else {
        p.textContent = "Condition is false"
    }
}

Displays different messages based on a boolean variable.

# kotlin/demo/Loop.kt
import kotlin.browser.document
import org.w3c.dom.HTMLParagraphElement

fun main() {
    for (i in 1..5) {
        val p = document.createElement("p") as HTMLParagraphElement
        p.textContent = "Item $i"
        document.body?.appendChild(p)
    }
}

Creates a list of items using a loop.

# kotlin/demo/Timer.kt
import kotlin.browser.document
import kotlin.js.Date
import kotlin.js.setInterval
import org.w3c.dom.HTMLParagraphElement

fun main() {
    val p = document.createElement("p") as HTMLParagraphElement
    document.body?.appendChild(p)

    setInterval({
        p.textContent = Date().toLocaleTimeString()
    }, 1000)
}

Updates the current time every second in the browser.

# kotlin/demo/Event.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement

fun main() {
    val button = document.createElement("button") as HTMLButtonElement
    button.textContent = "Click Event"
    document.body?.appendChild(button)

    button.onclick = {
        console.log("Button clicked!")
        Unit
    }
}

Logs a message to console when a button is clicked.

# kotlin/demo/Fetch.kt
import kotlin.browser.document
import kotlinx.browser.window
import org.w3c.dom.HTMLParagraphElement

fun main() {
    val p = document.createElement("p") as HTMLParagraphElement
    document.body?.appendChild(p)

    window.fetch("https://api.github.com").then { response ->
        response.text().then { text ->
        p.textContent = text
        }
    }
}

Fetches data from an API and displays it in a paragraph.

# kotlin/demo/Toggle.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLParagraphElement

fun main() {
    val p = document.createElement("p") as HTMLParagraphElement
    p.textContent = "Visible Text"
    document.body?.appendChild(p)

    val button = document.createElement("button") as HTMLButtonElement
    button.textContent = "Toggle"
    document.body?.appendChild(button)

    var visible = true
    button.onclick = {
        visible = !visible
        p.style.display = if (visible) "block" else "none"
        Unit
    }
}

Toggles the visibility of a paragraph when a button is clicked.

# kotlin/demo/DynamicList.kt
import kotlin.browser.document
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLUListElement

fun main() {
    val ul = document.createElement("ul") as HTMLUListElement
    document.body?.appendChild(ul)

    val button = document.createElement("button") as HTMLButtonElement
    button.textContent = "Add Item"
    document.body?.appendChild(button)

    var count = 1
    button.onclick = {
        val li = document.createElement("li")
        li.textContent = "Item $count"
        ul.appendChild(li)
        count++
        Unit
    }
}

Adds items dynamically to a list when a button is clicked.