new

 App.js

import react, {useEffect, useState}from "react";
import './App.css';
import Header from "./components/Header";
import Recipes from "./components/Recipes";
import Axios from "axios";


function App() {
  const [search, setSearch] = useState("Icecream");
  const [recipes,setRecipes] = useState([]);

  useEffect(()=>{
     getRecipe();
  },[]);
  
  const getRecipe = async()=>{
    const res = await Axios.get(`https://api.edamam.com/search?q=${search}&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=3&calories=591-722&health=alcohol-free`)
    setRecipes(res.data.hits)
  }
  
  const APP_ID = "09fd6cf9";
  const APP_KEY = "5645169c14b6b1216a543e0cfbd04e37";
   

  const onInputChange = e =>{ 
     
    setSearch(e.target.value)
  }

  const onSearch = () =>{
    getRecipe();
  }




  return (
    <div className="App">
      <Header search={search} onInputChange={onInputChange} onSearch={onSearch}/>
      <div className="container"><Recipes recipes={recipes}/></div>
    </div>
  );
}

export default App;


Head.js

import React from 'react'

function Header(props) {
    return (
        <div className="jumbotron jumbotron-fluid">
            <h1><span className="material-icons brand-icon">
fastfood
</span>FoodKhabari </h1>
<div className="input-group w-50 mx-auto">
  <input type="text" className="form-control" placeholder="Search Your Recipe..." value={props.search} onChange={props.onInputChange} aria-label="Recipient's username" aria-describedby="basic-addon2"/>
  <button type="button" className="btn btn-dark" onClick={props.onSearch}>Search Recipe</button>
</div>
        </div>
    )
}

export default Header


Recipe.js

import React from 'react'
import RecipeItems from './RecipeItems';

function Recipes(props) {
    const{recipes} = props;
    return (
        <div className="row">
           {recipes.map(recipe=>(
                   <RecipeItems 
                       name = {recipe.recipe.label}
                       image= {recipe.recipe.image}
                       ingredientLines = {recipe.recipe.ingredientLines}
                   />
               ))
           }
        </div>
    )
}

export default Recipes


RecipeItem.js

import React from 'react'

function RecipeItems(props) {
    const {name,image,ingredientLines} = props;
    return (
        
            <div className="col-md-3 mx-auto">
                       <div className="card py-3 text-center">
                       <img src={image} className="img-fluid w-50 mx-auto rounded-circle"/>
                           <div className="card-body">
                               <h5>{name}</h5>
                           </div>
                           <ul className="list-group list-group-flush">{ingredientLines.map(ingredient=>( <li
                               className="list-group-item">{ingredient}</li>)
                           ) }</ul>
                       </div>
                   </div>
        
    )
}

export default RecipeItems






































Comments

Post a Comment

Popular posts from this blog

Git and Github

Image
 git init :- to initilise the commuit  git status :- status check karna ka lia  git add (then file name) :-  git add sa hum file add karsakta haa git add file ka name  ls :- check karna ka lia  git add sa phela wo stage pe ata haa  then we have git commit for committing  git commit -m "initial commit" //git add file name ka bade git commit -m "initial commit" karna padta haa  cmd + k / clear     //clear karna ka lia git log :-  Git log is  a utility tool to review and read a history of everything that happens to a repository . git add .  karna sa sari file staging area mae ajaying ge git log will show all commites  git checkout  15ebcb8e1d62939377b5a2444ecd807e305a681e (has commit wala ) particular commit ko check karna ka lia  git checkout master           //pura wapas ajaya ga  git branch    // particular branch pe chala jaya ga  branch  git checkout -b bip/multiply              with the help of this we can add new branch  git checkout dev                         
Read more

bubble short Q1

  Bubble short assening order  5 9 8 -2 1 1st titration 4 comparison  2nd itteretion 3 comparison and so on  comparison = n-i; public   class  BubbleSortExample {        static   void  bubbleSort( int [] arr) {            int  n = arr.length;            int  temp =  0 ;             for ( int  i= 0 ; i < n; i++){                     for ( int  j= 1 ; j < (n-i); j++){                              if (arr[j- 1 ] > arr[j]){                                     //swap elements                                     temp = arr[j- 1 ];                                    arr[j- 1 ] = arr[j];                                    arr[j] = temp;                            }                                               }            }          }        public   static   void  main(String[] args) {                    int  arr[] ={ 3 , 60 , 35 , 2 , 45 , 320 , 5 };                                     System.out.println( "Array Before Bubble Sort" );                    for ( int  i= 0 ; 
Read more

Java Program to Check Whether the String Consists of Special Characters

 // Java Program to Check Whether String contains Special // Characters Using Character Class // Importing input output classes import java.io.*; // Main class class GFG { // Method 1 // Main driver method public static void main(String[] args) { // Declaring and initializing count for // special characters int count = 0; // Input custom string String s = "!#$GeeeksforGeeks.Computer.Science.Portal!!"; // Iterating through the string // using standard length() method for (int i = 0; i < s.length(); i++) { // Checking the character for not being a // letter,digit or space if (!Character.isDigit(s.charAt(i)) && !Character.isLetter(s.charAt(i)) && !Character.isWhitespace(s.charAt(i))) { // Incrementing the countr for spl // characters by unity count++; } } // When there is no special character encounterd if (count == 0) // Display the print statement System.out.println
Read more