And when I tried this (both in the snippet here as well as in jsFiddle), I always saw avatarSize as 0 - did you ever see it greater than that? Perhaps this is because the viewport's initial containing block has no width.
##Other feedback
let circle = document.querySelector('.circle');
In this case, there are two DOM lookups for the same element. Instead of doing this, the value for `startText` could be accessed from `circle`:
const circle = document.querySelector('.circle');
const startText = circle.innerHTML = "click";
The same is true for `avatarSize` - it can be accessed via `avatar`. And it doesn't need to be re-declared inside `endOfAvatar()` - just remove the keyword `let`.
Additionally, `titleContainer` points to the same thing as `startText` so those can be reduced to one variable.
- When using
parseInt(): "always specify a radix."1 (i.e. 2nd parameter - typically 10)
- useUse prefix increment in
frame() to increment before using a variable. Instead of the following two lines:
pos++;
avatar.style.marginLeft = pos + "px";
Just use the prefix increment to combine the lines:
avatar.style.marginLeft = ++pos + "px";
- Wrap the code in a function that is executed once the DOM is ready (e.g. using
document.addEventListener() for the DOMContentLoaded event, or at least an IIFE.
document.addEventListener('DOMContentLoaded', function() {
// Init .innerHTML for circle
const circle = document.querySelector('.circle');
circle.innerHTML = "click";
let x = 0;
const progressContainer = document.querySelector('.progress-container');
const avatar = document.querySelector('.avatar');
const avatarSize = avatar.clientWidth;
console.log('avatarSize', avatarSize);
const totalLevels = 5;
// Listen for events
circle.addEventListener('click', mainClickMaze);
// Move the avatar based on its previous location
function moveAvatarForward(moveToEnd = false) {
let pos = parseInt(avatar.style.marginLeft, 10) || 0;
const progressContainerWidth = progressContainer.clientWidth;
const sum = Math.round(progressContainerWidth / totalLevels);
let movePos = pos + sum;
if (moveToEnd) {
movePos = progressContainerWidth - avatarSize;avatar.clientWidth;
}
requestAnimationFrame(frame);
function frame() {
if (pos != movePos) {
avatar.style.marginLeft = ++pos + "px";
requestAnimationFrame(frame);
}
}
}
function mainClickMaze(event) {
let click = parseInt(circle.innerHTML, 10) || 0;
circle.innerHTML = ++click;
if (click == totalLevels) {
// Remove event listener
circle.removeEventListener('click', mainClickMaze);
circle.innerHTML = 'Disabled';
}
if (click == 1) {
progressContainer.style.display = 'flex';
} else {
moveAvatarForward(click == totalLevels);
}
}
});
html,
body {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 33.3vh;
margin-bottom: 33.3vh;
}
.circle {
display: flex;
width: 20vw;
height: 20vw;
background-color: red;
border-radius: 50%;
color: white;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24px;
cursor: pointer;
}
.progress-container {
position: fixed;
display: none;
align-items: center;
width: 90%;
height: 2px;
background-color: red;
bottom: 5vh;
}
.avatar {
width: 2vw;
height: 2vw;
background-color: blue;
border-radius: 50%;
}
<div class="container">
<div class="circle"></div>
<div class="progress-container">
<div class="avatar"></div>
</div>
</div>
