Hello beautiful peoples!
I quitted smoking on 31st May 2022. Since wife’s birthday was coming I’ve decided it will be my gift for her. Cold turkey. Trust me when I say – it was not easy for me. It was necessary for many reasons however. The choice wasn’t mine anymore. There was only one option – do it. Today when I was working on revamping my digital corner of the woods I thought it would be a good idea to add a counter that reminds me how long it’s been since I had a puff. I am completely useless when it comes to coding BUT I am learning and sometimes when I am presented with a code I can modify it to make it look the way I want it to look.
So I started DuckDuckGoing in a search for people with similar experiences thinking that if they shared their code I will grab it and I will modify it and add to my widgets bar. After a while I abandoned this route as I thought of another way of getting it done. An experiment. I have decided to ask ChatGPT for help. I started a chat and asked it for a HTML code that counts time from 31st May 2022. It provided me with one. It was not great so I asked to re-generate it and added some conditions. Few attempts later it spat out a code that I could work with so I modified it. Here is the “final” (at least for now) version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cigarette free since:</title>
<style>
body {
}
.title-bar {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: #444444;
border-radius: 3px;
color: #eeeeee;
padding: 3px;
font-size: 14px;
}
.warning-bar {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: #fff43a;
border-radius: 3px;
font-weight:bold;
font-size: 18px;
color: #eeeeee;
padding: 3px;
font-size: 14px;
}
.counter {
text-align: center;
font-size: 18px;
font-weight:bold;
margin: 20px;
padding: 5px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="title-bar">
Cigarette free since:
</div>
<div class="counter">
<span id="countdown"></span>
</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("May 31, 2022 00:00:00").getTime();
// Update the countdown every second
var countdownElement = document.getElementById("countdown");
var x = setInterval(function() {
var now = new Date().getTime();
var distance = now - countDownDate;
// Calculate days, hours, minutes, and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the countdown
countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
</script>
</body>
<div class="warning-bar">
<a href="https://www2.hse.ie/living-well/quit-smoking/" target="_blank">Quit smoking today!</a>
</div>
</html>Is it ugly? Yes, yes it is… but does it work as intended? Yes, yes it does…
Fair play OpenAI. Fair play indeed…
Catch you on the flip side,
AndrzejL
