diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..39bdb3d01eaf598b4e39c847193535b3e2410483
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.env
+config.json
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 88ae73073b28f97b814b638b36bde6736f7b44f1..1d594b522924f38ab7641f9c85a77eae09f99cde 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,10 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Churn Prediction</title>
+ <script src="script.js" defer></script>
</head>
<body>
<h1>Customer Churn Prediction Input</h1>
- <form method="POST">
+ <form id="churnForm">
<label for="customerID">Customer ID:</label>
<input type="text" id="customerID" name="customerID" required><br>
diff --git a/frontend/script.js b/frontend/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..6a18e52604c682d767b7cc6e2f8ad9cb3c44a304
--- /dev/null
+++ b/frontend/script.js
@@ -0,0 +1,48 @@
+document.addEventListener("DOMContentLoaded", () => {
+ fetch('config.json')
+ .then(response => response.json())
+ .then(config => {
+ const apiUrl = config.API_URL;
+ const form = document.getElementById("churnForm");
+
+ form.addEventListener("submit", async (event) => {
+ event.preventDefault();
+
+ const formData = new FormData(form);
+ const data = {};
+ formData.forEach((value, key) => {
+ data[key] = value;
+ });
+
+ try {
+ const response = await fetch(`${apiUrl}/`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(data)
+ });
+
+ if (response.ok) {
+ const result = await response.json();
+ alert('Data submitted successfully!');
+ console.log('Response from API:', result);
+ } else {
+ const text = await response.text();
+ if (text.startsWith('<')) {
+ alert('Server returned an error page');
+ } else {
+ const error = JSON.parse(text);
+ alert('Error: ' + (error.message || 'Unknown error'));
+ }
+ }
+ } catch (error) {
+ alert('An error occurred: ' + error.message);
+ console.error('Error:', error);
+ }
+ });
+ })
+ .catch(error => {
+ console.error("Error loading config.json:", error);
+ });
+});