index.html

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

<head>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="script.js" charset="utf-8"></script>
    <meta charset="utf-8">
    <title>Book Database!</title>
</head>

<body>
    
    <div id="container">
    
        <section id="header">
            <span id="messages">
                Didn't it work? Maybe you can see a errorcode here: <br>
                <ul id="errormessage">
                    
                </ul>
            </span>
            <div id="LogInForm">
                <form action="">
                    <input type="text" name="logIn" placeholder="Enter Personal-Key" id="logInValue">
                </form>
            </div>
                <button id="logIn">
                    Log-In
                </button>


            <h1>Welcome to the new book-database</h1> 
            <span id="getKey1">           
                <button id="getKey">
                    Get API-Key
                </button>
                <div id="getKeyLabel" >
                    Personal Key:
                </div>
            </span>
        </section>

        <section id="mainSection">
            <form action="" method="post">
                
                <label for="titleInput">Book Title: </label>                
                <input type="text" placeholder="Enter Book Title" name="Title" id="titleInput">
                
                <label for="authorInput">Book Author: </label>
                <input type="text" placeholder="Enter Author" name="Author" id="authorInput">
                
                <button type="button" id="createBookBtn">Add Book</button>
                <!-- <input type="submit" value="Submit"> -->
            </form>
        </section>

        <section id="bookSection">
            <!-- Section for all books that are added -->
            <!-- <div class="book1">
                här kommer bok 1 ligga senare
            </div>
            <div class="book2">
                här kommer bok 2 ligga senare
            </div>
            <div class="book3">
                här kommer bok 3 ligga senare
            </div> -->
        </section>

        <section id="footer">
            
        </section>

    </div>
</body>

</html>