Introduction
In this tutorial, you'll learn how to create a simple web application that displays information about electric vehicle partnerships between Chinese manufacturers and US automakers. This project will help you understand how to work with data visualization and web development concepts, which are relevant to the growing Chinese EV market in the US. You'll build a basic HTML page with embedded JavaScript that displays partnership data in an interactive table.
Prerequisites
- A web browser (Chrome, Firefox, Safari, or Edge)
- A code editor (like VS Code, Sublime Text, or even Notepad)
- Basic understanding of HTML and JavaScript
- No prior experience with web development is required
Step-by-Step Instructions
Step 1: Create the HTML Structure
First, we'll create the basic HTML framework for our web page. This will include a title, a description, and a table to display our partnership data.
Why this step?
This step sets up the foundation of our webpage. HTML provides the structure and content of our page, while CSS will handle the styling later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chinese EV Partnerships in the US</title>
</head>
<body>
<h1>Chinese EV Partnerships in the US Market</h1>
<p>This page displays data about Chinese electric vehicle manufacturers partnering with US automakers.</p>
<table id="partnershipTable">
<thead>
<tr>
<th>Chinese Company</th>
<th>US Partner</th>
<th>Year</th>
<th>Type of Partnership</th>
</tr>
</thead>
<tbody>
<!-- Data will be inserted here by JavaScript -->
</tbody>
</table>
</body>
</html>Step 2: Add Basic CSS Styling
Now we'll add some basic styling to make our table look more presentable and professional.
Why this step?
Styling helps users better understand and interact with our data. It makes the page more visually appealing and easier to read.
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
</style>Step 3: Create JavaScript Data Array
We'll create a JavaScript array containing partnership data. This simulates the data we might get from a real database or API.
Why this step?
JavaScript allows us to dynamically insert data into our HTML. This approach makes our page flexible and easy to update without changing the HTML structure.
<script>
// Sample partnership data
const partnerships = [
{
chineseCompany: "BYD",
usPartner: "General Motors",
year: 2023,
type: "Joint Venture"
},
{
chineseCompany: "NIO",
usPartner: "General Motors",
year: 2024,
type: "Technology Sharing"
},
{
chineseCompany: "Xpeng",
usPartner: "Ford",
year: 2023,
type: "Strategic Alliance"
},
{
chineseCompany: "Conti",
usPartner: "Tesla",
year: 2024,
type: "Supply Chain"
}
];
</script>Step 4: Populate the Table with JavaScript
Now we'll write JavaScript code that loops through our data array and creates table rows for each partnership.
Why this step?
This step demonstrates how to dynamically update HTML content using JavaScript. It shows how data can be manipulated and displayed in a user-friendly way.
<script>
// Function to populate the table
function populateTable() {
const tableBody = document.querySelector('#partnershipTable tbody');
// Clear existing content
tableBody.innerHTML = '';
// Loop through partnerships and create table rows
partnerships.forEach(partnership => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${partnership.chineseCompany}</td>
<td>${partnership.usPartner}</td>
<td>${partnership.year}</td>
<td>${partnership.type}</td>
`;
tableBody.appendChild(row);
});
}
// Call the function when the page loads
window.onload = populateTable;
</script>Step 5: Add Interactivity with Sorting
We'll add a simple sorting feature to make our table more user-friendly. Users will be able to click on column headers to sort the data.
Why this step?
Sorting helps users find specific information more easily. It's a common feature in data visualization that improves user experience.
<script>
// Add sorting functionality
function addSorting() {
const headers = document.querySelectorAll('#partnershipTable thead th');
headers.forEach((header, index) => {
header.addEventListener('click', () => {
sortTable(index);
});
});
}
function sortTable(columnIndex) {
const table = document.getElementById('partnershipTable');
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort((a, b) => {
const aValue = a.cells[columnIndex].textContent;
const bValue = b.cells[columnIndex].textContent;
// For numbers, we sort numerically
if (columnIndex === 2) { // Year column
return parseInt(aValue) - parseInt(bValue);
}
// For text, we sort alphabetically
return aValue.localeCompare(bValue);
});
// Re-append sorted rows
rows.forEach(row => tbody.appendChild(row));
}
// Initialize sorting when page loads
window.onload = function() {
populateTable();
addSorting();
};
</script>Step 6: Test Your Web Application
Save your complete HTML file with a .html extension (like ev-partnerships.html) and open it in your web browser.
Why this step?
Testing ensures that everything works as expected. It's important to verify that your code functions correctly before sharing it with others.
When you open the page, you should see:
- A title and description
- A table with partnership data
- Interactive sorting by clicking on column headers
- Styling that makes the data easy to read
Summary
In this tutorial, you've learned how to create a simple web application that displays data about Chinese EV partnerships with US automakers. You've built an HTML page with JavaScript that:
- Creates a structured table layout
- Uses JavaScript to dynamically populate data
- Applies basic CSS styling for better presentation
- Adds interactive sorting functionality
This project demonstrates fundamental web development concepts that are relevant to understanding how technology and business partnerships work in the EV industry. You can expand this project by adding more data, different styling options, or connecting it to a real API for live data updates.
