Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thisal-D
Thisal-D authored Feb 11, 2024
1 parent 07113be commit 57b255e
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 76 deletions.
62 changes: 31 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,64 +15,64 @@ <h1>Binary Calculator</h1>
<form>
<table>
<tr>
<td>
<td class="table-d-1">
<label class="input-title">Bits Count</label>
</td>
<td>
<label>:</label>
<td class="table-d-2">
<label class="dash">:</label>
</td>
<td>
<select id="bits_count" onchange="set_bit_count()">
<option>4-Bits</option>
<option>8-Bits</option>
<option>12-Bits</option>
<option>16-Bits</option>
<option>24-Bits</option>
<option>32-Bits</option>
<td class="table-d-3">
<select id="bits_count" onchange="set_bit_count()" class="user-input">
<option class="options">4-Bits</option>
<option class="options">8-Bits</option>
<option class="options">12-Bits</option>
<option class="options">16-Bits</option>
<option class="options">24-Bits</option>
<option class="options">32-Bits</option>
</select>
</td>
</tr>
<tr>
<td>
<label class="input-title">First Number</label>
<td class="table-d-1">
<label class="input-title" >First Number</label>
</td>
<td>
<label>:</label>
<td class="table-d-2">
<label class="dash">:</label>
</td>
<td>
<input type="number" id="first_num" name="first_num" onchange="check_first_second_num()" onkeyup="check_first_second_num()">
<td class="table-d-3">
<input type="number" id="first_num" name="first_num" onchange="check_first_second_num()" onkeyup="check_first_second_num()" class="user-input">
</td>
</tr>
<tr>
<td>
<td class="table-d-1">
<label class="input-title">Operator</label>
</td>
<td>
<label>:</label>
<td class="table-d-2">
<label class="dash">:</label>
</td>
<td>
<select id="operator_selector" onchange="set_operator()">
<option>+</option>
<option>-</option>
<td class="table-d-3">
<select id="operator_selector" onchange="set_operator()" class="user-input">
<option class="options">+</option>
<option class="options">-</option>
</select>
</td>
</tr>
<tr>
<td>
<td class="table-d-1">
<label class="input-title">Second Number</label>
</td>
<td>
<label>:</label>
<td class="table-d-2">
<label class="dash">:</label>
</td>
<td>
<input type="number" id="second_num" name="second_num" onchange="check_first_second_num()" onkeyup="check_first_second_num()">
<td class="table-d-3">
<input type="number" id="second_num" name="second_num" onchange="check_first_second_num()" onkeyup="check_first_second_num()" class="user-input">
</td>
</tr>
</table>
</form>
</fieldset>

<div id="output">
<div id="output-div">
<fieldset class="output-fieldset" id="output-fieldset-1" >
<legend id="output-fieldset-1-legend" class="output-legend"></legend>
<table id="first_number_output">
Expand All @@ -95,4 +95,4 @@ <h1>Binary Calculator</h1>

<script src="script.js" language="JavaScript" type="text/javaScript"></script>
</body>
</html>
</html>
63 changes: 35 additions & 28 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const OutputFieldSet1Legend = document.getElementById("output-fieldset-1-legend"
const OutputFieldSet2Legend = document.getElementById("output-fieldset-2-legend");
const OutputFieldSet3Legend = document.getElementById("output-fieldset-3-legend");

const outputDiv = document.getElementById("output-div");

let bitCount = BitsCountSelector.value;
bitCount = parseInt(bitCount.substring(0,bitCount.length-5));
Expand Down Expand Up @@ -87,6 +88,9 @@ function check_first_second_num(){
}

function resetOutput(){
outputDiv.style["border"] = "none";
outputDiv.style["background-color"] = "#ffffff";

OutputFieldSet1Legend.textContent = ""
OutputFieldSet2Legend.textContent = ""
OutputFieldSet3Legend.textContent = ""
Expand All @@ -101,9 +105,12 @@ function resetOutput(){
function createOutput(){
outputValues = []

OutputFieldSet1.style["border"] ="2px solid white";
OutputFieldSet2.style["border"] ="2px solid white";
OutputFieldSet3.style["border"] ="3px solid white";
OutputFieldSet1.style["border"] ="1px solid rgba(210,210,210,0.2);";
OutputFieldSet2.style["border"] ="1px solid rgba(210,210,210,0.2);";
OutputFieldSet3.style["border"] ="1px solid rgba(210,210,210,0.2);";
outputDiv.style["border"] = "1px solid rgba(99,99,99,0.1)"
outputDiv.style["background-color"] = "rgba(210,210,210,0.2)"

OutputFieldSet1Legend.textContent = firstNum;
OutputFieldSet2Legend.textContent = secondNum;

Expand All @@ -120,15 +127,15 @@ function get_output_table_html(num){
let innerHtml = `
<tr>
<td></td>
<td>${firstNum}</td>
<td>:</td>
<td class="output">${outputValues[0]}</td>
<td class="output-title">${firstNum}</td>
<td><label class="dash">:</td>
<td class="output"><label class="output-val">${outputValues[0]}</td>
</tr>
<tr>
<td> &nbsp &nbsp + &nbsp</td>
<td>${secondNum}</td>
<td>:</td>
<td class="output">${outputValues[1]}</td>
<td class="output-title">${secondNum}</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${outputValues[1]}</td>
</tr>`
if (total>-1){
outputVal = add_spaces_by(fix_len_by(decimal_to_binary(total),bitCount,"0"),4);
Expand All @@ -150,9 +157,9 @@ function get_output_table_html(num){
</tr
<tr>
<td></td>
<td>${total}</td>
<td>:</td>
<td class="output">${outputVal}</td>
<td class="output-title">${total}</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${outputVal}</td>
</tr>
<tr>
<td></td>
Expand All @@ -174,14 +181,14 @@ function get_table_html(num){

let innerHtml = `
<tr>
<td>Decimal</td>
<td>:</td>
<td class="output">${num}</td>
<td class="output-title">Decimal</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${num}</td>
</tr>
<tr>
<td>Binary</td>
<td>:</td>
<td class="output">${add_spaces_by(binary,4)}</td>
<td class="output-title">Binary</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${add_spaces_by(binary,4)}</td>
</tr>`

if (num>-1){
Expand All @@ -194,9 +201,9 @@ function get_table_html(num){
outputValues.push(add_spaces_by(fixedBinary,4));
}
innerHtml+= `<tr>
<td>Binary(${bitCount}-Bits)</td>
<td>:</td>
<td class="output">${add_spaces_by(fixedBinary,4)}</td>
<td class="output-title">Binary(${bitCount}-Bits)</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${add_spaces_by(fixedBinary,4)}</td>
</tr>
`;
if (num>-1){
Expand All @@ -210,24 +217,24 @@ function get_table_html(num){
outputValues.push(add_spaces_by(twosComplement,4));
innerHtml += `
<tr>
<td>1's Complement</td>
<td>:</td>
<td class="output">${add_spaces_by(onesComplement,4)}</td>
<td class="output-title">1's Complement</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${add_spaces_by(onesComplement,4)}</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="output">+ 1</td>
<td class="output"><label class="output-val">+ 1</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="output"><hr></td>
</tr>
<tr>
<td>2's Complement</td>
<td>:</td>
<td class="output">${add_spaces_by(twosComplement,4)}</td>
<td class="output-title">2's Complement</td>
<td class="dash">:</td>
<td class="output"><label class="output-val">${add_spaces_by(twosComplement,4)}</td>
</tr>
<tr>
<td></td>
Expand Down
75 changes: 58 additions & 17 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,37 @@
@media screen and (min-width: 1081px) {
h1 {
font-size: 50px;
}
.input-title, select, .dash, option, .user-input, #operator_selector, #bits_count,.output-title{
font-size: 30px;
}
#input-legend, .output-legend{
font-size: 35px;
}
.output{
font-size: 25px;
}
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 1081px) {
h1 {
font-size: 80px;
}
.input-title, select, .dash, option, .user-input, #operator_selector, #bits_count,.output-title{
font-size: 40px;
}
#input-legend, .output-legend{
font-size: 45px;
}
.output{
font-size: 35px;
}
}

body{
background-color:lightskyblue;
background-color:rgb(255,255,255);
height: auto;
}

h1{
Expand All @@ -16,54 +48,63 @@ h1{
}

.input-fieldset{
border: 2px solid white;
border: 1px solid rgba(50,50,50,0.1);
border-radius: 13px;
background-color: rgba(210,210,210,0.2);
}

td{
padding-top: 2px;
padding-inline-start: 10px;
}

select{
color:#000000;
font-weight: bold;
background-color: lightskyblue;
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
border: 2px solid white;
}

option{
color:#000000;
font-weight: bold;
background-color: lightskyblue;
background-color: rgba(255,255,255,0.4);
}

input{
color:#000000;
.user-input{
font-weight: bold;
background-color: lightskyblue;
background-color: rgba(255,255,255,0.1);
border-style: none;
border: 2px solid white;
outline : none;
border-radius: 4px;
text-align: right;
padding-right: 5px;


width: 100%;
}

.output-fieldset{
border: none;
border-radius: 13px;
border:none;
border-radius: 10px;
}

.output-legend{
font-weight: bold;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:14px;
}


.output{
text-align: right;
}

#operator_selector{
width:100%;
text-align: right;
padding-right: 10px;
.output-val{
font-weight: bold;
}


#output-div{
margin-top: 50px;
border-radius: 10px;

}

0 comments on commit 57b255e

Please sign in to comment.