Neumorphism Basic Calculator using HTML and CSS | Working Calculator JS | Calculator With JavaScript
Hello Viewers, today in this post, you’ll learn how to create Neumorphism Basic Calculator using HTML ,CSS and JavaScript.
This Post is about making a neumorphism calculator. This uses a new styling feature in CSS using box-shadow effect. It is a nice way of learning web development and towards becoming an excellent web developer. It involves HTML, CSS and JavaScript.
To create this project (Neumorphism Basic Calculator using HTML ,CSS and JavaScript). First, you need to create two Files one HTML File and another one is CSS File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Basic Calculator</title>
</head>
<body>
<div class="Container">
<div class="Calculator">
<input type="text" placeholder="0" id="OutputScreen" />
<button onclick="Clear()">CL</button>
<button onclick="Delete()">DEL</button>
<button onclick="Display('%')">%</button>
<button onclick="Display('/')">/</button>
<button onclick="Display('7')">7</button>
<button onclick="Display('8')">8</button>
<button onclick="Display('9')">9</button>
<button onclick="Display('*')">*</button>
<button onclick="Display('4')">4</button>
<button onclick="Display('5')">5</button>
<button onclick="Display('6')">6</button>
<button onclick="Display('-')">-</button>
<button onclick="Display('1')">1</button>
<button onclick="Display('2')">2</button>
<button onclick="Display('3')">3</button>
<button onclick="Display('+')">+</button>
<button onclick="Display('0')">0</button>
<button onclick="Display('.')">.</button>
<button onclick="Calculate()" class="Equal">=</button>
</div>
</div>
<script src="script.js">
let OutputScreen = document.getElementById("OutputScreen");
function Display(num) {
OutputScreen.value += num;
}
function Calculate() {
try {
OutputScreen.value = eval(OutputScreen.value);
} catch (error) {
alert("Invalid");
}
}
function Clear() {
OutputScreen.value = "";
}
function Delete() {
OutputScreen.value = OutputScreen.value.slice(0, -1);
}
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given code in your CSS file.
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #e0e5ec;
font-family: "Montserrat", sans-serif;
outline: none;
}
.Container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.Calculator {
padding: 15px;
border-radius: 10px;
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f5;
display: grid;
grid-template-columns: repeat(4, 75px);
}
input {
grid-column: span 4;
width: 100%;
height: 150px;
box-shadow: inset 5px 5px 10px #babecc, inset -5px -5px 10px #f2f3f5;
border: none;
border-radius: 10px;
color: rgb(70, 70, 70);
text-align: end;
font-size: 50px;
margin: auto;
margin-top: 20px;
margin-bottom: 15px;
padding: 10px;
}
button {
cursor: pointer;
text-align: center;
width: 60px;
height: 60px;
font-size: 17px;
display: grid;
place-content: center;
border: none;
border-radius: 50%;
color: rgb(70, 70, 70);
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f5;
margin: 8px;
}
button:hover {
background: #babecc;
}
.Equal {
width: 132px;
border-radius: 10px;
}
That’s all in this post, you’ve successfully created Neumorphic Basic Calculator. If your code does not work or you’ve faced any problem then comment down your problem.
If you’re feeling difficult to understand what I am saying in this post. You can watch a full video tutorial on this project(How To Make Basic Calculator Using HTML, CSS and JavaScript).
where is java code bro ?
ReplyDelete