script.js - master - Cjyz/Piter

script.js
221 строка4 KB
Cjyz
Create: app.py, Procfile, README.md, requirements.txt, day1.html, day2.html, day3.html, day4.html, index.html, map.js, script.js, style.css, icon.png
31 июл 2026, 22:07
Верифицирован
31 июл 2026, 22:07036bee5
// =======================================
// SPB TRIP PLANNER
// Интерактивность приложения
// =======================================

// Запуск после загрузки страницы

document.addEventListener("DOMContentLoaded", function () {

    loadChecks();

    updateProgress();

    calculateBudget();

});

// =======================================
// ЧЕКБОКСЫ "ПОСЕТИЛИ"
// =======================================

function loadChecks() {

    const boxes = document.querySelectorAll(".visit");

    boxes.forEach(box => {

        let id = box.dataset.id;

        if (localStorage.getItem(id) === "true") {

            box.checked = true;

        }

        box.addEventListener(
            "change",
            function () {

                localStorage.setItem(
                    id,
                    box.checked
                );

                updateProgress();

            }
        );

    });

}

// =======================================
// ПРОГРЕСС ДНЯ
// =======================================

function updateProgress() {

    let all =
        document.querySelectorAll(".visit").length;

    let done =
        document.querySelectorAll(".visit:checked").length;

    let progress =
        document.getElementById("progress");

    if(progress){

        progress.innerHTML =
        `✅ Выполнено ${done} из ${all}`;

    }

}

// =======================================
// БЮДЖЕТ
// =======================================

function calculateBudget(){

    let total = 0;

    let prices =
    document.querySelectorAll(".price");

    prices.forEach(price=>{

        let value =
        Number(price.dataset.price);

        if(!isNaN(value)){

            total += value;

        }

    });

    let money =
    document.getElementById("money");

    if(money){

        money.innerHTML =
        total + " ₽";

    }

}

// =======================================
// ДОБАВЛЕНИЕ СОБЫТИЯ
// =======================================

function addEvent(){

    let timeline =
    document.querySelector(".timeline");

    let newEvent =
    document.createElement("div");

    newEvent.className =
    "event";

    newEvent.innerHTML = `

    <div class="time">

    Новое

    </div>

    <div class="card">

    <h3 contenteditable="true">

    ✨ Новое место

    </h3>

    <p contenteditable="true">

    Нажмите и измените описание

    </p>

    <p class="price" data-price="0">

    Стоимость: 0 ₽

    </p>

    <label>

    <input 
    class="visit"
    type="checkbox">

    Посетили

    </label>

    <button 
    class="delete-btn"
    onclick="deleteEvent(this)">

    🗑 Удалить

    </button>

    </div>

    `;

    timeline.appendChild(newEvent);

    updateProgress();

}

// =======================================
// УДАЛЕНИЕ
// =======================================

function deleteEvent(button){

    let event =
    button.closest(".event");

    event.remove();

    updateProgress();

}

// =======================================
// РЕДАКТИРОВАНИЕ ТЕКСТА
// =======================================

document.addEventListener(
"input",
function(e){

if(
e.target.hasAttribute(
"contenteditable"
)
){

localStorage.setItem(
e.target.innerText,
e.target.innerHTML
);

}

})