Merge pull request #6 from izzymadethat/version-1.1-isaiah

Version 1.1 isaiah
imanidev · Jun 24, 2024 · 7059f22 · 7059f22
2 parents e6099b4 + 3161add
commit 7059f22
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 139 deletions.
diff --git a/index.html b/index.html
@@ -1,22 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dictionary App</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Pathway+Extreme:opsz@8..144&display=swap" rel="stylesheet">
-    <img src="/src/assets/book.png" class="book">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pathway+Extreme:opsz@8..144&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+    <img src="/src/assets/book.png" class="book" />
   </head>
 
   <body>
     <div id="root"></div>
-    <footer> Imani Roberts &copy; 2023</footer>
+    <footer>Imani Roberts &copy; 2023</footer>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.3.6",
     "bootstrap": "^5.3.0-alpha3",
+    "code": "^5.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/App.css b/src/App.css
@@ -11,7 +11,7 @@ body {
   min-height: 100vh;
   max-height: 100vh;
   background-color: #e3d6d2;
-  font-family: 'Pathway Extreme', sans-serif;
+  font-family: "Pathway Extreme", sans-serif;
 }
 
 .mainh1 {
@@ -68,8 +68,6 @@ p {
   margin: 0 auto;
 }
 
-
-
 .search-btn {
   display: flex;
   border: #1b6495;
@@ -80,59 +78,45 @@ p {
 }
 
 .search-btn:hover {
-  border: #4B9CD3;
-  background-color: #4B9CD3;
+  border: #4b9cd3;
+  background-color: #4b9cd3;
 }
 
 .audio {
-  display: flex;
+  /* display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; */
   height: 70px;
   border-radius: 20px;
   margin: 0 auto;
   margin-top: 16px;
   margin-bottom: 16px;
 }
 
-.partospeech {
+/* .partospeech {
   display: flex;
+} */
 
-}
-
-.definition-answers {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  list-style-type: disc;
-  max-width: 90%;
-}
-
-.definition-container {
+/* .definition-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
-}
-
+} */
 
 .error-text {
   display: flex;
   justify-content: center;
   font-size: 19px;
   font-weight: bolder;
-  color: #7F0000;
+  color: #7f0000;
 }
 
-
-
 footer {
   display: flex;
   justify-content: center;
   color: #093e61;
   font-size: 15px;
   margin-top: auto;
-}
+}
diff --git a/src/components/DefinitionAudio.jsx b/src/components/DefinitionAudio.jsx
@@ -0,0 +1,16 @@
+/**
+ * DefinitionAudio Component
+ *
+ * This component recieves audio url from API and returns
+ * audio player if src exists, otherwise it returns null
+ *
+ * @param {string} props.audioSrc
+ * @returns Audio Player component for phonetic spelling of word
+ */
+
+const DefinitionAudio = ({ audioSrc }) => {
+  if (!audioSrc) return null;
+  return <audio className="audio" controls src={audioSrc}></audio>;
+};
+
+export default DefinitionAudio;
diff --git a/src/components/DefinitionDisplay.jsx b/src/components/DefinitionDisplay.jsx
@@ -0,0 +1,50 @@
+import DefinitionAudio from "./DefinitionAudio";
+import MeaningGrid from "./MeaningGrid";
+import "../css/definition.css";
+/**
+ * DefinitionDisplay Component
+ *
+ * Top-level component for displaying definition results.
+ * Renders phonetic information and meanings grid.
+ *
+ * @param {Object} props - Component props.
+ * @param {Object} props.definition - Definition object from state.
+ * @param {string} props.userInput - User input string.
+ * @param {string} props.word - Word string for comparison.
+ * @returns {JSX.Element | null} Definition layout or null if conditions aren't met.
+ */
+
+const DefinitionDisplay = ({ definition, userInput, word }) => {
+  if (!definition || definition.error || userInput !== word) {
+    return null;
+  }
+
+  const phonetics = definition.phonetics;
+  const meanings = definition.meanings;
+
+  return (
+    <div className="definition">
+      {/* Phonetic spelling and audio is available */}
+      {phonetics && (
+        <div className="definition__audio">
+          <p>{phonetics[0].text}</p>
+
+          {/* Phonetics audio player */}
+          <DefinitionAudio audioSrc={phonetics[1].audio} />
+        </div>
+      )}
+      <br />
+
+      <h4 className="definition__header">
+        The definition(s) of{" "}
+        <span className="definition__user-input">{userInput}</span>:
+      </h4>
+
+      <br />
+
+      <MeaningGrid meanings={meanings} />
+    </div>
+  );
+};
+
+export default DefinitionDisplay;