Click here to Skip to main content
15,610,250 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><a href="#" class="btn btn-success btn-sm delete">X</a></td>


//storage class with local storage

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

//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


//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 :)

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