Blancer.com Tutorials and projects

I have existing html that displays different images using javascript based on the text the mouse is “over”.

<table id="AutoNumber1" cellSpacing="1" width="100%" border="0">
  <tr>
    <td vAlign="top" width="38%">
    <p style="MARGIN-RIGHT: 10px" class="Standard"><font face="Arial" size="2">The example on the 
    right shows the resulting image from a stack of 1, 2, 4, 16 and 32 images.<br>
    <br>
    No calibration was done and some hot pixels are visible in some cases (no 
    dark and bias subtraction, no flat division).<br>
    <br>
    Mouse over the text to see the result of the stack for&nbsp; <br>
    <b>&nbsp;&nbsp;
    <A onmouseover="document['STACKRESULT01'].src='../images/Theory/Stack_1.jpg';;document.getElementById('LEGEND01').innerHTML='One Light Frame';" href="javascript:void(0);">
    1 image</A></b><br>
    <b>&nbsp;&nbsp;
    <A onmouseover="document['STACKRESULT01'].src='../images/Theory/Stack_2.jpg';document.getElementById('LEGEND01').innerHTML='Stack of 2 light frames';" href="javascript:void(0);">
    2 images</A></b><br>
    <b>&nbsp;&nbsp;
    <A onmouseover="document['STACKRESULT01'].src='../images/Theory/Stack_4.jpg';;document.getElementById('LEGEND01').innerHTML='Stack of 4 light frames';" href="javascript:void(0);">
    4 images</A></b><br>
    <b>&nbsp;&nbsp;
    <A onmouseover="document['STACKRESULT01'].src='../images/Theory/Stack_16.jpg';;document.getElementById('LEGEND01').innerHTML='Stack of 16 light frames';" href="javascript:void(0);">
    16 images</A></b><br>
    <b>&nbsp;&nbsp;
    <A onmouseover="document['STACKRESULT01'].src='../images/Theory/Stack_32.jpg';;document.getElementById('LEGEND01').innerHTML='Stack of 32 light frames';" href="javascript:void(0);">
    32 images</A></b></font></p>
    <p class="Standard"><font face="Arial" size="2">You can see that the resulting image is not 
    lighter or more colorful when the number of stacked light frames is 
    increasing but is much smoother.</font></p>
    <p>&nbsp;</p></td>
    <td width="62%">
    <p align="center">
    <IMG id=STACKRESULT01 border=0 name=STACKRESULT01 src="../images/Theory/Stack_2.jpg" width=591 height=591><br>
    <font face="Arial" size="2"><b id="LEGEND01" name="LEGEND01">
    One Light Frame</b></font></p></td>
  </tr>
</table>

I want to achieve the same behaviour in an environment that doesn’t support javascript (it uses litehtml).

I’m not an html expert, so if there’s a way to do this without javascript, I would be grateful to know how to do it. It may involve the use of the CSS:hover pseudo class, however I don’t know CSS/html well enough to put it all together. A working example that does the same as the above would help enormously.

Many thanks, David

Since it isn’t possible in Livewire to show an alert multiple times with like session()->flash() I tried looking for an alternative. I found a pretty good alternative, which is by dispatching an event and then rendering an alert in JavaScript. But, somehow, nothing renders. The event goes through and works, it gets console logged correctly, but somehow, I can’t get anything to render in the HTML.

I’ve made it a very simple script:

document.addEventListener("DOMContentLoaded", function () {
    Livewire.on("error", (bericht) => {
        console.log("Error event received:", bericht);
        alert();
    });

    Livewire.on("succes", (bericht) => {
        console.log("Success event received:", bericht);
        alert();
    });

    function alert()
    {
        const alert_container = document.getElementById("alert-container");

        alert_container.innerHTML = "test";
    }
});

And the alert container is in the HTML itself:

<div>
    <form wire:submit.prevent="inloggen">
        @csrf

        @if (session()->has('error'))
            <x-alert.alert :bericht="session('error')" :bericht_type="'error'" />
        @endif

        @if (session()->has('succes'))
            <x-alert.alert :bericht="session('succes')" :bericht_type="'succes'" />
        @endif

        <div id="alert-container"></div>

And the event is dispatched here:

        } else {
            $this->dispatch('error', 'Ongeldig e-mailadres of wachtwoord.');
            return;
        }

And at last it logs:

Error event received: ['Ongeldig e-mailadres of wachtwoord.']

So it does receive it, but doesn’t edit the HTML.
Does anyone know a solution?

I have this approach to solve it, Please let me know if better approach for same available?

const currentPostJobTab = localStorage.getItem('currentPostJobTab');

if (currentPostJobTab !== null) {
  console.log('Value exists in localStorage:', currentPostJobTab);
} else {
  console.log('Key does not exist in localStorage.');
}

I want to implement webauthn using PHP (specifically Yii2 Framework) along with the SimpleWebAuthnBrowser library (https://simplewebauthn.dev/docs/packages/browser)

When registering the device, here is my response for the challenge

return [
    'challenge' => $challengeBase64,
    'rp' => [
        'name' => Yii::$app->name,
        'id' => 'x-y-z.ngrok-free.app',
    ],
    'user' => [
        'id'          => $userId,
        'name'        => $displayName,
        'displayName' => $displayName,
    ],
    'pubKeyCredParams' => [
        ['type' => 'public-key', 'alg' => -7],
        ['type' => 'public-key', 'alg' => -257],
    ],
    'authenticatorSelection' => [
        'authenticatorAttachment' => 'cross-platform',
        'requireResidentKey' => false,
        'userVerification' => 'discouraged',
    ],
    'timeout' => 60000,
    'attestation' => 'direct',
    'transports' => ['usb'],
];

On the registration view:

try {
    // get challenge
    let challengeResponse = await fetch('/user/challenge');

    if (!challengeResponse.ok) {
        throw new Error('Failed to get challenge from server');
    }
    let challengeData = await challengeResponse.json();

    const attResp = await SimpleWebAuthnBrowser.startRegistration(challengeData);

    // // get credential data
    let credential_id = attResp.rawId;
    let public_key = attResp.response.publicKey;
    let sign_count = 0;
    let transports = attResp.response.transports ? attResp.response.transports : [];
    let attestation_type = attResp.type;
    .....

The registration process is running well, and the credential saved to the database.

But when I need to validate / do the authentication, the library has an error

NotAllowedError: The operation either timed out or was not allowed. See: https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client.

Here is my code on the view and return from the challenge.

try {
    const response = await fetch('/user/another-challenge', { method: 'GET' });
    const options = await response.json();

    const assertion = await SimpleWebAuthnBrowser.startAuthentication(options); // gives an error above

And here is the response for the /user/another-challenge

return [
    'challenge' => Base64Url::encode($challenge),
    'rp' => [
        'name' => Yii::$app->name,
        'id' => 'x-y-z.ngrok-free.app',
    ],
    'user' => [
        'id' => Base64Url::encode($user->id),
        'name' => $user->username,
        'displayName' => $user->username,
    ],
    'allowCredentials' => [
        [
            'type' => 'public-key',
            'id' => Base64Url::encode($credential->credential_id),
            'transports' => ['usb'],
        ]
    ],
    'timeout' => 60000,
    'userVerification' => 'discouraged',
];

I am wondering if this has something to do with the response from the registration challenge (from the registration phase).

Any clue or guidance will be appreciated. Thank you.

I tried to configure a new project using React, TypeScript and Tailwind v4 but Tailwind isn’t applying.

Here is my installation:

npx create-react-app web
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest
npx tsc --init
npm install --save-dev tailwindcss @tailwindcss/postcss postcss

I could use npx create-react-app web --template typescript but this way puts TypeScript in production dependencies. It is why I used my first steps.

Now, regarding Tailwind v4 doc I created postcss.config.mjs to the root, (near package.json) with this code:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Then, in src/index.css, I removed all styles and I added only this line:

@import "tailwindcss";

Now I changed the App extension from App.js to App.tsx with this sample code:

function App() {
  return (
    <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
  );
}

export default App;

and this this is the index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Now I run npm start but Tailwind CSS not applied.

Here is a screen:

Versions:

"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"tailwindcss": "^4.0.12",
"postcss": "^8.5.3",

Did I miss a step?

here’s my javascript code, which i think is the problem here

const tabs = document.querySelector('.tabs');
const tabButtons = tabs.querySelectorAll('[role="tabs"]');
const tabPanels = tabs.querySelectorAll('[role="tabpanel"]');

tabButtons.forEach(button => button.addEventListener('click', handleTabClick));

function handleTabClick(event) {
  event.currentTarget.setAttribute('aria-selected', true);
  tabButtons.forEach(tab => {
    // tab.ariaSelected = false;
    tab.setAttribute('aria-selected', false);
  });
  event.currentTarget.setAttribute('aria-selected', true);
  //finding associate tab panel
  const {
    id
  } = event.currentTarget;
  const tabPanel = tabs.querySelector(`[aria-labelledby="${id}"]`);
  console.log(tabPanel);
  tabPanel.hidden = false;
}

<link rel="stylesheet" href="https://unpkg.com/98.css">

<div class="wrapper">
  <div class="tabs">
    <menu role="tablist">
      <li role="tabs" aria-selected="true">
        <button role="tab" id="X" aria-selected="true" >XXX</button>
      </li>
      <li role="tabs" aria-selected="false">
        <button role="tab" id="Y" aria-selected="false">YYY</button>
      </li>
    </menu>
    <div class="window" role="tabpanel" aria-labelledby="X">
      <div class="window-body" role="tabpanel" aria-labelledby="X">
        <p>Hello! This is a work in progress...</p>
      </div>
    </div>
  </div>
  <div class="window" role="tabpanel" aria-labelledby="Y" hidden>
    <div class="window-body" role="tabpanel" aria-labelledby="Y" hidden>
      <p>Hello again!</p>
    </div>
  </div>
</div>

there’s a lot of messiness and confusion in the html code because i’m using the code given to create the tab designs from the 98.css library page, which didn’t contain div role before menu, or buttons. So the tab ‘X’ and ‘Hello! This is a work in progress…’ panel shows when I load the page (everything looks correct), and buttons are clickable but if I click on ‘Y’, nothing happens.
i’m a beginner so any help is appreciated. thank you!

i made a code where there is a player object and two floor (Floor up and Floor Down). I want the player gravity will change to (-400) if the user press up arrow button and (400) if the user press down arrow button. Here is my code, there is a bug where the player only go through the Floor up when the gravity is (-400). How do i fix the bug?

i want that the player are not going to go through the Floor up. Here is my code:

window.onload = function() {
  Crafty.init(600, 400);
  Crafty.background('lightblue');

  // Lantai atas (merah)
  Crafty.e('Floorup, 2D, DOM, Color, Solid, Collision')
    .attr({
      x: 0,
      y: 0,
      w: 600,
      h: 20
    })
    .color('red');

  // Lantai bawah (kuning)
  Crafty.e('Floor, 2D, DOM, Color, Solid, Collision')
    .attr({
      x: 0,
      y: 380,
      w: 600,
      h: 20
    })
    .color('yellow');

  // Objek pemain
  var player = Crafty.e('Player, 2D, DOM, Color, Gravity, Collision')
    .attr({
      x: 280,
      y: 200,
      w: 40,
      h: 40
    })
    .color('blue')
    .bind('KeyDown', function(e) {
      if (e.key === Crafty.keys.UP_ARROW) {
        this.gravity('Floorup');
        this.gravityConst(-400);

      }
    })
    .bind('KeyUp', function(e) {
      if (e.key === Crafty.keys.DOWN_ARROW) {
        this.gravity('Floor');
        this.gravityConst(400);
      }
    });
};

<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>

I see that createSignal() returns a SignalGetter<T>, while signal() returns a WritableSignal<T>.

What are the key differences between these two in Angular, and in what scenarios would I use one over the other?

I am working on a “Guess the Number” game in JavaScript, but my code keeps running in a loop and doesn’t seem to stop.

• The issue: It keeps asking for input even after the correct guess.
• Expected behavior: It should stop once the correct number is guessed.
• Actual behavior: It continues asking for input.

This is my own buggy attempt:

let random = Math.floor(Math.random() * 100) + 1;
let i = 0;
console.log(random);

let input = Number(prompt('Enter your guess ...'));
while (input != random) {
  if (input > random) {
    console.log(`too high`);
  } else {
    console.log(`too low`);
  }
  i++;
  input = Number(prompt('Enter your guess ...'));
}
console.log(`Correct! You guessed the number in ${i} tries`);
}

Code inspired by ChatGPT:

// --------------------- This ChatGPT code is also crashing 
const guessTheNumber = function() {
  // Generates 1-100
  let random = Math.floor(Math.random() * 100) + 1; 
  let i = 0;
  console.log(`Random number: ${random}`);

  let input = Number(prompt('Enter your guess (1-100) ...'));
  console.log(`Initial user input: ${input}`);

  while (input !== random) {
    console.log(`User guessed: ${input}, Actual number: ${random}`);

    if (isNaN(input)) {
      console.log("Invalid input! Not a number.");
      input = Number(prompt('Enter a valid number: '));
      continue; // Skip this iteration if input is invalid
    }

    if (input > random) {
      console.log(`Too high`);
    } else if (input < random) {
      console.log(`Too low`);
    }
    i++;

    // Ask user for another guess
    input = Number(prompt('Try again: '));
    console.log(`New input: ${input}`);

    // If user enters nothing, break the loop
    if (input === null || input === "") {
      console.log("Game exited by the user.");
      break;
    }
  }

  console.log(`Correct! You guessed the number in ${i} tries`);
};

guessTheNumber();

Currently I’m helping someone with a page and they needed to display some images of their work. At first I set up a little structure for the display of images to fall under a flex structure.

Now, what I’m trying to do is a transition of an image that when hovered it increases in scale and shows a little footer about the image. But when doing so I find the problem that the scale takes the center position of where the image is.

Thus, the images overflow to the top/bottom/you name it, something that I do not want. So, I was thinking of maybe just moving it to the center, but doing so would cut the transition leaving a glitchy effect onscreen since it is leaving behind the cursor.

Consequently, the last option I thought about is maybe forcing the scale up to adapt and move considering the padding of the parent div (ideally the main div, not body since there is a little nav on the top).

I have tried to think of ways of trying to implement this but I have no clue where to even start. I have seen methods of scaling child to a parent div like this, but that was not what I had in mind.

I just want to prevent the image and footer to overflow out; show the full image still and keeping the ratio. And being quite honest I do not know if choosing a grid set would help me more, since the example I showed, grid is used.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.main {
  padding: 1rem;
}

.description {
  opacity: 0;
  padding: 0.3rem;
  padding-top: 0.2rem;
  visibility: hidden;
  overflow: auto;
  font-size: 0.5rem;
  transition: 0.3s ease-in-out;
}

img {
  width: 100%;
}

.zoom {
  transition: all 1s ease-in-out;
  background-color: white;
  width: 60%;
}

.zoom:hover {
  transform: scale(1.5);
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
  z-index: 68;
}

.zoom:hover .description {
  visibility: visible;
  animation-name: descriptionName;
  animation-duration: 1.6s;
  animation-fill-mode: forwards;
}

@keyframes descriptionName {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

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

<body>
  <div class="main">
    <div class="row">
      <div class="column">
        <div class="zoom">
          <img src="https://greenwings.co/wp-content/uploads/2018/09/blank-head-profile-pic-for-a-man.jpg">
          <div class="description">
            <p>This is a label - year</p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="zoom">
          <img src="https://greenwings.co/wp-content/uploads/2018/09/blank-head-profile-pic-for-a-man.jpg">
          <div class="description">
            <p>This is a label - year</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="zoom">
          <img src="https://greenwings.co/wp-content/uploads/2018/09/blank-head-profile-pic-for-a-man.jpg">
          <div class="description">
            <p>This is a label - year</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>