Need help with a cost run sheet program

Code Feedback
1

https://codepen.io/timmyg2847/pen/pojydPP
So for this pen i want to make it so that the form data concates and then gives an overall total cost section and then a sub section for other individual sections which are already created. Later on if i can i want to put this data into a bar graph which i have started but dont quite understand how to do yet. https://codepen.io/timmyg2847/pen/NWGNyWE

2

Hello there.

Have you considered using D3.js for the graphical side?

3

my problem is with how to get the form data to the graph or to even just project itself later . ( the thing ur talking about is still a problem but i prefer to focus on one problem at a time)

4

Ah, right. Do you want to, specifically, have the form data be sent from one CodePen to another?

Is your end goal to have this entirely hosted on CodePen?

5

Ye with the second pen I showed I want it to show the data on the original pen and have it as one if possible I would like it offline as it is for my mum as a business application

6

This is very difficult to help with, without knowing a few User Stories.

  1. Is this customer based? Or, is there only 1 user who is looking for a method of neatly doing some book-keeping?
  2. Are multiple sets of data input at the same time? Or, does the user want to be redirected to a new page, upon completion of a single input?
  3. If this is offline, where does the user want to store the data?
  4. Any security requests? Or, as simple and easy as possible?

There are endless ways of creating, working with, moving, visualising, and storing data. I suggest doing a write-up of how your mum would like the application to work.

7

1 user

Just cost with a category

Idk much about servers and stuff if offline plz

Um I don’t want others to add to it so basic but I’m thinking of having a phrase only I know and having it a required field to submit

8

There was a misunderstanding:
2) You can have the application have 2 pages: Page 1 contains the form, Page 2 contains the visualisation of the data.

  • This gives you two options.
  1. After hitting Submit on the form, you are redirected to the 2nd page.
  2. After hitting Submit on the form, your form is cleared, and you are allowed to enter more data. If you want to go to the 2nd page, you need to click on another button.

/3) I was asking the user wants the data stored in simple .json file, or in a CSV, or in Excel. All possible.
4) You can absolutely do this, but a simple login page makes more sense, in the long run.

Now, if this is for offline use, where do you expect the content to be served? That is, the user could:

  1. Ensure all files stay in the correct place, and open a .html file using Chrome or similar.
  2. User opens VS-Code (or similar) and creates a local server to use and view the files.
  3. You create a desktop application using Electronjs (or similar) to allow for easy technical-less use.
9

well my user isnt always adding stuff and sometimes will just want to check how much they have spent in each category so i might add a seperate link below
or what if i create the form and when the data is entered and submitted it will then show a pop up of teh data with a link and then if my user wants to look at it seperateley they have a different link with more data