Category: javascript

I’m building a website for a school project, starting with a login/signup page. My code might be a bit messy, but I’ve uploaded it here: GitHub Repository.

I’m encountering several issues after making some tweaks:

1. On input focus, the associated icons should move up with a smooth transition, but this isn’t working as expected.

2. The “Register” and “Login” buttons should slide the form up or down to toggle between the login and signup forms, but the transition isn’t functioning properly. (The JavaScript for this is in the HTML document at the bottom.)

If you don’t wanna bother scrolling through code here is the part where the buttons should function:

<p>Already have an account? <button class="form-button loginBtn">Login</button></p>
      <script>
         const loginBtn = document.querySelector('.loginBtn');
         const registerBtn = document.querySelector('.registerBtn');
         const loginBox = document.querySelector('.loginBox');
         
         
         registerBtn.addEventListener('click', () => {
             loginBox.classList.toggle('active');
         });
         loginBtn.addEventListener('click', () => {
             loginBox.classList.toggle('active');
         });
                     
      </script>

CSS

.loginBox.active .login-wrapper {
    transform: translateY(-100%);
}

.loginBox.active .signup-wrapper {
    transform: translateY(-100%);
}

I tried undoing all the previous code I tweaked, then reviewed it for syntax errors but couldn’t find anything. Inspect tools doesn’t work on the school chromebooks so I am having trouble diagnosing everything.
Any guidance on how to fix these issues would be greatly appreciated!

Refused to execute script from ‘http://127.0.0.1:8000/static/js/register.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.

I keep getting this error even thought I have the register.js file at the right place.

I expected my javascript codes to function but it doesn’t.

I have ISO files that I need to unpack on the Frontend to extract all the files inside. I know that all the files inside are of .dcm format. How are you guys doing it? Is there a way javascript offers to extract the files form inside the ISO? Then I take care of sending the files via the api we have, but the main thing is I am trying to figure a way to actually extract those files.

I am using Laravel 11 and using blade templates and I am trying to move away from compiling all my vuejs components into one file and have multiple smaller files that are relevant to the page.

I am trying to convert my carousel component but I’m not sure how to do it properly.

I’m getting Undefined constant "item" error which makes sense to me but I’m not sure the proper way to write the code.

This is my blade template

<div id="release-carousel">
  <Carousel v-bind="carouselConfig">
    <Slide v-for="(item, index) in releases" :key="index">
      <div class="text-center p-2 bg-white">
        <div class="mb-4">
          <a href="{{ route('releases.show', ['id' => item.encoded_id, 'artist' => item.name_slug, 'title' => item.title_slug]) }}">
            <picture>
              <source srcset="{{ asset('images/releases/thumbs/' . item.filename . '.webp') }}" type="image/webp" />
              <source srcset="{{ asset('images/releases/thumbs/' . item.filename . '.jpg') }}" type="image/jpeg" />
              <img 
                class="mx-auto img-fluid p-1 lazy"
                data-src="{{ asset('images/releases/thumbs/' . item.filename . '.jpg') }}"
                alt="{{ item.name }} - {{ item.title }}"
                width="300" height="300"
            />
            </picture> 
          </a>         
        </div>
      </div>
    </slide>
  </carousel>
</div>

@push('css')
<link rel="stylesheet" href="{{ asset('css/carousel.css') }}">
@endpush

@push('scripts')
<script type="module">
  import { createApp } from 'vue'
  import vue3Carousel from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
  import ReleaseCarousel from './release-carousel.js'

  createApp(ReleaseCarousel)
    .mount('#release-carousel')
</script>
@endpush

and this is my vue module

import { Carousel, Slide } from 'vue3Carousel'

export default {
  setup() {
    const carouselConfig = {
      wrapAround: true,
      itemsToShow: 3,
      snapAlign: 'center',
      autoplay: '2000',
      breakpoints: {
        600: {
          itemsToShow: 1,
          snapAlign: 'start'
        },
        1000: {
          itemsToShow: 2,
          snapAlign: 'start'
        },
        1200: {
          itemsToShow: 3,
          snapAlign: 'start'
        }
      }
    }

    return { carouselConfig }
  },
  components: {
    Carousel,
    Slide
  }
}

Again, I’m not sure if this is the proper way to do it. Any help or advice much appreciated

I am trying to build a custom Hubspot module similar to this page http://minimalmonkeyblog.s3-website-us-west-2.amazonaws.com/. I have the article setup in HUBL to be a repeating group of fields so the user can add as many articles as they want. I am having issues with the article not being hidden on the initial page. Display:none doesn’t appear to be working. Once you click on the article, it should open in the same window and be inside a slideshow. That functionality is working correctly.

Here is the code I have used for HTML, CSS, HUBL, and Javascript

<div class="panels-container">
    <div class="panels">
        {% for article in module.articles %}
        <div class="panel" data-index="{{ loop.index0 }}" data-url="{{ article.url }}">
            <div class="panel-content">
                <div class="panel-date">{{ article.date }}</div>
                <h3 class="panel-title">{{ article.title }}</h3>
                <p class="panel-excerpt">{{ article.content|striptags|truncate(100, true) }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div class="article-view hidden">
    <div class="article-slideshow">
        {% for article in module.articles %}
        <div class="article-slide">
            <h2>{{ article.title }}</h2>
            <p>{{ article.content }}</p>
        </div>
        {% endfor %}
    </div>
    <button class="close-article-view">X</button>
    <button class="prev-article">❮</button>
    <button class="next-article">❯</button>
</div>


{% for item in module.articles %}
    {{ item.date }}
    {% inline_text field="title" value="{{ item.title }}" %}
    {% inline_rich_text field="content" value="{{ item.content }}" %}
    {{ item.url.href|escape_url }}
{% endfor %}



/* Panels container and individual panel styling */
.panels-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px;
    background-color: #f5f5f5;
}

.panels {
    display: block;
    position: relative;
    z-index: 2;
    bottom: 0;
    overflow: hidden;
    width: auto;
    min-width: 100%;
    min-height: 460px;
}

.panel {
    flex: 0 0 calc(100% / 5);
    max-width: calc(100% / 5);
    scroll-snap-align: start;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 0 10px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.panel:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Article view styling */
.article-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.article-slideshow {
    width: 80%;
    max-height: 80%;
    overflow-y: auto;
    text-align: center;
}

.article-slide {
    display: none;
}

.article-slide.active {
    display: block;
}
.article-slide.hidden {
    visibility: hidden;
}

/* Navigation and close buttons */
button {
    background: #0073e6;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background: #005bb5;
}

.close-article-view {
    position: absolute;
    top: 120px;
    right: 120px;
    background: #e60000;
}

@media (min-width: 570px) {
    .panels {
        display: flex
;
        position: absolute;
        top: 152px;
    }
}


document.addEventListener('DOMContentLoaded', () => {
    const panelsContainer = document.querySelector('.panels-container');
    const articleView = document.querySelector('.article-view');
    const articleSlides = document.querySelectorAll('.article-slide');
    const closeButton = document.querySelector('.close-article-view');
    const prevButton = document.querySelector('.prev-article');
    const nextButton = document.querySelector('.next-article');
    let currentIndex = 0;

    // Show the panels initially
    panelsContainer.style.display = 'flex';
    articleView.style.display = 'none';

    // Function to show an article
    const showArticle = (index) => {
        articleSlides.forEach((slide, idx) => {
            slide.classList.toggle('active', idx === index);
        });
        currentIndex = index;
        panelsContainer.style.display = 'none';
        articleView.style.display = 'flex';
    };

    // Function to close the article view
    const closeArticleView = () => {
        panelsContainer.style.display = 'flex';
        articleView.style.display = 'none';
    };

    // Navigate to previous article
    const showPrevArticle = () => {
        currentIndex = (currentIndex - 1 + articleSlides.length) % articleSlides.length;
        showArticle(currentIndex);
    };

    // Navigate to next article
    const showNextArticle = () => {
        currentIndex = (currentIndex + 1) % articleSlides.length;
        showArticle(currentIndex);
    };

    // Add click events to panels
    document.querySelectorAll('.panel').forEach((panel, index) => {
        panel.addEventListener('click', () => {
            showArticle(index);
        });
    });

    // Close button event
    closeButton.addEventListener('click', closeArticleView);

    // Navigation buttons
    prevButton.addEventListener('click', showPrevArticle);
    nextButton.addEventListener('click', showNextArticle);
});

I have a sidebar with some checkbox options to display stuff on a map on my website. When using any browser outside of Safari it works, but I can’t click them on Safari. They clicks do not seem to register or the checkbox jitters. I’ve tried using some timeout functions on Javascript to try and slow it down but it has not worked. Any ideas?

You can access the website at derrumbes.net

Sample of my code (Javascript):

let sidebarToggleTimer = 200; // Store the timer to prevent rapid toggling

function toggleSidebarWithDelay() {
  // Clear any existing timer if the function is triggered again quickly
  if (sidebarToggleTimer) {
    clearTimeout(sidebarToggleTimer);
  }

  // Set a new timer to toggle the sidebar after 200ms
  sidebarToggleTimer = setTimeout(() => {
    document.getElementById("sidebar").classList.toggle("closed");
  }, 200);
}

// Event Listeners Setup
function setupEventListeners(map, layers, stations) {
  let dataType;
  let checkboxToggleTimer = 200;

  // Function to toggle checkbox with delay (used for legend and attributions)
  const toggleCheckboxWithDelay = (elementId, visibility) => {
    if (checkboxToggleTimer) {
      clearTimeout(checkboxToggleTimer); // Clear the previous timer
    }

    checkboxToggleTimer = setTimeout(() => {
      const element = document.getElementById(elementId);
      element.style.display = visibility;
    }, 200); // Delay of 200ms before toggling visibility
  };

  document
    .getElementById("rainfall-button")
    .addEventListener("click", async () => {
      await processFiles();
      dataType = "rainfall";
      changeData(stations, dataType);
      updateMapLabel(getLabelText(dataType));
    });

  document
    .getElementById("soilSaturation-button")
    .addEventListener("click", async () => {
      await processFiles();
      dataType = "soilSaturation";
      changeData(stations, dataType);
      updateMapLabel(getLabelText(dataType));
    });

  document
    .getElementById("susceptibilityLayer")
    .addEventListener("change", (event) => {
      const { susceptibilityLayer } = layers;
      if (event.target.checked) {
        susceptibilityLayer.addTo(map);
      } else {
        map.removeLayer(susceptibilityLayer);
      }
    });

  document
    .getElementById("precipitationLayer")
    .addEventListener("change", (event) => {
      const { precipitationLayer } = layers;
      if (event.target.checked) {
        precipitationLayer.addTo(map);
      } else {
        map.removeLayer(precipitationLayer);
      }
    });

  // Prevent double-click on sidebar from zooming the map
  document
    .getElementById("sidebar")
    .addEventListener("dblclick", function (event) {
      event.stopPropagation();
    });

  // Prevent double-click on sidebar button from zooming the map
  document
    .getElementById("hamburger-button")
    .addEventListener("dblclick", function (event) {
      event.stopPropagation();
    });

  // Event delegation for image toggling
  document.addEventListener("click", function (event) {
    if (event.target.classList.contains("arrow")) {
      toggleImage(event);
    }
  });

  // Toggle attributions visibility
  const attributionControl = document.querySelector(
    ".leaflet-control-attribution"
  );
  const toggleButton = document.getElementById("toggle-attributions");
  attributionControl.style.display = "none";
  toggleButton.addEventListener("click", function () {
    if (checkboxToggleTimer) {
      clearTimeout(checkboxToggleTimer); // Clear the previous timer
    }
    checkboxToggleTimer = setTimeout(() => {
      if (attributionControl.style.display === "none") {
        attributionControl.style.display = "block";
      } else {
        attributionControl.style.display = "none";
      }
    }, 200); // Delay of 200ms before toggling visibility
  });

  // Event listener for legend checkbox
  document
    .getElementById("legendToggle")
    .addEventListener("change", (event) => {
      const visibility = event.target.checked ? "block" : "none";
      toggleCheckboxWithDelay("legend-container", visibility);
    });

  // Event listener for legend checkbox
  document
    .getElementById("susceptibilityLegendToggle")
    .addEventListener("change", (event) => {
      const visibility = event.target.checked ? "block" : "none";
      toggleCheckboxWithDelay("susceptibility-legend-container", visibility);
    });

  document
    .getElementById("sidebar-toggle")
    .addEventListener("click", toggleSidebarWithDelay);
  document
    .getElementById("hamburger-button")
    .addEventListener("click", toggleSidebarWithDelay);
}

CSS:

input[type="checkbox"],
label {
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  touch-action: manipulation; /* Prevent default behavior */
}

/* Prevent touch delays */
input[type="checkbox"] {
  -webkit-appearance: none; /* Remove default appearance */
  appearance: none; /* Remove default appearance */
  transform: translate(0%, 30%);
  width: 20px; /* Adjust size as needed */
  height: 20px; /* Adjust size as needed */
  background-color: #fff; /* Background color */
  border: 1px solid #ccc; /* Border color */
  border-radius: 3px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  position: relative; /* Position relative for pseudo-element */
}

input[type="checkbox"]:checked::before {
  content: "2713"; /* Checkmark character */
  position: absolute; /* Position absolute for pseudo-element */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Center pseudo-element */
  font-size: 16px; /* Adjust size as needed */
  color: #000; /* Checkmark color */
}

I’m attempting to use Matuerial UI with the React Mentions library, and I currently have an issue where my Mentions and Hashtags aren’t properly aligning with the text. I’ve tried to add a custom colour to differentiate the text from a Mention.

Misaligned highlights

From looking at the dev tools I can see that our styling is mostly the same, apart from colour. I’ve also used the dev tools to enable/disable styles to pinpoint the problem area

I’ve since tried removing the parent Box in favour of a div element.

I’ve also stripped all styling and gone with their base solution, this issue still persists. I’ve opened an issue on github but it looks like issues mainly go unnoticed by their team. Wondering if anyone has run into this issue, and how you solved it. Any information is greatly appreaciated.

My current implementation

import { FunctionComponent } from 'react';
import { MentionsInput, Mention } from 'react-mentions';
import { Avatar, Box, Typography, makeStyles } from '@material-ui/core';
import styled, { useTheme } from 'styled-components';
import { useScreenSizes } from 'hooks/use-screen-sizes/useScreenSizes';
import { RICH_TEXT_TRIGGERS } from 'common/constants/richTextTriggers';
import classNames from './styles.module.css';
import { useMentions } from '../../posts/hooks/useMentions';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    '& .MuiInput-input': {
      fontSize: 'unset',
    },
  },
}));

export const StyledEllipsisBox = styled(Box)`
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: ${(props) => props.theme.colors.accent};
`;

const renderMentionSuggestion = (
  suggestion,
  search,
  highlightedDisplay,
  index,
  focused,
  theme,
  isDevice
) => {
  const headlineLength = isDevice ? 25 : 55;
  return (
    <Box
      className={`suggestions__item ${focused ? 'suggestions__item--focused' : ''}`}
      display="flex"
      justifyContent="center"
      alignItems="center"
      p="1rem"
      bgcolor={theme.colors.supplementary1}
    >
      <Avatar src={suggestion.image} alt={suggestion.display} className="avatar" />
      <Box width="calc(100% - 2rem)" paddingLeft="1rem" paddingRight="1rem" boxSizing="border-box">
        <StyledEllipsisBox color={theme.colors.accent1}>{suggestion.display}</StyledEllipsisBox>
        <StyledEllipsisBox color={theme.colors.accent}>
          {suggestion?.headline?.slice(0, headlineLength)}
          {suggestion?.headline?.length > headlineLength && '...'}
        </StyledEllipsisBox>
      </Box>
    </Box>
  );
};

const renderTagSuggestion = (
  suggestion,
  search,
  highlightedDisplay,
  index,
  focused,
  theme,
  isDevice
) => (
  <Box
    className={`suggestions__item ${focused ? 'suggestions__item--focused' : ''}`}
    display="flex"
    justifyContent="start"
    alignItems="center"
    p="0.25rem 1rem 0.5rem 1rem"
    bgcolor={theme.colors.supplementary1}
    width="100%"
  >
    <Box width="100%" paddingLeft="1rem" paddingRight="1rem" boxSizing="border-box">
      <StyledEllipsisBox color={theme.colors.accent1}>#{suggestion.display}</StyledEllipsisBox>
      <StyledEllipsisBox mt="-5px">
        <Typography variant="caption">
          {suggestion?.contentCount && `${suggestion?.contentCount} Posts`}
        </Typography>
      </StyledEllipsisBox>
    </Box>
  </Box>
);

interface MentionsInputFieldProps {
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  customStyle?: React.CSSProperties;
  placeholderText?: string;
  highlighterHeight?: string;
}

export const MentionsInputField: FunctionComponent<MentionsInputFieldProps> = ({
  value,
  onChange,
  customStyle,
  placeholderText,
  highlighterHeight,
}) => {
  const { isDevice } = useScreenSizes();
  const theme = useTheme();
  const { getHashtags, getMentions } = useMentions();
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <MentionsInput
        value={value}
        onChange={onChange}
        style={{
          width: '100%',
          height: '100%',
          input: {
            color: theme.colors.accent1,
            border: 'none',
            outline: 'none',
            overflowY: 'auto',
          },
          highlighter: { height: highlighterHeight },
          focus: { outline: 'none' },
        }}
        allowSuggestionsAboveCursor
        placeholder={placeholderText}
      >
        <Mention
          trigger={RICH_TEXT_TRIGGERS.MENTION}
          data={getMentions}
          appendSpaceOnAdd
          markup={`{@}[__display__](__id__)`}
          className={classNames.mentions__mention}
          renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) =>
            renderMentionSuggestion(
              suggestion,
              search,
              highlightedDisplay,
              index,
              focused,
              theme,
              isDevice
            )
          }
        />
        <Mention
          trigger={RICH_TEXT_TRIGGERS.HASHTAG}
          data={getHashtags}
          markup={`{#}[__display__](__id__)`}
          className={classNames.mentions__mention}
          displayTransform={(s) => `#${s}`}
          allowSuggestionsAboveCursor
          appendSpaceOnAdd
          renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) =>
            renderTagSuggestion(
              suggestion,
              search,
              highlightedDisplay,
              index,
              focused,
              theme,
              isDevice
            )
          }
        />
      </MentionsInput>
    </div>
  );
};

I have trial license of Ag-Grid & Ag-Charts and trying to install them properly in Laravel 11.

First, I’ve added dependencies to package.json as shown below:

"dependencies": {
    "ag-charts-enterprise": "^11.0.4",
    "ag-grid-community": "^33.0.4",
    "ag-grid-enterprise": "^33.0.4"
}

Then I run command: npm install. After installation I modified my app.js file as below:

    import 'ag-grid-enterprise';
import 'ag-charts-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

import { LicenseManager } from 'ag-grid-enterprise';
LicenseManager.setLicenseKey("my_trial_license_code");

import * as agGrid from 'ag-grid-community';
window.agGrid = agGrid;

Then I run npm run build to build js and css files. After I created a route and blade file. When I trying to test if it’s working or not I got Uncaught ReferenceError: agGrid is not defined error.

This is my blade file content:

    <html lang="en">
<head>
    @vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>

<div id="myGrid" style="height: 500px"></div>

<script>
    let gridApi;

    // Grid Options: Contains all of the grid configurations
    const gridOptions = {
        // Data to be displayed
        rowData: [
            { make: "Tesla", model: "Model Y", price: 64950, electric: true },
            { make: "Ford", model: "F-Series", price: 33850, electric: false },
            { make: "Toyota", model: "Corolla", price: 29600, electric: false },
            { make: "Mercedes", model: "EQA", price: 48890, electric: true },
            { make: "Fiat", model: "500", price: 15774, electric: false },
            { make: "Nissan", model: "Juke", price: 20675, electric: false },
        ],
        // Columns to be displayed (Should match rowData properties)
        columnDefs: [
            { field: "make" },
            { field: "model" },
            { field: "price" },
            { field: "electric" },
        ],
        defaultColDef: {
            flex: 1,
        },
    };
    // Create Grid: Create new grid within the #myGrid div, using the Grid Options object
    gridApi = agGrid.createGrid(document.querySelector("#myGrid"), gridOptions);
</script>
</body>
</html>

Where am I messing up? Thanks in advance.

I am creating a custom calendar in React.js which has a date range selection functionality.

It works perfectly on desktop. On mobile, when i touch the date cell and try to drag, the screen start scrolling. But i want to disable the scroll when the user is dragging but also allow user to scroll when the user does the scroll gesture on the scroll.
I have already tried using touch-action: none on the date cell, but it completely disables the scroll.
For your information i am using pointer events to handle both mouse and touch

So i tried to apply touch-action: none dynamically, with the help of setTimeout.

const isDraggingRef = useRef<boolean>(false)

const handlePointerDown = (event: React.PointerEvent, date: string) => {
  
// Initialize drag-related state
  dragStartRef.current = date;
  dragEndRef.current = date;

// Add pointermove and pointerup listeners globally
  document.addEventListener("pointermove", handleMouseMoveGlobal);
  document.addEventListener("pointerup", handlePointerUpGlobal);

  pointerTimeoutRef.current = setTimeout(() => {
  isDraggingRef.current = true;
  }, 200); // Adjust the timeout as needed
};

When the isDraggingRef is true, touch-action: none is applied dynamically. But the interesting thing is as soon as pointer down event runs, the pointer cancel event runs (i read somewhere if scroll is not disabled initially, the pointer events conflict with other browser events and pointer events get cancelled) and it does not reach the pointerUp event callback (it contains logic for setting the range on pointer up). So as pointerup is not called, the range doesn’t get selected.
Note that range does get selected on 2nd attempt as isDraggingRef.current is still true and touch-action: none is already active.

Also i got to know that onTouchStart if i do event.preventDefault(), it will disable the scroll. Here also i will have to do it dynamically, as i want scroll to be there when user is not trying to drag and select. But here also it did not work on 1st attempt (as pointerCancel runs as soon as pointer down runs and it never reaches the pointerUp.

Airbnb has this functionality done already. Attaching a screenshot from their site

  const comp_ref = useRef();
  const { active_page, path_arr, is_active_alert } = useCustomHook();
  const { user_loaded, nav_collapse, mobile } = useSelector(
    (state) => state.boot
  );

  useEffect(() => {
    if (nav_collapse || mobile) {
      if (is_active_alert && comp_ref.current) {
        comp_ref.current.style.transform = "translateY(0px)";
      }
    }
  }, [is_active_alert]);

In the useEffect, it does not have nav_collpase or mobile as its dependencies/triggers.

Both nav_collpase and mobile are redux states that hold merely boolean values.

Based on my testing, it still gets the updated values for both nav_collpase and mobile whenever the callback is run (due to a change in is_active_alert).

Question:

1. How is the callback in the useEffect able to get the updated values for the state variables when it doesn’t depend on them?

I’m starting an internship, and my project is to develop a real estate intermediation platform. The platform will allow users to browse and list properties, manage their profiles, and handle transactions or communications between buyers and sellers.
Here’s a breakdown of the main modules:
User Management: User authentication and profile management.
Property Listings: A module for adding, updating, and browsing real estate listings with search and filter functionality.
Transactions: Managing payments or agreements between parties.
Messaging System: Enabling buyers and sellers to communicate securely within the platform.
Analytics and Admin Dashboard: A backend system for admins to monitor activity and analytics.

Some options I’m considering are PHP with Laravel for the backend and angular for the frontend but I’m open to suggestions.
If you’ve worked on a similar project or have insights on the best stack for this kind of platform, I’d love to hear your advice! Thanks in advance.

I am using calendar data to get messages on the screen on certain days.

This works fine using lines as mentioned below:

if ((month == 1) && (date == 28) && (hour == 17)) 
    document.write("test<br>message");

However I would also like to produce a short beep when this condition is met.

Therefore I tried the following:

 function play_beep() {
  var snd = new Audio("beep.mp3");
  snd.play();
  return false;
 }

When using a ‘on button click’ in HTML the sound is correctly produced, but I can’t get it produced when the condition is met.

I am looking for something like:

if ((month == 1) && (date == 28) && (hour == 17)) play_beep();

This however, does not work.

I tried:

function play_beep() {
    var snd = new Audio("beep.mp3");
    snd.play();
    return false;
}

if ((month == 1) && (date == 28) && (hour == 17)) play_beep();

That does not work.

Im new to next js but why does this not work ?enter image description here

enter image description here

My client component does a refresh that causes my server component to rerender and call an api.

Search bar being the client component and RecommendedRecipes being the server component affected .

i cached it with cache from “react” but its still not working . when i type something in the search bar , the api get called multiple times . enter image description hereenter image description here

I’m working with a third party library and I’m attempting to pass a callback returning a string to a method using their API, but the catch is the callback would need to be executed asynchronously in my case… I don’t think this is possible, but I wanted to confirm.

The essential format of the third party library’s method:

const MyPlugin = {
    push: (fn) => {
    const val = fn();
    console.log('val ' + val); // val must be a string returned by my internal API call
  }
}

MyPlugin.push() takes a callback parameter that needs to return a string (specifically, an encrypted token). However, I need to make an API call internally to have this token generated at the time when this third party method is called.

This callback function gets triggered on the third party’s side when a certain event fires, and I’d like to avoid making my internal API call until this event fires… otherwise I’d simply generate the token outside of the third party method and then call the third party method once my API call resolves.

Of course, attempting to use a promise for the callback simply returns the promise itself, rather than returning the actual string generated by my API call. Due to the fact that I need to have my own API call run simultaneously with the third party’s method, I don’t think this is possible, but wanted to check in case I’m wrong and there’s some kind of workaround. Thanks.

I have a simple ASP.Net Core 8 site created in VS 2022. I have installed Bootstrap 5.3.3, jQuery 3.7.1 using libman and copied the simplest Menu sample from GetBootstrap. When the screen width is small, the menu disapears and the burger bars are shown but nothing happens when I click on it?
What have I done wrong?

libman.json

    {
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/"
    },
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ],
  "version": "1.0"

HTML of page:

<!DOCTYPE html>
<html lang="en-ie">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/custom.css" rel="stylesheet" />
    <script src="~/lib/jquery/jquery.js"></script>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Your App</a>
            <button class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <p>test</p>
    </div>
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>