Shelf

—

by

Step 1: Set Up HTML

Create an index.html file:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Bookshelf</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>My Digital Bookshelf</h1>
        <form id="book-form">
            <input type="text" id="book-title" placeholder="Book Title" required>
            <input type="text" id="book-author" placeholder="Author" required>
            <button type="submit">Add Book</button>
        </form>
        <div id="shelf" class="shelf"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Add Some Style

Create a styles.css file:

cssCopy codebody {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 80%;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

input {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

.shelf {
    display: flex;
    flex-wrap: wrap;
}

.book {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin: 5px;
    width: calc(33.333% - 10px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

Step 3: Add Functionality with JavaScript

Create a script.js file:

javascriptCopy codedocument.getElementById('book-form').addEventListener('submit', function (e) {
    e.preventDefault();
    
    const title = document.getElementById('book-title').value;
    const author = document.getElementById('book-author').value;

    addBookToShelf(title, author);

    // Clear the input fields
    document.getElementById('book-title').value = '';
    document.getElementById('book-author').value = '';
});

function addBookToShelf(title, author) {
    const shelf = document.getElementById('shelf');
    const bookDiv = document.createElement('div');
    bookDiv.className = 'book';
    bookDiv.innerHTML = `<strong>${title}</strong><br><em>${author}</em>`;
    
    shelf.appendChild(bookDiv);
}

How It Works

HTML: The form collects the book title and author.
CSS: Basic styles for the layout and appearance of the bookshelf.
JavaScript: When the form is submitted, the book title and author are added to the shelf, and the input fields are cleared.

Running the Project

Save all three files in the same directory.
Open index.html in a web browser.

Comments

Leave a Reply Cancel reply