Merge pull request #1427 from ananyag309/main

added hackathon tracker
Kushal997-das · Oct 24, 2024 · ad18f51 · ad18f51
2 parents 66a0c38 + fd6be7d
commit ad18f51
Show file tree

Hide file tree

Showing 6 changed files with 536 additions and 7 deletions.
diff --git a/Web Development/Intermediate/Hackathon Tracker/README.md b/Web Development/Intermediate/Hackathon Tracker/README.md
@@ -0,0 +1,56 @@
+
+# Hackathon Tracker
+
+## Overview
+
+The Hackathon Tracker is a web application that helps users manage and track their hackathon participation. Users can create, edit, and delete hackathon entries, categorize them by status, and visualize upcoming deadlines using a calendar interface.
+
+## Features
+
+- **Create Hackathon Entries**: Users can enter details about hackathons they wish to track, including name, registration date, deadline, and status.
+- **Edit and Delete Entries**: Modify existing hackathon entries or remove them as needed.
+- **Categorization by Status**: Organize hackathons into categories based on their status: "In Progress," "Submitted," and "Completed."
+- **Calendar Integration**: View hackathon deadlines on a calendar for better planning and organization.
+
+## Technologies Used
+
+- **HTML**: Structure of the web application.
+- **CSS**: Styling the application for a better user experience.
+- **JavaScript**: Implementing the functionality for creating, editing, and managing hackathon entries.
+- **jQuery**: For DOM manipulation and managing the calendar.
+- **FullCalendar**: A JavaScript calendar library to visualize hackathon deadlines.
+
+## Getting Started
+
+### Prerequisites
+
+- A web browser
+- Basic knowledge of HTML, CSS, and JavaScript
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/hackathon-tracker.git
+   cd hackathon-tracker
+   ```
+
+2. Open `index.html` in your web browser to view the application.
+
+### Usage
+
+1. Fill in the hackathon details in the form provided.
+2. Click on "Submit" to create a new hackathon entry.
+3. Entries can be edited or deleted by using the respective buttons on each hackathon card.
+4. View your deadlines on the calendar for a visual representation of upcoming events.
+
+### Screenshot
+
+![Hackathon Tracker Screenshot](screenshot.PNG)
+
+### Live Demo
+
+Check out the live version of the project [here](https://hackathontracker.netlify.app/)
+
+
+
diff --git a/Web Development/Intermediate/Hackathon Tracker/index.html b/Web Development/Intermediate/Hackathon Tracker/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Character encoding for the document -->
+    <meta charset="UTF-8">
+    <!-- Responsive design for different device widths -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hackathon Tracker</title>
+    <!-- Link to the external stylesheet -->
+    <link rel="stylesheet" href="style.css">
+    <!-- Link to FullCalendar CSS for calendar functionality -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <!-- Main title of the application -->
+        <h1>Hackathon Tracker</h1>
+    </header>
+    <nav>
+        <ul>
+            <!-- Navigation links to different sections of the page -->
+            <li><a href="#register">Register</a></li>
+            <li><a href="#dashboard">Dashboard</a></li>
+            <li><a href="#calendar">Calendar</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <!-- Section for registering a new hackathon -->
+        <section id="register">
+            <form>
+                <h2>Register Hackathon</h2>
+                <div class="form-group">
+                    <label for="name">Hackathon Name</label>
+                    <input type="text" id="name" placeholder="Enter hackathon name" required>
+                </div>
+                <div class="form-group">
+                    <label for="registration-date">Registration Date</label>
+                    <input type="date" id="registration-date" required>
+                </div>
+                <div class="form-group">
+                    <label for="deadline">Deadline</label>
+                    <input type="date" id="deadline" required>
+                </div>
+                <div class="form-group">
+                    <label for="status">Status</label>
+                    <select id="status" required>
+                        <option value="in-progress">In Progress</option>
+                        <option value="submitted">Submitted</option>
+                        <option value="completed">Completed</option>
+                    </select>
+                </div>
+                <!-- Button to submit the form -->
+                <button type="submit">Add Hackathon</button>
+            </form>
+        </section>
+
+        <!-- Section for displaying hackathon dashboard -->
+        <section id="dashboard">
+            <h2>Hackathon Dashboard</h2>
+            <!-- Section for in-progress hackathons -->
+            <section id="in-progress">
+                <h2 style="display: none;">In Progress</h2>
+                <div class="hackathon-dashboard"></div>
+            </section>
+            <!-- Section for submitted hackathons -->
+            <section id="submitted">
+                <h2 style="display: none;">Submitted</h2>
+                <div class="hackathon-dashboard"></div>
+            </section>
+            <!-- Section for completed hackathons -->
+            <section id="completed">
+                <h2 style="display: none;">Completed</h2>
+                <div class="hackathon-dashboard"></div>
+            </section>
+        </section>
+
+        <!-- Section for the calendar -->
+        <section id="calendar-section">
+            <h2>Calendar</h2>
+            <div id="calendar-container">
+                <!-- Placeholder for the calendar -->
+                <div id="calendar"></div>
+            </div>
+        </section>
+    </div>
+
+    <!-- Scripts for functionality -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha384-Uz1UHyakAAz121kPY0Nx6ZGzYeUTy9zAtcpdwVmFCEwiTGPA2K6zSGgkKJEQfMhK" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" integrity="sha384-GRxLpKWDxL5ZLge/IN/AFNu8Fw9xA9BlwkhYxnOet8Jnrf2phws/uKVPGNlKWG53" crossorigin="anonymous"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Web Development/Intermediate/Hackathon Tracker/screenshot.PNG b/Web Development/Intermediate/Hackathon Tracker/screenshot.PNG
diff --git a/Web Development/Intermediate/Hackathon Tracker/script.js b/Web Development/Intermediate/Hackathon Tracker/script.js
@@ -0,0 +1,199 @@
+// Initialize an empty array to hold hackathon data
+const hackathons = [];
+let editMode = false; // Flag to determine if the form is in edit mode
+let currentCard = null; // Store the current card being edited
+
+// Event listener for form submission
+document.querySelector('form').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent the default form submission behavior
+
+    // Retrieve values from the form
+    const name = document.getElementById('name').value;
+    const registrationDate = document.getElementById('registration-date').value;
+    const deadline = document.getElementById('deadline').value;
+    const status = document.getElementById('status').value;
+
+    // Check if in edit mode
+    if (editMode) {
+        // Update existing hackathon card
+        updateHackathonCard(currentCard, name, registrationDate, deadline, status);
+        editMode = false; // Reset edit mode
+        currentCard = null; // Clear the current card reference
+    } else {
+        // Create a new hackathon card and add it to the appropriate category
+        const card = createHackathonCard(name, registrationDate, deadline, status);
+        addCardToCategory(card, status);
+        hackathons.push({ name, registrationDate, deadline, status }); // Add to hackathons array
+        updateCalendar(); // Update calendar with new event
+    }
+
+    this.reset(); // Reset the form fields
+});
+
+// Function to create a new hackathon card element
+function createHackathonCard(name, registrationDate, deadline, status) {
+    const card = document.createElement('div'); // Create a new div for the card
+    card.className = 'hackathon-card'; // Set class for styling
+
+    // Create and append the hackathon name
+    const h3 = document.createElement('h3');
+    h3.textContent = name;
+    card.appendChild(h3);
+
+    // Create and append registration date
+    const regDateP = document.createElement('p');
+    regDateP.textContent = `Registration Date: ${registrationDate}`;
+    card.appendChild(regDateP);
+
+    // Create and append deadline
+    const deadlineP = document.createElement('p');
+    deadlineP.textContent = `Deadline: ${deadline}`;
+    card.appendChild(deadlineP);
+
+    // Create and append status
+    const statusP = document.createElement('p');
+    statusP.className = 'status'; // Set class for status
+    statusP.textContent = `Status: ${status}`;
+    card.appendChild(statusP);
+
+    // Create and append edit button
+    const editBtn = document.createElement('button');
+    editBtn.className = 'edit-btn'; // Set class for styling
+    editBtn.textContent = 'Edit'; // Set button text
+    card.appendChild(editBtn);
+
+    // Create and append delete button
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'delete-btn'; // Set class for styling
+    deleteBtn.textContent = 'Delete'; // Set button text
+    card.appendChild(deleteBtn);
+
+    // Event listener for edit button
+    editBtn.addEventListener('click', () => {
+        populateFormForEdit(name, registrationDate, deadline, status); // Populate form for editing
+        editMode = true; // Set edit mode
+        currentCard = card; // Set current card being edited
+    });
+
+    // Event listener for delete button
+    deleteBtn.addEventListener('click', () => {
+        const parentCategory = card.parentElement; // Get parent category of the card
+        parentCategory.removeChild(card); // Remove card from DOM
+        // Find and remove hackathon data from the array
+        const index = hackathons.findIndex(h => h.name === name && h.deadline === deadline);
+        if (index > -1) {
+            hackathons.splice(index, 1); // Remove from hackathons array
+            updateCalendar(); // Update calendar after deletion
+        }
+    });
+
+    return card; // Return the created card element
+}
+
+// Function to update an existing hackathon card with new values
+function updateHackathonCard(card, name, registrationDate, deadline, status) {
+    const oldStatus = card.querySelector('.status').textContent.split(': ')[1]; // Get current status
+    // Update card elements with new values
+    card.querySelector('h3').textContent = name;
+    card.querySelector('p:nth-of-type(1)').textContent = `Registration Date: ${registrationDate}`;
+    card.querySelector('p:nth-of-type(2)').textContent = `Deadline: ${deadline}`;
+    card.querySelector('.status').textContent = `Status: ${status}`;
+
+    // Find the index of the hackathon in the array and update it
+    const index = hackathons.findIndex(h => h.name === name && h.deadline === deadline);
+    if (index > -1) {
+        hackathons[index] = { name, registrationDate, deadline, status }; // Update hackathon data
+        updateCalendar(); // Update calendar
+    }
+
+    // If the status has changed, remove the card and re-add it to the new category
+    if (oldStatus !== status) {
+        card.parentElement.removeChild(card);
+        addCardToCategory(card, status);
+    }
+}
+
+// Function to add a hackathon card to the appropriate category in the dashboard
+function addCardToCategory(card, status) {
+    const category = document.getElementById(status); // Get category by status
+    const dashboard = category.querySelector('.hackathon-dashboard'); // Get dashboard for that category
+    dashboard.appendChild(card); // Append the card to the dashboard
+    toggleCategoryHeadings(); // Update category headings visibility
+}
+
+// Function to toggle the visibility of category headings based on the presence of hackathon cards
+function toggleCategoryHeadings() {
+    const statuses = ['in-progress', 'submitted', 'completed'];
+    statuses.forEach(status => {
+        const category = document.getElementById(status);
+        const dashboard = category.querySelector('.hackathon-dashboard');
+        const heading = category.querySelector('h2');
+        // Show heading if there are cards, otherwise hide it
+        if (dashboard.children.length > 0) {
+            heading.style.display = 'block';
+        } else {
+            heading.style.display = 'none';
+        }
+    });
+}
+
+// Initialize category headings visibility on page load
+toggleCategoryHeadings();
+
+// Function to populate the form with existing hackathon data for editing
+function populateFormForEdit(name, registrationDate, deadline, status) {
+    document.getElementById('name').value = name; // Set name field
+    document.getElementById('registration-date').value = registrationDate; // Set registration date
+    document.getElementById('deadline').value = deadline; // Set deadline
+    document.getElementById('status').value = status; // Set status dropdown
+}
+
+// Object to map status to corresponding colors for calendar events
+const statusColors = {
+    'completed': 'blue',
+    'in-progress': 'red',
+    'submitted': 'green'
+};
+
+// Function to update the calendar with hackathon events
+function updateCalendar() {
+    const events = hackathons.map(hackathon => {
+        const color = statusColors[hackathon.status] || 'black'; // Get color based on status
+        console.log(`Hackathon: ${hackathon.name}, Status: ${hackathon.status}, Color: ${color}`); // Log hackathon info
+        return {
+            title: `${hackathon.name} (${hackathon.status})`, // Event title
+            start: hackathon.deadline, // Start date (deadline)
+            end: hackathon.deadline, // End date (same as start date)
+            color: color // Set event color
+        };
+    });
+
+    $('#calendar').fullCalendar('removeEvents'); // Clear existing events
+    $('#calendar').fullCalendar('addEventSource', events); // Add new events
+}
+
+// Initialize FullCalendar with options
+$(document).ready(function() {
+    $('#calendar').fullCalendar({
+        header: {
+            left: 'prev,next today', // Navigation buttons
+            center: 'title', // Title
+            right: 'month,agendaWeek,agendaDay' // View options
+        },
+        editable: true, // Allow event editing
+        eventLimit: true // Enable event limit
+    });
+});
+
+// Another initialization of FullCalendar (can be consolidated)
+$(document).ready(function() {
+    $('#calendar').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+        },
+        editable: false, // Prevent editing
+        events: [] // Initialize with no events
+    });
+});