React Calc Program

import { useState } from 'react';
import './App.css';
import Footerr from './Footer';
import Headerr from './Header';
import Sliderr from './Slider/Slider';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

function App() {
  const[n1,num1] = useState();
  const[n2,num2] = useState();
  const[tot,total] = useState();
  const[slt,select] = useState();
  function handleClick(){    
    if(slt == "Div"){
      total(Number(n1) / Number(n2));
    }else if(slt == "Sub"){
      total(Number(n1) - Number(n2));
    }else if(slt == "Mul"){
      total(Number(n1) * Number(n2));
    }else{
      total(Number(n1) + Number(n2));
    }    
  }

  return (
    <div >
      <Headerr/>      
        <div class="row">
            <div align="center">
              <br/>              
                <h2>React Js with Calculate Two Numbers</h2><br/>                 
                <input type="number" class="in" placeholder='Enter Number' onChange={(e)=>num1(e.target.value)}/><br/><br/>
                <input type="number" class="in" placeholder='Enter Number' onChange={(e)=>num2(e.target.value)}/><br/><br/><br/>                                    
                <select onChange={(e)=>select(e.target.value)} class="slt">
                    <option>Add</option>
                    <option>Sub</option>
                    <option>Mul</option>
                    <option>Div</option>
                </select>
                <input type="submit" class="btn btn-danger" onClick={handleClick}/>     
                <br/><br/>           
                <h1>{tot}</h1>          
                   
                <br/>          
            </div>
        </div>
        <Sliderr/>
        <Footerr/>
    </div>
  );
}

export default App;

import { useState } from 'react';
import './App.css';
import Footerr from './Footer';
import Headerr from './Header';
import Sliderr from './Slider/Slider';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

function App() {
  const[n1,num1] = useState();
  const[n2,num2] = useState();
  const[tot,total] = useState();
  const[slt,select] = useState();
  function handleClick(){    
    if(slt == "Div"){
      total(Number(n1) / Number(n2));
    }else if(slt == "Sub"){
      total(Number(n1) - Number(n2));
    }else if(slt == "Mul"){
      total(Number(n1) * Number(n2));
    }else{
      total(Number(n1) + Number(n2));
    }    
  }

  return (
    <div >
      <Headerr/>      
        <div class="row">
            <div align="center">
              <br/>              
                <h2>React Js with Calculate Two Numbers</h2><br/>                 
                <input type="number" class="in" placeholder='Enter Number' onChange={(e)=>num1(e.target.value)}/><br/><br/>
                <input type="number" class="in" placeholder='Enter Number' onChange={(e)=>num2(e.target.value)}/><br/><br/><br/>                                    
                <select onChange={(e)=>select(e.target.value)} class="slt">
                    <option>Add</option>
                    <option>Sub</option>
                    <option>Mul</option>
                    <option>Div</option>
                </select>
                <input type="submit" class="btn btn-danger" onClick={handleClick}/>     
                <br/><br/>           
                <h1>{tot}</h1>          
                   
                <br/>          
            </div>
        </div>
        <Sliderr/>
        <Footerr/>
    </div>
  );
}

export default App;

import './App.css';

function Footerr(){
return(
        <footer>    
            
            <iframe width="100%" height="500" src="https://maps.google.com/maps?q=kaashiv%20infotech&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>         
            <br/><br/>        
            <div id="colours">
                <h6>
                    <strong>
                        <a href="https://www.kaashivinfotech.com/services/">Services | </a><a href="https://www.kaashivinfotech.com/kaashiv-infotech-reviews/">Testimonials | </a><a href="https://www.kaashivinfotech.com/industrial-visit/">Industrial Visit | </a><a href="https://www.kaashivinfotech.com/internship-in-chennai/">Internship in Chennai | </a><a href="https://www.inplanttrainingchennai.com/">Inplant Training in Chennai | </a>
                    </strong>
                </h6>
                <h6>
                    <strong>
                        <a href="https://www.kaashivinfotech.com/training-courses/">Main Course Page | </a><a href="https://www.kaashivinfotech.com/apply-for-internship/hire-req.php">Want to Hire our Students?</a>
                    </strong>
                </h6>
                <br/>
                <h6 style={{color: "white"}}><strong> Address :</strong></h6>
                <h6 style={{color: "white"}}><strong>16/1, Radial Colony , (Round Building) Near to Chennai Public School ,</strong></h6>
                <h6 style={{color: "white"}}><strong>Collector nagar, Anna Nagar West ,</strong></h6>
                <h6 style={{color: "white"}}><strong>Chennai - 600101 .</strong></h6>                
                <strong><p style={{color: "white"}}>&copy; {(new Date().getFullYear())} - Kaashiv Infotech .</p></strong>
            </div>
        </footer>
);
}
export default Footerr;