FSR060523 :- Mini Project | Modern Javascript

Hello Everyone with Higher order array methods (Map,Filter,Reduce,Find etc) solve following Questions.

//Q. 1. print data of all books
//Q. 2. get books according to the author name
//Q. 3. get details of a particular book according to the name or id
//Q. 4. get all books whose status is available and price is below 300
//Q. 5. get sum of books price
//Q. 6. Get sum of books price whose price is greater than 500

let book_store = [

            {
                id: 1,
                title: "bhagavad gita",
                description: "The Gita is set in a narrative framework of a dialogue between Pandava prince Arjuna and his guide and charioteer Krishna, an avatar of Lord Vishnu",
                publish_date: "millions year ago",
                price: 1200,
                author: "Vyasa",
                status: "available"
            },

            {
                id: 2,
                title: "Shiva Purana",
                description: "The Shiva Purāṇa contains chapters with cosmology, mythology, relationship between gods, ethics, Yoga, Thirtha (pilgrimage) sites, bhakti, rivers and geography, and other topics",
                publish_date: "millions year ago",
                price: 1300,
                author: "Vyasa",
                status: "available"
            },

            {
                id: 3,
                title: "Ramayana",
                description: "The epic, traditionally ascribed to the Maharishi Valmiki, narrates the life of Rama, a legendary prince of Ayodhya city in the kingdom of Kosala.",
                publish_date: "millions year ago",
                price: 1400,
                author: "Valmiki",
                status: "available"
            },
            {
                id: 4,
                title: "ganmer",
                description: "playing games",
                publish_date: "12/12/2000",
                price: 200,
                author: "krutik",
                status: "available"
            },
            {
                id: 5,
                title: "ganmer-2",
                description: "playing games",
                publish_date: "1/1/1987",
                price: 200,
                author: "nikhil",
                status: "unavailable"
            }
        ];
4 Likes

@Hiral_Khakhariya @drishtinayak2828-TA

Output Link: https://bookstoretask.krishnayadav44.repl.co/

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Day #3</title>
    <style>
        div {
            border: 2px solid green;
            outline: dotted 5px royalblue;
            outline-offset: 3px;
            width: 50%;
            margin: 30px auto 0px auto;
            height: 30dvh;
            padding: 0px 20px;
            box-sizing: border-box;
            overflow-y: scroll;
        }
        p{
            margin-bottom: 5px;
        }
        #printData {
            border: 2px solid rgb(255, 78, 8);
            outline: dashed 5px rgb(255, 213, 0);
            outline-offset: 3px;
            width: 70%;
            margin: 50px auto 0px auto;
            height: 50dvh;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: scroll;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        #printData section {
            border: 2px solid slateblue;
            width: 45%;
            margin: 10px;
            box-sizing: border-box;
            padding: 20px;
            font-family: cursive;
            font-size: 20px;
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div>
        <p>
            Q1. Print data of all books.
        </p>
        <button onclick="printAllData()">
            All Books
        </button>
        <p>
            Q2. Get books according to the author name.
        </p>
        <button onclick="printBookAuthor()">
            Print Author with Book
        </button>
        <p>
            Q3. Get details of a particular book according to the name or id.
        </p>
        <select id="SearchBook">
            <option value="bhagavad gita">Bhagavad Gita</option>
            <option value="Shiva Purana">Shiva Purana</option>
            <option value="Ramayana">Ramayana</option>
            <option value="ganmer">Ganmer</option>
            <option value="ganmer-2">Ganmer-2</option>
        </select>
        <button onclick="searchBook()">
            Search Book
        </button>
        <p>
            Q4. Get all books whose status is available and price is below 300.
        </p>
        <button onclick="available()">
            Available Cost
        </button>
        <p>
            Q5. Get sum of books price.
        </p>
        <button onclick="total()">
            Total Cost
        </button>
        <p>Q6. Get sum of books price whose price is greater than 500.</p>
        <button onclick="greater500()">
            Greater than 500
        </button>
    </div>
    <div id="printData">

    </div>
    <script>
        let book_store = [
            {
                id: 1,
                title: "bhagavad gita",
                description: "The Gita is set in a narrative framework of a dialogue between Pandava prince Arjuna and his guide and charioteer Krishna, an avatar of Lord Vishnu",
                publish_date: "millions year ago",
                price: 1200,
                author: "Vyasa",
                status: "available"
            },

            {
                id: 2,
                title: "Shiva Purana",
                description: "The Shiva Purāṇa contains chapters with cosmology, mythology, relationship between gods, ethics, Yoga, Thirtha (pilgrimage) sites, bhakti, rivers and geography, and other topics",
                publish_date: "millions year ago",
                price: 1300,
                author: "Vyasa",
                status: "available"
            },

            {
                id: 3,
                title: "Ramayana",
                description: "The epic, traditionally ascribed to the Maharishi Valmiki, narrates the life of Rama, a legendary prince of Ayodhya city in the kingdom of Kosala.",
                publish_date: "millions year ago",
                price: 1400,
                author: "Valmiki",
                status: "available"
            },
            {
                id: 4,
                title: "ganmer",
                description: "playing games",
                publish_date: "12/12/2000",
                price: 200,
                author: "krutik",
                status: "available"
            },
            {
                id: 5,
                title: "ganmer-2",
                description: "playing games",
                publish_date: "1/1/1987",
                price: 200,
                author: "nikhil",
                status: "unavailable"
            }
        ];

        let printAllData = () => {
            let getSecEle = document.querySelectorAll('#printData section');
            for (let k = 0; k < getSecEle.length; k++) {
                getSecEle[k].style.display = 'none';
            }
            book_store.map((getData) => {
                let secEle = document.createElement('section');
                for (let k in getData) {
                    secEle.innerHTML += `${k} ==> ${getData[k]}<br>`;
                }
                document.getElementById('printData').appendChild(secEle);
            })
        }

        let printBookAuthor = () => {
            let getSecEle = document.querySelectorAll('#printData section');
            for (let k = 0; k < getSecEle.length; k++) {
                getSecEle[k].style.display = 'none';
            }
            book_store.filter((getData) => {
                let secEle = document.createElement('section');
                secEle.innerHTML += `Author Name: ${getData.author}<br> Book Name: ${getData.title}`;
                document.getElementById('printData').appendChild(secEle);
            })
        }
        let searchBook = () => {
            let getSecEle = document.querySelectorAll('#printData section');
            for (let k = 0; k < getSecEle.length; k++) {
                getSecEle[k].style.display = 'none';
            }
            let bookName=document.getElementById('SearchBook').value;
            book_store.filter((getData) => {
                if(getData.title===bookName){
                let secEle = document.createElement('section');
                for (let k in getData) {
                    secEle.innerHTML += `${k} ==> ${getData[k]}<br>`;
                }
                document.getElementById('printData').appendChild(secEle);
                }
            });
        }
        let available = () => {
            let getSecEle = document.querySelectorAll('#printData section');
            for (let k = 0; k < getSecEle.length; k++) {
                getSecEle[k].style.display = 'none';
            }
            let secEle = document.createElement('section');
            let sum=0;
            book_store.filter((getData) => {
                if(getData.status==='available' && getData.price<300){
                    sum=sum+getData.price;
                    console.log(sum);
                }
            });
            secEle.innerHTML=`Total amount of available items and price is below than 300 is: <b>${sum}</b>`;
            document.getElementById('printData').appendChild(secEle);
        }
        let total = () => {
            let getSecEle = document.querySelectorAll('#printData section');
            for (let k = 0; k < getSecEle.length; k++) {
                getSecEle[k].style.display = 'none';
            }
            let secEle = document.createElement('section');
            let sum=0;
            book_store.filter((getData) => {
                    sum=sum+getData.price;
                    // console.log(sum);
            });
            secEle.innerHTML=`Total amount of items is: <b>${sum}</b>`;
            document.getElementById('printData').appendChild(secEle);
        }
        let greater500 = () => {
            let getSecEle = document.querySelectorAll('#printData section');
            for (let k = 0; k < getSecEle.length; k++) {
                getSecEle[k].style.display = 'none';
            }
            let secEle = document.createElement('section');
            let sum=0;
            book_store.filter((getData) => {
                    if(getData.price>500){
                        sum=sum+getData.price;
                    }
                    // console.log(sum);
            });
            secEle.innerHTML=`Total amount of items whose price is greater than 500 is: <b>${sum}</b>`;
            document.getElementById('printData').appendChild(secEle);
        }
    </script>
</body>

</html>
2 Likes

@Hiral_Khakhariya @drishtinayak2828-TA
https://codepen.io/yksealoj-the-styleful/pen/mdQQBwW

1 Like
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js session 28</title>
    <style>
        #Book_store {
            /* border: 1px solid blue; */
            display: flex;
        }

        button {
            padding: 10px 30px;
            background: pink;
        }

        .div_style {
            padding: 20px;
            border: 10px dotted rgb(207, 24, 155);
            width: 500px;
            margin: 10px;
            font-size: 20px;
        }

        .div1_style {
            border: 1px solid red;
            margin: 20px;
            padding: 20px;
        }

        #book_items {
            width: 100px;
            background: skyblue;
        }

        .div2_style {
            border: 4px solid rgb(0, 45, 128);
            margin: auto;

        }

        .div3_style {
            border: 1px solid black;
            background-color: azure;
            width: 300px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <button type="button" onclick="clickfun()"><b>Q1</b>CLICK ME</button>
    <button type="button" onclick="printAuthor()"><b>Q2</b>SEARCH</button>
    <select id="book_items">
        <option value="bhagavad gita">Bhagavad Gita</option>
        <option value="Shiva Purana">Shiva Purana</option>
        <option value="Ramayana">Ramayana</option>
        <option value="ganmer">Ganmer</option>
        <option value="ganmer-2">Ganmer-2</option>
    </select>
    <button onclick="searchBooks()"><b>Q3</b>Search Book</button>
    <button onclick="available()"><b>Q4</b>price less than 300</button>
    <button onclick="sum()"><b>Q5</b>Get sum of books price</button>
    <button onclick="price()"><b>Q6</b>Get sum of books price whose price is greater than 500</button>







    <main id="Book_store"></main>
   
    <script src="session28.js" type="text/javascript"></script>
</body>

</html>

let book_store = [

{
    id: 1,
    title: "bhagavad gita",
    description: "The Gita is set in a narrative framework of a dialogue between Pandava prince Arjuna and his guide and charioteer Krishna, an avatar of Lord Vishnu",
    publish_date: "millions year ago",
    price: 1200,
    author: "Vyasa",
    status: "available"
},

{
    id: 2,
    title: "Shiva Purana",
    description: "The Shiva Purāṇa contains chapters with cosmology, mythology, relationship between gods, ethics, Yoga, Thirtha (pilgrimage) sites, bhakti, rivers and geography, and other topics",
    publish_date: "millions year ago",
    price: 1300,
    author: "Vyasa",
    status: "available"
},

{
    id: 3,
    title: "Ramayana",
    description: "The epic, traditionally ascribed to the Maharishi Valmiki, narrates the life of Rama, a legendary prince of Ayodhya city in the kingdom of Kosala.",
    publish_date: "millions year ago",
    price: 1400,
    author: "Valmiki",
    status: "available"
},
{
    id: 4,
    title: "ganmer",
    description: "playing games",
    publish_date: "12/12/2000",
    price: 200,
    author: "krutik",
    status: "available"
},
{
    id: 5,
    title: "ganmer-2",
    description: "playing games",
    publish_date: "1/1/1987",
    price: 200,
    author: "nikhil",
    status: "unavailable"
}

];
let main_div = document.getElementById(“Book_store”);
function clickfun() {
let x = document.querySelectorAll(“main div”)
for (let y = 0; y < x.length; y++) {
x[y].style.display = “none”;
}
book_store.map((elements) => {
var div_tag = document.createElement(“div”);
div_tag.className = “div_style”;
// console.log(div_tag);
// console.log(elements);
for (let obj in elements) {
div_tag.innerHTML += ${obj}:-->${elements[obj]}<br>
// console.log(obj)
}
main_div.appendChild(div_tag);
})

}
let printAuthor = () => {
let x = document.querySelectorAll(“main div”)
for (let y = 0; y < x.length; y++) {
x[y].style.display = “none”;
}
let print = book_store.filter((elements) => {
// console.log(elements)
var div1_tag = document.createElement(“div”);
// console.log(div1_tag)
div1_tag.className = “div1_style”;
div1_tag.innerText += elements.author + “:–” + elements.title;
main_div.appendChild(div1_tag);
})
}

let searchBooks = () => {
let x = document.querySelectorAll(“main div”)
for (let y = 0; y < x.length; y++) {
x[y].style.display = “none”;
}
let div2_tag = document.createElement(“div”);
div2_tag.className = “div2_style”
let find = document.getElementById(“book_items”).value;
// console.log(find);
book_store.filter((elements) => {

    if (elements.title == find) {
        //   console.log(elements.title)
        for (let go in elements) {
            div2_tag.innerHTML += go + ":==" + elements[go] + "<br>"
        }
    }
    main_div.appendChild(div2_tag)
})

}
let available = () => {
let x = document.querySelectorAll(“main div”)
for (let y = 0; y < x.length; y++) {
x[y].style.display = “none”;
}
let div3_tag = document.createElement(“div”);
div3_tag.className = “div3_style”;
book_store.filter((elements) => {
// console.log(elements.status);
if (elements.status == “available” && elements.price < 300) {
div3_tag.innerText += "Available Book name is " + elements.title + " and its price is " + elements.price;
main_div.appendChild(div3_tag);
}
}
)
}
function sum() {
let sum = 0;
let p_tag = document.createElement(“p”);
p_tag.className = “p_style”;
book_store.map((elements) => {
sum += elements.price;
})
p_tag.innerText += “The total book price is” + sum;
main_div.appendChild(p_tag);

}

function price() {
let add = 0;
let p1_tag = document.createElement(“p”);
book_store.filter((elements) => {
if (elements.price > 500) {
add += elements.price;
}
})
p1_tag.innerText+= “The total cost of the books when its cost is greater than 500 is :___” + add;
main_div.appendChild(p1_tag)

}
@Hiral_Khakhariya @drishtinayak2828-TA
bookstore.jhansi23398.repl.co

2 Likes

let book_store = [

    {
        id: 1,
        title: "bhagavad gita",
        description: "The Gita is set in a narrative framework of a dialogue between Pandava prince Arjuna and his guide and charioteer Krishna, an avatar of Lord Vishnu",
        publish_date: "millions year ago",
        price: 1200,
        author: "Vyasa",
        status: "available"
    },

    {
        id: 2,
        title: "Shiva Purana",
        description: "The Shiva Purāṇa contains chapters with cosmology, mythology, relationship between gods, ethics, Yoga, Thirtha (pilgrimage) sites, bhakti, rivers and geography, and other topics",
        publish_date: "millions year ago",
        price: 1300,
        author: "Vyasa",
        status: "available"
    },

    {
        id: 3,
        title: "Ramayana",
        description: "The epic, traditionally ascribed to the Maharishi Valmiki, narrates the life of Rama, a legendary prince of Ayodhya city in the kingdom of Kosala.",
        publish_date: "millions year ago",
        price: 1400,
        author: "Valmiki",
        status: "available"
    },
    {
        id: 4,
        title: "ganmer",
        description: "playing games",
        publish_date: "12/12/2000",
        price: 200,
        author: "krutik",
        status: "available"
    },
    {
        id: 5,
        title: "ganmer-2",
        description: "playing games",
        publish_date: "1/1/1987",
        price: 200,
        author: "nikhil",
        status: "unavailable"
    }
];


//    answer 1
book_store.map((element) => {
    for (i in element) {
        document.write(`${i} :-  ${element[i]}<br>`)
    }
    document.write('**********' + "<br>")
})
document.write('**********' + "<br>" + '***********' + "<br>")




//    answer 2
document.write("answer 2", "<br>")
var ans2 = book_store.map((x) => {
    return x.author + x.title + '<br>'
})
document.write(`${ans2}<br>`)
document.write('**********' + "<br>" + '***********' + "<br>")




//    answer 3
document.write("answer 3", "<br>")
var ans3 = book_store.map((ele) => {
    return ele.id + " :- " + ele.description + '<br>'
})
document.write(`${ans3}<br>`)
document.write('**********' + "<br>" + '***********' + "<br>")




//    answer 4
document.write("answer 4", "<br>")
book_store.filter((ele) => {
    for (var x in ele) {
        //console.log(x)
        if (ele.price < 300   &&   ele[x] == 'available') {
         document.write(`${'title'} :- ${ele.title} <br>`)
        }
    }
})
document.write('**********' + "<br>" + '***********' + "<br>")




//    answer 5
document.write("answer 5", "<br>")
var sum = 0;
book_store.map((ele)=>{
    //console.log(ele.price)
    for(var x in ele){
        //console.log(ele[x])
       if(x == 'price'){
        return sum = sum + ele[x]
       } 
    }
})
document.write(`total sum of the books are :- ${sum}<br>`)
document.write('**********' + "<br>" + '***********' + "<br>")




//    answer 6
document.write("answer 6", "<br>")
var sum = 0;
book_store.map((ele)=>{
    //console.log(ele.price)
    for(var x in ele){
        //console.log(ele[x])
       if(ele.price > 500 && x == 'price'){
        return sum = sum + ele[x]
       } 
    }
})
document.write(`total sum of the books above 500rs are :- ${sum}<br>`)
document.write('**********' + "<br>" + '***********' + "<br>")
1 Like

User interactive Link: https://mini-project-interactive-with-user.glitch.me/
Dynamic Link: https://mini-project-dynamic-.glitch.me/

<!DOCTYPE html>
<html>
<head>
    <title>Book Store</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f0f0f0;
        }

        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }

        main {
            padding: 2rem;
        }

        section {
            margin-bottom: 2rem;
        }

        h2 {
            margin-bottom: 1rem;
        }

        button {
            padding: 0.5rem 1rem;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            cursor: pointer;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        input[type="text"] {
            padding: 0.5rem;
        }

        /* Container for book details */
        .bookBox {
            border: 1px solid #ccc;
            padding: 1rem;
            margin-bottom: 1rem;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        /* Header styles */
        h1 {
            font-family: 'Pacifico', cursive;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Footer styles */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }

        /* Books list styles */
        #allBooksContainer {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
        }

        /* Dropdown styles */
        select {
            padding: 0.5rem;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        /* Responsive layout for the search section */
        .searchContainer {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .searchContainer {
                flex-direction: row;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to the Book Store</h1>
    </header>

    <main>
        <section>
            <h2>Q. 1. Print data of all books</h2>
            <button onclick="printAllBooks()">Print All Books</button>
            <div id="allBooksContainer">
                <!-- All books will be displayed here -->
            </div>
        </section>
        <section>
            <h2>Q. 2. Get books according to the author name</h2>
            <div class="searchContainer">
                <label for="authorSelect">Select Author:</label>
                <select id="authorSelect">
                    <option value="">All Authors</option>
                    <option value="Vyasa">Vyasa</option>
                    <option value="Valmiki">Valmiki</option>
                    <option value="Krutik">Krutik</option>
                    <option value="Nikhil">Nikhil</option>
                    <!-- Add more authors as needed -->
                </select>
                <button onclick="getBooksByAuthor()">Get Books by Author</button>
            </div>
            <div id="booksByAuthorContainer">
                <!-- Books by selected author will be displayed here -->
            </div>
        </section>

        <section>
            <h2>Q. 3. Get details of a particular book</h2>
            <div class="searchContainer">
                <label for="searchSelect">Search by:</label>
                <select id="searchSelect" onchange="changeSearchOption()">
                    <option value="title">Title</option>
                    <option value="id">ID</option>
                </select>
                <div id="titleSearchContainer" style="display:none;">
                    <label for="titleSearchDropdown">Select Title:</label>
                    <select id="titleSearchDropdown">
                        <!-- Titles dropdown will be populated dynamically -->
                    </select>
                    <button onclick="getBookDetailsByTitle()">Get Book Details</button>
                </div>
                <div id="idSearchContainer" style="display:none;">
                    <label for="idSearchDropdown">Select ID:</label>
                    <select id="idSearchDropdown">
                        <!-- IDs dropdown will be populated dynamically -->
                    </select>
                    <button onclick="getBookDetailsByID()">Get Book Details</button>
                </div>
            </div>
            <div id="bookDetailsContainer">
                <!-- Book details will be displayed here -->
            </div>
        </section>
        <section>
            <h2>Q. 4. Get all books whose status is available and price is below 300</h2>
            <button onclick="getAvailableBooksBelow300()">Get Books</button>
            <ul id="availableBooksList">
                <!-- Available books will be displayed here -->
            </ul>
        </section>

        <section>
            <h2>Q. 5. Get sum of books price</h2>
            <button onclick="getSumOfBookPrices()">Get Total Price</button>
            <p id="totalPrice">Total Price: </p>
        </section>

        <section>
            <h2>Q. 6. Get sum of books price whose price is greater than 500</h2>
            <button onclick="getSumOfExpensiveBookPrices()">Get Total Price</button>
            <p id="expensivePrice">Total Price (Expensive Books): </p>
        </section>
    </main>

    <footer>
        <p>Contact us at bookstore@example.com</p>
    </footer>

    <script>
        const books = [
            {
                id: 1,
                title: "bhagavad gita",
                description: "The Gita is set in a narrative framework of a dialogue between Pandava prince Arjuna and his guide and charioteer Krishna, an avatar of Lord Vishnu",
                publish_date: "millions year ago",
                price: 1200,
                author: "Vyasa",
                status: "available"
            },

            {
                id: 2,
                title: "Shiva Purana",
                description: "The Shiva Purāṇa contains chapters with cosmology, mythology, relationship between gods, ethics, Yoga, Thirtha (pilgrimage) sites, bhakti, rivers and geography, and other topics",
                publish_date: "millions year ago",
                price: 1300,
                author: "Vyasa",
                status: "available"
            },

            {
                id: 3,
                title: "Ramayana",
                description: "The epic, traditionally ascribed to the Maharishi Valmiki, narrates the life of Rama, a legendary prince of Ayodhya city in the kingdom of Kosala.",
                publish_date: "millions year ago",
                price: 1400,
                author: "Valmiki",
                status: "available"
            },
            {
                id: 4,
                title: "ganmer",
                description: "playing games",
                publish_date: "12/12/2000",
                price: 200,
                author: "krutik",
                status: "available"
            },
            {
                id: 5,
                title: "ganmer-2",
                description: "playing games",
                publish_date: "1/1/1987",
                price: 200,
                author: "nikhil",
                status: "unavailable"
            }
        ];

        // Function to populate the dropdowns dynamically
        function populateDropdowns() {
            const titleSearchDropdown = document.getElementById("titleSearchDropdown");
            const idSearchDropdown = document.getElementById("idSearchDropdown");

            // Clear existing options
            titleSearchDropdown.innerHTML = "";
            idSearchDropdown.innerHTML = "";

            // Create default options
            const defaultOption = document.createElement("option");
            defaultOption.textContent = "Select Title";
            defaultOption.disabled = true;
            defaultOption.selected = true;
            titleSearchDropdown.appendChild(defaultOption);

            const defaultOptionID = document.createElement("option");
            defaultOptionID.textContent = "Select ID";
            defaultOptionID.disabled = true;
            defaultOptionID.selected = true;
            idSearchDropdown.appendChild(defaultOptionID);

            // Populate the dropdowns with book titles and IDs
            books.forEach((book) => {
                const titleOption = document.createElement("option");
                titleOption.textContent = book.title;
                titleSearchDropdown.appendChild(titleOption);

                const idOption = document.createElement("option");
                idOption.textContent = book.id;
                idSearchDropdown.appendChild(idOption);
            });
        }

        // Function to get book details based on the selected title
        function getBookDetailsByTitle() {
            const titleSearchDropdown = document.getElementById("titleSearchDropdown");
            const selectedTitle = titleSearchDropdown.value;
            const bookDetailsContainer = document.getElementById("bookDetailsContainer");
            const book = books.find((book) => book.title === selectedTitle);
            displayBookDetails(book, bookDetailsContainer);
        }

        // Function to get book details based on the selected ID
        function getBookDetailsByID() {
            const idSearchDropdown = document.getElementById("idSearchDropdown");
            const selectedID = idSearchDropdown.value;
            const bookDetailsContainer = document.getElementById("bookDetailsContainer");
            const book = books.find((book) => book.id.toString() === selectedID);
            displayBookDetails(book, bookDetailsContainer);
        }

        // Helper function to display book details
        function displayBookDetails(book, container) {
            if (book) {
                const detailsHTML = `
                    <div class="bookBox">
                        <h3>${book.title}</h3>
                        <p>Author: ${book.author}</p>
                        <p>Description: ${book.description}</p>
                        <p>Publish Date: ${book.publish_date}</p>
                        <p>Price: $${book.price}</p>
                        <p>Status: ${book.status}</p>
                    </div>`;
                container.innerHTML = detailsHTML;
            } else {
                container.innerHTML = "<p>Book not found.</p>";
            }
        }

        // Change search option based on selection
        function changeSearchOption() {
            const searchSelect = document.getElementById("searchSelect").value;
            const titleSearchContainer = document.getElementById("titleSearchContainer");
            const idSearchContainer = document.getElementById("idSearchContainer");

            if (searchSelect === "title") {
                titleSearchContainer.style.display = "block";
                idSearchContainer.style.display = "none";
            } else if (searchSelect === "id") {
                titleSearchContainer.style.display = "none";
                idSearchContainer.style.display = "block";
            }
        }

        // Q. 1: Print data of all books
        function printAllBooks() {
            const allBooksContainer = document.getElementById("allBooksContainer");
            let listHTML = "";
            books.forEach((book) => {
                listHTML += `<div class="bookBox">
                                <h3>${book.title}</h3>
                                <p>Author: ${book.author}</p>
                                <p>Description: ${book.description}</p>
                                <p>Publish Date: ${book.publish_date}</p>
                                <p>Price: $${book.price}</p>
                                <p>Status: ${book.status}</p>
                             </div>`;
            });
            allBooksContainer.innerHTML = listHTML;
        }

        // Q. 2: Get books according to the author name
        function getBooksByAuthor() {
            const selectedAuthor = document.getElementById("authorSelect").value;
            const booksByAuthorContainer = document.getElementById("booksByAuthorContainer");
            let listHTML = "";
            const filteredBooks = selectedAuthor ? books.filter((book) => book.author === selectedAuthor) : books;
            filteredBooks.forEach((book) => {
                listHTML += `<div class="bookBox">
                                <h3>${book.title}</h3>
                                <p>Author: ${book.author}</p>
                                <p>Description: ${book.description}</p>
                                <p>Publish Date: ${book.publish_date}</p>
                                <p>Price: $${book.price}</p>
                                <p>Status: ${book.status}</p>
                             </div>`;
            });
            booksByAuthorContainer.innerHTML = listHTML;
        }
         
        // Q. 3: Get details of a particular book by ID
        function getBookDetailsByID() {
            const idSearchDropdown = document.getElementById("idSearchDropdown");
            const selectedID = idSearchDropdown.value;
            const bookDetailsContainer = document.getElementById("bookDetailsContainer");
            const book = books.find((book) => book.id.toString() === selectedID);
            displayBookDetails(book, bookDetailsContainer);
        }

        // Q. 4: Get all books whose status is available and price is below 300
        function getAvailableBooksBelow300() {
            const availableBooksBelow300 = books.filter((book) => book.status === "available" && book.price < 300);
            displayBooksInList(availableBooksBelow300);
        }

        // Helper function to display list of books in the availableBooksList
        function displayBooksInList(booksList) {
            const availableBooksList = document.getElementById("availableBooksList");
            let listHTML = "";
            if (booksList.length > 0) {
                booksList.forEach((book) => {
                    listHTML += `<li>${book.title} - ${book.author}</li>`;
                });
            } else {
                listHTML = "<li>No books found.</li>";
            }
            availableBooksList.innerHTML = listHTML;
        }

        // Q. 5: Get sum of books price
        function getSumOfBookPrices() {
            const totalPrice = books.reduce((sum, book) => sum + book.price, 0);
            const totalPriceParagraph = document.getElementById("totalPrice");
            totalPriceParagraph.textContent = `Total Price: $${totalPrice}`;
        }

        // Q. 6: Get sum of books price whose price is greater than 500
        function getSumOfExpensiveBookPrices() {
            const expensiveBooks = books.filter((book) => book.price > 500);
            const totalPrice = expensiveBooks.reduce((sum, book) => sum + book.price, 0);
            const expensivePriceParagraph = document.getElementById("expensivePrice");
            expensivePriceParagraph.textContent = `Total Price (Expensive Books): $${totalPrice}`;
        }

        // Helper function to display book details
        function displayBookDetails(book, container) {
            if (book) {
                const detailsHTML = `
                    <div class="bookBox">
                        <h3>${book.title}</h3>
                        <p>Author: ${book.author}</p>
                        <p>Description: ${book.description}</p>
                        <p>Publish Date: ${book.publish_date}</p>
                        <p>Price: $${book.price}</p>
                        <p>Status: ${book.status}</p>
                    </div>`;
                container.innerHTML = detailsHTML;
            } else {
                container.innerHTML = "<p>Book not found.</p>";
            }
        }

        // Helper function to display list of books
        function displayBooks(booksList) {

        }

        // Populate dropdowns on page load
        populateDropdowns();
    </script>
</body>
</html>

Dynamic Link: https://mini-project-dynamic-.glitch.me/
@Hiral_Khakhariya @drishtinayak2828-TA

Thank You!

2 Likes