Midterm Machine Project #2 Solution

<!--------------------------------------------------------------------------------------------------------
  Machine Problem 2
    Project Name: None
    Project Files: WordLength.html, Gymnastic.js
    Project Description: Find the word length occurrences  in a given text.
    Programmer: Jun Y. Ercia
    Language: JavaScript
    Date Created: 7/26/2019
    Date Modified: 7/26/2019
---------------------------------------------------------------------------------------------------------->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Machine Problem 3</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-12">   
            <div class="card text-center">
              <div class="card-header">
                Word Length Occurences
              </div>
              <div class="card-body">
                <form>
                  <div class="form-group row">
                    <label for="text" class="col-sm-1 col-form-label">Text</label>
                    <div class="col-sm-11">
                      <input type="text" class="form-control" id="text" >
                    </div>
                  </div>
                  <div class="form-group row">
                    <div class="col-sm-12">
                       <button type="button" class="btn btn-primary" onclick="calculate()">Calculate</button>
                       <button type="button" class="btn btn-danger" onclick="clearFields()">Clear</button>
                    </div>
                  </div>
                 
                </form>
              </div>
              <div class="card-footer text-muted">
                <div id="wordLengthOccurencesTableContainer"></div>
              </div>
            </div>
        </div>
        <script type="text/javascript">

              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 = text.split(" ").reduce((maxlength, current) => current.length > maxlength ? current.length    : maxlength    ,0)
               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>
      
    </div>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Lab Activity #8 solution

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Lab Activity 8</title> </head> <body>     <script type="text/javascript">         document.write(`Task 1 <br/>`);         document.write(`--------------------------------------------------------------------<br/>`)             class CanOfCoke {                     constructor() {             this.closed = true             this.sips = 5           }           isOpen()  {                return !this.closed  ...
Read more

Midterm Machine Project #3 Solution

<!--------------------------------------------------------------------------------------------------------   Machine Problem 3     Project Name: None     Project Files: Airline.html     Project Description: Filght Reservation System     Programmer: Jun Y. Ercia     Language: JavaScript     Date Created: 7/26/2019     Date Modified: 7/26/2019 ----------------------------------------------------------------------------------------------------------> <!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 {            ...
Read more