Skip to content

Frontend

Jump to bottom
huygensCortex edited this page Nov 27, 2023 · 6 revisions

Calorie Burner Frontend Documentation

Welcome to the frontend documentation for the Calorie Burner project! 🏋️‍♂️🔥 In this guide, we'll dive into the structure of the project, detailing the usage of HTML, CSS, and JavaScript to create a sleek and functional user interface.

Project Structure

The project structure is as follows:

calorieApp/
|
.
.
|-- Static/
|   |-- Images/
|   |-- Scripts/
|       |-- script.js
|       |-- tests.js
|   |-- styles.css
|-- Templates/
.
.
|
  • Static: This folder contains subdirectories for images and scripts, as well as a global stylesheet.
    • Images: All the project images are stored here for easy organization.
    • Scripts:
      • script.js: The main JavaScript file responsible for the frontend logic.
      • tests.js: A set of tests written using console.assert() to ensure UI functionality. We believe in the power of fun and informative testing!
  • styles.css: The project's global stylesheet, ensuring a consistent and stylish look across all pages.
  • Templates: This folder holds HTML templates for different pages. Each template is rendered dynamically using Flask.

script.js

The script.js file is the heart of our frontend, orchestrating interactions and ensuring a seamless user experience. Here's a sneak peek into what it includes:

  • Event Handling: From button clicks to form submissions, script.js is on top of it. We believe in making our UI responsive and interactive!
  • Dynamic Content: Utilizing JavaScript to dynamically update the content of the page without requiring a full reload. This enhances the user experience by providing a smooth, single-page application feel.

tests.js

Testing doesn't have to be dull! We've infused our testing process with a bit of flair using console.assert(). Here's why:

  • Fun Testing: We firmly believe that testing should be enjoyable. console.assert() allows us to add a touch of humor to our tests, making the debugging process more engaging.
  • UI Functionality: Our tests in tests.js are designed to ensure that the UI components and interactions work as intended. From button functionality to data validation, we've got it covered.

Remember, a project without testing is like a workout without sweating—ineffective! So, embrace the testing fun with tests.js.

Feel free to explore, contribute, and keep burning those calories with our awesome frontend! 💪🔥

Clone this wiki locally