javascript – Page 4551 – Blancer.com Tutorials and projects

How to grab entire dynamically created HTML document [duplicate]

So I want to do something like: console.log(document.outerHTML) to output the entire document, some of which is dynamically created using javascript. I feel I must be missing something basic.

Website using Google Places API not running after CSS, HTML, and JavaScript changes. Help needed

self taught beginner programmer here, trying to build a website with CSS, HTML, and JavaScript. I have been iterating and suddenly made a change that stopped the site from running.

Please find all my code below. I have no idea what the issue is. Error is:crbug/1173575, non-JS module files deprecated.

For context, I am making a website showcasing Nightlife in Beijing, connected with Google Places API. Any extra suggestions or recommendations are very welcome.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Panda Party - Discover Beijing's Nightlife</title>
  <link rel="stylesheet" href="app.css"> <!-- Link to your CSS file -->
</head>
<body>
  <!-- Header -->
  <header>
    <nav>
      <div class="container">
        <h1>Panda Party</h1>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Explore</a></li>
          <li><a href="#">Favorites</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <!-- Main Content -->
<main>
    <!-- Explore Section -->
    <section class="explore">
      <div class="container">
        <h3>Explore Beijing's Nightlife</h3>
        <p>Find bars, clubs, and restaurants open late serving alcohol and bar-type food</p>
      </div>
    </section>
  
    <!-- Establishment Listings -->
    <section class="listings">
      <div class="container">
        <h4>Bars</h4>
        <div id="barsContainer"></div>
      </div>
    </section>
  
    <section class="listings">
      <div class="container">
        <h4>Nightclubs</h4>
        <div id="nightClubsContainer"></div>
      </div>
    </section>
  
    <section class="listings">
      <div class="container">
        <h4>Restaurants</h4>
        <div id="restaurantsContainer"></div>
      </div>
    </section>
  </main>
  
  
  <!-- Footer -->
  <footer>
    <div class="container">
      <p>&copy; 2023 Panda Party. All rights reserved.</p>
    </div>
  </footer>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZHlXDPFdu9JQBVNQC1bgCeu3sgvhto08&libraries=places&callback=initMap"></script>
  <script src="app.js"></script> <!-- Link to your JavaScript file -->

</body>
</html>


/* Reset default browser styles */
html, body {
    margin: 0;
    padding: 0;
  }
  
  /* Header styles */
  header {
    background-color: #000;
    color: #fff;
    padding: 20px;
  }
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    display: inline-block;
    margin-left: 20px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  /* Main content styles */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .hero {
    background-image: url("background-image.jpg");
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 50px;
    color: #fff;
  }
  
  .hero h2 {
    font-size: 40px;
    margin-bottom: 20px;
  }
  
  .hero p {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: #e74c3c;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .btn:hover {
    background-color: #c0392b;
  }
  
  /* Explore section styles */
  .explore {
    background-color: #fff;
    padding: 40px;
    text-align: center;
  }
  
  .explore h3 {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .explore p {
    font-size: 18px;
    color: #888;
  }
  
  /* Footer styles */
  footer {
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
  /* CSS code to style the establishment listings */

.listings {
    margin-top: 20px;
  }
  
  .listings .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .listing-item {
    width: 50%; /* Adjust the width based on your layout */
    padding: 10px;
    box-sizing: border-box;
  }
  
  .listing-item h4 {
    margin-top: 0;
    margin-bottom: 5px;
  }
  
  .listing-item p {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  .listing-item span {
    font-weight: bold;
  }
  
  .listing-box {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
  }
  
  .listing-box .rating {
    margin-bottom: 10px;
  }
  
  .listing-box .rating img {
    width: 16px;
    height: 16px;
  }
  
  .listing-box .offerings {
    margin-bottom: 10px;
  }
  
  .listing-box .tagline {
    font-style: italic;
  }
  
  /* Optional: Add additional styling as per your design requirements */
  


// Function to fetch and process data from Google Places API
function getPlacesData() {
    // Set up the request parameters
    var request = {
      location: new google.maps.LatLng(39.9042, 116.4074), // Specify the latitude and longitude of Beijing
      radius: 2303, // Set the search radius in meters
      types: ['bar', 'night_club', 'restaurant'], // Include multiple types of establishments
      key: 'AIzaSyAZHlXDPFdu9JQBVNQC1bgCeu3sgvhto08' // Replace with your actual API key
    };
  
    // Send the request to the PlacesService API
    var service = new google.maps.places.PlacesService(document.createElement('div'));
    service.nearbySearch(request, processResults);
  }
  
  // Function to process the results from the API request
  function processResults(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      // Get the container elements for each establishment type
      var barsContainer = document.getElementById('barsContainer');
      var nightClubsContainer = document.getElementById('nightClubsContainer');
      var restaurantsContainer = document.getElementById('restaurantsContainer');
  
      // Iterate over the results and create HTML elements for each establishment
      for (var i = 0; i < results.length; i++) {
        var place = results[i];
        var name = place.name;
        var address = place.vicinity;
        var rating = place.rating || 'N/A';
        var type = place.types[0] || 'N/A'; // Get the primary type of the establishment
  
        // Create HTML elements for the establishment listing
        var listingItem = document.createElement('div');
        listingItem.classList.add('listing-item');
  
        var listingBox = document.createElement('div');
        listingBox.classList.add('listing-box');
  
        var establishmentElement = document.createElement('div');
        establishmentElement.classList.add('establishment');
  
        var nameElement = document.createElement('h4');
        nameElement.textContent = name;
        establishmentElement.appendChild(nameElement);
  
        var addressElement = document.createElement('p');
        addressElement.textContent = 'Address: ' + address;
        establishmentElement.appendChild(addressElement);
  
        var ratingElement = document.createElement('div');
        ratingElement.classList.add('rating');
        ratingElement.textContent = 'Rating: ' + rating;
        establishmentElement.appendChild(ratingElement);
  
        var typeElement = document.createElement('p');
        typeElement.textContent = 'Type: ' + type;
        establishmentElement.appendChild(typeElement);
  
        // Append the establishment element to the corresponding container based on the type
        if (type === 'bar') {
          barsContainer.appendChild(listingItem);
        } else if (type === 'night_club') {
          nightClubsContainer.appendChild(listingItem);
        } else if (type === 'restaurant') {
          restaurantsContainer.appendChild(listingItem);
        }
      }
    }
  }

Tried ChatGPT, it says everything should be fine. Really not sure what the issue is.

How to decrypt a Lua file using MoonSec encryption with Javascript?

i have a code written in javascript and this is it.a file with the lua extension is encrypted with MoonSec how can I solve this? i don’t know much because I’m new, I’d appreciate if you could help me please i couldn’t get information from anywhere

Why am I Getting ‘Cannot Read Property of Undefined’ Error in ReactJS When Clicking Last Element?

even every thing is right but when i’m at the last element and i clicke it, it get an error says cannot read property of undefined and exactlly just when the last element is clicked.
and then it does’nt render the game is over and the button nochmal spielen{play again}

it should render the button bellow but its not doing it.so what do?
could some body help?

import React, { useState, useEffect } from 'react';
import './partFour.css';
//import words from '../data/words';
//import wordsPartFour from '../data/wordsPartFour';
//import fou from '../data/fou';

const PartFour = () => {
  const [boxPosition, setBoxPosition] = useState({ x: 5, y: 3 });
  const containerSize = { width: 350, height: 400 };
  const boxSize = { width: 50, height: 50 };
  const [gameOver, setGameOver] = useState(false);
  const [currentWordIndex, setCurrentWordIndex] = useState(0);
  const [boxesClicked, setBoxesClicked] = useState(0);
  const totalBoxes = 9;

  const fou = [
    {
        word: 'Hallo',
        bedeutung: ['مرحبا','اهلا'],
        currectBedeutungIndex: 0,
      
    },
    {
        word: 'Guten Morgen',
        bedeutung: ['صباح الخير','مرحبا'],
        currectBedeutungIndex: 0,
   
    },
    {
        word: 'Guten Tag',
        bedeutung: ['نهارك سعيد','مرحبا'],
        currectBedeutungIndex: 0,
      
    },
    {
        word: 'Guten Abend',
        bedeutung: ['مساء الخير','صباح الخير'],
        currectBedeutungIndex: 0,
      
    },
    {
        word: 'Auf wiedersehen!',
        bedeutung: ['الى اللقاء','مرحبا'],
        currectBedeutungIndex: 0,
 
    },
    {
        word: 'Wie geht es Ihnen?',
        bedeutung: ['كيف حال حضرتك؟','اين انت'],
        currectBedeutungIndex: 0,
     
    },
    {
        word: 'Ich heiße...',
        bedeutung: ['...انا اسمي','انا ذاهب'],
        currectBedeutungIndex: 0,
     
    },
    {
        word: 'Ich heiße Ali!',
        bedeutung: ['!انا اسمي علي','مرحبا بك'],
        currectBedeutungIndex: 0,
    
    },
    {
        word: 'Wie heißen Sie?',
        bedeutung: ['ما اسم حضرتك؟','كيف حالك؟'],
        currectBedeutungIndex: 0,
   
    },
];



  useEffect(() => {
    if (!gameOver) {
      const intervalId = setInterval(() => {
        const maxX = containerSize.width - boxSize.width;
        const maxY = containerSize.height - boxSize.height;
        const nextX = Math.floor(Math.random() * maxX);
        const nextY = Math.floor(Math.random() * maxY);
        setBoxPosition({ x: nextX, y: nextY });
      }, 16000);
      return () => clearInterval(intervalId);
    }
  }, [gameOver]);


  const currentWord = fou[currentWordIndex]
  const currentMeaning = currentWord.bedeutung[0];
 
 const handleBoxClick = (event) => {
  if (!gameOver) {
    const box = event.target;
    const clickedWord = box.getAttribute('data-word');
    if (box.style.display !== 'none') {
      if (clickedWord === currentMeaning) {
        box.style.display = 'none';
        setBoxesClicked((prevBoxesClicked) => prevBoxesClicked + 1);
        setCurrentWordIndex((prevIndex) => prevIndex + 1);
      } else {
        alert('Wrong word!');
      }
    }
    if (boxesClicked + 1 === totalBoxes) {
      setGameOver(true);
    }
  }
};


  //const currectWord = box.getAttribute('data-word');
  
  
  const handleRefreshClick = () => {
    setBoxPosition({ x: 0, y: 0 });
    setGameOver(false);
    setBoxesClicked(0);
    setCurrentWordIndex(0);
    
  }; 

  

  return (
    <div className='part-four-container'>
      <div>
          <p className='bedeutung-container' key={0}>{currentMeaning}</p>
      </div>

      {!gameOver && (
        <div className='word-space'>
          <div
            className='hallo'
            data-word="مرحبا"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 4.3)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 5)}px`,
            }}
            onClick={handleBoxClick}
             >hallo</div>

          <div
            className='gutenMorgen'
            data-word="صباح الخير"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 4.4)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 5)}px`,
            }}
            onClick={handleBoxClick}
          > Guten Morgen</div>

          <div
            className='gutenTag'
            data-word="نهارك سعيد"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 3.3)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 6)}px`,
            }}
            onClick={handleBoxClick}
          >Guten Tag</div>

<div
            className='gutenAbend'
            data-word="مساء الخير"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 5.2)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 6.1)}px`,
            }}
            onClick={handleBoxClick}
          >Guten Abend</div>
      
      <div
            className='aufWiedersehen'
            data-word="الى اللقاء"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 5.3)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 6.2)}px`,
            }}
            onClick={handleBoxClick}
          >Auf wiedersehen!</div>

<div
            className='WieGehtsIhnen'
            data-word="كيف حال حضرتك؟"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 5.4)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 6.3)}px`,
            }}
            onClick={handleBoxClick}
          >Wie geht es Ihnen?</div>

<div
            className='ichHeiß'
            data-word="...انا اسمي"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 5.5)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 7.4)}px`,
            }}
            onClick={handleBoxClick}
          >Ich heiße...</div>

<div
            className='ichHeißAli'
            data-word="!انا اسمي علي"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 5.6)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 5.5)}px`,
            }}
            onClick={handleBoxClick}
          >Ich heiße Ali!</div>

<div
            className='wieHeißenSie'
            data-word="ما اسم حضرتك؟"
            style={{
              top: `${boxPosition.y * Math.floor(Math.random() * 5.7)}px`,
              left: `${boxPosition.x * Math.floor(Math.random() * 4.6)}px`,
            }}
            onClick={handleBoxClick}
          >Wie heißen Sie?</div>

</div>)}

        {gameOver && (
      <div >
        <p className='game-over'>Spiel ist aus</p>
      <button className='gam-over-button' onClick={handleRefreshClick}>nochmal abspielen</button>
       
      </div>
      )}

    </div>
  );
};

export default PartFour;

What causes the ‘module not found’ error when importing ‘firebase/auth’ in Next.js with Firebase authentication?

what is this error? Im trying to use firebase authentication in my nextjs application. when i import something from ‘firebase/auth’ this error shows in the vscode console

`Module not found: Can't resolve 'encoding' in 'D:clientDesktopkwadernonode_modulesnode-fetchlib'

Import trace for requested module:
./node_modules/node-fetch/lib/index.js
./node_modules/@firebase/auth/dist/node-esm/index.js
./node_modules/firebase/auth/dist/index.mjs
./app/components/SignUpForm.jsx
./app/login/page.jsx
`

using firebase authentication

How to render server response directly in react router v5

Here is my React Router v5 code. I render special react components for a certain routes (/demo, /home and /shop). However, for the rest of the routes, I just want to display the <div>Some content here</div> elements returned by the server without any treatment.

const Root = () => {

  return(
    <div className="site">
      <ProvideAuthContext>
        <Header />
        <Router>
          <Switch>
            <Route exact path={"/demo/"} component={Demo}/>
            <Route exact path={"/home/"} component={Home}/>
            <ProtectedRoute path={"/shop/"}>
              <Shop />
            </ProtectedRoute>
            <Route path={"*"} render={() =>
              <div>
                I want to display the div element received from the server here.
              </div>
              }
            />
          </Switch>
        </Router>
        <Footer />
      </ProvideAuthContext>
    </div>
  )

}

How do I write the last Route path for *?

JavaScript reduce on array of objects failure

Novice JS developer, need some help in identifying what I am doing wrong.

I have an array of objects

const ll = [{name:"a", ids:[1]}, {name:"b", ids:[2,3]}];

I want to convert it to following

[
  { name: 'a', ids: null, id: 1 },
  { name: 'b', ids: null, id: 2 },
  { name: 'b', ids: null, id: 3 }
]

essentially adding one record for each element in ids array.

This is the code I wrote

ll.reduce((r,o) => 
  r.concat(o.ids.map(i => {
       const r1 = o;
       r1.id = i;
       r1.ids = null;
       return r1;})),[])

What I am getting is

[
  { name: 'a', ids: null, id: 1 },
  { name: 'b', ids: null, id: 3 },
  { name: 'b', ids: null, id: 3 }
]

why 2 is missing & 3 is repeated?

Thanks in advance for your help on this.

How to use the same Firebase in third party js scripts, basically one project for multiple domains

I need to use Firebase for auth (login from Google) and access Firestore (retrieve & send/update data) from third-party js scripts which will be included to multiple websites, which will obviously have multiple domains. Now firebase allows only authorized domains that we manually to access any feature of it.

I don’t think it will be a good practice to update the authorized domains list with every new website in which the script is added as the script will be included in multiple sites through dashboard.

I am not able to figure out anything yet, one solution I got from ChatGPT was basically adding each domain through admin-sdk but that is not something I want to do as then there will be hundreds of authorized domains getting added and deleted.

How to pass id to the form action using javascript in Laravel?

I was trying to update and delete data using forms with laravel but I cannot send the id using javascript. These are the scripts

<script type="text/javascript">
    $(document).on("click", ".edit_modal", function () {
        var data_id = $(this).data('id');
        var data_name = $(this).data('name');
        $(".form-group #edit_name").val(data_name);
    });
</script>
<script type="text/javascript">
    $(document).on("click", ".delete_modal", function () {
        var data_id = $(this).data('id');
    });
</script>

And these are the forms inside a modal

<form method="post" action="{{ route('sale.update'), INSERT ID HERE }}" role="form">
<div class="modal-body">
    @csrf()
    @method('PATCH')
    <input type="hidden"  name="edit_id" id="edit_id"/>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary">Save</button>
</div>
</form>

<form method="post" action="{{ route('sale.destroy'), INSERT ID HERE }}" role="form">
    @csrf()
    @method('DELETE')
<div class="modal-footer">
    <input type="submit" class="btn btn-primary" onclick="delete()" value="Yes">
</div>
</form>

Mongoose connection closing after updating node version

I am updating packages from an old project, as well as Node. I’ve updated from node 12 to node 18, 2 versions at a time, and production seems to be running fine, but in my development environment, I’m randomly getting this error:

MongooseServerSelectionError: connection <monitor> to 127.0.0.1:27017 closed

vite building issue for svelte-kit

evrytime i run : npm run dev in my terminal i get this error:

npm run dev

[email protected] dev
vite dev

Forced re-optimization of dependencies
Error: Failed to scan for dependencies from entries:
C:UsersdellDesktopallenhanzerenhanzernode_modules@sveltejskitsrcruntimeclientstart.js

The service is no longer running
at C:UsersdellDesktopallenhanzerenhanzernode_modulesesbuildlibmain.js:1073:25
at sendRequest (C:UsersdellDesktopallenhanzerenhanzernode_modulesesbuildlibmain.js:693:14)
at buildOrContextContinue (C:UsersdellDesktopallenhanzerenhanzernode_modulesesbuildlibmain.js:1071:5)
at C:UsersdellDesktopallenhanzerenhanzernode_modulesesbuildlibmain.js:983:11

VITE v4.3.9 ready in 1130 ms

➜ Local: http://localhost:5173/
➜ Network: use –host to expose
➜ press h to show help

and while it works it odesnt automatically update on the webbrowser i have to manually refresh the page

i deleted the node modules foldder twice ran npm cache clean –force, tried to update vite and npm globally, by the way my nodejs versio is 18

Having trouble understanding where I am going wrong with my hooks

I am getting the following error message when I log in to the frontend of an app I’m building and I’m having trouble understanding why but I’ve narrowed it down to three files. I understand that I am rendering the LoginForm or BlogForm components conditionally in App.js but I don’t have any hooks in the files for those.

Warning: React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Previous render Next render

useContext useContext
useRef useRef
useContext useContext
useRef useRef
useMemo useMemo
useSyncExternalStore useSyncExternalStore
useEffect useEffect
useDebugValue useDebugValue
useDebugValue useDebugValue
useContext useContext
useRef useRef
useMemo useMemo
useSyncExternalStore useSyncExternalStore
useEffect useEffect
useDebugValue useDebugValue
useDebugValue useDebugValue
useState useState
useState useState
useState useState
useState useState
useState useState
useEffect useEffect
useEffect useEffect
undefined useContext
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

App@http://localhost:3000/main.36ead3e7b4f8451b2478.hot-update.js:49:76
Provider@http://localhost:3000/static/js/bundle.js:39885:7 bundle.js:14079:34

App.js

import { useEffect, useRef } from 'react'
import Blog from './components/Blog'
import blogService from './services/blogs'
import LoginForm from './components/LoginForm'
import BlogForm from './components/BlogForm'
import Notification from './components/Notification'
import Togglable from './components/Togglable'
import { showNotification } from './reducers/notificationReducer'
import { useDispatch, useSelector } from 'react-redux'
import { createBlog, initializeBlogs, likeBlog, deleteBlog } from './reducers/blogReducer'
import { setUser } from './reducers/userReducer'
import { useField } from './hooks'

const App = () => {
  const dispatch = useDispatch()
  const blogFormRef = useRef()

  const blogs = useSelector(({ blogs }) => blogs)
  const user = useSelector(({ user }) => user)
  const username = useField('text')
  const password = useField('password')
  const title = useField('text')
  const author = useField('text')
  const url = useField('text')

  useEffect(() => {
    dispatch(initializeBlogs())
  }, [dispatch])

  useEffect(() => {
    const loggedUserJSON = window.localStorage.getItem('loggedBloglistappUser')
    if (loggedUserJSON !== 'null') {
      // console.log('loggedUserJSON: ' + loggedUserJSON)
      const user = JSON.parse(loggedUserJSON)
      dispatch(setUser(user))
      blogService.setToken(user.token)
    }
  }, [])

  const addBlog = (blogObject) => {
    blogFormRef.current.toggleVisibility()
    dispatch(createBlog(blogObject))
    dispatch(showNotification(`a new blog ${blogObject.title} by ${blogObject.author}`, 5))
  }

  const deletePerson = (id, title, author) => {
    if(window.confirm('Are you sure you want to delete this blog?')) {
      dispatch(deleteBlog(id))
      dispatch(showNotification(`${title} by ${author} has been deleted from the bloglist`, 5))
    }
  }

  return (
    <div>
      {user === null ?
        <div>
          <h2>log in to application</h2>
          <Notification />
          <LoginForm dispatch={dispatch} username={username} password={password} user={user}/>
        </div>
        :
        <div>
          <h2>blogs</h2>
          <Notification />
          <p>{user.name} logged in <button onClick={() => {
            window.localStorage.removeItem('loggedBloglistappUser')
            dispatch(showNotification('Logged out successfully. Reload the page to log in again.', 5))
          }
          }>Log out</button></p>
          <Togglable buttonLabel="create new blog" ref={blogFormRef}>
            <BlogForm createBlog={addBlog} title={title} author={author} url={url}/>
          </Togglable>
          {[...blogs].sort((a, b) => {
            return b.likes-a.likes
          }).map(blog =>
            <Blog key={blog.id} blog={blog} like={() => dispatch(likeBlog({ ...blog, user: blog.user.id, likes: blog.likes + 1 }))} deletePerson={typeof blog.user === 'string' || blog.user.username === useSelector(({ user }) => user).username ? () => deletePerson(blog.id, blog.title, blog.author) : null }/>
          )}
        </div>
      }
    </div>
  )
}

export default App

BlogForm.js

const BlogForm = ({ createBlog, title, author, url }) => {

  const addBlog = (event) => {
    event.preventDefault()
    createBlog({
      title: title[0].value,
      author: author[0].value,
      url: url[0].value,
    })
    title[1]()
    author[1]()
    url[1]()
  }

  return (

    <form onSubmit={addBlog}>
      <h2>create new</h2>
      <div>
      title:
        <input {...title[0]} />
      </div>
      <div>
      author:
        <input {...author[0]}/>
      </div>
      <div>url:
        <input {...url[0]}/>
      </div>
      <button type="submit">create</button>
    </form>
  )
}
export default BlogForm

LoginForm.js

import { showNotification } from '../reducers/notificationReducer'
import { logIn } from '../reducers/userReducer'

const LoginForm = ({ dispatch, username, password, user }) => {

  const handleLogin = async (event) => {
    event.preventDefault()
    try {
      dispatch(logIn({ username: username[0].value, password: password[0].value }))
      window.localStorage.setItem(
        'loggedBloglistappUser', JSON.stringify(user)
      )

      // blogService.setToken(user.token)
      username[1]()
      password[1]()
    } catch (exception) {
      console.log('exception: ', exception)
      dispatch(showNotification('Wrong username or password', 5))
    }
  }

  return (
    <form onSubmit={handleLogin}>
      <div>
            username
        <input {...username[0]}/>
      </div>
      <div>
            password
        <input {...password[0]}/>
      </div>
      <button type="submit">login</button>
    </form>
  )
}

export default LoginForm

How to prevent parent div opacity from affecting child divs in a Primeng Carousel?

I’m having trouble looking to prevent the “opacity” state of the parent div from being inherited by the child divs.

In this particular code, I was looking for the opacity to not affect the element buttons. In my original code I have multiple states using “radial-gradient” so I haven’t had the necessary knowledge to adapt the code using the RGB solution, ::before pseudo element or the “position: relative” solution.
I will be very grateful to anyone who can help me.

I attach an example code
Code example in Stackblitz

Put in bold the words of a sentence that contain in the database

Hello everyone

I have a database with the following tables:

verbs
Plural
Phrases
words

01 – In the words table I will choose a word. I need php to list phrases from the phrases table that embraced this word.

2 – The verbs table will contain variations of that word if it is a verb. For example: the word make it is a verb. So it will have variations like: I did, I will, I would, etc. To organize this I created the following fields in the verbs table id, word_id and word. Where id_word is the id of the word do. Follow this same pattern for the plural table.

3 – I need it to list sentences with the word and its variants. For example: in the sentence “I’m going to make coffee” it would list because it contains the word make. However, if there is no database the phrase “I made coffee” it also has to be listed because I made it is a variant of making.

4 – After making this list, I need it to bold the words that do not exist in the database. For example if the word café does not exist in the entire database, he needs to put this word in bold.

Could someone please help me?

ChartJSNodeCanvas Fontconfig error: Cannot load default config file

Im having an issue

Im currently trying to run a javascript project with ChartJSNodeCanvas

  const width = 400; //px
    const height = 400; //px
    const canvasRenderService = new ChartJSNodeCanvas({width:width, height:height});
    const configuration = {
        type: 'bar',
        data: {
          labels: ['Team Points'],
          datasets: [
            {
              label: `Team Red: ${points.red.points}`,
              borderColor: "#000000",
              backgroundColor:"#f55442",
              data: [points.red.points],
            },
            {
                label: `Team Blue: ${points.blue.points}`,
                borderColor: "#000000",
                backgroundColor: "#3450e0",
                data: [points.blue.points],
            },
          ],
        },}

This code works fine on windows but in my cloud enviorment it will result in missing characters

It gives me the following error: Fontconfig error: Cannot load default config file

How do I fix this ?