Name: Saket Nandanwar

Roll No.:19IT2011
Div:B(B1)

Experiment-6
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Code And Output:

FormSignup.js

import React from "react";
import useForm from "../hooks/useForm";
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
import validate from "../hooks/validateInfo";
import "./Form.css";

const FormSignup = ({ submitForm }) => {
  const { handleChange, values, handleSubmit, errors } = useForm(
    submitForm,
    validate
  );

  return (
    <div className="form__right">
      <form onSubmit={handleSubmit} className="form" noValidate>
        <h1>Sign Up</h1>
        <div className="form__inputs">
          <label className="form__lbl">Username</label>
          <input
            className="form__input"
            type="text"
            name="username"
            placeholder="Enter your username"
            value={values.username}
            onChange={handleChange}
          />
          {errors.username && <p>{errors.username}</p>}
        </div>
        <div className="form__inputs">
          <label className="form__lbl">Email</label>
          <input
            className="form__input"
            type="email"
            name="email"
            placeholder="Enter your email"
            value={values.email}
            onChange={handleChange}
          />
          {errors.email && <p>{errors.email}</p>}
        </div>
        <div className="form__inputs">
          <label className="form__lbl">Password</label>
          <input
            className="form__input"
            type="password"
            name="password"
            placeholder="Enter your password"
            value={values.password}
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
            onChange={handleChange}
          />
          {errors.password && <p>{errors.password}</p>}
        </div>
        <div className="form__inputs">
          <label className="form__lbl">Confirm Password</label>
          <input
            className="form__input"
            type="password"
            name="password2"
            placeholder="Confirm your password"
            value={values.password2}
            onChange={handleChange}
          />
          {errors.password2 && <p>{errors.password2}</p>}
        </div>
        <button className="form__input_btn" type="submit">
          Sign up
        </button>
      </form>
    </div>
  );
};

export default FormSignup;

useForm.js
import { useState, useEffect } from "react";

const useForm = (callback, validate) => {
  const [values, setValues] = useState({
    username: "",
    email: "",
    password: "",
    password2: "",
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    setErrors(validate(values));
    setIsSubmitting(true);
  };

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors, callback, isSubmitting]);

  return { handleChange, handleSubmit, values, errors };
};

export default useForm;

validateInfo.js
export default function validateInfo(values) {
  let errors = {};

  if (!values.username.trim()) {
    errors.username = "Username required";
  }

  if (!values.email) {
    errors.email = "Email required";
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = "Email address is invalid";
  }
  if (!values.password) {
    errors.password = "Password is required";
  } else if (values.password.length < 6) {
    errors.password = "Password needs to be 6 characters or more";
  }

  if (!values.password2) {
    errors.password2 = "Password is required";
  } else if (values.password2 !== values.password) {
    errors.password2 = "Passwords do not match";
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
  }
  return errors;
}

App.js
import "./App.css";
import Form from "./components/Form";

function App() {
  return (
    <div className="App">
      <Form />
    </div>
  );
}

export default App;
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Experiment-7
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Code and Output

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Container, ListGroup, Button } from "react-bootstrap";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import uuid from "uuid";

import "./styles.css";

function TodoList() {
  const [items, setItems] = useState([
    { id: uuid(), text: "Buy eggs" },
    { id: uuid(), text: "Pay bills" },
    { id: uuid(), text: "Invite friends over" },
    { id: uuid(), text: "Fix the TV" },
  ]);
  return (
    <Container style={{ marginTop: "2rem" }}>
      <ListGroup style={{ marginBottom: "1rem" }}>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition key={id} timeout={500} classNames="item">
              <ListGroup.Item>
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
                <Button
                  className="remove-btn"
                  variant="danger"
                  size="sm"
                  onClick={() =>
                    setItems((items) => items.filter((item) => item.id !== id))
                  }
                >
                  &times;
                </Button>
                {text}
              </ListGroup.Item>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ListGroup>
      <Button
        onClick={() => {
          const text = prompt("Enter some text");
          if (text) {
            setItems((items) => [...items, { id: uuid(), text }]);
          }
        }}
      >
        Add Item
      </Button>
    </Container>
  );
}

ReactDOM.render(<TodoList />, document.getElementById("root"));

Output:
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Experiment-8
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Code and Output:

Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Experiment-9
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Code and Output:

var http = require("http"); 

var server = http.createServer(function (req, res) {
  //create web server
  if (req.url == "/") {
    //check the URL of the current request
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

    // set response header
    res.writeHead(200, { "Content-Type": "text/html" });

    // set response content
    res.write("<html><body><p>This is home Page.</p></body></html>");
    res.end();
  } else if (req.url == "/student") {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write("<html><body><p>This is student Page.</p></body></html>");
    res.end();
  } else if (req.url == "/admin") {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write("<html><body><p>This is admin Page.</p></body></html>");
    res.end();
  } else res.end("Invalid Request!");
});

server.listen(5000); //6 - listen for any incoming requests

console.log("Node.js web server at port 5000 is running..");
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Experiment-10
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
Code and Output:
Index.js

// Returns addition of two numbers
exports.add = function (a, b) {
  return a + b;
};

// Returns difference of two numbers
exports.subtract = function (a, b) {
  return a - b;
};

// Returns product of two numbers
exports.multiply = function (a, b) {
  return a * b;
};
// Returns division of two numbers
exports.divide = function (a, b) {
  return a / b;
};

Calc.js
var calculator = require("./index");

var a = 10,
  b = 5;

console.log("Addition : " + calculator.add(a, b));
console.log("Subtraction : " + calculator.subtract(a, b));
console.log("Multiplication : " + calculator.multiply(a, b));
console.log("Division : " + calculator.divide(a, b));
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Experiment-11
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)

Code and Output:

readFile.js
const fs = require("fs").promises;

async function readFile(filePath) {
  try {
    const data = await fs.readFile(filePath);
    console.log(data.toString());
  } catch (error) {
    console.error(`Got an error trying to read the file: ${error.message}`);
  }
}
readFile('greetings.txt');

writeFile.js
const fs = require("fs").promises;

async function openFile() {
  try {
    const csvHeaders = "name,quantity,price";
    await fs.writeFile("groceries.csv", csvHeaders);
  } catch (error) {
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)
    console.error(`Got an error trying to write to a file: ${error.message}`);
  }
}

async function addGroceryItem(name, quantity, price) {
  try {
    const csvLine = `\n${name},${quantity},${price}`;
    await fs.writeFile("groceries.csv", csvLine, { flag: "a" });
  } catch (error) {
    console.error(`Got an error trying to write to a file: ${error.message}`);
  }
}
(async function () {
  await openFile();
  await addGroceryItem("eggs", 12, 1.5);
  await addGroceryItem("nutella", 1, 4);
})();

deleteFile.js
const fs = require("fs").promises;

async function deleteFile(filePath) {
  try {
    await fs.unlink(filePath);
    console.log(`Deleted ${filePath}`);
  } catch (error) {
    console.error(`Got an error trying to delete the file: ${error.message}`);
  }
}

deleteFile("groceries.csv");
Name: Saket Nandanwar
Roll No.:19IT2011
Div:B(B1)