animation color
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container">
<div class="hex-colors">
<h1>Click The Button below to display the hex code of random color</h1>
<h2>the hex code of the a color is # <span id="hex-colors">00000</span></h2>
<button onclick="changeColor()" type="button" class="btn btn-primary">click me</button>
</div>
</div>
</div>
</div>
<script src="../javascript/script.js"></script>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
body{
font-family: "Comfortaa", sans-serif;
}
.container{
border: 2px solid black;
width:95%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.hex-colors{
border: 1px solid black;
text-align: center;
}
.hex-colors{
font-size: 2rem;
text-transform: uppercase;
animation: colorchange 5s infinite alternate;
}
.hex-colors h2{
border: 1px solid black;
font-size: 2rem;
margin-top: 15%;
}
@keyframes colorchange{
0%{
color: indigo;
}
20%{
color: violet;
}
40%{
color: red;
}
60%{
color: yellow;
}
80%{
color: green;
}
100%{
color: blue;
}
}
@media(max-width:480px);
.hex-colors h1{
font-size: 1.5rem;
}
.hex-colors h2{
font-size: 1.5rem;
}
js
function changeColor(){
var hex_numbers = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
}
var hexcode = '';
for(var i=0;i < 6;i++){
var random_index = Math.floor(Math.random())
}
Comments
Post a Comment