Calculator UI

Developer
Ahsan K. Rathore
Size
2,644 Kb
Views
50,600
  1. Calculator UI Previews
  2. Calculator UI HTML Codes
  3. Calculator UI CSS Codes
  4. Calculator UI JS Codes

How do I make an calculator ui?

Calculator UI. What is a calculator ui? How do you make a calculator ui? This script and codes were developed by Ahsan K. Rathore on 04 July 2022, Monday.

Calculator UI Previews
IQ Test

Calculator UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculator UI</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="calculator"> <div id="screen"> <span id="operations-area"></span> <span id="main-area"></span> </div> <div class="wrap"> <div id="numpad"> <ul> <li class="opt clear">C</li> <li class="opt">CE</li> <li class="opt">MR</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li class="zero">0</li> <li>.</li> </ul> </div> <div id="operation"> <ul> <li data-operation="">M+</li> <li data-operation="" style="border-radius: 0 10px 0 0;">M-</li> <li data-operation="+" class="opt">&plus;</li> <li data-operation="-" class="opt">&minus;</li> <li data-operation="*" class="opt">&times;</li> <li data-operation="/" class="opt">&divide;</li> <li data-operation="%">%</li> <li data-operation="√">√</li> <li data-operation="=" class="equal">=</li> </ul> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calculator UI - Script Codes CSS Codes

body { font-family : 'Open Sans', sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
#calculator { width: 500px; background-color: #000; border-radius: 20px; padding: 20px;
}
#screen { background-color: #fff; height : 90px; padding: 10px; border-radius: 10px; box-sizing: border-box;
}
#operations-area,
#main-area { height: 20px; display: block; text-align: right; font-size: 40px; font-weight: 600;
}
#operations-area { height: 20px; font-size: 12px; color: #333; font-weight: 600;
}
.wrap { overflow: hidden; margin-top: 15px;
}
#numpad { width : 300px; float: left;
}
#operation { float: right; width: 200px; text-align: right;
}
#numpad ul,
#operation ul { list-style-type: none; margin: 0px; padding: 0px;
}
#numpad ul li,
#operation ul li { display: inline-block; font-size: 32px; text-align: center; margin: 2px 0; padding: 15px 0; font-weight: 600; cursor: pointer; vertical-align: top; box-sizing: border-box; border-left: 3px solid #eee; border-top: 3px solid #eee; border-right: 3px solid #888; border-bottom: 3px solid #888;
}
#numpad ul li:active,
#operation ul li:active { background-color : #555; color: #fff;
}
#numpad ul li { width: 32%; background-color: #ccc;
}
#operation ul li { width: 48.9%; background-color: #d3d4b2;
}
#numpad ul li.zero { width: 65.2%; border-radius: 0 0 0 10px; }
#operation ul li.equal { width: 100%; border-radius: 0 0 10px 0; }
.clear { border-radius: 10px 0 0 0; }

Calculator UI - Script Codes JS Codes

$(function(){ var a, b, c, d; $('#numpad ul li:not(".opt")').on('click', function(){ a = $('#operations-area').text(); b = $(this).text(); var regex = new RegExp('[^a-zA-Z0-9]'); if (regex.test(d)) { //alert(d) $('#main-area').html(a+b); } else { $('#main-area').text(a+b); } $('#operations-area').text(a+b); }); $('#operation ul li.opt').on('click', function(){ c = $('#operations-area').text(); d = $(this).data('operation'); $('#operations-area').text(c+d); $('#main-area').text(a+b); }); $('.clear').on('click', function(){ $('#operations-area').empty(); $('#main-area').empty(); })
})
Calculator UI - Script Codes
Calculator UI - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 04, 2022
Rating 3
Size 2,644 Kb
Views 50,600
Do you need developer help for Calculator UI?

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!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
Full Calendar - Isotope
SVG Radar Animation with Radio Waves Alert
Animated Left Menu with Parallel Content Sliding
Animated Progress Donut
Animated Bar Charts
A Pen by Ahsan K. Rathore
Password Strength
SVG Path Animation using CSS3
One page responsive website By Ahsan Khurshid
Google Map Customized InfoWindow Hack
Create amazing love letters 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!