SmartPast by @silvione87 - Codewith.it

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
listCollega un elemento input con una lista di opzioni datalist
<html>Tag primario di un documento HTML
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<blockquote>Inserisce citazioni in un documento HTML
<textarea>Area di testo libero espandibile per form HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione n.1

Crunchyroll Replica

5/10/24 es.1 - palindromi

Con nome bandiera(2)(2)

Esercizi 05/03/2024 es5

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartPast</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>SmartPast</h1>
        <div class="aggiungi-farmaco">
            <h2>Aggiungi Farmaco</h2>
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome">
            <label for="ora">Ora:</label>
            <input type="time" id="ora" name="ora">
            <label for="colore">Colore:</label>
            <input type="color" id="colore" name="colore" value="#007bff">
            <button id="aggiungi">Aggiungi</button>
        </div>
        <div class="lista-farmaci">
            <h2>Farmaci</h2>
            <ul id="farmaci-list"></ul>
        </div>
        <div class="notifica" id="notifica">
            <p id="notifica-titolo"></p>
            <p id="notifica-descrizione"></p>
            <button id="conferma">Presa</button>
            <button id="sveglia">Sveglia snoozata</button>
        </div>
    </div>

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

body {
    font-family:'Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif'
    

    background-color: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #333;
}

.container {
    width: 80%;
    margin: 40px auto;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 2.5rem;
    color: #fb3604;
    text-align: center;
}

.aggiungi-farmaco {
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="time"],
input[type="color"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #f13a3a;
    border-radius: 5px;
    box-sizing: border-box;
}

input[type="text"],
input[type="time"]:focus,
input[type="color"]:focus {
    outline: none;
    border-color: #d10808;
}

button {
    padding: 12px 20px;
    background-color: #c44343;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #b12e2e;
}

.lista-farmaci {
    margin-bottom: 30px;
}

.lista-farmaci h2 {
    color: #007bff;
}

.farmaco {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.farmaco .nome {
    flex-grow: 1;
    margin-right: 10px;
}

.farmaco .colore {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.notifica {
    display: none;
    background-color: #fefefe;

const nomeInput = document.getElementById('nome');
const oraInput = document.getElementById('ora');
const coloreInput = document.getElementById('colore');
const aggiungiButton = document.getElementById('aggiungi');
const farmaciList = document.getElementById('farmaci-list');
const notificaTitolo = document.getElementById('notifica-titolo');
const notificaDescrizione = document.getElementById('notifica-descrizione');
const confermaButton = document.getElementById('conferma');
const svegliaButton = document.getElementById('sveglia');

let farmaci = [];
let notificaFarmaco = null;

// Carica i farmaci salvati nel localStorage
caricaFarmaci();

// Aggiunge un nuovo farmaco
aggiungiButton.addEventListener('click', aggiungiFarmaco);

// Gestisce il click su un farmaco nella lista
farmaciList.addEventListener('click', gestisciClickFarmaco);

// Gestisce la conferma dell'assunzione del farmaco
confermaButton.addEventListener('click', confermaPresa);

// Gestisce il posticipo della notifica
svegliaButton.addEventListener('click', svegliaSnooze);

function caricaFarmaci() {
    const farmaciJSON = localStorage.getItem('farmaci');
    if (farmaciJSON) {
        farmaci = JSON.parse(farmaciJSON);
        popolaListaFarmaci();
    }
}

function salvaFarmaci() {
    localStorage.setItem('farmaci', JSON.stringify(farmaci));
}

function aggiungiFarmaco() {
    const nome = nomeInput.value.trim();
    const ora = oraInput.value;
    const colore = coloreInput.value;

    if (!nome || !ora || !colore) {
        alert('Compila tutti i campi.');
        return;
    }

    const nuovoFarmaco = {
        id: Math.random().toString(36).substr(2, 9),
        nome,
        ora,
        colore
    };

    farmaci.push(nuovoFarmaco);
    salvaFarmaci();
    popolaListaFarmaci();

    nomeInput.value = '';
    oraInput.value = '';
    coloreInput.value = '#007bff';
}

function popolaListaFarmaci() {
    farmaciList.innerHTML = '';
    farmaci.forEach(farmaco => {
        const li = document.createElement('li');
        li.classList.add('farmaco');
        li.dataset.id = farmaco.id;
        li.innerHTML = `
            <span class="nome" style="color: <span class="math-inline">\{farmaco\.colore\}"\></span>{farmaco.nome}</span>
            <span class="colore" style="background-color: ${farmaco.colore}"></span>
        `;
        farmaciList.appendChild(li);
    });
}

function gestisciClickFarmaco(event) {
    const farmacoId = event.target.closest('.farmaco').dataset.id;
    const farmaco = farmaci.find(farmaco => farmaco.id === farmacoId);

    if (farmaco) {
        mostraNotifica(farmaco);
        notificaFarmaco = farmaco;
    }
}

function mostraNotifica(farmaco) {
    notificaTitolo.textContent = `Promemoria: ${farmaco.nome}`;
    notificaDescrizione.textContent = `Assumi il tuo farmaco alle ${farmaco.ora}.`;
    notifica.style.display = 'block';

    // Imposta un allarme per il momento dell'assunzione del farmaco
    const oraNotifica = new Date();
    oraNotifica.setHours(farmaco.ora.split(':')[0]);
    oraNotifica.setMinutes(farmaco.ora.split(':')[1]);

    if (oraNotifica < Date.now()) {
        oraNotifica.setDate(oraNotifica.getDate() + 1);
    }

    if (window.Notification && Notification.permission === 'granted') {
        const notification = new Notification(`Promemoria: ${farmaco.nome}`, {
            body: `Assumi il tuo farmaco alle ${farmaco.ora}.`,
            tag: 'promemoria-pillole'
        });
        notification.onclick = () => {
            mostraNotifica(farmaco);
        };
        notification.onclose = () => {
            if (notificaFarmaco && notificaFarmaco.id === farmaco.id) {
                confer