PowerSchool Parent Portal Printable UnOfficial Transcripts :) Using some DATs

Project Description: Allow parents to print out their student's unofficial transcript from the parent portal. Included a forced "Unofficial" watermark that the browser is forced to print.

What I used: DATs, CSS, HTML and Javascript.

The Code

<!DOCTYPE html>

    opacity: 0.1;
        #printDiv:before {
    position: absolute;
    content: '';
    background:  url(location of the image you wish to use for the background) center center;
    opacity: .1;
     width: 100%;
    height: 100%;
    pointer-events: none;

<title>Unofficial Student Transcript</title>
<script language="javascript">
function formHandler(form){
 var URL = document.navigation.storecode.options[document.navigation.storecode.selectedIndex].value;
 window.location.href = URL;
<div id="printDiv">
     <div id="background">
  <p id="bg-text">Unofficial</p>
  <div class="print-but">  <button onclick="myFunction()">Print Unofficial Transcript</button></div>

<!-- title -->
<div style="background-color:white;color:black; width: 600px; float: left;">
    <p style="width: 45%; float: left; padding:20px 0 20px 30px; font-size: 1.5em;font-weight: 900;">
        Unofficial Transcript for: ~(studentname)<br>
DOB: ~(dob;dateformat=MMMM D, YYYY)<br>
Grade: ~(grade_level)<br>

<table border="0" cellspacing="0" cellpadding="4" align="center" width="100%">
<tr bgcolor="#f6f6f6">~[x:transcript]
<td class="bold">Year/Term</td>
<td class="bold">Grd Lvl</td>
<td class="bold">Course</td>
<td class="bold">Earned Credit</td>
<td class="bold">[storecode]</td>
<tr bgcolor="#fff">
<td align="center">~(grade_level)</td>
<td align="center">[totalearnedcredit]</td>
    <div style="margin-left: 620px; padding-left: 30px">
<img src="Locations of your schools logo" alt=" Logo" width="80"
         height="80" align="left" padding-right: 10px;>~(Schoolname)<br>
         I hard coded the schools street.<br>
         I hard coded the city, state and zip<br>
         I hard coded the phone number</div>


        <h2>Credited Hours</h2>

         09 Crs: ~(*credit_hours;09)<br>
         10 Crs: ~(*credit_hours;10)<br>
         11 Crs: ~(*credit_hours;11)<br>
         12 Crs: ~(*credit_hours;12)<br>
         Total Crs: ~(*credit_hours)<br>
    <h2>GPA Summary</h2>

    <br>Simple GPA: ~(*gpa method="Simple")<br>
    Weighted GPA: ~(*gpa method="Weighted")
~(*class_rank_out_of;gpa) <br>
In the top ~(*gpa.percent)%


function myFunction() {


The Output