Restaurant/script.js at main · maruthang/Restaurant · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function showAll() {
  $.get("https://dummyjson.com/recipes", (data) => {
    // console.log(data)
    recipes = data.recipes;
    // console.log(recipes);
    recipes.forEach((element) => {
      $(".container").append(`
        <div class="details">
            <div class="images"><img src="${element.image}" alt="${element.name}" width="300px"></div>
            <div class="name-rating">
                <div class="names">${element.name}</div>
                <div class="ratings">${element.rating}</div>
            </div>
        </div>`);
    });
  });
}

$(".mealtype a").on("click",(e)=>{
  console.log(e.target)
  $(".container .details").hide()
  $.get("https://dummyjson.com/recipes",(data)=>{
    receipes=data.recipes;
    console.log(data)
    let one=receipes.filter(recipe=>{
      return recipe.mealType[0].toLowerCase()===$(e.target).text().toLowerCase()})
      console.log(one)

      one.forEach(e=>{
        console.log(e)
        addDiv(e)
      })
  })

})


function addDiv(e){
  $(".container").append(`
        <div class="details">
            <div class="images"><img src="${e.image}" alt="${e.name}" width="300px"></div>
            <div class="name-rating">
                <div class="names">${e.name}</div>
                <div class="ratings">${e.rating}</div>
            </div>
        </div>`);
}


// $.get('https://dummyjson.com/recipes',(data)=>{
//   recipes=data.recipes;
//   recipes.forEach((element)=>{
//     console.log(element.mealType)
//   })
// }
// )


// function add() {
//   $.get("https://dummyjson.com/recipes", (data) => {
//     recipes = data.recipes;
//     recipes.forEach((element) => {
//       $(".container").append(`
//         <div class="details" data-recipe-id="${element.id}">
//             <div class="images"><img src="${element.image}" alt="${element.name}" width="300px"></div>
//             <div class="name-rating">
//                 <div class="names">${element.name}</div>
//                 <div class="ratings">${element.rating}</div>
//             </div>
//         </div>`);
//     });

//     // Add click event listener to each details card
//     $(".details").on("click", function() {
//       const recipeId = $(this).data("recipe-id");
//       const recipe = recipes.find(r => r.id === recipeId);
//       showPopup(recipe);
//     });
//   });
// }

// function showPopup(recipe) {
//   const popupHtml = `
//     <div class="popup">
//       <div class="popup-content">
//         <h2>${recipe.name}</h2>
//         <p><strong>Ingredients:</strong> ${recipe.ingredients.join(", ")}</p>
//         <p><strong>Instructions:</strong> ${recipe.instructions}</p>
//         <p><strong>Cooking Hour:</strong> ${recipe.cookingMinutes}</p>
//         <button class="close-popup">Close</button>
//       </div>
//     </div>
//   `;

//   $("body").append(popupHtml);
//   $(".close-popup").on("click", function() {
//     $(".popup").remove();
//   });
// }

// // ... existing code ...