​

Demo: home page for free source code

​  

Code directory:

​

Main code implementation:

CSS styles:

:root { /* color palette :: https://coolors.co/app/d63c6b-5cc8ff-efefef-292f36-d6d6d6 */ --white: #efefef; --white-alpha: rgba(239, 239, 239, .64); --grey: #d6d6d6; --gray: var(--grey); --black: #292f36; --pure-black: #131313; --pure-black-alpha: rgba(19, 19, 19, .64); --pure-black-alpha-light: rgba(19, 19, 19, .24); --pure-black-alpha-transparent: rgba(19, 19, 19, .12); --primary: #d63c6b; --primary-dk: #c41c4f; --accent: #5cc8ff; --accent-dk: #00a3f5; --transition: 300ms; --easing: cubic-bezier(1, 1, 1, 1); -- Easing -bounce-in: cubic-bezier(0, 0,.43, 1.3); -- Easing -bounce-out: cubic-bezier(.43, 1.3, 0, 0); font-size: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } *, *:before, *:after { box-sizing: border-box; } html, body { position: relative; width: 100%; height: 100%; background-image: linear-gradient(to bottom right, var(--accent) 0%, var(--primary) 100%); background-repeat: no-repeat; background-attachment: fixed; } body { padding-top: 20px; user-select: none; } button { outline: none; border: 0; padding: 1rem; background-color: var(--black); The font - size: 1.25 rem; line-height: 1; color: var(--accent); transition: all var(--transition) var(--easing); } button:hover { color: var(--accent-dk); } button.block { width: 100%; } button.transparent { background-color: transparent; } button.no-padding { padding: 0; } button.long-text { font-size: 1rem; } .react-calculator { position: relative; margin: 0 auto; width: 320px; box-shadow: 0 19px 38px var(--pure-black-alpha-light), 0 15px 12px var(--pure-black-alpha-transparent); } body::-webkit-scrollbar, .editable-field::-webkit-scrollbar, .memory-bank::-webkit-scrollbar { width: .5rem; } body::-webkit-scrollbar:horizontal, .editable-field::-webkit-scrollbar:horizontal, .memory-bank::-webkit-scrollbar:horizontal { height: .5rem; } body::-webkit-scrollbar-track, body::-webkit-scrollbar:horizontal, .editable-field::-webkit-scrollbar-track, .editable-field::-webkit-scrollbar:horizontal, .memory-bank::-webkit-scrollbar-track, .memory-bank::-webkit-scrollbar:horizontal { background-color: var(--pure-black); } body::-webkit-scrollbar-thumb, body::-webkit-scrollbar:horizontal, .editable-field::-webkit-scrollbar-thumb, .editable-field::-webkit-scrollbar:horizontal, .memory-bank::-webkit-scrollbar-thumb, .memory-bank::-webkit-scrollbar:horizontal { background-color: var(--primary); } s body:hover::-webkit-scrollbar-thumb, s body:hover::-webkit-scrollbar:horizontal, s .editable-field:hover::-webkit-scrollbar-thumb, s .editable-field:hover::-webkit-scrollbar:horizontal, s .memory-bank:hover::-webkit-scrollbar-thumb, s .memory-bank:hover::-webkit-scrollbar:horizontal { background-color: var(--primary-dk); } .editable-field { position: relative; width: 320px; height: 80px; z-index: 10; outline: none; box-shadow: 0 4px 2px -2px var(--pure-black-alpha); padding: .5rem; overflow-y: hidden; overflow-x: scroll; background-color: var(--pure-black-alpha); font-size: 2rem; line-height: 2; color: var(--primary); text-align: right; direction: rtl; white-space: nowrap; } .memory-bank { position: absolute; top: 80px; left: 0; z-index: 10; width: 100%; height: 0; overflow: hidden; padding: 0; background-color: var(--pure-black-alpha); color: var(--accent-dk); transition: height 150ms var(--easing), overflow 1ms var(--easing) 200ms, padding 1ms var(--easing) 200ms; } .memory-bank .toggle-close { position: absolute; top: 5px; right: 5px; padding: 2px 5px; } .memory-bank .toggle-close .title { display: inline-block; transform: rotate(45deg); } .memory-bank.visible { height: calc(100% - 80px); padding: 10px; overflow-y: auto; transition: height 200ms var(--easing), padding 1ms var(--easing); } .button-set--functions, .button-set--equations { background-color: var(--black); } .button-set--functions button, .button-set--equations button { display: inline-block; width: 80px; height: 80px; vertical-align: top; text-transform: uppercase; font-variant: small-caps; color: var(--primary); } .button-set--functions button:hover, .button-set--equations button:hover { color: var(--primary-dk); } .button-set--numbers { width: 240px; float: left; background-color: var(--black); } .button-set--numbers button { display: block; position: relative; width: 80px; height: 80px; float: left; background-color: var(--black); transition: box-shadow var(--transition) var(--easing); } .button-set--numbers button:last-child { width: 100%; } .button-set--functions { clear: left; float: left; width: 240px; }Copy the code

HTML code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Calculator</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src='js/react.min.js'></script> <script src='js/EventEmitter.min.js'></script> <script src="js/script.js"></script> </body> </html>Copy the code

The other CSS styles and JS above need to be introduced to run

The source code for

View the main page of the blogger to obtain

Wonderful recommendation update:

Clocked articles updated 39/100 days

You can like, like, follow, comment on me,