Skip to content

Commit 55be9cf

Browse files
Pankaj-StrPankaj-Str
committed
Add index.html for full name display tutorial with input fields and functionality
1 parent b95fcc0 commit 55be9cf

2 files changed

Lines changed: 60 additions & 0 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎Lectures/Lecture02/22 Jan 2026 - Example/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
9+
10+
<script>
11+
12+
function getFullName() {
13+
let firstName = document.getElementById("f_name").value;
14+
let lastName = document.getElementById("l_name").value;
15+
let fullName = firstName.concat(" ", lastName);
16+
document.getElementById("print_name").innerHTML = fullName;
17+
}
18+
19+
20+
21+
22+
23+
</script>
24+
25+
26+
</head>
27+
<body>
28+
29+
<div class="container mt-5">
30+
<div class="row justify-content-center">
31+
<div class="col-sm-6 border border-primary p-5 rounded-4 shadow-lg">
32+
<label class="form-label">
33+
First Name
34+
</label>
35+
<input type="text" class="form-control" id="f_name"/>
36+
<label class="form-label">
37+
Last Name
38+
</label>
39+
<input type="text" class="form-control" id="l_name" />
40+
<button class="btn btn-primary mt-3 w-100" onclick="getFullName()">
41+
Get Full Name
42+
</button>
43+
</div>
44+
45+
</div>
46+
<div class="row">
47+
<div class="col-sm-6 offset-sm-3 mt-4 p-4 border border-success rounded-4 shadow-lg">
48+
<h3 class="text-center">
49+
Full Name:
50+
</h3>
51+
<h1 class="text-center fs-4 alert alert-info" id="print_name">
52+
Nishant Chouhan
53+
</h1>
54+
</div>
55+
</div>
56+
</div>
57+
58+
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)