index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!-- title in browser -->
    <title>The Online Diary 📔</title>
    <meta name="description" content="">
    <!-- responsive meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- my style sheet -->
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- icons -->
    <script src="https://kit.fontawesome.com/5e785b2c48.js" crossorigin="anonymous"></script>
</head>

<body>
    <!-- where vue is able to be used -->
    <div id="app">
        <!-- Everything on Dashboard -->
        <div class="dash Wrapper">
            <!-- menu  -->
           <nav-menu></nav-menu>
            <!-- main welcome block -->
            <main-welcome-block v-bind:name="Name"></main-welcome-block>
            <!-- diary block -->


            <div  class="diary block">
                <transition name="fade" mode="out-in">
                    <div key="save" v-if="state==='edit'" style="display: block;height: 95%;">  
                        <!-- diary text input -->
                        <textarea  autofocus  v-model="message" maxlength = "250" class="diaryInput" placeholder="How was your day?"
                            contenteditable="false" @keyup.enter="submit">
                            
                        </textarea>
                        <p>{{inputCharacterCount}}/250</p>
                            <!-- diary emotional slider -->
                            
                                <i class="fas fa-frown"></i>
                                <input type="range" v-model="slider" min="1" max="100" value="50" class="slider" id="myRange">
                                <i class="fas fa-smile"></i> 
                                <!-- TODO make button look deactivated in css -->
                                <button v-bind:disabled="message.length === 0" v-on:click="submit">Submit</button>
                        
                    </div>
                    <div key="save2" v-else >
                        <h1>Thankyou - come back tomororw</h1>
                        <button @click="changeState('edit')" >New Entry</button>
                    </div>
                </transition>
            </div>


            <!-- previous enteries block -->
            <previous-entries-block></previous-entries-block>
            <!-- weather block -->
            <weather-block></weather-block>
            <!-- quote block -->
            <quote-block></quote-block>
        </div>
    </div>
    <!-- my js file -->
    <script src="my.js"></script>
</body>

</html>