🏡 drafts\hello_name.nim

Imperative to js hello loop

For context see this forum thread comment

The challenge is "Try converting the following imperative script into Javascript:"

echo "welcome to the hello program"
echo "enter a name or the word 'exit':"
var name = readLine(stdin)
while (name != "exit"):
  echo "Hello, " & name
  echo "enter a name or the word 'exit':"
  name = readLine(stdin)
echo "Thanks for playing"

Below my solution using nbKaraxCode.

template mySolution =
  nbKaraxCode:
    const
      helloId = "helloId"
      inputId = "inputId"
    var
      hello = "welcome to the hello program"
      name = ""
      playing = true
    karaxHtml:
      if playing:
        p(id=helloId):
          text hello
        label:
          text "enter a name or the word 'exit':"
        input(id = inputId, `type` = "text"):
          text name
        button:
          text "Enter"
          proc onClick() =
            name = $getVNodeById(inputId).getInputText
            if name == "exit":
              playing = false
            else:
              hello = "Hello, " & name
      else:
        p:
          text "Thanks for playing!"

Did I end up with "a very different looking program that has to handle state"?

import nimib

template nbCodeDontRun*(body: untyped) = # adapted from nim conf slides, should add to nimib
  newNbCodeBlock("nbCode", body): # in slides a new command was used, not necessary
    discard

nbInit
nbText: "## Imperative to js hello loop"
nbText: "> For context see this forum thread [comment](https://forum.nim-lang.org/t/9554#62802)"
nbText: "The challenge is \"Try converting the following imperative script into Javascript:\""
nbCodeDontRun:
  echo "welcome to the hello program"
  echo "enter a name or the word 'exit':"
  var name = readLine(stdin)
  while (name != "exit"):
    echo "Hello, " & name
    echo "enter a name or the word 'exit':"
    name = readLine(stdin)
  echo "Thanks for playing"
nbText: "Below my solution using `nbKaraxCode`."
nbCode:
  template mySolution =
    nbKaraxCode:
      const
        helloId = "helloId"
        inputId = "inputId"
      var
        hello = "welcome to the hello program"
        name = ""
        playing = true
      karaxHtml:
        if playing:
          p(id=helloId):
            text hello
          label:
            text "enter a name or the word 'exit':"
          input(id = inputId, `type` = "text"):
            text name
          button:
            text "Enter"
            proc onClick() =
              name = $getVNodeById(inputId).getInputText
              if name == "exit":
                playing = false
              else:
                hello = "Hello, " & name
        else:
          p:
            text "Thanks for playing!"
nbText: "Did I end up with \"a very different looking program that has to handle state\"?"
nbText: "---"
mySolution
nbSave