diff --git a/Animated-rainbow/README.md b/Animated-rainbow/README.md new file mode 100644 index 000000000..9cc3cb86b --- /dev/null +++ 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 new file mode 100644 index 000000000..90a364463 --- /dev/null +++ b/Animated-rainbow/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + +
+ +
+ + \ No newline at end of file diff --git a/Animated-rainbow/rainbow.css b/Animated-rainbow/rainbow.css new file mode 100644 index 000000000..b0b1e5c53 --- /dev/null +++ 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); + } + } \ No newline at end of file diff --git a/Animated-rainbow/rainbow.png b/Animated-rainbow/rainbow.png new file mode 100644 index 000000000..78324eef3 Binary files /dev/null and b/Animated-rainbow/rainbow.png differ diff --git a/Index.md b/Index.md index c9efdac21..ec8115031 100644 --- 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. \ No newline at end of file diff --git a/To-do/README.md b/To-do/README.md new file mode 100644 index 000000000..ef66a1531 --- /dev/null +++ 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 new file mode 100644 index 000000000..99e5de2e0 Binary files /dev/null and b/To-do/checked.png differ diff --git a/To-do/index.html b/To-do/index.html new file mode 100644 index 000000000..e13ee67d5 --- /dev/null +++ b/To-do/index.html @@ -0,0 +1,24 @@ + + + + + + Document + + + +
+
+

To-Do List

+
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/To-do/script.js b/To-do/script.js new file mode 100644 index 000000000..af1e9d5e1 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/To-do/style.css b/To-do/style.css new file mode 100644 index 000000000..6174b0043 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/To-do/to-do.png b/To-do/to-do.png new file mode 100644 index 000000000..46ab5494d Binary files /dev/null and b/To-do/to-do.png differ diff --git a/To-do/todo.png b/To-do/todo.png new file mode 100644 index 000000000..6f92914f8 Binary files /dev/null and b/To-do/todo.png differ diff --git a/To-do/uncheck.png b/To-do/uncheck.png new file mode 100644 index 000000000..a2bed9c9f Binary files /dev/null and b/To-do/uncheck.png differ