Part A of the Unit 2 Project

Use indexOf() and substr() or substring() to divide your name into two strings—firstname and lastname

by Angela Baruth

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. </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

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

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...

JavaScript

/********************************************************************
  *
  * Third problem: Splitting a String
  *
  ********************************************************************/


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

var fullname = document.getElementById("fullName").value;

            
              // Find the first space in the string and trim the text to that space for the first name
              var firstName = fullname.slice(0, fullname.indexOf(" "));
              // Trim the text 1 index beyond the space for the last name
              var lastName = fullname.slice(fullname.indexOf(" ") + 1);


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


};