Money Entry

Developer
Jeremy P. Beasley
Size
2,625 Kb
Views
26,312
  1. Money Entry Previews
  2. Money Entry HTML Codes
  3. Money Entry CSS Codes
  4. Money Entry JS Codes

How do I make an money entry?

What is a money entry? How do you make a money entry? This script and codes were developed by Jeremy P. Beasley on 20 September 2022, Tuesday.

Money Entry Previews
IQ Test

Money Entry - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Money Entry</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html xmlns="http://www.w3.org/1999/xhtml">	<head>	<title>Period</title>
<!--	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> -->	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--	<meta name="viewport" content="width=device-width" /> -->	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />	<link rel="apple-touch-icon" href="_img/ios_appicon.png" /> </head> <body>
<div id="numericInput" > <div id="numBox"></div> <div id="keypad" > <div class="key">1</div> <div class="key">2</div> <div class="key">3</div> <div class="key">4</div> <div class="key">5</div> <div class="key">6</div> <div class="key">7</div> <div class="key">8</div> <div class="key">9</div> <div class="btn">DEL</div> <div class="key">0</div> <div class="btn">CLR</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Money Entry - Script Codes CSS Codes

#numericInput{ position:relative; max-width: 320px;
}
#numBox{ width:84%; padding: 5%; margin: 3%; border: 1px solid black; text-align:center; cursor:text; font-size: 4em; overflow:hidden;
}
#keypad{ width: 100%; height:300px;
background #ccc;
}
.key, .btn{ width: 27%;	margin: .1em 3% .1em 3%; padding: .5em 0 .5em 0 ; border-bottom: 1px solid #000; text-align:center; font-weight:bold; color:black; float: left; font-size: 2em; cursor:pointer;
}
.key:hover{ border-color: #f2f2f2;
}
.key:active{ border-color: #ccc;
}

Money Entry - Script Codes JS Codes

$(document).ready(function(){ var digits = 0; var numBox = document.getElementById('numBox'); $('.key').click(function(){ if(this.innerHTML == '0'){ if (numBox.innerHTML.length < 0) numBox.innerHTML = numBox.innerHTML + this.innerHTML; digits += 1; //console.log("digits"); } else // add digits numBox.innerHTML = numBox.innerHTML + this.innerHTML; digits += 1; //console.log(digits); event.stopPropagation(); }); $('.btn').click(function(){ if(this.innerHTML == 'DEL'){ var numBox = document.getElementById('numBox'); if(numBox.innerHTML.length > 0){ // delete a digit numBox.innerHTML = numBox.innerHTML.substring(0, numBox.innerHTML.length - 1); digits -= 1; //console.log(digits); } } else{ // clear numbox document.getElementById('numBox').innerHTML = ''; digits = 0; //console.log(digits); } event.stopPropagation(); }); //decimal entry $('.key').click(function(){ if (digits % 2 == 0)
{ var mystring = $( "#numBox" ).html(); mystring = mystring.replace('.',''); $( "#numBox" ).html(mystring); $( "#numBox" ).append("."); console.log("worked!");
} });
});
Money Entry - Script Codes
Money Entry - Script Codes
Home Page Home
Developer Jeremy P. Beasley
Username jeremypbeasley
Uploaded September 20, 2022
Rating 3
Size 2,625 Kb
Views 26,312
Do you need developer help for Money Entry?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeremy P. Beasley (jeremypbeasley) Script Codes
Name
A Pen by Jeremy P. Beasley
Scroll to Top
Number Climb
Calling Webcam API
Lazy Load Test
Art 3.2
Lightbox from BG Image
The Big List
Credit Card Form Auto-tab Continuous Typing V2
GridGridGrid
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!