<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 (A-E) and number (1-6)">
			<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">A</div>
		<div class="col-xs-1 col-sm-2">B</div>
		<div class="col-xs-1 col-sm-2">C</div>
		<div class="col-xs-1 col-sm-2">D</div>
		<div class="col-xs-1 col-sm-2">E</div>
	</div>
	<div class="row one">
		<div class="col-xs-1 col-sm-2" id="01"></div>
		<div class="col-xs-1 col-sm-2" id="02"></div>
		<div class="col-xs-1 col-sm-2" id="03"></div>
		<div class="col-xs-1 col-sm-2" id="04"></div>
		<div class="col-xs-1 col-sm-2" id="05"></div>
	</div>
	<div class="row two">
		<div class="col-xs-1 col-sm-2" id="11"></div>
		<div class="col-xs-1 col-sm-2" id="12"></div>
		<div class="col-xs-1 col-sm-2" id="13"></div>
		<div class="col-xs-1 col-sm-2" id="14"></div>
		<div class="col-xs-1 col-sm-2" id="15"></div>
	</div>
	<div class="row three">
		<div class="col-xs-1 col-sm-2" id="21"></div>
		<div class="col-xs-1 col-sm-2" id="22"></div>
		<div class="col-xs-1 col-sm-2" id="23"></div>
		<div class="col-xs-1 col-sm-2" id="24"></div>
		<div class="col-xs-1 col-sm-2" id="25"></div>
	</div>
	<div class="row four">
		<div class="col-xs-1 col-sm-2" id="31"></div>
		<div class="col-xs-1 col-sm-2" id="32"></div>
		<div class="col-xs-1 col-sm-2" id="33"></div>
		<div class="col-xs-1 col-sm-2" id="34"></div>
		<div class="col-xs-1 col-sm-2" id="35"></div>
	</div>
	<div class="row five">
		<div class="col-xs-1 col-sm-2" id="41"></div>
		<div class="col-xs-1 col-sm-2" id="42"></div>
		<div class="col-xs-1 col-sm-2" id="43"></div>
		<div class="col-xs-1 col-sm-2" id="44"></div>
		<div class="col-xs-1 col-sm-2" id="45"></div>
	</div>
	<div class="row six">
		<div class="col-xs-1 col-sm-2" id="51"></div>
		<div class="col-xs-1 col-sm-2" id="52"></div>
		<div class="col-xs-1 col-sm-2" id="53"></div>
		<div class="col-xs-1 col-sm-2" id="54"></div>
		<div class="col-xs-1 col-sm-2" id="55"></div>
	</div>
</div>
@import "compass";
$green: rgb(83, 175, 19);
$grey: rgba(#929292, .25);
body {
	background: #000;
}

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

.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;
	}
}
View Compiled
var ids=[]
for (var i=0;i<6;i++){
	for (var j=1;j<6;j++){
		tempId=i.toString()+j.toString();
		ids.push(tempId);
	}
}
//console.log(ids)
var ship=ids[Math.floor(Math.random()*ids.length)];
console.log(ship);
document.getElementById("fireButton").onclick= function() {
	var fullId;
	var secondId;
	var choice = document.getElementById("guessInput").value;
	var rowsAndCols = {
		column: choice[0],
		row: choice[1]
	};
	//console.log(rowsAndCols.column);
	if (rowsAndCols.column=="A"){
		secondId="1";
	}
	else if (rowsAndCols.column=="B"){
		secondId="2";
	}
	else if (rowsAndCols.column=="C"){
		secondId="3";
	}
	else if (rowsAndCols.column=="D"){
		secondId="4";
	}
	else if (rowsAndCols.column=="E"){
		secondId="5";
	}
	var realId= parseInt(rowsAndCols.row)-1;
	fullId=realId.toString()+secondId.toString();
	
	console.log(fullId);
	//console.log(ship);
	if (fullId==ship){
		document.getElementById(ship).style.backgroundColor="green";
		document.getElementById("fireButton").disabled=true;
	}
	else {
		document.getElementById(fullId).style.backgroundColor="red";
	}
	document.getElementById("guessInput").value="";
	
	//console.log(rowsAndCols.column);
	//console.log(rowsAndCols.row);
}

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.