Midterm Machine Project #3 Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Machine Problem 1</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        body {
            margin: 10px;
        }
        table {
            width: 150px
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="col-sm-7">
            <div class="card text-center">
            <div class="card-header">
                Welcome to Flight Reservation System
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div>Smoking Section</div>
                        <button type="button" class="btn btn-outline-primary">Seat #1</button>
                        <button type="button" class="btn btn-outline-primary">Seat #2</button>
                        <button type="button" class="btn btn-outline-primary">Seat #3</button>
                        <button type="button" class="btn btn-outline-primary">Seat #4</button>
                        <button type="button" class="btn btn-outline-primary">Seat #5</button>
                    </div>
                    <div class="col-sm-6">
                        <div>Non-Smoking Section</div>
                        <button type="button" class="btn btn-outline-success">Seat #6</button>
                        <button type="button" class="btn btn-outline-success">Seat #7</button>
                        <button type="button" class="btn btn-outline-success">Seat #8</button>
                        <button type="button" class="btn btn-outline-success">Seat #9</button>
                        <button type="button" class="btn btn-outline-success">Seat #10</button>
                    </div>
                </div>
            </div>
            <br/><br/>

            <div>Please click button to reserve seat</div>
            <br/>
              <div class="col-sm-12">
                <button id="smoking" type="button" class="btn btn-primary" onclick="reserveSeat(event)">Smoking Section</button>
                <button id="non-smoking"type="button" class="btn btn-success" onclick="reserveSeat(event)">Non-Smoking Section</button>
                <br/><br/>
              </div>

            </div>
        </div>
        <script type="text/javascript">
            let seats = [0,0,0,0,0,0,0,0,0,0,0]

            function reserveSeat(event) {
                let seatno, section, response
                let location = ["","Smoking","Non-smoking"]
                if (event.target.id === "smoking") {
                    section = 1
                }
                else {
                    section = 2
                }
                seatno = findAvailableSeat(seats, section)
                if (seatno != null) {
                    seats[seatno] = 1
                    document.getElementsByTagName("Button")[seatno-1].setAttribute("class", section == 1 ? "btn btn-primary" : "btn btn-success")
                    alert(`Boarding Pass\nSection : ${location[section]}\nSeat No : ${seatno}`)
                }
                else {
                    section = section == 1 ? 2 : 1
                    seatno = findAvailableSeat(seats, section )
                    if (seatno != null) {
                        response = confirm(`All Seats are taken in ${location[(section == 1 ? 2 : 1)]} section.\nDo you want to reserve to ${location[section]} section?`)
                        if (response) {
                            seats[seatno] = 1
                            document.getElementsByTagName("Button")[seatno-1].setAttribute("class", section == 1 ? "btn btn-primary" : "btn btn-success")
                            alert(`Boarding Pass\nSection : ${location[section]}\nSeat No : ${seatno}`)
                        }
                        else {
                            alert("All seats are taken. Next flight leaves in 3 hours.")
                        }
                    }
                    else {
                        alert("All seats are taken. Next flight leaves in 3 hours.")
                    }

                }
            }

            function findAvailableSeat(seats, section) {
                let seatno
                switch (section) {
                    case 1:
                       seatno = seats.slice(1,6).findIndex(element => element == 0)
                       break;
                    case 2:
                       seatno = seats.slice(6,11).findIndex(element => element == 0)
                       break;
                }
                seatno = (seatno != -1 ? seatno + (section == 1 ? 1 : 6) : null)
                return seatno;
            }

            function checkValid(text) {
               return !(text === null || text === "")
            }

            function calculate() {
               let text = ""
               let count = []
               text = document.getElementById("text").value
                   if (!checkValid(text)) {
                   alert("Error! Text should not be emptied.")
                   return false
                }
                count = countWordLengthOccurences(text)
                createWordLengthOccurencesTable(count)
            }

            function countWordLengthOccurences(text) {
               let words, maxlength
               let count = []
                words = text.split(" ")
                maxlength = words.map(item => item.length).reduce((maxlength, current) => current > maxlength ? current    : maxlength)
                count = new Array(maxlength + 1).fill(0)

                words.forEach((item, index, array) => {
                count[item.length]++
                });

                return count
            }

            function clearFields() {
                document.getElementById("text").value = ""
                if (document.getElementById("wordLengthOccurencesTable") != null) {
                  document.getElementById("wordLengthOccurencesTable").remove()
                }
            }

            function createWordLengthOccurencesTable(count) {
              let table, tr, th, td
              table = document.createElement("TABLE");
              table.setAttribute("id", "wordLengthOccurencesTable")
              table.setAttribute("class", "table table-bordered")
              tr = document.createElement("TR")
              table.appendChild(tr)

              th = document.createElement("TH")
              tr.appendChild(th)
              text = document.createTextNode("Word Length")
              th.appendChild(text)

              th = document.createElement("TH")
              tr.appendChild(th)
              text = document.createTextNode("Occurrences")
              th.appendChild(text)

              count.forEach((item, index, array) => {
                  if (index != 0) {
                  tr = document.createElement("TR")
                  table.appendChild(tr)

                   td = document.createElement("TD")
                  tr.appendChild(td)
                  text = document.createTextNode(`${index}`)
                  td.appendChild(text)

                  td = document.createElement("TD")
                  tr.appendChild(td)
                  text = document.createTextNode(`${item}`)
                  td.appendChild(text)

                   }
              });

              if (document.getElementById("wordLengthOccurencesTable") != null) {
                  document.getElementById("wordLengthOccurencesTable").remove()
              }

              document.getElementById("wordLengthOccurencesTableContainer").appendChild(table)

            }

        </script>

    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Search This Blog

Web Dev 3 [CS109C] Solutions

Midterm Machine Project #3 Solution

Comments

Post a Comment

Popular posts from this blog

Lab Activity #8 solution

Midterm Machine Project #2 Solution