diff --git a/dark-light-theme-toggle.js b/dark-light-theme-toggle.js new file mode 100644 index 0000000..6a3810a --- /dev/null +++ b/dark-light-theme-toggle.js @@ -0,0 +1,11 @@ +let themeToggle = document.getElementById('themeToggle'); + +themeToggle.addEventListener('change', () => { + let lightThemeEnabled = document.body.classList.toggle('light-theme'); + localStorage.setItem('light-theme-enadled', lightThemeEnabled); +}); + +if (JSON.parse(localStorage.getItem('light-theme-enadled'))) { + document.body.classList.add('light-theme'); + themeToggle.setAttribute('checked', 'checked'); +} diff --git a/index.html b/index.html index ad6a11b..f3b8af7 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,13 @@ + +
+ + +
+

JavaScript Calculator

Don't divide by Zero.

@@ -48,7 +54,8 @@

JavaScript Calculator

+ - \ No newline at end of file + diff --git a/style.css b/style.css index f1aa568..85b3e8d 100644 --- a/style.css +++ b/style.css @@ -34,10 +34,13 @@ h1 { margin: 0 auto; width: 10em; } -.calculator::before, .calculator::after { + +.calculator::before, +.calculator::after { content: " "; display: table; } + .calculator::after { clear: both; } @@ -72,13 +75,16 @@ button { height: 2em; transition: all 0.5s; } + button:hover { background: #201e40; } + button:focus { outline: 0; /* The value fade-ins that appear */ } + button:focus::after { animation: zoom 1s; animation-iteration-count: 1; @@ -123,15 +129,95 @@ button:focus::after { height: auto; /* When button is revealed */ } + .reset:hover { background: #c97874; color: #100a1c; } + .reset.show { top: 20em; animation: fadein 4s; } +/* Light mode theme colors and switcher */ +.light-theme { + background: #423e4d; + background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3); + background: linear-gradient(to right, #E9E4F0, #D3CCE3); +} + +.light-theme h1, +.light-theme button { + color: #5a5569; +} + +.light-theme button:hover { + background-color: #423e4d; + color: #D3CCE3; +} + +.light-theme button.equals { + color: #5a5569; +} + +/* Styles for dark-light mode switcher */ +.toggle-container { + position: absolute; + top: 45px; + right: 45px; +} + +input[type=checkbox] { + height: 0; + width: 0; + visibility: hidden; +} + +label { + background: #6cacc5; + position: relative; + width: 65px; + height: 32px; + text-indent: -9999px; + float: right; + border-radius: 20px; + cursor: pointer; +} + +label:after { + content: ''; + position: absolute; + top: 3px; + left: 4px; + width: 26px; + height: 26px; + background: white; + border-radius: 90px; + transition: 0.3s; +} + +input:checked+label { + background: #5a5569; +} + +input:checked+label:after { + left: calc(100% - 5px); + transform: translateX(-100%); +} + +label:active:after { + width: 56px; +} + +html.transition, +html.transition *, +html.transition *:before, +html.transition *:after { + transition: all 750ms !important; + transition-delay: 0 !important; +} + /* Animations */ /* Values that appear onclick */ @keyframes zoom { @@ -139,58 +225,73 @@ button:focus::after { transform: scale(0.2); opacity: 1; } + 70% { transform: scale(1); } + 100% { opacity: 0; } } + /* Division by zero animation */ @keyframes broken { 0% { transform: translate3d(0, 0, 0); opacity: 1; } + 5% { transform: rotate(5deg); } + 15% { transform: rotate(-5deg); } + 20% { transform: rotate(5deg); } + 25% { transform: rotate(-5deg); } + 50% { transform: rotate(45deg); } + 70% { transform: translate3d(0, 2000px, 0); opacity: 1; } + 75% { opacity: 0; } + 100% { transform: translate3d(0, -2000px, 0); } } + /* Reset button fadein */ @keyframes fadein { 0% { top: 20em; opacity: 0; } + 50% { opacity: 0; } + 100% { opacity: 1; } } + @media (min-width: 420px) { .calculator { width: 12em; diff --git a/style.scss b/style.scss index cbf1341..58f2b78 100644 --- a/style.scss +++ b/style.scss @@ -1,231 +1,341 @@ html { - background: #100a1c; - background-image: - radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0,0,0,0) 100%), - radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%); - background-attachment: fixed; - color: #6cacc5; - } - - body { - color: #6cacc5; - font: 300 18px/1.6 "Source Sans Pro",sans-serif; - margin: 0; - padding: 5em 0 2em; - text-align: center; - } - - h1 { - font-weight: 300; - margin: 0; - } - - /* Gradient text only on Webkit */ - .warning { - background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - color: #8c5059; - font-weight: 400; - margin: 0 auto 6em; - max-width: 9em; - } - - .calculator { - font-size: 28px; - margin: 0 auto; - width: 10em; - - &::before, - &::after { - content: " "; - display: table; - } - + background: #100a1c; + background-image: + radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), + radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%); + background-attachment: fixed; + color: #6cacc5; +} + +body { + color: #6cacc5; + font: 300 18px/1.6 "Source Sans Pro", sans-serif; + margin: 0; + padding: 5em 0 2em; + text-align: center; +} + +h1 { + font-weight: 300; + margin: 0; +} + +/* Gradient text only on Webkit */ +.warning { + background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: #8c5059; + font-weight: 400; + margin: 0 auto 6em; + max-width: 9em; +} + +.calculator { + font-size: 28px; + margin: 0 auto; + width: 10em; + + &::before, + &::after { + content: " "; + display: table; + } + + &::after { + clear: both; + } +} + +/* Calculator after dividing by zero */ +.broken { + animation: broken 2s; + transform: translate3d(0, -2000px, 0); + opacity: 0; +} + +.viewer { + color: #c97874; + float: left; + line-height: 3em; + text-align: right; + text-overflow: ellipsis; + overflow: hidden; + width: 7.5em; + height: 3em; +} + +button { + border: 0; + background: rgba(42, 50, 113, .28); + color: #6cacc5; + cursor: pointer; + float: left; + font: inherit; + margin: 0.25em; + width: 2em; + height: 2em; + transition: all 0.5s; + + &:hover { + background: #201e40; + } + + &:focus { + outline: 0; // Better check accessibility + + /* The value fade-ins that appear */ &::after { - clear: both; + animation: zoom 1s; + animation-iteration-count: 1; + animation-fill-mode: both; // Fix Firefox from firing animations only once + content: attr(data-num); + cursor: default; + font-size: 100px; + position: absolute; + top: 1.5em; + left: 50%; + text-align: center; + margin-left: -24px; + opacity: 0; + width: 48px; } } - - /* Calculator after dividing by zero */ - .broken { - animation: broken 2s; - transform: translate3d(0,-2000px,0); - opacity: 0; +} + +/* Same as above, modified for operators */ +.ops:focus::after { + content: attr(data-ops); + margin-left: -210px; + width: 420px; +} + +/* Same as above, modified for result */ +.equals:focus::after { + content: attr(data-result); + margin-left: -300px; + width: 600px; +} + +/* Reset button */ + +.reset { + background: rgba(201, 120, 116, .28); + color: #c97874; + font-weight: 400; + margin-left: -77px; + padding: 0.5em 1em; + position: absolute; + top: -20em; + left: 50%; + width: auto; + height: auto; + + &:hover { + background: #c97874; + color: #100a1c; } - - .viewer { - color: #c97874; - float: left; - line-height: 3em; - text-align: right; - text-overflow: ellipsis; - overflow: hidden; - width: 7.5em; - height: 3em; - } - + + /* When button is revealed */ + &.show { + top: 20em; + animation: fadein 4s; + } +} + +/* Light mode theme colors and switcher */ +.light-theme { + background: #D3CCE3; + background-image: radial-gradient(50% 30% ellipse at center top, #eee9f5 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 50% ellipse at center bottom, #d8bfff 0%, #D3CCE3 100%); + + h1 { + color: #5a5569; + } + button { - border: 0; - background: rgba(42,50,113, .28); - color: #6cacc5; - cursor: pointer; - float: left; - font: inherit; - margin: 0.25em; - width: 2em; - height: 2em; - transition: all 0.5s; - + color: #5a5569; + &:hover { - background: #201e40; - } - - &:focus { - outline: 0; // Better check accessibility - - /* The value fade-ins that appear */ - &::after { - animation: zoom 1s; - animation-iteration-count: 1; - animation-fill-mode: both; // Fix Firefox from firing animations only once - content: attr(data-num); - cursor: default; - font-size: 100px; - position: absolute; - top: 1.5em; - left: 50%; - text-align: center; - margin-left: -24px; - opacity: 0; - width: 48px; - } + background-color: #423e4d; + color: #D3CCE3; } } - - /* Same as above, modified for operators */ - .ops:focus::after { - content: attr(data-ops); - margin-left: -210px; - width: 420px; - } - - /* Same as above, modified for result */ - .equals:focus::after { - content: attr(data-result); - margin-left: -300px; - width: 600px; - } - - /* Reset button */ - - .reset { - background: rgba(201,120,116,.28); - color:#c97874; - font-weight: 400; - margin-left: -77px; - padding: 0.5em 1em; - position: absolute; - top: -20em; - left: 50%; - width: auto; - height: auto; - +} + +/* Styles for dark-light theme switcher */ +.light-theme { + background: #423e4d; + background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3); + background: linear-gradient(to right, #E9E4F0, #D3CCE3); + + h1 { + color: #5a5569; + } + + button { + color: #5a5569; + &:hover { - background: #c97874; - color: #100a1c; + background-color: #423e4d; + color: #D3CCE3; } - - /* When button is revealed */ - &.show { - top: 20em; - animation: fadein 4s; + + &.equals { + color: #5a5569; } } - - /* Animations */ - - /* Values that appear onclick */ - @keyframes zoom { - 0% { - transform: scale(.2); - opacity: 1; - } - - 70% { - transform: scale(1); - } - - 100% { - opacity: 0; - } +} + +/* Styles for dark-light mode switcher */ +.toggle-container { + position: absolute; + top: 45px; + right: 45px; +} + +input[type=checkbox] { + height: 0; + width: 0; + visibility: hidden; +} + +label { + background: #6cacc5; + position: relative; + width: 65px; + height: 32px; + text-indent: -9999px; + float: right; + border-radius: 20px; + cursor: pointer; + + &:after { + content: ''; + position: absolute; + top: 3px; + left: 4px; + width: 26px; + height: 26px; + background: white; + border-radius: 90px; + transition: 0.3s; } - - /* Division by zero animation */ - @keyframes broken { - 0% { - transform: translate3d(0,0,0); - opacity: 1; - } - - 5% { - transform: rotate(5deg); - } - - 15% { - transform: rotate(-5deg); - } - - 20% { - transform: rotate(5deg); - } - - 25% { - transform: rotate(-5deg); - } - - 50% { - transform: rotate(45deg); - } - - 70% { - transform: translate3d(0,2000px,0); - opacity: 1; - } - - 75% { - opacity: 0; - } - - 100% { - transform: translate3d(0,-2000px,0); - } +} + +input:checked+label { + background: #5a5569; + + &:after { + left: calc(100% - 5px); + transform: translateX(-100%); } - - /* Reset button fadein */ - @keyframes fadein { - 0% { - top: 20em; - opacity: 0; - } - - 50% { - opacity: 0; - } - - 100% { - opacity: 1; +} + +label:active:after { + width: 56px; +} + +html.transition { + transition: all 750ms !important; + transition-delay: 0 !important; + + * { + transition: all 750ms !important; + transition-delay: 0 !important; + + &:before, + &:after { + transition: all 750ms !important; + transition-delay: 0 !important; } } - - @media (min-width: 420px) { - .calculator { - width: 12em; - } - .viewer { - width: 8.5em; - } - button { - margin: 0.5em; - } - } \ No newline at end of file +} + +/* Animations */ + +/* Values that appear onclick */ +@keyframes zoom { + 0% { + transform: scale(.2); + opacity: 1; + } + + 70% { + transform: scale(1); + } + + 100% { + opacity: 0; + } +} + +/* Division by zero animation */ +@keyframes broken { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + + 5% { + transform: rotate(5deg); + } + + 15% { + transform: rotate(-5deg); + } + + 20% { + transform: rotate(5deg); + } + + 25% { + transform: rotate(-5deg); + } + + 50% { + transform: rotate(45deg); + } + + 70% { + transform: translate3d(0, 2000px, 0); + opacity: 1; + } + + 75% { + opacity: 0; + } + + 100% { + transform: translate3d(0, -2000px, 0); + } +} + +/* Reset button fadein */ +@keyframes fadein { + 0% { + top: 20em; + opacity: 0; + } + + 50% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@media (min-width: 420px) { + .calculator { + width: 12em; + } + + .viewer { + width: 8.5em; + } + + button { + margin: 0.5em; + } +}