More updates to the frontend

src/app/app-routing.module.ts

@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ElementDetailComponent } from './elements/components/element-detail/element-detail.component';
+import { PeriodicTableComponent } from './elements/components/periodic-table/periodic-table.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: '/elements', pathMatch: 'full' },
+  { path: 'elements', component: PeriodicTableComponent },
+  { path: 'elements/:id', component: ElementDetailComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,4 +1,3 @@
 <div class="">
-  <periodic-table />
   <router-outlet />
 </div>

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

@@ -1 +1,13 @@
-<p>element works!</p>
+
+
+<div class="element-details">
+  <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(' ', '-') : ''}}">
+      <p>{{elementDetails.atomicNumber}}</p>
+      <h2>{{elementDetails.symbol}}</h2>
+    </div>
+    <p>{{elementDetails.facts}}</p>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+.element-title {
+  text-align: center;
+}
+
+.back-button {
+  cursor: pointer;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  text-align: right;
+  width: 24px;
+}
+
+.element-info {
+  .element-card {
+    border-radius: 8px;
+    width: 10vw;
+    height: 10vw;
+
+    h2 {
+      font-size: 64px;
+      font-weight: 400;
+      text-align: center;
+      margin: 0px;
+    }
+  }
+
+  margin: auto;
+  width: 60vw;
+}

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ElementService } from '../../../../services/elements/element.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { elementDetail } from '../../models/element-detail.model';
 
 @Component({
     selector: 'element-detail',
@@ -8,11 +10,22 @@ import { ElementService } from '../../../../services/elements/element.service';
     standalone: false
 })
 export class ElementDetailComponent implements OnInit {
-  constructor(private elementService: ElementService) { }
+  id!: string;
+  elementDetails!: elementDetail;
+
+  constructor(private route: ActivatedRoute, private router: Router, private elementService: ElementService) { }
 
   ngOnInit() {
-    this.elementService.getElement("1").subscribe(elementDetails => {
-      console.log(elementDetails);
+    this.route.params.subscribe(params => {
+      this.id = params['id'];
+
+      this.elementService.getElement(this.id).subscribe(elementDetails => {
+        this.elementDetails = elementDetails;
+      });
     });
   }
+
+  goBack = () => {
+    this.router.navigate(['/elements']);
+  }
 }

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

@@ -1,4 +1,4 @@
-<div class="element {{element.type !== null ? element.type.toLocaleLowerCase().replace(' ', '-') : ''}}">
+<div [routerLink]="'/elements/' + element.atomicNumber" class="element {{element.type !== null ? element.type.toLocaleLowerCase().replace(' ', '-') : ''}}">
   <p class="atomic-number">{{element.atomicNumber}}</p>
   <h2 class="symbol">{{element.symbol}}</h2>
   <p class="element-name">{{element.element}}</p>

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

@@ -3,6 +3,12 @@
   margin: 2px;
   width: 5vw;
   height: 5vw;
+
+  &:hover {
+    cursor: pointer;
+    margin: 0px;
+    padding: 2px;
+  }
 }
 
 .atomic-number {
@@ -24,57 +30,57 @@
   text-overflow: ellipsis;
 }
 
-.nonmetal {
-  background-color: #037F8C20;
+.nonmetal:hover {
+  background-color: #037F8C80;
   color: #037F8C;
 }
 
-.halogen {
-  background-color: #A6036520;
+.halogen:hover {
+  background-color: #A6036580;
   color: #A60365;
 }
 
-.noble-gas {
-  background-color: #03A69620;
+.noble-gas:hover {
+  background-color: #03A69680;
   color: #03A696;
 }
 
-.alkali-metal {
-  background-color: #F2C87920;
+.alkali-metal:hover {
+  background-color: #F2C87980;
   color: #F2C879;
 }
 
-.alkaline-earth {
-  background-color: #F27F3D20;
+.alkaline-earth:hover {
+  background-color: #F27F3D80;
   color: #F27F3D;
 }
 
-.transition-metal {
-  background-color: #A6465720;
+.transition-metal:hover {
+  background-color: #A6465780;
   color: #A64657;
 }
 
-.metalloid {
-  background-color: #F2644420;
+.metalloid:hover {
+  background-color: #F2644480;
   color: #F26444;
 }
 
-.metal {
-  background-color: #8BD9D920;
+.post-transition-metal:hover {
+  background-color: #8BD9D980;
   color: #8BD9D9;
 }
 
-.actinide {
-  background-color: #F2937E20;
+.actinide:hover {
+  background-color: #F2937E80;
   color: #F2937E;
 }
 
-.lanthanide {
-  background-color: #F2C64120;
+.lanthanide:hover {
+  background-color: #F2C64180;
   color: #F2C641;
 }
 
-.transactinide {
-  background-color: #4AA96520;
+.transactinide:hover {
+  background-color: #4AA96580;
   color: #4AA965;
 }

src/app/elements/elements.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { PeriodicTableComponent } from './components/periodic-table/periodic-table.component';
 import { ElementComponent } from './components/element/element.component';
 import { ElementDetailComponent } from './components/element-detail/element-detail.component';
+import { RouterModule } from '@angular/router';
 
 
 
@@ -13,7 +14,8 @@ import { ElementDetailComponent } from './components/element-detail/element-deta
     ElementDetailComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   exports: [
     PeriodicTableComponent,

src/app/elements/models/element-detail.model.ts

@@ -10,12 +10,14 @@ export interface elementDetail {
     electronConfiguration: string;
     electronegativity: number;
     element: string;
+    facts: string;
     firstIonizationPotential: number;
     group: number;
     ionicRadius: number;
     isotopes: number;
     meltingPointKelvin: number;
     mostStableCrystal: string;
+    oxidationStates: string;
     period: number;
     phase: string;
     specificHeatCapacity: number;

src/styles.scss

@@ -12,4 +12,59 @@ h1 {
 
 h2 {
     font-family: 'Rubik'
+}
+
+.nonmetal {
+  background-color: #037F8C20;
+  color: #037F8C;
+}
+
+.halogen {
+  background-color: #A6036520;
+  color: #A60365;
+}
+
+.noble-gas {
+  background-color: #03A69620;
+  color: #03A696;
+}
+
+.alkali-metal {
+  background-color: #F2C87920;
+  color: #F2C879;
+}
+
+.alkaline-earth {
+  background-color: #F27F3D20;
+  color: #F27F3D;
+}
+
+.transition-metal {
+  background-color: #A6465720;
+  color: #A64657;
+}
+
+.metalloid {
+  background-color: #F2644420;
+  color: #F26444;
+}
+
+.post-transition-metal {
+  background-color: #8BD9D920;
+  color: #8BD9D9;
+}
+
+.actinide {
+  background-color: #F2937E20;
+  color: #F2937E;
+}
+
+.lanthanide {
+  background-color: #F2C64120;
+  color: #F2C641;
+}
+
+.transactinide {
+  background-color: #4AA96520;
+  color: #4AA965;
 }