Organize the below code into files such as .js, .css, or .html as appropriate._______________________________________________________<!-- About Page --><div data-role="page" id="pageAbout"><div data-role="header"><a href="#pageHome" data-role="button" data-icon="bars" data-iconpos="left">Home</a><h1>Info</h1></div><div data-role="content">[Help and/or Website explanation/information should go there]</div></div>_____________________________________________________<!-- User Information Page/Form 1 and 2 --><div data-role="page" id="pageUserInfo" ><div data-role="header"><a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left"data-inline="true">Menu</a><a href="#pageAbout" data-role="true">Info</a><h1>User Information</h1><div data-role="content"><form id="frmUserForm" action=""><div data-role="fieldcontain"><label for="txtFirstName">First Name: </label><input type="text" placeholder="First Name" name="txtFirstName" data-mini="false"id="txtLastName" value="" required></div><div data-role="fieldcontain"><label for="datBirthdate">Birthdate: </label><input type="date" name="datBirthdate" data-mini="false"id="datBirthdate" value="" required></div><div data-role="fieldcontain"><label for="txtHealthCardNumber">Health Card Number: </label><input type="text" placeholder="Health Card Number"name="txthealthCardNumber" data-mini="false" id="txtHealthCardNumber"value="" required></div><div data-role="fieldcontain"><label for="slcCancerType" class="select"> Cancer Type: </label><select name="slcCancertype" id="slcCancerType" data-mini="false"data-native-menu="false" required><option>Select Cancer Type</option><option value="Papillary">Papillary</option><option value="Follicular">Follicular</option><option value="Medullary">Medullary</option><option value="Anaplastic">Anaplastic</option></select></div><div data-role="fieldcontain"><label for="slcCancerStage" class="select">Cancer Stage: </label><select name="slcCancerStage" id="slcCancerStage" data-mini="false"data-native-menu="false" required><option>Select Cancer Stage</option><option value="StageOne">Stage I</option><option value="StageTwo">Stage II</option><option value="StageThree">Stage III</option><option value="StageFour">Stage IV</option></select></div><div data-role="fieldcontain"><label for="slcTSHRange" class="select">Target TSH Range: </label><select name="slcTSHRange" id="slcTSHRange" data-mini="false" data-native-menu="false"required><option>Select TSh Range </option><option value="StageA">A: 0.01-0.1 mIU/L</option><option value="StageB">B: 0.1-0.5 mIU/L</option><option value="StageC">C: 0.35-2.0 mIU/L</option></select></div><input type="submit" id="btnUserUpdate" data-icon="check" data-iconpos="left"value="Update" data-inline="true"></form></div></div>_______________________________________________________<!-- Menu page --><div data-role="page" id="pageMenu"><div data-role="header"><a href="#pageMenu" data-role="button" data-icon="bars" dataiconpos="left" data-inline="true">Menu</a><a href="#pageAbout" data-role="button" data-icon="info"data-iconpos="right" data-inline="true">Info</a><h1>Thyroid Cancer Aide</h1></div><div data-role="content"><div data-role="controlgroup"><a href="#pageUserInfo" data-role="button">User Info</a><a href="#pageRecords" data-role="button">Records</a><a href="#pageGraph" data-role="button">Graph</a><a href="#pageAdvice" data-role="button">Suggestions</a></div></div></div>___________________________________________________<!--Graph Page --><div data-role="page" id="pageGraph" class="test"><div data-role="header"><a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left"data-inline="true">Menu</a><a href="#pageAbout" data-role="button" data-icon="info"data-iconpos="right" data-inline="true">Info</a><h1>Analyze</h1></div><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">TSH vs Date</h3></div><div class="panel-body"><canvas id="GraphCanvas" width="500" height="500"style="border:1px solid #000000;"></canvas></div></div></div><!---Advice Page --><div data-role="page" id="pageAdvice"><div data-role="header"><a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left"data-inline="true">Menu</a><a href="#pageAbout" data-role="button" data-icon="info"data-iconpos="right" data-inline="true">Info</a><h1>Suggestions</h1></div><div data-role="content"><canvas id="AdviceCanvas" width="550" height="550"style="border:1px solid #000000;"></canvas></div></div>
Organize the below code into files such as .js, .css, or .html as appropriate.
_______________________________________________________
<!-- About Page -->
<div data-role="page" id="pageAbout">
<div data-role="header">
<a href="#pageHome" data-role="button" data-icon="bars" data-iconpos="left">Home</a>
<h1>Info</h1>
</div>
<div data-role="content">
[Help and/or Website explanation/information should go there]
</div>
</div>
_____________________________________________________
<!-- User Information Page/Form 1 and 2 -->
<div data-role="page" id="pageUserInfo" >
<div data-role="header">
<a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left"
data-inline="true">Menu</a>
<a href="#pageAbout" data-role="true">Info</a>
<h1>User Information</h1>
<div data-role="content">
<form id="frmUserForm" action="">
<div data-role="fieldcontain">
<label for="txtFirstName">First Name: </label>
<input type="text" placeholder="First Name" name="txtFirstName" data-mini="false"
id="txtLastName" value="" required>
</div>
<div data-role="fieldcontain">
<label for="datBirthdate">Birthdate: </label>
<input type="date" name="datBirthdate" data-mini="false"
id="datBirthdate" value="" required>
</div>
<div data-role="fieldcontain">
<label for="txtHealthCardNumber">Health Card Number: </label>
<input type="text" placeholder="Health Card Number"
name="txthealthCardNumber" data-mini="false" id="txtHealthCardNumber"
value="" required>
</div>
<div data-role="fieldcontain">
<label for="slcCancerType" class="select"> Cancer Type: </label>
<select name="slcCancertype" id="slcCancerType" data-mini="false"
data-native-menu="false" required>
<option>Select Cancer Type</option>
<option value="Papillary">Papillary</option>
<option value="Follicular">Follicular</option>
<option value="Medullary">Medullary</option>
<option value="Anaplastic">Anaplastic</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slcCancerStage" class="select">Cancer Stage: </label>
<select name="slcCancerStage" id="slcCancerStage" data-mini="false"
data-native-menu="false" required>
<option>Select Cancer Stage</option>
<option value="StageOne">Stage I</option>
<option value="StageTwo">Stage II</option>
<option value="StageThree">Stage III</option>
<option value="StageFour">Stage IV</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slcTSHRange" class="select">Target TSH Range: </label>
<select name="slcTSHRange" id="slcTSHRange" data-mini="false" data-native-menu="false"
required>
<option>Select TSh Range </option>
<option value="StageA">A: 0.01-0.1 mIU/L</option>
<option value="StageB">B: 0.1-0.5 mIU/L</option>
<option value="StageC">C: 0.35-2.0 mIU/L</option>
</select>
</div>
<input type="submit" id="btnUserUpdate" data-icon="check" data-iconpos="left"
value="Update" data-inline="true">
</form>
</div>
</div>
_______________________________________________________
<!-- Menu page -->
<div data-role="page" id="pageMenu">
<div data-role="header">
<a href="#pageMenu" data-role="button" data-icon="bars" dataiconpos="left" data-inline="true">Menu</a>
<a href="#pageAbout" data-role="button" data-icon="info"
data-iconpos="right" data-inline="true">Info</a>
<h1>Thyroid Cancer Aide</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="#pageUserInfo" data-role="button">User Info</a>
<a href="#pageRecords" data-role="button">Records</a>
<a href="#pageGraph" data-role="button">Graph</a>
<a href="#pageAdvice" data-role="button">Suggestions</a>
</div>
</div>
</div>
___________________________________________________
<!--Graph Page -->
<div data-role="page" id="pageGraph" class="test">
<div data-role="header">
<a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left"
data-inline="true">Menu</a>
<a href="#pageAbout" data-role="button" data-icon="info"
data-iconpos="right" data-inline="true">Info</a>
<h1>Analyze</h1>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">TSH vs Date</h3>
</div>
<div class="panel-body">
<canvas id="GraphCanvas" width="500" height="500"
style="border:1px solid #000000;">
</canvas>
</div>
</div>
</div>
<!---Advice Page -->
<div data-role="page" id="pageAdvice">
<div data-role="header">
<a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left"
data-inline="true">Menu</a>
<a href="#pageAbout" data-role="button" data-icon="info"
data-iconpos="right" data-inline="true">Info</a>
<h1>Suggestions</h1>
</div>
<div data-role="content">
<canvas id="AdviceCanvas" width="550" height="550"
style="border:1px solid #000000;">
</canvas>
</div>
</div>
Trending now
This is a popular solution!
Step by step
Solved in 4 steps