diff --git a/tpp1.css b/tpp1.css new file mode 100644 index 0000000..9235c80 --- /dev/null +++ b/tpp1.css @@ -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; +} diff --git a/tpp1.html b/tpp1.html new file mode 100644 index 0000000..00c389b --- /dev/null +++ b/tpp1.html @@ -0,0 +1,62 @@ + + + + + + Class Timetable + + + +
+

Timetable

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
montuewedthursfri
hourssciencemathssciencemathsarts
socialhindienglishsocialsports
lunch
socialhindienglishsocialproject
sciencemathssciencemaths
+
+ + diff --git a/tpp2.css b/tpp2.css new file mode 100644 index 0000000..18ecc99 --- /dev/null +++ b/tpp2.css @@ -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; + } diff --git a/tpp2.html b/tpp2.html new file mode 100644 index 0000000..6639a9b --- /dev/null +++ b/tpp2.html @@ -0,0 +1,43 @@ + + + + + + To-Do List with Navbar + + + +

To-Do List

+ + + + + + +
+ + + + + + + + + + + + + +
+ + +
+ + + + + + diff --git a/tpp2.js b/tpp2.js new file mode 100644 index 0000000..6ba20ec --- /dev/null +++ b/tpp2.js @@ -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 = ` + Name: ${name}
+ Email: ${email}
+ Date of Birth: ${dob}
+ Task: ${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!'); + } +}