JSFiddle - React, Tailwind, and code Playground

by hlim188

CSS

#mapBackground, #mapBackground1, #mapBackground2, #mapBackground3, #mapBackground4, #mapBackground5, #mapBackground6 {
  background: black;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 110;
}

/* mainEvent.js */
#sampledanger{
  position: absolute;
}

/* mapsetting.js */
#safeDot{
  position: absolute;
} 

#tutorialGreen{
  color: white;
  font-weight: bold;
  font-size: 30px;
  z-index: 111;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#tutorialOrange1{
  color: white;
  font-weight: bold;
  font-size: 30px;
  z-index: 111;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#tutorialOrange2{
  color: white;
  font-weight: bold;
  font-size: 30px;
  z-index: 111;
  background: transparent;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#tutorialTab{
  color: white;
  font-weight: bold;
  font-size: 30px;
  z-index: 111;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

$(document).ready(function(){

  // // * language setting START
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
    
  // // get/set the selected language
  // // what happens after clicking the "English" or "한국어" button
  $(".translate")
      .on({
          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")]);
              });
  // // * language setting END
          }
          // // "click" END
      });
      // "on" END
 
  $("#tutorialGreen").hide();
  $("#tutorialOrange1").hide();
  $("#tutorialOrange2").hide();
  $("#tutorialTab").hide();

  $("#mapBackground").hide();
  $("#mapBackground2").hide();
  $("#mapBackground3").hide();
 
 // tutorial page 1 : safe areas
  $('#tutorialMenu').click(function(){
    $("#sideNav")[0].style.width = "0px";
    $("#mapBackground").fadeIn();
    $("#tutorialGreen").fadeIn();
    $("#safeDot").css("z-index", 111);

  // tutorial page 2 : crime-ridden areas
  $('#mapBackground').click(function(){
    $("#tutorialGreen").fadeOut();
    $("#mapBackground").fadeOut();
    $("#safeDot").css("z-index", 110);

    $("#mapBackground2").fadeIn();
    $("#tutorialOrange1").fadeIn();
    $("#tutorialOrange2").fadeIn();
    $("#sampledanger").css("z-index", 111);
  });

  // tutorial page 3 : tab the map!
  $('#mapBackground2').click(function(){
    $("#mapBackground2").fadeOut();
    $("#tutorialOrange1").fadeOut();
    $("#tutorialOrange2").fadeOut();
    $("#sampledanger").css("z-index", 110);

    $("#mapBackground3").fadeIn();
    $("#tutorialTab").fadeIn();
  });

});