Pangrams

Code kata by Bidhan

by Renoir Boulanger

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="page-header">
    <h1>Pangrams <small>by <a href="https://www.hackerrank.com/Bidhan">Bidhan</a></small></h1>
  </div>

  <details>
    <summary class="lead">Roy wanted to increase his typing speed for programming contests. So, his friend advised him to type the sentence "The quick brown fox jumps over the lazy dog" repeatedly, because it is a pangram. (Pangrams are sentences constructed by using every letter of the alphabet at least once.)</summary>
<div class="panel panel-default">
  <div class="panel-body">

After typing the sentence several times, Roy became bored with it. So he started to look for other pangrams.

Given a sentence , tell Roy if it is a pangram or not.

<h2>Input Format</h2>

A string with spaces, numbers and letters

<h2>Output Format</h2>

Output a line containing <code>pangram</code> if input string is a pangram, otherwise output <code>not pangram</code>.


<h2>Sample Input #1</h2>

<pre>
We promptly judged antique ivory buckles for the next prize
</pre>

<h2>Sample Input #2</h2>

<pre>We promptly judged antique ivory buckles for the prize    </pre>

<h2>Sample Output #1</h2>

<pre>pangram</pre>

<h2>Sample Output #2</h2>

<pre>not pangram</pre>


<h2>Explanation</h2>

In the first test case, the answer is pangram because the sentence contains all the letters of the English alphabet.

      </div>
    </div>
  </details>
  <div class="panel panel-default">
    <div class="panel-body">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">A sentence</label>
          <div class="col-sm-10">
            <textarea class="form-control" rows="1">We promptly judged antique ivory buckles for the next prize</textarea>
             <span id="textResult" class="help-block"><strong>How to use:</strong> Write something, then click elsewhere to see...

JavaScript

function isPangram(sentence, alphabet) {
  let alpha = alphabet||'abcdefghijklmnopqrstuvwxyz'
    , nonletters = /[^a-z]/g
    , input = String(sentence).toLowerCase().replace(nonletters, '')
    , setIn = new Set(String(input).split(''))
    , setAlpha = new Set(String(alpha).toLowerCase().split(''));
  return setIn.size === setAlpha.size;
}



/** ============ Run the code ============ **/


function fieldHandler(evt) {
  let field = evt.target
    , fieldValue = field.value.trim();
  	validateInput(fieldValue);
}

function validateInput(m) {
  let validation = isPangram(m)
    , outcome = validation === true?'pangram':'not pangram'
    , feedbackClassName = (validation === true) ? 'has-success' : 'has-error'
    , changeClassNode = document.querySelector('form').firstChild.nextSibling
    , feedbackBlock = document.querySelector('#textResult');
  feedbackBlock.textContent = outcome;
  changeClassNode.className = `form-group ${feedbackClassName}`;
}

document.querySelector('textarea').addEventListener('blur', fieldHandler);