<div id="generateGibberishApp"></div>
html {
  background: #170440;
  color: #fffed9;
  text-align: center;
}

a,
button {
  cursor: pointer;
}

.phraseTitle {
  font-size: 18px;
  margin-top: 30px;
}

.phraseSpace {
  height: 120px;
  margin: 0 auto;
  width: 350px;
}

.phrase {
  color: #fff;
  padding-top: 10px;
}

.phraseButton {
  background: #fffed9;
  border: none;
  border-radius: 40px;
  color: #170440;
  font-size: 24px;
  font-style: italic;
  padding: 15px 30px;
}

.sliderSpace {
  margin-top: 22px;
}

.sliderSpace label {
  margin-right: 10px;
}

.sliderHighlight {
  background-color: #000;
  border: 1px solid #fffed9;
  border-radius: 8px;
  display: inline;
  padding: 5px 4px 1px 4px;
}

#phraseLengthSlider {
  vertical-align: bottom;
}

.currentLengthDisplay {
  margin-left: 10px;
}

.lowerButtonRow {
  margin-top: 46px;
}

.twitterButton {
  background-color: #fff;
  border: none;
  border-radius: 10px;
  color: #170440;
  margin-right: 22px;
  padding: 10px 42px 6px 42px;
  text-decoration: none;
}

.resetButton {
  background-color: #000;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 10px 42px;
}
console.clear();
const {useReducer} = React;

const APP_TITLE = 'Technical Gibberish Maker';
const MAIN_BUTTON_TEXT = 'Generate Gibberish';
const SLIDER_LABEL = 'Adjust Length of Phrase';

const DEFAULT_PHRASE_PLACEHOLDER = 'Click the button to generate an absurd phrase of techno-gibberish.';
const DEFAULT_PHRASE_LENGTH = 5;

const INITIAL_STATE = {phrase: DEFAULT_PHRASE_PLACEHOLDER,
                       length: DEFAULT_PHRASE_LENGTH,
                       showTweetButton: false
                      };
const WORDS = [
  'leverage',
  'blockchain',
  'technological',
  'quantum',
  'robotics',
  'computing',
  'computational',
  'deliverables',
  'smart',
  'internet',
  'augmented',
  'virtual',
  'voice',
  'machine',
  'artificial',
  'data',
  'net',
  'big',
  'neutrality',
  'recognition',
  'reality',
  'things',
  'of',
  'industry',
  'intelligence',
  'analytics',
  'real',
  'live',
  'time',
  'learning',
  'actionable',
  'server',
  'maintain',
  'users',
  'end',
  'built',
  'in',
  'with',
  'mind',
  'forward',
  'thinking',
  'driven',
  'first',
  'scalable',
  'accountable',
  'human',
  'bots',
  'third-party',
  'dependancies',
  'sustainable',
  'fluid',
  'system',
  'failure',
  'anticipated',
  'future',
  'mining',
  'bitcoin',
  'crypto',
  'international',
  'borderless',
  'campaign',
  'initiative',
  'accelerated',
  'upload',
  'download',
  'load',
  'balance',
  'render',
  'down-time',
  'reducer',
  'minimize',
  'maximize',
  'down',
  'up',
  'upscale',
  'relational',
  'database',
  'latest',
  'responsive',
  'adaptive',
  'mobility',
  'mobile',
  'robust',
  'tools',
  'payload',
  'errors',
  'fallback',
  'top',
  'lower',
  'level',
  'outbound',
  'inbound',
  'client',
  'side',
  'fix',
  'fractured',
  'solid',
  'weight',
  'make',
  'utilize',
  'utilities',
  'hack',
  'technologies',
  'technology',
  'energize',
  'reboot',
  'kernal',
  'serial',
  'bus',
  'random',
  'access',
  'memory',
  'storage',
  'set',
  'agile',
  'community',
  'communication',
  'layers',
  'environment'
];

const TWITTER_URL = 'https://twitter.com/intent/tweet';
const TWITTER_BUTTON_TEXT = 'Tweet this Gibberish';
const URL_TO_TWEET = 'https://codepen.io/DamienL/pen/KKdBRJK';
const TWITTER_VIA = "DamienL1213";

const phraseReducer = (state, action) => {
  switch(action.type) {
    case 'GENERATE_PHRASE': {
      const tempArray = [];
      for (let step = 0; step < state.length; step++) {
        tempArray.push(action.array[Math.floor(Math.random()*action.array.length)]);
      };
      const stringFromArray = tempArray.join(' ');
      const newPhrase = stringFromArray.charAt(0).toUpperCase() + stringFromArray.slice(1) + '.';
      return {
        ...state,
        phrase: newPhrase,
        showTweetButton: true
      };
    };
      
    case 'ADJUST_LENGTH': {
      return {
        ...state,
        length: action.newLength
      };
    };
    
    case 'RESET': {
      return action.newState;
    };

    default: {
      throw `Unknown action: ${action.type}`;
    };
  }
};

const TwitterButton = (props) => (
  <a className="twitterButton" 
    href={`${props.twitterURL}?text=${props.toTweet}%0a%0aGenerate%20your%20own%20gibberish%20with%20this:%20&url=${props.urlToTweet}&hashtags=CodePen&via=${props.twitterVia}`} 
    target="_blank">
      {props.twitterButtonText}
  </a>
);

TwitterButton.propTypes = {
  twitterURL: PropTypes.string.isRequired,
  toTweet: PropTypes.string.isRequired,
  urlToTweet: PropTypes.string.isRequired,
  twitterVia: PropTypes.string.isRequired,
  twitterButtonText: PropTypes.string.isRequired
};

const App = (props) => {
  const [state, dispatch] = useReducer(phraseReducer, INITIAL_STATE);
  
  return (
    <div>
      <p className={`${props.nameSpace}Title`}>- {APP_TITLE} -</p>
      <div className={`${props.nameSpace}Space`}>
        <h2 className={props.nameSpace}>
          {state.phrase}
        </h2>
      </div>
      
      <button className={`${props.nameSpace}Button`} onClick={() => dispatch({type: 'GENERATE_PHRASE', array: WORDS})}>
        {MAIN_BUTTON_TEXT}
      </button>
      
      <div className="sliderSpace">
        <label for="lengthSlider">{SLIDER_LABEL}</label>
        
        <div className="sliderHighlight">
          <input 
            id="phraseLengthSlider"
            name="lengthSlider"
            type="range"
            min="3" max="7"
            value={state.length}
            onChange={(e) => dispatch({
              type: 'ADJUST_LENGTH',
              newLength: e.target.value
            })}
          />
        </div>
        
        <span className="currentLengthDisplay">({state.length} words)</span>
      </div>
      
      <div className="lowerButtonRow">
        {state.showTweetButton === true && 
          <TwitterButton toTweet={state.phrase} 
            twitterURL={TWITTER_URL}
            twitterButtonText={TWITTER_BUTTON_TEXT}
            urlToTweet={URL_TO_TWEET}
            twitterVia={TWITTER_VIA}
         />}
        <button className="resetButton" onClick={(e) => dispatch({type: 'RESET', newState: INITIAL_STATE})}>reset</button>
      </div>
    </div>
  );
};

App.propTypes = {nameSpace: PropTypes.string.isRequired};

ReactDOM.render(<App nameSpace="phrase" />, document.getElementById('generateGibberishApp'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js