JSFiddle - React, Tailwind, and code Playground

by hlim188

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4.1.x -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
    <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script type="text/javascript" src="script.js"></script>

    <!-- sweetalert2 -->
    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
    <!-- CSS -->
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css'>
</head>
<body>
    <!-- force to refresh the page : in order to update SweetAlert messages -->
    <button class="translate langBtn" id="en-us" value="Refresh Page" onClick="window.location.reload()">English</button>
    <button class="translate langBtn" id="ko" value="Refresh Page" onClick="window.location.reload()">한국어</button>

    <div class="container">
        <button type="button" id="test">test</button>
        <div class="options withoutInput" id="option1"><p class="lang" key="firstOption"></p></div>
...

CSS

body{
  font-family: 'Poor Story', sans-serif;
}

#test{
   cursor: pointer;
   display: block;
   text-align: center;
   position: absolute;
   display: flex;
   left: 50%;
   top: 50%; 
   transform: translate(-50%, -50%);
}
.options {
    background: #f7f7f5;
    display: none;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%; 
    border-radius: 50%;
    border-style: solid;
    border-color: #F3C78D;
    width: 60px;
    height: 60px;
    font-size: 12px;
}

.options > p {
    color: #000000;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
   left: 50%;
   top: 50%; 
   transform: translate(-50%, -50%);
}

#option1{
    transform: translate(-100%, -150%);
}

#option2{
    transform: translate(-160%, -40%);
}

#option3{
    transform: translate(-50%, 50%);
}

#option4{
    transform: translate(60%, -40%);
}

#option5{
    transform: translate(15%, -150%);
}

#option5{
    transform: translate(15%, -150%);
}

JavaScript

var arrLang = {
  "en-us": {
    "firstOption" : "Lonesome road",
    "secondOption" : "Too Dark",
    "thirdOption" : "There was an incident",
    "fourthOption" : "Red-light district",
    "fifthOption" : "Etc",
    "cancelMsgTitle" : 'Are you sure?',
    "cancelConfirmMsgTitle" : 'Recorded!',
    "cancelConfirmMsgText" : 'Your input has been deleted.',
    "textboxMsgTitle" : "Why do you feel unsafe here?",
    "textboxMsgInputPlaceholder" : "Type your message :)",
    "textboxMsgInputValidator" : "You need to write something!",
    "textboxMsgValidationMsg" : "You entered",
  },
  "ko": {
    "firstOption" : "인적이 드물어요",
    "secondOption" : "어두워요",
    "thirdOption" : "사고가 난 적 있어요",
    "fourthOption" : "유흥가에요",
    "fifthOption" : "기타",
    "cancelMsgTitle" : '삭제하실건가요?',
    "cancelConfirmMsgTitle" : '기록되었습니다!',
    "cancelConfirmMsgText" : '의견이 삭제되었습니다.',
    "textboxMsgTitle" : "왜 이곳이 위험하다고 생각하시나요?",
    "textboxMsgInputPlaceholder" : "의견을 작성해주세요 :)",
    "textboxMsgInputValidator" : "아무것도 적지 않으셨어요!",
    "textboxMsgValidationMsg" : "입력하신 의견이에요",
  }
};

// The default language is English
var lang = "en-us";
// Check for localStorage support
if('localStorage' in window){
   var usrLang = localStorage.getItem('uiLang');
   if(usrLang) {
       lang = usrLang
   }

}

$(document).ready(function() {

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });

  // get/set the selected language
  $(".translate").click(function() {
    var lang = $(this).attr("id");

    // update localStorage key
    if('localStorage' in window){
         localStorage.setItem('uiLang', lang);
         console.log( localStorage.getItem('uiLang') );
    }

    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
	});

  $('#test').click(function(){
        // // // CANCEL button START
        // // "cancel message START for "option1"
        $("#option1").fadeToggle()
           ...