<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 away!</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">Fire away!</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;
    }
}
var shipPosition = Math.floor(Math.random() * 6)+1 +""+ Math.floor(Math.random() * 6)+1;
console.log(shipPosition);
var coordinates;
var numberofturns = 10;

document.getElementById("fireButton").onclick =
function(){
    var input = document.getElementById("guessInput").value;
    if(isValid(input)){
 
 document.getElementById("guessInput").placeholder = "Enter a letter and number";
      document.getElementById(coordinates).style.background = "red";
        document.getElementById("guessInput").select();
        if(coordinates == shipPosition){
            document.getElementById(coordinates).style.background = "green";
            document.getElementById("output").innerHTML = "YOU HIT MY BATTLESHIP! YOU WIN!";
            document.getElementById("output").style.color = "green";
            document.getElementById("fireButton").disabled=true;
        }
        else{
            document.getElementById("output").innerHTML = "YOU MISSED MY BATTLESHIP!";
   
numberofturns = numberofturns - 1;        document.getElementById("output").style.color = "red";
        }
    }
    else{
        document.getElementById("guessInput").placeholder = "Not a valid input";
        document.getElementById("guessInput").value = "Not a valid input";
        document.getElementById("guessInput").select();
    }
    if (numberofturns == 0) {
  document.getElementById("fireButton").disabled = true;
       document.getElementById("output").innerHTML = "That's game over!";
  }
};

function isValid(input){
    var array = input.split("",2);
    var letter = parseInt(convertToNum(array[0]));
    var num = parseInt(array[1]-1);
    coordinates = num+""+letter;
    console.log(coordinates);
    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

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.