Een countdown timer op je website

Je kunt heel simpel een countdown timer maken met behulp van een paar formules in Google Sheets.
Deze is vervolgens via een iFrame te embedden in een website of op Google Sites.

Om zo'n counter te maken ga je als volgt te werk:

• Plaats in cel A1 de datum en het tijdstip waar naartoe je wilt aftellen in de notatie, bijvoorbeeld:
  15-3-2019 0:00:00 (Noot*)
• Voeg de cellen B1 - D1 samen en zet daarin een titel
• Zet in cel B2: =INTEGER(A1-NU())
• Zet in cel C2: =UUR(A1-NU())
• Zet in cel D2: =MINUUT(A1-NU())
• Zet in cel B3: =ALS(B2>1;"Dagen";"Dag")
• Zet in cel D3: =ALS(C2>1;"Uren";"Uur")
• Zet in cel C3: =ALS(D2>1;"Minuten";"Minuut")
• Als je alles achter elkaar wilt hebben, voeg dan de cellen B4 - D4 samen en zet daarin de volgende formule:
  =INTEGER(A1-NU())&" "&ALS(days(A1;NU())>1;"Dagen";"Dag")&" : "&UUR(A1-NU())&" "&ALS(UUR(A1-NU())>1;"Uren";"Uur")&" : "&MINUUT(A1-NU())&" "&ALS(MINUUT(A1-NU())>1;"Minuten";"Minuut")
• Maak de cellen naar believen op met achtergrondkleur en fontgrootte

Klaar is Kees!
Het resultaat kan er dan uitzien zoals hieronder. Dit is geen plaatje maar embedcode:



*) Wil je aftellen naar een jaarlijks terugkerende gebeurtenis zoals bijvoorbeeld mijn verjaardag, gebruik dan als formule in cel A1: =DATUM(JAAR(VANDAAG());4;5)
Daarbij staat de 4 voor de maand en de vijf voor de dag.

Embedden
Als je de timer wilt embedden op een website moet je de spreadsheet eerst publiceren.

• Ga naar Bestand en klik op: Publiceren op internet
• Kies dan voor Invoegen, Blad 1

Je krijgt dan code aangeboden die er ongeveer zo uitziet:

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQW-ue5Jxve1kGB7YBW2plDqedVxWNZv5YX0WEalGjpEXyfgd3gjDNtPct-e2xvhh3QdH8RQGFsIHRe/pubhtml?gid=0&single=true&widget=true&headers=false"></iframe>

Omdat je slechts een gedeelte van het blad wilt laten zien, namelijk de cellen B1 t/m D 4 moet je de embedcode nog een beetje aanpassen:

<iframe frameborder="0" width="300" height="140" src="https://docs.google.com/spreadsheets/u/1/d/e/2PACX-1vQW-ue5Jxve1kGB7YBW2plDqedVxWNZv5YX0WEalGjpEXyfgd3gjDNtPct-e2xvhh3QdH8RQGFsIHRe/pubhtml?gid=0&single=true&range=B1:G4&chrome=false"></iframe>

Je ziet dat ik de hoogte en de breedte van het iFrame definieer en dat ik de range toevoeg: B1:G4.
Ook de toevoeging chrome=false is belangrijk. Hoogte en breedte moet je een beetje uitvogelen en is afhankelijk van de breedte en hoogte van de cellen in je spreadsheet.

Natuurlijk heb ik dit niet allemaal zelf verzonnen, maar dankbaar gebruik gemaakt van de uitleg die ik vond op InfoInspired.

Te moeilijk:
Vind je dit allemaal veel teveel gedoe, dan kan je natuurlijk gebruikmaken van een site zoals https://www.tickcounter.com/ Hou er dan wel rekening mee dat je geen invloed hebt op de vormgeving en ik denk dat Google Sites deze code van derden ook niet zal accepteren...