В этой серии статей мы покажем вам, как создать собственный инструмент для языковой практики и словарные карточки с помощью HTML/CSS/JS. Вы можете создать свою словарную базу данных в Google Sheet, получить к ней доступ через API Google и повторно просмотреть эти словари (например, пары англо-китайских или английских изображений и т. д.).

Шаг 0. Вы можете проверить этот пост, чтобы понять, как настроить Google API для доступа к данным, хранящимся в Google Sheet, в формате JSON.

Шаг 1: HTML-часть, внешний интерфейс.

  • Включите Bootstrap 5.0.2 и Jquery 3.1.0.
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" ></script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      
  </head>
  • Тело
<body>
    <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">…