Category: javascript

So i made this brightness range input witch through inline styles ( JavaScript ) manipulates the brightness by adding a filter : brightness(x%) to the document.body

Here is the code

function ChangeBrightness() {
  let BrightnessValue = document.getElementById("brightness-bar").value;
  localStorage.setItem("Brightness", BrightnessValue.toString());
  document.body.style.filter = `brightness(${BrightnessValue}%)`;
}

And here is the css style of the body

body.Light {
  background: var(--white);
}

But when I use it , it looks like this :
[1]: https://i.stack.imgur.com/JpDS2.png

As you can see the brightness filter does not have any effect on those little lines witch are actually the body background that are visible because of small margin I applies to other elements

I use the following code to access the response:

var url_to_geotiff_file = "http://127.0.0.1:8009/files/1.tif";
fetch(url_to_geotiff_file).then(response => {
        console.log(response)
    })

But these codes return the following error:

GET http://127.0.0.1:8009/media/1.tif net::ERR_BLOCKED_BY_CLIENT
Uncaught (in promise) TypeError: Failed to fetch

How can I fix this error?

Using the docx.js library, inserting the numbering attribute into the Paragraph objects causes the Word document it generates to become unopenable in Microsoft Word. It throws the error “Word experienced an error trying to open the file. Try these suggestions.”

This is the code I used:

import { Document, Packer, Paragraph, TextRun, Numbering, convertInchesToTwip, LevelFormat, AlignmentType } from "docx";

function DocGen() {
  const doc = new Document({
    config: [
        {
          reference: "style-one",
          levels: [
            {
              level: 1,
              format: LevelFormat.UPPER_ROMAN,
              text: "%1",
              alignment: AlignmentType.START,
              style: {
                paragraph: {
                  indent: {left: convertInchesToTwip(5), hanging: convertInchesToTwip(3)},
                },
              },
            },
          ],
        },
      ],
    sections: [
        {
          children: [
              new Paragraph({
                text: "Hi",
                numbering: {
                  reference: "style-one",
                  level: 1,
                },
              }),
          ],
        },
      ],
  });
  Packer.toBlob(doc).then((blob) => {
      saveAs(blob, "My Document.docx");
  });
}

I can open the Word document with other apps (like Pages or Preview), except the numbering does not show up in the document.

If I remove the numbering attribute, the Word documents generated will be openable again by Microsoft Word.

I want the status to be live when the user logs in and logs out. I get the connection to the pusher and everything is registered but the javascript side doesn’t work (STEP 3) and it doesn’t show anything in console.log. I get status 101

These are the steps I took:

1. adding the keys to .env file

PUSHER_APP_ID=098576747
PUSHER_APP_KEY=34kkh4jhj56mn7nl7h5
PUSHER_APP_SECRET=h4857jfhf83746565
PUSHER_APP_CLUSTER=eu

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

2. bootstrap.js

window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.$ = require('jquery');

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    forceTLS: true
});

3. app.js

Echo.channel('notifications')
    .listen('LogInLogOutEvent', (e) => {
        console.log(e)
    })

4. laravel.log

5. broadcasting.php

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
                'encrypted' => true,
            ],
        ],

6. the event

class LogInLogOutEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public $type;

    /**
     * Create a new event instance.
     */
    public function __construct($message, $type)
    {
        //
        $this->message = $message;
        $this->type = $type;
    }


    public function broadcastOn()
    {
        Log::debug($this->message);
        Log::debug($this->type);
        return new Channel('notifications');
    }
}

7. Listeners

   public function handle(Login $event): void
    {
        broadcast(new LogInLogOutEvent("{$event->user->name} is online", 'success'));
    }

    public function handle(Logout $event): void
    {
        broadcast(new LogInLogOutEvent("{$event->user->name} is offline", 'danger'));

    }

8. EventServiceProvider.php

 Login::class => [
            LogInListener::class,
        ],
        Logout::class => [
            LogOutListener::class,
        ],

10.

i pass a php array to js function. but array items contain space. for example for name=”Ali alavi”.
when i use encode_json($value) to pass js function , if my items contain space get this error:

Uncaught SyntaxError: '' string literal contains an unescaped line break

my php code:($value is array contain U_name,U_family,U_username,U_role)

 $db = Db::getInstance();
$sql = "select * from users ";
$record = $db->query($sql);
$i = 1;
foreach ($record as $key => $value) {
    echo "<tr><td><a onclick=editRecord('" . json_encode($value) . "') data-toggle='modal' data-target='#userModal' href='#'><i class='icon-pencil'></i><a></td></tr>";
}

my js func:

 function editRecord(n) {
        let p = JSON.parse(n);
        console.log(p['U_name']);}

Im currently watching harvard CS50 computerscience playlist and I have experience in web-development. Different languages have different compliers and im curious what the differences between them are.

googled some sources: What is the difference between Emscripten and Clang in terms of WebAssembly compilation

But wondering what the equivalent of clang is for javascript

I have an enum called MaritalStatus:

enum MaritalStatus {
  Single,
  Heartbroken,
  Married,
}

And an array of objects which incorporates that enum
(This is a typescript project btw):

const contacts: Contact[] = [
  {
    id: 1,
    name: "Tony",
    age: 18,
    maritalStatus: MaritalStatus.Heartbroken,
    dateOfBirth: new Date(2006, 1, 2),
    occupation: "Software Engineer",
  },
  {etc.}
]

Here is the only part of my HTML that matters:

<div
  v-for="contact in contacts"
  :key="contact.id"
>
  <span class="my-2">{{ contact.maritalStatus }}</span>
</div>

When this displays, I get a list of names, with numbers 0-2 displaying below them. Obviously what I want to display is the text “Single”, “Married”, or “Heartbroken”.

How do I go about this? Thanks!

Title:
Issue with Sequelize migration – “No database selected” error

Description:
I’m currently facing an issue with Sequelize migrations. When I try to run npx sequelize-cli db:migrate, I encounter a “No database selected” error. I have checked my Sequelize configuration, and it seems correct.

This is the error I get:

Sequelize CLI [Node: 20.11.1, CLI: 6.5.2, ORM: 6.35.2]

Loaded configuration file “srcconfigconfig.cjs”.
Using environment “development”.

ERROR: (conn=33, no: 1046, SQLState: 3D000) No database selected
sql: CREATE TABLE IF NOT EXISTS SequelizeMeta (name VARCHAR(255) NOT NULL UNIQUE, PRIMARY KEY (name)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE utf8_unicode_ci; – parameters:[]

This is the migration code:

module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('Restaurants', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      name: {
        type: Sequelize.STRING,
        allowNull: false
      },
      description: {
        type: Sequelize.TEXT
      },
      address: {
        type: Sequelize.STRING,
        allowNull: false
      },
      postalCode: {
        type: Sequelize.STRING,
        allowNull: false
      },
      url: {
        type: Sequelize.STRING
      },
      shippingCosts: {
        type: Sequelize.DOUBLE,
        allowNull: false
      },
      averageServiceTime: {
        type: Sequelize.DOUBLE
      },
      email: {
        type: Sequelize.STRING
      },
      phone: {
        type: Sequelize.STRING
      },
      logo: {
        type: Sequelize.STRING
      },
      heroImage: {
        type: Sequelize.STRING
      },
      status: {
        type: Sequelize.ENUM('online', 'offline', 'closed', 'temporarily closed'),
        allowNull: false
      },
      restaurantCategoryId: {
        type: Sequelize.INTEGER,
        allowNull: false,
        references: {
          model: {
            tableName: 'RestaurantCategories'
          },
          key: 'id'
        }
      },
      userId: {
        type: Sequelize.INTEGER,
        allowNull: false,
        references: {
          model: {
            tableName: 'Users'
          },
          key: 'id'
        }
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE,
        defaultValue: new Date()
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE,
        defaultValue: new Date()
      }
    })
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Restaurants')
  }
}

I haven’t tried any succesful possible solution, since I don’t have much knowledge with migrations

I’ve written a function for my little JavaScript project that prints text to a div akin to a dialog in an old-school game. I include the code for this function, although I believe it’s not really crucial for my question:

async echo(targetId, msg) {
    let txtTarget = document.getElementById(targetId);
    for (let i = 0; i < msg.length; i++) {
        txtTarget.innerHTML += msg[i];
        txtTarget.scrollTop = txtTarget.scrollHeight;
        if (msg[i] !== ' ') {
            this.playSound('text');
        }
        await this.sleep(constants.TEXT_PRINT_SPEED);
    }
}

When I use this function, when a word is too long to fit in a line, the first few letters often are printed in the current line. Then the word jumps to another line and is finished there. This causes a rather unpleasant effect.

My question is, can I prevent this kind of behaviour through JS or CSS? Is there a way for the function to know in advance that the new word won’t fit in the current line and start printing it in a new line from the beginning, thus avoiding the jump?

I tried various word-wrap settings for the target div, but to no avail. I don’t really know which CSS property is responsible for this kind of behaviour. Thanks for your help.

I have a Microfrontend app implemented using Webpack Module Federation. So I have a Host app and a Child app (both built using ReactJS)

I have a reference to the child app from the host as below configuration;

remotes: {
    mychildMfe: `mychildMfe@${mychildUrl}`,
  },

When I hit my Host app URL at https://myhost-app.apps.myorg.net, I am getting a CORS error as below;

Access to font at 'https://mychild-app.apps.myorg.net/static/media/open-sans-latin-400-normal.xxxxxxxxx.woff2' from origin 'https://myhost-app.apps.myorg.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have already tried enabling CORS and allowing origin ^https?://.*.myorg.net$

But still getting the same error. Please suggest.

I would like to code an “investigation network” in JavaScript like the investigators in the movies.
I want that each connection between two individuals is represented by a line with various colors (green for friends, yellow for siblings, …).
I did not find any tutorials about a similar program.
How can I code an interactive one?
I tried to use sigma.js and similar libraries.
Thank you for your help

this is the js code using Howl.js i wrote i hope someone can help me the problem is when i puase for first time then play again it reset the audio i want to keep track to the current audio that i playing then if i pause it i want if i play it again it play in the time i paused it in it so please if you can help or suggest solution give me it if that happen i will work to another approach to change current time by control progess but now i just focus on pause and play
here is the code

class AudioPlayer {
    constructor(srcAudio, srcAudioId) {
      this.srcAudio = srcAudio;
      this.srcAudioId = srcAudioId;
      this.isPlaying = false;
      this.seekPosition = 0;
  
      this.player = new Howl({
        src: srcAudio,
        html5: true,
        onplay: () => {
          this.isPlaying = true;
          console.log('onplay ' + this.srcAudioId);
        },
        onended: () => {
          this.isPlaying = false;
          console.log('onended ' + this.srcAudioId);
        },
        onpause: () => {
          this.isPlaying = false;
          this.seekPosition = this.player.seek();
          console.log('onpause ' + this.srcAudioId);
        },
        onseek: (event) => {
          console.log('onseek ' + this.srcAudioId);
          console.log(event);
        },
      });
    }
  
    play() {
      console.log('play ' + this.srcAudioId);
      this.player.seek(this.seekPosition);
      this.player.play();
      this.isPlaying = true;
    }
  
    pause() {
      console.log('pause ' + this.srcAudioId);
      this.seekPosition = this.player.seek();
      this.player.pause();
      this.isPlaying = false;
    }
  
    togglePlay() {
      if (this.player.playing([this.srcAudioId])) {
        this.pause();
      } else {
        this.play();
      }
    }
  }
  
  const audioModuleControll = (() => {
    let audioPlayers = {};
  
    function togglePlayAudio(element) {
      const srcAudio = element.getAttribute('data-audio');
      const srcAudioId = element.getAttribute('data-id');
  
      if (audioPlayers[srcAudioId]) {
        const player = audioPlayers[srcAudioId];
        player.togglePlay();
      } else {
        console.log('playing for the first time', srcAudioId);
        const player = new AudioPlayer(srcAudio, srcAudioId);
        player.play();
        audioPlayers[srcAudioId] = player;
      }
    }
  
    function addEventListenersFun() {
      const playButtons = document.querySelectorAll('.voice-assistant-item .playstory');
      playButtons.forEach(function(playButton) {
        playButton.addEventListener('click', function(event) {
          togglePlayAudio(this);
        });
      });
    }
  
    return {
      addEventListenersFun: addEventListenersFun
    };
  })();
  
  document.addEventListener("DOMContentLoaded", () => {
    audioModuleControll.addEventListenersFun();
  });

This is a very simple question, but I can’t get it to work.
I’m working on a school project to create the game ‘Pong‘.

I’ve now got a ball that spans in the middle of my canvas and should start moving towards player_1 (the rectangle on the left).
When it hits player_1 it should go in a straight line back, towards player_2 (rec, right).

I’ve now set up a simple if statement in my draw function to test my hitbox. The ball should start moving towards player_1 and when it hits the front of the player_1 rectangle it should go back towards player_2. However, the code does not work; the ball just goes trough player_1 and I don’t get why.
I’ve draw out the situation, talked to my ducks (clasmates), but can’t figure out what goes wrong.

If statement in draw:

  // Draw ball
  drawBall(xBall, yBall);
  
  // Movement ball
  if (xBall - 6 === xPlayer_1 + 10 && yBall >= yPlayer_1 && yBall <= yPlayer_1 + 40) {
    xBall += 10;
  }
  else {
    xBall -= 10; // I'm using this for now to test the if-statement
  }

Image of my canvas:

My complete code (I took the start-screen and instructions out to keep it as short as possible):

// variables
var height = 400;
var width = 800;
var xPlayer_1 = 40;
var yPlayer_1 = height/2 - 20;
var xPlayer_2 = width-40;
var yPlayer_2 = height/2 - 20;
var xBall = width/2;
var yBall = height/2;

// Setup & draw
function setup() {
  createCanvas(800, 400);  
  frameRate(30);
}

function draw() {
  // Background
  background('#212628');
  drawGame();
}

// Functions
function drawGame() {
  // Draw Player 1 & Player 2
  drawPlayer_1(xPlayer_1, yPlayer_1);
  drawPlayer_2(xPlayer_2, yPlayer_2);
  
  // Movement Player 1
  if (keyIsDown(87)) {
    yPlayer_1 -= 8;
  }

  if (keyIsDown(83)) {
    yPlayer_1 += 8;
  }
  
  // Movement Player 2
  if (keyIsDown(38)) {
    yPlayer_2 -= 8;
  }

  if (keyIsDown(40)) {
    yPlayer_2 += 8;
  }
  
  // Draw ball
  drawBall(xBall, yBall);
  
  // Movement ball
  if (xBall - 6 === xPlayer_1 + 10 && yBall >= yPlayer_1 && yBall <= yPlayer_1 + 40) {
    xBall += 10;
  }
  else {
    xBall -= 10; // I'm using this for now to test the if-statement
  }
}

function drawPlayer_1(xPlayer_1, yPlayer_1) {
  // Constrain player 1
  yPlayer_1 = constrain(yPlayer_1,0, height - 40);
  
  // Draw player 1
  fill('white');
  rect(xPlayer_1, yPlayer_1, 10, 40); 
}
function drawPlayer_2(xPlayer_2, yPlayer_2) {
  // Constrain player 2
  yPlayer_2 = constrain(yPlayer_2,0, height - 40);
  
  // Draw player 2
  fill('white');
  rect(xPlayer_2, yPlayer_2, 10, 40); 
}
function drawBall(xBall, yBall) {
  // Constrain ball
  xBall = constrain(xBall,0 + 6, height - 6);
  
  // Draw ball
  fill('red');
  circle(xBall, yBall, 12);
}

On my form, there is a button to select an image file. After pressing select You will be able to select additional image files. which every time a new image file is selected The input variable will also have a new value based on the last selected image. This causes me to store all image files with the variable in JS(imageMap). But when submitting the form, I can’t send these image files from the variable in JS(imageMap).

<form id="my_form" name="my_form" method="post" enctype="multipart/form-data" action="....">
....
    <label for="img_picker">เลือกไฟล์ภาพ</label>
    <input type="file" id="img_picker" class="hidden" multiple>
    <div id="img_preview"></div>

<script>
    var imageMap = {};

    $('#img_picker').on('change', function () {
        for (const file of this.files) {
            const key = "id" + Math.random().toString(16).slice(2);
            imageMap[key] = file;

            const reader = new FileReader();
            reader.onload = (e) => {
                const img = document.createElement('img');
                img.classList.add('img-thumbnail', 'mb-2');
                img.style.width = '100px';
                img.src = e.target.result;

                const deleteButton = document.createElement('button');
                deleteButton.classList.add('btn', 'btn-danger', 'btn-sm');
                deleteButton.textContent = 'delete';
                deleteButton.onclick = () => {
                    img.parentNode.removeChild(img);
                    deleteButton.parentNode.removeChild(deleteButton);
                    delete imageMap[key];
                };

                const div = document.createElement('div');
                div.appendChild(img);
                div.appendChild(deleteButton);

                $('#img_preview').append(div);
            };
            reader.readAsDataURL(file);
        }

        this.value = null;
    });
</script>

....
    <button type="button" class="btn btn-primary sub_form">save</button>
</form>

<script>
    $(document).on('click', ".sub_form", function () {
        document.getElementById('my_form').submit();
    });
</script>

Once, I tried to create the input to store these images and I used $(#input_files).val(imageMap) But it didn’t work.

    const [currCode, setCurrCode] = useState(``);
    const keywords = ['class', 'int', 'string', 'public', 'static', 'void', 'return'];
    const highlightKeywords = (text) => {
        var code = keywords.reduce((acc, keyword) => {
            const regex = new RegExp(`\b${keyword}\b`, 'g');
            return acc.replace(regex, (match) => `<span style="color: yellow;">${match}</span>`);
        }, text);
        return code;
    }
    const handleCodeChange = (e) => {
        setCurrCode(highlightKeywords(e.target.value));

    }

<ContentEditable
            html={currCode}
            tagName="pre"
            onChange={handleCodeChange}
        />

I want to implement syntax highlighting in the Editor component below. I wrote this code, and it highlights the code, but when I try to change the code, the cursor jumps to the bottom.