From 62520df89d3323b008921afc55c1420d6ca2ba03 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Fri, 21 Jan 2022 22:27:03 -0300 Subject: [PATCH] Styles added --- index.html | 24 +++++-- script.js | 25 +++++--- styles.css | 106 +++++++++++++++++++++++++++++++ styles.css.map | 2 +- styles.sass | 0 styles.scss | 168 +++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 308 insertions(+), 17 deletions(-) delete mode 100644 styles.sass create mode 100644 styles.scss diff --git a/index.html b/index.html index 7f76c59..a919b62 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,30 @@ - JavaScript counter + Javascript Counter + +
+
+

Vanilla JavaScript Counter

+
+
+
- - - - +
+ + +
+
+ + +
-
+ +
diff --git a/script.js b/script.js index eaf83af..f28c9d0 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,4 @@ -function counter(number, seconds, e) { +function counter(number, seconds, e, button) { e.preventDefault() @@ -6,16 +6,15 @@ function counter(number, seconds, e) { const counterElement = document.getElementById('counter-element') let counterNumber = 0 - counterElement.innerText = counterNumber - const button = document.getElementById("form-button") - + button.disabled = true + function setTimeOutFunction() { - counterElement.innerText = counterNumber counterNumber++ + counterElement.innerText = counterNumber - if (counterNumber <= number) { + if (counterNumber < number) { button.disabled = true setTimeout(setTimeOutFunction, seconds) @@ -37,14 +36,20 @@ window.onload = () => { const counterElement = document.getElementById('counter-element') counterElement.innerText = 0 - + const buttonFunction = (e) => { const formElement = document.getElementById('form') - const thingToCount = formElement.children[1].value - const seconds = formElement.children[3].value + const thingToCount = formElement.children[0].children[1].value + const seconds = formElement.children[1].children[1].value - counter(thingToCount, seconds, e) + if (!thingToCount || !seconds) { + + alert('Fill all inputs!') + return + } + + counter(thingToCount, seconds, e, button) } button.addEventListener("click", buttonFunction) diff --git a/styles.css b/styles.css index c6386fc..c4566b3 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,109 @@ +* { + padding: 0; + margin: 0; +} +html { + height: 100%; +} + +body { + background: #ee3172; + background: linear-gradient(135deg, #ee3172 0%, #1079d1 82%); + height: 100%; + font-family: Helvetica, sans-serif; +} + +.header-container { + display: flex; + justify-content: center; +} +.header-container header { + width: 60%; + padding: 3vh 0px; + display: flex; + justify-content: center; + border-bottom: 2px solid #fff; + margin-bottom: 5vh; +} +.header-container header h1 { + color: #fff; + user-select: none; +} + +form { + display: flex; + flex-direction: column; + align-items: center; + padding: 0px 0px 5vh 0px; +} +form .input-container { + display: flex; + flex-direction: column; + width: 20vw; + margin-bottom: 2vh; +} +form .input-container label { + color: #fff; + margin-bottom: 0.5vh; +} +form .input-container input { + border: none; + border-bottom: 1px solid #fff; + background: none; + outline: none; + color: #fff; +} +form .input-container input::placeholder { + color: rgba(255, 255, 255, 0.685); +} +form button { + width: 20vw; + height: 5vh; + box-sizing: border-box; + border: none; + border: 2px solid rgba(255, 255, 255, 0.699); + border-radius: 15px; + font-weight: bold; + color: #fff; + background: rgba(255, 255, 255, 0.1); + transition: 0.3s ease-in-out; + user-select: none; +} +form button:hover { + background: rgba(255, 255, 255, 0.4); + transition: 0.3s ease-in-out; +} +form button:disabled { + opacity: 20%; + transition: 0.3s ease-in-out; +} +form button:disabled:hover { + background: rgba(255, 255, 255, 0.1); +} + +.counter-element-container { + display: flex; + flex-direction: column; + align-items: center; +} +.counter-element-container #counter-element { + color: #fff; + font-weight: bold; + font-size: 45pt; +} + +@media (max-width: 768px) { + .header-container header { + width: 100%; + } + + form .input-container { + width: 80vw; + } + form button { + width: 80vw; + } +} /*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map index ccb6cbc..487a502 100644 --- a/styles.css.map +++ b/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EAEI;EACA;;;AAGJ;EAEI;;;AAGJ;EACI;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;;;AAKZ;EAEI;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;;AAOZ;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EAEI;EAEA;;AAGJ;EAEI;EACA;;AAEA;EAEI;;;AAMhB;EAEI;EACA;EAEA;;AAEA;EAEI;EACA;EACA;;;AAIR;EAIQ;IAEI;;;EAMJ;IAEI;;EAGJ;IAEI","file":"styles.css"} \ No newline at end of file diff --git a/styles.sass b/styles.sass deleted file mode 100644 index e69de29..0000000 diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..1e3a193 --- /dev/null +++ b/styles.scss @@ -0,0 +1,168 @@ +* { + + padding: 0; + margin: 0; +} + +html { + + height: 100%; +} + +body { + background: rgb(238,49,114); + background: linear-gradient(135deg, rgba(238,49,114,1) 0%, rgba(16,121,209,1) 82%); + + height: 100%; + + font-family:Helvetica, sans-serif; +} + +.header-container { + + display: flex; + justify-content: center; + + header { + + width: 60%; + padding: 3vh 0px; + + display: flex; + justify-content: center; + + border-bottom: 2px solid #fff; + + margin-bottom: 5vh; + + h1 { + + color: #fff; + + user-select: none; + } + } +} + +form { + + display: flex; + flex-direction: column; + + align-items: center; + + padding: 0px 0px 5vh 0px; + + .input-container { + + display: flex; + flex-direction: column; + + width: 20vw; + + margin-bottom: 2vh; + + label { + + color: #fff; + + margin-bottom: 0.5vh; + } + + input { + + border: none; + border-bottom: 1px solid #fff; + + background: none; + outline: none; + + color: #fff; + + &::placeholder { + + color: rgba(255, 255, 255, 0.685); + } + + } + + } + + button { + + width: 20vw; + height: 5vh; + + box-sizing: border-box; + + border: none; + border: 2px solid rgba(255, 255, 255, 0.699); + border-radius: 15px; + + font-weight: bold; + color: #fff; + + background: rgb(255, 255, 255, 0.1); + + transition: 0.3s ease-in-out; + + user-select: none; + + &:hover { + + background: rgb(255, 255, 255, 0.4); + + transition: 0.3s ease-in-out; + } + + &:disabled { + + opacity: 20%; + transition: 0.3s ease-in-out; + + &:hover { + + background: rgb(255, 255, 255, 0.1); + } + } + } +} + +.counter-element-container { + + display: flex; + flex-direction: column; + + align-items: center; + + #counter-element { + + color: #fff; + font-weight: bold; + font-size: 45pt; + } +} + +@media (max-width: 768px) { + + .header-container { + + header { + + width: 100%; + } + } + + form { + + .input-container { + + width: 80vw; + } + + button { + + width: 80vw; + } + } +} \ No newline at end of file