enlineaweb/random-clic-text.html

## random-clic-text.html
<header>

<meta name="viewport" content="width=device-width, initial-scale=1">
</header>
<body>
  <div class="container">
    <section class='wrapper'>
      <h1>Random Generator</h1>
      <h3>Placeholder text </h3>
      <button id="generate-name">Click Here</button>
      <h2>
          <span class='title' id='title-name'></span> <span class='surname' id='sur-name'></span>
      </h2>
    </section>
  </div>
</body>

## random-text-generator.markdown

      
    Raw
  

              random-text-generator.markdown
            
          
    Random Text Generator

Choose randomly from 2 arrays to create your own brand name.
A Pen by Nolan Luna on CodePen.
License.

  
## script.js
var createName = function(titleName, surName) {

var titleList = [
'comodoro', 'diplomata', 'sommelier', 'doutor renato', 'subprefeito', 'dono', 'maestro', 'robespierre', 'foucault', 'erudito', 'drake', 'kendrick', 'kanye', 'professor adjunto', 'Dedé Santanna', 'piloto', 'Ronaldo Angelim', 'sabotage', 'adam smith', 'caramuru', 'âncora', 'herzog', 'coach quântico', 'copolla', 'maria antonieta'];

var surnameList = [
'do Grajaú', 'da Baixada', 'de carreira', 'do afrojazz', 'da escola da vida', 'da federal fluminense', 'da Marvel', 'da Sansalva', 'da feirinha da glicério', 'do circo voador', 'da cobal', 'do ifcs', 'de big field', 'da zona oeste', 'da torcida do flamengo', 'do condomínio', 'de nikity', 'que pilota uber pra complementar a renda', 'que paga meia no cinema', 'que dá teleaula no twitter', 'da Fox News', 'da revista Época', 'de carteira assinada', 'da repartição'];

var randomTitle = titleList[Math.floor(Math.random() * titleList.length)];
$(titleName).html(randomTitle);

var randomSurname = surnameList[Math.floor(Math.random() * surnameList.length)];
$(surName).html(randomSurname);
};

$('#generate-name').on('click', function() {createName('#title-name', '#sur-name');
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
body {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  width: 100%;
  /*background-image: url("https://scontent-ber1-1.xx.fbcdn.net/v/t1.0-9/54377105_2592781334281953_6514650778764836864_n.jpg?_nc_cat=107&_nc_oc=AQkRFEUj2m8lJzxjnhkL7-Tn4FCiT5uJWzvA4PLkwixgpPEjm6LTK7mr8tdKzbn1liSK5GT5vRHwzFkRlnXEKChc&_nc_ht=scontent-ber1-1.xx&oh=980fe7daed07b2634f728a0e8f91ccd3&oe=5E2B2785"); */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 25%;
  background-size: cover;
}

.container {
  height: 600px;
  background: #fff4;
  width: 40%;
  margin: 50px auto;
}

.wrapper {
  padding: 30px 15px 15px;
}

h1 {
  text-align: center;
  font: 400 2.4rem 'Poppins', sans-serif;
  text-transform: uppercase;
  margin: 0 0 40px;
  text-shadow: 2px 2px 4px #333;
}

h2 {
  font: 200 2.6rem 'Poppins', sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .05em;
  padding: 20px 0 0;
}

h3 {
  text-align: center;
  font: 300 1.6rem 'Poppins', sans-serif;
  margin: 0 0 50px;
  letter-spacing: 1px;
}

button {
  font: 400 1.8rem 'Poppins', sans-serif;
  display: block;
  text-align: center;
  border-radius: 0;
  border: 4px solid #111;
  background: transparent;
  padding: 20px 40px;
  margin: 0 auto;
  outline: none;
}

@media(max-width:740px) {
  .container {
  height: 100%;
  background: #fff4;
  width: 100%;
  margin: 0 auto;
  }
  .wrapper {
    width: 100%;
    height:100%;
    margin: 0;
  }


  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 2.4rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  button {
    font-size: 1.4rem
  }
}
	<header>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	</header>
	<body>
	<div class="container">
	<section class='wrapper'>
	<h1>Random Generator</h1>
	<h3>Placeholder text </h3>
	<button id="generate-name">Click Here</button>
	<h2>
	<span class='title' id='title-name'></span> <span class='surname' id='sur-name'></span>
	</h2>
	</section>
	</div>
	</body>
	var createName = function(titleName, surName) {

	var titleList = [
	'comodoro', 'diplomata', 'sommelier', 'doutor renato', 'subprefeito', 'dono', 'maestro', 'robespierre', 'foucault', 'erudito', 'drake', 'kendrick', 'kanye', 'professor adjunto', 'Dedé Santanna', 'piloto', 'Ronaldo Angelim', 'sabotage', 'adam smith', 'caramuru', 'âncora', 'herzog', 'coach quântico', 'copolla', 'maria antonieta'];

	var surnameList = [
	'do Grajaú', 'da Baixada', 'de carreira', 'do afrojazz', 'da escola da vida', 'da federal fluminense', 'da Marvel', 'da Sansalva', 'da feirinha da glicério', 'do circo voador', 'da cobal', 'do ifcs', 'de big field', 'da zona oeste', 'da torcida do flamengo', 'do condomínio', 'de nikity', 'que pilota uber pra complementar a renda', 'que paga meia no cinema', 'que dá teleaula no twitter', 'da Fox News', 'da revista Época', 'de carteira assinada', 'da repartição'];

	var randomTitle = titleList[Math.floor(Math.random() * titleList.length)];
	$(titleName).html(randomTitle);

	var randomSurname = surnameList[Math.floor(Math.random() * surnameList.length)];
	$(surName).html(randomSurname);
	};

	$('#generate-name').on('click', function() {createName('#title-name', '#sur-name');
	});
	body {
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
	width: 100%;
	/background-image: url("https://scontent-ber1-1.xx.fbcdn.net/v/t1.0-9/54377105_2592781334281953_6514650778764836864_n.jpg?_nc_cat=107&_nc_oc=AQkRFEUj2m8lJzxjnhkL7-Tn4FCiT5uJWzvA4PLkwixgpPEjm6LTK7mr8tdKzbn1liSK5GT5vRHwzFkRlnXEKChc&_nc_ht=scontent-ber1-1.xx&oh=980fe7daed07b2634f728a0e8f91ccd3&oe=5E2B2785"); /
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 25%;
	background-size: cover;
	}

	.container {
	height: 600px;
	background: #fff4;
	width: 40%;
	margin: 50px auto;
	}

	.wrapper {
	padding: 30px 15px 15px;
	}

	h1 {
	text-align: center;
	font: 400 2.4rem 'Poppins', sans-serif;
	text-transform: uppercase;
	margin: 0 0 40px;
	text-shadow: 2px 2px 4px #333;
	}

	h2 {
	font: 200 2.6rem 'Poppins', sans-serif;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .05em;
	padding: 20px 0 0;
	}

	h3 {
	text-align: center;
	font: 300 1.6rem 'Poppins', sans-serif;
	margin: 0 0 50px;
	letter-spacing: 1px;
	}

	button {
	font: 400 1.8rem 'Poppins', sans-serif;
	display: block;
	text-align: center;
	border-radius: 0;
	border: 4px solid #111;
	background: transparent;
	padding: 20px 40px;
	margin: 0 auto;
	outline: none;
	}

	@media(max-width:740px) {
	.container {
	height: 100%;
	background: #fff4;
	width: 100%;
	margin: 0 auto;
	}
	.wrapper {
	width: 100%;
	height:100%;
	margin: 0;
	}


	h1 {
	font-size: 1.6rem;
	}
	h2 {
	font-size: 2.4rem;
	}
	h3 {
	font-size: 1.2rem;
	}
	button {
	font-size: 1.4rem
	}
	}