2 task done

lizaklimova · Sep 24, 2023 · 24c6c2c · 24c6c2c
1 parent 503b06e
commit 24c6c2c
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
   },
   "dependencies": {
     "flatpickr": "^4.6.13",
-    "modern-normalize": "^1.1.0"
+    "modern-normalize": "^1.1.0",
+    "notiflix": "^3.2.6"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.6.0",

diff --git a/src/02-timer.html b/src/02-timer.html
@@ -6,6 +6,7 @@
     <title>Countdown timer</title>
     <link rel="stylesheet" href="css/common.css" />
     <link rel="stylesheet" href="css/flatpicker.css" />
+    <!-- <link rel="stylesheet" href="dist/notiflix-3.2.6.min.css" /> -->
   </head>
   <body>
     <p><a href="index.html">Go back</a></p>

diff --git a/src/js/02-timer.js b/src/js/02-timer.js
@@ -1,3 +1,4 @@
+import Notiflix from 'notiflix';
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 
@@ -12,9 +13,13 @@ const refs = {
 refs.btnRef.disabled = true;
 refs.btnRef.addEventListener('click', onStartClick);
 
+//к-ть мс, які обирає юзер
 let selectedMs = 0;
+//різниця між обраним часом користувача і теперешнім(мс)
 let userDate = 0;
+//айді інтервала
 let startId;
+//переформатований обʼєкт {days: 09...}
 let padStartedTime;
 
 const options = {
@@ -26,7 +31,9 @@ const options = {
   onClose(selectedDates) {
     selectedMs = new Date(selectedDates[0]).getTime();
     if (new Date() > selectedMs) {
-      alert('Please choose a date in the future');
+      Notiflix.Notify.failure('Please choose a date in the future', {
+        timeout: 3000,
+      });
     } else {
       refs.btnRef.disabled = false;
     }
@@ -40,21 +47,33 @@ function onStartClick() {
     userDate = selectedMs - new Date();
 
     padStartedTime = addLeadingZero(userDate);
+
+    if (
+      Number(padStartedTime.days) <= 0 &&
+      Number(padStartedTime.hours) <= 0 &&
+      Number(padStartedTime.minutes) <= 0 &&
+      Number(padStartedTime.seconds) <= 0
+    ) {
+      Notiflix.Notify.info('Time is over!!!', { timeout: 3000 });
+      clearInterval(startId);
+    }
+
     refs.days.textContent = padStartedTime.days;
     refs.hours.textContent = padStartedTime.hours;
     refs.minutes.textContent = padStartedTime.minutes;
     refs.seconds.textContent = padStartedTime.seconds;
-    if (userDate <= 0) {
-      clearInterval(startId);
-    }
   }, 1000);
 }
 
 function addLeadingZero(value) {
+  //скільки днів, год, с, мс в заг. к-ті мс юзера
   const convertedMs = convertMs(value);
+
+  //перебираємо ключі обʼєкта, щоб до значень з 1 символом додати 0
   Object.keys(convertedMs).forEach(key => {
     convertedMs[key] = convertedMs[key].toString().padStart(2, '0');
   });
+
   return convertedMs;
 }
 

diff --git a/src/js/03-promises.js b/src/js/03-promises.js
@@ -1,8 +1,42 @@
+const formRef = document.querySelector('.form');
+
+let counter;
+formRef.addEventListener('submit', createPromise);
+formRef.addEventListener('submit', preventDefault);
+
 function createPromise(position, delay) {
+
   const shouldResolve = Math.random() > 0.3;
-  if (shouldResolve) {
-    // Fulfill
-  } else {
-    // Reject
-  }
+
+  const delayValue = formRef.elements.delay.value;
+  const stepValue = formRef.elements.delay.step;
+  const amountValue = formRef.elements.delay.amount;
+
+  const id = setInterval(() => {
+
+    if (position === amountValue) {
+      clearInterval(id);
+    }
+
+
+    if (shouldResolve) {
+      return Promise.resolve({ position, delay });
+    } else {
+      return Promise.reject({ position, delay });
+    }
+  }, (delay - stepValue) += stepValue);
+
+  return id;
+}
+
+createPromise(2, 1500)
+  .then(({ position, delay }) => {
+    console.log(`✅ Fulfilled promise ${position} in ${delay}ms`);
+  })
+  .catch(({ position, delay }) => {
+    console.log(`❌ Rejected promise ${position} in ${delay}ms`);
+  });
+
+function preventDefault(event) {
+  event.preventDefault();
 }