From 17e93b50349f4fc11c4c609171ce1ed59701e19b Mon Sep 17 00:00:00 2001 From: Pavlo vus Date: Sat, 21 Jun 2025 15:47:08 +0300 Subject: [PATCH] =?UTF-8?q?Complete=20lab=20=E2=84=965?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 + img/close.png | Bin 0 -> 194 bytes img/close1.png | Bin 0 -> 258 bytes img/cloudy.png | Bin 0 -> 970 bytes img/cloudyBigger.png | Bin 0 -> 1934 bytes img/cloudyBiggest.png | Bin 0 -> 3298 bytes img/rain.png | Bin 0 -> 979 bytes img/rainBigger.png | Bin 0 -> 2026 bytes img/rainBiggest.png | Bin 0 -> 4095 bytes img/sun.png | Bin 0 -> 827 bytes img/sunBigger.png | Bin 0 -> 1549 bytes img/sunBiggest.png | Bin 0 -> 3192 bytes index.html | 89 +++++++- src/main.js | 208 ++++++++++++++++++ style/style.css | 486 ++++++++++++++++++++++++++++++++++++++++++ 15 files changed, 781 insertions(+), 5 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 img/close.png create mode 100644 img/close1.png create mode 100644 img/cloudy.png create mode 100644 img/cloudyBigger.png create mode 100644 img/cloudyBiggest.png create mode 100644 img/rain.png create mode 100644 img/rainBigger.png create mode 100644 img/rainBiggest.png create mode 100644 img/sun.png create mode 100644 img/sunBigger.png create mode 100644 img/sunBiggest.png diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/img/close.png b/img/close.png new file mode 100644 index 0000000000000000000000000000000000000000..8ed3142f1fa2f82d700b3215cf50f6d889a39d4c GIT binary patch literal 194 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhoCO|{#XvD(5N2eUHAey{$XFcY z?!>U}oXkrghb7(7*O7r?V?XzwL{=a_+|$J|q=K=v|28j!A_vR$nAC8|xYT)5HIKRT zaOG^On<2@>$guEv^SqM^MW_E2GM;|m^N_*Rk#*?=n*z1mCP|^mCz%&VblM2adJwy} jrG5VN*}OlVw_W3!p0B!eLUq$IpcM?Bu6{1-oD!M<;{H1^ literal 0 HcmV?d00001 diff --git a/img/close1.png b/img/close1.png new file mode 100644 index 0000000000000000000000000000000000000000..fd23bce15f1af15b465e1eb9ee8388454c27557a GIT binary patch literal 258 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhoCO|{#XvD(5N2eUHAey{$XFcY z?!>U}oXkrghb7(7*O7r?V?XzwL{=bwx~Gd{NCji*#D}~s3OudR|27}4oczM#9V^x7Zt5MlP$@dA2OCe@XrA y<}Ld^^~saYAgg2%@Ij zKye`m#;Fa8Alov2kiLnNBleey9;e!6vnx&P?t- zpNlvlPVP+ZZKu;0?&f^&Iq!4Ncep>Isx(4&I(|&WtcLm*CW6chHzXYZ=@QkIptH=j zj`U!JOni?Ifa~kmHoCBHACnUD4-i?|Z&jw9O#Dzio4K*}fr+-Btmknvori76P1Ey0 z+&@6#m#m7sY*aq03lX(K>-C!JxtY$xqB?Gc=jppVUl|v_htSP*K4;JuC9(KyWz3n0 z4;jn|s*fS`f-1-?FlDT!7+5-2@#@T;Z(ZTzaANVB&FlIG_@DCK?Y3At4!l~&Wr35X z;JnQfzuu^23J#Fo+hIdCjj-3}j9F7~4%UL${tQ&fhV6*};Q)`=Sop(Q#XvjYPREBu z2q11v^0m>#4 zYiD&eWLqNdfW|Q7YXVGUOT&nMPMsH4n=W(6j?$*fegH0*{>3eA@H_)&^M&1rrs{>1!VW(?TnXWifBNwVfO09K@n4xQ&d{hnPqv)QIrIpcM=o-LTT zSo|62@&iyy-8RL5J&xdl$SIRpIOgTs0yUYtdiSk{1I(GD%$U~!@`l12wR~H5<>Fnd zz}l?>tS2YSKSkdfBJoGf4;Akg^rIoib9ubLPR z5EWNX1DLXw-US|PV)(j5A5F~_<3`b;ricHhh}A&@bl)ieEFpuibf@wi%#Q};-1gSn zqTEY;JLZjb^nHcDn;I>+f;|dgj`X+u2J!;Pl_tes6*w}|+d2iCo`h%fh24&0-a|Nu s(nCZ4oGAgbpyyTOqvXRoFINix0`|{L&Z+TO#sB~S07*qoM6N<$f*uLQbN~PV literal 0 HcmV?d00001 diff --git a/img/cloudyBigger.png b/img/cloudyBigger.png new file mode 100644 index 0000000000000000000000000000000000000000..42225756f4f7eba2331fae592d3f995d45d82595 GIT binary patch literal 1934 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 literal 0 HcmV?d00001 diff --git a/img/sunBiggest.png b/img/sunBiggest.png new file mode 100644 index 0000000000000000000000000000000000000000..597a5e15182672547bed282da3be19899b85f5b0 GIT binary patch literal 3192 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 Wk;HpHKAo$t0idm}r&fhRhyMpKHsVnL literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 09c6dc0..b69e00c 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,92 @@ - - + + + - Simple HTML Page - + Weather app + + - + +

+
+
+ + +
+
+
+
+

+ +
+ + +
+
+
+

+ +
+
+
Wind: + +
+
Humidity: + +
+
+
+
+
+
    +
+
+
+
+ +
+
+
+ +
+
+
Max temperature °C: + +
+
Feels like °C: + +
+
+
+
Min temperature °C: + +
+
Feels like °C: + +
+
+
+
Sunrise: + +
+
Sunset: + +
+
Visibility: + +
+
Pressure: + +
+
+
+
+
+
+ \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..c7784db 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,208 @@ +let daysData = [] +let currentCity +let currentAddress +let isFirstLoad = true + +async function loadWeather(city) { + const apiKey = '42X3PN2U3BCYZV8FFRWCV3UVA' + const resp = await fetch(`https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/${encodeURIComponent(city)}?unitGroup=metric&key=${apiKey}&contentType=json`) + if (!resp.ok) { + alert('City not found') + return + } + const data = await resp.json() + daysData = data.days.slice(0, 10) + + currentCity = data.address + currentAddress = data.resolvedAddress + + isFirstLoad = true + updateDetailedInfo(0) + renderCarousel() + console.log(data) +} + +function updateDetailedInfo(index) { + const detailedCity = document.querySelector('.detailed-city') + const detailedCountry = document.querySelector('.detailed-country') + const detailedTemp = document.querySelector('.detailed-temp') + const detailedDesc = document.querySelector('.detailed-desc') + const windElem = document.querySelector('.wind') + const humidityElem = document.querySelector('.humidity') + const detailedIcon = document.querySelector('.detailed-icon') + + const day = daysData[index] + detailedCity.textContent = currentCity + detailedCountry.textContent = currentAddress + detailedTemp.textContent = Math.round(day.temp) + '°C' + detailedDesc.textContent = day.conditions + windElem.textContent = Math.round(day.windspeed) + 'km/h' + humidityElem.textContent = day.humidity + '%' + createDetailedIconByConditions(day.icon, detailedIcon) + setUpPopupListener(index) +} + +function renderCarousel() { + const carousel = document.querySelector('.carousel') + carousel.innerHTML = '' + daysData.forEach((day, index) => { + const li = document.createElement('li') + li.className = 'carousel-item' + + const title = document.createElement('h5') + title.className = 'carousel-title' + title.textContent = `${index === 0 ? 'Today' : new Date(day.datetime).toLocaleDateString('en-EN', { weekday: 'short' })}` + + const dateStr = day.datetime + const date = new Date(dateStr) + + const formatted = date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short'}) + + const subTitle = document.createElement('span') + subTitle.className = 'carousel-subtitle' + subTitle.textContent = formatted + + + const icon = document.createElement('picture') + icon.className = 'carousel-icon' + + let currentPicture = '' + if (day.icon.includes('rain')) currentPicture = 'rain' + if (day.icon.includes('cloud')) currentPicture = 'cloudy' + if (day.icon.includes('clear')) currentPicture = 'sun' + + const source = document.createElement('source') + source.setAttribute('srcset', `./img/${currentPicture}Bigger.png`) + source.setAttribute('media', '(min-width: 600px)') + + const img = document.createElement('img') + img.setAttribute('src', `./img/${currentPicture}.png`) + + icon.append(source, img) + + const maxTemperature = document.createElement('span') + maxTemperature.className = 'max-temp' + maxTemperature.textContent = Math.round(day.tempmax) + '°C' + + const minTemperature = document.createElement('span') + minTemperature.className = 'min-temp' + minTemperature.textContent = Math.round(day.tempmin) + '°C' + + li.append(title, subTitle, icon, maxTemperature, minTemperature) + + li.addEventListener('click', () => { + updateDetailedInfo(index) + document.querySelectorAll('.carousel-item').forEach(item => { item.classList.remove('current')}) + li.classList.add('current') + }) + + carousel.appendChild(li) + }) + + if (isFirstLoad) { + const firstItem = carousel.querySelector('.carousel-item') + if (firstItem) { + firstItem.classList.add('current') + } + isFirstLoad = false + } +} + +function createDetailedIconByConditions(icon, detailedIcon) { + let currentPicture = '' + if (icon.includes('rain')) currentPicture = 'rain' + if (icon.includes('cloud')) currentPicture = 'cloudy' + if (icon.includes('clear')) currentPicture = 'sun' + + detailedIcon.innerHTML ='' + + const sourceOne = document.createElement('source') + sourceOne.setAttribute('srcset', `./img/${currentPicture}Biggest.png`) + sourceOne.setAttribute('media', '(min-width: 600px)') + + const sourceTwo = document.createElement('source') + sourceTwo.setAttribute('srcset', `./img/${currentPicture}Bigger.png`) + + const img = document.createElement('img') + img.setAttribute('src', `./img/${currentPicture}.png`) + + detailedIcon.append(sourceOne, sourceTwo, img) +} + +const searchInput = document.querySelector('.search-input') +const searchButton = document.querySelector('.search-button') +searchButton.addEventListener('click', () => { + const value = searchInput.value.trim(); + if (value !== '') { + loadWeather(value) + searchInput.value = ''; + } else { + searchInput.focus(); + } +}) +searchInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + searchButton.click(); + } +}) + +function setUpPopupListener(index) { + const detailedTemp = document.querySelector('.detailed-temp') + let popup = document.querySelector(".popup") + let closePopupButton = document.querySelector(".popup-close") + let popupContent = document.querySelector(".popup-content") + + detailedTemp.addEventListener('click', () => { + popup.classList.add('popup-active') + popupContent.classList.add('popup-content-active') + setUpPopupContent(index) + }) + + closePopupButton.addEventListener('click', () => { + popup.classList.remove('popup-active') + popupContent.classList.remove('popup-content-active') + }) +} + +function setUpPopupContent(index) { + const popupCity = document.querySelector('.popup-city') + const popupDate = document.querySelector('.popup-date') + const popupDescription = document.querySelector('.popup-description') + const popupMaxTemp = document.querySelector('.max-real') + const popupMinTemp = document.querySelector('.min-real') + const popupMaxFeel = document.querySelector('.max-feels') + const popupMinFeel = document.querySelector('.min-feels') + const popupSunrise = document.querySelector('.sunrise') + const popupSunset = document.querySelector('.sunset') + const popupVisibility = document.querySelector('.visibility') + const popupPressure = document.querySelector('.pressure') + + const day = daysData[index] + + popupCity.textContent = currentAddress + const dateStr = day.datetime + const date = new Date(dateStr) + + const formatted = date.toLocaleDateString('en-GB', { day: 'numeric', month: 'long' }) + popupDate.textContent = formatted + popupDescription.textContent = day.description + popupMaxTemp.textContent = Math.round(day.tempmax) + '°C' + popupMinTemp.textContent = Math.round(day.tempmin) + '°C' + popupMaxFeel.textContent = Math.round(day.feelslikemax) + '°C' + popupMinFeel.textContent = Math.round(day.feelslikemin) + '°C' + const time = day.sunrise + const [hours, minutes] = time.split(":") + const shortTime = `${hours}:${minutes}` + popupSunrise.textContent = shortTime + + const timeTwo = day.sunset + const [hoursTwo, minutesTwo] = timeTwo.split(":") + const shortTimeTwo = `${hoursTwo}:${minutesTwo}` + popupSunset.textContent = shortTimeTwo + + popupVisibility.textContent = day.visibility + 'km' + popupPressure.textContent = day.pressure + 'hPa' +} + +loadWeather('Kyiv') \ No newline at end of file diff --git a/style/style.css b/style/style.css index e69de29..9c96500 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,486 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; +} + +a { + text-decoration: none; +} + +li { + list-style-type: none; +} + +.container { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + background-color: rgba(238, 239, 238, 255); + padding: 20px; +} + +.weather-panel { + width: 100%; + height: fit-content; + display: flex; + flex-direction: column; + background-color: white; + border-radius: 5px; +} + +.search { + display: flex; + justify-content: space-between; + align-items: center; + padding: 30px; +} + +.search-input { + width: 80%; + height: 50px; + border-radius: 7px; + padding: 0 10px; + border: 2px solid rgba(245, 245, 246, 255); + color: rgba(173, 173, 173, 255); + font-size: 18px; +} + +.search-input::placeholder { + color: rgba(173, 173, 173, 255); +} + +.search-input:focus { + outline: none; + border-color: rgba(66, 131, 202, 255); +} + +.search-button { + width: 15%; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + background-color: rgba(47, 108, 220, 255); + color: white; + border: none; + cursor: pointer; + font-size: 20px; + padding: 20px 0; + position: relative; +} + +.search-button::after { + content: attr(data-tooltip); + position: absolute; + top: -30px; + left: 9%; + transform: translateY(10px) scale(0.5); + background-color: rgba(78, 164, 250, 255); + color: white; + font-size: 14px; + font-weight: bold; + padding: 5px 15px; + border-radius: 8px; + white-space: nowrap; + opacity: 0; + transition: all 0.3s ease; +} + +.search-button:hover::after { + opacity: 1; + transform: scale(1); +} + +.search-button:hover { + background-color: rgba(30, 90, 170, 255); +} + +.detailed-panel { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + padding: 0px 30px; +} + +.detailed-info { + display: flex; + flex-direction: column; + align-items: start; + gap: 10px; +} + +.detailed-temp{ + font-size: 40px; + font-weight: bold; + cursor: pointer; +} + +.detailed-temp:hover { + color: rgba(78, 164, 250, 255); + transition: color 0.3s ease; +} + +.detailed-city { + font-size: 32px; +} + +.detailed-country { + font-size: 22px; + color: rgba(92, 103, 106, 255); +} + +.detailed-desc{ + font-size: 20px; +} + +.detailed-extra { + font-size: 20px; +} + +.extra{ + display: flex; + flex-direction: column; + align-items: end; + min-width: 211px; +} + +.carousel { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scroll-snap-type: x mandatory; + display: flex; + justify-content: space-between; + align-items: center; + padding: 30px; + >li { + scroll-snap-align: center; + } +} +.carousel::-webkit-scrollbar { + height: 8px; +} + +.carousel::-webkit-scrollbar-track { + background: transparent; +} + +.carousel::-webkit-scrollbar-thumb { + background-color: #dcdfe6; + border-radius: 8px; +} + +.carousel::-webkit-scrollbar-thumb:hover { + background-color: #c0c4cc; +} + +.carousel-item { + flex: 1, 1; + min-width: 150px; + border-radius: 10px; + margin-right: 20px; + padding: 20px 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + border: 1px solid rgba(221, 221, 223, 255); + cursor: pointer; +} + +.carousel-item:hover { + background-color: rgba(245, 245, 246, 255); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(201, 201, 203, 255); +} + +.current { + background-color: rgba(245, 245, 246, 255); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(201, 201, 203, 255); +} + +.carousel-item:last-child { + margin-right: 0; +} + +.carousel-title { + font-size: 26px; + font-weight: bold; +} + +.carousel-subtitle { + font-size: 22px; + color: rgba(92, 103, 106, 255); +} + +.max-temp { + font-size: 20px; +} + +.min-temp { + font-size: 18px; + color: rgba(92, 103, 106, 255); +} + +.popup { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.6); + visibility: hidden; + opacity: 0; + transition: all 1s 0s; +} + +.popup-active { + visibility: visible; + opacity: 1; +} + +.popup-content { + background: #FFFFFF; + width: 50%; + height: 90%; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 30px; + position: relative; + transition: all 1s 0s; + opacity: 0; + transform: translate(0px, -100%) +} + +.popup-content-active { + opacity: 1; + transform: translate(0px, 0px) +} + +.popup-close { + background-color: white; + border-radius: 50%; + border: 1px solid rgba(0, 0, 0, 0.1); + width: 30px; + height: 30px; + background-image: url('../img/close.png'); + fill: black; + background-position: center; + background-repeat: no-repeat; + position: absolute; + top: 8px; + right: 8px; + cursor: pointer; +} + +.popup-close:hover { + background-image: url('../img/close1.png'); +} + +.popup-close:active { + transform: scale(1.1); +} + +.popup-information { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.popup-city{ + font-size: 26px; + font-weight: bold; +} + +.popup-date { + font-size: 24px; + color: rgba(92, 103, 106, 255); +} + +.popup-description { + font-size: 16px; + font-style: italic; +} + +.popup-temp { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; +} + +.popup-temp-item { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 5px; +} + +.popup-real { + font-size: 18px; + font-weight: bold; +} + +.popup-feels-like { + font-size: 16px; + font-weight: bold; + font-style: italic; + color: rgba(92, 103, 106, 255); +} + +.popup-extra { + font-size: 20px; +} + +@media (max-width: 1024px) { + .popup-city { + font-size: 22px; + } +} + +@media (max-width: 900px) { + .popup-city { + font-size: 18px; + } + + .popup-real { + font-size: 16px; + } + + .popup-feels-like { + font-size: 14px; + } + + .popup-extra { + font-size: 16px; + } + + .popup-description { + font-size: 14px; + } + + .popup-date { + font-size: 16px; + } +} + +@media (max-width: 768px) { + .popup-city { + font-size: 16px; + } +} + +@media (max-width: 600px) { + .search-button { + width: 20%; + } + + .search-input { + width: 75%; + } + + .carousel-item { + min-width: 100px; + } + + .weather-panel .detailed-panel:first-child { + margin-bottom: 20px; + } + + .popup-real { + font-size: 14px; + } + + .popup-feels-like { + font-size: 12px; + } + + .popup-description { + font-size: 12px; + } + + .popup-date { + font-size: 16px; + } + + .popup-extra { + font-size: 16px; + } + + .popup-information { + gap: 20px; + } +} + +@media (max-width: 500px) { + .search-button { + font-size: 18px; + } + + .extra { + margin-top: 20px; + align-items: start; + } +} + +@media (max-width: 425px) { + .search-button { + width: 25%; + } + + .search-input { + width: 70%; + } + + .popup-extra { + font-size: 14px; + } +} + +@media (max-width: 400px) { + .detailed-info { + align-items: start; + } + + .popup-extra { + font-size: 12px; + } +} + +@media (max-width: 375px) { + .search-button { + width: 30%; + } + + .search-input { + width: 65%; + } + + .popup-city { + font-size: 14px; + } + + .popup-date { + font-size: 14px; + } + .popup-real { + font-size: 12px; + } + + .popup-feels-like { + font-size: 10px; + } +} \ No newline at end of file