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