완성한 코드

한식 메뉴 렌더링

fpzmfks 2024. 7. 8. 18:43
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>골라잡는 한식 차림표</title>
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        .searchbox {
            margin: 30px auto;
            padding: 0 20px;

            text-align: center;
            display: flex inline-block;
        }

        .searchbox>input {
            margin: 10px;
        }

        .btn {
            margin: 10px;

            width: 80px;
            height: 50px;
        }

        .mainbox {
            padding: 10px;
            display: flex;
        }

        .contentm {
            display: inline-block;

            width: 600px;
            padding: 30px;
            margin: auto;
            background-color: rgb(227, 201, 82);
            border: 5px solid red;
            border-radius: 5px;
        }

        .contentd {
            display: inline-block;
            display: none;

            width: 600px;
            padding: 30px;
            margin: auto;
            background-color: rgb(227, 201, 82);
            border: 5px solid red;
            border-radius: 5px;
        }

        .title {
            text-align: center;
        }

        .main {
            margin: 10px 0 20px 10px;
        }

        ul {
            padding-left: 0;
            margin-left: 0;
        }
    </style>
</head>

<body>
    <div class="searchbox">
        <button onclick="changem()" type="button" class="btn btn-danger" id="postingbtn">식사</button>
        <button onclick="changed()" type="button" class="btn btn-danger" id="postingbtn">간식</button><br><br>
        <input type="text" id="inputbox" placeholder="검색어를 입력하세요">
        <button type="button" id="searchbtn" class="btn btn-secondary">검색</button><br>
        <div id="outputbox">검색 결과를 확인하세요</div>
    </div>


    <div class="mainbox">
        <div class="contentm" id="contentm">
            <h1 class="title">식사차림표</h1><br>
            <ul id="main-list"></ul>
        </div>
        <div class="contentd" id="contentd">
            <h1 class="title">간식차림표</h1><br>
            <ul id="dessert_list"></ul>
        </div>
    </div>
</body>
<script>
    let mainItems = [
        { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
        { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
        { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
        { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국 요리' },
        { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
    ];

    let dessertItems = [
        { name: '약과', description: '밀가루와 꿀로 만든 한국의 전통 과자' },
        { name: '율란', description: '밤을 익히고 꿀에 조려 만든 한국의 전통 과자' },
        { name: '인절미', description: '찐 떡을 절구로 치고 콩고물을 버무려 만든 쫄깃한 한국의 전통 떡' },
        { name: '엿', description: '곡식에 엿기름을 섞고 졸여서 만든 한국의 전통 과자' }
    ];


    mainItems.forEach((item) => {
        let name = item.name;
        let description = item.description;

        let temp_html = `
        <li class="main">
            <h2>${name}</h2>
            <p>${description}</p>
        </li>`
        $("#main-list").append(temp_html);

    });

    dessertItems.forEach((item) => {
        let name = item.name;
        let description = item.description;

        let temp_html = `
        <li class="main">
            <h2>${name}</h2>
            <p>${description}</p>
        </li>`
        $("#dessert_list").append(temp_html);

    });

    function changed() {
        contentm.style.display = "none";
        contentd.style.display = "flex";
        contentd.style.display = "inline-block";

    }

    function changem() {
        contentd.style.display = "none";
        contentm.style.display = "flex";
        contentm.style.display = "inline-block";

    }


    $('#searchbtn').click(function () {

        $("#outputbox").empty();

        let searchresultm = mainItems.filter((d) => {
            return d.name == $('#inputbox').val();
        });

        let searchresultd = dessertItems.filter((d) => {
            return d.name == $('#inputbox').val();
        });

        searchresultm.forEach((item) => {
            let name = item.name;
            let description = item.description;

            let temp_html = `
            <h2>${name}</h2>
            <p>${description}</p>`

            $("#outputbox").append(temp_html);
        })

        searchresultd.forEach((item) => {
            let name = item.name;
            let description = item.description;

            let temp_html = `
            <h2>${name}</h2>
            <p>${description}</p>`

            $("#outputbox").append(temp_html);
        })

    });

</script>

</html>

'완성한 코드' 카테고리의 다른 글

영화 팀 프로젝트 리뷰 파트  (0) 2024.08.13
영화 카드 리스트 js파일*2  (0) 2024.07.26
자기소개 페이지 메인 프레임(내 파트만)  (0) 2024.07.17
To Do List(본 페이지/간단하게)  (0) 2024.07.12
숫자 기억 게임  (0) 2024.07.08

'완성한 코드'의 다른글

  • 현재글한식 메뉴 렌더링

관련글

티스토리툴바