A Pen by vaniadimova on CodePen.
Created
December 8, 2020 01:33
-
-
Save vaniadimova/5d178ff1e78b7576e96bcccaaf711228 to your computer and use it in GitHub Desktop.
Food Recipe App Js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<body> | |
<section> | |
<div class="container initial"> | |
<h1 class="brand">Find Your Recipe </h1> | |
<form> | |
<input type="text" placeholder="Search Your Recipe..."> | |
<ion-icon name="search"></ion-icon> | |
</form> | |
<div class="search-result"> | |
<div class="item"> | |
<img src="./img-1.jpg" alt=""> | |
<div class="flex-container"> | |
<h1 class="title">This is a recipe item</h1> | |
<a class="view-btn" href="#">View Recipe</a> | |
</div> | |
<p class="item-data">Calories: 120</p> | |
</div> | |
</div> | |
</div> | |
</section> | |
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script> | |
<script src="./main.js"></script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const searchForm = document.querySelector("form"); | |
const searchResultDiv = document.querySelector(".search-result"); | |
const container = document.querySelector(".container"); | |
let searchQuery = ""; | |
const APP_ID = "0afafdc7"; | |
const APP_key = "69cb8af4aa436ea914b9305824fa8871"; | |
// console.log(container) | |
searchForm.addEventListener("submit", (e) => { | |
e.preventDefault(); | |
searchQuery = e.target.querySelector("input").value; | |
fetchAPI(); | |
}); | |
async function fetchAPI() { | |
const baseURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_key}&from=0&to=20`; | |
const response = await fetch(baseURL); | |
const data = await response.json(); | |
generateHTML(data.hits); | |
console.log(data); | |
} | |
function generateHTML(results) { | |
container.classList.remove("initial"); | |
let generatedHTML = ""; | |
results.map((result) => { | |
generatedHTML += ` | |
<div class="item"> | |
<img src="${result.recipe.image}" alt="img"> | |
<div class="flex-container"> | |
<h1 class="title">${result.recipe.label}</h1> | |
<a class="view-btn" target="_blank" href="${ | |
result.recipe.url | |
}">View Recipe</a> | |
</div> | |
<p class="item-data">Calories: ${result.recipe.calories.toFixed(2)}</p> | |
<p class="item-data">Diet label: ${ | |
result.recipe.dietLabels.length > 0 | |
? result.recipe.dietLabels | |
: "No Data Found" | |
}</p> | |
<p class="item-data">Health labels: ${result.recipe.healthLabels}</p> | |
</div> | |
`; | |
}); | |
searchResultDiv.innerHTML = generatedHTML; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap"); | |
* { | |
padding: 0; | |
margin: 0; | |
box-sizing: border-box; | |
} | |
img { | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
} | |
html { | |
font-family: "Nunito"; | |
font-size: 12px; | |
} | |
section { | |
min-height: 100vh; | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
padding: 100px 0; | |
background-color: rgb(304, 143, 258); | |
} | |
.container { | |
width: 100%; | |
height: 90%; | |
max-width: 1200px; | |
margin: 0 auto; | |
padding: 20px; | |
} | |
.brand { | |
text-align: center; | |
font-size: 4rem; | |
color: whitesmoke; | |
margin-bottom: 30px; | |
} | |
form { | |
width: 90%; | |
max-width: 400px; | |
margin: 20px auto; | |
background-color: rgb(223, 223, 223); | |
} | |
input { | |
width: 90%; | |
padding: 10px; | |
border-radius: 4px; | |
border: none; | |
outline: none; | |
font-size: 2rem; | |
background-color: rgb(223, 223, 223); | |
display: inline-block; | |
} | |
form ion-icon { | |
width: 8%; | |
font-size: 3rem; | |
margin-bottom: -8px; | |
color: rgb(75, 75, 75); | |
display: inline-block; | |
} | |
.search-result { | |
margin-top: 50px; | |
width: 100%; | |
display: grid; | |
grid-gap: 25px; | |
grid-template: auto / repeat(auto-fit, minmax(300px, 1fr)); | |
} | |
.item { | |
width: 100%; | |
border-radius: 8px; | |
background-color: rgb(137, 87, 137); | |
padding: 15px; | |
overflow: hidden; | |
} | |
.item img { | |
width: 100%; | |
height: 300px; | |
border-radius: 4px; | |
} | |
.flex-container { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.search-result .title { | |
color: whitesmoke; | |
margin: 20px 10px 0 0; | |
font-size: 1.8rem; | |
font-weight: 400; | |
} | |
.view-btn { | |
text-decoration: none; | |
text-align: center; | |
width: 130px; | |
padding: 10px 0; | |
background-color: #404041; | |
color: whitesmoke; | |
font-size: 1.4rem; | |
font-weight: 600; | |
margin-top: 20px; | |
border-radius: 4px; | |
align-self: flex-start; | |
} | |
.item-data { | |
color: whitesmoke; | |
display: block; | |
margin-top: 10px; | |
font-size: 1.4rem; | |
letter-spacing: 0.05rem; | |
line-height: 2rem; | |
} | |
.container.initial .brand { | |
font-size: 7rem; | |
} | |
.container.initial form { | |
max-width: 800px; | |
} | |
.container.initial form input { | |
padding: 20px; | |
font-size: 3rem; | |
} | |
@media (max-width: 768px) { | |
.search-result { | |
grid-gap: 10px; | |
} | |
.container.initial .brand { | |
font-size: 4rem; | |
} | |
.container.initial form { | |
max-width: 500px; | |
} | |
.container.initial form input { | |
padding: 10px; | |
font-size: 2rem; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment