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 { }
})
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.