Unit2A Q3

by Larry Adams

HTML

<h4>3. Use indexOf() and substr() or substring() to divide your name into
        two strings&mdash;firstname and lastname</h4>
      <p>We're going to use some basic built-in string functions to manipulate a
        string: your name. Modify the code in the js/hw2SplitString.js file to
        output the first and last name separately into the page below.  Your code should
        work for any name entered. See the JS file for more on what input validation
        is expected.
      </p>
      <p><input size="30" id="fullName"> is my full name (Larry Adams). </p>
      <div id="splitName" class="hwbutton">Split my name!</div>
      <br>
      <span class="" id="firstname"></span> is my first name<br>
      <span class="" id="lastname"></span> is my last name<br>

CSS

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid #eda933;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:65px;
	line-height:65px;
	width:131px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cd8a15;
}
.hwbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
	background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
	background-color:#d29105;
	cursor: hand;
	cursor:...

JavaScript

var splitName = document.getElementById("splitName");
splitName.onclick = function(){

               var fullname = document.getElementById("fullName").value;
                var whiteSpace = fullname.indexOf(" ");
                
               
               /*
                *  We've gotten the fullname from the HTML form field.
                *  Your job is to use the String.slice(), String.substring() or String.substr() functions
                *  to divide your name into separate first and last name strings and assign
                *  them to the variables provided. You may
                *  need String.indexOf() as well.
                *
                *  You may not hardcode the position of where to split the string. Your code should
                *  work for anyone's first and last name. If the user enters a name without any whitespace
                *  return that as firstname and leave lastname blank.
                *
                *  If a name has more than one whitespace (as in, using one or more middle names),
                *  make the first name 'firstname' and assign the rest to 'lastname'
                *
                **/

               var firstname = fullname.slice(0, whiteSpace);
               var lastname = fullname.substr(whiteSpace);


               document.getElementById("firstname").innerHTML = firstname;
               document.getElementById("lastname").innerHTML = lastname;


}

/*
var fullname = document.getElementById("fullName");

                fullname = string.split(" ");
                var fullnameArray = new Array();
                for(var i =0; i < fullname.length; i++){
                fullnameArray.push(fullname[i]);
                if(i != fullname.length-1){
                fullnameArray.push(" ");
                }
                }
                
               var firstname = fullnameArray[0];
               var lastname = fullnameArray[2];
    
               
              ...