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

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
• CSS Styling Basics – MDN

Quick Links for reference:

Flask	https://flask.palletsprojects.com/
Flask-CORS	https://flask-cors.readthedocs.io/en/latest/
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
JSON module	https://docs.python.org/3/library/json.html
os module	https://docs.python.org/3/library/os.html
datetime	https://docs.python.org/3/library/datetime.html
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
CSS styling	https://developer.mozilla.org/en-US/docs/Learn/CSS