Marble controller

JScript

//GENERATES RANDOM HEX COLOR
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

//DISPLAYS MARBLE AS CIRCULAR DIV
var successHandler = function (data) {
    console.log(data);
    var parent = $("#marble");
    parent.html("");
    var marbleDiv = $("<div>").css({
        'class': 'marbles',
        'width': (500 * data.Size / 10) + 'px',
        'height': (500 * data.Size / 10) + 'px',
        'border': '1px solid #000000',
        'border-radius': '50%',
        'background': 'radial-gradient(circle at 35% 35%, ' + data.Color + ', #000)'
    });
    parent.append(marbleDiv);
    ;
}

var failureHander = function (data) {
    console.log('Error');
}

var completeHandler = function (data) {
    console.log("Complete");
}

//GRABS RANDOM MARBLE FROM LIST VIA GET CONTROLLER
var grabMarble = function () {
    $.ajax({
        type: 'GET',
        url: '/api/marble',
        success: successHandler,
        failure: failureHander,
        complete: completeHandler
    });
}

//SENDS NEW MARBLE TO ADD CONTROLLER BASED ON USER'S SIZE & COLOR INPUTS
var addNewMarble = function (marbleCount) {

    var dom = {
        Color: $("#newMarbleColor").val(),
        Size: $("#newMarbleSize").val()
    };
    //document.getElementById("marbleCount").innerHTML = "There are " + marbleCount + " marbles in the bag."  ;
    $.ajax({
        type: 'POST',
        url: '/api/marble',
        data: JSON.stringify(dom),
        //success: successHandler,
        //failure: failureHander,
        //complete: completeHandler,
        contentType: "application/json",
        dataType: "json"
    });
};

//GENERATES RANDOM SIZE AND COLOR AND SENDS TO ADD CONTROLLER
var submitRandomMarble = function () {

    var color = getRandomColor();
    var size = Math.floor((Math.random() * 10) + 1);
    var marble = {
        Color: color,
        Size: size
    };
    //document.getElementById("marbleCount").innerHTML = "There are " + marbleCount + " marbles in the bag.";
    $.ajax({
        type: 'POST',
        url: '/api/marble',
        data: JSON.stringify(marble),
        //success: successHandler,
        //failure: failureHander,
        //complete: completeHandler,
        contentType: "application/json",
        dataType: "json"
    });
};

//PUTS RANDOM HEX COLOR INTO COLOR INPUT FIELD ON DOM
var randomMarbleColor = function () {
    document.getElementById("newMarbleColor").value = getRandomColor();
};

//JQUERY EVENT ACTIONS
$("#test").on("click", grabMarble);
$("#SubmitNewMarble").on("click", addNewMarble);
$("#randomColor").on("click", randomMarbleColor);
$("#SubmitRandomMarble").on("click", submitRandomMarble);

Marble controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using marble_api.Controllers;
using marble_api.Models;


namespace marble_api.Controllers
{
    public class marbleController : ApiController
    {
        public static List<Marble> bagOfMarbles = new List<Marble>() {
               new Marble {Id =1, Color="#FFFFFF", Size=1 },
               new Marble {Id =2, Color="#0000FF", Size=3 },
               new Marble {Id =3, Color="#666666", Size=9 }
        };

        [HttpGet]
        public IHttpActionResult Index()
        {
            Random random = new Random();
            return Ok(bagOfMarbles[random.Next(0, bagOfMarbles.Count)]);
        }
/*
        [HttpPost]
        public IHttpActionResult Add(Marble newMarble)
        {
            newMarble.Id = bagOfMarbles.Count + 1;
            bagOfMarbles.Add(newMarble);
            return Ok();
        }
  */      
        [HttpPost]
        public IHttpActionResult Add()
        {
            var newMarble = new Marble();
            newMarble.Id = bagOfMarbles.Count + 1;
            bagOfMarbles.Add(newMarble);
            return Ok();
        }
    }
}