Hack4Impact-BU · SlyNinjutsu07 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 14, 2026
diff --git a/data.json b/data.json
diff --git a/images/ferrari.jpg b/images/ferrari.jpg
diff --git a/images/image-removebg-preview.png b/images/image-removebg-preview.png
diff --git a/images/leclerc-ferrari.avif b/images/leclerc-ferrari.avif
diff --git a/images/leclerc-ferrari.avif:Zone.Identifier b/images/leclerc-ferrari.avif:Zone.Identifier
diff --git a/images/scuederia-removebg-preview.png b/images/scuederia-removebg-preview.png
diff --git a/images/scuederia.png b/images/scuederia.png
diff --git a/images/w&b-scuderia.png b/images/w&b-scuderia.png
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+<head>
+  <html lang="en">
+  <title>Ferrari Dashboard</title>
+  <link rel="stylesheet" href="styles.css">
+  <link href="https://fonts.googleapis.com/css2?family=Sekuya&family=Share+Tech&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <nav>
+
+    <h1>
+      <img src="images/scuederia-removebg-preview.png" alt="Scuderia Logo">
+      Scuderia Ferrari
+    </h1>
+    <ul>
+      <li onclick="showView('home')">Home</li>
+      <li onclick="showView('results')">Race Results</li>
+      <li onclick="showView('stats')">Statistics</li>
+    </ul>
+  </nav>
+
+  <!--About-->
+  <div id="home" class="view">
+    <div id="glass">
+      <h2>Ferrari</h2>
+      <p class="subtitle">The most storied team in Formula 1's history</p>
+      <div class="about">
+        <p>Since 1947, Ferrari has been building cars destined to win on the track and break records</p>
+        <p>
+          <h4>The Team</h4>
+          <p>Our talented individuals are our greatest resource. 
+            However, they can only pursue the extraordinary by working together as a team. 
+            By fostering integrity, excellence and generosity, we give each of our people 
+            the possibility to express their own full potential - and be part of something greater.
+          </p>
+
+          <h4>Tradition and Innovation</h4>
+          <p>Tradition and innovation drive each other. The ongoing quest for lasting firsts is what fuels the Ferrari legend. 
+            Our ability to combine revolutionary technological solutions with exceptional artisanal craftsmanship is 
+            what enables us to create icons that stay timeless in a fast-changing world.
+          </p>
+
+          <h4>Passion and Achievement</h4>
+          <p>Ferrari’s racing spirit lives on in emotions that transcend the road and the track, 
+            ultimately becoming an authentic attitude towards life. Nothing excites us more than setting ambitious targets 
+            and expectations – and then exceeding them, to push every boundary. It is how the power of passion becomes the 
+            beauty of achievement.
+          </p>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!--Results-->
+  <div id="results" class="view">
+    <h2>Race Results</h2>
+    <input type="text" id="searchBar" placeholder="Search races..."
+    <table id="resultsTable">LeClerc
+      <thead>
+        <tr>
+          <th>Country</th>
+          <th>Circuit</th>
+          <th>Fastest Time</th>
+          <th>Laps</th>
+          <th>Position</th>
+        </tr>
+      </thead>
+      <tbody id="tableBody">
+
+      </tbody>
+    </table>
+  </div>
+
+  <!--Results-->
+  <div id="stats" class="view">
+    <h2>Statistics</h2>
+  </div>
+
+
+  <script src="script.js"></script>
+</body>
diff --git a/pr_template.md b/pr_template.md
@@ -9,8 +9,8 @@
 
 ## Core Requirements
 Please check off which features you have implemented:
-- [ ] Built as a Single Page Application (SPA) without needing browser reloads.
-- [ ] An interesting and beautiful frontend design with a catchy title, apt description, and cool fonts/colors that looks good on any screen size.
+- [X] Built as a Single Page Application (SPA) without needing browser reloads.
+- [X] An interesting and beautiful frontend design with a catchy title, apt description, and cool fonts/colors that looks good on any screen size.
 - [ ] Successfully fetches and renders data from an external F1 API (e.g., Ergast, OpenF1).
 - [ ] Displays F1 data in a table that is capped at 20 rows per page.
 - [ ] Table includes functional Next/Previous arrows to navigate the dataset.
@@ -26,13 +26,13 @@ Please check off which features you have implemented:
 - [ ] Includes a custom UI for Boolean search logic (e.g., AND/OR dropdowns or toggles).
 
 ## Screen Recording 
-**Link**: [paste it here]
+**Link**: [\[paste it here\]](https://drive.google.com/file/d/1e8-A6byC6HvdrtDZiyFdyj2w6A5uyUN1/view?usp=sharing)
 
 ## Written Portion
 1. **How did the project go? What parts of it did you most enjoy / find yourself good at?**
 
-[answer here]
+The project didn't go too bad, it was fairly enjoying as I was learning new things while Claude was helping me flesh out the webpage. I made sure that I had a firm understanding of what was going on as well, because some of the javascript was a bit confusing at first, but then I asked Claude for further clarification and it started to click for a bit. Unfortunately I didn't even manage to get into the main functionality of the webpage (I started a week late) and probably spent a bit too much time on designing the webpage rather than focusing on functionality calling the API and retriving race data.
 
 2. **Was this technical assessment what you expected? If you had another two weeks to work on it, what would you add or change?**
 
-[answer here]
+This technical assessment wasn't what I expected at first, I thought it would be leetcode style questions to be honest 😭, although it makes sense that it'd be about building a webpage since that is what we've BEEN doing throughout the JDT workshops. If I had another two weeks, I probably would've fleshed out a design plan on what I wanted to do with the website, since I've learned organizing a webpage could quickly pile up into a plethora of divs. Originally, given the time constraint, I would've focused on LeClerc's data only because Hamilton only recently came in for the 2026 F1 season (last was Carlos Sainz Jr.). However, with additional time, I would've liked to add Hamilton's and Sainz Jr.'s data as well since they were the most recent.
diff --git a/script.js b/script.js
@@ -0,0 +1,77 @@
+function showView(viewName){
+    document.querySelectorAll('.view').forEach(view => {
+        view.style.display = 'none';
+    });
+
+    document.getElementById(viewName).style.display = 'block';
+}
+
+const data = [
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 85.271, numLaps: 57, circuitLocation: "Melbourne", countryCode: "AUS" },
+    { driverName: "Charles Leclerc", racePos: 1, fastestLap: 83.456, numLaps: 56, circuitLocation: "Shanghai", countryCode: "CHN" },
+    { driverName: "Charles Leclerc", racePos: 3, fastestLap: 91.234, numLaps: 53, circuitLocation: "Suzuka", countryCode: "JPN" },
+    { driverName: "Charles Leclerc", racePos: 4, fastestLap: 88.123, numLaps: 50, circuitLocation: "Sakhir", countryCode: "BRN" },
+    { driverName: "Charles Leclerc", racePos: 1, fastestLap: 86.789, numLaps: 50, circuitLocation: "Jeddah", countryCode: "KSA" },
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 87.234, numLaps: 57, circuitLocation: "Miami", countryCode: "USA" },
+    { driverName: "Charles Leclerc", racePos: 5, fastestLap: 89.567, numLaps: 63, circuitLocation: "Imola", countryCode: "ITA" },
+    { driverName: "Charles Leclerc", racePos: 1, fastestLap: 74.123, numLaps: 78, circuitLocation: "Monaco", countryCode: "MON" },
+    { driverName: "Charles Leclerc", racePos: 3, fastestLap: 82.456, numLaps: 66, circuitLocation: "Barcelona", countryCode: "ESP" },
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 76.234, numLaps: 70, circuitLocation: "Montreal", countryCode: "CAN" },
+    { driverName: "Charles Leclerc", racePos: 4, fastestLap: 67.890, numLaps: 71, circuitLocation: "Spielberg", countryCode: "AUT" },
+    { driverName: "Charles Leclerc", racePos: 1, fastestLap: 88.345, numLaps: 52, circuitLocation: "Silverstone", countryCode: "GBR" },
+    { driverName: "Charles Leclerc", racePos: 3, fastestLap: 105.234, numLaps: 44, circuitLocation: "Spa-Francorchamps", countryCode: "BEL" },
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 78.456, numLaps: 70, circuitLocation: "Budapest", countryCode: "HUN" },
+    { driverName: "Charles Leclerc", racePos: 5, fastestLap: 73.234, numLaps: 72, circuitLocation: "Zandvoort", countryCode: "NED" },
+    { driverName: "Charles Leclerc", racePos: 1, fastestLap: 81.234, numLaps: 53, circuitLocation: "Monza", countryCode: "ITA" },
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 103.456, numLaps: 51, circuitLocation: "Baku", countryCode: "AZE" },
+    { driverName: "Charles Leclerc", racePos: 3, fastestLap: 95.678, numLaps: 62, circuitLocation: "Singapore", countryCode: "SGP" },
+    { driverName: "Charles Leclerc", racePos: 4, fastestLap: 96.234, numLaps: 56, circuitLocation: "Austin", countryCode: "USA" },
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 79.456, numLaps: 71, circuitLocation: "Mexico City", countryCode: "MEX" },
+    { driverName: "Charles Leclerc", racePos: 1, fastestLap: 71.234, numLaps: 69, circuitLocation: "Sao Paulo", countryCode: "BRA" },
+    { driverName: "Charles Leclerc", racePos: 3, fastestLap: 93.456, numLaps: 50, circuitLocation: "Las Vegas", countryCode: "USA" },
+    { driverName: "Charles Leclerc", racePos: 2, fastestLap: 87.123, numLaps: 57, circuitLocation: "Lusail", countryCode: "QAT" },
+    { driverName: "Charles Leclerc", racePos: 4, fastestLap: 84.567, numLaps: 58, circuitLocation: "Yas Marina", countryCode: "UAE" },
+];
+
+/*
+function sleep(ms){
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+//MAKES way to many calls, so the API starts rate limiting
+async function acquireRaceData(){
+    const raceData = await fetch("https://api.openf1.org/v1/sessions?year=2025&session_name=Race");
+    const races = await raceData.json();
+
+    for(const race of races){ //of different than in, of looks at values, in goes over indices. i still dk
+        //Lap Data
+        const lapData = await fetch(`https://api.openf1.org/v1/laps?session_key=${race.session_key}&driver_number=16`);
+        const laps = await lapData.json();
+
+        //Final Position Information
+        const positionData = await fetch(`https://api.openf1.org/v1/position?session_key=${race.session_key}&driver_number=16`);
+        const positions = await positionData.json();
+        const finPosition = positions.length > 0 ? positions[positions.length - 1].position : null; //{last index of json}.position
+
+        const race_session = {
+            driverName: "Charles Leclerc",
+            racePos: race.is_cancelled == false ? finPosition : "Cancelled",
+            //Converts lapData into an array of laps that map to each index's lap_duration
+            //and then "..." returns the values from an array into a list of numbers (cancels out the "[]")
+            fastestLap: race.is_cancelled == false ? Math.min(...laps.map(lap => lap.lap_duration)) : "---",
+            numLaps: race.is_cancelled == false ? laps.length : "---",
+            circuitLocation: race.location,
+            countryCode: race.country_code,
+        }
+
+        data.push(race_session);
+        await sleep(1000);
+    }
+
+    console.log(data);
+}
+
+acquireRaceData();
+*/
+
+showView('home');
diff --git a/styles.css b/styles.css
@@ -0,0 +1,92 @@
+body {
+  background-image: url('images/ferrari.jpg');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+}
+
+nav {
+  background-color: rgba(58,58,58,0.5); /*Gray background ig*/
+  backdrop-filter: blur(10px);
+  padding: 20px 40px;
+  display: flex; /*Displays these contents side by side*/
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 5px solid red;
+
+}
+
+nav h1{
+  color: red;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  font-family: 'Sekuya', system-ui;
+  display: flex;
+  align-items: center;
+}
+
+nav h1 img{
+  width: 100px;
+  padding: 10px;
+}
+
+nav ul{
+  list-style: none;
+  display: flex;   gap: 40px;
+}
+
+nav ul li{
+  font-family: "Share Tech", sans-serif;
+  cursor: pointer;
+}
+
+nav ul li:hover{
+  color: red;
+  transition: color 0.2s ease;
+}
+
+div h2 {
+  font-family: 'Sekuya', system-ui;
+  font-size: 20px;
+}
+
+.view {
+  padding: 60px 40px;
+}
+
+#home {
+  text-align: center;
+
+}
+
+#home #glass {
+  background-color: rgba(65, 57, 57, 0.5);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  padding: 10px;
+  margin: auto;
+  max-width: 720px;
+}
+
+#home h2 {
+  letter-spacing: 6px;
+  font-size: 48px;
+  text-transform: uppercase;
+}
+
+#home .about {
+  font-family: "Share Tech", sans-serif;
+  font-size: larger;
+}
+
+#home .subtitle {
+  font-weight: bold;
+  font-style: oblique;
+  font-family: "Share Tech", sans-serif;
+  letter-spacing: 2px;
+}
+
+body {
+    background-color: black;
+    color: white;
+}