{"name":"Bread Drawing Fun","description":"Get ready to unleash your creativity and draw your own delicious piece of bread with Bread Drawing Fun! This interactive webpage allows you to design and customize your own loaf of bread using simple HTML and CSS.","photo":null,"view_count":23,"fork_count":0,"expires_at":null,"created_at":"2024-05-02T14:03:44.502815Z","updated_at":"2024-05-02T14:03:44.502816Z","user_id":79,"status":"PRIVATE","parent_id":null,"id":1318,"user":{"username":"mravery","id":79,"password_hash":"$2b$12$OiHmchUOvuYw584gZMXd1.TQ5SfD2rTId0RlIlHjBiNZEephx4aKm","updated_at":"2024-04-02T01:28:21.811772Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"aqldrum@gmail.com","recess_id":"f8d6d949-6377-42be-8380-2b66a8d9568c","created_at":"2024-04-02T01:28:21.811769Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"\n// Add JavaScript for bread drawing fun\n// Initial setup for the canvas\n// Initial setup for the canvas\nlet lastBakedGood = \"\"; // Add this near your other global variables\nlet flourCount = 10; // Initialize flourCount at the top of your script if not already done\nlet timer; // Declare timer variable at the top of your script\nlet countdownInterval; // Declare countdownInterval variable at the top of your script\nlet customerOrders = [];\nlet moneyEarned = 0;\nlet sugarCount = 30; // Start with 30 cups of sugar\nlet chocolateCount = 20; // Start with 20 bars of chocolate\nlet cocoaPowderCount = 5; // Start with 5 cups of cocoa powder\nlet bakingPowderCount = 100; // Start with 100 tablespoons of baking powderr\nfunction setup() {\n createCanvas(1400, 100);\n}\nfunction freezeGame() {\n const inputs = document.querySelectorAll('input');\n const button = document.querySelector(\"button[onclick='combineIngredients()']\");\n inputs.forEach(input => input.disabled = true); // Disable all input elements\n button.disabled = true; // Disable the \"Combine Ingredients\" button\n}\n\n\nlet orderCounts = {\n bread: 0,\n \"chocolate chip cookies\": 0,\n brownies: 0,\n coffee: 0,\n \"ice cream\": 0,\n};\n\n\nfunction getRandomOrder() {\n const orders = [\"bread\", \"chocolate chip cookies\", \"brownies\"];\n\n\n // Add machine-specific orders if the machines have been purchased\n if (machineTypes.coffee) {\n orders.push(\"coffee\");\n }\n if (machineTypes.iceCream) {\n orders.push(\"ice cream\");\n }\n\n\n // Calculate total orders made so far\n const totalOrders = Object.values(orderCounts).reduce((sum, count) => sum + count, 0);\n\n\n // Calculate the weighted probabilities\n const probabilities = orders.map(order => {\n // Higher weight for orders with fewer counts\n return (totalOrders + 1) / (orderCounts[order] + 1);\n });\n\n\n // Normalize probabilities\n const totalProbability = probabilities.reduce((sum, p) => sum + p, 0);\n const normalizedProbabilities = probabilities.map(p => p / totalProbability);\n\n\n // Randomly select an order based on the normalized probabilities\n let random = Math.random();\n for (let i = 0; i < normalizedProbabilities.length; i++) {\n if (random < normalizedProbabilities[i]) {\n orderCounts[orders[i]]++;\n return orders[i];\n }\n random -= normalizedProbabilities[i];\n }\n // Fallback in case of rounding errors\n return orders[orders.length - 1];\n}\nfunction combineIngredients() {\n // Stop the timer when ingredients are combined\n clearTimeout(timer);\n clearInterval(countdownInterval);\n\n\n if (flourCount <= 0) {\n alert(\"You're out of flour! Buy more to continue baking.\");\n return; // Exit the function if there's no flour left\n }\n\n\n if (sugarCount <= 0) {\n alert(\"You're out of sugar! Buy more to continue baking.\");\n return; // Exit the function if there's no sugar left\n }\n\n\n if (chocolateCount <= 0) {\n alert(\"You're out of chocolate! Buy more to continue baking.\");\n return; // Exit the function if there's no chocolate left\n }\n\n\n if (cocoaPowderCount <= 0) {\n alert(\"You're out of cocoa powder! Buy more to continue baking.\");\n return; // Exit the function if there's no cocoa powder left\n }\n\n\n if (bakingPowderCount <= 0) {\n alert(\"You're out of baking powder! Buy more to continue baking.\");\n return; // Exit the function if there's no baking powder left\n }\n\n\n const selectedIngredients = document.querySelectorAll('input[name=\"ingredient\"]:checked');\n let ingredientsArray = Array.from(selectedIngredients).map(ingredient => ingredient.value).sort();\n\n\n console.log(\"Selected Ingredients:\", ingredientsArray); // Debugging log\n\n\n let resultMessage = \"You combined: \";\n let recipeFound = false;\n let bakedGood = '';\n\n\n if (arraysMatch(ingredientsArray, ['flour', 'water', 'yeast', 'salt'].sort())) {\n bakedGood = 'bread dough';\n resultMessage = `Congratulations! You made ${bakedGood}.`;\n flourCount--; // Decrement flour count for bread\n recipeFound = true;\n } else if (arraysMatch(ingredientsArray, ['eggs', 'flour', 'sugar', 'salt', 'vanilla', 'chocolate', 'butter', 'baking powder'].sort())) {\n bakedGood = 'chocolate chip cookie dough';\n resultMessage = `Congratulations! You made ${bakedGood}.`;\n flourCount--; // Decrement flour count for cookies\n sugarCount--; // Decrement sugar count for cookies\n chocolateCount--; // Decrement chocolate count for cookies\n bakingPowderCount--; // Decrement baking powder count by 1 for cookies\n recipeFound = true;\n } else if (arraysMatch(ingredientsArray, ['eggs', 'flour', 'sugar', 'salt', 'vanilla', 'chocolate', 'butter', 'baking powder', 'cocoa powder'].sort())) {\n bakedGood = 'brownie batter';\n resultMessage = `Congratulations! You made ${bakedGood}.`;\n flourCount--; // Decrement flour count for brownies\n sugarCount--; // Decrement sugar count for brownies\n chocolateCount--; // Decrement chocolate count for brownies\n cocoaPowderCount--; // Decrement cocoa powder count by 1 for brownies\n bakingPowderCount--; // Decrement baking powder count by 1 for brownies\n recipeFound = true;\n } else if (arraysMatch(ingredientsArray, ['coffee beans', 'milk', 'sugar'].sort())) {\n bakedGood = 'coffee';\n resultMessage = `Congratulations! You made ${bakedGood}.`;\n recipeFound = true;\n } else if (arraysMatch(ingredientsArray, ['sugar', 'cocoa powder', 'milk', 'heavy cream'].sort())) {\n bakedGood = 'ice cream';\n resultMessage = `Congratulations! You made ${bakedGood}.`;\n recipeFound = true;\n } else {\n resultMessage += ingredientsArray.join(\", \");\n }\n\n\n console.log(\"Result Message:\", resultMessage); // Debugging log\n\n\n document.getElementById(\"baking-result\").innerText = resultMessage;\n\n\n if (recipeFound) {\n document.getElementById(\"oven-button\").disabled = false;\n clearInterval(countdownInterval); // Stop the countdown if a recipe is successfully made\n alert(resultMessage); // Notify the user that they successfully made a baked good\n clearIngredientCheckboxes(); // Clear checkboxes after successfully making a recipe\n updateFlourAndMoneyDisplay(); // Update the display of flour and money\n updateSugarAndChocolateDisplay(); // Update the display of sugar and chocolate\n updateCocoaPowderDisplay(); // Update the display of cocoa powder\n updateBakingPowderDisplay(); // Update the display of baking powder\n }\n}\nfunction arraysMatch(arr1, arr2) {\n if (arr1.length !== arr2.length) return false;\n for (let i = 0; i < arr1.length; i++) {\n if (arr1[i] !== arr2[i]) return false;\n }\n return true;\n}\n\n\n\n\nfunction arraysMatch(arr1, arr2) {\n if (arr1.length !== arr2.length) return false;\n for (let i = 0; i < arr1.length; i++) {\n if (arr1[i] !== arr2[i]) return false;\n }\n return true;\n}\nfunction startTimer() {\n let countdownTime = 20; // 20 seconds for the countdown\n document.getElementById(\"countdown\").innerText = \"Time left: \" + countdownTime + \" seconds\";\n\n\n\n\n clearTimeout(timer); // Clear any existing timer\n clearInterval(countdownInterval); // Ensure no previous intervals are running\n\n\n\n\n countdownInterval = setInterval(function () {\n countdownTime--;\n document.getElementById(\"countdown\").innerText = \"Time left: \" + countdownTime + \" seconds\";\n\n\n\n\n if (countdownTime <= 0) {\n clearInterval(countdownInterval); // Stop the countdown\n document.getElementById(\"ingredient-selection\").innerHTML = \"Game Over. Please reload the page to try again.\";\n document.querySelector(\"button[onclick='combineIngredients()']\").disabled = true;\n }\n }, 1000); // Update every second\n}\nfunction clearIngredientCheckboxes() {\n const checkboxes = document.querySelectorAll('input[name=\"ingredient\"]');\n checkboxes.forEach(checkbox => checkbox.checked = false);\n}\nfunction clearCountdown() {\n clearInterval(countdownInterval); // Stop the countdown interval\n document.getElementById(\"countdown\").innerText = \"\"; // Clear countdown display\n}\nfunction serveOrder(bakedGood) {\n const orderIndex = customerOrders.indexOf(bakedGood);\n if (orderIndex !== -1) {\n customerOrders.splice(orderIndex, 1); // Remove the served order from the list\n let value = 0; // Initialize value to 0\n switch (bakedGood) {\n case \"bread\":\n value = 3;\n break;\n case \"chocolate chip cookies\":\n value = 5;\n break;\n case \"brownies\":\n value = 8;\n break;\n case \"coffee\":\n value = 4; // Coffee price\n break;\n case \"ice cream\":\n value = 5; // Ice cream price\n break;\n }\n moneyEarned += value; // Ensure value is used here\n updateMoneyDisplay();\n alert(`Served ${bakedGood}. You've earned money! Total: $${moneyEarned}`);\n } else {\n alert(\"No customer for this item right now.\");\n }\n}\nfunction generateCustomerOrder() {\n const newOrder = getRandomOrder();\n customerOrders.push(newOrder);\n alert(`New customer order received: ${newOrder}`);\n displayOrders();\n randomizeOrderButtonText();\n}\n\n\n\n\nfunction randomizeOrderButtonText() {\n const button = document.querySelector(\"button[onclick='generateCustomerOrder()']\");\n const buttonTexts = [\n \"Get Another Order\",\n \"New Customer Request\",\n \"Generate Order\",\n \"Get Customer Order\",\n \"Receive New Order\",\n \"Order Up!\",\n \"Next Customer\",\n \"More Orders\"\n ];\n const randomText = buttonTexts[Math.floor(Math.random() * buttonTexts.length)];\n button.innerText = randomText;\n}\n\n\n\n\nfunction displayOrders() {\n const ordersElement = document.getElementById(\"customer-orders\");\n ordersElement.innerHTML = customerOrders.join(\", \");\n}\n\n\n\n\nfunction updateMoneyDisplay() {\n document.getElementById(\"money-earned\").innerText = `Money Earned: ${moneyEarned}`;\n}\nfunction bakeGood() {\n const result = document.getElementById(\"baking-result\").innerText;\n if (result.includes(\"Congratulations\")) {\n // Determine the baked good based on the combined ingredients\n if (result.includes(\"bread dough\")) {\n lastBakedGood = \"bread\";\n } else if (result.includes(\"chocolate chip cookie dough\")) {\n lastBakedGood = \"chocolate chip cookies\";\n } else if (result.includes(\"brownie batter\")) {\n lastBakedGood = \"brownies\";\n }\n\n\n\n\n setTimeout(() => {\n document.getElementById(\"baking-result\").innerText = `Congratulations, your ${lastBakedGood} is ready!`;\n document.getElementById(\"oven-button\").disabled = true;\n document.getElementById(\"serve-button\").disabled = false; // Enable serve button here\n clearIngredientCheckboxes(); // Clear checkboxes after baking is done\n }, 3000); // Correct delay to reflect baking time\n } else {\n alert(\"Please combine the correct ingredients before baking.\");\n }\n}\nfunction serveBakedGood() {\n if (lastBakedGood && customerOrders.includes(lastBakedGood)) {\n serveOrder(lastBakedGood);\n document.getElementById(\"baking-result\").innerText = \"You've served: \" + lastBakedGood; // Give feedback\n document.getElementById(\"serve-button\").disabled = true; // Disable the serve button until next bake\n lastBakedGood = \"\"; // Reset the lastBakedGood variable\n } else {\n alert(\"It seems there's nothing to serve right now.\");\n }\n}\nfunction updateMoneyDisplay() {\n document.getElementById(\"money-earned\").innerText = `Money Earned: ${moneyEarned}`;\n\n\n\n\n if (moneyEarned >= 50 && !document.getElementById(\"congratulations-message\") && !localStorage.getItem('congratsShown')) {\n displayCongratulationsMessage();\n localStorage.setItem('congratsShown', 'true'); // Store a flag in localStorage to show the message only once\n }\n}\nfunction updateFlourAndMoneyDisplay() {\n document.getElementById(\"flour-count\").innerText = `Flour Count: ${flourCount} cups`;\n document.getElementById(\"money-earned\").innerText = `Money Earned: ${moneyEarned}`;\n}\n\n\n\n\nfunction updateSugarAndChocolateDisplay() {\n document.getElementById(\"sugar-count\").innerText = `Sugar Count: ${sugarCount} cups`;\n document.getElementById(\"chocolate-count\").innerText = `Chocolate Count: ${chocolateCount} bars`;\n}\n\n\n\n\nfunction updateCocoaPowderDisplay() {\n document.getElementById(\"cocoa-powder-count\").innerText = `Cocoa Powder Count: ${cocoaPowderCount} cups`;\n}\nfunction updateBakingPowderDisplay() {\n document.getElementById(\"baking-powder-count\").innerText = `Baking Powder Count: ${bakingPowderCount} tablespoons`;\n}\n\n\n\n\nfunction arraysMatch(arr1, arr2) {\n if (arr1.length !== arr2.length) return false;\n for (let i = 0; i < arr1.length; i++) {\n if (arr1[i] !== arr2[i]) return false;\n }\n return true;\n}\nfunction generateCustomerOrder() {\n const newOrder = getRandomOrder();\n customerOrders.push(newOrder);\n alert(`New customer order received: ${newOrder}`);\n displayOrders();\n randomizeOrderButtonText();\n}\n\n\n\n\nfunction randomizeOrderButtonText() {\n const button = document.querySelector(\"button[onclick='generateCustomerOrder()']\");\n const buttonTexts = [\n \"Get Another Order\",\n \"New Customer Request\",\n \"Generate Order\",\n \"Get Customer Order\",\n \"Receive New Order\",\n \"Order Up!\",\n \"Next Customer\",\n \"More Orders\"\n ];\n const randomText = buttonTexts[Math.floor(Math.random() * buttonTexts.length)];\n button.innerText = randomText;\n}\nfunction buyFlour() {\n if (moneyEarned >= 2) {\n flourCount = 10; // Reset flour count to initial amount\n moneyEarned -= 2; // Deduct $2 from money earned\n updateFlourAndMoneyDisplay(); // Update the display of flour and money\n } else {\n alert(\"Not enough money to buy flour!\");\n }\n}\n\n\n\n\nfunction buySugar() {\n if (moneyEarned >= 3) {\n sugarCount = 30; // Reset sugar count to initial amount\n moneyEarned -= 3; // Deduct $3 from money earned\n updateSugarAndChocolateDisplay(); // Update the display of sugar and chocolate\n updateMoneyDisplay(); // Update the display of money\n } else {\n alert(\"Not enough money to buy sugar!\");\n }\n}\n\n\n\n\nfunction buyChocolate() {\n if (moneyEarned >= 3) {\n chocolateCount = 20; // Reset chocolate count to initial amount\n moneyEarned -= 3; // Deduct $3 from money earned\n updateSugarAndChocolateDisplay(); // Update the display of sugar and chocolate\n updateMoneyDisplay(); // Update the display of money\n } else {\n alert(\"Not enough money to buy chocolate!\");\n }\n}\n\n\n\n\nfunction buyCocoaPowder() {\n if (moneyEarned >= 6) {\n cocoaPowderCount = 5; // Reset cocoa powder count to initial amount\n moneyEarned -= 6; // Deduct $6 from money earned\n updateCocoaPowderDisplay(); // Update the display of cocoa powder\n updateMoneyDisplay(); // Update the display of money\n } else {\n alert(\"Not enough money to buy cocoa powder!\");\n }\n}\n\n\n\n\nfunction buyBakingPowder() {\n if (moneyEarned >= 3) {\n bakingPowderCount = 100; // Reset baking powder count to initial amount\n moneyEarned -= 3; // Deduct $3 from money earned\n updateBakingPowderDisplay(); // Update the display of baking powder\n updateMoneyDisplay(); // Update the display of money\n } else {\n alert(\"Not enough money to buy baking powder!\");\n }\n}\ndocument.querySelector(\"label input[value='milk']\").disabled = true;\ndocument.querySelector(\"label input[value='milk']\").parentElement.classList.add('disabled-button');\n\n\n\n\ndocument.querySelector(\"label input[value='heavy cream']\").disabled = true;\ndocument.querySelector(\"label input[value='heavy cream']\").parentElement.classList.add('disabled-button');\n\n\n\n\ndocument.querySelector(\"label input[value='coffee beans']\").disabled = true;\ndocument.querySelector(\"label input[value='coffee beans']\").parentElement.classList.add('disabled-button');\n\n\n\n\ndocument.querySelector(\"label input[value='coffee beans']\").disabled = true;\nfunction displayCongratulationsMessage() {\n const congratsDiv = document.createElement(\"div\");\n congratsDiv.id = \"congratulations-message\";\n congratsDiv.innerHTML = `\n

Congratulations! You made it to $50!

Would you like to buy a coffee machine or ice cream machine for $20?

\n \n \n \n `;\n document.body.appendChild(congratsDiv);\n\n\n\n\n // Confetti effect (simple version)\n for (let i = 0; i < 100; i++) {\n createConfetti();\n }\n}\nlet machineTypes = {\n coffee: false,\n iceCream: false\n};\n\n\nfunction getRandomOrder() {\n const orders = [\"bread\", \"chocolate chip cookies\", \"brownies\"];\n\n\n // Add machine-specific orders if the machines have been purchased\n if (machineTypes.coffee) {\n orders.push(\"coffee\");\n }\n if (machineTypes.iceCream) {\n orders.push(\"ice cream\");\n }\n\n\n return orders[Math.floor(Math.random() * orders.length)];\n}\n\n\nfunction buyMachine(machineType) {\n if (machineType === 'coffee' && moneyEarned >= 20) {\n moneyEarned -= 20;\n updateMoneyDisplay();\n alert(\"You bought a coffee machine!\");\n enableCoffeeIngredients();\n showUseMachineButton('coffee');\n machineTypes.coffee = true; // Mark the coffee machine as purchased\n } else if (machineType === 'ice cream' && moneyEarned >= 30) {\n moneyEarned -= 30;\n updateMoneyDisplay();\n alert(\"You bought an ice cream machine!\");\n enableIceCreamIngredients();\n showUseMachineButton('ice cream');\n machineTypes.iceCream = true; // Mark the ice cream machine as purchased\n } else {\n alert(\"Not enough money to buy the machine!\");\n }\n}\nfunction enableCoffeeIngredients() {\n enableIngredient('milk');\n enableIngredient('coffee beans');\n}\n\n\n\n\nfunction enableIceCreamIngredients() {\n enableIngredient('milk');\n enableIngredient('heavy cream');\n}\n\n\n\n\nfunction enableIngredient(ingredient) {\n const ingredientButton = document.querySelector(`label input[value='${ingredient}']`);\n ingredientButton.disabled = false;\n ingredientButton.parentElement.classList.remove('disabled-button');\n}\n\n\n\n\nfunction showUseMachineButton(machineType) {\n const ovenButton = document.getElementById(\"oven-button\");\n const useMachineButton = document.createElement(\"button\");\n useMachineButton.id = `${machineType}-machine-button`;\n useMachineButton.innerText = `Use ${capitalize(machineType)} Machine`;\n useMachineButton.onclick = () => useMachine(machineType);\n ovenButton.replaceWith(useMachineButton);\n}\n\n\n\n\nfunction capitalize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\nfunction enableSpecialIngredients() {\n const milkButton = document.querySelector(\"label input[value='milk']\");\n const heavyCreamButton = document.querySelector(\"label input[value='heavy cream']\");\n const coffeeBeansButton = document.querySelector(\"label input[value='coffee beans']\");\n\n\n\n\n milkButton.disabled = false;\n heavyCreamButton.disabled = false;\n coffeeBeansButton.disabled = false;\n\n\n\n\n milkButton.parentElement.classList.remove('disabled-button');\n heavyCreamButton.parentElement.classList.remove('disabled-button');\n coffeeBeansButton.parentElement.classList.remove('disabled-button');\n}\nfunction createConfetti() {\n const confetti = document.createElement(\"div\");\n confetti.className = \"confetti\";\n confetti.style.left = Math.random() * window.innerWidth + \"px\";\n confetti.style.animationDuration = Math.random() * 3 + 2 + \"s\";\n document.body.appendChild(confetti);\n\n\n\n\n setTimeout(() => {\n confetti.remove();\n }, 5000);\n}\nfunction handleKeyPress(event) {\n if (event.key === \"Enter\") {\n getRecipe();\n }\n} function useMachine(machineType) {\n const selectedIngredients = document.querySelectorAll('input[name=\"ingredient\"]:checked');\n let ingredientsArray = Array.from(selectedIngredients).map(ingredient => ingredient.value).sort();\n\n\n\n\n if (machineType === 'coffee' && arraysMatch(ingredientsArray, ['coffee beans', 'milk', 'sugar'].sort())) {\n lastBakedGood = 'coffee';\n alert(\"Congratulations! You made coffee.\");\n clearIngredientCheckboxes();\n document.getElementById(\"serve-button\").disabled = false;\n } else if (machineType === 'ice cream' && arraysMatch(ingredientsArray, ['sugar', 'cocoa powder', 'milk', 'heavy cream'].sort())) {\n lastBakedGood = 'ice cream';\n alert(\"Congratulations! You made ice cream.\");\n clearIngredientCheckboxes();\n document.getElementById(\"serve-button\").disabled = false;\n } else {\n alert(`Please combine the correct ingredients before using the ${machineType} machine.`);\n }\n}\nfunction showUseMachineButton(machineType) {\n const useMachineButton = document.createElement(\"button\");\n useMachineButton.id = `${machineType}-machine-button`;\n useMachineButton.innerText = `Use ${capitalize(machineType)} Machine`;\n useMachineButton.onclick = () => useMachine(machineType);\n\n\n // Append the new button without replacing the oven button\n const ovenSection = document.getElementById(\"oven-section\");\n ovenSection.appendChild(useMachineButton);\n}\nfunction getRecipe() {\n const recipeMap = {\n \"bread\": \"Flour, Water, Yeast, Salt\",\n \"chocolate chip cookies\": \"Eggs, Flour, Sugar, Salt, Vanilla, Chocolate, Butter, Baking Powder\",\n \"brownies\": \"Eggs, Flour, Sugar, Salt, Vanilla, Chocolate, Butter, Baking Powder, Cocoa Powder\",\n \"coffee\": \"Coffee Beans, Milk, Sugar\",\n \"ice cream\": \"Sugar, Cocoa Powder, Milk, Heavy Cream\"\n };\n\n const desiredMix = document.getElementById('desired-mix').value.toLowerCase();\n if (desiredMix) {\n const recipe = recipeMap[desiredMix];\n if (recipe) {\n alert(`Recipe for ${desiredMix}: ${recipe}`);\n } else {\n alert(`Sorry, we don't have a recipe for: ${desiredMix}`);\n }\n } else {\n alert(\"Please enter what you want to make.\");\n }\n}","style.css":"/* Add CSS for bread drawing fun */\n#ingredient-selection {\n margin: 20px;\n padding: 10px;\n border: 1px solid #205550;\n border-radius: 5px;\n}\n\n#baking-result {\n margin: 20px;\n padding: 10px;\n background-color: #36ffff9a;\n border: 1px solid #205550;\n border-radius: 5px;\n}\n\n#oven-section {\n margin-top: 20px;\n /* Add margin at the top to create spacing */\n}\n\n#oven-button,\n#serve-button {\n margin-right: 10px;\n /* Add some spacing between the buttons */\n}\n\n.confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: red;\n animation: fall linear forwards;\n}\n\n@keyframes fall {\n to {\n transform: translateY(100vh) rotate(360deg);\n opacity: 0;\n }\n}\n\n.disabled-button {\n background-color: white;\n /* Set background to white */\n color: lightgray;\n /* Set text to light gray */\n pointer-events: none;\n /* Disable interaction */\n}","index.html":"\n\n\n\n\n\n\n \n \n \n Bread Drawing Fun\n \n\n\n\n\n\n\n

Welcome to Bread Drawing Fun!

What do you want to make?

\n \n \n

Select Ingredients:

\n Flour\n Water\n Yeast\n Salt\n Sugar\n Vanilla\n Chocolate\n Cocoa Powder\n Butter\n Baking Powder\n Eggs\n Milk\n Heavy Cream\n Coffee Beans\n \n

Your mixture will appear here.

Customer Orders

\n \n \n

Money Earned: $0

\n \n \n

Flour Count: 10 cups

Sugar Count: 30 cups

Chocolate Count: 20 bars

Cocoa Powder Count: 5 cups

Baking Powder Count: 100 tablespoons

\n \n \n \n \n \n

\n \n \n

\n \n"},"chat_history":[{"deleted":0,"code_id":95930,"input_tokens":null,"id":48929,"project_id":1318,"sender":"human","message":"ERROR: ReferenceError: Can't find variable: getRecipe at 625:17 in script.js","created_at":"2024-06-04T12:59:53.074256Z","output_tokens":null},{"deleted":0,"code_id":95930,"input_tokens":null,"id":48930,"project_id":1318,"sender":"ai","message":"It seems like the function `getRecipe` is not defined in your `script.js` file. Let's define a simple `getRecipe` function to handle the recipe request from the input field.\n\n```javascript\nfunction getRecipe() {\n const desiredMix = document.getElementById('desired-mix').value;\n if (desiredMix) {\n alert(`You requested the recipe for: ${desiredMix}. Here it is!`);\n } else {\n alert(\"Please enter what you want to make.\");\n }\n}\n```\n\n- Define the `getRecipe` function.\n- Get the value from the input field with ID `desired-mix`.\n- If the input is not empty, show an alert with the requested recipe.\n- If the input is empty, show an alert asking the user to enter something.","created_at":"2024-06-04T12:59:53.092290Z","output_tokens":null},{"deleted":0,"code_id":95932,"input_tokens":null,"id":48931,"project_id":1318,"sender":"human","message":"Can you make it that when you look up a baked good than it gives you a recipe using the one that you need to make the baked good","created_at":"2024-06-04T13:03:20.847927Z","output_tokens":null},{"deleted":0,"code_id":95932,"input_tokens":null,"id":48932,"project_id":1318,"sender":"ai","message":"Sure! Let's update the `getRecipe` function to display the recipe for the desired baked good. We'll add a simple mapping of baked goods to their recipes and return the corresponding recipe when requested.\n\n```javascript\nfunction getRecipe() {\n const recipeMap = {\n \"bread\": \"Flour, Water, Yeast, Salt\",\n \"chocolate chip cookies\": \"Eggs, Flour, Sugar, Salt, Vanilla, Chocolate, Butter, Baking Powder\",\n \"brownies\": \"Eggs, Flour, Sugar, Salt, Vanilla, Chocolate, Butter, Baking Powder, Cocoa Powder\",\n \"coffee\": \"Coffee Beans, Milk, Sugar\",\n \"ice cream\": \"Sugar, Cocoa Powder, Milk, Heavy Cream\"\n };\n\n const desiredMix = document.getElementById('desired-mix').value.toLowerCase();\n if (desiredMix) {\n const recipe = recipeMap[desiredMix];\n if (recipe) {\n alert(`Recipe for ${desiredMix}: ${recipe}`);\n } else {\n alert(`Sorry, we don't have a recipe for: ${desiredMix}`);\n }\n } else {\n alert(\"Please enter what you want to make.\");\n }\n}\n```\n\n- Define a `recipeMap` object to map baked goods to their ingredient lists.\n- Get the value from the input field with ID `desired-mix` and convert it to lowercase.\n- If the input is not empty, check if there's a recipe for the requested baked good.\n- If a recipe is found, show an alert with the recipe.\n- If no recipe is found, show an alert indicating that the recipe is not available.\n- If the input is empty, show an alert asking the user to enter something.","created_at":"2024-06-04T13:03:20.855300Z","output_tokens":null}],"assets":[],"messages_sent":172,"comments":[],"steps":[{"instruction":"Create a simple and intuitive interface for users to draw their own bread designs.","title":"Simple Bread Drawing Interface","created_at":"2024-05-02T14:03:44.511473","project_id":1318,"complete":false,"step_number":0,"updated_at":"2024-05-02T14:03:44.511475","id":7025},{"instruction":"Add options for users to customize their bread, such as crust style, toppings, and more.","title":"Customization Options","created_at":"2024-05-02T14:03:44.511544","project_id":1318,"complete":false,"step_number":1,"updated_at":"2024-05-02T14:03:44.511545","id":7026},{"instruction":"Implement a color palette for users to choose from to color their bread design.","title":"Color Palette","created_at":"2024-05-02T14:03:44.511586","project_id":1318,"complete":false,"step_number":2,"updated_at":"2024-05-02T14:03:44.511587","id":7027},{"instruction":"Allow users to save and share their bread designs with others.","title":"Save and Share","created_at":"2024-05-02T14:03:44.511625","project_id":1318,"complete":false,"step_number":3,"updated_at":"2024-05-02T14:03:44.511625","id":7028},{"instruction":"Ensure the webpage is responsive and works well on different devices and screen sizes.","title":"Responsive Design","created_at":"2024-05-02T14:03:44.511731","project_id":1318,"complete":false,"step_number":4,"updated_at":"2024-05-02T14:03:44.511732","id":7029}]}