HTML,CSS,Js - 메모장 만들기. (+저장 기능)

- 사용템플릿

(1) Visual Studio Code

(2) Github
(3) Netlify

 

- 완성된 사이트 주소   

https://warm-wisp-80c7da.netlify.app/

간단한 메모장

 

- 완성화면

 

(1) 시작화면

 

(2) 메모 입력화면

 

(3) 저장화면

 

(4) 내 컴퓨터에 저장 화면

 

(5) 저장된 모습(메모장 사이즈에 맞게 저장)

 

- 핵심 코드 설명

 

(1) HTML 부분

<!-- 메모 제목 입력 필드 -->
            <div class="mb-3">
                <label for="noteTitle" class="form-label">제목</label>
                <input type="text" class="form-control" id="noteTitle" placeholder="제목을 입력하세요">
            </div>
            <!-- 메모 내용 입력 필드 -->
            <div class="mb-3">
                <label for="noteInput" class="form-label">메모</label>
                <textarea class="form-control" id="noteInput" rows="5" placeholder="메모를 입력하세요"></textarea>
            </div>
            <!-- 저장 및 전체 지우기 버튼 -->
            <div class="d-flex justify-content-between">
                <button id="saveButton" class="btn btn-primary flex-grow-1 me-2">저장</button>
                <button id="clearAllButton" class="btn btn-secondary flex-grow-1">전체 지우기</button>
            </div>
            <!-- 저장된 메모 목록 -->
            <h2 class="mt-5 mb-4 text-center">저장된 메모</h2>
            <div id="savedNotes" class="mt-3"></div>

(2) CSS 부분

/* 삭제 및 저장 버튼 스타일 */
.delete-button, .download-button {
    position: relative;
}

/* 저장 버튼 위치 조정 */
.download-button {
    order: -1; /* 저장 버튼을 삭제 버튼 왼쪽으로 이동 */
}

 

(3) Js 부분

// 특정 메모를 PNG 파일로 저장하는 함수
    window.downloadNoteAsImage = function (index) {
        const notes = JSON.parse(localStorage.getItem('notes')) || []; // 로컬 스토리지에서 메모 불러오기
        const note = notes[index]; // 해당 인덱스의 메모 가져오기
        const noteElement = document.createElement('div'); // 메모 요소 생성
        noteElement.classList.add('note', note.color); // 메모 요소에 클래스 추가
        noteElement.style.position = 'absolute'; // 화면에서 보이지 않도록 위치 설정
        noteElement.style.left = '-9999px';
        noteElement.innerHTML = `
            <div class="note-title">${note.title}</div>
            <div class="note-content">${note.content}</div>
        `; // 메모 내용 추가
        document.body.appendChild(noteElement); // 임시로 메모 요소를 문서에 추가
        html2canvas(noteElement).then(canvas => {
            const link = document.createElement('a'); // 다운로드 링크 생성
            link.href = canvas.toDataURL('image/png'); // 캔버스를 이미지 데이터로 변환
            link.download = `${note.title}.png`; // 파일명 설정
            link.click(); // 다운로드 링크 클릭
            document.body.removeChild(noteElement); // 임시로 추가한 메모 요소 제거
        });
    }