A Simple counter using javascript

awsomebro — Wed, 18 May 2022 08:42:10 +0000

CSS:

{ margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: "Lato", sans-serif;
background-image: linear-gradient(to left, #d89537, #4e944f);
}

.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.Counter {
background-image: linear-gradient(to left, #b4e197, #4e944f);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500px;
width: 700px;
border: #b21010 solid 3px;
}

h1 {
background-image: linear-gradient(to right, #02abff, #9041da);
color: #fff;
margin-top: 50px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

p {
font-weight: 400px;
font-size: 20px;
margin-top: 30px;
color: beige;
}

p span {
color: orange;
font-size: 30px;
}
.Buttons {
margin-top: 20px;
display: flex;
flex-direction: row;
gap: 20px;
}

triggerButton {

color: #ca7002;
height: 40px;
width: 75px;
}

triggerbtn {

color: #ca7002;
height: 40px;
width: 75px;
}

JavaScript:
window.addEventListener("load", () => {
const counter = document.querySelector("#counter");
const triggerButton = document.querySelector("#triggerButton");
const triggerBtn = document.querySelector("#triggerbtn");

triggerButton.addEventListener("click", () => {
counter.textContent = parseInt(counter.textContent) + 1;
});
triggerBtn.addEventListener("click", () => {
counter.textContent = parseInt(counter.textContent) - 1;
});
});

Color changer in javascript

awsomebro — Wed, 27 Apr 2022 07:46:32 +0000

Javascript

function RandomColor() {
var Color = "#" + Math.floor(Math.random() * 16777215).toString(16);
return Color;
//color will be freshly served
}
function Change() {
document.body.style.backgroundColor = RandomColor(); // -> #e1ac94
someDiv.style.color = Color();
}

DEV Community: awsomebro

A Simple counter using javascript

triggerButton {

triggerbtn {

Color changer in javascript

Javascript