Period Tracker
About this app
Track and predict your menstrual cycle with this simple and colorful web app.
Period Tracker 📅 Period Tracker Last Period Start Date Average Cycle Length (days) Average Period Length (days) Update Your next period is expected on: -
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>Period Tracker</title>
<meta name="description" content="Track and predict your menstrual cycle with this simple and colorful web app.">
<meta name="keywords" content="period tracker, menstrual cycle, health, calendar">
<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">
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
let periodData = loadLocal('periodData') || { lastPeriodDate: null, cycleLength: 28, periodLength: 5 };
function saveData() {
saveLocal('periodData', periodData);
}
function updatePredictions() {
const today = new Date();
const lastPeriodDate = new Date(periodData.lastPeriodDate);
const daysSinceLastPeriod = Math.floor((today - lastPeriodDate) / (1000 * 60 * 60 * 24));
const daysUntilNextPeriod = periodData.cycleLength - daysSinceLastPeriod % periodData.cycleLength;
const nextPeriodDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + daysUntilNextPeriod);
$('#next-period').text(nextPeriodDate.toLocaleDateString());
}
function submitPeriodData() {
const lastPeriodDate = $('#last-period-date').val();
const cycleLength = parseInt($('#cycle-length').val(), 10);
const periodLength = parseInt($('#period-length').val(), 10);
if (lastPeriodDate && cycleLength && periodLength) {
periodData = { lastPeriodDate, cycleLength, periodLength };
saveData();
updatePredictions();
}
}
document.addEventListener("DOMContentLoaded", function() {
if (periodData.lastPeriodDate) {
$('#last-period-date').val(periodData.lastPeriodDate);
$('#cycle-length').val(periodData.cycleLength);
$('#period-length').val(periodData.periodLength);
updatePredictions();
}
$('#period-form').submit(function(e) {
e.preventDefault();
submitPeriodData();
});
});
function saveLocal(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
function loadLocal(key) {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : null;
}
} catch (error) {
throw error;
}
</script>
<style>
body {
font-family: 'Patrick Hand', cursive;
background: #ff9a9e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff9a9e, #fecfef); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff9a9e, #fecfef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #333;
}
#main-container {
padding-top: 50px;
}
.card {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-control, .btn {
border-radius: 20px;
}
.btn-pink {
background-color: #ff9a9e;
border-color: #ff9a9e;
color: white;
}
.btn-pink:hover {
background-color: #ff768a;
border-color: #ff768a;
}
.emoji-icon {
font-size: 24px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<h2 class="text-center">📅 Period Tracker</h2>
<form id="period-form">
<div class="mb-3">
<label for="last-period-date" class="form-label">Last Period Start Date</label>
<input type="date" class="form-control" id="last-period-date" required>
</div>
<div class="mb-3">
<label for="cycle-length" class="form-label">Average Cycle Length (days)</label>
<input type="number" class="form-control" id="cycle-length" required>
</div>
<div class="mb-3">
<label for="period-length" class="form-label">Average Period Length (days)</label>
<input type="number" class="form-control" id="period-length" required>
</div>
<button type="submit" class="btn btn-pink w-100">Update</button>
</form>
<div class="text-center mt-4">
<p>Your next period is expected on:</p>
<p class="lead" id="next-period">-</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!