안녕하세요 상훈입니다.
드림코딩 앨런님의 강의로 자바스크립트를 이용하여 짧고 간단한 쇼핑 웹앱을 구현하도록 해보겠습니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="src/main.js" defer></script>
<title>Document</title>
</head>
<body>
<!--Logo-->
<img src="img/logo.png" alt="Logo" class="logo">
<!--Buttons-->
<div class="buttons">
<button class="btn">
<img src="img/blue_t.png" alt="blue tshirts" class="imgBtn" data-key="type" data-value="tshirt" />
</button>
<button class="btn">
<img src="img/blue_p.png" alt="blue pants" class="imgBtn" data-key="type" data-value="pants" />
</button>
<button class="btn">
<img src="img/blue_s.png" alt="blue skirt" class="imgBtn" data-key="type" data-value="skirt" />
</button>
<button class="btn" class="btn colorBtn blue" data-key="color" data-value="blue">Blue</button>
<button class="btn" class="btn colorBtn yellow" data-key="color" data-value="yellow">Yellow</button>
<button class="btn" class="btn colorBtn pink" data-key="color" data-value="pink">Pink</button>
</div>
<!--Items-->
<ul class="items"></ul>
</body>
</html>
main.js
// Fetch the items from the JSON file
function loadItems() {
return fetch('data/data.json')
.then(response => response.json())
.then(json => json.items)
}
// update the list with the given items
function displayItems(items) {
const container = document.querySelector('.items')
container.innerHTML = items.map(item => createHTMLString(item)).join('')
}
// Create html list item from the given data item
function createHTMLString (item) {
return `
<li class="item">
<img src="img/${item.image}" alt="${item.type}" class="item__thumbnail">
<span class="item__description">${item.gender}, ${item.size}</span>
</li>
`
}
function onButtonClick (event, items) {
const dataset = event.target.dataset
const key = dataset.key
const value = dataset.value
if(key == null || value == null){
return ;
}
// updateItems(items, key, value)
const filtered = items.filter(item => item[key] === value)
displayItems(filtered)
}
function updateItems(items, key, value) {
items.forEach(item => {
if(item.dataset[key] === value) {
item.classList.remove('invisiable')
}else{
item.classList.add('invisable')
}
});
}
function setEventListeners (items) {
const logo = document.querySelector('.logo')
const buttons = document.querySelector('.buttons')
logo.addEventListener("click", () => displayItems(items) )
buttons.addEventListener("click", event => onButtonClick(event, items))
}
// main
loadItems()
.then(items => {
displayItems(items)
setEventListeners(items)
})
.catch(console.log)
style.css
:root {
/* color */
--color-black: #3f454d;
--color-white: #ffffff;
--color-blue: #3b88c3;
--color-yellow: #fbbe28;
--color-pink: #fd7f84;
--color-light-grey: #dfdfdf;
/* size */
--base-space: 8px;
--size-button: 60px;
--size-border: 4px;
--size-thumbnail: 50px;
--font-size: 18px;
/* animation */
--animation-duration: 300ms;
}
body {
height:100vh;
background-color: var(--color-black);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo {
cursor: pointer;
transition: transform var(--animation-duration) ease;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
transition: transform var(--animation-duration) ease;
margin-right: var(--base-space);
}
.btn:hover,
.logo:hover {
transform: scale(1.1);
}
.buttons {
display: flex;
align-items: center;
}
.imgBtn {
width: var(--size-button);
height:var(--size-button);
}
.colorBtn {
font-size: var(--font-size);
padding: calc(var(--base-space) * 2);
border-radius: var(--size-border);
}
.blue {
background-color: var(--color-blue);
}
.yellow {
background-color: var(--color-yellow);
}
.pink {
background-color: var(--color-pink);
}
.items {
width: 60%;
height: 60%;
list-style: none;
padding-left:0;
overflow-y: scroll;
}
.item {
background-color: var(--color-white);
display: flex;
align-items: center;
padding: var(--base-space);
margin-bottom: var(--base-space);
}
.item__thumbnail {
width: var(--size-thumbnail);
height: var(--size-thumbnail);
}
.item__description {
margin-left: var(--base-space);
font-size: var(--font-size);
}
디렉터리 구조는 다음과 같습니다. 강의 영상에서 제공한 project 자체를 import 시켰습니다.
이미지, json 등의 파일은 모두 구비되었습니다.
강의 진행이 되면서 간단하다 간단하다 하셨는데, 전혀 간단하게 느껴지지 않았습니다. ㅠㅠ
자바스크립트의 filter, map 등등 몇가지 라이브러리를 사용하셨었는데,
저같은 웹린이한테는 어렵다고 느껴졌어요...
눈물..
나는 감자다! I'm annoied talking potatoooooooo!!!!
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기 (0) | 2021.10.06 |
|---|---|
| [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 (0) | 2021.10.06 |
| [ JavaScript ] Split 예제, 자바스크립트 문자열 나누기 (0) | 2021.09.06 |
| [ JavaScript ] 키보드 구현 - cdn 사용하기 (0) | 2021.08.31 |
| [ JavaScript ] 버튼 클릭 복사 - 기능 구현 예제 (0) | 2021.08.26 |
