Implement Scientific Calculator using HTML, JavaScript & CSS

Показать описание

Implemented a simple Scientific Calculator using HTML, JavaScript & CSS concepts.

Download Visual Studio Code - Code Editor

Download Google Chrome Browser

Рекомендации по теме

Комментарии

index.html

<html>
<head>
<style>
h1{
font:3em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
}

input[type=button] {
color:#08233e;
font:2em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
/* ... other rules ... */
cursor:pointer;
}

input[type=text] {
color:#08233e;
font:3.5em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
/* ... other rules ... */
cursor:pointer;
}

input[type=button]:hover {
background-color:rgba(255, 204, 0, 0.8);
}
</style>
</head>
<body>
<h1>Scientific Calculator</h1>
<input type="text" value="0" id="tbox" />
<br/><br/>

<input type="button" value="CLEAR" />
<input type="button" value="BACKSPACE" onclick="backspace();"/>
<br/><br/>

<input type="button" value="1" onclick="setTboxValue(1)" />
<input type="button" value="2" onclick="setTboxValue(2)" />
<input type="button" value="3" onclick="setTboxValue(3)" />
<input type="button" value="4" onclick="setTboxValue(4)" />
<input type="button" value="5" onclick="setTboxValue(5)" />
<input type="button" value="6" onclick="setTboxValue(6)" />
<input type="button" value="7" onclick="setTboxValue(7)" />
<input type="button" value="8" onclick="setTboxValue(8)" />
<input type="button" value="9" onclick="setTboxValue(9)" />
<input type="button" value="0" onclick="setTboxValue(0)" />
<input type="button" value="." onclick="setTboxValue('.')" />
<br/><br/>

<input type="button" value="+" />
<input type="button" value="-" />
<input type="button" value="*" />
<input type="button" value="/" />
<input type="button" value="=" onclick="equalOperator()" />
<br/><br/>

<input type="button" value="e^x" onclick="expOperator()" />
<input type="button" value="x^2" onclick="squareOperator()" />
<input type="button" value="x^3" onclick="cubeOperator()" />
<input type="button" value="x^y" onclick="xpowyOperator()" />
<br/><br/>

<input type="button" value="sqrt" onclick="sqrtOperator()" />
<input type="button" value="log" onclick="logOperator()" />
<br/><br/>

<input type="button" value="sin" onclick="sinOperator()" />
<input type="button" value="cos" onclick="cosOperator()" />
<input type="button" value="tan" onclick="tanOperator()" />
<input type="button" value="sin^-1" onclick="asinOperator()" />
<input type="button" value="cos^-1" onclick="acosOperator()" />
<input type="button" value="tan^-1" onclick="atanOperator()" />
<br/><br/>

<input type="button" value="Rand"
<input type="button" value="pi" />
<input type="button" value="x!" onclick="Factorial()" />

<br/><br/>
<script type="text/javascript" src="./index.js"></script>
</html>

johnblesswin-ict

index.js

var no1 = 0, no2 = 0, ans = 0; BinaryOperator = "", x = 0;

function setTboxValue(number) {
if === '0') = number;
else
= + number + "";
}

function BinaryOperatorClick(operator) {
no1 =
BinaryOperator = operator;
= 0;
}

function equalOperator() {
no2 =

if (BinaryOperator === '+') ans = no1 + no2;
else if (BinaryOperator === '-') ans = no1 - no2;
else if (BinaryOperator === '*') ans = no1 * no2;
else if (BinaryOperator === '/') ans = no1 / no2;
else if (BinaryOperator === '^') ans = Math.pow(x, no2);

= ans;
}

function expOperator() {
let n =
= Math.exp(n);
}

function squareOperator() {
let n =
= n * n;
}

function cubeOperator() {
let n =
= n * n * n;
}

function sinOperator() {
let n =
= Math.sin(n);
}

function cosOperator() {
let n =
= Math.cos(n);
}

function tanOperator() {
let n =
= Math.tan(n);
}

function asinOperator() {
let n =
= Math.asin(n);
}

function acosOperator() {
let n =
= Math.acos(n);
}

function atanOperator() {
let n =
= Math.atan(n);
}
function sqrtOperator() {
let n =
= Math.sqrt(n);
}

function logOperator() {
let n =
= Math.log(n);
}

function backspace() {
let str =
str = str.substring(0, str.length - 1);
if (!str) str = 0;
= str;
}

function Factorial() {
var rval = 1;
var num =
for (var i = 2; i <= num; i++) rval = rval * i;
= rval;
}

function xpowyOperator() {
x =
BinaryOperator = '^';
= 0;
}

johnblesswin-ict

Implement Scientific Calculator using HTML, JavaScript & CSS

Implement Scientific Calculator using HTML, JavaScript & CSS

How To Make A Calculator Using HTML CSS And JavaScript

How To Make a Scientific Calculator Using HTML5 CSS3 & Javascript ? #HTML5 #CSS3

How to build a scientific calculator using JavaScript HTML and CSS | E-CODEC

Create Simple or Scientific Calculator Using HTML, CSS and Javascript - Part 1

Programming Coding a scientific calculator with #javascript

Scientific Calculator using Javascript, CSS and HTML

HOW TO CREATE SCIENTIFIC CALCULATOR USING HTML

A passenger train of length 60 m travels at a speed of 80 km/hr. Another freight...| Doubtify JEE

How to make a Scientific Calculator using html css and javascript | Educational Technology

How to create calculator with Basic javascript ,css and Bootstrap || codeTrick

Soft Scientific Calculator with HTML, CSS, JS

Build this JS calculator in 15 minutes! 🖩

Build a Scientific Calculator from Scratch | HTML, CSS, JavaScript & Bootstrap Tutorial

How to Make a Scientific Calculator using JavaScript| Step-by-Step Guide

Simple Calculator making with HTML , CSS ,JS.

How to Make Calculator Using HTML, CSS & JavaScript | #coding #javascript #css #html #astechmast...

Create Simple or Scientific Calculator Using HTML, CSS and Javascript - Part 2

Scientific Calculator Part 1

Build Your Own Scientific Calculator Tutorial | ReactJS

How to make a Scientific Calculator in HTML & CSS | With Complete Source Code

How to make a Calculator using HTML CSS and JavaScript. | Beginner JavaScript Project.

Simple and Intelligent Standard Calculator Using HTML Demo

Hexadecimal to decimal conversion in scientific calculator