We all know JavaScript can leads to headaches and pains for beginners. oh sorry! 🤪 everyone in the field as a javascript developer I meant. it is dynamic and you can only be on your foot by learning days in, days out.👨‍💻

The question is "How do we learn and practise to stay out of tutorial hell"🤧.

Some weeks ago I signed up for an internship digital programme SideHustleNG in my country, Nigeria!.

it has been fun so far, you will also have a lot of fun networking taking on tasks, earning stipends, winning prizes.😉

A task was given to build a Javascript counter, The counter minimum value should be 0 and the maximum value should be 50.

Creating the HTML structure

The HTML consists of two buttons and headings, I wrapped up inside two containers that are parents to them.

     <div class="container">
      <div class="counterContainer">
        <h1>COUNTER</h1>
        <h2 id="number">0</h2>
        <div class="btn">
          <button id="decrement">LOWER COUNT</button><br />
          <button class="add" id="increment">ADD COUNT</button>
        </div>
      </div>
    </div>

Adding styles

The styling was pure CSS , i made it simple for readers to understand.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: black;
  font-size: 26px;
}
h1 {
  color: #fff;
  text-align: center;
  padding-top: 40px;
}
.container {
  background-image: url(./img/woodenbackground.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  width: 50%;
  height: 620px;
}

.counterContainer {
  text-align: center;
  border: 3px solid #ffff;
  border-radius: 5px;
  box-shadow: 3px 28px 21px -2px rgba(45, 49, 38, 0.88);
  height: 520px;
  width: 75%;
}
.btn {
  margin-top: 150px;
}
#number {
  color: green;
  font-size: 200px;
  font-weight: 900;
  width: 100%;
  height: 100px;
  background-color: transparent;
}
button {
  background-color: #184e77;
  box-shadow: -3px 5px 15px 0px rgba(45, 49, 38, 0.88);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 23px;
  padding: 12px 17px;
  letter-spacing: 0.5px;
  transition: 1ms;
}
button:hover {
  border: 1px solid #aaaa;
  cursor: pointer;
}

.add {
  margin-top: 15px;
}

JavaScript code

The JavaScript consists of 23 lines of codes that are variables, functions and condition statements. I created few variables and assigned them to their id respectively.

let add = document.getElementById('increment')
let decrease = document.getElementById('decrement')
let int = document.getElementById('number');
let count = 0;

add.addEventListener('click', function () {
    count++;
    int.innerHTML = count;
  // if count is equal to 50
    if (count === 50) {
        count = 0;
    } else { }
})
decrease.addEventListener('click', function () {
    count--;
    int.innerHTML = count;
    // if count is less than 1 or is equals to 0
    if (count < 1 || count === 0) {
        count = 50;
    } else { }

})

Live Demo

if there are other ways I can achieve this project! kindly comment and reach out, your thoughts are always welcome 🤝 .

If you enjoyed the article, consider sharing it so more people can benefit from it! Also, feel free to @ me on Twitter with your opinions.