Adding more books to the bookshelf


by Jeremy Caudle
code

I did a quick review on arrays today and the practice got me thinking about how I might approach adding books to yesterday's bookshelf. Unfortunately I didn't use any arrays in what I ended up building and I made use of prompts instead of a modal when prompting for information about the book that would be added. I had fun building it though, and the JavaScript worked after fixing 1 typo on a variable name. I'm quite proud of that.

  • Big Tub Boost
  • Human Stone Soup
  • Shabu Shabu Sometimes
  • Warm Presoup
  • I'm Walkin'
  • Pea, Nut, Butter, and Gel-e
  • Soup Bros
  • Crystallization of Anger
  • Edibles and Anger

View the code:

HTML and JS 
<section class="code-block">
            <div class="bookshelf">

                <ul class="shelf" id="Fiction">
                    <li class="book" style="--book-color: red; --book-text: gold; --font-weight: 600;"><span class="booktitle">Big Tub Boost</span><img src="" alt="" /></li>
                    <li class="book" style="--book-color: rgb(91, 104, 218); --book-text: gold; --font-weight: 600;"><span class="booktitle">Human Stone Soup</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">Shabu Shabu Sometimes</span><img src="" alt="" /></li>
                    <button id="fictionBtn">Add a book</button>
                </ul>
                
                <ul class="shelf flex-align-right" id="Non-Fiction"><li class="book"><span class="booktitle">Warm Presoup</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">I'm Walkin'</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">Pea, Nut, Butter, and Gel-e</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">Soup Bros</span><img src="" alt="" /></li>
                    <button id="nonBtn">Add a book</button>
                </ul>

                <ul class="shelf flex-align-center" id="Self-Help"><li class="book"><span class="booktitle">Crystallization of Anger</span><img src="" alt="" /></li>
                    <li class="book" title="2021"><span class="booktitle">Edibles and Anger</span><img src="" alt="" /></li>
                    <button id="selfBtn">Add a book</button>
                </ul>
               
            </div>

        </section>
        <script>
            /* Variables */
            const fictionBtn = document.querySelector('#fictionBtn');
            const nonBtn = document.querySelector('#nonBtn');
            const selfBtn = document.querySelector('#selfBtn');
            const shelfFiction = document.querySelector('#Fiction');
            const shelfNonFiction = document.querySelector('#Non-Fiction');
            const shelfSelfHelp = document.querySelector('#Self-Help');

            /* Functions */
                function getBookInfo(shelflabel) {
                    let name, bookColor, spineText;
                    name = prompt('What is the name of the book?');
                    bookColor = prompt('What is the color of the book?');
                    spineText = prompt('What is the color of the text on the spine of the book?');
                    let newBook = document.createElement('li');
                    newBook.innerHTML = `<li class="book" style="--book-color: ${bookColor}; --book-text: ${spineText}"><span class="booktitle">${name}</span></li>`;
                    console.log(newBook);
                    shelflabel.appendChild(newBook);
                }

            /* Events */

            fictionBtn.addEventListener('click', () => {

                getBookInfo(shelfFiction);

            });

            nonBtn.addEventListener('click', () => {

            getBookInfo(shelfNonFiction);

            });

            selfBtn.addEventListener('click', () => {

            getBookInfo(shelfSelfHelp);

            });

        </script>
CSS 
section.code-block {
                font-family: Helvetica, Arial, sans-serif;
            }

            .bookshelf {
                background-color: rgb(202, 193, 165);
                padding: 1rem;
            }

            .shelf {
                list-style: none;
                margin:0;
                padding:0;
                padding-left: 0;
            }

            .book {
        margin: 0;
        cursor: pointer;
        z-index:1;
           }

           .booktitle {
        min-width: 1.5rem;
        margin: 0 1px;
        background-color: white;
        background-color: var(--book-color, white);
        font-weight: 300;
        font-weight: var(--font-weight, 300);
        padding: .5rem .25rem;
        transition: transform .25s ease-out, box-shadow .25s ease-out, outline .25s ease-out;
        will-change: transform;
        color: black;
        color: var(--book-text, black);
    }

    .book:hover > .booktitle{
        transform: translateY(-.25rem);
        box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.3);
    }

    button {
        aspect-ratio: 1/1;
        display: block;
        border: none;
        background-color: rgb(240, 238, 111);
        border-radius: .5rem;
        margin: 1rem;
        text-transform: uppercase;
        padding: .5rem 1rem;
        align-self: flex-start;
        writing-mode: vertical-lr;
        transition: background-color .25s ease-out, box-shadow .25s ease-out;
    }

    button:hover, button:focus {
        background-color: rgb(255, 253, 151);
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.125);
    }

    @supports (display: grid) {

@media (max-width: 414px) {
    .bookshelf {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
        }
}

@media (min-width: 415px) and (max-width: 667px) {
    .bookshelf {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    background-color: rgb(202, 193, 165);
    padding: 1rem;
} 
}

@media (min-width: 668px) {

.bookshelf {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    background-color: rgb(202, 193, 165);
    padding: 1rem;
}

}

.booktitle {
    display: block;
    writing-mode: vertical-rl;
}

.book > img {
    width:0;
    height:0;
    display: none;
}

}

@supports (display: flex) {

.shelf {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    background-color: rgb(143, 137, 120);
    padding: .25rem .25rem 0 .25rem;
    box-shadow: -2px 0 10px 10px rgba(68, 65, 57, 0.25) inset; 
    min-height: 250px;   
    position: relative;
    }

.flex-align-left {
    justify-content: flex-start;
}

.flex-align-right {
    justify-content: flex-end;
}

.flex-align-center {
    justify-content: center;
}

.shelf::after {
    content: attr(id);
    display: block;
    position: absolute;
    top: -.875rem;
    left: 0;
    text-transform: uppercase;
    font-size: .5rem;
    padding: .125rem;
    background-color: darkgoldenrod;

}

}

Tags