Comment créer un mini widget du temps et la date avec HTML CSS & JS.
198
1
Mukaz
Jan,01,1970
Salut les gars! avez-vous déjà utilisé des widgets pour afficher l’heure et la date sur votre site web ou votre application mobile ? Si vous êtes intéressé à créer votre propre widget, alors vous êtes au bon endroit. Dans cet article, nous allons vous montrer comment créer un mini widget du temps et de la date en utilisant ces trois technologies(HTML ,CSS & JS.
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time & Date Widget</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="clock-container"></div>
<div class="date-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Code CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1a1a1a;
}
.container {
width: 21.87em;
display: grid;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
color: #ffffff;
align-items: center;
grid-template-columns: 8fr 4fr;
background-color: #1e90ff;
border-radius: 0.5em;
}
.clock-container {
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
font-size: 3.75em;
margin-left: 0.2em;
border-radius: 0.1em;
padding: 0.2em 0;
}
.date-container {
padding: 1em 0;
background-color: #1e90ff;
color: #ffffff;
text-align: center;
border-radius: 0.5em;
}
.date-container span {
font-size: 2.5em;
}Code JavaScript
let dateContainer = document.querySelector(".date-container");
let clockContainer = document.querySelector(".clock-container");
const weekdays = [
"Dimanche",
"Lundi",
"Mardi",
"Mercredi",
"Jeudi",
"Vendredi",
"Samedi",
];
const monthNames = [
"Janvier",
"Fevrier",
"Mars",
"Avril",
"Mais",
"juin",
"Juillet",
"Aout",
"Septembre",
"Octobre",
"Novembre",
"Decembre",
];
const dateClock = setInterval(function dateTime() {
const today = new Date();
let date = today.getDate();
let day = weekdays[today.getDay()];
let month = monthNames[today.getMonth()];
let hours = today.getHours();
let minutes = today.getMinutes();
minutes = minutes < 10 ? "0" + minutes : minutes;
dateContainer.innerHTML = `${day}
${date}
${month}
`;
clockContainer.innerHTML = `${hours}:${minutes}`;
}, 1000); 🙂Et voilà nous venons de créer ce beau min widget en utilisant ces trois technologies. N’hésitez pas à personnaliser le style et la fonctionnalité de votre widget pour le rendre unique et fonctionnel selon vos besoins, à la prochaine.
