Category: javascript

I’m getting this message on my console and I cannot find a solution:

“Failed to register controller: search (controllers/search_controller) TypeError: The ‘stimulus’ specifier was a simple specifier, but it has not been remapped to anything. Relative module specifiers must start with ‘./’, ‘../’, or ‘/’.”

I’m using rails 7.0.2 and importmap.rb to install my js. Can anyone help please?

I tried rerouting the import.map and redoing the stimulus documentation manual installing and it hadn’t worked.

the thing I want to do is to add two notification from this loopedin, but I don’t know how to initializate both, only one, I’m using react, my boss send me this

<script>
  var li_sidebar = {
    auto_init: false,
  };
</script>
<script
  type="text/javascript"
  src="https://cdn.loopedin.io/js/sidebar.min.js?v=0.1"
  defer="defer"
></script>

<script>
  var ps_config = {
    auto_init: false,
  };
</script>
<script
  type="text/javascript"
  src="https://cdn.loopedin.io/js/widget.min.js?v=0.8"
  defer="defer"
></script>

I put it on the index.html and I initializated on a useEffect on a component,

useEffect(() => {
  if (userData) {
    //notification sidebar
    updateUser(userData);

    window.li_sidebar = {
      email: userData.email,
      name: userData.name,
      workspace_id: "fb37cec2-edaf-123-123-2111d96da5af",
    };

    window.ps_sidebar = {
      email: userData.email,
      name: userData.name,
      workspace_id: "3e1b48e3-4eae-123-123-f9c62bb22e42",
    };

    window.LoopedIn.sidebar.init();
    // window.LoopedIn.widget.init();
  }
}, [userData]);

this window.LoopedIn.widget.init() don’t work, does any one know how do I initializate this widget?

puting a console.log on console of the window.LoopedIn it brought just the sidebar element, the li_sidebar and ps_sidebar brought the object above

(I changed the id to put here, but in the code is the valid one)

I have tried to read the documentation but I didn’t understand, neither my coworkers know what to do.

that window.LoopedIn.widget.init() give an error on console: Uncaught TypeError: Cannot read properties of undefined (reading ‘init’)

I have tried to initializate on index.html with:

<script>
  var ps_config = {
    auto_init: true,
    workspace_id: "3e1b48e3-4eae-123-123-f9c62bb22e42",
  };
</script>

but it doesn’t do anything

I’ve a few divs with empty span in them and these are meant to start counter that would count up to specified number. I grabbed some code (I’m not very good with JS) from the web and made it work for the first div but I don’t know how to loop(?) over their remaining divs.

let counts = setInterval(updated, 100);
let upto = 0;

function updated() {
  let count = document.getElementById("counter-1");
  count.innerHTML = ++upto;
  if (upto === 100) {
    clearInterval(counts);
  }
}

.various__item--skill-quantity {
  color: black;
  transition: all 0.5s;
  margin: 0 5%;
}

<div class="various__item--skills-quantity" id="counter-1"><span></span></div>
<div class="various__item--skills-quantity" id="counter-2"><span></span></div>
<div class="various__item--skills-quantity" id="counter-3"><span></span></div>
<div class="various__item--skills-quantity" id="counter-14"><span></span></div>

I was wondering how I get my mouse cursor I made with your help as well to make it animate the transition from hovering over a link back to when I leaves the <a>.

Right now the circle animates bigger with a 0,1s animation. but when I leave the link it doesn’t have a animation, it just clips to the smaller size again.

const cursor = document.querySelector(".cursor");

window.addEventListener("mousemove", (e) => {

  let x = e.pageX - window.scrollX;
  let y = e.pageY - window.scrollY;

  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
});

@import url(/css/satoshi.css);
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Satoshi-Variable;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  background-color: #f0efe9;
  height: 100vh;
  width: 100%;
  cursor: none;
}

.cursor {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #f0efe9;
  mix-blend-mode: difference;
}

body:has(a:hover) .cursor {
  transform: translate(-50%, -50%);
  height: 80px;
  width: 80px;
  transition: width 0.1s linear, height 0.1s linear;
}

a {
  cursor: none;
  text-decoration: none;
  color: #0f1016;
}

div {
  border-spacing: 0;
  display: block;
}

.a1 {
  width: 50%;
  height: 25%;
}

.a2 {
  width: 60%;
  height: 50%;
}

.a3 {
  width: 50%;
  height: 25%;
}

.icon {
  padding: 5% 0 5% 10%;
  max-width: 40%;
}

.skills {
  font-family: Satoshi-Variable;
  font-weight: 600;
  font-size: 2em;
  padding-left: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
  color: #0f1016;
}

.graphic_designer {
  margin-top: 2%;
  margin-bottom: 2%;
}

ul {
  list-style: none;
}

.about_me {
  padding-left: 10%;
  line-height: 2em;
  color: #0f1016;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="portfolio" content="portfolio">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meskhi Graphics</title>
  <link rel="icon" type="image/x-icon" href="/assets/Favicon.ico">
  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="/css/mediaqueries.css">
</head>

<body>
  <div class="a1">
    <img class="icon" src="/assets/meskhi_graphics_logo.svg">
  </div>
  <div class="a2">
    <ul class="skills">
      <li class="social_media">Social Media <br>Marketing Manager</br>
      </li>
      <li class="graphic_designer">Graphic Designer</li>
      <li><a href="#">UI/UX Designer</a></li>
    </ul>
    <p class="about_me">Hey, Ich bin David und komme aus Kalrsruhe.<br> Beruflich bewege ich mich in der Welt des Grafikdesign<br> und UI/UX Designs. Derzeit stecke ich mitten in einer<br> Weiterbildung zum Social Media Marketing Manager.
    </p>
  </div>
  <h1><a href="#">Hallo</a></h1>
  <div class="a3"></div>
  <div class="cursor"></div>
  <script src="script.js" async defer></script>
</body>

</html>

In my application, I have implemented nested routing. The /offers endpoint displays all offers, while /offers/{id} displays a specific offer. I know that the parent must have a router-outlet, but the problem is that instead of displaying a specific offer on a separate page, it displays that offer above the list of all offers. The URL in the browser is correct; it just displays the offer above the list of offers.

app-routing.module

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { 
    path: 'offers', 
    component: OffersComponent, 
    canActivate: [authGuard],
    children: [
      { 
        path: ':id', 
        component: OfferDetailComponent, 
        canActivate: [authGuard]
       }
    ] 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<div class="app-header">
  <app-header></app-header>
</div>
<div class="app">
  <router-outlet></router-outlet>
</div>

offers.component.html

<router-outlet></router-outlet>

<section class="section">
    <div class="offers-container">
        <h1>All offers</h1>
        <a *ngFor="let offer of offers" routerLink="/offers/{{offer.id}}" class="offer-card">
            <h2>{{ offer.position }}</h2>
            <p>{{ offer.location }}</p>
        </a>
    </div>
</section>

Is there a way to prevent the selected offer from being displayed above the list of offers and instead show it on a separate page?

So I am trying to cone a game where you need to use buttons to move left or right smoothly but I am trying to get the button to work but it isn’t here’s the code

const canvas=document.getElementById("myCanvas");
canvas.height=window.innerHeight;
canvas.width=400;

const ctx = canvas.getContext("2d")
let x = canvas.width/1.25
let car = ctx.fillRect(x, canvas.height/2, 75, 150)
while (true){
    let z = 0

    let leftButton = document.getElementById("left_button")
    leftButton.addEventListener ("click", function() {
        console.log("active")
    x+=1;
        
    });
    if (z = 1){
        break
    }
}

Can anyone help?

I tried to fix it a lot of times but it just didn’t work but it didn’t work.

I am making a platform game and my camera follows the player, the buttons or ui objects I put on the stage come out of the angle of the camera because the camera follows the player, for example, when the player comes down the platform, my button stays above.

I tried setScroll but it didn’t work.

And also while the camera is following the player, everywhere outside of my tiledmap on your field is black empty and how do I prevent this, should I make my map bigger or is there another solution, for example I wanted to try setBounds but I was not successful because I cannot add setBounds when my camera is following the player.

export default class Level1Scene extends Scene {

 constructor() {
    super({
      key: Scenes.Level1Scene.key,
    });
    this.hitEnemy = this.hitEnemy.bind(this);
    this.uiManager = new UIManager();
  }

  init(props: any) {
    const { levelLoaded } = props;
    levelLoaded();
    console.log(LevelManager.instance.currentLevel + "11111111111111111");
    this.cursors = this.input.keyboard?.createCursorKeys();
    GameManager.instance.setScene(this);
  }

  create() {
    this.createPlayer();
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setZoom(1.5);
    this.createTiles();
    this.createLayers();
    this.createBananas();
    this.createEnemies();
    this.createOverlaps();
    this.createUI();
    GameManager.instance.setScore(10);
  }

  update(time: number, delta: number): void {
    this.player.update();
    this.physics.collide(this.player, this.groundLayer);
    this.physics.collide(this.player, this.propsLayer);
    this.physics.collide(this.enemiesA, this.groundLayer);
    if (!LevelManager.instance.levelLoading) {
      if (this.cursors?.right.isDown) {
        LevelManager.instance.advanceLevel(Scenes.Level2Scene.key);
      }
    }
    this.bananas.getChildren().forEach((b) => b.update);
  }

  private createTiles(): void {
    this.map = this.make.tilemap({
      key: "level2",
    });

    this.map.setCollision([2]);
    this.propsTileset = this.map.addTilesetImage("props")!;
    this.groundTileset = this.map.addTilesetImage("ground")!;
  }

  private createLayers() {
    this.propsLayer = this.map.createLayer("props", this.propsTileset, 0, 0)!;
    this.groundLayer = this.map.createLayer(
      "ground",
      this.groundTileset,
      0,
      0
    )!;
    this.propsLayer.setCollisionBetween(293, 295);
  }

  private createPlayer() {
    this.player = Player.create(this);
  }

  private hitBanana(b: any, c: any) {
    (c as Banana).collect();
  }

  private hitEnemy(b: any, a: any) {}

  private createBananas() {
    this.bananas = this.physics.add.group({
      immovable: true,
      allowGravity: false,
    });
    const bananas = getObjectsByType("banana", this.map, "objects");
    bananas.forEach((b) => {
      this.bananas.add(
        new Banana({
          key: "banana",
          scene: this,
          texture: "banana32",
          x: b.x,
          y: b.y,
        })
      );
    });
  }

  private createEnemies() {
    //Create enemiesA
    this.enemiesA = this.physics.add.group({
      immovable: true,
      allowGravity: false,
    });
    const enemiesA = getObjectsByType("enemyA", this.map, "enemiesA");

    enemiesA.forEach((a) => {
      this.enemiesA.add(
        new EnemyA({
          key: "enemy",
          scene: this,
          texture: "enemyA",
          x: a.x,
          y: a.y - 16,
        })
      );
    });

    //Create enemiesB
    this.enemiesB = this.physics.add.group({
      immovable: true,
      allowGravity: false,
    });
    const enemiesB = getObjectsByType("enemiesB", this.map, "enemiesB");

    enemiesB.forEach((a) => {
      this.enemiesB.add(
        new EnemyB({
          key: "enemy",
          scene: this,
          texture: "enemyB",
          x: a.x,
          y: a.y - 16,
        })
      );
      ("");
    });
  }

  private createOverlaps() {
    this.enemiesA.getChildren().forEach((a) => {
      this.physics.add.collider(this.player, this.enemiesA, this.hitEnemy);
    });

    this.enemiesB.getChildren().forEach((a) => {
      this.physics.add.collider(this.player, this.enemiesB, this.hitEnemy);
    });

    this.bananas.getChildren().forEach((b) => {
      this.physics.add.overlap(this.player, b, this.hitBanana, undefined, this);
    });
  }

  private createUI(): void {
    this.uiManager.add(
      "pauseBtn",
      () =>
        new IconBtn(this, 16, 16, "pauseBtn", () => {
          GameManager.instance.onPauseGame();
        })
    );
  }
}

I have put 2 charts on the same page (Bar Chart and Line Chart) and I am dynamically changing the data. Both charts show up, but only the one at the top gets updated. I can’t figure out why this happens. It’s nothing wrong with the data or the charts truly, if I am to change the order of the charts it’s still the same thing. The one put on top on the page gets updated and the second one stays blank.

They are bout using different datasets.

I am using Angular and Chart.Js with BaseChartDirective from ng2-charts.

This is the code.

Imports

import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

Line Chart

public lineChartData: ChartConfiguration['data'] = {
    datasets: [
      {
        data: this.line_array1,
        label: 'Series A',
        backgroundColor: '#FFB1C1',
        borderColor: '#FFB1C1',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)',
      },
      {
        data: this.line_array2,
        label: 'Series B',
        backgroundColor: '#9BD0F5',
        borderColor: '#9BD0F5',
        pointBackgroundColor: 'rgba(77,83,96,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(77,83,96,1)',
      },

    ],
    labels: this.line_labels
  };

  public lineChartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0,
      },
    },
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      y: {
        position: 'left',
      },
      x:{
        grid:{
            display: false,
        }
      },
      y1: {
        position: 'right',
        grid: {
          color: 'rgba(255,0,0,0.3)',
          display: false
        },
        ticks: {
          color: 'red',
        },
      },
    },

    plugins: {
      legend: { display: false},
      datalabels: {
          display: false
        },
    },
  };

  public lineChartType: ChartType = 'line';

  @ViewChild(BaseChartDirective) line: BaseChartDirective | undefined;


public chartHovered({
    event,
    active,
  }: {
    event?: ChartEvent;
    active?: object[];
  }): void {
    console.log(event, active);
  }

Bar Chart

@ViewChild(BaseChartDirective) bar: BaseChartDirective | undefined;

public barChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  scales: {
    x: {
        grid: {
display: false
        }
    },
    y: {
      min: 0,
      grid: {
        display: false
                }
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
        display: false
      },
  },
};
public barChartType: ChartType = 'bar';
public barChartPlugins = [DataLabelsPlugin];

public barChartData: ChartData<'bar'> = {
    labels: this.bar_labels,
     datasets: [
    { data: this.bar_array1},
    { data: this.bar_array2 },
  ],
};

The HTML is like this

<mat-tab-group>
<mat-tab label="Charts">
 <br>
 <br>
 <canvas
   baseChart
   class="chart"
   [data]="barChartData"
   [options]="barChartOptions"
   [plugins]="barChartPlugins"
   [type]="barChartType"></canvas>
 <br>
</mat-tab>

<mat-tab label="Line">
   <br>
   <br>
<canvas
   baseChart
   class="chart"
   [data]="lineChartData"
   [options]="lineChartOptions"
   [type]="lineChartType"></canvas>
</mat-tab>
</mat-tab-group>

Since on the page the bar chart is first that’s the one that gets updated dynamically. If I was to change and put the line chart at the top that would be the one getting updated.

The thing is that if I have the Mat-Tab for the line chart selected “as I said the chart won’t dynamically update” and navigate to another tab then go back to the line chart tab, the chart then updates.

My Mirth Connect server contains many fields in its globalMap, and they are visibly present via an up-to-date dashboard view. I ensured it’s updated by clicking Refresh as well as re-connecting to the server via Administrator. The problem is that when trying to get these fields from a channel via globalMap.get(...), the function began suddenly unexpectedly returning null

This keeps occuring when trying to get other variables – whose values are plainly there upon navigating manually to the globalMap fields – and happens in any channel I invoke from. Interestingly, after appending a new field to globalMap once with globalMap.put(...) once, that value is successfully returned upon retrieval

Could I be seeing an out-of-date dashboard view of the global map whose previous data was somehow wiped? Could restarting the server help?

I am wondering if it is possible to integrate HERE Indoor Maps into React Native. With all the research I have done, it seems the only way to render a here indoor map is to create native modules for both Andoird and iOS. I have never done anything like this and it seems very complex.

Would it be possible to make some sort of wrapper and use the Indoor Maps for JS and integrate that into a React Native application?

I applogize I do not have any code to share, this is just purley research. I would greatly apreaciate any direction or input.

I was recently trying to learn about chrome extension and was trying to show some simple alert, alarm, notification upon a button click.

alert is working for a button click but it seems i can not make it work to trigger alarm or display notification in chrome extensions. No error is being thrown either in service worker dev tool.

Here are the codes. Codes are simple and should work. But i dont know why i am not seeing anything in the chrome. I am fairly new here. any help is appreciated.

manifest.json

{
  "manifest_version": 3,
  "name": "Alarm Extension",
  "version": "1.0",
  "permissions": [
    "alarms",
    "notifications"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Alarm Extension</title>
</head>
<body>
  <button id="triggerAlarm">Trigger Alarm</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("triggerAlarm").addEventListener("click", function () {
    chrome.alarms.create({ delayInMinutes: 1 });
    alert("Alarm set for 1 minute from now!");
  });
});

background.js

chrome.alarms.onAlarm.addListener(function (alarm) {
    chrome.notifications.create({
      type: "basic",
      title: "Alarm Triggered",
      message: "Your alarm has been triggered!",
      iconUrl: "icon128.png"
    });
  });

For deployment i am going here chrome://extensions/, enabled developer mood and load unpacked

Can anyone guide what i am doing wrong?

How can i see the trigger alarm or notification in chrome?

I am trying to find a ‘native’ way to send post requests to my pocketbase server, from my svelte frontend :

main.go:

    app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
        e.Router.AddRoute(echo.Route{
            Method: http.MethodPost,
            Path: "/api/myRoute",
            Handler: func(c echo.Context) error {
                // custom logic here: compute custom_value using parameters
                custom_value := "cool_value"
                return c.String(200, custom_value)
            },
        })
        return nil
    })

I would like to do something similar to the following :

Frontend.ts:

  onMount(async () => {
    // ask server for information based on a variable: example
    const example = "test";
    const example_reply = await pb.route(POST, '/api/myRoute', /*here, I would have to specify the fact that example is a form value of the POST request*/ example);
    // use example_reply
    if (example_reply === "cool_value") {
       console.log('got what I expected');
    } else {
       console.log('wrong!!!');
    }
  }

Does the function I am looking for exist, or should I use raw JS to fetch information from my custom routes ?

I have tried to use raw javascript to send a post request, which works but feels suboptimal :

const response = await fetch('/api/example', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ example: "test" }), // Convert the input to JSON
      });

I’m working on a calendar element whereby the day events are utilising grid row to span over their specified time frame.

However, I seem to be struggling when it comes to setting the event widths. By default they will take up the full width of the day when it’s the only event at that time. And if they are concurring events at any point they will reduce their widths accordingly so they can all fit.

My problem occurs when I have a group of events happening at the same time, which generates multiple columns, and then an event later in the day which doesn’t have any coinciding events. This event is now limited to the widths of the columns created from the events earlier in the day.

See image for context:
Image of annotated demo

See below for a working demo.
https://jsfiddle.net/peterlawlor/zd46at5w/158/

<div class="calendar">
  <div class="calendar__dayNames">
    <div class="calendar__dayName">Monday</div>
    <div class="calendar__dayName">Tuesday</div>
    <div class="calendar__dayName">Wednesday</div>
    <div class="calendar__dayName">Thursday</div>
    <div class="calendar__dayName">Friday</div>
  </div>
  <div class="calendar__schedule">
    <div class="calendar__timeline">
      <div class="calendar__timelineItem" data-time="09:00"></div>
      <div class="calendar__timelineItem" data-time="09:15"></div>
      <div class="calendar__timelineItem" data-time="09:30"></div>
      <div class="calendar__timelineItem" data-time="09:45"></div>
      <div class="calendar__timelineItem" data-time="10:00"></div>
      <div class="calendar__timelineItem" data-time="10:15"></div>
      <div class="calendar__timelineItem" data-time="10:30"></div>
      <div class="calendar__timelineItem" data-time="10:45"></div>
      <div class="calendar__timelineItem" data-time="11:00"></div>
      <div class="calendar__timelineItem" data-time="11:15"></div>
      <div class="calendar__timelineItem" data-time="11:30"></div>
      <div class="calendar__timelineItem" data-time="11:45"></div>
      <div class="calendar__timelineItem" data-time="12:00"></div>
      <div class="calendar__timelineItem" data-time="12:15"></div>
      <div class="calendar__timelineItem" data-time="12:30"></div>
      <div class="calendar__timelineItem" data-time="12:45"></div>
      <div class="calendar__timelineItem" data-time="13:00"></div>
      <div class="calendar__timelineItem" data-time="13:15"></div>
      <div class="calendar__timelineItem" data-time="13:30"></div>

    </div>
    <div class="calendar__dayEventsContainer">
      <div class="calendar__dayEvents">

        <button type="button" class="calendar__event" data-grid-row="1" data-grid-row-span="6"></button>
        <button type="button" class="calendar__event" data-grid-row="1" data-grid-row-span="3"></button>
        <button type="button" class="calendar__event" data-grid-row="1" data-grid-row-span="1"></button>
        <button type="button" class="calendar__event" data-grid-row="10" data-grid-row-span="1"></button>
      </div>
      <div class="calendar__dayEvents">
      </div>
      <div class="calendar__dayEvents">
        <button type="button" class="calendar__event" data-grid-row="1" data-grid-row-span="6"></button>
        <button type="button" class="calendar__event" data-grid-row="1" data-grid-row-span="1"></button>
      </div>
      <div class="calendar__dayEvents">

      </div>
      <div class="calendar__dayEvents">
        <button type="button" class="calendar__event" data-grid-row="1" data-grid-row-span="1"></button>
      </div>
    </div>
  </div>
</div>

body {
  margin: 0;
  block-size: 100vh;
  inline-size: 100vw;
}

.calendar {
  $block: &;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto 1fr;

  &__dayNames {
    grid-row: 1;
    grid-column: 2;
    display: flex;
  }

  &__dayName {
    flex-grow: 1;
    flex-basis: 0;
  }

  &__schedule {
    grid-row: 2;
    grid-column: 1/span 2;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    border-block-start: 1px solid #000;
  }

  &__timeline {
    display: grid;
    grid-template-rows: repeat(19, 1.375rem);
    gap: 0 0.625rem;
    grid-column: 1/ span 2;
    grid-row: 1;
    position: relative;
  }

  &__timelineItem {
    display: flex;
    align-items: center;
    border-block-end: 1px dotted #222;
  }

  &__timelineItem:nth-child(even) {
    border-block-end: 1px solid #000;
  }

  &__timelineItem:nth-child(odd):after {
    display: inline;
    content: attr(data-time);
  }

  &__dayEventsContainer {
    position: relative;
    grid-row: 1;
    grid-column: 2;
    display: flex;
  }

  &__dayEvents {
    display: grid;
    grid-template-rows: repeat(19, 1.375rem);
    gap: 0 0.625rem;
    border-inline-start: 1px solid #000;
    flex-grow: 1;
    flex-basis: 0;
  }

  &__event {
    background-color: #346DA8;
    border: none;
  }
}

(function() {

  function init() {
    let calendarElement = document.getElementsByClassName('calendar')[0],
      events = calendarElement.getElementsByClassName('calendar__event');
    _positionEventsOnGrid(events);
  }

  function _positionEventsOnGrid(events) {
    Array.from(events).forEach(event => {
      let gridRow = event.getAttribute('data-grid-row');

      if (gridRow) {
        let gridRowSpan = event.getAttribute('data-grid-row-span');

        event.style.gridRow = gridRowSpan ? `${gridRow} / span ${gridRowSpan}` : gridRow;
      }
    });
  }

  init();
})();

I have tried a few things:
grid-column: 1/-1 but this will do it to all the events and therefore incorrectly format the concurrent events.

grid-auto-flow: dense however, this didn’t seem to do the trick in my example.

grid-template-columns: repeat(auto-fit, minmax()), but the min value as part of the minmax needs to be a fixed size.

I do wonder whether I need to extend the positionEventsOnGrid() function so it checks whether ‘grid-column: 1/-1’ can be applied to specific events. If it isn’t coinciding with other events at that time. However, I feel this might be quite complex so thought I’d ask around in case there was a simpler way.

I’m wanting singular events to span the full width of their day, regardless of whether there are concurrent events earlier or later in the day.

I’ve set the min and max values and the input field type to ‘number’, but I can still physically input any numbers in the field, regardless of the range. How can I limit the input of numbers to only the required range, preventing values below or above it?

<input
 type="number"
 min='40'
 max='270'
 className="input-field"
/>

input field

Yes, warning will show if I will click any button in form, but I want to block exact ability to input anything outside the range

Bom dia pessoal.
Estou tendo problemas ao subir uma aplicação em javascript na plataforma Digital Ocean.

Não sei o que informar no campo Health Check para que o sistema suba.

Já tentei de tudo. Coloquei link do página Home, login, coloquei a porta 80 etc.

NÃO PASSA.

Alguém me ajuda.

porta 80,
porta 3000
rota login, home page, etc.