JSFiddle - React, Tailwind, and code Playground

by Boros

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">
    <script src="https://kit.fontawesome.com/c982930f83.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/index.css">
    <title>Test</title>
</head>

<body>
    <div id="gallery">
        <img src="https://i.imgur.com/gyVTo26.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/bEo04qh.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/iRENtzp.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/ElkQu54.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/Aj25iuv.jpg" alt="" tabindex="1">
        <div id="video_container">
            <video src="https://i.imgur.com/kKGF9Az.mp4" tabindex="1" muted></video>
            <i class="fas fa-play"></i>
        </div>
        <div id="video_container">
            <video src="https://i.imgur.com/p7ohLnA.mp4" tabindex="1" muted></video>
            <i class="fas fa-play"></i>
        </div>
        <img src="https://i.imgur.com/PxWajo9.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/CAh7F8p.jpg" alt="" tabindex="1">
    </div>

    <div id="my_modal">
            <div class="my_slides">
                <img src="https://i.imgur.com/gyVTo26.jpg" alt="">
            </div>
            <div class="my_slides">
                <img src="https://i.imgur.com/bEo04qh.jpg" alt="">
            </div>
            <div class="my_slides">
                <img src="https://i.imgur.com/iRENtzp.jpg" alt="">
            </div>
            <div class="my_slides">
                <img src="https://i.imgur.com/ElkQu54.jpg" alt="">
            </div>
            <div class="my_slides">
                <img src="https://i.imgur.com/Aj25iuv.jpg" alt="">
            </div>
            <div class="video_slides">
                <video...

CSS

* { box-sizing: border-box; }
html {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 16px;
    background-color: black;
}
#gallery {
    text-align: center;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none;
}
#gallery img, video {
    width: 100%;
    max-width: 360px;
    height: 480px;
    object-fit: cover;
    cursor: pointer;
    image-rendering: -webkit-optimize-contrast;  
}
#video_container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 360px;
    height: 480px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
#video_container video {
    filter: brightness(1);
}
.fa-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    cursor: pointer;
    font-size: 2rem;
    color: white;
}
#gallery img:hover, #video_container:hover {
    transition: opacity 0.3s;
    opacity: 0.8;
}
.fa-play:hover {
    transition: color 0.5s;
    color: #181818;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
#my_modal {
    animation-name: fadeIn;
    animation-duration: 0.5s;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
    margin: 0;
    padding: 0;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none;
}
.my_slides, .video_slides {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.my_slides img {
    max-height: 100%;
    max-width: 100%;
   ...

JavaScript

"use strict";

const $ = selector => document.querySelector(selector);
const $all = selector => document.querySelectorAll(selector);

// Array of the images & videos in the #gallery
// Will be used when wanting to click on an image or a video without the play button
const gallery = $all("#gallery img, #video_container video");
console.log(gallery.length);

// Array of the image & video containers in #my_modal
const slides = $all("#my_modal div");
console.log(slides.length);

// Array of the video containers themselves
// Will be used if the user clicks on the video container itself
const videoContainer = $all("#video_container");
console.log(videoContainer.length);

// Array of the play buttons for the videos
// Will be used when wanting to play a video via the play button
const playButton = $all(".fa-play");
console.log(playButton.length);

// Array of only the video containers inside #my_modal
// Will be used in conjunction with array of the play buttons to display the right image
const videoSlides = $all(".video_slides");
console.log(videoSlides.length);
const videos = $all(".video_slides video");


$("#gallery").addEventListener("click", evt => {
    // for in loop to sort through each index in order to display the right img
    for ( let g in gallery ) {
        /* Checks to see if the click target is equal to the right image.
           Loops through each index until click target is equal to img clicked on*/
        if ( evt.target == gallery[g] ) {
            // Prevents page from being scrollable inside the modal
            $("body").style.overflow = "hidden";

            // Prevents images inside #gallery from being tabbed to 
            for ( let i = 0; i < gallery.length; i++ ) {
                gallery[i].removeAttribute("tabindex");
            }

            // Displays the modal along with the correct img container
            $("#my_modal").style.display = "initial";
            slides[g].style.display = "initial";

           ...