ТЕСТ СКОРОСТИ НАБОРЫ [closed]

Question

Вопрос в том, что мне нужно создать тест на скорость набора текста, как показано по ссылке ниже.

Цель
Я должен соответствовать всем этим пунктам:

Добавить элемент контейнера HTML с идентификатором speedTypingTest
Добавить элементы абзаца HTML с таймером идентификатора, quoteDisplay и result
Добавить элемент HTML textarea с идентификатором quoteInput
Добавить элементы кнопки HTML с идентификаторами submitBtn и resetBtn
Добавление счетчика компонента Bootstrap Следуя приведенным выше инструкциям, добейтесь заданной функциональности.
Когда страница открыта, сделайте HTTP-запрос, чтобы получить случайный URL-адрес цитаты: https://apis.ccbp.in/random-quote
Отображение случайной цитаты в элементе абзаца HTML с идентификатором quoteDisplay
Запустите таймер и отобразите время в секундах в элементе абзаца HTML с помощью id timer
Когда значение вводится в элемент HTML textarea с идентификатором quoteInput и нажимается элемент кнопки HTML с идентификатором submitBtn
Если значение, введенное в элемент HTML textarea с идентификатором quoteInput, совпадает с цитатой в элементе абзаца HTML с идентификатором quoteDisplay
Таймер должен быть остановлен, а в элементе абзаца HTML должно быть показано сообщение об успешном завершении с идентификатором result.
Если значение, введенное в элемент HTML textarea с идентификатором quoteInput, не соответствует цитате в элементе абзаца HTML с идентификатором quoteDisplay
Таймер должен работать, а в элементе абзаца HTML должно отображаться сообщение об ошибке с идентификатором result.
При нажатии кнопки HTML с идентификатором resetBtn
Сделайте HTTP-запрос, чтобы получить новую случайную цитату
Отображение новой случайной цитаты в элементе абзаца HTML с идентификатором quoteDisplay
Сбросьте таймер на 0 секунд и отобразите время в секундах в элементе абзаца HTML с помощью id timer
Очистите элемент HTML textarea с помощью id quoteInput
Добавьте статус загрузки с помощью счетчика компонентов Bootstrap при выполнении HTTP-запроса.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container" id="speedTypingTest">
        <h1 class="heading">Speed Typing Test</h1>
        <p>On YOur fingers lets go</p>
        <div class="timer-container d-flex flex-row">
            <img src="https://assets.ccbp.in/frontend/dynamic-webapps/clock-img.png" class="clock-image" />
            <p class="timer-display" id="timer">10</p>
            <p>seconds</p>
        </div>
        <div class="d-flex flex-column card-container">
            <textarea rows="4" cols="70" class="user-input" id="quoteInput">

            </textarea>
            <p id="quoteDisplay"></p>
            <input class="" type="text" />
        </div>
        <p id="result"></p>
        <div>
            <button id="resetBtn">Reset</button>
            <button id="submitBtn">Submit</button>
        </div>
        <div class="d-none" id="spinner">
            <div class="d-flex justify-content-center">
                <div class="spinner-border" role="status">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

let resetBtnEl = document.getElementById("resetBtn");
let submitBtnEl = document.getElementById("submitBtn");
let timerEl = document.getElementById("timer");
let quoteInputEl = document.getElementById("quoteInput");
let quoteDisplayEl = document.getElementById("quoteDisplay");

let resultEl = document.getElementById("result")
let countdown = 0;

let intervalId = setInterval(function() {
    countdown = countdown + 1;
    timerEl.textContent = countdown;
}, 1000);

quoteInputEl.addEventListener("keydown", function(event) {
    let textArea = quoteDisplay.value;

    if (event.key === "Enter" && quoteDisplay === quoteInput) {
        result.textContent = "You did it!";
        clearInterval(intervalId);
    }
});

function displayResults(searchResults) {
    spinnerEl.classList.add("d-none");

    for (let result of searchResults) {
        createAndAppendSearchResult(result);
    }
}

function getRandomQuote() {
    spinnerEl.classList.remove("d-none");
    quoteDisplayEl.classList.add("d-none");

    fetch("https://apis.ccbp.in/random-quote", options)
        .then(function(response) {
            return response.json();
        })
        .then(function(jsonData) {
            let randomQuote = jsonData.value;

            spinnerEl.classList.add("d-none");
            quoteDisplayEl.classList.remove("d-none");

            quoteDisplayEl.textContent = randomQuote;
        });
}

resetBtnEl.addEventListener("click", getRandomQuote);

У меня такие ошибки, как:

Когда текст в элементе абзаца HTML с идентификатором quoteDisplay и значение, введенное в элементе textarea HTML с идентификатором quoteInput, не совпадают, а элемент кнопки HTML с идентификатором submitBtn нажат, в элементе абзаца HTML с идентификатором должно отображаться сообщение об ошибке результат
Когда текст в элементе абзаца HTML с идентификатором quoteDisplay вводится в элемент текстового поля HTML и нажимается элемент кнопки HTML с идентификатором submitBtn, в элементе абзаца HTML должно отображаться сообщение об успешном выполнении с результатом идентификатора
При нажатии кнопки сброса должен быть сделан HTTP-запрос для получения случайной цитаты из данного URL-адреса, а значение в элементе абзаца HTML с id quoteDisplay должно быть заменено цитатой, полученной в ответе.
При открытии страницы необходимо сделать HTTP-запрос для получения случайной цитаты из данного URL-адреса, а элемент абзаца HTML с идентификатором quoteDisplay должен содержать цитату, полученную в ответе.

Мне нужна помощь в их решении.

0

Похожие записи:

Добавить комментарий Отменить ответ