Skip to content
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

Feature Dark Mode Added #292

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feature Dark Mode Added #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
adbd704
Feature Dark Mode Added
yazdanhaider Oct 19, 2024
ba7647e
Updated UI
yazdanhaider Oct 19, 2024
91f9dbd
Fix minor bugs
yazdanhaider Oct 19, 2024
ef9f287
Merge branch 'main' into main
yazdanhaider Oct 19, 2024
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
192 changes: 100 additions & 92 deletions Todo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,107 +3,115 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo-List</title>
<title>TaskMaster | Your Personal Task Management Hub</title>
<meta name="description" content="Organize your life with TaskMaster. Manage tasks, set priorities, and boost your productivity with our intuitive todo list application.">
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="subtitle">Todo-List</h1>

<div class="js-add-grid" id="add-todo">
<input
type="text"
placeholder="Add a new task here...."
class="js-name-input"
/>

<input type="date" class="js-date-input" min="" />
<input type="time" class="js-time-input" />
<select class="js-category-input">
<option value="">Select Category</option>
<option value="work">Work</option>
<option value="personal">Personal</option>
<option value="shopping">Shopping</option>
<option value="other">Other</option>
</select>
<select class="js-priority-input">
<option value="">Select Priority</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
<div class="js-actions-wrapper">
<button class="js-add-button">
<i class="fa-solid fa-add"></i>
</button>
<button class="js-cancel-button" title="Cancel">
<i class="fa-solid fa-times"></i>
</button>
<body class="light-mode">
<div class="app-container">
<main class="bg-white rounded-lg shadow-lg p-6 mt-8">
<!-- Title and Subtitle -->
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-purple-600 mb-2">Task Master</h1>
<p class="text-xl text-gray-600">Organize your life, one task at a time</p>
</div>
<div id="js-success-notification" style="display: none">
<p>Task completed 🎉</p>

<!-- Dark Mode Toggle Button -->
<div class="flex justify-end mb-4">
<button id="dark-mode-toggle" class="p-2 rounded-full bg-gray-200 text-gray-800 hover:bg-gray-300 transition duration-300 focus:outline-none">
<i class="fas fa-moon text-xl"></i>
</button>
</div>
</div>

<!-- Add this new div for sorting buttons -->
<div class="sort-buttons">
<div class="sort-filter-container">
<button class="sort-button" onclick="sortTodos('category')">
Sort by Category
</button>
<button class="sort-button" onclick="sortTodos('priority')">
Sort by Priority
</button>
<select class="js-filter-input" onchange="filterTodos()">
<option value="all">All</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
</select>
<section class="task-input-section mb-8">
<h2 class="text-2xl font-semibold mb-4">Add New Task</h2>
<div class="task-input-grid">
<input type="text" placeholder="What needs to be done?" class="js-name-input input-field" />
<div class="date-time-container">
<input type="date" class="js-date-input input-field" />
<input type="time" class="js-time-input input-field" />
</div>
<div class="category-priority-container">
<select class="js-category-input input-field">
<option value="">Category</option>
<option value="work">Work</option>
<option value="personal">Personal</option>
<option value="shopping">Shopping</option>
<option value="other">Other</option>
</select>
<select class="js-priority-input input-field">
<option value="">Priority</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</div>
<div class="button-container">
<button class="js-add-button btn btn-primary">
<i class="fas fa-plus mr-2"></i> Add Task
</button>
<button class="js-cancel-button btn btn-secondary" style="display: none;">
<i class="fas fa-times mr-2"></i> Cancel
</button>
</div>
</div>
</section>

<section class="task-list-section">
<div class="task-controls bg-gray-100 rounded-lg p-4 mb-4">
<div class="sort-filter-container">
<div class="sort-buttons">
<button onclick="sortTodos('category')" class="btn btn-outline">
<i class="fas fa-sort-alpha-down mr-2"></i> Sort by Category
</button>
<button onclick="sortTodos('priority')" class="btn btn-outline">
<i class="fas fa-sort-amount-down mr-2"></i> Sort by Priority
</button>
</div>
<select class="js-filter-input input-field" onchange="filterTodos()">
<option value="all">All Tasks</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
</select>
</div>
</div>
<div class="js-add-html js-add-grid js-add-html-tasks bg-gray-50 rounded-lg p-4 max-h-96 overflow-y-auto"></div>
</section>

<section class="export-section mt-8">
<h2 class="text-2xl font-semibold mb-4">Export Tasks</h2>
<div class="export-buttons">
<button class="js-export-csv-button btn btn-secondary" onclick="exportTasks('csv')">
<i class="fas fa-file-csv mr-2"></i> Export CSV
</button>
<button class="js-export-pdf-button btn btn-secondary" onclick="exportTasks('pdf')">
<i class="fas fa-file-pdf mr-2"></i> Export PDF
</button>
</div>
</section>
</main>

<footer class="text-center text-white py-4">
<p>&copy; 2024 TaskMaster. Made with <i class="fas fa-heart text-red-500"></i> by Ansh Grover</p>
<div class="social-links mt-4">
<a href="https://www.instagram.com/" target="_blank" class="text-white hover:text-purple-200 mx-2"><i class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com/" target="_blank" class="text-white hover:text-purple-200 mx-2"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/" target="_blank" class="text-white hover:text-purple-200 mx-2"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/" target="_blank" class="text-white hover:text-purple-200 mx-2"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/Groverio" target="_blank" class="text-white hover:text-purple-200 mx-2"><i class="fab fa-github"></i></a>
<a href="https://www.youtube.com/" target="_blank" class="text-white hover:text-purple-200 mx-2"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="test">
<div class="js-add-html js-add-grid js-add-html-tasks"></div>
</div>
</footer>
</div>

<footer class="footer">
<p>&copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.</p>
<div class="social-media">
<a class="insta" href="https://www.instagram.com/" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<a class="facebook" href="https://www.facebook.com/" target="_blank"
><i class="fa-brands fa-facebook"></i
></a>
<a class="x" href="https://x.com/i/flow/login" target="_blank"
><i class="fa-brands fa-x-twitter"></i
></a>
<a class="linkedin" href="https://www.linkedin.com/" target="_blank"
><i class="fa-brands fa-linkedin-in"></i
></a>
<a class="github" href="https://github.com/Groverio" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a class="youtube" href="https://www.youtube.com/" target="_blank"
><i class="fa-brands fa-youtube"></i
></a>
</div>
</footer>
<div id="js-success-notification" class="notification bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg fixed bottom-4 right-4" style="display: none;">
<p><i class="fas fa-check-circle mr-2"></i> Task completed successfully!</p>
</div>

<script src="darkMode.js"></script>
<script src="script.js"></script>
</body>
</html>
32 changes: 32 additions & 0 deletions darkMode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
const darkModeToggle = document.getElementById('dark-mode-toggle');
if (document.body.classList.contains('dark-mode')) {
darkModeToggle.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
localStorage.setItem('darkMode', 'enabled');
} else {
darkModeToggle.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
localStorage.setItem('darkMode', 'disabled');
}
}

function checkDarkModePreference() {
if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
const darkModeToggle = document.getElementById('dark-mode-toggle');
if (darkModeToggle) {
darkModeToggle.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
}
}
}

document.addEventListener('DOMContentLoaded', () => {
checkDarkModePreference();

const darkModeToggle = document.getElementById('dark-mode-toggle');
if (darkModeToggle) {
darkModeToggle.addEventListener('click', toggleDarkMode);
} else {
console.error('Dark mode toggle button not found');
}
});
75 changes: 38 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,56 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>To-Do List App</title>
<title>TaskMaster - Organize Your Life</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<body class="bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-500 text-white min-h-screen flex flex-col transition-colors duration-300">
<!-- Navbar -->
<nav class="bg-white shadow-lg">
<div
class="container mx-auto px-4 py-4 flex justify-between items-center"
>
<a href="#" class="text-2xl font-bold text-purple-600">To-Do List</a>
<ul class="flex space-x-4">
<!-- All of these buttons currently lead to error pages as their functionality will be added in the future
after login and authentication has been implemented.-->
<li>
<a href="error.html" class="hover:text-blue-600">Upcoming Tasks</a>
</li>
<li><a href="error.html" class="hover:text-blue-600">Friends</a></li>
</ul>
<header class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-md shadow-lg transition-colors duration-300 sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="#" class="text-3xl font-bold text-white transition-colors duration-300">TaskMaster</a>
<nav class="flex items-center space-x-8">
<a href="#" class="text-white hover:text-purple-200 transition duration-300 text-lg">Features</a>
<a href="#" class="text-white hover:text-purple-200 transition duration-300 text-lg">Pricing</a>
<a href="#" class="text-white hover:text-purple-200 transition duration-300 text-lg">About</a>
<a href="Todo.html" class="get-started-btn bg-white text-purple-600 px-6 py-2 rounded-full font-semibold hover:bg-purple-100 transition duration-300 shadow-md hover:shadow-lg text-lg">Get Started</a>
<button id="dark-mode-toggle" class="p-2 rounded-full bg-white bg-opacity-20 text-white hover:bg-opacity-30 transition duration-300 focus:outline-none">
<i class="fas fa-moon text-xl"></i>
</button>
</nav>
</div>
</div>
</nav>
</header>

<!-- Main Block -->
<section
class="flex justify-center items-center h-screen bg-gradient-to-b from-purple-600 via-indigo-600 to-gray-900"
>
<div class="container mx-auto px-4 text-center text-white">
<h1 class="text-4xl md:text-6xl font-bold">
Organize Your Life with this easy-to-use app
</h1>
<p class="mt-4 text-lg md:text-2xl">
Manage tasks effortlessly and boost your productivity. Stay on top of
everything with our intuitive To-Do List.
</p>
<a
href="Todo.html"
class="mt-8 inline-block bg-white text-indigo-600 font-bold py-3 px-6 rounded-lg shadow-lg hover:bg-gray-200"
>
Start
<!-- Hero Section -->
<main class="flex-grow flex items-center justify-center px-4">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">Organize Your Life <br>with TaskMaster</h1>
<p class="text-xl md:text-2xl mb-12 max-w-2xl mx-auto">Effortlessly manage tasks, boost productivity, and achieve your goals with our intuitive todo list application.</p>
<a href="Todo.html" class="bg-white text-purple-600 text-lg font-semibold px-8 py-4 rounded-full hover:bg-purple-100 transition duration-300 shadow-lg hover:shadow-xl">
Start Organizing Now
</a>
</div>
</section>
</main>

<!-- Footer -->
<footer class="bg-gray-800 text-white py-6">
<footer class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg py-6">
<div class="container mx-auto px-4 text-center">
<p>
&copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.
<p class="text-sm">
&copy; 2024 TaskMaster. Made with <i class="fas fa-heart text-red-500"></i> by Ansh Grover. All rights reserved.
</p>
</div>
</footer>

<script src="darkMode.js"></script>
</body>
</html>
Loading
Loading