Non Repeat First Character

index.html

<div class="header">
  <div class="container">
      <div id="branding"><img src="https://media.glassdoor.com/sqll/882830/andela-squarelogo-1466611084554.png" width="50px" height="50px" align="left"><h1><span class="highlight"></span></h1></div>
  </div>
</div>
<section id="showcase">
  <div class="container">
    <div class="welcometext">
    <h1>Welcome</h1>
      <p>
        This pen is designed to output the First Non Repeated Character in a string.
      </p>
    </div>
    <div class="myform">
      <div class="form_div">
        <form id="getStringForm" action="#">
          <h2></i>Non Repeat String Checker </h2>
          <p><input type="text" placeholder="Enter String" id="character_string"></p>
          <p><input type="submit" value="Check" onClick='getString()'></p>
        </form>
      </div>
    </div>
  <div class="topflex-container">
            <div id="message">*****</div>
          </div>
  </div>
</div>
<div id="search">
    <div class="container">
Andela Cycle 39 Technical Challenge
            
    </div>
</div>

non-repeat-first-character.markdown

Non Repeat First Character

A Pen by Akinyele Oluwatosin Akintayo on CodePen.

License.

script.js

const getString = () => {
  getStringForm.addEventListener('submit', (event) => {
      event.preventDefault(); 
})
  const characterString = document.getElementById('character_string').value;

  
  const letters = /[A-Za-z]/g;
  const symbols = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g;
  const numbers = /[0-9]/g;
  if(characterString.length==0){
    document.getElementById('message').innerHTML="value required";
    message.classList.add("invalid");
   
  }
  else if(characterString.match(symbols)|| characterString.match(numbers)){
      document.getElementById('message').innerHTML="Only Alphabet are allowed";
    message.classList.add("invalid");
          }
  else if(characterString.match(letters)){
     checkFirstNonRepeatedCharacter(characterString);
  }
  else{
    document.getElementById('message').innerHTML="Invalid Character";
    message.classList.add("invalid");
    
  }
}

const checkFirstNonRepeatedCharacter = (valString)=> {
  const string=valString.toLowerCase().trim();
  for (let i = 0; i < string.length; i++) {
    const c = string.charAt(i);
    if (string.indexOf(c) == i && string.indexOf(c, i + 1) == -1) {
  document.getElementById('message').innerHTML=c.toUpperCase();
      message.classList.add("valid");
      return c;
    }
    else{
  document.getElementById('message').innerHTML="Characters Repeated";
 message.classList.add("invalid");
    }
  }
  return;
}

style.css

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);

.main{
  height:100vh;
  }
.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}
.header{
  background:#424949;
  color:#fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom:#2196F3 3px solid;
}
.header #branding h1{
  margin:0;
}
.header #branding{
  float:left;
}
.header #branding h1{
  margin:0;
}
.header nav{
  float:right;
  margin-top: 10px;
}
.header .highlight,section .highlight, header .current a{
  color:#2196F3;
  font-weight: bold;
}
/*Showcase*/
#showcase{
  min-height: 60%;
  text-align: center;
  color:#2196f3;
  background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTuXb4yr6rhrvr8bY4qR3Vz724FTFVBHqhos3BtqBUf5ccf0Og') repeat 0 0px;
}
#showcase h1{
  margin-top:50px;
  font-size: 55px;
  margin-bottom: 10px;
}
#showcase p{
  font-size: 20px;
}
.welcometext {
	float:left;
	width:50%;
	color:#fff;
	text-align: left;
}
.myform{
width: 50%;
margin-top:50px;
position: relative;
margin-bottom:10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
background-color: #fff;
float: right;
height: 80%;
overflow: hidden;
}
/* search*/
#search{
  padding:15px;
  color:#fff;
  background: #35424a;
}
#search h1{
  float:left;
}
/* top flex*/
.topflex-container {
  display: flex;
  width: 40%;
  margin-top:15px;
  flex-direction: row;
  background-color: #ccc;
  border-radius: 5px;
  border: 1px solid #2196f3;
  float:left;
  color:#35424a;
}
.topflex-container > div {
  background-color: #fff;
  width: 100%;
  margin: 5px;
  text-align: center;
  border: 1px solid #2196f3;
  line-height: 30px;
  
}
#message {
  margin-top: 5px;
  border-radius: 5px;
  padding: 3px;
  border:2px solid #ff0099;
 border-bottom: 6px solid #ff0055;
}
.valid{
  color: #2196f3;
  font-weight: bold;
  font-size: 30px;
}
.invalid{
  color: #ff0055;
  font-weight: bold;
  font-size: 18px;
}

/* search button*/
.button_1{
  height:38px;
  background:#2196f3;
  border:0;
  padding-left: 20px;
  padding-right: 20px;
  color:#fff;
}

/* Style the top navigation bar */
.form_div input[type="submit"]
{
width:25%px;
height:40px;
border:1px solid #fff;
border-radius:4px;
font-size:16px;
background-color:#2196f3;
border-bottom:2px solid #2196f3;
color:white;
font-weight:bold;
 padding: 12px;
 box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  box-shadow: 0 2px #999;
  position:right;
}
.button {
    color: white;
    width:25%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
   display: block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  background-color: #2196f3;
  box-shadow: 0 3px #999;
  font-size:14px;
  float:right;
}

.button:hover {
	background-color: #3e8e41;
	color:black;
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 4px #666;
  transform: translateY(4px);
}

@media screen and (max-width: 400px) {
    .myform{
      /* display:none; */
      float: none;
        width: 100%;
    }
    .welcometext{
      width:100%;
    }
    .topflex-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #2196f3;
}

.topflex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
}
.form_div
{
width:100%px;
margin-left:5px;
padding:10px;
}
.form_div .form_label
{
margin:15px;
margin-bottom:30px;
font-size:25px;
font-weight:bold;
color:#000;
text-decoration:none;
border: 1px solid #000;
border-radius: 4px;
background-color: #fff;
}
.form_div input[type="text"]
{
width:90%;
height:40px;
border-radius:2px;
padding-left:5px;
padding: 14px;
border: 1px solid #2196F3;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 6px;
background: lightyellow;
font-size: 15px;
font-family: FontAwesome;

}

.form_div input[type="submit"]
{
width:25%px;
height:40px;
border:1px solid #fff;
border-radius:4px;
font-size:16px;
background-color:#2196f3;
border-bottom:2px solid #2196f3;
color:white;
font-weight:bold;
 padding: 12px;
 box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  box-shadow: 0 2px #999;
  position:right;
}
.form_div input[type="submit"]:hover {
	background-color: #fff;
	color:#2196f3;
	border:1px solid #ccc;
    border-radius:4px;
}

.form_div input[type="submit"]:active {
  background-color: #fff;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  border:1px solid #ccc;
  border-radius:4px;
}


@media only screen and (min-width:100px) and (max-width:399px)
{
  .welcometext{
    display:none;
  }
.form_div
{
width:90%;
margin-left:5%;
padding-left:0px;
padding-right:0px;
}
.form_div input[type="text"]
{
width:80%;
}
.form_div input[type="submit"]
{
width:80%;
}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />