We Keep Coding

html page as a widget

Let's say I have a widget that is like a simple interest calculator it is in a file index.html and it has a javascript part (with logic and style). The code uses javascript, html, bootstrap, ajax and chartjs.
How do I make it into a one line widget that i can copy and paste into my wordpress site ?
something like inside a div. So that I can copy a div and a link to script file and thus put my calculator on a page in multiple sites.
elements to embed is in a html file named-index.html
the html file is also on a site like someexamplesite.com/pages.html
logic and style in a js file: simpleinterest.js

You could use an iframe to embed your calculator on other sites like this:
<iframe src="https://someexamplesite.com/pages.html"></iframe>

Insert html pages into wordpress

I have an html site with a page of info for each county in the US. I want to convert this into a new wordpress site. I can do this one by one but my issue comes when I have mass changes to affiliate code or common text. I would have to got to each page and manually change it. but with over 3000 pages it would be way to time consuming. I dont want to use Iframes but would like to know if there is a way to call the html pages into the wordpress page that makes sense seo wise.
I am open to creating a page for each county or have one page with text or buttons on it with each county listed and when clicked will insert the info below. I know alot about static html coding but am new to php.

If you dont want Iframes, I think there only remain two options. I don't know if they will work in WordPress though.
1. PHP Include
With the very simple PHP include() statement, you can include the old html files in your new website. If you have a HTML-file for example, name your file yourname.php and add this in the position you want your old page to appear:
<?php include(path_to_old_page/name.html); ?>
This will include the full old page, but the file needs to be on the same server.
2. AJAX
With JavaScript you can perform XHTTP-requests to load files from the server. This is easiest when using jQuery. Here you can use the $(selector).load(path_to_old_page/name.html) statement. This will load the file in the HTML elements to which the selector applies.
(The selector works the same as CSS selectors, see the w3schools page for more)
This will also include the full old page, when it is on the same server

You can have your static pages in WordPress as well. Like if you want to create a new county named "example" you can create new WordPress page named "example" by entering title " example" .... now come to content. Just copy page content (only "example" county related html code from your static website) and place that code inside newly created WordPress "example" page. Make sure you add this html content inside 'text' tab in editor. Your page will be created with all your existing data ... now you can view this page and can use this page's URL where ever you want.

Constructing full HTML page

How can one load a HTML file and run javascript embedded in it to construct full HTML page programatically in the same way as done by browsers?
Edit 1 - I have an application where I am trying to read some data embedded in an html page of a remote website. However, after fetching this page from remote website, I don't see that data because that data is actually loaded by a javascript embedded in this HTML page after browser loads initial markup. So, I need a way in my application to trigger javascript embedded in the HTML page in order to construct full HTML page.

If you mean that you have an HTML file stored on your computer, the only way that you can compile it is with your browser. Just enter the absolute file path in your browser's url input. If I misunderstood your question, leave a comment and I'll correct my answer.

Question needs more details, but depending on what you want:
If you want to dynamically load different HTML documents, see iFrame
If you want to insert elements to an empty html document:
First, make a blank html document
<!DOCTYPE html>
<script src='main.js'></script>
</html>
Then in main.js do:
var html = document.querySelector('html');
// Append remaining page elements to the html element here.
// (the `head` and `body` elements may have been automatically created)
// You will need createElement and appendChild
createElement
appendChild

How do I modularize HTML and JavaScript widgets?

I have a menu widget that I am trying to include on multiple pages. I have tried putting them in one php file and using php include. But the script part is being inserted right into the middle of the HTML and it comes before jQuery (at the bottom of the page) so it doesn't work.
How do I put the script part of the widget into the proper place (at the bottom of the page) while at the same time keeping the HTML and script together (in a file)?

javascript will not load unless page is refreshed

I am working on a website that was started off by someone else. That person built the whole thing in one 1000-line html file, and links to different 'pages' just reference other sections in the main html file. So my task is to break the page apart into seperate html pages. Unfortunately, now the seperate pages do not load the javascript unless the page is refreshed.
Is there a standard way to fix this problem without forcing the user to manually refresh the page?

If you break that one big page into several smaller pages, make sure you include the JavaScript (and CSS) in the new pages. The most efficient way to do this is to have the JavaScript in an external JavaScript file, and bring that file into the new pages by putting the script tag inside the new pages' head tags like so:
<head>
<script src="path/to/javascript/app_name.js"></script>
</head>
When the user clicks on a hyperlink to see one of the new pages, when the browser receives the response from the server, it will parse the response and execute the JavaScript.

If I understand your problem correctly, I would wrap whatever "detailsScreen.js" does into a function and call it after you changed the page content.