Merge pull request #21 from /pull/20

Pull/20

README.md

@@ -55,7 +55,7 @@ Note: For simplicity, the project is currently running SQLite3
 **7. Run the server**
 
 ```linux
-    $ python manage.py migrate
+    $ python manage.py runserver
 ```
 
 **8. Run tests**

apps/countries/templates/country/index.html

@@ -6,52 +6,60 @@
 
 <div class="container min-vh-300 py-4">
     <div class="col-md-9 mx-auto" id="form-vertical-position">
-        <form action="{% url 'country_details' %}" method="get">
+        <div>
             <div class="input-group">
-                <input class="form-control border-end-0 border rounded-pill form-control-lg" name="q" type="text"
-                    placeholder="Search...">
+                <input class="form-control border-end-0 border rounded-pill form-control-lg" autocomplete="off" name="q"
+                    type="text" placeholder="Search..." hx-get="{% url 'search_countries' %}" hx-include="[name='q']"
+                    hx-trigger="keyup changed delay:100ms, search" hx-target="#country-results" />
                 <span class=" input-group-append">
                     <button class="btn btn-outline-secondary bg-white border-bottom-0 border rounded-pill btn-lg ms-n5"
                         type="submit">
                         <i class="fa-solid fa-earth-americas"></i>
                     </button>
                 </span>
-        </form>
+            </div>
+            <div id="country-results"></div>
+        </div>
     </div>
-</div>
 
 
-<div class="welcome-msg-body">
-    <div class="welcome-msg-message display-1" id="message">
-        Type a country name & search...
+    <div class="welcome-msg-body">
+        <div class="welcome-msg-message display-1" id="message">
+            Type a country's name to search...
+        </div>
     </div>
-</div>
 
 
 
 
-<script>
-    // Annimates welcome message
-    function showMessage(element, text) {
-        const words = text.split(' ');
-        let i = 0;
+    <script>
+        // Annimates welcome message
+        function showMessage(element, text) {
+            const words = text.split(' ');
+            let i = 0;
 
-        function displayWord() {
-            if (i < words.length) {
-                element.innerHTML += ' ' + words[i];
-                i++;
-                setTimeout(displayWord, 300);
-            } else {
-                element.style.opacity = '1';
-                element.style.transform = 'translateY(0)';
+            function displayWord() {
+                if (i < words.length) {
+                    element.innerHTML += ' ' + words[i];
+                    i++;
+                    setTimeout(displayWord, 300);
+                } else {
+                    element.style.opacity = '1';
+                    element.style.transform = 'translateY(0)';
+
+                    // Hide the message after 5 seconds
+                    setTimeout(() => {
+                        element.style.opacity = '0';
+                        element.style.transform = 'translateY(100%)';
+                    }, 4000);
+                }
             }
-        }
 
-        displayWord();
-    }
+            displayWord();
+        }
 
-    const messageElement = document.getElementById('message');
-    showMessage(messageElement, '');
-</script>
+        const messageElement = document.getElementById('message');
+        showMessage(messageElement, '');
+    </script>
 
-{% endblock content %}
+    {% endblock content %}

apps/countries/templates/country/list.html

@@ -0,0 +1,22 @@
+<div class="container">
+  <table class="table table-borderless">
+    <tbody>
+      <tr>
+        {% for country in countries %}
+        <td class="text-end"><a class="lead" href="{% url 'country_details' country_id=country.id %}"
+            style="text-decoration: none; color: black;">
+            {{ country.flag }}</a></td>
+        <td><a class="lead" href="{% url 'country_details' country_id=country.id %}"
+            style="text-decoration: none; color: black;">
+            {{ country.name }}</a>
+        </td>
+        <div class="d-flex flex-row-reverse">
+          <td class="text-start"><a class="lead" href="{% url 'country_details' country_id=country.id %}"
+              style="text-decoration: none; color: black;">
+              {{ country.region_formatted }}</a></td>
+        </div>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

apps/countries/urls.py

@@ -4,5 +4,6 @@
 
 urlpatterns = [
     path("", views.index, name="home"),
-    path("country-detail", views.country_detail, name="country_details"),
+    path("search/", views.search_countries, name="search_countries"),
+    path("country-detail/<int:country_id>/", views.country_detail, name="country_details"),
 ]

apps/countries/views.py

@@ -1,4 +1,3 @@
-from django.db.models import Q
 from django.shortcuts import render
 
 from apps.countries.models import Country
@@ -8,12 +7,14 @@ def index(request):
     return render(request, "country/index.html")
 
 
-def country_detail(request):
+def country_detail(request, country_id):
+    countries = Country.objects.filter(id=country_id)
+    return render(request, "country/country_detail.html", {"countries": countries})
+
+
+def search_countries(request):
     query = request.GET.get("q")
+    countries = []
     if query:
-        countries = Country.objects.filter(Q(name__icontains=query))
-        context = {"countries": countries, "query": query}
-        if countries.exists():
-            return render(request, "country/country_detail.html", context)
-        else:
-            return render(request, "country/country_not_found.html", context)
+        countries = Country.objects.filter(name__icontains=query)
+    return render(request, "country/list.html", {"countries": countries})

static/css/styles.css

@@ -39,37 +39,3 @@
 }
 
 /* End welcome page styles */
-
-/* Country not found page styles */
-.not-found-body {
-    background-image: url("/static/imgs/compass-not-found.jpg");
-    background-size: cover;
-    /* Centers the image */
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 100%;
-    /* Adjust the height as needed */
-    height: 100vh;
-    display: flex;
-}
-
-.not-found-uh-oh {
-    color: white;
-    padding-top: 12rem;
-    margin-bottom: 1rem;
-}
-
-.not-found-text {
-    color: white;
-}
-
-.not-found-404 {
-    color: white;
-    padding-top: 6rem;
-}
-
-.not-found-btn {
-    margin-top: 4rem;
-}
-
-/* Country not found page ends */