More element details work

JerebChase · Jan 30, 2025 · 0782493 · 0782493
1 parent f0e5093
commit 0782493
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/src/app/elements/components/element-detail/element-detail.component.html b/src/app/elements/components/element-detail/element-detail.component.html
@@ -26,7 +26,7 @@ <h2>{{elementDetails.symbol}}</h2>
         </div>
         <div class="element-highlights">
           <span class="element-highlight">
-            <p>{{formatDiscoverer(elementDetails.discoverer)}}</p>
+            <p>{{formatDiscoverer(elementDetails.discoverer, elementDetails.yearOfDiscovery)}}</p>
             <img class="icon" src="icons/microscope.svg" alt="Microscope" />
           </span>
           <span class="element-highlight">
@@ -66,27 +66,24 @@ <h2>{{elementDetails.symbol}}</h2>
 
       <div class="element-data">
         <div>
-          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Physical Properties</h3>
-          <p>Melting Point <span>{{elementDetails.meltingPointKelvin}}</span></p>
-          <p>Boiling Point <span>{{elementDetails.boilingPointKelvin}}</span></p>
-          <p>Density <span>{{elementDetails.density}}</span></p>
-          <p>Standard State <span>{{elementDetails.standardState}}</span></p>
+          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Atomic Structure</h3>
+          <p>Electron Configuration <span>{{elementDetails.electronConfiguration}}</span></p>
+          <p>Atomic Weight <span>{{elementDetails.atomicWeight}}</span></p>
+          <p>Isotopes <span>{{elementDetails.isotopes}}</span></p>
         </div>
         <div>
-          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Atomic Properties</h3>
-          <p>Atomic Radius <span>{{elementDetails.atomicRadius}}</span></p>
-          <p>Ionic Radius <span>{{elementDetails.ionicRadius}}</span></p>
-          <p>Electronegativity <span>{{elementDetails.electronegativity}}</span></p>
-          <p>First Ionization Potential <span>{{elementDetails.firstIonizationPotential}}</span></p>
-          <p>Electron Configuration <span>{{elementDetails.electronConfiguration}}</span></p>
+          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Size & Stability</h3>
+          <p>Density <span>{{elementDetails.density}}</span></p>
+          <p>Atomic Radius <span>{{elementDetails.atomicRadius === 0 ? 'N/A' : elementDetails.atomicRadius}}</span></p>
+          <p>Ionic Radius <span>{{elementDetails.ionicRadius === 0 ? 'N/A' : elementDetails.ionicRadius}}</span></p>
+          <p>Most Stable Crystal <span>{{elementDetails.mostStableCrystal}}</span></p>
+          <p>Specific Heat Capacity <span>{{elementDetails.specificHeatCapacity === 0 ? 'N/A' : elementDetails.specificHeatCapacity}}</span></p>
         </div>
         <div>
-          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Other Properties</h3>
-          <p>Atomic Radius <span>{{elementDetails.atomicRadius}}</span></p>
-          <p>Ionic Radius <span>{{elementDetails.ionicRadius}}</span></p>
+          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Reactivity</h3>
           <p>Electronegativity <span>{{elementDetails.electronegativity}}</span></p>
           <p>First Ionization Potential <span>{{elementDetails.firstIonizationPotential}}</span></p>
-          <p>Electron Configuration <span>{{elementDetails.electronConfiguration}}</span></p>
+          <p>Oxidation States <span>{{elementDetails.oxidationStates}}</span></p>
         </div>
       </div>
     </div>

diff --git a/src/app/elements/components/element-detail/element-detail.component.scss b/src/app/elements/components/element-detail/element-detail.component.scss
@@ -35,6 +35,7 @@
 
   .row-one {
     display: flex;
+    justify-content: space-between;
 
     .element-card {
       display: flex;
@@ -81,7 +82,7 @@
     }
 
     .element-highlights {
-      width: 45vw;
+      width: 40vw;
       display: flex;
       flex-direction: column;
       align-items: end;
@@ -132,6 +133,7 @@
       justify-content: space-between;
 
       span {
+        text-align: right;
         font-weight: 400;
       }
     }

diff --git a/src/app/elements/components/element-detail/element-detail.component.ts b/src/app/elements/components/element-detail/element-detail.component.ts
@@ -29,7 +29,7 @@ export class ElementDetailComponent implements OnInit {
     this.router.navigate(['/elements']);
   }
 
-  formatDiscoverer = (discoverer: string) => {
+  formatDiscoverer = (discoverer: string, year: number) => {
     if (discoverer === 'Prehistoric') {
       return discoverer;
     }
@@ -41,6 +41,6 @@ export class ElementDetailComponent implements OnInit {
     if (matches && matches.length === 1) {
       discoverer = discoverer.replace(',', ' and');
     }
-    return `Discovered by ${discoverer}`;
+    return `Discovered by ${discoverer} in ${year}`;
   }
 }