Scribd
Upload
3 views

Function to create and style the t

The document contains a JavaScript function that creates a styled time display for a webpage. It includes CSS for styling the display with a specific font and centers it on the page. The time updates every second in a 24-hour format without AM/PM, using a setInterval function.

Uploaded by

prasad.komatipelli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

Function to create and style the t

The document contains a JavaScript function that creates a styled time display for a webpage. It includes CSS for styling the display with a specific font and centers it on the page. The time updates every second in a 24-hour format without AM/PM, using a setInterval function.

Uploaded by

prasad.komatipelli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

// Function to create and style the time display

function createSnapchatTimeDisplay() {
// Create the time display element
const timeDiv = document.createElement('div');
timeDiv.id = 'time';
document.body.appendChild(timeDiv);

// Add CSS styling via JavaScript


const style = document.createElement('style');
style.innerHTML = `
@font-face {
font-family: 'SF Pro Display Semibold Italic';
src: url('path-to-your-font/SFProDisplay-SemiboldItalic.ttf')
format('truetype');
}

body {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

#time {
font-family: 'SF Pro Display Semibold Italic', sans-serif;
font-size: 80px;
font-weight: 600;
font-style: italic;
color: #000;
}
`;
document.head.appendChild(style);
}

// Function to update the time every second


function updateTime() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();

// Format hours and minutes (24-hour format without AM/PM)


hours = hours < 10 ? "0" + hours : hours; // Add leading zero to hours
minutes = minutes < 10 ? "0" + minutes : minutes; // Add leading zero to
minutes

// Update the displayed time


const timeString = `${hours}:${minutes}`;
document.getElementById('time').textContent = timeString;
}

// Initialize the display and start the timer


createSnapchatTimeDisplay();
setInterval(updateTime, 1000);
updateTime();

You might also like