Merge branch 'main' of https://github.com/dasha-musienko/weather-fore…

…cast

README.md

@@ -1,99 +1,32 @@
-# Parcel template
+<h2 align="center">Weather Forecast</h2>
+<img src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/cover.jpeg" alt="Cover image">
+<h2>⚡️Goal</h2>
+<p>The primary goal of the Weather Forecast project is to create a visually appealing and highly functional weather forecasting platform that utilizes various technologies to deliver accurate and up-to-date weather information. By integrating WeatherAPI, Notlifix, and Chart.js, this project aims to offer a holistic weather forecasting experience to users, allowing them to access, visualize, and receive timely weather updates seamlessly.</p>
+<h2>🔥Features</h2>
+  <ul>
+    <li><strong>Real-time Weather Data: </strong>Weather Forecast harnesses the power of WeatherAPI to provide users with real-time weather information. Users can access data such as temperature, humidity, wind speed, and precipitation forecasts for any location worldwide.
+</li>
+    <li><strong>Sleek User Interface: </strong>The project boasts a modern and visually appealing design that makes it easy for users to navigate and access weather information effortlessly. The user interface is intuitive, ensuring a seamless user experience.</li>
+    <li><strong>Interactive Chart: </strong>Chart.js integration enables users to visualize weather data in the form of interactive charts and graphs. This feature allows users to track weather trends and patterns over time, aiding in a better understanding of weather conditions.</li>
+    <li><strong>Customized Notifications: </strong>Notlifix integration allows users to set up customized weather notifications. Users can receive alerts for specific weather conditions, such as rain, snow, or extreme temperatures, ensuring they stay prepared for any weather event.
+</li>
+    <li><strong>Multi-platform Accessibility: </strong> Weather Forecast is accessible on various devices, including desktops, tablets, and mobile phones, ensuring users can access weather information on the go.
+</li>
+    <li><strong>Search: </strong>The application features a robust search functionality, making it effortless for users to find weather information for any location.
+</li>
+  </ul>
+    <h2>🔗Link</h2>
+https://dasha-musienko.github.io/weather-forecast/
+  <h2>👩‍💻Techologies and Tools</h2>
+
+ <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/js.png"  />
+  <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/css.png"  />
+  <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/html.png"  />
+  <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/chart.png"  />
+  <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/weatherapi.png"  />
+  <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/figma.png"  />
+  <img align="left" height="70px" alt="Cover image" src="https://github.com/dasha-musienko/weather-forecast/blob/main/src/img/gh_descr/vscode.png"  />
+
+
+
 
-Этот проект был создан при помощи Parcel. Для знакомства и настройки
-дополнительных возможностей [обратись к документации](https://parceljs.org/).
-
-## Подготовка нового проекта
-
-1. Убедись что на компьютере установлена LTS-версия Node.js.
-   [Скачай и установи](https://nodejs.org/en/) её если необходимо.
-2. Склонируй этот репозиторий.
-3. Измени имя папки с `parcel-project-template` на имя своего проекта.
-4. Создай новый пустой репозиторий на GitHub.
-5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием
-   [по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url).
-6. Установи зависимости проекта в терминале командой `npm install` .
-7. Запусти режим разработки, выполнив команду `npm start`.
-8. Перейди в браузере по адресу [http://localhost:1234](http://localhost:1234).
-   Эта страница будет автоматически перезагружаться после сохранения изменений в
-   файлах проекта.
-
-## Файлы и папки
-
-- Все паршалы файлов стилей должны лежать в папке `src/sass` и импортироваться в
-  файлы стилей страниц. Например, для `index.html` файл стилей называется
-  `index.scss`.
-- Изображения добавляй в папку `src/images`. Сборщик оптимизирует их, но только
-  при деплое продакшн версии проекта. Все это происходит в облаке, чтобы не
-  нагружать твой компьютер, так как на слабых машинах это может занять много
-  времени.
-
-## Деплой
-
-Для настройки деплоя проекта необходимо выполнить несколько дополнительных шагов
-по настройке твоего репозитория. Зайди во вкладку `Settings` и в подсекции
-`Actions` выбери выбери пункт `General`.
-
-![GitHub actions settings](./assets/actions-config-step-1.png)
-
-Пролистай страницу до последней секции, в которой убедись что выбраны опции как
-на следующем изображении и нажми `Save`. Без этих настроек у сборки будет
-недостаточно прав для автоматизации процесса деплоя.
-
-![GitHub actions settings](./assets/actions-config-step-2.png)
-
-Продакшн версия проекта будет автоматически собираться и деплоиться на GitHub
-Pages, в ветку `gh-pages`, каждый раз когда обновляется ветка `main`. Например,
-после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле
-`package.json` отредактировать поле `homepage` и скрипт `build`, заменив
-`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub.
-
-```json
-"homepage": "https://your_username.github.io/your_repo_name/",
-"scripts": {
-  "build": "parcel build src/*.html --public-url /your_repo_name/"
-},
-```
-
-Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и
-выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если
-это небыло сделано автоматически.
-
-![GitHub Pages settings](./assets/repo-settings.png)
-
-### Статус деплоя
-
-Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.
-
-- **Желтый цвет** - выполняется сборка и деплой проекта.
-- **Зеленый цвет** - деплой завершился успешно.
-- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка.
-
-Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в
-выпадающем окне перейти по ссылке `Details`.
-
-![Deployment status](./assets/status.png)
-
-### Живая страница
-
-Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть
-по адресу указанному в отредактированном свойстве `homepage`. Например, вот
-ссылка на живую версию для этого репозитория
-[https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template).
-
-Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок
-связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее
-всего у тебя неправильное значение свойства `homepage` или скрипта `build` в
-файле `package.json`.
-
-## Как это работает
-
-![How it works](./assets/how-it-works.png)
-
-1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный
-   скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`.
-2. Все файлы репозитория копируются на сервер, где проект инициализируется и
-   проходит сборку перед деплоем.
-3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта
-   отправляется в ветку `gh-pages`. В противном случае, в логе выполнения
-   скрипта будет указано в чем проблема.