Changes to recipecost1.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Recipe Cost Calculator
+   Calculate the total cost of your recipe by entering the ingredients, their cost, and quantity.
+ 
+ 
+ 
+   
+     
+       
+         
+         
+         
+         
+       
+     
+     
+     
+   
+ 
+   
+     Total Cost: $0.00
+   
+ 
+ 
+ 
+   Simplify your recipe budgeting with this easy-to-use calculator.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://recipecost.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Recipe Cost Calculator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "9e3c4518-5b8d-427c-af34-3a0823d9b2fb",
+   "object": "chat.completion",
+   "created": 1735417970,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nrecipecost.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://recipecost.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Recipe Cost Calculator\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Recipe Cost Calculator\n  Calculate the total cost of your recipe by entering the ingredients, their cost, and quantity.
\n\n\n\n  \n    \n      \n        \n        \n        \n        \n      
\n    
\n    \n    \n  \n\n  \n    Total Cost: $0.00\n  
\n\n\n\n  Simplify your recipe budgeting with this easy-to-use calculator.
\n\n---style.css---\n:root {\n  --primary-color: #4CAF50;\n  --secondary-color: #45a049;\n  --background-color: #f4f4f4;\n  --text-color: #333;\n  --border-color: #ddd;\n}\n\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\nheader {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n}\n\nmain {\n  max-width: 800px;\n  margin: 2rem auto;\n  padding: 1rem;\n  background: white;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n}\n\n.ingredient {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 1rem;\n}\n\n.ingredient input {\n  flex: 1;\n  padding: 0.5rem;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n}\n\n.remove-ingredient {\n  background-color: #ff4444;\n  color: white;\n  border: none;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.remove-ingredient:hover {\n  background-color: #cc0000;\n}\n\n#add-ingredient {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  cursor: pointer;\n  margin-bottom: 1rem;\n}\n\n#add-ingredient:hover {\n  background-color: var(--secondary-color);\n}\n\nbutton[type=\"submit\"] {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  border-radius: 4px;\n  cursor: pointer;\n  width: 100%;\n}\n\nbutton[type=\"submit\"]:hover {\n  background-color: var(--secondary-color);\n}\n\n#result {\n  text-align: center;\n  margin-top: 2rem;\n  padding: 1rem;\n  background-color: var(--background-color);\n  border-radius: 8px;\n}\n\n#total-cost {\n  color: var(--primary-color);\n  font-weight: bold;\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  background-color: var(--primary-color);\n  color: white;\n  margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n  .ingredient {\n    flex-direction: column;\n  }\n\n  .ingredient input {\n    width: 100%;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function () {\n  const ingredientsContainer = document.getElementById('ingredients-container');\n  const addIngredientButton = document.getElementById('add-ingredient');\n  const recipeForm = document.getElementById('recipe-form');\n  const totalCostDisplay = document.getElementById('total-cost');\n\n  addIngredientButton.addEventListener('click', function () {\n    const newIngredient = document.createElement('div');\n    newIngredient.classList.add('ingredient');\n    newIngredient.innerHTML = `\n      \n      \n      \n      \n    `;\n    ingredientsContainer.appendChild(newIngredient);\n\n    newIngredient.querySelector('.remove-ingredient').addEventListener('click', function () {\n      ingredientsContainer.removeChild(newIngredient);\n    });\n  });\n\n  recipeForm.addEventListener('submit', function (event) {\n    event.preventDefault();\n    let totalCost = 0;\n\n    const ingredients = ingredientsContainer.querySelectorAll('.ingredient');\n    ingredients.forEach(ingredient => {\n      const cost = parseFloat(ingredient.querySelector('input[type=\"number\"]:nth-of-type(1)').value);\n      const quantity = parseFloat(ingredient.querySelector('input[type=\"number\"]:nth-of-type(2)').value);\n      totalCost += cost * quantity;\n    });\n\n    totalCostDisplay.textContent = `$${totalCost.toFixed(2)}`;\n  });\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 252,
+     "completion_tokens": 1311,
+     "total_tokens": 1563,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 252
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # recipecost1.scroll.pub

+ Website generated by DeepSeek from prompt: a website to calculate the cost of a recipe given the ingredients' name, cost and quantity

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function () {
+   const ingredientsContainer = document.getElementById('ingredients-container');
+   const addIngredientButton = document.getElementById('add-ingredient');
+   const recipeForm = document.getElementById('recipe-form');
+   const totalCostDisplay = document.getElementById('total-cost');
+ 
+   addIngredientButton.addEventListener('click', function () {
+     const newIngredient = document.createElement('div');
+     newIngredient.classList.add('ingredient');
+     newIngredient.innerHTML = `
+       
+       
+       
+       
+     `;
+     ingredientsContainer.appendChild(newIngredient);
+ 
+     newIngredient.querySelector('.remove-ingredient').addEventListener('click', function () {
+       ingredientsContainer.removeChild(newIngredient);
+     });
+   });
+ 
+   recipeForm.addEventListener('submit', function (event) {
+     event.preventDefault();
+     let totalCost = 0;
+ 
+     const ingredients = ingredientsContainer.querySelectorAll('.ingredient');
+     ingredients.forEach(ingredient => {
+       const cost = parseFloat(ingredient.querySelector('input[type="number"]:nth-of-type(1)').value);
+       const quantity = parseFloat(ingredient.querySelector('input[type="number"]:nth-of-type(2)').value);
+       totalCost += cost * quantity;
+     });
+ 
+     totalCostDisplay.textContent = `$${totalCost.toFixed(2)}`;
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4CAF50;
+   --secondary-color: #45a049;
+   --background-color: #f4f4f4;
+   --text-color: #333;
+   --border-color: #ddd;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ header {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ main {
+   max-width: 800px;
+   margin: 2rem auto;
+   padding: 1rem;
+   background: white;
+   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+   border-radius: 8px;
+ }
+ 
+ .ingredient {
+   display: flex;
+   gap: 1rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .ingredient input {
+   flex: 1;
+   padding: 0.5rem;
+   border: 1px solid var(--border-color);
+   border-radius: 4px;
+ }
+ 
+ .remove-ingredient {
+   background-color: #ff4444;
+   color: white;
+   border: none;
+   border-radius: 50%;
+   width: 30px;
+   height: 30px;
+   cursor: pointer;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+ }
+ 
+ .remove-ingredient:hover {
+   background-color: #cc0000;
+ }
+ 
+ #add-ingredient {
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   padding: 0.5rem 1rem;
+   border-radius: 4px;
+   cursor: pointer;
+   margin-bottom: 1rem;
+ }
+ 
+ #add-ingredient:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ button[type="submit"] {
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   padding: 0.75rem 1.5rem;
+   border-radius: 4px;
+   cursor: pointer;
+   width: 100%;
+ }
+ 
+ button[type="submit"]:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ #result {
+   text-align: center;
+   margin-top: 2rem;
+   padding: 1rem;
+   background-color: var(--background-color);
+   border-radius: 8px;
+ }
+ 
+ #total-cost {
+   color: var(--primary-color);
+   font-weight: bold;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   background-color: var(--primary-color);
+   color: white;
+   margin-top: 2rem;
+ }
+ 
+ @media (max-width: 600px) {
+   .ingredient {
+     flex-direction: column;
+   }
+ 
+   .ingredient input {
+     width: 100%;
+   }
+ }