Category: javascript

I have been working on an SPA with Angular 16, TypeScript and The Movie Database (TMDB).

In appservicesmovie-service.service.ts I have:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie';

@Injectable({
  providedIn: 'root'
})

export class MovieService {

  constructor(private http: HttpClient) { }

  public getMovies(): Observable<MovieResponse[]> {
    return this.http.get<MovieResponse[]>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
  }
}

The model appmodelsMovie.ts looks like this:

export interface Movie {
    id?: number;
    adult?: boolean;
    backdrop_path?: string;
    poster_path?: string;
    title?: string;
    tagline?: string;
    overview?: string;
    genre_ids?: any;
    original_title?: string;
    release_date?: string;
    runtime?: number;
    vote_average?: string;
}

export interface MovieResponse {
    results?: Movie[];
    total_pages?: number;
    total_results?: number;
    page?: number;
}

In the HomePageComponent I try to output the movies:

import { Component } from '@angular/core';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent {

  public movieResponse!: MovieResponse[];

  public movies: Movie[] = [];

  constructor(private movieService: MovieService) { }

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMovies();
  }
}

The line console.log(this.movieResponse) coreclly shows the response with the results arary, total_pages, etc;

The problem

The line this.movies = this.movieResponse.results causes the error:

TS2339: Property 'results' does not exist on type 'MovieResponse[]'.

Questions

1. What am I doing wrong?
2. What is the most reliable way to fix this issue?

Does anyone know any good scheduler library for react, i’m using @aldabil/react-scheduler but I don’t know how to block add event in this library, does anyone know any good scheduler library or how to block add event @aldabil/react-scheduler in please help me.

scheduler library for react

I want to debug my TamperMonkey script in a website, I found that the proposed setInterval(function(){debugger;}, 50); to prevent debugger.

So I set a user script in TamperMonkey to hook the setInterval function:

var new_setInterval=setInterval;
window.setInterval=function(a,b){
    if(a.toString().indexOf("debugger")!=-1)
        {
        return null;
    }
    new_setInterval(a,b);
}

when i restart the website, it still stucked on the setInterval function, what’s wrong with my code?
(P.S. the website is https://animelon.com/video/*)

I faced this issue only in Safari browser. Firefox and Chrome work fine.

The goal is simple: format value in the input field when user focus out from that field.

Issue details:

• when focusout event handler format value in current input field, Safari return focus on that field after formatting, instead of focus out, and block focus on that field. So there is no way to select another input or any other element or just unselect current input.
• if add element.blur() method in the end of focusout event handler, Safari will loop this event handler and overload Call Stack and, as a consequence, Safari will hang.

As far as i understand, it happens because of some problems in logic of Safari runtime enviroment.

As i mentioned before, i tried to use element.blur() method to force Safari lose focus on current element, but it did not help and it only got worse.

Is there any way to handle this Safari specificity and make it format value on focus out only 1 time and lose focus on that element after focusout handler done?

I started learning js relatively recently. I have a function that should return the search result from the SQlite3 table. but because of the asynchrony, it outputs the result before it has found any information and reached the return, because of this, an undefindet is output.

funcion find_info() {
    db.all('SELECT * FROM test', (err, rows) => {
        if (err) {return console.log('error in search information');}
    
        // console.log(rows)
        return rows;
    });
}

console.log(find_info) // undefined

I expect to receive the answer and the result of the columns. I tried to put the answer in a variable and then output it to return

I’m trying to make one page scroll, in response on mouse scroll. But there is some unknown behaviour. There should be infinite scroll, but it stops from time to time. And sometimes do not react at all. Can somebody tell me what is the problem?

let ay = 1;
let vy = 5;
let scrollStarted = false;
let step = () => {
    // vy += ay;  
    scrollStarted = true;
    window.scrollBy(0, 5);
    window.requestAnimationFrame(step)
}

$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
    if(!scrollStarted){
        window.requestAnimationFrame(step)
    }
})

I’m very new to website development and I want to create simple diary that look like a chatgpt in terms of ui. Now I’m stuck for storing each message for each chat-section locally.

Here’s my html :

<!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="styles.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <script src="script.js" defer></script>
  <title>Document</title>
</head>
<body>
  <!-- navhead -->
  <div class="chat-header">
    <span class="material-symbols-outlined sidebar-menu" onclick="showSideBar()" >
      menu
    </span>
    <p>MyDiary 1.0</p>
    <span class="material-symbols-outlined">
      settings
    </span>
  </div>
  <!-- sidemenu -->
  <div class="sidebar-wrapper">
    <div class="sidebar-new-chat">
      <div class="add-chat">
        <span class="material-symbols-outlined">
          add
        </span>
        <p>New Chat</p>
      </div>
    </div>
    <!-- chat lists -->
    <div class="chat-lists"><!-- it will contain chat section here --></div>
  </div>
  <!-- chatbox main -->
  <div class="chatbox">
    <!-- chat content -->
    <div class="chatbox-wrapper">
      <div class="message-boxWrapper">
      </div>
    </div>
  </div>
  <!-- message bar -->
  <div class="message-bar">
    <div class="bar-wrapper">
      <textarea id="text-area" cols="30" rows="1" resize="none" placeholder="Enter your message here..."></textarea>
      <button>
        <span class="material-symbols-outlined">
          send
        </span>
      </button>
    </div>
  </div>
</body>
</html>

This is my css :

*{
  padding: 0;
  margin: 0;
  font-family: "Poppins",sans-serif;
  box-sizing: border-box;
}

body{
  width: 100%;
  height: 100vh;
  background-color: #303030;
}

::-webkit-scrollbar {
  margin-left: 5px;
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #303030;
  border-radius: 10px;
}

.chat-header{
  position: fixed;
  top: 0;
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  color: #ccc;
  font-size: 1.5rem;
  font-weight: 700;
  background-color: #202020;
  border-bottom: 3px solid #252525;
  z-index: 100;
  box-shadow: 0 0 30px #202020;
}
.chat-header > span{
  cursor: pointer;
}

.sidebar-wrapper{
  position: fixed;
  display: fixed;
  flex-direction: column;
  left: 0;
  top: 4rem;
  min-width: 100px;
  width: 50%;
  height: 78vh;
  padding: 20px; 
  background-color: #202020;
  border-right: 3px solid #252525;
  color: #ccc;
  transform: translateX(-100%);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 99;
}
.sidebar-wrapper .add-chat{
  display: flex;
  padding: 10px 0;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #303030;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.sidebar-wrapper .add-chat:hover{
  color: #202020;
  background-color: #ccc;
}
.sidebar-wrapper .chat-lists {
  display: block;
  position: fixed;
  padding: 10px 0;
  width: 85%;
  height: 66.2vh;
  overflow-y: auto;
}

.chat-lists .chat-head {
  display: flex;
  position: relative;
  padding: 10px;
  margin: 10px 0;
  width: 90%;
  border: 1px solid #303030;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.chat-lists .chat-head:hover {
  border-color: #ccc;
}
.chat-head .chat-name{
  width: 80%;
  color: #ccc;
  border: none;
  outline: none;
  background: none;
} 
.menu-btn {
  cursor: pointer;
}
.menu {
  display: flex;
  flex-direction: column;
  position: absolute; /* Position the menu absolutely relative to its parent chat-head */
  top: 100%; /* Position the menu below the chat-head */
  right: 0; /* Align the menu to the right side of the chat-head */
  padding: 2px;
  background-color: #303030;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 50px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Ensure it's above other elements */
}
.menu button {
  padding: 5px 10px;
  color: #ccc;
  border: none;
  background: none;
  cursor: pointer;
}
/* Hide the menu by default */
.hidden {
  display: none;
}

.chatbox{
  display: flex;
  position: fixed;
  top:4rem;
  right: 0;
  width: 100%;
  height: 78vh;
  overflow-y: auto;
  -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.chatbox-wrapper {
  position: relative;
  margin-left: auto;
  width: 100%;
  justify-content: center;
}
.chat {
  display: flex;
  gap: 20px;
  padding: 25px;
  margin: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 300px;
  border-radius: 10px;
  justify-content: space-between;
}
.chat img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.message-boxWrapper{
  padding: 5px 0;
}
.message {
  display: flex;
  background-color: #202020;
  align-items: center;
  margin-bottom: 20px;
  transition: 0.3s ease-in-out;
  border: 1px solid #252525;
}
.message:hover{
  border-color: #ccc;
}
.message span{
  display: block;
  width: 80%;
  align-items: center;
}
.message span p{
  font-weight: 700;
  margin: 5px 0;
}
.message pre{
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;   
  word-break: break-word;
}
.message-date{
  margin-left: auto;
}

.message-bar{
  position: fixed;
  bottom: 0;
  height: 5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #252525;
  background-color: #202020;
  z-index: 100;
}
.message-bar .bar-wrapper{
  background-color: #303030;
  border-radius: 10px;
  width: 60vw;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bar-wrapper textarea{
  width: 100%;
  padding: 5px;
  border: none;
  outline: none;
  font-size: 14px;
  background: none;
  color: #ccc;
  word-wrap: break-word;
  resize: none;
}
.bar-wrapper textarea::placeholder{
  color: #ccc;
}
.message-bar button{
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  outline: none;
  color: #ccc;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.message-bar button:hover{
  color: #fff;
}

And this is javascript I’ve made (Uhh kinda, I’m asking chatgpt also for helping me to understand for creating function)

const messageBar = document.querySelector(".bar-wrapper textarea");
const sendBtn = document.querySelector(".bar-wrapper button");
const messageBox = document.querySelector(".message-boxWrapper");
const chatContainer = document.querySelector(".chatbox");

function scrollToBottom() {
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

function getCurrentDate() {
  const now = new Date();
  const options = { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric" };
  return now.toLocaleDateString("en-US", options);
}

function showSideBar() {
  var sideBar = document.querySelector(".sidebar-wrapper");
  // Check if the sidebar is currently hidden or partially visible
  if (sideBar.style.transform === 'translateX(-100%)' || sideBar.style.transform === 'translate(-100%)') {
    sideBar.style.transform = 'translateX(0%)'; // Show the sidebar by translating it back to 0%
    sideBar.style.width = '20%'; // Set the sidebar width when visible
    chatContainer.style.opacity = '30%';
  } else {
    sideBar.style.transform = 'translateX(-100%)'; // Hide the sidebar by translating it off-screen
    sideBar.style.width = '0'; // Optionally, set the sidebar width to 0 when hidden
    chatContainer.style.opacity = '100%';
  }
}

function chatNameMenu() {
  const menuBtns = document.querySelectorAll('.menu-btn');
  menuBtns.forEach(btn => {
    // Remove existing event listeners
    btn.removeEventListener('click', toggleMenu);
    // Attach new event listener
    btn.addEventListener('click', toggleMenu);
  });
}
function toggleMenu() {
  const menu = this.nextElementSibling;
  menu.classList.toggle('hidden');
}
// Add New Chat Section
const addChatBtn = document.querySelector('.sidebar-new-chat');
addChatBtn.addEventListener('click', function () {
  const chatListsContainer = document.querySelector('.chat-lists');
  const newChatSection = document.createElement('div');
  newChatSection.classList.add('chat-head');
  newChatSection.innerHTML = `
    <input type="text" class="chat-name" value="New Chat" readonly>
    <span class="material-symbols-outlined menu-btn">more_vert</span>
    <div class="menu hidden">
      <button class="edit-btn">Edit</button>
      <button class="delete-btn">Delete</button>
    </div>
  `;
  chatListsContainer.insertBefore(newChatSection, chatListsContainer.lastElementChild);
  chatNameMenu();
});

// Function to handle edit button click
function handleEdit(event) {
  if (event.target.classList.contains('edit-btn')) {
    const chatNameInput = event.target.closest('.chat-head').querySelector('.chat-name');
    chatNameInput.removeAttribute('readonly');
    chatNameInput.focus();
    chatNameInput.addEventListener('keydown', function (e) {
      if (e.key === 'Enter') {
        const newName = chatNameInput.value.trim();
        chatNameInput.value = newName;
        chatNameInput.setAttribute('readonly', true);
      }
    });
  }
}

// Add event listener to chat lists container for handling edit button click
const chatListsContainer = document.querySelector('.chat-lists');
chatListsContainer.addEventListener('click', handleEdit);

// Function to handle delete button click
function handleDelete(event) {
  if (event.target.classList.contains('delete-btn')) {
    const chatSection = event.target.closest('.chat-head');
    const confirmDelete = window.confirm("Are you sure you want to delete this chat section?");
    if (confirmDelete) {
      chatSection.remove();
    }
  }
}
// Add event listener to chat lists container for handling delete button click
chatListsContainer.addEventListener('click', handleDelete);
// Function to handle sending a message
sendBtn.onclick = function(){
  if(messageBar.value.length > 0){
      let message = 
          `<div class="chat message">
              <img src="img/chatgpt-icon.svg" alt="usericon">
              <span>
                  <p>UserName</p>
                  <pre>${messageBar.value}</pre>
              </span>
              <div class="message-date">
                  ${getCurrentDate()}
              </div>
          </div>`;

      const existingChatSections = document.querySelectorAll('.chat-head');
      if (existingChatSections.length === 0) {
          // If no chat sections exist, create a new chat section
          const chatListsContainer = document.querySelector('.chat-lists');
          const newChatSection = document.createElement('div');
          newChatSection.classList.add('chat-head');
          newChatSection.innerHTML = `
              <input type="text" class="chat-name" value="New Chat" readonly>
              <span class="material-symbols-outlined menu-btn">more_vert</span>
              <div class="menu hidden">
                  <button class="edit-btn">Edit</button>
                  <button class="delete-btn">Delete</button>
              </div>`;
          chatListsContainer.insertBefore(newChatSection, chatListsContainer.lastElementChild);
          chatNameMenu();
      } else {
          // Append the message to the last chat section (whether existing or newly created)
          // const lastChatSection = document.querySelector('.chat-lists .chat-head:last-child');
          // const messagesContainer = lastChatSection.querySelector('.messages');
          // messagesContainer.insertAdjacentHTML('beforeend', message);
      }         

      messageBox.insertAdjacentHTML("beforeend",message);
      messageBar.value = "";
      scrollToBottom();
  }
};

window.addEventListener("load", scrollToBottom);

So i’ve written a piece of code where there are 9 divs and I’ve given them “.spaces” classes and i want them to change their color if they are clicked on. But only the first div changes it’s color to red while the others don’t no matter how many times i click on them.

THIS IS THE HTML

<body>
    <div id="playground">
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
        <div id="play-spaces" class = "spaces"></div>
    </div>
    <script src="script.js"></script>

THIS IS THE JAVASCRIPT

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

spaces.addEventListener("click",function(){
    console.log("Space has been clicked");
    spaces.style.backgroundColor = "red";
})

I was expecting that when i click on a div then that particular div will change it’s color.

I/ViewRootImpl@7d84de7MainActivity: [DP] cancelDraw io.flutter.embedding.android.FlutterActivityAndFragmentDelegate$2@d651f00 isViewVisible: true

I/ViewRootImpl@7d84de7MainActivity: [DP] cancelDraw io.flutter.embedding.android.FlutterActivityAndFragmentDelegate$2@d651f00 isViewVisible: true

I’m currently working on a Three.js application where I’ve implemented a feature to select and manipulate groups of domino objects using a THREE.Group called selectedDomino. The selected dominoes can be adjusted using input fields to change their position in the scene. However, I’ve encountered an issue where clearing the selectedDomino group resets the position of the selected dominoes to their original positions before they were added to the group.

Steps to reproduce:

Select one or more domino objects using the selection tool.
Use input fields to adjust the position of the selected dominoes (x, y, z).
Clear the selectedDomino group.
Observe that the position of the selected dominoes reverts to their original positions.

Expected behavior:

When clearing the selectedDomino group, the position of the selected dominoes should remain as they were after being adjusted using the input fields.

Actual behavior:

Clearing the selectedDomino group resets the position of the selected dominoes to their original positions.

I also attached a unique ID to each domino while creating it.
So you can try using the ID. So when changing the input fields, the value should be cloned to the Selected Domino using ID.

Github Pages: https://ka-hirithik.github.io/DominoForgeStackOverFlow/
Github Code: https://github.com/KA-Hirithik/DominoForgeStackOverFlow

Here’s what I’ve tested:

function testRounding() {
  var order = { size1: 0.07529999999999999, size2: 0.07529999999999999 };
  order.size1 = order.size1.roundDecimal(4);
  order.size2.roundDecimal(4);
  Logger.log(order.size1); //outputs 0.0753
  Logger.log(order.size2); //outputs 0.07529999999999999 but desired output is 0.0753
}

Number.prototype.roundDecimal = function (place) {
  var mult = 1;
  for (var i = 1; i < place; i++) {
    mult = mult * 10;
  }
  return Math.round(this * 10 * mult) / (10 * mult);
}

I can see from the logger output that the method works, but doesn’t change the object it is applied to without intentionally overwriting it like I did with size1. I would prefer to not to have to that, and instead have the syntax I used with size2 actually modify the value of size2.

How do I do that?

When I put the code into Blogger, I get this error:
The entity name must immediately follow the ‘&’ in the entity reference
The code is:

<script>
if (typeof bc_blocks == "undefined" && window.bc_blocks === undefined) {
    var bc_blocks = document.getElementsByClassName("bigClickTeasersBlock");

  if (bc_blocks.length) {
    var bc_blocks_ids = [];

    for (var i=0; i<bc_blocks.length; i++) {
      var bc_el_id_str = bc_blocks[i].id;
      var bc_el_id = parseInt(bc_el_id_str.substring(bc_el_id_str.lastIndexOf("_") + 1));

      if (bc_el_id>0) {
        bc_blocks_ids.push(bc_el_id)
      }
    }

if (bc_blocks_ids.length&&bc_blocks_ids.length<5) {
 var bc_scr = document.createElement("script");
 bc_scr.src = "https://trandgid.com/lhzbsrfkjf/js/" + bc_blocks_ids.join("/") + "?r=" + encodeURIComponent(document.referrer) + 
 "&" + Math.round(Math.random()*99999);
 bc_scr.setAttribute("async","");
 document.body.appendChild(bc_scr)
       }
    }
  } 
</script>

I’m trying to place an ad on my page

I have a enum like this:

export enum AccountSettings {
  accountManagement = "Account management",
  managementOfRelatives = 'Management of relatives',
}

Then I have a en.json file, I want to use them for my enum data

{
  "account_management": "Account management",
  "management_of_relatives": "Management of relatives",
}

Then use it get the error:

import en from './en.json';

export enum AccountSettings {
  accountManagement = en.account_management, // shows Type 'string' is not assignable to type 'number'
  managementOfRelatives = 'Management of relatives',
}

How do I use en.json data to enum ?

I am trying to update the background-color of two css selectors named .pane and .view located within the file ionic.css. However, when I attempt this nothing changes. I can go directly to the ionic.css file to change it but I want to change it with javascript directly in the index.html file. I’ve tried using querySelectorAll(“.view”) and querySelectorAll(“.pane”) but when I check the contents of the NodeList, it is empty. The code for index.html is included below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }

    
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <!--<script src="cordova.js"></script>-->

    <!-- your app's js -->
    <script src="js/app_courses.js"></script>
    
    <script src="js/controllers_2_courses.js"></script>
      
        <script src="js/services_courses.js"></script>
     
  </head>

 <body ng-app="CITC">
    <ion-nav-view></ion-nav-view>

     <script> 

  // Get references to the elements
  const paneElements = document.querySelectorAll('.pane');
  const viewElements = document.querySelectorAll('.view');

  // Update the background color for each element
  paneElements.forEach((element) => {
    element.style.backgroundColor = '#111D12';
  });

  viewElements.forEach((element) => {
    element.style.backgroundColor = '#111D12'; 
  });

    </script> 

    
  </body>
</html>

I have a Spa app built using React, for a better experience I use prerendering to get the full page, it performs well most of the time but flickers on slow networks because React unloads the page and regenerate it, is there any way to prevent it?

I tried using HydroRoot to hydrate the prerendered page but it didn’t work, react didn’t attach to the page and I’m not sure if react validated the difference between the two.

Another possible cause of the problem is that I’m using a lazy component, which is a must, I can’t stand unwanted pages being loaded when entering the site.

Can anyone tell me how to solve it, here is a reproducible example: react-spa-prerender