Create Announcements templates, link in urls

WidgetFEKK/Announcements/static/Announcements/styles.css

+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+        
+body{
+    font-family: 'Roboto';
+    padding: 4rem 12rem;
+}
+
+h1{
+    font-size: 2.5rem;
+    text-align: center;
+}
+
+#title{
+    margin: 20px 0 10px 0;
+}
+
+#subtitle{
+    margin: auto;
+    text-align: center;
+}
+
+
+.reactions{
+    background-color:gainsboro;
+    padding: 5px;
+    width: fit-content;
+    border-radius: 5px;
+}
+
+li{
+    color: black;
+}
+
+a{
+    color: black;
+    text-decoration: none;
+}
+
+a:hover{
+    color: red;
+}
\ No newline at end of file

WidgetFEKK/Announcements/templates/announcements/details.html

+{% extends "base.html" %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" type="text/css" href="{% static 'Announcements/index.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'Announcements/styles.css' %}">
+{% endblock %}
+
+{% block title %}
+{{ announcement.announcement_title }}
+{% endblock %}
+
+{% block content %}
+<article>
+    <div id="back"><a href="/announcements">Back to all announcements</a></div>
+    <h1 id="title">{{ announcement.announcement_title}}</h1>
+    <h4 id="subtitle">by {{ announcement.author.first_name}} {{ announcement.author.last_name }}, {{ announcement.pub_date|date:"d/m/Y" }}</h4>
+
+    <p class="body">{{ announcement.announcement_body }}</p>
+    
+    <p class="reactions">
+        {% for reactions in reaction_sorted %}
+            <strong>{{ reactions.reaction_name }}</strong>: {{ reactions.tally }}
+        {% endfor %}
+    </p>
+</article>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Announcements/templates/announcements/index.html

+{% extends "base.html" %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" type="text/css" href="{% static 'Announcements/styles.css' %}">
+{% endblock %}
+
+{% block title %}Widget's Announcement Board{% endblock %}
+
+{% block content %}
+<main>
+    <h1>Announcement Board</h1>
+    <h3>Important Announcements:</h3>
+        <ul class="announcements"></ul>
+        {% for announcement in announcement_sorted %}
+        <li> <a href="/announcements/{{ announcement.pk }}/details"><strong>{{ announcement.announcement_title }}</strong> by <strong>{{ announcement.author.first_name }} {{ announcement.author.last_name }}</strong> dated <strong>{{ announcement.pub_date|date:"d/m/Y" }}</strong></a>
+        </li>
+        {% endfor %}
+    </ul>
+</main>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Announcements/views.py

 from django.shortcuts import render
-from django.http import HttpResponse
+from django.http import Http404, HttpResponse
 from .models import Announcement, Reaction
 
 def date_month_year(timestamp):
     return timestamp.strftime("%d/%m/%Y")
 
 def index(request):
-    content = "ANNOUNCEMENTS:<br>"
+    return render(request, 'announcements/index.html',  {'announcement_sorted': Announcement.objects.order_by('-pub_date')})
 
-    announcements = Announcement.objects.all()
-    
-    for announcements in announcements:
-        content += f'{announcements.announcement_title} by {announcements.author.last_name}, {announcements.author.first_name} dated {date_month_year(announcements.pub_date)}: <br>'
-        content += f'{announcements.announcement_body} <br>'
-
-        reactions = announcements.reaction_set.all()
-        for reactions in reactions:
-            content += f'{reactions.reaction_name}: {reactions.tally} <br>'
-        
-        content +='<br>'
-
-    return HttpResponse(content)
\ No newline at end of file
+def details(request, announcement_id):
+    try:
+        announcement = Announcement.objects.get(pk=announcement_id)
+    except Announcement.DoesNotExist:
+        raise Http404('Announcement does not exist')
+    return render (request, 'announcements/details.html', {'announcement': announcement, 'reaction_sorted': announcement.reaction_set.order_by('tally')})
\ No newline at end of file

WidgetFEKK/WidgetFEKK/urls.py

@@ -15,11 +15,13 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path, include
+import Announcements.views as Announcements_views
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('forum/', include('Forum.urls', namespace='Forum')),
     path('homepage/', include('Homepage.urls', namespace="Homepage")),
     path('announcements/', include('Announcements.urls', namespace="Announcements")),
+    path('announcements/<int:announcement_id>/details', Announcements_views.details, name='announcement_details'),
     path('assignments/', include('Assignments.urls', namespace="Assignments")),
 ]