Created a skill section with flexbox and javascript, feedback would be appreciated!

Dieter91 — Mon, 30 Aug 2021 11:28:02 +0000

It's the first thing I've created using flexbox and Javascript so I feel like my code could probably improve a lot. Any feedback would be greatly appreciated!

If you click on any skill bar or skill title the summary will change.

LIVE:

https://dieter91.github.io/skills-section/

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skills section</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
  </head>
  <body>
    <section class="skills">
      <div class="skills-left">
        <h2>Skills</h2>

        <h3 class="skill-title">HTML & CSS</h3>
        <div class="skill-bar">
          <div class="html-css"><p>80/100</p></div>
        </div>

        <h3 class="skill-title">JAVASCRIPT</h3>
        <div class="skill-bar">
          <div class="javascript"><p>85/100</p></div>
        </div>

        <h3 class="skill-title">PHP</h3>
        <div class="skill-bar">
          <div class="php"><p>70/100</p></div>
        </div>

        <h3 class="skill-title">SEO</h3>
        <div class="skill-bar">
          <div class="seo"><p>95/100</p></div>
        </div>
      </div>

      <div class="skills-right">
        <h2>Summary</h2>

        <div class="desc active">
          <h3 >HTML & CSS</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
            excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
            consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
            eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
            iure harum voluptatum aspernatur libero illo recusandae deleniti!
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste, necessitatibus dolorem assumenda ipsum autem, hic, dolorum ipsa quisquam aut saepe maxime.
          </p>
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia.</li>
            <li>Lorem, ipsum dolor.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam dolor molestias fugiat!</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
          </ul>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus doloremque provident aut fugiat rem aliquid qui laboriosam eaque. Rerum, eum!</p>
        </div>
        <div class="desc">
          <h3 >JAVASCRIPT</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
            excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
            consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
            eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
            iure harum voluptatum aspernatur libero illo recusandae deleniti!
          </p>
          <img src="https://venturebeat.com/wp-content/uploads/2018/01/javascript.jpg" alt="" srcset="">
        </div>
        <div class="desc">
          <h3 >PHP</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
            excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
            consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
            eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
            iure harum voluptatum aspernatur libero illo recusandae deleniti!
          </p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit minima nesciunt iste animi iure, minus ducimus nostrum. Vitae, blanditiis aspernatur.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum rem, porro recusandae consectetur fugit accusantium corporis quis quam officia. Earum at aperiam quasi voluptates provident eum. Ducimus dignissimos laudantium distinctio magni fugiat id ea. Maiores dolore corrupti molestias illo officia? Asperiores rem consequuntur nam culpa!</p>
        </div>
        <div class="desc">
          <h3 >SEO</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
            excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
            consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
            eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
            iure harum voluptatum aspernatur libero illo recusandae deleniti!
          </p>
          <img src="https://www.easisell.com/wp-content/uploads/2021/03/seoimage-2.jpg" alt="" srcset="">
        </div>


    </section>

    <script src="javascript.js"></script>
  </body>
</html>

CSS:

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

.skills {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: linear-gradient(to right, #c9d6ff, #e2e2e2);
  height: 45rem;

  padding: 4rem 0 4rem 0;
}

.skills h2 {
  text-align: center;
  margin-bottom: 4rem;
}

.skills-left {
  width: 40%;
}

.skills-right {
  width: 40%;
  position: relative;
}
.skill-title {
  cursor: pointer;
}

.skill-bar {
  color: aliceblue;
  background-color: whitesmoke;
  border: black solid 1px;
  display: flex;
  flex-direction: row;
}
.skill-bar p {
  font-size: 1.4rem;
  text-align: right;
  margin-right: 1.5rem;
}

.html-css {
  width: 80%;
  background: linear-gradient(to right, #00b4db, #0083b0);
  opacity: 0.8;
}
.html-css:hover {
  opacity: 1;
  transition: 0.6s;
  cursor: pointer;
}
.javascript {
  width: 85%;
  background: linear-gradient(to right, #00b4db, #0083b0);
  transition: background-color 4s;
  opacity: 0.8;
}
.javascript:hover {
  opacity: 1;
  transition: 0.6s;
  cursor: pointer;
}
.php {
  width: 75%;
  background: linear-gradient(to right, #00b4db, #0083b0);
  transition: background-color 4s;
  opacity: 0.8;
}
.php:hover {
  opacity: 1;
  transition: 0.6s;
  cursor: pointer;
}
.seo {
  width: 95%;
  background: linear-gradient(to right, #00b4db, #0083b0);
  transition: background-color 4s;
  opacity: 0.8;
}
.seo:hover {
  opacity: 1;
  transition: 0.6s;
  cursor: pointer;
}
.desc {
  opacity: 0;
  position: absolute;
}
.desc img {
  width: 100%;
}
.desc.active {
  opacity: 1;
  transition: all 800ms ease-in-out;
}

@media (max-width: 768px) {
  .skills {
    flex-direction: column;
    justify-content: initial;
    padding: 2rem 4rem;
    background-color: white;
    height: 100vh;
  }
  .skills-left {
    width: 100%;
  }

  .skills-right {
    margin-top: 20rem;
    width: 100%;
  }
}

JS:

let skillBar = document.getElementsByClassName("skill-bar");
let desc = document.getElementsByClassName("desc");
let skillsRight = document.getElementsByClassName("skills-right")[0];
let skillTitle = document.getElementsByClassName("skill-title");

for (let i = 0; i < skillBar.length; i++) {
  skillBar[i].addEventListener("click", function () {
    skillsRight.getElementsByClassName("active")[0].classList.remove("active");
    desc[i].classList.add("active");
  });

  skillTitle[i].addEventListener("click", function () {
    skillsRight.getElementsByClassName("active")[0].classList.remove("active");
    desc[i].classList.add("active");
  });
}

DEV Community: Dieter91

Created a skill section with flexbox and javascript, feedback would be appreciated!

LIVE:

HTML:

CSS:

JS: