![]() ![]() Also, it only executes JavaScript expressions. That’s why we used all input types as strings. The JavaScript eval() method, executes the string we pass in it as an argument. A better solution is to create the entire calculator with Excel, and convert the Excel formulas to JavaScript using SpreadsheetConverter.So, now, it’s just some if-else statements, checking the button text and the only changing we need to do is of multiply as "X" won’t get evaluated, instead, we need asterisks "*" which acts as multiply. This JavaScript Calculator App is very basic but works as per our expected.So the e.target.innerText will give us the text inside the buttons. It is also required to hold the text inside the button, we can do that by simply getting its value.So, here item of buttons means, for every single button from the buttons array add an event listener click. As we already have the hold of all buttons, which is also an array, so it makes sense to loop through all buttons and add event listeners on each button. Also, it will be evaluated and give us the results when we click on the = equal button. ![]() ![]() Declaring the inputValue as an empty variable, because we’ll update the text inside button on every click.First, we are getting the hold of the Input & button elements from HTML using basic DOM manipulation methods.So, I’ll explain the JavaScript part with steps so that you’d be able to understand it properly without getting confused. Let buttons = document.querySelectorAll("button") Ĭonsole.log("button text is ", buttonText) JavaScript Code – let input = document.getElementById("input") I’ve used UI Gradients to get this beautiful background gradient.Įlse, we are not using any fancy CSS, just the basics you might already be familiar with. Here, we have imported a Google Font called Montserrat and have a background gradient. If you don’t know HTML Table element then checkout this W3Schools Documentation.Īlso, we are linking to external stylesheet & script.īackground: #ff9966 /* fallback for old browsers */īackground: -webkit-linear-gradient(to right, #ff5e62, #ff9966) /* Chrome 10-25, Safari 5.1-6 */īackground: linear-gradient(to right, #ff5e62, #ff9966) /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ Inside the table we have 5 rows and inside those rows, we have table data, which are nothing but Calculator Buttons. So, nothing fancy here, we have a container wrapping the table element.
0 Comments
Leave a Reply. |