From 601a5ef151482ee52ec3db4ce81d2051c3faa2de Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 15 Oct 2020 11:23:13 -0400 Subject: [PATCH] Good, cheap, fast checkboxes --- good-cheap-fast/index.html | 36 +++++++++++++++++ good-cheap-fast/script.js | 22 ++++++++++ good-cheap-fast/style.css | 83 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 good-cheap-fast/index.html create mode 100644 good-cheap-fast/script.js create mode 100644 good-cheap-fast/style.css diff --git a/good-cheap-fast/index.html b/good-cheap-fast/index.html new file mode 100644 index 0000000..2be481c --- /dev/null +++ b/good-cheap-fast/index.html @@ -0,0 +1,36 @@ + + + + + + + Good, Cheap, Fast + + +

How do you want your project to be?

+
+ + + Good +
+ +
+ + + Cheap +
+ +
+ + + Fast +
+ + + diff --git a/good-cheap-fast/script.js b/good-cheap-fast/script.js new file mode 100644 index 0000000..622600e --- /dev/null +++ b/good-cheap-fast/script.js @@ -0,0 +1,22 @@ +const toggles = document.querySelectorAll('.toggle') +const good = document.querySelector('#good') +const cheap = document.querySelector('#cheap') +const fast = document.querySelector('#fast') + +toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target))) + +function doTheTrick(theClickedOne) { + if(good.checked && cheap.checked && fast.checked) { + if(good === theClickedOne) { + fast.checked = false + } + + if(cheap === theClickedOne) { + good.checked = false + } + + if(fast === theClickedOne) { + cheap.checked = false + } + } +} \ No newline at end of file diff --git a/good-cheap-fast/style.css b/good-cheap-fast/style.css new file mode 100644 index 0000000..32ced37 --- /dev/null +++ b/good-cheap-fast/style.css @@ -0,0 +1,83 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.toggle-container { + display: flex; + align-items: center; + margin: 10px 0; + width: 200px; +} + +.toggle { + visibility: hidden; +} + +.label { + position: relative; + background-color: #d0d0d0; + border-radius: 50px; + cursor: pointer; + display: inline-block; + margin: 0 15px 0; + width: 80px; + height: 40px; +} + +.toggle:checked + .label { + background-color: #8e44ad; +} + +.ball { + background: #fff; + height: 34px; + width: 34px; + border-radius: 50%; + position: absolute; + top: 3px; + left: 3px; + align-items: center; + justify-content: center; + animation: slideOff 0.3s linear forwards; +} + +.toggle:checked + .label .ball { + animation: slideOn 0.3s linear forwards; +} + +@keyframes slideOn { + 0% { + transform: translateX(0) scale(1); + } + 50% { + transform: translateX(20px) scale(1.2); + } + 100% { + transform: translateX(40px) scale(1); + } +} + +@keyframes slideOff { + 0% { + transform: translateX(40px) scale(1); + } + 50% { + transform: translateX(20px) scale(1.2); + } + 100% { + transform: translateX(0) scale(1); + } +}