Merge pull request #508 from VaibhavSuryavanshi93/todo

Todo
Ayushparikh-code · Sep 17, 2024 · 73e5029 · 73e5029
2 parents f62f837 + 3c7f0f8
commit 73e5029
Show file tree

Hide file tree

Showing 13 changed files with 378 additions and 0 deletions.
diff --git a/Animated-rainbow/README.md b/Animated-rainbow/README.md
@@ -0,0 +1,28 @@
+### Animated-Rainbow
+
+It's a simple animated Rainbow without using Javascript..
+
+
+### Used Technologies
+  * HTML5
+  * CSS3
+
+
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the Rainbow.html file
+
+
+## Screenshots 
+![Rainbow](rainbow.png)
+![Default View](rainbow.png)
diff --git a/Animated-rainbow/index.html b/Animated-rainbow/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="rainbow.css">
+</head>
+<body>
+  <div class="center">
+    <ul>
+      <li class="one"></li>
+      <li class="two"></li>
+      <li class="three"></li>
+      <li class="four"></li>
+      <li class="five"></li>
+      <li class="six"></li>
+      <li class="seven"></li>
+    </ul>
+  </div>
+</body>
+</html>
diff --git a/Animated-rainbow/rainbow.css b/Animated-rainbow/rainbow.css
@@ -0,0 +1,109 @@
+body{
+    margin: 0;
+    padding: 0;
+    background-color: black;
+  }
+
+  .center{
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  ul{
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 400px;
+    height: 240px;
+    overflow: hidden;
+    border-bottom: 1px solid rgba(0,0,0,.2);
+  }
+
+  ul li{
+    list-style: none;
+    border-radius: 50%;
+    border: 15px solid #000;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    border-bottom-color: transparent !important;
+    border-left-color: transparent !important;
+    box-shadow: 0 0 10px rgba(0,0,0,.5);
+    animation: animate 5s infinite alternate;
+    transform: translate(-50%,-50%);
+  }
+
+  .one{
+    width: 60px;
+    height: 60px;
+    border-color:#FF0000;
+    animation-delay: .2s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .two{
+    width: 90px;
+    height: 90px;
+    border-color:#FF7F00;
+    animation-delay: .4s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .three{
+    width: 120px;
+    height: 120px;
+    border-color:#FFFF00;
+    animation-delay: .6s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .four{
+    width: 150px;
+    height: 150px;
+    border-color:#00FF00;
+    animation-delay: .8s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .five{
+    width: 180px;
+    height: 180px;
+    border-color:#0000FF;
+    animation-delay: 1s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .six{
+    width: 210px;
+    height: 210px;
+    border-color:#4B0082;
+    animation-delay: 1.2s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .seven{
+    width: 240px;
+    height: 240px;
+    border-color:#9400D3;
+    animation-delay: 1.4s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  @keyframes animate{
+    0%{
+      transform: translate(-50%,-50%) rotate(-45deg);
+    }
+
+    100%{
+      transform: translate(-50%,-50%) rotate(315deg);
+    }
+  }
diff --git a/Animated-rainbow/rainbow.png b/Animated-rainbow/rainbow.png
diff --git a/Index.md b/Index.md
@@ -148,3 +148,6 @@
 |[Interactive Pricing Component](https://github.com/Ahsan-Ehtesham/Web-dev-mini-projects/tree/ahsan/Interactive%20Pricing%20Component)| Interactive Pricing Component using HTML, CSS and JS
 |[Typing champ](https://github.com/FaizaAbdullah-code/Web-dev-mini-projects/tree/faiza/Typing-champ)| One page website for speed checking using HTML, CSS and JS.
 |[Height Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Height%20Converter)|Webpage used to converting one form of height to other.
+|[Animated-rainbow](https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects/tree/main/Animated-rainbow) | it is a animated rainbow .
+
+|[To-do](https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects/tree/main/To-do) it's a to-do web. 
diff --git a/To-do/README.md b/To-do/README.md
@@ -0,0 +1,30 @@
+# To-do
+A to-do list is a concise tool for organizing tasks, prioritizing work, and boosting productivity by providing a clear roadmap for completing activities.
+
+### Use of the Project:
+A to-do project succinctly organizes tasks, streamlining prioritization and workflow for efficient project management.
+
+### Used Technologies
+  * HTML5
+  * CSS3
+  * JavaScript
+
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/VaibhavSuryavanshi93/To-do
+```
+
+- Go to the directory
+- Run the to-do file
+- Start Doing..!!
+--- 
+
+## Screenshots 
+![to-do](to-do.png)
+
diff --git a/To-do/checked.png b/To-do/checked.png
diff --git a/To-do/index.html b/To-do/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="todo-app">
+            <h2>To-Do List <img src="todo.png" alt=""></h2>
+            <div class="row">
+                <input type="text" id="input-box" placeholder="Please add your text here..">
+                <button onclick="addTask()" class="add">Add</button> 
+            </div>
+            <ul id="list-container">
+            </ul>        
+        </div>
+    </div>
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/To-do/script.js b/To-do/script.js
@@ -0,0 +1,54 @@
+const inputBox = document.getElementById("input-box");
+const listContainer = document.getElementById("list-container");
+
+
+function addTask(event){
+    event.preventDefault();
+
+    if(inputBox.value === ''){
+        alert("You must write something!");
+    }else{ 
+        let li = document.createElement("li");
+        li.innerHTML = inputBox.value;
+        listContainer.appendChild(li);
+        let span = document.createElement("span");
+        span.innerHTML = "\u00d7";
+        li.appendChild(span);
+    }
+    inputBox.value = '';
+
+
+}
+    // Hello it's me Vaibhav suryavanshi please dont copy my code!!
+
+listContainer.addEventListener("click", function(e){
+    if(e.target.tagName === "LI"){
+        e.target.classList.toggle("checked");
+        saveData();
+    }
+    else if(e.target.tagName === "SPAN"){
+        e.target.parentElement.remove();
+        saveData();
+
+    }
+},false)
+
+inputBox.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") {
+        addTask(e);
+        saveData();
+    }
+});
+
+document.querySelector(".add").addEventListener("click", function(e){
+    addTask(e);
+    saveData();
+});
+
+function saveData(){
+    localStorage.setItem("data", listContainer.innerHTML);
+}
+function showTask(){
+    listContainer.innerHTML = localStorage.getItem("data");
+}
+showTask();
diff --git a/To-do/style.css b/To-do/style.css
@@ -0,0 +1,107 @@
+ *{
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    box-sizing: border-box;
+ }
+ .container{
+    width: 100%;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #1e1bba,  #1f5f08 ); 
+    padding: 10px;
+
+ }
+ .todo-app{
+    width: 100%;
+    max-width: 540px;
+    background: white;
+    margin: 40px auto 70px;
+    padding: 40px 30px 70px;
+    border-radius: 10px;
+ }
+ .todo-app h2{
+    color: #002765;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+ }
+
+ .todo-app img{
+    width: 6vh;
+    margin-left: 10px;
+ }
+.row{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #edeef0;
+    border-radius: 30px;
+    padding-left: 20px;
+    margin-bottom: 25px;
+
+}
+input{
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 10px;
+    font-weight: 14px;
+
+}
+.add {
+   border: none;
+   outline: none;
+   padding: 16px 50px;
+   background: orangered;
+   color: #fff;
+   border-radius: 40px;
+   font-size: 16px;
+   cursor: pointer;
+
+}
+ul li{
+   list-style: none;
+   font-size: 17px;
+   padding: 12px 8px 12px 50px;
+   user-select: none;
+   cursor: pointer;
+   position: relative;
+
+}
+
+ul li::before{
+   content: '';
+   position: absolute;
+   height: 28px;
+   width: 28px;
+   border-radius: 50%;
+   background-image: url(uncheck.png);
+   background-size: cover;
+   background-position: center;
+   top: 12px;
+   left: 8px;
+}
+ul li.checked{
+   color: #555;
+   text-decoration: line-through;
+
+}
+ul li.checked::before{
+   background-image: url(checked.png);
+}
+ul li span{
+   position: absolute;
+   right: 0px;
+   top: 5px;
+   width: 40px;
+   height: 40px;
+   font-size: 22px;
+   color: #555;
+   line-height: 40px;
+   border-radius: 50px;
+   text-align: center;
+}
+ul li span:hover{
+   background-color: #edeef0;
+}
diff --git a/To-do/to-do.png b/To-do/to-do.png
diff --git a/To-do/todo.png b/To-do/todo.png
diff --git a/To-do/uncheck.png b/To-do/uncheck.png