Skip to main content

New Project My Counter App - Working on Undo button Still Working

New Project My Counter App - Working on Undo button Still Working 


My Counter Link - https://bhagyeshpro.github.io/mycounter.github.io/


Code JS -

let count = 0;
// select buttons and value
const value = document.querySelector("#value");
const btns = document.querySelectorAll(".btn");
function doUndo (numberIs) {
numberIs = count;
return numberIs;
}
// console.log(btns);
btns.forEach(function (btn) {
btn.addEventListener("click", function(e) {
const styles = e.currentTarget.classList;
// let previous = count;
// console.log(pervious);
if (styles.contains('decrease')) {
count--;
// console.log(count);
}
else if (styles.contains('increase')) {
count++;
// console.log(count);
}
else if (styles.contains('reset')) {
count = 0;
}
else if (styles.contains('ten')) {
count += 10;
}
else if (styles.contains('hundred')) {
count += 100;
}
else if (styles.contains('minten')) {
count -= 10;
}
else if (styles.contains('undo')) {
// count = numberIs();
console.log(numberIs());
// Working ...
}
    if (count > 0) {
        value.style.color = 'green';
    } 
    if (count < 0) {
        value.style.color = 'red';
    }
    if (count == 0) {
        value.style.color = '#222';
    }
value.textContent = count;
})
});

Code HTML -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<div class="container">
<h1>My Counter</h1>
<span id="value">0</span>
<div class="button-container">
<button class="btn decrease">decrease</button>
<button class="btn reset">reset</button>
<button class="btn increase">increase</button>
</div>
<div>
<button class="btn ten">+ 10</button>
<button class="btn hundred">+ 100</button>
<button class="btn minten">- 10</button>
</div>
<div>
<!-- <button class="btn undo">undo</button> -->
</div>
<div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>


Code CSS -

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.container h1 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 2rem;
}
.container {
text-align: center;
}
span {
font-size: 7rem;
color:black;
}
.btn {
font-family: Georgia, 'Times New Roman', Times, serif;
background: transparent;
letter-spacing: 0.1rem;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s linear;
border-radius: 0.4rem;
border: 2px solid #222;
display: inline-block;
cursor: pointer;
margin-left: 0.3rem;
padding: 0.25rem 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 0.7rem;
}
.btn:hover {
color: whitesmoke;
background: black;
transform: scale(1.1);
}
.links {
display: flex;
}
.links h3 {
margin-top: 7rem;
}
.clickMe {
font-family: Georgia, 'Times New Roman', Times, serif;
background: transparent;
letter-spacing: 0.1rem;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s linear;
border-radius: 0.4rem;
border: 2px solid #222;
display: inline-block;
cursor: pointer;
margin-left: 0.3rem;
padding: 0.25rem 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 0.7rem;
}
.clickMe:hover {
color: whitesmoke;
background: #A52A2A;
transform: scale(1.1);
}

Comments

Post a Comment

Popular posts from this blog

Topic Learned!

 Topic Learned! State : State is updated whenever user want to update it. Example : ToDo List Props:           Props would be whatever the current state is! useEffect:            componentDidMount() {             // Run This code while the app is loading          Example fetchUser();      } Alternative For componentDidMount(): In functional components    //On Every Render   useEffect (() => {     console . log ( "I re-rendered" );   }); Alternative For componentDidMount() but runs only in first Render: //On First Render/Mount - componentDidMount   useEffect (() => {     console . log ( "Component Is Mounted" );   }, []); Alternative for componentDidUpdate(): //On First Render + whenever the component changes   //componentDidUpdate alternative   useEffect (() => {   ...
Post a Comment
Read more

VERCEL DEPLOYMENT ERROR

 VERCEL DEPLOYMENT ERROR Options | NextAuth.js (next-auth.js.org) Step 1 : cmd $ openssl rand -base64 32 (Copy generated key) Step 2: Go to Project Environment Variables Add NEXTAUTH_SECRET : Key  Step 3: Redeploy
Post a Comment
Read more

Advanced JS Notes

 Advanced JS Notes : Arrow Functions:  Code:  let sumIs = ( a , b ) => a + b console . log ( sumIs ); let randomIs = () => Math . random ; document . addEventListener ( 'click' , () => console . log ( "click" );) Spread Operator // Spread Operator arr = [ 1 , 3 , 1 ]; let sum = ( a , b ) => a + b ; let s = sum (... arr ); // console.log(s); arr2 = [ 2 , 5 , 5 ]; let b = [... arr , ... arr2 ]; //Concating arr using spread console . log ( b ); // Spread With Obj let obj1 = {   name : "Mihir" ,   age : 24 ,   favStar : "TrishCollins" , }; let obj2 = { ... obj1 , name : "Rahul" , favStar : "SRK" }; // Object manipulation using spread operator console . log ( obj2 );
Post a Comment
Read more