How to Create a New Morphism Calculator Using JavaScript

Using the CSS and JavaScript programming languages, we can easily create calculators that have a New morphism. Then how do I make a calculator? New morphism with CSS and JavaScript? Let’s open up your computer and do some of the simple steps below.

Tutorials

1. Download first some supporting files. Put the files in the same folder as index.html and app.js.

2. Open the XAMPP control panel and activate Apache.

3. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

                                            Calculator                

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named CalcNeumorphism – save the code above with the name index.html.

4. To see the results of the script code above, you can open your browser and type http: // localhost / CalcNeumorphism.

5. Enter the following CSS code.

*{	margin:0;	padding:0;	-webkit-box-sizing:border-box;	box-sizing:border-box;	outline:none}body{	font-family:'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;	min-height:100vh;	background-color:#eaebf3;	display:-webkit-box;	display:-ms-flexbox;	display:flex;	-webkit-box-pack:center;	-ms-flex-pack:center;	justify-content:center;	-webkit-box-align:center;	-ms-flex-align:center;	align-items:center}body div.container{	-webkit-box-shadow:6px 6px 10px rgba(0,0,0,0.1),					   -6px -6px 10px rgba(255,255,255,0.5);	box-shadow:6px 6px 10px rgba(0,0,0,0.1),			   -6px -6px 10px rgba(255,255,255,0.5);	border-radius:30px;	padding:2.5rem 2rem}body div.container input#input{	height:100px;	width:100%;	margin-bottom:60px;	border:none;	background-color:#eaebf3;	border-radius:50px;	-webkit-box-shadow:inset 6px 6px 10px rgba(0,0,0,0.1),					   inset -6px -6px 10px rgba(255,255,255,0.5);	box-shadow:inset 6px 6px 10px rgba(0,0,0,0.1),			   inset -6px -6px 10px rgba(255,255,255,0.5);	color:#c16fff;	font-size:2rem;	padding:0 2rem;	text-align:right}body div.container div#buttons{	display:-ms-grid;	display:grid;	-ms-grid-columns:(80px)[4];grid-template-columns:repeat(4, 80px);	-webkit-box-pack:center;-ms-flex-pack:center;	justify-content:center;	-webkit-box-align:center;	-ms-flex-align:center;	align-items:center;	gap:35px}body div.container div#buttons button{	color:#707070;	font-size:2rem;	cursor:pointer;	width:80px;	height:80px;	background:none;	border:none;	border-radius:50%;	-webkit-box-shadow:6px 6px 10px rgba(0,0,0,0.1),					   -6px -6px 10px rgba(255,255,255,0.5);	box-shadow:6px 6px 10px rgba(0,0,0,0.1),			   -6px -6px 10px rgba(255,255,255,0.5);	-webkit-transition:0.3s;transition:0.3s}body div.container div#buttons button.all-clear{	border-radius:50px;	width:100%;	-ms-grid-column:1;	-ms-grid-column-span:2;grid-column:1 / 3;	color:#ff8095}body div.container div#buttons button.delete{	color:#ff8095}body div.container div#buttons button.middle-dot{	font-size:5rem}body div.container div#buttons button.equals{	border-radius:50px;	width:100%;	-ms-grid-column:3;	-ms-grid-column-span:2;	grid-column:3 / 5;	color:#c16fff}body div.container div#buttons button:hover{	color:#c16fff}body div.container div#buttons button:active{	outline:none;	-webkit-box-shadow:inset 6px 6px 10px rgba(0,0,0,0.1),					   inset -6px -6px 10px rgba(255,255,255,0.5);	box-shadow:inset 6px 6px 10px rgba(0,0,0,0.1),			   inset -6px -6px 10px rgba(255,255,255,0.5)}/*# sourceMappingURL=main.min.css.map */

Save the CSS code in the xampplite folder – htdocs – create a new folder named CalcNeumorphism – save the CSS code in the folder CSS – Give names main.min.css.

6. Reload the URL address: http: // localhost / CalcNeumorphism. Now the calculator has a display Neumorphism, but the calculator still doesn’t work.

7. To use the calculator, open a new worksheet text editor and enter the following JavaScript code.

const buttons = document.getElementById('buttons'),    input = document.getElementById('input');let operationStatus = false,    firstValue,    typeOperation;input.value="0";/* ────────────────────── Functions ───────────────────── */const writeScreen = number => {    if (input.value === '0' || operationStatus === true) {        input.value = number;    } else if (number === '.' && !input.value.includes('.')) {        input.value += number;    } else if (number !== '.') {        input.value += number;    } else {        null;    }    operationStatus = false;};const getOperation = (element, operation) => {    operationStatus = true;    firstValue = Number(input.value);    typeOperation = operation;    input.value = element.innerText;};const runOperation = operation => {    const getResult = (firstValue, typeOperation) => {        const secondValue = Number(input.value);        let result;        switch (typeOperation) {            case '+':                result = firstValue + secondValue;                break;            case '-':                result = firstValue - secondValue;                break;            case '/':                result = firstValue / secondValue;                break;            case '*':                result = firstValue * secondValue;                break;            default:                break;        }        result === Infinity ? (input.value="Error") : (input.value = result);    };    switch (operation) {        case 'clear':            input.value="0";            break;        case 'del':            input.value = input.value.slice(0, input.value.length - 1);            break;        case 'equals':            getResult(firstValue, typeOperation);            operationStatus = true;            break;        default:            break;    }};/* ──────────────────── Main Function ─────────────────── */const calculator = () => {    if (!buttons) return;    buttons.addEventListener('click', e => {        const t = e.target,            d = t.dataset;        if (d.number) writeScreen(d.number);        if (d.math) getOperation(t, d.math);        if (d.operation) runOperation(d.operation);    });};calculator();

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named CalcNeumorphism – save the code above with the name app.js.

8. Reload the URL address: http: // localhost / CalcNeumorphism. Start the computer now New morphism.

Now the calculator can perform basic arithmetic operations.

9. Done.

Hence the explanation of the tutorial ‘How to make a calculator New morphism with JavaScript ‘. Much luck.






Leave a Reply

Your email address will not be published.