JavaScript

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>

    <script>
        function showMessage() {
            alert("Hello! This is an alert message.");
        }
    </script>
</body>
</html>

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:

  1. 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">
                <!-- Student data will be displayed here -->
            </tbody>
        </table>
    </div>

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

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

document.getElementById('student-form').addEventListener('submit', function(event) {
    event.preventDefault();
    var name = document.getElementById('name').value;
    var age = document.getElementById('age').value;
    var grade = document.getElementById('grade').value;
    
    if (name && age && grade) {
        addStudent(name, age, grade);
        document.getElementById('student-form').reset();
    } else {
        alert('Please fill in all fields.');
    }
});

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:

  1. 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>

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

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:

  1. 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">
                <!-- Product data will be displayed here -->
            </tbody>
        </table>
    </div>

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

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.

document.getElementById('product-form').addEventListener('submit', function(event) {
    event.preventDefault();
    var productName = document.getElementById('product-name').value;
    var productQuantity = document.getElementById('product-quantity').value;
    
    if (productName && productQuantity) {
        addProduct(productName, productQuantity);
        document.getElementById('product-form').reset();
    } else {
        alert('Please fill in all fields.');
    }
});

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 displayInventory() {
  const inventoryList = document.getElementById("inventoryList");
  inventoryList.innerHTML = "";
  inventory.forEach((mobile) => {
    const listItem = document.createElement("li");
    listItem.textContent = `Name: ${mobile.name}, Brand: ${mobile.brand}, Quantity: ${mobile.quantity}`;
    inventoryList.appendChild(listItem);
  });
}

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);
}

function displayFilteredInventory(filteredInventory) {
  const inventoryList = document.getElementById("inventoryList");
  inventoryList.innerHTML = "";
  filteredInventory.forEach((mobile) => {
    const listItem = document.createElement("li");
    listItem.textContent = `Name: ${mobile.name}, Brand: ${mobile.brand}, Quantity: ${mobile.quantity}`;
    inventoryList.appendChild(listItem);
  });
}
 

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 = '';
}

function calculate() {
  const expression = document.getElementById('display').value;
  try {
    const result = eval(expression);
    document.getElementById('display').value = result;
  } catch (error) {
    document.getElementById('display').value = 'Error';
  }
}
 

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 = '';
}

function calculate() {
  const expression = document.getElementById('display').value;
  try {
    const result = eval(expression);
    document.getElementById('display').value = result;
  } catch (error) {
    document.getElementById('display').value = 'Error';
  }
}
 

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):

<!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">
    <h2>Login</h2>
    <form id="loginForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
      </div>
      <button type="submit">Login</button>
    </form>
    <p id="error" class="error"></p>
  </div>
  <script src="script.js"></script>
</body>
</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 loadCourses() {
    fetch('/api/courses')
        .then(response => response.json())
        .then(data => {
            const courseList = document.getElementById('course-list');
            data.forEach(course => {
                const div = document.createElement('div');
                div.innerText = `${course.name} - ${course.duration} - ${course.fee}`;
                courseList.appendChild(div);
            });
        });
}

function loadTimetable() {
    fetch('/api/timetable')
        .then(response => response.json())
        .then(data => {
            const timetableList = document.getElementById('timetable-list');
            data.forEach(entry => {
                const div = document.createElement('div');
                div.innerText = `${entry.course} - ${entry.day} - ${entry.time}`;
                timetableList.appendChild(div);
            });
        });
}

function loadFees() {
    fetch('/api/fees')
        .then(response => response.json())
        .then(data => {
            const feeList = document.getElementById('fee-list');
            data.forEach(fee => {
                const div = document.createElement('div');
                div.innerText = `${fee.student} - ${fee.amount}`;
                feeList.appendChild(div);
            });
        });
}

function loadIncomeExpenses() {
    fetch('/api/income-expenses')
        .then(response => response.json())
        .then(data => {
            const incomeExpenseList = document.getElementById('income-expense-list');
            data.forEach(entry => {
                const div = document.createElement('div');
                div.innerText = `${entry.description} - ${entry.amount} - ${entry.type}`;
                incomeExpenseList.appendChild(div);
            });
        });
}

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">
                <!-- Calendar dates will be injected here by JavaScript -->
            </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

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');

    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">
                <!-- Calendar dates will be injected here by JavaScript -->
            </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();

    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');
            }
        }
    }

    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">
        <!-- Content will be injected here by JavaScript -->
    </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">
                <!-- Left area content -->
            </div>
            <div class="right-area" id="right-area">
                <!-- Right area content -->
            </div>
        </div>
        <div class="bottom-area" id="bottom-area">
            <!-- Bottom area content -->
        </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">
            <!-- Content will be injected here by JavaScript -->
        </main>
        <footer>
            <p>&copy; 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)

<!-- index.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"> 
</head> 

<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="input-container"> 

                    <input type="number"
                        class="input-feild"
                        id="input-id"
                        placeholder= 
                        "Enter the number you want to check"> 
                </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"> 

<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>Note App</title> 
    <link rel="stylesheet" href="./style.css"> 
</head> 

<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)

<!--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)

<!--index.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" />
    <title>Code Quiz</title>
</head>

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

            <div class="timer">
                <p>
                    Time:
                    <span id="timer">
                        0
                    </span>
                </p>
            </div>
        </header>

        <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="questions">
                <h2 id="question-words"></h2>
                <div class="options" id="options">
                </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>

            <div id="feedback" 
                 class="feedback hide">
            </div>
        </main>
    </div>
    <script src="./script.js"></script>
</body>

</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

function questionClick() {
    if (
        this.value !==
        questions[currentQuestionIndex]
            .answer
    ) {
        time -= 10;
        if (time < 0) {
            time = 0;
        }
        timerEl.textContent = time;
        feedbackEl.textContent = `Wrong! The correct answer was 
        ${questions[currentQuestionIndex].answer}.`;
        feedbackEl.style.color = "red";
    } else {
        feedbackEl.textContent =
            "Correct!";
        feedbackEl.style.color =
            "green";
    }
    feedbackEl.setAttribute(
        "class",
        "feedback"
    );
    setTimeout(function () {
        feedbackEl.setAttribute(
            "class",
            "feedback hide"
        );
    }, 2000);
    currentQuestionIndex++;
    if (
        currentQuestionIndex ===
        questions.length
    ) {
        quizEnd();
    } else {
        getQuestion();
    }
}

// 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

function saveHighscore() {
    let name = nameEl.value.trim();
    if (name !== "") {
        let highscores =
            JSON.parse(
                window.localStorage.getItem(
                    "highscores"
                )
            ) || [];
        let newScore = {
            score: time,
            name: name,
        };
        highscores.push(newScore);
        window.localStorage.setItem(
            "highscores",
            JSON.stringify(highscores)
        );
        alert(
            "Your Score has been Submitted"
        );
    }
}

// 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

function printHighscores() {
    let highscores =
        JSON.parse(
            window.localStorage.getItem(
                "highscores"
            )
        ) || [];
    highscores.sort(function (a, b) {
        return b.score - a.score;
    });
    highscores.forEach(function (
        score
    ) {
        let liTag =
            document.createElement(
                "li"
            );
        liTag.textContent =
            score.name +
            " - " +
            score.score;
        let olEl =
            document.getElementById(
                "highscores"
            );
        olEl.appendChild(liTag);
    });
}

// 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 />

        <!-- Take the date from which age is to be calculated -->
        <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> 

            <!-- Slider -->
            <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); 

            let diff = maxVal - minVal 
            
            // Check if the price gap is exceeded 
            if (diff < priceGap) { 
            
                // Check if the input is the min range input 
                if (e.target.className === "min-range") { 
                    rangeInputvalue[0].value = maxVal - priceGap; 
                } 
                else { 
                    rangeInputvalue[1].value = minVal + priceGap; 
                } 
            } 
            else { 
            
                // Update price inputs and range progress 
                priceInputvalue[0].value = minVal; 
                priceInputvalue[1].value = maxVal; 
                rangevalue.style.left = 
                    `${(minVal / rangeInputvalue[0].max) * 100}%`; 
                rangevalue.style.right = 
                    `${100 - (maxVal / rangeInputvalue[1].max) * 100}%`; 
            } 
        }); 
    } 
}
 

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

HTML (index.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"> 
            
            <!-- Lorem Ipsum text will 
                be displayed here -->
        </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"> 
    <!-- CSS file Included -->
    <link rel="stylesheet" type="text/css" href="tic.css"> 
    <!-- JavaScript file included -->
    <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; 
    } 

function myfunc_4() { 
    if (flag == 1) { 
        document.getElementById("b2").value = "X"; 
        document.getElementById("b2").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b2").value = "0"; 
        document.getElementById("b2").disabled = true; 
        flag = 1; 
    } 

function myfunc_5() { 
    if (flag == 1) { 
        document.getElementById("b3").value = "X"; 
        document.getElementById("b3").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b3").value = "0"; 
        document.getElementById("b3").disabled = true; 
        flag = 1; 
    } 

function myfunc_6() { 
    if (flag == 1) { 
        document.getElementById("b4").value = "X"; 
        document.getElementById("b4").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b4").value = "0"; 
        document.getElementById("b4").disabled = true; 
        flag = 1; 
    } 

function myfunc_7() { 
    if (flag == 1) { 
        document.getElementById("b5").value = "X"; 
        document.getElementById("b5").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b5").value = "0"; 
        document.getElementById("b5").disabled = true; 
        flag = 1; 
    } 

function myfunc_8() { 
    if (flag == 1) { 
        document.getElementById("b6").value = "X"; 
        document.getElementById("b6").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b6").value = "0"; 
        document.getElementById("b6").disabled = true; 
        flag = 1; 
    } 

function myfunc_9() { 
    if (flag == 1) { 
        document.getElementById("b7").value = "X"; 
        document.getElementById("b7").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b7").value = "0"; 
        document.getElementById("b7").disabled = true; 
        flag = 1; 
    } 

function myfunc_10() { 
    if (flag == 1) { 
        document.getElementById("b8").value = "X"; 
        document.getElementById("b8").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b8").value = "0"; 
        document.getElementById("b8").disabled = true; 
        flag = 1; 
    } 

function myfunc_11() { 
    if (flag == 1) { 
        document.getElementById("b9").value = "X"; 
        document.getElementById("b9").disabled = true; 
        flag = 0; 
    } 
    else { 
        document.getElementById("b9").value = "0"; 
        document.getElementById("b9").disabled = true; 
        flag = 1; 
    }