My Punks have a Mobile NavBar thanks to JavaScript

I already have my website up but there's nothing there yet, I will be using Github to host the code so anyone who wants to read it can do so, sort of like with any open source project. Hopefully this opens up my chances of getting a job sooner rather than later, although I am not actively searching at the moment.

Right now I am just grinding, grinding, grinding. When we are talking code, it all comes down to grinding. The more you grind, practice your skills, find out about new tweaks, practice what you should already know by heart, and just putting your code to work... the more you will learn.

I am already pretty efficient with my HTML and CSS code, I still need a lot of practice and a hell lot to learn regarding JavaScript - and don't worry, I've been taking my lessons religiously even though I haven't posted about JavaScript for something like two weeks; but the point is, these little projects are mainly about HTML and CSS and grinding my skills.

Navigation Bar for Mobile Phones

This project is quite simple but very useful to have a "mobile version" of our website's frontpage, with a menu included at the bottom, the background image will change depending on the tab the user is at. Basically I will make a loop over each part of the menu so the image that corresponds to that tab shows.

I am using my Punk images for the UI but it is more than obvious that you can actually use this code to create a more useful menu and to play around with the backgrounds etc.

Using my Hive Punks is just for showing purposes.

HTML Code

  <body>
    <div class="phone">
      <img src="azrael.png" alt="Splinterlands" class="content show" />
      
      <img src="denise.png" alt="Denise" class="content" />
      <img src="michelle.png" alt="Michelle" class="content" />
      <img src="milan.png" alt="Milan" class="content" />
      <nav>
        <ul>
          <li>
            <i class="fas fa-home"></i>
            <p>Punk 1</p>
          </li>
          <li>
            <i class="fas fa-home"></i>
            <p>Punk 2</p>
          </li>
          <li>
            <i class="fas fa-home"></i>
            <p>Punk 3</p>
          </li>
          <li>
            <i class="fas fa-home"></i>
            <p>Punk 4</p>
          </li>
        </ul>
      </nav>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS Code

* {
  box-sizing: border-box;
}

body {
  background-color: rgba(150, 80, 175, 0.6);
  font-family: "Open Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.phone {
  position: relative;
  overflow: hidden;
  border: 3px solid #eee;
  border-radius: 15px;
  height: 700px;
  width: 400px;
}

The opacity for the .phone .content will be changed dynamically depending on which image is the one with the class of show, and I will give said class to the images with JS.

.phone .content {
  opacity: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
}

I included a transition here so that when I change the opacity of each image depending on the class they have, it eases in.

.phone .content.show {
  opacity: 1;
}

nav {
  position: absolute;
  /*  It is positioned  absolute within the phone container  */
  bottom: 0;
  left: 0;
  margin-top: -5px;
  width: 100%;
}

nav ul {
  background-color: #fff;
  display: flex;
  list-style-type: none;
  /*  This avoids having bullets points and that crap */
  padding: 0;
  margin: 0;
  height: 60px;
}

nav li {
  color: rgb(230, 17, 17);
  cursor: pointer;
  flex: 1;
  /*  This spreads out the list items */
  padding: 10px;
  text-align: center;
}

nav ul li p {
  font-size: 12px;
  margin: 2px 0;
}

nav ul li:hover,
nav ul li.active {
  color: rgb(0, 0, 0);
}

JavaScript Code

const contents = document.querySelectorAll(".content");
const listItems = document.querySelectorAll("nav ul li");

listItems.forEach((item, idx) => {
  item.addEventListener("click", () => {
    hideAllContents();
    hideAllItems();

    item.classList.add("active");
    contents[idx].classList.add("show");
  });
});

function hideAllContents() {
  contents.forEach((content) => content.classList.remove("show"));
}

function hideAllItems() {
  listItems.forEach((item) => item.classList.remove("active"));
}

_{These projects are based on a CSS, HTML and JS paid course I got on Udemy by Brad Traversy. I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.}