Programma per la salute by @bano008 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<tfoot>Definisce il footer o sezione inferiore di una tabella.
formnovalidateImpedisce la convalida di un singolo elemento input
_parentApre collegamenti ipertestuali nell'elemento genitore
methodDetermina il metodo di invio dei dati di un form al server
<table>Tag primario per la creazione di tabelle

Users

Log in to search for users

Explore

Find inspiration

Media ponderata

esercitazione n. 1

Our first web page!

Test Per informatica

Custom JS alert box

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<html>
<head>
<style>
/* Stile per il pulsante + */
#plus-button {
  position: fixed; /* Posizione fissa */
  bottom: 10px; /* Distanza dal bordo inferiore */
  right: 10px; /* Distanza dal bordo destro */
  width: 50px; /* Larghezza del pulsante */
  height: 50px; /* Altezza del pulsante */
  border: none; /* Nessun bordo */
  border-radius: 50%; /* Bordo arrotondato */
  background-color: green; /* Colore di sfondo verde */
  color: white; /* Colore del testo bianco */
  font-size: 30px; /* Dimensione del testo */
  cursor: pointer; /* Cursore a forma di mano */
}

/* Stile per il popup */
#popup {
  display: none; /* Nascondi il popup di default */
  position: fixed; /* Posizione fissa */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra orizzontalmente */
  transform: translate(-50%, -50%); /* Sposta il popup al centro */
  width: 300px; /* Larghezza del popup */
  height: 200px; /* Altezza del popup */
  border: solid 1px black; /* Bordo nero */
  background-color: white; /* Colore di sfondo bianco */
  padding: 10px; /* Spazio interno */
}

/* Stile per il pulsante di chiusura del popup */
#close-button {
  position: absolute; /* Posizione assoluta */
  top: 5px; /* Distanza dal bordo superiore */
  right: 5px; /* Distanza dal bordo destro */
  width: 20px; /* Larghezza del pulsante */
  height: 20px; /* Altezza del pulsante */
  border: none; /* Nessun bordo */
  background-color: red; /* Colore di sfondo rosso */
  color: white; /* Colore del testo bianco */
  font-size: 15px; /* Dimensione del testo */
  cursor: pointer; /* Cursore a forma di mano */
}

/* Stile per il form del popup */
#popup-form {
  display: flex; /* Disposizione flessibile */
  flex-direction: column; /* Direzione verticale */
  align-items: center; /* Allineamento al centro */
  justify-content: space-evenly; /* Spaziatura uniforme */
  height: 100%; /* Altezza massima */
}

/* Stile per i campi del form */
#popup-form input {
  width: 80%; /* Larghezza dei campi */
}

/* Stile per il pulsante di invio del form */
#popup-form button {
  width: 50%; /* Larghezza del pulsante */
  border: none; /* Nessun bordo */
  background-color: blue; /* Colore di sfondo blu */
  color: white; /* Colore del testo bianco */
  cursor: pointer; /* Cursore a forma di mano */
}
</style>
</head>
<body>
<!-- Pulsante + -->
<button id="plus-button" onclick="showPopup()">+</button>

<!-- Popup -->
<div id="popup">
  <!-- Pulsante di chiusura -->
  <button id="close-button" onclick="hidePopup()">X</button>
  <!-- Form -->
  <form id="popup-form" action="https://codewith.it/p/AR0LEq" method="post">
    <!-- Campo nome -->
    <input type="text" name="name" placeholder="Inserisci il tuo nome">
    <!-- Campo email -->
    <input type="email" name="email" placeholder="Inserisci la tua email">
    <!-- Pulsante di invio -->
    <button type="submit">Invia</button>
  </form>
</div>

<script>
// Funzione per mostrare il popup
function showPopup() {
  // Seleziona l'elemento popup
  var popup = document.getElementById("popup");
  // Cambia la proprietà display a block
  popup.style.display = "block";
}

// Funzione per nascondere il popup
function hidePopup() {
  // Seleziona l'elemento popup
  var popup = document.getElementById("popup");
  // Cambia la proprietà display a none
  popup.style.display = "none";
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>

  <style>
  /* Stile per il pulsante + */
  #plus-button {
  position: fixed; /* Posizione fissa */
  bottom: 10px; /* Distanza dal bordo inferiore */
  right: 10px; /* Distanza dal bordo destro */
  width: 50px; /* Larghezza del pulsante */
  height: 50px; /* Altezza del pulsante */
  border: none; /* Nessun bordo */
  border-radius: 50%; /* Bordo arrotondato */
  background-color: green; /* Colore di sfondo verde */
  color: white; /* Colore del testo bianco */
  font-size: 30px; /* Dimensione del testo */
  cursor: pointer; /* Cursore a forma di mano */
  }

  /* Stile per il popup */
  #popup {
  display: none; /* Nascondi il popup di default */
  position: fixed; /* Posizione fissa */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra orizzontalmente */
  transform: translate(-50%, -50%); /* Sposta il popup al centro */
  width: 300px; /* Larghezza del popup */
  height: 200px; /* Altezza del popup */
  border: solid 1px black; /* Bordo nero */
  background-color: white; /* Colore di sfondo bianco */
  padding: 10px; /* Spazio interno */
  }

  /* Stile per il pulsante di chiusura del popup */
  #close-button {
  position: absolute; /* Posizione assoluta */
  top: 5px; /* Distanza dal bordo superiore */
  right: 5px; /* Distanza dal bordo destro */
  width: 20px; /* Larghezza del pulsante */
  height: 20px; /* Altezza del pulsante */
  border: none; /* Nessun bordo */
  background-color: red; /* Colore di sfondo rosso */
  color: white; /* Colore del testo bianco */
  font-size: 15px; /* Dimensione del testo */
  cursor: pointer; /* Cursore a forma di mano */
  }

  /* Stile per il form del popup */
  #popup-form {
  display: flex; /* Disposizione flessibile */
  flex-direction: column; /* Direzione verticale */
  align-items: center; /* Allineamento al centro */
  justify-content: space-evenly; /* Spaziatura uniforme */
  height: 100%; /* Altezza massima */
  }

  /* Stile per i campi del form */
  #popup-form input {
  width: 80%; /* Larghezza dei campi */
  }

  /* Stile per il pulsante di invio del form */
  #popup-form button {
  width: 50%; /* Larghezza del pulsante */
  border: none; /* Nessun bordo */
  background-color: blue; /* Colore di sfondo blu */
  color: white; /* Colore del testo bianco */
  cursor: pointer; /* Cursore a forma di mano */
  }
  </style>
  <title></title>
</head>
<body>
  <!-- Pulsante + -->
  <button id="plus-button" onclick="showPopup()">+</button> <!-- Popup -->
  <div id="popup">
    <!-- Pulsante di chiusura -->
    <button id="close-button" onclick="hidePopup()">X</button> <!-- Form -->
    <form id="popup-form" action="https://codewith.it/p/AR0LEq" method="post" name="popup-form">
      <!-- Campo nome -->
      <input type="text" name="name" placeholder="Inserisci il tuo nome"> <!-- Campo email -->
       <input type="email" name="email" placeholder="Inserisci la tua email"> <!-- Pulsante di invio -->
       <button type="submit">Invia</button>
    </form>
  </div>
  <script>
  // Funzione per mostrare il popup
  function showPopup() {
  // Seleziona l'elemento popup
  var popup = document.getElementById("popup");
  // Cambia la proprietà display a block
  popup.style.display = "block";
  }

  // Funzione per nascondere il popup
  function hidePopup() {
  // Seleziona l'elemento popup
  var popup = document.getElementById("popup");
  // Cambia la proprietà display a none
  popup.style.display = "none";
  }
  </script>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
}

.container {
    width: 80%;
    margin: 0 auto;
}

form {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

label {
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #333;
}

input, textarea {
    width: 300px;
    height: 30px;
    border: 1px solid #ccc;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #333;
}

textarea {
    height: 120px;
}

button {
    width: 100px;
    height: 40px;
    background-color: #333;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
    position: relative;
}

thead {
    position: sticky;
    top: 0;
    background-color: #333;
    color: #fff;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #333;
}

tr:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

// Creo una variabile per il database
let db;

// Creo una variabile per il form
let form = document.getElementById("form");

// Creo una variabile per la tabella
let table = document.getElementById("table");

// Creo una variabile per il corpo della tabella
let tbody = document.getElementById("tbody");

// Creo una funzione per inizializzare il database
function initDB() {
    // Apro il database con il nome "salute" e la versione 1
    let request = indexedDB.open("salute", 1);

    // Se il database viene aperto con successo, assegno il risultato alla variabile db
    request.onsuccess = function(event) {
        db = event.target.result;
        // Richiamo la funzione per mostrare i dati salvati
        showData();
    };

    // Se il database viene aperto con errore, mostro un messaggio di errore
    request.onerror = function(event) {
        alert("Errore nell'apertura del database: " + event.target.errorCode);
    };

    // Se il database viene creato o aggiornato, creo uno store con il nome "dati" e la chiave "id"
    request.onupgradeneeded = function(event) {
        db = event.target.result;
        let store = db.createObjectStore("dati", {keyPath: "id", autoIncrement: true});
    };
}

// Creo una funzione per inserire i dati nel database
function insertData() {
    // Prendo i valori dei campi di input
    let pressioneD = document.getElementById("pressione-d").value;
    let pressioneS = document.getElementById("pressione-s").value;
    let battiti = document.getElementById("battiti").value;
    let glicemia = document.getElementById("glicemia").value;
    let peso = document.getElementById("peso").value;
    let commenti = document.getElementById("commenti").value;

    // Creo un oggetto con i valori dei campi di input
    let data = {
        pressioneD: pressioneD,
        pressioneS: pressioneS,
        battiti: battiti,
        glicemia: glicemia,
        peso: peso,
        commenti: commenti,
        // Aggiungo anche la data e l'ora correnti
        data: new Date().toLocaleDateString(),
        ora: new Date().toLocaleTimeString()
    };

    // Creo una transazione in modalità scrittura
    let transaction = db.transaction(["dati"], "readwrite");

    // Creo uno store
    let store = transaction.objectStore("dati");

    // Inserisco l'oggetto nello store
    let request = store.add(data);

    // Se l'inserimento va a buon fine, mostro un messaggio di successo e pulisco i campi di input
    request.onsuccess = function(event) {
        alert("Dati inseriti con successo");
        form.reset();
    };

    // Se l'inserimento va in errore, mostro un messaggio di errore
    request.onerror = function(event) {
        alert("Errore nell'inserimento dei dati: " + event.target.errorCode);
    };
}

// Creo una funzione per mostrare i dati nella tabella
function showData() {
    // Svuoto il corpo della tabella
    tbody.innerHTML = "";

    // Creo una transazione in modalità lettura
    let transaction = db.transaction(["dati"], "readonly");

    // Creo uno store
    let store = transaction.objectStore("dati");

    // Apro un cursore per scorrere tutti i dati
    let request = store.openCursor();

    // Creo una variabile per memorizzare la data corrente
    let currentDate = "";

    // Se il cursore viene aperto con successo, mostro i dati nella tabella
    request.onsuccess = function(event) {
        // Prendo il risultato del cursore
        let cursor = event.target.result;

        // Se il cursore non è nullo, significa che ci sono ancora dati da mostrare
        if (cursor) {
            // Prendo il valore del cursore
            let value = cursor.value;

            // Creo una riga nella tabella
            let row = document.createElement("tr");

            // Creo le celle nella riga
            let cellPressione = document.createElement("td");
            let cellBattiti = document.createElement("td");
            let cellPeso = document.createElement("td");
            let cellGlicemia = document.createElement("td");
            let cellOra = document.createElement("td");
            let cellCommenti = document.createElement("td");

            // Inserisco i valori nelle celle
            cellPressione.textContent = value.pressioneD + "/" + value.pressioneS;
            cellBattiti.textContent = value.battiti;
            cellPeso.textContent = value.peso;
            cellGlicemia.textContent = value.glicemia;
            cellOra.textContent = value.ora;
            cellCommenti.textContent = value.commenti;

            // Aggiungo le celle alla riga
            row.appendChild(cellPressione);
            row.appendChild(cellBattiti);
            row.appendChild(cellPeso);
            row.appendChild(cellGlicemia);
            row.appendChild(cellOra);
            row.appendChild(cellCommenti);

            // Aggiungo un attributo alla riga con l'id del dato
            row.setAttribute("data-id", value.id);

            // Aggiungo un evento alla riga per aprire una nuova pagina per modificare o cancellare il dato
            row.addEventListener("click", function() {
                // Prendo l'id del dato dalla riga
                let id = this.getAttribute("data-id");

                // Apro una nuova pagina con l'id del dato come parametro
                window.open("edit.html?id=" + id, "_blank");
            });

            // Controllo se la data del dato è diversa dalla data corrente
            if (value.data !== currentDate) {
                // Se è diversa, significa che inizia un nuovo giorno
                // Creo una riga nella tabella per mostrare la data
                let rowDate = document.createElement("tr");

                // Creo una cella nella riga
                let cellDate = document.createElement("td");

                // Inserisco la data nella cella
                cellDate.textContent = value.data;

                // Aggiungo uno stile alla cella per evidenziarla
                cellDate.style.fontWeight = "bold";
                cellDate.style.backgroundColor = "#ccc";

                // Aggiungo un attributo alla cella per indicare che occupa 6 colonne
                cellDate.setAttribute("colspan", "6");

                // Aggiungo la cella alla riga
                rowDate.appendChild(cellDate);

                // Aggiungo la riga alla tabella
                tbody.appendChild(rowDate);

                // Aggiorno la data corrente con la data del dato
                currentDate = value.data;
            }

            // Aggiungo la riga alla tabella
            tbody.appendChild(row);

            // Continuo a scorrere il cursore
            cursor.continue();
        }
    };

    // Se il cursore viene aperto con errore, mostro un messaggio di errore
    request.onerror = function(event) {
        alert("Errore nella lettura dei dati: " + event.target.errorCode);
    };
}

// Richiamo la funzione per inizializzare il database
initDB();

// Aggiungo un evento al form per inserire i dati nel database
form.addEventListener("submit", function(event) {
    // Preveno il comportamento di default del form
    event.preventDefault();

    // Richiamo la funzione per inserire i dati nel database
    insertData();

    // Richiamo la funzione per mostrare i dati nella tabella
    showData();
});