본문 바로가기
1인 프로젝트/나만의 달력

2차 백업

by kirope 2024. 8. 5.
반응형

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar and To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="left-panel">
            <input type="file" id="photo-upload" accept="image/*">
            <label for="photo-upload" class="upload-button">Upload</label>
            <img id="photo-preview" src="" alt="Uploaded photo">
        </div>
        <div class="right-panel">
            <div class="calendar">
                <div class="month">
                    <select id="month-select">
                        <option value="0">January</option>
                        <option value="1">February</option>
                        <option value="2">March</option>
                        <option value="3">April</option>
                        <option value="4">May</option>
                        <option value="5">June</option>
                        <option value="6">July</option>
                        <option value="7">August</option>
                        <option value="8">September</option>
                        <option value="9">October</option>
                        <option value="10">November</option>
                        <option value="11">December</option>
                    </select>
                    <select id="year-select"></select>
                </div>
                <div class="weekdays">
                    <div>월</div>
                    <div>화</div>
                    <div>수</div>
                    <div>목</div>
                    <div>금</div>
                    <div>토</div>
                    <div class="sunday">일</div>
                </div>
                <div class="days" id="days-container"></div>
            </div>
            <div class="todo-list">
                <h3>TO DO LIST:</h3>
                <ul class="todo-lines">
                    <li class="todo-line">
                        <div class="checkbox"></div>
                        <input type="text" class="todo-input">
                    </li>
                    <li class="todo-line">
                        <div class="checkbox"></div>
                        <input type="text" class="todo-input">
                    </li>
                    <li class="todo-line">
                        <div class="checkbox"></div>
                        <input type="text" class="todo-input">
                    </li>
                    <li class="todo-line">
                        <div class="checkbox"></div>
                        <input type="text" class="todo-input">
                    </li>
                    <li class="todo-line">
                        <div class="checkbox"></div>
                        <input type="text" class="todo-input">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

 

 

## style.css

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #B4A391;
    color: #2E292A;
}

.container {
    display: flex;
    width: 80%;
    max-width: 1200px;
    background-color: #B4A391;
}

.left-panel, .right-panel {
    flex: 1;
    padding: 20px;
}

.left-panel {
    display: flex;
    justify-content: center;
    align-items: center;
}

#photo-upload {
    display: none;
}

.upload-button {
    background-color: white;
    color: #2E292A;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#photo-preview {
    max-width: 500px;
    max-height: 600px;
    display: none;
}

.calendar {
    text-align: center;
    width: 700px;
    height: 350px; /* 세로 높이 조정 */
    background-color: #B4A391;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.month {
    margin-bottom: 10px;
}

.weekdays, .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.weekdays div {
    font-weight: bold;
}

.weekdays .sunday {
    color: red;
}

.weekdays div, .days div {
    padding: 5px;
}

.days {
    grid-template-rows: repeat(6, 1fr);
}

.days div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40px;
    /* 실선 제거 */
}

.days div .date {
    font-size: 14px;
}

.days div .weather {
    font-size: 12px;
    margin-top: 2px;
}

.weather img {
    width: 16px;
    height: 16px;
}

.todo-list {
    margin-top: 20px;
}

.todo-lines {
    list-style-type: none;
    padding: 0;
}

.todo-line {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
}

.checkbox {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-image: url('static/images/check_box_outline_blank_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg');
    background-size: cover;
    cursor: pointer;
}

.checkbox.checked {
    background-image: url('static/images/check_box_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg');
}

.todo-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #2E292A;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.todo-input:focus {
    outline: none;
}

 

 

## script.js

document.getElementById('photo-upload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('photo-preview');
            preview.src = e.target.result;
            preview.style.display = 'block';
            document.querySelector('.upload-button').style.display = 'none';
            localStorage.setItem('uploadedImage', e.target.result);
        }
        reader.readAsDataURL(file);
    }
});

const yearSelect = document.getElementById('year-select');
const monthSelect = document.getElementById('month-select');
const daysContainer = document.getElementById('days-container');
const todoInputs = document.querySelectorAll('.todo-input');
const checkboxes = document.querySelectorAll('.checkbox');

function populateYears() {
    const currentYear = new Date().getFullYear();
    for (let i = currentYear - 10; i <= currentYear + 10; i++) {
        const option = document.createElement('option');
        option.value = i;
        option.textContent = i;
        yearSelect.appendChild(option);
    }
}

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

function getLastDateOfMonth(year, month) {
    const lastDate = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    return lastDate[month];
}

function populateDays(year, month) {
    daysContainer.innerHTML = '';
    const firstDay = new Date(year, month, 1).getDay();
    const lastDate = getLastDateOfMonth(year, month);

    for (let i = 0; i < firstDay; i++) {
        const emptyDiv = document.createElement('div');
        daysContainer.appendChild(emptyDiv);
    }

    for (let i = 1; i <= lastDate; i++) {
        const dayDiv = document.createElement('div');
        const dateSpan = document.createElement('span');
        dateSpan.className = 'date';
        dateSpan.textContent = i;
        const weatherSpan = document.createElement('span');
        weatherSpan.className = 'weather';
        const weatherIcon = document.createElement('img');
        weatherIcon.src = 'static/images/weather_icon_placeholder.svg'; // 실제 날씨 아이콘 경로로 변경해야 합니다
        weatherSpan.appendChild(weatherIcon);
        dayDiv.appendChild(dateSpan);
        dayDiv.appendChild(weatherSpan);
        if ((firstDay + i - 1) % 7 === 6) {
            dayDiv.style.color = 'red';
        }
        daysContainer.appendChild(dayDiv);
    }

    const totalDays = firstDay + lastDate;
    const emptyDaysNeeded = (6 * 7) - totalDays;

    for (let i = 0; i < emptyDaysNeeded; i++) {
        const emptyDiv = document.createElement('div');
        daysContainer.appendChild(emptyDiv);
    }
}

function saveTodos() {
    const todos = [];
    todoInputs.forEach((input, index) => {
        todos.push({
            text: input.value,
            checked: checkboxes[index].classList.contains('checked')
        });
    });
    localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos')) || [];
    todoInputs.forEach((input, index) => {
        if (todos[index]) {
            input.value = todos[index].text || '';
            if (todos[index].checked) {
                checkboxes[index].classList.add('checked');
            } else {
                checkboxes[index].classList.remove('checked');
            }
        }
    });
}

todoInputs.forEach(input => {
    input.addEventListener('input', saveTodos);
});

checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click', function() {
        this.classList.toggle('checked');
        saveTodos();
    });
});

function loadImage() {
    const uploadedImage = localStorage.getItem('uploadedImage');
    if (uploadedImage) {
        const preview = document.getElementById('photo-preview');
        preview.src = uploadedImage;
        preview.style.display = 'block';
        document.querySelector('.upload-button').style.display = 'none';
    }
}

yearSelect.addEventListener('change', function() {
    populateDays(yearSelect.value, monthSelect.value);
});

monthSelect.addEventListener('change', function() {
    populateDays(yearSelect.value, monthSelect.value);
});

populateYears();
populateDays(new Date().getFullYear(), new Date().getMonth());
loadTodos();
loadImage();

728x90
반응형
저작자표시 비영리 변경금지

'1인 프로젝트 > 나만의 달력' 카테고리의 다른 글

백업...또 백업  (0) 2024.08.09
PostgreSQL  (0) 2024.08.07
Perplexity 사용하기 어렵다...  (0) 2024.08.06
3차 백업  (0) 2024.08.05
1차 백업  (0) 2024.08.05

관련글

티스토리툴바