JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/task.js/0.0.24/task.min.js"></script>
<head>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

   <h1>
      Good Bot <i style="color: #4b9b00" class="far fa-smile"></i> / Bad Bot <i style="color: #9e1c00"class="far fa-angry"></i>
   </h1>
</head>
<body>
   <div id ="main">
      <!-- template for the modal component -->
      <script type="text/x-template" id="modal-template">
         <transition name="modal">
           <div class="modal-mask">
             <div class="modal-wrapper">
               <div class="modal-container">
         
                 <div class="modal-header">
                   <slot name="header">
                     default header
                   </slot>
                 </div>
         
                 <div class="modal-body">
                   {{ hackedMessage }}
                 </div>
         
                 <div class="modal-footer">
                   <slot name="footer">
                     <button class="modal-default-button" @click="$emit('close')">
                       OK
                     </button>
                   </slot>
                 </div>
               </div>
             </div>
           </div>
         </transition>
      </script>
      <!-- app -->
      <div id="app">
         <!-- use the modal component, pass in the prop -->
         <modal v-if="showModal"...

CSS

body
{
  padding: 15px;
  text-align: center;
}

h1
{
  font-size: 48px;
}
ul{
  text-align: left;
}

input{
  
}

#encryptedDisplay{
  font-family: "Lucida Console", Monaco, monospace;
  color: #4842f4;
  word-wrap: break-word;
}

#encyptionChoices{
  text-align: left;
}

#goodBotBox{
  border-color: #4b9b00;
  border-style: solid;
  border-width: 5px;
  border-radius: 15px;
  margin: 5px;
  padding: 5px;
}

#badBotBox{
  border-color: #9e1c00;
  border-style: solid;
  border-width: 5px;
  border-radius: 15px;
  margin: 5px;
  padding: 5px;
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
  text-align: center;
}

.listNoBullets{
  list-style-type: none;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 600px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #9e1c00;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

JavaScript

/*var message = 'message';
var secret = 'secret';
var encrypted = CryptoJS.HmacSHA1(message, secret);

$('#message').text(message);
$('#messageLength').text(message.length);
$('#encrypted').text(CryptoJS.enc.Base64.stringify(encrypted));*/

var vm = new Vue({
   el: '#main',
   data: {
   		previousQuestion: "",
   	  currentQuestion: "What is your name?",
      questions: ["What is your name?", 
      						"Where are you from?",
                  "How old are you?",
                  "What do you do for a living?",
                  "What's your favorite food?",
                  "Do you have children?",
                  "What country do you live in?",
                  "Do you have any pets?",
                  "What is your gender?",
                  "What is your address?"],
      questionsAnswered: [],
      encryptionChoice: "Vigenere",
      showChooseEncryptionMessage: false,
      previousAnswer: "",
      currentAnswer: "",
      answers: [],
      knowledge: [],
      hackedMessage: "",
      hackedMessageList: [],
      outOfQuestions: false,
      //vigenere cipher data
      alphabet_array: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", ",", "?", "!", "\'", "_", "-", "&", "@", "#", "$", "%", "*", "(", ")", " "],
      caesar_key: ["(", ")", " ", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", ",", "?", "!", "\'", "_", "-", "&", "@", "#", "$", "%", "*"],
      is_encrypting: 'true',
      encrypt_input: "",
      decrypt_input: "SN1PTPV6K_7LQXZ0NMW",
      message: '',
      key: 'SECRETKEY!',
      //utility data:
      showModal: false,
      shaMessage: 'message',
			secret: 'a',
			shaEncrypted: '',
      caesarEncrypted: '',
      caesarDecrypted: '',
     ...