الهدف التعليمي

تعلم كيفية التعامل مع معلومات الكتب وعرضها باستخدام JavaScript، بالإضافة إلى بناء واجهة تفاعلية لعرض تفاصيل الكتب.

عرض تطبيقي

الشرح البرمجي

JavaScript

// Book Class Definition
class Book {
    constructor(title, author, pages) {
        this.title = title;
        this.author = author;
        this.pages = pages;
    }

    getDetails() {
        return `${this.title} by ${this.author} - ${this.pages} pages.`;
    }
}

// Ebook Class Definition (extends Book)
class Ebook extends Book {
    constructor(title, author, pages, fileSize) {
        super(title, author, pages);
        this.fileSize = fileSize;
    }

    getEbookDetails() {
        return `${this.getDetails()} Available in ebook format with a file size of ${this.fileSize}MB.`;
    }
}

// Create Instances of Book and Ebook
const book1 = new Book("The Subtle Art of Not Giving a F*ck", "Mark Manson", 300);
const ebook1 = new Ebook("How to Win Friends and Influence People", "Dale Carnegie", 250, 2.5);

// Get book container element
const bookContainer = document.getElementById("bookContainer");

// Display Books on Page
[book1, ebook1].forEach(book => {
    const bookDiv = document.createElement("div");
    bookDiv.className = "book";
    bookDiv.innerHTML = `
        

${book instanceof Ebook ? book.getEbookDetails() : book.getDetails()}

`; bookContainer.appendChild(bookDiv); });