cleaning and commenting

main.js

@@ -1,3 +1,6 @@
+// It is defined to create object from.
+// Technically there is no need for this (there is no point in here to populate
+// this object from a JSON with exactly same structure as this).
 class Result {
     constructor(name, gender, probability, count) {
         this.name = name;
@@ -10,7 +13,21 @@ class Result {
     }
 }
 
-function clear_form() {
+// Global result object.
+// It is defined to be used as "shared state" between function. (like Redux or Vuex)
+let result = null;
+
+// Validate name 
+// length between 1 and 255
+// only lowercase and uppercase english letters
+function validate_form(name) {
+    let reg_expr = /^[a-zA-Z ]{1,255}$/;
+    return reg_expr.test(name);
+}
+
+// It is defined to clear all information that is displaying on screen, 
+// after submitting a new name to lookup
+function clear_results() {
     result = null;
     let result_gender = document.getElementById("result-gender");
     let result_probability = document.getElementById("result-probability");
@@ -27,59 +44,21 @@ function clear_form() {
     stored_probability.innerHTML = "";
 }
 
+// It is defined to loading data from LocalStorage and show it on "stored-box", if exist.
 function load_data(name) {
-    let stored_data = JSON.parse(window.localStorage.getItem(name));
+    let stored_data = window.localStorage.getItem(name);
     if (stored_data != null) {
+        stored_data = JSON.parse(stored_data)
         let stored = new Result(stored_data["name"], stored_data["gender"], stored_data["probability"], stored_data["count"]);
         let stored_gender = document.getElementById("stored-gender");
         let stored_probability = document.getElementById("stored-probability");
+
         stored_gender.innerHTML = stored.gender;
         stored_probability.innerHTML = stored.probability;
     }
 }
 
-let result = null;
-async function submit_form(event) {
-    try {
-        clear_form();
-        let name = document.forms["name-form"]["name"].value;
-        let endpoint = "https://api.genderize.io/";
-
-        let reg_expr = /^[a-zA-Z ]{1,255}$/;
-        if (reg_expr.test(name)) {
-            let url = `${endpoint}?name=${name}`;
-            fetch(url)
-                .then((response) => {
-                    return response.json();
-                })
-                .then((data) => {
-                    if (data["gender"] != null) {
-                        let result_gender = document.getElementById("result-gender");
-                        let result_probability = document.getElementById("result-probability");
-                        result = new Result(data["name"], data["gender"], data["probability"], data["count"]);
-
-                        let radio_button = (document.getElementById(result.gender).checked = true);
-                        result_gender.innerHTML = result.gender;
-                        result_probability.innerHTML = result.probability;
-                    } else {
-                        alert("sorry we cant find out what gender is this?");
-                    }
-                })
-                .catch((reason) => {
-                    alert(reason);
-                });
-
-            load_data(name);
-        } else {
-            alert("please provide valid name");
-        }
-    } catch (e) {
-        alert(e);
-    } finally {
-        event.preventDefault();
-    }
-}
-
+// It is defined to store form data in LocalStorage
 function store_data() {
     let selected_male = document.getElementById("male").checked;
     let selected_female = document.getElementById("female").checked;
@@ -90,5 +69,53 @@ function store_data() {
 
     let key = result.name;
     window.localStorage.setItem(key, JSON.stringify(data));
-    load_data(key)
+    load_data(key);
+}
+
+// It is defined to fetch data from the API provider and populate the form with this data.
+// Here the only thing that is going to be populated is gender radio button.
+function fetch_data(name) {
+    let endpoint = "https://api.genderize.io/";
+    let url = `${endpoint}?name=${name}`;
+    fetch(url)
+        .then((response) => {
+            return response.json();
+        })
+        .then((data) => {
+            if (data["gender"] != null) {
+                result = new Result(data["name"], data["gender"], data["probability"], data["count"]);
+
+                let result_gender = document.getElementById("result-gender");
+                let result_probability = document.getElementById("result-probability");
+                let radio = document.getElementById(result.gender);
+
+                radio.checked = true;
+                result_gender.innerHTML = result.gender;
+                result_probability.innerHTML = result.probability;
+            } else {
+                console.log("sorry we cant find out what gender is this?");
+            }
+        })
+        .catch((reason) => {
+            console.log(reason);
+        });
+}
+
+// Defines the flow of submitting data and displaying it on screen.
+// Runs after submit button clicked.
+async function submit_form(event) {
+    try {
+        clear_results();
+        let name = document.forms["name-form"]["name"].value;
+        if (validate_form(name)) {
+            fetch_data(name);
+            load_data(name);
+        } else {
+            console.log("please provide valid name");
+        }
+    } catch (e) {
+        console.log(e);
+    } finally {
+        event.preventDefault();
+    }
 }