Compare commits
No commits in common. "master" and "gh-pages" have entirely different histories.
|
|
@ -1,21 +0,0 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react/jsx-no-target-blank': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
pipeline {
|
||||
agent any
|
||||
|
||||
stages {
|
||||
stage('build'){
|
||||
steps{
|
||||
sh 'npm install'
|
||||
sh 'npm run build'
|
||||
}
|
||||
}
|
||||
stage('deploy'){
|
||||
steps{
|
||||
sshPublisher(publishers: [sshPublisherDesc(configName: 'Demos', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: 'ssh-uploads/calculator', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
# Responsive Calculator App
|
||||
|
||||
I built this as coursework for a [Frontend certification](https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries). [Check out the live demo.](https://demos.ajstepien.xyz/calculator)
|
||||
|
||||
## This app is..
|
||||
- fully functional as a calculator.
|
||||
- designed to look good on a range of devices, in a range of aspect ratios.
|
||||
- built with an elegant command routing system (if I do say so myself).
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "/calculator/static/css/main.59af72cc.css",
|
||||
"main.js": "/calculator/static/js/main.121f73e2.js",
|
||||
"static/js/787.a174f9e5.chunk.js": "/calculator/static/js/787.a174f9e5.chunk.js",
|
||||
"static/media/DS-DIGIB.TTF": "/calculator/static/media/DS-DIGIB.81b4bd9230069b72f5e8.TTF",
|
||||
"index.html": "/calculator/index.html",
|
||||
"main.59af72cc.css.map": "/calculator/static/css/main.59af72cc.css.map",
|
||||
"main.121f73e2.js.map": "/calculator/static/js/main.121f73e2.js.map",
|
||||
"787.a174f9e5.chunk.js.map": "/calculator/static/js/787.a174f9e5.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.59af72cc.css",
|
||||
"static/js/main.121f73e2.js"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
17
index.html
17
index.html
|
|
@ -1,16 +1 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/calculator/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/calculator/logo192.png"/><link rel="manifest" href="/calculator/manifest.json"/><title>React App</title><script defer="defer" src="/calculator/static/js/main.121f73e2.js"></script><link href="/calculator/static/css/main.59af72cc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=VT323&display=swap" rel="stylesheet"></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"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": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
|
|
@ -1,26 +0,0 @@
|
|||
{
|
||||
"name": "calculator-vite",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build --base=/calculator/",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
193
src/App.css
193
src/App.css
|
|
@ -1,193 +0,0 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: calculator;
|
||||
src: url("DS-DIGIB.TTF");
|
||||
}
|
||||
|
||||
@media screen and (min-width:601px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#calculator {
|
||||
background-color: white;
|
||||
height: 50rem;
|
||||
max-height: 100vh;
|
||||
width: 35rem;
|
||||
max-width: 100vw;
|
||||
margin: auto;
|
||||
background: rgb(68, 64, 64);
|
||||
background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
|
||||
padding: 1rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#calculator-content {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"display display display display"
|
||||
"functions functions functions operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
#calculator-content>header {
|
||||
grid-area: header;
|
||||
align-self: center;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
#calculator-content>header>h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0.5rem auto;
|
||||
color: aliceblue;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#display-container {
|
||||
grid-area: display;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
height: 9em;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 6fr 1fr;
|
||||
grid-template-areas:
|
||||
"memory"
|
||||
"main"
|
||||
"operator"
|
||||
;
|
||||
|
||||
|
||||
background: linear-gradient(351deg, rgba(15, 93, 53, 1) 0%, rgba(194, 228, 185, 1) 100%);
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0.5rem 0.5rem 2rem inset;
|
||||
}
|
||||
|
||||
.off {
|
||||
filter: brightness(0.5);
|
||||
}
|
||||
|
||||
.off>p {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#display-container>p {
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#display {
|
||||
font-family: calculator;
|
||||
font-size: 5rem;
|
||||
grid-area: main;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
#memory {
|
||||
grid-area: memory;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
#operator {
|
||||
grid-area: operator;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.num-pad {
|
||||
grid-area: numbers;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.operator-pad {
|
||||
grid-area: operators;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr) 2fr;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.function-pad {
|
||||
grid-area: functions;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button {
|
||||
background: linear-gradient(351deg, rgba(92, 92, 92, 0.9) 0%, rgba(224, 224, 224, 0.9) 100%);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
font-size: 3rem;
|
||||
place-self: stretch;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
.num-pad>button {
|
||||
background-color: lightblue;
|
||||
|
||||
}
|
||||
|
||||
.operator-pad>button {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.function-pad>button {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#off {
|
||||
background-color: #FF9B9B;
|
||||
}
|
||||
|
||||
#on {
|
||||
background-color: #CBFFA9;
|
||||
}
|
||||
|
||||
#clear {
|
||||
background-color: #FFD6A5;
|
||||
}
|
||||
12
src/App.jsx
12
src/App.jsx
|
|
@ -1,12 +0,0 @@
|
|||
import "./App.css";
|
||||
import Calculator from "./Components/Calculator";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Calculator />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export default function Button(props){
|
||||
|
||||
return(
|
||||
<button className="button" id={props.id} onClick={props.handleInput}>{props.children}</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import KeyPad from "./KeyPad";
|
||||
|
||||
export default function Calculator(props) {
|
||||
const [main, setMain] = useState("0");
|
||||
const [memory, setMemory] = useState("");
|
||||
const [operation, setOperation] = useState("");
|
||||
const [on, setOn] = useState(true);
|
||||
|
||||
const map = {
|
||||
conc: (numberString) => {
|
||||
if (main.length <= 9) {
|
||||
if (main[0] === "0") {
|
||||
setMain((prev) => prev.slice(1) + numberString);
|
||||
} else {
|
||||
setMain((prev) => prev + numberString);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
zero: function() {
|
||||
this.conc("0");
|
||||
},
|
||||
one: function() {
|
||||
this.conc("1");
|
||||
},
|
||||
two: function() {
|
||||
this.conc("2");
|
||||
},
|
||||
three: function() {
|
||||
this.conc("3");
|
||||
},
|
||||
four: function() {
|
||||
this.conc("4");
|
||||
},
|
||||
five: function() {
|
||||
this.conc("5");
|
||||
},
|
||||
six: function() {
|
||||
this.conc("6");
|
||||
},
|
||||
seven: function() {
|
||||
this.conc("7");
|
||||
},
|
||||
eight: function() {
|
||||
this.conc("8");
|
||||
},
|
||||
nine: function() {
|
||||
this.conc("9");
|
||||
},
|
||||
decimal: function() {
|
||||
if (!/\./g.test(main)) {
|
||||
this.conc(".");
|
||||
}
|
||||
},
|
||||
|
||||
add: function() {
|
||||
this.rcvOperator("add");
|
||||
},
|
||||
subtract: function() {
|
||||
this.rcvOperator("subtract");
|
||||
},
|
||||
multiply: function() {
|
||||
this.rcvOperator("multiply");
|
||||
},
|
||||
divide: function() {
|
||||
this.rcvOperator("divide");
|
||||
},
|
||||
|
||||
rcvOperator: function(operator) {
|
||||
if (main === "-") {
|
||||
setMain("");
|
||||
} else if (main !== "") {
|
||||
if (memory === "") {
|
||||
setMemory(main);
|
||||
} else {
|
||||
setMemory((prev) => {
|
||||
return this.calculate(main, prev);
|
||||
});
|
||||
}
|
||||
setMain("");
|
||||
}
|
||||
if (main === "" && operator === "subtract") {
|
||||
setMain((prev) => {
|
||||
if (prev[0] !== "-") {
|
||||
return "-" + prev;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setOperation(operator);
|
||||
}
|
||||
},
|
||||
|
||||
operations: {
|
||||
add: (a, b) => {
|
||||
return a + b;
|
||||
},
|
||||
subtract: (a, b) => {
|
||||
return b - a;
|
||||
},
|
||||
multiply: (a, b) => {
|
||||
return a * b;
|
||||
},
|
||||
divide: (a, b) => {
|
||||
return b / a;
|
||||
},
|
||||
},
|
||||
|
||||
clear: () => {
|
||||
setMain("0");
|
||||
setMemory("");
|
||||
setOperation("");
|
||||
},
|
||||
equals: function() {
|
||||
if (operation !== "" && main !== "") {
|
||||
setMain((prev) => {
|
||||
return this.calculate(prev, memory);
|
||||
});
|
||||
setMemory("");
|
||||
setOperation("");
|
||||
}
|
||||
},
|
||||
on: () => setOn(true),
|
||||
off: () => {
|
||||
setOn(false);
|
||||
setMain("0");
|
||||
setMemory("");
|
||||
setOperation("");
|
||||
},
|
||||
calculate: function(a, b) {
|
||||
const string = this.operations[operation](
|
||||
parseFloat(a),
|
||||
parseFloat(b),
|
||||
).toString();
|
||||
return string.length <= 9 ? string : string.slice(0, 10);
|
||||
},
|
||||
};
|
||||
|
||||
function handleInput(content) {
|
||||
map[content]();
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="calculator">
|
||||
<div id="calculator-content">
|
||||
<header>
|
||||
<h1>CALCULATOR</h1>
|
||||
</header>
|
||||
<div id="display-container" className={on ? "on" : "off"}>
|
||||
<p id="memory">{memory}</p>
|
||||
<p id="display">{main}</p>
|
||||
<p id="operator">{operation}</p>
|
||||
</div>
|
||||
<KeyPad handleInput={handleInput} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import Button from "./Button"
|
||||
export default function NumPad(props){
|
||||
const numberMap = {
|
||||
|
||||
seven:7,
|
||||
eight:8,
|
||||
nine:9,
|
||||
four:4,
|
||||
five:5,
|
||||
six:6,
|
||||
one:1,
|
||||
two:2,
|
||||
three:3,
|
||||
zero:0,
|
||||
decimal:".",
|
||||
equals:"="
|
||||
|
||||
}
|
||||
|
||||
const operatorMap = {
|
||||
|
||||
subtract:"-",
|
||||
multiply:"x",
|
||||
divide:"/",
|
||||
add:"+",
|
||||
|
||||
}
|
||||
|
||||
const functionMap = {
|
||||
on:"on",
|
||||
off:"off",
|
||||
clear:"C",
|
||||
|
||||
}
|
||||
|
||||
function buildButtons(map){
|
||||
return Object.keys(map).map((e,i)=>{
|
||||
return(
|
||||
<Button
|
||||
id={e}
|
||||
content={map[e]}
|
||||
key={e+i}
|
||||
handleInput={()=>props.handleInput(e)}>
|
||||
{map[e]}
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<div className="num-pad">
|
||||
{buildButtons(numberMap)}
|
||||
</div>
|
||||
<div className="operator-pad">
|
||||
{buildButtons(operatorMap)}
|
||||
</div>
|
||||
<div className="function-pad">
|
||||
{buildButtons(functionMap)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,10 +0,0 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
*,:after,:before{box-sizing:border-box}@font-face{font-family:calculator;src:url(/calculator/static/media/DS-DIGIB.81b4bd9230069b72f5e8.TTF)}html{font-size:16px}#calculator{background:#444040;background:linear-gradient(351deg,#444040,#9c9696);border-radius:2rem;margin:auto;padding:1rem;width:550px}#calculator-content{grid-gap:1rem;display:grid;gap:1rem;grid-template-areas:"header header header header" "display display display display" "functions functions functions operators" "numbers numbers numbers operators" "numbers numbers numbers operators" "numbers numbers numbers operators" "numbers numbers numbers operators";grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1.6fr repeat(5,1fr)}#calculator-content>header{align-self:center;font-family:Roboto,sans-serif;grid-area:header}#calculator-content>header>h1{color:#f0f8ff;font-size:3rem;margin:.5rem auto;opacity:.8}#display-container{align-self:end;background:linear-gradient(351deg,#0f5d35,#c2e4b9);border-radius:.5rem;box-shadow:inset .5rem .5rem 2rem;display:grid;font-family:VT323,monospace;font-size:1rem;grid-area:display;grid-template-areas:"memory" "main" "operator";grid-template-rows:1fr 6fr 1fr;height:9rem;justify-self:end;padding:.5rem;width:100%}.off{-webkit-filter:brightness(.5);filter:brightness(.5)}.off>p{display:none!important}#display-container>p{margin:auto 0;opacity:.8;text-align:right}#display{font-family:calculator;font-size:6rem;grid-area:main}#display,#memory{align-self:center}#memory{grid-area:memory}#operator{align-self:center;grid-area:operator}.num-pad{grid-gap:.2rem;display:grid;gap:.2rem;grid-area:numbers;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.operator-pad{grid-gap:.2rem;display:grid;gap:.2rem;grid-area:operators;grid-template-rows:repeat(3,1fr) 2fr}.function-pad{grid-gap:.2rem;display:grid;gap:.2rem;grid-area:functions;grid-template-columns:repeat(3,1fr)}button{background:linear-gradient(351deg,rgba(92,92,92,.9),hsla(0,0%,88%,.9));background-blend-mode:multiply;border-radius:1.5rem;font-size:3rem;place-self:stretch}.num-pad>button{background-color:#add8e6}.operator-pad>button{font-size:3.5em}.function-pad>button{font-size:2em}#off{background-color:#ff9b9b}#on{background-color:#cbffa9}#clear{background-color:#ffd6a5}
|
||||
/*# sourceMappingURL=main.59af72cc.css.map*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"static/css/main.59af72cc.css","mappings":"AAEA,iBAGI,qBACJ,CAEA,WACI,sBAAuB,CACvB,mEACJ,CAEA,KACI,cACJ,CAEA,YAGI,kBAAyB,CAC7B,kDAAkF,CAE9E,kBAAmB,CAJnB,WAAW,CAGX,YAAa,CAJb,WAMJ,CAEA,oBAaI,aAAQ,CAZR,YAAa,CAYb,QAAQ,CATR,6QAQI,CAVJ,mCAAoC,CACpC,0CAWJ,CAGA,2BAEI,iBAAkB,CAClB,6BAAiC,CAFjC,gBAIJ,CAEA,8BAGI,aAAgB,CAFhB,cAAe,CACf,iBAAkB,CAGlB,UACJ,CAEA,mBAGI,cAAe,CAYf,kDAAkF,CAGlF,mBAAqB,CAErB,iCAAoC,CAdpC,YAAa,CAUb,2BAA+B,CAC/B,cAAe,CAhBf,iBAAkB,CAOlB,8CAIA,CALA,8BAA+B,CAH/B,WAAW,CAFX,gBAAiB,CAiBjB,aAAc,CAdd,UAgBJ,CAEA,KACI,6BAAuB,CAAvB,qBACJ,CACA,OACI,sBACJ,CAEA,qBACI,aAAa,CAEb,UAAY,CADZ,gBAEJ,CAEA,SACI,sBAAuB,CACvB,cAAe,CACf,cAGJ,CAEA,iBAJI,iBAQJ,CAJA,QACI,gBAGJ,CAEA,UAEI,iBAAkB,CADlB,kBAGJ,CAMA,SAKI,cAAW,CAHX,YAAa,CAGb,SAAW,CAJX,iBAAkB,CAElB,mCAAoC,CACpC,gCAEJ,CAEA,cAII,cAAW,CAFX,YAAa,CAEb,SAAW,CAHX,mBAAoB,CAEpB,oCAEJ,CAEA,cAII,cAAW,CAFX,YAAa,CAEb,SAAW,CAHX,mBAAoB,CAEpB,mCAEJ,CAIA,OACI,sEAAsF,CACtF,8BAA+B,CAI/B,oBAAqB,CAFrB,cAAe,CACf,kBAEJ,CAEA,gBACI,wBAEJ,CAEA,qBACI,eACJ,CAEA,qBACI,aACJ,CAEA,KACI,wBACJ,CAEA,IACI,wBACJ,CAEA,OACI,wBACJ","sources":["App.css"],"sourcesContent":["\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n@font-face {\n font-family: calculator;\n src: url(\"DS-DIGIB.TTF\");\n}\n\nhtml{\n font-size: 16px;\n}\n\n#calculator{\n width:550px;\n margin:auto;\n background: rgb(68,64,64);\nbackground: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100%);\n padding: 1rem;\n border-radius: 2rem;\n}\n\n#calculator-content{\n display: grid;\n grid-template-columns: repeat(4,1fr);\n grid-template-rows: 1fr 1.6fr repeat(5,1fr);\n grid-template-areas: \n \"header header header header\"\n \"display display display display\"\n \"functions functions functions operators\"\n \"numbers numbers numbers operators\"\n \"numbers numbers numbers operators\"\n \"numbers numbers numbers operators\"\n \"numbers numbers numbers operators\"\n ;\n gap:1rem;\n}\n\n\n#calculator-content > header{\n grid-area: header;\n align-self: center;\n font-family: 'Roboto', sans-serif;\n \n}\n\n#calculator-content > header > h1{\n font-size: 3rem;\n margin:0.5rem auto;\n color: aliceblue;\n\n opacity: 0.8;\n}\n\n#display-container{\n grid-area: display;\n justify-self: end;\n align-self: end;\n height:9rem;\n width:100%;\n display: grid;\n grid-template-rows: 1fr 6fr 1fr;\n grid-template-areas:\n \"memory\"\n \"main\"\n \"operator\"\n ;\n\n\n background: linear-gradient(351deg, rgba(15,93,53,1) 0%, rgba(194,228,185,1) 100%);\n font-family: 'VT323', monospace; \n font-size: 1rem;\n border-radius: 0.5rem;\n padding:0.5rem;\n box-shadow: 0.5rem 0.5rem 2rem inset;\n}\n\n.off{\n filter: brightness(0.5);\n}\n.off > p{\n display: none !important;\n}\n\n#display-container > p {\n margin:auto 0;\n text-align: right;\n opacity: 0.8;\n}\n\n#display{\n font-family: calculator;\n font-size: 6rem;\n grid-area: main;\n align-self: center;\n\n}\n\n#memory{\n grid-area: memory;\n align-self: center;\n \n}\n\n#operator{\n grid-area: operator;\n align-self: center;\n \n}\n\n\n\n\n\n.num-pad{\n grid-area: numbers;\n display: grid;\n grid-template-columns: repeat(3,1fr);\n grid-template-rows: repeat(4,1fr);\n gap: 0.2rem;\n}\n\n.operator-pad{\n grid-area: operators;\n display: grid;\n grid-template-rows: repeat(3,1fr) 2fr;\n gap: 0.2rem;\n}\n\n.function-pad{\n grid-area: functions;\n display: grid;\n grid-template-columns: repeat(3,1fr);\n gap: 0.2rem;\n}\n\n\n\nbutton{\n background: linear-gradient(351deg, rgba(92,92,92,0.9) 0%, rgba(224,224,224,0.9) 100%);\n background-blend-mode: multiply;\n \n font-size: 3rem;\n place-self: stretch;\n border-radius: 1.5rem;\n}\n\n.num-pad > button{\n background-color: lightblue;\n\n}\n\n.operator-pad > button{\n font-size: 3.5em;\n}\n\n.function-pad > button{\n font-size: 2em;\n}\n\n#off{\n background-color: #FF9B9B;\n}\n\n#on{\n background-color: #CBFFA9;\n}\n\n#clear{\n background-color: #FFD6A5;\n}"],"names":[],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
"use strict";(self.webpackChunkcalculator=self.webpackChunkcalculator||[]).push([[787],{787:function(e,t,n){n.r(t),n.d(t,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(n=m(e,r,t),o&&a(o),s((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},h=!1,T=-1,y=function(e,t){h||(g((function(e){T=e.value})),h=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},d=c("first-input",p);n=m(e,v,t),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
|
||||
//# sourceMappingURL=787.a174f9e5.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +0,0 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue