Star Wars Droid Name Generator 🤖

The Star Wars JavaScript Droid Name Generator!

In honor of Star Wars: Rogue One, learn how to create a Droid Name Generator in JavaScript and HTML5. Are you an Astromech droid or a Protocol droid?

Visit the Generator or Download the complete project

HTML Elements

Create an HTML5-based document with various Input Forms and Divs to display results.

<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Star Wars Droid Name Generator</title>
 </head>
 <body>
   <h1>Star Wars Droid Name Generator</h1>
 
   <form id="swForm">
   <fieldset>
   <legend>About You</legend>
   <label for="inFirst">First name: </label><input type="text" placeholder="George" name="inFirst" id="inFirst"><br>
   <label for="inLast">Last name: </label> <input type="text" placeholder="Lucas" name="inLast" id="inLast"><br>
   <label for="inDOB">Birthday: </label> <input type="date" name="inDOB" id="inDOB"><br>
   </fieldset>
   <p><input type="button" value="Go" id="btnGo"> <input type="button" value="Clear" id="btnClear"></p>
   </form>
 
   <div id="divShow">
   <div id="errorMsg">&nbsp;</div>
   <div id="nameYou">&nbsp;</div>
   <div id="nameDroid">&nbsp;</div>
   <div id="nameType">&nbsp;</div>
   <div><img src="" id="droidPic"></div>
   </div>

</body>
</html>

CSS Elements

In the <head> section, add a bit of styling (you can add much more, of course).

 <style>
   fieldset { width: 10em; }
 </style>

JavaScript Elements

Right before the closing </body> Tag, add the <script> block. We’ll be using Plain Old JavaScript in an IIFE and Strict Mode.

<script>
 (function(){ 
 "use strict";

 })();
</script>

JavaScript Objects

Right after “use strict” from above, create JavaScript Objects to reference various HTML Nodes.

var elSwForm = document.getElementById("swForm"),
 elBtnGo = document.getElementById("btnGo"),
 elBtnClear = document.getElementById("btnClear"),
 elErrorMsg = document.getElementById("errorMsg"),
 elNameYou = document.getElementById("nameYou"),
 elNameDroid = document.getElementById("nameDroid"),
 elNameType = document.getElementById("nameType"),
 elDroidPic = document.getElementById("droidPic");

Arrays

Next, create Arrays to hold the Types of Droids and Pictures of each.

 var droidType = ["Astromech", "Battle", "Interrogation", "Medical", "Protocol", "Scout"],
   droidPic = ["https://vmcink.files.wordpress.com/2016/12/astromech.png", "https://vmcink.files.wordpress.com/2016/12/battle.png", "https://vmcink.files.wordpress.com/2016/12/interrogation.png", "https://vmcink.files.wordpress.com/2016/12/medical.png", "https://vmcink.files.wordpress.com/2016/12/protocol.png", "https://vmcink.files.wordpress.com/2016/12/scout.png"];

Resetting the Form

Set up a Function to clear the Form and do any other cleanup.

 function fnClearForm() { 
   elSwForm.reset();
 }

Processing and Displaying Input

Next up, define a Function that will store the First Name, Last Name, and Date of Birth input. Check that there are no empty fields. Output the User’s Real Name, Droid Name, and Droid Type. Check for good grammar (some Droid Types need an “An” while others need an “A”). Also, display a Droid Picture, from the list in the Array. The actual Droid Name generation is another Function, further below.

 function fnGo() {
   var valInFirst = document.getElementById("inFirst").value,
   valInLast = document.getElementById("inLast").value,
   valInDOB = document.getElementById("inDOB").value;
 
   if((valInFirst !== '') && (valInLast !== '') && (valInDOB !== '')){
     elErrorMsg.style.display = "none";
 
     var randomDroid = Math.floor(Math.random() * droidType.length);
 
     elNameYou.innerHTML = "Your Real Name: " + valInFirst + " " + valInLast;
     elNameDroid.innerHTML = "Your Droid Name: " + fnDroidNameGen(valInFirst, valInLast, valInDOB);
 
   if((randomDroid === 0) || (randomDroid === 2)) {
     elNameType.innerHTML = "You are an " + droidType[randomDroid] + " Droid.";
     elDroidPic.src = droidPic[randomDroid];
   } else {
     elNameType.innerHTML = "You are a " + droidType[randomDroid] + " Droid.";
     elDroidPic.src = droidPic[randomDroid];
   }
 
   fnClearForm();

   } else { 
     elErrorMsg.innerHTML = "Please enter all fields!";
     elErrorMsg.style.display = "block";
   }
 }

Droid Name Generator Function

Create a Function to generate the Droid Names. First, take the Month out of the Date of Birth input and store it as a Variable. Check if the Month supplied is actually a number (some Web Browsers don’t recognize the type=”date” Input Field from above); if it’s not, pick a random Month. The trick to generating a Droid Name is to use various Case results. In Case of Month 1 (January), the Droid Name scheme looks like BT-1. Based on the User’s First Name, Last Name, and Month, they get a Droid Name like VC-1. There are a few example Case results (like IG-88 style for August) below, and a Default Case (0-0-0 style) if not every month is accounted for. Using the .slice() method of the Text (Strings) input, we extract pieces of the First/Last Names and concatenate (add to) various symbols and numbers. Finally, return the generated Droid Name.

function fnDroidNameGen(n1, n2, dob) { 
 var mo = parseInt(dob.slice(5, 7), 10), 
 myDroid = ""; 
 
 if (isNaN(mo)) { 
   mo = Math.ceil(Math.random() * 12); 
 }
 
 switch(mo) { 
   case 1: 
     myDroid = n1.slice(0, 2).toUpperCase() + "-" + mo
     break;
   case 2: 
     myDroid = n1.slice(0, 1).toUpperCase() + mo + "-" + n2.slice(0, 1).toUpperCase() + mo;
     break;
   case 3: 
     myDroid = n1.slice(0, 1).toUpperCase() + "-" + mo + n2.slice(0, 2).toUpperCase();
     break; 
   case 8: 
     myDroid = n1.slice(0, 2).toUpperCase() + "-" + mo + mo;
     break;
   case 12:
     myDroid = n1.slice(0, 1).toUpperCase() + "-2" + n2.slice(0, 2).toUpperCase();
     break;
   default:
     myDroid = mo + "-" + mo + "-" + mo;
     break;
   }
 
   return myDroid; 
 }

Event Handlers

Next, right before the end of the IIFE  })(); add Event Handlers to react to Button clicks.

 elBtnGo.addEventListener("click", fnGo, false);
 elBtnClear.addEventListener("click", fnClearForm, false);

Putting It All Together

When the HTML, CSS, and JavaScript come together, you get a program that takes a user’s Name and Birthday and generates a Droid Name, Type, and Picture. Lots of fun in galaxy not too far, far away!

George Lucas a.k.a GE-1
George Lucas a.k.a GE-1

Making the Kessel Run

If you want to go further, here are a few ideas to improve upon the Star Wars Droid Name Generator:

  • Add more Droid Types in the Array
  • Add more Droid Pictures in the Array
  • Add more Case results to account for more Months
  • Change the Droid Name Schemes by playing with .slice() and Concatenation
  • Change the look of the project by adding more CSS Styling

Visit the Generator or Download the complete project

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2016 VmC Ink.