WebProgramming/practice12-4-store.html at main · huheyun/WebProgramming · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>일기 작성</title>
    <style>
      textarea {
        width: 100%;
        height: 200px;
      }

    </style>
  </head>
  <body>
    <h1>일기쓰기</h1>
    <p id="today"></p>
    <textarea id="diary" placeholder="오늘의 일기를 작성하세요..."></textarea>
    <br />
    <button onclick="saveDiary()">저장</button>
    <button onclick="viewDiary()">보기</button>

    <script>
      // 오늘 날짜 표시
      function displayDate() {
        let today = new Date();
        let dateString =
          today.getFullYear() +
          '.' +
          (today.getMonth() + 1) +
          '.' +
          today.getDate();
        document.getElementById('today').innerHTML = '오늘 ' + dateString;
        return dateString;
      }

      // 일기 저장
      function saveDiary() {
        let date = displayDate();
        let content = document.getElementById('diary').value;
        if (content.trim() === '') {
          alert('일기 내용을 입력해주세요.');
          return;
        }

        let dates = localStorage.getItem('diaryDates') || '';
        let contents = localStorage.getItem('diaryContents') || '';

        if (dates && contents) {
          dates += '\n';
          contents += '\n';
        }

        dates += date;
        contents += content;

        localStorage.setItem('diaryDates', dates);
        localStorage.setItem('diaryContents', contents);

        alert('일기가 저장되었습니다.');
        document.getElementById('diary').value = '';
      }

      // 일기 보기 창 열기
      function viewDiary() {
        window.open('prac12-4-view.html', '_blank', 'width=600,height=400');
      }

      // 페이지 로드 시 날짜 표시
      window.onload = displayDate;
    </script>
  </body>
</html>