Dollar Amount Input UI Test

Developer
Size
3,298 Kb
Views
16,192

How do I make an dollar amount input ui test?

Recreating the Square Cash App's dollar input field functionality.. What is a dollar amount input ui test? How do you make a dollar amount input ui test? This script and codes were developed by Bryan on 29 November 2022, Tuesday.

Dollar Amount Input UI Test Previews

Dollar Amount Input UI Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dollar Amount Input UI Test</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>
<div class="wrapper"><span class="sup" id="symbol">$</span> <input id="dollar" type="tel" maxlength="4" value="0"/> <input class="sup hid" id="cents" type="tel" maxlength="2"/>
</div> <script src="js/index.js"></script>
</body>
</html>

Dollar Amount Input UI Test - Script Codes CSS Codes

body { background: #F5F5F5; padding: 50px;
}
.wrapper { background: #FFF; box-shadow: 0 30px 50px #B5B5B5; width: 700px; margin: 0 auto; text-align: center; padding: 20px; position: relative;
}
.sup { color: #C6C6C6; font-size: 41px; position: relative; top: 30px; left: 10px;
}
input { border: none; font-size: 150px; color: #93C13A; vertical-align: top; text-align: center; outline: none; margin: 0 auto; min-width: 90px;
}
input#cents.sup { font-size: 50px; font-style: italic; min-width: 40px; width: 60px; color: #93C13A; left: -10px; text-align: left;
}
.hid { display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield;
}

Dollar Amount Input UI Test - Script Codes JS Codes

var dollarAmt = document.getElementById("dollar");
var centsAmt = document.getElementById("cents");
function setDefaultValue() {	dollarAmt.addEventListener('input', function(e) {	if (this.value.length < 1) {	this.value = 0;	}	}, false);
}
function handleInputValues() {	dollarAmt.addEventListener('keypress', function(e) {	e = e || window.event;	var thekeycode = e.which ? e.keyCode : e.charCode;	// Allow only numbers	if (thekeycode <= 47 || thekeycode >= 58) {	e.preventDefault();	} else if (dollarAmt.value[0] === "0") {	e.preventDefault();	dollarAmt.value = String.fromCharCode(e.keyCode);	dollarAmt.value.replace(dollarAmt.value[0], "");	}	if (thekeycode === 46) {	e.preventDefault();	centsAmt.className = "sup";	centsAmt.focus();	}	}, false);	centsAmt.addEventListener('keypress', function(e) {	e = e || window.event;	var cursorPos = 0;	var thekeycode = e.which ? e.keyCode : e.charCode;	if (thekeycode <= 47 || thekeycode >= 58) {	e.preventDefault();	}	}, false);	centsAmt.addEventListener('keydown', function(e) {	e = e || window.event;	var thekeycode = e.keyCode;	if(thekeycode === 8 && centsAmt.value === "") {	e.preventDefault();	centsAmt.className += " hid";	dollarAmt.focus();	}	}, false);
}
function inputWidth(defaultAmt) {	dollarAmt.style.width = "100px";	dollarAmt.addEventListener('input', function(e) {	this.style.width = ((this.value.length) * 90) + 'px';	}, false);
}
function inputClear() {	dollarAmt.addEventListener("onkeydown", keyDownTextField, false);	function keyDownTextField(e) {	var keyCode = e.keyCode;	console.log(keyCode)	}
}
setDefaultValue();
inputWidth();
inputClear();
handleInputValues();
Dollar Amount Input UI Test - Script Codes
Dollar Amount Input UI Test - Script Codes
Home Page Home
Developer Bryan
Username Brydave
Uploaded November 29, 2022
Rating 3
Size 3,298 Kb
Views 16,192
Do you need developer help for Dollar Amount Input UI Test?

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!

Bryan (Brydave) Script Codes
Create amazing marketing copy 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!