How to Create a Single Page Coupon Website (with Full Code)

jacky — Sun, 15 Sep 2024 15:09:35 +0000

What is a Coupon Website?

A coupon website is a platform that allows users to find and apply promotional codes or discounts for various online or in-store purchases. It aggregates available coupons, offering users a simple way to save on their purchases.

Technologies Required

To build a functional single-page coupon website, we will utilize the following technologies:

HTML: To structure the page and its elements.
CSS: To design and style the page.
JavaScript: To add interactivity, such as filtering coupons or handling clicks.
Optional: Basic knowledge of deploying via GitHub Pages or a similar platform.

Setting Up the Project

Folder Structure
Start by creating the following folder structure:

coupon-website/ │ ├── index.html ├── styles.css └── script.js

index.html: This file will hold the structure of your website.
styles.css: This will contain all the styling rules.
script.js: This file will handle any interactivity for the website.
File Preparation
Once you've created the folders, you can start coding each file. We'll go through this step by step, starting with the HTML structure.

HTML Code for the Coupon Website

Your index.html file will be the core structure of the coupon site. Below is the HTML code you can use:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coupon Deals</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header>
        <h1>Welcome to Coupon Deals</h1>
        <p>Find the best deals and save money today!</p>
    </header>

    <!-- Main Section with Coupon Listings -->
    <main>
        <section class="coupons">
            <article class="coupon" data-expiry="2024-12-31">
                <h2>20% Off on Electronics</h2>
                <p>Use code: <span class="code">SAVE20</span></p>
                <button class="copy-code">Copy Code</button>
                <p class="expiry-date">Expires: Dec 31, 2024</p>
            </article>

            <article class="coupon" data-expiry="2024-09-30">
                <h2>Free Shipping on Orders Over $50</h2>
                <p>Use code: <span class="code">FREESHIP</span></p>
                <button class="copy-code">Copy Code</button>
                <p class="expiry-date">Expires: Sep 30, 2024</p>
            </article>

            <!-- Add more coupon articles here -->
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2024 Coupon Deals. All rights reserved.</p>
    </footer>

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

CSS Code for Styling

Next, style the website using CSS. This will ensure the page looks clean, modern, and responsive. Here's the basic styles.css file:

/* Basic reset for consistent styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

/* Header Styling */
header {
    text-align: center;
    padding: 20px 0;
    background-color: #4CAF50;
    color: white;
}

header h1 {
    font-size: 2.5rem;
}

header p {
    font-size: 1.2rem;
}

/* Main Section Styling */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.coupons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.coupon {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.coupon:hover {
    transform: scale(1.05);
}

.coupon h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.coupon p {
    font-size: 1rem;
    margin: 10px 0;
}

.copy-code {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.copy-code:hover {
    background-color: #45a049;
}

.expiry-date {
    font-size: 0.9rem;
    color: #888;
}

/* Footer Styling */
footer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
}

JavaScript for Interactivity

For interactivity, we’ll use JavaScript to handle features like copying coupon codes and managing expiration dates. Here's the script.js file:

document.querySelectorAll('.copy-code').forEach(button => {
    button.addEventListener('click', function() {
        const couponCode = this.previousElementSibling.textContent;
        navigator.clipboard.writeText(couponCode).then(() => {
            alert('Coupon code copied: ' + couponCode);
        });
    });
});

// Highlight expired coupons
const currentDate = new Date();
document.querySelectorAll('.coupon').forEach(coupon => {
    const expiryDate = new Date(coupon.getAttribute('data-expiry'));
    if (expiryDate < currentDate) {
        coupon.style.opacity = '0.5';
        coupon.querySelector('.expiry-date').textContent += ' (Expired)';
    }
});

Functionality:

Copy Coupon Code: When the user clicks the "Copy Code" button, the coupon code is copied to their clipboard, and an alert is displayed.
Coupon Expiration: Coupons that have passed their expiration date are grayed out, and the word "Expired" is appended to their expiry date.