add method count in options, closes #20

Author: Kernix13

details.html

@@ -75,7 +75,7 @@
           <option value="string">String</option>
           <option value="array">Array/List</option>
           <option value="object">Object/Dict</option>
-          <option value="class">Class*</option>
+          <option value="class">Class</option>
           <option value="api">API/HTTP</option>
         </select>
       </fieldset>

js/data/detailsPreEls.js

@@ -3,14 +3,14 @@
 */
 
 const JavaScript = {
-  'number': [
-    'min', 
-    'max', 
-    'floor', 
-    'random', 
-    'sqrt', 
-    'pow',
-    'round',
+  "number": [
+    'Math.min', 
+    'Math.max', 
+    'Math.floor', 
+    'Math.random', 
+    'Math.sqrt', 
+    'Math.pow',
+    'Math.round',
     'toFixed',
     'toPrecision',
     'parseInt', 
@@ -572,20 +572,18 @@ const user = new User("Luna", "luna@email.com", "abc123");
     ],
     "api": [
       {
-        "keywords": ["fetch", "async/await", "try/catch", "json"],
+        "keywords": ["Basic Fetch"],
         "code": `
 const DOMAIN = 'https://example.com';
 
 async function fetchData(endpoint) {
 	try {
 		const response = await fetch(DOMAIN + endpoint);
-
 		if (!response.ok) {
 			throw new Error(\`Response status: \${response.status}\`);
 		}
 
 		const data = await response.json();
-
 		console.log(data);
 		return data;
 	} catch (err) {
@@ -894,7 +892,7 @@ user = User("Luna", "luna@email.com", "abc123")
     ],
     "api": [
       {
-        "keywords": ["requests", "get", "json", "try", "except"],
+        "keywords": ["Basic Fetch"],
         "code": `
 import requests
 
@@ -1236,7 +1234,7 @@ $user = new User("Luna", "luna@email.com", "abc123");
     ],
     "api": [
       {
-        "keywords": ["file_get_contents", "stream_context_create", "print_r", "json_decode", "Exception", "try/catch"],
+        "keywords": ["Basic Fetch"],
         "code": `
 function fetchData($endpoint) {
   $url = 'https://example.com' . $endpoint;
@@ -1629,7 +1627,7 @@ User user = new User("Luna", "luna@email.com", "abc123");
     ],
     "api": [
       {
-        "keywords": ["HttpClient", "GetAsync", "await", "async", "try", "catch", "json"],
+        "keywords": ["Basic Fetch", "json"],
         "code": `
 using System;
 using System.Net.Http;

js/details.js

@@ -27,6 +27,8 @@ const languages = {
   CSharp
 };
 
+const structures = ["number", "string", "array", "object", "class", "api"]
+
 /**
  * * DOM ELEMENT FUNCTIONS
  */
@@ -117,24 +119,53 @@ function createOptions() {
   // Only populate if we have a valid data type
   if (langObj && selectedDataType && langObj[selectedDataType]) {
       langObj[selectedDataType].forEach(method => {
-          const option = document.createElement('option');
-          option.textContent = method;
-          option.value = method;
-          methodsSelect.append(option);
+
+        const count = getMethodUseCount(method);
+
+        const option = document.createElement('option');
+        option.textContent = `${method} (${count})`;
+        option.value = method;
+        
+        methodsSelect.append(option);
       });
   }
 }
 
-// 5. Get data types length by language
-function getDataTypeLen() {
-  console.log(detailsPre["JavaScript"]["number"].length); // 7
-  console.log(detailsPre["JavaScript"]["string"].length); // 9
-  console.log(detailsPre["JavaScript"]["array"].length); // 11
-  console.log(detailsPre["JavaScript"]["object"].length); // 3
-  console.log(detailsPre["JavaScript"]["class"].length); // 4
-  console.log(detailsPre["JavaScript"]["api"].length); // 4
+// 5. Get the count of how many times the methods occurs in "keywords"
+// function getMthodUseCount() {
+//   const primaryLang = getLocalStorage('details-primary'); // 'JavaScript'
+//   const selectedDataType = getLocalStorage('data-type'); // number
+//   const method = getLocalStorage('method-selection'); // 1
+//   const langObjMethod = languages[primaryLang][selectedDataType];
+//   const typeObjects = detailsPre[primaryLang][selectedDataType];
+  
+//   typeObjects.forEach(item => {
+//     console.log(item.keywords); // each keywords array
+//   })
+
+//   console.log(selectedDataType, method, langObjMethod[method]); // number 1 Math.max -> should be Math.min
+//   console.log(typeObjects.length); // 7
+// }
+// getMthodUseCount()
+
+function getMethodUseCount(methodName) {
+  const primaryLang = getLocalStorage('details-primary');
+  const selectedDataType = getLocalStorage('data-type');
+
+  const typeObjects = detailsPre[primaryLang][selectedDataType];
+
+  if (!typeObjects) return 0;
+
+  let count = 0;
+
+  typeObjects.forEach(item => {
+    if (item.keywords.includes(methodName)) {
+      count++;
+    }
+  });
+
+  return count;
 }
-getDataTypeLen()
 
 /**
  * * FUNCTIONS FOR EVENT LISTENERS
@@ -178,7 +209,7 @@ function handlePrimaryCheck(e) {
   state.detailsPrimary = e.target.value;
   setLocalStorage('details-primary', state.detailsPrimary);
 
-  createOptions()
+  // createOptions()
 }
 
 // 3. Secondary language radio button check
@@ -215,7 +246,7 @@ function handleDetailsFormSubmit(e) {
   e.preventDefault();
 
   setLocalStorage('type-selection', dataTypeSelect.selectedIndex);
-  setLocalStorage('method-selection', methodsSelect.selectedIndex);
+  setLocalStorage('method-selection', methodsSelect.value);
 
   state.detailsPrimary
   const primaryDisplay = getLocalStorage('details-primary');