Changes to recipecost2.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Recipe Cost Calculator
+   Calculate exact costs for your recipes
+ 
+ 
+ 
+   
+     Add Ingredients
+     
+       
+         
+         
+         
+         
+         
+       
+     
+   
+ 
+   
+     Recipe Ingredients
+     
+       +         
+           
+             
+             
+             
+             
+             
+           
+         
+         
+       
IngredientQuantityUnit CostTotal CostAction
+     
+ 
+     
+       
+         Total Recipe Cost
+         $0.00
+       
+       
+         Number of Servings:
+         
+       
+       
+         Cost per Serving
+         $0.00
+       
+     
+   
+ 
+ 
+ 
+   Made with love for home cooks and professional chefs
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://recipecost.scroll.pub
+ metaTags
+ title Recipe Cost Calculator
+ description Calculate exact costs for your recipes including total cost and cost per serving
+ keywords recipe calculator, cooking cost, recipe costing, ingredient cost calculator
+ editButton /edit.html
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01CXrvWRwqo5ZgJMWNxZLwJc",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Here's a recipe cost calculator website implementation:\n\n---domain---\nrecipecost.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://recipecost.scroll.pub\nmetaTags\ntitle Recipe Cost Calculator\ndescription Calculate exact costs for your recipes including total cost and cost per serving\nkeywords recipe calculator, cooking cost, recipe costing, ingredient cost calculator\neditButton /edit.html\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  Recipe Cost Calculator\n  Calculate exact costs for your recipes
\n\n\n\n  \n    Add Ingredients\n    \n      \n        \n        \n        \n        \n        \n      
\n    \n  \n\n  \n    Recipe Ingredients\n    \n      \n        \n          \n            \n            \n            \n            \n            \n          \n        \n        \n      IngredientQuantityUnit CostTotal CostAction
\n    
\n\n    \n      \n        Total Recipe Cost\n        $0.00
\n      
\n      \n        Number of Servings:\n        \n      
\n      \n        Cost per Serving\n        $0.00
\n      
\n    
\n  \n\n\n\n  Made with love for home cooks and professional chefs
\n\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --accent-color: #3498db;\n  --background-color: #f8f9fa;\n  --text-color: #2c3e50;\n  --border-radius: 8px;\n  --transition: all 0.3s ease;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n  background-color: var(--background-color);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n  color: white;\n  padding: 2rem;\n  text-align: center;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nheader h1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n}\n\nmain {\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n  flex: 1;\n}\n\n.input-section {\n  background: white;\n  padding: 2rem;\n  border-radius: var(--border-radius);\n  box-shadow: 0 2px 15px rgba(0,0,0,0.05);\n  margin-bottom: 2rem;\n}\n\n.form-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n  align-items: end;\n}\n\ninput, select, button {\n  padding: 0.8rem;\n  border: 2px solid #e0e0e0;\n  border-radius: var(--border-radius);\n  font-size: 1rem;\n  transition: var(--transition);\n}\n\ninput:focus, select:focus {\n  border-color: var(--accent-color);\n  outline: none;\n}\n\n.add-btn {\n  background-color: var(--accent-color);\n  color: white;\n  border: none;\n  cursor: pointer;\n  font-weight: 600;\n}\n\n.add-btn:hover {\n  background-color: #2980b9;\n  transform: translateY(-2px);\n}\n\n.table-container {\n  overflow-x: auto;\n  background: white;\n  border-radius: var(--border-radius);\n  box-shadow: 0 2px 15px rgba(0,0,0,0.05);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth, td {\n  padding: 1rem;\n  text-align: left;\n  border-bottom: 1px solid #e0e0e0;\n}\n\nth {\n  background-color: #f8f9fa;\n  font-weight: 600;\n}\n\n.delete-btn {\n  background-color: #e74c3c;\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  transition: var(--transition);\n}\n\n.delete-btn:hover {\n  background-color: #c0392b;\n}\n\n.totals {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n  text-align: center;\n}\n\n.total-cost, .cost-per-serving {\n  background: white;\n  padding: 2rem;\n  border-radius: var(--border-radius);\n  box-shadow: 0 2px 15px rgba(0,0,0,0.05);\n}\n\n.total-cost p, .cost-per-serving p {\n  font-size: 2rem;\n  font-weight: 600;\n  color: var(--accent-color);\n  margin-top: 0.5rem;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: white;\n  margin-top: auto;\n}\n\n@media (max-width: 768px) {\n  header h1 {\n    font-size: 2rem;\n  }\n  \n  .form-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .totals {\n    grid-template-columns: 1fr;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const form = document.getElementById('ingredient-form');\n  const ingredientsList = document.getElementById('ingredients-list');\n  const totalCostElement = document.getElementById('total-cost');\n  const servingsInput = document.getElementById('servings');\n  const costPerServingElement = document.getElementById('cost-per-serving');\n  \n  let ingredients = [];\n\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    \n    const name = document.getElementById('ingredient-name').value;\n    const cost = parseFloat(document.getElementById('ingredient-cost').value);\n    const quantity = parseFloat(document.getElementById('ingredient-quantity').value);\n    const unit = document.getElementById('ingredient-unit').value;\n\n    const ingredient = {\n      name,\n      cost,\n      quantity,\n      unit,\n      totalCost: cost * quantity\n    };\n\n    ingredients.push(ingredient);\n    updateTable();\n    calculateTotals();\n    form.reset();\n  });\n\n  servingsInput.addEventListener('input', calculateTotals);\n\n  function updateTable() {\n    ingredientsList.innerHTML = '';\n    \n    ingredients.forEach((ingredient, index) => {\n      const row = document.createElement('tr');\n      row.innerHTML = `\n        ${ingredient.name}\n        ${ingredient.quantity} ${ingredient.unit}\n        $${ingredient.cost.toFixed(2)}\n        $${ingredient.totalCost.toFixed(2)}\n        \n          \n        \n      `;\n      ingredientsList.appendChild(row);\n    });\n\n    // Add delete button listeners\n    document.querySelectorAll('.delete-btn').forEach(button => {\n      button.addEventListener('click', (e) => {\n        const index = parseInt(e.target.dataset.index);\n        ingredients.splice(index, 1);\n        updateTable();\n        calculateTotals();\n      });\n    });\n  }\n\n  function calculateTotals() {\n    const totalCost = ingredients.reduce((sum, ingredient) => sum + ingredient.totalCost, 0);\n    const servings = parseInt(servingsInput.value) || 1;\n    const costPerServing = totalCost / servings;\n\n    totalCostElement.textContent = `$${totalCost.toFixed(2)}`;\n    costPerServingElement.textContent = `$${costPerServing.toFixed(2)}`;\n  }\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive recipe cost calculator with the following features:\n\n1. Clean, modern design with smooth animations and transitions\n2. Form to add ingredients with name, cost, quantity, and unit\n3. Interactive table showing all ingredients with delete functionality\n4. Real-time calculation of total recipe cost and cost per serving\n5. Mobile-responsive layout\n6. Accessible form controls and semantic HTML\n7. Professional gradient header\n8. Beautiful card-based design with subtle shadows\n9. Smooth hover effects and interactions\n10. Clear typography and spacing\n\nThe design uses a professional color scheme and follows modern web design principles while remaining clean and functional. It's fully responsive and works well on all device sizes."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 309,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2785
+   }
+ }

readme.scroll

Changed around line 1

+ # recipecost2.scroll.pub

+ Website generated by Claude from prompt: a website to calculate the cost of a recipe given the ingredients' name, cost and quantity. Show the ingredient list in a table format. SHow the Total Recipe Cost and the cost per unit.

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const form = document.getElementById('ingredient-form');
+   const ingredientsList = document.getElementById('ingredients-list');
+   const totalCostElement = document.getElementById('total-cost');
+   const servingsInput = document.getElementById('servings');
+   const costPerServingElement = document.getElementById('cost-per-serving');
+ 
+   let ingredients = [];
+ 
+   form.addEventListener('submit', (e) => {
+     e.preventDefault();
+ 
+     const name = document.getElementById('ingredient-name').value;
+     const cost = parseFloat(document.getElementById('ingredient-cost').value);
+     const quantity = parseFloat(document.getElementById('ingredient-quantity').value);
+     const unit = document.getElementById('ingredient-unit').value;
+ 
+     const ingredient = {
+       name,
+       cost,
+       quantity,
+       unit,
+       totalCost: cost * quantity
+     };
+ 
+     ingredients.push(ingredient);
+     updateTable();
+     calculateTotals();
+     form.reset();
+   });
+ 
+   servingsInput.addEventListener('input', calculateTotals);
+ 
+   function updateTable() {
+     ingredientsList.innerHTML = '';
+ 
+     ingredients.forEach((ingredient, index) => {
+       const row = document.createElement('tr');
+       row.innerHTML = `
+         ${ingredient.name}
+         ${ingredient.quantity} ${ingredient.unit}
+         $${ingredient.cost.toFixed(2)}
+         $${ingredient.totalCost.toFixed(2)}
+         
+           
+         
+       `;
+       ingredientsList.appendChild(row);
+     });
+ 
+     // Add delete button listeners
+     document.querySelectorAll('.delete-btn').forEach(button => {
+       button.addEventListener('click', (e) => {
+         const index = parseInt(e.target.dataset.index);
+         ingredients.splice(index, 1);
+         updateTable();
+         calculateTotals();
+       });
+     });
+   }
+ 
+   function calculateTotals() {
+     const totalCost = ingredients.reduce((sum, ingredient) => sum + ingredient.totalCost, 0);
+     const servings = parseInt(servingsInput.value) || 1;
+     const costPerServing = totalCost / servings;
+ 
+     totalCostElement.textContent = `$${totalCost.toFixed(2)}`;
+     costPerServingElement.textContent = `$${costPerServing.toFixed(2)}`;
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --accent-color: #3498db;
+   --background-color: #f8f9fa;
+   --text-color: #2c3e50;
+   --border-radius: 8px;
+   --transition: all 0.3s ease;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+   background-color: var(--background-color);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+   color: white;
+   padding: 2rem;
+   text-align: center;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ header h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+ }
+ 
+ main {
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+   flex: 1;
+ }
+ 
+ .input-section {
+   background: white;
+   padding: 2rem;
+   border-radius: var(--border-radius);
+   box-shadow: 0 2px 15px rgba(0,0,0,0.05);
+   margin-bottom: 2rem;
+ }
+ 
+ .form-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 1rem;
+   align-items: end;
+ }
+ 
+ input, select, button {
+   padding: 0.8rem;
+   border: 2px solid #e0e0e0;
+   border-radius: var(--border-radius);
+   font-size: 1rem;
+   transition: var(--transition);
+ }
+ 
+ input:focus, select:focus {
+   border-color: var(--accent-color);
+   outline: none;
+ }
+ 
+ .add-btn {
+   background-color: var(--accent-color);
+   color: white;
+   border: none;
+   cursor: pointer;
+   font-weight: 600;
+ }
+ 
+ .add-btn:hover {
+   background-color: #2980b9;
+   transform: translateY(-2px);
+ }
+ 
+ .table-container {
+   overflow-x: auto;
+   background: white;
+   border-radius: var(--border-radius);
+   box-shadow: 0 2px 15px rgba(0,0,0,0.05);
+ }
+ 
+ table {
+   width: 100%;
+   border-collapse: collapse;
+ }
+ 
+ th, td {
+   padding: 1rem;
+   text-align: left;
+   border-bottom: 1px solid #e0e0e0;
+ }
+ 
+ th {
+   background-color: #f8f9fa;
+   font-weight: 600;
+ }
+ 
+ .delete-btn {
+   background-color: #e74c3c;
+   color: white;
+   border: none;
+   padding: 0.5rem 1rem;
+   border-radius: var(--border-radius);
+   cursor: pointer;
+   transition: var(--transition);
+ }
+ 
+ .delete-btn:hover {
+   background-color: #c0392b;
+ }
+ 
+ .totals {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+   text-align: center;
+ }
+ 
+ .total-cost, .cost-per-serving {
+   background: white;
+   padding: 2rem;
+   border-radius: var(--border-radius);
+   box-shadow: 0 2px 15px rgba(0,0,0,0.05);
+ }
+ 
+ .total-cost p, .cost-per-serving p {
+   font-size: 2rem;
+   font-weight: 600;
+   color: var(--accent-color);
+   margin-top: 0.5rem;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: white;
+   margin-top: auto;
+ }
+ 
+ @media (max-width: 768px) {
+   header h1 {
+     font-size: 2rem;
+   }
+ 
+   .form-grid {
+     grid-template-columns: 1fr;
+   }
+ 
+   .totals {
+     grid-template-columns: 1fr;
+   }
+ }