Blancer.com Tutorials and projects

I am using a date picker easepick and I’m trying to pass the dates through to javascript file and disable the dates that I am passing through. The problem is even if I try to set more than one date in a variable it only disables the first date.

This is an example from easepick however this is with hard coded dates inside easepick

 const bookedDates = [
          '2024-09-02',
          ['2024-09-06', '2024-09-11'],
          '2024-09-18',
          '2024-09-19',
          '2024-09-20',
          '2024-09-25',
          '2024-09-28',
      ].map(d => {
          if (d instanceof Array) {
            const start = new DateTime(d[0], 'YYYY-MM-DD');
            const end = new DateTime(d[1], 'YYYY-MM-DD');

            return [start, end];
          }

This is what I’ve tried

    if (datesUna == undefined) {
        date1 = '2024-09-19';
        date2 = '2024-09-21';
        datesUna = date1.concat(",",date2);
        console.log(datesUna);
    } else {
        datesUna = datesUna.replaceAll('"', '');
        console.log(datesUna);
    }

This is the concatinated string : 2024-09-19,2024-09-21

This is the console log for a string that I pass through from the backend :

‘2024-09-07′,’2024-10-13′,’2024-10-14′,’2024-10-15′,’2024-10-16′,’2024-10-17′,’2024-10-18′,’2024-10-19′,’2024-10-20′,’2024-11-08′,’2024-11-09′,’2024-11-22′,’2024-11-23′,’2024-11-24′,’2024-11-25′,’2024-11-26′,’2024-12-04′,’2024-12-05′,’2024-12-06′,’2024-12-07′,’2024-12-23′,’2024-12-24′,’2024-12-25′,’2024-12-26′,’2025-04-23′,’2025-04-24′,’2025-04-25′,’2025-04-26′,’2025-05-22′,’2025-05-23′,’2025-05-24′,’2025-05-25′,’2025-05-26′,’2025-07-01′,’2025-07-02′,’2025-07-03′,’2025-07-04′,’2025-07-05′,’2025-07-06′,’2025-07-07′,’2025-07-08′,’2025-07-09′,’2025-07-10′,’2025-07-25′,’2025-07-26′,’2025-07-27′,’2025-07-28′,’2025-07-29′,’2025-07-30′,’2025-07-31′,’2025-08-01′,’2025-08-02′,’2025-08-03′,’2025-08-04′,’2025-08-05′,’2025-08-06′,’2025-08-07’

    const bookedDates = [datesUna].map(d => {
  if (d instanceof Array) {
    const start = new DateTime(d[0], 'YYYY-MM-DD');
    const end = new DateTime(d[1], 'YYYY-MM-DD');

    return [start, end];
  }

  return new DateTime(d, 'YYYY-MM-DD');
});

Even if I concat two dates only the date1 will be disabled and date2 won’t be.

I want Google Maps to display two routes within its bounds but instead it only ever fits the most recent route rendered. When I remove the render line renderer.setDirections(result); the bounds are set correctly. Why does this happen and how can I make it render the route and conform to the right bounds?

var map; // Declare map globally to access it in different functions
var directionsRenderer1, directionsRenderer2; // Renderers to display directions on the map for both routes
var directionsService1, directionsService2; // Services to request directions for both routes
var bounds; // Global bounds to encompass both routes

function initMap() {
    console.log("Initializing map...");
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10, // Initial zoom level of the map
        center: { lat: 40.8625, lng: -79.8857 }, // Center of the map
        streetViewControl: false, // Disable Street View control
        mapTypeId: 'roadmap' // Set map type to roadmap
    });

    bounds = new google.maps.LatLngBounds(); // Initialize bounds to include both routes

    directionsRenderer1 = new google.maps.DirectionsRenderer({
        map: map, // Associate this renderer with the map
        suppressMarkers: true, // Do not show default markers on the route
        polylineOptions: {
            strokeColor: '#FF0000', // Color of the route line for the first renderer
            strokeOpacity: 1.0, // Full opacity of the route line
            strokeWeight: 2 // Weight of the route line
        }
    });

    directionsRenderer2 = new google.maps.DirectionsRenderer({
        map: map, // Associate this renderer with the map
        suppressMarkers: true, // Do not show default markers on the route
        polylineOptions: {
            strokeColor: '#0000FF', // Color of the route line for the second renderer
            strokeOpacity: 1.0, // Full opacity of the route line
            strokeWeight: 2 // Weight of the route line
        }
    });

    directionsService1 = new google.maps.DirectionsService(); // Initialize the DirectionsService for the first route
    directionsService2 = new google.maps.DirectionsService(); // Initialize the DirectionsService for the second route
}

$(document).ready(function() {
    $('#leftRouteSelect').change(function() {
        // When the selected route in the left dropdown changes
        var selectedOption = $(this).find('option:selected'); // Get the selected option
        var startLat = parseFloat(selectedOption.data('start-lat')); // Extract starting latitude
        var startLng = parseFloat(selectedOption.data('start-lng')); // Extract starting longitude
        var endLat = parseFloat(selectedOption.data('end-lat')); // Extract ending latitude
        var endLng = parseFloat(selectedOption.data('end-lng')); // Extract ending longitude

        // Update the map route for the left route
        updateMapRoute(startLat, startLng, endLat, endLng, directionsRenderer1, directionsService1);
    });

    $('#rightRouteSelect').change(function() {
        // When the selected route in the right dropdown changes
        var selectedOption = $(this).find('option:selected'); // Get the selected option
        var startLat = parseFloat(selectedOption.data('start-lat')); // Extract starting latitude
        var startLng = parseFloat(selectedOption.data('start-lng')); // Extract starting longitude
        var endLat = parseFloat(selectedOption.data('end-lat')); // Extract ending latitude
        var endLng = parseFloat(selectedOption.data('end-lng')); // Extract ending longitude

        // Update the map route for the right route
        updateMapRoute(startLat, startLng, endLat, endLng, directionsRenderer2, directionsService2);
    });
});

function updateMapRoute(startLat, startLng, endLat, endLng, renderer, service) {
    var startPoint = new google.maps.LatLng(startLat, startLng); // Create a LatLng object for the start point
    var endPoint = new google.maps.LatLng(endLat, endLng); // Create a LatLng object for the end point

    var request = {
        origin: startPoint, // Set the origin of the route
        destination: endPoint, // Set the destination of the route
        travelMode: 'DRIVING' // Set travel mode to driving
    };

    service.route(request, function(result, status) {
        if (status === 'OK') {
            renderer.setDirections(result); // Render the directions on the map

            var routePath = result.routes[0].overview_path; // Get the path of the route

            // Extend bounds to cover this route
            routePath.forEach(function(pathPoint) {
                bounds.extend(pathPoint); // Add each point of the route to the bounds
            });

            // Fit the map to cover all the extended bounds (both routes)
            map.fitBounds(bounds);

            var leg = result.routes[0].legs[0]; // Get the leg of the route
            var infoWindow = new google.maps.InfoWindow({
                content: '<div style="color: black;">Distance: ' + leg.distance.text + ', Duration: ' + leg.duration.text + '</div>' // Content for the info window
            });

            infoWindow.setPosition(bounds.getCenter()); // Set the info window position to the center of the bounds
            infoWindow.open(map); // Open the info window on the map
        } else {
            window.alert('Directions request failed due to ' + status); // Alert on failure
        }
    });
}```


I tried using `bounds.extend(pathPoint);` and `map.fitBounds(bounds);` but the map would always conform to the most recent path set by `renderer.setDirections(result);`.

I created a navbar with a logo on the left side, links on the right side and another 2 links that are highlighted and I added a icon menu, which appears on small screens, but, the problem is that when I open the menu, the links are side by side and I want it to stay in column format.

I tried a lot of codes, but it doesn’t work — nothing happens. Also, I want to make the highlighted buttons stay inside the menu box too. By the way, I’m a completely beginner, so it’s really hard to me work with css, it’s kinda confusing. Could anyone save me please?

Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/main/style.css">
    <link rel="stylesheet" href="/main/main.css">
    <!--fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/de42dd2adf.js" crossorigin="anonymous"></script>
    <title>Bryant Ecom</title>
</head>
<body>
    <!-- navegação -->
    <header>
        <nav id="navbar">
            <img src="/images/logo.png" alt="Bryant Ecom" id="logo">
                
                <div class="nav-links" id="navLinks">
                    <a href="index.html" class="active">Início</a>
                    <a href="link2.html">Link 2</a>
                    <a href="link3.html">Link 3</a>
                    <a href="link4.html">Link 4</a>
                    <a href="link5.html">Link 5</a>
                    <a href="link6.html">Link 6</a>
                </div>
                    
                <div class="highlight-links">
                    <a href="#" class="nav-btn">Login</a>
                    <a href="#" class="nav-btn">Contato</a>
                </div>

                <a href="javascript:void(0)" class="btn" onclick="myFunction()">
                    <i class="fa-solid fa-bars"></i>
                </a>
        </nav>
    </header>
    <script src="/main/script.js"></script>
</body>
</html>

:root{
    /* cores */
    --cor-principal: #186fdb;
    --cor-secundaria: #000000;
    --cor-adicional: #ffffff;
    /* fontes */
    --ff:"Manrope", sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff); 
    --fw: 600;
    --logo: 150px;
}

body {
    font-family: var(--ff);
    margin: 0;
    padding: 28px 8%;
    box-sizing: border-box;
}

header {
    width: 100%; /* ocupa toda a largura da tela  */
}

#logo {
    height: var(--logo);
    cursor: pointer;
}

/* navbar */

#navbar {
    width: 100%;
    display: flex; /* um elemento ao lado do outro */
    align-items: center;
    justify-content: space-between;
}

.nav-links {
    display: flex;
    gap: 80px;
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-secundaria);
    font: var(--p);
    font-weight: var(--fw);
    position: relative;
}

.nav-links a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: var(--cor-principal);
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active::after {
    width: 100%;
}

.nav-links.active a {
    color: var(--cor-principal);
    border-bottom: 3px solid var(--cor-principal);
}

/* botões personalizados */
.highlight-links {  /* essa class altera o espaçamento apenas entre os dois botões */
    display: flex;
    gap: 10px;
    list-style: none;
}

.nav-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 10px 15px;
    font-weight: var(--fw);
    color: var(--cor-adicional);
    background-color: var(--cor-principal);
    transition: background-color .3s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} 

.nav-btn:hover {
    background-color: #468ce2;
}

/* menu mobile */
.btn {
    display: none;
    color: var(--cor-secundaria);
}

@media screen and (max-width: 1170px) {
    .nav-links, 
    #navbar .highlight-links {
        display: none;
        gap: 10px;
    }

    .btn {
        display: block;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
}

@media screen and (max-width: 1170px) {
    .nav-links.responsive {position: relative;}
    .nav-links.responsive .btn {
        position: absolute;
        right: 0;
        top: 0;
    }

    .nav-links.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    
}

function myFunction() {
    var x = document.getElementById("navLinks");
    if (x.className === "nav-links") {
      x.className += "responsive";
    } else {
      x.className = "nav-links";
    }
  }

// hover
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
  link.addEventListener('click', function () {
    navLinks.forEach(link => link.classList.remove('active'));
    this.classList.add('active');
  });
});

We are using vuetify for our vuejs website.

We are able to integrate TimePicker and DatePicker in our project.

Use has to click twice to choose datetime. Is there any way to choose both in single click like DateTimePicker in other library?

For now we are using v-text-field with type as datetime-local but we are looking for some better option.

<v-text-field class="mx-2" label="Choose" variant="underlined" type="datetime-local" v-model="datetime">

I’m new to react-native, but I’m trying to send the index of a list to another screen.

saved.tsx

onPress={() => router.push({
    pathname: "/lists/list",
    params: {
        test: list.id,
        },
        })}

I’m receiving the list.id in list.tsx, so it’s being sent properly. However, I can’t use it as an index in the following function in my list.tsx due to the error mentioned in the title

const Page = (props: Props) => {
    const { query } = useLocalSearchParams<{ query: string }>();
    <View>
        {restaurantLists[{ query }].contents.map((list) => {
        return (
            <TouchableOpacity>
                <List.Item
                    title={list.restaurantName}
                    description="Item description"
                    left={props => <List.Icon {...props} icon="equal" />}
                />
           </TouchableOpacity>
        );
        })}
    </View>
}

Example of database

export const restaurantLists = [
    {
        id: "1",
        listName: "Italian",
        contents: [
            {
                key: "1",
                restaurantName: "Olive Garden",
            },
            {
                key: "2",
                restaurantName: "Tabellas",
            },
            {
                key: "3",
                restaurantName: "Mauricios",
            },
            {
                key: "4",
                restaurantName: "dunno",
            },
        ]
    },

I’m expecting to be able to use the query being sent in params as an index, but I receive the “Type ‘{ test: string; }’ cannot be used as an index type” error

when I click on a column header, sorting happens as expected while keeping null values at the bottom for both ascending and descending cases. It is working this way for all my columns except for the ones with date values where all null values are being placed on the top or bottom. Is this expected with AngularJS or am I doing something wrong?

Here is my JS code for sorting that is called using ng-click on a column header:

       $scope.Data = $scope.Data.sort(function (a, b)
       {
           var firstValue = getDisplayValue(a, $scope.TableSorting.SortedByColumn);
           var secondValue = getDisplayValue(b, $scope.TableSorting.SortedByColumn);

           if (firstValue === null)
           {
               return 1;
           }
           else if (secondValue === null)
           {
               return -1;
           }

           if (isDate(firstValue) && isDate(secondValue))
           {
               firstValue = new Date(firstValue);
               secondValue = new Date(secondValue);
           }

           if (typeof firstValue === 'string' && typeof secondValue === 'string')
           {
               firstValue = firstValue.toLowerCase();
               secondValue = secondValue.toLowerCase();
           }

           if (firstValue < secondValue)
           {
               return $scope.TableSorting.SortInReverseOrder ? 1 : -1;
           }

           if (firstValue > secondValue)
           {
               return $scope.TableSorting.SortInReverseOrder ? -1 : 1;
           }

           return 0;
       });
   };

    getDisplayValue = function (data, columnName) {
        if (columnName == 'PreviousCallIsInbound') 
        {
            return data.PreviousConferenceId ? (data.PreviousCallDate ? 'Yes' : 'No') : null;
        }

        if (columnName == 'NextCallIsInbound') {
            return data.NextConferenceId ? (data.NextCallDate ? 'Yes' : 'No') : null;
        }

        return data[columnName];
    };

I tried including checks for undefined.
Any help is appreciated!

Using the Woocommemrce Checkout block, I would like to have the Add Order Note box checked by default. Using jQuery/JS does not seem to work inside the new(ish) block version of the Checkout page.

Code ex:

jQuery(function($){
      $('#checkbox-control-1').attr('checked', true);
   });

I am guessing the Checkout block requires a different approach; the textarea appears to be complete removed from the DOM until the box is checked, and the checkbox never has any ‘checked’ attribute added/removed when clicked.

my teacher told me to create a countdown timer with php that if you give it three inputs in html (hours,minutes,seconds) it will count down the numbers and show the remaining time in real time . like the timer in your phone . he told me to only use html, css and php . no js or ajax is allowed . with JAVA language i can do it but php is scripting language and shows the results after all the code is executed .

At first I thought the sleep() funtion is the answer but it’s script language .

Javascript Regex.

Given these..

string: ddd the ! key

regex: / !(?<=(?!the)w+ !)/

I want to know the reason why the regex does NOT fail.

I expect the regex to fail matching, it doesn’t, I don’t know why.
i found an alternative that works, which is..

/ !(?<=w+(?<!the) !)/

but i still prefer to make the one above work, because it’s faster(maybe).

I was looking at different ways to compress and upload a file to s3, and I recently came across the CompressionStream api. Basically uploading a file in one go using this seems to be quite straightforward:

const compressedStream = file.stream().pipeThrough(new CompressionStream('gzip'));
response = await fetch(presignedUrl,{
  method: "PUT",
  body: body,
  headers: {
    "Content-Type": contentType,
    "Content-Encoding": "gzip"
  },
});

Since, I target large files (1-3 gb), I was going for a Multipart upload. But, the Compression stream being a stream api can pipe through data as far as I understand(hopefully correctly) .

So, I wanted to combine the advantages of both, and knowing s3 doesn’t support directly streamed uploads, I wanted to upload the chunked bytes on a multipart upload instead.
Yet, I’m not being able to figure out how to do this, it may look something like this:

// Here, I've tried to use TransformStream but , a better approach is really welcomed
// this is pseudocode only
// file = event.target.files[0] , user selected file:
  file
  .stream()
  .pipeThrough(new CompressionStream('gzip'))
  .pipeThrough(new TransformStream({
    start(){},
    transform(chunk, controller) {
           
      uploadPromises.push(
        s3Client
          .send(
            new UploadPartCommand({
              Bucket: bucketName,
              Key: key,
              UploadId: uploadId,
              Body: some_chunk_of_5mb_size, // THIS IS THE CONFUSION
              PartNumber: i + 1,
            }),
          )
     
    },

   }))

1. What I do not understand is how to get a chunk of size >=5mb , since
   that’s s3’s requirement for a multipart upload.
2. What is the data type of this chunk even? In the Transform stream docs, it’s being compared to all sort of data type, can I even check the size and concatenate this chunk to make it 5mb for the multipart upload?
3. Does uploading like this if the chunk has to be for example further converted into buffer or something affect the integrity of the file being uploaded?

Please see the below code.
I thought the ‘11111111’ line would never be executed but it is.
Can anyone please explain.

function outer()
{
    function inner(dur)
    {
        console.log('in inner');
        
        setTimeout(() => {

            outer();
            console.log('11111111');
            
        }, dur);
                
    }
    console.log('in outer');
    inner(5000);
}

outer();

I expected an infinite loop. That happened.
But I never expected the ‘11111111’ to execute.

I’m working on an application where I need to recursively process a deeply nested structure using asynchronous operations (Promised-based API calls), and I’m curious about how JavaScript’s event loop, call stack, and microtask queue manage this. Specifically, I want to understand how recursion interacts with the asynchronous flow of JavaScript.

Here’s a simplified example of the recursion pattern I’m using:

async function processNode(node) {
    if (node.children) {
        for (let child of node.children) {
            await processNode(child);
        }
    }
    return performAsyncTask(node); // Assume this returns a Promise
}

My questions are:

1. How does JavaScript manage the call stack when processNode is deeply recursive? Does the stack get cleared between async calls due to the await, or can it still lead to stack overflow with deep recursion?

2. When an await is encountered, I know the function execution is paused and the event loop takes over. At what point does the function get re-entered into the call stack? Does the stack grow with every await resolution in the recursive call?

3. What strategies could be used to prevent potential stack overflow with deeply recursive async functions?

I’ve seen some discussions around tail call optimization in JavaScript, but I’m unsure how it applies in the case of async/await.

I’d appreciate some clarity on the internal mechanics of the call stack and event loop when recursion and async operations are combined!

I am trying to add some platform specific code to resize my game if on mobile. My problem is cordova.platformId is returning as “browser” on my phone after running “cordova run android”.

I created a new Cordova App using the command line. I added the Android platform and got an APK running on my device with “cordova run android”. I made a text file in my game to print the output of cordova.platformId. It outputs “browser”.

I’ve created a cardsByLanguage promise in my api file for my projected, inserted a navbar item for for a filtered results search, and created a click event listener for this navbar item, but no cards display. In my promise, I first filtered for language and then by uid, so both options should be filtered.

I put the following function for my api js file:

`const cardsByLanguage = (language, uid) => new Promise((resolve, reject) => {
  fetch(`${endpoint}/vocab.json?orderBy="language"&equalTo="${language}"`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => response.json())
    .then((data) => {
      const filteredData = Object.values(data).filter((card) => card.uid === uid);
      resolve(filteredData);
    })
    .catch(reject);
});`

And I’ve put the following for a navbar click event listener:

 `document.querySelector('#allLanguages').addEventListener('click', () => {
    cardsByLanguage(`${firebase.auth().currentUser.uid}`).then(showCards);
  });`

As stated in docs (https://docs.aws.amazon.com/iot/latest/developerguide/connect-and-pub.html)

For devices not registered as things in the AWS IoT Core registry, the
following policy grants permission to connect to AWS IoT Core with
client ID client1 and restricts the device to publishing on a
clientID-specific MQTT topic:

{
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Action":["iot:Publish"],
        "Resource": ["arn:aws:iot:us-east-1:123456789012:topic/${iot:ClientId}"]
      },
      {
        "Effect": "Allow",
        "Action": ["iot:Connect"],
        "Resource": ["arn:aws:iot:us-east-1:123456789012:client/client1"]
      }
    ]
}

Now I have a user authenticated with a Cognito user pool (by the hosted-ui). The user comes back to my webapp (frontend) and I use the id_token (returned by the hosted-ui redirect) with AWS.CognitoIdentityCredentials() class to get back a temporary key/secret/etc..

So that my AWS.config.credentials.identityId has valid value.

How should I update the policy to allow the logged user to connect/publish to a “abc” topic?

I tried replacing the ${iot:ClientId} and client1 (sample values) with:

1. the user pool id,
2. the webapp clientId,
3. the user id (that would make sense to me)…

but without success ;( .