What is the equivalent of generating and saving to a “new file” on a web app, using forms? (Ideally using just HTML, CSS, and JavaScript)

Question

I am trying to create a program/web app that I would use regularly as a way to learn how to code.

I am trying to make just a web-app version of this with HTML/CSS/JavaScript if possible and have searched for ways to do this, but I must not know the correct terminology, as everything I find either involves at least 2 other programming languages or seems far more complicated than what I want to accomplish.

I want to be able to type text into various labeled input boxes, hit "submit" and have that text be copied and minimally formatted onto either another web page or a txt file that I can download, which also gives me the word count of that text.

Basically, if I have an input box Labeled "Sentence One" and I type in "Hello World, this is a sentence.", I want to then be able to hit some sort of "Submit" button that will take that text and the information about the label, and create a text file, html page, google sheet, etc--just SOMETHING that can store that text, format it, and be available for export/download at a given time.

The above would ideally result in a page or file that shows "Sentence One: Hello World, this is a sentence." and would show "Word Count = 6" somewhere near the bottom of the page.

The word count should be simple enough, but the whole opening/creating a new page/file/whatever, is the part I am stuck at.

I would really even appreciate just the proper terminology or links to articles about what I am trying to do so I can understand the process, as currently it seems far more complex than it should.

Answer 1

As far as I am aware, you cannot do that on the frontend with vanilla javascript.

You would have to use a backend server. I know that nodeJS can interact with the file system, so maybe you could do that.

Answer 2

There are many options for you to make that web app. First of all you would need both front and back end technologies.

1. on front end simple vanilla js is enough. You can make input Form with a submit button and add event listener to it which will send request to the back end server.
2. For the back end you can use nodejs which is same as Javascript but instead of browser it can be ran on your machine like normal programming languages. Then there is file system module (fs) which is core module of node, meaning that it's available to you once you install node. With this fs module you can write data to text file and read from it. This way you can both save and display that saved data. Also for nodejs I would recommend using express js which is lightweight node framework. This way coding on nodejs will be easier. PS: I would habe written some code examples but as it's for learning you can search it up yourself (best way to learn it). I provided as many keywords as you would need for that. If you have any questions or get stuck somewhere just ask. Hope it helped.