Adding more icons and working on details page

src/app/elements/components/element-detail/element-detail.component.html

@@ -4,21 +4,74 @@
   <h1 class="element-title">{{elementDetails.element}}</h1>
   <div class="back-button" (click)="goBack()"><img src="icons/back-arrow.svg" alt="Back"/></div>
   <div class="element-info">
-    <div class="element-card {{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">
-      <div class="element-header">
-        <p>{{elementDetails.atomicNumber}}</p>
-        <p>{{elementDetails.atomicWeight}}</p>
+    <div class="row-one">
+      <div class="element-card {{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">
+        <div class="element-header">
+          <p>{{elementDetails.atomicNumber}}</p>
+          <p>{{elementDetails.atomicWeight}}</p>
+        </div>
+        <h2>{{elementDetails.symbol}}</h2>
+        <div class="element-footer">
+          <p>{{elementDetails.element}}</p>
+          <p>{{elementDetails.type}}</p>
+        </div>
       </div>
-      <h2>{{elementDetails.symbol}}</h2>
-      <div class="element-footer">
-        <p>{{elementDetails.element}}</p>
-        <p>{{elementDetails.type}}</p>
+      <div class="element-highlights">
+        <span class="element-highlight">
+          <p>Discovered by <span>{{elementDetails.discoverer}}</span> in <span>{{elementDetails.yearOfDiscovery}}</span></p>
+          <img class="icon" src="icons/microscope.svg" alt="Microscope" />
+        </span>
+        <span class="element-highlight">
+          <p>Melts at {{elementDetails.meltingPointKelvin}} Kelvin</p>
+          <img class="icon" src="icons/fire.svg" alt="Microscope" />
+        </span>
+        <span class="element-highlight">
+          <p>Boils at {{elementDetails.boilingPointKelvin}} Kelvin</p>
+          <img class="icon" src="icons/thermometer.svg" alt="Microscope" />
+        </span>
+        <span class="element-highlight">
+          <p>Classified as a {{elementDetails.type.toLocaleLowerCase()}}</p>
+          <span class="type-container" [ngSwitch]="elementDetails.type.toLocaleLowerCase()">
+            <span *ngSwitchCase="'nonmetal'"><img class="icon" src="icons/nonmetal.svg" alt="Nonmetal" /></span>
+            <span *ngSwitchCase="'alkali metal'"><img class="icon" src="icons/alkali-metal.svg" alt="Alkali Metal" /></span>
+            <span *ngSwitchCase="'alkaline earth metal'"><img class="icon" src="icons/earth-metal.svg" alt="Alkaline Earth Metal" /></span>
+            <span *ngSwitchCase="'transition metal'"><img class="icon" src="icons/transition-metal.svg" alt="Alkaline Earth Metal" /></span>
+            <span *ngSwitchCase="'post-transition metal'"><img class="icon" src="icons/post-transition-metal.svg" alt="Alkaline Earth Metal" /></span>
+            <span *ngSwitchCase="'metalloid'"><img class="icon" src="icons/earth-metal.svg" alt="Metalloid" /></span>
+            <span *ngSwitchCase="'halogen'"><img class="icon" src="icons/halogen.svg" alt="Halogen" /></span>
+            <span *ngSwitchCase="'noble gas'"><img class="icon" src="icons/noble-gas.svg" alt="Noble Gas" /></span>
+            <span *ngSwitchCase="'lanthanide'"><img class="icon" src="icons/lanthanide.svg" alt="Lanthanide" /></span>
+            <span *ngSwitchCase="'actinide'"><img class="icon" src="icons/actinide.svg" alt="Actinide" /></span>
+            <span *ngSwitchDefault></span>
+          </span>
+        </span>
+        <span class="element-highlight">
+          <p>Standard state is {{elementDetails.standardState.toLocaleLowerCase()}}</p>
+          <img class="icon {{elementDetails.standardState.includes('Solid') ? '' : 'inactive'}}" src="icons/solid.svg" alt="Solid" />
+          <img class="icon liquid {{elementDetails.standardState.includes('Liquid') ? '' : 'inactive'}}" src="icons/liquid.svg" alt="Liquid" />
+          <img class="icon gas {{elementDetails.standardState.includes('Gas') ? '' : 'inactive'}}" src="icons/gas.svg" alt="Gas" />
+        </span>
       </div>
     </div>
+
     <p>{{elementDetails.facts}}</p>
-    <div class="element-discovery">
-      <p>Discovered by <span>{{elementDetails.discoverer}}</span> in <span>{{elementDetails.yearOfDiscovery}}</span></p>
 
+    <div class="element-data">
+      <div>
+        <h3>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>
+      </div>
+      <div>
+        <h3>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>
+      </div>
     </div>
   </div>
 </div>

src/app/elements/components/element-detail/element-detail.component.scss

@@ -15,42 +15,97 @@
   margin: auto;
   width: 60vw;
 
-  .element-card {
+  .row-one {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    position: relative;
-    padding: 10px;
-    border-radius: 8px;
-    width: 15vw;
-    height: 15vw;
-
-    .element-header {
+
+    .element-card {
       display: flex;
+      flex-direction: column;
       justify-content: space-between;
+      position: relative;
+      padding: 10px;
+      border-radius: 8px;
+      width: 15vw;
+      height: 15vw;
+
+      .element-header {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .element-footer {
+        display: flex;
+        gap: 8px;
+        padding-bottom:8px;
+        flex-direction: column;
+        text-align:center;
+      }
+
+      p {
+        margin: 0px;
+      }
+
+      h2 {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        font-size: 64px;
+        font-weight: 400;
+        text-align: center;
+        margin: 0px;
+      }
+    }
+
+    .icon {
+      width: 18px;
     }
 
-    .element-footer {
+    .element-highlights {
+      width: 45vw;
       display: flex;
-      gap: 8px;
-      padding-bottom:8px;
       flex-direction: column;
-      text-align:center;
-    }
+      align-items: end;
+
+      .element-highlight {
+        display: flex;
+
+        img {
+          &.inactive {
+            opacity: 0.1;
+          }
+
+          &.liquid {
+            width: 14px;
+          }
 
-    p {
-      margin: 0px;
+          &.gas {
+            width: 22px;
+          }
+
+          margin-left: 10px;
+        }
+
+        .type-container {
+          display: flex;
+          align-items: end;
+        }
+
+        p {
+          margin: 4px 0px;
+        }
+      }
     }
+  }
+
+  .element-data {
+    display: flex;
+    border: 1px solid #E0E0E0;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
 
-    h2 {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
-      font-size: 64px;
-      font-weight: 400;
-      text-align: center;
-      margin: 0px;
+    div {
+      padding: 20px;
     }
   }
 }

src/app/elements/components/periodic-table/periodic-table.component.scss

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 100px 0px;
+  margin: 20% 20px;
 
   img {
     animation: rotate-center 2s linear infinite;