Calculator Full Code

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        .hh-100{
            height: 100vh !important;
        }
    </style>

</head>
<body>
   
    <div class="d-flex justify-content-center align-items-center hh-100">
        <div class="col-12 col-lg-4 card">
            <div class="p-2">
                <input onfocus="num1Focus();" type="text" class="form-control" id="num1" placeholder="Input Number 1"/>
            </div>
            <div class="p-2">
                <input onfocus="num2Focus();" type="text" class="form-control" id="num2" placeholder="Input Number 2"/>
            </div>
            <div class="p-2">
                <input type="number" class="form-control" disabled id="result" placeholder="Result"/>
            </div>
           
   
        <!-- ======================================================== -->
        <div class="container p-2">
            <div class="row">
                <div class="col-3">
                    <button onclick="Number(1);" class="btn btn-primary btn-block w-100">1</button>
                </div>
                <div class="col-3">
                    <button onclick="Number(2);" class="btn btn-primary btn-block w-100">2</button>
                </div>
                <div class="col-3">
                    <button onclick="Number(3);" class="btn btn-primary btn-block w-100">3</button>
                </div>
                <div class="col-3">
                    <button  onclick="Opration('+');"  class="btn btn-primary btn-block w-100">+</button>
                </div>
            </div>

            <!-- =================================== -->
            <div class="row mt-2">
                <div class="col-3">
                    <button onclick="Number(4);" class="btn btn-primary btn-block w-100">4</button>
                </div>
                <div class="col-3">
                    <button onclick="Number(5);" class="btn btn-primary btn-block w-100">5</button>
                </div>
                <div class="col-3">
                    <button onclick="Number(6);" class="btn btn-primary btn-block w-100">6</button>
                </div>
                <div class="col-3">
                    <button onclick="Opration('-');" class="btn btn-primary btn-block w-100">-</button>
                </div>
            </div>
            <!-- =================================== -->
       <!-- =================================== -->
       <div class="row mt-2">
        <div class="col-3">
            <button onclick="Number(7);" class="btn btn-primary btn-block w-100">7</button>
        </div>
        <div class="col-3">
            <button onclick="Number(8);" class="btn btn-primary btn-block w-100">8</button>
        </div>
        <div class="col-3">
            <button  onclick="Number(9);" class="btn btn-primary btn-block w-100">9</button>
        </div>
        <div class="col-3">
            <button onclick="Opration('*');" class="btn btn-primary btn-block w-100">*</button>
        </div>
    </div>
    <!-- =================================== -->
         <!-- =================================== -->
         <div class="row mt-2">
            <div class="col-3">
                <button onclick="Clear();" class="btn btn-primary btn-block w-100">A/c</button>
            </div>
            <div class="col-3">
                <button onclick="Number(0);" class="btn btn-primary btn-block w-100">0</button>
            </div>
            <div class="col-3">
                <button onclick="Number('.');" class="btn btn-primary btn-block w-100">.</button>
            </div>
            <div class="col-3">
                <button onclick="Opration('/');" class="btn btn-primary btn-block w-100">/</button>
            </div>
        </div>
        <!-- =================================== -->
        </div>
   
        </div>
    </div>
   
    <script>
        let flag="num1";
        let num1=document.getElementById('num1');
        let num2=document.getElementById('num2');
        let result=document.getElementById('result');
       
        function Clear(){
            num1.value=num2.value=result.value=0;
        }

        //======onFocus==
        function num1Focus(){
            console.log("Num1");
            flag="num1";
        }
       
        function num2Focus(){
            console.log("Num2");
            flag="num2";
        }
        //=========================

        function Number(number){
            if(flag==="num1"){
                num1.value=num1.value+number;
            }else{
            num2.value=num2.value+number;
            }
        }
       

        //===========Opration===========
        function Opration(code){

            if(num1.value===""||num2.value===""){
                return 0;
            }
            let a=parseFloat(num1.value);
            let b=parseFloat(num2.value);
            let c=0;
            switch(code){
                case "+":
                    c=a+b;
                    break;
                case "-":
                    c=a-b;
                    break;
                case "*":
                c=a*b;
                    break;
                case "/":
                c=a/b;
                    break;

                   
            }

            result.value=c;

        }
       

    </script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

App 1st User Define Component

  import logo from './logo.svg' ; import './App.css' ; import React from "react" ; function App () { let products=[ 1 , 2 , 3 , 4 , 5 , 6 ] ; return <> <h1> Sabirs </h1> { products. map ((item)=>( <ProdoctCard src = {item} /> )) } </> ; } export default App ; function ProdoctCard ({src}) { return <img src = { `./img/ ${src} .webp` } /> ; }
Read more

Example 1

 //====================Component A================== import React , { useState } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} setA = {setName} /> </div> ) }  //====================Component B================== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. setA (event. target . value )} placeholder = { 'Please input name' } /> <h1> {obj. a } </h1> <hr/> </div> ) }
Read more

Rabiit

Image
   ///==========================Css============== . box-pos { position : relative ; height : 200 px ; backgroundColor : "#e9ecef" ; } . rabit { position : absolute ; bottom : 19 px ; } . start-game-panel { background : #000000bf ; position : absolute ; top : 0 px ; bottom : - 13 px ; right : 0 px ; left : 0 px ; display : flex ; justify-content : center ; align-items : center ; } . img-d { width : 400 px ; } ====================React JS Componant================= import React , { useState , useRef } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; import "./rabit.css" ; import "./test.css" ; //============Main Componant export function TestGame () { const [isGameOver , setIsGameOver]= useState ( false ) ; const [isGameStart , setIsGameStart]= useState ( false ) ; const [rabitPos , setRabitPos]= useState ( 0 ) ; const [score , setScore]= useState (...
Read more