Return to Question

// Init .innerHTML for circle
let startText = document.querySelector('.circle').innerHTML = "click";
let circle = document.querySelector('.circle');

var x = 0;
let titleContainer = document.querySelector('.circle');
let progressContainer = document.querySelector('.progress-container');
let avatar = document.querySelector('.avatar');
let avatarSize = document.querySelector('.avatar').clientWidth;
let totalLevels = 5;

// Listen for events
circle.addEventListener('click', mainClickMaze);

// Start position of smaller circle on progressContainer
function moveAvatarForward() {
  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  console.log(sum);

  requestAnimationFrame(frame);

  let pos = 0;

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}

// Move the avatar based on its previous location
function locationOfAvatar() {
  let pos = avatar.style.marginLeft;
  // Remove "px" from pos
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  let movePos = pos + sum;
  console.log(movePos);
  requestAnimationFrame(frame);

  function frame() {
    if (pos != movePos) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}


// Avatar gets moved to the end of the continer
function endOfAvatar() {
  let pos = avatar.style.marginLeft;
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

 // Get size of small circle in progressContainer so that avatarSize does not exceed the bounds of progressContainer
let avatarSize = document.querySelector('.avatar').clientWidth;

let progressContainerWidth = progressContainer.clientWidth;

let sum = progressContainerWidth - avatarSize;
  console.log(sum);

  requestAnimationFrame(frame);

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}



let click = 0;

function mainClickMaze(event) {
  titleContainer.innerHTML = ++click;
  console.log('click:', click)
  if (click == 1) {
    progressContainer.style.display = 'flex';
  } else if (click == 2) {
    moveAvatarForward();
  } else if (click == 3) {
    locationOfAvatar();
  } else if (click == 4) {
    locationOfAvatar();
  } else if (click == totalLevels) {
    // Remove event listener 
    circle.removeEventListener('click', mainClickMaze);
    titleContainer.innerHTML = 'Disabled';
    endOfAvatar();
  }
}

<div class="container">
    <div class="circle"></div>
    <div class="move-container">
      <div class="move-back user-click">Back</div>
      <div class="move-forward user-click">Forward</div>
    </div>
    <div class="progress-container">
      <div class="avatar"></div>
    </div>
</div>

// Init .innerHTML for circle
let startText = document.querySelector('.circle').innerHTML = "click";
let circle = document.querySelector('.circle');

var x = 0;
let titleContainer = document.querySelector('.circle');
let progressContainer = document.querySelector('.progress-container');
let avatar = document.querySelector('.avatar');
let avatarSize = document.querySelector('.avatar').clientWidth;
let totalLevels = 5;

// Listen for events
circle.addEventListener('click', mainClickMaze);

// Start position of smaller circle on progressContainer
function moveAvatarForward() {
  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  console.log(sum);

  requestAnimationFrame(frame);

  let pos = 0;

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}

// Move the avatar based on its previous location
function locationOfAvatar() {
  let pos = avatar.style.marginLeft;
  // Remove "px" from pos
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  let movePos = pos + sum;
  console.log(movePos);
  requestAnimationFrame(frame);

  function frame() {
    if (pos != movePos) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}


// Avatar gets moved to the end of the continer
function endOfAvatar() {
  let pos = avatar.style.marginLeft;
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

 // Get size of small circle in progressContainer so that avatarSize does not exceed the bounds of progressContainer
let avatarSize = document.querySelector('.avatar').clientWidth;

let progressContainerWidth = progressContainer.clientWidth;

let sum = progressContainerWidth - avatarSize;
  console.log(sum);

  requestAnimationFrame(frame);

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}



let click = 0;

function mainClickMaze(event) {
  titleContainer.innerHTML = ++click;
  console.log('click:', click)
  if (click == 1) {
    progressContainer.style.display = 'flex';
  } else if (click == 2) {
    moveAvatarForward();
  } else if (click == 3) {
    locationOfAvatar();
  } else if (click == 4) {
    locationOfAvatar();
  } else if (click == totalLevels) {
    // Remove event listener 
    circle.removeEventListener('click', mainClickMaze);
    titleContainer.innerHTML = 'Disabled';
    endOfAvatar();
  }
}

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;
}

.move-container {
  display: flex;
  margin-top: 5vh;
  font-size: 24px;
  display: none;
}

.move-back {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10vw;
  cursor: pointer;
  width: 10vw;
  padding: 10px;
  background-color: grey;
  border-radius: 25px;
  color: white;
}

.move-forward {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10vw;
  cursor: pointer;
  width: 10vw;
  padding: 10px;
  background-color: grey;
  border-radius: 25px;
  color: white;
}

.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="move-container">
      <div class="move-back user-click">Back</div>
      <div class="move-forward user-click">Forward</div>
    </div>
    <div class="progress-container">
      <div class="avatar"></div>
    </div>
</div>

// Init .innerHTML for circle
let startText = document.querySelector('.circle').innerHTML = "click";
let circle = document.querySelector('.circle');

var x = 0;
let titleContainer = document.querySelector('.circle');
let progressContainer = document.querySelector('.progress-container');
let avatar = document.querySelector('.avatar');
let avatarSize = document.querySelector('.avatar').clientWidth;
let totalLevels = 5;

// Listen for events
circle.addEventListener('click', mainClickMaze);

// Start position of smaller circle on progressContainer
function moveAvatarForward() {
  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  console.log(sum);

  requestAnimationFrame(frame);

  let pos = 0;

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}

// Move the avatar based on its previous location
function locationOfAvatar() {
  let pos = avatar.style.marginLeft;
  // Remove "px" from pos
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  let movePos = pos + sum;
  console.log(movePos);
  requestAnimationFrame(frame);

  function frame() {
    if (pos != movePos) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}


// Avatar gets moved to the end of the continer
function endOfAvatar() {
  let pos = avatar.style.marginLeft;
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

 // Get size of small circle in progressContainer so that avatarSize does not exceed the bounds of progressContainer
let avatarSize = document.querySelector('.avatar').clientWidth;

let progressContainerWidth = progressContainer.clientWidth;

let sum = progressContainerWidth - avatarSize;
  console.log(sum);

  requestAnimationFrame(frame);

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}



let click = 0;

function mainClickMaze(event) {
  titleContainer.innerHTML = ++click;
  console.log('click:', click)
  if (click == 1) {
    progressContainer.style.display = 'flex';
  } else if (click == 2) {
    moveAvatarForward();
  } else if (click == 3) {
    locationOfAvatar();
  } else if (click == 4) {
    locationOfAvatar();
  } else if (click == totalLevels) {
    // Remove event listener 
    circle.removeEventListener('click', mainClickMaze);
    titleContainer.innerHTML = 'Disabled';
    endOfAvatar();
  }
}

<div class="container">
    <div class="circle"></div>
    <div class="move-container">
      <div class="move-back user-click">Back</div>
      <div class="move-forward user-click">Forward</div>
    </div>
    <div class="progress-container">
      <div class="avatar"></div>
    </div>
</div>