settingsAccountsettings
Menusettings

Q: List Processing - console-based application with JavaScript and HTML

+3 votes

Design and implement a console-based application for list processing. It should enter a list of strings from the console and continuously execute commands (like add / remove / replace, invert) over the list.

Commands Description:

The first input line holds the initial list of strings:

  • space separated list of items

Print the list immediately after you read it (space separated).

The next lines hold one of the following commands (until the commands “end” is found):

  • append <string> – adds the specified string at the end of the list and prints the list (space separated).
  • prepend <string> – inserts the specified string at the start of the list and prints the list.
  • reverse – reorders the list items in reversed order (from its end to its start) and prints the list.
  • insert <index> <string> – inserts the specified string at the specified position in the list and prints the list after that.
    • Positions are indexed from 0 to list_size - 1.
    • In case of invalid index, print “Error: invalid index <index>”.
  • delete <index> – deletes the string at the specified position in the list and prints the list.
    • Positions are indexed from 0 to list_size - 1.
    • In case of invalid index, print “Error: invalid index <index>”.
  • roll left – rolls the list on the left and prints the list. The first list item comes last.
  • roll right – rolls the list on the right and prints the list. The last list item comes first.
  • sort – sorts the list in alphabetical order and prints the list.
  • count <string> – prints how many times the specified string occurs in the list (case sensitive). The command prints a single integer number as output.
  • end – stops the execution of commands. Print “Finished” as command output.

Each command produces one of the following outputs:

  • In case of success the command prints its expected output as described above.
  • In case of error (e.g. invalid index or command parameter) the commands prints “Error: <error message>”.
    • In case of invalid command name print “Error: invalid command”. Command names are case-sensitive.
    • In case of invalid number of parameters or incorrect format of the parameters print “Error: invalid command parameters”.

Examples:

Input

Output

alpha beta gamma

append delta

prepend 00

invalid command

insert 1 ins

insert -1 ins

insert 1

delete 3

delete invalid

delete 5

roll left

roll

roll right

just roll

reverse

sort

sort 3

count alpha

append alpha

count alpha

count ALPHA

end 1

END

end

alpha beta gamma

alpha beta gamma delta

00 alpha beta gamma delta

Error: invalid command

00 ins alpha beta gamma delta

Error: invalid index -1

Error: invalid command parameters

00 ins alpha gamma delta

Error: invalid command parameters

Error: invalid index 5

ins alpha gamma delta 00

Error: invalid command parameters

00 ins alpha gamma delta

Error: invalid command

delta gamma alpha ins 00

00 alpha gamma delta ins

Error: invalid command parameters

1

00 alpha gamma delta ins alpha

2

0

Error: invalid command parameters

Error: invalid command

Finished

 

 

asked in JavaScript category by user andrew
retagged by user golearnweb

1 Answer

+2 votes

>> HERE YOU CAN VIEW THE PROJECT ONLINE << (on GitHub io)

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Console Reader - Teamwork - JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
<h1>&#8902; THE CONSOLE &#8902;</h1>
<textarea id="output" disabled="disabled"></textarea>
<br>

<h3>TYPE YOUR COMMAND HERE:</h3>
<input id="input"/>
<h4>append || prepend || reverse || insert || delete || roll left || roll right || sort || count || end</h4>
<button id="submit">&#62;&#62; Submit &#60;&#60;</button>
<script src="js/console.js" type="text/javascript"></script>
</body>
</html>

CSS code:

html {
    background: #000;
}

body {
    font-family: "Lucida Console", serif;
    font-size: 14px;
    color: #0f0;
    width: 90%;
}

h1, h2, h3, h4, a, ul {
    text-align: center;
    color: #0f0;
    text-decoration: none;
}

h4 {
    color: #fff;
}

ul {
    list-style: none;
}

a {
    color: #fff;
}

#hr, #hr2 {
    width: 45%;
}

#output {
    width: 90%;
    height: 90%;
    resize: none;
    background: #000;
    color: orangered;
    border: 2px solid #0f0;
    min-height: 15em;
    font-size: 18px;
    box-shadow: 3px 3px 5px #000;
}

#input {
    width: 90%;
    border: 2px solid #0f0;
    background: #000;
    color: orangered;
    font-size: 16px;
}

#submit {
    width: 91%;
    background-color: orangered;
    border: 2px solid white;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    box-shadow: 3px 3px 5px #000;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
}

JavaScript code:

;(function () {
  let theArray = []
  let initialized = false
  let output = document.getElementById('output')
  let input = document.getElementById('input')
  document.getElementById('submit').addEventListener('click', submit)
  input.addEventListener('keypress', e => (e.code === 'Enter' ? submit() : ''))
  let commands = {
    reverse: reverse,
    sort: sort,
    count: count,
    end: end,
    append: append,
    prepend: prepend,
    roll: roll,
    delete: deleteAt,
    insert: insertAt
  }

  function submit () {
    let commandTokens = input.value.split(' ').filter(e => e !== '')
    console.log('Submitted: ' + commandTokens)
    if (!initialized) {
      theArray = commandTokens.slice(0)
      input.value = ''
      initialized = true
      output.value += theArray.join(' ') + '\n'
      return
    }
    try {
      commands[commandTokens[0]](commandTokens.slice(1))
    } catch (err) {
      output.value += 'Error: invalid command' + '\n'
    } finally {
      input.value = ''
    }
  }

  function roll (direction) {
    console.log(arguments.length)
    if (direction == 'right') {
      theArray = theArray
        .slice(theArray.length - 1)
        .concat(theArray.slice(0, theArray.length - 1))
        .slice(0)
      output.value += theArray.join(' ') + '\n'
    } else if (direction == 'left') {
      theArray = theArray.slice(1).concat(theArray.slice(0, 1)).slice(0)
      output.value += theArray.join(' ') + '\n'
    } else {
      output.value += 'Error: invalid command parameters' + '\n'
    }
  }

  function deleteAt (indexer) {
    let index = Number(indexer[0])

    if (validateIndex(theArray, index)) {
      return
    }

    theArray = theArray
      .slice(0, index)
      .concat(theArray.slice(index + 1))
      .slice(0)
    output.value += theArray.join(' ') + '\n'
  }

  function insertAt (tokens) {
    let index = Number(tokens[0])
    let item = tokens[1]

    if (validateIndex(theArray, index, true)) {
      return
    }

    if(item==undefined){
      output.value += 'Error: invalid input\n'
      return 
    }

    theArray = theArray
      .slice(0, index)
      .concat([item])
      .concat(theArray.slice(index))
      .slice(0)
    output.value += theArray.join(' ') + '\n'
  }

  function validateIndex (arr, index, isInsert = false) {
    let checker = false

    if (isNaN(index)) {
      output.value += `Error: invalid type\n`
      checker = true
    }

    if (index < 0) {
      output.value += `Error: invalid index ${index}\n`
      checker = true
    }

    if (isInsert) {
      if (index > arr.length) {
        output.value += `Error: invalid index ${index}\n`
        checker = true
      }
    } else if (index >= arr.length) {
      output.value += `Error: invalid index ${index}\n`
      checker = true
    }
    return checker
  }

  function sort (args) {
    if (args.length !== 0) {
      output.value += 'Error: invalid command parameters' + '\n'
      return
    }

    theArray.sort()
    output.value += theArray.join(' ') + '\n'
  }

  function count (args) {
    if (args.length === 0 || args.length > 1) {
      output.value += 'Error: invalid command parameters' + '\n'
      return
    }

    let count = 0
    let stringPar = args[0]
    for (let elem of theArray) {
      if (elem == stringPar) {
        count++
      }
    }
    output.value += count + '\n'
  }

  function end (args) {
    if (args.length > 0) {
      output.value += 'Error: invalid command parameters' + '\n'
      return
    }

    output.value += 'Finished\n'
  }

  function append (args) {
    if (args.length !== 1) {
      output.value += 'Error: invalid command parameters' + '\n'
      return
    }
    theArray.push(args)
    output.value += theArray.join(' ').toString() + '\n'
  }

  function prepend (args) {
    if (args.length !== 1) {
      output.value += 'Error: invalid command parameters' + '\n'
      return
    }
    theArray.unshift(args)
    output.value += theArray.join(' ').toString() + '\n'
  }

  function reverse (args) {
    if (args > 0) {
      output.value += 'Error: invalid command parameters' + '\n'
      return
    }
    output.value += theArray.reverse().join(' ').toString() + '\n'
  }
})()

You can also download the code from here (GitHub): https://github.com/gomelGA/JS-Teamwork-List-Processing

answered by user hues
edited by user golearnweb
...