Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@aditiverma-21
aditiverma-21 authored Sep 18, 2024
1 parent 5d9435e commit 6b1efd1
Show file tree
Hide file tree
Showing 4 changed files with 414 additions and 0 deletions.
14 changes: 14 additions & 0 deletions db.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php
$servername = "localhost"; // Usually "localhost"
$username = "root"; // Your database username (default is "root" in XAMPP)
$password = ""; // Your database password (default is empty in XAMPP)
$dbname = "todo_list_db"; // Replace with your database name

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
153 changes: 153 additions & 0 deletions index.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<?php
include 'db.php';

// Add a task
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['task'])) {
$task = $_POST['task'];
$priority = $_POST['priority'];
$due_date = $_POST['due_date'];

if (!empty($task)) {
$stmt = $conn->prepare("INSERT INTO tasks (task, priority, due_date) VALUES (?, ?, ?)");
if ($stmt === false) {
die('Prepare failed: ' . htmlspecialchars($conn->error));
}
$stmt->bind_param('sss', $task, $priority, $due_date);
$stmt->execute();
$stmt->close();
}
}

// Mark task as completed
if (isset($_GET['complete'])) {
$id = intval($_GET['complete']);
$stmt = $conn->prepare("UPDATE tasks SET is_completed = 1 WHERE id = ?");
if ($stmt === false) {
die('Prepare failed: ' . htmlspecialchars($conn->error));
}
$stmt->bind_param('i', $id);
if (!$stmt->execute()) {
die('Execute failed: ' . htmlspecialchars($stmt->error));
}
$stmt->close();
}

// Edit task
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['edit_task_id'])) {
$task_id = $_POST['edit_task_id'];
$new_task = $_POST['edit_task'];
$stmt = $conn->prepare("UPDATE tasks SET task = ? WHERE id = ?");
$stmt->bind_param('si', $new_task, $task_id);
$stmt->execute();
$stmt->close();
}

// Delete task
if (isset($_GET['delete'])) {
$id = intval($_GET['delete']);
$stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
$stmt->bind_param('i', $id);
$stmt->execute();
$stmt->close();
}

// Retrieve all tasks
$result = $conn->query("SELECT * FROM tasks ORDER BY created_at DESC");
?>

<!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</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container">
<h1>To-Do List</h1>

<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'AddTask')">Add Task</button>
<button class="tablinks" onclick="openTab(event, 'ViewTasks')">View/Edit Tasks</button>
<button class="tablinks" onclick="openTab(event, 'CompletedTasks')">Completed Tasks</button>
</div>

<!-- Add Task Tab -->
<div id="AddTask" class="tab-content active">
<h2>Add Task</h2>
<form action="index.php" method="POST">
<input type="text" name="task" placeholder="Enter a new task..." required>
<input type="text" name="priority" placeholder="Priority (Low, Medium, High)" required>
<input type="date" name="due_date" required>
<button type="submit">Add Task</button>
</form>
</div>

<!-- View/Edit Tasks Tab -->
<div id="ViewTasks" class="tab-content">
<h2>View / Edit Tasks</h2>
<ul class="task-list">
<?php while ($row = $result->fetch_assoc()): ?>
<?php if (!$row['is_completed']): ?>
<li>
<?= htmlspecialchars($row['task']) ?>
<form action="index.php" method="POST" class="edit-form">
<input type="hidden" name="edit_task_id" value="<?= $row['id'] ?>">
<input type="text" name="edit_task" value="<?= htmlspecialchars($row['task']) ?>" required>
<button type="submit">Update</button>
</form>
<a href="index.php?complete=<?= $row['id'] ?>" class="complete-btn">Mark as Completed</a>
<a href="index.php?delete=<?= $row['id'] ?>" class="delete-btn">Delete</a>
</li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
</div>

<!-- Completed Tasks Tab -->
<div id="CompletedTasks" class="tab-content">
<h2>Completed Tasks</h2>
<ul class="task-list">
<?php
$completed_result = $conn->query("SELECT * FROM tasks WHERE is_completed = 1 ORDER BY created_at DESC");
while ($row = $completed_result->fetch_assoc()):
?>
<li class="completed">
<?= htmlspecialchars($row['task']) ?>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
<script>
// Function to open a tab
function openTab(evt, tabName) {
var i, tabcontent, tablinks;

// Hide all tab contents
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Remove active class from all tab links
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab and add an "active" class to the clicked tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>

<?php
// Close the database connection
$conn->close();
?>
176 changes: 176 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
/* General Styles */
body {
font-family: Roboto, sans-serif;
background-color: #34a7ce;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background: #fffbfb;
padding: 30px;
border-radius: 20px;
box-shadow: 0 4px 200px rgba(255, 255, 255, 0.87);
width: 500px;
max-width: 90%;
text-align: center;
}

h1 {
margin-bottom: 20px;
color: #333;
}

form {
margin-bottom: 20px;
}

input[type="text"], input[type="date"], select {
width: calc(100% - 30px);
padding: 12px;
border: 1px solid #ddd;
background-color: #e0feff;
border-radius: 10px;
margin-bottom: 10px;
font-size: 1em;
}

button, .complete-btn, .delete-btn{
padding: 12px 25px;
align-self: center;
background: #34a7ce;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
}

button:hover {
background: #195366;
}

button:disabled {
background: #ccc;
cursor: not-allowed;
}

/* Task List Styling */
.task-list {
list-style-type: none;
padding: 0;
margin-top: 20px;
}

li {
padding: 12px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #ffffff;
border: 1px solid #ddd;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

li.completed {
background-color: #e0feff;
text-decoration: line-through;
color: #666;
}

.priority, .due-date {
font-size: 0.9em;
color: #555;
margin-left: 10px;
}


.complete-btn:hover, .delete-btn:hover {
color: #0056b3;
text-decoration: underline;
}

/* Edit Task Form */
.edit-form {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}

.edit-form input[type="text"] {
width: 75%;
padding: 8px;
border: 1px solid #ddd;
background-color: #e0feff;
border-radius: 4px;
}

.edit-form button {
padding: 8px 16px;
background-color:#34a7ce;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.edit-form button:hover {
background-color: #257e9b;
}

/* Tab Navigation */
.tab {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}

.tab button {
padding: 10px 20px;
background-color: #f1f1f1;
color: #34a7ce;
border: 1px solid #ddd;
border-radius: 6px 6px 0 0;
cursor: pointer;
transition: background-color 0.3s ease;
}

.tab button.active {
background-color: #34a7ce;
color: #ffffff;
border-bottom: 1px solid white;
}

.tab button:hover {
background-color: #34a7ce;
color: #ffffff;
}

/* Tab Content Styling */
.tab-content {
display: none;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 0 0 6px 6px;
}

.tab-content.active {
display: block;
}

/* Task list styles */
.task-list li.completed {
text-decoration: line-through;
}
.edit-form, .delete-btn, .complete-btn {
margin-top: 5px;
}
Loading

0 comments on commit 6b1efd1

Please sign in to comment.