Scribd
Upload
3 views7 pages

PUNITH

The document outlines the creation of a basic car collection website using HTML, CSS, and JavaScript. It includes the structure of the HTML layout, basic styling with CSS, and JavaScript functionality for adding and removing car cards. The example demonstrates how to display car images and descriptions in a user-friendly format.

Uploaded by

pgowdab97
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views7 pages

PUNITH

The document outlines the creation of a basic car collection website using HTML, CSS, and JavaScript. It includes the structure of the HTML layout, basic styling with CSS, and JavaScript functionality for adding and removing car cards. The example demonstrates how to display car images and descriptions in a user-friendly format.

Uploaded by

pgowdab97
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

INTRODUCTION

Creating a basic car collection website with HTML, CSS, and


JavaScript involves setting up a simple layout where users can view
details of different cars, like images and descriptions, and maybe add
or remove cars from their collection. I'll walk you through a simple
example of this. Here’s how to structure it:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Collection</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<h1>My Car Collection</h1>
</header>

<main>
<section id="carCollection">
<div class="car-card">
<img src="car1.jpg" alt="Car 1">
<h2>Car 1</h2>
<p>This is a great car!</p>
<button onclick="removeCar(this)">Remove</button>
</div>
<div class="car-card">
<img src="car2.jpg" alt="Car 2">
<h2>Car 2</h2>
<p>This car is amazing!</p>
<button onclick="removeCar(this)">Remove</button>
</div>
<!-- Add more car divs here -->
</section>

<button id="addCarButton">Add New Car</button>


</main>

<footer>
<p>My personal car collection website</p>
</footer>

<script src="script.js"></script>
</body>
</html>
CSS
/* Basic Styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}

main {
padding: 20px;
}

#carCollection {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.car-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
width: 200px;
transition: transform 0.3s;
}

.car-card img {
width: 100%;
height: auto;
border-radius: 8px;
}

button {
background-color: #d9534f;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #c9302c;
}

#addCarButton {
background-color: #5bc0de;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}

#addCarButton:hover {
background-color: #31b0d5;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
margin-top: 20px;
}
JAVASCRIPT
document.getElementById('addCarButton').addEventListener('click', function()
{
const carCollection = document.getElementById('carCollection');

// Create a new car card


const newCarCard = document.createElement('div');
newCarCard.classList.add('car-card');

// Set car details


newCarCard.innerHTML = `
<img src="car3.jpg" alt="Car 3">
<h2>Car 3</h2>
<p>This is an amazing car that you can add to your collection!</p>
<button onclick="removeCar(this)">Remove</button>
`;

// Append the new car card to the collection


carCollection.appendChild(newCarCard);
});

// Remove car card function


function removeCar(button) {
const carCard = button.parentElement;
carCard.remove();
}
OUTPUT

You might also like