Laddade upp list.html, project_details.html, ny css, myFlaskProject.py och ny json.

MyPortfolio/data.json

 [
   {
     "start_date": "2009-09-05",
-    "short_description": "no",
+    "short_description": "A python data module script tester written in Python.",
     "course_name": "OK\u00c4NT",
     "long_description": "no no no",
     "group_size": 2,
     "academic_credits": "WUT?",
     "lulz_had": "many",
     "external_link": "YY",
-    "small_image": "X",
+    "small_image": "https://cdn-icons-png.flaticon.com/128/919/919852.png",
     "techniques_used": [
       "python"
     ],
@@ -20,99 +20,105 @@
   },
   {
     "start_date": "2009-09-07",
-    "short_description": "no",
+    "short_description": "Spreadsheet program for economics.",
     "course_name": "OK\u00c4NT",
     "long_description": "no no no",
     "group_size": 4,
     "academic_credits": "WUT?",
     "lulz_had": "few",
     "external_link": "YY",
-    "small_image": "X",
+    "small_image": "https://cdn-icons-png.flaticon.com/512/8445/8445741.png",
     "techniques_used": [
       "c++",
       "csv",
       "python"
     ],
-    "project_name": "NEJ",
+    "project_name": "Spreader",
     "course_id": "TDP003",
     "end_date": "2009-09-08",
-    "project_id": 3,
+    "project_id": 2,
     "big_image": "XXX"
   },
   {
     "start_date": "2009-09-08",
-    "short_description": "no",
+    "short_description": "A keygen for spotify. A break from the ads!",
     "course_name": "OK\u00c4NT",
     "long_description": "no no no",
     "group_size": 6,
     "academic_credits": "WUT?",
     "lulz_had": "medium",
     "external_link": "YY",
-    "small_image": "X",
+    "small_image": "https://cdn-icons-png.flaticon.com/128/3669/3669986.png",
     "techniques_used": [
       "ada",
       "python"
     ],
-    "project_name": "2007",
+    "project_name": "SpotifyGen",
     "course_id": "TDP003",
-    "end_date": "2009-09-09",
-    "project_id": 2,
+    "end_date": "2009-09-11",
+    "project_id": 3,
     "big_image": "XXX"
   },
   {
-    "start_date": "2009-09-06",
-    "short_description": "no1",
+    "start_date": "2009-09-09",
+    "short_description": "A twitter re-skin for X.",
     "course_name": "HOHO",
     "long_description": "no no no",
     "group_size": 8,
     "academic_credits": "WUT?",
     "lulz_had": "over 9000",
     "external_link": "YY",
-    "small_image": "X",
+    "small_image": "https://cdn-icons-png.flaticon.com/128/3670/3670151.png",
     "techniques_used": [
-
+      "css",
+      "html",
+      "flask",
+      "jinja2"
     ],
-    "project_name": ",",
+    "project_name": "Tweety",
     "course_id": " \"",
-    "end_date": "2009-09-07",
+    "end_date": "2009-09-10",
     "project_id": 4,
     "big_image": "XXX"
   },
   {
-    "start_date": "2009-09-06",
-    "short_description": "no2",
+    "start_date": "2009-09-10",
+    "short_description": "Swedish neovim plugin",
     "course_name": "HOHO",
     "long_description": "no no no",
     "group_size": 8,
     "academic_credits": "WUT?",
     "lulz_had": "over 9000",
     "external_link": "YY",
-    "small_image": "X",
+    "small_image": "https://cdn-icons-png.flaticon.com/128/14402/14402426.png",
     "techniques_used": [
-
+      "swedish",
+      "lua",
+      "bash"
     ],
-    "project_name": ",",
+    "project_name": "sVim",
     "course_id": " \"",
-    "end_date": "2009-09-07",
+    "end_date": "2009-09-15",
     "project_id": 5,
     "big_image": "XXX"
   },
   {
-    "start_date": "2009-09-06",
-    "short_description": "no3",
+    "start_date": "2009-09-12",
+    "short_description": "A mod manager for minecraft forge.",
     "course_name": "HOHO",
     "long_description": "no no no",
     "group_size": 8,
     "academic_credits": "WUT?",
     "lulz_had": "over 9000",
     "external_link": "YY",
-    "small_image": "X",
+    "small_image": "https://cdn-icons-png.flaticon.com/128/10125/10125543.png",
     "techniques_used": [
-
+      "java",
+      "c"
     ],
-    "project_name": ",",
+    "project_name": "Minecraft Mod Manager",
     "course_id": " \"",
-    "end_date": "2009-09-07",
+    "end_date": "2009-09-18",
     "project_id": 6,
     "big_image": "XXX"
   }

MyPortfolio/data.py

@@ -4,8 +4,6 @@
 
 # Gör project_id dynamisk så att den uppdateras efter borttagning/addering av projekt.
 
-
-
 # ---- IMPORTS ---- #
 import os
 import json
@@ -16,9 +14,7 @@ from operator import itemgetter
 # ---- IMPORTS ---- #
 
 
-
 def load(filename):
-
     try:
         with open(filename, 'r', encoding='utf-8') as file:
             data = json.load(file)
@@ -29,18 +25,14 @@ def load(filename):
         return None
 
 
-
 def save(data):
-
     with open('data.json', 'w', encoding='utf-8') as file:
         json.dump(data, file, ensure_ascii=False, indent=4)
 
     file.close()
 
-
     # Reload data
     load()
-    
 
 
 # Get project count
@@ -48,19 +40,15 @@ def get_project_count(data):
     return len(data)
 
 
-
 # Get project by ID
 def get_project(data, id):
-
     for n in range(0, get_project_count(data)):
         if data[n]['project_id'] == id:
             return data[n]
 
 
-
 # Get all unique techniques from project
 def get_techniques(data):
-    
     techniques = []
     for project in data:
         for tech in project['techniques_used']:
@@ -68,14 +56,12 @@ def get_techniques(data):
                 techniques.append(tech)
 
     techniques.sort()
-    
-    return techniques
 
+    return techniques
 
 
 # Gets all unique techniques from all projects ! COULD USE SOME FILTERING !
 def get_technique_stats(data):
-
     technique_list = get_techniques(data)
     technique_stats = {}
     current_techniques = []
@@ -83,21 +69,17 @@ def get_technique_stats(data):
     for technique in technique_list:
         for project in data:
             if technique in project['techniques_used']:
-                current_techniques.append({'id' : project['project_id'], 'name' : project['project_name']})
+                current_techniques.append({'id': project['project_id'], 'name': project['project_name']})
 
-        technique_stats.update({technique : current_techniques.copy()})
+        technique_stats.update({technique: current_techniques.copy()})
         current_techniques.clear()
 
-
     return technique_stats
 
 
-
 # Fetches and sorts projects matching criteria from the specified list.
 def search(data, sort_by='start_date', sort_order='desc', techniques=None, search=None, search_fields=None):
-
-    if type(search) == str:
-
+    if isinstance(search, str):
         search = search.lower()
 
     results = []
@@ -107,88 +89,78 @@ def search(data, sort_by='start_date', sort_order='desc', techniques=None, searc
 
     # sort it
     results = sorted(results, key=itemgetter(sort_by))
-    
+
     # order it
-    if sort_order == 'desc': results.reverse()
+    if sort_order == 'desc':
+        results.reverse()
 
-    
     # filter it (by techniques)
-    if techniques != None:
+    if techniques is not None:
         for technique in get_techniques(data):
             for project in results:
-
-                
                 if all(n in project['techniques_used'] for n in techniques):
                     pass
                 else:
                     results.pop(results.index(project))
 
     # search for it
-    if search != None:
-        
+    if search is not None:
         search_results = []
 
         for project in results:
-
-            if search_fields != None and search_fields != "" and search != "":
-
+            if search_fields is not None and search_fields != "" and search != "":
                 for field in search_fields:
                     substring = project[field]
-                    if type(substring) == str:
+                    # Check type before calling lower()
+                    if isinstance(substring, str):
                         substring = substring.lower()
                         if substring.find(search) != -1:
                             search_results.append(project)
                             break
-                    if type(substring) == int:
+                    elif isinstance(substring, int):
                         if str(substring).find(search) != -1:
                             search_results.append(project)
                             break
-                    if type(substring) == list:
+                    elif isinstance(substring, list):
                         for subsubstring in substring:
-                            if type(subsubstring) == str:
-                                if subsubstring.find(search) != -1:
+                            if isinstance(subsubstring, str):
+                                if subsubstring.lower().find(search) != -1:
                                     search_results.append(project)
                                     break
-                            if type(subsubstring) == int:
+                            elif isinstance(subsubstring, int):
                                 if str(subsubstring).find(search) != -1:
                                     search_results.append(project)
                                     break
 
-
-
-
             elif search_fields == "":
                 results.clear()
                 break
-                
+
             else:
                 for substring in list(project.values()):
-                    substring = substring.lower()
-                    print(type(substring))
-                    if type(substring) == str:
-                        if substring.find(search) != -1:
+                    # Check type before calling lower()
+                    if isinstance(substring, str):
+                        if substring.lower().find(search) != -1:
                             search_results.append(project)
                             break
-                    if type(substring) == int:
+                    elif isinstance(substring, int):
                         if str(substring).find(search) != -1:
                             search_results.append(project)
                             break
-                    if type(substring) == list:
+                    elif isinstance(substring, list):
                         for subsubstring in substring:
-                            if type(subsubstring) == str:
-                                if subsubstring.find(search) != -1:
+                            if isinstance(subsubstring, str):
+                                if subsubstring.lower().find(search) != -1:
                                     search_results.append(project)
                                     break
-                            if type(subsubstring) == int:
+                            elif isinstance(subsubstring, int):
                                 if str(subsubstring).find(search) != -1:
                                     search_results.append(project)
                                     break
-                
+
         results = search_results
-                
-    #pprint.pp(results)
-    return results
 
+    return results
 
 
 def cls():
@@ -196,14 +168,12 @@ def cls():
     pass
 
 
-
 def new_project(data):
-
     cls()
 
     # ---- COLLECT INFO ----
     project_title = input("Project title: ")
-    project_id = get_project_count(data)+1
+    project_id = get_project_count(data) + 1
     techniques = input("\nWhat techniques does your project use? Write them out in the following format: python, java, html, css\n\nTechniques: ").replace(" ", "").lower().split(",")
     description = input("Provide a description of your project: ")
     url = input("Provide a link to the source code/demo of your project: ")
@@ -212,32 +182,29 @@ def new_project(data):
 
     # lexicographical order sort aka alphabetical
     techniques.sort()
-    
+
     new_project = {
-	    "project_name": project_title,
-	    "project_id": project_id,
-	    "used_techniques": techniques,
-	    "long_description": description,
-	    "img_url": img_url,
-	    "url": url
+        "project_name": project_title,
+        "project_id": project_id,
+        "used_techniques": techniques,
+        "long_description": description,
+        "img_url": img_url,
+        "url": url
     }
-        
+
     cls()
-    
+
     print("\n\nProject preview:\n")
     pprint.pp(new_project)
 
     option = int(input("\n1: Create\n2: Cancel\n> "))
 
     if option == 1:
-        
         data.append(new_project)
-        
         save(data)
-        
+
         pass
 
-    
 
 def list_projects(data):
     cls()
@@ -246,46 +213,37 @@ def list_projects(data):
         print("\n")
 
 
-
 def edit_project(data, id):
-    
     while True:
         if id > get_project_count(data) or id < 0:
             print("Project ID doesn't exist.\n")
             id = int(input("Project_ID to edit: "))
         else:
-
             cls()
-            
             project = get_project(data, id)
-            project.pop('project_id') # Project ID shouldn't be changed 
+            project.pop('project_id')  # Project ID shouldn't be changed
 
             print(f"Editing project: {project['title']}\n")
-            
             pprint.pp(project)
             print("")
 
             for field in enumerate(project):
                 print(f"{field[0]}: {field[1]}")
-            
+
             input("\nField to edit: ")
-            
-            
+
 
 def delete_project(data):
     pass
 
 
-
 def menu(data):
-
     menu_items = ["Add new project", "List projects", "Edit existing project", "Delete project", "Quit"]
     menu_index = 0
 
     while True:
-        
         cls()
-        
+
         titular = r"""
   ____                   _      __           _       _         
  |  _ \    ___    _ __  | |_   / _|   ___   | |     (_)   ___  
@@ -297,7 +255,7 @@ def menu(data):
         print(titular)
 
         for i in menu_items:
-            print(f"{menu_items.index(i)+1}: {i}")
+            print(f"{menu_items.index(i) + 1}: {i}")
 
         try:
             option = int(input(f"> "))
@@ -317,17 +275,11 @@ def menu(data):
                 break
         except:
             print("")
-            
-
-
 
-            
 
 def main():
-
     data = load('MyPortfolio/data.json')
 
 
-
 if __name__ == "__main__":
     main()

MyPortfolio/myFlaskProject.py

-from flask import Flask, render_template
+from flask import Flask, render_template, request
 from data import *
 
-app = Flask(__name__,template_folder='./templates')
+app = Flask(__name__, template_folder='./templates')
 
 data = load('data.json')
 
@@ -9,7 +9,22 @@ data = load('data.json')
 def index():
     return render_template('index.html')
 
-@app.route("/list.html")
+@app.route("/list.html", methods=['GET', 'POST'])
 def list():
-    return render_template('list.html',
-                            projects = data)
+    search_query = request.form.get('search', '')
+    sort_by = request.form.get('sort_by', 'start_date')
\ No newline at end of file
+    sort_order = request.form.get('sort_order', 'desc')
+
+    filtered_projects = search(data, sort_by=sort_by, sort_order=sort_order, search=search_query)
+    return render_template('list.html', projects=filtered_projects, search_query=search_query, sort_by=sort_by, sort_order=sort_order)
+
+@app.route("/project/<int:project_id>")
+def project_details(project_id):
+    project = get_project(data, project_id)
+    if project:
+        return render_template('project_details.html', project=project)
+    else:
+        return "Project not found", 404
+
+if __name__ == "__main__":
+    app.run(debug=True)

MyPortfolio/static/style/main.css

@@ -124,12 +124,17 @@ header a {
 .project-img {
     height: 50%;
     width: 100%;
+    object-fit:scale-down;
+
 }
 
 .project-title {
     padding: 0;
     font-size: large;
     margin-left: 10px;
+
+    color: whitesmoke;
+    text-decoration:underline;
 }
 
 .project-desc {

MyPortfolio/templates/list.html

@@ -2,46 +2,46 @@
 <html>
 <head>
     <link rel="stylesheet" href="../static/style/main.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
+    <title>Projects</title>
 </head>
 <body>
     <header>
         <ul>
             <li><a href="/">Home</a></li>
             <li><a href="techniques.html">Techniques</a></li>
-            <li><pre class="logo">
-██████╗ ██╗ ██████╗
-██╔══██╗██║██╔═══██╗
-██████╔╝██║██║   ██║
-██╔═══╝ ██║██║   ██║
-██║██╗  ██║╚██████╔╝
-╚═╝╚═╝  ╚═╝ ╚═════╝</pre></li>
             <li><a href="list.html">Projects</a></li>
             <li><a href="https://github.com/olma957">GitHub</a></li>
-        </ul> 
+        </ul>
     </header>
 
     <div class="content-container">
-        <div class="project-table">
+        <!-- Search and Sort Form -->
+        <form method="POST" action="/list.html">
+            <input type="text" name="search" placeholder="Search projects" value="{{ search_query }}">
+            <select name="sort_by">
+                <option value="start_date" {% if sort_by == 'start_date' %}selected{% endif %}>Start Date</option>
+                <option value="project_name" {% if sort_by == 'project_name' %}selected{% endif %}>Project Name</option>
+                <option value="group_size" {% if sort_by == 'group_size' %}selected{% endif %}>Group Size</option>
+                <option value="lulz_had" {% if sort_by == 'lulz_had' %}selected{% endif %}>Lulz Had</option>
+            </select>
+            <select name="sort_order">
+                <option value="desc" {% if sort_order == 'desc' %}selected{% endif %}>Descending</option>
+                <option value="asc" {% if sort_order == 'asc' %}selected{% endif %}>Ascending</option>
+            </select>
+            <button type="submit">Search</button>
+        </form>
 
+        <!-- Project List -->
+        <div class="project-table">
             {% for p in projects %}
-
             <div class="project">
-
-
-
-                <img class="project-img" src={{ p['small_image'] }}>
-
-                <p class="project-title"> >{{ p['project_name'] }} </p>
-
-                <p class="project-desc"> {{ p['short_description'] }}</p>
-
+                <a href="/project/{{ p['project_id'] }}">
+                    <img class="project-img" src="{{ p['small_image'] }}">
+                    <p class="project-title"> >{{ p['project_name'] }} </p>
+                    <p class="project-desc"> {{ p['short_description'] }}</p>
+                </a>
             </div>
-
             {% endfor %}
-
         </div>
     </div>
 
@@ -61,4 +61,4 @@
         </p>
     </footer>
 </body>
-</html> 
+</html>
\ No newline at end of file

MyPortfolio/templates/project_details.html

+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="../static/style/main.css">
+    <title>{{ project['project_name'] }}</title>
+</head>
+<body>
+    <header>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="techniques.html">Techniques</a></li>
+            <li><a href="list.html">Projects</a></li>
+            <li><a href="https://github.com/olma957">GitHub</a></li>
+        </ul>
+    </header>
+
+    <div class="content-container">
+        <h1>{{ project['project_name'] }}</h1>
+        <img src="{{ project['big_image'] }}" alt="Project Image">
+        
+        <ul>
+            <li><strong>Course Name:</strong> {{ project['course_name'] }}</li>
+            <li><strong>Group Size:</strong> {{ project['group_size'] }}</li>
+            <li><strong>Start Date:</strong> {{ project['start_date'] }}</li>
+            <li><strong>End Date:</strong> {{ project['end_date'] }}</li>
+            <li><strong>Techniques Used:</strong> {{ project['techniques_used'] | join(', ') }}</li>
+            <li><strong>Description:</strong> {{ project['long_description'] }}</li>
+            <li><strong>Academic Credits:</strong> {{ project['academic_credits'] }}</li>
+            <li><strong>Lulz Had:</strong> {{ project['lulz_had'] }}</li>
+            <li><strong>External Link:</strong> <a href="{{ project['external_link'] }}" target="_blank">{{ project['external_link'] }}</a></li>
+        </ul>
+        
+        <a href="/list.html">Back to Projects</a>
+    </div>
+
+    <footer>
+        <p>Authors:<br>
+            <a href="mailto:olima957@student.liu.se">Oliwer Mattsson: olima957@student.liu.se</a><br>
+            <a href="mailto:taiku983@student.liu.se">Taif Kurji: taiku983@student.liu.se</a>
+        </p>
+        <p>License:<br>
+            <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
+        </p>
+        <p>Links:<br>
+            <a href="/">Home</a><br>
+            <a href="techniques.html">Techniques</a><br>
+            <a href="list.html">Projects</a><br>
+            <a href="https://github.com/olma957">GitHub</a>
+        </p>
+    </footer>
+</body>
+</html>