From 120902e7ab810323364210869e8014b45abff4c9 Mon Sep 17 00:00:00 2001 From: Gajendra Date: Thu, 29 Feb 2024 16:06:42 +0530 Subject: [PATCH] updated the code,opensource-Contribution --- increment&decrement-js-project/index.html | 25 ++++++ increment&decrement-js-project/main.js | 54 +++++++++++++ increment&decrement-js-project/style.css | 95 +++++++++++++++++++++++ 3 files changed, 174 insertions(+) create mode 100644 increment&decrement-js-project/index.html create mode 100644 increment&decrement-js-project/main.js create mode 100644 increment&decrement-js-project/style.css diff --git a/increment&decrement-js-project/index.html b/increment&decrement-js-project/index.html new file mode 100644 index 0000000..2cb797d --- /dev/null +++ b/increment&decrement-js-project/index.html @@ -0,0 +1,25 @@ + + + + + + Increment and Decrement + + + +
+ + +
+
+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/increment&decrement-js-project/main.js b/increment&decrement-js-project/main.js new file mode 100644 index 0000000..8425399 --- /dev/null +++ b/increment&decrement-js-project/main.js @@ -0,0 +1,54 @@ +let num = 0; +function increment(){ + let value = ++num; + console.log(value); + + document.querySelector(".output").innerHTML = value; +} +increment() + + +function decrement(){ + let value2 = --num; + console.log(num); + document.querySelector(".output").innerHTML = value2; +} +decrement() + +function onglow(){ + let glow = document.querySelector(".output"); + + if (glow) { // Check if the element exists + if (glow.style.webkitBoxShadow === "" || glow.style.webkitBoxShadow === "none") { + // Apply styles if the box shadow is not applied or is set to "none" + glow.style.backgroundColor = "rgba(46,241,255,0.9)"; + glow.style.webkitBoxShadow = "0px 0px 105px 45px rgba(46,241,255,0.9)"; + + glow.style.transition = "ease-in-out .5s"; + } else { + glow.style.webkitBoxShadow = "none"; + console.log("Stop"); + } + + console.log("clicked"); +} +} + +onglow() +function off(){ + let glow = document.querySelector(".output"); + + if (glow) { // Check if the element exists + if (!glow.style.webkitBoxShadow === "" || glow.style.webkitBoxShadow === "none") { + // Apply styles if the box shadow is not applied or is set to "none" + glow.style.webkitBoxShadow = "none"; + } else { + glow.style.webkitBoxShadow = "none"; + + } + + console.log("clicked2"); +} +} + +off() \ No newline at end of file diff --git a/increment&decrement-js-project/style.css b/increment&decrement-js-project/style.css new file mode 100644 index 0000000..7a5f69b --- /dev/null +++ b/increment&decrement-js-project/style.css @@ -0,0 +1,95 @@ +body{ + margin: 0; + padding: 0; + background-color: #1D2B53; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +.box{ + text-align: center; + margin: 0 auto; + margin-top: 100px; + +} + +.output{ + font-size: 50px; + line-height: 200px; + text-align: center; + margin: 0 auto; + width: 200px; + height: 200px; + /* background-color: rgba(46,241,255,0.9); */ + margin-top: 100px; + border-radius: 100%; + /* -webkit-box-shadow:0px 0px 105px 45px rgba(46,241,255,0.9); +-moz-box-shadow: 0px 0px 105px 45px rgba(46,241,255,0.9); +box-shadow: 0px 0px 105px 45px rgba(46,241,255,0.9); */ +} + +.btnbox{ + text-align: center; + margin: 0 auto; + margin-top: 50px; +} + +.onbtn{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + background-color: #ffee00; + border: none; + width: 150px; + height: 55px; + font-size: 20px; + border-radius: 10px; + cursor: pointer; +} + +.offbtn{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + background-color: #ffffff; + border: none; + width: 150px; + height: 55px; + font-size: 20px; + border-radius: 10px; + margin-right: 100px; + cursor: pointer; +} + + +.decrementbtn{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + background-color: #fe0000; + border: none; + width: 150px; + height: 55px; + font-size: 40px; + border-radius: 10px; + margin-right: 100px; + cursor: pointer; +} + +.decrementbtn:hover{ + -webkit-box-shadow:0px 0px 105px 45px rgba(254,0,0,0.9); + -moz-box-shadow: 0px 0px 105px 45px rgba(254,0,0,0.9); + box-shadow: 0px 0px 105px 45px rgba(254,0,0,0.9); + transition: 1s ease-in-out; +} + +.incrementbtn{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + background-color: #15ff00; + border: none; + width: 150px; + height: 55px; + font-size: 40px; + border-radius: 10px; + cursor: pointer; +} + +.incrementbtn:hover{ + -webkit-box-shadow:0px 0px 105px 45px rgba(21,255,0,0.9); + -moz-box-shadow: 0px 0px 105px 45px rgba(21,255,0,0.9); + box-shadow: 0px 0px 105px 45px rgba(21,255,0,0.9); + transition: 1s ease-in-out; +} \ No newline at end of file