script.js - main - merulaalba/WeatherApp

script.js
88 строк3 KB
merulaalba
sprint-1 done
07 июн 2026, 17:43
07 июн 2026, 17:436d07aae
import { Attributes, Selectors } from "./scripts/constants.js";
import { data } from "./scripts/mock.js";
import { setWeatherValueInfo, setAttributeValue } from "./scripts/data.js";
import { weatherDetails, weatherDay, weatherWeek } from "./scripts/weatherData.js";
import { parseDateToISO } from "./scripts/time.js";
import { createCard } from "./scripts/card.js";
import { createSliderCard, createSliderButtons } from "./scripts/slider.js";
import { debounce} from "./scripts/helpers.js";

const search = document.getElementById("search-form");
const searchButton = search.querySelector(".search__button");
const input = search.querySelector(".search__input");
const template = document.getElementById("card-template");
const cardsList = document.getElementById("weather-list");
const cards = Object.entries(weatherDetails);

const logValue = debounce((value) => {
  console.log(value);
}, 500);

input.addEventListener("input", (evt) => {
  logValue(evt.target.value);
})

searchButton.addEventListener("click", (evt) => {
  input.value = "";
})

setWeatherValueInfo(Selectors.city, data.city);
setWeatherValueInfo(Selectors.today, data.today);
setAttributeValue(Selectors.time, data.time, Attributes.time);
parseDateToISO(data.today, Selectors.today);
setWeatherValueInfo(Selectors.temperature, data.temperature);
setWeatherValueInfo(Selectors.weather, data.weather);
setWeatherValueInfo(Selectors.feelTemperature, data.feelTemp);

cards.map(([key, { id, title, value, extra }]) => {
  createCard(template, cardsList, { id, title, value, extra });
});

const tabLinks = document.querySelectorAll(".tabs__link");
const tabContents = document.querySelectorAll(".tabs-content__pane");
const sliderTemplate = document.getElementById("tabs-template");

const tabsButtonsTemplate = document.getElementById("tabs-buttons-template");

tabLinks.forEach(link => {
  link.addEventListener("click", function (evt) {
    evt.preventDefault();

    tabLinks.forEach(item => item.classList.remove("active", "tabs__link--active"));
    tabContents.forEach(item => item.classList.remove("active"));

    this.classList.add("active", "tabs__link--active");

    const tabId = this.getAttribute("data-id");
    const activeContent = document.querySelector(tabId);

    if (activeContent) {
      activeContent.classList.add("active");
      const sliderContainer = activeContent.querySelector(".report, .tabs__content-list");
      let buttonsWrapper = activeContent.querySelector(".tabs-content__buttons-wrapper");

      if (!buttonsWrapper && tabsButtonsTemplate) {
        createSliderButtons(tabsButtonsTemplate, activeContent);
      }

      if (sliderContainer) {
        sliderContainer.innerHTML = '';
      }

      if (tabId === "#tab1") {
        Object.values(weatherDay).forEach(dataItem => {
          createSliderCard(sliderTemplate, sliderContainer, dataItem);
        });
      } else {
        Object.values(weatherWeek).forEach(dataItem => {
          createSliderCard(sliderTemplate, sliderContainer, dataItem);
        });
      }
    }

  });
});

if (tabLinks.length > 0) {
  tabLinks[0].click();
}