Scribd
Upload
6 views

Web Programming Lab report 02

The lab report details the implementation of four JavaScript tasks as part of a Web Programming Lab course at Green University of Bangladesh. These tasks include a temperature converter, input type determiner, vowel/consonant checker, and a sum calculator for even numbers up to 100. Each task demonstrates fundamental web development concepts and the use of JavaScript for dynamic user interactions and calculations.

Uploaded by

Nur Hasan Hasib247
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Web Programming Lab report 02

The lab report details the implementation of four JavaScript tasks as part of a Web Programming Lab course at Green University of Bangladesh. These tasks include a temperature converter, input type determiner, vowel/consonant checker, and a sum calculator for even numbers up to 100. Each task demonstrates fundamental web development concepts and the use of JavaScript for dynamic user interactions and calculations.

Uploaded by

Nur Hasan Hasib247
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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.

You might also like