{"id":29511579,"url":"https://github.com/miro-wq/js-09","last_synced_at":"2025-07-16T10:37:22.439Z","repository":{"id":247469803,"uuid":"823160847","full_name":"Miro-wq/js-09","owner":"Miro-wq","description":"The project focus on asynchronous programming, timers, dates, promises, and API interactions.","archived":false,"fork":false,"pushed_at":"2025-04-11T21:03:36.000Z","size":1435,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T22:22:45.978Z","etag":null,"topics":["api-integration","asynchronous-programming","color-switcher","dates","javascript","promises","timers"],"latest_commit_sha":null,"homepage":"https://miro-wq.github.io/goit-js-hw-09/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Miro-wq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-02T14:11:04.000Z","updated_at":"2025-04-11T21:03:41.000Z","dependencies_parsed_at":"2025-01-28T05:43:36.698Z","dependency_job_id":"a1b17a88-faa0-45b8-993e-e9a3a0faabef","html_url":"https://github.com/Miro-wq/js-09","commit_stats":null,"previous_names":["miro-wq/goit-js-hw-09","miro-wq/js-09"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Miro-wq/js-09","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Miro-wq%2Fjs-09","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Miro-wq%2Fjs-09/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Miro-wq%2Fjs-09/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Miro-wq%2Fjs-09/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Miro-wq","download_url":"https://codeload.github.com/Miro-wq/js-09/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Miro-wq%2Fjs-09/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265503454,"owners_count":23778090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-integration","asynchronous-programming","color-switcher","dates","javascript","promises","timers"],"created_at":"2025-07-16T10:37:18.160Z","updated_at":"2025-07-16T10:37:22.416Z","avatar_url":"https://github.com/Miro-wq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Timer \u0026 Date\n\n## Description \n This repository contains solutions for the ninth task assignment of the JavaScript course. The tasks focus on asynchronous programming, timers, dates, promises, and API interactions.\n - 01-color-switcher/: Implements a color switcher that changes the background color at set intervals.\n - 02-timer/: Features a countdown timer to a specified date.\n - 03-promises/: Demonstrates promise generation and handling.\n\n\n## Task 1 \n - color switcher\n\n\nIn HTML, there are \"Start\" and \"Stop\" buttons.\n\n```html\n\u003cbutton type=\"button\" data-start\u003eStart\u003c/button\u003e\n\u003cbutton type=\"button\" data-stop\u003eStop\u003c/button\u003e\n```\n\nWrite a script that, after clicking the \"Start\" button, changes the \u003cbody\u003e background color once a second to a random value using the inline style. When clicking on the \"Stop\" button, background color change must stop.\n\n\u003e [!IMPORTANT]  \n\u003e Please note that the «Start» button can be clicked an infinite number of times. Make sure that the «Start» button is disabled while the theme change is running.\n\nUse the `getRandomHexColor` function to generate a random color.\n\n```js\nfunction getRandomHexColor() {\n  return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, 0)}`;\n}\n```\n\n## Task 2 \n - countdown timer\n\n\nDo this task in the `02-timer.html` and `02-timer.js` files. Write a timer script that counts down to a specific date. Such a timer can be used in blogs and online stores, event-logging pages, during maintenance, etc. Watch a demo video of the timer.\n\n## Interface elements\n\nIn HTML, there is ready-made markup for the timer, end date selection field and a button that should trigger the timer when clicked. Add at least some decoration to the interface elements.\n\n```html\n\u003cinput type=\"text\" id=\"datetime-picker\" /\u003e\n\u003cbutton type=\"button\" data-start\u003eStart\u003c/button\u003e\n\n\u003cdiv class=\"timer\"\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003cspan class=\"value\" data-days\u003e00\u003c/span\u003e\n    \u003cspan class=\"label\"\u003eDays\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003cspan class=\"value\" data-hours\u003e00\u003c/span\u003e\n    \u003cspan class=\"label\"\u003eHours\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003cspan class=\"value\" data-minutes\u003e00\u003c/span\u003e\n    \u003cspan class=\"label\"\u003eMinutes\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003cspan class=\"value\" data-seconds\u003e00\u003c/span\u003e\n    \u003cspan class=\"label\"\u003eSeconds\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n`flatpickr` library\nUse the flatpickr library to allow cross-browser selection of the end date and time in a single UI element. In order to add the CSS code of the library to the project, you need to add one more import, aside from the one described in the documentation.\n\n```js\n// Described in documentation\nimport flatpickr from \"flatpickr\";\n// Additional styles import\nimport \"flatpickr/dist/flatpickr.min.css\";\n```\n\nThe library expects to be initialized on the `input[type=\"text\"]` element, so there is an `input#datetime-picker` field added to the HTML document.\n\n```html\n\u003cinput type=\"text\" id=\"datetime-picker\" /\u003e\n```\n\nAn optional parameter object can be passed as the second argument to the `flatpickr(selector, options)` function. We have prepared an object for you that you need to complete the task. Find about the role of each property in the Options documentation and use it in your code.\n\n```js\nconst options = {\n  enableTime: true,\n  time_24hr: true,\n  defaultDate: new Date(),\n  minuteIncrement: 1,\n  onClose(selectedDates) {\n    console.log(selectedDates[0]);\n  },\n};\n```\n\n## Date selection\n\nThe `onClose()` method is called from the parameter object every time the interface element that creates `flatpickr` is closed. It should be used to handle the date selected by the user. The `selectedDates` parameter is an array of the selected dates, so the first element is taken.\n\n- If the user selects a date from the past, show `window.alert()` with the text `\"Please choose a date in the future\"`.\n- If the user has selected a valid date (in the future), the \"Start\" button becomes active.\n- The \"Start\" button must be inactive until the user has selected a date in the future.\n- When you click the \"Start\" button, the countdown to the selected date starts from the time of clicking.\n\n## Countdown\n\nWhen you click on the \"Start\" button, the script must calculate once a second how much time is left until the specified date and update the timer interface, showing four numbers: days, hours, minutes and seconds in the following format: xx:xx:xx:xx.\n- The number of days can be more than two digits.\n- The timer must stop when it reaches the end date, that is, 00:00:00:00.\n\n\u003e [!NOTE]  \n\u003e If the timer is running, in order to select a new date and restart it, you need to reload the page.\n\nTo calculate the values, use the ready-made function, `convertMs`, where ms is the difference between the end and current date in milliseconds.\n\n```js\nfunction convertMs(ms) {\n  // Number of milliseconds per unit of time\n  const second = 1000;\n  const minute = second * 60;\n  const hour = minute * 60;\n  const day = hour * 24;\n\n  // Remaining days\n  const days = Math.floor(ms / day);\n  // Remaining hours\n  const hours = Math.floor((ms % day) / hour);\n  // Remaining minutes\n  const minutes = Math.floor(((ms % day) % hour) / minute);\n  // Remaining seconds\n  const seconds = Math.floor((((ms % day) % hour) % minute) / second);\n\n  return { days, hours, minutes, seconds };\n}\n\nconsole.log(convertMs(2000)); // {days: 0, hours: 0, minutes: 0, seconds: 2}\nconsole.log(convertMs(140000)); // {days: 0, hours: 0, minutes: 2, seconds: 20}\nconsole.log(convertMs(24140000)); // {days: 0, hours: 6 minutes: 42, seconds: 20}\n```\n\n## Time formatting\n\nThe `convertMs()` function returns an object with the calculated time remaining until the end date. Note that it does not format the result. That is, if there are 4 minutes (or any other time unit) left, the function will return 4, not 04. In the timer interface, you need to add 0 if there are less than two digits in the number. Write an `addLeadingZero(value)` function that uses the `padStart()` method and format the value before rendering the interface.\n\n\u003e [!IMPORTANT]  \n\u003e The following features are optional, but they will be a good additional practice.\n\nUse the notiflix library to display notifications to the user instead of `window.alert()`.\n\n## Task 3\n - promise generator\n\n\nDo this task in the `03-promises.html` and `03-promises.js` files.\n\nIn HTML, there is form markup; in its fields, the user will enter the first delay in milliseconds, the delay increment for each promise after the first one and the number of promises to be created.\n\n```html\n\u003cform class=\"form\"\u003e\n  \u003clabel\u003e\n    First delay (ms)\n    \u003cinput type=\"number\" name=\"delay\" required /\u003e\n  \u003c/label\u003e\n  \u003clabel\u003e\n    Delay step (ms)\n    \u003cinput type=\"number\" name=\"step\" required /\u003e\n  \u003c/label\u003e\n  \u003clabel\u003e\n    Amount\n    \u003cinput type=\"number\" name=\"amount\" required /\u003e\n  \u003c/label\u003e\n  \u003cbutton type=\"submit\"\u003eCreate promises\u003c/button\u003e\n\u003c/form\u003e\n```\n\nWrite a script that, when submitting the form, calls the `createPromise(position, delay)` function as many times as you entered in the `amount` field. On each call, pass it the number of the promise to be created `(position)` and the delay given the first delay `(delay)` and step `(step)` entered by the user.\n\n```js\nfunction createPromise(position, delay) {\n  const shouldResolve = Math.random() \u003e 0.3;\n  if (shouldResolve) {\n    // Fulfill\n  } else {\n    // Reject\n  }\n}\n```\nSupplement the code of the `createPromise` function so that it returns one promise that will be fulfilled or rejected after delay time. The value of the promise must be an object containing the position and delay properties with the values of these parameters. Use the initial function code to choose whether to fulfill or reject the promise.\n\n```js\ncreatePromise(2, 1500)\n  .then(({ position, delay }) =\u003e {\n    console.log(`✅ Fulfilled promise ${position} in ${delay}ms`);\n  })\n  .catch(({ position, delay }) =\u003e {\n    console.log(`❌ Rejected promise ${position} in ${delay}ms`);\n  });\n```\n\n## Notification library\n\n\u003e [!IMPORTANT]  \n\u003e The following features are optional, but they will be a good additional practice.\n\nUse the notiflix library to display notifications to the user instead of `console.log()`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiro-wq%2Fjs-09","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiro-wq%2Fjs-09","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiro-wq%2Fjs-09/lists"}