JSFiddle - React, Tailwind, and code Playground

by moku23

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cicli Mestruali</title>
    <link rel="stylesheet" href="stile.css">
</head>
<body>
    <h2>Inserisci Ciclo Mestruale</h2>
    <form id="formCiclo">
        <input type="date" id="dataInizio" required>
        <input type="date" id="dataFine" required>
        <button type="submit">Aggiungi Ciclo</button>
    </form>
    <h3>Ultimi 5 Cicli</h3>
    <ul id="listaCicli">
        <!-- I cicli verranno aggiunti qui -->
    </ul>
<h3>Data stimata prossimo ciclo</h3>
<p id="dataProssimoCiclo"></p>

<h3>Periodo di fertilità stimato</h3>
<p id="periodoFertilita"></p>


    <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: auto;
  padding: 20px;
}

form {
  margin-bottom: 20px;
}

input,
button {
  margin: 5px 0;
  padding: 10px;
  font-size: 16px;
}

button {
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 5px;
}

JavaScript

function aggiornaPeriodoFertilita() {
    if (cicli.length === 0) {
        document.getElementById('periodoFertilita').textContent = "Inserisci almeno un ciclo per calcolare il periodo di fertilità.";
        return;
    }

    const ultimoCiclo = new Date(cicli[cicli.length - 1].inizio);
    let sommaDurate = 0;
    for (let i = 0; i < cicli.length - 1; i++) {
        const inizioAttuale = new Date(cicli[i].inizio);
        const inizioSuccessivo = new Date(cicli[i + 1].inizio);
        const diffGiorni = (inizioSuccessivo - inizioAttuale) / (1000 * 60 * 60 * 24);
        sommaDurate += diffGiorni;
    }
    const mediaDurate = cicli.length > 1 ? sommaDurate / (cicli.length - 1) : 28; // Usa 28 come default se c'è solo un ciclo
    const prossimoCiclo = new Date(ultimoCiclo.setDate(ultimoCiclo.getDate() + mediaDurate));

    // Calcola il periodo di fertilità
    const inizioFertilita = new Date(prossimoCiclo);
    inizioFertilita.setDate(prossimoCiclo.getDate() - 17);
    const fineFertilita = new Date(prossimoCiclo);
    fineFertilita.setDate(prossimoCiclo.getDate() - 10);

    document.getElementById('periodoFertilita').textContent = `Da: ${inizioFertilita.toDateString()} a: ${fineFertilita.toDateString()}`;
}
document.addEventListener('DOMContentLoaded', function() {
    // Cicli pre-caricati
    let cicliPreCaricati = [
        { inizio: '2024-01-29', fine: '2024-02-02' },
        { inizio: '2023-12-14', fine: '2023-12-18' },
        { inizio: '2023-11-01', fine: '2023-11-05' },
        { inizio: '2023-10-08', fine: '2023-10-12' },
        { inizio: '2023-09-10', fine: '2023-09-14' },
        { inizio: '2023-07-11', fine: '2023-07-11' },
        { inizio: '2023-06-03', fine: '2023-06-07' },
        { inizio: '2023-04-12', fine: '2023-04-16' },
        { inizio: '2023-02-15', fine: '2023-02-19' },
    ];
    
    cicliPreCaricati = cicliPreCaricati.reverse();

    // Inizializza l'array cicli e la lista sul DOM
    cicliPreCaricati.forEach(ciclo => {
      ...