Calculator Tools Calculator Tools
Create

Fasting App

Aug 12, 2026

About this app

Track your fasting schedule and progress

Fasting App Fasting App Start Time End Time Add Fasting Time

Related apps

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>Fasting App</title>
<meta name="description" content="Track your fasting schedule and progress">
<meta name="keywords" content="fasting, health, wellness">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Built-In Functions for Apps -->
<script type="text/javascript">
var localStoragePrefix = "ct-169294280458148";
var lastSave = 0;
// save to localstorage
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
// save to cookie
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}

// load from localstorage
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
</script>

<script type="text/javascript">
// App Javascript Goes Here
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f7f7f7;
font-family: 'Roboto', sans-serif;
}

.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 40px;
}

.form-group {
margin-bottom: 20px;
}

label {
font-weight: 500;
}

input[type="time"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #e0e0e0;
}

.btn-primary {
width: 100%;
padding: 10px 0;
background-color: #ff6b6b;
border: none;
border-radius: 5px;
color: #ffffff;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}

.fasting-time {
margin-bottom: 20px;
}

.fasting-time label {
display: block;
font-size: 16px;
}

.fasting-time span {
font-size: 14px;
color: #999999;
}

.fasting-time .time {
font-size: 20px;
font-weight: 700;
color: #ff6b6b;
margin-top: 10px;
}

.fasting-time .delete-time {
font-size: 14px;
color: #999999;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Fasting App</h1>

<div class="form-group">
<label for="start-time">Start Time</label>
<input type="time" id="start-time">
</div>

<div class="form-group">
<label for="end-time">End Time</label>
<input type="time" id="end-time">
</div>

<button class="btn-primary" id="add-time-btn">Add Fasting Time</button>

<div id="fasting-times-container">
<!-- Fasting Times will be dynamically added here -->
</div>
</div>

<script type="text/javascript">
// App Javascript Goes Here
// Get the fasting times from local storage or initialize an empty array
var fastingTimes = loadLocal() || [];

// Function to update the fasting times container with the current fasting times
function updateFastingTimesContainer() {
var container = $("#fasting-times-container");
container.empty();

// Loop through each fasting time and add it to the container
for (var i = 0; i < fastingTimes.length; i++) {
var fastingTime = fastingTimes[i];
var startTime = fastingTime.start;
var endTime = fastingTime.end;

var fastingTimeHtml = '<div class="fasting-time">';
fastingTimeHtml += '<label>Start Time</label>';
fastingTimeHtml += '<span>' + startTime + '</span>';
fastingTimeHtml += '<label>End Time</label>';
fastingTimeHtml += '<span>' + endTime + '</span>';
fastingTimeHtml += '<div class="delete-time" data-index="' + i + '"><i class="fa fa-trash"></i> Delete</div>';
fastingTimeHtml += '</div>';

container.append(fastingTimeHtml);
}
}

// Event listener for the add time button
$("#add-time-btn").click(function() {
var startTime = $("#start-time").val();
var endTime = $("#end-time").val();

// Validate the inputs
if (startTime === "" || endTime === "") {
alert("Please enter a start time and end time.");
return;
}

// Add the fasting time to the array
fastingTimes.push({
start: startTime,
end: endTime
});

// Update the fasting times container
updateFastingTimesContainer();

// Clear the input fields
$("#start-time").val("");
$("#end-time").val("");

// Save the fasting times to local storage
saveLocal(fastingTimes);
});

// Event listener for the delete time button
$(document).on("click", ".delete-time", function() {
var index = $(this).data("index");

// Remove the fasting time from the array
fastingTimes.splice(index, 1);

// Update the fasting times container
updateFastingTimesContainer();

// Save the fasting times to local storage
saveLocal(fastingTimes);
});

// Initial update of the fasting times container
updateFastingTimesContainer();
</script>
</body>
</html>