【每日一练】213—食谱书应用程序

每日一练1年前 (2023)发布 admin

1,936 0 7

第213练最终效果如下：

【每日一练】213—食谱书应用程序

完整的代码如下：

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>213练-食谱书应用程序</title>

<link rel=”stylesheet” href=”index.css” />

</head>

<body>

<header>

<h1>食谱书应用程序</h1>

</header>

<div class=”container”>

<ul id=”recipe-list” class=”recipe-list”>

</ul>

</div>

<script src=”index.js”></script>

</body>

</html>

CSS:

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

}

header {

background: #0c2461;

color: #fff;

padding: 20px;

text-align: center;

}

h1 {

margin: 0;

font-size: 36px;

}

.container {

margin: 0 auto;

max-width: 1200px;

padding: 20px;

}

.recipe-list {

list-style: none;

margin: 0;

padding: 0;

}

.recipe-item {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 20px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

border-radius: 5px;

overflow: hidden;

}

.recipe-item img {

width: 150px;

height: 150px;

object-fit: cover;

}

.recipe-item h2 {

margin: 0;

font-size: 20px;

padding: 10px;

min-width: 200px;

}

.recipe-item p {

margin: 0;

padding: 10px;

color: #777;

}

.recipe-item a {

background: #0c2461;

color: #fff;

min-width: 150px;

padding: 10px;

text-decoration: none;

text-transform: uppercase;

font-size: 14px;

transition: background 0.3s ease;

}

.recipe-item a:hover {

background: #1e3799;

}

@media screen and (max-width: 768px) {

.container {

max-width: 90%;

}

.recipe-item {

flex-direction: column;

}

.recipe-item img {

width: 100%;

height: auto;

margin-bottom: 10px;

}

.recipe-item h2 {

font-size: 20px;

padding: 0;

margin-bottom: 10px;

}

.recipe-item p {

font-size: 14px;

margin-bottom: 10px;

}

.recipe-item a {

width: 100%;

text-align: center;

}

}

JS:

const API_KEY = “275d58779ccf4e22af03e792e8819fff”;

const recipeListEl = document.getElementById(“recipe-list”);

function displayRecipes(recipes) {

recipeListEl.innerHTML = “”;

recipes.forEach((recipe) => {

const recipeItemEl = document.createElement(“li”);

recipeItemEl.classList.add(“recipe-item”);

recipeImageEl = document.createElement(“img”);

recipeImageEl.src = recipe.image;

recipeImageEl.alt = “recipe image”;

recipeTitleEl = document.createElement(“h2”);

recipeTitleEl.innerText = recipe.title;

recipeIngredientsEl = document.createElement(“p”);

recipeIngredientsEl.innerHTML = `

<strong>Ingredients:</strong> ${recipe.extendedIngredients

.map((ingredient) => ingredient.original)

.join(“, “)}

`;

recipeLinkEl = document.createElement(“a”);

recipeLinkEl.href = recipe.sourceUrl;

recipeLinkEl.innerText = “View Recipe”;

recipeItemEl.appendChild(recipeImageEl);

recipeItemEl.appendChild(recipeTitleEl);

recipeItemEl.appendChild(recipeIngredientsEl);

recipeItemEl.appendChild(recipeLinkEl);

recipeListEl.appendChild(recipeItemEl);

});

}

async function getRecipes() {

const response = await fetch(

`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`

);

const data = await response.json();

return data.recipes;

}

async function init() {

const recipes = await getRecipes();

displayRecipes(recipes);

}

init();

# 每日一练 # 练习项目 # 每日一练

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】176—CSS实现的卡片效果

admin

1,929 4

【每日一练】168—CSS实现一款列表图效果

admin

2,000 9

【每日一练】229—JS实现一款折叠问答效果

admin

2,547 10

【每日一练】182 — CSS实现响应式自定义列表属性效果

admin

1,671 8

【每日一练】211—番茄计时器

admin

1,505 11

【每日一练】233—JS实现一款加载动画效果

admin

2,720 6

暂无评论

暂无评论...

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请免责声明广告合作关于我们

Copyright © 2024 【web前端开发】公号平台官网平台