점메추 해주는 페이지

여러분. 세계 3대 고민은 거창한 게 아닙니다. 오늘 뭐입지 오늘 뭐먹지 오늘 뭐하지예요. 거창한거 없습니다. 회사에서 제일 중요한 안건? 물론 회의 안건도 있겠지만 가장 중요한거 뭐임? 오늘 뭐먹지예요. 짜장이랑 짬뽕은 걍 짬짜면 드시고 탕수육은 찍먹들거 좀 덜고 부먹해주시면 중용을 지킬 수 있지만(아니면 사는 사람 마음대로...) 점심 메뉴? 이거 어려워... 고르는거 진짜 밀레니엄문제 못지 않은 난제임...

---

랜덤 점메추

const randomBtn = document.querySelector('#button1'); // 랜덤랜덤 (여기 있는 리스트들 중)
const randomLunch = document.querySelector('#jeommechu1'); // 랜덤 표시구역

const ourBtn = document.querySelector('#button2'); // 입력받은 것들 중 하나 랜덤
const ourLunch = document.querySelector('#jeommechu2'); // 선택 표시구역

점메추가 왜 두개임? 하나는 뭐 딴거 있음? 예. 이 점메추 추첨기는 아 나 뭐먹을지 몰라 니가 골라주셈 하나랑 제육이랑 김치찌개중에 뭐먹을지 추천해주는거 하나 있습니다. 그 중에서도 이건 아 뭐먹을지 골라주셈이다. 메뉴 풀은 우리가 갖고있고 버튼을 누르면 그 중에서 하나를 뽑는 방식 맞다.

 

// 랜덤 밥추천
randomBtn.addEventListener('click',()=>{
    let selectedLunch = document.createElement('p'); // 당첨된 밥
    let lunchList = ['백반', '국밥', '찌개', '분식', '중국집', '빵', '라면', '편의점', '햄버거', '샐러드', '파스타']; // 밥 후보 리스트
});

아 브랜드 골라주는게 아니냐고요? 이건 브랜드가 아니라 말 그대로 '뭐 먹을지' 골라주는겁니다. 쟤가 햄버거 먹으라 하면 맥날갈지 버거킹갈지 프랭크버거를 갈지 노브랜드 버거를 갈지는 당신이 정하셔야죠. 브랜드도 정해주는거 아니냐고? 그럼 2번 기능 쓰셔야됩니다.

 

// 랜덤 밥추천
randomBtn.addEventListener('click',()=>{
    let selectedLunch = document.createElement('p'); // 당첨된 밥
    let lunchList = ['백반', '국밥', '찌개', '분식', '중국집', '빵', '편의점', '햄버거', '샐러드', '파스타']; // 밥 후보 리스트

    const randomIndex = Math.floor(Math.random() * lunchList.length); // 몇번째 주소가 당첨됐는가 
    const selectedMenu = lunchList[randomIndex]; // 응 너야 

    selectedLunch.innerText = selectedMenu;

    // 3. 기존에 결과가 있다면 지우고 새로 붙이기 (하나만 나오게 하려면 필요)
    randomLunch.innerHTML = ''; 

    // 4. #jeommechu1 영역에 붙이기
    randomLunch.appendChild(selectedLunch);
});

여기까지만 하면 추첨은 다 됐는데 문제가 하나 있음.

 

글자가 너무 작죠? 그래서 클래스 붙인 다음 CSS에서 크기랑 색상같은 걸 제어할거다.

 

그러면 얘는 됐고... 이제 입력받아서 해보자.

 

입력받아서 점메추

그 있잖아요. 햄버거 먹을건데 맥날갈래 맘터갈래 프랭크버거갈레 수제버거집갈래 롯리갈래 버거킹갈래 노브랜드갈래 KFC갈래 이거. 이거는 여기서 할 일이다.

 

// 선택 밥추천
ourBtn.addEventListener('click',()=>{
    let selectedLunch = document.createElement('p'); // 당첨된 밥

    // 여러분이 입력한 밥을 리스트로 만들거예요 



    const randomIndex = Math.floor(Math.random() * lunchList.length); // 몇번째 주소가 당첨됐는가 
    const selectedMenu = lunchList[randomIndex]; // 응 너야 

    selectedLunch.innerText = selectedMenu;
    selectedLunch.classList.add('selectedlunch');

    // 3. 기존에 결과가 있다면 지우고 새로 붙이기 (하나만 나오게 하려면 필요)
    ourLunch.innerHTML = ''; 

    // 4. #jeommechu1 영역에 붙이기
    ourLunch.appendChild(selectedLunch);
});

DOM 생성하고 추첨하고 갖다 붙이는 건 똑같은데 리스트 안에 있는 걸 우리가 입력받아서 추첨할거다. 그러면 이거 걍 입력창 만들면 되는거 아니냐고? 입력을 어떻게 받고 어떻게 처리하고 입력 어떻게 그만 받을거임? 그걸 정해야 할 거 아닙니까.

 

// [이벤트] 엔터키로 메뉴 추가
lunchInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        const value = lunchInput.value.trim();
        
        if (value === "") return; // 빈 값 방지
        
        if (ourList.includes(value)) {
            showToast('이미 있는 메뉴예요!');
        } else {
            ourList.push(value);
            showToast(`${value} 추가 완료!`);
            updateLunchView(); // 리스트 갱신
        }
        lunchInput.value = "";
    }
});

일단 인풋 텍스트 하나 만들고 엔터키를 누르면 메뉴 리스트에 추가가 되는 구조이다. 그럼 그거 관련해서 사이드로 추가되는 기능이 있겠죠? 그렇습니다.

 

// [기능] 토스트 메시지 생성 함수
function showToast(message) {
    const toast = document.createElement('div');
    toast.innerText = message;
    toast.style.position = 'fixed';
    toast.style.bottom = '20px';
    toast.style.padding = '10px 20px';
    toast.style.background = 'var(--main-color)';
    toast.style.color = 'var(--white)';
    toast.style.borderRadius = '5px';
    document.body.appendChild(toast);
    
    setTimeout(() => toast.remove(), 2000); // 2초 뒤 삭제
}

// [기능] 입력한 메뉴 리스트 화면에 다시 그리기
function updateLunchView() {
    lunchView.innerHTML = ''; // 기존 리스트 초기화
    ourList.forEach(menu => {
        const li = document.createElement('li');
        li.innerText = menu;
        lunchView.appendChild(li);
    });
}

토스트 메시지 만드는 코드하고 추가한 메뉴 보여주는 코드 만들었음. 물론 지우는 버튼도 따로 있습니다. 

 

// 선택 밥추천
ourBtn.addEventListener('click',()=>{
    let selectedLunch = document.createElement('p'); // 당첨된 밥

    // 여러분이 입력한 밥을 리스트로 만들거예요 
    // 있다면 말이지 
    if (ourList.length === 0) {
        alert("추가된 메뉴가 없어요! 먼저 메뉴를 입력해주세요.");
        return; // 함수 종료
    }

    const randomIndex = Math.floor(Math.random() * ourList.length); // 몇번째 주소가 당첨됐는가 
    const selectedMenu = ourList[randomIndex]; // 응 너야 

    selectedLunch.innerText = selectedMenu;
    selectedLunch.classList.add('selectedlunch');

    // 3. 기존에 결과가 있다면 지우고 새로 붙이기 (하나만 나오게 하려면 필요)
    ourLunch.innerHTML = ''; 

    // 4. #jeommechu1 영역에 붙이기
    ourLunch.appendChild(selectedLunch);
});

저 에미나이가 전역 좋아하길래 리스트 밖으로 빼버리고 목적 따라서 분리함... 그래서 어떻게 됐냐고요?

 

집근처에 맘터가 없다... (건대 가야 있음)