오늘은 식당 메뉴판을 만들어보겠습니다.
맨 아래에 이미지 파일들을 원하는 위치에 다운받으세요.
저의 이미지 경로는 ./images/이미지.jpg 입니다.
js코드에서 중요한 함수가 3가지 나옵니다.
1. map 함수는 배열의 각 요소에 대해 주어진 함수를 호출 하고, 그 결과를 모아 새로운 배열을 반환합니다.
2. filter 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고 그 함수가 true를 반환하는 모든 요소로 새로운 배열을 생성합니다. 이를 통해 특정 조건을 만족하는 요소들만 필터링할 수 있습니다.
3. reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값(누적값)을 생성합니다. 이 함수는 배열 내의 모든 요소를 하나로 결합하는데 사용됩니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="menu">
<!-- title -->
<div class="title">
<h2>our menu</h2>
<div class="underline"></div>
</div>
<!-- filter buttons -->
<div class="btn-container">
<!-- <button type="button" class="filter-btn" data-id="all">all</button>
<button type="button" class="filter-btn" data-id="breakfast">
breakfast
</button>
<button type="button" class="filter-btn" data-id="lunch">lunch</button>
<button type="button" class="filter-btn" data-id="shakes">
shakes
</button> -->
</div>
<!-- menu items -->
<div class="section-center">
<!-- single item -->
<article class="menu-item">
<img src="./menu-item.jpeg" alt="menu item" class="photo" />
<div class="item-info">
<header>
<h4>buttermilk pancakes</h4>
<h4 class="price">$15</h4>
</header>
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</article>
<!-- end of single item -->
<!-- single item -->
<article class="menu-item">
<img src="./menu-item.jpeg" alt="menu item" class="photo" />
<div class="item-info">
<header>
<h4>buttermilk pancakes</h4>
<h4 class="price">$15</h4>
</header>
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</article>
<!-- end of single item -->
<!-- single item -->
<article class="menu-item">
<img src="./menu-item.jpeg" alt="menu item" class="photo" />
<div class="item-info">
<header>
<h4>buttermilk pancakes</h4>
<h4 class="price">$15</h4>
</header>
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</article>
<!-- end of single item -->
</div>
</section>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
app.js
// 메뉴 아이템 데이터 배열
const menu = [
// 각 메뉴 아이템은 id, title, category, price, img, desc 속성을 가집니다.
{
id: 1,
title: "buttermilk pancakes",
category: "breakfast",
price: 15.99,
img: "./images/item-1.jpeg",
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
},
{
id: 2,
title: "diner double",
category: "lunch",
price: 13.99,
img: "./images/item-2.jpeg",
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
},
{
id: 3,
title: "godzilla milkshake",
category: "shakes",
price: 6.99,
img: "./images/item-3.jpeg",
desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,
},
{
id: 4,
title: "country delight",
category: "breakfast",
price: 20.99,
img: "./images/item-4.jpeg",
desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,
},
{
id: 5,
title: "egg attack",
category: "lunch",
price: 22.99,
img: "./images/item-5.jpeg",
desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,
},
{
id: 6,
title: "oreo dream",
category: "shakes",
price: 18.99,
img: "./images/item-6.jpeg",
desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,
},
{
id: 7,
title: "bacon overflow",
category: "breakfast",
price: 8.99,
img: "./images/item-7.jpeg",
desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,
},
{
id: 8,
title: "american classic",
category: "lunch",
price: 12.99,
img: "./images/item-8.jpeg",
desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut `,
},
{
id: 9,
title: "quarantine buddy",
category: "shakes",
price: 16.99,
img: "./images/item-9.jpeg",
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
},
{
id: 10,
title: "bison steak",
category: "dinner",
price: 22.99,
img: "./images/item-10.jpeg",
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
},
];
// 페이지에 메뉴 아이템과 버튼을 동적으로 추가하기 위한 부모 요소 선택
const sectionCenter = document.querySelector(".section-center");
const btnContainer = document.querySelector(".btn-container");
// 페이지가 로드될 때 모든 메뉴 아이템을 표시
window.addEventListener("DOMContentLoaded", function () {
diplayMenuItems(menu);
displayMenuButtons();
});
function diplayMenuItems(menuItems) {
let displayMenu = menuItems.map(function (item) {
// 메뉴 아이템을 HTML 문자열로 변환
return `<article class="menu-item">
<img src=${item.img} alt=${item.title} class="photo" />
<div class="item-info">
<header>
<h4>${item.title}</h4>
<h4 class="price">$${item.price}</h4>
</header>
<p class="item-text">
${item.desc}
</p>
</div>
</article>`;
});
displayMenu = displayMenu.join(""); // HTML 문자열들을 하나의 문자열로 연결
sectionCenter.innerHTML = displayMenu; // 연결된 HTML 문자열을 섹션의 내용으로 설정
}
function displayMenuButtons() {
// 메뉴배열에 카테고리를 중복되지 않게 추출함.
const categories = menu.reduce(
function (values, item) {
//console.log(values);
if (!values.includes(item.category)) {
values.push(item.category);
}
return values;
},
["all"]
);
// 각 카테고리에 대한 버튼 HTML을 생성
const categoryBtns = categories
.map(function (category) {
return `<button type="button" class="filter-btn" data-id=${category}>
${category}
</button>`;
})
.join("");
btnContainer.innerHTML = categoryBtns; // 생성된 버튼들을 HTML에 추가
const filterBtns = btnContainer.querySelectorAll(".filter-btn");
// 각 버튼에 클릭 이벤트 리스너 추가
filterBtns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
const category = e.currentTarget.dataset.id; // 현재 클릭한 버튼의 카테고리를 가져옴
// menu배열에서 선택한 카테고리 아이템 필터링 .
const menuCategory = menu.filter(function (menuItem) {
if (menuItem.category === category) {
return menuItem;
}
});
// 만약 all 카테고리를 클릭했을 경우 메뉴 아이템 전체를 보여줌
if (category === "all") {
diplayMenuItems(menu);
} else {
// 선택한 카테고리만 보여줌.
diplayMenuItems(menuCategory);
}
});
});
}
styles.css
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: #49a6e9;
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-gold: #c59d5f;
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img:not(.logo) {
width: 100%;
}
img {
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: transparent;
color: var(--clr-black);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid var(--clr-black);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
}
.btn:hover {
color: var(--clr-white);
background: var(--clr-black);
}
/* section */
.section {
padding: 5rem 0;
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Menu
===============
*/
.menu {
padding: 5rem 0;
}
.title {
text-align: center;
margin-bottom: 2rem;
}
.underline {
width: 5rem;
height: 0.25rem;
background: var(--clr-gold);
margin-left: auto;
margin-right: auto;
}
.btn-container {
margin-bottom: 4rem;
display: flex;
justify-content: center;
}
.filter-btn {
background: transparent;
border-color: var(--clr-gold);
font-size: 1rem;
text-transform: capitalize;
margin: 0 0.5rem;
letter-spacing: 1px;
border-radius: var(--radius);
padding: 0.375rem 0.75rem;
color: var(--clr-gold);
cursor: pointer;
transition: var(--transition);
}
.filter-btn:hover {
background: var(--clr-gold);
color: var(--clr-white);
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
display: grid;
gap: 3rem 2rem;
justify-items: center;
}
.menu-item {
display: grid;
gap: 1rem 2rem;
max-width: 25rem;
}
.photo {
object-fit: cover;
height: 200px;
border: 0.25rem solid var(--clr-gold);
border-radius: var(--radius);
}
.item-info header {
display: flex;
justify-content: space-between;
border-bottom: 0.5px dotted var(--clr-grey-5);
}
.item-info h4 {
margin-bottom: 0.5rem;
}
.price {
color: var(--clr-gold);
}
.item-text {
margin-bottom: 0;
padding-top: 1rem;
}
@media screen and (min-width: 768px) {
.menu-item {
grid-template-columns: 225px 1fr;
gap: 0 1.25rem;
max-width: 40rem;
}
.photo {
height: 175px;
}
}
@media screen and (min-width: 1200px) {
.section-center {
width: 95vw;
grid-template-columns: 1fr 1fr;
}
.photo {
height: 150px;
}
}
결과
카테고리 목록들을 클릭하면서 동작을 확인해보세요.
item-3.jpeg
0.05MB
item-4.jpeg
0.07MB
item-5.jpeg
0.05MB
item-6.jpeg
0.06MB
item-7.jpeg
0.08MB
item-8.jpeg
0.07MB
item-9.jpeg
0.05MB
item-10.jpeg
0.07MB
'JavaScript' 카테고리의 다른 글
| [Javascript] Scroll (0) | 2024.05.10 |
|---|---|
| [Javascript] 버튼 이동 시키기 (0) | 2024.04.29 |
| [Javascript] FAQ 페이지 만들기 (2) | 2024.04.28 |
| [Javascript] 모달 만들기 (0) | 2024.04.19 |
| [Javascript] 자바스크립트로 5초 마다 변경되는 배너 만들기 (0) | 2024.04.18 |
