Category: javascript

regex.js:18 Uncaught SyntaxError: Invalid regular expression: /^(?!00000000-0000-0000-0000-000000000000)(?!11111111-1111-1111-1111-111111111111)(?!22222222-2222-2222-2222-222222222222)(?!33333333-3333-3333-3333-333333333333)(?!44444444-4444-4444-4444-444444444444)(?!55555555-5555-5555-5555-555555555555)(?!66666666-6666-6666-6666-666666666666)(?!77777777-7777-7777-7777-777777777777)(?!88888888-8888-8888-8888-888888888888)(?!99999999-9999-9999-9999-999999999999)((?i)(?!aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa)(?-i))((?i)(?!bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb)(?-i))((?i)(?!cccccccc-cccc-cccc-cccc-cccccccccccc)(?-i))((?i)(?!dddddddd-dddd-dddd-dddd-dddddddddddd)(?-i))((?i)(?!eeeeeeee-eeee-eeee-eeee-eeeeeeeeeeee)(?-i))((?i)(?!ffffffff-ffff-ffff-ffff-ffffffffffff)(?-i))([a-f0-9A-F]{8}-[a-f0-9A-F]{4}-[a-f0-9A-F]{4}-[a-f0-9A-F]{4}-[a-f0-9A-F]{12})$/: Invalid group (at regex.js:18:21)
at new RegExp ()
at regex.js:18:21

I need to validate a uuid with this format but the problem starts in

((?i)(?!aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa)(?-i))((?i)(?!bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb)(?-i))((?i)(?!cccccccc-cccc-cccc-cccc-cccccccccccc)(?-i))((?i)(?!dddddddd-dddd-dddd-dddd-dddddddddddd)(?-i)) ....

I have a bootstrap form in a mern app where users can enter a style (of martial arts), like judo, bjj, etc. I’m using react-tag-component to add the styles.

When the user enters a style it is added to an array called selected.

I am looping through the selected array and adding the same fiels for each selected style. So if I enter judo and bjj I get the fields rank and weightClass for each.

The selected array creates 2 fields value and label. The values in the above cases are 0, and 1 and the labels are judo and bjj.

I used onChange to send the value to and inputData object and it works but I cannot figure out how to get the data out.

I tried setting the name={rank${item.label}} so I get rankjudo and rankbjj. I did the same for weightClass.

If I console.log(inputData.rankJudo) I get my rank, but I’m trying to loop through the selected array so I can create a single array with the selected style and the corresponding rank and weightclass.

I have tried rank: ${inputData.rank}${item.label} but I get undefinedjudo and undefinedbjj in the rank field of the new array called styles. I get the same result with rank: inputData.rank + item.label.

My hope is to end with the style array looking something like:

[
 { 
   styleName: "bjj",
   rank: "Yellow Belt",
   weightClass: "73kg"
 },
 {
   styleName: "bjj",
   rank: "blue belt",
   weightClass: "165lbs",
 }
]

Here is the form:

<Form id="myForm" onSubmit={handleSubmit}>
  <Row>
    <Col className="d-flex flex-column my-2">
      <ReactTags
        labelText="Select Style/Sport"
        selected={selected}
        suggestions={suggestions}
        onAdd={onAdd}
        onDelete={onDelete}
        allowNew
        isDisabled={selected.length > 0}
        placeholderText="Add Style/Sport"
      />
    </Col>
  </Row>
  {selected &&
    selected.length > 0 &&
      selected.map((item) => (
        <div key={item.value}>
          <Row>
            <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>{`My rank in ${item.label}`}</Form.Label>
              <Form.Control
                name={`rank${item.label}`}
                type="text"
                placeholder={`Enter rank in ${item.label}`}
                onChange={handleChange}
              />
            </Form.Group>
          </Row>
          <Row>
            <Form.Group as={Col} md="4" controlId="validationCustom01">
            <Form.Label>{`My primary weight class in ${item.label}`}</Form.Label>
            <Form.Control
              name={`weightClass${item.label}`}
              type="text"
              placeholder={`Enter weight class in ${item.label}`}
              onChange={handleChange}
            />
          </Form.Group>
        </Row>
      </div>
    ))}

  <Button type="submit" className="login_btn">
    Add Style/Sport
 </Button>
</Form>

And here are the handleChange and handleSubmit functiosn:

const handleChange = (HTMLInputElement) => {
    const { name, value } = HTMLInputElement.target;
    setInputData((prevInputData) => ({ ...prevInputData, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    console.log(e.target.value);
    let styles = [];

    if (selected) {
      selected.map((item) =>
        styles.push({
          rank: inputData.rank + item.label,
        })
      );
    }
    console.log("styles ", styles);
  };

This is my HTML code:

<!--Sign in form-->
  <h2>Sign In</h2>
  <form id="signInForm">
    <label for="signInUsername">Username:</label>
    <input type="text" id="signInUsername" required>

    <label for="signInPassword">Password:</label>
    <input type="password" id="signInPassword" required>

    <button type="button" onclick="signin()">Sign In</button>
 </form>

This is my JS code:

function signin() {
    let accKeys = Object.keys(accounts);
    let enteredUsername = document.getElementById("signInUsername").value;
    //Cycles through the stored usernames
    for (let i of accKeys) { 
        //Checks that your entered username is stored
        if (i === enteredUsername) {
            let objItem = accounts[enteredUsername];
            let storedPassword = objItem.password; // Get the stored password
            let enteredPassword = document.getElementById("signInPassword").value;
            //Checks password
            if (storedPassword === enteredPassword) {
                windows.alert("You have signed in successfully");
            } else {
                console.log("Password is incorrect");
            }

            return; // Exit the function once signed in
        }
    }

    console.log("Username is incorrect");
}

When I pressed sign in, I was supposed to get a windows alert that I had signed in, but I got nothing. No matter what I did to tweak the code, nothing worked.

So, i have a PDF in a modal, which i rendered with PDF.js and my main goal is to select text from the rendered pdf and extract it into the console, however my first problem is arising from making the pdf.js render selectable.

I tried using viewer.html in the pdf.js directory. I just need to figure out how to make the text layer selectable, and if I’m doing everything right.

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.js" integrity="sha512-dfMpvQclalfL7nRtHdy4+U2GLYb2XJJOgGLgKibrbcbarI/ZLgCAaBCS6+AuWN0OtLn/zFpu+Cggd8TCBYx9Ag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    // Set the worker source for PDF.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.js';

    function handleUpload() {
        var fileInput = document.getElementById('pdfInput');
        var uploadButton = document.getElementById('uploadButton');

        uploadButton.addEventListener('click', function () {
            var file = fileInput.files[0];

            if (file) {
                var pdfUrl = URL.createObjectURL(file);

                loadPdf(pdfUrl);
            } else {
                alert('Please select a PDF file for upload.');
            }
        });
    }

    function loadPdf(url) {
        pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            var canvas = document.getElementById('the-canvas');
            var ctx = canvas.getContext('2d');
            var scale = 1;

            function renderPage(num) {
                pdfDoc.getPage(num).then(function (page) {
                    var viewport = page.getViewport({ scale: scale });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    page.render(renderContext);

                    // Enable text selection on the canvas
                    canvas.style.userSelect = 'text';
                });
            }

            var numPages = pdfDoc.numPages;
            var pageNum = 1;

            renderPage(pageNum);

            document.getElementById('prevPageBtn').addEventListener('click', function () {
                if (pageNum > 1) {
                    pageNum--;
                    renderPage(pageNum);
                }
            });

            document.getElementById('nextPageBtn').addEventListener('click', function () {
                if (pageNum < numPages) {
                    pageNum++;
                    renderPage(pageNum);
                }
            });

            var pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
            pdfModal.show();
        });
    }

    handleUpload();
</script>

any clue on how i can make the PDF selecatble?

I’m facing a challenge in my JavaScript/HTML project where I want to display only four videos in the ‘Continue Watching’ section without affecting other video cards on the page. The current implementation interferes with non-‘Continue Watching’ videos when I limit the display to four. Looking for guidance on resolving this issue.

https://e4171bb3-9e7c-4e1f-bfa9-093c7adb1510-00-2yr904r2mq889.spock.replit.dev

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="MelliePlay - A Better Version of YouTube"
    />

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="MelliePlay" />
    <meta
      property="og:description"
      content="Discover and enjoy amazing content on MelliePlay."
    />
    <meta property="og:image" content="url_to_thumbnail_image.jpg" />
    <meta property="og:url" content="url_to_your_site" />

    <!-- Google Font API -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=YourChosenFont:300,400,500"
    />

    <!-- LottieFiles CDN -->
    <script src="https://cdn.lottiefiles.com/5.7.8/lottie.js"></script>

    <!-- XRegExp -->
    <script src="https://unpkg.com/[email protected]/xregexp-all.js"></script>

    <!-- Hammer.js -->
    <script src="https://unpkg.com/[email protected]/hammer.min.js"></script>

    <!-- Polymer Framework -->
    <script
      type="module"
      src="https://unpkg.com/@polymer/[email protected]/lib/polymer-element.js"
    ></script>
    <!-- Include other Polymer elements as needed -->

    <link rel="stylesheet" href="style.css" />
    <!-- Link to the external style.css file -->

    <title>MelliePlay</title>
  </head>
  <body>
    <!-- Top Bar -->
    <div id="header">
      <div id="menu-arrow" onclick="toggleSideMenu()">▶️</div>
      <a id="logo" href="https://e4171bb3-9e7c-4e1f-bfa9-093c7adb1510-00-2yr904r2mq889.spock.replit.dev/">MelliePlay</a>
      <div id="searchBox">
        <input class="searchInput" type="text" name="" placeholder="Search" />
        <button class="searchButton" href="#">
          <i class="material-icons">&#x1F50E;&#xFE0E;</i>
        </button>
      </div>
    </div>
    <div id="side-menu-overlay" onclick="closeSideMenu()">✖</div>
    <div id="side-menu">
      <div id="close-button" onclick="closeSideMenu()">✖</div>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="yourchannrl.html"><svg class="svg-icon" viewBox="0 0 20 20">
              <path fill="none" d="M14.023,12.154c1.514-1.192,2.488-3.038,2.488-5.114c0-3.597-2.914-6.512-6.512-6.512
                c-3.597,0-6.512,2.916-6.512,6.512c0,2.076,0.975,3.922,2.489,5.114c-2.714,1.385-4.625,4.117-4.836,7.318h1.186
                c0.229-2.998,2.177-5.512,4.86-6.566c0.853,0.41,1.804,0.646,2.813,0.646c1.01,0,1.961-0.236,2.812-0.646
                c2.684,1.055,4.633,3.568,4.859,6.566h1.188C18.648,16.271,16.736,13.539,14.023,12.154z M10,12.367
                c-2.943,0-5.328-2.385-5.328-5.327c0-2.943,2.385-5.328,5.328-5.328c2.943,0,5.328,2.385,5.328,5.328
                C15.328,9.982,12.943,12.367,10,12.367z"></path>
            </svg>  Your channel</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <!-- Add more items as needed -->
      </ul>
    </div>
    <!-- Currently Playing Video -->
    <div id="continue-watching">
      <!-- Video Player Placeholder -->
      <div id="video-player">Continue Watching:</div>
      <!-- List of Last Four Videos -->
      <div class="video-card" onclick="playVideo('video4')">
        <img src="thumbnail0.jpg" alt="Video 4" class="video-thumbnail" />
        <div class="video-details">
          <div class="video-title">Video 4 Title</div>
          <div class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
      <div class="video-card" onclick="playVideo('video3')">
        <img src="thumbnail0.jpg" alt="Video 3" class="video-thumbnail" />
        <div class="video-details">
          <div class="video-title">Video 3 Title</div>
          <div class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
      <div class="video-card" onclick="playVideo('video2')">
        <img src="thumbnail0.jpg" alt="Video 2" class="video-thumbnail" />
        <div class="video-details">
          <div class="video-title">Video 2 Title</div>
          <div class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
      <div class="video-card" onclick="playVideo('video1')">
        <img src="thumbnail1.jpg" alt="Video 1" class="video-thumbnail" />
        <div class="video-details">
          <div class="video-title">Video 1 Title</div>
          <div class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
    </div>

    <hr
      style="
        width: 100%;
        margin: 0;
        border: none;
        height: 2px;
        background-color: #ccc;
      "
    />
    <!-- Video Container -->
    <div id="video-container">
      
      <!-- Video Card 1 -->
    <div class="video-card" onclick="playVideo('video1')" id="video-card-1">
      <a href="watch.html?videoId=video1">
     <img src="thumbnails/thumbnail1.jpg" alt="Video 1" id="video-thumbnail-video1" class="video-thumbnail"/>
  <div class="video-details">
    <div id="video-title-video1">Video Title Placeholder</div>
    <div id="video-description-video1" class="video-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

      <!-- Video Card 2 -->
      <div class="video-card" onclick="playVideo('video2')" id="video-card-2">
        <a href="watch.html?videoId=video2">
           <img src="thumbnails/thumbnail2.jpg" alt="Video 2" id="video-thumbnail-video2" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video2">Video Title Placeholder</div>
          <div id="video-description-video2" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>


      <!-- Video Card 3 -->
      <div class="video-card" onclick="playVideo('video3')" id="video-card-3">
        <a href="watch.html?videoId=video3">
           <img src="thumbnails/thumbnail3.jpg" alt="Video 3" id="video-thumbnail-video3" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video3">Video Title Placeholder</div>
          <div id="video-description-video3" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>


      <!-- Video Card 4 -->
      <div class="video-card" onclick="playVideo('video4')" id="video-card-4">
        <a href="watch.html?videoId=video4">
           <img src="thumbnails/thumbnail4.jpg" alt="Video 4" id="video-thumbnail-video4" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video4">Video Title Placeholder</div>
          <div id="video-description-video4" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>


      <!-- Video Card 5 -->
      <div class="video-card" onclick="playVideo('video5')" id="video-card-5">
        <a href="watch.html?videoId=video5">
           <img src="thumbnails/thumbnail5.jpg" alt="Video 5" id="video-thumbnail-video5" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video5">Video Title Placeholder</div>
          <div id="video-description-video5" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>


      <!-- Video Card 6 -->
      <div class="video-card" onclick="playVideo('video6')" id="video-card-6">
        <a href="watch.html?videoId=video6">
           <img src="thumbnails/thumbnail6.jpg" alt="Video 6" id="video-thumbnail-video6" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video6">Video Title Placeholder</div>
          <div id="video-description-video6" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>

      <!-- Video Card 7 -->
      <div class="video-card" onclick="playVideo('video7')" id="video-card-7">
        <a href="watch.html?videoId=video7">
           <img src="thumbnails/thumbnail6.jpg" alt="Video 7" id="video-thumbnail-video7" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video7">Video Title Placeholder</div>
          <div id="video-description-video7" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>

      <!-- Video Card 8 -->
      <div class="video-card" onclick="playVideo('video8')" id="video-card-8">
        <a href="watch.html?videoId=video8">
           <img src="thumbnails/thumbnail6.jpg" alt="Video 8" id="video-thumbnail-video8" class="video-thumbnail" />
        <div class="video-details">
          <div id="video-title-video8">Video Title Placeholder</div>
          <div id="video-description-video8" class="video-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>

    </div>
      
    <script>
      let loaded = false;
      let currentPage = 1;
      const videosPerPage = 4; // Display only 4 videos
      let loadedVideos = [];
      let lastWatchedVideos = [];

      if (localStorage.getItem('lastWatchedVideos')) {
        lastWatchedVideos = JSON.parse(localStorage.getItem('lastWatchedVideos'));
      }

      function setDefaultInfo(videoId) {
        // Function to set default information if details are not available
        const videoTitle = document.getElementById(`video-title-${videoId}`);
        const videoDescription = document.getElementById(`video-description-${videoId}`);
        const videoThumbnail = document.getElementById(`video-thumbnail-${videoId}`);

        if (videoTitle && videoDescription && videoThumbnail) {
          videoTitle.innerText = "No Title Found";
          videoDescription.innerText = "No Description Found";

          videoThumbnail.src = `images/thumbnails/${videoId}.jpg`;
          videoThumbnail.alt = "Video Title";
          videoThumbnail.className = "video-thumbnail";

          console.log(`Default info set for video ${videoId}`);
        }
      }

      function playVideo(videoId) {
        if (!loaded) {
          const videoPlayer = document.getElementById('video-player');
          const videoTitle = document.getElementById(`video-title-${videoId}`);
          const videoDescription = document.getElementById(`video-description-${videoId}`);
          const videoThumbnail = document.getElementById(`video-thumbnail-${videoId}`);

          if (videoPlayer && videoTitle && videoDescription && videoThumbnail) {
            fetch(`details/${videoId}.json`)
              .then((response) => {
                if (!response.ok) {
                  throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.json();
              })
              .then((data) => {
                console.log('Fetched data:', data);

                const { title, description, thumbnail, videoSrc } = data;

                if (videoSrc) {
                  videoPlayer.src = videoSrc;
                }

                videoTitle.innerText = title || 'No Title Found';
                videoDescription.innerText = description || 'No Description Found';
                videoThumbnail.src = thumbnail || `images/thumbnails/${videoId}.jpg`;

                loaded = true;
              })
              .catch((error) => {
                console.error('Error fetching video details:', error);
                setDefaultInfo(videoId);
              });
          } else {
            console.error(`One or more elements not found for video ${videoId}`);
          }
        } else {
          console.log(`Video ${videoId} clicked or loaded.`);
        }

        // Add the following lines to track the last four videos
        if (!lastWatchedVideos.includes(videoId)) {
          lastWatchedVideos.unshift(videoId); // Add to the beginning of the array
          if (lastWatchedVideos.length > 4) {
            lastWatchedVideos.pop(); // Remove the oldest video if the array size exceeds four
          }

          // Save updated lastWatchedVideos to localStorage
          localStorage.setItem('lastWatchedVideos', JSON.stringify(lastWatchedVideos));
        }

        // Update the "Continue Watching" section
        updateContinueWatching();
      }

      function updateContinueWatching() {
        const continueWatchingSection = document.getElementById('continue-watching');
        continueWatchingSection.innerHTML = '<div id="video-player">Continue Watching:</div>';

        // Display "No videos found" message if there are no last watched videos
        if (lastWatchedVideos.length === 0) {
          displayNoVideosMessage(continueWatchingSection);
          return;
        }

        // Slice the last four videos from the array
        const lastFourWatchedVideos = lastWatchedVideos.slice(0, 4);

        lastFourWatchedVideos.forEach((videoId) => {
          const videoCard = document.createElement('div');
          videoCard.classList.add('video-card');
          videoCard.onclick = () => playVideo(videoId);

          // Fetch details and populate the card as per your existing logic
          fetchVideoDetails(videoId).then((data) => {
            // Update the card content using data from the fetch
            // You can modify this part based on your existing logic
            const { title, description, thumbnail } = data;

            videoCard.innerHTML = `
              <img src="${thumbnail || `images/thumbnails/${videoId}.jpg`}" alt="Video ${videoId}" class="video-thumbnail" />
              <div class="video-details">
                <div class="video-title">${title || 'No Title Found'}</div>
                <div class="video-description">${description || 'No Description Found'}</div>
              </div>
            `;

            continueWatchingSection.appendChild(videoCard);
          });
        });
      }

      // Function to fetch video details
      function fetchVideoDetails(videoId) {
        return fetch(`details/${videoId}.json`)
          .then((response) => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
          })
          .catch((error) => {
            console.error('Error fetching video details:', error);
            return {};
          });
      }

      // Ensure that the lastWatchedVideos array is updated on page load
      window.addEventListener('DOMContentLoaded', () => {
        if (loadedVideos.length === 0) {
          displayAllVideosMessage();
          updateContinueWatching();
        }
      });

      function loadVideos() {
        for (let i = 1; i <= videosPerPage; i++) {
          const videoIndex = (currentPage - 1) * videosPerPage + i;
          if (!loadedVideos.includes(videoIndex)) {
            playVideo(`video${videoIndex}`);
            loadedVideos.push(videoIndex);
          }
        }
      }

      function handleScroll() {
        const lastVideoCard = document.querySelector('.video-card:last-child');
        const lastCardOffset = lastVideoCard.offsetTop + lastVideoCard.clientHeight;
        const pageOffset = window.pageYOffset + window.innerHeight;

        if (pageOffset > lastCardOffset - 100 && !loaded) {
          loaded = true;
          loadVideos();
          currentPage++;
        }
      }

      function displayAllVideosMessage() {
        const videoContainer = document.getElementById('video-container');
        const message = document.createElement('p');
        message.innerText = 'All videos in our database are loaded! :p';
        videoContainer.appendChild(message);
      }

      // Check if all videos are loaded and display a message
      window.addEventListener('DOMContentLoaded', () => {
        if (loadedVideos.length === 0) {
          displayAllVideosMessage();
        }
      });

      function toggleSideMenu() {
        const sideMenuOverlay = document.getElementById('side-menu-overlay');
        const sideMenu = document.getElementById('side-menu');

        if (sideMenuOverlay.style.display === 'block' || sideMenu.style.display === 'block') {
          sideMenuOverlay.style.display = 'none';
          sideMenu.style.display = 'none';
        } else {
          sideMenuOverlay.style.display = 'block';
          sideMenu.style.display = 'block';
        }
      }

      function closeSideMenu() {
        const sideMenuOverlay = document.getElementById('side-menu-overlay');
        const sideMenu = document.getElementById('side-menu');

        sideMenuOverlay.style.display = 'none';
        sideMenu.style.display = 'none';
      }

      function displayNoVideosMessage(continueWatchingSection) {
        const message = document.createElement('p');
        message.innerText = 'No videos found!';
        continueWatchingSection.appendChild(message);
      }

      // Initial load of videos
      loadVideos();

      // Add scroll event listener
      window.addEventListener('scroll', handleScroll);
    </script>







   
  </body>
</html>

I attempted to modify the JavaScript code to limit the ‘Continue Watching’ section to display only four videos. I expected that this change would not interfere with the display of other non-‘Continue Watching’ video cards. However, the issue persists, and the adjustment seems to impact other video cards on the page. I just found out when i click on the ‘Continue Watching’ section it’s then show 4 rather then 21 but the videos cards under it only show 4/8 which i dont want!

function app(el) {
  bind_pointer(el)({
  onMove(xy) {
  console.log(xy)
  }
  })
  console.log('ok')
}


app(document.getElementById('app')!)


function bind_pointer($element: HTMLElement) {
  return (hooks: PointerHooks) => {

    let { onPointerUnlock, onPointerLock, onClick, onDown, onUp } = hooks

    const onMove = (e: MouseEvent) => hooks.onMove([e.movementX, e.movementY])

    const test_pointer_lock = (on_pointer_lock: () => void, on_no_lock?: () => void) => {
      return () => {
        if (document.pointerLockElement === $element) {
          on_pointer_lock()
        } else {
          on_no_lock?.()
        }
      }
    } 

    let just_exited = false
    document.addEventListener('pointerlockchange', test_pointer_lock(() => {
      onPointerLock()
      document.addEventListener('mousemove', onMove, false)
    }, () => {
      onPointerUnlock()
      document.removeEventListener('mousemove', onMove, false)
      just_exited = true
      setTimeout(() => {
        just_exited = false
      }, 1600)
    }))


    $element.addEventListener('click', test_pointer_lock(onClick, () => {
      if (!just_exited) {
        $element.requestPointerLock()
      }
    }))

    $element.addEventListener('mousedown', test_pointer_lock(onDown))
    $element.addEventListener('mouseup', test_pointer_lock(onUp))
  }
}

I can’t really produce a reproducable because Pointer Lock API doesn’t work in examples,

But if you run this kind of code in a real setting, it works like
real small values like at most 20 for movementX when developer console is open

but nice big numbers up to 100 for movementX when developer console is not open.

So I don’t understand why that happens. You might want to log the output on the webpage so it is visible when console is not open.

can anyone tell me what the name of this lib is on the github home page, or if it really is a lib lol? image below !!

enter image description here

deep searches for the linear effect used, I need it for my portfolio, I already tried a deep search to find it but I didn’t get any information..

If it’s not a library, how could I be creating this effect in the same way?

If I make a GET request to

https://discord.com/api/guilds/<GUILD_ID>/members?limit=1000

I’m able to return a list of members in my discord server, but I’m wondering how I can determine how many members are currently online? Additionally, is it possible to return the total number of members online within a given channel?

I’ve enabled all the Privileged Gateway Intents inside my bot admin panel(see screenshot).

Thanks in advance!

I’m writing some code to shuffle and display a deck of cards. The deck works fine on Android, but have morphing issues on some IOS devices. Newer IOS devices seem to be fine, but especially older devices encounter the problem.

Specifically there is two diffrences on android and IOS. Firstly the choosen card morphes through the rest of the deck on ios before displaying. Secondly, it shoots way of screen when being put into the “down” pile.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            box-sizing: border-box;
            position: absolute;
            left: 50px;
            top: 50px;
            font-family: 'Suez One';
            overflow: visible;
        }
        
        /* Add a style for the overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px); /* Adjust the blur effect */
        }

        /* Style for the modal */
        .modal {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            text-align: center;
        }

        /* Style for the close button */
        .close-btn {
            padding: 10px 20px;
            background: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
      
        .red-box {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 230px;
              width: 300px;
              height: 65px;
              background-color: #FFCBAA;
              z-index: 1000; /* Ensure the red box is in front of the cards */
          }
      
        .randomSuit {
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .card {
            background-image: radial-gradient(#eeaeca, #94bbe9);
            left: 44%;
            top: 33%;
            transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateY(0);
            position: absolute;
            width: 100px;
            height: 150px;
            border-radius: 10px;
            font-size: 0px;
            transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
            border: 2px solid #060303;
            cursor: pointer;
            border-bottom-color: #933;
            box-shadow: -10px 40px 20px 2px rgba(0,0,0,0);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            white-space: normal; /* or white-space: pre-wrap; */
            word-wrap: break-word;
            text-align: center; /* Add this line to center the text */
            
        }

        .card:first-child {
            box-shadow: 12px 12px 0px 12px rgba(0,0,0,0.3);
        }
      
        .card:last-child {
            transform = translateZ(-100deg);
        }

        .card {
    -webkit-transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
    -moz-transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
    -ms-transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
    -o-transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
}

        .cards {
            height: auto;
            width: auto;
        }

    </style>
    <div class="cards">
        <!-- Use JavaScript to generate all 52 cards with values -->
        <script>
                    function displayCustomPopup() {
            // Show the overlay and modal
            document.querySelector('.overlay').style.display = 'flex';
        }

        // Function to close the custom popup
        function closeCustomPopup() {
            // Hide the overlay and modal
            document.querySelector('.overlay').style.display = 'none';
        }

        // Attach the function to the window's onload event
            //window.onload = displayCustomPopup;
        

          
            let suits = ['H', 'S', 'R', 'K'];
            let values = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'];
            let translateZValue = -40;

            // Array to store the generated cards
            let cards = [];

            // Array to store all card values
            let allCardValues = [];

            // Create an array with all card values
            for (let suit of suits) {
                for (let value of values) {
                    allCardValues.push(`${value}`);
                }
            }

            // Shuffle the array of card values
            for (let i = allCardValues.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [allCardValues[i], allCardValues[j]] = [allCardValues[j], allCardValues[i]];
            }

            // Generate card HTML using shuffled values
            for (let cardValue of allCardValues) {
            const randomRotation = Math.random() * (2) - 42;
            const cardHtml = `<div class='card down' style='transform: rotateX(60deg) rotateY(0deg) rotateZ(${randomRotation}deg) translateZ(${translateZValue}px) translateY(-15px);' onclick="cardClickHandler(event)"><span>${cardValue}</span></div>`;
            cards.push(cardHtml);
            translateZValue += 1;
        }

            // Append the shuffled deck to the container
            const cardsContainer = document.querySelector('.cards');
            cards.forEach(cardHtml => {
                const cardElement = document.createElement('div');
                cardElement.innerHTML = cardHtml;
                cardsContainer.appendChild(cardElement.firstChild);
            });
          
          function cardClickHandler(event) {
          // Get the clicked element using event.currentTarget
          const clickedCard = event.currentTarget;
            //alert(currentTarget);
            
          if (clickedCard.classList.contains('down')) {
            setTimeout(() => {  
            clickedCard.classList.remove('down');
              
              clickedCard.classList.add('opened');
              var transitionProperties = 'all 700ms, font-size 500ms, background-image 0.7s ease-in-out';
                clickedCard.style.transition = transitionProperties;
                // Set the transition properties for vendor-prefixed syntax
                clickedCard.style.webkitTransition = transitionProperties;
                clickedCard.style.mozTransition = transitionProperties;
                clickedCard.style.msTransition = transitionProperties;
                clickedCard.style.oTransition = transitionProperties;
              clickedCard.style.zIndex = '999';
                        clickedCard.style.webkitTransform = 'scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateX(0) translateY(0) translateZ(-100px)';
            clickedCard.style.mozTransform = 'scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateX(0) translateY(0) translateZ(-100px)';
            clickedCard.style.msTransform = 'scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateX(0) translateY(0) translateZ(-100px)';
            clickedCard.style.oTransform = 'scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateX(0) translateY(0) translateZ(-100px)';
            clickedCard.style.transform = 'scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateX(0) translateY(0) translateZ(-100px)';

            clickedCard.style.boxShadow = '0 5px 14px rgba(0,0,0,0.1)';
            clickedCard.style.fontSize = '14px';
            clickedCard.style.backgroundImage = 'radial-gradient(#ffffff, #ffffff)';
            
            const spanInsideCard = clickedCard.querySelector('span');
            if (spanInsideCard) {
              spanInsideCard.style.webkitTransform = 'scaleX(-1)';
                spanInsideCard.style.mozTransform = 'scaleX(-1)';
                spanInsideCard.style.msTransform = 'scaleX(-1)';
                spanInsideCard.style.oTransform = 'scaleX(-1)';
                spanInsideCard.style.transform = 'scaleX(-1)';
                spanInsideCard.style.display = 'inline-block';
            }
             }, 100);
          } else if (clickedCard.classList.contains('opened')) {
            setTimeout(() => {   
            clickedCard.classList.add('is-removed');
            clickedCard.style.webkitTransform = 'translateY(200%)';
            clickedCard.style.mozTransform = 'translateY(200%)';
            clickedCard.style.msTransform = 'translateY(200%)';
            clickedCard.style.oTransform = 'translateY(200%)';
            clickedCard.style.transform = 'translateY(200%)';
            
            var transitionProperties = 'all 700ms, font-size 500ms, background-image 0.7s ease-in-out';
            clickedCard.style.transition = transitionProperties;
            // Set the transition properties for vendor-prefixed syntax
            clickedCard.style.webkitTransition = transitionProperties;
            clickedCard.style.mozTransition = transitionProperties;
            clickedCard.style.msTransition = transitionProperties;
            clickedCard.style.oTransition = transitionProperties;
             
            clickedCard.style.boxShadow = '0 -5px 5px rgba(0,0,0,0.01)';
            clickedCard.style.fontSize = '0px';
            clickedCard.style.backgroundImage = 'radial-gradient(#eeaeca, #94bbe9)';
            clickedCard.style.height = '75px';
            clickedCard.style.borderRadius = '10px 10px 0 0';

              // Find the new top card and make it clickable
              const isTopCard = document.querySelector('.card:not(.is-removed):last-child');
              }, 100);
          }
      }
        </script>
    </div>
    <div class="red-box"></div>
    <script>
        // Add click event handler
        // Add click and touchend event handler
        
    </script>
</head>
    <body>
       <div class="overlay">
        <div class="modal">
            <p>DISPLAY</p>
            <button class="close-btn" onclick="closeCustomPopup()">OK</button>
        </div>
    </div>
    </body>
</html>
</body>
</html>

I have tried adding webkit, ms, o and other support, but this does not seem to make a difference.

I am currently making a game using javascript, html5 and css.

I plan on making the game available on mobile so I would like to add some simple ads to monetize it a little.

When the game is over and you lose I just want a simple ad to appear that you can “X” out of. I have already made the banners and the code for the banners to appear at the end of a game, but what do I put to make the banners display the ad?

Sorry if this is a dumb question I am very very new to javascript and html.

Here is my current code:

Html

    <div id="startAd" class="ad-modal">
        <div class="ad-content">
            <span class="close-btn" onclick="closeAd('startAd')">&times;</span>
            <p>Start Ad content goes here</p>
            <!-- Ad content here -->
        </div>
    </div>
    
    <div id="endAd" class="ad-modal">
        <div class="ad-content">
            <span class="close-btn" onclick="closeAd('endAd')">&times;</span>
            <p>End Ad content goes here</p>
            <!-- Ad content here -->
        </div>
    </div>

Javascript

function closeAd(adId) {
    var ad = document.getElementById(adId);
    ad.style.display = "none";
}

function showAd(adId) {
    var ad = document.getElementById(adId);
    ad.style.display = "block";
}

// Show start ad when the game loads
document.addEventListener('DOMContentLoaded', function() {
    showAd('startAd');
});

// Function to show end ad at the end of each game
function showEndAd() {
    showAd('endAd');
}

CSS

        .ad-modal {
    display: none;
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
        }

        .ad-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 90%;
        }

        .close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
        }

    .close-btn:hover,
    .close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
        }

I haven’t tried anything yet as I am completely new to this and do not even know where to begin.

I am working with an API that gives data back to me that is paginated. IE, I request a page size of 50, get some data back, and then use the ID of the last bit of data I received to make another request. I want to write a function that returns data as it receives it, is this creating a stream and sending data through it? What I’m trying to avoid is waiting for one function to finish running through ALL of the pages, using up lots of memory, and then returning a massive array so that the main function can then pass all of that to another function to start processing the data. Ideally as data is retrieved from my API function it will return it to main and main can start processing it right away. The purpose of this is to limit how much memory is used at once and limit execution time. Is this a reasonable way to structure this and how would I go about implementing it? Are there better ways to structure this that accomplish the same goals without shoving all of the code into one giant/messy function?

TIA

When I press the “save” button to store my API key, the JSON file replaces my existing Steam64ID by removing it from the file instead of not interfering with it. Any help will be appreicated.

//Save API Key to JSON
saveapi.addEventListener('click', () => {
  const apiKey = apibox.value;
  const data = { apikey: apiKey };
  const jsonStr = JSON.stringify(data, null, 2);
  window.electronAPI.writeFile(jsonStr);
});

//Save Steam64 ID to JSON
savesteam64.addEventListener('click', () => {
  const steam64id = steam64box.value;
  const data = { steam64id: steam64id };
  const jsonStr = JSON.stringify(data, null, 2);
  window.electronAPI.writeFile(jsonStr);
});

{
  "apikey": ""
  "steam64id": "" //This gets removed when I try save the api key
}

I have a form with input fields like this:

<div>
                        <h3>Doctor's contact info:</h3>
                        {errors?.doctor?.noDoctor && <p className="text-red-500">{errors?.doctor?.noDoctor?.message}</p>}
                        <div>
                            <input 
                                type="checkbox" 
                                id="noDoctor" 
                                name="noDoctor" 
                                defaultChecked={healthHistory?.doctor?.noDoctor} 
                                {...register('doctor.noDoctor')}
                            />
                            <label htmlFor="noDoctor">I do not have a family doctor</label>
                        </div>
                        <label>Doctor's name</label>
                        <input  className="w-full"
                            name="doctorName" 
                            label="Doctor's name" 
                            type="text" 
                            defaultValue={healthHistory ? healthHistory?.doctor?.doctorName : ''} 
                            {...register('doctor.doctorName')}
                        />
                        {errors?.doctor?.doctorName && <p className="text-red-500">{errors?.doctor?.doctorName?.message}</p>}
                        <h4><b>Doctor's address:</b>    </h4>
                            <label>Street Number</label>
                            <input className="w-full"
                                name="doctorStreetNumber" 
                                label="Street number" 
                                type="text" 
                                defaultValue={healthHistory?.doctor?.doctorAddress?.doctorStreetNumber} 
                                {...register('doctor.doctorAddress.doctorStreetNumber')}
                            />
                            {errors?.doctor?.doctorAddress?.doctorStreetNumber && <p className="text-red-500">{errors?.doctor?.doctorAddress?.doctorStreetNumber?.message}</p>}
                            <label>Street name</label>
                            <input className="w-full"
                                name="doctorStreetName" 
                                type="text" 
                                defaultValue={healthHistory?.doctor?.doctorAddress?.doctorStreetName} 
                                {...register('doctor.doctorAddress.doctorStreetName')}
                            />
                            {errors?.doctor?.doctorAddress?.doctorStreetName && <p className="text-red-500">{errors?.doctor?.doctorAddress?.doctorStreetName?.message}</p>}
                            <label>City</label>
                            <input className="w-full"
                            name="doctorCity" 
                            type="text" 
                            defaultValue={healthHistory?.doctor?.doctorAddress?.doctorCity} 
                            {...register('doctor.doctorAddress.doctorCity')}
                            />
                            {errors?.doctor?.doctorAddress?.doctorCity && <p className="text-red-500">{errors?.doctor?.doctorAddress?.doctorCity?.message}</p>}
                            <label>Province</label>
                            <select className="w-full"
                            name="doctorProvince" 
                            defaultValue={healthHistory ? healthHistory?.doctor?.doctorAddress?.doctorProvince : ''} 
                            {...register('doctor.doctorAddress.doctorProvince')}
                            >
                                <option value="" disabled="disabled">Select your province</option>
                                <option value="ON">Ontario</option>
                                <option value="AB">Alberta</option>
                                <option value="BC">British Columbia</option>
                                <option value="SK">Saskatchewan</option>
                                <option value="MB">Manitoba</option>
                                <option value="QB">Quebec</option>
                                <option value="NB">New Brunswick</option>
                                <option value="NF">Newfoundland</option>
                                <option value="NS">Nova Scotia</option>
                                <option value="PE">Prince Edward Island</option>
                                <option value="NT">Northwest Territories</option>
                                <option value="YK">Yukon</option>
                                <option value="NV">Nunavut</option>
                                <option value="US">USA</option>
                            </select> 
                            {errors?.doctor?.doctorAddress?.doctorProvince && <p className="text-red-500">{errors?.doctor?.doctorAddress?.doctorProvince?.message}</p>}
                    </div>

I am asking zod to validate the entire form, and it works great for all other input fields, but for this section of the form I want it to check if the checkbox is false, and if so, then make the fields for doctor’s name and address fields required. If the checkbox is checked, and the value is true, then these fields are not required.
I have tried several different ways to accomplish this, such as this:

doctor: z.object({
        noDoctor: z.boolean(),
        doctorName: z.string().optional(),
        doctorAddress: z.object({
            doctorStreetNumber: z.string().optional(),
            doctorStreetName: z.string().optional(),
            doctorCity: z.string().optional(),
            doctorProvince: z.string().optional()
        }).optional(),
    }).superRefine((val, ctx) => {
        if (val.noDoctor === false && !val.doctorName && !val.doctorAddress.doctorStreetNumber && !val.doctorAddress.doctorStreetName && !val.doctorAddress.doctorCity && !val.doctorAddress.doctorProvince) {
            ctx.addIssue({
                code: z.ZodIssueCode.custom,
                message: 'Please provide your doctor's information or select "I don't have a doctor"',
                path: ['doctor']
            })
        }
    }),

But none of the ways that I have tried seem to prove successful; no error message shows up at all.
I’m not sure if the validation is working or not, and if it is working, how do I access the error message to display in the form?
I should also mention that I’m using zod with Javascript, not Typescript.

The suggestions I have tried are coming from Copilot, but none of them seem to help so I thought I’d turn to the real users out there who may know how to deal with this type of scenario.

Thanks 🙂

I have volumetric video shot and hosted by Evercoast that I’m trying to use in a webAR experience using the Blippar WebSDK. I have a scene set up, properly by all accounts, so that upon an image target being scanned and recognized, the captured video should play on top of the marker image. However, what happens is that my marker is recognized and the video just does not show up.

All of the .js libraries are called properly in the head of the HTML. I just don’t know where I’m going wrong here.

Here are the .js libraries I’m using and how they’re placed in the head:

<script src="https://ar-libs.blippar.com/aframe/1.3.0/aframe-v1.3.0.min.js"></script>
    <script src="https://streaming.evercoast.com/api/2.0.17/aframe/lib/evercoast-aframe.js"></script>
    <script src="https://webar-sdk.blippar.com/releases/1.7.1-r1/webar-sdk-v1.7.1-r1.min.js"

Here is how my body is setup:

 <body>

    <!-- Step 2: Add webar-scene attribute to AFrame's <a-scene> tag -->
      <!-- Provide a valid Blippar license-key value in the key: property  -->

    <a-scene
      webar-scene="key: 508c9ac2-8cd0-4c70-bec8-2f8ffa0953bd"
      vr-mode-ui="enabled: false"
      device-orientation-permission-ui="enabled: false"
      loading-screen="enabled: false"
      renderer="colorManagement: true;">

      <!-- Step 3: Add webar-camera attribute to AFrame's <a-entity camera> tag -->
      <a-camera webar-camera></a-camera>

        <!-- Step 4: Add webar-marker attribute with a valid marker id value(obtained from Blippar hub), to AFrame's parent <a-entity> tag -->
          <!-- The models defined as a child element under this webar-marker id, will be displayed on the marker image during marker image tracking -->
        <a-entity webar-marker="id: f5d9db12-80be-4fa2-9a82-f1cc0790e4a6">
          <!-- Step 5: Add AR models under the webar-marker nodes -->
          <!-- Add webar-loadmonitor attribute to the entities to display loading progress screen before starting the surface tracking -->
          <!-- Refer API Reference documentation for more details -->
            <a-entity id="asset" evercoast-asset="https://streaming.evercoast.com/FourthIdea%20Advertising/Dutchess-GW-Stories.JohnKane.ec.take.016/10387/Dutchess-GW-Stories.JohnKane.ec.take.016.ecm"
            evercoast-asset-controls="float: right" position="0 0 0" rotation="0 180 0" scale="1 1 1"></a-entity><!--closes asset-->
          </a-entity> <!--closes webar-marker-->
    </a-scene><!--closes scene-->

    <!-- Refer API:Functions documentation for more details -->
    <script>
      WEBARSDK.Init();

      // Give a callback when the WebAR Marker <a-entity webar-marker> is ready  to track the marker image
        WEBARSDK.SetMarkerDetectedCallback((markerId) => {
          console.info('Marker is detected for marker id: ', markerId);
      });

      // Give a callback when the WebAR Marker <a-entity webar-marker> is lost
      WEBARSDK.SetMarkerLostCallback((markerId) => {
        console.info('Marker tracking is lost for marker id: ', markerId);
      });

      /**
       * Sets custom style for auto marker detection(auto-marker-detection = true):
       *  (1) Add your custom html layout for auto marker detection
       *  (2) May disable scan instruction if needed, by default it is true
       * @param {HTMLElement} custom division
       * @param {boolean} showScanInstructions set it to false to disable it
       */
      //WEBARSDK.SetAutoMarkerDetectionStyle(htmlElement, showScanInstructions)
      
    </script>
  </body>

In my next.js I’m trying to use a reactjs code, how can I convert this for next.js?

export const isAdmin = window.location.pathname.startsWith("/admin");

I’m getting this error :
ReferenceError: window is not defined