index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swift Type</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="x-image/icon" href="/Assets/typing.png">
</head>
<body>
    <header>
        <h1>Typing Speed Test</h1>

    </header>

    <main>

        <section class="welcome-section">
            <div id="welcome-section-head">
                <h2 id="welcome-section-heading">Welcome to Swift Type</h2>
                <p id="welcome-section-sub-heading">
                    Are you ready to test your typing skills? Dive into our Typing Speed Test and challenge yourself!
                </p>
            </div>
        
            <div id="welcome-section-body">
                <h3>About Swift Type</h3>
                <p>Experience the thrill of typing a series of quotes or sentences within a specified time limit.</p>
                <p>Measure your performance in terms of <span>Characters per Minute</span> (CPM), <span>Words per Minute</span> (WPM), <span>accuracy</span>, and <span>errors</span>.</p>
                <p>Sharpen your typing accuracy and speed with every attempt.</p>
            </div>
        
            <div id="welcome-section-foot">
                <h3>How It Works</h3>
                <p>1. Click the <span>"Start"</span> button to ignite the challenge.</p>
                <p>2. Type the given text within the allocated time.</p>
                <p>3. Witness your accuracy as incorrectly typed characters are marked. Remember, you can't go back or type more characters than provided.</p>
                <p>4. Upon completion, your performance will be displayed.</p>
                <button id="ready-btn">I'm ready</button>
            </div>
        </section>
        

        <section id="section-1">
            <div id="display-statistics">
                <div id="sc-1" class="statistics-container">
                    <h2>WPM</h2>
                    <p id="wpm" >00</p>
                </div>
                <div id="sc-2" class="statistics-container">
                    <h2>CPM</h2>
                    <p id="cpm">00</p>
                </div>
                <div class="statistics-container">
                    <h2>Errors</h2>
                    <p id="errors">00</p>
                </div>
                <div class="statistics-container">
                    <h2>Time (s)</h2>
                    <p id="time" >00s</p>
                </div>
                <div  class="statistics-container">
                    <h2>Accuracy</h2>
                    <p id="accuracy">00</p>
                </div>
            </div>

            <div id="text-container">
                <p id="text-to-type-container">Click on the start button to start typing.</p>
            </div>

        </section>
        <section id="section-2">
            <textarea name="text-of-typing-section" id="text-of-typing-section" class="" placeholder="Click on the start button to start typing here." disabled></textarea>
            <button id="start-btn" value="start" class="" >Start</button>
            <button id="stop-btn" value="stop" class="">Stop</button>

        </section>

        <section id="result-section">

            <div id="result-section-1">
                <h2>About Developer</h2>
                <section id="developer-details">

                    <div id="pic-name">
                        <img>
                        <h3>Dev Kant Kumar</h3>
                        <h4>Aspiring Full Stack Developer</h4>
                        <button id="contact-me-btn">Contact Me</button>
                    </div>

                    <div id="rating-section">
                        <h2>Rating</h2>
                      <div id="rating">
                          <div id="star-1" class="star">1</div>
                          <div id="star-2" class="star">2</div>
                          <div id="star-3" class="star">3</div>
                          <div id="star-4" class="star">4</div>
                          <div id="star-5" class="star">5</div>
  
                      </div>
                      <div id="rating-msg-section"><p id="rating-msg">Rate your Swift Type experience!</p></div>
                   </div>

                </section>

            </div>

            <div id="result-section-2">
                <h2>Final Performance</h2>
                <section id="performance-dashboard">
                    <div id="pd-section-1">
                        <div class="performance-container">
                            <h2>Time Taken</h2>
                            <p id="time-taken">00s</p>
                        </div>
                        <div class="performance-container">
                            <h2>Words Left</h2>
                            <p id="words-left">00</p>
                        </div>
                        <div class="performance-container">
                            <h2>Chars Left</h2>
                            <p id="chars-left">00</p>
                        </div>


                    </div>
                    <div id="pd-section-2">
                        <section id="pd-section-2-1">
                            <p id="msg-user"></p>

                        </section>
                        <section id="pd-section-2-2">
                            <a href=""><button id="restart-btn" value="restart">Restart</button></a>

                        </section>


                    </div>


                </section>

            </div>

        </section>

    </main>
    <footer>

    </footer>

    <script src="script.js"></script>
</body>
</html>