Merge pull request #2 from TaylorPhelps/Updates

Updated HTML, CSS, and JS files
ThatSINEWAVE · May 23, 2024 · afeb7bc · afeb7bc
2 parents 068c153 + 0a5a473
commit afeb7bc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="site-data/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="site-data/favicon-16x16.png">
     <link rel="manifest" href="site-data/site.webmanifest">
+    <script src="script.js" defer></script>
   </head>
   <body>
     <header>
@@ -25,10 +26,11 @@
       </div>
       <h1>Prediction Engine</h1>
       <div id="input-section">
+        <label for="name-input">Enter your name:</label>
         <input type="text" id="name-input" placeholder="Enter your name">
         <button id="predict-button">Predict</button>
       </div>
-      <div id="result-section" class="hidden">
+      <div id="result-section" class="hidden" aria-live="polite">
         <p id="result-sentence"></p>
         <button id="try-again-button">Try Again</button>
       </div>

diff --git a/script.js b/script.js
@@ -272,21 +272,25 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     async function fetchPredictions(name) {
-        const genderPromise = fetch(`https://api.genderize.io?name=${name}`).then(response => response.json());
-        const agePromise = fetch(`https://api.agify.io?name=${name}`).then(response => response.json());
-        const nationalityPromise = fetch(`https://api.nationalize.io?name=${name}`).then(response => response.json());
+        try {
+            const [genderData, ageData, nationalityData] = await Promise.all([
+                fetch(`https://api.genderize.io?name=${name}`).then(response => response.json()),
+                fetch(`https://api.agify.io?name=${name}`).then(response => response.json()),
+                fetch(`https://api.nationalize.io?name=${name}`).then(response => response.json())
+            ]);
 
-        const [genderData, ageData, nationalityData] = await Promise.all([genderPromise, agePromise, nationalityPromise]);
-
-        const gender = genderData.gender;
-        const genderProb = (genderData.probability * 100).toFixed(2) + '%';
-        const age = ageData.age;
-        const ageCount = ageData.count;
-        const countryCode = nationalityData.country[0]?.country_id || 'Unknown';
-        const nationality = countryCodes[countryCode] || 'Unknown';
-        const nationalityProb = nationalityData.country[0] ? (nationalityData.country[0].probability * 100).toFixed(2) + '%' : 'N/A';
+            const gender = genderData.gender;
+            const genderProb = (genderData.probability * 100).toFixed(2) + '%';
+            const age = ageData.age;
+            const ageCount = ageData.count;
+            const countryCode = nationalityData.country[0]?.country_id || 'Unknown';
+            const nationality = countryCodes[countryCode] || 'Unknown';
+            const nationalityProb = nationalityData.country[0] ? (nationalityData.country[0].probability * 100).toFixed(2) + '%' : 'N/A';
 
         displayResults(name, gender, genderProb, age, ageCount, nationality, nationalityProb);
+        } catch (error) {
+            console.error('Error fetching predictions:', error);
+        }
     }
 
     function displayResults(name, gender, genderProb, age, ageCount, nationality, nationalityProb) {

diff --git a/styles.css b/styles.css
@@ -1,3 +1,9 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
 body {
 	font-family: Arial, sans-serif;
 	display: flex;