Electric Car Website Project
Step 1 : Coming up with an idea
Purpose:
As someone interested in new technology and cars, I want to have the users to get information about the Electric vehicles and their qualities that they need
I want this site to give accessibility to get them book a test drive when the customer’s see the car that they want.
Since in today’s world there is a pletora of option to choose from. I want to give users the option to randomly get a car that they can test drive.
Requirements
Have a webrowser installed.
Have a code editor installed.
Have json-server installed in the code editor.
Installation Instructions
Fork and clone.https://github.com/AricayaJohn/EVTestDrive-Project
Run json-server –watch db.json in code Editor.
Open index.html in the browser.
Step 2: Features
– I want to have a title in the header.
To do this, in the HTML add h1 tag in the body of the file.
– I want to have a random button generator.
To do this, we add a button tag with an id attribute in html.
-I want a list of cars with its information inside a card structure that can also take a user information so that they can book the test drive. (DOMContentLoaded)
To do this we will create a div element with id attribute and a class attribute that will allow us to edit, style and manipulate the data in html.
<!–This where we will fetch data from db.json then create a card in js–>
</div>
Step 3 : Come up with an MVP
I want a list of cars inside a card structure. (DOMContentLoaded)
To do this, we are going to fetch the data using DOMCOntentLoaded event listener and use a function to call and create the cards from our the data in our json file.
fetchGetEVData();
createRandomBtn(); // call the function for random button
})
//This is to get data from db.json
function fetchGetEVData() {
fetch(“http://localhost:3000/EV”)
.then(resp => resp.json())
.then(data => {
console.log(“Data fetched successfully:”, data); // Log fetched data json objects to console
data.forEach(EV => showCars(EV));
})
//if promise failed to load data from json file
//then it will show error
.catch(error => {
console.error(‘Error fetching the json data’, error)
})
}
//Create a card
function showCars(EV) {
//Fetch data for ev-collection HTML and create structure to cards
const evCollection = document.getElementById(“ev-collection”);
const div = document.createElement(“div”)
div.classList.add(“card”);
//Create images variable to add to div
const img = document.createElement(“img”)
img.src = EV.ImageLink
img.classList.add(“car-img”)
//Create h2 variable to give title for card
const h2 = document.createElement(“h2”)
h2.textContent = EV.Company
//Create p document for model, price, and range
const p = document.createElement(“p”)
p.textContent = EV.Model
//Create p for price
const price = document.createElement(“p”)
price.textContent = EV.Price
//create p for range
const range = document.createElement(“p”)
range.textContent = EV.Range
I want to take user information into a form so that they can book the test drive
In our index.js, below of our previous syntax we will create a form variable that will contain alabel and input for name, email, and date of testdrive and a submit button for the form
const form = document.createElement(“form”)
form.classList.add(“comment-form”)
//Create a label for name
const userName = document.createElement(“Label”)
userName.textContent = “Name: “;
const userInput = document.createElement(“input”)
userName.type = “text”
userInput.name = “name”;
//Create a label for email
const userEmail = document.createElement(“label”)
userEmail.textContent = “Email: “;
const inputEmail = document.createElement(“input”)
inputEmail.type = “email”;
userEmail.name = “email”;
//Create a email label and input
const dateLabel = document.createElement(“label”)
dateLabel.textContent = “Schedule Test Drive: “
const dateInput = document.createElement(“input”)
dateInput.type = “date”;
dateInput.name = “date”;
//Create a submit button to submit form
const submitBtn = document.createElement(“input”)
submitBtn.type = “submit”
submitBtn.value = “submit”
//Handling submit function eventListener
function handleSubmit(event) {
event.preventDefault();
const name = userInput.value;
const email = inputEmail.value;
const date = dateInput.value;
if (!name || !email || !date) {
alert(“Please complete all fields before submitting the form.”);
return;
}
alert(“Your Test Drive reservaton has been completed”);
form.reset();
};
//callback
form.addEventListener(“submit”, handleSubmit)
Then we will append this functions, attributes and elements to the Dom so that we could see it on our website.
form.appendChild(userName);
form.append(userInput);
//Create a break to have another input bellow
form.appendChild(document.createElement(“br”))
//Going to append the email form to the card DOM
form.appendChild(userEmail);
form.append(inputEmail);
//Going to create a break to put date label and input bellow
form.appendChild(document.createElement(“br”))
//Going to append date label and input to the DOM
form.appendChild(dateLabel)
form.append(dateInput);
//Adding a break to put submit button bellow
form.appendChild(document.createElement(“br”))
//Appending submit button to form
form.appendChild(submitBtn)
//Connect the data to html div to be able to send to the DOM
div.append (img, h2, p, price, range, form)
evCollection.append(div)
}
*– I want to have a random button generator that would pick a random car for the user. *
To do this, we are getting the randomBtn tag in our HTML and adding a function to it so that it would display a random EV card.
const randomBtn = document.getElementById(“randomBtn”);
randomBtn.classList.add(“random-btn”);
randomBtn.addEventListener(“click”, () => {
const cards = document.querySelectorAll(“.card”);
const randomIndex = Math.floor(Math.random() * cards.length);
cards.forEach((card, index) => {
if (index === randomIndex) {
card.style.display = “block”; // Show the selected card
} else {
card.style.display = “none”; // Hide the other cards
}
});
});
}
**- I want an alert to show up when form is submitted or is incomplete. **
To do this, we add a function and event listener bellow our submit button that we created.
function handleSubmit(event) {
event.preventDefault();
const name = userInput.value;
const email = inputEmail.value;
const date = dateInput.value;
if (!name || !email || !date) {
alert(“Please complete all fields before submitting the form.”);
return;
}
alert(“Your Test Drive reservaton has been completed”);
form.reset();
};
form.addEventListener(“submit”, handleSubmit)
Step 4 : Stretch goals
I want to have a drop down button that filters down to the car model
I want user can like/favorite the vehicle (click)
Add form for user to submit a test drive request to their email at certain date
