Random food generator

JavaScript
1

Hello All!

I am currently attempting to build a site that generates a random meal upon clicking the “generate” button. Attached below will be my code. The issue I am running into is the following; upon clicking the generate button, I am met with numbers, instead of names and nutrition values. I recognize that this is what the Math.random() and Math.floor() are doing - but why is this not converted to an index referencing the food in question? Any help is appreciated. Thank you. For an example of how this should (ideally) work, I will provide a link to a similar project, that has been completed by another user.

Similar Concept

Javascript:


// Food(s) array w/nested Objects. //

const foods = [
    {  "name": 'Chicken and Rice',
        "protein": '45g',
       "fat": '12g',
       "carbohydrates" : '35g',
       "total calories": '428'
    },
    {  "name":'Guac Omelette',
    "protein":'30g',
    "fat":'20g',
    "carbohydrates":"17g",
    "total calories": '368'
   },
   {
    "name":"beef rice",
    "protein":'48g',
    "fat":'22g',
    "carbohydrates":'52g',
    "total calories":'598'
   }
   
   ]
   
for (let i=0; i<foods.length; i++){
    console.log(foods[i])
}


function getFood()
{
    let randomFood = [Math.floor(Math.random()*foods.length)];
    document.getElementById("randpick").textContent=randomFood;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Meal Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">

<h1 class="question">Feeling Hungry?</h1>
<h2 class="question">
Struggling to come up with healthy meals?
</h2>

<button class="generate" id="generate" onclick="getFood()">
Click Me To Generate a Random Meal!
</button>

<p class="info">
    A balanced macronutrition dietary profile is of utmost importance for overall health and well-being. It refers to the consumption of an appropriate ratio of macronutrients, including carbohydrates, proteins, and fats, in the right proportions. Such a diet provides the body with essential nutrients, energy, and the building blocks necessary for various bodily functions.


</p>


<p id = "randpick">

Alpha Omega
</p>

    </div>
    
    
    
<script src="logic.js"></script>
</body>
</html>
2

UPDATE:

Altered the following line of code:

    let randomFood = foods[Math.floor(Math.random()*foods.length)];

Now, when the generate button is pressed, the following is displayed:
[object Object]

I am unsure what might be causing this issue.

3

What is foods? What is the data type?

What would a single element of foods be?

1 Like
4

Foods is an array with nested objects within it ; the datatype of this would technically be an object, but more specifically a set of strings.

A single element of “foods” should be “food”

I think I get where you’re going with this ; do I have to find a way to declare an individual food within the food(s) array?

6

Im hoping to display the recipe name as well as the nutrition facts, so essentially all of the properties of each object. Im having a bit of trouble using the
JSON.stringify method, as when I apply it to the foods array, im met with an undeclared variable exception.

7

UPDATE:

I have modified the following code, and now see all of the foods displayed at once. Now, I have to find a way to format these foods, and make it display only one of the foods, not every single object within the array;

function getFood()
{
    let string = JSON.stringify(foods);
    let randomFood = string[Math.floor(Math.random()*foods.length)];
    document.getElementById("randpick").textContent=string;
}
9

OHH This makes sense!!

I went back in and re-worked some of my code , and am now able to pull one specific object from the Array. Listed Below will be my updated code;

function getFood()
{
    let food = foods.values(foods.name);
let userFood = foods[Math.floor(Math.random()*foods.length)];
let choice = JSON.stringify(userFood)
document.getElementById('randpick').textContent=choice
console.log(userFood);

}

Now, it is displaying ONE food object from the array (which is what I wanted.) How would I go about formatting this? My mind instantly goes to using DOM manipulation, as I don’t believe CSS would work?

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.