React

 REACT

Decription :

• React is a JavaScript library used for building interactive user interfaces, especially single-page applications.
• It allows developers to create reusable UI components and manage dynamic data efficiently.
• React is maintained by Meta (formerly Facebook) and is widely used in modern web development.

1. Use State :

OPERATORS

Step1 : Open Vs Code 
Step2 : Open New Terminal
Step3 : node -v
Step4 : npm -v
Step5 : npx create-react-app my-app
Step6 : src/App.js

Step7 :
App.js(Replace)

import React, { useState } from 'react';
import './App.css';
function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  const [result, setResult] = useState('');
  const calculate = (op) => {
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    let res = 0;
    switch (op) {
      case '+':
        res = n1 + n2;
        break;
      case '-':
        res = n1 - n2;
        break;
      case '*':
        res = n1 * n2;
        break;
      case '/':
        res = n2 !== 0 ? n1 / n2 : "Cannot divide by zero";
        break;
      default:
        res = 'Invalid';
    }
    setResult(res);
  };
  return (
    <div className="container">
      <h2>Operators</h2>
      <input type="number" onChange={(e) => setNum1(e.target.value)} placeholder="Enter number 1" />
      <input type="number" onChange={(e) => setNum2(e.target.value)} placeholder="Enter number 2" />
      <div className="buttons">
        <button onClick={() => calculate('+')}>+</button>
        <button onClick={() => calculate('-')}>-</button>
        <button onClick={() => calculate('*')}>*</button>
        <button onClick={() => calculate('/')}>/</button>
      </div>
      <h3>Result: {result}</h3>
    </div>
  );
}
export default App;

Step9 : src/App.css
Step10 :
App.css(Replace)

body {
  font-family: serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 30px;
}
.container {
  max-width: 400px;
  margin: auto;
  background: rgb(206, 237, 237);
  padding: 30px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 0 10px teal;
  margin-top: 100px;
}
input {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  font-size: 16px;
  border-radius: 10px;
}
.buttons button {
  padding: 10px 15px;
  margin: 5px;
  font-size: 18px;
  background-color: Teal;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.buttons button:hover {
  background-color: rgb(52, 212, 212);
}

Step11 : npm start
Step12 : The output is displayed in the browser.

MARKLIST :

Step1 : npx create-react-app marklist
Step2 : src/App.js

Step3 :
App.js(Replace)

import React, { useState } from 'react';
import './App.css';
function App() {
  const [marks, setMarks] = useState(Array(5).fill(""));
  const [result, setResult] = useState(null);
  const handleChange = (value, index) => {
    const newMarks = [...marks];
    newMarks[index] = value;
    setMarks(newMarks);
  };
  const calculateResult = () => {
    const numericMarks = marks.map((m) => parseFloat(m) || 0);
    const total = numericMarks.reduce((sum, val) => sum + val, 0);
    const average = total / numericMarks.length;
    const isPass = numericMarks.every(mark => mark >= 35);
    setResult({
      total,
      average: average.toFixed(2),
      status: isPass ? "Pass" : "Fail"
    });
  };
  return (
    <div className="container">
      <h2>🎓 Mark List</h2>
      <table>
        <thead>
          <tr>
            <th>Subject</th>
            <th>Mark</th>
          </tr>
        </thead>
        <tbody>
          {marks.map((mark, index) => (
            <tr key={index}>
              <td>Subject {index + 1}</td>
              <td>
                <input
                  type="number"
                  value={mark}
                  onChange={(e) => handleChange(e.target.value, index)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={calculateResult}>Calculate</button>
      {result && (
        <div className="result-box">
          <p><strong>Total:</strong> {result.total}</p>
          <p><strong>Average:</strong> {result.average}</p>
          <p><strong>Status:</strong> {result.status}</p>
        </div>
      )}
    </div>
  );
}
export default App;

Step4 : src/App.css
App.css(Replace)

body {
  background-color: #f8f0ff;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 20px;
}
.container {
  background-color: #e0b3ff;
  max-width: 500px;
  margin: auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 0 12px #a64dff;
  text-align: center;
}
h2 {
  color: #4b0082;
  margin-bottom: 20px;
}
table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid #d1a3ff;
}
input {
  width: 80%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #9f5de2;
}
button {
  background-color: #8000ff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
}
button:hover {
  background-color: #5c00b3;
}
.result-box {
  margin-top: 20px;
  background-color: #fff0ff;
  padding: 20px;
  border-radius: 10px;
  color: #4b0082;
}

Step11 : npm start
Step12 : The output is displayed in the browser.