TIL(Today I Learned) - 오늘의 공부

  1. Javascrip 응용하기 도전과제! 과제 03 까지 완료 (04 진행중)

    • 과제로 자바스크립트와 CSS를 이용하여 간단한 페이지를 만들어 보았다.

    placeholder

    • array.filter()를 이용하여 설명에 “고기”가 들어 있는 목록만 화면에 나오게 설정까지 마쳣다.

    • Dictionary 내의 값을 foreach를 통해 가져오고 이용하는 것을 복습하는 시간이였다.

TIL(Today I Learned) - 학습 과정 중 특이사항

  • 과제에 있는 예시 처럼 스타일을 맞추려고 여러 시행착오를 겪었다.. (텍스트 정렬,padding,margin,ul/li 스타일 조정 등등 )

  • css를 이용한 웹사이트를 주도적으로 만들어보면서 여러 요소들을 찾아보게되어, 그냥 넘어갔던 정보들을 새로 알게 되었다.

  • 다음 문제를 풀고 있는데 input 값을 어떻게 요소검색을 이용해서 받아올 수 있는지에 대해 계속해서 찾아보고 있다.

  • 응용 문제를 풀 때마다 css를 먼저 만들고 javascript 코드를 짜기 시작하는데 전처리 과정(css)이 코딩시간보다 많은 것 같다 ㅎㅎ;

과제제출

3.한식 메뉴 랜더링 하기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>한식 메뉴 렌더링 하기</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        body {
            display: grid;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        ul {
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }

        .menu-item {
            width: 20rem;
            text-align: center;
            border: 1px solid gray;
            border-radius: 5px;
            margin: 20px;
            padding: 0px 10px 0px 10px;
        }
    </style>

    <script>

        const menuItems = [
            { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리', price: '10000', category: "밥" },
            { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리', price: '16000', category: "국/찌개" },
            { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리', price: '8000', category: "반찬" },
            { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식', price: '3000', category: "간식" },
            { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리', price: '6000', category: "반찬" }
        ];

        function filter_Gogi(item) {
            let desc = item.description;
            if (desc.includes('고기')) {
                return true;
            }
            return false;
        }

        const ft_menuItems = menuItems.filter(filter_Gogi);

        $(document).ready(function () {
            ft_menuItems.forEach(i => {
                let temp_html;
                let name = i['name'];
                let desc = i['description'];
                let price = i['price'];
                let categ = i['category'];

                temp_html = `
                        <li class="menu-item">
                        <div style="float: right; height: 5px; ">
                            <p> ₩ ${price}<br>${categ}</p>
                        </div>
                        <div>
                            <h2>${name}</h2>
                            <h4>${desc}</h4>
                        </div>
                        </li>
                        `;
                $('#menu-list').append(temp_html);
            });
        });

    </script>

</head>

<body>
    <h1>한식 메뉴</h1>
    <ul id="menu-list">
    </ul>
</body>

</html>