From 47653ce2041ab338c643490979d73fe8f11f99e6 Mon Sep 17 00:00:00 2001 From: Sangeetha Karthikeyan Date: Tue, 12 Dec 2023 23:32:05 +0530 Subject: [PATCH] Updated Calculator --- projects/basic-calculator/index.html | 49 ++++++++--------- projects/basic-calculator/style.css | 82 ++++++++++------------------ 2 files changed, 53 insertions(+), 78 deletions(-) diff --git a/projects/basic-calculator/index.html b/projects/basic-calculator/index.html index 432ea60..9574f9c 100644 --- a/projects/basic-calculator/index.html +++ b/projects/basic-calculator/index.html @@ -1,35 +1,32 @@ - - + - - - - Basic Calculator - + + +

Calculator

- +

- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +

- + \ No newline at end of file diff --git a/projects/basic-calculator/style.css b/projects/basic-calculator/style.css index baf4abd..977e453 100644 --- a/projects/basic-calculator/style.css +++ b/projects/basic-calculator/style.css @@ -1,68 +1,46 @@ -* { - box-sizing: border-box; - margin: 0; -} - .calculator { - background-color: #f2f2f2; - padding: 20px; - max-width: 400px; - margin: 0 auto; - border: solid 1px #ccc; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); - border-radius: 5px; - margin-top: 40px; + width: 250px; + margin: 0 auto; + text-align: center; + background-color: #2c3e50; /* Dark blue-gray background */ + border: 1px solid #34495e; /* Slightly darker border color */ + border-radius: 5px; + padding: 10px; } -#result{ - width: 100%; - padding: 10px; - font-size: 24px; - border: none; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset; - border-radius: 5px; +#display { + width: 95%; + margin: 5px; + padding: 5px; + font-size: 20px; + color: #ecf0f1; /* Light gray text color for better contrast */ + background-color: #34495e; /* Slightly darker blue-gray background */ + border: 1px solid #2c3e50; /* Matching border color */ + border-radius: 3px; } -.buttons{ +.buttons { display: grid; grid-template-columns: repeat(4, 1fr); - grid-gap: 10px; - margin-top: 20px; + gap: 5px; } -button{ +h1 { + text-align: center; + color: #2b0b11; /* Light gray text color for the heading */ +} + +button { + width: 100%; padding: 10px; - font-size: 24px; + font-size: 20px; + background-color: #3498db; /* Blue color for buttons */ + color: #ffffff; border: none; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); border-radius: 5px; cursor: pointer; - transition: background-color 0.3s ease; - -} - -button:hover{ - background-color: #ddd; -} - -.clear{ - background-color: #ff4136; - color: #fff; -} - -.number, .decimal{ - background-color: #fff; - color: #333; - -} - -.operator{ - background-color: #0074d9; - color: #fff; } -.equals{ - background-color: #01ff70; - grid-row: span 3; - color: #fff; +button:hover { + background-color: #2980b9; /* Darker blue color on hover */ } \ No newline at end of file pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: