Introduction

JavaScript is the programming language of the Web.
JavaScript is easy to learn.
JavaScript accepts both double and single quotes:
JavaScript is the world's most popular programming language.

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript is a programming language initially designed to interact with elements of web pages. Within web browsers, JavaScript consists of three main parts:

ECMAScript provides the core functionality.
The Document Object Model (DOM) provides interfaces for interacting with elements on web pages
The Browser Object Model (BOM) provides the browser API for interacting with the web browser.

JavaScript History

In 1995, JavaScript was developed by Brendan Eich, a Netscape developer. Initially named Mocha, it was later renamed to LiveScript.

Popular JavaScript Code Editors

The following are some popular JavaScript code editors:

Visual Studio Code
Atom
Notepad++
Vim
GNU Emacs

Of course! Here's another simple JavaScript program. This one prompts the user for their name and then displays a greeting message:

<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript Program</title>
</head>
<body>
<h1>Welcome to My Simple JavaScript Program</h1>
<script>
// Prompt the user for their name
var name = prompt("What is your name?");

// Display a greeting message
if (name) {
alert("Hello, " + name + "!");
} else {
alert("Hello, World!");
}
</script>
</body>
</html>

Certainly! Here's a simple JavaScript program that calculates the sum of two numbers provided by the user:

<!DOCTYPE html>
<html>
<head>
<title>Simple Sum Calculator</title>
</head>
<body>
<h1>Sum Calculator</h1>
<p>Enter two numbers to calculate their sum:</p>

<label for="num1">Number 1:</label>
<input type="number" id="num1">
<br>

<label for="num2">Number 2:</label>
<input type="number" id="num2">
<br>

<button onclick="calculateSum()">Calculate Sum</button>

<p id="result"></p>

<script>
function calculateSum() {
// Get the values of the input fields
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);

// Calculate the sum
var sum = num1 + num2;

// Display the result
document.getElementById("result").innerText = "Sum: " + sum;
}
</script>
</body>
</html>

Here's a more complete example of a simple website using HTML, CSS, and JavaScript. This site includes a navigation menu, a main content area with some text, and a simple interactive feature that shows an alert with a message when a button is clicked.

<!DOCTYPE html>
<html>
<head>
<title>My Simple Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
nav {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
font-size: 1.2em;
}
.container {
padding: 20px;
}
.button {
margin-top: 20px;
padding: 10px 20px;
background-color: #008CBA;
color: white;
border: none;
cursor: pointer;
font-size: 1em;
}
.button:hover {
background-color: #005f6b;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<h1>Welcome to My Simple Website</h1>
<p>This is an example of a simple website using HTML, CSS, and JavaScript. Explore the links above and click the button below to see an alert message.</p>
<button class="button" onclick="showMessage()">Click Me</button>
</div>

Creating a student management system involves building a web application that allows users to perform tasks like adding, deleting, updating, and viewing student records. Here's a basic guide on how to create a simple student management system using HTML, CSS, and JavaScript:

HTML Structure: Create the basic structure of your web page including input fields, buttons, and tables for displaying student data = save file name index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Management System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Student Management System</h1>
<form id="student-form">
<input type="text" id="name" placeholder="Name">
<input type="text" id="age" placeholder="Age">
<input type="text" id="grade" placeholder="Grade">
<button type="submit">Add Student</button>
</form>
<table id="student-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
<th>Action</th>
</tr>
</thead>
<tbody id="student-list">

</tbody>
</table>
</div>

2. CSS Styling: Style your HTML elements using CSS to make the layout visually appealing. = save file name styles.css

body {
font-family: Arial, sans-serif;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

input[type="text"], button {
margin-bottom: 10px;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
}

3. JavaScript Logic: Write JavaScript code to handle form submission, adding/deleting students, and updating the student list. = save file name script.js

function addStudent(name, age, grade) {
var table = document.getElementById('student-list');
var row = table.insertRow();
row.innerHTML = '<td>' + name + '</td><td>' + age + '</td><td>' + grade + '</td><td><button onclick="deleteStudent(this)">Delete</button></td>';
}

function deleteStudent(row) {
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById('student-list').deleteRow(rowIndex);
}

Creating a basic calculator using HTML, CSS, and JavaScript involves creating the necessary HTML structure for the calculator layout, styling it with CSS, and adding JavaScript to handle the calculations and user interactions. Here's a simple example:

HTML Structure: Define the layout of the calculator. = save file name index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>

2. CSS Styling: Style the calculator buttons and display.

.calculator {
max-width: 300px;
margin: 50px auto;
text-align: center;
}

#display {
width: 100%;
height: 50px;
margin-bottom: 20px;
font-size: 24px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

button {
width: 100%;
height: 50px;
font-size: 18px;
}

3. JavaScript Logic: Write JavaScript code to handle the calculator operations.

function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

function calculateResult() {
var expression = document.getElementById('display').value;
var result = eval(expression);
document.getElementById('display').value = result;
}

Creating an inventory management system involves handling data related to products, including adding, updating, deleting, and displaying them. Below is a basic example of how you can create an inventory management system using HTML, CSS, and JavaScript:

HTML Structure: Define the layout for managing inventory. = index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory Management System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Inventory Management System</h1>
<form id="product-form">
<input type="text" id="product-name" placeholder="Product Name">
<input type="number" id="product-quantity" placeholder="Quantity">
<button type="submit">Add Product</button>
</form>
<table id="product-table">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Action</th>
</tr>
</thead>
<tbody id="product-list">

</tbody>
</table>
</div>

2. CSS Styling: Style the inventory management layout.

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

input[type="text"], input[type="number"], button {
margin-bottom: 10px;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
}

3. JavaScript Logic: Write JavaScript code to handle adding products, displaying them, and any other necessary operations.

function addProduct(name, quantity) {
var table = document.getElementById('product-list');
var row = table.insertRow();
row.innerHTML = '<td>' + name + '</td><td>' + quantity + '</td><td><button onclick="deleteProduct(this)">Delete</button></td>';
}

function deleteProduct(row) {
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById('product-list').deleteRow(rowIndex);
}

This example allows you to add new mobile phones to the inventory, view the existing inventory, and search for specific mobile phones by name.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Shop Inventory</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Mobile Shop Inventory</h1>
<div id="addMobile">
<h2>Add New Mobile</h2>
<input type="text" id="mobileName" placeholder="Mobile Name">
<input type="text" id="mobileBrand" placeholder="Brand">
<input type="number" id="mobileQuantity" placeholder="Quantity">
<button onclick="addMobile()">Add Mobile</button>
</div>
<div id="viewInventory">
<h2>View Inventory</h2>
<input type="text" id="search" placeholder="Search by Name">
<button onclick="searchMobile()">Search</button>
<ul id="inventoryList"></ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

input[type="text"],
input[type="number"],
button {
margin: 5px;
padding: 5px;
}

button {
cursor: pointer;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

JavaScript (script.js):

let inventory = [];

function addMobile() {
const name = document.getElementById("mobileName").value;
const brand = document.getElementById("mobileBrand").value;
const quantity = parseInt(document.getElementById("mobileQuantity").value);

if (name && brand && quantity) {
const mobile = { name, brand, quantity };
inventory.push(mobile);
displayInventory();
clearInputs();
} else {
alert("Please fill in all fields.");
}
}

function clearInputs() {
document.getElementById("mobileName").value = "";
document.getElementById("mobileBrand").value = "";
document.getElementById("mobileQuantity").value = "";
}

function searchMobile() {
const searchTerm = document.getElementById("search").value.toLowerCase();
const filteredInventory = inventory.filter((mobile) =>
mobile.name.toLowerCase().includes(searchTerm)
);
displayFilteredInventory(filteredInventory);
}

Certainly! Here's a simple calculator implemented using HTML, CSS, and JavaScript:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.calculator {
max-width: 200px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}

#display {
width: 100%;
margin-bottom: 10px;
}

.buttons button {
width: 30%;
margin: 5px;
padding: 10px;
font-size: 20px;
cursor: pointer;
}

.buttons button:hover {
background-color: #f0f0f0;
}

JavaScript (script.js):

function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

Sure! Let's create a colorful calculator using HTML, CSS, and JavaScript. We'll add some styling to make it visually appealing.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()" class="clear">C</button>
<button onclick="appendToDisplay('7')" class="number">7</button>
<button onclick="appendToDisplay('8')" class="number">8</button>
<button onclick="appendToDisplay('9')" class="number">9</button>
<button onclick="appendToDisplay(' + ')" class="operator">+</button>
<button onclick="appendToDisplay('4')" class="number">4</button>
<button onclick="appendToDisplay('5')" class="number">5</button>
<button onclick="appendToDisplay('6')" class="number">6</button>
<button onclick="appendToDisplay(' - ')" class="operator">-</button>
<button onclick="appendToDisplay('1')" class="number">1</button>
<button onclick="appendToDisplay('2')" class="number">2</button>
<button onclick="appendToDisplay('3')" class="number">3</button>
<button onclick="appendToDisplay(' * ')" class="operator">*</button>
<button onclick="appendToDisplay('0')" class="number">0</button>
<button onclick="appendToDisplay('.')" class="number">.</button>
<button onclick="calculate()" class="equal">=</button>
<button onclick="appendToDisplay(' / ')" class="operator">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.calculator {
max-width: 300px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
}

#display {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
border: none;
border-radius: 5px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}

.clear {
background-color: #f44336;
color: #fff;
}

.number {
background-color: #4caf50;
color: #fff;
}

.operator {
background-color: #2196f3;
color: #fff;
}

.equal {
background-color: #ffeb3b;
color: #000;
}

button:hover {
opacity: 0.8;
}

JavaScript (script.js):

function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

Creating a simple notepad application in JavaScript involves handling user input, storing text data, and providing basic functionality like saving and loading. Below is a basic implementation:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notepad</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Notepad</h1>
<textarea id="textarea" rows="20"></textarea>
<div class="buttons">
<button onclick="saveText()">Save</button>
<button onclick="loadText()">Load</button>
<button onclick="clearText()">Clear</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}

.buttons button {
padding: 10px 20px;
margin-right: 10px;
font-size: 16px;
cursor: pointer;
}

.buttons button:last-child {
margin-right: 0;
}

JavaScript (script.js):

// Function to save text to localStorage
function saveText() {
const text = document.getElementById('textarea').value;
localStorage.setItem('notepad_text', text);
alert('Text saved successfully!');
}

// Function to load text from localStorage
function loadText() {
const text = localStorage.getItem('notepad_text');
if (text) {
document.getElementById('textarea').value = text;
alert('Text loaded successfully!');
} else {
alert('No saved text found!');
}
}

// Function to clear the text area
function clearText() {
document.getElementById('textarea').value = '';
}

Creating a login page in JavaScript involves creating the HTML structure for the login form and adding JavaScript to handle form validation and authentication. Here's a basic example:

HTML (index.html):

CSS (styles.css):

.container {
max-width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
button {
width: 100%;
margin-bottom: 10px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}

button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

.error {
color: red;
}

JavaScript (script.js):

document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();

// Get username and password
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

// Validate username and password (for demo purpose, simply check if they are not empty)
if (username.trim() === '' || password.trim() === '') {
document.getElementById('error').textContent = 'Username and password are required.';
return;
}

// Authenticate user (for demo purpose, hardcoded credentials)
if (username === 'admin' && password === 'password') {
// Redirect to dashboard or do something else
alert('Login successful!');
} else {
document.getElementById('error').textContent = 'Invalid username or password.';
}
});

Creating a simple login page with user registration and forgot password functionality involves a combination of HTML, CSS, and JavaScript. Below is a basic example to get you started. This example does not include backend functionality for handling user data, so in a real-world application, you would need to connect it to a server-side script and a database.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="form-container" id="login-form">
<h2>Login</h2>
<input type="email" id="login-email" placeholder="Email">
<input type="password" id="login-password" placeholder="Password">
<button onclick="login()">Login</button>
<p><a href="#" onclick="showForgotPasswordForm()">Forgot Password?</a></p>
<p>Don't have an account? <a href="#" onclick="showRegisterForm()">Register</a></p>
</div>

<div class="form-container" id="register-form" style="display: none;">
<h2>Register</h2>
<input type="text" id="register-name" placeholder="Name">
<input type="email" id="register-email" placeholder="Email">
<input type="password" id="register-password" placeholder="Password">
<button onclick="register()">Register</button>
<p>Already have an account? <a href="#" onclick="showLoginForm()">Login</a></p>
</div>

<div class="form-container" id="forgot-password-form" style="display: none;">
<h2>Forgot Password</h2>
<input type="email" id="forgot-password-email" placeholder="Email">
<button onclick="forgotPassword()">Reset Password</button>
<p><a href="#" onclick="showLoginForm()">Back to Login</a></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
width: 300px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}

.form-container {
display: flex;
flex-direction: column;
}

.form-container h2 {
margin-bottom: 20px;
}

.form-container input {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

.form-container button {
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.form-container button:hover {
background-color: #218838;
}

.form-container p {
margin-top: 10px;
}

.form-container a {
color: #007bff;
text-decoration: none;
}

.form-container a:hover {
text-decoration: underline;
}

JS STYLE (script.js)

function showLoginForm() {
document.getElementById('login-form').style.display = 'block';
document.getElementById('register-form').style.display = 'none';
document.getElementById('forgot-password-form').style.display = 'none';
}

function showRegisterForm() {
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'block';
document.getElementById('forgot-password-form').style.display = 'none';
}

function showForgotPasswordForm() {
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'none';
document.getElementById('forgot-password-form').style.display = 'block';
}

function login() {
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
// Add login logic here
alert('Login function not implemented.');
}

function register() {
const name = document.getElementById('register-name').value;
const email = document.getElementById('register-email').value;
const password = document.getElementById('register-password').value;
// Add registration logic here
alert('Register function not implemented.');
}

function forgotPassword() {
const email = document.getElementById('forgot-password-email').value;
// Add forgot password logic here
alert('Forgot password function not implemented.');
}

Creating a fully functional website for a computer institute that includes features such as admission fee management, timetable, income and expenses tracking, and course details requires a combination of front-end and back-end development. Here, I'll provide a simplified version of such a website using HTML, CSS, JavaScript (for the front-end), and a basic Node.js/Express server with a MongoDB database (for the back-end).

Front-End: HTML/CSS/JavaScript

1. `index.html`

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Computer Institute</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Computer Institute</h1> <nav> <ul> <li><a href="#courses">Courses</a></li> <li><a href="#timetable">Timetable</a></li> <li><a href="#fees">Admission Fees</a></li> <li><a href="#income-expenses">Income & Expenses</a></li> </ul> </nav> </header>

<section id="courses"> <h2>Courses</h2> <div id="course-list"></div> </section>

<section id="timetable"> <h2>Timetable</h2> <div id="timetable-list"></div> </section>

<section id="fees"> <h2>Admission Fees</h2> <form id="fee-form"> <input type="text" id="student-name" placeholder="Student Name" required> <input type="number" id="fee-amount" placeholder="Fee Amount" required> <button type="submit">Submit</button> </form> <div id="fee-list"></div> </section>

<section id="income-expenses"> <h2>Income & Expenses</h2> <form id="income-expense-form"> <input type="text" id="description" placeholder="Description" required> <input type="number" id="amount" placeholder="Amount" required> <select id="type"> <option value="income">Income</option> <option value="expense">Expense</option> </select> <button type="submit">Submit</button> </form> <div id="income-expense-list"></div> </section>

<script src="script.js"></script> </body> </html>

2. `styles.css`

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }

header { background-color: #333; color: #fff; padding: 10px 0; text-align: center; }

header h1 { margin: 0; }

nav ul { list-style: none; padding: 0; display: flex; justify-content: center; }

nav ul li { margin: 0 15px; }

nav ul li a { color: #fff; text-decoration: none; }

section { padding: 20px; margin: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

form input, form select, form button { display: block; margin: 10px 0; padding: 10px; width: 100%; max-width: 300px; }

form button { background-color: #333; color: #fff; border: none; cursor: pointer; }

form button:hover { background-color: #555; }

#course-list, #timetable-list, #fee-list, #income-expense-list { margin-top: 20px; }
3. script.js

document.addEventListener("DOMContentLoaded", function () { loadCourses(); loadTimetable(); loadFees(); loadIncomeExpenses();

document.getElementById('fee-form').addEventListener('submit', function (e) { e.preventDefault(); addFee(); });

document.getElementById('income-expense-form').addEventListener('submit', function (e) { e.preventDefault(); addIncomeExpense(); }); });

function addFee() { const student = document.getElementById('student-name').value; const amount = document.getElementById('fee-amount').value;

fetch('/api/fees', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ student, amount }), }).then(response => response.json()) .then(() => { loadFees(); }); }

function addIncomeExpense() { const description = document.getElementById('description').value; const amount = document.getElementById('amount').value; const type = document.getElementById('type').value;

fetch('/api/income-expenses', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ description, amount, type }), }).then(response => response.json()) .then(() => { loadIncomeExpenses(); }); }

Creating a calendar management system using JavaScript can be a complex task, but I'll guide you through a basic implementation. This example will cover displaying a monthly calendar and allowing users to navigate between months. We'll use HTML, CSS, and JavaScript for this purpose.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Management</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calendar-container">
<div class="calendar-header">
<button id="prev-month">Previous</button>
<h2 id="month-year"></h2>
<button id="next-month">Next</button>
</div>
<table class="calendar-table">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="calendar-body">

</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.calendar-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
}

.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: #007bff;
color: #fff;
}

.calendar-header button {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
}

.calendar-header h2 {
margin: 0;
font-size: 18px;
}

.calendar-table {
width: 100%;
border-collapse: collapse;
}

.calendar-table th, .calendar-table td {
padding: 10px;
text-align: center;
}

.calendar-table tbody td {
cursor: pointer;
}

.calendar-table tbody td:hover {
background-color: #f0f0f0;
}

JAVA SCRIPT (script.js)

// script.js

let currentDate = new Date();

function renderCalendar(date) {
const year = date.getFullYear();
const month = date.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const lastDate = new Date(year, month + 1, 0).getDate();

monthYearDisplay.textContent = `${date.toLocaleString('default', { month: 'long' })} ${year}`;
calendarBody.innerHTML = '';

let dateRow = document.createElement('tr');
for (let i = 0; i < firstDay; i++) {
dateRow.appendChild(document.createElement('td'));
}

for (let day = 1; day <= lastDate; day++) {
const dateCell = document.createElement('td');
dateCell.textContent = day;
dateRow.appendChild(dateCell);

if ((firstDay + day) % 7 === 0 || day === lastDate) {
calendarBody.appendChild(dateRow);
dateRow = document.createElement('tr');
}
}
}

prevMonthButton.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar(currentDate);
});

nextMonthButton.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar(currentDate);
});

renderCalendar(currentDate);
});

To create a system that not only displays the current date and time but also integrates with a calendar that updates automatically, we can expand on the previous example. We'll add a clock that shows the current time and ensure the calendar updates as the date changes.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Management</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calendar-container">
<div class="calendar-header">
<button id="prev-month">Previous</button>
<h2 id="month-year"></h2>
<button id="next-month">Next</button>
</div>
<div id="current-date-time">
<p id="current-date"></p>
<p id="current-time"></p>
</div>
<table class="calendar-table">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="calendar-body">

</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.calendar-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
}

.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: #007bff;
color: #fff;
}

.calendar-header button {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
}

.calendar-header h2 {
margin: 0;
font-size: 18px;
}

#current-date-time {
text-align: center;
margin: 16px 0;
}

#current-date, #current-time {
margin: 4px 0;
}

.calendar-table {
width: 100%;
border-collapse: collapse;
}

.calendar-table th, .calendar-table td {
padding: 10px;
text-align: center;
}

.calendar-table tbody td {
cursor: pointer;
}

.calendar-table tbody td:hover {
background-color: #f0f0f0;
}

JAVASCRIPT (script.js)

// script.js

document.addEventListener('DOMContentLoaded', function() {
const monthYearDisplay = document.getElementById('month-year');
const calendarBody = document.getElementById('calendar-body');
const prevMonthButton = document.getElementById('prev-month');
const nextMonthButton = document.getElementById('next-month');
const currentDateDisplay = document.getElementById('current-date');
const currentTimeDisplay = document.getElementById('current-time');

let currentDate = new Date();

monthYearDisplay.textContent = `${date.toLocaleString('default', { month: 'long' })} ${year}`;
calendarBody.innerHTML = '';

let dateRow = document.createElement('tr');
for (let i = 0; i < firstDay; i++) {
dateRow.appendChild(document.createElement('td'));
}

function updateCurrentDateTime() {
const now = new Date();
currentDateDisplay.textContent = now.toDateString();
currentTimeDisplay.textContent = now.toLocaleTimeString();
}

function checkDateChange() {
const now = new Date();
if (now.getDate() !== currentDate.getDate()) {
currentDate = now;
renderCalendar(currentDate);
}
updateCurrentDateTime();
}

prevMonthButton.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar(currentDate);
});

nextMonthButton.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar(currentDate);
});

renderCalendar(currentDate);
updateCurrentDateTime();
setInterval(checkDateChange, 1000);
});

To create a simple multi-page website with Home, Result, Contact Us, and About Us pages, using JavaScript for navigation, you can use a single HTML file and manipulate the DOM to display different content based on user interaction. Here's an example implementation:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Page Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#" id="home-link">Home</a></li>
<li><a href="#" id="result-link">Result</a></li>
<li><a href="#" id="contact-link">Contact Us</a></li>
<li><a href="#" id="about-link">About Us</a></li>
</ul>
</nav>
<div id="content">

</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

nav {
background-color: #007bff;
color: #fff;
padding: 10px 0;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

#content {
padding: 20px;
text-align: center;
}

JAVASCRIPT (script.js)

// script.js

document.addEventListener('DOMContentLoaded', function() {
const contentDiv = document.getElementById('content');

const pages = {
home: `<h1>Home Page</h1><p>Welcome to our website!</p>`,
result: `<h1>Result Page</h1><p>Here are your results.</p>`,
contact: `<h1>Contact Us</h1><p>You can contact us at example@example.com.</p>`,
about: `<h1>About Us</h1><p>We are a company dedicated to providing excellent service.</p>`
};

function loadPage(page) {
contentDiv.innerHTML = pages[page];
}

document.getElementById('home-link').addEventListener('click', function() {
loadPage('home');
});

document.getElementById('result-link').addEventListener('click', function() {
loadPage('result');
});

document.getElementById('contact-link').addEventListener('click', function() {
loadPage('contact');
});

document.getElementById('about-link').addEventListener('click', function() {
loadPage('about');
});

// Load home page by default
loadPage('home');
});

To create a layout with a top menu bar, a left area, a right area, and a bottom area using JavaScript, you can set up your HTML structure and use CSS for styling. JavaScript will be used to manage the content and interactions within these areas.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="top-menu">
<ul>
<li><a href="#" id="home-link">Home</a></li>
<li><a href="#" id="result-link">Result</a></li>
<li><a href="#" id="contact-link">Contact Us</a></li>
<li><a href="#" id="about-link">About Us</a></li>
</ul>
</div>
<div class="main-content">
<div class="left-area" id="left-area">

</div>
<div class="right-area" id="right-area">

</div>
</div>
<div class="bottom-area" id="bottom-area">

</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}

.container {
display: flex;
flex-direction: column;
height: 100%;
}

.top-menu {
background-color: #007bff;
color: white;
padding: 10px 0;
}

.top-menu ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}

.top-menu ul li {
margin: 0 15px;
}

.top-menu ul li a {
color: white;
text-decoration: none;
}

.main-content {
flex: 1;
display: flex;
justify-content: space-between;
padding: 20px;
background-color: #f0f0f0;
}

.left-area, .right-area {
width: 45%;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.bottom-area {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px;
}

JAVASCRIPT (script.js)

// script.js

document.addEventListener('DOMContentLoaded', function() {
const leftArea = document.getElementById('left-area');
const rightArea = document.getElementById('right-area');
const bottomArea = document.getElementById('bottom-area');

const content = {
home: {
left: `<h2>Home Left</h2><p>This is the home left area content.</p>`,
right: `<h2>Home Right</h2><p>This is the home right area content.</p>`,
bottom: `<p>Home Bottom Content</p>`
},
result: {
left: `<h2>Result Left</h2><p>This is the result left area content.</p>`,
right: `<h2>Result Right</h2><p>This is the result right area content.</p>`,
bottom: `<p>Result Bottom Content</p>`
},
contact: {
left: `<h2>Contact Left</h2><p>This is the contact left area content.</p>`,
right: `<h2>Contact Right</h2><p>This is the contact right area content.</p>`,
bottom: `<p>Contact Bottom Content</p>`
},
about: {
left: `<h2>About Left</h2><p>This is the about left area content.</p>`,
right: `<h2>About Right</h2><p>This is the about right area content.</p>`,
bottom: `<p>About Bottom Content</p>`
}
};

function loadPage(page) {
leftArea.innerHTML = content[page].left;
rightArea.innerHTML = content[page].right;
bottomArea.innerHTML = content[page].bottom;
}

document.getElementById('home-link').addEventListener('click', function() {
loadPage('home');
});

document.getElementById('result-link').addEventListener('click', function() {
loadPage('result');
});

document.getElementById('contact-link').addEventListener('click', function() {
loadPage('contact');
});

document.getElementById('about-link').addEventListener('click', function() {
loadPage('about');
});

// Load home page by default
loadPage('home');
});

Creating a website similar to SarkariResult.com using HTML, CSS, and JavaScript involves several steps. SarkariResult.com typically has a layout that includes navigation, sections for the latest updates, job notifications, results, admit cards, etc. Here, I'll guide you through creating a basic version of such a website with a focus on the front-end implementation.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarkari Result</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Sarkari Result</h1>
<nav>
<ul>
<li><a href="#" id="home-link">Home</a></li>
<li><a href="#" id="latest-link">Latest Updates</a></li>
<li><a href="#" id="jobs-link">Jobs</a></li>
<li><a href="#" id="results-link">Results</a></li>
<li><a href="#" id="admit-card-link">Admit Card</a></li>
<li><a href="#" id="contact-link">Contact Us</a></li>
</ul>
</nav>
</header>
<main id="content">

</main>
<footer>
<p>© 2024 Sarkari Result. All rights reserved.</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
background-color: #007bff;
color: white;
padding: 20px 0;
text-align: center;
}

header h1 {
margin: 0;
}

nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin: 10px 0 0 0;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}

main {
flex: 1;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 20px;
}

footer {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px 0;
}

JAVASCRIPT (script.js)

// script.js

document.addEventListener('DOMContentLoaded', function() {
const contentDiv = document.getElementById('content');

const pages = {
home: `<h2>Welcome to Sarkari Result</h2><p>Get the latest updates on government jobs, results, and more.</p>`,
latest: `<h2>Latest Updates</h2><ul><li>Update 1</li><li>Update 2</li><li>Update 3</li></ul>`,
jobs: `<h2>Job Notifications</h2><ul><li>Job 1</li><li>Job 2</li><li>Job 3</li></ul>`,
results: `<h2>Results</h2><ul><li>Result 1</li><li>Result 2</li><li>Result 3</li></ul>`,
admitCard: `<h2>Admit Cards</h2><ul><li>Admit Card 1</li><li>Admit Card 2</li><li>Admit Card 3</li></ul>`,
contact: `<h2>Contact Us</h2><p>Email: contact@sarkariresult.com</p><p>Phone: 123-456-7890</p>`
};

function loadPage(page) {
contentDiv.innerHTML = pages[page];
}

document.getElementById('home-link').addEventListener('click', function() {
loadPage('home');
});

document.getElementById('latest-link').addEventListener('click', function() {
loadPage('latest');
});

document.getElementById('jobs-link').addEventListener('click', function() {
loadPage('jobs');
});

document.getElementById('results-link').addEventListener('click', function() {
loadPage('results');
});

document.getElementById('admit-card-link').addEventListener('click', function() {
loadPage('admitCard');
});

document.getElementById('contact-link').addEventListener('click', function() {
loadPage('contact');
});

// Load home page by default
loadPage('home');
});

Create a Prime Number Finder using HTML CSS and JavaScript

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<body>
   <div class="outer-box utility_flex">
       <div class="box">
           <div class="inner-box utility_flex">
               <div class="gfglogo utility_flex">
                   <h1 class="logo-text">
                       LaxmiComputer
                   </h1>
                   <p class="sub-heading">
                       Prime Number Finder
                   </p>
               </div>

               <div class="btn-container utility_flex ">
                   <button class="btn-clear btn-style"
                           id="id-clear">
                       Clear
                   </button>
                   <button class="btn-submit btn-style"
                           id="sub-id">
                       Submit
                   </button>
               </div>

           </div>
           <div class="para-text">
               <p class="message"
               id="dom-msg">
               Result
               </p>
           </div>
       </div>
   </div>
   <script src="script.js"></script>
</body>

</html>

CSS (Style.css)

/* style.css */
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.utility_flex {
   display: flex;
   justify-content: center;
   align-items: center;
}

.box {
   height: 400px;
   width: 400px;
   background-color: rgb(207, 224, 159);
   border-radius: 15px;
   padding: 20px;
   font-family: 'Poppins', sans-serif;
}

.outer-box {
height: 100vh;
}

.inner-box {
flex-direction: column;
gap: 30px;
}

.btn-container {
gap: 15px;
}

.logo-text {
color: rgb(31, 145, 31);
}

.gfglogo {
flex-direction: column;
gap: 10px;
}

.btn-style {
   width: 100px;
   height: 30px;
   background: green;
   border-radius: 15px;
   color: whitesmoke;
   text-align: center;
   padding: 3px;
   border: none;
}

.message {
   background-color: rgb(47, 71, 11);
   height: 100px;
   text-align: center;
   color: antiquewhite;
   padding: 25px;
   border-radius: 5px;
   font-size: 20px;
}

input {
   height: 50px;
   width: 300px;
   border: 2px solid rgb(14, 112, 14);
   border-radius: 15px;
   text-align: center;
   font-size: 15px;
}

.para-text {
padding: 20px;
}

.sub-heading {
color: rgb(12, 78, 12);
font-size: 25px;
}

Javascript (script.js)

// script.js
function checkPrime(num) {
   if (num <= 1) {
       return false;
   }
   for (
       let i = 2;
       i <= Math.sqrt(num); i++
   ) {
       if (num % i === 0) {
           return false;
       }
   }
   return true;
}

document
   .getElementById("sub-id")
   .addEventListener("click",
       function () {
           let num =
               document.getElementById("input-id").value;
           let result = checkPrime(num);

           if (result) {
               document.getElementById("dom-msg").innerHTML =
                   num + " is a prime number.";
           } else {
               document.getElementById("dom-msg").innerHTML =
                   num + " is not a prime number.";
           }
       }
   );
document.getElementById("id-clear")
   .addEventListener("click", () => {
       document.getElementById("input-id").value = "";
       document.getElementById("dom-msg").innerHTML = "Result";
   })

How To Build Notes App Using Html CSS JavaScript ?

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<body>
   <div class="btn">
       <div class="heading">
           <h1>Note Taking App</h1>
       </div>
       <button id="addBtn">
           <i class="fas fa-plus"></i>
           Add Note
       </button>
   </div>
   <div id="main">

   </div>
   <script src=
"https://kit.fontawesome.com/bf520e6492.js"
           crossorigin="anonymous">
   </script>
   <script src="./script.js"></script>
</body>

</html>

CSS (style.css)

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

#main {
   width: 100%;
   min-height: 100vh;
   padding-bottom: 50px;
   background-color: #81ecec;
   display: flex;
   flex-wrap: wrap;
}

#addBtn {
   position: fixed;
   left: 18px;
   top: 10px;
   background-color: #2d3436;
   color: white;
   padding: 10px;
   border: 0;
   outline: 0;
   border-radius: 5px;
}

.btn {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #81ecec;
   margin-top: 0px;
}

.note {
   width: 380px;
   height: 260px;
   background-color: white;
   margin: 15px;
   margin-top: 55px;
   border-radius: 10px;
   margin-left: 20px;
   margin-bottom: 30px;
}

.icons {
   width: 100%;
   background-color: #0d7390;
   color: white;
   padding: 5px;
   display: flex;
   justify-content: start;
   border-radius: 10px 10px 0px 0px;
}

.icons i {
padding: 5px;
cursor: pointer;
}

.note textarea {
   border: none;
   width: 100%;
   height: 87%;
   resize: none;
   padding: 10px;
   font-size: 18px;
   border-radius: 15px;
   background-color: beige;
   border-radius: 0px 0px 10px 10px;
}

.title-div textarea {
   border-radius: 0px 0px 0px 0px;
   margin-bottom: -4px;
   background-color: #a4cad4;
   font-weight: bolder;
   font-size: x-large;
}

.heading {
   position: fixed;
   margin-top: 46px;
   color: ivory;
}

.note textarea:focus {
border: 0;
outline: 0;
}

JAVASCRIPT (script.js)

const addBtn = document.querySelector("#addBtn");
const main = document.querySelector("#main");

// Click event listener
addBtn.addEventListener("click", function () {
addNote();
});

// Save button function
const saveNotes = () => {

   // Select content textareas
   const notes =
       document.querySelectorAll(".note .content");

   // Select title textareas
   const titles =
       document.querySelectorAll(".note .title");

const data = [];

   notes.forEach((note, index) => {
       const content = note.value;
       const title = titles[index].value;
       console.log(title);
       if (content.trim() !== "") {
           data.push({ title, content });
       }
   });

   const titlesData =
       data.map((item) => item.title);
   console.log(titlesData);
   localStorage.setItem(
       "titles", JSON.stringify(titlesData));

   const contentData =
       data.map((item) => item.content);
   localStorage.setItem(
       "notes", JSON.stringify(contentData));
};

// Addnote button function
const addNote = (text = "", title = "") => {
   const note = document.createElement("div");
   note.classList.add("note");
   note.innerHTML = `
   <div class="icons">
       <i class="save fas fa-save"
           style="color:red">
       </i>
       <i class="trash fas fa-trash"
           style="color:yellow">
       </i>
   </div>
   <div class="title-div">
       <textarea class="title"
           placeholder="Write the title ...">${title}
       </textarea>
   </div>
   <textarea class="content"
       placeholder="Note down your thoughts ...">${text}
   </textarea>
   `;
   function handleTrashClick() {
       note.remove();
       saveNotes();
   }
   function handleSaveClick() {
       saveNotes();
   }
   const delBtn = note.querySelector(".trash");
   const saveButton = note.querySelector(".save");
   const textareas = note.querySelectorAll("textarea");

   delBtn.addEventListener("click", handleTrashClick);
   saveButton.addEventListener("click", handleSaveClick);
   main.appendChild(note);
   saveNotes();
};

// Loading all the notes those are saved in
// the localstorage
function loadNotes() {

   const titlesData =
       JSON.parse(localStorage.getItem("titles")) || [];
   const contentData =
       JSON.parse(localStorage.getItem("notes")) || [];

   for (let i = 0;
           i < Math.max(
               titlesData.length, contentData.length); i++) {
       addNote(contentData[i], titlesData[i]);
   }
}
loadNotes();

Create a Button Loading Animation in HTML CSS & JavaScript

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
       content="width=device-width, initial-scale=1.0">
   <title>Button Loading Animation</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="form-container">
       <h1>LaxmiComputer</h1>
       <form id="my-form">
           <label for="username">Username:</label>
           <input type="text" id="username"
               name="username" required>
           <br><br>
           <label for="password">Password:</label>
           <input type="password" id="password"
               name="password" required>
           <br><br>
           <div class="btn-container">
               <button id="loadButton" class="btn">
                   Submit
                   <div class="loader" id="loader">

                   </div>
               </button>
           </div>
       </form>
   </div>
   <script src="script.js"></script>
</body>
</html>

CSS (style.css)

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
}

.form-container {

   background-color: gray;
   width: 40%;
   padding: 20px;
}

.btn-container {
display: flex;
align-items: center;
}

.btn {
padding: 10px 20px;

   background-color: blue;
   color: #fff;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.btn:hover {
background-color: #0056b3;
}

.loader {
   display: none;
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-top: 4px solid blue;
   border-radius: 50%;
   width: 25px;
   height: 25px;
   animation: spin 1s linear infinite;
   margin-left: 10px;
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }

   100% {
       transform: rotate(360deg);
   }
}

.loading {
background-color: #ccc;
pointer-events: none;
}

JAVASCRIPT (script.js)

const loadButton =
   document.getElementById('loadButton');
const loader =
   document.getElementById('loader');
const demoForm =
   document.getElementById('my-form');

loadButton.addEventListener('click', () => {

   // Disable the button
   // and prevent further clicks
   loadButton.disabled = true;
   loader.style.display = 'inline-block';

   setTimeout(() => {

       // Restore the button state
       //after the operation is done
       loadButton.disabled = false;
       loader.style.display = 'none';
       demoForm.reset();
   }, 2000);
});

Create a Quiz App with Timer using HTML CSS and JavaScript

HTML (highscore.html)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet"
href="./style.css" />
<script src="./highScore.js"></script>
<title>Code Quiz - High Scores</title>
</head>

<body>
<div class="scores">
<h1>Highscores</h1>
<ol id="highscores"></ol>
<a href="index.html">
<button>
Re-Start
</button>
</a>
<button id="clear">
Clear Highscores
</button>
</div>
</body>

</html>

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<body>
<div class="containerNew">
<header>
<div>
<a href="./highscore.html">
<button class="scores-header"
id="view-high-scores">
View High Scores
</button>
</a>
</div>

<main class="quiz">
<div id="quiz-start">
<div class="landing"
id="start-screen">
<h1 id="top">
Laxmi Computer
</h1>
<h1>
Coding Quiz Challenge
</h1>
<p>
Try to answer the following
code-related questions with
in the time limit. Keep in
mind that incorrect answers
will penalize your score/time
by ten seconds!
</p>
<button id="start">
Start Quiz
</button>
</div>
</div>

<div class="hide" id="quiz-end">
<h2>All Done!</h2>
<p>Your final score is:
<span id="score-final">
</span>
</p>
<p>
Please enter your name:
<input type="text"
id="name"
max="3" />
<button id="submit-score">
Submit
</button>
</p>
</div>

</html>

CSS (style.css)

/* Style.css */

* {
font-family: Georgia, Times, "Times New Roman", serif;
}

.quiz,
.scores {
margin: 50px auto 0 auto;
max-width: 400px;
}

#top {
color: green;
}

.containerNew {
border: 5px solid;
position: absolute;
top: 50%;
left: 50%;
height: 580px;
width: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}

p {
margin: 15px 15px;
}

.landing {
text-align: center;
}

.scoresHeader {
position: absolute;
top: 15px;
left: 15px;
}

.timer {
position: absolute;
top: 15px;
right: 15px;
}

button {
display: inline-block;
margin: 10px;
cursor: pointer;
color: #fff;
background-color: #52865a;
border-radius: 5px;
border: 0;
padding: 20px;
}

button:hover {
background-color: #2a8d12;
}

.options button {
display: block;
}

input[type="text"] {
font-size: 100%;
}

.hide {
display: none;
}

.feedback {
font-style: bold;
font-size: 120%;
margin-top: 20px;
padding-top: 15px;
color: #fff;
border-top: 2px solid #4B0082;
}

ol {
padding-left: 15px;
max-height: 600px;
overflow: auto;
}

li {
padding: 5px;
list-style: decimal inside none;
}

li:nth-child(odd) {
background-color: #dfdae7;
}

@media screen and (max-width: 768px) {
.containerNew {
width: 80%;
}
}

@media screen and (max-width: 575px) {
.containerNew {
width: 90%;
}

.quiz,
.scores {
max-width: 90%;
}
}

SCRIPT (script.js)

// script.js

let questions = [
{
prompt: `Inside which HTML
element do we put
the JavaScript?`,
options: [
"<javascript>",
"<js>",
"<script>",
"<scripting>",
],
answer: "<script>",
},

{
prompt: `How do you call a
function named
myFunction?`,
options: [
"call myFunction()",
"myFunction()",
"call function myFunction",
"Call.myFunction",
],
answer: "myFunction()",
},

{
prompt: `How does a for loop
start?`,
options: [
"for (i = 0; i <= 5; i++)",
"for (i = 0; i <= 5)",
"for i = 1 to 5",
" for (i <= 5; i++)",
],
answer: "for (i = 0; i <= 5; i++)",
},

{
prompt: `In JavaScript, which
of the following is
a logical operator?`,
options: ["|", "&&", "%", "/"],
answer: "&&",
},

{
prompt: `A named element in a
JavaScript program that
is used to store and
retrieve data is a _____.`,
options: [
"method",
"assignment operator",
"letiable",
"string",
],
answer: "letiable",
},
];

// Get Dom Elements

let questionsEl =
document.querySelector(
"#questions"
);
let timerEl =
document.querySelector("#timer");
let choicesEl =
document.querySelector("#options");
let submitBtn = document.querySelector(
"#submit-score"
);
let startBtn =
document.querySelector("#start");
let nameEl =
document.querySelector("#name");
let feedbackEl = document.querySelector(
"#feedback"
);
let reStartBtn =
document.querySelector("#restart");

// Quiz's initial state
let currentQuestionIndex = 0;
let time = questions.length * 15;
let timerId;

// Start quiz and hide frontpage

function quizStart() {
timerId = setInterval(
clockTick,
1000
);
timerEl.textContent = time;
let landingScreenEl =
document.getElementById(
"start-screen"
);
landingScreenEl.setAttribute(
"class",
"hide"
);
questionsEl.removeAttribute(
"class"
);
getQuestion();
}

// Loop through array of questions and
// Answers and create list with buttons
function getQuestion() {
let currentQuestion =
questions[currentQuestionIndex];
let promptEl =
document.getElementById(
"question-words"
);
promptEl.textContent =
currentQuestion.prompt;
choicesEl.innerHTML = "";
currentQuestion.options.forEach(
function (choice, i) {
let choiceBtn =
document.createElement(
"button"
);
choiceBtn.setAttribute(
"value",
choice
);
choiceBtn.textContent =
i + 1 + ". " + choice;
choiceBtn.onclick =
questionClick;
choicesEl.appendChild(
choiceBtn
);
}
);
}

// Check for right answers and deduct
// Time for wrong answer, go to next question

// End quiz by hiding questions,
// Stop timer and show final score

function quizEnd() {
clearInterval(timerId);
let endScreenEl =
document.getElementById(
"quiz-end"
);
endScreenEl.removeAttribute(
"class"
);
let finalScoreEl =
document.getElementById(
"score-final"
);
finalScoreEl.textContent = time;
questionsEl.setAttribute(
"class",
"hide"
);
}

// End quiz if timer reaches 0

function clockTick() {
time--;
timerEl.textContent = time;
if (time <= 0) {
quizEnd();
}
}

// Save score in local storage
// Along with users' name

// Save users' score after pressing enter

function checkForEnter(event) {
if (event.key === "Enter") {
saveHighscore();
alert(
"Your Score has been Submitted"
);
}
}
nameEl.onkeyup = checkForEnter;

// Save users' score after clicking submit

submitBtn.onclick = saveHighscore;

// Start quiz after clicking start quiz

startBtn.onclick = quizStart;

JAVASCRIPT (highscore.js)

// highScore.js

let scoresBtn = document.querySelector(
"#view-high-scores"
);

// Rank previous scores in order by
// Retrieving scores from localStorage

// Clear previous scores when users click clear
function clearHighscores() {
window.localStorage.removeItem(
"highscores"
);
window.location.reload();
}
document.getElementById(
"clear"
).onclick = clearHighscores;

printHighscores();

Age Calculator Design using HTML CSS and JavaScript

HTML (index.html)

<!DOCTYPE html>
<html>

<head>
<title>Age Calculator</title>
<link rel="stylesheet"
href="style.css" />
</head>

<body>
<div class="card">
<header>
<h1>AGE CALCULATOR</h1>
</header>

<div>
<label>Enter your Date of Birth</label><br>
<input id="inputDob"
type="date"
value="2000-01-01" />
</div>
<br />

<div>
<label>Current Date</label><br>
<input id="cdate"
type="date"
value="" />
</div>
<br />

<button type="button"
onclick="getDOB()">
Calculate
</button>
<br />
<div id="currentAge"></div>
<script src="script.js"></script>
</div>
</body>

</html>

CSS (style.css)

/* Setting alignment and fonts */
body {
display: flex;
text-align: center;
font-family:
"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
}

/* Defining card properties */
.card {
min-width: 30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
margin: auto;
padding: 2%;
padding-top: 0%;
}

header {
font-size: larger;
}

header h1 {
background-color: rgb(231, 231, 231);
color: green;
font-size: xx-large;
padding: 1%;
}

/* Setting font and margin for text before input box */
label {
font-size: large;
margin: 2%;
}

button {
font-size: large;
padding: 1%;
}

input {
width: 200px;
height: 50px;
font-size: larger;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

#inputDob {
margin: 2%;
}

p {
font-size: larger;
margin: 5%;
}

#currentAge {
min-width: 30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
margin: auto;
margin-top: 5%;
padding: 5%;
padding-top: 7%;
font-size: larger;
}

JAVASCRIPT (script.js)

// Define funtion to get calculated Age
function getDOB() {

// Getting input from html input element
let data =
document.getElementById("inputDob").value;

// Convert input data to usable format
// as day,month and year
let dob = new Date(data);
let day = dob.getDate();
let month = dob.getMonth();
let year = dob.getFullYear();

// Getting current date and calculating the difference
let now =
new Date(document.getElementById("cdate").value);
console.log(now);
let yearDiff = now.getFullYear() - year;
let monthDiff = now.getMonth() - month;
let dateDiff = now.getDate() - day;

// Calculating the Age
if (yearDiff < 0) console.log("invalid date");
else if (monthDiff > 0) {
console.log(yearDiff);
} else if (monthDiff === 0 && dateDiff >= 0) {
console.log(yearDiff);
} else {
yearDiff = yearDiff - 1;
if (monthDiff <= 0)
if (dateDiff > 0) monthDiff = 12 + monthDiff;
else monthDiff = 11 - monthDiff;
}
if (dateDiff < 0) {
dateDiff = 30 + dateDiff;
monthDiff -= 1;
}

// Show calculated age as output
// and invalid if wrong input is given
if (yearDiff < 0)
document.getElementById("currentAge").innerHTML = "Invalid Date";
else
document.getElementById("currentAge").innerHTML =
"Your current Age is " + yearDiff + " years "
+ monthDiff + " months " + dateDiff + " days";
}

// Function to provide default date value
function currentDate() {
console.log(formatted());
let d = document.getElementById("cdate");
d.value = formatted();
}

function formatted(date = new Date()) {
return [
date.getFullYear(),
short(date.getMonth() + 1),
short(date.getDate()),
].join("-");
}
function short(num) {
return num.toString().padStart(2, "0");
}

// Calling current date function
// to set default date value
currentDate();

Price Range Slider with Min-Max Input using HTML CSS and JavaScript

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <title>
       Custom Price Range Slider--GFG
   </title>
   <link rel="stylesheet"
       href="style.css">
   <meta name="viewport"
       content="width=device-width,
               initial-scale=1.0">
</head>

<body>
   <div class="main">
       <div class="gfg">
           <p>Laxmi Computer Education</p>
       </div>
       <div class="custom-wrapper">

           <div class="header">
               <h2 class="projtitle">
                   Price Range Slider
               </h2>
           </div>

           <div class="price-input-container">
               <div class="price-input">
                   <div class="price-field">
                       <span>Minimum Price</span>
                       <input type="number"
                           class="min-input"
                           value="2500">
                   </div>
                   <div class="price-field">
                       <span>Maximum Price</span>
                       <input type="number"
                           class="max-input"
                           value="8500">
                   </div>
               </div>
               <div class="slider-container">
                   <div class="price-slider">
                   </div>
               </div>
           </div>

<div class="range-input">
               <input type="range"
                   class="min-range"
                   min="0"
                   max="10000"
                   value="2500"
                   step="1">
               <input type="range"
                   class="max-range"
                   min="0"
                   max="10000"
                   value="8500"
                   step="1">
           </div>
       </div>
   </div>
   <script src="script.js"></script>
</body>

</html>

CSS (style.css)

/* Style.css */
* {
margin: 0;
padding: 0;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   background: #ffffff;
   flex-direction: column;
}

.main {
   background-color: #fff;
   border-radius: 15px;
   box-shadow: 0 0 20px
       rgba(0, 0, 0, 0.2);
   padding: 20px;
   transition: transform 0.2s;
   width: 600px;
}

.main:hover {
transform: scale(1.05);
}

.gfg {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: 600;
   color: #01940b;
}

.custom-wrapper {
   margin: 0;
   width: 70%;
   padding: 0px 25px 40px;
   position: relative;
   left: 63px;
}

.header h2 {
   font-size: 30px;
   color: #01940b;
   display: flex;
   justify-content: center;
   padding: 20px;
}

/* Styles for the price input container */
.price-input-container {
width: 100%;
}

.price-input .price-field {
display: flex;
margin-bottom: 22px;
}

.price-field span {
   margin-right: 10px;
   margin-top: 6px;
   font-size: 17px;
}

.price-field input {
   flex: 1;
   height: 35px;
   font-size: 15px;
   font-family: "DM Sans", sans-serif;
   border-radius: 9px;
   text-align: center;
   border: 0px;
   background: #e4e4e4;
}

.price-input {
   width: 100%;
   font-size: 19px;
   color: #555;
}

/* Remove Arrows/Spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.slider-container {
width: 100%;
}

.slider-container {
   height: 6px;
   position: relative;
   background: #e4e4e4;
   border-radius: 5px;
}

.slider-container .price-slider {
   height: 100%;
   left: 25%;
   right: 15%;
   position: absolute;
   border-radius: 5px;
   background: #01940b;
}

.range-input {
position: relative;
}

.range-input input {
   position: absolute;
   width: 100%;
   height: 5px;
   background: none;
   top: -5px;
   pointer-events: none;
   cursor: pointer;
   -webkit-appearance: none;
}

/* Styles for the range thumb in WebKit browsers */
input[type="range"]::-webkit-slider-thumb {
   height: 18px;
   width: 18px;
   border-radius: 70%;
   background: #555;
   pointer-events: auto;
   -webkit-appearance: none;
}

@media screen and (max-width: 768px) {
   .main {
       width: 80%;
       margin-right: 5px;
   }

   .custom-wrapper {
       width: 100%;
       left: 0;
       padding: 0 10px;
   }

   .projtitle {
       width: 100%;
       position: relative;
       right: 26px;
   }

   .price-input {
       flex-direction: column;
       align-items: center;
   }

   .price-field {
       margin-bottom: 10px;
   }
}

JAVASCRIPT (script.js)

// Script.js
const rangevalue =
document.querySelector(".slider-container .price-slider");
const rangeInputvalue =
document.querySelectorAll(".range-input input");

// Set the price gap
let priceGap = 500;

// Adding event listners to price input elements
const priceInputvalue =
document.querySelectorAll(".price-input input");
for (let i = 0; i < priceInputvalue.length; i++) {
priceInputvalue[i].addEventListener("input", e => {

       // Parse min and max values of the range input
       let minp = parseInt(priceInputvalue[0].value);
       let maxp = parseInt(priceInputvalue[1].value);
       let diff = maxp - minp

       if (minp < 0) {
           alert("minimum price cannot be less than 0");
           priceInputvalue[0].value = 0;
           minp = 0;
       }

       // Validate the input values
       if (maxp > 10000) {
           alert("maximum price cannot be greater than 10000");
           priceInputvalue[1].value = 10000;
           maxp = 10000;
       }

       if (minp > maxp - priceGap) {
           priceInputvalue[0].value = maxp - priceGap;
           minp = maxp - priceGap;

           if (minp < 0) {
               priceInputvalue[0].value = 0;
               minp = 0;
           }
       }

       // Check if the price gap is met
       // and max price is within the range
       if (diff >= priceGap && maxp <= rangeInputvalue[1].max) {
           if (e.target.className === "min-input") {
               rangeInputvalue[0].value = minp;
               let value1 = rangeInputvalue[0].max;
               rangevalue.style.left = `${(minp / value1) * 100}%`;
           }
           else {
               rangeInputvalue[1].value = maxp;
               let value2 = rangeInputvalue[1].max;
               rangevalue.style.right =
                   `${100 - (maxp / value2) * 100}%`;
           }
       }
   });

   // Add event listeners to range input elements
   for (let i = 0; i < rangeInputvalue.length; i++) {
       rangeInputvalue[i].addEventListener("input", e => {
           let minVal =
               parseInt(rangeInputvalue[0].value);
           let maxVal =
               parseInt(rangeInputvalue[1].value);

Create your own Lorem ipsum बहुत अच्छा जेनरेटर using HTML CSS and JavaScript

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
       content="width=device-width,
                   initial-scale=1.0">
   <title>Lorem Ipsum Generator (बहुत अच्छा जेनरेटर)</title>
   <link rel="stylesheet" href="styles.css">
</head>

<body>
   <header>
       <h1>Lorem Ipsum Generator (बहुत अच्छा जेनरेटर)</h1>
   </header>
   <main>
       <div class="options">
           <div class="paragraphs">
               <label for="paragraphs">
                   Paragraphs:
               </label>
               <input type="range"
                   id="paragraphs"
                   min="1" max="50"
                   value="1">
               <span id="paragraphsValue">
                   1
               </span>
           </div>
           <div class="words">
               <label for="words">
                   Words per Paragraph:
               </label>
               <input type="range"
                   id="words"
                   min="1"
                   max="100"
                   value="10">
               <span id="wordsValue">
                   10
               </span>
           </div>
           <div class="tags">
               <label for="tags">
                   Tag:
               </label>
               <select id="tags">
               </select>
           </div>
           <div class="include">
               <label for="include">
                   Include HTML:
               </label>
               <select id="include">
                   <option value="Yes">
                       Yes
                   </option>
                   <option value="No">
                       No
                   </option>
               </select>
           </div>
           <button id="generate">
               Generate Lorem Ipsum
           </button>
       </div>
       <div class="output">

           
       </div>
   </main>
   <script src="script.js"> </script>
</body>

</html>

CSS (styles.css)

/* Styles.css*/
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

header {
   background-color: white;
   color: green;
   text-align: center;
   padding: 20px 0;
   box-shadow: 0px 4px 8px 0px
       rgba(0, 0, 0, 0.2);
}

h1 {
font-size: 28px;
}

main {
   max-width: 800px;
   margin: 20px auto;
   padding: 20px;
   background-color: #fff;
   box-shadow: 0px 4px 8px
       rgba(0, 0, 0, 0.2);
   border-radius: 10px;
}

.options {
margin-bottom: 20px;
}

.options label {
   display: block;
   font-weight: bold;
   margin-bottom: 10px;
   color: #333;
}

.options input[type="range"],
.options select,
.options input[type="number"] {
   width: 100%;
   padding: 17px;
   margin-bottom: 20px;
   border: 1px solid #ddd;
   border-radius: 13px;
   background-color: #f9f9f9;
   box-shadow: 0px 2px 4px
       rgba(0, 0, 0, 0.1);
   color: #000;
}

.options select {
appearance: none;
}

.options button {
   display: block;
   width: 100%;
   padding: 15px;
   background-color: green;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s
       ease;
}

.options button:hover {
background-color: rgb(20, 107, 20);
}

.output {
   background-color: #ffffff;
   padding: 30px;
   border-radius: 10px;
   border: 2px solid crimson;
   min-height: 200px;
   box-shadow: 5px 5px 15px 5px
       rgba(0, 0, 0, 0.2);
   color: #333;
}

JAVASCRIPT (script.js)

// Script.js

// Constants for tag options
const tagOptions = [
   "p", "h1", "h2",
   "h3", "h4", "h5",
   "h6", "span",
];

// Get DOM elements
const optionsContainer =
   document.querySelector(".options");
const outputContainer =
   document.querySelector(".output");
const tagsSelect =
   document.getElementById("tags");
const paragraphsSlider =
   document.getElementById(
       "paragraphs"
   );
const wordsSlider =
   document.getElementById("words");
const paragraphsValue =
   document.getElementById(
       "paragraphsValue"
   );
const wordsValue =
   document.getElementById(
       "wordsValue"
   );

// Create Options UI
function createOptionsUI() {

// With tag options, fill up the <select> element.
   tagOptions.forEach((tag) => {
       const option =
           document.createElement(
               "option"
           );
       option.value = tag;
       option.textContent = `<${tag}>`;
       tagsSelect.appendChild(option);
   });

// Event listeners for sliders
   paragraphsSlider.addEventListener(
       "input",
       updateParagraphsValue
   );
   wordsSlider.addEventListener(
       "input",
       updateWordsValue
   );

   const generateButton =
       document.getElementById(
           "generate"
       );
   generateButton.addEventListener(
       "click",
       generateLoremIpsum
   );
}

// Update the displayed value for Paragraphs
function updateParagraphsValue() {
paragraphsValue.textContent =
paragraphsSlider.value;
}

// Words per Paragraph have got
// to be updated on the display
function updateWordsValue() {
wordsValue.textContent =
wordsSlider.value;
}

// Generate Lorem Ipsum text
function generateLoremIpsum() {
   const paragraphs = parseInt(
       paragraphsSlider.value
   );
   const tag =
       document.getElementById(
           "tags"
       ).value;
   const includeHtml =
       document.getElementById(
           "include"
       ).value;
   const wordsPerParagraph = parseInt(
       wordsSlider.value
   );

   const loremIpsumText = generateText(
       paragraphs,
       tag,
       includeHtml,
       wordsPerParagraph
   );
   displayLoremIpsum(loremIpsumText);
}

// Function to generate Lorem Ipsum text
function generateText(
   paragraphs,
   tag,
   includeHtml,
   wordsPerParagraph
) {

   // Use a placeholder text as an
   // Example for illustrating.
   const placeholderText =
       `Lorem ipsum dolor sit amet
       consectetur adipiscing elit sed
       do eiusmod tempor incididunt ut
       labore et dolore magna aliqua.`;

   // Create an array of paragraphs
   const loremIpsumArray = new Array(
       paragraphs
   ).fill("");

   // Generate words for each paragraph
   for (
       let i = 0;
       i < paragraphs;
       i++
   ) {
       const words = generateWords(
           wordsPerParagraph
       );
       loremIpsumArray[i] =
           includeHtml === "Yes"
               ? `<${tag}>${words}</${tag}>`
               : words;
   }

// Join paragraphs into a single string
return loremIpsumArray.join("\n");
}

// Function to generate a specified number of words
function generateWords(numWords) {

   // Lorem Ipsum text for demonstration purposes
   const loremIpsumText =
       `Laxmi Computer & Electronics Education`;

   // Split the Lorem Ipsum text into words
   const words =
       loremIpsumText.split(" ");

   // Ensure the number of words requested is
   // within the bounds of the available words
   if (numWords <= words.length) {
       return words
           .slice(0, numWords)
           .join(" ");
   } else {
       return words.join(" ");
   }
}

// Display Lorem Ipsum text
function displayLoremIpsum(text) {
outputContainer.innerHTML = text;
}

// Initialize the app
createOptionsUI();

Simple Tic-Tac-Toe Game using JavaScript

HTML (index.html)

<!DOCTYPE html>
<html>

<head>
   <meta name="viewport" content=
       "width=device-width, initial-scale=1.0">
   
   <link rel="stylesheet" type="text/css" href="tic.css">
   
   <script src="tic.js"></script>
</head>

<body>
   <div id="main">
       <h1>TIC TAC TOE</h1>
       <p id="ins">
           Game starts by just Tap on
           box<br><br>First Player starts as
           <b>Player X </b>And Second Player as
           <b>Player 0</b>
       </p>
       <br><br>
       <div class = "ui">
           <div class="row">
               <input type="text" id= "b1"
                   class="cell" onclick="myfunc_3(); myfunc();"
                   readonly>
               <input type="text" id= "b2"
                   class="cell" onclick="myfunc_4(); myfunc();"
                   readonly>
               <input type="text" id= "b3" class="cell"
                   onclick="myfunc_5(); myfunc();"
                   readonly>
           </div>
           <div class="row">
               <input type="text" id= "b4"
                   class="cell" onclick="myfunc_6(); myfunc();"
                   readonly>
               <input type="text" id= "b5"
                   class="cell" onclick="myfunc_7(); myfunc();"
                   readonly>
               <input type="text" id= "b6"
                   class="cell" onclick="myfunc_8(); myfunc();"
                   readonly>
           </div>
           <div class="row">
               <input type="text" id= "b7"
                   class="cell" onclick="myfunc_9(); myfunc();"
                   readonly>
               <input type="text" id= "b8"
                   class="cell" onclick="myfunc_10();myfunc();"
                   readonly>
               <input type="text" id= "b9"
                   class="cell" onclick="myfunc_11();myfunc();"
                   readonly>
           </div>
       </div>
       <br><br><br>

       <button id="but" onclick="myfunc_2()">
           RESET
       </button>
       <br><br>
       <p id="print"></p>
   </div>
</body>

</html>

CSS (tic.css)

h1 {
   color: orangered;
   margin-bottom: -5px;
}
p {
   margin-bottom: -10px;
}
.ui {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.row {
   display: flex;
}
.cell {
   border: none;
   width: 80px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   text-align: center;
   cursor: pointer;
}
.cell:active {
   outline: none;
}
/* 3*3 Grid */
#b1{
   border-bottom: 1px solid gray;
   border-right: 1px solid gray;
}

#b2 {
   border-bottom: 1px solid gray;
   border-right: 1px solid gray;
   border-left: 1px solid gray;
}

#b3 {
border-bottom: 1px solid gray;
border-left: 1px solid gray;
}

#b4 {
   border-top: 1px solid gray;
   border-bottom: 1px solid gray;
   border-right: 1px solid gray;
}

#b5 {
   border: 1px solid gray;
}

#b6 {
   border-top: 1px solid gray;
   border-bottom: 1px solid gray;
   border-left: 1px solid gray;
}

#b7 {
border-top: 1px solid gray;
border-right: 1px solid gray;
}

#b8 {
   border-top: 1px solid gray;
   border-right: 1px solid gray;
   border-left: 1px solid gray;
}

#b9 {
   border-top: 1px solid gray;
   border-left: 1px solid gray;
}
/* Reset Button */
#but {
   box-sizing: border-box;
   width: 95px;
   height: 40px;
   border: 1px solid dodgerblue;
   margin-left: auto;
   border-radius: 8px;
   font-family: Verdana,
       Geneva, Tahoma, sans-serif;

   background-color: whitesmoke;
   color: dodgerblue;
   font-size: 20px;
   cursor: pointer;
}

/* Player turn space */
#print {
   font-family: Verdana,
       Geneva, Tahoma, sans-serif;
   color: dodgerblue;
   font-size: 20px;
}

/* Main Container */
#main {
text-align: center;
}

/* Game Instruction Text */
#ins {
   font-family: Verdana,Geneva,
                   Tahoma, sans-serif;
   color: dodgerblue;
}

JAVASCRIPT (tic.js)

// Function called whenever user tab on any box
function myfunc() {

   // Setting DOM to all boxes or input field
   var b1, b2, b3, b4, b5, b6, b7, b8, b9;
   b1 = document.getElementById("b1").value;
   b2 = document.getElementById("b2").value;
   b3 = document.getElementById("b3").value;
   b4 = document.getElementById("b4").value;
   b5 = document.getElementById("b5").value;
   b6 = document.getElementById("b6").value;
   b7 = document.getElementById("b7").value;
   b8 = document.getElementById("b8").value;
   b9 = document.getElementById("b9").value;

   var b1btn, b2btn, b3btn, b4btn, b5btn,
       b6btn, b7btn, b8btn, b9btn;

   b1btn = document.getElementById("b1");
   b2btn = document.getElementById("b2");
   b3btn = document.getElementById("b3");
   b4btn = document.getElementById("b4");
   b5btn = document.getElementById("b5");
   b6btn = document.getElementById("b6");
   b7btn = document.getElementById("b7");
   b8btn = document.getElementById("b8");
   b9btn = document.getElementById("b9");

   // Checking if Player X won or not and after
   // that disabled all the other fields
   if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' ||
       b2 == 'X') && (b3 == 'x' || b3 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";
       b4btn.disabled = true;
       b5btn.disabled = true;
       b6btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b1btn.style.color = "red";
       b2btn.style.color = "red";
       b3btn.style.color = "red";
   }
   else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' ||
       b4 == 'X') && (b7 == 'x' || b7 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";
       b2btn.disabled = true;
       b3btn.disabled = true;
       b5btn.disabled = true;
       b6btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b1btn.style.color = "red";
       b4btn.style.color = "red";
       b7btn.style.color = "red";
   }
   else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' ||
       b8 == 'X') && (b9 == 'x' || b9 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";

       b1btn.disabled = true;
       b2btn.disabled = true;
       b3btn.disabled = true;
       b4btn.disabled = true;
       b5btn.disabled = true;
       b6btn.disabled = true;

       b7btn.style.color = "red";
       b8btn.style.color = "red";
       b9btn.style.color = "red";
   }
   else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' ||
       b6 == 'X') && (b9 == 'x' || b9 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";

       b1btn.disabled = true;
       b2btn.disabled = true;
       b4btn.disabled = true;
       b5btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;

       b3btn.style.color = "red";
       b6btn.style.color = "red";
       b9btn.style.color = "red";
   }
   else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' ||
       b5 == 'X') && (b9 == 'x' || b9 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";
       b2btn.disabled = true;
       b3btn.disabled = true;
       b4btn.disabled = true;
       b6btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;

       b1btn.style.color = "red";
       b5btn.style.color = "red";
       b9btn.style.color = "red";
   }
   else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' ||
       b5 == 'X') && (b7 == 'x' || b7 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b4btn.disabled = true;
       b6btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b3btn.style.color = "red";
       b5btn.style.color = "red";
       b7btn.style.color = "red";
   }
   else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' ||
       b5 == 'X') && (b8 == 'x' || b8 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b4btn.disabled = true;
       b6btn.disabled = true;
       b7btn.disabled = true;
       b9btn.disabled = true;

       b2btn.style.color = "red";
       b5btn.style.color = "red";
       b8btn.style.color = "red";
   }
   else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' ||
       b5 == 'X') && (b6 == 'x' || b6 == 'X')) {
       document.getElementById('print')
           .innerHTML = "Player X won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b3btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b4btn.style.color = "red";
       b5btn.style.color = "red";
       b6btn.style.color = "red";
   }

   // Checking of Player X finish
   // Checking for Player 0 starts, Is player 0 won or
   // not and after that disabled all the other fields
   else if ((b1 == '0' || b1 == '0') && (b2 == '0' ||
       b2 == '0') && (b3 == '0' || b3 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b4btn.disabled = true;
       b5btn.disabled = true;
       b6btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b1btn.style.color = "red";
       b2btn.style.color = "red";
       b3btn.style.color = "red";
   }
   else if ((b1 == '0' || b1 == '0') && (b4 == '0' ||
       b4 == '0') && (b7 == '0' || b7 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b2btn.disabled = true;
       b3btn.disabled = true;
       b5btn.disabled = true;
       b6btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b1btn.style.color = "red";
       b4btn.style.color = "red";
       b7btn.style.color = "red";
   }
   else if ((b7 == '0' || b7 == '0') && (b8 == '0' ||
       b8 == '0') && (b9 == '0' || b9 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b3btn.disabled = true;
       b4btn.disabled = true;
       b5btn.disabled = true;
       b6btn.disabled = true;

       b7btn.style.color = "red";
       b8btn.style.color = "red";
       b9btn.style.color = "red";
   }
   else if ((b3 == '0' || b3 == '0') && (b6 == '0' ||
       b6 == '0') && (b9 == '0' || b9 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b4btn.disabled = true;
       b5btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;
       b3btn.style.color = "red";
       b6btn.style.color = "red";
       b9btn.style.color = "red";
   }
   else if ((b1 == '0' || b1 == '0') && (b5 == '0' ||
       b5 == '0') && (b9 == '0' || b9 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b2btn.disabled = true;
       b3btn.disabled = true;
       b4btn.disabled = true;
       b6btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;

       b1btn.style.color = "red";
       b5btn.style.color = "red";
       b9btn.style.color = "red";
   }
   else if ((b3 == '0' || b3 == '0') && (b5 == '0' ||
       b5 == '0') && (b7 == '0' || b7 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b4btn.disabled = true;
       b6btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b3btn.style.color = "red";
       b5btn.style.color = "red";
       b7btn.style.color = "red";
   }
   else if ((b2 == '0' || b2 == '0') && (b5 == '0' ||
       b5 == '0') && (b8 == '0' || b8 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b1btn.disabled = true;
       b3btn.disabled = true;
       b4btn.disabled = true;
       b6btn.disabled = true;
       b7btn.disabled = true;
       b9btn.disabled = true;

       b2btn.style.color = "red";
       b5btn.style.color = "red";
       b8btn.style.color = "red";
   }
   else if ((b4 == '0' || b4 == '0') && (b5 == '0' ||
       b5 == '0') && (b6 == '0' || b6 == '0')) {
       document.getElementById('print')
           .innerHTML = "Player 0 won";
       b1btn.disabled = true;
       b2btn.disabled = true;
       b3btn.disabled = true;
       b7btn.disabled = true;
       b8btn.disabled = true;
       b9btn.disabled = true;

       b4btn.style.color = "red";
       b5btn.style.color = "red";
       b6btn.style.color = "red";
   }

   // Checking of Player 0 finish
   // Here, Checking about Tie
   else if ((b1 == 'X' || b1 == '0') && (b2 == 'X'
       || b2 == '0') && (b3 == 'X' || b3 == '0') &&
       (b4 == 'X' || b4 == '0') && (b5 == 'X' ||
           b5 == '0') && (b6 == 'X' || b6 == '0') &&
       (b7 == 'X' || b7 == '0') && (b8 == 'X' ||
           b8 == '0') && (b9 == 'X' || b9 == '0')) {
       document.getElementById('print')
           .innerHTML = "Match Tie";
   }
   else {

       // Here, Printing Result
       if (flag == 1) {
           document.getElementById('print')
               .innerHTML = "Player X Turn";
       }
       else {
           document.getElementById('print')
               .innerHTML = "Player 0 Turn";
       }
   }
}

// Function to reset game
function myfunc_2() {
location.reload();
b1 = b2 = b3 = b4 = b5 = b6 = b7 = b8 = b9 = '';
}

// Here onwards, functions check turn of the player
// and put accordingly value X or 0
flag = 1;
function myfunc_3() {
   if (flag == 1) {
       document.getElementById("b1").value = "X";
       document.getElementById("b1").disabled = true;
       flag = 0;
   }
   else {
       document.getElementById("b1").value = "0";
       document.getElementById("b1").disabled = true;
       flag = 1;
   }
}

Make Online Examination Portal

HTMl (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div id="start-screen">
<h1>Laxmi Computer & Electronics Education</h1>
           <h2>Government Registered</h2>
           <h1>Welcome to the Mock Test 2024</h1>
           <h4>Exam Date:-</h4>
<form id="user-details">
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="reg-number">Registration Number:</label>
<input type="text" id="reg-number" required>
               <label for="reg-number">Batch Time:</label>
<input type="text" id="batch-time" required>
<button type="button" id="start-btn">Start Test</button>
</form>
</div>

<div id="test-screen" style="display:none;">
<div id="question-container">
<div id="question">Question text will appear here</div>
<div id="options">
<label><input type="radio" name="option" value="0">Option 1</label>
<label><input type="radio" name="option" value="1">Option 2</label>
<label><input type="radio" name="option" value="2">Option 3</label>
<label><input type="radio" name="option" value="3">Option 4</label>
</div>
</div>
<button id="prev-btn" style="display:none;">Back</button>
<button id="next-btn">Next</button>
<button id="submit-btn" style="display:none;">Submit</button>
</div>

<div id="result-screen" style="display:none;">
<h1>Test Completed</h1>
<div id="score">Your score will appear here</div>
<button id="view-score-btn">View Score</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>

CSS (styles.css)

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background: white;
padding: 100px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 650px;
text-align: center;
}

#question {
margin-bottom: 10px;

}

label {
display: block;
margin: 20px 0;
}

button {
margin-top: 10px;
padding: 10px;
width: 100%;
border: none;
background: #007BFF;
color: white;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background: #0056b3;
}

JAVA SCRIPT (scripts.js)

document.addEventListener('DOMContentLoaded', function () {
const startBtn = document.getElementById('start-btn');
const nextBtn = document.getElementById('next-btn');
const prevBtn = document.getElementById('prev-btn');
const submitBtn = document.getElementById('submit-btn');
const viewScoreBtn = document.getElementById('view-score-btn');
const userDetailsForm = document.getElementById('user-details');
const startScreen = document.getElementById('start-screen');
const testScreen = document.getElementById('test-screen');
const resultScreen = document.getElementById('result-screen');
const questionContainer = document.getElementById('question-container');
const questionElement = document.getElementById('question');
const optionsContainer = document.getElementById('options');
const scoreElement = document.getElementById('score');

let currentQuestionIndex = 0;
let score = 0;
let userAnswers = [];

const questions = [
{
question: "MS-Excel में फंक्शन डालने के लिए शॉर्टकट की क्या है?",
options: ["Shift + F3", "Alt + F3", "Ctrl + f3", "F5"],
correctAnswer: 1
},
{
question: "MS Word 2016 में, step-by-step Mail Merge विजार्ड समूह के अंतर्गत पाया जाता है?",
options: ["Finish", "Create", "Write & Insert Fields", "Start Mail Merge"],
correctAnswer: 2
},
{
question: "MS Office 2016 में, Review Menu में Display for Review के अंतर्गत कितने मार्कअप विकल्प है?",
options: ["3", "5", "2", "4"],
correctAnswer: 4
}
];

startBtn.addEventListener('click', startTest);
nextBtn.addEventListener('click', showNextQuestion);
prevBtn.addEventListener('click', showPrevQuestion);
submitBtn.addEventListener('click', submitTest);
viewScoreBtn.addEventListener('click', viewScore);

function startTest() {
const name = document.getElementById('name').value;
const regNumber = document.getElementById('reg-number').value;

if (name && regNumber) {
startScreen.style.display = 'none';
testScreen.style.display = 'block';
showQuestion();
} else {
alert('Please fill in all the details');
}
}

function showQuestion() {
const question = questions[currentQuestionIndex];
questionElement.textContent = question.question;
optionsContainer.innerHTML = '';

question.options.forEach((option, index) => {
const label = document.createElement('label');
label.innerHTML = `<input type="radio" name="option" value="${index}">${option}`;
optionsContainer.appendChild(label);
});

if (userAnswers[currentQuestionIndex] !== undefined) {
document.querySelector(`input[name="option"][value="${userAnswers[currentQuestionIndex]}"]`).checked = true;
}

prevBtn.style.display = currentQuestionIndex === 0 ? 'none' : 'inline-block';
nextBtn.style.display = currentQuestionIndex === questions.length - 1 ? 'none' : 'inline-block';
submitBtn.style.display = currentQuestionIndex === questions.length - 1 ? 'inline-block' : 'none';
}

function showNextQuestion() {
const selectedOption = document.querySelector('input[name="option"]:checked');

if (selectedOption) {
userAnswers[currentQuestionIndex] = parseInt(selectedOption.value);
currentQuestionIndex++;
showQuestion();
} else {
alert('Please select an option');
}
}

function showPrevQuestion() {
currentQuestionIndex--;
showQuestion();
}

function submitTest() {
const selectedOption = document.querySelector('input[name="option"]:checked');

if (selectedOption) {
userAnswers[currentQuestionIndex] = parseInt(selectedOption.value);
score = userAnswers.filter((answer, index) => answer === questions[index].correctAnswer).length;
testScreen.style.display = 'none';
resultScreen.style.display = 'block';
} else {
alert('Please select an option');
}
}

function viewScore() {
scoreElement.textContent = `Your score is ${score} out of ${questions.length}`;
}
});

Make Attendance sheet

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance Sheet</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attendance Sheet</h1>
<div id="controls">
<label for="student-name">Add Student: </label>
<input type="text" id="student-name">
<button onclick="addStudent()">Add</button>
</div>
<table id="attendance-sheet">
<thead>
<tr>
<th>Student Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button onclick="addDateColumn()">Add Date</button>

CSS (styles.css)

body {
font-family: Arial, sans-serif;
}

#controls {
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

JAVASCRIPT (script.js)

document.addEventListener('DOMContentLoaded', () => {
const table = document.getElementById('attendance-sheet');

// Add a new student to the attendance sheet
window.addStudent = function() {
const studentName = document.getElementById('student-name').value;
if (studentName.trim() === '') {
alert('Student name cannot be empty');
return;
}

const tbody = table.querySelector('tbody');
const newRow = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = studentName;
newRow.appendChild(nameCell);

// Add empty cells for existing date columns
const columns = table.querySelectorAll('thead th').length - 1;
for (let i = 0; i < columns; i++) {
newRow.appendChild(document.createElement('td'));
}

tbody.appendChild(newRow);
document.getElementById('student-name').value = '';
};

// Add a new date column to the attendance sheet
window.addDateColumn = function() {
const today = new Date();
const dateString = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;

const thead = table.querySelector('thead tr');
const newHeader = document.createElement('th');
newHeader.textContent = dateString;
thead.appendChild(newHeader);

const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
const newCell = document.createElement('td');
newCell.innerHTML = '<input type="checkbox">';
row.appendChild(newCell);
});
};
});

Advance Inventory Management

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory Management</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Inventory Management</h1>
<div id="controls">
<label for="item-name">Item Name: </label>
<input type="text" id="item-name">
<label for="item-quantity">Quantity: </label>
<input type="number" id="item-quantity">
<button onclick="addItem()">Add Item</button>
</div>
<table id="inventory-table">
<thead>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

CSS (styles.css)

body {
font-family: Arial, sans-serif;
}

#controls {
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

button {
margin-left: 10px;
}

button.update, button.delete {
margin: 0 5px;
}

JAVASCRIPT (script.js)

document.addEventListener('DOMContentLoaded', () => {
let inventory = [];

const inventoryTable = document.getElementById('inventory-table').querySelector('tbody');

// Add a new item to the inventory
window.addItem = function() {
const itemName = document.getElementById('item-name').value.trim();
const itemQuantity = parseInt(document.getElementById('item-quantity').value);

if (itemName === '' || isNaN(itemQuantity) || itemQuantity < 1) {
alert('Please enter a valid item name and quantity.');
return;
}

const item = {
id: Date.now(),
name: itemName,
quantity: itemQuantity
};

inventory.push(item);
renderInventory();
document.getElementById('item-name').value = '';
document.getElementById('item-quantity').value = '';
};

// Render the inventory table
function renderInventory() {
inventoryTable.innerHTML = '';

inventory.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.name}</td>
<td>${item.quantity}</td>
<td>
<button class="update" onclick="updateItem(${item.id})">Update</button>
<button class="delete" onclick="deleteItem(${item.id})">Delete</button>
</td>
`;
inventoryTable.appendChild(row);
});
}

// Update an item in the inventory
window.updateItem = function(id) {
const item = inventory.find(item => item.id === id);
if (!item) return;

const newName = prompt('Enter new item name:', item.name);
const newQuantity = prompt('Enter new quantity:', item.quantity);

if (newName !== null && newName.trim() !== '') item.name = newName.trim();
if (newQuantity !== null && !isNaN(newQuantity) && newQuantity > 0) item.quantity = parseInt(newQuantity);

renderInventory();
};

// Delete an item from the inventory
window.deleteItem = function(id) {
inventory = inventory.filter(item => item.id !== id);
renderInventory();
};
});

Make Colourful Website

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="home">
<h1>Laxmi Computer & Electronics Education</h1>
<p>Government Registered</p>
<p>B.K.Road, Lohiyachowk, Laheriasarai, Darbhanga, Bihar-846001</p>
<button onclick="changeBackgroundColor()">Change Background Color</button>
</section>

<section id="about">
<h2>About Us</h2>
<p>Laxmi Computer Institute: Elevate your skills and career prospects with Laxmi Computer Institute's comprehensive programs..</p>
</section>

<section id="services">
<h2>Our Services</h2>
<div class="card-container">
<div class="card">
<h3>Service 1</h3>
<p>Detail about Service 1</p>
</div>
<div class="card">
<h3>Service 2</h3>
<p>Detail about Service 2</p>
</div>
<div class="card">
<h3>Service 3</h3>
<p>Detail about Service 3</p>
</div>
</div>
</section>

<section id="contact">
<h2>Contact Us</h2>
<form id="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send</button>
</form>
</section>

CSS (styles.css)

/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body and Default Styles */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background: #f4f4f4;
color: #333;
}

/* Header and Navigation */
header {
background: linear-gradient(to right, #ff7e5f, #feb47b);
padding: 10px 0;
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

nav ul li a:hover {
text-decoration: underline;
}

/* Section Styles */
section {
padding: 20px;
margin: 20px auto;
max-width: 1200px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section#home {
text-align: center;
}

section h2 {
text-align: center;
color: #ff7e5f;
}

/* Card Container */
.card-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.card {
background: #ff7e5f;
color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
flex: 1 1 30%;
text-align: center;
}

.card h3 {
margin-bottom: 10px;
}

/* Contact Form */
form {
display: flex;
flex-direction: column;
gap: 10px;
}

form label {
font-weight: bold;
}

form input, form textarea {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

form button {
padding: 10px;
background: #ff7e5f;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

form button:hover {
background: #feb47b;
}

/* Footer */
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: white;
margin-top: 20px;
}

JAVASCRIPT (script.js)

document.addEventListener('DOMContentLoaded', () => {
// Function to change background color of the home section
window.changeBackgroundColor = function() {
const colors = ['#ff7e5f', '#feb47b', '#86A8E7', '#91EAE4', '#f4f4f4'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('home').style.backgroundColor = randomColor;
};

// Handle form submission
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('Form submitted successfully!');
contactForm.reset();
});
});

Create Admission

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admission Register</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}

th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}

button {
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>

<h2>Admission Register</h2>

<div id="formContainer">
<h3>Add/Edit Admission</h3>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age">
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<input type="text" id="gender">
</div>
<div class="form-group">
<label for="fees">Fees:</label>
<input type="number" id="fees">
</div>
<button onclick="addOrUpdateAdmission()">Add Admission</button>
<button onclick="clearForm()">Clear Form</button>
</div>

<h3>Admissions</h3>
<table id="admissionsTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Fees</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="admissionsBody">

</tbody>
</table>

JAVASCRIPT (script.js)

let admissions = [];
let editIndex = -1;

function addOrUpdateAdmission() {
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
const gender = document.getElementById('gender').value;
const fees = document.getElementById('fees').value;

if (name && age && gender && fees) {
const admission = { name, age, gender, fees };

if (editIndex === -1) {
admissions.push(admission);
} else {
admissions[editIndex] = admission;
editIndex = -1;
}

clearForm();
renderAdmissions();
} else {
alert('Please fill in all fields');
}
}

function editAdmission(index) {
document.getElementById('name').value = admissions[index].name;
document.getElementById('age').value = admissions[index].age;
document.getElementById('gender').value = admissions[index].gender;
document.getElementById('fees').value = admissions[index].fees;

editIndex = index;
}

function deleteAdmission(index) {
admissions.splice(index, 1);
renderAdmissions();
}

function clearForm() {
document.getElementById('name').value = '';
document.getElementById('age').value = '';
document.getElementById('gender').value = '';
document.getElementById('fees').value = '';
editIndex = -1;
}

function renderAdmissions() {
const admissionsBody = document.getElementById('admissionsBody');
admissionsBody.innerHTML = '';

admissions.forEach((admission, index) => {
const row = document.createElement('tr');

row.innerHTML = `
<td>${admission.name}</td>
<td>${admission.age}</td>
<td>${admission.gender}</td>
<td>${admission.fees}</td>
<td>
<button onclick="editAdmission(${index})">Edit</button>
<button onclick="deleteAdmission(${index})">Delete</button>
</td>
`;

admissionsBody.appendChild(row);
});
}

Management Cafe

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Café Management</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f4f4f4;
}

button {
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>

<h2>Café Management</h2>

<div id="menuContainer">
<h3>Add Menu Item</h3>
<div class="form-group">
<label for="itemName">Item Name:</label>
<input type="text" id="itemName">
</div>
<div class="form-group">
<label for="itemPrice">Price:</label>
<input type="number" id="itemPrice">
</div>
<button onclick="addMenuItem()">Add Menu Item</button>
</div>

<h3>Menu</h3>
<table id="menuTable">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="menuBody">

</tbody>
</table>

<div id="orderContainer">
<h3>Take Order</h3>
<div class="form-group">
<label for="orderItem">Select Item:</label>
<select id="orderItem">

</select>
</div>
<div class="form-group">
<label for="orderQuantity">Quantity:</label>
<input type="number" id="orderQuantity" value="1">
</div>
<button onclick="addOrder()">Add to Order</button>
</div>

<h3>Order Summary</h3>
<table id="orderTable">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="orderBody">

</tbody>
</table>

<h3>Total: $<span id="orderTotal">0.00</span></h3>

JAVASCRIPT (script.js)

let menu = [];
let orders = [];

function addMenuItem() {
const itemName = document.getElementById('itemName').value;
const itemPrice = parseFloat(document.getElementById('itemPrice').value);

if (itemName && !isNaN(itemPrice)) {
const menuItem = { itemName, itemPrice };
menu.push(menuItem);
renderMenu();
clearMenuForm();
} else {
alert('Please enter a valid item name and price.');
}
}

function clearMenuForm() {
document.getElementById('itemName').value = '';
document.getElementById('itemPrice').value = '';
}

function renderMenu() {
const menuBody = document.getElementById('menuBody');
const orderItem = document.getElementById('orderItem');
menuBody.innerHTML = '';
orderItem.innerHTML = '';

menu.forEach((item, index) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.itemName}</td>
<td>$${item.itemPrice.toFixed(2)}</td>
<td>
<button onclick="deleteMenuItem(${index})">Delete</button>
</td>
`;
menuBody.appendChild(row);

const option = document.createElement('option');
option.value = index;
option.textContent = `${item.itemName} - $${item.itemPrice.toFixed(2)}`;
orderItem.appendChild(option);
});
}

function deleteMenuItem(index) {
menu.splice(index, 1);
renderMenu();
}

function addOrder() {
const orderItem = parseInt(document.getElementById('orderItem').value);
const orderQuantity = parseInt(document.getElementById('orderQuantity').value);

if (!isNaN(orderItem) && !isNaN(orderQuantity) && orderQuantity > 0) {
const order = { ...menu[orderItem], quantity: orderQuantity };
orders.push(order);
renderOrders();
document.getElementById('orderQuantity').value = 1;
} else {
alert('Please select a valid item and quantity.');
}
}

function renderOrders() {
const orderBody = document.getElementById('orderBody');
const orderTotal = document.getElementById('orderTotal');
orderBody.innerHTML = '';
let total = 0;

orders.forEach((order, index) => {
const row = document.createElement('tr');
const orderTotalPrice = order.itemPrice * order.quantity;
total += orderTotalPrice;

row.innerHTML = `
<td>${order.itemName}</td>
<td>${order.quantity}</td>
<td>$${order.itemPrice.toFixed(2)}</td>
<td>$${orderTotalPrice.toFixed(2)}</td>
<td>
<button onclick="deleteOrder(${index})">Delete</button>
</td>
`;
orderBody.appendChild(row);
});

orderTotal.textContent = total.toFixed(2);
}

function deleteOrder(index) {
orders.splice(index, 1);
renderOrders();
}

// Initial render to set up the menu and order UI
renderMenu();
renderOrders();

Expenses Tracker

HTML (index.html)

<!DOCTYPE html>
<html>

<head>
   <title>Expense Tracker</title>
   <link rel="stylesheet"
       type="text/css"
       href="style.css" />
</head>

<body>
   <div class="container">
       <h1>Expense Tracker</h1>
       <form id="expense-form">
           <input type="text"
               id="expense-name"
               placeholder="Expense Name" required />
           <input type="number"
               id="expense-amount"
               placeholder="Amount" required />
           <button type="submit">
               Add Expense
           </button>
       </form>
       <div class="expense-table">
           <table>
               <thead>
                   <tr>
                       <th>Expense Name</th>
                       <th>Amount</th>
                       <th>Action</th>
                   </tr>
               </thead>
               <tbody id="expense-list"></tbody>
           </table>
           <div class="total-amount">
               <strong>Total:</strong>
               $<span id="total-amount">0</span>
           </div>
       </div>
   </div>
   <script src="script.js"></script>
</body>

</html>

CSS (styles.css)

/* style.css */
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.container {
   max-width: 800px;
   margin: 0 auto;
   background-color: #f9f9f9;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
margin-bottom: 20px;
}

form {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
}

input[type="text"],
input[type="number"] {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   outline: none;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
color: #999;
}

button {
   padding: 10px 20px;
   background-color: #4caf50;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

button:hover {
background-color: #45a049;
}

.expense-table {
   border: 1px solid #ddd;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

table {
width: 100%;
border-collapse: collapse;
}

thead th {
   background-color: #f2f2f2;
   padding: 10px;
   text-align: left;
}

tbody td {
padding: 10px;
border-top: 1px solid #ddd;
}

.delete-btn {
color: red;
cursor: pointer;
}

.total-amount {
   padding: 10px;
   text-align: right;
   background-color: #f2f2f2;
}

JAVA SCRIPT (script.js)

// script.js
// Get form, expense list, and total amount elements
const expenseForm =
   document.getElementById("expense-form");
const expenseList =
   document.getElementById("expense-list");
const totalAmountElement =
   document.getElementById("total-amount");

// Initialize expenses array from localStorage
let expenses =
JSON.parse(localStorage.getItem("expenses")) || [];

// Function to render expenses in tabular form
function renderExpenses() {

// Clear expense list
expenseList.innerHTML = "";

// Initialize total amount
let totalAmount = 0;

   // Loop through expenses array and create table rows
   for (let i = 0; i < expenses.length; i++) {
       const expense = expenses[i];
       const expenseRow = document.createElement("tr");
       expenseRow.innerHTML = `
   <td>${expense.name}</td>
   <td>$${expense.amount}</td>
   <td class="delete-btn" data-id="${i}">Delete</td>
   `;
       expenseList.appendChild(expenseRow);

       // Update total amount
       totalAmount += expense.amount;
   }

   // Update total amount display
   totalAmountElement.textContent =
       totalAmount.toFixed(2);

   // Save expenses to localStorage
   localStorage.setItem("expenses",
       JSON.stringify(expenses));
}

// Function to add expense
function addExpense(event) {
event.preventDefault();

   // Get expense name and amount from form
   const expenseNameInput =
       document.getElementById("expense-name");
   const expenseAmountInput =
       document.getElementById("expense-amount");
   const expenseName =
       expenseNameInput.value;
   const expenseAmount =
       parseFloat(expenseAmountInput.value);

   // Clear form inputs
   expenseNameInput.value = "";
   expenseAmountInput.value = "";

   // Validate inputs
   if (expenseName === "" || isNaN(expenseAmount)) {
       alert("Please enter valid expense details.");
       return;
   }

   // Create new expense object
   const expense = {
       name: expenseName,
       amount: expenseAmount,
   };

// Add expense to expenses array
expenses.push(expense);

// Render expenses
renderExpenses();
}

// Function to delete expense
function deleteExpense(event) {
if (event.target.classList.contains("delete-btn")) {

       // Get expense index from data-id attribute
       const expenseIndex =
           parseInt(event.target.getAttribute("data-id"));

// Remove expense from expenses array
expenses.splice(expenseIndex, 1);

       // Render expenses
       renderExpenses();
   }
}

// Add event listeners
expenseForm.addEventListener("submit", addExpense);
expenseList.addEventListener("click", deleteExpense);

// Render initial expenses on page load
renderExpenses();

Create a Sortable and Filterable Table using JavaScript

HTML (index.html)

<!DOCTYPE html>
<html>

<body>
   <div class="root">
       <h1>Custom Table</h1>
       <div class="form">
           <div>
               <h2 id="formTitle">Add item</h2>
           </div>
           <input type="text"
               id="nameInput"
               placeholder="Enter Name"
               title="Type in a name"
               value="" />
           <input type="text"
               id="catInput"
               value=""
               placeholder="Enter Category"
               title="Type in a name" />
           <input type="Number"
               id="yearInput"
               value=""
               placeholder="Enter year"
               title="Type in a name" />
           <button id="submitItem"
                   type="button"
                   onclick="submitItem()">
               Add Item
           </button>
           <button id="editItem"
                   style="display: none"
                   onclick="editItem()">
               Update
           </button>
       </div>

       <h2>Search for Item...</h2>
       <input type="text"
           id="searchInput"
           onkeyup="searchItems()"
           placeholder="Search for names.."
           title="Type in a name" />

       <table id="table">
           <tr class="titles">
               <th style="width: 5%">S.no</th>
               <th style="width: 30%"
                   id="name"
                   onclick="sortItems('name')">
                   Name
               </th>
               <th style="width: 30%"
                   onclick="sortItems('category')">
                   Category
               </th>
               <th style="width: 10%"
                   onclick="sortItems('year')">
                   Year
               </th>
               <th style="width: 2%">Edit Entry</th>
               <th style="width: 2%">Delete Entry</th>
           </tr>
       </table>
       <script src="script.js"></script>
   </div>
</body>

</html>

CSS (style.css)

/* style.css */

* {
box-sizing: border-box;
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;

}

.root {
display: "block";
width: 50rem;
}

#searchInput {
   background-repeat: no-repeat;
   width: 100%;
   font-size: 16px;
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
   margin-bottom: 12px;
}

.form {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   display: flexbox;
   margin: 0 1rem;
   padding: 1rem;
   width: 98%;
   font-size: 16px;
   background-color: rgb(247, 246, 246);

}

.form>div {
width: 100%;
}

.form>button {
   background-color: rgb(46, 171, 46);
   padding: 1%;
   border-radius: 5px;
   width: 10%;
   color: black;
   border: 1px solid #ddd;

}

.form>input {
   width: 25%;
   margin: 2%;
   font-size: 16px;
   padding: 1%;
   border: 1px solid #ddd;

}

#table {
   border-collapse: collapse;
   width: 100%;
   border: 1px solid #ddd;
   font-size: 18px;
}

#table th,
#table td {
text-align: left;
padding: 12px;
}

#table tr {
border-bottom: 1px solid #ddd;
}

#table tr.titles {
background-color: lightgreen;
}

.zoom {
text-align: center;
}

.zoom:hover {
transform: scale(1.5);
color: rgb(255, 0, 0);
}

JAVA SCRIPT (script.js)

// script.js

// For edit item
let index = -1;
const table = document.getElementById("table");

// For sorting ascending or descending
const flag = { Name: false, Cat: false, Year: false };
let data = [
   { Name: "HTML", Cat: "Web", Year: "1993" },
   {
       Name: "Java",
       Cat: "Programming",
       Year: "1995",
   },
   { Name: "JavaScript", Cat: "Web", Year: "1995" },
   { Name: "MongoDB", Cat: "Database", Year: "2007" },
   { Name: "Python", Cat: "Programming", Year: "1991" },
];

// To switch update or add form
const switchEdit = () => {
   document.getElementById("submitItem").style.display =
       "none";
   document.getElementById("editItem").style.display = "";
};

const switchAdd = () => {
   document.getElementById("submitItem").style.display =
       "";
   document.getElementById("editItem").style.display =
       "none";
};

// To create table
function addItem(e, i) {
   row = table.insertRow(i + 1);
   let c0 = row.insertCell(0);
   let c1 = row.insertCell(1);
   let c2 = row.insertCell(2);
   let c3 = row.insertCell(3);
   c4 = row.insertCell(4);
   let c5 = row.insertCell(5);
   c0.innerText = i + 1;
   c1.innerText = e.Name;
   c2.innerText = e.Cat;
   c3.innerText = e.Year;
   c4.innerHTML = "";
   c5.innerHTML = "☒";
   c4.classList.add("zoom");
   c5.classList.add("zoom");
   c4.addEventListener("click", () => edit(c4, i));
   c5.addEventListener("click", () => del(e));
}

// Traverse and insert items to table
data.map((e, i) => addItem(e, i));

// For sorting in different cases
function sortItems(title) {
   remove();
   switch (title) {
       case "name":
           sortName();
           break;
       case "category":
           sortCat();
           break;
       case "year":
           sortYear();
           break;
       default:
           console.log("Default");
   }
   data.map((e, i) => addItem(e, i));
}

// Clear the table before updation
function remove() {
console.log("removed");
while (table.rows.length > 1) table.deleteRow(-1);
}

// Sort with names
function sortName() {
   data.sort((a, b) => {
       let fa = a.Name.toLowerCase(),
           fb = b.Name.toLowerCase();
       console.log(fa, fb);

       if (fa < fb) {
           return -1;
       }
       if (fa > fb) {
           return 1;
       }
       return 0;
   });
   if (flag.Name) data.reverse();
   flag.Name = !flag.Name;
}

// Sort with categories
function sortCat() {
   data.sort((a, b) => {
       let fa = a.Cat.toLowerCase(),
           fb = b.Cat.toLowerCase();
       console.log(fa, fb);

       if (fa < fb) {
           return -1;
       }
       if (fa > fb) {
           return 1;
       }
       return 0;
   });
   if (flag.Cat) data.reverse();
   flag.Cat = !flag.Cat;
}

// Sort with year
function sortYear() {
   data.sort((a, b) => a.Year - b.Year);
   if (flag.Year) data.reverse();
   flag.Year = !flag.Year;
}

// To search and filter items
function searchItems() {
   let input = document
       .getElementById("searchInput")
       .value.toLowerCase();
   let filterItems = data.filter((e) => {
       return (
           e.Name.toLowerCase().includes(input) ||
           e.Cat.toLowerCase().includes(input) ||
           e.Year.includes(input)
       );
   });

remove();
filterItems.map((e, i) => addItem(e, i));
}

// Initiate edit form
function edit(c, i) {
   console.log(c.classList.value);
   if (c.classList.value === "zoom") {
       c.classList.add("open");
       el = data[i];
       switchEdit();

       let nameInput =
           document.getElementById("nameInput");
       let catInput = document.getElementById("catInput");
       let yearInput =
           document.getElementById("yearInput");
       nameInput.value = el.Name;
       catInput.value = el.Cat;
       yearInput.value = el.Year;
       index = i;
   } else {
       c.classList.value = "zoom";
       switchAdd();

       document.getElementById("nameInput").value = "";
       document.getElementById("catInput").value = "";
       document.getElementById("yearInput").value = "";
       index = -1;
   }
}

// Submit edit data
function editItem() {
   console.log("edit");
   nameInput = document.getElementById("nameInput");
   catInput = document.getElementById("catInput");
   yearInput = document.getElementById("yearInput");
   data[index] = {
       Name: nameInput.value,
       Cat: catInput.value,
       Year: yearInput.value,
   };
   remove();
   data.map((e, i) => addItem(e, i));

   nameInput.value = "";
   catInput.value = "";
   yearInput.value = "";
   switchAdd();
}

// Add new data
function submitItem() {
   console.log("submit clicked");
   nameInput = document.getElementById("nameInput").value;
   catInput = document.getElementById("catInput").value;
   yearInput = document.getElementById("yearInput").value;
   if (
       nameInput === "" ||
       catInput === "" ||
       yearInput === ""
   ) {
       window.alert("incomplete input data");
       return;
   }
   data.push({
       Name: nameInput,
       Cat: catInput,
       Year: yearInput,
   });
   document.getElementById("nameInput").value = "";
   document.getElementById("catInput").value = "";
   document.getElementById("yearInput").value = "";
   remove();
   data.map((e, i) => addItem(e, i));
   console.log(data);
}

// Delete specific field
function del(el) {
   console.log("del clicked", el);
   remove();
   data = data.filter((e) => e.Name !== el.Name);
   data.map((e, i) => addItem(e, i));
}

Dynamic Resume Creator using HTML CSS and JavaScript

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Resume Creator</title>
   
   <link rel="stylesheet" href="style.css" />
</head>

<body>
   
   <section class="resume-builder">
       <div class="container">
           <h1>Resume Creator</h1>
           <div class="resume_container">
               <form class="inputField">
                   <input type="text"
                       name="name"
                       placeholder="Your Name"
                       title="Enter Your Name" />
                   <input type="text"
                       name="title"
                       placeholder="Title/Sub Heading"
                       title="Enter Title/Sub Heading" />
                   <textarea name="work_experience"
                           placeholder="Work Experience"
                           cols="40" rows="3"
                           title="Enter Your Work Experience">
                   </textarea>
                   <textarea name="academic_details"
                           placeholder="Academic Details"
                           cols="40" rows="3"
                           title="Enter Your Academic Details">
                   </textarea>
                   <input type="text" placeholder="Objective"
                       title="Enter Your Objective"
                       name="objective" />
                   <textarea name="skills"
                           title="Enter Your Skills"
                           placeholder="Skills" cols="40"
                           rows="3">
                   </textarea>
                   <textarea name="projects"
                           title="Enter Your Projects"
                           placeholder="Projects"
                           cols="40"
                           rows="3">
                   </textarea>
                   <textarea name="achievements"
                           placeholder="Achievements"
                           cols="40" rows="3"
                           title="Enter Your Achievements">
                   </textarea>
                   <textarea name="contact"
                           placeholder="Contact Information"
                           cols="40" rows="3"
                           title="Enter Your Contact Information">
                   </textarea>
               </form>
           </div>
           <p class="credit">
               Created by
               <a href=
"https://auth.geeksforgeeks.org/user/lunatic1/articles"
               target="_blank">
                   lunatic1
               </a>
           </p>
           <p class="tip">
               **You can use markup in the text area for text decoration**
           </p>
       </div>
   </section>

<div class="output_container"></div>

<button onclick="hide()">
       Generate / Edit
   </button>

<script src="script.js"></script>
</body>

</html>

CSS (style.css)

/* style.css */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background-image: linear-gradient(rgb(30, 30, 30), rgb(80, 80, 80));
   background-attachment: fixed;
   font-family: Arial, Helvetica, sans-serif;
}

.resume-builder {
padding: 27px 100px;
}

.container {
   padding: 10px 30px;
   background: rgb(240, 240, 240);
   border-radius: 10px;
   height: auto;
   width: 60%;
   margin: auto;
}

.container h1 {
   text-align: center;
   background-color: rgb(50, 50, 50);
   padding: 10px;
   color: white;
   margin-bottom: 20px;
}

input,
textarea {
   background-color: transparent;
   margin: 10px 0;
   padding: 5px;
   outline: none;
   border: none;
   border-bottom: 2px solid black;
   display: block;
   width: 100%;
}

button {
   border: none;
   background-color: white;
   padding: 15px;
   border-radius: 7px;
   font-weight: bold;
   cursor: pointer;
   display: block;
   margin: auto;
   margin-bottom: 20px;
}

button:hover {
font-size: medium;
}

.output-container {
   display: none;
   width: 60%;
   margin: 10px auto;
}

.output {
   background-color: white;
   border: 2px solid white;
   margin-bottom: 10px;
}

.heading {
   padding: 20px 10px;
   text-align: center;
   color: white;
   background-color: rgb(50, 50, 50);
   text-transform: uppercase;
}

.heading h4 {
color: rgb(200, 200, 200);
padding-top: 9px;
}

.info {
display: flex;
padding: 20px;
}

.left {
   width: 40%;
   border-right: 2px dashed black;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

.right {
   width: 60%;
   padding-left: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

.box {
   margin: 10px 0;
   padding: 5px 10px;
   height: auto;
   overflow-wrap: break-word;
}

.box h2,
.box p {
margin-bottom: 5px;
}

.tip {
   font-size: small;
   color: gray;
   text-align: center;
}

.credit {
   text-align: center;
   font-weight: bold;
   padding: 10px 3px;
   color: rgb(80, 80, 80);
}

a {
color: black;
}

a:hover {
color: rgb(247, 28, 12);
font-weight: bold;
}

/* media queries begin */
@media screen and (max-width: 920px) {
   .container {
       width: 100%;
   }

   .output-container {
       width: 87%;
   }
}

@media screen and (max-width: 600px) {
   .resume-builder {
       padding: 10px 30px;
   }

   h1 {
       font-size: 160%;
   }

   .info {
       flex-direction: column;
   }

   .left {
       border-right: none;
       width: 100%;
   }

   .right {
       padding-left: 0;
       width: 100%;
   }
}

/* media queries end here */

JAVA SCRIPT (script.js)

// script.js

// Taking elements from HTML
const inputField = document.querySelector(".inputField");
const main = document.querySelector(".resume-builder");
const outputContainer = document.querySelector(".output_container");

let isHidden = true;

// Function to toggle between input form and resume preview
function hide() {
   if (isHidden) {

       // Hide the input form and show the resume preview
       main.style.display = "none";
       isHidden = false;

       outputContainer.style.display = "block";
       outputContainer.innerHTML = `
           <div class="output">
               <div class="heading">
                   <h1>${inputField["name"].value}</h1>
                   <h4>${inputField["title"].value}</h4>
               </div>
               <div class="info">
                   <div class="left">
                       <div class="box">
                           <h2>Objective</h2>
                           <p>${inputField["objective"].value}</p>
                       </div>
                       <div class="box">
                           <h2>Skills</h2>
                           <p>${inputField["skills"].value}</p>
                       </div>
                       <div class="box">
                           <h2>Academic Details</h2>
                           <p>${inputField["academic_details"].value}</p>
                       </div>
                       <div class="box">
                           <h2>Contact</h2>
                           <p>${inputField["contact"].value}</p>
                       </div>
                   </div>
                   <div class="right">
                       <div class="box">
                           <h2>Work Experience</h2>
                           <p>${inputField["work_experience"].value}</p>
                       </div>
                       <div class="box">
                           <h2>Achievements</h2>
                           <p>${inputField["achievements"].value}</p>
                       </div>
                       <div class="box">
                           <h2>Projects</h2>
                           <p>${inputField["projects"].value}</p>
                       </div>
                   </div>
               </div>
           </div>
           <button onclick="print()">Print Resume</button>
       `;
   } else {
       // Show the input form and hide the resume preview
       main.style.display = "block";
       isHidden = true;

       outputContainer.style.display = "none";
       outputContainer.innerHTML = "";
   }
}

JavaScript

Introduction

JavaScript Can Change HTML Content

JavaScript History

Popular JavaScript Code Editors

Of course! Here's another simple JavaScript program. This one prompts the user for their name and then displays a greeting message:

Certainly! Here's a simple JavaScript program that calculates the sum of two numbers provided by the user:

Here's a more complete example of a simple website using HTML, CSS, and JavaScript. This site includes a navigation menu, a main content area with some text, and a simple interactive feature that shows an alert with a message when a button is clicked.

Creating a student management system involves building a web application that allows users to perform tasks like adding, deleting, updating, and viewing student records. Here's a basic guide on how to create a simple student management system using HTML, CSS, and JavaScript:

Creating a basic calculator using HTML, CSS, and JavaScript involves creating the necessary HTML structure for the calculator layout, styling it with CSS, and adding JavaScript to handle the calculations and user interactions. Here's a simple example:

Creating an inventory management system involves handling data related to products, including adding, updating, deleting, and displaying them. Below is a basic example of how you can create an inventory management system using HTML, CSS, and JavaScript:

HTML (index.html)

CSS (styles.css)

Front-End: HTML/CSS/JavaScript

1. `index.html`

2. `styles.css`

HTML (index.html)

How To Build Notes App Using Html CSS JavaScript ?

Create a Button Loading Animation in HTML CSS & JavaScript

Create a Quiz App with Timer using HTML CSS and JavaScript

Age Calculator Design using HTML CSS and JavaScript

Price Range Slider with Min-Max Input using HTML CSS and JavaScript

Create your own Lorem ipsum बहुत अच्छा जेनरेटर using HTML CSS and JavaScript

Simple Tic-Tac-Toe Game using JavaScript

Big offers for big dreams

About Digital Marketing

About Coding

Advance Excel & Excel VBA

Computer Typing Course

ADCA

JavaScript

Introduction

JavaScript Can Change HTML Content

JavaScript History

Popular JavaScript Code Editors

Of course! Here's another simple JavaScript program. This one prompts the user for their name and then displays a greeting message:

Certainly! Here's a simple JavaScript program that calculates the sum of two numbers provided by the user:

Here's a more complete example of a simple website using HTML, CSS, and JavaScript. This site includes a navigation menu, a main content area with some text, and a simple interactive feature that shows an alert with a message when a button is clicked.

Creating a student management system involves building a web application that allows users to perform tasks like adding, deleting, updating, and viewing student records. Here's a basic guide on how to create a simple student management system using HTML, CSS, and JavaScript:

Creating a basic calculator using HTML, CSS, and JavaScript involves creating the necessary HTML structure for the calculator layout, styling it with CSS, and adding JavaScript to handle the calculations and user interactions. Here's a simple example:

Creating an inventory management system involves handling data related to products, including adding, updating, deleting, and displaying them. Below is a basic example of how you can create an inventory management system using HTML, CSS, and JavaScript:

HTML (index.html)

CSS (styles.css)

Front-End: HTML/CSS/JavaScript

1. index.html

2. styles.css

HTML (index.html)

How To Build Notes App Using Html CSS JavaScript ?

Create a Button Loading Animation in HTML CSS & JavaScript

Create a Quiz App with Timer using HTML CSS and JavaScript

Age Calculator Design using HTML CSS and JavaScript

Price Range Slider with Min-Max Input using HTML CSS and JavaScript

Create your own Lorem ipsum बहुत अच्छा जेनरेटर using HTML CSS and JavaScript

Simple Tic-Tac-Toe Game using JavaScript

Big offers for big dreams

About Digital Marketing

About Coding

Advance Excel & Excel VBA

Computer Typing Course

ADCA

1. `index.html`

2. `styles.css`