БЛОГ НА HUSL


Адаптировать сайт под мобильные устройства

Автор вопроса: Андрей Хотюн

Всем привет, помогите плиз, кто шарит в адаптивной верстке, я подстроил под мобильные устройства, вроде как везде одинаково нормально, кроме айфонов, там вообще стили криво выглядят, но не суть, так вот, вроде все нормально, но работает оно не корректно, когда я добавляю таск, то строка добавления сдвигается, я пытался добавить ту строку в html, widht-device-width которая, но там вообще жесть была, кнопка не нажималась там, где нужно, я пытался что-то сделать, в юутбе смотрел, но не помогло, скорее всего я что-то не так делал, снизу предлагаю код, чтобы смогли посмотреть и увидеть про то, что я имею ввиду:

index.html

    <!Doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="icon.png" type="image/x-icon">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="adaptive.css">
        <link rel="stylesheet" href="alertify/css/alertify.min.css" />
        <link rel="stylesheet" href="alertify/css/themes/default.min.css" />
        <link rel="stylesheet" href="alertify/css/themes/adaptive_default.min.css" />
        <script src="https://kit.fontawesome.com/02f0ec4094.js" crossorigin="anonymous"></script>
        <title>ToDo List</title>
    </head>
    <body>
        <h1>ToDo List</h1>
        <div class="todo">
            <div class="add-todo">
                <div class="input-task">
                    <input type="text" id="task-input" placeholder="What needs to be done today?">
                </div>
                <div class="add-task-button">
                    <button id="add-task"><i class="fas fa-plus"></i></button>
            </div>
            </div></br>
            <h2 style>Tasks for the day:</h2>
            <div class="all-tasks"></div>
            <div class="del-all-tasks-button">
                <button id="delete-all-tasks">Clear All</button>
            </div>
        </div>
        <script src="alertify/js/alertify.min.js"></script>
        <script src="script.js"></script>
    </body>
    </html>

style.css

body {
    background: #EEEEEE;
}

h1 {
    font-size: 50px;
    text-align: center;
    font-family: cursive;
}

h2 {
    font-size: 25px;
    text-align: center;
    font-family: cursive;
}

.todo {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.add-todo {
    display: flex;
    width: 500px;
    height: 40px;
    align-items: center;
    background-color: #212121;
    border-radius: 20px;
    padding: 10px;
}

.input-task {
    width: 80%;

}

.input-task input {
    width: 425px;
    height: 28px;
    border-radius: 20px;
    font-family: cursive;
    font-size: 15px;

}

.add-task-button {
    width: 95px;
    display: flex;
    justify-content: flex-end;
    color: aqua;
}

.add-task-button button {
    width: 50px;
    height: 35px;
    font-size: 22px;
    background-color: aqua;
    color: black;
    border-radius: 10px;
    cursor: pointer;
}

.add-task-button button:hover {
    background-color: lightgreen;
}

.create-task  {
    display: flex;
    width: 500px;
    height: 50px;
    background-color: lightgreen;
    border-radius: 10px;
    border: 2px solid black;
    margin-bottom: 15px;
    padding: 10px;
    font-family: cursive;
}

.create-task.checked {
    background-color: grey;
    opacity: 0.5;
    text-decoration: line-through;
}

.create-task.deleted {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s 1s;
}

.create-task.hide {
    display: none;
}

.task {
    width: 80%;
    display: flex;
    align-items: center;
    color: black;
}

.action {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.action input {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

input[type='checkbox'] {
    margin: 10px;
    border-radius: 50px;
}

input[type='txt'] {
    padding: 10px;
    width: 50%;
    font-size: 15px;
    border-radius: 10px;
    background-color: #E0E0E0;
}

.action span {
    color: #B71C1C;
    cursor: pointer;
    height: 25px;
    font-size: 25px;
    margin-bottom: 14px;
}

.action span:hover {
    color: darkred;
}

.action span.btn-edit {
    color: #1A237E;
    padding-right: 8px;
}

.action span.btn-edit:hover {
    color: darkcyan;
}

.del-all-tasks-button button {
    background-color: #B71C1C;
    color: black;
    cursor: pointer;
    font-family: cursive;
    height: 30px;
    border-radius: 5px;
    margin: 10px;
}

.del-all-tasks-button button:hover {
    background-color: darkred;
}

.del-all-tasks-button button.hide {
    display: none;
}

adaptive.css

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 992px) {

    h1 {
        text-align: center;
        font-size: 180px;
        padding-bottom: -150px;
        font-family: normal;
    }
    
    .add-todo {
        display: flex;
        width: 900px;
        height: 100px;
        align-items: center;
        background-color: #212121;
        border-radius: 25px;
        padding: 10px;
        margin-right: 5px;
    }

    .input-task {
        width: 80%;
    }

    .input-task input {
        width: 785px;
        height: 70px;
        border-radius: 25px;
        font-size: 38px;
        font-family: normal;

    }

    .add-task-button button {
        width: 80px;
        height: 80px;
        background-color: aqua;
        color: black;
        border-radius: 10px;
        cursor: pointer;
        font-size: 48px;
        margin-right: -75px;
    }

    .add-task-button button:hover {
        background-color: lightgreen;
    }

    h2 {
        margin-top: 30px;
        text-align: center;
        font-size: 90px;
        padding: 80px;
        font-family: normal;
    }

    .create-task {
        display: flex;
        width: 900px;
        height: 100px;
        background-color: lightgreen;
        border-radius: 10px;
        border: 2px solid black;
        margin-bottom: 100px;
        padding: 10px;
        margin-top: -75px;
        margin-right: -2px;
    }

    .task {
        width: 80%;
        display: flex;
        align-items: center;
        color: black;
        font-size: 38px;
        font-family: normal;
    }

    .action {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    input[type='checkbox'] {
        margin: 1%;
    }

    input[type='txt'] {
        padding: 10px;
        width: 50%;
        border-radius: 10px;
        background-color: #E0E0E0;
        font-size: 38px;
    }

    .action input {
        width: 100px;
        height: 70px;
        cursor: pointer;

    }

    .action span {
        color: #EF5350;
        cursor: pointer;
        height: 55px;
        width: 150px;
        font-size: 65px;
        margin-bottom: 16px;
        margin-right: -45px;

    }

    .action span:hover {
        color: darkred;
    }

    .action span.btn-edit {
        color: #1A237E;
        margin-left: 18px;
        font-size: 65px;
    }
    
    .action span.btn-edit:hover {
        color: darkcyan;
    }    

    .del-all-tasks-button button {
        background-color: #EF5350;
        color: black;
        cursor: pointer;
        font-family: sans-serif;
        border-radius: 15px;
        margin-top: -180px;
        font-size: 42px;
        width: 200px;
        height: 85px;
    }

    .del-all-tasks-button button:hover {
        background-color: darkred;
    }

    .create-task.deleted {
        opacity: 0;
        visibility: hidden;
        transition: opacity 1s, visibility 0s 1s;
    }
}

@media only screen and (max-width: 480px) {

}

@media only screen and (max-width: 320px) {

}

script.js

//1) создаю три главных переменных, которые подключаются к основным html функционалом туду листа
const addTask = document.getElementById('add-task');
const inputTask = document.getElementById('task-input');
const allTasks = document.querySelector('.all-tasks');
const delAll = document.getElementById('delete-all-tasks')

let tasks = [];
let todoTasks = [];

    if (!localStorage.tasks) {
        tasks = []
    } else {
        tasks = JSON.parse(localStorage.getItem('tasks'))
    }


//2) создаю функцию-конструктор, которая поможет создать много однотипных объектов
function Task(task) {
    this.task = task;
    this.completed = false;
}

//6) создаю функцию, где будет сам таск
function createTask(description, index) {
    return `
        <div class="create-task ${description.completed ? 'checked' : ''}">
             <div class="task">${description.task}</div>
             <div class="action">           
                  <input onclick="completedTask(${index})" class="complete" type="checkbox" 
                        ${description.completed ? 'checked' : ''}>
                  <span onclick="editTask(${index})" class="btn-edit"><i class="fa-solid fa-pen-to-square"></i></span>
                  <span onclick="deletedTask(${index})" class="delete"><i class="fa-solid fa-trash"></i></span>
             </div>
        </div>          
    `
}
   

//9) создаю функцию, которая будет фильтровать завершенные таски и опускать их вниз
function filterTasks() {
    const activeTask = tasks.length && tasks.filter(item => item.completed === false);
    const completedTask = tasks.length && tasks.filter(item => item.completed === true);
    tasks = [...activeTask, ...completedTask];
}

//5) создаю функцию, в которой таски будут выводится на странице
function showTasks() {
    allTasks.innerHTML = "";
    if (tasks.length === 0) {
        delAll.classList.add("hide");
    } else {
        delAll.classList.remove("hide");
    }
    if (tasks.length > 0) {
        filterTasks();
        tasks.forEach((item, index) => {
            allTasks.innerHTML += createTask(item, index)
        });
        todoTasks = document.querySelectorAll('.create-task');
        
    }
}

showTasks();

//4) создаю функцию, где я буду обращаться к locale storage, чтобы хранить там таски
function storage() {
    localStorage.setItem('tasks', JSON.stringify(tasks))
}

//7) создаю функцию, которая будет отвечать за завершения таска
function completedTask(index) {
    tasks[index].completed = !tasks[index].completed;
    if (tasks[index].completed) {
        todoTasks[index].classList.add('checked')
        setTimeout(() => {
            alertify.success('Task done!')
            },150)
    } else {
        todoTasks[index].classList.remove('checked')
        setTimeout(() => {
            alertify.warning('Task not done!')
            },150)
    }
    storage();
    showTasks();
}


//8) создаю функцию, которая будет отвечать за удаления таска
function deletedTask(index) {
    todoTasks[index].classList.add('deleted')
    setTimeout(() => {
        tasks.splice(index, 1);
        storage();
        showTasks();
    }, 500)
    setTimeout(() => {
        alertify.success('Task deleted!')
        }, 700)

}

    function editTask(index) {
        let currTask = todoTasks[index]; // выбранный таск
        if (!currTask.classList.contains('edit')) { // При первом нажатии на кнопку редактирования, начинаем редактировать.
          currTask.classList.add('edit'); // Добавляем класс 
          currTask.querySelector('.task').innerHTML = `<input type="txt" value="${tasks[index].task}">`; // Вместо задачи добавляем инпут с редактированием
        } else { // При втором нажатии, когда класс `.edit` есть, мы сохраним
          let newTask = currTask.querySelector('.task > input').value;
          tasks[index].task = newTask;
          currTask.querySelector('.task').innerText = newTask;
          setTimeout(() => {
            alertify.success('Task edited!')
            }, 100)
          storage();
          showTasks();
        }
      }



//3) создаю нажатие на кнопку добавить новый таск
addTask.addEventListener("click", () => {
    if (inputTask.value === '') {
        alertify.error('Enter a task!')
    } else {
        setTimeout(() => {
        alertify.success('Task added!')
        }, 100)
        tasks.push(new Task(inputTask.value));
    }
    storage();
    showTasks();
    inputTask.value = '';

});

//10 создаю нажатие на кнопку, которая удаляет все таски
delAll.addEventListener("click", () => {
        setTimeout(() => {
            alertify.success('All tasks deleted!')
            }, 100)
        tasks = [];
        storage();
        showTasks();       
});

Источник

Ответы (1 шт):

Автор решения: Beka

Для начала стоит добавить

<meta name="viewport" content="width=device-width, initial-scale=1.0">

для корректного отображения на айфонах

→ Ссылка

licensed under cc by-sa 3.0 with attribution.