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.