Hello, Friends!
Ive included a screenshot of the issue at hand , and will explain shortly the black lines on the left and right of the screen are added by me post-screenshot
Essentially, the brains of my random food generator - the Javascript - is all set. However, I am attempting to shrink the margins on the left and right of the content that falls between it; basically “cropping” the area of the screen resolution. How would I go about doing this ? Screenshot will be included below for visuals, and all code will be provided as well. All help is appreciated.
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=randomChoice()>
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>
<div id = "randomMeal" class="randomMeal">
<p id = "randpick">
</p>
</div>
</div>
<script src="logic.js"></script>
</body>
</html>
Javascript:
// Food(s) array w/nested Objects. //
const root = document.getElementById("randpick");
const foods = [
{ "name": 'Chicken and Rice',
"protein": 'Protein: 45g',
"fat": 'Fat: 12g',
"carbohydrates" : 'Carbs: 35g',
"total calories": 'Total Calories: 428 ',
"image": 'Images/please-be-my-last-try.jpeg',
"ingredient1":"Chicken (Your Choice of Cut)"
},
{ "name":'Guac Omelette',
"protein":'Protein: 30g',
"fat":'Fat: 20g',
"carbohydrates":"Carbs: 17g",
"total calories": 'Total Calories: 368 kCal',
"ingredient1":'Eggs'
},
{
"name":"Beef Rice",
"protein":'Protein: 48g',
"fat":'Fat: 22g',
"carbohydrates":'Carbs: 52g',
"total calories":'Total Calories: 598 kCal',
"ingredient1":"Ground beef"
},
{
"name":"Penne Alfredo Chicken",
"protein":'Protein: 36g',
"fat":'Fat: 17g',
"carbohydrates":"Carbs: 49g",
"total calories":'Total Calories: 493 kCal ',
"ingredient1":"Chicken (Your Choice of Cut)"
}
]
function randomChoice(){
const userFood = foods[Math.floor(Math.random()*foods.length)];
const foodTemplate = `
<section class="head">
<h1>${userFood.name}</h1>
<img src=${userFood.image}>
<section class="blocker">
<p>${userFood.carbohydrates}</p>
<p>${userFood.fat}</p>
<p>${userFood.protein}</p>
<p> ${userFood["total calories"]}</p>
</section>
<h1 class="ingredients"> Ingredients Needed </h1>
<li> <p class="uno">${userFood.ingredient1}</p></li>
</section>
`;
root.innerHTML = foodTemplate;
}
CSS:
*{
background-color: lightblue;
}
.container{
height:100%;
width: 100%;
background: lightblue;
display: flex;
justify-content:center;
align-items: center;
flex-direction: column;
}
.container .question{
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: lightblue;
}
.container .generate{
color:rgb(31, 78, 94);
background-color: black;
color:white;
}
.container .info {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS;', sans-serif;
justify-self: center;
padding:5px;
text-align: center;
background-color: transparent;
font-size: x-large;
width: 50%
}
.container .question2{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS;', sans-serif;
background: lightblue;
}
.container #randpick{
background-color: lightblue;
color:black
}
#randomMeal{
background: lightblue;
}
section{
text-align:center;
}
h1{
font-size: xx-large;
}
.cookingt{
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
color:red
}
.blocker{
font-size: x-large;
display:flex;
flex-direction:row;
justify-content: space-around;
color:black;
margin: 5%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.head{
border: 4px solid black;
}
.uno{
font-size: x-large;
}