JavaScript: usare Math, Date e JSON per creare un convertitore di eventi e promemoria

Introduzione

Gli oggetti globali Math, Date e JSON sono tre strumenti fondamentali in JavaScript, spesso usati insieme in applicazioni reali. In questo tutorial vediamo un sotto-argomento molto pratico: costruire un piccolo convertitore di eventi e promemoria, capace di:

calcolare il tempo rimanente a un evento futuro;
formattare una data in modo leggibile;
serializzare e deserializzare i dati del promemoria in JSON;
gestire un riepilogo finale con informazioni utili all’utente.

Questo approccio è utile in dashboard, applicazioni di task management, calendari, pannelli di notifica e tool interni. L’idea è semplice: prendiamo una data, calcoliamo la differenza con il momento attuale, arrotondiamo i valori con Math e salviamo tutto in un formato portabile con JSON.

Codice completo

// Esempio: convertitore di evento e promemoria
// Obiettivo:
// 1) Ricevere una data evento
// 2) Calcolare il tempo rimanente
// 3) Formattare la data in modo leggibile
// 4) Salvare e ricaricare i dati in JSON

const eventInput = {
  title: "Riunione progetto frontend",
  date: "2026-02-14T15:30:00.000Z",
  participants: 8,
  priority: "alta"
};

// 1) Funzione per formattare una data in stile italiano
function formatDateIT(date) {
  return new Intl.DateTimeFormat("it-IT", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit"
  }).format(date);
}

// 2) Funzione per calcolare il tempo rimanente
function getTimeRemaining(targetDate) {
  const now = new Date();
  const diffMs = targetDate - now;

  // Se la data è nel passato, restituiamo valori a zero
  if (diffMs <= 0) {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      totalHours: 0
    };
  }

  const totalHours = diffMs / (1000 * 60 * 60);
  const days = Math.floor(totalHours / 24);
  const hours = Math.floor(totalHours % 24);
  const minutes = Math.floor((diffMs / (1000 * 60)) % 60);

  return {
    days,
    hours,
    minutes,
    totalHours: Math.ceil(totalHours)
  };
}

// 3) Creiamo un oggetto evento arricchito
function buildEventSummary(eventData) {
  const eventDate = new Date(eventData.date);
  const remaining = getTimeRemaining(eventDate);

  return {
    title: eventData.title,
    dateISO: eventData.date,
    formattedDate: formatDateIT(eventDate),
    participants: eventData.participants,
    priority: eventData.priority,
    remaining,
    isUpcoming: eventDate > new Date()
  };
}

// 4) Serializzazione in JSON
const eventSummary = buildEventSummary(eventInput);
const jsonString = JSON.stringify(eventSummary, null, 2);

// 5) Simuliamo il salvataggio e il caricamento
const restoredObject = JSON.parse(jsonString);

// 6) Output finale
console.log("=== RIEPILOGO EVENTO ===");
console.log("Titolo:", restoredObject.title);
console.log("Data:", restoredObject.formattedDate);
console.log("Partecipanti:", restoredObject.participants);
console.log("Priorità:", restoredObject.priority);
console.log("In arrivo:", restoredObject.isUpcoming ? "Sì" : "No");
console.log("Tempo rimanente:", `${restoredObject.remaining.days} giorni, ${restoredObject.remaining.hours} ore, ${restoredObject.remaining.minutes} minuti`);
console.log("JSON salvato:");
console.log(jsonString);

Spiegazione

Il codice è composto da quattro passaggi principali. Il primo riguarda Date: trasformiamo la stringa ISO del campo date in un oggetto Date, così possiamo lavorare con la data come valore temporale reale. Questo è importante perché le stringhe da sole non permettono calcoli affidabili.

La funzione formatDateIT usa Intl.DateTimeFormat per mostrare la data in un formato leggibile per l’utente italiano. Anche se il tutorial si concentra su Date, questa API lavora naturalmente con gli oggetti data e rappresenta una best practice moderna per la formattazione.

La funzione getTimeRemaining calcola la differenza tra la data obiettivo e il momento attuale. Qui entra in gioco Math. Usiamo:

Math.floor() per arrotondare per difetto giorni, ore e minuti;
Math.ceil() per ottenere le ore totali rimanenti arrotondate per eccesso.

Questo è utile quando vuoi mostrare un countdown o un indicatore di scadenza. Per esempio, se mancano 2 giorni, 5 ore e 40 minuti, l’utente vede un’informazione sintetica e comprensibile.

La funzione buildEventSummary crea un oggetto finale con tutti i dati utili: titolo, data formattata, numero di partecipanti, priorità, stato dell’evento e tempo rimanente. È una struttura perfetta per essere inviata al frontend, salvata nel local storage o trasmessa via API.

Infine, JSON.stringify() converte l’oggetto in una stringa JSON. Il secondo argomento null e il terzo argomento 2 servono a rendere il JSON leggibile con indentazione. Dopo il salvataggio, JSON.parse() ricostruisce l’oggetto originale a partire dalla stringa. Questo flusso è essenziale in JavaScript quando devi persistere dati o scambiarli tra sistemi diversi.

Punti chiave da ricordare

Date serve per creare, confrontare e manipolare date e orari.
Math è utile per arrotondare e normalizzare i risultati dei calcoli temporali.
JSON è il formato standard per serializzare dati strutturati.
Una data in formato ISO è molto più affidabile di una stringa generica.

Best practice

Quando lavori con Math, Date e JSON, ci sono alcune buone abitudini che migliorano la qualità del codice e riducono gli errori.

Usa sempre formati data standard: preferisci stringhe ISO come 2026-02-14T15:30:00.000Z. Sono più facili da interpretare e meno soggette ad ambiguità.
Controlla le date non valide: prima di usare un oggetto Date, verifica che non sia Invalid Date. Un input errato può rompere i calcoli.
Gestisci il passato e il futuro: se un evento è già scaduto, restituisci valori coerenti invece di numeri negativi difficili da interpretare.
Evita calcoli manuali complessi: per differenze di tempo, lavora sempre in millisecondi e converti solo alla fine con Math.
Serializza solo dati utili: con JSON salva informazioni necessarie, evitando proprietà temporanee o calcolate che puoi ricostruire facilmente.
Ricorda che JSON non supporta funzioni o Date native: una data viene salvata come stringa. Quando la ricarichi, devi riconvertirla con new Date(...).

Un errore comune è pensare che JSON.parse() ripristini automaticamente tutto lo stato dell’oggetto. In realtà, se dentro hai una data, dopo il parsing sarà solo una stringa. Per questo è importante progettare bene il formato dei dati e prevedere una fase di ricostruzione.

Riepilogo

In questo tutorial abbiamo visto come combinare Math, Date e JSON per costruire un convertitore di eventi e promemoria. È un esempio semplice, ma molto vicino a casi d’uso reali.

Date ci permette di leggere e confrontare date in modo affidabile.
Math ci aiuta a trasformare i millisecondi in giorni, ore e minuti leggibili.
JSON ci consente di salvare, trasmettere e recuperare i dati in modo standard.

Questa combinazione è perfetta per applicazioni che devono mostrare scadenze, pianificazioni, eventi futuri o dati temporali in generale. Se impari a usare bene questi tre oggetti globali, avrai una base solida per costruire funzionalità molto più avanzate.

Approfondisci con risorse ufficiali

MDN Web Docs - Math: documentazione completa sulle funzioni matematiche native di JavaScript.
MDN Web Docs - Date: guida ufficiale per creare, leggere e manipolare date e orari.
MDN Web Docs - JSON: riferimento per JSON.stringify() e JSON.parse().
MDN Web Docs - Intl.DateTimeFormat: utile per formattare date in base alla lingua e al paese.

Se vuoi fare un passo avanti, prova a estendere questo esempio con un’interfaccia HTML: aggiungi un input data, un pulsante “calcola”, e visualizza il risultato in tempo reale. È un ottimo esercizio per consolidare l’uso pratico di Math, Date e JSON in JavaScript.

Add as preferred source on Google