Building a Dynamic Avatar Component with Interactive Features

Introduction

Welcome to the tutorial on building an interactive avatar component. Avatars play a crucial role in user profiles, and creating a dynamic avatar can greatly enhance the user experience.

HTML Structure

Let's start by defining the HTML structure. We'll have a container with an image tag for the avatar and an overlay for interactive features.

        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" class="avatar-image" alt="User Avatar">
          <div class="avatar-overlay">
            <button onclick="rotateAvatar()" class="rotate-button">Rotate</button>
          </div>
        </div>
      

JavaScript Functionality

We'll implement a JavaScript function to rotate the avatar when the user clicks on the 'Rotate' button.

        let rotation = 0
        function rotateAvatar() {
          let avatar = document.getElementsByClassName('avatar-image')[0]
          rotation += 90
          avatar.style.transform = `rotate(${rotation}deg)`
        }
      

Styling with CSS

Next, let's add some styles to make our avatar component visually appealing. We'll position the avatar and overlay, style the button, and define the hover effects.

        .avatar {
          position: relative;
          display: inline-block;
        }
        .avatar-image {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
        .avatar-overlay {
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
        }
        .rotate-button {
          padding: 5px 10px;
          background-color: #02a8f4;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
        }
      

With these steps, you can create a dynamic avatar component that users can interact with. Experiment with different functionalities and designs to further enhance the user experience.

Whole code

<div class="avatar">
  <img src="https://randomuser.me/api/portraits/men/1.jpg" class="avatar-image" alt="User Avatar">
  <div class="avatar-overlay">
    <button onclick="rotateAvatar()" class="rotate-button">Rotate</button>
  </div>
</div>

<script>
let rotation = 0
function rotateAvatar() {
  let avatar = document.getElementsByClassName('avatar-image')[0]
  rotation += 90
  avatar.style.transform = `rotate(${rotation}deg)`
}
</script>

<style>
.avatar {
  position: relative;
  display: inline-block;
}
.avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.avatar-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.rotate-button {
  padding: 5px 10px;
  background-color: #02a8f4;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>