Random Name Generator Assignment

index.html

<div id='nametag'>
  <h1><b>Hello</b></h1>
  <h2>my name is</h2>
  <div id='bodybox'>
    <br><b> Goal: Build a function that returns a random name.</b>
    <br>
    <br> Use the return command to have a function output a random name string.  Return will make it easier to reuse your code in different projects.
    <br>
    <br> Here's how you could start:
    <pre><code>function randomName(){
  return 'puppy';
}

console.log(randomName());
  </pre></code>


    </ul>
    <p><b>Ideas:</b></p>
    <li>Choose a theme</li>
    <li><a href="https://en.wikipedia.org/wiki/English_honorifics">Honorifics</a>?</li>
    <li>Fill an array with strings and pick a random element from the array</li>
    <pre><code>var names = ['John','Sansa','Arya','HODOR'];
return names[Math.floor(Math.random()*(names.length))];</pre></code>
    <li>add two strings together with +
      <pre><code>var firstName = 'Daenerys';
var lastName = 'Targaryen';
return firstName + ' ' + lastName;</pre></code>
  <li>build new names from random combinations of letters</li>
    <pre><code>var txt = "";
var char = "abcdefghijklmnopqrstuvwxyz";
txt += char.charAt(Math.floor(Math.random()*char.length));
</pre></code>  
  
<li><a href="https://www.w3schools.com/js/js_strings.asp">tutorial on strings</a></li>
    <li><a href="https://www.w3schools.com/js/js_string_methods.asp">string methods</a></li>
    <li><a href="https://www.w3schools.com/jsref/jsref_obj_string.asp">string reference</a></li>
    
  </div>
</div>

random-name-generator-assignment.markdown

Random Name Generator Assignment

A Pen by Landgreen on CodePen.

License.

style.css

body {
  font: 15px arial, sans-serif;
  background-color: #d0f4f8;
  padding-top: 0px;
}

#bodybox {
  margin: auto;
  max-width: 550px;
  font: 15px arial, sans-serif;
  background-color: white;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-right: 25px;
  padding-left: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#nametag {
  margin: auto;
  max-width: 550px;
  font: 15px arial, sans-serif;
  background-color: #ff4d4d;
  padding-top: 10px;
  padding-bottom: 25px;
  padding-right: 0px;
  padding-left: 0px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 30px;
}

pre {
  background-color: #f0f0f0;
  margin-left: 20px;
}

h1 {
  font: 82px arial, sans-serif;
  color: white;
  margin: auto;
  text-align: center;
  line-height:90%;
}

h2 {
  font: 40px arial, sans-serif;
  color: white;
  margin: auto;
  text-align: center;
  line-height:90%;
}