Simple Counter Using Javascript

HTML code

<div style='text-align:center;'>

<button class="btn decrease">Decrease</button>

<button class="btn reset">Reset</button>

<button class="btn increase">Increase</button>

</div>

<div id="counter" style='text-align:center;font-size:30px;'>

0

</div>

JS Code

let btns = document.querySelectorAll('.btn');
let counter = document.getElementById('counter');
let count = 0;

btns.forEach(function(btn){
btn.addEventListener('click', function(event){
 let target = event.target.classList;
 if(target.contains('decrease')){
 count--;
 } else if(target.contains('increase')){
 count++;
 } else {
 count = 0;
 }
 if(count < 0){
 counter.style.color = 'red';
 }
 if(count > 0){
 counter.style.color = 'green';
 }
 if(count == 0){
 counter.style.color = '#222';
 }
 counter.textContent = count;
});
});

Read More...

Get Any Possible Hex Color Code Using Array

HTML code

<button id="btn">

Click me

</button>

<span id="color" style="background-color: #fff"></span>

JS Code

let colors = ['0', '1', '2', '3', '4','5','6','7','8','9','A','B','C','D','E','F'];
let btn = document.getElementById('btn');
let colorCode = document.getElementById('color');

btn.addEventListener('click', function(){
let hex = '#';
for(let i = 0; i < 6; i++){
hex += colors[randomNumber()];
}
document.body.style.backgroundColor = hex;
colorCode.textContent = hex;
});

function randomNumber(){
 return Math.floor(Math.random()*colors.length);
}

Read More...

Get Random Colors Stored in Array

HTML code

<button id="btn">

Click me

</button>

JS Code

let colors = ['white', 'blue', 'red', 'green', 'orange'];

let btn = document.getElementById('btn');



btn.addEventListener('click', function(){

let randNum = randomNumber();

console.log(randNum);

document.body.style.backgroundColor=colors[randNum];

});



function randomNumber(){

 return Math.floor(Math.random()*colors.length);

}

Read More...