fsd

import React, { useState } from "react";

import "./App.css";

const studentsData = [

  { usn: "1NT22CS001", name: "Aarav", percentage: 66 },

  { usn: "1NT22CS002", name: "Ishaan", percentage: 82 },

  { usn: "1NT22CS003", name: "Rohan", percentage: 58 },

  { usn: "1NT22CS004", name: "Kiran", percentage: 82 },

  { usn: "1NT22CS005", name: "Saanvi", percentage: 51 },

  { usn: "1NT22CS006", name: "Meera", percentage: 63 },

  { usn: "1NT22CS007", name: "Priya", percentage: 87 },

  { usn: "1NT22CS008", name: "Kavya", percentage: 92 },

  { usn: "1NT22CS009", name: "Vikram", percentage: 71 },

  { usn: "1NT22CS010", name: "Ananya", percentage: 77 },

  { usn: "1NT22CS011", name: "Arjun", percentage: 55 },

  { usn: "1NT22CS012", name: "Neha", percentage: 90 },

  { usn: "1NT22CS013", name: "Ritu", percentage: 65 },

  { usn: "1NT22CS014", name: "Dev", percentage: 74 },

  { usn: "1NT22CS015", name: "Lakshmi", percentage: 85 },

  { usn: "1NT22CS016", name: "Rahul", percentage: 98 },

  { usn: "1NT22CS017", name: "Pooja", percentage: 69 },

  { usn: "1NT22CS018", name: "Rakesh", percentage: 88 },

  { usn: "1NT22CS019", name: "Sneha", percentage: 79 },

  { usn: "1NT22CS020", name: "Varun", percentage: 61 },

  { usn: "1NT22CS021", name: "Aditya", percentage: 83 },

  { usn: "1NT22CS022", name: "Nisha", percentage: 72 },

  { usn: "1NT22CS023", name: "Manoj", percentage: 94 },

  { usn: "1NT22CS024", name: "Divya", percentage: 68 },

  { usn: "1NT22CS025", name: "Vani", percentage: 59 },

  { usn: "1NT22CS026", name: "Prakash", percentage: 86 },

  { usn: "1NT22CS027", name: "Suresh", percentage: 73 },

  { usn: "1NT22CS028", name: "Deepa", percentage: 81 },

  { usn: "1NT22CS029", name: "Harsha", percentage: 64 },

  { usn: "1NT22CS030", name: "Geeta", percentage: 91 },

];

const Header = () => <h2>NMIT - Admin Dashboard</h2>;

const Markstable = ({ data }) => (

  <>

    <h2>Student Marks</h2>

    <table>

      <thead>

        <tr>

          <th>SL.NO</th>

          <th>USN</th>

          <th>Name</th>

          <th>Percentage</th>

        </tr>

      </thead>

      <tbody>

        {data.map((student, i) => (

          <tr key={i}>

            <td>{i + 1}</td>

            <td>{student.usn}</td>

            <td>{student.name}</td>

            <td>{student.percentage}</td>

          </tr>

        ))}

      </tbody>

    </table>

  </>

);

const Summary = ({ data }) => {

  const distinction = data.filter((s) => s.percentage >= 85).length;

  const firstClass = data.filter(

    (s) => s.percentage >= 60 && s.percentage < 85

  ).length;

  const fail = data.filter((s) => s.percentage < 60).length;

  return (

    <div className="summary">

      <h3>Result Summary</h3>

      <p>

        Distinction: <strong>{distinction}</strong>

      </p>

      <p>

        First Class: <strong>{firstClass}</strong>

      </p>

      <p>

        Fail: <strong>{fail}</strong>

      </p>

    </div>

  );

};

const Footer = () => (

  <p className="footer">@2025 Admin Dashboard</p>

);

const Dashboard = ({ data }) => {

  const [showSummary, setShowSummary] = useState(false);

  const toggleSummary = () => setShowSummary(!showSummary);

  return (

    <>

      <Header />

      <Markstable data={data} />

      <div className="buttons">

        <button onClick={toggleSummary}>Show Summary</button>

        <button onClick={() => setShowSummary(false)}>Clear</button>

      </div>

      {showSummary && <Summary data={data} />}

      <Footer />

    </>

  );

};

export default function App() {

  return <Dashboard data={studentsData} />;

}

[03/11, 19:23] Priya Darshini:

body {

  font-family: Arial, sans-serif;

  margin: 20px;

  background: #f4f6f9;

}

h2, h3 {

  text-align: center;

  color: #333;

}

table {

  width: 90%;

  margin: 20px auto;

  border-collapse: collapse;

  background: #fff;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

th, td {

  border: 1px solid #ddd;

  padding: 10px;

  text-align: center;

}

th {

  background: #4caf50;

  color: white;

  text-transform: uppercase;

}

tr:nth-child(even) {

  background: #f9f9f9;

}

tr:hover {

  background: #f1f1f1;

}

button {

  margin: 10px;

  padding: 10px 18px;

  font-size: 14px;

  border: none;

  border-radius: 6px;

  cursor: pointer;

  transition: 0.3s;

}

button:first-of-type {

  background: #4caf50;

  color: white;

}

button:first-of-type:hover {

  background: #45a049;

}

button:last-of-type {

  background: #e74c3c;

  color: white;

}

button:last-of-type:hover {

  background: #c0392b;

}

.summary {

  width: 50%;

  margin: 20px auto;

  padding: 15px;

  border: 1px solid #ddd;

  border-radius: 6px;

  background: #fff;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  text-align: center;

}

.summary p {

  margin: 8px 0;

  font-size: 15px;

}

.footer {

  text-align: center;

  margin-top: 20px;

  color: blue;

}

[03/11, 19:24] Priya Darshini:

import { useState } from "react";

import "./App.css";

function App() {

  const [inputText, setInputText] = useState("");

  const handleInputChange = (e) => {

    setInputText(e.target.value);

  };

  return (

    <div className="container">

      <h2 className="title">Live Text Update</h2>

      <form onSubmit={(e) => e.preventDefault()}>

        <label htmlFor="inputArea" className="label">

          Enter your message:

        </label>

        <br />

        <textarea

          id="inputArea"

          rows="5"

          cols="60"

          value={inputText}

          onChange={handleInputChange}

          placeholder="Type here..."

          className="textarea"

        />

      </form>

      <div className="output">

        <strong>Your Text:</strong>

        <p className="output-text">{inputText}</p>

      </div>

    </div>

  );

}

export default App;

[03/11, 19:26] Priya Darshini:

import React, { useState } from "react";

import "./App.css";

function App() {

  const [emailInput, setEmailInput] = useState("");

  const [validEmail, setValidEmail] = useState(null); // null = not validated yet

  const [feedbackMessage, setFeedbackMessage] = useState("");

  const validateEmail = () => {

    const regex = /^[^\\s@]+@[^\\s@]+.[^\\s@]+$/;

    if (regex.test(emailInput)) {

      setValidEmail(true);

      setFeedbackMessage("Valid email address!");

    } else {

      setValidEmail(false);

      setFeedbackMessage("Please provide a valid email address.");

    }

  };

  const handleInputChange = (e) => {

    setEmailInput(e.target.value);

    setValidEmail(null);

    setFeedbackMessage("");

  };

  return (

    <div className="App">

      <h1>Email Validation</h1>

      <div style={{ marginBottom: "20px" }}>

        <label htmlFor="emailInput">Enter email:</label>

        <input

          type="text"

          id="emailInput"

          value={emailInput}

          onChange={handleInputChange}

          style={{

            border:

              validEmail === null

                ? "2px solid gray"

                : 2px solid ${validEmail ? "green" : "red"},

            padding: "8px",

            fontSize: "16px",

            marginLeft: "10px",

          }}

        />

        <button

          onClick={validateEmail}

          style={{

            marginLeft: "10px",

            padding: "8px 16px",

            fontSize: "16px",

            cursor: "pointer",

          }}

        >

          Check Email

        </button>

      </div>

      {validEmail !== null && (

        <div

          style={{

            color: validEmail ? "green" : "red",

            fontSize: "14px",

          }}

        >

          {feedbackMessage}

        </div>

      )}

    </div>

  );

}

export default App;

[03/11, 19:28] Priya Darshini:

:root {

  font-family: Verdana, sans-serif;

}

.App {

  max-width: 520px;

  margin: 40px auto;

  padding: 20px;

}

h1 {

  margin-bottom: 16px;

}

.formRow {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

}

input[type="text"] {

  padding: 8px 10px;

  font-size: 16px;

  border-radius: 6px;

  outline: none;

}

.errorText {

  color: red;

  font-size: 14px;

}

[03/11, 22:18] Priya Darshini:

package com.example.demo;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

@Configuration

@ComponentScan("com.example.demo")

public class AppConfig {

}

[03/11, 22:19] Priya Darshini:

package com.example.demo;

import org.springframework.context.ApplicationContext;

import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class DependencyInjectionApplication {

    public static void main(String[] args) {

        ApplicationContext context = new AnnotationConfigApplicationContext(AppConfig.class);

        NotificationService notificationService = context.getBean(NotificationService.class);

        notificationService.notifyUser("Hello, World!", "user@example.com");

    }

}

[03/11, 22:19] Priya Darshini:

package com.example.demo;

import org.springframework.stereotype.Service;

@Service("emailService")

public class EmailService implements MessageService {

    @Override

    public void sendMessage(String message, String recipient) {

        System.out.println("📧 Email sent to " + recipient + " with message: " + message);

    }

}

[03/11, 22:20] Priya Darshini:

package com.example.demo;

import org.springframework.beans.factory.annotation.Qualifier;

import org.springframework.stereotype.Component;

@Component

public class NotificationService {

    private final MessageService messageService;

    public NotificationService(@Qualifier("smsService") MessageService messageService) {

        this.messageService = messageService;

    }

    public void notifyUser(String message, String recipient) {

        messageService.sendMessage(message, recipient);

    }

}

[03/11, 22:20] Priya Darshini:

package com.example.demo;

import org.springframework.stereotype.Service;

@Service("smsService")

public class SMSService implements MessageService {

    @Override

    public void sendMessage(String message, String recipient) {

        System.out.println("📱 SMS sent to " + recipient + " with message: " + message);

    }

}

[03/11, 22:32] Priya Darshini:

package com.example.fsd;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.context.annotation.Scope;

@Configuration

@ComponentScan("com.example.fsd")

public class AppConfig {

    @Bean(initMethod = "init", destroyMethod = "destroy")

    @Scope("singleton")

    public MyBean myBean() {

        return new MyBean();

    }

}

[03/11, 22:33] Priya Darshini:

package com.example.fsd;

import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class BeanInjection {

    public static void main(String[] args) {

        AnnotationConfigApplicationContext context = new AnnotationConfigApplicationContext(AppConfig.class);

        MyBean myBean = context.getBean(MyBean.class);

        myBean.doWork();

        DependentBean dependentBean = context.getBean(DependentBean.class);

        dependentBean.performTask();

        context.close();

    }

}

[03/11, 22:33] Priya Darshini:

package com.example.fsd;

import org.springframework.stereotype.Component;

@Component

public class DependentBean {

    private final MyBean myBean;

    public DependentBean(MyBean myBean) {

        this.myBean = myBean;

    }

    public void performTask() {

        System.out.println("DependentBean: Using MyBean to perform task.");

        myBean.doWork();

    }

}

[03/11, 22:33] Priya Darshini:

package com.example.fsd;

import org.springframework.stereotype.Component;

@Component

public class MyBean {

    public MyBean() {

        System.out.println("MyBean: Constructor called");

    }

    public void init() {

        System.out.println("MyBean: Initialization logic");

    }

    public void destroy() {

        System.out.println("MyBean: Destruction logic");

    }

    public void doWork() {

        System.out.println("MyBean: Working...");

    }

}