<div class="container header">
	<div class="row">
		<div id="messageArea">Battleship</div>
		<div class="input-group input-group-lg">
			<input type="text" class="form-control" id="guessInput" placeholder="Enter a letter and number (ex. A1)">
			<span class="input-group-btn">
        <button class="btn btn-default" type="button" id="fireButton">Fire!</button>
      </span>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row title">
		<div class="col-xs-1 col-sm-2"></div>
		<div class="col-xs-1 col-sm-2"></div>
		<div class="col-xs-1 col-sm-2"></div>
		<div class="col-xs-1 col-sm-2"></div>
		<div class="col-xs-1 col-sm-2"></div>
		<div class="col-xs-1 col-sm-2"></div>
	</div>
	<div class="row one">
		<div class="col-xs-1 col-sm-2" id="01">A1</div>
		<div class="col-xs-1 col-sm-2" id="02">B1</div>
		<div class="col-xs-1 col-sm-2" id="03">C1</div>
		<div class="col-xs-1 col-sm-2" id="04">D1</div>
		<div class="col-xs-1 col-sm-2" id="05">E1</div>
		<div class="col-xs-1 col-sm-2" id="06">F1</div>
	</div>
	<div class="row two">
		<div class="col-xs-1 col-sm-2" id="11">A2</div>
		<div class="col-xs-1 col-sm-2" id="12">B2</div>
		<div class="col-xs-1 col-sm-2" id="13">C2</div>
		<div class="col-xs-1 col-sm-2" id="14">D2</div>
		<div class="col-xs-1 col-sm-2" id="15">E2</div>
		<div class="col-xs-1 col-sm-2" id="16">F2</div>
	</div>
	<div class="row three">
		<div class="col-xs-1 col-sm-2" id="21">A3</div>
		<div class="col-xs-1 col-sm-2" id="22">B3</div>
		<div class="col-xs-1 col-sm-2" id="23">C3</div>
		<div class="col-xs-1 col-sm-2" id="24">D3</div>
		<div class="col-xs-1 col-sm-2" id="25">E3</div>
		<div class="col-xs-1 col-sm-2" id="26">F3</div>
	</div>
	<div class="row four">
		<div class="col-xs-1 col-sm-2" id="31">A4</div>
		<div class="col-xs-1 col-sm-2" id="32">B4</div>
		<div class="col-xs-1 col-sm-2" id="33">C4</div>
		<div class="col-xs-1 col-sm-2" id="34">D4</div>
		<div class="col-xs-1 col-sm-2" id="35">E4</div>
		<div class="col-xs-1 col-sm-2" id="36">F4</div>
	</div>
	<div class="row five">
		<div class="col-xs-1 col-sm-2" id="41">A5</div>
		<div class="col-xs-1 col-sm-2" id="42">B5</div>
		<div class="col-xs-1 col-sm-2" id="43">C5</div>
		<div class="col-xs-1 col-sm-2" id="44">D5</div>
		<div class="col-xs-1 col-sm-2" id="45">E5</div>
		<div class="col-xs-1 col-sm-2" id="46">F5</div>
	</div>
	<div class="row six">
		<div class="col-xs-1 col-sm-2" id="51">A6</div>
		<div class="col-xs-1 col-sm-2" id="52">B6</div>
		<div class="col-xs-1 col-sm-2" id="53">C6</div>
		<div class="col-xs-1 col-sm-2" id="54">D6</div>
		<div class="col-xs-1 col-sm-2" id="55">E6</div>
		<div class="col-xs-1 col-sm-2" id="56">F6</div>
	</div>
</div>
<h1 id="output">test</h1>
@import "compass";
$green: rgb(83, 175, 19);
$grey: rgba(#929292, .25);
body {
	background: #000;
}

h1{
	color: black;
	text-align: center;
}

.header {
	margin-bottom: 15px;
}

.form-control,
input {
	background: transparent;
	border: $green;
	box-shadow: 0 0 2px $green;
	&:focus {
		box-shadow: 0 0 2px $green;
	}
}

button {
	background-color: $green;
	color: #000;
	&:hover {
		cursor: pointer;
	}
}

#messageArea {
	color: $green;
	font-size: 16px;
	margin: 10px 0;
}

.one,
.two,
.three,
.four,
.five,
.six {
	div {
		border: 2px solid $green;
		min-height: 10vh;
		//background: $grey;
		color: $green;
		display: flex;
  	justify-content: center;
  	align-items: center;
	}
}

.title {
	border: none !important;
	color: $green;
	font-size: 16px;
	text-align: center;
}

.hit {
	position: relative;
	&::before {
		content: '\f140';
		font-family: FontAwesome;
		position: absolute;
		left: 50%;
		font-size: 6vh;
		color: $green;
		display: block;
		height: 100%;
	}
}

.miss {
	position: relative;
	display: block;
	height: auto;
	&::before {
		content: '\f00d';
		font-family: FontAwesome;
		position: absolute;
		left: 50%;
		font-size: 6vh;
		color: $green;
	}
}
//FIRST DIGIT IS ROW, SECOND DIGIT IS COLUMN (LETTERS)
var shipPos = parseInt(Math.random()*6)+""+(parseInt(Math.random()*6)+1);
console.log(shipPos);
var coord;

document.getElementById("fireButton").onclick =
function(){
	var input = document.getElementById("guessInput").value;
	if(isValid(input)){
		//IF INPUT IN VALID, PROCEED TO CHECK IF IT HITS, 
		//MARK THE BOX THEY GUESSED
		//MAKE SURE THE ORDER OF THE INPUT IS ROW,COLUMN/LETTER (0-5,1-6)
		document.getElementById(coord).style.background = "red";
		document.getElementById("guessInput").placeholder = "Enter a letter and number (ex. A1)";
		document.getElementById("guessInput").select();
		if(coord == shipPos){
			document.getElementById(coord).style.background = "green";
			document.getElementById("output").innerHTML = "YOU HIT THE BATTLESHIP! YOU WIN!";
			document.getElementById("output").style.color = "green";
			document.getElementById("fireButton").disabled=true;
		}
		else{
			document.getElementById("output").innerHTML = "YOU MISSED THE BATTLESHIP!";
			document.getElementById("output").style.color = "green";
		}
	}
	else{
 		document.getElementById("guessInput").placeholder = "Not a valid input";
		document.getElementById("guessInput").value = "Not a valid input";
		document.getElementById("guessInput").select();
	}
};

function isValid(input){
	var array = input.split("",2);
	var letter = parseInt(convertToNum(array[0]));
	var num = parseInt(array[1]-1);
	coord = num+""+letter;
	console.log(coord);
	console.log(array);
	console.log(num);
	console.log(letter);
	if(num < 0 || num > 5 || letter < 1 || letter > 6){
		return false;
	}
	else{
		return true;
	}
}

function convertToNum(letter){
	if(letter == "A" || letter == "a"){
		return "1";
	}
	else if(letter == "B" || letter == "b"){
		return "2";
	}
	else if(letter == "C" || letter == "c"){
		return "3";
	}
	else if(letter == "D" || letter == "d"){
		return "4";
	}
	else if(letter == "E" || letter == "e"){
		return "5";
	}
	else if(letter == "F" || letter == "f"){
		return "6";
	}
	else{
		return "-1";
	}
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.