aldhie.productzilla/Calculator-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4 from Mitanshu21/pwa

Browse Source 
pwa
This commit is contained in:
mitanshu 2023-03-18 19:14:19 +05:30 committed by GitHub
commit 1b2b123134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 9590 additions and 4855 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
manifest.json Normal file
View File

@ -0,0 +1,29 @@
{
"short_name": "Calculator",
"name": "React Calculator",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "https://mitanshu21.github.io/react-calculator/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#dfe9f5",
"description": "Calculator created in react application.",
"lang": "en",
"orientation": "portrait-primary",
"display_override": ["standalone"]
}

10847
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
public/index.html
View File

@ -24,6 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<script>navigator.serviceWorker.register("%PUBLIC_URL%/react-calculator-sw.js")</script>
<title>React Calculator</title> <title>React Calculator</title>
</head> </head>
<body> <body>
@ -39,5 +40,15 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('%PUBLIC_URL%/react-calculator-sw.js')
}
if (window.matchMedia('(display-mode: standalone)').matches) {
window.resizeTo(400, 630);
}
</script>
</body> </body>
</html> </html>

18
public/react-calculator-sw.js vendored Normal file
View File

@ -0,0 +1,18 @@
// This is the "Offline copy of pages" service worker
const CACHE = "pwabuilder-offline";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE
})
);

73
src/components/styles/Buttons.css
View File

@ -2,27 +2,20 @@
display: grid; display: grid;
grid-template-columns: auto auto auto auto auto; grid-template-columns: auto auto auto auto auto;
background-color: white; background-color: white;
}
@media (min-width: 800px) {
.show-btn {
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
} }
}
.equal { .equal {
grid-column-start: 4; grid-column-start: 4;
grid-column-end: 6; grid-column-end: 6;
} }
.btn {
width: 60px;
height: 60px;
margin: 6px auto;
font-size: 24px;
font-weight: 500;
cursor: pointer;
border-radius: 50%;
background: none;
border: 0px;
}
.btn:last-child { .btn:last-child {
font-weight: medium; font-weight: medium;
font-size: 40px; font-size: 40px;
@ -33,18 +26,6 @@
background-color: #6dd5ed; background-color: #6dd5ed;
} }
.btn:hover {
background-color: #6dd5ed;
color: white;
transition: background-color 0.3s ease;
}
.btn:active {
background-color: #48b1bf;
color: white;
transition: background-color 0.3s ease;
}
.clr { .clr {
color: #d66d75; color: #d66d75;
} }
@ -52,3 +33,47 @@
.exp { .exp {
color: #06beb6; color: #06beb6;
} }
.btn {
width: 60px;
height: 60px;
margin: 6px auto;
font-size: 24px;
font-weight: 500;
cursor: pointer;
border-radius: 50%;
background: none;
border: 0px;
user-select: none;
}
@media (min-width: 800px) {
.btn:hover {
background-color: #6dd5ed;
color: white;
transition: background-color 0.3s ease;
border-radius: 50%;
}
.btn:active,
.btn.touched {
background-color: #48b1bf;
color: white;
transition: background-color 0.3s ease;
border-radius: 50%;
}
.btn:active {
transform: scale(0.9);
}
.btn.touched {
pointer-events: none;
}
}
@media (max-width: 800px) {
.btn:active {
transform: scale(0.9);
}
}

6
src/components/styles/Calculator.css
View File

@ -11,8 +11,14 @@
border: 0px; border: 0px;
box-shadow: 0px 0px 3px 0.5px #c4e0e5; box-shadow: 0px 0px 3px 0.5px #c4e0e5;
border-radius: 10px; border-radius: 10px;
max-width: 500px;
}
@media (min-width: 800px) {
.main {
max-width: 400px; max-width: 400px;
} }
}
@media (max-width: 600px) { @media (max-width: 600px) {
.main { .main {

9
src/components/styles/Display.css
View File

@ -2,12 +2,17 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-bottom: 20px; padding-bottom: 20px;
background: linear-gradient(90deg, #06beb6, #48b1bf 100%); background: linear-gradient(90deg, #06beb6, #48b1bf 100%);
} }
@media (min-width: 800px) {
.display {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
.expression { .expression {
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;