Embedded Files
TITLE : JavaScript Tutorial | Landing Page | This Page Changes With Respect To Time
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dynamic Home Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="popup">
<header>
<h3>Welcome</h3>
<i class="fa fa-times" aria-hidden="true" id="close"></i>
</header>
<input id="uname" placeholder="Username" maxlength="20" required>
<button class="submit">Next</button>
</div>
<div class="time">
</div>
<div class="greeting"></div><a href="#" id="link">Enter Name</a>
<div class="username"></div>
<script src="app.js"></script>
</body>
</html>
CSS :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
user-select: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.popup {
width:25%;
height: 45%;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 5px;
box-shadow: 0 0 25px -3px rgba(0,0,0,0.3);
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transition: 0.3s;
transform: translate(-50%,-250%);
}
header {
width: 85%;
padding: 25px 0 0 0;
display: flex;
justify-content: space-between;
}
h3,#close {
font-size: 1.3rem;
color:#0D47A1;
}
#close {
padding: 7px;
background: #e1e1e1;
transition: 0.3s;
border-radius: 5px;
}
#close:hover {
background:#ff4860;
color: #fff;
border-radius: 5px;
}
#uname {
width: 85%;
padding: 8px 16px;
margin: 25px 0;
border: 2px solid #03A9F4;
outline: none;
border-radius: 5px;
background: #E1F5FE;
color: #0D47A1;
font-size: 1rem;
}
::placeholder {
color: #03A9F4;
}
.submit {
padding: 8px 0;
width: 85%;
background: #03A9F4;
border-radius: 5px;
transition: 0.3s;
color: #fff;
font-size: 1rem;
border: none;
outline: none;
}
.submit:hover{
background: #0D47A1;
}
.time,.greeting,.username {
font-size: 5.5rem;
padding: 8px 16px;
background: #0D47A1;
color: #fff;
margin: 8px 0;
}
.greeting {
font-size: 2.2rem;
}
.username {
font-size: 1.6rem;
text-transform: capitalize;
}
#link {
color:#fff;
outline: none;
transition: 0.3s;
font-size: 1rem;
text-decoration-color: #ff4860;
background-color: #03A9F4;
padding: 8px 16px;
}
#link:hover {
text-decoration: underline;
}
JavaScript :
function timeCall(){
var time = new Date(),
hour = time.getHours(),
min = time.getMinutes(),
sec = time.getSeconds();
hour = hour%12||12;
let addAmPm = true;
let ampm = hour <=12 ? 'PM' : 'AM';
var timeBox = document.querySelector('.time');
timeBox.innerHTML = `${addZero(hour)}:${addZero(min)}:${addZero(sec)}
${addAmPm ? ampm : ''}`;
setTimeout(timeCall , 1000);
}
timeCall();
function addZero(num){
return ((parseInt , num) < 10? '0' : '') + num;
}
var link = document.getElementById('link');
var popup = document.querySelector('.popup');
var close = document.getElementById('close');
var next = document.querySelector('.submit');
link.onclick = function() {
popup.style.transform = "translate(-50%,-50%)";
popup.style.opacity = "1";
}
close.onclick = function() {
popup.style.transform = "translate(-50%,-250%)";
popup.style.opacity = "0";
}
next.onclick = function() {
var uname = document.getElementById('uname');
var username = document.querySelector('.username');
if (uname.value === '') {
alert('Please Enter Your Name');
}
else {
username.innerHTML = uname.value;
popup.style.transform = "translate(-50%,-250%)";
popup.style.opacity = "0";
username.style.display = "block";
}
}
window.onload = function() {
var username = document.querySelector('.username');
username.style.display = "none";
}
function changeBg() {
var time = new Date(),
hour = time.getHours();
var greeting = document.querySelector('.greeting');
if(hour<12) {
document.documentElement.style.background = "url('images/morning.jpg')";
document.documentElement.style.backgroundSize = "100% 100%";
greeting.innerHTML= 'Good Morning' ;
}
else if (hour<18) {
document.documentElement.style.background = "url('images/afternoon.jpg')";
document.documentElement.style.backgroundSize = "100% 100%";
greeting.innerHTML= 'Good Afternoon' ;
}
else if (hour<20) {
document.documentElement.style.background = "url('images/evening.jpg')";
document.documentElement.style.backgroundSize = "100% 100%";
greeting.innerHTML= 'Good Evening' ;
}
else {
document.documentElement.style.background = "url('images/night.jpg')";
document.documentElement.style.backgroundSize = "100% 100%";
greeting.innerHTML= 'Good Night';
}
}
changeBg();
Page updated
Google Sites
Report abuse