EV Test Drive Project

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

1. Fork and clone.https://github.com/AricayaJohn/EVTestDrive-Project
2. Run json-server --watch db.json in code Editor.
3. 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.

<h1 id = "header">Electric Car Test Drive</h1>

- I want to have a random button generator.
To do this, we add a button tag with an id attribute in html.

 <button id = "randomBtn">Random EV</button>

-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.

  <div id ="ev-collection" class = "card-containter"></div>
    <!--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.

document.addEventListener("DOMContentLoaded", () => {
    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

 //Create a form for user's info name, email, the day to test drive, and submit button
    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.

//Going to append the form to the card DOM
    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.

function createRandomBtn() {
    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.

 //handling submit
            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