Letter Boxed Words-to-Binary Tweet Generator Tutorial

index.js

import React, { useState } from 'react';

const TweetGenerator = () => {
  const [words, setWords] = useState('');
  const [output, setOutput] = useState('');

  const wordToBinary = (word) => word
      .split('')
      .map((w) => w.charCodeAt(0).toString(2))
      .join(' ');

  const generateTweet = () => {
    const wordsArr = words.split('\n').map((w) => w.toUpperCase());
    const binary = wordsArr.map(wordToBinary).join('<br />');
    const d = new Date();
    const month = d.getMonth() + 1;
    const day = d.getDate();
    const year = d.getFullYear() % 100;
    const date = `${month}/${day}/${year}`;
    setOutput(`#LetterBoxed ${date}:<br />${binary}`);
  };
  return (
    <div>
      <textarea
        rows={10}
        cols={20}
        value={words}
        onChange={(e) => setWords(e.target.value)}
      />
      <br />
      <button onClick={generateTweet}>Generate tweet</button>
      <div dangerouslySetInnerHTML={{ __html: output }} />
    </div>
  );
};