API Exercise

Instruction

Create

In athis web-basedexercise we would create web application thatto has following function:

Could searchprovide information forabout inputFood wordDish fromby userusing CouldMealDB playAPI. sound for how to pronounce words

In

By this page we have receive only 1 input with 21 buttons.button.

1. Input: WordDish name
2. Button: Search
3. Button: Play Sound

In

A thisweb page youapplication should haveprovide thisuser following information:

details:

1. PhoneticDish name - How word pronounce according to phonetic principle
2. PartOrigin of Speech country- which part of the sentence this word belongs to
3. MeaningIngredients with amount - Definition and alternative meaning of that word
4. ExampleInstruction - Example sentence where that word being use

everything should be re-render when you click on button Search.

Example:

Here is your starter template:

import React, { useEffect, useState } from "react";
import axios from "axios";

export default function SearchDish() {
    const [ingredients,setIngredients] = useState([""]);

  const handleChange = (event) => {
    // handle user input
  };

  const handleSearch = () => {
    // handle user on search
  };

  useEffect(() => {
    const fetchData = async () => {
        //put your fetch here
    };

    fetchData();
  }, []);

  return (
    <>
      <div>
        <div>
          <input
            type="text"
            placeholder="Type A Dish Name Here.."
            onChange={handleChange}
          />
          <button
            style={{ color: "black", backgroundColor: "white" }}
            onClick={handleSearch}
          >
            Search
          </button>
        </div>
        <div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              borderStyle:"solid",
              borderColor:"white"
            }}
          >
            <img alt="Dish Image" src="Put Image from response here"
            style={{ width: 700, height: 700 }} />
          </div>

          <div>
            <h2>Dish Name : Put Dish Name from response here</h2>
            <h3>Origin Country : Put Origin Country from response here</h3>
            <h3>Ingredients : Put list of Ingredients from response here</h3>
          </div>
          <div>
            {/* List your ingredients here */}
            {ingredients.map((ingredient) => (
              <p>{ingredient}</p>
            ))}
          </div>
          <div>
            {/* List your ingredients here */}
            <h3>Instructions :</h3>
            <pre>Put step of Instructions from response here</pre>
          </div>
        </div>
      </div>
    </>
  );
}