Merge pull request #264 from NymexData/development

Introducing v.1.1.0

popup/index.html

@@ -20,17 +20,17 @@ <h1>Personalized Recommendations</h1>
     <p id="status-message"></p>
   </div>
 
-  <!-- Add links to jQuery and Axios -->
+
   <script src="../scripts/jquery-3.6.0.min.js"></script>
   <script src="../scripts/axios.min.js"></script>
 
-  <!-- Load the external api.js file -->
+
   <script src="../scripts/api.js"></script>
 
-  <!-- Load the popup.js script -->
+
   <script src="../popup/popup.js"></script>
 
-  <!-- Developer's information -->
+
   <div class="developer-info">
     Developed by <a href="mailto:[email protected]">Felipe Alfonso Gonzalez</a>, Computer Science Engineer
     <br>

popup/popup.js

@@ -1,6 +1,5 @@
 // popup/popup.js
 
-// Add a click event listener to toggle the configuration section
 document.addEventListener('DOMContentLoaded', () => {
   const configButton = document.querySelector('.accordion-header');
   const configSection = document.getElementById('config-section');
@@ -9,17 +8,17 @@ document.addEventListener('DOMContentLoaded', () => {
     configSection.classList.toggle('active');
   });
 
-  // Add a click event listener to save the API key
+
   const saveButton = document.getElementById('save-button');
   const apiKeyInput = document.getElementById('api-key');
   const statusMessage = document.getElementById('status-message');
 
   saveButton.addEventListener('click', () => {
     const apiKey = apiKeyInput.value;
     if (apiKey) {
-      // Save the API key to local storage
+
       localStorage.setItem('tmdb_api_key', apiKey);
-      // Display a success message to the user
+
       statusMessage.textContent = 'API Key saved successfully!';
     } else {
       statusMessage.textContent = 'Please enter a valid API Key.';

scripts/api.js

@@ -1,6 +1,5 @@
 // api.js
 
-// Function to fetch movie recommendations using the provided API key
 async function fetchMovieRecommendations(apiKey) {
   try {
     const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`);
@@ -11,11 +10,10 @@ async function fetchMovieRecommendations(apiKey) {
   }
 }
 
-// Function to render movie recommendations in the popup
 function renderMovieRecommendations(recommendations) {
   const recommendationsList = document.getElementById('recommendations-list');
 
-  recommendationsList.innerHTML = ''; // Clear previous recommendations
+  recommendationsList.innerHTML = '';
 
   recommendations.forEach((movie) => {
     const movieBox = document.createElement('div');
@@ -42,10 +40,10 @@ function renderMovieRecommendations(recommendations) {
   });
 }
 
-// Check if the API key is already saved in local storage
+
 const apiKey = localStorage.getItem('tmdb_api_key');
 
-// If the API key is already saved, fetch and render movie recommendations
+
 if (apiKey) {
   fetchMovieRecommendations(apiKey)
     .then((recommendations) => renderMovieRecommendations(recommendations))

scripts/content.js

@@ -1,23 +1,22 @@
 // content.js
 function insertExtensionUI() {
-    // Check if the extension UI is already inserted to avoid duplication
+
     if (!document.getElementById("theatherflix-extension")) {
       const extensionUI = document.createElement("div");
       extensionUI.id = "theatherflix-extension";
-      // Insert your UI elements here (e.g., personalized recommendations, stars, etc.)
-      // For this example, we'll just add a simple text.
+
       extensionUI.innerHTML = "<p>Personalized recommendations will appear here.</p>";
       document.body.appendChild(extensionUI);
     }
   }
 
-  // Listen for messages from the extension popup
+
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message === "showExtensionUI") {
       insertExtensionUI();
     }
   });
 
-  // Inform the extension popup that the content script is ready
+
   chrome.runtime.sendMessage("contentScriptReady");
 

styles/popup.css

@@ -1,8 +1,8 @@
 /* styles/popup.css */
 /* popup.css */
 body {
-  width: 600px; /* Set the width of the popup */
-  margin: 20px auto; /* Center the popup horizontally */
+  width: 600px; 
+  margin: 20px auto; 
   padding: 20px;
 }
 
@@ -29,8 +29,6 @@ body {
   flex: 1;
 }
 
-
-/* CSS styles for the configuration section */
 #config-section {
   display: none;
   border: 1px solid #ccc;

styles/styles.css

@@ -8,7 +8,6 @@ h1 {
   margin-bottom: 20px;
 }
 
-/* Add styles for the accordion */
 .accordion {
   margin-top: 10px;
   border: 1px solid #ccc;
@@ -32,13 +31,11 @@ h1 {
   padding: 10px;
 }
 
-/* Show the accordion content when the button is clicked */
+
 .accordion.active .accordion-content {
   display: block;
 }
 
-
-/* Add CSS for the accordion */
 .accordion-header {
   cursor: pointer;
   padding: 15px;