<style>
    .title {
        font-style:italic;
    }
    .publication-year {
        font-size:90%; padding-left:1em;
    }
    .active-list-item {
        border:1px solid #000;
    }
    .bio {
        position:absolute;
        top:5%;
        left:5%;
        margin:5%;
        padding:2% 5%;
        border-radius:10px;
        box-shadow: 5px 5px 5px #000;
        background:#fff;
        border:1px solid #ccc;
    }
</style>
<h1>My Reading Journal</h1>
<ul>
    <li data-isbn="9780679604136">
        <span class="author">Rebecca Stott</span>, <span class="title">
        Darwin’s Ghosts: The Secret History of Evolution</span> <span
        class="publication-year">2012</span>
    </li>
    <li data-isbn="9780520258327">
        <span class="author">David W. Deamer</span>, <span class="title">
        First Life: Discovering the Connections Between Stars, Cells, and 
        How Life Began</span> <span class="publication-year">2011</span>
    </li>
    <li data-isbn="9781118964781">
        <span class="author">Alister E. McGrath</span>, <span class="title"
        >Dawkins’ God: From The Selfish Gene to The God Delusion</span> 
        <span class="publication-year">2015</span>
    </li>
</ul>

<script>
    var books = {
        '9780679604136' : {
            'publisher' : 'Random House Publishing Group',
            'pages' : '432',
        },
        '9780520258327' : {
            'publisher' : 'University of California Press',
            'pages' : '271',
            
        },
        '9781118964781' : {
            'publisher' : 'John Wiley & Sons',
            'pages' : '208',
        },
    };
    
    var authors = {
        'Rebecca Stott' : {
            'born' : '1964',
            'degree' : 'PhD',
            'profession' : 'Professor at the University of East Anglia',
            'other-works' : ['Ghostwalk (2007)', 'The Coral Thief (2009)'],
        },
        'David W. Deamer' : {
            'born' : '1939',
            'degree' : 'PhD',
            'profession' : 'Research professor at UCSC',
            'other-works' : ['Membrane Structure (2012)'],
        },
        'Alister E. McGrath' : {
            'born' : '1953',
            'degree' : 'PhD',
            'profession' : 'Professor at Oxford University',
            'other-works' : ['Mere Theology (2010)', 'C. S. Lewis, A Life (2013)']
        }
    }
    
    var all_book_list_items = document.querySelectorAll('li');
    for(var i = 0; i < all_book_list_items.length; i++) {
        all_book_list_items[i].addEventListener('click', function() {
            if(this.querySelectorAll('.extras').length) {
                var the_extras_span = this.querySelectorAll('.extras')[0];
                this.removeChild(the_extras_span);
                this.className = '';
                return;
            }
            this.className = 'active-list-item';
            var isbn = this.getAttribute('data-isbn');
            var book_object = books[isbn];
            this.innerHTML = this.innerHTML + '<span class="extras">' 
            + '<br> Publisher: ' + book_object.publisher
            + '. Page count: ' + book_object.pages + '</span>';
        });
    };
    
    document.body.addEventListener('click', function(event) {
        var clicked_element = event.target;
        if (clicked_element.classList.contains("author")) {
            var author_name = clicked_element.innerHTML;
            var author_object = authors[author_name];
            
            var bio_div = document.createElement('div');
            bio_div.className = 'bio';
            bio_div.innerHTML = '<h2>' + author_name + ' (' 
                + author_object.degree + ')</h2>';
            bio_div.innerHTML += '<h3>' + author_object.profession + '</h3>';
            bio_div.innerHTML += '<div>Born: ' + author_object.born + '<br>';
            bio_div.innerHTML += 'Other works: ' 
                + author_object['other-works'].join(', ');
            bio_div.innerHTML += '</div>';
            
            bio_div.addEventListener('click', function() {
                //this.parentElement.removeChild(this); 
                document.body.removeChild(this);
            });
            
            document.getElementsByTagName('body')[0].appendChild(bio_div);
            
        }
    });
    
    
</script>