lade endast till kommentarer

client/FirstViewstylesheet.css

@@ -72,7 +72,7 @@ h3 {
 
 .image-wrapper {
   display: flex;
-  justify-content: center; /* Detta är det ända som kan centrera inehåll i flex containers*/
+  justify-content: center;
 }
 
 .firstThreeImages-container img,

client/firstViewClient.js

-// I denna kommer mestadels all koppling av node och mongodb ske.
-// viktigt att vi även fixar så att texten på förstasidan laddas in här, via
-// javascript och inte via htmln.
-
 const serverUrl = "http://127.0.0.1:3000";
+
+// This is the number we can change if we wnat to show more movies from
+// every genre, right now it can max show 1000 movies/genre
 const maxMoviesShown = 1000;
 
-//Kallar på de funktioner som ska köras när sidan laddas in
 document.addEventListener("DOMContentLoaded", function () {});
 
 let genre = ""; // current genre selected
@@ -44,6 +42,7 @@ function fetchMovies2(genre) {
   }
 }
 
+// Function to display all movies in specific genre
 function displayGenreResult(genreData) {
   let genres = document.getElementById("genres");
   genres.style.display = "block";
@@ -65,6 +64,7 @@ function displayGenreResult(genreData) {
   }
 }
 
+// Function to look up a specific movie
 function lookupMovie(movie) {
   console.log("Lookup movie", movie);
   let id = movie.normalized_id;

client/firstview.html

@@ -49,15 +49,15 @@
         <div class="firstThreeImages-container">
           <img
             src="/client/firstViewImages/firstImageContainer1.jpg"
-            alt="Picture of..."
+            alt="Picture of a women"
           />
           <img
             src="/client/firstViewImages/firstImageContainer2.jpg"
-            alt="Picture of..."
+            alt="Picture of a woman"
           />
           <img
             src="/client/firstViewImages/firstImageContainer3.jpg"
-            alt="Picture of..."
+            alt="Picture of a woman"
           />
         </div>
       </div>
@@ -73,7 +73,6 @@
           equality in movies, offering insightful analysis and comparisons to
           empower viewers with valuable information.
         </h3>
-        <!-- Lägg in text -->
       </div>
     </article>
 
@@ -115,21 +114,7 @@
       </div>
     </div>
 
-    <!--kommenterade ut detta då det blir lite för mycket bilder
-denna del kan vi kanske ta bort senare-->
-    <!-- Second image container -->
-    <!--<article class="second-image-container">
-    <div class = "secondThreeImages-container">
-        <div class="image-wrapper">
-            <img src="/client/firstViewImages/secondImageContainer1.avif" alt ="Picture of..."> <!-- Lägg in bild -->
-    <!--<img src="/client/firstViewImages/secondImageContainer2.avif" alt ="Picture of..."> <!-- Lägg in bild -->
-    <!--<img src="/client/firstViewImages/secondImageContainer3.avif" alt ="Picture of..."> <!-- Lägg in bild -->
-    <!--</div>
-    </div>
-</article> 
-
-
-<!-- Third text container -->
+    <!--Third Text container -->
     <article class="third-text-container">
       <div class="thirdText-container">
         <h3>
@@ -140,12 +125,10 @@ denna del kan vi kanske ta bort senare-->
           diversity, inclusivity, and gender equality in the world of movies.
           Happy exploring!
         </h3>
-        <!-- Lägg in text -->
       </div>
     </article>
 
     <section id="genre-section">
-      <!-- Second buttons container -->
       <!-- Second buttons container -->
       <article class="second-buttons-container">
         <!-- First row: Genre buttons -->

client/helper-functions.js

-// Diverse hjälp funktioner ...
+// Here we try to collect some of our more basic functions to make
+// the code a bit shorter in many places.
 
 function navigateTo(url, reload = false) {
   document.location.href = url;

client/movieViewClient.js

-//Kallar på de funktioner som ska köras när sidan laddas in
+//Calling on thoose functions that needs to start when the server starts
 document.addEventListener("DOMContentLoaded", function () {
   fetchMovieData();
 });

server/app.js

+// To start the server we use:  node .\server\app.js
+
 // Importera moduler för att arbeta med HTTP och filsystemet
 const http = require("http");
 const fs = require("fs");
@@ -45,10 +47,6 @@ const server = http.createServer((req, res) => {
       routeFile(file, "image/avif", res);
     } else
       switch (pathComponents[1]) {
-        // case "": //  visa default html sida
-        //   routeStartPage(res);
-        //   break;
-
         case "genre":
           let genre = pathComponents[2];
           console.log("Lookup genre:", genre);
@@ -76,9 +74,6 @@ const server = http.createServer((req, res) => {
             let genre = pathComponents[2];
             console.log("Genre-mean-rating for genre:", genre);
 
-            // const jsonData = { genre: genre, rating: 123 };
-            // const jsonDataAsString = JSON.stringify(jsonData);
-            // sendResponse(res, 200, "application/json", jsonDataAsString);
             routeGenreMeanRating(res, genre);
           }
           break;
@@ -200,19 +195,16 @@ async function routeGenreMeanRating(res, genre) {
   const dbCollection = dbProject.collection(dbImdbName); // select a specified (document) collection in the databas
 
   const filterQuery = { genre: { $in: [genre] } };
-  const projectionQuery = { name: 1, normalized_id: 1 }; //väljer att bara hämta namn, defult så kommer id:n också med
+  const projectionQuery = { name: 1, normalized_id: 1 };
   const movies = await dbCollection
     .find(filterQuery)
     .project(projectionQuery)
     .toArray();
 
-  // hämta Bechdel data ... o sammanställ, summera o skapa medelvärde ...
-  var cMovies = 0; // räknar antal filmer
-  var cBechdelMovies = 0; // räknar antal filmer med Bechdel rating
-  var sumRating = 0; // summa av ratingen
+  var cMovies = 0; // count how many movies we go through
+  var cBechdelMovies = 0; // counting how many of the films actually have a bechdel rating
+  var sumRating = 0; // sum of the rating
   for (const movie of movies) {
-    //movies.forEach((movie) => {
-    // console.log("Movie", movie.name, "id:", movie.normalized_id);
     var bechdels = await bechdelArray(movie.normalized_id);
     ++cMovies;
     if (bechdels)
@@ -220,7 +212,7 @@ async function routeGenreMeanRating(res, genre) {
         ++cBechdelMovies;
         sumRating += bechdel.rating;
       }
-    if (cMovies >= 1000) break; // Ta inte med alla filmer om de är många. Detta gör sidan snabbare för test...
+    if (cMovies >= 1000) break; // This is what stops the trend page from going thru more then 1000 movies
   }
 
   var rating = cBechdelMovies == 0 ? 0 : sumRating / cBechdelMovies;