Add "Jerb Title Generator" code for practicing Git

owww · Aug 9, 2016 · 13434cb · 13434cb
1 parent 5f80047
commit 13434cb
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ use Git at BlackSky. The resources are as follows:
 + `slides.md` - A simple set of slides to accompany the lesson plan above
 + `crash_course.html` - The file you open in the browser to view the slides
 + `index.html` - The playground in which we will practice our git-fu
+  - `resources/generator.js` - The Javascript file to accompany our playground
 + `great_commit_messages.html` - Another set of slides + speaking notes on the
   importance of writing great commit messages.
 

diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <title>Jerb Title Generator</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link href="resources/generator_styles.css" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+    <script src="resources/generator.js"></script>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="jumbotron">
+          <h2>Jerb Title Generator</h2>
+          <p class="lead">Press the button below to generate your jerb title.</p>
+          <p><a class="btn btn-lg btn-success" href="#" role="button" onclick="jerbMe();">Jerb Me</a></p>
+      </div>
+    </div>
+    <div class="container">
+      <div class="jumbotron">
+        <h1 id="jerb"></h1>
+      </div>
+    </div>
+  </body>
+
+</html>
diff --git a/resources/generator.js b/resources/generator.js
@@ -0,0 +1,104 @@
+var adjs = [
+  'Principal',
+  'Head',
+  'Senior',
+  'Chief',
+  'Agile',
+  'DevOps',
+  'Release',
+  'Lead',
+  'Junior',
+  'Former',
+  'Global',
+  'Dynamic',
+  'Human',
+  'Scaled',
+  'Legacy',
+  'Deputy',
+  'Master'
+];
+
+var nouns = [
+  'Cloud',
+  'DevOps',
+  'Release',
+  'Innovation',
+  'Entrepreneurial',
+  'Expansion',
+  'Scalability',
+  'Legacy',
+  'Automation',
+  'Application',
+  'Software',
+  'Infrastructure',
+  'Network',
+  'Optimization',
+  'Quality',
+  'Marketing',
+  'Business',
+  'Agile',
+  'Data',
+  'Information',
+  'Security',
+  'Metrics',
+  'Test',
+  'Quality'
+];
+
+var titles = [
+  'Architect',
+  'Evangelist',
+  'Specialist',
+  'Ninja',
+  'Pirate',
+  'Engineer',
+  'Technician',
+  'Officer',
+  'President',
+  'Swashbuckler',
+  'Prophet',
+  'Entrepreneur',
+  'Hacker',
+  'Curator',
+  'Researcher',
+  'Scientist',
+  'Jedi',
+  'Button-pusher',
+  'Mouse-clicker',
+  'Bean Counter',
+  'Agent',
+  'Facilitator',
+  'Manager',
+  'Meeting Attender',
+  'Intern',
+  'President',
+  'Assistant',
+  'Automator',
+  'Facilitator'
+];
+
+/**
+ *  Returns a random integer between min (inclusive) and max (inclusive)
+ *  Using Math.round() will give you a non-uniform distribution!
+ **/
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function generateJobTitle() {
+  var index1 = getRandomInt(0, adjs.length - 1);
+  var index2 = getRandomInt(0, nouns.length - 1);
+  var index3 = getRandomInt(0, titles.length - 1);
+
+  var adjective = adjs[index1];
+  var noun = nouns[index2];
+  var title = titles[index3];
+
+  return adjective + ' ' + noun + ' ' + title;
+};
+
+function jerbMe() {
+  var jobTitle = generateJobTitle();
+  console.log('Setting job title to', jobTitle);
+  $('#jerb').text( jobTitle );
+}
diff --git a/resources/generator_styles.css b/resources/generator_styles.css
@@ -0,0 +1,89 @@
+body {
+  padding-top: 20px;
+}
+
+.footer {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  margin-top: 40px;
+  border-top: 1px solid #eee;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  background-color: transparent;
+}
+.jumbotron .btn {
+  padding: 14px 24px;
+  font-size: 21px;
+}
+
+/* Customize the nav-justified links to be fill the entire space of the .navbar */
+
+.nav-justified {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+.nav-justified > li > a {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  margin-bottom: 0;
+  font-weight: bold;
+  color: #777;
+  text-align: center;
+  background-color: #e5e5e5; /* Old browsers */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #f5f5f5), to(#e5e5e5));
+  background-image:         linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  border-bottom: 1px solid #d5d5d5;
+}
+.nav-justified > .active > a,
+.nav-justified > .active > a:hover,
+.nav-justified > .active > a:focus {
+  background-color: #ddd;
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
+          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
+}
+.nav-justified > li:first-child > a {
+  border-radius: 5px 5px 0 0;
+}
+.nav-justified > li:last-child > a {
+  border-bottom: 0;
+  border-radius: 0 0 5px 5px;
+}
+
+@media (min-width: 768px) {
+  .nav-justified {
+    max-height: 52px;
+  }
+  .nav-justified > li > a {
+    border-right: 1px solid #d5d5d5;
+    border-left: 1px solid #fff;
+  }
+  .nav-justified > li:first-child > a {
+    border-left: 0;
+    border-radius: 5px 0 0 5px;
+  }
+  .nav-justified > li:last-child > a {
+    border-right: 0;
+    border-radius: 0 5px 5px 0;
+  }
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .masthead,
+  .marketing,
+  .footer {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}