카테고리 없음

Part 4. 수익형 웹 서비스 구현하기(3) - 나만을 위한 일기장 만들기

digital520 2024. 4. 4. 16:14

4-1. 일기장 미리보기

4-2. 일기장의 프로그래밍적 원리 이해하기

사용자로부터 입력받을 값

우리는 날짜마다 한 줄 일기와 기분을 저장할 수 있는 일기장을 만드려고 합니다. 하루치의 일기에 저장되는 값들은 다음과 같습니다.

  • 날짜 (년-월-일)
  • 한 줄 텍스트
  • 기분 (행복, 보통, 슬픔) - HTML에서 기본 제공하는 Select box
    • 또는 이모지(emoji) 😠 😞 😐 😊 😃 - 오픈소스 라이브러리 사용

일기장을 저장하는 방법

우리는 JavaScript의 로컬 스토리지(Local storage)를 활용하여 사용자가 입력한 일기장을 저장할 겁니다. 로컬 스토리지는 여러분들의 브라우저에 저장되므로 다른 컴퓨터 또는 기기에서 접속할 경우 저장한 값을 볼 수 없다는 단점이 있지만 그만큼 안전하다는 장점도 있지요. 또한 로그인 기능이 필요하지 않아 사용자 접근성이 좋습니다.

로컬 스토리지를 사용하는 방법은 다음과 같습니다.

localStorage.setItem("test-key", "테스트입니다");

위의 코드는 test-key라는 공간(Key)에 “테스트입니다”라는 텍스트를 저장하라는 코드입니다.

저장한 값을 꺼내서 사용하고 싶을 때는 아래와 같은 코드를 사용합니다. test-key라는 키에서 값을 꺼내 storage 변수에 저장합니다.

var storage = localStorage.getItem("test-key");

로컬 스토리지에 저장된 값을 확인하는 방법

개발자 도구를 사용하여 로컬 스토리지에 저장된 값을 확인, 수정, 삭제할 수 있습니다. 개발자 도구를 열기 위해 Live Preview 오른쪽 상단의 메뉴 버튼을 누르고 Devtools 창 열기를 선택합니다.

상단 메뉴의 Application를 선택하고 좌측 메뉴의 Storage - Local Storage - http://127.0.0.1:3000 을 선택하여 저장된 값을 확인할 수 있습니다.

💡 가끔 저장된 값이 보이지 않을 때가 있는데 Live Preview의 버그때문에 그럴 수 있습니다. 저장된 값이 보이지 않을 때는 개발자 도구를 닫고 웹페이지의 새로고침 버튼을 누른 후 다시 실행해주세요. 만약 계속해서 보이지 않는다면 Live Preview 대신 크롬 브라우저를 사용해서 개발하셔도 무방합니다.

  • 새로고침: 마우스 오른쪽 버튼 - Refresh
  • 편집: 마우스 오른쪽 버튼 - Edit
  • 삭제: 마우스 오른쪽 버튼 - Delete

개발자 콘솔에서 값 출력하기

거의 모든 웹 브라우저는 개발자를 위한 개발자 콘솔 기능을 지원합니다. 개발자 도구 상단 Console 메뉴에서 접근 가능합니다. 아래 코드를 입력하고 콘솔에 접속합니다.

console.log("Hello World!");

 

로컬 스토리지 test-key에 저장된 값을 개발자 콘솔에서 출력할 수 있습니다.

var storage = localStorage.getItem("test-key");
console.log(storage);

4-3. HTML로 일기장 틀 만들기

보일러플레이트

새로운 프로젝트를 시작할 때는 항상 보일러플레이트 코드부터 시작합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

 

script.js

$(document).ready(function() {

});

 

style.css

/* 비어있음 */

사용자 입력 구현하기

사용자로부터 입력받을 폼을 구현합니다. 처음보는 요소가 두 개 있습니다.

<input type="date" id="date" />
<input type="text" id="text" />

<div id="emoji"></div>

<select id="mood">
    <option value="행복">행복</option>
    <option value="보통">보통</option>
    <option value="슬픔">슬픔</option>
</select>

<button type="button" id="save">저장하기</button>

<div id="result"></div>

  1. input type=”date”
    1. 날짜를 입력받을 수 있습니다. 달력 버튼을 눌러 사용자가 날짜를 선택할 수 있습니다.
    2. YYYY-MM-DD (e.g. 2022-11-16) 형식의 텍스트로 받을 수 있습니다.

  1. select box
    1. 사용자로부터 여러개의 입력 중에 1개의 입력을 선택하도록 할 수 있습니다.
    2. value 인자를 통해 사용자가 선택한 값을 받아올 수 있습니다.

4-4. 로컬저장소를 활용한 일기장 내용 저장하기

사용자 입력값 받아와 출력하기

save 버튼을 누르면 date, text, mood 로부터 입력값을 받아와 result에 그대로 뿌려주겠습니다. 일기장의 내용을 임시로 p 태그로 감싸서 출력할게요.

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    var diary = `<p>${date}: ${text} - ${mood}</p>`;

    $("#result").html(diary);
}

$(document).ready(function() {
		$("#save").click(saveHandler);
});

로컬저장소에 저장하기

사용자가 입력한 일기를 로컬저장소에 저장하는 방법은 간단합니다. diary 키 일기를 저장합니다.

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    var diary = `<p>${date}: ${text} - ${mood}</p>`;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

이렇게 하면 최근에 사용자가 입력한 값이 저장될겁니다. 개발자 도구에서 저장소를 한 번 볼까요?

저장에 성공했습니다. 근데 이 방식에는 문제가 있군요. 지금의 코드는 최근 입력한 일기를 저장할 수는 있지만 과거의 일기를 함께 저장하지는 못합니다. 이 문제는 나중에 해결하도록 하죠!

저장된 일기 출력하기

컴퓨터를 껐다 켜도 과거의 일기를 다시 볼 수 있도록 저장된 일기를 출력할 시간입니다. localStorage의 getItem() 함수를 사용하여 일기를 가져옵니다. 그리고 result에 출력합니다.

💡 saveHandler() 함수 안의 diary 변수에서 var를 삭제합니다. 그리고 최상단에 diary 변수를 빈칸으로 정의합니다. 이렇게 하면 diary 변수를 모든 함수에서 사용할 수 있도록 설정하는 방법인데 이런 변수를 “전역 변수”라고 합니다.

var diary = "";

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    diary = `<p>${date}: ${text} - ${mood}</p>`;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

이렇게 코드를 작성하면 과거의 일기가 잘 보이네요.

과거의 일기를 지우지 않고 누적시키기

위의 코드로 일기를 저장하고 저장된 일기를 출력시키는 것까지 완료했습니다. 문제점은 오늘 일기를 작성하면 과거의 일기가 지워지고 오늘 일기만 저장된다는 점인데요. 이 문제를 해결하는 방법은 정말 간단합니다. 일기를 저장하기전에 과거의 일기를 더해서(+) 저장하면 끝!

diary = `<p>${date}: ${text} - ${mood}</p>` + diary;

이렇게 하면 오늘의 일기 뒤에 과거의 일기가 더해져서 저장된답니다. 이렇게 하면 최신 일기부터 위에서 아래로 보여지겠죠! 한 번 해볼까요?

만약 과거 일기부터 위에서 보고싶다면 아래와 같이 코드를 수정합니다.

diary = diary + `<p>${date}: ${text} - ${mood}</p>`;

null 예외 처리하기

위의 스크린샷에서도 볼 수 있지만 위의 코드로 처음 일기를 작성할 경우 null 값이 가장 처음에 들어가는 것을 볼 수 있습니다. null 값이 저장되는 이유는 첫 일기 작성 전에 localStorage.getItem(”diary”) 코드로 과거의 일기를 불러올 때 로컬스토리지에 저장된 값이 하나도 없어서 생기는 문제인데요. 이 문제를 해결하기 위해 아래와 같이 코드를 작성합니다.

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

 

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>일기장</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>일기장</h1>

        <input type="date" id="date" />
        <input type="text" id="text" />

        <select id="mood">
            <option value="행복">행복</option>
            <option value="보통">보통</option>
            <option value="슬픔">슬픔</option>
        </select>

        <button type="button" id="save">저장하기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
var diary = "";

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    diary = `<p>${date}: ${text} - ${mood}</p>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

4-5. Bootstrap을 활용한 일기장 디자인 꾸미기

입력 꾸미기

이번에는 Bootstrap의 Floating labels를 이용하여 멋드러지게 꾸며보겠습니다.

Floating labels 문서: https://getbootstrap.com/docs/5.2/forms/floating-labels/

 

Floating labels

Create beautifully simple form labels that float over your input fields.

getbootstrap.com

<div class="row g-2 mb-3">
    <div class="col-md">
        <div class="form-floating">
            <input type="date" class="form-control" id="date">
            <label for="date">오늘 날짜를 입력해주세요</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select" id="mood">
                <option value="행복">행복</option>
                <option value="보통">보통</option>
                <option value="슬픔">슬픔</option>
            </select>
            <label for="mood">오늘 기분은 어땠나요?</label>
        </div>
    </div>
</div>

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="text">
    <label for="text">오늘 있었던 일을 기록하세요</label>
</div>

<button type="button" id="save" class="btn btn-primary">저장하기</button>

기록 꾸미기

기록 부분은 List group의 Custom content로 꾸며보겠습니다. 주의해야 할 점은 일기장 기록의 경우 JavaScript 부분의 코드 수정도 필요하단 점 잊지마시구요. index.html 에 미리 작성한 후 script.js로 옯기시면 편합니다.

List group - Custom content 문서: https://getbootstrap.com/docs/5.2/components/list-group/#custom-content

 

List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

getbootstrap.com

 

기본 List group 코드

<div class="list-group" id="result">
    <a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <small>And some small print.</small>
    </a>
</div>

 

index.html

<div class="list-group" id="result"></div>

 

script.js

diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">${text}</h5>
        <small>${date}</small>
    </div>
    <small>${mood}</small>
</a>` + diary;

 

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>일기장</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>일기장</h1>

        <div class="row g-2 mb-3">
            <div class="col-md">
                <div class="form-floating">
                    <input type="date" class="form-control" id="date">
                    <label for="date">오늘 날짜를 입력해주세요</label>
                </div>
            </div>
            <div class="col-md">
                <div class="form-floating">
                    <select class="form-select" id="mood">
                        <option value="행복">행복</option>
                        <option value="보통">보통</option>
                        <option value="슬픔">슬픔</option>
                    </select>
                    <label for="mood">오늘 기분은 어땠나요?</label>
                </div>
            </div>
        </div>

        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="text">
            <label for="text">오늘 있었던 일을 기록하세요</label>
        </div>

        <button type="button" id="save" class="btn btn-primary mb-3">저장하기</button>

        <div class="list-group" id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

 

script.js

var diary = "";

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${text}</h5>
            <small>${date}</small>
        </div>
        <small>${mood}</small>
    </a>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

4-6. 오픈소스 라이브러리 사용하기

오픈소스 라이브러리 검색하기

우리는 일기에 기분을 쓸 때 그 날의 기분을 행복, 보통, 슬픔으로 표현했는데 이것을 이모지(😠 😞 😐 😊 😃)로 표현할 수 있다면 더 멋지겠죠? 다른 사람들이 만들어놓은 오픈소스 라이브러리를 검색하여 만들어보겠습니다!

구글에 “jquery emoji rating plugin”이라고 검색합니다.

가장 상단에 나오는 Basic Emoji Rating Plugin For jQuery - EmojiRating 글에 들어가보도록 하겠습니다.

플러그인 페이지: https://www.jqueryscript.net/other/Emoji-Rating-Plugin-jQuery.html

 

Basic Emoji Rating Plugin For jQuery - EmojiRating

EmojiRating is a small yet customizable jQuery product/post/article rating plugin that uses Emoticons for rating symbols.

www.jqueryscript.net

이 플러그인은 마우스로 이모지를 선택하여 기분을 표현할 수 있는 훌륭한 플러그인이네요. 적용하는 방법도 나와있고 “Go to website” 버튼을 눌러 소스코드를 확인할 수도 있습니다.

소스코드: https://github.com/mrmins/EmojiRaiting

emoji.js 파일 또는 emoji.min.js 파일을 눌러 다운로드합니다. 그리고 그 파일을 우리가 만든 part4 폴더로 복사합니다

💡 emoji.js 와 emoji.min.js 파일의 내용은 완전히 동일합니다. 차이가 있다면 emoji.min.js는 압축을 해서 용량이 더 작아요.

이모지 플러그인 적용하기

이모지 플러그인을 불러오기 위해 아래쪽에 다음과 같이 작성합니다. (순서 중요!)

 

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="emoji.min.js"></script>
<script src="script.js"></script>

 

GitHub에 나와있는 문서를 참고하여 아래와 같이 코드를 작성합니다.

<div class="row g-2 mb-3">
    <div class="col-md">
        <div class="form-floating">
            <input type="date" class="form-control" id="date">
            <label for="date">오늘 날짜를 입력해주세요</label>
        </div>
    </div>
    <div class="col-md">
        <small style="color: gray;">오늘 기분은 어땠나요?</small>
        <div id="emoji"></div>
    </div>
</div>

 

script.js

$(document).ready(function() {
    $("#emoji").emoji();

		... 생략 ...
});

 

원하는 이모지로 바꾸기

여러분들이 원하는 이모지로 바꿀 수 있는 기능이 있습니다. 먼저 아래와 같이 작성하고 emojis 변수안에 있는 이모지를 바꿔줍니다. 아래 사이트에서 이모지를 복사할 수 있습니다. 여러분들이 원하는 이모지로 바꿔보세요!

Get Emoji: https://getemoji.com/

 

GetEmoji - Copy & Paste All Emojis From The Emoji Keyboard - No apps required

✂️ Copy and 📋 Paste Emoji 👍 No apps required Emojis are supported on iOS, Android, macOS, Windows, Linux and ChromeOS. Copy and paste emojis for Twitter, Facebook, Slack, Instagram, Snapchat, Slack, GitHub, Instagram, WhatsApp and more....

getemoji.com

var emojis = ["💙","💚","💛","🧡","❤️"]

... 생략 ...

$(document).ready(function() {
    $("#emoji").emoji({
        emojis: emojis
    });

... 생략 ...

 

기본 이모지는 다음과 같습니다

var emojis = ["😠","😞","😐","😊","😃"];

 

이모지를 클릭했을 때 기분값 저장하기

이모지가 화면에 출력되고 여러분들 마음대로 선택할 수 있다면 라이브러리 적용은 완료되었습니다. 이제 이모지로부터 값을 전달받아 일기가 저장될 때 로컬스토리에 함께 저장하면 되겠죠?

사용자가 이모지를 클릭했을 때 실행할 함수를 아래와 같이 지정할 수 있습니다.

function emojiSelected(event, value) {
    console.log(value);
}

 

$("#emoji").emoji({
    emojis: emojis,
    callback: emojiSelected
});

 

개발자 콘솔을 열어 이모지를 클릭하면서 로그를 확인하면 1 ~ 5 사이의 값이 출력되는 것을 확인할 수 있죠. 우리는 다음과 같은 코드를 작성하여 emoji 변수에 사용자가 선택한 이모지를 저장할 수 있습니다.

var emoji = "😐";

function emojiSelected(event, value) {
    if (value == 1) {
        emoji = "😠";
    } else if (value == 2) {
        emoji = "😞";
    } else if (value == 3) {
        emoji = "😐";
    } else if (value == 4) {
        emoji = "😊";
    } else if (value == 5) {
        emoji = "😃";
    }
}

 

일기를 로컬스토리지에 저장할 때 mood 대신 emoji를 저장하도록 코드를 수정합니다. mood는 이제 필요없으니 삭제할게요!

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();

    diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${text}</h5>
            <small>${date}</small>
        </div>
        <small>${emoji}</small>
    </a>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

4-7. 기타 기능 구현하기

입력이 비어있을 때 저장하지 않도록 처리하기

사용자가 아무것도 입력하지 않은 상태로 저장하기 버튼을 누르면 아래와 같이 저장됩니다.

 

값이 비어있을 때는 저장되지 않도록 예외처리 해주죠. saveHandler()에 아래 코드를 작성합니다.

if (date == "" || text == "") {
    return false;
}

 

위 코드는 date에 빈값이 있거나(OR) 텍스트에 빈값이 있으면 실행을 종료하라는 코드입니다.

저장 후 값 초기화하기

지금의 일기장은 값을 저장하고 난 후 마지막에 입력한 값이 그대로 남아있습니다. 사용자가 [저장하기] 버튼을 누르면 입력한 값이 초기화될 수 있도록 코드를 작성해보죠! saveHandler() 마지막에 다음과 같은 코드를 작성합니다.

$("#date").val("");
$("#text").val("");

 

홈페이지와 연결하기

서비스를 완성했으니 main.html과 연결하겠습니다. part2, part3의 index.html에도 일기장 링크를 추가해야 합니다.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/main.html">빵형의 홈페이지</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/main.html">홈</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/part3/index.html">대출이자 계산기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/part4/index.html">일기장</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

 

stylecss

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

 

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>일기장</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/main.html">빵형의 홈페이지</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="/main.html">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part3/index.html">대출이자 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/part4/index.html">일기장</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container">
        <h1>일기장</h1>

        <div class="row g-2 mb-3">
            <div class="col-md">
                <div class="form-floating">
                    <input type="date" class="form-control" id="date">
                    <label for="date">오늘 날짜를 입력해주세요</label>
                </div>
            </div>
            <div class="col-md">
                <small style="color: gray;">오늘 기분은 어땠나요?</small>
                <div id="emoji"></div>
            </div>
        </div>

        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="text">
            <label for="text">오늘 있었던 일을 기록하세요</label>
        </div>

        <button type="button" id="save" class="btn btn-primary mb-3">저장하기</button>

        <div class="list-group" id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="emoji.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

 

script.js

var emoji = "😐";
var emojis = ["😠","😞","😐","😊","😃"];
var diary = "";

function emojiSelected(event, value) {
    if (value == 1) {
        emoji = "😠";
    } else if (value == 2) {
        emoji = "😞";
    } else if (value == 3) {
        emoji = "😐";
    } else if (value == 4) {
        emoji = "😊";
    } else if (value == 5) {
        emoji = "😃";
    }
}

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();

    if (date == "" || text == "") {
        return false;
    }

    diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${text}</h5>
            <small>${date}</small>
        </div>
        <small>${emoji}</small>
    </a>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);

    $("#date").val("");
    $("#text").val("");
}

$(document).ready(function() {
    $("#emoji").emoji({
        emojis: emojis,
        callback: emojiSelected
    });

    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

 

style.css

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

'카테고리 없음'의 다른글

  • 현재글Part 4. 수익형 웹 서비스 구현하기(3) - 나만을 위한 일기장 만들기

티스토리툴바