Skip to content

To-do list #208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aditya-Yadav4 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

To-do list #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions tpp1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
width: 80%;
max-width: 800px;
margin: auto;
}

h2 {
text-align: center;
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

table, th, td {
border: 3px double black;
}

th, td {
padding: 15px;
text-align: center;
font-size: 18px;
}

th {
background-color: #f0f0f0;
}

td {
background-color: #fff;
}

thead th {
background-color: #f0f0f0;
font-weight: bold;
}

tbody th {
background-color: #f0f0f0;
font-weight: bold;
}
62 changes: 62 additions & 0 deletions tpp1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<link rel="stylesheet" href="tpp1.css">
</head>
<body>
<div class="container">
<h2 class="text-center">Timetable</h2>
<table>
<thead>
<tr>
<th></th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thurs</th>
<th>fri</th>
</tr>
</thead>
<tbody>

<tr>
<th rowspan="6">hours</th>
<td class="subject-science">science</td>
<td class="subject-maths">maths</td>
<td class="subject-science">science</td>
<td class="subject-maths">maths</td>
<td class="subject-arts">arts</td>
</tr>
<tr>
<td class="subject-social">social</td>
<td class="subject-hindi">hindi</td>
<td class="subject-english">english</td>
<td class="subject-social">social</td>
<td class="subject-sports">sports</td>
</tr>
<tr>
<th colspan="6">lunch</th>
</tr>
<tr>
<td class="subject-social">social</td>
<td class="subject-hindi">hindi</td>
<td class="subject-english">english</td>
<td class="subject-social">social</td>
<td rowspan="4" class="subject-project">project</td>
</tr>

<tr>
<td class="subject-science">science</td>
<td class="subject-maths">maths</td>
<td class="subject-science">science</td>
<td class="subject-maths">maths</td>

</tr>
</tbody>
</table>
</div>
</body>
</html>
76 changes: 76 additions & 0 deletions tpp2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@

body {
font-family: Arial, sans-serif;
margin: 20px;
}
nav {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
button {
padding: 8px 12px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 4px;
color: white;
}
#addTaskBtn {
background-color: #4CAF50;
}
#deleteAllBtn {
background-color: #f44336;
}
#addTaskForm {
display: none;
margin-top: 10px;
}
#addTaskForm label {
display: block;
margin-top: 8px;
font-weight: bold;
}
#addTaskForm input {
width: 100%;
padding: 8px;
margin-top: 4px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
.task {
margin: 5px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
display: flex;
flex-direction: column;
}
.task button {
align-self: flex-start;
margin-top: 10px;
background: #ff4d4d;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.task button:hover {
background: #ff1a1a;
}
#addTaskForm button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}


#addTaskForm button:hover {
background-color: #555;
}
43 changes: 43 additions & 0 deletions tpp2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List with Navbar</title>
<link rel="stylesheet" href="tpp2.css">
</head>
<body>
<h2> To-Do List</h2>

<nav id="navbar">
<button id="addTaskBtn">Add Task</button>
<button id="deleteAllBtn">Delete All</button>
</nav>




<div id="addTaskForm">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" required />

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required />

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" required />

<label for="taskInput">Task Description:</label>
<input type="text" id="taskInput" placeholder="Enter your task" required />

<button onclick="addTask()">Submit Task</button>
</div>


<div id="todoList"></div>


<script src="tpp2.js"></script>

</body>
</html>
67 changes: 67 additions & 0 deletions tpp2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@

const addTaskBtn = document.getElementById('addTaskBtn');
const deleteAllBtn = document.getElementById('deleteAllBtn');
const addTaskForm = document.getElementById('addTaskForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const dobInput = document.getElementById('dob');
const taskInput = document.getElementById('taskInput');
const todoList = document.getElementById('todoList');

addTaskBtn.addEventListener('click', () => {
addTaskForm.style.display = addTaskForm.style.display === 'none' ? 'block' : 'none';
nameInput.value = '';
emailInput.value = '';
dobInput.value = '';
taskInput.value = '';
});


deleteAllBtn.addEventListener('click', () => {
todoList.innerHTML = '';
});


function addTask() {
const name = nameInput.value.trim();
const email = emailInput.value.trim();
const dob = dobInput.value;
const taskText = taskInput.value.trim();

if (name && email && dob && taskText) {

const taskDiv = document.createElement('div');
taskDiv.classList.add('task');

const taskDetails = document.createElement('div');
taskDetails.innerHTML = `
<strong>Name:</strong> ${name} <br>
<strong>Email:</strong> ${email} <br>
<strong>Date of Birth:</strong> ${dob} <br>
<strong>Task:</strong> ${taskText}
`;


const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', () => {
todoList.removeChild(taskDiv);
});


taskDiv.appendChild(taskDetails);
taskDiv.appendChild(deleteBtn);


todoList.appendChild(taskDiv);


addTaskForm.style.display = 'none';
nameInput.value = '';
emailInput.value = '';
dobInput.value = '';
taskInput.value = '';
} else {
alert('Please fill in all fields!');
}
}