TRACK.

CSS

/* Sidebar styling */

.sidebar {

width: 250px;

height: 100vh;

background-color: #00796B; /* Teal Green */

position: fixed;

top: 0;

left: 0;

padding-top: 20px;

display: flex;

flex-direction: column;

align-items: flex-start;

/* Sidebar navigation links */

.sidebar nav a {

display: block;

color: black;

padding: 15px 20px;

text-decoration: none;

font-size: 18px;

border-bottom: 1px solid #ddd;

transition: background-color 0.3s ease;

width: 100%;

text-align: left;

/* Hover effect on sidebar links */

.sidebar nav a:hover {

 background-color: #00796B; /* Darker teal */

color: white;

/* Main content styling */

.main-content {

margin-left: 250px;

padding: 20px;

font-family: Arial, sans-serif;

/* Page header styling */

.main-content h1 {

font-size: 36px;

color: #333;

margin-bottom: 10px;

.main-content p {

font-size: 18px;

color: #555;

margin-bottom: 30px;

/* Goal Add Form styling */

.goal-form {

display: flex;

flex-direction: column;

gap: 15px;
 max-width: 400px;

margin-bottom: 30px;

.goal-form input[type="text"],

.goal-form input[type="date"] {

padding: 10px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 5px;

width: 100%;

.goal-form button {

padding: 12px;

background-color: #00796B; /* Teal green button */

color: white;

font-size: 18px;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

.goal-form button:hover {

background-color: #00796B; /* Darker teal on hover */

/* Goals List container */

#goals-container {

display: flex;

flex-direction: column;

gap: 15px;

.goal-item {

background-color: #f4f4f4;

padding: 15px;

border-radius: 8px;

font-size: 18px;

display: flex;

justify-content: space-between;

align-items: center;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

.goal-item strong {

color: #333;

.goal-item span {

color: #666;

/* Responsive styles for smaller screens */

@media screen and (max-width: 768px) {

.sidebar {

width: 200px;
 }

.main-content {

margin-left: 200px;

.goal-form {

max-width: 100%;

.main-content h1 {

font-size: 28px;

.main-content p {

font-size: 16px;

.goal-item {

font-size: 16px;

STYLES.CSS

/* General Styles */

/* Basic reset for margin and padding */

*{

margin: 0;

padding: 0;

box-sizing: border-box;
}

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0; /* Light gray background for the body */

/* Page Specific Background Colors (Optional, Add if you need unique backgrounds per page) */

.page-home {

background-color: #00796B; /* Lighter background for home page */

.page-contact {

background-color: #00796B; /* Light cyan background for the contact page */

.page-tasks {

background-color: #ffffff; /* White background for tasks page */

/* Features Section */

.features {

padding: 20px;

background-color: #f4f4f4; /* Light background for features section */

text-align: center;

.features h2 {

font-size: 24px;
 margin-bottom: 20px;

.features-grid {

display: flex;

justify-content: space-around;

align-items: flex-start;

gap: 20px;

flex-wrap: wrap;

.feature-item {

background: #fff;

border: 1px solid #ddd;

padding: 20px;

width: 200px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

text-align: center;

transition: transform 0.3s;

.feature-item i {

font-size: 36px;

color: #4CAF50;

margin-bottom: 10px;

.feature-item h3 {
 font-size: 18px;

margin-bottom: 10px;

.feature-item p {

font-size: 14px;

color: #666;

.feature-item:hover {

transform: translateY(-5px);

/* Header */

header {

background-color: #00796B; /* Darker shade of green */

padding: 10px;

color: #FFFFFF;

header nav {

display: flex;

gap: 20px;

justify-content: center;

header nav a {

color: #FFFFFF;

text-decoration: none;
 font-weight: bold;

header nav a:hover {

color: #ADD8E6;

/* Sidebar */

.sidebar {

width: 200px;

background-color: #FFFFFF;

box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

padding-top: 20px;

position: fixed;

height: 100vh;

.sidebar nav a {

display: block;

padding: 15px;

color: #333333;

text-decoration: none;

.sidebar nav a:hover {

background-color: #00A82D;

color: #FFFFFF;

}
/* Main Content */

.main-content {

margin-left: 220px;

padding: 20px;

max-width: 800px;

width: 100%;

background-color: #ffffff; /* White background for main content */

h1 {

color: #00796B; /* Teal color */

/* Input Section */

.input-section {

display: flex;

gap: 10px;

margin-bottom: 20px;

#todo-input {

width: 70%;

padding: 10px;

font-size: 16px;

border: 1px solid #DDDDDD;

border-radius: 4px;

#add-btn {
 padding: 10px 20px;

background-color: #009688;

color: #FFFFFF;

border: none;

border-radius: 4px;

cursor: pointer;

#add-btn:hover {

background-color: #00796B;

/* Tasks Container */

.tasks-container {

list-style: none;

padding: 0;

.task-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px;

background: #FFFFFF;

border: 1px solid #DDDDDD;

border-radius: 4px;

margin-bottom: 10px;

}
.task-item.completed {

text-decoration: line-through;

color: #888888;

.task-actions {

display: flex;

gap: 10px;

.task-actions button {

background: none;

border: none;

cursor: pointer;

font-size: 14px;

color: #FF7043;

.task-actions button:hover {

color: #D84315;

/* Contact Page Specific Styles */

.page-contact .main-content {

margin-left: 240px; /* Adjust for sidebar */

padding: 20px;

background-color: #ffffff; /* White background for main content */

max-width: 900px;

border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

margin-top: 20px;

h1, h2 {

color: #00796B; /* Teal color */

margin-bottom: 20px;

p{

font-size: 16px;

line-height: 1.6;

.contact-info, .social-media, .contact-form {

margin-bottom: 30px;

/* Footer */

footer {

background-color: #004D40; /* Darker shade of green */

color: #fff;

padding: 20px;

text-align: center;

margin-top: 30px;

/* Space between Goal Items */

.goal-item {
 margin-bottom: 15px; /* Space between each goal item */

/* Space between Add Goal Form inputs and button */

.add-goal-form input {

margin-right: 10px; /* Space between the input fields */

.add-goal-form {

margin-bottom: 20px; /* Space below the form */

/* Space below the page header */

.page-header {

margin-bottom: 30px;

/* Space below section titles */

.current-goals h2 {

margin-bottom: 20px;

/* Space below h1 */

.page-header h1 {

margin-bottom: 10px;

/* Space between form and button */

.add-goal-form button {
 margin-top: 10px; /* Space above the button */

/* Space between main sections */

.main-content {

margin-bottom: 40px; /* Space between sections */

REMAINDERS.CSS

/* General reset for margin and padding */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

/* Body styles */

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff; /* Light blue background */

color: #333;

padding: 20px;

display: flex;

justify-content: center;

min-height: 100vh;

flex-direction: column;

/* Sidebar */

.sidebar {
 width: 200px;

background-color: #00796B;

color: white;

position: fixed;

top: 0;

left: 0;

bottom: 0;

padding-top: 20px;

padding-left: 20px;

.sidebar a {

display: block;

color: #ffffff;

padding: 15px 0;

text-decoration: none;

font-weight: bold;

.sidebar a:hover {

background-color: #004D40;

/* Main content area */

.main-content {

margin-left: 220px;

padding: 30px;

background-color: #ffffff;

width: 80%;
 max-width: 900px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

display: flex;

flex-direction: column;

.page-header {

margin-bottom: 30px;

h1 {

color: #00796B;

font-size: 36px;

margin-bottom: 10px;

p{

font-size: 18px;

margin-bottom: 20px;

/* Reminder Form Section */

.reminder-form {

display: flex;

flex-direction: column;

gap: 20px;

margin-bottom: 30px;

}
.reminder-form h2 {

color: #00796B;

margin-bottom: 10px;

.reminder-form label {

font-size: 16px;

color: #333;

.reminder-form input {

padding: 10px;

font-size: 16px;

border: 1px solid #ddd;

border-radius: 4px;

outline: none;

.reminder-form button {

padding: 10px;

background-color: #009688;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

}
.reminder-form button:hover {

background-color: #00796B;

/* Upcoming Reminders Section */

.upcoming-reminders {

margin-top: 30px;

.upcoming-reminders h2 {

color: #00796B;

margin-bottom: 10px;

#remindersList {

list-style: none;

padding: 0;

#remindersList li {

background-color: #f4f4f4;

padding: 15px;

border: 1px solid #ddd;

margin-bottom: 10px;

border-radius: 8px;

#remindersList li strong {

color: #00796B;
}

/* Footer */

footer {

background-color: #004D40;

color: #fff;

padding: 20px;

text-align: center;

margin-top: 30px;

/* Responsive Design */

@media (max-width: 768px) {

.main-content {

width: 100%;

margin-left: 0;

.sidebar {

position: relative;

width: 100%;

padding: 10px;

.reminder-form {

gap: 15px;

.reminder-form input,
 .reminder-form button {

width: 100%;

TODO.CSS

/* General Styles for layout */

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

flex-direction: row;

min-height: 100vh;

.sidebar {

background-color: #00796B;

color: white;

width: 220px;

padding: 20px;

position: fixed;

height: 100%;

top: 0;

left: 0;

.sidebar nav a {

display: block;

color: white;

text-decoration: none;
 margin: 10px 0;

padding: 10px;

font-weight: bold;

.sidebar nav a:hover {

background-color: #004d40;

.main-content {

margin-left: 240px;

padding: 20px;

width: 100%;

/* Page Header */

.page-header {

text-align: center;

margin-bottom: 30px;

.page-header h1 {

color: #00796B;

font-size: 32px;

.page-header p {

font-size: 16px;

color: #555;
}

/* Task Form Styling */

.task-form {

background-color: #ffffff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

margin-bottom: 30px;

.task-form h2 {

color: #00796B;

font-size: 24px;

margin-bottom: 20px;

.form-group {

margin-bottom: 20px;

.form-group label {

font-size: 14px;

color: #333;

display: block;

margin-bottom: 5px;

.form-group input {
 width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

.task-form button {

background-color: #00796B;

color: white;

padding: 10px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

.task-form button:hover {

background-color: #004d40;

/* Current Tasks Section */

.current-tasks {

margin-top: 30px;

.current-tasks h2 {

font-size: 24px;

color: #00796B;
 margin-bottom: 15px;

#tasksList {

list-style-type: none;

padding: 0;

.task-item {

background-color: #fff;

padding: 15px;

margin-bottom: 10px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

display: flex;

justify-content: space-between;

align-items: center;

.task-item button {

background-color: #00A82D;

color: white;

border: none;

padding: 6px 12px;

border-radius: 4px;

cursor: pointer;

.task-item button:hover {
 background-color: #00796B;

/* Responsive Design */

@media (max-width: 768px) {

.sidebar {

width: 200px;

.main-content {

margin-left: 220px;

.task-form {

padding: 15px;

.task-form h2 {

font-size: 20px;

.task-form button {

width: 100%;

INDEX.CSS

body.page-home {

background-image:"daily.jpg";

background-color: #e0f7fa; /* Light blue background for the home page */

 font-family: Arial, sans-serif;

color: #333;

/* Sidebar */

.sidebar {

width: 200px;

background-color: #ffffff;

box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

padding-top: 20px;

position: fixed;

height: 100vh;

.sidebar nav a {

display: block;

padding: 15px;

color: #000000; /* Black text color in sidebar */

text-decoration: none;

font-weight: bold;

.sidebar nav a:hover {

background-color: #00796B; /* Teal color on hover */

color: #FFFFFF;

/* Main Content */

.main-content {
 margin-left: 220px;

padding: 20px;

max-width: 1000px;

width: 100%;

background-color: #ffffff; /* White background for main content */

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

border-radius: 8px;

/* Hero Section */

.hero {

text-align: center;

background-color: #00796B; /* Teal background for hero section */

color: white;

padding: 40px;

border-radius: 8px;

.hero h1 {

font-size: 36px;

.hero p {

font-size: 18px;

margin-bottom: 20px;

.hero button {

padding: 10px 20px;

 background-color: #009688;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

.hero button:hover {

background-color: #00796B;

/* Features Section */

.features {

padding: 20px;

background-color: #f4f4f4;

text-align: center;

.features h2 {

font-size: 24px;

margin-bottom: 20px;

.features-grid {

display: flex;

justify-content: space-around;

align-items: flex-start;

gap: 20px;

flex-wrap: wrap;
}

.feature-item {

background: #fff;

border: 1px solid #ddd;

padding: 20px;

width: 200px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

text-align: center;

transition: transform 0.3s;

.feature-item i {

font-size: 36px;

color: #00796B;

margin-bottom: 10px;

.feature-item h3 {

font-size: 18px;

margin-bottom: 10px;

.feature-item p {

font-size: 14px;

color: #666;

}
.feature-item:hover {

transform: translateY(-5px);

CONTACT.CSS

/* Sidebar styling */

.sidebar {

width: 250px;

height: 100vh;

background-color: #00796B; /* Teal Green */

position: fixed;

top: 0;

left: 0;

padding-top: 20px;

display: flex;

flex-direction: column;

align-items: flex-start;

/* Sidebar navigation links */

.sidebar nav a {

display: block;

color: black;

padding: 15px 20px;

text-decoration: none;

font-size: 18px;

border-bottom: 1px solid #ddd;

transition: background-color 0.3s ease;

width: 100%;

text-align: left;
}

/* Hover effect on sidebar links */

.sidebar nav a:hover {

background-color: #004d40; /* Darker teal */

color: white;

/* Main content styling */

.main-content {

margin-left: 250px;

padding: 30px;

font-family: Arial, sans-serif;

color: #333;

/* Heading styling */

.main-content h1,

.main-content h2 {

color: #004d40; /* Dark teal for headings */

.main-content h1 {

font-size: 36px;

margin-bottom: 10px;

.main-content h2 {

font-size: 28px;
 margin-top: 20px;

margin-bottom: 15px;

/* Paragraph and text styling */

.main-content p {

font-size: 18px;

color: #555;

line-height: 1.6;

/* Anchor link styling */

.main-content a {

color: #008080; /* Teal green link */

text-decoration: none;

font-weight: bold;

/* Hover effect on anchor links */

.main-content a:hover {

color: #004d40; /* Dark teal on hover */

/* Contact Form Styling */

.contact-form {

margin-top: 40px;

.contact-form .form-group {
 margin-bottom: 15px;

.contact-form label {

font-size: 18px;

font-weight: bold;

color: #333;

.contact-form input,

.contact-form textarea {

width: 100%;

padding: 10px;

font-size: 16px;

border: 1px solid #ddd;

border-radius: 4px;

margin-top: 5px;

.contact-form textarea {

resize: vertical;

.contact-form button {

background-color: #008080; /* Teal Green */

color: white;

font-size: 18px;

padding: 10px 20px;

border: none;
 border-radius: 4px;

cursor: pointer;

margin-top: 20px;

transition: background-color 0.3s ease;

/* Button hover effect */

.contact-form button:hover {

background-color: #004d40; /* Dark teal on hover */

/* Social Media Links */

.social-links {

list-style: none;

padding: 0;

display: flex;

gap: 15px;

.social-links li {

font-size: 18px;

.social-links a {

color: #008080; /* Teal green link */

text-decoration: none;

.social-links a:hover {
 color: #004d40; /* Dark teal on hover */

/* About page responsiveness for smaller screens */

@media screen and (max-width: 768px) {

.sidebar {

width: 200px;

.main-content {

margin-left: 200px;

padding: 20px;

.main-content h1 {

font-size: 28px;

.main-content h2 {

font-size: 24px;

.main-content p {

font-size: 16px;

.main-content ul li {

font-size: 16px;

}
 .contact-form label {

font-size: 16px;

.contact-form input,

.contact-form textarea {

font-size: 14px;

.contact-form button {

font-size: 16px;

.social-links {

flex-direction: column;

COMPLETED.CSS

/* Sidebar styling */

.sidebar {

width: 250px;

height: 100vh;

background-color: #00796B;

position: fixed;

top: 0;

left: 0;

padding-top: 20px;

}
/* Sidebar navigation links */

.sidebar nav a {

display: block;

color: black;

padding: 15px 20px;

text-decoration: none;

font-size: 18px;

font-weight: bold;

border-bottom: 1px solid #ddd;

transition: background-color 0.3s ease;

/* Hover effect on sidebar links */

.sidebar nav a:hover {

background-color: #00796B;

color: white;

/* Main content styling */

.main-content {

margin-left: 250px;

padding: 20px;

/* Page header styling */

.page-header h1 {

font-size: 36px;

color: #333;
}

.page-header p {

font-size: 18px;

color: #555;

/* Completed tasks section styling */

.completed-tasks {

margin-top: 30px;

.completed-tasks h2 {

font-size: 28px;

color: #333;

margin-bottom: 15px;

.completed-tasks ul {

list-style-type: none;

padding: 0;

.completed-tasks li {

background-color: #f4f4f4;

margin: 10px 0;

padding: 15px;

border-radius: 5px;

font-size: 18px;
 color: #333;

.completed-tasks .completed-item {

display: flex;

justify-content: space-between;

.clear-button {

display: block;

width: 200px;

margin: 20px auto;

padding: 10px;

background-color: red;

color: white;

font-size: 18px;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

/* Clear button hover effect */

.clear-button:hover {

background-color: darkred;

.completed-tasks li strong {

font-weight: bold;
}

/* Mobile responsive styles */

@media screen and (max-width: 768px) {

.sidebar {

width: 200px;

.main-content {

margin-left: 200px;

.completed-tasks h2 {

font-size: 24px;

.completed-tasks li {

font-size: 16px;

.clear-button {

width: 150px;

CALENDAR.CSS

/* Calendar Section Styles */

.calendar-section {

margin: 40px 0;

text-align: center;
}

.calendar-section h2 {

font-size: 32px;

color: #00796B; /* Teal color */

margin-bottom: 20px;

/* Container for the calendar iframe */

.calendar-container {

position: relative;

display: inline-block;

width: 100%;

max-width: 1000px; /* Limit maximum width */

border-radius: 10px; /* Rounded corners */

overflow: hidden; /* To ensure border radius is applied */

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for 3D effect */

background-color: #ffffff; /* White background for calendar container */

padding: 20px; /* Inner padding around the calendar */

/* Calendar iframe styles */

.calendar-container iframe {

border-radius: 10px; /* Match the rounded corners of the container */

box-shadow: none; /* Remove default iframe shadow */

width: 100%; /* Take full width of its container */

height: 600px; /* Fixed height */

transition: transform 0.3s ease-in-out; /* Smooth hover effect */

}
/* Hover effect on iframe */

.calendar-container iframe:hover {

transform: scale(1.05); /* Slight zoom effect when hovering */

/* Responsive Design for Mobile */

@media (max-width: 768px) {

.calendar-container {

padding: 10px; /* Reduced padding on smaller screens */

.calendar-container iframe {

height: 450px; /* Smaller height on mobile */

ABOUT.CSS

/* Sidebar styling */

.sidebar {

width: 250px;

height: 100vh;

background-color: #00796B; /* Teal Green */

position: fixed;

top: 0;

left: 0;

padding-top: 20px;

display: flex;

flex-direction: column;

align-items: flex-start; /* Align sidebar links to the left */

}

/* Sidebar navigation links */

.sidebar nav a {

display: block;

color: black;

padding: 15px 20px;

text-decoration: none;

font-size: 18px;

border-bottom: 1px solid #ddd;

transition: background-color 0.3s ease;

width: 100%; /* Make sure the links take full width */

text-align: left; /* Align text to the left */

/* Hover effect on sidebar links */

.sidebar nav a:hover {

background-color: #004d40; /* Darker teal */

color: white;

/* Main content styling */

.main-content {

margin-left: 250px;

padding: 30px;

font-family: Arial, sans-serif;

color: #333;

}
/* Heading styling */

.main-content h1,

.main-content h2 {

color: #004d40; /* Dark teal for headings */

.main-content h1 {

font-size: 36px;

margin-bottom: 10px;

.main-content h2 {

font-size: 28px;

margin-top: 20px;

margin-bottom: 15px;

/* Paragraph and text styling */

.main-content p {

font-size: 18px;

color: #555;

line-height: 1.6;

/* List styling */

.main-content ul {

list-style-type: none;

padding: 0;

}
.main-content ul li {

font-size: 18px;

margin-bottom: 10px;

/* Anchor link styling */

.main-content a {

color: #008080; /* Teal green link */

text-decoration: none;

font-weight: bold;

/* Hover effect on anchor links */

.main-content a:hover {

color: #00796B; /* Dark teal on hover */

/* About page responsiveness for smaller screens */

@media screen and (max-width: 768px) {

.sidebar {

width: 200px;

.main-content {

margin-left: 200px;

padding: 20px;

}
 .main-content h1 {

font-size: 28px;

.main-content h2 {

font-size: 24px;

.main-content p {

font-size: 16px;

.main-content ul li {

font-size: 16px;

TRACK.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goal Progress Tracker</title>
<link rel="stylesheet" href="track.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<div class="sidebar">
<!-- Sidebar navigation copied from home page -->
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
 </nav>
</div>

<div class="main-content">
<h1>Your Goals</h1>
<p>Track your goals and monitor your progress!</p>

<!-- Goal Add Form -->

<div class="goal-form">
<input type="text" id="goal-title-input" placeholder="Enter goal title" required>
<input type="date" id="goal-deadline-input" required>
<button id="add-goal-btn">Add Goal</button>
</div>

<!-- Goals List -->

<div id="goals-container">
<!-- Goal items will be dynamically populated here -->
</div>
</div>

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

PROGRESS.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Track Progress - To-Do List</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Include Chart.js -->
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content Area -->

<div class="main-content">
<!-- Header -->
<header class="hero">
<h1>Track Your Progress</h1>
<p>Monitor your productivity and see how far you've come with your tasks.</p>
</header>

<!-- Progress Section with Chart -->

<section class="progress-section">
<h2>Your Productivity Overview</h2>
<div class="chart-container" style="width: 80%; margin: auto;">
<canvas id="progressChart"></canvas> <!-- Canvas for the chart -->
</div>
</section>
</div>

<script>
// Fetch completed items from localStorage (same structure as in completed.html)
const completedItems = JSON.parse(localStorage.getItem('completedItems')) || [];

// Parse the data to count completed tasks by date

const taskDataByDate = completedItems.reduce((acc, item) => {
const date = item.date; // assuming 'date' is formatted as "YYYY-MM-DD"
acc[date] = (acc[date] || 0) + 1;
return acc;
}, {});

// Prepare data for the chart

const labels = Object.keys(taskDataByDate).sort(); // Sort dates in ascending order
const data = labels.map(date => taskDataByDate[date]);

// Chart.js configuration
const taskData = {
labels: labels,
datasets: [{
label: 'Tasks Completed',
data: data,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: true
}]
};
 // Chart config
const config = {
type: 'bar', // Use 'bar' for a bar chart
data: taskData,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Number of Tasks Completed'
}
},
x: {
title: {
display: true,
text: 'Date'
}
}
}
}
};

// Render the chart

const progressChart = new Chart(
document.getElementById('progressChart'),
config
);
</script>
</body>
</html>
REMAINDERS.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Reminders - To-Do List</title>
<link rel="stylesheet" href="remainders.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content Area -->

<div class="main-content">
<header class="page-header">
<h1>Set Your Reminders</h1>
<p>Stay on top of your tasks with timely reminders.</p>
</header>

<!-- Reminder Form -->

<section class="reminder-form">
<h2>Add a New Reminder</h2>
<form id="reminderForm">
<label for="reminder-title">Reminder Title</label>
<input type="text" id="reminder-title" name="title" required>

<label for="reminder-date">Date</label>
<input type="date" id="reminder-date" name="date" required>

<label for="reminder-time">Time</label>
<input type="time" id="reminder-time" name="time" required>

<button type="submit">Add Reminder</button>

</form>
</section>

<!-- Upcoming Reminders Section -->

<section class="upcoming-reminders">
<h2>Upcoming Reminders</h2>
<ul id="remindersList">
<!-- Reminders will be added here dynamically -->
 </ul>
</section>
</div>

<script>
// JavaScript to handle the reminder form submission
document.getElementById('reminderForm').addEventListener('submit', function(event) {
event.preventDefault();

// Get form data

const title = document.getElementById('reminder-title').value;
const date = document.getElementById('reminder-date').value;
const time = document.getElementById('reminder-time').value;

// Create reminder item

const reminderItem = document.createElement('li');
reminderItem.innerHTML = `<strong>${title}</strong> - ${date} at ${time}`;

// Add to reminders list

document.getElementById('remindersList').appendChild(reminderItem);

// Clear form
document.getElementById('reminderForm').reset();
});
</script>
</body>
</html>

TODO.HTML
<!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 - To-Do List</title>
<link rel="stylesheet" href="todo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
 <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content Area -->

<div class="main-content">
<header class="page-header">
<h1>Manage Your Tasks</h1>
<p>Organize and keep track of your tasks effectively.</p>
</header>

<!-- Task Form -->

<section class="task-form">
<h2>Add a New Task</h2>
<form id="taskForm">
<div class="form-group">
<label for="task-title">Task Title</label>
<input type="text" id="task-title" name="title" required>
</div>

<div class="form-group">
<label for="task-deadline">Deadline</label>
<input type="date" id="task-deadline" name="deadline" required>
</div>

<button type="submit">Add Task</button>

</form>
</section>

<!-- Current Tasks Section -->

<section class="current-tasks">
<h2>Your Current Tasks</h2>
<ul id="tasksList">
<!-- Tasks will be added here dynamically -->
</ul>
</section>
</div>

<script>
// JavaScript code remains unchanged, as it works with dynamic task rendering and
management.
function getTasksFromStorage() {
return JSON.parse(localStorage.getItem('tasks')) || [];
}
function saveTasksToStorage(tasks) {
localStorage.setItem('tasks', JSON.stringify(tasks));
}

function renderTasks() {
const tasksList = document.getElementById('tasksList');
const tasks = getTasksFromStorage();
tasksList.innerHTML = ''; // Clear current list before rendering

tasks.forEach((task, index) => {

const taskItem = document.createElement('li');
taskItem.className = 'task-item';
taskItem.innerHTML = `
<strong>${task.title}</strong> - Due by ${task.deadline}
<button class="mark-as-goal" data-index="${index}">Add to Goals</button>
`;
tasksList.appendChild(taskItem);
});

// Add event listeners to "Add to Goals" buttons

document.querySelectorAll('.mark-as-goal').forEach(button => {
button.addEventListener('click', function () {
const taskIndex = button.getAttribute('data-index');
const tasks = getTasksFromStorage();
const selectedTask = tasks[taskIndex];

// Move the task to goals (using localStorage)

addTaskToGoals(selectedTask);

// Remove the task from the tasks list

tasks.splice(taskIndex, 1);
saveTasksToStorage(tasks);

renderTasks(); // Re-render the tasks list

});
});
}

function addTaskToGoals(task) {
const goals = JSON.parse(localStorage.getItem('goals')) || [];
goals.push(task);
localStorage.setItem('goals', JSON.stringify(goals));
}

document.getElementById('taskForm').addEventListener('submit', function (event) {

event.preventDefault();
 const taskTitle = document.getElementById('task-title').value;
const taskDeadline = document.getElementById('task-deadline').value;

const newTask = {
title: taskTitle,
deadline: taskDeadline
};

const tasks = getTasksFromStorage();

tasks.push(newTask); // Add new task to the list
saveTasksToStorage(tasks);

renderTasks(); // Re-render the tasks list

document.getElementById('taskForm').reset(); // Reset the form
});

renderTasks();
</script>
</body>
</html>

ABOUT.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" href="about.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content -->

<div class="main-content">
 <h1>About Us</h1>

<p>Welcome to our To-Do List app! Whether you're managing daily tasks or keeping track
of long-term projects, our app is designed to make task management simple, effective, and
fun.</p>

<h2>Our Mission</h2>
<p>At the heart of our app is a simple mission: to help you get things done. We believe that
staying organized and focused on your goals shouldn't be complicated. Our intuitive design and
user-friendly features are aimed at helping you prioritize your tasks, track progress, and achieve
success every day.</p>

<h2>Key Features</h2>
<ul>
<li><strong>Task Creation & Editing:</strong> Quickly add, edit, or delete tasks with
ease. Customize them with priority levels, deadlines, and detailed descriptions.</li>
<br><li><strong>Task Prioritization:</strong> Organize your to-do list by priority,
ensuring the most important tasks are always in focus.</li>
<br><li><strong>Task Completion:</strong> Mark tasks as completed when they're
done and watch your productivity grow.</li>
<br><li><strong>Responsive Design:</strong> Whether you're on a desktop, tablet, or
smartphone, our app is designed to work seamlessly across all devices.</li>
<br><li><strong>Dark & Light Mode:</strong> Choose between dark or light mode to
suit your preference and environment.</li>
<br><li><strong>Easy Navigation:</strong> Navigate through the app with ease using a
clean, user-friendly interface.</li>
</ul>

<h2>How It Works</h2>
<p>The app is designed to be as simple as possible. After creating an account (or using it as
a guest), you can start adding tasks to your list. You can set due dates, mark tasks as urgent, and
easily move them between "To-Do" and "Completed" categories. With the option to view your
completed tasks separately, you can keep track of your progress and stay motivated!</p>

<h2>Why Choose Us?</h2>

<p>Our app offers a clean and straightforward solution for managing your tasks. Unlike
other task management tools that can be overwhelming or too complicated, our focus is on
simplicity and ease of use. No steep learning curve—just add your tasks, prioritize them, and get
them done!</p>

<h2>Development and Feedback</h2>

<p>This app was developed by a small team of passionate software developers who believe
in the power of simplicity and productivity. We are constantly working to improve the app, so
we welcome feedback from our users. If you have any suggestions or encounter any issues,
please don't hesitate to <a href="contact.html">contact us</a>.</p>
 <h2>Get Started Today</h2>
<p>Ready to take control of your tasks? <a href="todo.html">Start adding tasks now</a>
and make the most of your time!</p>
</div>
</body>
</html>

GOALS.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goals - To-Do List</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content Area -->

<div class="main-content">
<header class="page-header">
<h1>Your Goals</h1>
<p>Stay focused and achieve your targets with your personal goal tracker.</p>
</header>

<!-- Current Goals Section -->

<section class="current-goals">
<h2>Your Current Goals</h2>
<ul id="goalsList">
<!-- Goals will be added here dynamically -->
</ul>
</section>
</div>
<script>
// Retrieve goals from localStorage
function getGoalsFromStorage() {
return JSON.parse(localStorage.getItem('goals')) || [];
}

// Save goals back to localStorage

function saveGoalsToStorage(goals) {
localStorage.setItem('goals', JSON.stringify(goals));
}

// Save completed tasks to localStorage

function saveCompletedTasks(completedTasks) {
localStorage.setItem('completedItems', JSON.stringify(completedTasks));
}

// Render goals with checkboxes

function renderGoals() {
const goalsList = document.getElementById('goalsList');
let goals = getGoalsFromStorage();
goalsList.innerHTML = ''; // Clear current list before rendering

goals.forEach((goal, index) => {

const goalItem = document.createElement('li');
goalItem.className = 'goal-item';
goalItem.innerHTML = `
<input type="checkbox" id="goal-${index}" class="goal-checkbox">
<label for="goal-${index}">
<strong>${goal.title}</strong> - Due by ${goal.deadline}
</label>
`;
goalsList.appendChild(goalItem);

// Add event listener for checkbox

const checkbox = goalItem.querySelector('.goal-checkbox');
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
addToCompleted(goal);
goals = goals.filter((_, i) => i !== index); // Remove goal from the list
saveGoalsToStorage(goals);
renderGoals(); // Re-render goals after updating
}
});
});
}
 // Add goal to completed tasks in localStorage
function addToCompleted(goal) {
const completedTasks = JSON.parse(localStorage.getItem('completedItems')) || [];
const completedItem = {
title: goal.title,
date: new Date().toISOString().split('T')[0] // Mark as completed today
};
completedTasks.push(completedItem);
saveCompletedTasks(completedTasks);
alert(`${goal.title} has been marked as completed!`);
}

// Initialize the page

renderGoals();
</script>
</body>
</html>

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - To-Do List</title>
<link rel="stylesheet" href="index.css"> <!-- Updated link to index.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body class="page-home"> <!-- Add the class 'page-home' to change background color -->
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
<a href="track.html"><i class="fas fa-bullseye"></i> Track Goals</a>
</nav>
</div>

<!-- Main Content Area -->

<div class="main-content">
<!-- Welcome Section -->
 <header class="hero">
<h1>Welcome to Your To-Do List</h1>
<p>Organize your tasks and boost productivity with our easy-to-use To-Do List app.</p>
<button onclick="location.href='todo.html'">Get Started</button>
</header>

<!-- Features Section -->

<section class="features">
<h2>What You Can Do</h2>
<div class="features-grid">
<a href="todo.html" class="feature-item">
<i class="fas fa-tasks"></i>
<h3>Manage Tasks</h3>
<p>Organize tasks by adding categories, setting priorities, and tracking
progress.</p>
</a>
<a href="calendar.html" class="feature-item">
<i class="fas fa-calendar-alt"></i>
<h3>Calendar View</h3>
<p>Plan ahead with a calendar view to track upcoming and overdue tasks.</p>
</a>
<a href="progress.html" class="feature-item">
<i class="fas fa-chart-line"></i>
<h3>Track Progress</h3>
<p>Stay motivated by monitoring your productivity and task completion rates.</p>
</a>
<a href="reminders.html" class="feature-item">
<i class="fas fa-bell"></i>
<h3>Set Reminders</h3>
<p>Never miss a deadline with timely notifications and reminders.</p>
</a>
<a href="goals.html" class="feature-item">
<i class="fas fa-bullseye"></i>
<h3>Set Goals</h3>
<p>Define and track your daily or weekly goals to stay on target.</p>
</a>
<a href="completed.html" class="feature-item">
<i class="fas fa-check-circle"></i>
<h3>View Completed Tasks</h3>
<p>Review your completed tasks and celebrate your progress.</p>
</a>
</div>
</section>

<!-- Calendar Section -->

</div>
</body>
</html>

SERVICE.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services | My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="todo.html">To-Do List</a></li>
</ul>
</nav>
</header>

<main>
<h1>Our Services</h1>
<ul>
<li>Web Development</li>
<li>UI/UX Design</li>
<li>SEO Optimization</li>
<li>App Development</li>
</ul>
</main>

<footer>
<p>&copy; 2024 My Website. All Rights Reserved.</p>
</footer>
</body>
</html>

COMPLETED.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Completed Tasks - To-Do List</title>
<link rel="stylesheet" href="completed.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
<a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content Area -->

<div class="main-content">
<header class="page-header">
<h1>Completed Tasks and Goals</h1>
<p>Review your completed tasks and goals below.</p>
</header>

<!-- Completed Tasks Section -->

<section class="completed-tasks">
<h2>Your Completed Items</h2>
<ul id="completedList">
<!-- Completed items will be added here dynamically -->
</ul>
<button id="clearCompleted" class="clear-button">Clear All Completed</button>
</section>
</div>

<script>
// Fetch completed items from localStorage
const completedItems = JSON.parse(localStorage.getItem('completedItems')) || [];

// Function to render completed items

function renderCompletedItems() {
const completedList = document.getElementById('completedList');
completedList.innerHTML = ''; // Clear list before rendering
 if (completedItems.length === 0) {
completedList.innerHTML = '<li>No completed tasks available.</li>';
} else {
completedItems.forEach((item) => {
const listItem = document.createElement('li');
listItem.className = 'completed-item';
listItem.innerHTML = `
<strong>${item.title}</strong> - Completed on ${item.date}
`;
completedList.appendChild(listItem);
});
}
}

// Clear All Completed Items button functionality

document.getElementById('clearCompleted').addEventListener('click', function() {
// Confirm if user wants to clear completed items
if (confirm("Are you sure you want to clear all completed items?")) {
localStorage.removeItem('completedItems'); // Clear completed items from
localStorage
renderCompletedItems(); // Re-render the list to show it is now empty
}
});

// Initial render of completed items

renderCompletedItems();
</script>
</body>
</html>

CONTACT.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="contact.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<nav>
<a href="index.html"><i class="fas fa-home"></i> Home</a>
 <a href="todo.html"><i class="fas fa-list"></i> To-Do List</a>
<a href="completed.html"><i class="fas fa-check-circle"></i> Completed Tasks</a>
<a href="about.html"><i class="fas fa-info-circle"></i> About</a>
<a href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</nav>
</div>

<!-- Main Content -->

<div class="main-content">
<h1>Contact Us</h1>
<p>If you have any questions, suggestions, or need support, feel free to get in touch! We're
here to help and we'd love to hear from you. 💬</p>

<section class="contact-info">
<h2>Our Contact Information</h2>
<p><strong>📍 Address:</strong> 123 Productivity Lane, Suite 101, Tech City, TX
75001, USA</p>
<p><strong>📞 Phone:</strong> +1 (123) 456-7890</p>
<p><strong>📧 Email:</strong> <a
href="mailto:[email protected]">[email protected]</a></p>
</section>

<section class="social-media">
<h2>Stay Connected!</h2>
<p>Follow us on social media for updates, tips, and more:</p>
<ul class="social-links">
<li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i>
Facebook</a></li>
<li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i>
Twitter</a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fab
fa-instagram"></i> Instagram</a></li>
<li><a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i>
LinkedIn</a></li>
</ul>
</section>

<section class="contact-form">
<h2>Send Us a Message</h2>
<p>Use the form below to send us a message directly, and we'll get back to you as soon
as possible:</p>

<form action="submit_form.php" method="POST">

<div class="form-group">
<label for="name">Your Name :</label>
<input type="text" id="name" name="name" required>
 </div><br>

<div class="form-group">
<label for="email">Your Email :</label>
<input type="email" id="email" name="email" required>
</div><br>

<div class="form-group">
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div><br>

<button type="submit">Send Message ✉️</button>

</form>
</section>
</div>
</body>
</html>

GALLERY.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery | My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="todo.html">To-Do List</a></li>
</ul>
</nav>
</header>

<main>
<h1>Gallery</h1>
<div class="gallery">
<img src="https://via.placeholder.com/200" alt="Gallery Image 1">
 <img src="https://via.placeholder.com/200" alt="Gallery Image 2">
<img src="https://via.placeholder.com/200" alt="Gallery Image 3">
<!-- Add more images here -->
</div>
</main>

<footer>
<p>&copy; 2024 My Website. All Rights Reserved.</p>
</footer>
</body>
</html>

SCREEN SHOTS: