How to make Resistance Calculator

10K Ohm Resistor

Resistance Calculator

Resistor এর কালার কোড হাতে গুনে গুনে হিসাব করাটা নিসন্দেহে খুব পেরা দায়ক কাজ। একবার Resistance বের করার জন্য Calculator ব্যবহার করে গুন কর যোগ করে ভাগ করতে আরও কত কি ঝামেলা। আর সবচেয়ে বড় ঝামেলা তো হলো কালার কোড গুলো মনে রাখা, যাইহোক সবমিলে এটা খুব পেরাময় একটা কাজ। তবে চিন্তার কোনো কারণ নেই আমি আপনাদের সুবিধার জন্য নিয়ে এসেছি একটা Resistance Calculator। আপনি হয়ত বলতে পারেন Calculator তো সবার বাসাতেই আছে। আসলে এটা কোনো সাধারণ Calculator নয় এটা শুধু মাত্র Resistance নির্ণয় করার Calculator। যার সাহায্যে আপনারা খুব সহজেই নির্ণয় করতে পারবেন Resistor এর Resistance। আপনাকে কোনো কালার কোড মনে রাখতে হবেনা, করতে হবে না কোনে প্রকার এর যোগবিয়োগ।তবে এই Calculator টি ব্যবহার করতে হলে কিছু ছোট ছোট ধাপ আপনাকে অনুসরণ করতে হবে তো আর দেরি না করে চলুন কাজে লেগে পড়ি।





ধাপ সমূহ:

  1. উইন্ডোজের ডেস্কটপে থাকাবস্থায় Start👉Programs👉Accessories👉notepad নির্দেশ দিতে হবে।
  2. নোটপ্যাড উইন্ডোটি প্রদর্শিত হবে। নোটপ্যাড উইন্ডোতে নিম্নের দেওয়া এইচটিএমএল কোডটি কপি করে পেস্ট করতে হবে। 
  3. এরপর File Save নির্দেশ দিয়ে কোন নাম .html এক্সটেনশনসহ (যেমন- resistence calculator.html) টাইপ করে Save বাটনে ক্লিক করে ডকুমেন্টটি সেভ করতে হবে। HTML ফাইলটি তৈরি হবে। 
  4. Mouse এর Right button click করে Open with👉Google Chrome নির্দেশ দিলে পর্দায় Google Chrome এর উইন্ডোটি প্রদর্শিত হবে। নিম্নে প্রদর্শিত ছবির মতো একটি উইন্ডো আসবে, 

এখানে আপনি আপনারা Resistance পরিমাপ করতে পারবেন।

সকল ধাপসমূহ আমি এই ভিডিওর মাধ্যমে তুলে ধরার চেষ্টা করেছি।

CODE

HTML DOM - Copy highlighted code to the clipboard

                  

 <!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <link rel = "icon" href ="C:\Users\DELL\Desktop\HTML\12.png" type = "image/x-icon">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<style>

    select option {

        margin: 40px;

        color: #fff;

    }


    select option[value="0"] {

        background: Black;

    }

    select option[value="1"] {

        background: brown;

    }

    select option[value="2"] {

        background:red;

    }

    select option[value="3"] {

        background:orange;

    }

    select option[value="4"] {

        color:black;

        background: yellow;

    }

    select option[value="5"] {

        background: green;

    }

    select option[value="6"] {

        background:blue;

    }

    select option[value="7"] {

        background:violet;

    }

    select option[value="8"] {

        background: grey;

        color:black;

    }

    select option[value="9"] {

        color:black;

        background: white;

    }

    select option[value="10"] {

        background:gold;

        color:black;

    }

    select option[value="11"] {

        background:silver;

        color:black;

    }


</style>

<body style="background-color: rgb(121, 59, 59); color: rgb(0, 0, 0);">

    <div class="container">

        <br><br>

        <h3 style="background-color: rgb(199, 141, 55); color: black; width: 330px;"><b>RESISTANCE CALCULATOR</b></h3>

        <div class="container">

          <strong style="background-color: rgb(0, 0, 0); color: white;">

            <input type="radio" id="four" name="grp" checked onchange="check()">Four Band

          </strong>

          &nbsp; &nbsp;

          <strong style="background-color: rgb(0, 0, 0); color: white;">

            <input type="radio" id="five" name="grp" onchange="check()">Five Band

          </strong>

        </div>

        <br>

        <div class="container">

            <label for="sel1">Select 1st Band</label>

            <select id="sel1" onchange="change_color1(this);">

                <option>--</option>

                <option value=0>Black</option>

                <option value=1>Brown</option>

                <option value=2>Red</option>

                <option value=3>Orange</option>

                <option value=4>Yellow</option>

                <option value=5>Green</option>

                <option value=6>Blue</option>

                <option value=7>Violet</option>

                <option value=8>Grey</option>

                <option value=9>White</option>

          <!--      <option value=10>Gold</option>

                <option value=11>Silver</option>  -->

            </select>

        </div>


        <div class="container">

            <label for="sel2">Select 2nd Band</label>

            <select id="sel2" onchange="change_color2(this);">

                <option>--</option>

                <option value=0>Black</option>

                <option value=1>Brown</option>

                <option value=2>Red</option>

                <option value=3>Orange</option>

                <option value=4>Yellow</option>

                <option value=5>Green</option>

                <option value=6>Blue</option>

                <option value=7>Violet</option>

                <option value=8>Grey</option>

                 <option value=9>White</option>

             <!--   <option value=10>Gold</option>

                <option value=11>Silver</option>  -->

            </select>

            

        </div>


        <div class="container">

            <label for="sel5">Select 3rd Band</label>

            <select id="sel5" onchange="change_color5(this);" disabled>

                <option>--</option>

                <option value=0>Black</option>

                <option value=1>Brown</option>

                <option value=2>Red</option>

                <option value=3>Orange</option>

                <option value=4>Yellow</option>

                <option value=5>Green</option>

                <option value=6>Blue</option>

                <option value=7>Violet</option>

                <option value=8>Grey</option>

                <option value=9>White</option>

        <!--        <option value=10>Gold</option>

                <option value=11>Silver</option>  -->

            </select>

            

        </div>


        <div class="container">

            <label for="sel3">Select Multiplier</label>

            <select id="sel3" onchange="change_color3(this);">

                <option>--</option>

                <option value=0>Black</option>

                <option value=1>Brown</option>

                <option value=2>Red</option>

                <option value=3>Orange</option>

                <option value=4>Yellow</option>

                <option value=5>Green</option>

                <option value=6>Blue</option>

                <option value=7>Violet</option>

                <option value=8>Grey</option>

                <option value=9>White</option>

                <option value=10>Gold</option>

                <option value=11>Silver</option>

            </select>

            

        </div>

        


        <div class="container">

            <label for="sel4">Select Tolerance</label>

            <select id="sel4" onchange="change_color4(this);">

                <option>--</option>

                <option value=10>Gold</option>

                <option value=11>Silver</option>

            </select>

        </div>

        <br>

        <button onclick="calculate()">Calculate</button>

        <button onclick="reset()">Reset</button>

    <p id="ans"></p>

</div>

</body>

<script>

    function check(){

        if(document.getElementById("four").checked)

            document.getElementById("sel5").disabled=true;

        if(document.getElementById("five").checked)

            document.getElementById("sel5").disabled=false;

    }    


    //http://jsfiddle.net/ozsxj2th/    

    function change_color1(select) {

        document.getElementById("sel1").style.backgroundColor=select.options[select.selectedIndex].textContent;

    }

    function change_color2(select) {

        document.getElementById("sel2").style.backgroundColor=select.options[select.selectedIndex].textContent;

    }

    function change_color3(select) {

        document.getElementById("sel3").style.backgroundColor=select.options[select.selectedIndex].textContent;

    }

    function change_color4(select) {

        document.getElementById("sel4").style.backgroundColor=select.options[select.selectedIndex].textContent;

    }

    function change_color5(select) {

        document.getElementById("sel5").style.backgroundColor=select.options[select.selectedIndex].textContent;

    }



    function calculate(){

        var num,tol,mul;

        if(document.getElementById("four").checked)

            num=parseInt(document.getElementById("sel1").value.toString()+document.getElementById("sel2").value.toString());

        if(document.getElementById("five").checked)

            num=parseInt(document.getElementById("sel1").value.toString()+document.getElementById("sel2").value.toString()+document.getElementById("sel5").value.toString());

        

        if(document.getElementById("sel4").value=="10")

            tol=10;

        if(document.getElementById("sel4").value=="11")

            tol=5;

            

        var tempMul = parseInt(document.getElementById("sel3").value);

        if (tempMul == 10)

               mul = 0.1;

        else if (tempMul == 11)

               mul = 0.01;

        else       

               mul=Math.pow(10,tempMul);    

               

        //console.log(num*mul*(1+tol/100)); 

        document.getElementById("ans").innerHTML="Required resistance is <b>"+num*mul+" ohms = "+abbrNum(num*mul,2).toString()+" ohms</b>.<br>Considering tolerance values it may vary from "+Math.round(num*mul*(1-tol/100))+" - "+Math.round(num*mul*(1+tol/100))+" ohms.";   

    }


    //https://stackoverflow.com/questions/2692323/code-golf-friendly-number-abbreviator

    function abbrNum(number, decPlaces) {

        // 2 decimal places => 100, 3 => 1000, etc

        decPlaces = Math.pow(10,decPlaces);


        // Enumerate number abbreviations

        var abbrev = [ "K", "M", "B", "T" ];


        // Go through the array backwards, so we do the largest first

        for (var i=abbrev.length-1; i>=0; i--) {


            // Convert array index to "1000", "1000000", etc

            var size = Math.pow(10,(i+1)*3);


            // If the number is bigger or equal do the abbreviation

            if(size <= number) {

                // Here, we multiply by decPlaces, round, and then divide by decPlaces.

                // This gives us nice rounding to a particular decimal place.

                number = Math.round(number*decPlaces/size)/decPlaces;


                // Add the letter for the abbreviation

                number += abbrev[i];


                // We are done... stop

                break;

            }

        }


        return number;

    }

    function reset(){

        document.getElementById("four").checked=true;

        document.getElementById("five").checked=false;

        document.getElementById("sel1").value="--";

        document.getElementById("sel1").style.backgroundColor='white';

        document.getElementById("sel2").value="--";

        document.getElementById("sel2").style.backgroundColor='white';

        document.getElementById("sel3").value="--";

        document.getElementById("sel3").style.backgroundColor='white';

        document.getElementById("sel4").value="--";

        document.getElementById("sel4").style.backgroundColor='white';

        document.getElementById("sel5").value="--";

        document.getElementById("sel5").disabled="true";

        document.getElementById("sel5").style.backgroundColor='white';

        document.getElementById("ans").innerHTML="";    

    }

</script>

</html>



Resistance Calculator টি আপনার মোবাইলে ব্যবহার করতে Use on Mobile click করুন HTML DOM - Copy highlighted code to the clipboard
বন্ধুরা আশা করছি আজকের এই সম্পূর্ণ আর্টিকেলটি আপনাদের ভালো লেগেছে। আশা করছি আপনাদের কাজে লাগবে। তো বন্ধুরা আজ এখানেই শেষ করছি। পোস্টটি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন। এ রকম আরও আর্টিকেল পড়তে আমাদের Sci-Tech Daily Blog টি ভিজিট করুন এবং Subscribe করে রাখুন।

Blog Link             : https://sciencetech26.blogspot.com/
Facebook Group : https://www.facebook.com/groups/230864208943355
Facebook Page    : https://www.facebook.com/scitechdaily26
Instagram            : https://www.instagram.com/scitechdaily26/
Twitter                 : https://twitter.com/SicTechdaily2
Pinterest              : https://www.pinterest.com/scitechdaily26/
YouTube              : https://www.youtube.com/channel/UC3hypIzJcpwRoBuToQzoeUg

Comments