From 66921cf47082fed39dcdef9934e6c7bb78fb6037 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <98731119+thekrabhishek@users.noreply.github.com>
Date: Fri, 20 Sep 2024 00:00:41 +0530
Subject: [PATCH] Initial commit
---
.gitattributes | 2 +
README.md | 2 +
index.html | 29 ++++++++++++
script.js | 47 ++++++++++++++++++++
styles.css | 118 +++++++++++++++++++++++++++++++++++++++++++++++++
5 files changed, 198 insertions(+)
create mode 100644 .gitattributes
create mode 100644 README.md
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 styles.css
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c6ee784
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# todo
+ todo list
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..09b8853
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
Todo List
+
+
+
+
+
+
+
+
+
+
+
+
${name}
+ ${dueDate}
+
+ `;
+ todoListHTML += html;
+ }
+
+ document.querySelector('.js-todo-list')
+ .innerHTML = todoListHTML;
+ }
+
+ function addTodo() {
+ const inputElement = document.querySelector('.js-name-input');
+ const name = inputElement.value.trim();
+
+ const dateInputElement = document.querySelector('.js-due-date-input');
+ const dueDate = dateInputElement.value;
+ if (name === '' || dueDate === '') {
+ alert('Please enter both task name and due date.');
+ return;
+ }
+
+ todoList.push({
+
+ name,
+ dueDate
+ });
+
+ inputElement.value = '';
+
+ renderTodoList();
+ }
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..5a8018c
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,118 @@
+/* Base styling */
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f5f7fa;
+}
+
+.container {
+ max-width: 800px;
+ margin: 50px auto;
+ background-color: white;
+ padding: 30px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Styling for heading */
+p {
+ font-size: 24px;
+ font-weight: bold;
+ color: #2c3e50;
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+/* Input fields and button grid */
+.todo-input-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr auto;
+ column-gap: 10px;
+ row-gap: 10px;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+/* Responsive grid for todo items */
+.todo-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr auto;
+ column-gap: 10px;
+ row-gap: 10px;
+ align-items: center;
+}
+
+.name-input,
+.due-date-input {
+ font-size: 15px;
+ padding: 8px;
+ border: 1px solid #bdc3c7;
+ border-radius: 5px;
+ color: #2c3e50;
+}
+
+.add-todo-button {
+ background-color: #27ae60;
+ color: white;
+ border: none;
+ font-size: 15px;
+ cursor: pointer;
+ padding: 8px 12px;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+}
+
+.add-todo-button:hover {
+ background-color: #2ecc71;
+}
+
+.delete-todo-button {
+ background-color: #e74c3c;
+ color: white;
+ border: none;
+ font-size: 15px;
+ cursor: pointer;
+ padding: 8px 12px;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+}
+
+.delete-todo-button:hover {
+ background-color: #c0392b;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ .container {
+ padding: 20px;
+ }
+
+ .todo-input-grid,
+ .todo-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .add-todo-button, .delete-todo-button {
+ width: 100%;
+ }
+}
+
+/* Media query for small devices */
+@media (max-width: 480px) {
+ p {
+ font-size: 20px;
+ }
+
+ .name-input,
+ .due-date-input,
+ .add-todo-button,
+ .delete-todo-button {
+ font-size: 14px;
+ padding: 6px;
+ }
+
+ .todo-input-grid {
+ row-gap: 10px;
+ }
+}