<h1>โลเร็มอิพซัม ภาษาไทย [Startup Edition V1]</h1>
<div class="button-wrapper">
  <button id="generateHead">Generate Heading</button>
  <button id="generatePara">Generate Paragraph</button>
</div>

<textarea name="" id="textgen" cols="30" rows="10"></textarea>

<div class="footer">
  <p>ส่งลิสต์คำเพิ่มเติม ติชม แนะนำ ได้ที่ admin@designil.com นะฮะ</p>
  <p>Coded by <a href="http://www.designil.com">Perth</a>. Idea by <a href="https://www.facebook.com/photo.php?fbid=10153744586772006&set=a.375879542005.155784.712242005&type=3">Chakkrisn, Montri, Jenny, Tree</a></p>
</div>
@import 'https://fonts.googleapis.com/css?family=Prompt';

body {
  font-family: 'Prompt', sans-serif;
  background: #DFF68F;
}

a {
  color: #523A49;
}

h1 {
  font-size: 30px;
  text-align: center;
  color: #523A49;
  text-shadow: 2px 2px 0 #ACA5AA;
  margin-bottom: 30px;
}

.button-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#generateHead,
#generatePara {
  display: block;
  padding: 20px 30px;
  border: 1px solid #000;
  background: transparent;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 10px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 0 #000;
  outline: 0;
  
  &:hover {
    background: #523A49;
    color: #fff;
    box-shadow: 6px 6px 0 #ACA5AA;
  }
}

#textgen {
  display: block;
  width: 80%;
  margin: 20px auto;
  height: 300px;
  font-size: 18px;
  font-family: 'Prompt', sans-serif;
}

.footer {
  margin-top: 40px;
  text-align: center;
}
$(document).ready(function() {
  $('#generateHead').on('click', function() {
    // Generate lorem
    let lorem = generateLorem( 8, 10 );
    // Show in textbox
    $('#textgen').val( lorem );
  });
  
  $('#generatePara').on('click', function() {
    let lorem = generateLorem( 100, 200 );
    $('#textgen').val( lorem );
  });
});

function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generateLorem( min_length = 5, max_length = 20 ) {
  let wordlist = [
    'มุ่งมั่น', 'พัฒนา', 'อาเซียน', 'วิสัยทัศน์', 'พันธกิจ', 'บูรณาการ', 'ประชารัฐ', 'สตาร์ทอัพ', 'เอสเอ็มอี', 'ผสมผสาน', 'สนธิกำลัง', 'บริหาร', 'จัดการ',
    'สร้างสรรค์', 'ก้าวหน้า', 'ล้ำสมัย', 'ยุคใหม่', 'เป้าหมาย', 'กระแส', 'ระดับสากล', 'โลกาภิวัฒน์', 'ลงทุน', 'เทคโนโลยี', 'นวัตกรรม', 'วาทกรรม', 'จิตวิญญาณ', 'สุขภาวะ', 'วิสาหกิจ', 'พลเมือง', 'คุณธรรม', 'จริยธรรม'
  ];
  let paragraph = '',
      sentence_count = 0,
      sentence_max = 5,
      sentence_wordcount = 0,
      sentence_long = 5,
      sentence_chanceofcut = 50,
      sentence_maxword = 8,
      sentence_wordindexes = [];
  
  let rand_length = getRandomIntInclusive(min_length, max_length)
  for(let i = 0; i <= rand_length; i++) {
    let thisword = Math.floor( Math.random() * wordlist.length );
    if(sentence_wordindexes.indexOf(thisword) != -1) {
      i--;
      continue;
    }
    sentence_wordcount++;
    if(sentence_wordcount > sentence_long) {
      if(sentence_wordcount > sentence_maxword) {
        // Cut in the instant
        paragraph += ' ';
        sentence_wordcount = 0;
        sentence_wordindexes = [];
        // Check for new paragraph
        sentence_count++;
        if(sentence_count > sentence_max) {
          paragraph += "\n\n";
          sentence_count = 0;
        }
      } else {
        // Random to cut
        if(Math.random()*100 > sentence_chanceofcut) {
          // Cut it
          paragraph += ' ';
          sentence_wordcount = 0;
          sentence_wordindexes = [];
          // Check for new paragraph
          sentence_count++;
          if(sentence_count > sentence_max) {
            paragraph += "\n\n";
            sentence_count = 0;
          }
        }
      }
    }
    paragraph += wordlist[ thisword ];
    sentence_wordindexes.push( thisword );
  }
  
  return paragraph;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js