From a51af7393ff02e8c60aab2a1a6ae3b0ecef864fb Mon Sep 17 00:00:00 2001 From: macsbook Date: Tue, 27 Feb 2024 17:47:35 +0100 Subject: [PATCH] fix input city bug, add adjstable select width, start making todos groups logic --- css/style.css | 11 +++++++---- index.html | 6 ++++++ js/helper.js | 11 +++++++++++ js/localStorage.js | 16 +++++++++------- js/settings.js | 3 +++ js/slider.js | 1 - js/todo.js | 12 ++++++++++-- js/weather.js | 19 +++---------------- 8 files changed, 49 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 99812cb..1d36a01 100644 --- a/css/style.css +++ b/css/style.css @@ -502,6 +502,12 @@ select { .todo-list__header { font-weight: 600; text-align: left; + display: flex; + gap: 10px; +} + +.todo-list__header select { + color: black; } .todo-list__wrapper { @@ -678,10 +684,7 @@ select { font-family: "Poppins", "Montserrat", sans-serif; font-size: 16px; color: #ffffff; -} - -select option { - text-align: end; + outline: 0; } .settings-hide tbody, diff --git a/index.html b/index.html index 392235b..a071e10 100644 --- a/index.html +++ b/index.html @@ -97,6 +97,12 @@

ToDO List

+
    diff --git a/js/helper.js b/js/helper.js index 31bf59d..33ad6f7 100644 --- a/js/helper.js +++ b/js/helper.js @@ -48,6 +48,17 @@ export function adjustWidth() { inputElement.style.width = (inputWidth == 0) ? placeholderWidth : inputWidth + sumOfpaddings + 'px'; } +export function adjustSelectWidth() { + const text = this.options[this.selectedIndex].text; + const aux = document.createElement('select'); + const option = document.createElement('option'); + option.text = text; + aux.add(option); + document.body.appendChild(aux); + this.style.width = aux.offsetWidth + 'px'; + document.body.removeChild(aux); +} + export function setCursorToEnd(el) { const range = document.createRange(); const sel = window.getSelection(); diff --git a/js/localStorage.js b/js/localStorage.js index 21b6988..d5c94f0 100644 --- a/js/localStorage.js +++ b/js/localStorage.js @@ -6,7 +6,11 @@ import { todosInfoArr, setToDosFromLS } from './todo.js'; function setLocalStorage() { localStorage.setItem("name", inputName.value); - localStorage.setItem("city", inputCity.value); + if (isCityCorrect) { + localStorage.setItem("city", inputCity.value); + } else { + localStorage.setItem("city", ""); + } localStorage.setItem("settings", JSON.stringify(settings)); localStorage.setItem("todos", JSON.stringify(todosInfoArr)); } @@ -18,22 +22,20 @@ function getNameFromLS() { } } -async function getCityFromLS() { +function getCityFromLS() { const cityFromLS = localStorage.getItem("city"); - const isCorrect = await isCityCorrect(cityFromLS); - console.log(isCorrect); - if (cityFromLS !== null && cityFromLS !== '' && isCorrect) { + if (cityFromLS !== null && cityFromLS !== '') { return cityFromLS; } } -async function setFromLS() { +function setFromLS() { const nameFromLS = getNameFromLS(); if (nameFromLS) { inputName.value = nameFromLS; } - const cityFromLS = await getCityFromLS(); + const cityFromLS = getCityFromLS(); if (cityFromLS) { inputCity.value = cityFromLS; } diff --git a/js/settings.js b/js/settings.js index 7e2252c..3977693 100644 --- a/js/settings.js +++ b/js/settings.js @@ -1,5 +1,6 @@ import { onKeyDownEvent } from "./audio.js"; import translations from './translate.json' assert { type: "json" }; +import { adjustSelectWidth } from "./helper.js"; export const settings = { language: "en", @@ -162,6 +163,8 @@ export function updateSettingsUI() { export function startSettingsLogic() { + adjustSelectWidth.apply(languageSelectEl); + languageSelectEl.addEventListener("change", adjustSelectWidth); updateHotKeys(); addHotKeysListeners(); addPopUpListeners(); diff --git a/js/slider.js b/js/slider.js index 98195ac..6dcd60a 100644 --- a/js/slider.js +++ b/js/slider.js @@ -43,7 +43,6 @@ export async function setBg() { function showBackgroundError() { const errorDiv = document.querySelector(".background-error"); const errorMessage = translations[settings.language].slider.networkErrorMessage; - console.error(errorMessage); errorDiv.innerHTML = ` ${errorMessage}`; } diff --git a/js/todo.js b/js/todo.js index a502829..f36fa8c 100644 --- a/js/todo.js +++ b/js/todo.js @@ -1,4 +1,4 @@ -import { setCursorToEnd, generateUUID } from "./helper.js"; +import { setCursorToEnd, generateUUID, adjustSelectWidth } from "./helper.js"; import translations from './translate.json' assert { type: "json" }; import { settings } from "./settings.js"; @@ -6,6 +6,7 @@ const todoListContainer = document.querySelector(".todo-list__container"); const todoOpenButton = document.querySelector(".todo-list-open-button"); const addToDoButton = document.querySelector(".todo-list__add-button"); const todosDiv = document.querySelector(".todo-list"); +const groupSelect = document.querySelector("[name='todoGroups']"); export let todosInfoArr = []; @@ -98,7 +99,6 @@ function setToDos(arr) { for (let todoInfo of arr) { const todo = createToDo(todoInfo.textContent, todoInfo.id); todo.getElementsByTagName("input")[0].checked = todoInfo.done; - console.log(todoInfo); appendToDo(todo); } } @@ -136,7 +136,15 @@ export function updateBtnTranslation() { addToDoButton.placeholder = translations[settings.language].todoList.addTaskPlaceholderTranslation; } +/* function filterTodos(filter) { + if (filter === "done") { + return todosInfoArr.filter(todoInfo => todoInfo.done); + } +} */ + export function startToDosLogic() { + adjustSelectWidth.apply(groupSelect); + groupSelect.addEventListener("change", adjustSelectWidth); updateBtnTranslation() updateEmptyList(); todoOpenButton.addEventListener("click", toggleTodoList); diff --git a/js/weather.js b/js/weather.js index a69cf5c..cc07131 100644 --- a/js/weather.js +++ b/js/weather.js @@ -28,17 +28,7 @@ function setWeatherError(error) { humidity.textContent = ''; } -// export let isCityCorrect = true; - -export async function isCityCorrect(value) { - const url = `https://api.openweathermap.org/data/2.5/weather?q=${value}&lang=en&appid=b1201d454068452807855ae9447aa96e&units=metric`; - const res = await fetch(url); - const data = await res.json(); - if (data.message === "city not found" || data.message === "Nothing to geocode") { - return false; - } - return true; -} +export let isCityCorrect; export async function getWeather() { const cityNotFoundError = `${translations[settings.language].weather.cityErrorMessage} '${inputCity.value }'!`; @@ -47,13 +37,10 @@ export async function getWeather() { const res = await fetch(url); const data = await res.json(); if (data.message === "city not found" || data.message === "Nothing to geocode") { - // isCityCorrect = false; - // console.log(isCityCorrect); + isCityCorrect = false; throw new Error(cityNotFoundError); - // тут записывать если не нашел город - // если ошибка то не сохранять в ls название города - // что если просто сначала достать из ls город а потом вызвать погоду } + isCityCorrect = true; setWeatherInfo(data); } catch(error) { if (error.message === "Failed to fetch") {