Skip to content

Commit

Permalink
Working on the detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
@JerebChase
JerebChase committed Jan 30, 2025
1 parent 15e3f99 commit f0e5093
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 80 deletions.
1 change: 1 addition & 0 deletions public/icons/metalloid.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/icons/microscope-loading.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
158 changes: 88 additions & 70 deletions src/app/elements/components/element-detail/element-detail.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,95 @@
@if (!elementDetails) {
<div class="loading-element">
<img src="icons/microscope-loading.svg" alt="Loading..." />
</div>
}


<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="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>
@else {
<div class="element-details">
<div class="element-header">
<div></div>
<h1 class="element-title">{{elementDetails.element}}</h1>
<div class="back-button" (click)="goBack()"><img src="icons/back-arrow.svg" alt="Back"/></div>
</div>
<div class="element-info">
<div class="row-one">
<div class="element-card {{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">
<div class="element-card-header">
<p>{{elementDetails.atomicNumber}}</p>
<p>{{elementDetails.atomicWeight}}</p>
</div>
<h2>{{elementDetails.symbol}}</h2>
<div class="element-card-footer">
<p>{{elementDetails.element}}</p>
<p>{{elementDetails.type}}</p>
</div>
</div>
</div>
<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>
<div class="element-highlights">
<span class="element-highlight">
<p>{{formatDiscoverer(elementDetails.discoverer)}}</p>
<img class="icon" src="icons/microscope.svg" alt="Microscope" />
</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-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>
<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/metalloid.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>
<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>

<p>{{elementDetails.facts}}</p>

<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>
</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>
</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>
<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>
</div>
}

72 changes: 62 additions & 10 deletions src/app/elements/components/element-detail/element-detail.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,37 @@

.element-header {
display: flex;
justify-content: space-between;
margin: auto;
margin-bottom: 20px;
width: 60vw;
max-width: 1000px;
}

.element-title {
margin: 0px;
text-align: center;
}

.back-button {
cursor: pointer;
position: absolute;
top: 24px;
right: 24px;
text-align: right;
width: 24px;
}

.element-info {
.element-details {
padding: 28px;
margin: auto;
width: 60vw;
max-width: 1000px;
border: 1px solid #E0E0E0;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}

.element-info {

.row-one {
display: flex;
Expand All @@ -27,18 +45,19 @@
border-radius: 8px;
width: 15vw;
height: 15vw;
max-height: 265px;

.element-header {
.element-card-header {
display: flex;
justify-content: space-between;
}

.element-footer {
.element-card-footer {
display: flex;
gap: 8px;
padding-bottom:8px;
padding-bottom: 8px;
flex-direction: column;
text-align:center;
text-align: center;
}

p {
Expand Down Expand Up @@ -92,6 +111,7 @@
}

p {
text-align: right;
margin: 4px 0px;
}
}
Expand All @@ -100,12 +120,44 @@

.element-data {
display: flex;
border: 1px solid #E0E0E0;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 8px;
justify-content: space-between;

div {
padding: 20px;
width: 28%;
}

p {
font-weight: 600;
display: flex;
justify-content: space-between;

span {
font-weight: 400;
}
}

h3 {
background: none;
}
}
}

.loading-element {
display: flex;
flex-direction: column;
align-items: center;
margin: 20% 20px;

img {
animation: bounce 1s ease-out 3;
width: 100px;
}
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-20px); }
40% { transform: translateY(0); }
60% { transform: translateY(-10px); }
80% { transform: translateY(0); }
}
15 changes: 15 additions & 0 deletions src/app/elements/components/element-detail/element-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,19 @@ export class ElementDetailComponent implements OnInit {
goBack = () => {
this.router.navigate(['/elements']);
}

formatDiscoverer = (discoverer: string) => {
if (discoverer === 'Prehistoric') {
return discoverer;
}

const matches = [...discoverer.matchAll(/,/g)];
if (matches && matches.length > 1) {
discoverer = discoverer.substring(0, discoverer.lastIndexOf(',') + 1) + ' and' + discoverer.substring(discoverer.lastIndexOf(',') + 1);
}
if (matches && matches.length === 1) {
discoverer = discoverer.replace(',', ' and');
}
return `Discovered by ${discoverer}`;
}
}

0 comments on commit f0e5093

Please sign in to comment.