I\'m trying to create an HTML documents that prompts the user for four piece of
ID: 3680626 • Letter: I
Question
I'm trying to create an HTML documents that prompts the user for four piece of data. First border color, an integer, a word (all alphabetic characters), and a single letter. Each of the four user inputs must be validated to ensure that the correct type of data is entered and you must use pattern-matching methods for this validation (not IF statements). The integer is examined to count the number of 3's found in the number. The word entered is examined to determine the number of characters in the string, the number of vowels in the string, and the position (index) of the last occurrence of the user-inputted letter in the string. All validation and checking of the input must be implemented using javascript pattern matching. Build regular expressions and then use the javascript "search", "match", and/or "replace" pattern matching functions for this program. I have already made my program, but im missing a couple of informations. The first thing is how to prompt a user for an integer and if it's not an integer it should pop a allert massege, and ask the user to enter an integer again. Second, how to count the number 3 in that integer. Last, how to get the last occurence of the character from a string.
Here is my work:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number and Phrase Evaluator</title>
<style type="text/css">
#boxResult{
display: none;
width: auto;
padding: 15px;
border: 10px solid black;
background-color: #D3D3D3;
float: left;
}
</style>
</head>
<body>
<h1>Number and Phrase Evaluator</h1>
<h1 id="dateHeader">Date</h1>
<div id="boxResult">
<p>The word entered was <span class="wordEntered"></span></p>
<p>The length of <span class="wordEntered"></span> is <span id="wordSize"></span> characters.</p>
<p>The word <span class="wordEntered"></span> has <span id="numVowels"></span> vowels in it.</p>
<div id="vowelPositions">
</div>
<p id="letterResult"></p>
</div>
<script type="text/javascript">
function usecurrentsDate(){
var weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var current = new Date();
var ww = weekDays[current.getDay()];
var dd = current.getDate();
var mm = months[current.getMonth()];
var yyyy = current.getFullYear();
current = ww+' '+mm+' '+ dd +', ' +yyyy;
dateHeader.innerHTML = current;
}
function isNum(word){
var num = /^[0-9]+$/;
if(word.match(num)){
return true;
}
else
{
return false;
}
}
function isAlphaNum(word){
var regex = /^[a-z0-9]+$/i;
if(word.search(regex) == -1){
return false;
}else{
return true
}
}
function countVowels(word){
var stTester = "aeiou";
var numVowels = 0;
for (var i = 0 ; i < word.length ; i++){
if(stTester.indexOf(word[i]) > -1){
numVowels++;
}
}
return numVowels;
}
var dateHeader = document.getElementById("dateHeader");
var boxResult =document.getElementById("boxResult");
var wordEntered = document.getElementsByClassName("wordEntered");
var wordSize = document.getElementById("wordSize");
var numVowels = document.getElementById("numVowels");
var numVowels = document.getElementById("numVowels");
var vowelPositions = document.getElementById("vowelPositions");
usecurrentsDate();
var borderColor = prompt("Please enter the border color you want for your output box: yellow, purple, or orange only");
if( borderColor == "yellow" || borderColor == "purple" || borderColor == "orange"){
boxResult.style.borderColor = borderColor;
}else{
alert("Invalid color! " + borderColor + " border will be set to black");
}
var wordNum = prompt("Enter an integer in the text field");
while(!isNum(wordNum)){
alert("You entered a non-integer value please re-load and try again!!");
wordAlphaNum = prompt("Enter an integer in the text field");
}
var wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters");
while(!isAlphaNum(wordAlphaNum)){
alert("You entered an invalid word(" + wordAlphaNum + ")please re-load and try again!!");
wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters.");
}
var letter = prompt("Enter a letter in the text field bellow");
var letterString = "";
var cLetters = 0;
for(var i = 0 ; i < wordAlphaNum.length ; i++){
if(wordAlphaNum[i] == letter){
letterString += "<div>The word " + wordAlphaNum + " contains the letter "+ letter + " at position " + i + ".</div>";
cLetters++;
}
}
for(var i = 0 ; i < wordEntered.length ; i++){
wordEntered[i].innerHTML = wordAlphaNum;
}
wordSize.innerHTML = wordAlphaNum.length;
numVowels.innerHTML = countVowels(wordAlphaNum);
vowelPositions.innerHTML = letterString;
boxResult.style.display = "block";
</script>
</body>
</html>
Explanation / Answer
Please find the corrected code :
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number and Phrase Evaluator</title>
<style type="text/css">
#boxResult{
display: none;
width: auto;
padding: 15px;
border: 10px solid black;
background-color: #D3D3D3;
float: left;
}
</style>
</head>
<body>
<h1>Number and Phrase Evaluator</h1>
<h1 id="dateHeader">Date</h1>
<div id="boxResult">
<p>The word entered was <span class="wordEntered"></span></p>
<p>The length of <span class="wordEntered"></span> is <span id="wordSize"></span> characters.</p>
<p>The word <span class="wordEntered"></span> has <span id="numVowels"></span> vowels in it.</p>
<div id="vowelPositions">
</div>
<p id="letterResult"></p>
</div>
<script type="text/javascript">
function usecurrentsDate(){
var weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var current = new Date();
var ww = weekDays[current.getDay()];
var dd = current.getDate();
var mm = months[current.getMonth()];
var yyyy = current.getFullYear();
current = ww+' '+mm+' '+ dd +', ' +yyyy;
dateHeader.innerHTML = current;
}
function isNum(word){
var num = /^[0-9]+$/;
if(word.match(num)){
return true;
}
else
{
return false;
}
}
function isAlphaNum(word){
var regex = /^[a-z0-9]+$/i;
if(word.search(regex) == -1){
return false;
}else{
return true
}
}
function countVowels(word){
var stTester = "aeiou";
var numVowels = 0;
for (var i = 0 ; i < word.length ; i++){
if(stTester.indexOf(word[i]) > -1){
numVowels++;
}
}
return numVowels;
}
var dateHeader = document.getElementById("dateHeader");
var boxResult =document.getElementById("boxResult");
var wordEntered = document.getElementsByClassName("wordEntered");
var wordSize = document.getElementById("wordSize");
var numVowels = document.getElementById("numVowels");
var numVowels = document.getElementById("numVowels");
var vowelPositions = document.getElementById("vowelPositions");
usecurrentsDate();
var borderColor = prompt("Please enter the border color you want for your output box: yellow, purple, or orange only");
if( borderColor == "yellow" || borderColor == "purple" || borderColor == "orange"){
boxResult.style.borderColor = borderColor;
}else{
alert("Invalid color! " + borderColor + " border will be set to black");
}
var wordNum = prompt("Enter an integer in the text field");
while(isNaN(wordNum)){
alert("You entered a non-integer value please re-load and try again!!");
wordNum = prompt("Enter an integer in the text field");
}
var count3=0;
for(var i = 0 ; i < wordNum.length ; i++){
if(wordNum[i] == '3'){
count3++;
}
}
var wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters");
while(!isAlphaNum(wordAlphaNum)){
alert("You entered an invalid word(" + wordAlphaNum + ")please re-load and try again!!");
wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters.");
}
var letter = prompt("Enter a letter in the text field bellow");
var letterString = "";
for(var i = wordAlphaNum.length ; i > 0 ; i--){
if(wordAlphaNum[i] == letter){
letterString += "<div>The word " + wordAlphaNum + " contains the letter "+ letter + " at position " + (i+1) + ".</div>";
break;
}
}
letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";
for(var i = 0 ; i < wordEntered.length ; i++){
wordEntered[i].innerHTML = wordAlphaNum;
}
wordSize.innerHTML = wordAlphaNum.length;
numVowels.innerHTML = countVowels(wordAlphaNum);
vowelPositions.innerHTML = letterString;
boxResult.style.display = "block";
</script>
</body>
</html>