Previously we used window.alert() for our dialogs. window.alert() is quite minimal and raw, so let’s replace it with SweetAlert.

Change Index.iwml:

ACORN 1.0 IWML 1.0
Guess.Index[]
  SimpleStack[]
    JQUI.AccordionGroup[]
      JQUI.Accordion[] Play
        SimpleStack[]
          Edit:Guess;
          Text:TryCount Guess #
          Gap;
          BS.Button:GuessButton
            Text: Guess
            Face: Info
            ButtonSize: Large
          ]
        ]
      ]
      JQUI.Accordion[] Instructions
        Text Enter a number and click Guess.
      ]
      JQUI.Accordion[] About
        Text Where would we be without the Guess demo?
      ]
    ]
    Alert.Notification:MsgBox
      Title: Guess Demo
      AlertType: success
    ]
  ]
]

Change Index.js:

var Guess;
(function (Guess) {
    class Index extends IntraWeb.Code {

        constructor() {
            super(...arguments);
            this.Guess = null;
            this.TryCount = null;
            this.GuessButton = null;
            this.MsgBox = null;

            this.Count = 0;
            this.MagicNo = Math.floor((Math.random() * 100) + 1);
        }

        Event_GuessButton_Click(aSender, e) {
            let xGuess = Number(this.Guess.Text.Value);
            if (isNaN(xGuess)) {
                this.MsgBox.Show('Not a valid number.');
            } else if (xGuess < 1 || xGuess > 100) {
                this.MsgBox.Show('Not in the range of 1 to 100.');
            } else {
                this.Count++;
                this.TryCount.Text.Value = 'Guess #' + this.Count;

                if (xGuess < this.MagicNo) {
                    this.MsgBox.Show('Too low.');
                } else if (xGuess > this.MagicNo) {
                    this.MsgBox.Show('Too high.');
                } else if (xGuess === this.MagicNo) {
                    this.MsgBox.Show('Congratulations! You guessed the magic number.');
                    this.GuessButton.Enabled.Value = false;
                }
            }
        }
    }
    Guess.Index = Index;
})(Guess || (Guess = {}));

And now run it again:

We will continue to pretty up our application later, but next we will take a small detour and add data binding to our application.