Html
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button type="submit" id="btn">click here to show time </button>
<p id="t"></p>
<script src="script.js"></script>
</body>
</html>
javaScript
document.addEventListener('DOMContentLoaded',function()
{
const btn = document.getElementById('btn');
btn.addEventListener('click', function(){
OnChange();
});
});
function OnChange(){
document.getElementById('t').innerHTML=Date();
}
style css
body{
padding: 25px;
}
.title {
color: #5C6AC4;
}
#btn{
background-color:orange;
border: none;
border-radius: 12px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#btn:hover{
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
p{
font-size: 24px;
color: blue;
}
Top comments (0)