고민 해결 웹앱 개발하기: PHP와 JavaScript를 활용한 마법의 책

여러분은 매일 어떤 고민을 하고 계신가요?

오늘 소개할 프로그램은 여러분의 고민을 해결해 줄 마법의 책입니다.

https://wizardofcode.kr/wg/happybook

이 프로그램은 PHP와 JavaScript를 사용하여 구현되었으며, 반응형 디자인으로 모바일에서도 완벽하게 작동합니다.

프로그램 소개

“마법의 고민 해결 책”은 사용자가 고민을 생각하고 책을 열면, 그 고민을 해결해 줄 만한 명언이나 조언을 제공하는 웹 애플리케이션입니다.

이 프로그램은 간단한 인터페이스와 직관적인 사용법을 제공하여 누구나 쉽게 사용할 수 있습니다.

구동원리

사용자가 고민을 생각하고 “열어보기” 버튼을 클릭합니다.
“열어보기” 버튼을 클릭하면 약 1초의 생각할 시간을 카운팅 후에 책이 열리는 애니메이션 효과가 나타납니다.
책이 열리면 고민을 해결해 줄 만한 명언이 책 페이지에 표시됩니다.

핵심 코드 설명

HTML 부분

HTML 구조는 간단합니다.

첫 페이지에는 책 표지가 표시되고, 사용자가 고민을 생각하는데 도움을 주는 문구와 “열어보기” 버튼이 있습니다.

<div class="book-cover" id="bookCover">
    <div class="book-cover-content">
        <h1>Happy Book</h1>
        <p>구체적이고 행동과 목표에 초점을 맞춘 고민을 생각해보세요.</p>
        <button id="openBookBtn">열어보기</button>
    </div>
</div>

css 부분

CSS는 반응형 디자인을 적용하여 모바일에서도 잘 보이도록 했습니다.

또한, 책이 열리는 애니메이션 효과를 구현했습니다.

.book-cover {
    background: #001f3f;
    border: 2px solid #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    width: 300px;
    height: 400px;
    text-align: center;
    transition: transform 1s, opacity 1s;
    transform-style: preserve-3d;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript 부분

JavaScript는 “열어보기” 버튼 클릭 시 책이 열리는 애니메이션과 명언을 불러오는 기능을 담당합니다.

document.getElementById('openBookBtn').addEventListener('click', function() {
    var bookCover = document.getElementById('bookCover');
    bookCover.style.transform = 'rotateY(-180deg)';
    bookCover.style.opacity = '0';

    setTimeout(function() {
        bookCover.classList.add('hidden');
        document.getElementById('modal').style.display = 'flex';

        setTimeout(function() {
            fetch('get_quote.php')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('modal').style.display = 'none';
                    document.getElementById('answer').innerText = data;
                    document.getElementById('result').style.display = 'block';
                    document.querySelector('.book-opened').classList.add('show');
                });
        }, 3000);
    }, 1000);
});

PHP 부분

PHP는 명언 목록에서 무작위로 하나를 선택하여 반환합니다.

$quotes = [
    "고민은 시간만 늦출뿐 당장 실행해보자.",
    "시간은 새와 같다 날아가기 전에 잡아라.",
    // 추가 명언들...
];

echo $quotes[array_rand($quotes)];

마치며

이 프로그램은 간단하면서도 유용합니다.

여러분의 간단한 고민을 해결하는 데 큰 도움이 될 것입니다.

여러분도 직접 이 프로그램을 만들어보고, 더 나은 기능을 추가해보세요.

Wizard of Code