7.
<![CDATA[
Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for the
following problems: a. Parameter: A string b. Output: The position in the string of the left-most
vowel c. Parameter: A number d. Output: The number with its digits in the reverse order
<html>
<head>
<title>String and Number Functions</title>
<style>
*{
background-color:#2ecbff;
text-align:center;
padding:15px;
color:white;
}
input{
border-radius:20px;
background-color:#129ffc;
font-size:20px;
}
</style>
<script>
// Function to find the position of the left-most vowel in a string
function findLeftMostVowelPosition(str) {
var vowels = ['a', 'e', 'i', 'o', 'u'];
var lowercaseStr = str.toLowerCase();
for (var i = 0; i < lowercaseStr.length; i++) {
if (vowels.includes(lowercaseStr[i])) {
return i + 1; // Adding 1 to get the position starting from 1 instead of 0
}
}
return -1; // Return -1 if no vowels found
}
// Function to reverse the digits of a number
function reverseNumberDigits(num) {
var reversedNum = parseInt(num.toString().split('').reverse().join(''));
return reversedNum;
}
// Function to handle button click event
function handleClick() {
var inputStr = document.getElementById('stringInput').value;
var inputNum = document.getElementById('numberInput').value;
var vowelPosition = findLeftMostVowelPosition(inputStr);
var reversedNumber = reverseNumberDigits(inputNum);
document.getElementById('vowelOutput').textContent = 'Left-most vowel position: ' + vowelPosition;
document.getElementById('numberOutput').textContent = 'Reversed number: ' + reversedNumber;
}
</script>
</head>
<body>
<h1>Program 7: String and Number Functions</h1>
<label for="stringInput">Enter a string:</label>
<input type="text" id="stringInput"><br><br><br>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput"><br><br><br>
<button onclick="handleClick()">Submit</button><br><br>
<div id="vowelOutput"></div>
<div id="numberOutput"></div>
</body>
</html>
]]>
<![CDATA[
]]>