I'm learning JavaScript(jQuery), so I'm working on a scientific calculator. The delete button works fine when I have input such as; sin(cos(tan(. But when I have a repetition of similar input, say; sin(cos(tan(sin(, it removes the first occurrence of sin(. What I want, is to remove the last occurrence of each input (similar or not). I don't want to delete one letter/character at a time either.
The jQuery code is the closest I've gotten to what I want. I'd appreciate any advice on best practices too, since I'm a beginner.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<style type="text/css" media="all">
{
border: solid 1px black;
}
.calculator-body{
font-family: 'Titillium Web', sans-serif;
border: solid 2px #555;
border-radius: 2%;
background-color: #eee;
padding: 2%;
}
.screen{
height: 150px;
border: solid 1px #555;
border-radius: 2%;
background-color: #fff;
}
#input-area{
font-family: Courier, Monospace;
height: 50%;
overflow: auto;
}
#input-field{
border: 0px;
width: 100%;
font-size: 2.2em;
line-height: 2em;
font-weight: bold;
text-indent: 5px;
overflow: auto;
z-index: 99;
}
#result{
overflow: auto;
font-family: 'Montserrat', sans-serif;
font-size: 2.5em;
font-weight: 600;
height: 50%;
text-align: right;
text-indent: 30px;
padding-right: 10px;
padding-top: 15px;
}
table{
/*width: inherit;*/
margin-top: 3%;
height: 30vh;
}
td{
width: 60px;
opacity: .8;
text-align: center;
font-size: 1.8em;
font-weight: 500;
line-height: 2.6em;
}
i{
font-size: .8em;
}
td:active{
border-radius: 5%;
background-color: #ddd;
opacity: 1;
}
@media all and (max-width: 720px){
.calculator-body{
border-radius: 0;
}
td:active{
border-radius: 50%;
background-color: #ddd;
opacity: 1;
}
html > .col-12{
padding: 0;
}
}
table tr:nth-child(4), tr:nth-child(5){
border-bottom: solid 1px #ddd;
}
table tr:last-child{
border-top: solid 1px #ddd;
}
table tr:nth-child(4) td:nth-child(3), tr:nth-child(5) td:nth-child(3), tr:nth-child(6) td:nth-child(3), tr:nth-child(7) td:nth-child(3){
border-right: solid 1px #ddd;
}
#cls{
border-radius: 5%;
}
#equal{
background-color: #006dff;
color: #fff;
border-radius: 5%;
font-size: 2.2em;
opacity: 1;
transition: all .1s ease;
}
#equal:active{
font-size: 2.5em;
opacity: .5;
}
.operators{
color: #006dff;
}
.outlaw{
background-color: #bbb;
border-radius: 5%;
}
</style>
<title></title>
<script type="text/javascript" charset="utf-8">
$("document").ready(function (){
$("#del").click(function (){
var x = $("#input-field").val();
var x_len = $("#input-field").val().length;
var sin_lindex = x.lastIndexOf("sin");
var cos_lindex = x.lastIndexOf("cos");
var tan_lindex = x.lastIndexOf("tan");
if (sin_lindex > cos_lindex && sin_lindex > tan_lindex){
var value = x.replace("sin(", "");
$("#input-field").val(value)
}
else if (sin_lindex < cos_lindex && cos_lindex > tan_lindex){
var value = x.replace("cos(", "");
$("#input-field").val(value)
}
else if (tan_lindex > cos_lindex && sin_lindex < tan_lindex){
var value = x.replace("tan(", "");
$("#input-field").val(value)
}
});
$(".param").on("click", function (){
if($("#inv").hasClass("outlaw")){
document.getElementById("input-field").value += $(this).text().slice(0, -2) + "u2212" + "u00b9" + "(";
document.getElementById("input-field2").value += "Math.a" + $(this).text().slice(0, -2) + "(";
}
else{
document.getElementById("input-field").value += $(this).text() + "(";
document.getElementById("input-field2").value += "Math." + $(this).text() + "((Math.PI/180)*";
}
});
});
</script>
</head>
<body>
<div class="col-12 col-sm-8 col-md-6 calculator-body">
<div class="screen">
<div id="input-area"><input name="input-field" id="input-field" value="" />
</div>
<div id="result">
</div>
</div>
<table class="calculator-keys col-12">
<tr>
<td id="inv" class="operators mode">INV</td>
<td id="deg" class="operators mode">DEG</td>
<td id="sin" class="operators param">sin</td>
<td id="cos" class="operators param">cos</td>
<td id="tan" class="operators param">tan</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td id="del" class="operators">del</td>
<td id="cls" class="operators" colspan="2">Cls</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
