Clock App Using HTML CSS and JavaScript

By
Asif Ali
-
0

Hey everybody today we are going to create a Clock App Using HTML CSS and JS. It’s a full app inside that has many features that help us to display the current time and also has day and night mode features, displays the current days of the year, week number, and so on. So, I’m going to teach you how to use HTML CSS, and JavaScript to create.

However, It’s a very helpful project for everyone who wants to improve the logic to create a project using HTML CSS, and JavaScript. I made many projects, It’s one of the best projects that I made.

But, before working on the project you know HTML CSS, and JavaScript, then you will be able to understand everything that is used to create a project.

Clock App Using HTML CSS and JS

In the world of web development, creating your applications is a rewarding experience that allows you to blend creativity with functionality. In this tutorial, we will guide you through the process of building a clock app from scratch using the trifecta of web technologies: HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a custom clock that not only tells the time but also showcases your coding skills.

Clock App Using HTML CSS and JavaScript

Before moving the codes, you can watch the tutorial that I made. So, you learn everything from scratch practically, after that you can check it the source codes mentioned below.

I hope you’ve watched till to end of the video, and hope you’ve learned something new from the tutorial. I know this tutorial is helpful and beneficial for you let’s look at the source codes that are used inside the project.

You May Also Like:

HTML Structure

Start by setting up the basic HTML structure for your clock app. Create a container element to hold your clock and placeholders for displaying the hours, minutes, and seconds. This foundational structure will serve as the canvas for your design and functionality.

 <header>
      <div class="container">
        <div class="timer_wrapper">
          <div class="clock_timer--content">
            <p>
              “The science of operations, as derived from mathematics more
              especially, is a science of itself, and has its own abstract truth
              and value.”
            </p>
            <p>Ada Lovelace</p>
          </div>

          <div class="clock_timer--timmer">
            <div class="img_txt_content">
              <!-- <img src="/assets/desktop/icon-sun.svg" alt="" />
              <p>GOOD MORNING, IT'S CURRENTLY</p> -->
            </div>
            <div class="timmer">
              <h2 class="time">11:37</h2>
              <p class="time-zone">BST</p>
            </div>
            <div class="timer_country">
              <p>IN LONDON,UK</p>
              <button type="button" class="btn">
                More <img src="assets/desktop/icon-arrow-up.svg" alt="" />
              </button>
            </div>
          </div>

          <div class="hidden_content hidden">
            <div class="container">
              <div class="timer_data">
                <div class="left_content">
                  <p>CURRENT TIMEZONE</p>
                  <h2 class="timeZHidden">Europe / London</h2>
                  <p>Day of the year</p>
                  <h2 class="y_days">295</h2>
                </div>
                <div class="right_content">
                  <p>Day of the week</p>
                  <h2 class="w_day">5</h2>
                  <p>Week Number</p>
                  <h2 class="w_number">42</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

CSS Styling

Now, let’s bring your clock to life with some stylish CSS. Apply aesthetic styles to the container, choose an appealing font for your clock’s display, and experiment with colors and positioning to achieve a visually pleasing design. Remember, the CSS is where you give your clock its unique personality, so don’t hesitate to get creative.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

:root {
  --black-color: #000000;
  --dark-black: #303030;
  --white-color: #ffffff;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "poppins", sans-serif;
  background: url("/assets/desktop/bg-image-daytime.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

header {
  height: 100vh;
  position: relative;
}

header::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

header.add {
  overflow: hidden;
}

header.add .clock_timer--content {
  display: none;
}

header.add .clock_timer--timmer {
  position: absolute;
  top: 150px;
  left: 300px;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 4rem;
}

.timer_wrapper {
  width: 100%;
  width: 10;
}

.clock_timer--content {
  position: absolute;
  top: 50px;
  left: 300px;
  color: var(--white-color);
}

.clock_timer--content p {
  width: 50%;
  font-size: 1.1rem;
  line-height: 1.8;
}

.clock_timer--timmer {
  position: absolute;
  bottom: 100px;
  left: 300px;
}

.img_txt_content {
  display: flex;
  color: var(--white-color);
}

.img_txt_content p {
  font-size: 1.2rem;
  margin-left: 0.5rem;
  letter-spacing: 1px;
}

.timmer {
  color: var(--white-color);
  display: flex;
  align-items: center;
}

.timmer h2 {
  font-size: 10rem;
  letter-spacing: 6px;
  font-weight: 600;
}

.timmer p {
  font-size: 2rem;
  margin-top: 60px;
}

.timer_country {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  color: var(--white-color);
  width: 1440px;
}

.timer_country p {
  letter-spacing: 4px;
}

.timer_country .btn {
  outline: none;
  border: none;
  font-family: inherit;
  padding: 0.2rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 0;
}

.timer_country .btn:active {
  transform: scale(0.98);
}

.hidden_content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  color: var(--black-color);
  overflow-x: hidden;
}

.container.active .hidden_content::before {
  background-color: var(--black-color);
  opacity: 0.85;
}

.container.active .hidden_content {
  color: var(--white-color);
}

.hidden_content::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #979797;
  opacity: 0.95;
}

.hidden_content p {
  color: var(--dark-black);
}

.timer_data {
  position: absolute;
  top: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 4rem;
  width: 100%;
}

.left_content {
  display: flex;
  flex-direction: column;
}

.timer_data p {
  letter-spacing: 4px;
}

.timer_data h2 {
  font-size: 4rem;
  margin-bottom: 2rem;
}

.hidden_content.hidden {
  display: none;
}

JavaScript Functionality

The heart of any clock app is its ability to display the current time dynamically. Using JavaScript, tap into the Date object to fetch real-time information. Leverage functions setInterval to ensure that your clock continuously updates without requiring a manual refresh. This step is where the magic happens, transforming your static HTML and CSS into a dynamic, living clock.

"use strict";

const timeEl = document.querySelector(".time");
const timeZEl = document.querySelector(".time-zone");
const btnEl = document.querySelector(".btn");
const headerEl = document.querySelector("header");
const hiddenEl = document.querySelector(".hidden_content");
const containerEl = document.querySelector(".container");
const imgTxtContent = document.querySelector(".img_txt_content");

// days number
const timeZHiddenEl = document.querySelector(".timeZHidden");
const yDaysEl = document.querySelector(".y_days");
const wDaysEl = document.querySelector(".w_day");
const wNumberEl = document.querySelector(".w_number");

function updateTimer() {
  let date = new Date();
  let options = { timeZone: "Europe/London" };

  const eastCoastTime = date.toLocaleTimeString("en-GB", options);

  // day and night
  const isDaytime = eastCoastTime >= 6 && eastCoastTime < 18;
  let html = "";
  imgTxtContent.innerHTML = "";

  if (isDaytime !== true) {
    html = `<img src="/assets/desktop/icon-sun.svg" alt="" />
    <p>GOOD EVENING, IT'S CURRENTLY</p>`;
    containerEl.classList.remove("active");
  } else {
    html = `<img src="/assets/desktop/icon-moon.svg" alt="" />
    <p>GOOD MORNING, IT'S CURRENTLY</p>`;
    document.body.style.backgroundImage =
      "url('/assets/desktop/bg-image-nighttime.jpg')";
    containerEl.classList.add("active");
  }

  imgTxtContent.insertAdjacentHTML("afterbegin", html);

  // display time
  timeEl.innerHTML = eastCoastTime.slice(0, 5);

  // display time zone
  timeZHiddenEl.innerHTML = options.timeZone;
}

setInterval(() => {
  updateTimer();
}, 6000);

btnEl.addEventListener("click", (e) => {
  headerEl.classList.toggle("add");

  if (e.target) {
    if (headerEl.classList.contains("add")) {
      hiddenEl.classList.remove("hidden");
    } else {
      hiddenEl.classList.add("hidden");
    }
  }
});

updateTimer();
dayNumbersCal(wDaysEl, wNumberEl, yDaysEl);

function dayNumbersCal(d, w, y) {
  const currentDate = new Date();
  const startDate = new Date(currentDate.getFullYear(), 0, 1);
  const days = Math.floor((currentDate - startDate) / (24 * 60 * 60 * 1000)); // years days

  const dayofyear = (date) =>
    Math.floor(
      (date - new Date(date.getFullYear(), 0, 0)) / (24 * 60 * 60 * 1000),
    );
  w.innerHTML = Math.ceil(days / 7);
  d.innerHTML = currentDate.getDay();
  y.innerHTML = dayofyear(new Date());
}

Custom Features

To make your clock app stand out, consider adding custom features. For instance, you can implement a background that changes based on the time of day, giving your users a more immersive experience. Another idea is to display additional information, such as the current date or time zone, to enhance the overall user experience.

Responsive Design

In today’s multi-device world, ensuring that your clock app looks good on both desktop and mobile devices is essential. Implement responsive design principles using media queries in your CSS to adjust the layout and styling based on the screen size. This step ensures that your clock is accessible and visually appealing across a variety of platforms.

Testing and Debugging

Before releasing your clock app into the wild, rigorously test it on different browsers to ensure cross-browser compatibility. Use browser developer tools to debug any issues that may arise during testing. This meticulous step is crucial to delivering a seamless user experience and ironing out any wrinkles in your code.

Conclusion:

Congratulations! You’ve successfully built your own clock app using HTML, CSS, and JavaScript. This project not only provides a practical application but also serves as a canvas for expressing your coding creativity. Whether you’re a beginner or an experienced developer, this tutorial equips you with the skills to create an interactive and visually appealing web-based clock. The journey doesn’t end here; feel free to explore additional features and enhancements to make your clock truly one-of-a-kind. Happy coding!

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.