📘 JavaScript Homework 10 — Asynchronous JavaScript & Promises

This repository contains a complete implementation of Homework 10, focused on asynchronous JavaScript, timers, Promises, and working with third-party libraries in a modern Vite-based project.

---

🚀 Overview

JavaScript course is now two-thirds complete — great job! 💪 In Module 10, the focus shifts to understanding how JavaScript handles time, asynchronous operations, and Promise-based workflows.

This homework reinforces your understanding of:

• The difference between synchronous and asynchronous code
• Using timers (setTimeout, setInterval)
• What Promises are and how they work
• Promise states and lifecycle
• Handling fulfilled and rejected Promises
• Working with external libraries via NPM

It’s time to put theory into practice by building a countdown timer and a Promise generator with notifications.

---

📂 Project Structure

goit-js-hw-10/
├─ src/
│  ├─ js/
│  │  ├─ 01-timer.js
│  │  └─ 02-snackbar.js
│  ├─ pages/
│  │  ├─ 01-timer.html
│  │  └─ 02-snackbar.html
│  └─ styles.css
├─ public/
├─ dist/
├─ index.html
├─ package.json
├─ vite.config.js
└─ README.md

The project is built using Vite with ES Modules and follows a clean, modular structure.

---

🧩 Task 1 — Countdown Timer

Implemented in 01-timer.html and 01-timer.js.

The goal of this task is to create a countdown timer that counts down to a user-selected future date.

Key Features

• Date and time selection using flatpickr
• Validation to prevent selecting past dates
• Start button disabled until a valid future date is selected
• Countdown updates every second
• Timer stops automatically when time reaches zero

Libraries Used

import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

import iziToast from "izitoast";
import "izitoast/dist/css/iziToast.min.css";

Timer Logic

• User selects a date using flatpickr
• If the date is in the past, a notification is shown
• If the date is valid, the Start button becomes active
• On Start, the remaining time is calculated every second
• Time is displayed in DD:HH:MM:SS format
• Values are formatted with leading zeros

Mentor Checklist — Task 1

• flatpickr library is correctly connected
• iziToast is used instead of alert()
• Start button is disabled on page load
• Past dates are rejected with a notification
• Future dates enable the Start button
• Timer updates every second
• Timer stops at 00:00:00:00
• Time values are properly formatted

---

🧩 Task 2 — Promise Generator

Implemented in 02-snackbar.html and 02-snackbar.js.

This task focuses on creating Promises dynamically based on user input and handling their resolution or rejection with notifications.

Form Functionality

• User enters a delay value in milliseconds
• User selects Promise state: fulfilled or rejected
• On submit, a Promise is created
• The Promise resolves or rejects after the specified delay

Promise Handling

• If fulfilled: success notification is shown
• If rejected: error notification is shown
• Notification text includes the delay value

Notification Messages

✅ Fulfilled promise in ${delay}ms
❌ Rejected promise in ${delay}ms

Libraries Used

import iziToast from "izitoast";
import "izitoast/dist/css/iziToast.min.css";

Mentor Checklist — Task 2

• iziToast library is correctly connected
• Promise is created on form submission
• Delay value is taken from user input
• Promise state depends on selected radio button
• Notification appears after the specified delay
• Message content matches the task requirements

---

📌 Final Notes

This homework demonstrates a solid understanding of asynchronous JavaScript concepts, including timers, Promises, and real-world async workflows.

The project follows modern best practices using:

• ES Modules
• Vite bundler
• NPM package management
• Third-party libraries
• Clean and readable code structure

---

🔗 Links

• GitHub Repository: https://github.com/kutluhangil/goit-js-hw-10
• Live Demo (GitHub Pages): https://kutluhangil.github.io/goit-js-hw-10/