Resistance Calculator
ধাপ সমূহ:
- উইন্ডোজের ডেস্কটপে থাকাবস্থায় Start👉Programs👉Accessories👉notepad নির্দেশ দিতে হবে।
- নোটপ্যাড উইন্ডোটি প্রদর্শিত হবে। নোটপ্যাড উইন্ডোতে নিম্নের দেওয়া এইচটিএমএল কোডটি কপি করে পেস্ট করতে হবে।
- এরপর File Save নির্দেশ দিয়ে কোন নাম .html এক্সটেনশনসহ (যেমন- resistence calculator.html) টাইপ করে Save বাটনে ক্লিক করে ডকুমেন্টটি সেভ করতে হবে। HTML ফাইলটি তৈরি হবে।
- Mouse এর Right button click করে Open with👉Google Chrome নির্দেশ দিলে পর্দায় Google Chrome এর উইন্ডোটি প্রদর্শিত হবে। নিম্নে প্রদর্শিত ছবির মতো একটি উইন্ডো আসবে,
এখানে আপনি আপনারা Resistance পরিমাপ করতে পারবেন।
সকল ধাপসমূহ আমি এই ভিডিওর মাধ্যমে তুলে ধরার চেষ্টা করেছি।
CODE
<!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>
<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 করুন
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
Post a Comment