Code Library

1.Login Page
+ 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>

<style>
body { font-family: Arial; background:#eef2f3; margin:0; }
.navbar { background:#333; padding:10px; }
.navbar a { color:white; margin:0 15px; text-decoration:none; }
.navbar a:hover { color:yellow; }

.container {
  width:300px;
  margin:80px auto;
  background:white;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.input-field {
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ccc;
  border-radius:4px;
}

.button {
  width:100%;
  padding:10px;
  background:#4caf50;
  border:none;
  color:white;
  font-size:16px;
  border-radius:4px;
}
</style>

</head>
<body>

<div class="navbar">
  <a href="login.html">Login</a>
  <a href="registration.html">Register</a>
  <a href="catalog.html">Catalog</a>
  <a href="cart.html">Cart</a>
</div>

<div class="container">
  <h2 style="text-align:center;">Login</h2>

  <form>
    <input type="text" class="input-field" placeholder="Username" required>
    <input type="password" class="input-field" placeholder="Password" required>
    <button class="button">Login</button>
  </form>
</div>

</body>
</html>
2.Register Page
+ 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>

<style>
body { font-family: Arial; background:#eef2f3; margin:0; }
.navbar { background:#333; padding:10px; }
.navbar a { color:white; margin:0 15px; text-decoration:none; }
.navbar a:hover { color:yellow; }

.container {
  width:320px;
  margin:60px auto;
  background:white;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.input-field {
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ccc;
  border-radius:4px;
}

.button {
  width:100%;
  padding:10px;
  background:#2196f3;
  border:none;
  color:white;
  font-size:16px;
  border-radius:4px;
}
</style>

</head>
<body>

<div class="navbar">
  <a href="login.html">Login</a>
  <a href="registration.html">Register</a>
  <a href="catalog.html">Catalog</a>
  <a href="cart.html">Cart</a>
</div>

<div class="container">
  <h2 style="text-align:center;">Register</h2>

  <form>
    <input type="text" class="input-field" placeholder="Username" required>
    <input type="email" class="input-field" placeholder="Email" required>
    <input type="password" class="input-field" placeholder="Password" required>
    <input type="password" class="input-field" placeholder="Confirm Password" required>
    <button class="button">Register</button>
  </form>
</div>

</body>
</html>
7.React Todo App
+ 
import React, { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  const addTask = () => {
    if (newTask.trim() !== "") {
      setTasks([...tasks, newTask]);
      setNewTask("");
    }
  };

  const removeTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div>
      <h1>Todo List</h1>

      <div>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task"
        />
        <button onClick={addTask}>Add</button>
      </div>

      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;
9.Bookstore XML System ---- 4 FILES
+ 
✅ FILE 1 — bookstore.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="bookstore.xsl"?>
<!DOCTYPE bookstore SYSTEM "bookstore.dtd">

<bookstore>
    <book>
        <title>Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <ISBN>12345</ISBN>
        <publisher>ABC Publications</publisher>
        <edition>1</edition>
        <price>30.00</price>
    </book>

    <book>
        <title>Harry Potter</title>
        <author>J K. Rowling</author>
        <ISBN>54321</ISBN>
        <publisher>Scholastic</publisher>
        <edition>2</edition>
        <price>29.99</price>
    </book>

    <book>
        <title>Learning XML</title>
        <author>Erik T. Ray</author>
        <ISBN>67890</ISBN>
        <publisher>O'Reilly</publisher>
        <edition>3</edition>
        <price>39.95</price>
    </book>
</bookstore>

✅ FILE 2 — bookstore.xsl
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <html>
      <body>
        <h2>My Books Collection</h2>

        <table border="1">
          <tr bgcolor="red">
            <th>Title</th>
            <th>Author</th>
          </tr>

          <xsl:for-each select="bookstore/book">
            <tr>
              <td><xsl:value-of select="title" /></td>

              <xsl:choose>
                <xsl:when test="price > 30">
                  <td bgcolor="yellow"><xsl:value-of select="author" /></td>
                </xsl:when>

                <xsl:when test="price > 10">
                  <td bgcolor="magenta"><xsl:value-of select="author" /></td>
                </xsl:when>

                <xsl:otherwise>
                  <td><xsl:value-of select="author" /></td>
                </xsl:otherwise>
              </xsl:choose>

            </tr>
          </xsl:for-each>

        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

✅ FILE 3 — bookstore.dtd
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, ISBN, publisher, edition, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>

✅ FILE 4 — bookstore.xsd
<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
           elementFormDefault="qualified">

  <xs:element name="bookstore">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="book" maxOccurs="unbounded">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="title" type="xs:string" />
              <xs:element name="author" type="xs:string" />
              <xs:element name="ISBN" type="xs:string" />
              <xs:element name="publisher" type="xs:string" />
              <xs:element name="edition" type="xs:int" />
              <xs:element name="price" type="xs:decimal" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>
5.Student CRUD Application
+ 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Student CRUD</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background: #6666c7;
    }
    h2 {
      text-align: center;
      color: #1f9e34;
    }
    form {
      margin-bottom: 20px;
      background: #bfd11b;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    input, button {
      margin: 5px;
      padding: 8px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      background: #fff;
    }
    table, th, td {
      border: 1px solid #ccc;
    }
    th, td {
      padding: 10px;
      text-align: center;
    }
    button {
      cursor: pointer;
      border: none;
      border-radius: 5px;
    }
    .edit {
      background: #4CAF50;
      color: white;
    }
    .delete {
      background: #f44336;
      color: white;
    }
  </style>

</head>
<body>

  <h2>Student CRUD Application</h2>

  <form id="studentForm">
    <input type="text" id="studentId" placeholder="Student ID" required>
    <input type="text" id="studentName" placeholder="Name" required>
    <input type="email" id="studentEmail" placeholder="Email" required>
    <input type="text" id="studentPhone" placeholder="Phone" required>
    <input type="number" step="0.01" id="studentCgpa" placeholder="CGPA" required>
    <input type="text" id="studentBranch" placeholder="Branch" required>
    <button type="submit">Add / Update Student</button>
  </form>

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>CGPA</th>
        <th>Branch</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="studentTableBody"></tbody>
  </table>


  <script>
    let students = [];
    let editIndex = -1;

    const form = document.getElementById('studentForm');
    const tableBody = document.getElementById('studentTableBody');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const id = document.getElementById('studentId').value;
      const name = document.getElementById('studentName').value;
      const email = document.getElementById('studentEmail').value;
      const phone = document.getElementById('studentPhone').value;
      const cgpa = document.getElementById('studentCgpa').value;
      const branch = document.getElementById('studentBranch').value;

      const student = { id, name, email, phone, cgpa, branch };

      if (editIndex === -1) {
        students.push(student);   // CREATE
      } else {
        students[editIndex] = student;  // UPDATE
        editIndex = -1;
      }

      form.reset();
      renderTable();
    });

    function renderTable() {
      tableBody.innerHTML = "";
      students.forEach((student, index) => {
        const row = `
          <tr>
            <td>${student.id}</td>
            <td>${student.name}</td>
            <td>${student.email}</td>
            <td>${student.phone}</td>
            <td>${student.cgpa}</td>
            <td>${student.branch}</td>
            <td>
              <button class="edit" onclick="editStudent(${index})">Edit</button>
              <button class="delete" onclick="deleteStudent(${index})">Delete</button>
            </td>
          </tr>`;
        tableBody.innerHTML += row;
      });
    }

    function editStudent(index) {
      const student = students[index];

      document.getElementById('studentId').value = student.id;
      document.getElementById('studentName').value = student.name;
      document.getElementById('studentEmail').value = student.email;
      document.getElementById('studentPhone').value = student.phone;
      document.getElementById('studentCgpa').value = student.cgpa;
      document.getElementById('studentBranch').value = student.branch;

      editIndex = index;
    }

    function deleteStudent(index) {
      if (confirm("Are you sure you want to delete this student?")) {
        students.splice(index, 1);  // DELETE
        renderTable();
      }
    }
  </script>

</body>
</html>
4.Bootstrap Product Catalog
+ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Product Catalog</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>

<body>

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">CARTIFY</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">

                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Login</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Page 1-1</a></li>
                            <li><a class="dropdown-item" href="#">Page 1-2</a></li>
                        </ul>
                    </li>

                    <li class="nav-item"><a class="nav-link" href="#">Registration</a></li>
                </ul>

                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Sign Up</a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-sign-in-alt"></i> Login</a></li>
                </ul>

            </div>
        </div>
    </nav>

    <!-- CATALOG -->
    <div class="container mt-4 p-4" style="background-color: cyan;">
        <h2 class="text-center mb-4">Book Catalog</h2>

        <div class="row">

            <!-- REUSABLE CARD TEMPLATE -->
            <!-- CARD 1 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product1.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 1</h5>
                        <p class="card-text">Short description of book 1.</p>
                        <p class="text-warning">★★★★☆</p>
                        <p><strong>Price:</strong> Rs 200</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 2 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product2.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 2</h5>
                        <p class="card-text">Short description of book 2.</p>
                        <p class="text-warning">★★★★★</p>
                        <p><strong>Price:</strong> Rs 250</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 3 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product3.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 3</h5>
                        <p class="card-text">Short description of book 3.</p>
                        <p class="text-warning">★★★☆☆</p>
                        <p><strong>Price:</strong> Rs 180</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 4 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product4.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 4</h5>
                        <p class="card-text">Short description of book 4.</p>
                        <p class="text-warning">★★★★★</p>
                        <p><strong>Price:</strong> Rs 320</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 5 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product5.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 5</h5>
                        <p class="card-text">Short description of book 5.</p>
                        <p class="text-warning">★★★★☆</p>
                        <p><strong>Price:</strong> Rs 220</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 6 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product6.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 6</h5>
                        <p class="card-text">Short description of book 6.</p>
                        <p class="text-warning">★★★☆☆</p>
                        <p><strong>Price:</strong> Rs 210</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 7 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product7.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 7</h5>
                        <p class="card-text">Short description of book 7.</p>
                        <p class="text-warning">★★★☆☆</p>
                        <p><strong>Price:</strong> Rs 190</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 8 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product8.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 8</h5>
                        <p class="card-text">Short description of book 8.</p>
                        <p class="text-warning">★★★★☆</p>
                        <p><strong>Price:</strong> Rs 260</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 9 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product9.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 9</h5>
                        <p class="card-text">Short description of book 9.</p>
                        <p class="text-warning">★★★★★</p>
                        <p><strong>Price:</strong> Rs 350</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- CARD 10 -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <img src="product10.jpeg" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Book Title 10</h5>
                        <p class="card-text">Short description of book 10.</p>
                        <p class="text-warning">★★★★☆</p>
                        <p><strong>Price:</strong> Rs 230</p>
                        <button class="btn btn-primary w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
3.Fabulous Flair Website Project ---5 FILES
+ 
✅ FILE 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>Main Page</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #eef2f3;
    }

    .navbar {
      background: #333;
      padding: 12px;
      text-align: center;
    }

    .navbar a {
      color: white;
      margin: 0 20px;
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
    }

    .navbar a:hover {
      color: yellow;
    }

    h1 {
      text-align: center;
      margin-top: 60px;
      color: #222;
    }

    p {
      text-align: center;
      font-size: 18px;
      color: #444;
    }
  </style>
</head>

<body>

  <!-- NAVIGATION MENU -->
  <div class="navbar">
    <a href="login.html">Login</a>
    <a href="registration.html">Register</a>
    <a href="catalog.html">Catalog</a>
    <a href="cart.html">Cart</a>
  </div>

  <!-- MAIN CONTENT -->
  <h1>Welcome to Fabulous Flair</h1>
  <p>Your one-stop boutique platform</p>

</body>
</html>
✅ FILE 2 —  login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>

<style>
body { font-family: Arial; background:#eef2f3; margin:0; }
.navbar { background:#333; padding:10px; }
.navbar a { color:white; margin:0 15px; text-decoration:none; }
.navbar a:hover { color:yellow; }

.container {
  width:300px;
  margin:80px auto;
  background:white;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.input-field {
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ccc;
  border-radius:4px;
}

.button {
  width:100%;
  padding:10px;
  background:#4caf50;
  border:none;
  color:white;
  font-size:16px;
  border-radius:4px;
}
</style>

</head>
<body>

<div class="navbar">
  <a href="login.html">Login</a>
  <a href="registration.html">Register</a>
  <a href="catalog.html">Catalog</a>
  <a href="cart.html">Cart</a>
</div>

<div class="container">
  <h2 style="text-align:center;">Login</h2>

  <form>
    <input type="text" class="input-field" placeholder="Username" required>
    <input type="password" class="input-field" placeholder="Password" required>
    <button class="button">Login</button>
  </form>
</div>

</body>
</html>

✅ FILE 3 —  registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>

<style>
body { font-family: Arial; background:#eef2f3; margin:0; }
.navbar { background:#333; padding:10px; }
.navbar a { color:white; margin:0 15px; text-decoration:none; }
.navbar a:hover { color:yellow; }

.container {
  width:320px;
  margin:60px auto;
  background:white;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.input-field {
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ccc;
  border-radius:4px;
}

.button {
  width:100%;
  padding:10px;
  background:#2196f3;
  border:none;
  color:white;
  font-size:16px;
  border-radius:4px;
}
</style>

</head>
<body>

<div class="navbar">
  <a href="login.html">Login</a>
  <a href="registration.html">Register</a>
  <a href="catalog.html">Catalog</a>
  <a href="cart.html">Cart</a>
</div>

<div class="container">
  <h2 style="text-align:center;">Register</h2>

  <form>
    <input type="text" class="input-field" placeholder="Username" required>
    <input type="email" class="input-field" placeholder="Email" required>
    <input type="password" class="input-field" placeholder="Password" required>
    <input type="password" class="input-field" placeholder="Confirm Password" required>
    <button class="button">Register</button>
  </form>
</div>

</body>
</html>

✅ FILE 4 —  catalog.html

Simple layout with images + Add to Cart buttons.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog</title>

<style>
body { font-family: Arial; margin:0; background:#f9f9f9; }
.navbar { background:#333; padding:10px; }
.navbar a { color:white; margin:0 15px; text-decoration:none; }
.navbar a:hover { color:yellow; }

.catalog {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding:20px;
}

.card {
  width:220px;
  background:white;
  padding:15px;
  margin:10px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  text-align:center;
}

.card img {
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:6px;
}

.button {
  margin-top:10px;
  padding:8px 10px;
  width:100%;
  background:#4caf50;
  color:white;
  border:none;
  border-radius:4px;
}
</style>

</head>
<body>

<div class="navbar">
  <a href="login.html">Login</a>
  <a href="registration.html">Register</a>
  <a href="catalog.html">Catalog</a>
  <a href="cart.html">Cart</a>
</div>

<h2 style="text-align:center;">Product Catalog</h2>

<div class="catalog">

  <div class="card">
    <img src="product1.jpg" alt="Item 1">
    <h3>Product 1</h3>
    <p>Rs 200</p>
    <button class="button">Add to Cart</button>
  </div>

  <div class="card">
    <img src="product2.jpg" alt="Item 2">
    <h3>Product 2</h3>
    <p>Rs 250</p>
    <button class="button">Add to Cart</button>
  </div>

  <div class="card">
    <img src="product3.jpg" alt="Item 3">
    <h3>Product 3</h3>
    <p>Rs 300</p>
    <button class="button">Add to Cart</button>
  </div>

</div>

</body>
</html>

✅ FILE 5 —  cart.html

Simple cart table (static — no JS, as you wanted simple HTML/CSS).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart</title>

<style>
body { font-family: Arial; margin:0; background:#f9f9f9; }
.navbar { background:#333; padding:10px; }
.navbar a { color:white; margin:0 15px; text-decoration:none; }
.navbar a:hover { color:yellow; }

table {
  width:80%;
  margin:40px auto;
  border-collapse:collapse;
  background:white;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

th, td {
  border:1px solid #ccc;
  padding:12px;
  text-align:center;
}

th {
  background:#4caf50;
  color:white;
}
</style>

</head>
<body>

<div class="navbar">
  <a href="login.html">Login</a>
  <a href="registration.html">Register</a>
  <a href="catalog.html">Catalog</a>
  <a href="cart.html">Cart</a>
</div>

<h2 style="text-align:center;">Your Cart</h2>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>Rs 200</td>
    <td>1</td>
    <td>Rs 200</td>
  </tr>
</table>

</body>
</html>
Cookies (JS & HTML)
+ 
NN.js
function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

1.html
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 30);
    }
  }
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
Node.js & Mouse Events
+ 
index.js
const http = require("http");
const server = http.createServer((req, res) => {
  res.write("This is the response from my server");
  res.end();
});
server.listen(3000, () => {
  console.log("hello thaliva your server is running");
});

Viji.js
const os = require('os');
console.log("CPU Architecture: " + os.arch());
console.log("free memory: " + os.freemem());
console.log("total memory: " + os.totalmem());
console.log('list of network interface: ' + os.networkInterfaces());
console.log('os default directory for temp files: ' + os.tmpdir());

Mouse event.html
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling for the buttons */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  width: 120px; /* Added fixed width */
}
/* Styling for the color names */
.color-name {
  margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<!-- Buttons with color names -->
<button class="button" onmouseover="document.bgColor='green'">Bright Green</button><br/>
<button class="button" onmouseover="document.bgColor='red'">Red</button><br/>
<button class="button" onmouseover="document.bgColor='magenta'">Magenta</button><br/>
<button class="button" onmouseover="document.bgColor='purple'">Purple</button><br/>
<button class="button" onmouseover="document.bgColor='blue'">Blue</button><br/>
<button class="button" onmouseover="document.bgColor='yellow'">Yellow</button><br/>
<button class="button" onmouseover="document.bgColor='black'">Black</button><br/>
<button class="button" onmouseover="document.bgColor='orange'">Orange</button><br/>
</p>
</body>
</html>
Student Express App
+ 
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());

let students = [
    { id: 1, name: 'Kasyapa', age: 34 },
    { id: 2, name: 'MSBK', age: 33 }
];

app.get('/students', (req, res) => {
    res.json(students);
});

app.get('/students/:id', (req, res) => {
    const student = students.find(s => s.id === parseInt(req.params.id));
    if (!student) return res.status(404).send('Student not found.');
    res.json(student);
});

app.post('/students', (req, res) => {
    const student = {
        id: students.length + 1,
        name: req.body.name,
        age: req.body.age
    };
    students.push(student);
    res.json(student);
});

app.put('/students/:id', (req, res) => {
    const student = students.find(s => s.id === parseInt(req.params.id));
    if (!student) return res.status(404).send('Student not found.');
    student.name = req.body.name;
    student.age = req.body.age;
    res.json(student);
});

app.delete('/students/:id', (req, res) => {
    const studentIndex = students.findIndex(s => s.id === parseInt(req.params.id));
    if (studentIndex === -1) return res.status(404).send('Student not found.');
    students.splice(studentIndex, 1);
    res.send('Student deleted successfully.');
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});
JWT Authentication
+ 
const express = require('express');
const dotenv = require('dotenv');
const jwt = require('jsonwebtoken');
const app = express();

dotenv.config();

let PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
    console.log(`Server is up and running on ${PORT} ...`);
});

app.post("/user/generateToken", (req, res) => {
    let jwtSecretKey = process.env.JWT_SECRET_KEY;
    let data = {
        time: Date(),
        userId: 12,
    }

    const token = jwt.sign(data, jwtSecretKey);

    res.send(token);
});

app.get("/user/validateToken", (req, res) => {
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1];

    if (!token) return res.sendStatus(401);

    let jwtSecretKey = process.env.JWT_SECRET_KEY;

    try {
        const verified = jwt.verify(token, jwtSecretKey);
        if (verified) {
            return res.send("Successfully Verified");
        } else {
            // Access Denied
            return res.status(401).send("Access Denied");
        }
    } catch (error) {
        // Access Denied
        return res.status(401).send(error);
    }
});
No matching codes found.