Week-7-Web-Dev

CSS Transitions ,animations and Advanced Javascript functions #idex.html

<title>Fuel Go | Eco-Friendly Fuel Delivery</title>

⛽ Fuel Go

Eco-friendly fuel delivery for Nairobi & environs 🚙🌍

Owner: Hanameel Kevin | 📞 07924045455 | ✉️ hanameelm18@gmail.com

Why Fuel Go?

Fuel Go delivers eco-friendly fuel right where you are — reducing harmful emissions, cutting down wasted trips to petrol stations, and saving motorists stuck in traffic valuable time. By choosing Fuel Go, you help keep Nairobi’s air cleaner 🌱 and your car fueled on the go.

Our Fleet 🚚

Order Fuel

Fuel Price: KES per liter

Select Liters:

Total: --

Click to Order

Customer Reviews ⭐

<script src="script.js"></script>

#Style.css /* Global page styles */ body { font-family: Arial, sans-serif; text-align: center; background: #f4fdf4; padding: 40px; }

header h1 { color: #0b6623; /* Eco green */ }

button { padding: 12px 24px; font-size: 16px; border: none; border-radius: 8px; background-color: #0b6623; color: white; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; }

/* Hover transition */ button:hover { background-color: #14a44d; transform: scale(1.05); }

/* Delivery truck box */ #truck { width: 120px; height: 70px; background: #333; margin: 50px auto; border-radius: 10px; position: relative; transition: transform 1s ease-in-out; }

/* Wheels */ #truck::before, #truck::after { content: ''; width: 30px; height: 30px; background: #555; border-radius: 50%; position: absolute; bottom: -15px; }

#truck::before { left: 10px; } #truck::after { right: 10px; }

/* Keyframes: moving truck */ @keyframes moveTruck { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } }

/* Class added by JS to trigger animation */ .drive { animation: moveTruck 3s ease-in-out; }

/* Truck gallery */ .gallery { display: flex; justify-content: center; gap: 20px; margin: 20px 0; }

.gallery img { width: 200px; height: 120px; object-fit: cover; border-radius: 10px; transition: transform 0.3s ease; }

.gallery img:hover { transform: scale(1.1); }

/* Reviews */ .reviews { display: flex; justify-content: center; gap: 20px; margin: 30px 0; flex-wrap: wrap; }

.review { background: #ffffff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); width: 250px; transition: transform 0.3s ease; }

.review:hover { transform: translateY(-5px); }

.review h3 { margin-bottom: 5px; color: #0b6623; }

.review p { margin: 5px 0; }

#Script.js /* script.js for Fuel Go Demonstrates:

• Function scope
• Parameters & return values
• Function declaration vs expression
• Using JS to trigger CSS animations
• Dynamic rendering of reviews */

// Global scope variables let globalMessage = "🚚 Fuel Go delivery initiated!"; let fuelPrice = 180; // KES per liter (easily changeable by owner)

// Function Declaration (hoisted) function greetCustomer(name) { let greeting = "Hello " + name + ", thank you for choosing Fuel Go!"; return greeting; }

// Function Expression (not hoisted) const calculateCost = function (litres, pricePerLitre) { return litres * pricePerLitre; };

// Display the fuel price on page load document.getElementById("priceDisplay").textContent = fuelPrice;

// Update total dynamically when liters input changes document.getElementById("litres").addEventListener("input", function () { let litres = document.getElementById("litres").value; let totalCost = calculateCost(litres, fuelPrice); document.getElementById("totalDisplay").textContent = "Total: KES " + totalCost; });

// Handle order button click document.getElementById("orderBtn").addEventListener("click", function () { const truck = document.getElementById("truck"); const litres = document.getElementById("litres").value;

truck.classList.add("drive");

let totalCost = calculateCost(litres, fuelPrice);

alert( greetCustomer("Hanameel Kevin") + "\n\nYou ordered: " + litres + " liters\nTotal Cost: KES " + totalCost + "\n\n" + globalMessage );

setTimeout(() => { truck.classList.remove("drive"); }, 3000); });

// ----------------------------- // Dynamic Reviews Section // ----------------------------- const reviews = [ { driver: "Peter", stars: 5, feedback: "Quick and reliable delivery, saved me in traffic!", }, { driver: "Amina", stars: 4, feedback: "Very professional, arrived on time. Highly recommend.", }, { driver: "Otieno", stars: 5, feedback: "Great service! Eco fuel really keeps my car smooth.", }, { driver: "Mwangi", stars: 5, feedback: "Polite driver and very fast response time!", }, ];

// Function to render stars function renderStars(count) { return "⭐".repeat(count); }

// Insert reviews dynamically const reviewsContainer = document.getElementById("reviewsContainer"); reviews.forEach((review) => { let div = document.createElement("div"); div.classList.add("review"); div.innerHTML = <h3>Driver: ${review.driver}</h3> <p>${renderStars(review.stars)}</p> <p>"${review.feedback}"</p>; reviewsContainer.appendChild(div); });