| .calculator#calc | |
| .toggle | |
| .theme-switch-wrapper | |
| %label.theme-switch(for='checkbox') | |
| %input(type='checkbox' id='checkbox') | |
| .slider.round | |
| .display | |
| %span.c.neumorphic C | |
| %span.signed.neumorphic +/- | |
| %span.percent.neumorphic % | |
| %span.divide.neumorphic ÷ | |
| %span.seven.neumorphic 7 | |
| %span.eight.neumorphic 8 | |
| %span.nine.neumorphic 9 | |
| %span.times.neumorphic x | |
| %span.four.neumorphic 4 | |
| %span.five.neumorphic 5 | |
| %span.six.neumorphic 6 | |
| %span.minus.neumorphic - | |
| %span.one.neumorphic 1 | |
| %span.two.neumorphic 2 | |
| %span.three.neumorphic 3 | |
| %span.plus.neumorphic + | |
| %span.zero.neumorphic 0 | |
| %span.decimal.neumorphic . | |
| %span.equals.neumorphic = |
I wanted to jump on the neumorphic bandwagon, so here is a light and dark neumorphic themed calculator for all your calculating needs!
Personally I love the dark. The light is just "too" light for me. It'd probably be okay on my phone, but it's hit or miss depending on my monitor.
Which one is your favorite?
A Pen by Alexandr Kovalenko on CodePen.
| var keys = document.querySelectorAll('#calc span'); | |
| var operators = ['+', '-', 'x', '÷']; | |
| var decimalAdded = false; | |
| for (var i = 0; i < keys.length; i++) { | |
| keys[i].onclick = function(e) { | |
| var input = document.querySelector('.display'); | |
| var inputVal = input.innerHTML; | |
| var btnVal = this.innerHTML; | |
| if (btnVal == 'C') { | |
| input.innerHTML = ''; | |
| decimalAdded = false; | |
| } else if (btnVal == '=') { | |
| var equation = inputVal; | |
| var lastChar = equation[equation.length - 1]; | |
| equation = equation.replace(/x/g, '*').replace(/÷/g, '/'); | |
| if (operators.indexOf(lastChar) > -1 || lastChar == '.') | |
| equation = equation.replace(/.$/, ''); | |
| if (equation) | |
| input.innerHTML = eval(equation); | |
| decimalAdded = false; | |
| } else if (operators.indexOf(btnVal) > -1) { | |
| var lastChar = inputVal[inputVal.length - 1]; | |
| if (inputVal != '' && operators.indexOf(lastChar) == -1) | |
| input.innerHTML += btnVal; | |
| else if (inputVal == '' && btnVal == '-') | |
| input.innerHTML += btnVal; | |
| if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) { | |
| input.innerHTML = inputVal.replace(/.$/, btnVal); | |
| } | |
| decimalAdded = false; | |
| } else if (btnVal == '.') { | |
| if (!decimalAdded) { | |
| input.innerHTML += btnVal; | |
| decimalAdded = true; | |
| } | |
| } else { | |
| input.innerHTML += btnVal; | |
| } | |
| // prevent page jumps | |
| e.preventDefault(); | |
| } | |
| } | |
| const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); | |
| function switchTheme(e) { | |
| if (e.target.checked) { | |
| document.documentElement.setAttribute('data-theme', 'dark'); | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'light'); | |
| } | |
| } | |
| toggleSwitch.addEventListener('change', switchTheme, false); |
| @import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap'); | |
| :root { | |
| --body-bg-color: #e0e5ec; | |
| --bg-color: #e0e5ec; | |
| --primary-font-color: rgba(144,152,168,1); | |
| --secondary-font-color: rgba(51,64,89,1); | |
| --soft-high-light: rgba(255,255,255,.43); | |
| --dark-high-light: rgba(217,210,200,.51); | |
| } | |
| [data-theme="dark"] { | |
| --bg-color: #131419; | |
| --primary-font-color: #c7c7c7; | |
| --secondary-font-color: #03a9f4; | |
| --soft-high-light: rgba(255,255,255,.05); | |
| --dark-high-light: rgba(0,0,0,.51); | |
| } | |
| @mixin neumorphic { | |
| box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light); | |
| } | |
| @mixin insetNeumorphic { | |
| box-shadow: inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light); | |
| } | |
| @mixin inOutNeumorphic { | |
| box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light),inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--body-bg-color); | |
| color: var(--primary-font-color); | |
| } | |
| .calculator { | |
| background: var(--bg-color); | |
| color: var(--primary-font-color); | |
| } | |
| .display { | |
| @include inOutNeumorphic; | |
| border: 5px solid var(--soft-high-light); | |
| color: var(--secondary-font-color); | |
| } | |
| .neumorphic { | |
| @include neumorphic; | |
| border-radius: 50%; | |
| transition: .1s all ease-in-out; | |
| border: 1px solid var(--soft-high-light); | |
| } | |
| .neumorphic:hover { | |
| @include insetNeumorphic; | |
| color: var(--secondary-font-color); | |
| } | |
| /* | |
| GRID LAYOUT & NON NEUMORPHIC | |
| */ | |
| body { | |
| display: grid; | |
| width: 100vw; | |
| height: 100vh; | |
| align-items: center; | |
| justify-items: center; | |
| font-family: 'Odibee Sans'; | |
| font-size: 16px; | |
| } | |
| .display { | |
| border-radius: 12px; | |
| transition: .1s all ease-in-out; | |
| height: 60px; | |
| line-height: 60px; | |
| text-align: right; | |
| padding-right: 20px; | |
| width: 100%; | |
| font-size: 32px; | |
| letter-spacing: 4px; | |
| } | |
| .calculator { | |
| box-shadow: 0 0 16px rgba(0,0,0,.1); | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; | |
| grid-template-areas: "toggle toggle toggle toggle" "display display display display" "c signed percent divide" "seven eight nine times" "four five six minus" "one two three plus" "zero zero decimal equals"; | |
| align-items: center; | |
| justify-items: center; | |
| grid-row-gap: 25px; | |
| grid-column-gap: 25px; | |
| border-radius: 20px; | |
| padding: 50px 40px 40px 40px | |
| } | |
| .c, .signed, .percent, .divide, .seven, .eight, .nine, .times, .four, .five, .six, .minus, .one, .two, .three, .plus, .zero, .decimal, .equals { | |
| text-align: center; | |
| height: 60px; | |
| width: 60px; | |
| line-height: 60px; | |
| } | |
| .zero { | |
| width: 100%; | |
| border-radius: 12px; | |
| } | |
| .toggle { | |
| grid-area: toggle; | |
| } | |
| .display { grid-area: display; } | |
| .c { grid-area: c;} | |
| .signed { grid-area: signed;} | |
| .percent { grid-area: percent; } | |
| .divide { grid-area: divide; } | |
| .seven { grid-area: seven; } | |
| .eight { grid-area: eight; } | |
| .nine { grid-area: nine; } | |
| .times { grid-area: times; } | |
| .four { grid-area: four; } | |
| .five { grid-area: five; } | |
| .six { grid-area: six; } | |
| .minus { grid-area: minus; } | |
| .one { grid-area: one; } | |
| .two { grid-area: two; } | |
| .three { grid-area: three; } | |
| .plus { grid-area: plus; } | |
| .zero { grid-area: zero; } | |
| .decimal { grid-area: decimal; } | |
| .equals { grid-area: equals; } | |
| // Toggle CSS | |
| .toggle { | |
| width: 100%; | |
| } | |
| .theme-switch-wrapper { | |
| display: block; | |
| float: right; | |
| align-items: center; | |
| } | |
| .theme-switch { | |
| display: inline-block; | |
| height: 34px; | |
| position: relative; | |
| width: 60px; | |
| } | |
| .theme-switch input { | |
| display:none; | |
| } | |
| .slider { | |
| @include inOutNeumorphic; | |
| background-color: inherit; | |
| bottom: 0; | |
| cursor: pointer; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: .4s; | |
| border: 2px solid rgba(255,255,255,.2); | |
| } | |
| .slider:before { | |
| background-color: var(--bg-color); | |
| box-shadow: 0px 0px 5px rgba(0,0,0,.2); | |
| bottom: 4px; | |
| content: ""; | |
| height: 22px; | |
| left: 4px; | |
| position: absolute; | |
| transition: .4s; | |
| width: 22px; | |
| } | |
| input:checked + .slider { | |
| background-color: var(--bg-color); | |
| @include inOutNeumorphic; | |
| } | |
| input:checked + .slider:before { | |
| background-color: var(--secondary-font-color); | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| .slider.round { | |
| border-radius: 34px; | |
| } | |
| .slider.round:before { | |
| border-radius: 50%; | |
| } |