# Frontend

## Frontend API Interaction – script.js

\
The file \`script.js\` handles form submissions and frontend-to-backend communication. It gathers input values from HTML elements, packages them into a JSON payload, and sends them via the Fetch API to the Flask server.\
Error responses are caught and displayed gracefully. The JavaScript also formats and renders the returned sentiment and answer list in the frontend UI dynamically.\
\


## UI Structure and Styling – index.html & style.css

\
The user interface is built using HTML5, styled with modern CSS for responsiveness and dark mode compatibility.\
Elements include:\
\- Coin selection dropdown (\`\<select>\`)\
\- Query input field (\`\<input>\`)\
\- Submission button (\`\<button>\`)\
\- Output div (\`\<div id="result">\`)

**Light Frontend work:**

**script.js**

**Purpose:**\
Bridges frontend form with backend API.

```
function sendQuery() {
  const coin = document.getElementById('coin').value;
  const query = document.getElementById('query').value;
  ...
  fetch('/query', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ coin, query })
  })

```

**Core Logic:**

* Sends a POST request to /query
* Parses and displays response
* Handles errors and displays fallback messages

**Helper:**

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

Used to format the coin name before displaying.

**Link to Fetch API Docs:**\
[Fetch API – MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

**index.html and style.css**

**index.html:**\
Standard HTML form including:

* Dropdown for coin selection
* Input field for query
* Submit button to trigger sendQuery()
* Result placeholder

**style.css:**\
Custom styling:

* Dark theme with soft shadows
* Responsive form fields
* Visual feedback on hover

**Links:**

* [HTML Select Element – MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
* [CSS Styling Basics – MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Styling_text)

**Quick Links for reference:**

| Component           | Recommended reference Link                                                                                                                        |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Flask               | [https://flask.palletsprojects.com/](https://flask.palletsprojects.com/)                                                                          |
| Flask-CORS          | [https://flask-cors.readthedocs.io/en/latest/](https://flask-cors.readthedocs.io/en/latest/)                                                      |
| render\_template    | [https://flask.palletsprojects.com/en/2.3.x/api/#flask.render\_template](https://flask.palletsprojects.com/en/2.3.x/api/#flask.render_template)   |
| request.get\_json() | [https://flask.palletsprojects.com/en/2.3.x/api/#flask.Request.get\_json](https://flask.palletsprojects.com/en/2.3.x/api/#flask.Request.get_json) |
| JSON module         | [https://docs.python.org/3/library/json.html](https://docs.python.org/3/library/json.html)                                                        |
| os module           | [https://docs.python.org/3/library/os.html](https://docs.python.org/3/library/os.html)                                                            |
| datetime            | [https://docs.python.org/3/library/datetime.html](https://docs.python.org/3/library/datetime.html)                                                |
| Fetch API           | [https://developer.mozilla.org/en-US/docs/Web/API/Fetch\_API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)                         |
| HTML form elements  | [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)                |
| CSS styling         | [https://developer.mozilla.org/en-US/docs/Learn/CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)                                          |

&#x20;

&#x20;

&#x20;

&#x20;

&#x20;

&#x20;

&#x20;

&#x20;

