JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.0.3/amelia/bootstrap.min.css">
<script src="http://fonts.googleapis.com/css?family=Righteous"></script>
<div class="container">
	<div class="row">
      <div class="col-xs-12" style="margin-bottom:10px">
        <div class="form-inline">
          <div class="form-group">
            <label class="sr-only" for="iptWord">Count Test</label>
            <input type="text" class="form-control" id="iptWord" placeholder="Enter Count" value="WORD" />
          </div>
          <button type="button" id="test" class="btn btn-default">Enter</button>
        </div>
       </div>
	</div>
	<div class="row">
        <div id="output" class="col-xs-12 text-center">0</div>
	</div>
</div>

CSS

#output{
    font-family:'Righteous';
    font-size:12em;
}

JavaScript

var word = {};
var score = 1;
for(var i = 97;i<=122;i++){
    word[ String.fromCharCode(i) ] = score;
    score++;
}
function getScore(str){
    return word[str.toLowerCase()] | 0 ;
}
$('#test').click(function(e){
    var words = $('#iptWord').val().split("") 
    score = 0;
    for(x in words){
        score += getScore(words[x])
    }
    
    
    $('#output').html(  score )
    
})