#P04 As Participant, I would like to see a list of any upcoming Hackathons.

hackathon/templates/hackathon/hackathon_list.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% load static %}
+{% block content %}
+<section class="h-100">
+    {% if page_obj %}
+        <h2 class="p-orange text-center mb-4">Hackathons</h2>
+        {% for hackathon in page_obj %}
+            {% include 'hackathon/includes/hackathon_card.html' %}
+            <hr>
+        {% endfor %}
+    {% else %}
+        <h2 class="text-center">There aren't any Hackathons at the moment!</h2>
+    {% endif %}
+    <!-- Pagination using Django's paginator. Options are disabled or hidden if unavailable. -->
+    <nav aria-label="Hackathon Page Navigation">
+        {% include 'hackathon/includes/paginator.html' %}
+    </nav>
+</section>
+{% endblock %}

hackathon/templates/hackathon/includes/hackathon_card.html

@@ -0,0 +1,11 @@
+<article class="card shadow">
+	<div class="card-body">
+		<h5 class="p-orange card-title">{{ hackathon.display_name }}</h5>
+		<h6 class="card-subtitle mb-2 text-muted">{{ hackathon.start_date }} - {{ hackathon.end_date }}</h6>
+		<p class="card-text">{{ hackathon.description }}</p>
+        {% if hackathon.organiser %}
+		<p>Organiser: <a href="#" class="p-blue card-link">{{ hackathon.organiser }}</a></p>
+        {% endif %}
+		<a href="#" class="btn btn-ci">Read More</a>
+	</div>
+</article>

hackathon/templates/hackathon/includes/paginator.html

@@ -0,0 +1,18 @@
+<ul class="pagination justify-content-center">
+    {% if page_obj.has_previous %}
+        <li class="page-item"><a class="page-link" href="?page=1" aria-label="First">
+            <span aria-hidden="true">&laquo;</span></a>
+        </li>
+        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">{{ page_obj.previous_page_number }}</a></li>
+    {% else %}
+        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">&laquo;</a></li>
+    {% endif %}
+        <li class="page-item active" aria-current="page"><a class="page-link" href="#">{{ page_obj.number }}<span class="sr-only">(current)</span></a></li>
+    {% if page_obj.has_next %}
+        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">{{ page_obj.next_page_number }}</a></li>
+        <li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
+            <span aria-hidden="true">&raquo;</span></a></li>
+    {% else %}
+        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">&raquo;</a></li>
+    {% endif %}
+</ul>

hackathon/tests/test_models.py

@@ -16,49 +16,43 @@ class HackathonTests(TestCase):
     def setUp(self):
         """Sets up the models for testing"""
         user = User.objects.create(username="testuser")
-        user.save()
+
         hackathon = Hackathon.objects.create(
             created_by=user,
             display_name="hacktest",
             description="lorem ipsum",
             start_date=f'{timezone.now()}',
             end_date=f'{timezone.now()}')
-        hackathon.save()
 
         team = HackTeam.objects.create(
             created_by=user,
             display_name="testteam",
             hackathon=hackathon)
-        team.save()
         team.participants.set([user])
 
-        award_category = HackAwardCategory.objects.create(
+        HackAwardCategory.objects.create(
             created_by=user,
             display_name="testaward",
             description="lorem ipsum",
             hackathon=hackathon)
-        award_category.save()
 
         project = HackProject.objects.create(
             created_by=user,
             display_name="testproject",
             description="lorem ipsum",
             github_link="https://www.test.com/",
             collab_link="https://www.test.com/")
-        project.save()
 
         score_category = HackProjectScoreCategory.objects.create(
             created_by=user,
             category="testcategory")
-        score_category.save()
 
-        score = HackProjectScore.objects.create(
+        HackProjectScore.objects.create(
             created_by=user,
             judge=user,
             project=project,
             score=1,
             hack_project_score_category=score_category)
-        score.save()
 
     def test_hackathon_str(self):
         """Tests the string method on the hackathon."""

hackathon/tests/test_views.py

@@ -0,0 +1,36 @@
+from django.test import TestCase
+from django.contrib.auth.models import User
+from django.utils import timezone
+
+from hackathon.models import Hackathon
+
+
+class TestHackathonViews(TestCase):
+    """Tests views for the Hackathon app."""
+
+    def setUp(self):
+        """Sets up the models for testing"""
+        user = User.objects.create(username="testuser")
+        Hackathon.objects.create(
+            created_by=user,
+            display_name="hacktest",
+            description="lorem ipsum",
+            start_date=f'{timezone.now()}',
+            end_date=f'{timezone.now()}')
+
+    def test_render_hackathon_list(self):
+        """Tests the correct rendering of the hackathon list page,
+        including contexts."""
+
+        response = self.client.get('/hackathon/')
+
+        # Confirms the correct template, context items and queryset
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, 'hackathon/hackathon_list.html')
+        self.assertTemplateUsed(response,
+                                'hackathon/includes/hackathon_card.html')
+        self.assertTemplateUsed(response, 'hackathon/includes/paginator.html')
+        self.assertTrue(response.context['page_obj'])
+        self.assertQuerysetEqual(response.context['page_obj'],
+                                 Hackathon.objects.all().order_by('-created'),
+                                 transform=lambda x: x)

hackathon/urls.py

@@ -1,5 +1,7 @@
 from django.urls import path
 
-urlpatterns = [
+from .views import HackathonListView
 
+urlpatterns = [
+    path('', HackathonListView.as_view(), name="hackathon-list")
 ]

hackathon/views.py

@@ -1,3 +1,10 @@
-from django.shortcuts import render
+from django.views.generic import ListView
 
-# Create your views here.
+from .models import Hackathon
+
+
+class HackathonListView(ListView):
+    """Renders a page with a list of Hackathons."""
+    model = Hackathon
+    ordering = ['-created']
+    paginate_by = 8

static/css/style.css

@@ -72,3 +72,31 @@ footer {
     color: var(--s-grey);
     background-color: var(--p-grey);
 }
+
+/* TEXT */
+.p-orange {
+    color: var(--p-orange);  
+}
+
+.p-blue {
+    color: var(--p-blue);  
+}
+
+/* CARDS */
+.card-link:hover {
+    color: rgba(0, 0, 0, .7); 
+}
+
+.card-title {
+    font-family: Rubik, sans-serif;
+}
+
+/* PAGINATION */
+.page-item .page-link {
+    color: var(--p-orange);
+}
+
+.page-item.active .page-link {
+    background-color: var(--p-orange);
+    border-color: var(--p-orange);
+}

templates/includes/navbar.html

@@ -11,6 +11,17 @@
                 <li class="nav-item">
                     <a class="nav-link" href="{% url 'home' %}">Home</a>
                 </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" id="navbarHackathons" role="button" data-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false">
+                        Hackathons
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarHackathons">
+                        <a class="dropdown-item" href="{% url 'hackathon:hackathon-list' %}">Events</a>
+                        <a class="dropdown-item" href="#">Winning Projects</a>
+                        <a class="dropdown-item" href="#">Awards</a>
+                    </div>
+                </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" id="navbarResources" role="button" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="false">