JSFiddle - React, Tailwind, and code Playground

by valerich_dev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;1,500;1,600&amp;display=swap" type="text/css">
</head>
<body>
  <a href="#" onclick="location.reload(); return false;">
    Обновить страницу
  </a>
	<div class="ya-disk">
		<div class="ya-disk__breadcrumbs"></div>
		<div class="ya-disk__container"></div>
	</div>
	<script src="js/fetch.js"></script>
</body>
</html>

CSS

body {
  background: #f2f2f2;
}

body > a {
  display: block;
  width: fit-content;
  margin: 20px;
  padding: 10px 20px;
  border: 1px solid #AAAAAA;
  border-radius: 5px;
  font: 600 11px 'Raleway',Arial,sans-serif;
  color: #999999;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .5s ease .2s;
}

body > a:hover {
  background: #ffffff;
  transition-delay: 0s;
}

#rec453629198 .t-width_100 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ya-disk {
  width: 100%;
  max-width: 1160px;
  height: fit-content;
  margin: 50px auto 70px ;
  overflow-x: hidden;
  font: 400 14px 'Raleway',Arial,sans-serif;
}

.ya-disk .ya-disk__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 20px;
  justify-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 150px;
  color: #292829;
  font-size: 14px;
  line-height: 1.55;
}

.ya-disk .ya-disk__breadcrumbs {
  display: none;
  padding: 10px;
  background: rgb(233, 233, 233);
}

.ya-disk .ya-disk__container div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  width: 100%;
  min-height: 150px;
  padding: 30px;
  border-radius: 12px;
  text-transform: uppercase;
  background: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.5s!important;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.ya-disk .ya-disk__container div:hover {
  box-shadow: 0px 7px 21px -12px rgb(20 20 20 / 50%);
}

.ya-disk .ya-disk__container .ya-disk_media-file {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-flow: column nowrap;
  cursor: default;
}

.ya-disk .ya-disk__container div audio {
  width: 100%;
  height: 40px;
}

.ya-disk a {
  display: block;
  margin-bottom: 5px;
  color: #292829;
  text-decoration: underline;
  text-transform: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #222222 #f2f2f2;
}

*::-webkit-scrollbar {
  height: 6px;
  width:...

JavaScript

"use strict";
document.addEventListener("DOMContentLoaded", () => {
	const diskUrl = "https%3A%2F%2Fyadi.sk%2Fd%2FwOSJHCiF7jqkuA";
	const token = "AgAAAABDfkRGAADLW5evFNs00kgZkhdOsEaTunY";

	const diskHost = "https://cloud-api.yandex.net/v1/disk/public/";
	const diskContainer = document.querySelector(".ya-disk__container");

	async function getDirectory(diskUrl, token, path, rewrite) {
		try {
			let response = await fetch(`${diskHost}resources?public_key=${diskUrl}&path=${path}&limit=1000`,{
				referrerPolicy: "no-referrer",
				headers: {
					Authorization: "OAuth " + token
				}
			});
			let data = await response.json();

			const diskElem = data._embedded.items;

			rewrite == true ? (diskContainer.innerHTML = "") : "";

			data.path == "/" ? (path = "") : (path = data.path);

			for (let i = 0; i < diskElem.length; i++) {
				let yaDiskChildDiv = document.createElement("div");
				yaDiskChildDiv.innerHTML = JSON.stringify(diskElem[i].name).replace(/['"]/gi, "");
				diskContainer.append(yaDiskChildDiv);
			}

			for (let i = 0; i < diskContainer.childNodes.length; i++) {

				if (diskElem[i].media_type == "audio") {
					try {
						let response2 = await fetch(`${diskHost}resources/download?public_key=${diskUrl}&path=${diskElem[i].path}&limit=1000`, {
							referrerPolicy: "no-referrer",
							headers: {
								Authorization: "OAuth " + token
							}
						});
						data = await response2.json();

						console.log(data);

						diskContainer.style.justifyContent = "flex-start";
						diskContainer.childNodes[i].classList.add("ya-disk_media-file");
						diskContainer.childNodes[i].innerHTML = `<a href="${data.href}">${diskElem[i].name}</a><audio preload="metadata" controls><source src="${data.href}" type="${diskElem[i].mime_type}"></audio>`;

					} catch (error) {
						console.error(error);
					}
				}
				diskContainer.childNodes[i].addEventListener("click", () => {
					getDirectory(diskUrl, token, diskElem[i].path,...