JavaScript Prompt and Confirm Dialogs - Customization

JavaScript provides built-in dialog boxes, prompt and confirm, to interact with users and gather information. In this guide, we'll explore how to use and customize these dialog boxes, and provide examples to illustrate their usage.

The Prompt Dialog

The prompt dialog allows you to collect user input and display a customized message:

<button id="promptButton">Show Prompt</button>
<script>
const promptButton = document.getElementById("promptButton");
promptButton.addEventListener("click", function() {
    const result = prompt("Please enter your name:", "John Doe");
    if (result !== null) {
        alert("Hello, " + result + "!");
    } else {
        alert("You canceled the prompt.");
    }
});
</script>
    

The Confirm Dialog

The confirm dialog allows you to present a yes/no question to the user:

<button id="confirmButton">Show Confirm</button>
<script>
const confirmButton = document.getElementById("confirmButton");
confirmButton.addEventListener("click", function() {
    const userConfirmed = confirm("Do you want to continue?");
    if (userConfirmed) {
        alert("You chose to continue.");
    } else {
        alert("You chose to cancel.");
    }
});
</script>
    

Customization and Validation

You can customize the dialog message and validate user input as needed:

const userInput = prompt("Enter a number between 1 and 10:");
const num = parseInt(userInput);
if (!isNaN(num) && num >= 1 && num <= 10) {
    alert("You entered a valid number: " + num);
} else {
    alert("Invalid input or out of range.");
}
    

Conclusion

JavaScript dialog boxes like prompt and confirm provide a means to gather user input and make decisions in web applications. By customizing these dialogs and handling user responses, you can create interactive and user-friendly features in your projects.

Happy coding!