Fort Lauderdale Water Use In Real-Time
The widgets seen on this page and in the navigation for this website are run on the same script. While it is a ‘simulated’ real-time widget, it is not simply just running at the same rate all day long. Read more about the water usage data that is used below.
Fort Lauderdale Water Usage
Real-time estimate of water used in Fort Lauderdale since you arrived:
About the Data
How much water is used each day in Fort Lauderdale?
Fort Lauderdale’s water usage fluctuates throughout the day, with peak times in the morning and evening and lower consumption late at night. This simulation estimates real-time water usage by starting with the city’s average daily consumption and adjusting it based on the time of day. The counter continuously updates to reflect how much water has been used since you arrived.
- Baseline Consumption: Fort Lauderdale uses about 70 million gallons per day, or roughly 810 gallons per second.
- Time-Based Adjustments: The script modifies the rate based on the current hour:
- Morning (6–10 AM): High demand (1.34× normal rate)
- Midday (10 AM–5 PM): Average demand (.96× normal rate)
- Evening (5–8 PM): Elevated demand (1.24× normal rate)
- Night (8 PM–2 AM): Reduced demand (0.86× normal rate)
- Early Morning (2–6 AM): Lowest demand (0.76× normal rate)
- Live Counter: The displayed number updates every second, estimating how much water has been used in real-time.
This system gives a dynamic snapshot of Fort Lauderdale’s water consumption based on typical daily usage patterns.
Embed This Widget On Your Website
You will notice that we haven’t added any branding or links to this widget. If you find it useful and choose to use it on your website, please provide a credit link back to the original in whatever way you see fit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fort Lauderdale Water Usage</title>
<!-- (Optional) Include the Lato font -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
</head>
<body style="background-color: #f8f8f8;">
<div id="water-counter-container" style="text-align: center; padding: 25px; border: 2px solid #521c1c; border-radius: 10px; background-color: #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); color: #333; max-width: 600px; margin: 20px auto; position: relative;">
<!-- Water Droplet Icon -->
<img decoding="async" src="https://openmoji.org/data/color/svg/1F4A7.svg" alt="Water Droplet Icon" style="width: 60px; height: 60px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: #ffffff; border-radius: 50%; border: 2px solid #521c1c; padding: 5px;">
<!-- Title -->
<h2 style="font-family: 'Lato', sans-serif; font-size: 28px; font-weight: bold; margin-top: 40px; margin-bottom: 10px; color: #521c1c;">
Fort Lauderdale Water Usage
</h2>
<!-- Inner Border for Content -->
<div style="border: 1px dashed #7a7a7a; padding: 15px; border-radius: 5px;">
<p style="font-family: 'Lato', sans-serif; font-size: 18px; margin-bottom: 15px; color: #7A7A7A;">
Real-time estimate of water used in Fort Lauderdale since you arrived:
</p>
<!-- Counter & Label in One Row -->
<div style="display: flex; justify-content: center; align-items: center; gap: 15px;">
<div id="water-counter" style="font-family: 'Lato', sans-serif; font-size: 48px; font-weight: bold; color: #521c1c;">0</div>
<div id="water-counter-label" style="display: flex; flex-direction: column; text-align: center; font-family: 'Lato', sans-serif; font-size: 15px; font-weight: bold; color: #521c1c; line-height: 1;">
<div>gallons</div>
</div>
</div>
</div>
</div>
<script>
(function(){
// Capture the start time when the user arrives on the page.
const startTime = new Date();
// Estimated average water consumption for Fort Lauderdale (in gallons per day).
const averageDailyUsage = 70000000; // 70 million gallons per day
const secondsPerDay = 86400;
// Calculate the baseline gallons per second.
const baseUsagePerSecond = averageDailyUsage / secondsPerDay; // ≈ 810 gallons/sec
/**
* Adjusts the baseline rate based on the time of day.
* - Morning (6–10 AM): Higher usage (1.4×)
* - Midday (10 AM–5 PM): Average usage (1.0×)
* - Evening (5–8 PM): Elevated usage (1.3×)
* - Night (8 PM–2 AM): Lower usage (0.9×)
* - Early morning (2–6 AM): Quiet period (0.8×)
*/
function getTimeOfDayMultiplier(){
const now = new Date();
const hour = now.getHours();
if (hour >= 6 && hour < 10) {
return 1.4;
} else if (hour >= 10 && hour < 17) {
return 1.0;
} else if (hour >= 17 && hour < 20) {
return 1.3;
} else if (hour >= 20 || hour < 2) {
return 0.9;
} else {
return 0.8;
}
}
/**
* Updates the water usage counter.
* It calculates the elapsed time since the user arrived and multiplies
* the base rate by the current time-of-day multiplier.
*/
function updateWaterUsage(){
const now = new Date();
const elapsedSeconds = (now - startTime) / 1000;
const multiplier = getTimeOfDayMultiplier();
const waterUsed = elapsedSeconds * baseUsagePerSecond * multiplier;
const counterEl = document.getElementById('water-counter');
if (counterEl) {
counterEl.textContent = Math.floor(waterUsed).toLocaleString();
}
}
// Update the counter every second.
setInterval(updateWaterUsage, 1000);
})();
</script>
</body>
</html>
Update Log
Version 1.2 – Adjust weighting to total 70M gallons/day.
Version 1.1 – Publish!
