How to make this all in javascript?

https://www.youtube.com/watch?v=eZRbaBLyubk

pls watch this video this video is what i envision my jss result to be

pls help me, i desparately need it hopefully by this week(25november)

thank you very much.

this is what i got so far

<script>
    document.writeln("<header position= 'middle'>"+" Expense Planner"+" </header>");
    document.writeln("<br>");
    document.writeln("<p>"+"This application will help you track and manage expenses and income"+ "</p>");
    document.writeln("<br>");
    document.writeln("<p>"+" Example categories: Clothes, Food, Rent, Travel, Entertainment, Salary"+"</p>");
    document.write("<table border='1' bordercolor='purple'>");
    document.write("<tr bgcolor='lightblue'>"+"<td>"+"No."+"</td>"+"<td>"+"Date"+"</td>"+"<td>"+"Category"+"</td>"+"<td>"+"Amount"+"</td>"+"<tr>"+"</table>");

</script>