Embedded Files
<html><head><base href="https://tip-calculator.example.com#about">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Recipe App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
margin-bottom: 30px;
text-align: center;
color: #333;
}
.search-container {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.search-input {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
width: 300px;
}
.search-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
.search-btn:hover {
background-color: #45a049;
}
.recipe-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.recipe-item {
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s;
}
.recipe-item:hover {
transform: translateY(-5px);
}
.recipe-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.recipe-content {
padding: 15px;
}
.recipe-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.recipe-cuisine {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.recipe-meal-type {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.recipe-rating {
font-size: 14px;
color: #ffa500;
margin-bottom: 10px;
}
.recipe-details-button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.recipe-details-button:hover {
background-color: #45a049;
}
.loader {
display: none;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.recipe-details {
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 30px;
}
.recipe-details h2 {
color: #333;
margin-bottom: 15px;
}
.recipe-details img {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
.recipe-details p {
margin-bottom: 10px;
line-height: 1.6;
}
.recipe-details ul {
list-style-type: none;
padding-left: 0;
}
.recipe-details li {
margin-bottom: 5px;
}
.recipe-details .instructions {
white-space: pre-line;
}
</style>
</head>
<body>
<h1>Enhanced Recipe App</h1>
<div class="search-container">
<input type="text" class="search-input" placeholder="Search for recipes...">
<button class="search-btn">Search</button>
</div>
<div class="loader"></div>
<div class="recipe-list"></div>
<div class="recipe-details"></div>
<script>
const recipeListContainer = document.querySelector(".recipe-list");
const loader = document.querySelector(".loader");
const recipeDetails = document.querySelector(".recipe-details");
const searchInput = document.querySelector(".search-input");
const searchBtn = document.querySelector(".search-btn");
function showLoader() {
loader.style.display = 'block';
recipeListContainer.style.display = 'none';
}
function removeLoader() {
loader.style.display = 'none';
recipeListContainer.style.display = 'grid';
}
async function fetchListOfRecipes(query = '') {
showLoader();
try {
const response = await fetch(`https://dummyjson.com/recipes/search?q=${query}`);
const result = await response.json();
if (result && result.recipes && result.recipes.length > 0) {
displayRecipeList(result.recipes);
} else {
recipeListContainer.innerHTML = '<p>No recipes found. Try a different search term.</p>';
}
} catch (error) {
console.error('Error fetching recipes:', error);
recipeListContainer.innerHTML = '<p>An error occurred while fetching recipes. Please try again later.</p>';
} finally {
removeLoader();
}
}
function displayRecipeList(recipeList) {
recipeListContainer.innerHTML = '';
recipeList.forEach((recipeItem) => {
const { name, id, image, cuisine, mealType, rating } = recipeItem;
const recipeItemElement = document.createElement("div");
recipeItemElement.classList.add("recipe-item");
recipeItemElement.innerHTML = `
<img src="${image}" alt="${name}" class="recipe-image">
<div class="recipe-content">
<h3 class="recipe-name">${name}</h3>
<p class="recipe-cuisine">Cuisine: ${cuisine}</p>
<p class="recipe-meal-type">Meal Type: ${mealType}</p>
<p class="recipe-rating">Rating: ${rating} ⭐</p>
<button class="recipe-details-button" data-id="${id}">View Details</button>
</div>
`;
recipeListContainer.appendChild(recipeItemElement);
});
}
async function handleRecipeDetails(getId) {
showLoader();
try {
const response = await fetch(`https://dummyjson.com/recipes/${getId}`);
const result = await response.json();
if (result) {
displayRecipeDetailsData(result);
window.scrollTo({
top: recipeDetails.offsetTop,
behavior: "smooth",
});
}
} catch (error) {
console.error('Error fetching recipe details:', error);
recipeDetails.innerHTML = '<p>An error occurred while fetching recipe details. Please try again later.</p>';
} finally {
removeLoader();
}
}
function displayRecipeDetailsData(recipeData) {
const { name, image, ingredients, instructions, cookTimeMinutes, servings, difficulty } = recipeData;
recipeDetails.innerHTML = `
<h2>${name}</h2>
<img src="${image}" alt="${name}">
<p><strong>Cook Time:</strong> ${cookTimeMinutes} minutes</p>
<p><strong>Servings:</strong> ${servings}</p>
<p><strong>Difficulty:</strong> ${difficulty}</p>
<h3>Ingredients:</h3>
<ul>
${ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
</ul>
<h3>Instructions:</h3>
<p class="instructions">${instructions}</p>
`;
}
recipeListContainer.addEventListener('click', (e) => {
if (e.target.classList.contains('recipe-details-button')) {
const recipeId = e.target.getAttribute('data-id');
handleRecipeDetails(recipeId);
}
});
searchBtn.addEventListener('click', () => {
const query = searchInput.value.trim();
fetchListOfRecipes(query);
});
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const query = searchInput.value.trim();
fetchListOfRecipes(query);
}
});
// Initial load of recipes
fetchListOfRecipes();
</script>
</body>
</html>
Page updated
Google Sites
Report abuse