7

Created a skill section with flexbox and javascript, feedback would be appreciat...

 2 years ago
source link: https://dev.to/dieter91/created-a-skill-section-with-flexbox-and-javascript-feedback-would-be-appreciated-3gai
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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>
Enter fullscreen modeExit fullscreen mode
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%;
  }
}
Enter fullscreen modeExit fullscreen mode
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");
  });
}
Enter fullscreen modeExit fullscreen mode

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK