2024 IU HEREH WORLD TOUR CONCERT ENCORE
HERTH
MD cal
Total: 0
변경 사항
- 초안
- 세로형 row 형태로 변경
- 선택한 리스트만 바로 보이게 하단에 추가
- 이미지 추가 완료
- 배송비 항목 추가 완료
- 항목 4번 가격 수정 완료
추가 예정 : 교통비, 숙박비, 식비 항목 입력 창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Mall</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f9;
color: #3f3d56;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #6a1b9a; /* Deep purple */
margin: 20px 0;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.item-list, .selected-items {
width: 100%;
max-width: 800px;
background-color: #ffffff;
border: 2px solid #6a1b9a;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.item-list h2, .selected-items h2 {
color: #6a1b9a;
margin-bottom: 15px;
}
.item {
display: flex;
flex-direction: column; /* Stack children vertically */
align-items: center;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
background-color: #f9f5ff; /* Light purple */
border: 1px solid #e0b3e2; /* Lighter purple */
}
.item-thumbnail {
width: 100px; /* Adjust as needed */
height: auto;
border-radius: 10px;
margin-bottom: 10px; /* Space between image and label */
}
.item-details {
display: flex;
flex-direction: column; /* Stack label, input, and button vertically */
align-items: center;
}
.item-details label {
font-weight: bold;
color: #6a1b9a;
margin-bottom: 10px; /* Space between label and input/button */
}
.item-details .controls {
display: flex;
align-items: center;
gap: 10px; /* Space between input and button */
}
.item-details input[type="number"] {
width: 60px;
padding: 8px;
border: 1px solid #6a1b9a;
border-radius: 5px;
text-align: center;
background-color: #ffffff;
font-size: 1rem;
}
.item-details button {
background-color: #6a1b9a;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
.item-details button:hover {
background-color: #5b0a8e;
}
.total {
margin-top: 20px;
font-size: 1.4em;
text-align: center;
color: #6a1b9a;
font-weight: bold;
}
</style>
</head>
<body>
<h1>2024 IU HEREH WORLD TOUR CONCERT ENCORE</h1>
<div class="container">
<!-- Available Items Section -->
<div class="item-list">
<h2>HERTH</h2>
<!-- Items will be dynamically added here -->
</div>
<!-- Selected Items Section -->
<div class="selected-items">
<h2>MD cal</h2>
<!-- Selected items will be dynamically added here -->
</div>
<!-- Total Cost -->
<div class="total">
Total: <span id="totalAmount">0</span>
</div>
</div>
<script>
// Define item data with names, prices, and images
const itemData = {
'IU-1': { name: '[I-KE] IU OFFICIAL LIGHT STICK VER.3', price: 42000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdK2IJ4%2FbtsI3ZjUejC%2F1Y8eqav1MzJjxI7xzgsqV1%2Fimg.png' },
'IU-2': { name: '[I-KE] AAA BATTERY[I-KE] IU OFFICIAL MINI LIGHT STICK VER.3', price: 2000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbspIiM%2FbtsI3hL54BW%2FrUuG2y29gMigujdlLVJxL0%2Fimg.png' },
'IU-3': { name: '[I-KE] OFFICIAL LIGHT STICK I-KE POUCH', price: 30000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdhIlr%2FbtsI3g0ILfD%2Fy9QZKk8I6ckXbaGF4K4XOk%2Fimg.png' },
'IU-4': { name: '[I-KE] LIGHT STICK CAPE', price: 20000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FX05Q1%2FbtsI5U2p2uL%2F5u1jKlZDEUZXC3K2mVWy10%2Fimg.png' },
'IU-5': { name: 'LIGHT STICK CAPE', price: 12000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcorz9h%2FbtsI5SwLk4a%2FJCSiwzOAVfdhTqKFwmNuqk%2Fimg.png' },
'IU-6': { name: 'COLLECT BOOK', price: 20000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOV5hC%2FbtsI5PGQGd2%2Fn8zgXYXEToXZ8hD7SGJLWK%2Fimg.png' },
'IU-7': { name: 'POSTER SET', price: 12000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbiQ8jZ%2FbtsI5feW6o5%2F0sgKzPsKXatBf1sQED1az0%2Fimg.png' },
'IU-8': { name: 'PHOTO CARD SET', price: 12000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdqDUps%2FbtsI4qO6RnE%2Fk6H3tjbjk0HKWmkhlcK0eK%2Fimg.png' },
'IU-9': { name: 'OVERFIT CHECK SHIRT', price: 60000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fohv3a%2FbtsI31hGDuM%2FDPkcIMw3Q5JC5vQQfIwi3k%2Fimg.png' },
'IU-10': { name: 'CARD HOLDER SET (MINI&PHOTO CARD SIZE)', price: 15000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdBkc1V%2FbtsI4pP6G2G%2FCKOFWTkEDXauDPsHVZi6J1%2Fimg.png' },
'IU-11': { name: 'THE WINNING UMBRELLA', price: 26000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcwHfmm%2FbtsI5xNfhNk%2FF3A4oFO53eMnktozZkxMh1%2Fimg.png' },
'IU-12': { name: 'HOLSSI MOOD LAMP', price: 17000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdm1J97%2FbtsI5OHV3Wi%2FbR0yKjI4RwIDECTeAQolGK%2Fimg.png' },
'IU-13': { name: 'BALL CAP', price: 25000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYd11r%2FbtsI3NqHvD9%2F816Rsb0MkOQdNrE1NrnAb1%2Fimg.png' },
'IU-14': { name: 'TWEETY x IU ACCESSORY PARTS SET', price: 12000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtVsWD%2FbtsI5feW6oj%2FMlUx5uD81FBK2Dwksv9D51%2Fimg.png' },
'IU-15': { name: 'TWEETY x IU REUSABLE BAG', price: 10000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FebxUiF%2FbtsI3OQwmSn%2Fgbc1cycC9H1noWlB5Hykt0%2Fimg.png' },
'IU-16': { name: 'TWEETY x IU DOCKING TYPE POWER BANK', price: 25000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fba28yj%2FbtsI4bLlnql%2F4PUk9McjhxhGD5kXItV6kk%2Fimg.png' },
'IU-17': { name: 'TWEETY x IU TRAVEL SET', price: 25000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fq3zX8%2FbtsI5w8B4nH%2FJt2VobUl2bFZJvOktsjVyK%2Fimg.png' },
'IU-18': { name: 'TWEETY x IU THE WINNING KEYRING', price: 12000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcijoLq%2FbtsI3ft1HUP%2Fx3kyNl1Laa2xspz0z4LS8K%2Fimg.png' },
'IU-19': { name: 'TWEETY x IU THE WINNING TOK', price: 12000, image: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDyvE7%2FbtsI3hk2kIZ%2Fgzesw5JYBzkusEUfb6RfY1%2Fimg.png' },
'IU-20': { name: 'VIP석', price: 187000, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
'IU-21': { name: 'R석', price: 165000, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
'IU-22': { name: 'S석', price: 143000, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
'IU-23': { name: 'A석', price: 121000, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
'IU-24': { name: 'B석', price: 88000, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
'IU-25': { name: '예매 수수료', price: 2000, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
'IU-26': { name: '배송비', price: 3200, image: 'https://blog.kakaocdn.net/dn/SW0Ot/btsI4nENkJb/iyG2LtWiTg0LJN7va22BBk/img.png' },
};
function loadItems() {
const itemList = document.querySelector('.item-list');
Object.keys(itemData).forEach(itemId => {
const item = itemData[itemId];
const itemElement = document.createElement('div');
itemElement.className = 'item';
itemElement.setAttribute('data-id', itemId);
itemElement.setAttribute('data-name', item.name);
itemElement.setAttribute('data-price', item.price);
itemElement.innerHTML = `
<img src="${item.image}" alt="${item.name}" class="item-thumbnail">
<div class="item-details">
<label for="quantity-${itemId}">${item.name} (${item.price.toLocaleString()}):</label>
<div class="controls">
<input type="number" id="quantity-${itemId}" value="1" min="1" max="5">
<button onclick="addItem('${itemId}')">Add to Cart</button>
</div>
</div>
`;
itemList.appendChild(itemElement);
});
}
function addItem(itemId) {
const quantity = parseInt(document.getElementById(`quantity-${itemId}`).value);
const item = document.querySelector(`.item[data-id="${itemId}"]`);
const itemName = item.getAttribute('data-name');
const itemPrice = parseInt(item.getAttribute('data-price'));
// Check if item already exists in the selected items
let existingItem = document.getElementById(itemId);
if (existingItem) {
let quantityInput = existingItem.querySelector('input');
quantityInput.value = parseInt(quantityInput.value) + quantity;
} else {
// Create new item element
let itemContainer = document.querySelector('.selected-items');
let newItem = document.createElement('div');
newItem.className = 'item';
newItem.id = itemId;
newItem.innerHTML = `
<label for="${itemId}">${itemName} (${itemPrice.toLocaleString()}):</label>
<input type="number" value="${quantity}" min="1" max="5" oninput="calculateTotal()">
<button onclick="removeItem('${itemId}')">Remove</button>
`;
itemContainer.appendChild(newItem);
}
calculateTotal();
}
function removeItem(itemId) {
let item = document.getElementById(itemId);
if (item) {
item.remove();
calculateTotal();
}
}
function calculateTotal() {
let total = 0;
document.querySelectorAll('.selected-items .item').forEach(item => {
const itemId = item.id;
const quantity = parseInt(item.querySelector('input').value) || 0;
const itemPrice = itemData[itemId].price;
total += itemPrice * quantity;
});
document.getElementById('totalAmount').textContent = total.toLocaleString(); // Formats number with commas
}
// Initialize items on page load
window.onload = loadItems;
</script>
</body>
</html>swsury@gmail.com
'Project' 카테고리의 다른 글
| [Html] 밀리초 시계 (0) | 2024.10.29 |
|---|---|
| [crawling/크롤링] 쿠팡 장바구니 리스트 추출하기 (0) | 2024.01.07 |