Skip to content

Commit cd7cade

Browse files
SagarGuptaXSagarGuptaX
authored
Add files via upload
0 parents  commit cd7cade

File tree

3 files changed

+525
-0
lines changed

3 files changed

+525
-0
lines changed

‎001c.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>To Do List & Note Taking App</title>
8+
9+
<link rel="stylesheet" href="002d.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
11+
</head>
12+
<body>
13+
<div id="main-screen">
14+
<h1 id="choose-text">So what's the plan for today?</h1>
15+
<button id="todo-section-btn">Make a To-Do List</button>
16+
<button id="notes-section-btn">Take some Notes</button>
17+
</div>
18+
<div id="todo-section" class="hidden">
19+
<button class="back-btn" onclick="goBackToMain()">Back</button>
20+
<div class="container">
21+
<div class="input-container">
22+
<h1>My To Do List</h1>
23+
<input type="text" placeholder="Add a new to do..." id="inputBox">
24+
<input type="button" value="Add" id="addBtn">
25+
</div>
26+
<ul class="todoList" id="todoList"></ul>
27+
</div>
28+
</div>
29+
<div id="notes-section" class="hidden">
30+
<button class="back-btn" onclick="goBackToMain()">Back</button>
31+
<div id="container">
32+
<div id="list-header">
33+
<div id="addNoteDiv" onclick="popup()">
34+
<i class="fa-solid fa-plus"></i>
35+
</div>
36+
<div class="blankDiv"></div>
37+
<div class="blankDiv"></div>
38+
</div>
39+
<div id="list-container">
40+
<ul id="notes-list"></ul>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
46+
<script src="003c.js"></script>
47+
</body>
48+
</html>

‎002d.css

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
/* General Styles */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: 'Poppins', sans-serif;
9+
}
10+
11+
body {
12+
background-color: rgb(232, 238, 238);
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
min-height: 100vh;
18+
background: linear-gradient(135deg, #8e44ad, #3498db);
19+
color: white; /* Ensure text contrasts the background */
20+
}
21+
22+
/* Main Screen */
23+
#main-screen {
24+
text-align: center;
25+
padding: 20px;
26+
}
27+
28+
#main-screen button {
29+
padding: 15px 30px;
30+
margin: 10px;
31+
font-size: 1.5em;
32+
cursor: pointer;
33+
border: none;
34+
border-radius: 5px;
35+
background-color: #8c53ff;
36+
color: white;
37+
}
38+
39+
#main-screen button:hover {
40+
background-color: #6e44bd;
41+
}
42+
43+
#choose-text {
44+
font-size: 3em;
45+
margin-bottom: 20px;
46+
}
47+
48+
/* Back Button */
49+
.back-btn {
50+
position: absolute;
51+
top: 20px;
52+
left: 20px;
53+
padding: 10px 20px;
54+
background-color: #3498db;
55+
color: white;
56+
border: none;
57+
border-radius: 5px;
58+
font-size: 16px;
59+
cursor: pointer;
60+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
61+
}
62+
63+
.back-btn:hover {
64+
background-color: #2980b9;
65+
}
66+
67+
/* To Do List */
68+
.container {
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: center;
72+
align-items: center;
73+
margin-top: 20px;
74+
}
75+
76+
.input-container {
77+
width: 100%;
78+
max-width: 500px;
79+
text-align: center;
80+
padding: 20px;
81+
}
82+
83+
.input-container input {
84+
border: none;
85+
outline: none;
86+
padding: 12px;
87+
margin-block: 12px;
88+
border-radius: 4px;
89+
font-size: 16px;
90+
color: black; /* Text color for user input */
91+
}
92+
93+
.input-container input[type="text"] {
94+
width: 70%;
95+
}
96+
97+
.input-container input[type="button"] {
98+
background-color: #3da33d;
99+
color: #fff;
100+
font-weight: 700;
101+
margin-left: 8px;
102+
cursor: pointer;
103+
padding: 12px 24px;
104+
}
105+
106+
.input-container input[type="button"]:hover {
107+
background-color: #60b160;
108+
}
109+
110+
ul.todoList {
111+
width: 70%;
112+
max-width: 450px;
113+
overflow-wrap: break-word; /* Ensures text stays inside */
114+
word-wrap: break-word; /* Ensures text stays inside */
115+
word-break: break-word; /* Added to further break words if necessary */
116+
white-space: normal; /* Ensures long text wraps to next line */
117+
}
118+
119+
ul.todoList li {
120+
list-style-type: none;
121+
cursor: pointer;
122+
margin-block-end: 12px;
123+
border-radius: 8px;
124+
border: 1px solid #a19f9f;
125+
padding: 6px 12px;
126+
background-color: #ffffff;
127+
display: flex;
128+
align-items: center;
129+
justify-content: space-between;
130+
transition: background-color 0.5s;
131+
color: black; /* Text color for todo items */
132+
}
133+
134+
ul.todoList li:hover {
135+
background-color: #cbcaca;
136+
}
137+
138+
ul.todoList li p {
139+
flex-grow: 1;
140+
padding: 2px;
141+
}
142+
143+
/* Notes Section */
144+
#container {
145+
background-color: #fff;
146+
border-radius: 8px;
147+
box-shadow: 0px 10px 15px 10px rgba(0, 0, 0, 0.3);
148+
overflow: hidden;
149+
width: 827px;
150+
height: 600px;
151+
padding: 20px;
152+
box-sizing: border-box;
153+
text-align: center;
154+
overflow-y: scroll;
155+
margin-top: 20px;
156+
}
157+
158+
ul#notes-list {
159+
list-style-type: none;
160+
padding: 0;
161+
margin: 0;
162+
display: flex;
163+
flex-wrap: wrap;
164+
justify-content: left; /* Aligns notes to the left */
165+
}
166+
167+
ul#notes-list li {
168+
background-color: #ffcc00; /* Bold yellow */
169+
margin: 10px;
170+
padding: 15px;
171+
border-radius: 8px;
172+
display: flex;
173+
flex-direction: column;
174+
align-items: center;
175+
justify-content: space-between;
176+
height: 200px;
177+
width: 200px;
178+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
179+
overflow: hidden; /* Ensures text stays inside */
180+
overflow-wrap: break-word;
181+
word-wrap: break-word;
182+
color: black; /* Text color for notes */
183+
}
184+
185+
ul#notes-list li span {
186+
text-align: left;
187+
overflow-y: scroll;
188+
max-height: 150px;
189+
padding: 5px;
190+
scrollbar-color: #3498db white;
191+
scrollbar-width: thin;
192+
}
193+
194+
#addNoteDiv {
195+
background-color: #f9f9f9;
196+
border: 1px solid #ddd;
197+
padding: 60px; /* Padding remains the same */
198+
border-radius: 8px;
199+
height: 300px; /* Original size */
200+
width: 300px; /* Original size */
201+
margin: 10px;
202+
cursor: pointer;
203+
display: flex;
204+
justify-content: center;
205+
align-items: center;
206+
}
207+
208+
#addNoteDiv:hover {
209+
background-color: #f1f1f1;
210+
transition: 0.25s;
211+
}
212+
213+
#addNoteDiv i {
214+
font-size: 70px;
215+
color: #8c53ff; /* Ensure icon is visible */
216+
}
217+
218+
.hidden {
219+
display: none;
220+
}

0 commit comments

Comments
 (0)