<?php /* Template Name: Draw Fence */ get_header(); ?> <div id=”fence-drawing-app”> <h2>Fence Drawing Tool</h2> <label for=”fence-type”>Select Fence Type:</label> <select id=”fence-type”> <option value=”manhattan”>Manhattan Privacy Fence ($38.00 per foot)</option> <option value=”richmond”>Richmond Fence ($300.00 per foot)</option> </select> <canvas id=”drawing-canvas” width=”800″ height=”600″ style=”border:1px solid #000;”></canvas> <div id=”lines-list”></div> <div>Total Cost: $<span id=”total-cost”>0.00</span></div> </div> <script> document.addEventListener(‘DOMContentLoaded’, (event) => { const canvas = document.getElementById(‘drawing-canvas’); const context = canvas.getContext(‘2d’); const fenceTypeSelect = document.getElementById(‘fence-type’); const linesList = document.getElementById(‘lines-list’); const totalCostSpan = document.getElementById(‘total-cost’); let drawing = false; let startX, startY; let lines = []; let totalCost = 0; const fencePrices = { manhattan: 38.00, richmond: 300.00 }; canvas.addEventListener(‘mousedown’, (e) => { drawing = true; startX = e.offsetX; startY = e.offsetY; }); canvas.addEventListener(‘mouseup’, (e) => { if (drawing) { drawing = false; const endX = e.offsetX; const endY = e.offsetY; const length = Math.sqrt(Math.pow(endX – startX, 2) + Math.pow(endY – startY, 2)); const fenceType = fenceTypeSelect.value; const footage = prompt(“Enter footage for this line:”); if (footage) { const cost = footage * fencePrices[fenceType]; lines.push({ startX, startY, endX, endY, length, footage, cost, fenceType }); updateLinesList(); updateTotalCost(); drawLines(); } } }); function updateLinesList() { linesList.innerHTML = ”; lines.forEach((line, index) => { const lineItem = document.createElement(‘div’); lineItem.textContent = `Line ${index + 1}: ${line.fenceType} – ${line.footage} ft – $${line.cost.toFixed(2)}`; linesList.appendChild(lineItem); }); } function updateTotalCost() { totalCost = lines.reduce((sum, line) => sum + line.cost, 0); totalCostSpan.textContent = totalCost.toFixed(2); } function drawLines() { context.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(line => { context.beginPath(); context.moveTo(line.startX, line.startY); context.lineTo(line.endX, line.endY); context.stroke(); }); } }); </script> <?php get_footer(); ?>

© Copyright 2021 Global Fence Supply