49 | ${name}
50 | ${String(minutes).padStart(2, '0')}:00
51 |
52 | `;
53 |
54 | document.querySelector("#cooking ul").appendChild(li);
55 | const timer = {
56 | name,
57 | duration: minutes*60,
58 | current: minutes*60,
59 | element: li,
60 | }
61 | const timerFunction = ()=> {
62 | Cooking.updateTimer(timer)
63 | };
64 |
65 | timer.interval = setInterval(timerFunction.bind(timer), 1000);
66 | li.onclick = () => {
67 | li.remove();
68 | clearInterval(timer.interval);
69 | }
70 | Cooking.timers.push(timer);
71 | },
72 | updateTimer: (timer) => {
73 | timer.current--;
74 | timer.element.querySelector("p").textContent = `${String(Math.floor(timer.current / 60)).padStart(2, '0')}:${String(timer.current % 60).padStart(2, '0')}`
75 | if (timer.current<20) {
76 | timer.element.style.color = "red";
77 | }
78 | if (timer.current==0) {
79 | alertTimerFinished(timer);
80 | timer.element.querySelector("article").style.color = "white";
81 | timer.element.querySelector("article").style.backgroundColor = "red";
82 | clearInterval(timer.interval);
83 | }
84 | },
85 | step: (index) => {
86 | Cooking.currentStep = index;
87 | if (index>Cooking.recipe.steps.length-1) {
88 | Cooking.end();
89 | }
90 | const step = Cooking.recipe.steps[index];
91 | document.querySelector("#cooking h3").textContent = `${index+1} of ${Cooking.recipe.steps.length} | ${step.name}`;
92 | document.querySelector("#cooking .step").innerHTML = step.description ;
93 |
94 | if (step.timer) {
95 | const timerButton = document.createElement("button");
96 | timerButton.textContent = `Add timer for ${step.timer} minutes`;
97 | timerButton.onclick = () => {
98 | Cooking.addTimer(step.name, step.timer);
99 | }
100 | document.querySelector("#cooking .step").appendChild(timerButton);
101 |
102 | }
103 |
104 | document.querySelector("#btn-previous").disabled = index==0;
105 | document.querySelector("#btn-next").textContent = index==Cooking.recipe.steps.length-1 ? "You finished!" : "Next Step";
106 |
107 | }
108 | }
--------------------------------------------------------------------------------
/CookingMasters/scripts/app.js:
--------------------------------------------------------------------------------
1 | import Router from './Router.js';
2 | import { Cooking } from './Cooking.js';
3 |
4 | window.app = {}
5 | app.router = Router;
6 | app.cooking = Cooking;
7 | app.recipes = [];
8 |
9 | window.addEventListener("DOMContentLoaded", () => {
10 | app.router.init();
11 | app.cooking.init(document.querySelector("#cooking"));
12 | loadRecipes();
13 | });
14 |
15 | app.recipeAI = async () => {
16 | const ingredients = document.getElementById("ingredients");
17 | const value = ingredients.value;
18 | ingredients.disabled = true;
19 | ingredients.value = "🤖 Our AI Chef is working...";
20 | const response = await fetch("http://localhost:3000/api/recipe", {
21 | method: 'POST',
22 | headers: {
23 | 'Content-Type': 'application/json',
24 | },
25 | body: JSON.stringify({"ingredients": value })
26 | })
27 | const jsonResponse = await response.json();
28 | const recipe = JSON.parse(jsonResponse.content);
29 | console.log(recipe);
30 | if (recipe!=false) {
31 | app.recipes.push(recipe);
32 | const responseImg = await fetch("http://localhost:3000/api/image", {
33 | method: 'POST',
34 | headers: {
35 | 'Content-Type': 'application/json',
36 | },
37 | body: JSON.stringify({"prompt": `A high-quality photograph of the meal ${recipe.name}: ${recipe.description}` })
38 | })
39 | const jsonImage = await responseImg.json();
40 | recipe.image = jsonImage.url;
41 | const div = document.createElement("div");
42 | document.getElementById("ai-recipe").appendChild(div);
43 | renderRecipe(div, recipe, "large");
44 | } else {
45 | alert("Ingredients aren't valid")
46 | }
47 | ingredients.value = "";
48 | ingredients.disabled = false;
49 | }
50 |
51 | export async function alertTimerFinished(timer) {
52 | console.log(`Timer finished: ${timer.name}`);
53 |
54 | }
55 | async function loadRecipes() {
56 | const response = await fetch("/data/recipes.json");
57 | app.recipes = await response.json();
58 | renderRecipes();
59 | }
60 |
61 | function renderRecipes() {
62 | renderRecipe(document.querySelector("#recipe-week"), app.recipes[0], "large");
63 | renderRecipe(document.querySelector("#recipe-most"), app.recipes[1], "large");
64 | const theRest = app.recipes.slice(2);
65 | document.querySelector("#all ul").innerHTML = "";
66 | theRest.forEach(r => {
67 | const li = document.createElement("li");
68 | document.querySelector("#all ul").appendChild(li);
69 | renderRecipe(li, r, "small");
70 | })
71 | }
72 |
73 | function renderRecipe(element, recipe, className) {
74 | element.innerHTML = `
75 | 