For your second project, you will be introduced to some basics of website functionality using JavaScript. You will also learn how to use MathJax to output mathematical expressions in the browser. A project like this is useful as you are learning how to create a website that has a service. Once deployed, anyone can use your calculator to make any useful calcation. You will build upon this project to create a website that allows users to make useful calculations.
Click the link below to obtain the final product Final Project 2 Subproject 1 Product
We will start from the basics, first in order to create an html document, you need the <html> tag, followed by the <head> and <body> tags. Your code should look like the following:
<html>
<head>
</head>
<body>
</body>
</html>Once you have that down, you will create a title for your browser, and a title for your page, your code and output should look like the following:
<html>
<head>
<title>SI Unit Table</title>
</head>
<body>
<h1>SI Unit Table</h1>
</body>
</html>You can then include a paragraph element as a description of the table you will be creating. That should look like the following:
<html>
<head>
<title>SI Unit Table</title>
</head>
<body>
<h1>SI Unit Table</h1>
<p>This is a table of the orders of magnitude that can be used for SI units of measurement.</p>
</body>
</html>Once you have these basics down, you will now create a table with the prefixes, symbol, and order of magnitude. Your code should look like the following:
<html>
<head>
<title>SI Unit Table</title>
</head>
<body>
<h1>SI Unit Table</h1>
<p>This is a table of the orders of magnitude that can be used for SI units of measurement.</p>
<div class="container">
<table>
<tr>
<th>Prefix</th>
<th>Symbol</th>
<th>Factor</th>
</tr>
<tr>
<td>kilo</td>
<td>k</td>
<td>\[ 10^{3} \]</td>
</tr>
<tr>
<td>hecto</td>
<td>h</td>
<td>\[ 10^{2} \]</td>
</tr>
<tr>
<td>deca</td>
<td>da</td>
<td>\[ 10^{1} \]</td>
</tr>
<tr>
<td>base</td>
<td></td>
<td>\[ 10^{0} \]</td>
</tr>
<tr>
<td>deci</td>
<td>d</td>
<td>\[ 10^{-1} \]</td>
</tr>
<tr>
<td>centi</td>
<td>c</td>
<td>\[ 10^{-2} \]</td>
</tr>
<tr>
<td>milli</td>
<td>m</td>
<td>\[ 10^{-3} \]</td>
</tr>
</table>
</div>
</body>
</html>This is the basic idea for creating a table in HTML.
To style it properly to be responsive, and to display the math terms correctly, you need to write or include some code in the <head> tag. Below is how your program should look like:
To style the math terms correctly, you need to use MathJax. MathJax is a "JavaScript display engine for mathematics that works in all browsers." It is a script tag that you inclide in the head of your website document that allows for the proper rendering of math terms and expressions in all browsers. Below is how the script tag should look like in the <head> tag.
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<title>Online Resume</title>
</head>
<body>
...
</body>
</html>Once the script tag is included, you can now proceed to styling your HTML page using the <style> tag. Your code should look like the following:
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<title>Online Resume</title>
<style>
body {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
p {
width: 70%;
margin: auto;
}
.container {
width: 50%;
margin: auto;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: rgb(216, 216, 216);
}
</style>
</head>
<body>
...
</body>
</html>If you are confused about why these things are done this way, take a look at the learning page to understand the formats used for programming the content and styling the document.