Scribd
Upload
28 views53 pages

Bootstrap UI Components Guide

Jjsj

Uploaded by

Shyam Sapariya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views53 pages

Bootstrap UI Components Guide

Jjsj

Uploaded by

Shyam Sapariya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Practical-1

Aim:- Introduction to HTML,CSS,JavaScript,BootStap

1. Create Custom components using bootstrap.


[Link] Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glassmorphic Card</title>
<link rel="stylesheet"
href="[Link]
>
<style>
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;
color: white;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.glass-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #6a11cb, #2575fc);
}

</style>
</head>
<body>

<div class="glass-container">
<div class="glass-card">
<h3>Glassmorphic Card</h3>
<p>A futuristic card design using Bootstrap & CSS.</p>
<button class="btn btn-light">Click Me</button>
</div>
</div>
</body>
</html>
Output:-
[Link] button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Button</title>
<link rel="stylesheet"
href="[Link]
>
<style>
.floating-btn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #28a745;
color: white;
padding: 15px;
border-radius: 50%;
font-size: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.floating-btn:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="floating-btn">+</button>
</body>
</html>
Output:-
3. Animated Loader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Loader</title>
<link rel="stylesheet"
href="[Link]
>
</head>
<body>
<div class="d-flex justify-content-center align-items-center vh-100">
<div class="spinner-border text-primary" style="width: 80px; height:
80px;"></div>
</div>
<script
src="[Link]
.js"></script>
</body>
</html>
Output:-
2. Create Navbars using bootstrap

1. Dark-Themed Navbar with Search Bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet"
href="[Link]
>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-lg">
<div class="container">
<a class="navbar-brand" href="#">BrandName</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link"
href="#">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="#">About</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Contact</a></li>
</ul>
<form class="d-flex ms-3">
<input class="form-control me-2" type="search"
placeholder="Search">
<button class="btn btn-success" type="submit">Go</button>
</form>
</div>
</div>
</nav>
<script
src="[Link]
.js"></script>
</body>
</html>
Output:-
2. Light-Themed Navbar with Dropdown Menu.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet"
href="[Link]
>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">BrandName</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link"
href="#">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Services</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="dropdownMenu" role="button" data-bs-toggle="dropdown">
More
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">FAQ</a></li>
<li><a class="dropdown-item" href="#">Blog</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg shadow-sm" style="background-color:
#ff5733;">
<script
src="[Link]
.js"></script>
</body>
</html>
Output:-
[Link] Form using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Validation Status</title>
<link rel="stylesheet"
href="[Link]
>
</head>
<body>
<div class="container mt-5">
<div class="col-md-6 mx-auto">
<h2 class="text-center">User Form</h2>
<form id="userForm" class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Full Name</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">Please enter a valid
email.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password"
required minlength="6">
<div class="invalid-feedback">Password must be at least 6
characters long.</div>
</div>
<div id="formMessage" class="text-center mt-3"></div>
<button type="submit" class="btn btn-primary w-
100">Submit</button>
</form>
</div>
</div>
<script
src="[Link]
.js"></script>
<script>
(function() {
'use strict';
var form = [Link]('userForm');
var messageDiv = [Link]('formMessage');
[Link]('submit', function(event) {
if (![Link]()) {
[Link]();
[Link]();
[Link] = '<p class="text-danger">❌ Form
contains errors. Please fix them.</p>';
} else {
[Link]();
[Link] = '<p class="text-success">✅ Form
submitted successfully!</p>';
}
[Link]('was-validated');
}, false);
})();
</script>
</body>
</html>
Output:-
4. Create Grid using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Grid Example</title>
<link rel="stylesheet"
href="[Link]
>
</head>
<body>
<div class="container mt-4">
<h2 class="text-center">Bootstrap Grid System</h2>

<div class="row">
<div class="col-md-4 bg-primary text-white text-center p-3">Column
1</div>
<div class="col-md-4 bg-success text-white text-center p-3">Column
2</div>
<div class="col-md-4 bg-danger text-white text-center p-3">Column
3</div>
</div>>
<div class="row mt-4">
<div class="col-md-6 bg-warning text-dark text-center p-3">
Nested Grid
<div class="row mt-2">
<div class="col-6 bg-light text-dark p-2">Nested Col 1</div>
<div class="col-6 bg-secondary text-white p-2">Nested Col
2</div>
</div>
</div>
<div class="col-md-6 bg-info text-white text-center p-3">Column
4</div>
</div>
</div>
<script
src="[Link]
.js"></script>
</body>
</html>
Output:-
5. Create bootstrap themes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Bootstrap Theme</title>
<link rel="stylesheet"
href="[Link]
>
<style>
body {
background: linear-gradient(to right, #4b6cb7, #182848);
font-family: 'Arial', sans-serif;
color: white;
}
.navbar {
background: rgba(0, 0, 0, 0.8);
}
.navbar-brand, .nav-link {
color: white !important;
}
.btn-custom {
background: #ff5733;
border: none;
padding: 10px 20px;
font-size: 18px;
color: white;
transition: 0.3s;
}
.btn-custom:hover {
background: #c70039;
}
.custom-card {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
padding: 20px;
text-align: center;
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">Bootstrap Theme</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link"
href="#">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="#">About</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mx-auto custom-card">
<h3>Welcome to My Theme</h3>
<p>This theme features a gradient background and a glassmorphic
card design.</p>
<button class="btn btn-custom">Explore</button>
</div>
</div>
</div>
<script
src="[Link]
.js"></script>
</body>
</html>
Output:-
Practical-2
Aim:- Expressions in AngularJS.
4. Create Angular JS Application using expression.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<title>Stylish AngularJS User Input</title>
<script
src=”[Link]
cript>
<style>
body {
background: linear-gradient(to right, #4B79A1, #283E51);
font-family: ‘Arial’, sans-serif;
color: white;
text-align: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.2);
padding: 30px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
max-width: 400px;
margin: auto;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
font-size: 16px;
}
.btn {
background: #ff5733;
color: white;
padding: 10px 20px;
font-size: 18px;
border: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.btn:hover {
background: #c70039;
}
</style>
</head>
<body ng-app=”myApp”>
<div class=”container” ng-controller=”myController”>
<h2>AngularJS Styled Input Form</h2>
<label>Enter Your Name:</label>
<input type=”text” ng-model=”20sername”>
<p>Welcome, <strong>{{20sername}}</strong>!</p>
<label>Enter First Number:</label>
<input type=”number” ng-model=”num1”>
<label>Enter Second Number:</label>
<input type=”number” ng-model=”num2”>
<p>Sum: <strong>{{num1 + num2}}</strong></p>
<p>Multiplication: <strong>{{num1 * num2}}</strong></p>
<button class=”btn”>Submit</button>
</div>
<script>
var app = [Link](“myApp”, []);
[Link](“myController”, function($scope) {
$[Link] = “Guest”;
$scope.num1 = 0;
$scope.num2 = 0;
});
</script>
</body>
</html>
Output:-
[Link] Navigation Menu.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<title>Enhanced AngularJS Navigation Menu</title>
<script
src=”[Link]
cript>
<script src=”[Link]
<style>
body {
font-family: ‘Arial’, sans-serif;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: white;
margin: 0;
text-align: center;
}
.navbar {
background: rgba(0, 0, 0, 0.9);
padding: 15px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
}
.navbar-brand {
font-size: 24px;
font-weight: bold;
margin-left: 20px;
}
.nav-links {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
.nav-links li {
margin: 0 15px;
position: relative;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 10px 15px;
transition: 0.3s;
border-radius: 5px;
}
.nav-links a:hover {
background: #ff5733;
}
.dropdown-content {
display: none;
position: absolute;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
min-width: 150px;
border-radius: 5px;
padding: 10px 0;
}
.nav-links li:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
padding: 10px;
color: white;
}
.dropdown-content a:hover {
background: #c70039;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 250px;
height: 100%;
background: rgba(0, 0, 0, 0.8);
padding-top: 20px;
text-align: left;
transition: 0.3s;
}
.sidebar a {
display: block;
padding: 10px 20px;
color: white;
text-decoration: none;
font-size: 18px;
}
.sidebar a:hover {
background: #ff5733;
}
.toggle-btn {
font-size: 24px;
cursor: pointer;
position: absolute;
left: 20px;
top: 15px;
}
.content {
padding: 50px;
}
</style>
</head>
<body ng-app=”navApp” ng-controller=”navController”>
<div class=”sidebar” ng-show=”showSidebar”>
<a href=”#” ng-click=”setPage(‘Dashboard’)”><I class=”fas fa-chart-
line”></i> Dashboard</a>
<a href=”#” ng-click=”setPage(‘Profile’)”><I class=”fas fa-user”></i>
Profile</a>
<a href=”#” ng-click=”setPage(‘Settings’)”><I class=”fas fa-cog”></i>
Settings</a>
<a href=”#” ng-click=”toggleSidebar()”><I class=”fas fa-times”></i> Close
Sidebar</a>
</div>
<nav class=”navbar”>
<span class=”toggle-btn” ng-click=”toggleSidebar()”><I class=”fas fa-
bars”></i></span>
<div class=”navbar-brand”>AngularJS Menu</div>
<ul class=”nav-links”>
<li><a href=”#” ng-click=”setPage(‘Home’)”><I class=”fas fa-home”></i>
Home</a></li>
<li><a href=”#” ng-click=”setPage(‘About’)”><I class=”fas fa-info-
circle”></i> About</a></li>
<li>
<a href=”#”><I class=”fas fa-cogs”></i> Services</a>
<div class=”dropdown-content”>
<a href=”#” ng-click=”setPage(‘Web Development’)”>Web
Development</a>
<a href=”#” ng-click=”setPage(‘SEO’)”>SEO</a>
<a href=”#” ng-click=”setPage(‘Marketing’)”>Marketing</a>
</div>
</li>
<li><a href=”#” ng-click=”setPage(‘Contact’)”><I class=”fas fa-
envelope”></i> Contact</a></li>
</ul>
</nav>
<div class=”content”>
<h2>{{ activePage }}</h2>
<p>This is the {{ activePage }} section.</p>
</div>
<script>
var app = [Link](“navApp”, []);
[Link](“navController”, function($scope) {
$[Link] = [“Home”, “About”, “Services”, “Contact”];
$[Link] = “Home”;
$[Link] = false;

$[Link] = function(page) {
$[Link] = page;
};

$[Link] = function() {
$[Link] = !$[Link];
};
});
</script>
</body>
</html>
Output:-
3. Create inline editor.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<title>AngularJS Inline Editor</title>
<script
src=”[Link]
cript>
<style>
/* Background & Font Styling */
body {
font-family: ‘Arial’, sans-serif;
background: linear-gradient(to right, #2c3e50, #4ca1af);
color: white;
text-align: center;
padding: 40px;
}

/* Editor Container */
.editor-container {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
max-width: 500px;
margin: auto;
}

/* Editable Text */
.editable-text {
font-size: 20px;
padding: 10px;
cursor: pointer;
border: 2px solid transparent;
border-radius: 5px;
}

.editable-text:hover {
border: 2px solid #ff5733;
}

/* Input Field */
.edit-input {
width: 100%;
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
}

/* Save Button */
.btn-save {
background: #ff5733;
color: white;
padding: 10px 20px;
border: none;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
}

.btn-save:hover {
background: #c70039;
}
</style>
</head>
<body ng-app=”inlineEditorApp”>

<div class=”editor-container” ng-controller=”editorController”>


<h2>Inline Text Editor</h2>

<!—Editable Text Area →


<div ng-show=”!editing” class=”editable-text” ng-click=”startEditing()”>
{{ text }}
</div>

<!—Input Field →
<div ng-show=”editing”>
<input type=”text” ng-model=”text” class=”edit-input”>
<button class=”btn-save” ng-click=”saveText()”>Save</button>
</div>
</div>

<script>
var app = [Link](“inlineEditorApp”, []);
[Link](“editorController”, function($scope) {
$[Link] = “Click here to edit this text!”;
$[Link] = false;

$[Link] = function() {
$[Link] = true;
};
$[Link] = function() {
$[Link] = false;
};
});
</script>

</body>
</html>

Output:-
[Link] Instant Search.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<title>AngularJS Instant Search</title>
<script
src=”[Link]
cript>
<style>
body {
font-family: ‘Arial’, sans-serif;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: white;
text-align: center;
padding: 40px;
}
.search-container {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
max-width: 400px;
margin: auto;
}
input {
width: 100%;
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
margin-bottom: 10px;
}
.results {
list-style: none;
padding: 0;
}
.results li {
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
margin: 5px 0;
transition: 0.3s;
cursor: pointer;
}
.results li:hover {
background: #ff5733;
}
</style>
</head>
<body ng-app=”searchApp”>
<div class=”search-container” ng-controller=”searchController”>
<h2>Instant Search</h2>
<input type=”text” ng-model=”query” placeholder=”Search items…”>

<ul class=”results”>
<li ng-repeat=”item in items | filter:query”>{{ item }}</li>
</ul>
</div>
<script>
var app = [Link](“searchApp”, []);
[Link](“searchController”, function($scope) {
$[Link] = [“Apple”, “Banana”, “Cherry”, “Mango”, “Orange”,
“Strawberry”, “Grapes”, “Watermelon”];
$[Link] = “”;
});
</script>
</body>
</html>
Output:-
Practical-3
Aim :- Angular JS Forms and Validations.

[Link] student information form and apply validation.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Registration Form</title>
<script
src="[Link]
cript>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: white;
text-align: center;
padding: 40px;
}
.form-container {
background: rgba(255, 255, 255, 0.2);
padding: 30px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
max-width: 450px;
margin: auto;
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
input, select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
font-size: 16px;
}
.error {
color: #ff5733;
font-size: 14px;
display: none;
}
.[Link]-touched + .error {
display: block;
}
.btn-submit {
background: #ff5733;
color: white;
padding: 10px 20px;
font-size: 18px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
}
.btn-submit:hover {
background: #c70039;
transform: scale(1.05);
}
</style>
</head>
<body ng-app="studentApp">
<div class="form-container" ng-controller="studentController">
<h2>Student Registration Form</h2>
<form name="studentForm" novalidate>
<label>Full Name:</label>
<input type="text" name="name" ng-model="[Link]" required ng-
class="{'ng-touched': [Link].$touched}">
<div class="error">Name is required.</div>
<label>Email Address:</label>
<input type="email" name="email" ng-model="[Link]" required ng-
class="{'ng-touched': [Link].$touched}">
<div class="error">Valid email is required.</div>
<label>Age:</label>
<input type="number" name="age" ng-model="[Link]" min="5"
max="100" required ng-class="{'ng-touched': [Link].$touched}">
<div class="error">Age is required (between 5-100).</div>
<label>Gender:</label>
<select name="gender" ng-model="[Link]" required ng-
class="{'ng-touched': [Link].$touched}">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<div class="error">Gender selection is required.</div>
<button type="submit" class="btn-submit" ng-
click="submitForm()">Submit</button>
</form>
<div ng-show="submitted">
<h3>✅ Student Information Submitted Successfully!</h3>
<p><strong>Name:</strong> {{ [Link] }}</p>
<p><strong>Email:</strong> {{ [Link] }}</p>
<p><strong>Age:</strong> {{ [Link] }}</p>
<p><strong>Gender:</strong> {{ [Link] }}</p>
</div>
</div>
<script>
var app = [Link]("studentApp", []);
[Link]("studentController", function($scope) {
$[Link] = {};
$[Link] = false;
$[Link] = function() {
if ($[Link].$valid) {
$[Link] = true;
}
};
});
</script>
</body>
</html>
Output:-
Practical-4
Aim:- Creating a single page website using AngularJS.

1. Create Single Page Application in Angular JS.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resume Builder - AngularJS SPA</title>
<script
src="[Link]
cript>
<script
src="[Link]
[Link]"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #00467F, #A5CC82);
color: white;
text-align: center;
padding: 20px;
}
.navbar {
background: rgba(0, 0, 0, 0.8);
padding: 15px;
display: flex;
justify-content: space-around;
border-radius: 10px;
}
.navbar a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 12px;
transition: 0.3s;
border-radius: 5px;
}
.view-container {
margin-top: 20px;
padding: 30px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.resume-container {
width: 80%;
margin: auto;
background: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 10px;
text-align: left;
}
.preview-container {
width: 80%;
margin: auto;
background: rgba(255, 255, 255, 0.2);
padding: 30px;
border-radius: 10px;
text-align: left;
}
input, textarea {
width: 100%;
padding: 12px;
margin: 12px 0;
border-radius: 8px;
font-size: 18px;
border: none;
}
button {
padding: 12px;
border: none;
background: #ff5733;
color: white;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body ng-app="resumeApp" ng-controller="resumeController">
<div class="navbar">
<a href="#!/home">🏠 Home</a>
<a href="#!/builder">📄 Resume Builder</a>
</div>
<div class="view-container" ng-view></div>
<div class="resume-container">
<h3>Personal Details</h3>
<input type="text" ng-model="[Link]" placeholder="Full Name">
<input type="text" ng-model="[Link]" placeholder="Email">
<input type="text" ng-model="[Link]" placeholder="Phone Number">
<textarea ng-model="[Link]" placeholder="Address"></textarea>
<h3>Work Experience</h3>
<textarea ng-model="[Link]" placeholder="Your Work
Experience"></textarea>
<h3>Education</h3>
<textarea ng-model="[Link]" placeholder="Your
Education"></textarea>
<h3>Skills & Certifications</h3>
<textarea ng-model="[Link]" placeholder="List Your
Skills"></textarea>
<button ng-click="saveResume()">Save Resume</button>
</div>
<div class="preview-container">
<h3>Live Resume Preview</h3>
<p><strong>Name:</strong> {{ [Link] }}</p>
<p><strong>Email:</strong> {{ [Link] }}</p>
<p><strong>Phone:</strong> {{ [Link] }}</p>
<p><strong>Address:</strong> {{ [Link] }}</p>
<h4>Work Experience</h4>
<p>{{ [Link] }}</p>
<h4>Education</h4>
<p>{{ [Link] }}</p>
<h4>Skills & Certifications</h4>
<p>{{ [Link] }}</p>
</div>
<script>
var app = [Link]("resumeApp", []);
[Link]("resumeController", function($scope) {
$[Link] = {};
$[Link] = function() {
alert("Resume saved successfully!");
};
});
</script>
</body>
</html>
Output:-
Practical-5
Aim :- Node JS Concept.

[Link] [Link] callback Application.


function getUserData(id, callback) {
const users = {
1: { name: "Alice", age: 25 },
2: { name: "Bob", age: 30 },
3: { name: "Charlie", age: 35 },
};
setTimeout(() => {
if (users[id]) {
callback(null, users[id]);
} else {
callback("User not found", null);
}
}, 1000);
}
getUserData(3, function (error, data) {
if (error) {
[Link]("Error:", error);
} else {
[Link]("User data:", data);
}
});
Output:-
Practical-6
Aim :- Node JS File System.

[Link] [Link] Application to show all File operations.


const fs = require('fs');
const path = require('path');
const filePath = [Link](__dirname, '[Link]');
[Link](filePath, 'Hello, this is a new file.\n', (err) => {
if (err) throw err;
[Link]('File created and data written.');
[Link](filePath, 'Appending more data...\n', (err) => {
if (err) throw err;
[Link]('Data appended to file.');
[Link](filePath, 'utf8', (err, data) => {
if (err) throw err;
[Link]('File content:\n' + data);
const newFilePath = [Link](__dirname, 'renamed_example.txt');
[Link](filePath, newFilePath, (err) => {
if (err) throw err;
[Link]('File renamed.');
[Link](newFilePath, (err) => {
if (err) throw err;
[Link]('File deleted.');
});
});
Output:-
Practical-7
Aim:- Networking with Node Node JS.

[Link] [Link] Application to show client server communication.

[Link] Server
const net = require('net');
const server = [Link]((socket) => {
[Link]('client connected');
[Link]('end', () => {
[Link]('client disconnected');
});
[Link]('Hello from server!\n');
});
[Link](8080, () => {
[Link]('server is listening');
});

Output:-
2. TCP Client
const net = require('net');
const client = [Link]({ port: 8080 }, () => {
[Link]('connected to server!');
[Link]('Hello World!');
});
[Link]('data', (data) => {
[Link]([Link]());
[Link]();
});
[Link]('end', () => {
[Link]('disconnected from server');
});

Output:-
Practical-8
Aim:- Node JS Web Module.

[Link] [Link] Application to run on web client as well as server.

[Link] `[Link] (this will be served to the client)


<html>
<head>
<title>Sample Page</title>
</head>
<body>
Hello World!
</body>
</html>

[Link] `[Link] (runs the HTTP server on port `8081`)


const http = require('http');
const fs = require('fs');
const url = require('url');
[Link](function (request, response) {
const pathname = [Link]([Link]).pathname;
[Link]("Request for " + pathname + " received.");
[Link]([Link](1), function (err, data) {
if (err) {
[Link](err);
[Link](404, { 'Content-Type': 'text/html' });
[Link]("404 Not Found");
} else {
[Link](200, { 'Content-Type': 'text/html' });
[Link]([Link]());
[Link]();
}
});
}).listen(8081);
[Link]('Server running at [Link]
Output:-

[Link] [Link] (makes a request to the server)


const http = require('http');
const options = {
host: 'localhost',
port: 8081,
path: '/[Link]'
};
const callback = function(response) {
let body = '';
[Link]('data', function(data) {
body += data;
});
[Link]('end', function() {
[Link]("Received from server:");
[Link](body);
});
};
const req = [Link](options, callback);
[Link]();
Output:-

You might also like