dialog.js

import React, { Component } from 'react';

let dialogStyles = {
  width: '450px',
  maxWidth: '100%',
  margin: '0 auto',
  position: 'fixed',
  left: '50%',
  top: '50%',
  transform: 'translate(-50%,-50%)',
  zIndex: '999',
  backgroundColor: '#eee',
  padding: '10px 20px 40px',
  borderRadius: '8px',
  display: 'flex',
  flexDirection: 'column',
};

let dialogCloseButtonStyles = {
  marginBottom: '15px',
  padding: '3px 8px',
  cursor: 'pointer',
  borderRadius: '50%',
  border: 'none',
  width: '30px',
  height: '30px',
  fontWeight: 'bold',
  alignSelf: 'flex-end',
};

let xStyles = {
  color: 'rgb(78, 77, 77)',
  fontSize: '2rem',
  marginTop: '-5px',
};

class Dialog extends Component {
  render() {
    let dialog = (
      <div style={dialogStyles}>
        <div style={dialogCloseButtonStyles} onClick={this.props.onClose}>
          <button style={xStyles}>&times;</button>
        </div>

        <div>{this.props.children}</div>
      </div>
    );

    if (!this.props.isOpen) {
      dialog = null;
    }
    return <div>{dialog}</div>;
  }
}

export default Dialog;

Top5.css

.main-container {
  background-image: url('../../img/top5.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  padding: 2rem 0;
  overflow: hidden;
}

.flexbox {
  width: 95%;
  height: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;

  position: relative;
}

/* Image Container */
.imgDiv {
  position: absolute;
  bottom: 5px;
  width: 8rem;
  height: 8rem;
}

/* Image Props */
.img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.5rem solid var(--color-black);
}

.img:hover {
  border: 0.5rem solid var(--color-grey-light);
}

.paragraph {
  font-size: 1.4rem;
  text-align: center;
  font-weight: 700;
  color: rgb(255, 171, 15);
  background-color: var(--color-black);
  border-radius: 10%;
  padding: 0 0.5rem;
  margin-left: 30%;
  display: inline-block;
}

/* // Aligning the images a long the container
#image1 {
  left: 5%;
}

#image2 {
  left: 25.2%;
}

#image3 {
  left: 43.7%;
}

#image4 {
  left: 64.8%;
}

#image5 {
  left: 85%;
} */

/*********************** RESPONSIVENESS ***********************/
@media only screen and (max-width: 2560px) {
  #image1 {
    left: 7.2%;
  }

  #image2 {
    left: 27.3%;
  }

  #image3 {
    left: 45.8%;
  }

  #image4 {
    left: 67%;
  }

  #image5 {
    left: 87.6%;
  }
}

@media only screen and (max-width: 2000px) {
  #image1 {
    left: 6.6%;
  }

  #image2 {
    left: 26.6%;
  }

  #image3 {
    left: 45%;
  }

  #image4 {
    left: 66.2%;
  }

  #image5 {
    left: 86.8%;
  }
}

@media only screen and (max-width: 1920px) {
  #image1 {
    left: 6.4%;
  }

  #image2 {
    left: 26.5%;
  }

  #image3 {
    left: 44.9%;
  }

  #image4 {
    left: 66%;
  }

  #image5 {
    left: 86.6%;
  }
}

@media only screen and (max-width: 1800px) {
  #image1 {
    left: 6.3%;
  }

  #image2 {
    left: 26.3%;
  }

  #image3 {
    left: 44.6%;
  }

  #image4 {
    left: 65.8%;
  }

  #image5 {
    left: 86.5%;
  }
}

@media only screen and (max-width: 1700px) {
  #image1 {
    left: 6%;
  }

  #image2 {
    left: 26%;
  }

  #image3 {
    left: 44.5%;
  }

  #image4 {
    left: 65.6%;
  }

  #image5 {
    left: 86.2%;
  }
}

@media only screen and (max-width: 1600px) {
  #image1 {
    left: 5.8%;
  }

  #image2 {
    left: 25.8%;
  }

  #image3 {
    left: 44.2%;
  }

  #image4 {
    left: 65.4%;
  }

  #image5 {
    left: 85.7%;
  }
}

@media only screen and (max-width: 1500px) {
  #image1 {
    left: 5.5%;
  }

  #image2 {
    left: 25.5%;
  }

  #image3 {
    left: 44%;
  }

  #image4 {
    left: 65.2%;
  }

  #image5 {
    left: 85.6%;
  }
}

@media only screen and (max-width: 1440px) {
  #image1 {
    left: 5.3%;
  }

  #image2 {
    left: 25.2%;
  }

  #image3 {
    left: 43.7%;
  }

  #image4 {
    left: 65%;
  }

  #image5 {
    left: 85.5%;
  }
}

@media only screen and (max-width: 1366px) {
  #image1 {
    left: 5%;
  }

  #image2 {
    left: 25%;
  }

  #image3 {
    left: 43.5%;
  }

  #image4 {
    left: 64.5%;
  }

  #image5 {
    left: 85.2%;
  }
}

@media only screen and (max-width: 1280px) {
  #image1 {
    left: 4.8%;
  }

  #image2 {
    left: 24.5%;
  }

  #image3 {
    left: 43.2%;
  }

  #image4 {
    left: 64.3%;
  }

  #image5 {
    left: 84.8%;
  }
}

@media only screen and (max-width: 1200px) {
  #image1 {
    left: 4.2%;
  }

  #image2 {
    left: 24.3%;
  }

  #image3 {
    left: 42.8%;
  }

  #image4 {
    left: 64%;
  }

  #image5 {
    left: 84.4%;
  }
}

@media only screen and (max-width: 1100px) {
  #image1 {
    left: 3.7%;
  }

  #image2 {
    left: 23.8%;
  }

  #image3 {
    left: 42.4%;
  }

  #image4 {
    left: 63.3%;
  }

  #image5 {
    left: 83.7%;
  }
}

@media only screen and (max-width: 1000px) {
  #image1 {
    left: 3.1%;
  }

  #image2 {
    left: 23.1%;
  }

  #image3 {
    left: 41.8%;
  }

  #image4 {
    left: 63%;
  }

  #image5 {
    left: 83.3%;
  }
}

@media only screen and (max-width: 950px) {
  #image1 {
    left: 2.6%;
  }

  #image2 {
    left: 22.7%;
  }

  #image3 {
    left: 41.3%;
  }

  #image4 {
    left: 62.5%;
  }

  #image5 {
    left: 82.8%;
  }
}

@media only screen and (max-width: 900px) {
  #image1 {
    left: 2.4%;
  }

  #image2 {
    left: 22.2%;
  }

  #image3 {
    left: 41%;
  }

  #image4 {
    left: 62%;
  }

  #image5 {
    left: 82.5%;
  }
}

@media only screen and (max-width: 800px) {
  #image1 {
    left: 1.5%;
  }

  #image2 {
    left: 21%;
  }

  #image3 {
    left: 40%;
  }

  #image4 {
    left: 61%;
  }

  #image5 {
    left: 81.8%;
  }
}

@media only screen and (max-width: 700px) {
  .img {
    width: 85%;
    height: 85%;
    border: 0.4rem solid var(--color-black);
  }

  .img:hover {
    border: 0.4rem solid var(--color-grey-light);
  }

  #image1 {
    left: 1.6%;
  }

  #image2 {
    left: 21.5%;
  }

  #image3 {
    left: 39.8%;
  }

  #image4 {
    left: 61.1%;
  }

  #image5 {
    left: 82%;
  }

  .paragraph {
    margin-left: 20%;
  }
}

@media only screen and (max-width: 650px) {
  .img {
    width: 80%;
    height: 80%;
  }

  .img {
    border: 0.35rem solid var(--color-black);
  }

  .img:hover {
    border: 0.35rem solid var(--color-grey-light);
  }

  .paragraph {
    margin-left: 18%;
  }

  #image1 {
    left: 1.5%;
  }

  #image2 {
    left: 21.8%;
  }

  #image3 {
    left: 40%;
  }

  #image4 {
    left: 61%;
  }

  #image5 {
    left: 81.5%;
  }
}

@media only screen and (max-width: 600px) {
  .img {
    width: 70%;
    height: 70%;
  }

  .paragraph {
    margin-left: 13.5%;
  }

  #image1 {
    left: 2%;
  }

  #image2 {
    left: 22%;
  }

  #image3 {
    left: 40.5%;
  }

  #image4 {
    left: 61.8%;
  }

  #image5 {
    left: 82%;
  }
}

@media only screen and (max-width: 550px) {
  #image1 {
    left: 1%;
  }

  #image2 {
    left: 21%;
  }

  #image3 {
    left: 39.5%;
  }

  .paragraph {
    padding: 0 0.2rem;
    margin-left: 17%;
  }
}

@media only screen and (max-width: 520px) {
  .img {
    width: 65%;
    height: 65%;
    border: 0.35rem solid var(--color-black);
  }

  .img:hover {
    border: 0.35rem solid var(--color-grey-light);
  }

  .paragraph {
    margin-left: 18%;
    font-size: 1.1em;
  }

  #image1 {
    left: 1.5%;
  }

  #image2 {
    left: 21%;
  }

  #image3 {
    left: 39.5%;
  }

  #image4 {
    left: 61%;
  }

  #image5 {
    left: 81.5%;
  }
}

@media only screen and (max-width: 480px) {
  .img {
    width: 60%;
    height: 60%;
    border: 0.35rem solid var(--color-black);
  }

  .img:hover {
    border: 0.35rem solid var(--color-grey-light);
  }

  .paragraph {
    margin-left: 15%;
  }

  #image1 {
    left: 1.5%;
  }

  #image2 {
    left: 21.5%;
  }

  #image3 {
    left: 40%;
  }
}

@media only screen and (max-width: 430px) {
  .img {
    width: 57%;
    height: 57%;
    border: 0.3rem solid var(--color-black);
  }

  .img:hover {
    border: 0.3rem solid var(--color-grey-light);
  }

  .paragraph {
    margin-left: 12%;
  }
}

@media only screen and (max-width: 400px) {
  .img {
    width: 50%;
    height: 50%;
  }

  .paragraph {
    font-size: 1rem;
    margin-left: 11%;
  }

  #image1 {
    left: 1.2%;
  }

  #image5 {
    left: 82%;
  }
}

@media only screen and (max-width: 380px) {
  .img {
    width: 48%;
    height: 48%;
  }

  .paragraph {
    font-size: 0.9rem;
    margin-left: 11%;
  }

  #image1 {
    left: 1.5%;
  }

  #image2 {
    left: 21%;
  }

  #image3 {
    left: 40%;
  }

  #image4 {
    left: 61%;
  }

  #image5 {
    left: 81.2%;
  }
}

@media only screen and (max-width: 335px) {
  .img {
    width: 45%;
    height: 45%;
  }

  .paragraph {
    font-size: 0.8rem;
    margin-left: 12%;
  }

  #image1 {
    left: 0.5%;
  }

  #image2 {
    left: 20%;
  }

  #image3 {
    left: 40%;
  }

  #image4 {
    left: 60.8%;
  }

  #image5 {
    left: 81.2%;
  }
}

Top5.js

import React from 'react';
import Top1 from '../../img/users/user-1.jpeg';
import Top2 from '../../img/users/user-2.jpeg';
import Top3 from '../../img/users/user-3.jpeg';
import Top4 from '../../img/users/user-4.jpg';
import Top50 from '../../img/users/user-5.jpg';
import './Top5.css';

import Dialog from '../Dialog/dialog';

export default class Top5 extends React.Component {
  constructor() {
    super();

    this.state = {
      dialogData: {},
      top5: [
        {
          id: 1,
          name: 'Jack',
          img: `${Top1}`,
          votes: 100,
          fullName: 'Jack John',
          vote_percentage: 20,
          info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ',
        },
        {
          id: 2,
          name: 'Sara',
          img: `${Top2}`,
          votes: 100,
          fullName: 'Sara John',
          vote_percentage: 20,
          info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ',
        },
        {
          id: 3,
          name: 'Sam',
          img: `${Top3}`,
          votes: 100,
          fullName: 'Sam John',
          vote_percentage: 20,
          info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ',
        },
        {
          id: 4,
          name: 'Esra',
          img: `${Top4}`,
          votes: 100,
          fullName: 'Esra John',
          vote_percentage: 20,
          info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ',
        },
        {
          id: 5,
          name: 'Fox',
          img: `${Top50}`,
          votes: 100,
          fullName: 'Fox John',
          vote_percentage: 20,
          info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ',
        },
      ],
    };
  }

  render() {
    const onButtonClicked = (id) => {
      // 1. Make a shallow copy of the items
      let newArray = [...this.state.top5];

      // 2. Make a shallow copy of the item you want to mutate
      const index = this.state.top5.findIndex((item) => item.id === id);

      // 3. Replace the property you're intersted in
      newArray[index].votes = newArray[index].votes + 1;

      // This function is to calculate the votes in percentages and create new object field with the name vote_percentage
      // calculatedVotes =  votes * 100 / totalVotes
      // let vote_total = newArray.reduce((acc, { votes }) => acc + votes, 0);
      // let newArrayWithPercentages = newArray.map((v) => ({
      //   ...v,
      //   vote_percentage: (v.votes * 100) / vote_total,
      // }));

      // console.log(
      //   newArrayWithPercentages
      //   // newArrayWithPercentages[id - 1].vote_percentage,
      //   // newArrayWithPercentages[id - 1].votes
      // );
      // 4. Set the state to our new copy
      this.setState({
        top5: newArray,
      });
    };

    const handleClick = (event, calculatedVotes) => {
      event.target.closest('div').style.transform = `translateY(-${
        calculatedVotes * 3.8
      }%)`;
      // console.log(calculatedVotes * 3.8);
      console.log(calculatedVotes);
      event.target.closest('div').style.transition = 'all 1s ease-in-out';
    };

    return (
      <div className="main-container">
        <div className="flexbox" id="flexbox">
          {this.state.top5.map((top, i) => (
            <div
              key={top.id}
              onLoad={(event) => handleClick(event, top.vote_percentage)}
              onClick={(e) => {
                this.setState({ isOpen: true, dialogData: top });
              }}
            >
              <div className="imgDiv" id={`image${i + 1}`}>
                <img
                  className="img"
                  src={top.img}
                  alt={`Celebrity ${top.id}`}
                />
                <p className="paragraph" key={top.id}>
                  {top.votes}
                </p>
              </div>
            </div>
          ))}
        </div>
        <Dialog
          isOpen={this.state.isOpen}
          onClose={(e) => this.setState({ isOpen: false })}
        >
          <div className="dialog-container">
            <h6 className="dialog-paragraph">
              {this.state.dialogData.fullName}
            </h6>
            <img
              className="celebrities-image"
              src={this.state.dialogData.img}
              alt={this.state.dialogData.id}
            />
            <p className="dialog-text">{this.state.dialogData.info}</p>
            <button
              onClick={() => onButtonClicked(this.state.dialogData.id)}
              style={{ fontWeight: 700 }}
              className="voting-btn"
            >
              Voting
            </button>
            <p>{this.state.dialogData.votes} Votes</p>
          </div>
        </Dialog>
      </div>
    );
  }
}