In this code, we use a simple HTML, CSS, and JAVASCRIPT language. The CSS [Cascading Style Sheet] was a full-color vision of the project in the (#) symbol which contains the ID of the HTML elements, then the (.) symbol which contains the class of the HTML elements. the javascript code was used for the countdown time. It has an eval() function. If you use the eval(), you must use the return function, otherwise the eval() will not work properly.
This code has executed an example of a product for sale page, but it has different it has functions buttons also when the user clicks the time button once it shows the countdown backward and again the button is clicked the countdown timer is hidden.There have four different colors, if any of the color boxes was clicked then the watch strap color was changed. In this project, we use the Montserrat Sans Serif font family which shows clear text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmartWatch-project</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header id="header-bar">
<img id="header-img" src="https://pnggrid.com/wp-content/uploads/2021/05/Amazon-Logo-1024x426.png" alt="logo">
</header>
<main>
<div id="content-wrapper">
<div id="countdown-side">
<div id="timmer-wrapper"><p id="timmer"></p></div>
<img id="watch" src="https://i.imgur.com/Mplj1YR.png" alt="smartestwatch">
</div>
<div id="rightside-wrapper">
<div id="right-side">
<h1>FitBit 19-the smartest watch</h1>
<p id="dec">A smartwatch is a wearable computing device that closely resembles a wristwatch or other time-keeping device. In addition to telling time, many smartwatches are Bluetooth-capable. The watch becomes a wireless Bluetooth adaptor capable of extending the capabilities of the wearer's smartphone to the watch.</p>
</div>
<div id="color-selection">
<h2>select colour</h2>
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<span id="item-4"></span>
</div>
<div id="features-btn">
<h3>features</h3>
<button id="btn-time" onclick="myFunction()" >time</button>
</div>
<button id="btn-primary" >BUY NOW </button>
</div>
</div>
</main>
<script src="/index.js"></script>
</body>
</html>body{
background-color: white;
margin: 0;
padding: 0;
text-transform: capitalize;
}
header{
background-color:black;
margin: auto;
padding: 30px;
display: block;
}
#header-img{
width: 100px;
position: absolute;
left: 46%;
top: 10px;
}
/* Left side styles*/
#content-wrapper{
display:flex;
flex-direction: row;
justify-content: center;
padding: 20px;
margin: 0 auto;
margin-left:-100px;
}
#watch{
width: 600px;
height: 500px;
}
#timmer{
position: absolute;
top: 51%;
left:18%;
color: white;
font-size: 28px;
font-weight: 600;
}
/*Right hand side designing stat*/
#rightside-wrapper{
display: flex;
flex-direction: column;
margin-top: 40px;
}
#right-side{
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.9px;
font-weight: 200;
font-size: 12px;
}
#dec{
font-size: 12px;
font-family:'Montserrat',sans-serif;
font-weight: 100;
letter-spacing: 0.9px;
color:gray;
margin-right:10%;
}
#color-selection{
font-family: 'Montserrat',sans-serif;
font-size: 16px;
font-weight: 100;
}
#color-selection span{
box-sizing: border-box;
border-radius: 7px;
border: 1px solid black;
padding: 10px;
padding-right: 40px;
margin-left: 10px;
}
#item-1{
background-color: #23211f;
}
#item-2{
background-color: #ca3d22 ;
}
#item-3{
background-color:#8a5362;
}
#item-4{
background-color: #e9c7be;
}
/* button styles*/
#btn-time{
box-sizing: border-box;
padding:14px 20px;
text-transform: uppercase;
margin-left: 24px;
margin-right: 39%;
margin-top: 30px;
background-color:lightgray;
border: none;
border-radius: 7px;
font-size: 16px;
font-weight: bold;
}
#btn-primary{
box-sizing: border-box;
padding:14px 20px;
text-transform: uppercase;
margin-left: 24px;
margin-right: 39%;
margin-top: 30px;
background-color:rgb(255, 140, 0);
border: none;
border-radius: 7px;
font-size: 16px;
font-weight: bold;
}
var countdownTimmer = new Date("Oct 10,2024 24:00:00").getTime();
var backImgElement=document.getElementById("watch");
var x= setInterval(function(){
var now = new Date().getTime();
var distance = countdownTimmer - now;
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));
document.getElementById("timmer").innerHTML = hours +":"+ minutes +":" + seconds;
},1000);
//color selection part//
var newItem1 = document.getElementById("item-1");
var newItem2 = document.getElementById("item-2");
var newItem3 = document.getElementById("item-3");
var newItem4 = document.getElementById("item-4");
newItem1.onclick=function(){
var backImgPath='https://i.imgur.com/iOeUBV7.png';
backImgElement.src = backImgPath;
};
newItem2.addEventListener('click',function(){
var backImgPath='https://i.imgur.com/PTgQlim.png';
backImgElement.src = backImgPath;
});
newItem3.addEventListener('click',function(){
var backImgPath='https://i.imgur.com/xSIK4M8.png';
backImgElement.src = backImgPath;
});
newItem4.addEventListener('click',function(){
var backImgPath='https://i.imgur.com/Zygu7I3.png';
backImgElement.src = backImgPath;
});
var timeElement = document.getElementById("btn-time");
function myFunction2() {
var x = document.getElementById("timmer-wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};