fslab

EXTRA QUESTIONS:
(table creation using img)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, .heading-cell {
font-weight: bold;
background-color: #f2f2f2;
}
td, th {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
.right-align {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<td class="heading-cell" colspan="2">Invoice #123456789</td>
<td class="heading-cell" colspan="2">14 January 2025</td>
</tr>
<tr>
<td class="heading-cell" colspan="2">Pay to:</td>
<td class="heading-cell" colspan="2">Customer:</td>
</tr>
<tr>
<td colspan="2">Acme Billing Co.<br>123 Main St.<br>Cityville, NA 12345</td>
<td colspan="2">John Smith<br>321 Willow Way<br>Southeast Northwesternshire,
MA 54321</td>
</tr>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paper clips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
<tr>
<td class="heading-cell" colspan="3">Subtotal</td>
<td>110.00</td>
</tr>
<tr>
<td class="heading-cell" colspan="3">Tax</td>
<td>8.80</td>
</tr>
<tr>
<td class="heading-cell" colspan="3">Grand Total</td>
<td>$ 118.80</td>
</tr>
</table>
</body>
</html>
```


(upper and lower case)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inputString">
    <button onclick="changeCase()">submit</button>
    <p id="output"></p>
    <script>
        function changeCase(){
            const inputString=document.getElementById("inputString").value;
            let result='';
            for(let i=0;i<inputString.length;i++){
                const char=inputString[i];
                if(char===char.toUpperCase()){
                    result+=char.toLowerCase();
                }
                else if(char===char.toLowerCase()){
                    result+=char.toUpperCase();
                }
                else{
                    result+=char;
                }
            }
            document.getElementById('output').textContent=result;
        }
    </script>
</body>
</html>


(new 2 cells adding)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }

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

    td {
        border: 1px solid #333;
        padding: 10px;
        text-align: center;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }

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

    #display {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    </style>
</head>
<body>
    <table>
        <tr id="table1">
            <td>Column1</td>
            <td>Column2</td>
        </tr>
    </table>
    <button id="btn1">Add Row</button>
    <div id="display"></div>
    <script>
        document.getElementById('btn1').addEventListener('click', function() {
            const table = document.querySelector('table');
            const newRow = table.insertRow();

            for (let i = 0; i < 2; i++) {
                const cell = newRow.insertCell();
                const randomNum = Math.floor(Math.random() * 200) + 1;
                cell.textContent = randomNum;

                cell.addEventListener('mouseover', function () {
                    const value = parseInt(this.textContent);
                    this.style.backgroundColor = (value % 2 === 0) ? "blue" : "pink";
                });

                cell.addEventListener('mouseout', function () {
                    this.style.backgroundColor = "";
                });

                cell.addEventListener('click', function () {
                    document.getElementById('display').textContent = this.textContent;
                });
            }
        });
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academic Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
margin: 20px 0;
}
th {
color: red;
font-weight: bold;
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
td {
color: blue;
border: 1px solid #ddd;
padding: 8px;
}
tr:hover td {
background-color: #f5f5f5;
}
/* Special styling for merged cells */
.merged-row {
border-top: none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Sno</th>
<th>Course</th>
<th>Subject</th>
<th colspan="2">Marks</th>
<th>Category</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<th>Internal</th>
<th>External</th>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>BTech(CSE)</td>
<td>Fun with Game Design</td>
<td>30</td>
<td>70</td>
<td rowspan="2"></td>
</tr>
<tr class="merged-row">
<td></td>
<td></td>
<td>Fun with Programming</td>
<td>30</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Simple Registration</title>
  <style>
    .error {
      color: red;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <form id="form">
    <input id="username" placeholder="Username">
    <div id="usernameError" class="error"></div><br>

    <input id="password" type="password" placeholder="Password">
    <div id="passwordError" class="error"></div><br>

    <input id="confirmPassword" type="password" placeholder="Confirm Password">
    <div id="confirmPasswordError" class="error"></div><br>

    <input id="email" type="email" placeholder="Email">
    <div id="emailError" class="error"></div><br>

    <!-- Button type is "button" to prevent form from auto-submitting -->
    <button type="button" onclick="validate()">Register</button>
  </form>

  <script>
    function validate() {
      // Get input values from the form
      const u = username.value.trim();               // Trim spaces from username
      const p = password.value;                      // Password value
      const cp = confirmPassword.value;              // Confirm password value
      const em = email.value;                        // Email value

      let valid = true; // This tracks if all fields are valid

      // Username must not be empty
      if (!u) {
        usernameError.textContent = 'Username is required';
        valid = false;
      }

      // Password must be at least 6 characters
      if (p.length < 6) {
        passwordError.textContent = 'Password must be at least 6 chars';
        valid = false;
      }

      // Password and confirm password must match
      if (p !== cp) {
        confirmPasswordError.textContent = 'Passwords do not match';
        valid = false;
      }

      // Email must include "@" and "."
      if (!em.includes('@') || !em.includes('.')) {
        emailError.textContent = 'Invalid email';
        valid = false;
      }

      // If all checks passed
      if (valid) {
        alert('Registration successful!');
        // Optionally submit the form here
        // document.getElementById('form').submit();
      }
    }
  </script>
</body>
</html>


1st part:
function bizzFizz() {
const result = [];
for (let i = 1; i <= 100; i++) {
if (i % 3 === 0 && i % 5 === 0) {
result.push("BizzFizz");
} else if (i % 3 === 0) {
result.push("Bizz");
} else if (i % 5 === 0) {
result.push("Fizz");
} else {
result.push(i);
}
}
return result;
}
// Usage:
const bizzFizzArray = bizzFizz();
console.log(bizzFizzArray);

2nd part:
<!DOCTYPE html>
<html>
    <style>
        #output{
            margin: 20%;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: x-large;
            border: 1px solid;
            height: 150px;
            width: 250px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
    </style>
<body>
  <h2>Grade Ranges</h2>
  <div id="output"></div>

  <script>
    const students = [
      { grade: 45 }, { grade: 36 }, { grade: 42 },
      { grade: 35 }, { grade: 25 }, { grade: 22 }, { grade: 20 }
    ];

    const count = { '0-20': 0, '21-30': 0, '31-40': 0, '41-50': 0 };

    students.forEach(s => {
      if (s.grade <= 20) count['0-20']++;
      else if (s.grade <= 30) count['21-30']++;
      else if (s.grade <= 40) count['31-40']++;
      else count['41-50']++;
    });

    document.getElementById("output").innerHTML =
      Object.entries(count).map(([range, num]) => ${range}: ${num}).join("<br>");
  </script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>Attendance</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #000; padding: 6px; text-align: center; }
    .low { background: #f88; }
    .medium { background: #acf; }
    .high { background: #afa; }
  </style>
</head>
<body>

<h2>Attendance Report</h2>
<table>
  <tr><th>Name</th><th>Attended</th><th>%</th></tr>
  <tbody id="data"></tbody>
</table>

<script>
  const students = [
    { name: "John", attended: 25 },
    { name: "Jane", attended: 32 },
    { name: "Mike", attended: 30 },
    { name: "Sarah", attended: 28 },
    { name: "David", attended: 35 }
  ];
  const total = 40;
  const table = document.getElementById('data');

  students.forEach(s => {
    let p = Math.round((s.attended / total) * 100);
    let cls = p < 75 ? 'low' : p <= 85 ? 'medium' : 'high';
    table.innerHTML += <tr class="${cls}"><td>${s.name}</td><td>${s.attended}</td><td>${p}%</td></tr>;
  });
</script>

</body>
</html>


import React, { useState, useEffect } from 'react';
function TimeBasedGreeting() {
const [greeting, setGreeting] = useState('');
useEffect(() => {
const updateGreeting = () => {
const now = new Date();
const hours = now.getHours();
if (hours >= 0 && hours < 12) {
setGreeting('Good Morning');
} else if (hours >= 12 && hours < 17) {
setGreeting('Good Afternoon');
} else if (hours >= 17 && hours < 21) {
setGreeting('Good Evening');
} else {
setGreeting('Good Night');
}
};
// Update greeting immediately
updateGreeting();
// Update greeting every minute to handle day changes
const interval = setInterval(updateGreeting, 60000);
return () => clearInterval(interval);
}, []);
return (
<div className="greeting-app">
<h1>{greeting}</h1>
<p>Current time: {new Date().toLocaleTimeString()}</p>
</div>
);
}
export default TimeBasedGreeting;


import React from 'react';
import './App.css';
function IssueTracker() {
// Static issue data
const issues = [
{
id: 1,
title: 'Error in Login screen',
description: 'On entry of correct password it displays incorrect password unable to login',
status: 'Closed'
},
{
id: 2,
title: 'Server Message 200 On Error',
description: 'Instead of 204 No content error message Message 200 Success is
displayed',
status: 'Open'
},
{
id: 3,
title: 'Mobile Responsiveness Issue',
description: 'Layout breaks on mobile devices below 400px width',
status: 'Open'
}
];
return (
<div className="issue-tracker">
<h1>Issue Tracker</h1>
<div className="issues-container">
{issues.map(issue => (
<div key={issue.id} className={issue-card ${issue.status.toLowerCase()}}>
<h3>{issue.title}</h3>
<p className="description">{issue.description}</p>
<div className="status">
Status: <span className={`status-badge
${issue.status.toLowerCase()}`}>{issue.status}</span>
</div>
</div>
))}
</div>
</div>
);
}
export default IssueTracker;


<!DOCTYPE html>
<html>
<head>
  <title>Attendance</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #000; padding: 6px; text-align: center; }
    .low { background: #f88; }
    .medium { background: #acf; }
    .high { background: #afa; }
  </style>
</head>
<body>

<h2>Attendance Report</h2>
<table>
  <tr><th>Name</th><th>Attended</th><th>%</th></tr>
  <tbody id="data"></tbody>
</table>

<script>
  const students = [
    { name: "John", attended: 25 },
    { name: "Jane", attended: 32 },
    { name: "Mike", attended: 30 },
    { name: "Sarah", attended: 28 },
    { name: "David", attended: 35 }
  ];
  const total = 40;
  const table = document.getElementById('data');

  students.forEach(s => {
    let p = Math.round((s.attended / total) * 100);
    let cls = p < 75 ? 'low' : p <= 85 ? 'medium' : 'high';
    table.innerHTML += <tr class="${cls}"><td>${s.name}</td><td>${s.attended}</td><td>${p}%</td></tr>;
  });
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>
  <input id="input" placeholder="Enter text">
  <button onclick="check()">Check</button>
  <p id="result"></p>

  <script>
  function check() {
    // Get the input value from the text box
    let inputValue = document.getElementById('input').value;

    // Convert the input to lowercase and remove all non-alphanumeric characters
    // This makes the check case-insensitive and ignores spaces, punctuation, etc.
    let cleaned = inputValue.toLowerCase().replace(/[^a-z0-9]/g, '');

    // Reverse the cleaned string
    let reversed = cleaned.split('').reverse().join('');

    // Compare the cleaned string with its reversed version
    if (cleaned === reversed) {
      // If they match, it's a palindrome
      document.getElementById('result').textContent = 'Palindrome';
    } else {
      // If not, it's not a palindrome
      document.getElementById('result').textContent = 'Not a palindrome';
    }
  }
</script>

</body>
</html>


import React, { useState } from 'react';
function WelcomeMessage() {
const [message, setMessage] = useState("Welcome to Dayananda Sagar");
const handleClick = () => {
setMessage("The best place to enjoy without time");
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>{message}</h1>
<button
onClick={handleClick}
style={{
padding: '10px 20px',
fontSize: '16px',
backgroundColor: '#4CAF50',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
}}
>
Change Message
</button>
</div>
);
}
export default WelcomeMessage;

. Express.js Server (Mount Event Function)
const express = require('express');
const app = express();
// Mount event middleware
app.use((req, res, next) => {
console.log("Teacher taught --- First Message");
next();
console.log("Student did not listen --- Second Message");
});
// Basic route
app.get('/', (req, res) => {
res.send('Server is running');
});
// Start server
const PORT = 3000;
app.listen(PORT, () => {
console.log(Server listening on PORT ${PORT});
});


<!DOCTYPE html>
<html>
<head>
  <title>Poem Screenshot</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
  <style>
    body { font-family: Georgia; text-align: center; background: #f9f9f9; padding: 20px; }
    h1, h2 { text-decoration: underline; }
    .poet { font-style: italic; margin-top: 20px; }
    button { margin-top: 30px; padding: 10px 20px; background: #4a6fa5; color: #fff; border: none; border-radius: 4px; }
  </style>
</head>
<body id="poem">
  <h1>Poem by Sir Walter Scott</h1>
  <h2>My Native Land</h2>
  <p><u>Breathes</u> there the man, with soul so dead,<br>
     Who never to himself hath said,<br>
     This is my own, my native land!</p>
  <div class="poet">- Sir Walter Scott</div>

  <button onclick="takeScreenshot()">Take Screenshot</button>

  <script>
    function takeScreenshot() {
      html2canvas(document.body).then(canvas => {
        let link = document.createElement('a');
        link.download = 'poem-screenshot.png';
        link.href = canvas.toDataURL();
        link.click();
      });
    }
  </script>
</body>
</html>


LAB PROGRAMS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    td {
      padding: 5px;
      font-size: larger;
      font-family: 'Courier New', Courier, monospace;
    }
    table{
        background-origin: padding-box;
        border: 1px outset;
        box-shadow: 20px , 30 px;
    }
  </style>
</head>
<body>

<header style="display: flex; align-items: center; justify-content: center;">
  <img src="download.jpg" style="width: 80px; height: 100px;">
  <div style="margin-left: 10px; text-align: center;">
    <h1>Dayananda Sagar College Of Engineering</h1>
    <h2>Affiliated to VTU</h2>
    <h3>Dept of Information Science and Engineering</h3>
  </div>
</header>
<hr>
<br><br>

<center>
<h1>Course Registation </h1>
<form action="#">
    <table >
        <tr>
            <td>Std Name:</td>
            <td><input type="text" required></td>
        </tr>
                <tr>
            <td>Std USN:</td>
            <td><input type="text" required></td>
        </tr>
        <tr>
            <td>Std P.Num:</td>
            <td><input type="number" required></td>
        </tr>
        <tr>
            <td>Std Email:</td>
            <td><input type="email" required></td>
        </tr>
        <tr>
            <td>Std Sem:</td>
            <td><input type="text" required></td>
        </tr>
        <tr>
            <td>Std Section:</td>
            <td><select style="width: 178px;">
                <option value="" disabled selected>Select your section</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>Std Subject:</td>
            <td><select size=3 style="width: 178px;">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>
                <label>Fee Paid</label>
            </td>
            <td>
                <input type="radio" name="yes" id="fee">Yes
                <input type="radio" name="yes" id="fee">No
            </td>
        </tr>
    </table>
    <br>

    <input type="submit" style="width: 100px;">
    <input type="reset" style="width: 100px;">
    </div>

</form>
</center>


</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Profile Card</title>
  <style>
    body {
      margin: 0;
      font-family: Arial;
      display: flex;
      justify-content: center;
      align-items: center;
      /* min-height: 100vh; */
      background: #f0f0f0;
    }
    .card {
      width: 80%;
      /* max-width: 800px; */
      background-color: antiquewhite;
      padding: 40px;
      box-shadow: 0 0 10px #aaa;
    }
    .card img {
      width: 100px;
      height: auto;
    }
    .card .p {
      text-align: center;
    }
    .personal {
      background-color: aqua;
      margin-top: 20px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="p">
      <img src="download.jpg" alt="Profile Picture" />
      <h1>Shravya S Shetty</h1>
      <h4>Student at DSCE</h4>
    </div>

    <div class="personal">
      <h1>Education</h1>
      <hr />
      <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
    </div>

    <div class="personal">
      <h1>Education</h1>
      <hr />
      <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
    </div>

    <div class="personal">
      <h1>Education</h1>
      <hr />
      <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
    </div>

    <div class="personal">
      <h1>Education</h1>
      <hr />
      <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
    </div>
  </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>Parent Teacher Meet</title>
  <style>
    body {
      font-family: Arial;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #f0f0f0;
    }
    .card {
      max-width: 400px;
      background: white;
      padding: 20px;
      box-shadow: 0 0 10px #ccc;
      text-align: center;
    }
    .card img {
      height: 50px;
      margin: 5px;
    }
    .title {
      font-weight: bold;
      color: white;
      background-color: #0047ab;
    }
    .meeting {
      background: #0047ab;
      color: white;
      padding: 10px;
      margin: 15px 0;
    }
    .footer {
      font-size: 12px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="title">DAYANANDA SAGAR COLLEGE OF ENGINEERING
    <p> Affiliated to VTU</p>
    <p>Dept ISE</p>
    </div>
    <div>
      <img src="download.jpg" alt="">
      <img src="iiclogo.jpg" alt="">
      <img src="images.jpg" alt="">
    </div>
    <div class="meeting">1st Year ISE <br> Parent Teachers Meeting</div>
    <img src="ptm.webp" alt="Meeting" style="width:350px; height: 250px;">
    <p><b>April 12, 2025 | 02:00 PM</b><br>Venue: ISE-308</p>
    <div class="footer">
      Dr. Madhura J ||  Prof. Bharath B C <br>
      Dr. Annapurna P Patil || HOD<br>
      Dr. B G Prasad || Princpial
    </div>
  </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head><title>Prime Factor Calculator</title></head>
<body>
  <h2>Prime Factor Calculator</h2>
  <input id="n" type="number" placeholder="Enter number">
  <button onclick="f()">Calculate</button>
  <p id="r"></p>

  <script>
    function f() {
      let n =document.getElementById("n").value, r = [], d = 2;
      while (n > 1) {
        if (n % d === 0) {
             r.push(d);
             n /= d; }
        else d++;
      }
      document.getElementById("r").textContent = r.length ? Prime factors: ${r.join(" , ")} : "Invalid input";
    }
  </script>
</body>
</html>


<!DOCTYPE html>
<html>
<head><title>Alphanumerical Sort</title></head>
<body>
  <h2>Alpha Numerical Sorting</h2>
  <p>Original: <span id="original"></span></p>
  <p>Sorted: <span id="sorted"></span></p>

  <script>
    const arr = ["mango", "TuttyFruity", "Bell", "1DS22IS108", "Peanuts", "HoD", "Z", "dob", "3300", "hod", "Jack"];
    document.getElementById("original").textContent = arr.join(", ");
    document.getElementById("sorted").textContent = arr.sort((a, b) => a.localeCompare(b)).join(", ");
  </script>
</body>
</html>


import React, { useState } from "react";

export default function App() {
  const [votes, setVotes] = useState({ Akash: 0, Dhanush: 0, Srusthi: 0 });
  const [showVotes, setShowVotes] = useState(false);

  const vote = (name) => {
    setVotes({ ...votes, [name]: votes[name] + 1 });
    setShowVotes(false);
  };

  const total = Object.values(votes).reduce((a, b) => a + b, 0);

  return (
    <div style={{ textAlign: "center", fontFamily: "Arial" }}>
      <h1>Voting App</h1>
      {Object.keys(votes).map((name) => (
        <div key={name} style={{ border: "1px solid #ccc", margin: 10, padding: 10 }}>
          <h2>{name}</h2>
          <p>Votes: {showVotes ? votes[name] : "-"}</p>
          <button onClick={() => vote(name)}>Vote</button>
        </div>
      ))}
      <button onClick={() => setShowVotes(true)} style={{ marginTop: 20 }}>
        View Votes
      </button>
      {showVotes && <p>Total Votes: {total}</p>}
    </div>
  );
}


LoginForm.js
import React, { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [msg, setMsg] = useState('');

  const isValid = (pwd) =>
    /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%*?&]).{8,}$/.test(pwd);

  const handleSubmit = (e) => {
    e.preventDefault();
    setMsg(
      isValid(password)
        ? 'Login successful (dummy validation).'
        : 'Password must be 8+ characters with uppercase, lowercase, number, and special character.'
    );
  };

  return (
    <div style={{ maxWidth: 300, margin: '50px auto', fontFamily: 'Arial' }}>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          style={{ width: '100%', marginBottom: 10 }}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          style={{ width: '100%', marginBottom: 10 }}
        />
        <button type="submit">Login</button>
      </form>
      <p style={{ color: 'red', marginTop: 10 }}>{msg}</p>
    </div>
  );
};

export default LoginForm;

App.js
import React from 'react';
import LoginForm from './LoginForm';

function App() {
  return (
    <div>
      <LoginForm />
    </div>
  );
}

export default App;


ListDir.js
const fs = require('fs');
const path = require('path');

function listDirectoryContents(dirPath) {
  try {
    const items = fs.readdirSync(dirPath);
    const result = items.map(item => {
      const fullPath = path.join(dirPath, item);
      const isDirectory = fs.statSync(fullPath).isDirectory();
      return {
        name: item,
        type: isDirectory ? 'directory' : 'file',
        path: fullPath
      };
    });

    console.log(JSON.stringify(result, null, 2));
  } catch (err) {
    console.error('Error reading directory:', err.message);
  }
}

const inputPath = process.argv[2] || '.';
listDirectoryContents(inputPath);

#node ListDir.js "C:\Users\YourName\Documents"(output)