Fluid Balance Tracking Chart
About this app
A fluid balance tracking chart that allows you to track fluid in, fluid out and attempts to pee.
Fluid Balance Tracking Chart Fluid in (ml): Fluid out (ml): Times attempted to pee: Update Save Log
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf+8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fluid Balance Tracking Chart</title>
<meta name="description" content="A fluid balance tracking chart that allows you to track fluid in, fluid out and attempts to pee.">
<meta name="keywords" content="fluid balance, tracking chart, health, hydration">
<style>
/* App CSS Goes Here */
body {
font-family: 'Comfortaa', cursive;
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
color: white;
}
#main-container {
margin-top: 50px;
}
.data-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.data-row div {
flex: 1;
}
.data-row input {
width: 100%;
}
.graph-container {
margin-top: 20px;
}
#output-log {
margin-top: 20px;
color: #333;
background-color: #fff;
padding: 10px;
border-radius: 5px;
}
</style>
<script>
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
try {
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Define the fluid balance tracker object
var fluidBalanceTracker = {
fluidIn: 0,
fluidOut: 0,
timesAttemptedToPee: 0,
timeRecorded: new Date(),
logs: [],
disparity: function() {
return this.fluidIn - this.fluidOut;
},
update: function() {
this.fluidIn = Number(document.getElementById('fluid-in').value);
this.fluidOut = Number(document.getElementById('fluid-out').value);
this.timesAttemptedToPee = Number(document.getElementById('attempts-to-pee').value);
this.timeRecorded = new Date(); // Update the time recorded to the current time
// Display the current data in the console (replace this with your own functionality)
console.log(this);
},
saveLog: function() {
var log = {
fluidIn: this.fluidIn,
fluidOut: this.fluidOut,
timesAttemptedToPee: this.timesAttemptedToPee,
timeRecorded: this.timeRecorded
};
this.logs.push(log);
this.clearInputs();
// Display the log in the output log section (replace this with your own functionality)
document.getElementById('output-log').innerText = JSON.stringify(this.logs, null, 2);
},
clearInputs: function() {
document.getElementById('fluid-in').value = '';
document.getElementById('fluid-out').value = '';
document.getElementById('attempts-to-pee').value = '';
}
};
// Add event listener for the update button
document.getElementById('update-button').addEventListener('click', function() {
fluidBalanceTracker.update();
});
// Add event listener for the save log button
document.getElementById('save-log-button').addEventListener('click', function() {
fluidBalanceTracker.saveLog();
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
<div class="data-row">
<div>
<label for="fluid-in">Fluid in (ml):</label>
<input type="number" id="fluid-in">
</div>
<div>
<label for="fluid-out">Fluid out (ml):</label>
<input type="number" id="fluid-out">
</div>
</div>
<div class="data-row">
<div>
<label for="attempts-to-pee">Times attempted to pee:</label>
<input type="number" id="attempts-to-pee">
</div>
<div>
<button id="update-button">Update</button>
<button id="save-log-button">Save Log</button>
</div>
</div>
<div id="output-log"></div>
<div class="graph-container">
<!-- Add graph here (replace with your own functionality) -->
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!