fix input city bug, add adjstable select width, start making todos gr…

…oups logic

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,

index.html

@@ -97,6 +97,12 @@
       <div class="todo-list__container">
         <header class="todo-list__header">
           <p>ToDO List</p>
+          <select name="todoGroups">
+            <option selected value="all">All</option>
+            <option value="done">Done</option>
+            <option value="undone">Undone</option>
+            <option value="today">Today</option>
+          </select>
         </header>
         <main class="todo-list__wrapper">
           <ul class="todo-list">

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();

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;
     }

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();

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 = `<svg class="wifi-off-icon"></svg> ${errorMessage}`;
 }
 

js/todo.js

@@ -1,11 +1,12 @@
-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";
 
 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);

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") {