I am trying to create a fraction calculator. Being fairly new to javascript I am running into a few problems. I would like it to be accessible on mobile as well, that being the case I need to have input buttons available. I know what I am trying to do I just don't know how I need to do it.
When a button is pressed I would like to create a new div with the frac class with the corresponding elements and classes, as well as insert the pressed number into that part of the frac div. When an operator button is pressed I would like it to push the fraction that is already there over and display the operator and repeats the process for each fraction, I was thinking of using display:flex so they will add one after another.
How should I go about making that happen? Thank you!
:root {
--box-size: 35px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #242424;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.input-area {
display: flex;
justify-content: end;
align-items: center;
}
.input-area > * {
padding: 0 10px;
}
/* FRACTION */
.frac {
display: flex;
align-items: center;
}
.number {
height: var(--box-size);
width: var(--box-size);
text-align: center;
line-height: var(--box-size);
font-size: 2rem;
}
.divider {
height: 4px;
width: 100%;
background-color: #292929;
border-radius: 10px;
}
.add {
font-size: 2rem;
}
/* NumPads */
.button {
height: 40px;
width: 50px;
border: none;
cursor: pointer;
background-color: #e6e6e6;
border-radius: 3px;
}
.button:focus {
outline: none;
}
.button:hover {
background-color: #ececec;
}
.num-pads {
display: flex;
justify-content: center;
align-items: center;
}
.num-pads > *,.numerator-num-pad, .denominator-num-pad {
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input-area">
<div class="frac">
<div class="number whole-number">2</div>
<div class="frac-numbers">
<div class="number numerator">3</div>
<div class="divider"></div>
<div class="number denominator">8</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="number whole-number">5</div>
<div class="frac-numbers">
<div class="number numerator">1</div>
<div class="divider"></div>
<div class="number denominator">4</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="frac-numbers">
<div class="number numerator">7</div>
<div class="divider"></div>
<div class="number denominator">16</div>
</div>
</div>
</div>
<div class="num-pads">
<div class="whole-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="frac-parts">
<div class="numerator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="divider"></div>
<div class="denominator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I've created a simple example below which will allow the user to click on a fraction and then adjust each part of the selected fraction.
Note: I've used jQuery so if you don't have that currently, I'd suggest adding a reference to it.
The script works by listening for click events on the numpad. It will check the buttons value to determine what needs to happen (Clear, Remove last character, Add character).
I've added in operator buttons that will append an operator field and a new fraction. The new fraction can then be selected and updated the same way.
$(document)
.on("click", ".frac", function(){
// remove "active" class from all .frac
$(".frac").removeClass("active");
// add "active" class to this .frac
$(this).addClass("active");
})
.on("click", ".whole-num-pad .button", function(){
// whole number button pressed
var btnValue = $(this).val(),
$target = $(".frac.active .whole-number"), // get the current active frac
targetValue = $target.text(); // get the current value of the active frac
if(btnValue === "C"){
$target.text(""); // clear target
return;
}
if(btnValue === "<"){
// remove the last character from the current value
$target.text(targetValue.substr(0, targetValue.length - 1));
return;
}
// add btnValue to targetValue
// making sure we pass at least 1 as a string so that JS doesn't attempt to "add"
$target.text(targetValue + btnValue.toString());
})
.on("click", ".numerator-num-pad .button", function(){
// numerator button pressed
var btnValue = $(this).val(),
$target = $(".frac.active .numerator"), // get the current active frac
targetValue = $target.text(); // get the current value of the active frac
if(btnValue === "C"){
$target.text(""); // clear target
return;
}
if(btnValue === "<"){
// remove the last character from the current value
$target.text(targetValue.substr(0, targetValue.length - 1));
return;
}
// add btnValue to targetValue
// making sure we pass at least 1 as a string so that JS doesn't attempt to "add"
$target.text(targetValue + btnValue.toString());
})
.on("click", ".denominator-num-pad .button", function(){
// denominator button pressed
var btnValue = $(this).val(),
$target = $(".frac.active .denominator"), // get the current active frac
targetValue = $target.text(); // get the current value of the active frac
if(btnValue === "C"){
$target.text(""); // clear target
return;
}
if(btnValue === "<"){
// remove the last character from the current value
$target.text(targetValue.substr(0, targetValue.length - 1));
return;
}
// add btnValue to targetValue
// making sure we pass at least 1 as a string so that JS doesn't attempt to "add"
$target.text(targetValue + btnValue.toString());
})
.on("click", ".operator-button", function(){
var operator = $(this).val();
switch(operator){
case "+":
$(".input-area").append('<div class="add">+</div>');
break;
case "-":
$(".input-area").append('<div class="subtract">-</div>');
break;
case "x":
$(".input-area").append('<div class="multiply">x</div>');
break;
}
$(".input-area").append('<div class="frac">\
<div class="number whole-number"></div>\
<div class="frac-numbers">\
<div class="number numerator"></div>\
<div class="divider"></div>\
<div class="number denominator"></div>\
</div>\
</div>');
});
:root {
--box-size: 35px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #242424;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.input-area {
display: flex;
justify-content: end;
align-items: center;
}
.input-area > * {
padding: 0 10px;
}
/* FRACTION */
.frac {
display: flex;
align-items: center;
}
.frac.active {
border:1px solid blue;
}
.number {
height: var(--box-size);
width: var(--box-size);
text-align: center;
line-height: var(--box-size);
font-size: 2rem;
}
.divider {
height: 4px;
width: 100%;
background-color: #292929;
border-radius: 10px;
}
.add,
.subtract,
.multiply {
font-size: 2rem;
}
/* NumPads */
.button,
.operator-button {
height: 40px;
width: 50px;
border: none;
cursor: pointer;
background-color: #e6e6e6;
border-radius: 3px;
}
.button:focus {
outline: none;
}
.button:hover {
background-color: #ececec;
}
.num-pads {
display: flex;
justify-content: center;
align-items: center;
}
.num-pads > *,.numerator-num-pad, .denominator-num-pad {
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input-area">
<div class="frac">
<div class="number whole-number">2</div>
<div class="frac-numbers">
<div class="number numerator">3</div>
<div class="divider"></div>
<div class="number denominator">8</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="number whole-number">5</div>
<div class="frac-numbers">
<div class="number numerator">1</div>
<div class="divider"></div>
<div class="number denominator">4</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="number whole-number"></div>
<div class="frac-numbers">
<div class="number numerator">7</div>
<div class="divider"></div>
<div class="number denominator">16</div>
</div>
</div>
</div>
<div class="operator-buttons">
<input type="button" class="operator-button" value="+" />
<input type="button" class="operator-button" value="-" />
<input type="button" class="operator-button" value="x" />
</div>
<div class="num-pads">
<div class="whole-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="frac-parts">
<div class="numerator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="divider"></div>
<div class="denominator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
Related
I have an issue with my HTML, where when I go to add more than 3 new assets into my table, the buttons below (Add new asset, save and submit) are not being pushed down. Is this a flex issue and how would I go about solving this? I put all of my buttons into a div because I found this aligned my page better. But when I did not have my buttons in a div, it works. I am reframing my code to have more div's to keep everything contained.
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<form>
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>
<td><input id='description${count}' type='text'/></td>
<td><input id='cost${count}' type='value'/></td>
<td><input id='po_no${count}' type='text' /></td>
<td><input id='rc_to_credit${count}' type='text'/></td>
<td><input id='remarks${count}' type='text'/></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</form>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function(){
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
})
.header{
text-align: center;
margin-bottom: 50px;
}
h1, h2{
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
#media screen {
input{
text-align: center;
}
input#date{
width: -webkit-fill-available;
}
.flex {
display: flex;
flex: auto;
height: 100px;
/* border: 1px solid red; */
}
.flex-box {
width: 40px;
height: 1000px;
/* background: pink; */
}
.button{
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
}
.btn-remove{
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" /></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" /></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" /></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" /></td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable'>
<div class="flex-box"></div>
<tr>
<th> Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th> Description</th>
<th> Cost/ Est. Cost</th>
<th> Method of Disposal</th>
<th> RC to Credit</th>
<th> Remarks</th>
</tr>
</table>
</div>
<br><br><br><br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button>
</div>
</form>
</div>
</body>
</html>
You had added heights for both .flex and .flex-box. This was forcing them to stay the size they were.
Also, you didn't need the form tags for each row.
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>
<td><input id='description${count}' type='text'/></td>
<td><input id='cost${count}' type='value'/></td>
<td><input id='po_no${count}' type='text' /></td>
<td><input id='rc_to_credit${count}' type='text'/></td>
<td><input id='remarks${count}' type='text'/></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function() {
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
})
.header {
text-align: center;
margin-bottom: 50px;
}
h1,
h2 {
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
#media screen {
input {
text-align: center;
}
input#date {
width: -webkit-fill-available;
}
.flex {
display: flex;
flex: auto;
}
.flex-box {
width: 40px;
/* background: pink; */
}
.button {
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
}
.btn-remove {
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" /></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" /></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" /></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" /></td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable'>
<div class="flex-box"></div>
<tr>
<th> Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th> Description</th>
<th> Cost/ Est. Cost</th>
<th> Method of Disposal</th>
<th> RC to Credit</th>
<th> Remarks</th>
</tr>
</table>
</div>
<br><br><br><br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add'>+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit'>SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;" />EXPORT PDF</button>
</div>
</form>
</div>
</body>
</html>
The way I've done this in the past is to iterate a row count for each <tr> tag as the table is created. This helps with sorting, and you can easily specify a sort order.
However, since your table is pre-existing, the only answer I can really see is to simply rebuild the entire table and flow it into the correct element (the table element, in your case). No row order required, just put the rows in, in the order you want them.
I hope that helps a little.
So, I wanted to make it so that if, for some reason, people mistyped/misclicked something on my calculator, it would show a syntax error. However, I do not know how to do so.
What I mean by "mistyped" is when someone might have accidentally written something like:
10 + / 10
when they actually wanted to write 10 + 10.
Currently, my calculator just shows the equation inputted when there is an error, and doesn't do anything else. I just want to add the function for efficiency's sake.
function dis(val) {
document.getElementById("result").value += val
}
function solve() {
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
function clr() {
document.getElementById("result").value = " "
}
.title {
margin-bottom: 10px;
text-align: center;
width: 100%;
color: Black;
border: solid gray 2px;
font-size: 30px
}
input[type="button"] {
background-color: gray;
color: black;
border: solid black 2px;
width: 100%;
font-size: 30px
}
input[type="button"]:hover {
background-color: #D3D3D3;
cursor: pointer;
}
input[type="text"] {
background-color: white;
border: solid black 2px;
width: 100%;
font-size: 30px
}
<div class=t itle>Calculator</div>
<table border="10" style="width:100%;">
<tr>
<td colspan="3"><input type="text" id="result" /></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')" /> </td>
<td><input type="button" value="2" onclick="dis('2')" /> </td>
<td><input type="button" value="3" onclick="dis('3')" /> </td>
<td><input type="button" value="/" onclick="dis(' / ')" /> </td>
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')" /> </td>
<td><input type="button" value="5" onclick="dis('5')" /> </td>
<td><input type="button" value="6" onclick="dis('6')" /> </td>
<td><input type="button" value="(" onclick="dis('(')" /> </td>
<td><input type="button" value=")" onclick="dis(')')" /> </td>
</td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')" /> </td>
<td><input type="button" value="8" onclick="dis('8')" /> </td>
<td><input type="button" value="9" onclick="dis('9')" /> </td>
<td><input type="button" value="+" onclick="dis(' + ')" /> </td>
<td><input type="button" value="-" onclick="dis(' - ')" />
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')" /> </td>
<td><input type="button" value="0" onclick="dis('0')" /> </td>
<td><input type="button" value="=" onclick="solve()" /> </td>
<td><input type="button" value="×" onclick="dis(' * ')" /> </td>
<td><input type="button" value="π" onclick="dis('3.1415926535')"></td>
</tr>
</table>
You can detect that there's a syntax error with a REGEX for example to detect an invalid mathematical expression. You could also wrap the eval in a try catch block as an invalid expression would throw an error.
Example using try/catch
function solve()
{
let x = document.getElementById("result").value
let y;
try {
y = eval(x)
} catch (error) {
alert("Syntax error");
return;
}
document.getElementById("result").value = y
}
Then to alert the user you can use the alert function to alert the user or show the text in a div, the same way you set the result. that there's a syntax error.
However I think there's some fundamental issues with your calculator. I think it would be more appropriate to block users from making invalid expressions from the start instead.
Once user insert a quantity of a good and click on submit, this calculator should print the sub total of that good(quantity * unit price) and the grand total(sum of sub total rows).
please someone help me to write this jquery in JS fucntion..
body{
font-family:Consolas;
}
table{
border:1px solid blue;
padding-left:3px;
}
#submit{
background-color:green;
padding-left:20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="font-size:30px;color:red;text-align:left;word-spacing:100px;">ABC Supermarket</h1>
<table border-collapse="collapse" >
<tr>
<th>Item</th>
<th>Unit Price</th>
<th class="q">Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>Bread</td>
<td><input type="text" id="u1" value="120.00" readonly="readonly" onclick="reSum();"></td>
<td><input type="text" id="q1" onclick="reSum();"></td>
<td><input type="text" id="s1" readonly="readonly"></td>
</tr>
<tr>
<td>Grandtotal</td>
<td></td>
<td></td>
<td><input type="text" id="tot" readonly="readonly"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="clear" id="clear"></td>
<td><input type="button" id="submit" value="Submit" ></td>
</tr>
</table>
The JavaScript functions I wrote to replace the jqueries are below.
<script>
function subTotal(u1,q1){
var u1=document.getElementById("u1").value;
var q1=document.getElementById("q1").value;
var subTotal=u1*q1;
var grandTotal= subTotal;
document.getElementById("s1").innerHTML=subTotal;
document.getElementById("tot").innerHTML=grandTotal;
}
</script>
<script>
function clear(){
document.getElementById("q1").value="";
document.getElementById("s1").value="";
document.getElementById("tot").value="";
}
</script>
HTML code
<td><input type="number" class="qty" value="" name="qty" id="qty" style="border: 1px solid lightgray;width: 100%; padding: 6px;
border-radius: 5px;"></td>
<td><input class="price" type="number" id="price" name="price" style="border: 1px solid lightgray;width: 100%; padding: 6px;
border-radius: 5px;" ></td>
<td><input class="total" type="number" name="total" id="total" style=";width: 100%; padding: 6px;
border-radius: 5px; border:none ;font-size: 27px " ></td>
script
$(document).on('keyup', '.qty', function (){
let Ele = $(this);
let qtyEle = Ele.parent().parent().find('.price');
let totalEle = Ele.parent().parent().find('.total');
totalEle.val(qtyEle.val() * Ele.val());
});
Intro
Hello! I'm still very new to coding in general and using platforms like Stackoverflow, GitHub, etc so I apologize in advance if I have done something incorrectly within this post as well.
It is also my first post so please let me know of any corrections to make so I know how to make a more coherent posts in the future.
Problem
I have followed a HTML, CSS, & JS calculator tutorial online and have done the same exact step, however, when I ran the code my buttons have came out in different sizes as shown in the image below:
image of the buttons in different sizes
This is a screenshot of the video's code:
Calculator tutorial code
I'm unsure of how to pinpoint my errors.
This is the code that I have up till the point where I encountered this error:
function insert(num) {
document.form.textview.value = document.form.textview.value + num
}
* {
margin: 0;
padding: 0;
}
.button {
width: 50;
height: 50;
font-size: 25;
margin: 2;
cursor: pointer;
}
.textview {
width: 217;
margin: 5;
font-size: 25;
padding: 5;
}
<html>
<head>
</head>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input type="button" value="C"></td>
<td><input type="button" value="<"></td>
<td><input type="button" value="/"></td>
<td><input type="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="insert(1)"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Is the issue possibly within the style element?
Thank you!
I found typo error in you input tag, just you have to write "class" where you have written "type", see below for better understanding.
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>
Change to :
<td><input class="button" value="5"></td>
<td><input class="button" value="6"></td>
<td><input class="button" value="+"></td>
function insert(num){
document.form.textview.value=document.form.textview.value+num
}
<style>
*{
margin:0px;
padding: 0px;
}
.button{
width:50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
}
.textview{
width: 217px;
margin: 5px;
font-size: 25px;
padding: 5px;
}
</style>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input class="button" type="button" value="C"></td>
<td><input class="button" type="button" value="<"></td>
<td><input class="button" type="button" value="/"></td>
<td><input class="button" type="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
Some of your <input> elements do not have a class="button" as well as a type="button".
You need both - the type attribute to set the input type to button (or it will be a text box), and the class attribute for the appropriate CSS styles.
The body should look like this:
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="<"></td>
<td><input type="button" class="button" value="/"></td>
<td><input type="button" class="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
I was looking at a scientific calculator example by geekforgeeks and I came across this line of code which I'm unable to fully understand:
<td><input id="btn" type="button" value="cos"
OnClick="calc.display.value='Math.cos('">
</td>
The single quotes between 'Math.cos(' seems to display "Math.cos(" in the calculator input/display. If I move the single quotes such that the line reads OnClick="calc.display.value=Math.'cos('"> so that the calculator input/display displays only "cos(". This doesn't happen and the button stops working. Why does this happen, what is the significance of single quotes when using functions in a button? I couldn't find anything that specifically talks about using single quotes with onlcick so any clarification would be really helpful.
Also, how would I get a particular word such as "cos(" instead of "Math.cos(" to be printed on the calculator input display while waiting for the user to punch in some value when the button is clicked?
In the given geeksforgeeks code, we set calc.display.value variable to a string Math.cos(. Which will set value of the input named display inside a form named calc to Math.cos(.
If you want to change it to cos( instead of Math.cos(, simply remove math from the string.
<td><input id="btn" type="button" value="cos"
OnClick="calc.display.value='cos('">
</td>
After making this change, javascript will give this error:
Uncaught ReferenceError: cos is not defined
You can fix that by writing a wrapper function named cos on top of Math.cos.
function cos(exp) {
return Math.cos(exp);
}
This is the full working code.
function cos(exp) {
return Math.cos(exp);
}
/* Creating function in HTML for backspace operation */
function backspace(calc) {
size = calc.display.value.length;
calc.display.value = calc.display.value.substring(0, size-1);
}
/* Creating function to calculate factorial of element */
function calculate(calc) {
/* Check if function include ! character then
calculate factorial of number */
if(calc.display.value.includes("!")) {
size = calc.display.value.length;
n = Number(calc.display.value.substring(0, size-1));
f = 1;
for(i = 2; i <= n; i++)
f = f*i;
calc.display.value = f;
}
/* If function include % character then calculate
the % of number */
else if(calc.display.value.includes("%")) {
size = calc.display.value.length;
n = Number(calc.display.value.substring(0, size-1));
calc.display.value = n/100;
}
else
/* Otherwise evalute and execute output */
calc.display.value = eval(calc.display.value);
}
/* Style to set the title of calculator */
.title {
margin-bottom: 10px;
padding: 5px 0;
font-size: 20px;
font-weight:bold;
text-align:center;
width: 447px;
color:green;
border: solid black 2px;
}
/* Set the button style */
#btn {
width: 100%;
height: 40px;
font-size: 30px;
}
input[type="button"] {
background-color:green;
color: black;
border: solid black 2px;
width:100%
}
/* Set input textarea */
input[type="text"] {
background-color:white;
border: solid black 2px;
width:100%
}
<div class = title >
GeeksforGeeks Scientific Calculator
</div>
<form name = "calc">
<table id = "calc" border = 2>
<tr>
<td colspan=5><input id="btn" name="display"
onkeypress="return event.charCode >= 48
&& event.charCode <= 57" type="text">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="1"
OnClick="calc.display.value+='1'">
</td>
<td><input id="btn" type="button" value="2"
OnClick="calc.display.value+='2'">
</td>
<td><input id="btn" type="button" value="3"
OnClick="calc.display.value+='3'">
</td>
<td><input id="btn" type="button" value="C"
OnClick="calc.display.value=''">
</td>
<td><input id="btn" type="button" value="<-"
OnClick="backspace(this.form)">
</td>
<td><input id="btn" type="button" value="="
OnClick="calculate(this.form)">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="4"
OnClick="calc.display.value+='4'">
</td>
<td><input id="btn" type="button" value="5"
OnClick="calc.display.value+='5'">
</td>
<td><input id="btn" type="button" value="6"
OnClick="calc.display.value+='6'">
</td>
<td><input id="btn" type="button" value="-"
OnClick="calc.display.value='-'">
</td>
<td><input id="btn" type="button" value="%"
OnClick="calc.display.value+='%'">
</td>
<td><input id="btn" type="button" value="cos"
OnClick="calc.display.value='cos('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="7"
OnClick="calc.display.value+='7'">
</td>
<td><input id="btn" type="button" value="8"
OnClick="calc.display.value+='8'">
</td>
<td><input id="btn" type="button" value="9"
OnClick="calc.display.value+='9'">
</td>
<td><input id="btn" type="button" value="*"
OnClick="calc.display.value+='*'">
</td>
<td><input id="btn" type="button" value="n!"
OnClick="calc.display.value+='!'">
</td>
<td><input id="btn" type="button" value="sin"
OnClick="calc.display.value='Math.sin('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="."
OnClick="calc.display.value+='.'">
</td>
<td><input id="btn" type="button" value="0"
OnClick="calc.display.value+='0'">
</td>
<td><input id="btn" type="button" value=","
OnClick="calc.display.value+=','">
</td>
<td><input id="btn" type="button" value="+"
OnClick="calc.display.value+='+'">
</td>
<td><input id="btn" type="button" value="/"
OnClick="calc.display.value+='/'">
</td>
<td><input id="btn" type="button" value="tan"
OnClick="calc.display.value='Math.tan('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="E"
OnClick="calc.display.value+='Math.E'">
</td>
<td><input id="btn" type="button" value="pi"
OnClick="calc.display.value+='Math.PI'">
</td>
<td><input id="btn" type="button" value="^"
OnClick="calc.display.value+='Math.pow('">
</td>
<td><input id="btn" type="button" value="("
OnClick="calc.display.value+='('">
</td>
<td><input id="btn" type="button" value=")"
OnClick="calc.display.value+=')'">
</td>
<td><input id="btn" type="button" value="log"
OnClick="calc.display.value='Math.log('">
</td>
</tr>
<tr>
<td><input id="btn" type="button" value="sqrt"
OnClick="calc.display.value+='Math.sqrt('">
</td>
<td><input id="btn" type="button" value="ln2"
OnClick="calc.display.value+='Math.LN2'">
</td>
<td><input id="btn" type="button" value="ln10"
OnClick="calc.display.value+='Math.Log10'">
</td>
<td><input id="btn" type="button" value="l2e"
OnClick="calc.display.value+='Math.LOG2E'">
</td>
<td><input id="btn" type="button" value="l10e"
OnClick="calc.display.value+='Math.log10'">
</td>
<td><input id="btn" type="button" value="exp"
OnClick="calc.display.value='Math.exp('">
</td>
</tr>
</table>
</form>