Food Recipe App #30days30submits #day-22

food-recipe-app-30days30submits-day-22.markdown

Food Recipe App #30days30submits #day-22

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<section>
  <div class="container initial">
    <h1 class="brand">Recipe App</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/[email protected]/dist/ionicons.js"></script>

<!-- *******************   -->
<!--  !!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!--  This Code is for only the floating card in right bottom corner -->
<!-- ********************  -->

<div id="webCifar-sidebox">
  <div id="webCifar">
    <h2 class="logo">HP IT GROUP (TEBIM TEBITAGEM) TTGRT</h2>
    <p class="author">Coded By <span>HARUN PEHLİVAN </span> </p>
    <div class="items">
      <a href="https://www.youtube.com/user/harunpehlivan1" target="_blank" class="item youtubeLink">
        <svg title="watch how we made this" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
          <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
        </svg>
        <p>Watch how we made this.
        </p>
      </a>
      <a href="https://harunpehlivanitcoderdesignerfounderceo.glitch.me/" target="_blank" class="item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
        </svg>
        <p>CODER,DESIGNER</p>
      </a>

    </div>
    <div class="close">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>
  </div>
  <div id="webCifar-icon">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <p>Info About the pen</p>
  </div>
</div>

script.js

const searchForm = document.querySelector("form");
const searchResultDiv = document.querySelector(".search-result");
const container = document.querySelector(".container");
let searchQuery = "";
const APP_ID = "Use Your Own App ID Here";
const APP_key = "Use Your Own App Key Here";
// 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 Code is for only the floating card in right bottom corner
// **********************

const WebCifarIcon = document.querySelector("#webCifar-icon");
const WebCifarEl = document.querySelector("#webCifar");
const close = WebCifarEl.querySelector(".close");
const youtubeLink = document.querySelector(".youtubeLink");

WebCifarIcon.addEventListener("click", () => {
  WebCifarEl.classList.add("active");
});
close.addEventListener("click", () => {
  WebCifarEl.classList.remove("active");
});

youtubeLink.setAttribute("href", "https://www.youtube.com/user/harunpehlivan1");

style.css

@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(26, 26, 27);
}
.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(37, 37, 37);
  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;
  }
}

/* ********************* */
/* This Code is for only the floating card in right bottom corner */
/* ********************** */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  padding: 0;
  margin: 0;
  color: var(--color-4);
  text-decoration: none;
}
#webCifar-sidebox {
  position: absolute;
  right: 0px;
  bottom: 0px;
  overflow-x: clip;
  width: 300px;
}
#webCifar-sidebox p {
  padding: 0;
  margin: 0;
}
#webCifar {
  --color-1: #17bcb4;
  --color-2: #24252a;
  --color-3: #244044;
  --color-4: #f3f8f7;
  background: var(--color-2);
  display: inline-block;
  color: var(--color-4);
  padding: 10px 17px;
  border-radius: 6px;
  font-family: "Roboto Mono", monospace;
  text-align: center;
  position: absolute;
  right: 5px;
  bottom: 5px;
  -webkit-transform: translateX(calc(100% + 5px));
  transform: translateX(calc(100% + 5px));
  -webkit-transition: 0.5s ease-out transform;
  transition: 0.5s ease-out transform;
  z-index: 4;
}

#webCifar.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#webCifar .logo {
  font-size: 25px;
}

#webCifar .author {
  margin-top: 10px;
  margin-bottom: 20px;
}

#webCifar .author span {
  background-color: var(--color-3);
  padding: 3px;
  border-radius: 4px;
}

#webCifar .items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#webCifar .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 5px;
  border-radius: 4px;
  text-align: left;
}

#webCifar .item:hover {
  background-color: var(--color-3);
}

#webCifar svg {
  max-width: 20px;
}

#webCifar .close {
  position: absolute;
  display: inline-block;
  height: 30px;
  width: 30px;
  right: 5px;
  top: 5px;
  padding: 5px;
  background-color: var(--color-3);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

#webCifar-icon {
  --color-2: #24252a;
  --color-3: #244044;
  font-family: "Roboto Mono", monospace;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--color-2);
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px;
  border-radius: 4px;
  gap: 5px;
  margin: 5px;
  cursor: pointer;
  z-index: 1;
  position: relative;
  right: -27%;
}

#webCifar-icon svg {
  max-width: 20px;
}