Skip to content

Instantly share code, notes, and snippets.

@carlosazaustre

carlosazaustre/app.js

Created April 6, 2023 14:54
Show Gist options
  • Save carlosazaustre/7c10ad82321df7a8a9364cbd45198927 to your computer and use it in GitHub Desktop.
Save carlosazaustre/7c10ad82321df7a8a9364cbd45198927 to your computer and use it in GitHub Desktop.
Download ZIP
Doge.js
Raw
app.js
const logo = document.getElementById("logo");
let currentIndex = 0;
const keySequence = [
"ArrowUp",
"ArrowUp",
"ArrowDown",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"ArrowLeft",
"ArrowRight",
"KeyB",
"KeyA",
];
document.addEventListener("keydown", (event) => {
if (event.code === keySequence[currentIndex]) {
currentIndex++;
if (currentIndex === keySequence.length) {
logo.style.transform = "rotate(360deg)";
currentIndex = 0;
}
} else {
currentIndex = 0;
}
});
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doge.js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="./logo.png" alt="logo" id="logo" />
</div>
<script src="./app.js"></script>
</body>
</html>
Raw
style.css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
position: relative;
}
#logo {
width: 300px;
height: auto;
transition: transform 1s ease;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment