https://github.com/rohancyberops/periodic-table
To build an interactive and visually appealing graphical representation of the Periodic Table of the Elements using a Collection View. The data will be fetched from our elements endpoint and stored in Core Data. We'll also create a dynamic cell layout using a separate nib file.
https://github.com/rohancyberops/periodic-table
actinides hydrogen iphone lanthanides monochrome periodic-table periodic-table-of-elements swift
Last synced: 3 months ago
JSON representation
To build an interactive and visually appealing graphical representation of the Periodic Table of the Elements using a Collection View. The data will be fetched from our elements endpoint and stored in Core Data. We'll also create a dynamic cell layout using a separate nib file.
- Host: GitHub
- URL: https://github.com/rohancyberops/periodic-table
- Owner: RohanCyberOps
- License: mit
- Created: 2025-02-09T16:16:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-25T15:36:53.000Z (3 months ago)
- Last Synced: 2025-03-13T20:57:18.582Z (3 months ago)
- Topics: actinides, hydrogen, iphone, lanthanides, monochrome, periodic-table, periodic-table-of-elements, swift
- Language: Swift
- Homepage:
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
# Periodic Collection View of the Elements
## Objective
To build an interactive and visually appealing graphical representation of the **Periodic Table of the Elements** using a **Collection View**. The data will be fetched from our elements endpoint and stored in **Core Data**. We'll also create a dynamic cell layout using a separate nib file.
## Mockup
We'll start with a **monochrome** version, including elements **57 and 89** in the main table while temporarily ignoring the rest of the **Lanthanides and Actinides**.
## Theme Song
[Tom Lehrer's Elements](https://www.youtube.com/watch?v=zGM-wSKFBpo)
[Also fun!](https://www.youtube.com/watch?v=v1TfPDlA1xE) - A cute discovery from related videos.
---
## Steps to Follow
### 1. Project Setup
- **Fork and clone** the repository.
- Create a project named **PeriodicTable**.
- Modify the storyboard to feature a **Collection View** embedded in a **Navigation Controller**.
### 2. Building the UI
- Create a `UICollectionViewCell` subclass with an **associated XIB file**.
- Register the class in your collection view:
```swift
// Register cell classes
self.collectionView!.register(UINib(nibName:"ElementCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: reuseIdentifier)
```
- Create a **custom view** named `ElementView.swift`.
- Create an associated nib file `ElementView.xib`.
- Add the custom view to your collection view cell.
- Integrate labels for **element symbol** and **atomic number**, and connect them.
- Test the collection view using sample data:
```swift
let data = [("H", 1), ("He", 2), ("Li", 3)]
```
### 3. Data Model
- Create a **Data Model** file.
- Define an entity `Element` with attributes:
- `symbol` (String)
- `name` (String)
- `number` (Integer, **not optional & indexed**)
- `group` (Integer)
- `weight` (Double)
- Add a **unique constraint** on `number` to prevent duplicate entries.
### 4. Data Integration
- Import `DataController.swift` from the **CoreArticles** project.
- Create `Element+JSON.swift` (for JSON parsing).
- Fetch data using:
```swift
https://api.fieldbook.com/v1/5859ad86d53164030048bae2/elements
```
- Integrate `DataController` in **AppDelegate**.
- Initialize `FetchedResultsController` (reference from **CoreArticles** table view controller).
### 5. Enhancing Display
- Start with all elements in a **single section**.
- Then, group elements by **periodic group** and **sort by group & number**.
- Optimize the layout to balance the **periodic table structure**.
**Excited to see this come to life!** Let’s make it **engaging, informative, and user-friendly**!