How to Make a Calculator using Elementor
- tutorial
- Updated Jul 08, 2021
- By Jim Fahad
Quick Summary
Tools and Links Used
Bluehost
WordPress hosting with a free domain included.
Elementor
The free page builder this tutorial is built with.
Elementor Pro
The Pro upgrade used throughout this tutorial.
HeyWordPress
WordPress themes and ready made templates.
Prompt Used in This Tutorial
Column Glass Effect CSS
selector{
backdrop-filter: blur(15px);
}
Display Word Break CSS
selector{
word-break: break-word;
}
Active Button Color CSS
.calculator .elementor-widget-button:active{
background: #14ff47;
}
.calculator .elementor-widget-button:active .elementor-button{
color: #192f00;
font-weight: 500;
transition: none;
}
Calculator JavaScript Snippet
<script>
var $ = jQuery
$(document).ready(function(){
var output = ''
$('.calculator .elementor-widget-button').on('click', function(){
var text = $(this).find('.elementor-button-text').text()
if( text == '=' ) {
output = eval(output)
}else if( text == 'C' ){
output = '0'
}else{
output += text
}
if( output[0] == '0' && output.length > 1 && !isNaN(output) ){
output = Number(output)
}
$('.calculator .elementor-heading-title').text(output)
})
$('.calculator .elementor-button-link').on('click', function(e){
e.preventDefault()
})
})
</script>
Get Your FREE Freelancing Roadmap
Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.
Free eBook Download
Related Tutorials
From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.
Browse All Tutorials