Create an HTML form that contain the Student Registration details and write a JavaScript to validate
Student first and last name as it should not contain other than alphabets and age should be between
18 to 50.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Registration</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Student Registration</h2>
<form id="registrationForm">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>
<input type="submit" value="Register">
</form>
<p id="errorMessages" class="error"></p>
<script>
const form = document.getElementById('registrationForm');
const firstNameInput = document.getElementById('firstName');
const lastNameInput = document.getElementById('lastName');
const ageInput = document.getElementById('age');
const errorMessages = document.getElementById('errorMessages');
form.addEventListener('submit', function(event) {
let isValid = true;
const firstNameRegex = /^[a-zA-Z]+$/;
const lastNameRegex = /^[a-zA-Z]+$/;
const age = parseInt(ageInput.value);
if (!firstNameRegex.test(firstNameInput.value)) {
isValid = false;
errorMessages.textContent = 'First name should only contain alphabets.';
event.preventDefault();
} else if (!lastNameRegex.test(lastNameInput.value)) {
isValid = false;
errorMessages.textContent = 'Last name should only contain alphabets.';
event.preventDefault();
} else if (age < 18 || age > 50 || isNaN(age)) {
isValid = false;
errorMessages.textContent = 'Age should be a number between 18 and 50.';
event.preventDefault();
}
if (isValid) {
errorMessages.textContent = '';
}
});
</script>
</body>
</html>
Create an HTML form that contain the Employee Registration details and write a JavaScript to
validate DOB, Joining Date, and Salary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Registration</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Employee Registration</h2>
<form id="employeeRegistrationForm">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label for="joiningDate">Joining Date:</label>
<input type="date" id="joiningDate" name="joiningDate" required><br><br>
<label for="salary">Salary:</label>
<input type="number" id="salary" name="salary" required><br><br>
<input type="submit" value="Register">
</form>
<p id="errorMessages" class="error"></p>
<script>
const form = document.getElementById('employeeRegistrationForm');
const dobInput = document.getElementById('dob');
const joiningDateInput = document.getElementById('joiningDate');
const salaryInput = document.getElementById('salary');
const errorMessages = document.getElementById('errorMessages');
form.addEventListener('submit', function(event) {
let isValid = true;
// Validation for Date of Birth
const today = new Date();
const dob = new Date(dobInput.value);
if (dob >= today) {
isValid = false;
errorMessages.textContent = 'Date of Birth should be in the past.';
event.preventDefault();
}
// Validation for Joining Date
const joiningDate = new Date(joiningDateInput.value);
if (joiningDate >= today || joiningDate < dob) {
isValid = false;
errorMessages.textContent = 'Joining Date should be in the past and after Date of Birth.';
event.preventDefault();
}
// Validation for Salary
const salary = parseFloat(salaryInput.value);
if (isNaN(salary) || salary <= 0) {
isValid = false;
errorMessages.textContent = 'Salary should be a positive number.';
event.preventDefault();
}
if (isValid) {
errorMessages.textContent = '';
}
});
</script>
</body>
</html>
Create an HTML form for Login and write a JavaScript to validate email ID using Regular Expression
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Login">
</form>
<p id="errorMessages" class="error"></p>
<script>
const form = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const errorMessages = document.getElementById('errorMessages');
form.addEventListener('submit', function(event) {
const email = emailInput.value.trim();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
errorMessages.textContent = 'Please enter a valid email address.';
event.preventDefault();
} else {
errorMessages.textContent = '';
}
});
</script>
</body>
</html>
Write angular JS by using ng-click Directive to display an alert message after clicking the element
HTML FILE
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ng-click Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<button ng-click="displayAlert()">Click me</button>
</div>
<script>
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.displayAlert = function() {
alert('Button clicked!'); // Change this to any alert message you want
};
});
</script>
</body>
</html>
In this example, a button is created with the ng-click directive that
triggers the displayAlert() function when clicked. The AngularJS controller
myController is defined, and within it, the displayAlert() function simply
displays an alert message.
Make sure to include the AngularJS library by adding a <script> tag that
sources it from a CDN (Content Delivery Network) or your local setup. This
example uses version 1.8.2 of AngularJS from the CDN.
You can adjust the alert message or modify the function behavior
according to your requirements within the displayAlert() function in the
AngularJS controller.
Write an AngularJS script for addition of two numbers using ng-init, ng-model & ngbind. And also
Demonstrate ng-show, ng-disabled, ng-click directives on button component.
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Addition</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController" ng-init="initialize()">
<h2>Addition of Two Numbers</h2>
<label for="num1">Number 1:</label>
<input type="number" id="num1" ng-model="number1"><br><br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" ng-model="number2"><br><br>
<button ng-click="addNumbers()" ng-disabled="!number1 || !number2">Add</button>
<p ng-show="resultVisible">Result: <span ng-bind="result"></span></p>
</div>
<script>
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.initialize = function() {
$scope.number1 = 0;
$scope.number2 = 0;
$scope.result = 0;
$scope.resultVisible = false;
};
$scope.addNumbers = function() {
$scope.result = $scope.number1 + $scope.number2;
$scope.resultVisible = true;
};
});
</script>
</body>
</html>
Explanation:
ng-app="myApp" : Defines the AngularJS application.
ng-controller="myController" : Assigns the myController controller to
a specific section of the HTML.
ng-init="initialize()" : Initializes the values using the initialize()
function when the controller is initialized.
ng-model="number1" and ng-model="number2" : Binds the input
fields to the $scope variables number1 and number2.
ng-click="addNumbers()" : Calls the addNumbers() function when the
button is clicked.
ng-disabled="!number1 || !number2" : Disables the button if either
number1 or number2 is not provided.
ng-show="resultVisible" : Shows the paragraph if resultVisible is
true.
ng-bind="result" : Binds the result variable to the HTML to display
the addition result.
This script initializes two input fields for numbers, adds them together
when the button is clicked, and displays the result. The button is disabled
if either of the input fields is empty, and it shows the result when the
addition is performed. Adjust the HTML and functionality according to your
requirements.
Using angular js display the 10 student details in Table format (using ng-repeat directive use Array to
store data )
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Student Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<h2>Student Details</h2>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</tbody>
</table>
</div>
<script>
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.students = [
{ id: 1, name: 'John Doe', grade: 'A' },
{ id: 2, name: 'Alice Smith', grade: 'B' },
{ id: 3, name: 'Bob Johnson', grade: 'A+' },
{ id: 4, name: 'Emily Davis', grade: 'C' },
{ id: 5, name: 'David Brown', grade: 'B-' },
{ id: 6, name: 'Sophia Miller', grade: 'A' },
{ id: 7, name: 'Ethan Wilson', grade: 'B+' },
{ id: 8, name: 'Olivia Moore', grade: 'C-' },
{ id: 9, name: 'Liam Taylor', grade: 'A-' },
{ id: 10, name: 'Ava Anderson', grade: 'B' }
];
});
</script>
</body>
</html>
Explanation:
ng-app="myApp" : Defines the AngularJS application.
ng-controller="myController" : Assigns the myController controller to
a specific section of the HTML.
ng-repeat="student in students" : Loops through each student in the
students array.
{{ student.id }} , {{ student.name }} , {{ student.grade }} : Displays
the student details in the table cells.
The students array in the controller contains 10 sample student details
with IDs, names, and grades. The ng-repeat directive in the HTML iterates
through this array and displays the student details in a table format.
You can modify the students array to include the actual student details
you want to display in the table.
Using angular js Create a SPA (Single Page Application) that show Syllabus content of all subjects of
MSC(CS) Sem II (use ng-view)
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>MSC(CS) Semester II Syllabus</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/subject/:subjectName', {
templateUrl: function(params) {
return 'subjects/' + params.subjectName + '.html';
}
})
.otherwise({
redirectTo: '/'
});
});
</script>
</head>
<body>
<h1>MSC(CS) Semester II Syllabus</h1>
<div ng-view></div>
<ul>
<li><a href="#/subject/subject1">Subject 1</a></li>
<li><a href="#/subject/subject2">Subject 2</a></li>
<!-- Add more subjects -->
</ul>
</body>
</html>
This HTML sets up the basic structure for the SPA. It uses AngularJS and
ngRoute for routing different views/templates based on the URL.
You'll need to create separate HTML files for each subject inside a folder
named subjects. For example:
subjects/subject1.html :
<h2>Subject 1 Syllabus</h2>
<p>This is the syllabus content for Subject 1 of MSC(CS) Semester II.</p>
<!-- Add syllabus content -->
subjects/subject2.html :
<h2>Subject 2 Syllabus</h2>
<p>This is the syllabus content for Subject 2 of MSC(CS) Semester II.</p>
<!-- Add syllabus content -->
Replace the placeholders with the actual syllabus content for each
subject.
Explanation:
ng-app="myApp" : Defines the AngularJS application.
ng-view: This directive is used to render the templates based on the
route configuration.
$routeProvider: Configures routes for different URLs.
<ul> and <li>: Provides links to navigate to different subjects using
the href with #/subject/:subjectName .
Each subject's link ( #/subject/:subjectName ) corresponds to a specific
route, and AngularJS will load the respective template
(subjects/:subjectName.html ) into the ng-view based on the route
configuration.
Remember to adjust the subject names and content accordingly.
