<!DOCTYPE html>
<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">
<title>New Calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a02bd9801f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="screen">
<textarea name="text" id="text" cols="30" rows="7" readonly> </textarea>
</div>
<div class="btn-container">
<button onclick="screen.value=null;" class="btn" id="clear" name="clear" value="AC">AC</button>
<button onclick="screen.value=screen.value.slice(0,-1);" class="btn" id="back" name="back" value="del"><i style="font-size: 23px;"class="bi bi-backspace-reverse"></i></button>
<button onclick="run(this);" class="btn" id="divide" name="divide" value="/"><i class="fa-solid fa-divide"></i></button>
<button onclick="run(this);"class="btn" id="multi" name="multi" value="*"><i class="fa fa-times" aria-hidden="true"></i></button>
<button onclick="run(this);" class="btn" id="one" name="one" value="1">1</button>
<button onclick="run(this);"class="btn" id="two" name="two" value="2">2</button>
<button onclick="run(this);"class="btn" id="three" name="three" value="3">3</button>
<button onclick="run(this);"class="btn" id="plus" name="plus" value="+"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button onclick="run(this);"onclick="run()" class="btn" id="four" name="four" value="4">4</button>
<button onclick="run(this);"class="btn" id="five" name="five" value="5">5</button>
<button onclick="run(this);"class="btn" id="six" name="six" value="6">6</button>
<button onclick="run(this);"class="btn" id="sub" name="sub" value="-"><i class="fa fa-minus" aria-hidden="true"></i></button>
<button onclick="run(this);"class="btn" id="seven" name="seven" value="7">7</button>
<button onclick="run(this);"class="btn" id="eight" name="eight" value="8">8</button>
<button onclick="run(this);"class="btn" id="nine" name="nine" value="9">9</button>
<button onclick="run(this);" class="btn" id="zero" name="zero" value="0">0</button>
<button onclick="cal()"class="btn" id="equal" name="equal" value="="><i class="fa-solid fa-equals"></i></button>
<button style="font-weight: bolder; font-size: 25px;" onclick="run(this);"class="btn" id="dec" name="dec" value=".">.</button>
<button onclick="run(this);"class="btn" id="dzero" name="dzero" value="00">00</button>
</div>
</div>
<script>
let screen=document.getElementById("text");
function run(e){
screen.innerHTML += e.value;
}
function cal(){
screen.innerHTML=eval( screen.value);
}
</script>
</body>
</html>
css// here//
body{
display: flex;
justify-content: center;
align-items: center;
background:url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
/* width: 100%; */
height: 100%;
}
.container{
width: 26%;
margin-top: 20px;
padding: 10px 5px;
height: auto;
/* border: 1px solid red; */
background-color: #0b0357;
border-radius: 5px;
}
.screen{
/* border: 1px solid red; */
padding:5px 0px;
display: flex;
justify-content: center;
align-items: center;
width:100%;
}
.screen textarea{
text-align: right;
font-size: 22px;
padding-top: 50px;
padding-right: 10px;
border: none;
background: whitesmoke;
border-radius: 10px;
width: 280px;
color: #0b0357;
font-weight: bolder;
}
.btn-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
padding: 10px;
text-align: center;
/* width: 100%; */
}
.btn{
padding: 10px 20px;
font-size: 20px;
height: 50px;
width: 62px;
border: 1px solid #ffaf1c ;
background-color: #0b0357;
color:whitesmoke;
border-radius: 3px;
}
#dzero{
width: 133px;
}
#equal{
background: #ffaf1c;
}
#clear{
background-color: #ffaf1c;
}
#plus{
background-color: #ffaf1c;
}
#sub{
background-color: #ffaf1c;
}
#multi{
background-color: #ffaf1c;
}
#divide{
background-color: #ffaf1c;
}
#back{
background-color: #ffaf1c;
}
@media (max-width:1236px) {
.container{
width:28% ;
}
}
@media (max-width:1168px) {
.container{
width:30% ;
}
}
@media (max-width:1079px) {
.container{
width:32% ;
}
}
@media (max-width:1000px) {
.container{
width:35% ;
}
}
@media (max-width:922px) {
.container{
width:38% ;
}
}
@media (max-width:846px) {
.container{
width:42% ;
}
}
@media (max-width:768px) {
.container{
width:50% ;
}
}
@media (max-width:657px) {
.container{
width:55% ;
}
}
@media (max-width:597px) {
.container{
width:60% ;
}
}
@media (max-width:541px) {
.container{
width:65% ;
}
}
@media (max-width:503px) {
.container{
width:70% ;
}
}
@media (max-width:465px) {
.container{
width:75% ;
}
}
@media (max-width:453px) {
.container{
width:80% ;
}
}
@media (max-width:411px) {
.container{
width:85% ;
}
}
@media (max-width:385px) {
.container{
width:90% ;
}
}
@media (max-width:367px) {
.container{
width:95% ;
}
}
@media (max-width:347px) {
.container{
width:100% ;
}
}
@media (max-width:280px) {
.btn{
width: 50px;
font-size: 15px;
padding: 5px;
}
#dzero{
width: 120px;
}
.btn-container{
padding: 4px;
}
}
Comments
Post a Comment