toolbox/fence-calculator.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Fence Calculator — Posts, Boards, Cost</title>
  <meta name="description" content="Calculate fence materials needed. Posts, boards, rails, concrete. Cost estimate. Gate planning. Free online fence calculator for homeowners.">
  <link rel="canonical" href="https://www.quicktools.mom/fence-calculator.html">
  <meta property="og:title" content="Fence Calculator"><meta property="og:type" content="website"><meta property="og:url" content="https://www.quicktools.mom/fence-calculator.html"><meta name="twitter:card" content="summary">
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"How many fence posts do I need?","acceptedAnswer":{"@type":"Answer","text":"Posts are typically spaced 6-8 feet apart. Divide your total fence length by the spacing and add 1 for the end post. Add extra for corners and gates."}},{"@type":"Question","name":"How much does a fence cost per foot?","acceptedAnswer":{"@type":"Answer","text":"Wood fences typically cost $15-30 per linear foot for materials. This calculator gives a materials-only estimate."}}]}</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space</div>
    <div class="tool-header"><div class="tool-badge">🏠 Home & DIY</div><h1>Fence Calculator</h1><p>Calculate posts, boards, rails, and cost for your fence project.</p></div>
    <div class="tool-card">
      <div class="controls-row">
        <div class="control-group"><label>Total Length (ft)</label><input type="number" id="length" value="100" oninput="calc()"></div>
        <div class="control-group"><label>Fence Height (ft)</label><select id="height" onchange="calc()"><option value="4">4 ft (privacy low)</option><option value="6" selected>6 ft (standard privacy)</option><option value="8">8 ft (tall privacy)</option></select></div>
      </div>
      <div class="controls-row mt-1">
        <div class="control-group"><label>Post Spacing (ft)</label><select id="spacing" onchange="calc()"><option value="6">6 ft</option><option value="8" selected>8 ft (standard)</option></select></div>
        <div class="control-group"><label>Gates</label><input type="number" id="gates" value="1" min="0" oninput="calc()"></div>
        <div class="control-group"><label>Fence Style</label><select id="style" onchange="calc()"><option value="privacy">Privacy (solid)</option><option value="picket">Picket (spaced)</option></select></div>
      </div>
    </div>
    <div class="tool-card" style="text-align:center;">
      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;">
        <div style="padding:1.25rem;background:var(--bg-secondary);border-radius:12px;"><div style="font-size:0.75rem;color:var(--text-muted);">Posts (4×4)</div><div id="posts" style="font-size:2rem;font-weight:700;">0</div></div>
        <div style="padding:1.25rem;background:var(--bg-secondary);border-radius:12px;"><div style="font-size:0.75rem;color:var(--text-muted);">Boards (1×6)</div><div id="boards" style="font-size:2rem;font-weight:700;">0</div></div>
        <div style="padding:1.25rem;background:var(--bg-secondary);border-radius:12px;"><div style="font-size:0.75rem;color:var(--text-muted);">Rails (2×4)</div><div id="rails" style="font-size:2rem;font-weight:700;">0</div></div>
        <div style="padding:1.25rem;background:var(--bg-secondary);border-radius:12px;"><div style="font-size:0.75rem;color:var(--text-muted);">Concrete Bags</div><div id="concrete" style="font-size:2rem;font-weight:700;">0</div></div>
        <div style="padding:1.25rem;background:var(--bg-secondary);border-radius:12px;"><div style="font-size:0.75rem;color:var(--text-muted);">Screws (lbs)</div><div id="screws" style="font-size:2rem;font-weight:700;">0</div></div>
        <div style="padding:1.25rem;background:var(--bg-secondary);border-radius:12px;border-top:4px solid var(--success);"><div style="font-size:0.75rem;color:var(--text-muted);">Est. Material Cost</div><div id="cost" style="font-size:2rem;font-weight:700;color:var(--success);">$0</div></div>
      </div>
    </div>
    <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Fence Calculator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);">This fence calculator estimates all materials needed for your wood fence project: posts, pickets/boards, rails, concrete bags, and screws. It supports privacy (solid) and picket (spaced) styles with 4, 6, or 8-foot heights. Standard post spacing is 8 feet — the calculator handles the math for sections, corners, and gates. The cost estimate is based on typical lumber pricing. Perfect for homeowners planning a DIY fence, contractors quoting jobs, and anyone budgeting a fence project. All calculations run privately in your browser with no data collection. The tool accounts for gate posts, which require additional concrete and hardware. Costs are based on typical lumber pricing at major home improvement stores with standard pressure-treated materials.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Enter total length</strong> — Measure the fence line in feet.</li>
        <li><strong>Choose height and style</strong> — Privacy or picket, 4-8 feet.</li>
        <li><strong>Add gates</strong> — Each gate requires extra posts and hardware.</li>
        <li><strong>See materials</strong> — Posts, boards, rails, concrete, screws, and cost.</li>
      </ol>
    </div>
    <div class="ad-zone">Ad Space</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="paint-calculator.html"><span class="tool-icon">🎨</span> Paint</a><a href="tile-calculator.html"><span class="tool-icon">🔲</span> Tile</a><a href="wallpaper-calculator.html"><span class="tool-icon">🎭</span> Wallpaper</a><a href="unit-converter.html"><span class="tool-icon">📏</span> Units</a></div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
  </div>
  <script>
    function calc(){const len=+document.getElementById('length').value;const h=+document.getElementById('height').value;
      const sp=+document.getElementById('spacing').value;const gates=+document.getElementById('gates').value;
      const style=document.getElementById('style').value;
      const sections=Math.ceil(len/sp);const posts=sections+1+gates*2;const railsPerSection=h<=4?2:3;const totalRails=sections*railsPerSection;
      const boardWidth=style==='privacy'?0.5:0.375;const gap=style==='picket'?0.125:0;
      const boardsPerSection=Math.ceil(sp/(boardWidth+gap));const totalBoards=sections*boardsPerSection;
      const concrete=posts;const screws=Math.ceil(totalBoards*0.04);
      // Cost: posts $12, boards $4, rails $6, concrete $5, screws $8/lb
      const cost=posts*12+totalBoards*4+totalRails*6+concrete*5+screws*8;
      document.getElementById('posts').textContent=posts;document.getElementById('boards').textContent=totalBoards;
      document.getElementById('rails').textContent=totalRails;document.getElementById('concrete').textContent=concrete;
      document.getElementById('screws').textContent=screws;document.getElementById('cost').textContent='$'+cost.toLocaleString();
    }
    calc();
  </script>
<script src="ads.js"></script>
</body>
</html>