In the following program, the page reloads after entering '***' and alerting the user. You can do anything like redirecting to another page instead of reloading the page.
HTML code + Javascript:
<html>
<head>
<title>
Text Parser
</title>
<style>
h2{
margin-top: 100px;
text-align: center;
}
.play_area{
padding:30px;
text-align: center;
}
.my_btn{
width:100px;
text-align: center;
margin: auto;
margin-top:30px;
padding:10px;
background-color: rgb(0, 92, 128);
cursor: pointer;
color:white;
font-weight: bold;
}
.my_btn:hover{
background-color: rgb(9, 117, 180);
}
#showstring{
padding:10px;
}
.info, .result{
text-align: left;
padding:10px;
background-color: rgb(224, 221, 221);
width:49%;
margin:auto;
}
</style>
</head>
<body>
<h2>Text Parser</h2>
<div class="play_area">
<div class="result">Result</div>
<textarea name="showtext" id="showstring" cols="100" rows="5"></textarea>
<div class="info">Click the button to enter the string</div>
<div class="my_btn" onclick="takeInput()">Click</div>
</div>
<script>
//function to prompt user for input string
function takeInput(){
//clearing the textarea
document.querySelector("#showstring").value = "";
var input = prompt("Enter a string or '***' to quit");
//if input is '***'
if(input === '***'){
alert("Thanks for using the text parser");
//just reloading the page
//you can redirect to any page after exitting
location.reload();
}
else{
//convert string to lowercase
input = input.toLowerCase();
//removing all instances of 'erd'
var result = input.replaceAll("erd", "");
//showing the modified string in textarea
document.querySelector("#showstring").value = result;
}
}
</script>
</body>
</html>
Output:
if you have any doubt, do share in comments section!
Get Answers For Free
Most questions answered within 1 hours.