Chat Bot Learning

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AiChatBot</title>
    <style>
        #chat-container {
            max-width: 300px;
            margin: auto;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <img src="angeliq.gif" alt="Virtual Girl" width="300">

    <p>Mau tanya apa d^_^b:</p>

    <input id="input" type="text" placeholder="Type here">
    <button onclick="askQuestion()">Ask</button>

    <p id="response"></p>

 <script src="jquery.min.js">
</script>

    <script>
        // Load data from localStorage
        var storedAnswers = JSON.parse(localStorage.getItem("chatbotAnswers")) || {};

        function saveToLocalStorage() {
            localStorage.setItem("chatbotAnswers", JSON.stringify(storedAnswers));
        }

        function askQuestion() {
            // get the question from the user
            var question = document.getElementById("input").value;

            // your extended AI logic goes here
            if (storedAnswers.hasOwnProperty(question)) {
                document.getElementById("response").innerHTML = storedAnswers[question];
            } else {
                var userAnswer = prompt("Maaf, aku enggak mengerti pertanyaan kamu. Aku harus jawab apa ya? :");
                storedAnswers[question] = "d^_^b  " + userAnswer;
                document.getElementById("response").innerHTML = storedAnswers[question];
                // Save updated data to localStorage
                saveToLocalStorage();
            }
        }
    </script>

</body>

</html>