В этой серии статей мы покажем вам, как создать собственный инструмент для языковой практики и словарные карточки с помощью 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">…