This section explains how to create a simple web application called Guess using IntraWeb 17. The app allows the user to guess a randomly generated number between 1 and 100 through a clean interface built with IWML and JavaScript.
Before you begin, make sure Apache Server is launched and properly configured and make sure the following setup steps have been completed successfully.
Creating the Project Structure
First, you need to create a folder where the application files will be stored. Open Windows File Explorer and do the following:
1.Go to the directory: C:\src\IW17\Demos
2.Inside it, create a folder named Guess
As a result, you should have the following path:
C:\src\IW17\Demos\Guess
This is where you will place the three required files for the application to work:
index.html
In the Guess folder, create a file named index.html and insert the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guess</title>
<meta charset="utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<script src="/IW17/IntraWeb/IntraWeb.js"></script>
</head>
<body>
Loading IntraWeb...
</body>
</html>
This is a minimal HTML file that:
•sets the page title,
•disables browser caching,
•loads the IntraWeb.js script, which initializes the IWML layout and logic for the page.
Index.iwml
Create a file named Index.iwml in the same folder and add the following content:
# IWML file header – required for correct processing
ACORN 1.0 IWML 1.0
# Page name used to link the layout (IWML) with its logic (Index.js)
Guess.Index
# Sets initial focus on the GuessEdit field when the page loads
FocusControl: GuessEdit
# Allows the GuessButton to be triggered by the Enter key
ActionControl: GuessButton
# Defines a vertical stack layout for visual components
SimpleStack
# Input field linked to the this.Guess variable in JavaScript
Edit:GuessEdit =this.Guess
# Text label showing the value of this.Msg (user feedback)
Text =this.Msg
# Text label showing the number of attempts (this.Count)
Text Guess #[=this.Count]
# Adds vertical space of 15 pixels
Gap 15
# Guess button with ID GuessButton and label "Guess"
Button:GuessButton Guess
This file describes the user interface using IWML. The elements are bound to variables and methods defined in the JavaScript logic file.
Index.js
Create a file named Index.js in the same folder and insert the following code:
// Declare a global namespace Guess
var Guess;
// Immediately invoked function to isolate the Guess module
(function (Guess) {
// Define the Index class, extending IntraWeb.Code
class Index extends IntraWeb.Code {
// Constructor runs when the page is loaded
constructor() {
super(...arguments); // Call the parent constructor
// Number of attempts
this.Count = 0;
// The user's guessed number (initially not a number)
this.Guess = NaN;
// Message to the user
this.Msg = '';
// Random number between 1 and 100 to be guessed
this.MagicNo = Math.floor((Math.random() * 100) + 1);
}
// Called automatically when the page has loaded
WhenPageHasLoaded() {
// Try to get MagicNo from the URL (e.g., ?MagicNo=42)
const xMagicNo = this.Page.WebParam('MagicNo');
// If it exists, override the random number
if (xMagicNo)
this.MagicNo = parseInt(xMagicNo);
}
// Called when the Guess button is clicked
WhenGuessButtonClicked(e) {
// Return focus to the input field
this.GuessEdit.Focus();
// If Shift is pressed, show the hidden number (debug feature)
if (e && e.shiftKey) {
window.alert('The magic number is: ' + this.MagicNo);
return;
}
// Clear the previous message
this.Msg = '';
// If input is not a number, show an error
if (isNaN(this.Guess)) {
this.Msg = this.GuessEdit.Text.Value + ' is not a valid number.';
}
// If the number is outside 1–100 range, show an error
else if (this.Guess < 1 || this.Guess > 100) {
this.Msg = this.Guess + ' is not in the range of 1 to 100.';
}
// If the input is valid, compare it to the magic number
else {
// Increase the attempt count
this.Count++;
// Too low
if (this.Guess < this.MagicNo) {
this.Msg = this.Guess + ' is too low.';
}
// Too high
else if (this.Guess > this.MagicNo) {
this.Msg = this.Guess + ' is too high.';
}
// Correct guess
else if (this.Guess === this.MagicNo) {
window.alert('Congratulations! You guessed the magic number.');
// Disable the button after the correct guess
this.GuessButton.Enabled.Value = false;
}
}
// Reset guess value for the next attempt
this.Guess = NaN;
}
}
// Register the Index class under the Guess namespace
// IntraWeb uses this name to bind logic to the IWML layout
Guess.Index = Index;
// End of the IIFE and namespace definition
})(Guess || (Guess = {}));
//# sourceMappingURL=Index.js.map
This file contains the main logic for the "Guess the number" game. It defines the game's state variables, handles user input, checks for correct answers, and shows the results.
Running the Application
Make sure Apache is running. Then open your browser and go to: http://127.0.0.1/demo/Guess/
If all files are set up correctly, you will see the Guess web application. You can enter numbers and try to guess the hidden number between 1 and 100.
