I’ve created a webpage with all of the exercises solved, you can find it here: LINK
Here is the full code:
<head>
<title>Javascript, Chapter 3</title>
</head>
<body>
<h1>Exercise 1: find minimum number</h1>
<input type="number" id="valueA" name="valueA" value="0">
<label for="valueA">First number</label><p></p>
<input type="number" id="valueB" name="valueB" value="1">
<label for="valueB">Second number</label>
<p id="ex1_output"></p>
<br>
<h1>Exercise 2: check if number is even (with recursive function)</h1>
<input type="number" id="valueToTest" name="valueToTest" value="50">
<label for="valueToTest">Number to test</label><p></p>
<p id="ex2_output"></p>
<br>
<h1>Exercise 3: bean count</h1>
<input type="text" id="inputString" name="inputString" value="Beans are plant foods known as legumes. Commonly consumed beans include kidney beans, navy beans, soybeans, and chickpeas.">
<label for="inputString">String to test</label><p></p>
<input type="text" id="inputChar" name="inputChar" value="b">
<label for="inputChar">Character to count</label><p></p>
<p id="ex3_output"></p>
<br>
<script type="text/javascript">
////////////////////////////
// JS code for exercise 1//
///////////////////////////
//This is the actual function required by the exercise
const min = (a,b) => {
if(a>b){return b;}
else{return a;}
};
//Function to be executed when values change
const buildOutput = function(inputA, inputB, output){
let valueA = inputA.value;
let valueB = inputB.value;
let result=min(valueA,valueB);
let outHTML="<h3>The smaller number between "+String(valueA)+" and "+String(valueB)+" is: "+String(result)+"</h3>";
output.innerHTML = outHTML;
};
//Fetch items
let inputItemA=document.getElementById("valueA");
let inputItemB=document.getElementById("valueB");
let outputItem=document.getElementById("ex1_output");
//Event listeners
buildOutput(inputItemA, inputItemB, outputItem);
inputItemA.addEventListener('change', function(){buildOutput(inputItemA, inputItemB, outputItem);});
inputItemB.addEventListener('change', function(){buildOutput(inputItemA, inputItemB, outputItem);});
////////////////////////////
// JS code for exercise 2//
///////////////////////////
//This is the actual function required by the exercise
function isEven(value){
//If negative, make positive
if(value<0){value*=-1;}
//Return conditions
if(value==0){return 'even';}
else if(value==1){return 'odd';}
else{
//perform recursive check
value-=2;
return isEven(value);
}
}
//Function to be executed when values change
const buildEvenOutput = function(input, output){
let result=isEven(input.value);
let outHTML="<h3>The number is: "+result+"</h3>";
output.innerHTML = outHTML;
}
//Fetch items
let evenInputItem=document.getElementById("valueToTest");
let evenOutputItem=document.getElementById("ex2_output");
//Event listeners
buildEvenOutput(evenInputItem, evenOutputItem);
evenInputItem.addEventListener('change', function(){buildEvenOutput(evenInputItem, evenOutputItem);});
////////////////////////////
// JS code for exercise 3//
///////////////////////////
//This is the actual function required by the exercise
function countChar(string, char){
let count = 0;
for(let x=0; x<string.length; x++){
if(string[x]===char){
count++;
}
}
return count;
}
//Function to be executed when values change
const buildCountOutput = function(inputString, inputChar, output){
let result=countChar(inputString.value, inputChar.value);
let outHTML="<h3>Found: "+String(result)+"</h3>";
output.innerHTML = outHTML;
}
//Fetch items
let inputStringItem=document.getElementById("inputString");
let inputCharItem=document.getElementById("inputChar");
let countOutputItem=document.getElementById("ex3_output");
//Event listeners
buildCountOutput(inputStringItem, inputCharItem, countOutputItem);
inputStringItem.addEventListener('change', function(){buildCountOutput(inputStringItem, inputCharItem, countOutputItem);});
inputCharItem.addEventListener('change', function(){buildCountOutput(inputStringItem, inputCharItem, countOutputItem);});
</script>
</body>
