Currently stuck on 6.2.3 SQL Lab: SQL Around the World in the Data Analytics Essentials course (CISCO Networking Academy).

I’ve tried both:

SELECT * 
FROM shapes 
WHERE color = 'red'

and

SELECT * 
FROM shapes 
WHERE color LIKE 'red'

…but I keep getting the same error and now I can’t claim my badge
Anyone know what I might be missing?

enter image description here

I have configured an API proxy in vite.config.ts:

    server: {
        proxy: {
            '/api': {
                target: 'http://nginx_backend:80',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^/api/, ''),
            }
        }
    },

(https://git.var-lab.com/opencal/web-frontend/-/blob/main/vite.config.ts?ref_type=heads#L26)

the endpoint is set here as baseUrl:

const apiClient = axios.create({
    baseURL: '/api',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
});

(https://git.var-lab.com/opencal/web-frontend/-/blob/main/src/services/api.ts?ref_type=heads#L3)

When I use a method like this

export async function getDayAvailabilities(email: string, dayAsString: string, eventTypeId: number): Promise<Availability> {
    try {
        const response = await apiClient.get(`/availability/day/?email=${email}&date=${dayAsString}&event_type_id=${eventTypeId}`);
        return response.data;
    } catch (error) {
        console.error(error);
        throw error;
    }
}

(used here: https://git.var-lab.com/opencal/web-frontend/-/blob/main/src/components/booking/BookingAvailabilities.vue?ref_type=heads#L99)

to request the API behind the proxy, the request is redirected from http://localhost/api/availability/day/[email protected]&date=2025-07-23&event_type_id=1 to http://nginx_backend/availability/[email protected]&date=2025-07-23&event_type_id=1

Reproduction

https://git.var-lab.com/opencal/web-frontend

Steps to reproduce

It can be reproduced by following the setup steps in the readme here https://git.var-lab.com/opencal/local-dev

When the fixtures are loaded, open http://localhost/[email protected] in your browser, select a event type and then a day. In the debug toolbar you will see what appens.

System Info

It runs in docker, see https://git.var-lab.com/opencal/web-frontend/-/blob/main/Dockerfile

Logs

I’m currently building a backend-first calendar scheduling system (like Google Calendar), and I’m working with the following type of event data returned from my API:

It includes recurring events (RRULE), all-day events (start.date), time-specific events (start.dateTime), and exception instances (e.g. cancelled occurrences of a recurring event).

I am going to replicate the response same as a google calendar api reponse.

Here’s a sample of Google API response:

json
Copy
Edit
it

{
        "kind": "calendar#event",
        "etag": ""3503602610079486"",
        "id": "6butbk1c770g1pnp4fnn2sokbd",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=NmJ1dGJrMWM3NzBnMXBucDRmbm4yc29rYmRfMjAyNTA3MDYgZ2FnYW9xcGhzQG0",
        "created": "2025-07-06T11:24:59.000Z",
        "updated": "2025-07-06T11:28:25.039Z",
        "summary": "Event Daily All Day Event",
        "creator": {
            "email": "[email protected]",
            "self": true
        },
        "organizer": {
            "email": "[email protected]",
            "self": true
        },
        "start": {
            "date": "2025-07-06"
        },
        "end": {
            "date": "2025-07-07"
        },
        "recurrence": [
            "RRULE:FREQ=DAILY"
        ],
        "transparency": "transparent",
        "iCalUID": "[email protected]",
        "sequence": 0,
        "reminders": {
            "useDefault": false
        },
        "eventType": "default"
    },
    {
        "kind": "calendar#event",
        "etag": ""3503602610079486"",
        "id": "6butbk1c770g1pnp4fnn2sokbd_20250708",
        "status": "cancelled",
        "htmlLink": "https://www.google.com/calendar/event?eid=NmJ1dGJrMWM3NzBnMXBucDRmbm4yc29rYmRfMjAyNTA3MDggZ2FnYW9xcGhzQG0",
        "created": "2025-07-06T11:24:59.000Z",
        "updated": "2025-07-06T11:28:25.039Z",
        "summary": "Event Daily All Day Event",
        "creator": {
            "email": "[email protected]",
            "self": true
        },
        "organizer": {
            "email": "[email protected]",
            "self": true
        },
        "start": {
            "date": "2025-07-08"
        },
        "end": {
            "date": "2025-07-09"
        },
        "recurringEventId": "6butbk1c770g1pnp4fnn2sokbd",
        "originalStartTime": {
            "date": "2025-07-08"
        },
        "transparency": "transparent",
        "iCalUID": "[email protected]",
        "sequence": 1,
        "reminders": {
            "useDefault": false
        },
        "eventType": "default"
    },
    {
        "kind": "calendar#event",
        "etag": ""3503602744428542"",
        "id": "10rll18oedfpa2nbh6hrf6ragb",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=MTBybGwxOG9lZGZwYTJuYmg2aHJmNnJhZ2IgZ2FnYW9xcGhzQG0",
        "created": "2025-07-06T11:29:32.000Z",
        "updated": "2025-07-06T11:29:32.214Z",
        "summary": "Test ",
        "creator": {
            "email": "[email protected]",
            "self": true
        },
        "organizer": {
            "email": "[email protected]",
            "self": true
        },
        "start": {
            "dateTime": "2025-07-08T07:30:00Z",
            "timeZone": "UTC"
        },
        "end": {
            "dateTime": "2025-07-08T08:30:00Z",
            "timeZone": "UTC"
        },
        "iCalUID": "[email protected]",
        "sequence": 0,
        "reminders": {
            "useDefault": true
        },
        "eventType": "default"
    },
    {
        "kind": "calendar#event",
        "etag": ""3503603073450078"",
        "id": "6ldsh849d28crn0fl5kl9ne35o",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=Nmxkc2g4NDlkMjhjcm4wZmw1a2w5bmUzNW9fMjAyNTA3MDZUMjAzMDAwWiBnYWdhb3FwaHNAbQ",
        "created": "2025-07-06T11:32:16.000Z",
        "updated": "2025-07-06T11:32:16.725Z",
        "creator": {
            "email": "[email protected]",
            "self": true
        },
        "organizer": {
            "email": "[email protected]",
            "self": true
        },
        "start": {
            "dateTime": "2025-07-06T20:30:00Z",
            "timeZone": "UTC"
        },
        "end": {
            "dateTime": "2025-07-06T20:45:00Z",
            "timeZone": "UTC"
        },
        "recurrence": [
            "RRULE:FREQ=WEEKLY;WKST=SU;BYDAY=SU"
        ],
        "iCalUID": "[email protected]",
        "sequence": 0,
        "reminders": {
            "useDefault": true
        },
        "eventType": "default"
    }

So my question is extremely simple, i see it on lots of websites
https://www.jordangilroy.com/#work
this one for example is my reference, when you scroll it feels alot smoother and the animations kinda like “catch up” to your scroll. only thing i can find is scroll-behaviour:smooth; which is obviously not what i need.

im very new to js so idk most of the functions ive tried to replicate a scrolling feature.

im not entirely sure how im supposed to show my example so ill just use a screenshot
my attempt
as you can see its kind of like splitting the images between the two parallax backgrounds, but the scrolling and animations feel too rigid.

The code below is mainly just for the image cutting kinda feature so yea. not sure how i can do the smooth animation

//#region history image changer (scroll Event)
const historyContent = document.getElementsByClassName("historyLayout");
const parallaxContent = document.querySelectorAll('section .parallax');
window.addEventListener('scroll', () => {
  let scrollY = window.scrollY;

  const prehistoricContainer = historyContent[0];
  const containerMiddle = (prehistoricContainer.getBoundingClientRect().top - prehistoricContainer.getBoundingClientRect().bottom) / 2;
  const containerHalf = prehistoricContainer.getBoundingClientRect().top - containerMiddle;
  if (containerHalf <= window.innerHeight / 2) {
    for (const content of historyContent) {
      content.style.position = "fixed";
      content.style.top = "0";
      content.style.left = "0";
      content.style.right = "0";
      content.style.bottom = "0";
      if ((scrollY - containerHalf - 1000) <= window.innerHeight / 2) {
        content.style.position = "absolute";
      }
    }
  }

  cuttingImages();
}
);

let cutcounter = 0;
function cuttingImages() {
  let section1 = historyContent[cutcounter];

  let parallax2 = parallaxContent[cutcounter + 1];
  let section2 = historyContent[cutcounter + 1];

  let image1Top = section1.getBoundingClientRect().top;
  let section2Top = parallax2.getBoundingClientRect().top;
  let progress = (image1Top - section2Top) / -966;
  progress = Math.max(0, Math.min(1, progress));
  section1.style.clipPath = 'inset(0 0 ' + (100 - progress * 100) + '% 0)';
  section2.style.clipPath = 'inset(' + (progress * 100) + '% 0 0 0)';
  if (progress === 0 && cutcounter === 0) {
    cutcounter++;
  }
  if (progress === 1 && cutcounter > 0) {
    cutcounter--;
  }
}

//#endregion

i tried scroll-behaviour: smooth; obviously not what i need
i heard about requestanimationframe and wasnt rlly sure how to implement it, i tried it, nothing looks different, there wasnt much difference if at all so not sure either.

I’m willing to do the following:
I have an array with this apparence:

finalFiltrada = [
    {
      "año_cuatri": "1° 1°",
      "codigo": "1.1.1",
      "nombre": "Técnicas de Programación",
      "estado": "Promocionada",
      "año_cursada": "2024 2°C",
      "nota": 8,
      "tiene_apuntes": true,
      "link_apuntes": "111_tecnicas_de_programacion"
    },

]

Depending on the filter you click:

I receive an array with the above structure, where the field ‘estado’, can be one of these: ‘Promocionada’, ‘Pendiente’, ‘Cursando’

So I receive the subjects array of objects, but my problem is:
I also receive an array with the checkboxs clicked, looks like this:
dataFiltradaSeleccionada = ['Promocionada', 'Pendiente', 'Cursando']

What I’m currently doing is:

        if (dataFiltradaSeleccionada.length > 0) {
            finalFiltrada = finalFiltrada.filter((e, i) => {

                // if (e.estado === dataFiltradaSeleccionada) {
// this doesnt work because dataFiltradaSeleccionada is maximum 3 positions
                //     console.log("e.estado", e.estado);
                //     console.log("dataFiltradaSeleccionada[i]", dataFiltradaSeleccionada[i]);
                // }

                return e.estado.includes(dataFiltradaSeleccionada)
            })

        }

But this doesn’t work when I clicked more than one checkbox

How can I change the following light DOM custom element to show the content of the default slot between (!!!) the two horizontal rulers?
Please be aware, that I cannot use shadow DOM in my use case.

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <script>
    class MyComponent extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <hr>
          <slot></slot>
          <hr>
        `;
      }
    }

    customElements.define('my-component', MyComponent);
  </script>

  <my-component>
    This text shall be placed between the two rulers, not below them.
  </my-component>
</body>

</html>

I am programming a survey in SurveyJS. One question has "type": "text" and shows an input field over one line. Users may write multiple lines, so I would like a paragraph type, but could not find one.

How do I allow users to write multiple lines in SurveyJS?

I have a table data from which I want to get id on button click event. I tried two functions using jquery.

// table data with button

<button type="button" value="{{$item->id}}" id="edit_btn" class=" btn btn-primary btn-sm">Edit</button>

<button type="button" value="{{$item->id}}" id="onclick_edit_btn" class=" btn btn-primary btn-sm">oc.Edit</button>

jquery function

$(document).ready(function(){
    
    // first approach
    $(document).on('click', '#edit_btn',function(){
            var category_id = $(this).val();
            alert(category_id);

    });
    
    
    // second approach
    $("#onclick_edit_btn").click(function(){
            var category_id = $(this).val();
            alert(category_id);
  });

});

When I click the edit button with id edit_btn, its giving id for each row of data. But when I click the edit button with id onclick_edit_btn, it’s giving id of only first row. Its not giving id of other rows when clicked, why is it so?
What is the difference between the two functions?

const acceptRequest = async () => {
    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_SOCKET_SERVER_URL}/acceptRequest`, {
        method: "POST",
        body: JSON.stringify({ id: enemyid }),
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
      });
      if (res.status === 200) toast("Working");
      if(res.status === 401)await refreshTokenFn()
    } catch (err) {
      if (err instanceof Error) toast(err.message);
      setPending(false);
    }
  };

I have a refreshToken function that I can call to refresh the token. I want the fetch request to retry automatically after refreshing the token, without duplicating the entire code.

This is how I am handling it which is not good enough for me.

const acceptRequest = async () => {
    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_SOCKET_SERVER_URL}/acceptRequest`, {
        method: "POST",
        body: JSON.stringify({ id: enemyid }),
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
      });
      if (res.status === 200) toast("Working");
      if(res.status === 401){
           await refreshTokenFn()
        const res = await     fetch(`${process.env.NEXT_PUBLIC_SOCKET_SERVER_URL}/acceptRequest`, {
        method: "POST",
        body: JSON.stringify({ id: enemyid }),
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
      });
 if (res.status === 200) toast("Working");
}

    } catch (err) {
      if (err instanceof Error) toast(err.message);
      setPending(false);
    }
  };

I am struggling with a simple plain object, which is itself a property of AppComponent. This object “x” is wrapped as a writable signal.
I want to implement a method which updates the own property of the signal object “x”.

Further the object “x” itself should be immutable.

Here is the code:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `

   <h1> {{title}}<h1>
    <hr>
   <p> Value of the X Property X: {{x().Value}} <p>
  `,

  styles: ['html { line-height: 1.15;} input{border: 0.1em solid lightgreen;}'],
})
export class AppComponent {
   protected title = 'How to update an Immutable Signal Object which is itsels a AppComponent Proberty? ';

 readonly  x = signal<IVariableBuilder> ({
        variableName: 'X',
        Value: 0,
        unit: ''
});
 
upDateMethod(){
this.x.update(f => f.Value= 1234 )  // Does not work
 }
}

interface IVariableBuilder {
  readonly variableName: string; // to get information, which variable was changed by <input>
  readonly Value: number,
  readonly  unit: string;  
}

bootstrapApplication(AppComponent); 

Also refer to myStackbiltzCode