index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Typing Test Clone</title>

        <link rel="stylesheet" href="style/style.css">
        <link rel="stylesheet" href="style/keyboard.css">
        <link rel="stylesheet" href="style/typingResult.css">
        <!-- Vue Js -->
        <script src="https://unpkg.com/vue@3"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    </head>
    
    
    <body>
        <div id="app">
            <typing-test-result v-show="result_test_component" :score="typing_test_score" :scorelist="typing_chart_score"></typing-test-result>
            <typing-keyboard v-show="typing_test_component"></typing-keyboard>
            <typing-test-component v-show="typing_test_component" @show-result="showHideComponents"></typing-test-result>
        </div>
    </body>


    <!-- Import Our Data -->
    <script src="./data/data.js"></script>  
    <!-- Import Our App Component -->
    <script src="script.js"></script>
    <!-- Import Our Component -->
    <script src="components/typingTest.js"></script>
    <script src="components/keyboard.js"></script>
    <script src="components/resultTest.js"></script>
    <!-- Mount Our App -->
    <script>app.mount("#app")</script>
</html>


            <!-- <div class="result-section">
                <div class="left-result-section">
                    <div class="wpm-res">
                        <span>WPM</span>
                        <h1>50</h1>
                    </div>
                    <div class="time-res">
                        <span>time</span>
                        <h1>30s</h1>
                    </div>
                </div>
            </div> -->