Web-Development Html CSS JavaScript Minor Project (CSE)

Mini projects for CSE in web development

Hello Friends I am sharing with you Mini Project by  using Html CSS, JavaScript.. I know This project is not for the best Mini Project.. Note:- This project for those who want to try 1st simple mini project using Html, CSS, JavaScript. 


mini projects for cse in web development

1.HTML

2.CSS

3. JavaScript


<!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>Analog Watch Project</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <div id="clockContainer">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>
</html>

2. CSS:-

*{
    margin0;
    padding0;
}
#clockContainer{
    positionrelative;
    height40vw;
    width40vw;
    backgroundurl(clk2.gifno-repeat;
    background-size100%;
    border1px solid rebeccapurple;
    margin0 auto;
}
#hour#minute#second {
    backgroundblack;
    border-radius10px;
    transform-originbottom;
}
#hour{
    width2%;
    height24%;
    positionabsolute;
    top26%;
    left48.8%;
}
#minute{
    width1%;
    height28%;
    backgroundblack;
    positionabsolute;
    top22%;
    left49.3%;
}
#second{
    width0.5%;
    height34%;
    backgroundblack;
    positionabsolute;
    top16%;
    left49.6%;
}

3. JavaScript:-

setInterval(() => {
    d = new Date();
    htime = d.getHours();
    mtime = d.getMinutes();
    stime = d.getSeconds();
    hrotation = 30*htime + mtime/2;
    mrotation = 6*mtime;
    srotation = 6*stime;

    hour.style.transform = `rotate(${hrotation}deg)`;
    minute.style.transform = `rotate(${mrotation}deg)`;
    second.style.transform = `rotate(${srotation}deg)`;
}, 1000);

Result:-


mini projects for cse in web development



Post a Comment

0 Comments