diff --git a/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/index.html b/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/index.html
new file mode 100644
index 0000000..b33ff2d
--- /dev/null
+++ b/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/index.html
@@ -0,0 +1,15 @@
+
+
+
+ Click Count
+
+
+
+
+
+
+
+
Box Clicked 0 times
+
+
+
\ No newline at end of file
diff --git a/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/script.js b/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/script.js
new file mode 100644
index 0000000..868cc68
--- /dev/null
+++ b/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/script.js
@@ -0,0 +1,9 @@
+var box = document.getElementById('box');
+var clickCount = document.getElementById('click-count');
+count = 0;
+
+box.addEventListener('click', function(){
+ count++;
+ console.log(count);
+ clickCount.innerText = count + " ";
+});
\ No newline at end of file
diff --git a/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/style.css b/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/style.css
new file mode 100644
index 0000000..81c88ad
--- /dev/null
+++ b/Count Clicks using pure HTML, CSS , JavaScript/Click Counter/style.css
@@ -0,0 +1,15 @@
+#box {
+ height: 250px;
+ width: 250px;
+ background-color: red;
+ margin: 100px auto;
+ cursor: pointer;
+}
+
+#box:hover {
+ box-shadow: 0px 0px 30px grey;
+}
+
+h1 {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/Single Digit Up Counter/Image.png b/Single Digit Up Counter/Image.png
new file mode 100644
index 0000000..3e2f052
Binary files /dev/null and b/Single Digit Up Counter/Image.png differ
diff --git a/Single Digit Up Counter/README.md b/Single Digit Up Counter/README.md
new file mode 100644
index 0000000..720fcd8
--- /dev/null
+++ b/Single Digit Up Counter/README.md
@@ -0,0 +1,12 @@
+
+# Single Digit Up Counter
+
+
+You might have seen a timer on a websites or atleast on your phone.
+ we are also going to create a wonderful timer ourselves.
+ The Counter starts from zero and ends at some number which the user enters in the input. The ipput only takes a number.
+ We will create a small counter , for now, that can only go from one to nine. Handle all possible cases when the "start Counter" button can be clicked.
+
+
+## Screenshot
+
diff --git a/Single Digit Up Counter/index.html b/Single Digit Up Counter/index.html
new file mode 100644
index 0000000..415c64d
--- /dev/null
+++ b/Single Digit Up Counter/index.html
@@ -0,0 +1,26 @@
+
+
+
+ Up Counter
+
+
+
+
+
+
+
Enter Value From 1 and 9
+
+
+
+
+
+
+
+
+
0
+
1
+
+
+
+
+
\ No newline at end of file
diff --git a/Single Digit Up Counter/script.js b/Single Digit Up Counter/script.js
new file mode 100644
index 0000000..5757162
--- /dev/null
+++ b/Single Digit Up Counter/script.js
@@ -0,0 +1,60 @@
+var countInterval;
+
+
+function startCounter() {
+
+ var number = parseInt(document.getElementById("number").value);
+
+ if (isNaN(number)) {
+ alert("Please enter a number");
+ clearInterval(countInterval); // This is important for the condition when a counter is running and you entered a wrong input for a new counter
+ return;
+ }
+ if (number < 1 || number > 9) {
+ alert("Range out of bounds");
+ clearInterval(countInterval);
+ return;
+ }
+
+ var currentNo = document.querySelector(".counter .current");
+ var nextNo = document.querySelector(".counter .next");
+ var count = 0;
+
+ // If user clicks on 'Start Counter' button again - remove this function and below 2 lines if you don't consider this situation
+ resetNumbers(currentNo, nextNo);
+
+ // Clears the previous interval that was running
+ clearInterval(countInterval);
+
+ countInterval = setInterval(function () {
+ if (count === number) {
+ clearInterval(countInterval);
+ alert("Counter has stopped");
+ return;
+ }
+ increaseCount(currentNo, nextNo);
+ count++;
+ }, 1000);
+
+}
+
+
+
+function resetNumbers(currentNo, nextNo, end) {
+ currentNo.innerText = 0;
+ nextNo.innerText = 1;
+}
+
+
+
+function increaseCount(currentNo, nextNo) {
+
+ nextNo.classList.add("animate");
+
+ setTimeout(function () {
+ currentNo.innerText = nextNo.innerText;
+ nextNo.classList.remove("animate");
+ nextNo.innerText = parseInt(nextNo.innerText) + 1;
+ }, 500);
+
+}
diff --git a/Single Digit Up Counter/style.css b/Single Digit Up Counter/style.css
new file mode 100644
index 0000000..e780e33
--- /dev/null
+++ b/Single Digit Up Counter/style.css
@@ -0,0 +1,88 @@
+body {
+ background-color: #d8f8ff;
+ font-family: sans-serif;
+ margin: 50px;
+}
+
+#counter-value {
+ padding: 40px 0;
+ margin: 50px 0;
+ background-image: linear-gradient(45deg, #a4f2f2, #efa7d7);
+ text-align: center;
+}
+
+#counter-value p {
+ color:white;
+ font-weight: bold;
+ font-size: 1.2rem;
+ word-spacing: 1rem;
+ letter-spacing: 0.5rem;
+
+}
+
+#input-range {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 50px;
+}
+
+#input-range input {
+
+ font-size: 1rem;
+ padding: 10px;
+ width: 30%;
+}
+
+#input-range button {
+ padding: 10px 15px;
+ font-size: 1rem;
+ border: none;
+ font-weight: bold;
+ cursor: pointer;
+ box-shadow: 0px 5px 20px white;
+ border-radius: 20px;
+}
+
+
+
+
+#counter-container {
+ background-color: #555555;
+ height: 200px;
+ width: 80%;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+}
+
+.counter {
+ display: inline-block;
+ background-color: aliceblue;
+ width: 15%;
+ max-width: 80px;
+ height: 80px;
+ margin: auto 10px;
+ box-shadow: 0px 0px 5px white;
+ position: relative;
+ overflow: hidden;
+}
+
+.counter p {
+ font-size: 3rem;
+ text-align: center;
+ margin: 0;
+ width: 100%;
+ line-height: 80px;
+ border-top: 2px solid black;
+ background-color: aliceblue;
+}
+
+p.next {
+ position: absolute;
+ top: 80px;
+}
+
+p.animate {
+ transition-duration: 0.5s;
+ top: 0px;
+}