Final Project Overview
Our final project is a car rental website that allows users to select from our arsenal of performance and luxury cars for rental. Our info button extracts details from a backend API and outputs results in the frontend webpage about the specs of the vehicle that the customer is interested in. I was working with the frontend side of the project, but I also helped out with configuring and debugging the backend.
Planning
We started of with us planning the outline and framework of our website. Since I was frontend I came up with the outline and basic design for our frontend. In the backend we started figuring out how APIs work and started configuring it to our likeing. Originally we wanted to make a log in but we decided otherwise since it would make the project too complicated.
Starting the frontend homepage
To start off our frontend design I created an outline of our website and made the homepage and the vehicles page:
https://github.com/Swaggerplayer33/Flask-Server-Front-End/commit/da453ee49e561ac5d0c3567f69bc652303c40efe#diff-90a81cad6ace3d67145b4f242883f8c30d94dd741d0d02cad4390c63f7a15913
My Contributions
- Main engineer of Front End design and Framework
Custom Cursor:
const cursor = document.querySelector('.custom-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
});
Search Bar:
function searchCars() {
var input, filter, carContainers, car, carName, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
carContainers = document.querySelectorAll('.car-container');
for (i = 0; i < carContainers.length; i++) {
car = carContainers[i].querySelectorAll('.car'); // Find cars within each container
for (var j = 0; j < car.length; j++) {
carName = car[j].querySelector('h2');
txtValue = carName.textContent || carName.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
car[j].style.display = "block"; // Show the car listing
} else {
car[j].style.display = "none"; // Hide the car listing
}
}
}
}
Vehicle Item:
- (Button logs car ID into url)
<div class="car"> <!--Bugatti Chiron-->
<div class="car-attributes">
<span class="attribute-tag sedan" data-tooltip="This car is a sedan.">Sedan</span>
<span class="attribute-tag city" data-tooltip="Great for city driving.">City</span>
</div>
<img class="image" src="https://hips.hearstapps.com/hmg-prod/images/bugatti-sur-mesure-chiron-pur-sport-106-1639069047.jpg?crop=0.766xw:0.647xh;0.234xw,0.353xh&resize=1200:*" alt="Buggati Chiron" width="600" height="400">
<h2>Bugatti Chiron</h2>
<p>Price: $1000/hour</p>
<p>$4000/day<p>
<a class="button-link" href="rent.html?carName=Bugatti%20Chiron&pricePerHour=1000&pricePerDay=4000">Rent Now</a>
<a class="button-link" href="http://127.0.0.1:5500/Car.website/car-info.html?carName=Chiron">Info</a>
</div>
In Car-Info: -Seach for Car ID in url:
function getQueryParams() {
const params = new URLSearchParams(window.location.search);
const carName = params.get('carName');
// Use the parameters as needed
console.log(`Car Name: ${carName}`);
// You can also update HTML elements with these values
document.getElementById('car-name').textContent = `Car: ${carName}`;
}
- Fetch data from API and put into table:
document.getElementById("fetchData").addEventListener("click", function () {
const url = "http://127.0.0.1:8420/api/car/";
fetch(url)
.then(response => response.json())
.then(data => {
const carTable = document.getElementById("carTable");
carTable.innerHTML = ""; // Clear previous table
if (data.length === 0) {
carTable.textContent = "No cars found.";
} else {
const table = document.createElement("table");
table.border = "1";
const headerRow = document.createElement("tr");
['make', 'model', 'year', 'fuel', 'cylinders'].forEach(key => {
const th = document.createElement("th");
th.textContent = key.charAt(0).toUpperCase() + key.slice(1); // Capitalize first letter of keys
headerRow.appendChild(th);
});
table.appendChild(headerRow);
data.forEach(car => {
const row = document.createElement("tr");
['make', 'model', 'year', 'fuel', 'cylinders'].forEach(key => {
const cell = document.createElement("td");
cell.textContent = car[key];
row.appendChild(cell);
});
table.appendChild(row);
});
carTable.appendChild(table);
}
})
.catch(error => {
console.error("Error:", error);
});
});
- Search for car using ID:
- Deletes other cars and highlights the wanted vehicle and info
document.getElementById("searchCar").addEventListener("click", function () {
const modelInput = document.getElementById("modelInput").value.toLowerCase();
const rows = document.querySelectorAll("#carTable table tr");
const newTable = document.createElement("table");
newTable.border = "1";
let headerRow; // Declare a variable to store the header row
rows.forEach(row => {
if (row.firstElementChild.tagName === "TH") {
// Store the header row
headerRow = row.cloneNode(true);
newTable.appendChild(headerRow); // Append the header row to the new table
} else {
const modelCell = row.querySelector("td:nth-child(2)"); // Assuming model is the second column
if (modelCell && modelCell.textContent.toLowerCase() === modelInput) {
const newRow = row.cloneNode(true); // Clone the matching row
newRow.style.backgroundColor = "pink"; // Highlight the row
newTable.appendChild(newRow); // Append the matching row to the new table
}
}
});
// Replace the old table with the new table
const carTable = document.getElementById("carTable");
carTable.innerHTML = "";
carTable.appendChild(newTable);
});
Link to API fetch Commits by Sai:
https://github.com/Swaggerplayer33/Flask-Server-Front-End/commit/9b50eaaaac4a4529abf36d8b81e2ee830b4aeba6
Overall Summary:
Team Project
- Front End Framework and design
- Organizer of Data correlated to vehicles
- Created Fetch and linked backend and API to display information and interact with the front end
What I Learned
- Understanding of how languages work together to create code
- How APIs can fetch data and be used for multiple functions when is comes to storing information
- Different algorithms and teqniques when coding