Green University of Bangladesh
Department of Computer Science and Engineering (CSE)
Faculty of Sciences and Engineering
Semester: (Spring, Year:2024), B.Sc. in CSE (Day)
Lab Report NO # 02
Course Title: Web Programming Lab
Course Code: CSE 302 Section: D21
Lab Experiment Name: Implement JavaScript task (1-4) given in slide 6.
Student Details
Name ID
1. Nur Hasan Hasib 221902247
Lab Date : 25/03/24
Submission Date : 01/04/24
Course Teacher’s Name : Most. Rokeya Khatun
Lab Report Status
Marks: ………………………………… Signature:.....................
Comments:.............................................. Date:..............................
1. TITLE OF THE LAB REPORT EXPERIMENT
Implement JavaScript task (1-4) given in slide 6
2. OBJECTIVES
• Create a web page to convert temperatures between Celsius and Fahrenheit.
• Utilize JavaScript to perform the conversion based on user input.
• Develop a web page to determine the type of user input (number, uppercase character,
lowercase character).
• Utilize JavaScript to analyze the input and display the result.
• Create a web page to determine if a given character is a vowel or a consonant.
• Employ a switch statement in JavaScript to evaluate the character and provide the
appropriate output.
• Compute the sum of even numbers up to 100.
• Utilize a for loop in JavaScript to iterate through even numbers and calculate their sum.
3. IMPLEMENTATION & OUTPUT
Task01: Task1 (temperature converter)
Code:
<!DOCTYPE html>
<html>
<head>
<title>Nur Hasan Hasib</title>
</head>
<body>
<h2>Temperature Converter</h2>
<p>Input temperature in Celsius:</p>
<input type="text" id="cinput">
<button onclick="convertctof()">Convert Fahrenheit</button>
<p id="rf"></p>
<p>Input temperature in Fahrenheit:</p>
<input type="text" id="finput">
<button onclick="converttoc()">Convert Celsius</button>
<p id="rc"></p>
<script>
function convertctof() {
var celsius = parseFloat(document.getElementById("cinput").value);
var fahrenheit = (celsius * 9/5) + 32;
document.getElementById("rf").innerHTML = celsius + "°Celsius is " +
fahrenheit.toFixed(2) + "°F.";
}
function converttoc() {
var fahrenheit = parseFloat(document.getElementById("finput").value);
var celsius = (fahrenheit - 32) * 5/9;
document.getElementById("rc").innerHTML = fahrenheit + "°Fahrenheit is " +
celsius.toFixed(2) + "°C.";
}
</script>
</body>
</html>
Explain: Create a text filed where user input the Celsius and create a onclick button while
user click the button there shows the result and the other convert to Celsius also work same.
In JavaScript function defines a JavaScript function to convert Celsius to Fahrenheit. It retrieves
the Celsius temperature entered by the user, performs the conversion formula, and updates the
HTML to display the result. And other function Fahrenheit to Celsius work in same way.
Output:
Task 02: Take a input and determine its type
(1. number(positive,negative,zero),
2.character(uppercase,lowercase))
Code:
<html>
<head>
<title>Nur Hasan Hasib</title>
</head>
<body>
<h2>Input Determiner</h2>
<p>Input a value:</p>
<input type="text" id="inputValue">
<button onclick="dtype()">Determine Type</button>
<p id="result"></p>
<script>
function dtype() {
var value = document.getElementById("inputValue").value;
var result = document.getElementById("result");
if (!isNaN(value)) {
result.textContent = value > 0 ? value + " positive number." : value < 0 ?
value + " negative number." : "intput zero.";
} else if (value.length === 1) {
result.textContent = value === value.toUpperCase() ? value + " uppercase
character." : value === value.toLowerCase() ? value + " lowercase character." :
"input is not upper and lower char";
} else {
result.textContent = "Invalid input.";
}
}
</script>
</body>
</html>
Explain: The user enters a value in the input field. When the "Determine Type" button is
clicked, the dtype() function is called. This function checks if the input is a number using is
Nan ().If it's a number, it determines whether it's positive, negative, or zero. If it's not a
number and its length is 1, it checks if it's an uppercase or lowercase character. Finally, it
updates the HTML to display the result.
Output:
Task 03: Check vowel or consonant using switch/case.
Code:
<html>
<head>
<title>Nur Hasan Hasib</title>
</head>
<body>
<h5>vowel and consonant checker</h5>
<p>input a character:</p>
<input type="text" id="inputc">
<button onclick="checkc()">Check</button>
<p id="r"></p>
<script>
function checkc() {
var c = document.getElementById("inputc").value.toLowerCase();
var r = document.getElementById("r");
switch(c) {
case 'a':
case 'e':
case 'i':
case 'o':
case 'u':
r.textContent = c + " vowel";
break;
default:
r.textContent = c + " consonant";
}
}
</script>
</body>
</html>
Explain: The user can input a character into the text field and clicking the "Check" button, the
checkc() function is called.The function converts the input character to lowercase to ensure
uniformity.It then uses a switch statement to check the character against the vowels ('a', 'e', 'i', 'o',
'u').If the character matches any of the vowels, it displays a message indicating that it's a vowel.
If the character doesn't match any of the vowels, it's considered a consonant, and a corresponding
message is displayed
Output:
Task 04: Calculate sum of even numbers up to 100 using for loop
Code:
<html>
<head>
<title>NUR HASAN HASIB</title>
</head>
<body>
<h1>sum of even num of 100</h1>
<p id="r"></p>
<script>
var s = 0;
for (var i = 0; i <= 100; i += 2) {
s+= i;
}
document.getElementById("r").textContent = "sum even num of 100: " + s;
</script>
</body>
</html>
Explain: It initializes a variable s to store the sum. It uses a for loop to iterate from 0 to 100 with a
step of 2, considering only even numbers. Inside the loop, it adds each even number to the s. Finally, it
displays the result in the paragraph element with the id "r".
Output:
4. ANALYSIS AND DISCUSSION
In discussion, these JavaScript problems demonstrate essential concepts in web
development succinctly. The Temperature Converter enables users to convert Celsius to
Fahrenheit dynamically. The Input Type Determiner swiftly identifies input types number,
uppercase, or lowercase characters. The Vowel or Consonant Checker efficiently
determines whether a character is a vowel or consonant using JavaScript's `switch`
statement. Finally, the Sum of Even Numbers task succinctly calculates the sum of even
numbers up to 100 using a `for` loop. Together, they showcase JavaScript's versatility in
solving common web development challenges concisely.
