Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>My First Webpage</title>

        <style>
            body {
                margin: 0px;
            }

            #header {
                height: 100px;
                background:#cccccc;
                padding: 50px;
            }

            #header div {
                display: inline-block;
                vertical-align: middle;
            }

            #logo-container {
                margin-right: 50px;
            }

            #logo-container img {
                height: 100px;
                width:auto;
            }

            #header-text-container h1 {
                font-family: "Helvetica";
            }

            #banner {
                height: 720px;
                background-color: #000;
                text-align: center;
            }

            #content {
                padding: 50px;
                min-height: 500px;
            }

            #footer {
                height: 100px;
                padding: 10px;
                background: #cccccc;
            }

            #footer div {
                display: inline-block;
                width: 33%;
            }

        </style>
    </head>
    <body>

        <div id="app"> <!-- main div -->

            <div id="header"> <!-- header -->
                <div id="logo-container">
                    <img src="https://image.flaticon.com/icons/png/128/201/201565.png" />
                </div>
                <div id="header-text-container">
                    <h1>Road to Success</h1>
                </div>
            </div>

            <div id="banner"> <!-- banner -->
                <iframe width="1080" height="720" src="https://www.youtube.com/embed/ilyLX9f4hY8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <div id="content"> <!-- content -->
                <div v-if = "comments.length >= 1">
                    <div v-for="comment in comments">
                        <p>
                            <b>{{ comment.name }}</b>: {{ comment.message }}
                            <a href="javscript:void(0);" v-on:click="deleteComment(comment.id)">X</a>
                        </p>
                    </div>
                </div>
                <div v-else>
                    <p>No comments yet</p>
                </div>
                <hr>
                <h3>Add comment</h3>

                <div>
                    <input type="text" v-model="name" placeholder="Your name"/>
                    <br/>
                    <br/>
                    <textarea v-model="message" placeholder="Your comment"></textarea>
                    <br>
                    <br/>
                    <button v-on:click="postComment">Submit</button>
                </div>
                <hr>
            </div>

            <div id="footer"> <!-- footer -->
                <div>
                    <p class="text">
                        Beginning place. Multiply moving divided darkness so, forth first male all, be one called dominion cattle have gathering man moveth.
                    </p>
                </div>

                <div>
                    <p class="text">
                        Light female open called. Make lights, there for forth unto there. Waters great air creepeth were can't one great night.
                    </p>
                </div>

                <div>
                    <p class="text">
                        You'll. From stars don't they're behold, fill gathered. After let bring gathered she'd for won't good. Male one face. Firmament.
                    </p>
                </div>
            </div>


        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>

            var app = new Vue({
                el: "#app",
                data: {
                    comments: [],
                    name: "",
                    message: ""
                },
                methods: {
                    getComments() {
                        this.comments = localStorage.getItem("comments") ? JSON.parse(localStorage.getItem("comments")) : [];
                        console.log(localStorage.getItem("comments"))
                    },
                    postComment() {
                        this.comments.push({
                            id: Date.now(),
                            name: this.name,
                            message: this.message
                        });

                        localStorage.setItem("comments", JSON.stringify(this.comments));

                        this.name = "";
                        this.message = "";
                    },
                    deleteComment(id) {
                        var position = this.comments.map(function(comment){
                            return comment.id
                        }).indexOf(id);

                        this.comments.splice(position, 1);
                        localStorage.setItem("comments", JSON.stringify(this.comments));
                    }
                },
                mounted() {
                    this.getComments();
                }
            })

        </script>

    </body>
</html>