GrIdL0cK Posted December 27, 2023 Posted December 27, 2023 Hi all, New here to Squarespace. I'm creating a section on my site where I've added a custom calculator using HTML code, but for some reason, the Footer of the page just immediately thrusts itself after the code, and I don't actually have the regular footer anymore. As I mentioned, I'm new to Squarespace so just finding my way around, but not sure if there's some sort of code block bug here or if it doesn't recognise that the Footer should still be in place? Just for clarity, I do want a footer but in the Edit mode, the Footer isn't there.
tuanphan Posted December 29, 2023 Posted December 29, 2023 Can you post the code here & share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
GrIdL0cK Posted December 31, 2023 Author Posted December 31, 2023 Hey there, Sorry for the delay. I got AI to help me write the code but I'm still tweaking the formula. I haven't made the page live yet on the site because I don't want to put out poor information. Here's the site: https://www.floofers.co.uk/ Here's the code I'm using: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dog Calorie Calculator</title> </head> <body> <form id="calorieCalculatorForm"> <label for="dogName">Dog Name:</label> <input type="text" id="dogName" required><br><br> <label for="breed">Select Dog Breed:</label> <select id="breed"> <option value="beagle">Beagle</option> <option value="boxer">Boxer</option> <option value="bulldog">Bulldog</option> <option value="chihuahua">Chihuahua</option> <option value="cockapoo">Cockapoo</option> <option value="dachshund">Dachshund</option> <option value="germanshepherd">German Shepherd</option> <option value="goldenretriever">Golden Retriever</option> <option value="labrador">Labrador Retriever</option> <option value="labradoodle">Labradoodle</option> <option value="poodle">Poodle</option> <option value="yorkshireterrier">Yorkshire Terrier</option> <option value="shihtzu">Shih Tzu</option> <option value="greatdane">Great Dane</option> <option value="pug">Pug</option> <option value="siberianhusky">Siberian Husky</option> <option value="rottweiler">Rottweiler</option> <!-- Add more breeds as needed --> </select><br><br> <label for="weight">Dog Weight (in kilograms):</label> <input type="number" id="weight" required><br><br> <label for="activity">Activity Level:</label> <select id="activity"> <option value="sedentary">Sedentary (little to no exercise)</option> <option value="moderate">Moderate (regular walks and playtime)</option> <option value="active">Active (frequent exercise and outdoor activities)</option> </select><br><br> <label for="age">Dog Age (in years):</label> <input type="number" id="age" required><br><br> <button type="button" onclick="calculateCalories()">Calculate Calories</button> </form> <div id="result"></div> <script> function calculateCalories() { const dogName = document.getElementById('dogName').value; const breed = document.getElementById('breed').value; const weight = parseFloat(document.getElementById('weight').value); const activity = document.getElementById('activity').value; const age = parseInt(document.getElementById('age').value); // Calorie estimates for various breeds (in kcal/day) divided by 8 for readability const calorieData = { beagle: { sedentary: 62, moderate: 79, active: 94 }, boxer: { sedentary: 110, moderate: 141, active: 169 }, bulldog: { sedentary: 87, moderate: 111, active: 133 }, chihuahua: { sedentary: 32, moderate: 41, active: 49 }, cockapoo: { sedentary: 66, moderate: 84, active: 101 }, dachshund: { sedentary: 39, moderate: 50, active: 60 }, germanshepherd: { sedentary: 132, moderate: 169, active: 202 }, goldenretriever: { sedentary: 112, moderate: 144, active: 173 }, labrador: { sedentary: 94, moderate: 120, active: 143 }, labradoodle: { sedentary: 84, moderate: 107, active: 128 }, poodle: { sedentary: 84, moderate: 107, active: 128 }, yorkshireterrier: { sedentary: 36, moderate: 46, active: 55 }, shihtzu: { sedentary: 54, moderate: 69, active: 83 }, greatdane: { sedentary: 143, moderate: 183, active: 219 }, pug: { sedentary: 54, moderate: 69, active: 83 }, siberianhusky: { sedentary: 115, moderate: 147, active: 176 }, rottweiler: { sedentary: 127, moderate: 162, active: 194 } // Add more breeds and data as needed }; // Calculate calorie estimate const calorieEstimate = calorieData[breed][activity] * weight * This is what the page preview looks like:
creedon Posted January 1 Posted January 1 This HTML will mess you up. Remove it. Squarespace has already defined these elements for you. Throwing them in again will cause weird things to happen. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dog Calorie Calculator</title> </head> <body> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
GrIdL0cK Posted January 1 Author Posted January 1 Thanks for the advice. I've removed the code but unfortunately am still coming across the same problem. I've made the page live for now so that anyone coming across this thread can take a look: https://www.floofers.co.uk/calorie-calculator/
GrIdL0cK Posted January 1 Author Posted January 1 Actually, looks like I fixed it. There wasn't an ending to the script so managed to sort it. Thank for the help. creedon 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment