[CursorAI] 점심은 뭘 먹을까? 점심룰렛.

🎯 점심 룰렛

결과가 여기에 표시됩니다

음식점 목록

 

<div style="text-align: center; font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 20px;">
    <h2 style="color: #333;">🎯 점심 룰렛</h2>
    
    <!-- 룰렛 결과 표시 영역 -->
    <div id="result" style="margin: 20px 0; padding: 20px; border: 2px solid #4CAF50; border-radius: 10px; font-size: 18px; font-weight: bold; min-height: 30px;">
        결과가 여기에 표시됩니다
    </div>
    
    <!-- 돌리기 버튼 -->
    <button onclick="spinRoulette()" style="background-color: #4CAF50; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer;">돌리기</button>
    
    <!-- 음식점 목록 관리 -->
    <div style="margin-top: 30px; border-top: 1px solid #ddd; padding-top: 20px;">
        <div style="margin-bottom: 10px; font-weight: bold;">음식점 목록</div>
        <div id="restaurantList" style="margin-bottom: 10px;"></div>
        <input type="text" id="newRestaurant" placeholder="새로운 음식점 이름" 
               style="padding: 5px; margin-right: 5px; width: 200px;">
        <button onclick="addRestaurant()" 
                style="background-color: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer;">
            추가
        </button>
    </div>
</div>

<script>
// 기본 음식점 목록
let restaurants = [
    '김밥천국', '맥도날드', '한솥도시락', '서브웨이',
    '본죽', '파리바게뜨', '롯데리아', '피자헛'
];

// 음식점 목록 표시 함수
function displayRestaurants() {
    const list = document.getElementById('restaurantList');
    list.innerHTML = '';
    
    restaurants.forEach((restaurant, index) => {
        const item = document.createElement('div');
        item.style.margin = '5px 0';
        item.innerHTML = `
            <span style="margin-right: 10px;">${restaurant}</span>
            <button onclick="deleteRestaurant(${index})" 
                    style="background-color: #dc3545; color: white; border: none; padding: 2px 5px; border-radius: 3px; cursor: pointer; font-size: 12px;">
                삭제
            </button>
        `;
        list.appendChild(item);
    });
}

// 룰렛 돌리기 함수
function spinRoulette() {
    if (restaurants.length < 2) {
        alert('최소 2개의 음식점이 필요합니다!');
        return;
    }
    
    // 랜덤하게 음식점 선택
    const randomIndex = Math.floor(Math.random() * restaurants.length);
    const selected = restaurants[randomIndex];
    
    // 결과 표시
    const result = document.getElementById('result');
    result.innerHTML = `🎉 오늘의 점심: <span style="color: #4CAF50;">${selected}</span>`;
}

// 음식점 추가 함수
function addRestaurant() {
    const input = document.getElementById('newRestaurant');
    const newName = input.value.trim();
    
    if (newName) {
        restaurants.push(newName);
        input.value = '';
        displayRestaurants();
    } else {
        alert('음식점 이름을 입력해주세요!');
    }
}

// 음식점 삭제 함수
function deleteRestaurant(index) {
    if (restaurants.length > 2) {
        restaurants.splice(index, 1);
        displayRestaurants();
    } else {
        alert('최소 2개의 음식점이 필요합니다!');
    }
}

// 초기 음식점 목록 표시
displayRestaurants();
</script>​