<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Plumbing Material List</title>

        <meta name="description" content="A plumbing material list app to keep track of your plumbing supplies.">

        <meta name="keywords" content="plumbing, material list, supplies">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                

                // This will run when the DOM is ready.

                document.addEventListener("DOMContentLoaded", function() {

                    // Get the main container element

                    const mainContainer = document.getElementById('main-container');

                    

                    // Create the header

                    const header = document.createElement('h1');

                    header.textContent = 'Plumbing Material List';

                    header.classList.add('text-center');

                    mainContainer.appendChild(header);

                    

                    // Create the form

                    const form = document.createElement('form');

                    form.classList.add('mb-3');

                    

                    // Create the input field for adding materials

                    const materialInput = document.createElement('input');

                    materialInput.type = 'text';

                    materialInput.placeholder = 'Enter material';

                    materialInput.classList.add('form-control');

                    materialInput.id = 'material-input';

                    

                    // Create the button for adding materials

                    const addButton = document.createElement('button');

                    addButton.type = 'submit';

                    addButton.textContent = 'Add Material';

                    addButton.classList.add('btn', 'btn-primary', 'mx-2');

                    addButton.addEventListener('click', function(event) {

                        event.preventDefault();

                        const materialInput = document.getElementById('material-input');

                        const materialList = document.getElementById('material-list');

                        if (materialInput.value.trim() !== '') {

                            const materialItem = document.createElement('li');

                            materialItem.textContent = materialInput.value;

                            materialList.appendChild(materialItem);

                            materialInput.value = '';

                            materialInput.focus();

                        }

                    });

                    

                    form.appendChild(materialInput);

                    form.appendChild(addButton);

                    mainContainer.appendChild(form);

                    

                    // Create the material list

                    const materialList = document.createElement('ul');

                    materialList.id = 'material-list';

                    mainContainer.appendChild(materialList);

                });



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                background-color: #f8f9fa;

                font-family: 'Arial', sans-serif;

            }

            

            #main-container {

                max-width: 400px;

                margin: 0 auto;

                padding: 20px;

                background-color: #fff;

                border-radius: 5px;

                box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

            }

            

            h1 {

                color: #333;

                margin-bottom: 20px;

            }

            

            form {

                display: flex;

                align-items: center;

            }

            

            .form-control {

                flex: 1;

                margin-right: 10px;

            }

            

            .btn-primary {

                background-color: #007bff;

                border-color: #007bff;

            }

            

            .btn-primary:hover {

                background-color: #0069d9;

                border-color: #0062cc;

            }

            

            ul {

                list-style-type: none;

                padding: 0;

            }

            

            li {

                padding: 5px 0;

                border-bottom: 1px solid #eee;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <!-- App HTML Goes Here -->

        </div>

    </body>

</html>