Click here to Skip to main content
15,569,840 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
//food class
class Food {
    constructor(time, date, meal) {
        this._time = time;
        this._date = date;
        this._meal = meal;
    }
}

//UI handle class
class UI {
    static displayFoods() {
        const storedFoods = [
            {
                time: '12:00',
                date: '31.10.2021',
                meal: 'Bratwurst'
            },
            {
                time: '12:00',
                date: '31.10.2021',
                meal: 'Marronni'
            },
        ];

        const foods = storedFoods;

        foods.forEach((food) => UI.addFoodToList(food));
    }
    static addFoodToList(food){
        const list = document.getElementById('food-form-extended');
        const row = document.createElement('tr');
        row.innerHTML = `
        <td>${food.time}</td>
        <td>${food.date}</td>
        <td>${food.meal}</td>
        <td><a href="#" class="btn btn-success btn-sm delete">X</a></td>
        `;

        list.appendChild(row);
    }
}

//storage class with local storage




//events
// Display food
document.addEventListener('DOMContentLoaded', UI.displayFoods);
//Add food
document.getElementById('food-form').addEventListener('submit', (e) => {
//prevent default
    e.preventDefault();

//get forms values
    const time = document.getElementById('time').value;
    const date = document.getElementById('date').value;
    const meal = document.getElementById('meal').value;

//instanciate food
    const menu = new Food(time, date, meal);

//add food to list
    UI.addFoodToList(menu);

});

//Remove food


What I have tried:

Trying to build a little food tracker for myself and learn. Unfortunately I'm getting undefined for all the values like time, date and meal after submitting the form. What am I doing wrong guys :)
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900