/home/caleb/ASDV-WebDev/Semester 3/Exams-Quizzes/ProgrammingExam1_CalebFontenot/src/main/webapp/page1.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="jakarta.faces.html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <style>
            body {
                text-align: center
            }
        </style>
    </h:head>
    <h:body>
        <h:form>
            <h2 style="display: inline;">Miles to kilometers label 1: </h2>
            <h:outputText id="output1" style="display: inline;" value="#{problem1Bean.output}"/>
            <br/>
            <h2 style="display: inline;">Miles to kilometers label 2: </h2>
            <h:outputText id="output2" style="display: inline;" value="#{problem1Bean.output}"/>
            <br/>

            <p:inputText value="#{problem1Bean.input}" >
                <p:ajax event="keyup" listener="#{problem1Bean.convert}" update="output2"/>
            </p:inputText>  
            mi<br/>
            <p:commandButton value="Convert Miles to Killometers" action="#{problem1Bean.convert}" update="output1 output2"/>
        </h:form>
    </h:body>
</html>