15 November 2021

Table Building

Here is the starting appearance.

starting appearance

The user will enter numbers into the three input boxes.
The user will hit the build! button and a trig table will appear that with the specified start, stop and step.
The sine and cosine entries will be formatted with four decimals beyon the decimal point.
Trig ratios will be in degrees. You will write conversion functions for these.
If the user and enters new numbers, the old table rows are discarded prior to inserting the new ones. Suggestion: write a formatting function formatFloat(n) that accepts a number and which formats it into a form with n digits beyond the decimal.
You must implement and call the functions that are placed in the javascript file.
- sinD computes sine in degrees.
- cosD computes sine in degrees.
- buildRow builds one row of the table.
To make things simple, you can assume the angles will be whole numbers. if start > stop, don't print any rows (If you loop correctly, this will happen automatically).

You can add IDs and classes where you need them. You can also put your own colors into the CSS. You can add functions to the ones given, but you must implement all of the given functions. They will go a long way to helping you do this little project.

Starter HTML


<!doctype html>
<!--Author: Morrison-->

<html lang="en">
<head>
<title>tableBuilder</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="tableBuilder.css"/>
<script src="tableBuilder.js">
</script>
</head>
<body>
<h1>Trig Table Builder</h1>
<p class="display">
    start: <input type="text"></input>
    stop: <input type="text"></input>
    step: <input type="text"></input>
</p>
<p class="display"><button>build!</button></p>

<table style="display:none">
    <thead>
        <th>&theta;</th><th>sin(&theta;)</th><th>cos(&theta;)</th></tr>
    </thead>
    <tbody>
    </tbody>
</table>

</body>
</html>

Starter CSS


/*Author: Morrison*/
h1, h2, .display
{
    text-align:center;
}
table, th, td
{
    border: solid 1px black;
    border-collapse:collapse;
}
table
{
    margin-left:auto;
    margin-right:auto;
}
th, td
{
    padding:.5em;
}
th
{
    background-color:#FFFF00;
}

Starter JS


/*Author: Morrison*/
window.addEventListener("load", main);
function main()
{
}
function sinD(x)
{
}
function cosD(x)
{
}
function buildRow(x)
{
}

Here is something you might like. It checks if a string is a valid integer. It can be used as a predicte in conditional logic or loops. What's inside? A possible mystery for youall to plumb!


function isValidInteger(s)
{
    return /^[+\-]?\d+$/.test(s)
}


Jack	Cindy
Beatrice	Mandy	Avery
Anushtree	Isaac	Key
Anaeya	Charles	Meghna
Joshua	Lynn
Zoha	Veronica	Aish
Clare	Jahnu