l3q2.html

<!DOCTYPE html>
<!--  
    Write a JavaScript that encodes English language phrases 
    into pig Latin. Pig Latin is a form of coded language often 
    used for amusement. Many variations exist in the  methods  
    used  to  form  pig  Latin  phrases.  For  simplicity,  use  
    the  following algorithm: To form a pig Latin phrase from an 
    English language phrase, tokenize the  phrase  into  an  array  
    of  words  using String method split.  To  translate  each English 
    word into a pig Latin word, place the first letter of the English 
    word at the end  of  the  word  and  add  the  letters  “ay.”  Thus  
    the  word  “jump”  becomes “umpjay,” the word “the” becomes “hetay” 
    and the word “computer” becomes “omputercay.” Blanks between words 
    remain as blanks. Assume the following: The   English   phrase   
    consists   of   words   separated   by   blanks,   there   are   
    no punctuation   marks   and   all   words   have   two   or   more  
    letters.   Function printLatinWord should display each word. Each token 
    (i.e., word in the sentence) is passed to method printLatinWord to print 
    the pig Latin word. Enable the user to input the sentence through an 
    XHTML form. Keep a running display of all the converted sentences in 
    an XHTML text area.  
-->
<html>
    <head>
        <title>
            ITT LAB 3 Q2
        </title>
        <meta charset="UTF-8">
        <link href="l3q2.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="header">
            <center><h1>JAVASCRIPT - I</h1></center>
            <center><h3> <i>Pig Latin Converter</i> </h3></center>
            <hr>
        </div>
        <div class='inner'>
    
            <div class='input-controls in-sec'>
            <div class='input-word inp-control' contenteditable='true'>Enter Normal Word..</div> 
            <br><br><div class='button-submit inp-control'>Submit</div>
          </div>
          <div class='results-pane in-sec'>
            <div class='result-text'>result</div>  
          </div>
      
        <script>
                var usr_word;
                var pigla = "ay";
                var output;

                $(document).ready(function(){
                
                $(".button-submit").on('click',function(){ 
                    usr_word = $(this).parent().children('.input-word').text(); 
                
                    if (usr_word.length > 0 &&  usr_word.match(/^[a-zA-Z][a-zA-Z]+$/) !== null) {
                    $(".result-text").css('background-color','transparent');
                        var vowels = ["a","e","i","o","u"];
                        var first = usr_word.slice(0,1);
                        var sLast = usr_word.slice(1);

                            if (first === "a" || first === "e" || first === "i" || first === "o" || first === "u") {
                                output = usr_word + pigla;
                                $(".result-text").text(output);
                            }

                            else {
                                output = sLast + first + pigla;
                                $(".result-text").text(output);
                            }
                    }		
                        
                    else {
                    $(".result-text").text("Enter a valid word!");
                    $(".result-text").css('backgroundColor','#B63434');
                    }
                    
                });
                 // Word pic function
                $('.wordlists li').on('click',function(){
                var wordPick = $(this).text();
                    $('.input-word').text(wordPick);
                    
                // Smooth Scroll
                $('html, body').animate({
                        scrollTop: $(".project-cont").offset().top
                    }, 200);
                
                });
                });
        </script>
    </body>
</html>