Skip to content

Commit 73e5029

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #508 from VaibhavSuryavanshi93/todo
Todo
2 parents f62f837 + 3c7f0f8 commit 73e5029

File tree

13 files changed

+378
-0
lines changed

13 files changed

+378
-0
lines changed

‎Animated-rainbow/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
### Animated-Rainbow
2+
3+
It's a simple animated Rainbow without using Javascript..
4+
5+
6+
### Used Technologies
7+
* HTML5
8+
* CSS3
9+
10+
11+
12+
#### Steps to Use:
13+
14+
---
15+
16+
- Download or clone the repository
17+
18+
```
19+
git clone https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects.git
20+
```
21+
22+
- Go to the directory
23+
- Run the Rainbow.html file
24+
25+
26+
## Screenshots
27+
![Rainbow](rainbow.png)
28+
![Default View](rainbow.png)

‎Animated-rainbow/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="rainbow.css">
9+
</head>
10+
<body>
11+
<div class="center">
12+
<ul>
13+
<li class="one"></li>
14+
<li class="two"></li>
15+
<li class="three"></li>
16+
<li class="four"></li>
17+
<li class="five"></li>
18+
<li class="six"></li>
19+
<li class="seven"></li>
20+
</ul>
21+
</div>
22+
</body>
23+
</html>

‎Animated-rainbow/rainbow.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background-color: black;
5+
}
6+
7+
.center{
8+
position: absolute;
9+
top: 40%;
10+
left: 50%;
11+
transform: translate(-50%,-50%);
12+
}
13+
14+
ul{
15+
margin: 0;
16+
padding: 0;
17+
position: relative;
18+
width: 400px;
19+
height: 240px;
20+
overflow: hidden;
21+
border-bottom: 1px solid rgba(0,0,0,.2);
22+
}
23+
24+
ul li{
25+
list-style: none;
26+
border-radius: 50%;
27+
border: 15px solid #000;
28+
position: absolute;
29+
top: 100%;
30+
left: 50%;
31+
border-bottom-color: transparent !important;
32+
border-left-color: transparent !important;
33+
box-shadow: 0 0 10px rgba(0,0,0,.5);
34+
animation: animate 5s infinite alternate;
35+
transform: translate(-50%,-50%);
36+
}
37+
38+
.one{
39+
width: 60px;
40+
height: 60px;
41+
border-color:#FF0000;
42+
animation-delay: .2s;
43+
animation-duration: 5s;
44+
animation-name: animate;
45+
}
46+
47+
.two{
48+
width: 90px;
49+
height: 90px;
50+
border-color:#FF7F00;
51+
animation-delay: .4s;
52+
animation-duration: 5s;
53+
animation-name: animate;
54+
}
55+
56+
.three{
57+
width: 120px;
58+
height: 120px;
59+
border-color:#FFFF00;
60+
animation-delay: .6s;
61+
animation-duration: 5s;
62+
animation-name: animate;
63+
}
64+
65+
.four{
66+
width: 150px;
67+
height: 150px;
68+
border-color:#00FF00;
69+
animation-delay: .8s;
70+
animation-duration: 5s;
71+
animation-name: animate;
72+
}
73+
74+
.five{
75+
width: 180px;
76+
height: 180px;
77+
border-color:#0000FF;
78+
animation-delay: 1s;
79+
animation-duration: 5s;
80+
animation-name: animate;
81+
}
82+
83+
.six{
84+
width: 210px;
85+
height: 210px;
86+
border-color:#4B0082;
87+
animation-delay: 1.2s;
88+
animation-duration: 5s;
89+
animation-name: animate;
90+
}
91+
92+
.seven{
93+
width: 240px;
94+
height: 240px;
95+
border-color:#9400D3;
96+
animation-delay: 1.4s;
97+
animation-duration: 5s;
98+
animation-name: animate;
99+
}
100+
101+
@keyframes animate{
102+
0%{
103+
transform: translate(-50%,-50%) rotate(-45deg);
104+
}
105+
106+
100%{
107+
transform: translate(-50%,-50%) rotate(315deg);
108+
}
109+
}

‎Animated-rainbow/rainbow.png

17.3 KB
Loading

‎Index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,6 @@
148148
|[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
149149
|[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.
150150
|[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.
151+
|[Animated-rainbow](https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects/tree/main/Animated-rainbow) | it is a animated rainbow .
152+
153+
|[To-do](https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects/tree/main/To-do) it's a to-do web.

‎To-do/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# To-do
2+
A to-do list is a concise tool for organizing tasks, prioritizing work, and boosting productivity by providing a clear roadmap for completing activities.
3+
4+
### Use of the Project:
5+
A to-do project succinctly organizes tasks, streamlining prioritization and workflow for efficient project management.
6+
7+
### Used Technologies
8+
* HTML5
9+
* CSS3
10+
* JavaScript
11+
12+
13+
#### Steps to Use:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/VaibhavSuryavanshi93/To-do
21+
```
22+
23+
- Go to the directory
24+
- Run the to-do file
25+
- Start Doing..!!
26+
---
27+
28+
## Screenshots
29+
![to-do](to-do.png)
30+

‎To-do/checked.png

22.3 KB
Loading

‎To-do/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="todo-app">
12+
<h2>To-Do List <img src="todo.png" alt=""></h2>
13+
<div class="row">
14+
<input type="text" id="input-box" placeholder="Please add your text here..">
15+
<button onclick="addTask()" class="add">Add</button>
16+
</div>
17+
<ul id="list-container">
18+
</ul>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
23+
</body>
24+
</html>

‎To-do/script.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const inputBox = document.getElementById("input-box");
2+
const listContainer = document.getElementById("list-container");
3+
4+
5+
function addTask(event){
6+
event.preventDefault();
7+
8+
if(inputBox.value === ''){
9+
alert("You must write something!");
10+
}else{
11+
let li = document.createElement("li");
12+
li.innerHTML = inputBox.value;
13+
listContainer.appendChild(li);
14+
let span = document.createElement("span");
15+
span.innerHTML = "\u00d7";
16+
li.appendChild(span);
17+
}
18+
inputBox.value = '';
19+
20+
21+
}
22+
// Hello it's me Vaibhav suryavanshi please dont copy my code!!
23+
24+
listContainer.addEventListener("click", function(e){
25+
if(e.target.tagName === "LI"){
26+
e.target.classList.toggle("checked");
27+
saveData();
28+
}
29+
else if(e.target.tagName === "SPAN"){
30+
e.target.parentElement.remove();
31+
saveData();
32+
33+
}
34+
},false)
35+
36+
inputBox.addEventListener("keydown", function (e) {
37+
if (e.key === "Enter") {
38+
addTask(e);
39+
saveData();
40+
}
41+
});
42+
43+
document.querySelector(".add").addEventListener("click", function(e){
44+
addTask(e);
45+
saveData();
46+
});
47+
48+
function saveData(){
49+
localStorage.setItem("data", listContainer.innerHTML);
50+
}
51+
function showTask(){
52+
listContainer.innerHTML = localStorage.getItem("data");
53+
}
54+
showTask();

‎To-do/style.css

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
min-height: 100vh;
10+
background: linear-gradient(135deg, #1e1bba, #1f5f08 );
11+
padding: 10px;
12+
13+
}
14+
.todo-app{
15+
width: 100%;
16+
max-width: 540px;
17+
background: white;
18+
margin: 40px auto 70px;
19+
padding: 40px 30px 70px;
20+
border-radius: 10px;
21+
}
22+
.todo-app h2{
23+
color: #002765;
24+
display: flex;
25+
align-items: center;
26+
margin-bottom: 20px;
27+
}
28+
29+
.todo-app img{
30+
width: 6vh;
31+
margin-left: 10px;
32+
}
33+
.row{
34+
display: flex;
35+
align-items: center;
36+
justify-content: space-between;
37+
background: #edeef0;
38+
border-radius: 30px;
39+
padding-left: 20px;
40+
margin-bottom: 25px;
41+
42+
}
43+
input{
44+
flex: 1;
45+
border: none;
46+
outline: none;
47+
background: transparent;
48+
padding: 10px;
49+
font-weight: 14px;
50+
51+
}
52+
.add {
53+
border: none;
54+
outline: none;
55+
padding: 16px 50px;
56+
background: orangered;
57+
color: #fff;
58+
border-radius: 40px;
59+
font-size: 16px;
60+
cursor: pointer;
61+
62+
}
63+
ul li{
64+
list-style: none;
65+
font-size: 17px;
66+
padding: 12px 8px 12px 50px;
67+
user-select: none;
68+
cursor: pointer;
69+
position: relative;
70+
71+
}
72+
73+
ul li::before{
74+
content: '';
75+
position: absolute;
76+
height: 28px;
77+
width: 28px;
78+
border-radius: 50%;
79+
background-image: url(uncheck.png);
80+
background-size: cover;
81+
background-position: center;
82+
top: 12px;
83+
left: 8px;
84+
}
85+
ul li.checked{
86+
color: #555;
87+
text-decoration: line-through;
88+
89+
}
90+
ul li.checked::before{
91+
background-image: url(checked.png);
92+
}
93+
ul li span{
94+
position: absolute;
95+
right: 0px;
96+
top: 5px;
97+
width: 40px;
98+
height: 40px;
99+
font-size: 22px;
100+
color: #555;
101+
line-height: 40px;
102+
border-radius: 50px;
103+
text-align: center;
104+
}
105+
ul li span:hover{
106+
background-color: #edeef0;
107+
}

0 commit comments

Comments
 (0)