flashcard v1

by bvotcode

HTML

<!-- BOOTSTRAP 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- ANIMATE CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>


<br>
<br>

<div id="contentforflashcard"></div>

<script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

CSS

.cardfront {
  width:100%;
  min-height:300px;
  display: table;
  color: red;
}
.cardback {
  width:100%;
  min-height:300px;
  display: table;
  color: blue;
  background-color: red;
  border-style: solid;
  border-color: coral;
}
.cardfront h3 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: black;
  background-color: powderblue;
  border-style: solid;
  border-color: coral;
  
}
.atomic-number {
			position: absolute;
			margin-top:1vmin;
			margin-left: 10vmin;
			font-size: 10;
      }
.cardback h3 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: blue;
  border-style: solid;
  border-color: coral;
  
}
.cardfast {
  animation-duration: .5s;
}
.flashcard {
  cursor:pointer;
}

JavaScript

//var vocabulary_data = [{"Number":"1","Vietnam":"a1111","English":"b1111","audio":"c1111"},{"Number":"2","Vietnam":"a2222"}];
let vocabulary_rawData = '[{"Number":1,"English":"abc","Vietnam":"Chưa nhập","audio":""},{"Number":2,"English":"Fear of missing out FOMO","Vietnam":"Hội chứng sợ bỏ lỡ, sợ mất cơ hội","audio":""}]';
let vocabulary_jsonData = JSON.parse(vocabulary_rawData);

let vocabulary_dau_tien = vocabulary_jsonData[0];
let tieng_viet_dau_tien = vocabulary_dau_tien["Vietnam"];
let tieng_anh_dau_tien = vocabulary_dau_tien["English"];

let vocabulary_thu_hai = vocabulary_jsonData[1];
let tieng_viet_thu_hai = vocabulary_thu_hai["Vietnam"];
let tieng_anh_thu_hai = vocabulary_thu_hai["English"];




//var vocabulary_json = JSON.parse(vocabulary_data);
//var vocabulary_json = JSON.parse(vocabulary_data);

var targetDiv = document.getElementById('contentforflashcard');

        var htmlContent =  '<div class="container">' +
'<div class="row">' +
'<div class="col-sm">' +
'        <div class="flashcard">' +

'            <div class="p-3 cardfront border">' +
'<span class="atomic-number">'+"100"+'</span>' +
' <h3>' + 'english đàu tiên' +'</h3>' +
'            </div>' +
'            <div class="p-3 cardback border">' +
'<span class="atomic-number">'+"100"+'</span>' +
'              <p>'+tieng_viet_dau_tien+'</p>' +
'            </div>' +
'        </div>' +
'    </div>' +
'<div class="col-sm">' +
'        <div class="flashcard">' +
'            <div class="p-3 cardfront border">' +
'              <h3>'+tieng_anh_thu_hai+'</h3>' +
'            </div>' +
'            <div class="p-3 cardback border">' +
'              <p>'+tieng_viet_thu_hai+'</p>' +
'            </div>' +
'        </div>' +
'    </div>' +

' </div><!-- end row -->' +

'</div><!-- end container -->' 

        targetDiv.innerHTML = htmlContent;
        
        
        $('.cardback').hide();

//.delay(3000)

$('.cardfront', '.flashcard').hover(function() {
    $(this).hide();
   ...