javascript – Page 2267 – Blancer.com Tutorials and projects

404 javascript: local server would not see Index.html

I keep having issue with localhost:8000 not being able to “see” index.html file. I am using Deno on Mac and here are my html and javascript codes:

Javascript:


import { Application } from "https://deno.land/x/[email protected]/mod.ts";

// static server serves files from the public directory
// exitSignal is used to shut down the server when the process exits (ctrl-c)
import { createExitSignal, staticServer } from "../shared/server.ts";

// create web server and set it up to serve static files from public
const app = new Application();
app.use(staticServer);

// tell the user we are about to start
console.log("nListening on http://localhost:8000");

// start the web server
await app.listen({ port: 8000, signal: createExitSignal() });

Html:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello, Web</title>
  </head>
  <body>
    <h1>Hello, Web!</h1>
    <p>This static html page was served by hello_web.js</p>
  </body>
</html>

a screenshot of Finder folder with files deno.lock, hello_web.js, and deno.json, and folder named “public” containing index.html

I am running the server (meaning I do get signal that js is listening to server), but whenever I attempt to run related index.html file I keep receiving this error:
a 404 error screen in browser, with inspector turned on
Here is happily running server:
terminal screenshot saying “Listening on http://localhost:8000”

I am using macOS 13.2 (22D49) and Deno 1.42.1

I did restart computer, I did try duplicating the code. I tried running other files: index.html would open with no server, but server wouldn’t see index.html. I tried renaming the files. I tried cleaning up cache. I tried reverting code to the moment when it was working. Everything had same result of server not seeing index.html

How can I fix it?

Vue : How to capture a value each time component executes recursively?

Requirement : I want to capture a value from an object in to an array every time component executes recursively.

Problem Statement : As component executes recursively, I can push the value on each iteration of component into an array but data properties (array) got reset every time component initiated.

I want to capture value of age property from each component execution and want to store that into an array in child component itself.

What I tried so far ?

I tried to emit the age on each component execution from child to parent but it is capturing only once (first iteration) in parent component.

In child component :

const emit = defineEmits(['emitAge']);

.
.
.

emit('emitAge', <age>)

In parent component :

<child-component @emit-age="captureAge"/>

.
.
.

const captureAge = (val: number) => {
  console.log(val); // It only logs first iteration result, not all iterations
}

I am using Vue 3 with Composition API (<script setup>).

Is there any best solution which I can try to achieve the requirement ?

Api call to load blog posts saying blocked by orb

I have a blog application in which the home page shows the blog posts of all authors with the images of the blog post and their profile pic…but the images are not being displayed and when I check the network requests it says(failed)net::ERR_BLOCKED_BY_ORB but also I don’t have to say when users create a new blogpost the images appear for a period of time and when we revisit the website later the image is gone

useEffect(() => {

const fetchPosts = async () => {

setIsLoading(true);



try {

  const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/posts`);

  

  console.log("API Response:", response); // Log the API response

  

  setPosts(response?.data);

} catch (err) {

  console.log("Error fetching posts:", err); // Log any errors

}



setIsLoading(false);

};

fetchPosts();

}, []); I tried console logging the res but see no problem there the user info is being displayed

Building npm package with Webpack (module has no exports)

I try to build an NPM module with Webpack. When I build the module, it generates a file in the .dist folder, but it seems that the created module has no export, I don’t understand why.

Here is my JS source file:

./src/index.js

const helloNpm = () => {
  return "hello NPM"
}

export { helloNpm } ;

here is my Webpack configuration:

./webpack;config.mjs

import path from 'path';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
const __dirname = import.meta.dirname;



export default (env) => {


  // Prepare the config variable
  let config = {

    // Set compilation mode
    mode: 'production',

    devtool: false,

    target: 'web',


    // Default entry point is main
    entry: {
      index: ['./src/index.js'],
    },


    // The location of the build folder
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
      library: {
        name: "my-library",
        type: "umd",
        umdNamedDefine: true,
        
      },
      globalObject: 'this',
      publicPath: '/',
      clean: true,
    },


    // Aliasses
    resolve: {
      alias: {
        Static: path.resolve(__dirname, "src/static/"),
        Js: path.resolve(__dirname, "src/js/"),
      }
    },


    // CSS, images and HTML loaders
    module: {
      rules: [

        // CSS loader
        {
          test: /.css$/i,
          exclude: /.lazy.css$/i,
          use: ["style-loader", "css-loader"],
        },

        // CSS lazy loader
        {
          test: /.lazy.css$/i,
          use: [
            { loader: "style-loader", options: { injectType: 'lazyStyleTag' } },
            { loader: "css-loader", options: { url: false } }
          ],
        },


        // HTML loader
        {
          test: /src(/|\)js(/|\).+(/|\)[A-Za-z]+.html$/i,
          loader: "html-loader",
          options: { sources: false },
        },

      ],
    },

    // Plugins (copy, html css minifiers)
    plugins: [

      // Minify CSS
      new MiniCssExtractPlugin(),
    ]
  }

  //console.log(config.entry);
  return config;
};

//export default config;

Here is the output code generated by Webpack in the dist folder:

./dist/index.js

! function(e, t) {
    "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("beautiful-css", [], t) : "object" == typeof exports ? exports["beautiful-css"] = t() : e["beautiful-css"] = t()
}(this, (() => (() => {
    "use strict";
    var e = {
            d: (t, o) => {
                for (var r in o) e.o(o, r) && !e.o(t, r) && Object.defineProperty(t, r, {
                    enumerable: !0,
                    get: o[r]
                })
            },
            o: (e, t) => Object.prototype.hasOwnProperty.call(e, t),
            r: e => {
                "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                    value: "Module"
                }), Object.defineProperty(e, "__esModule", {
                    value: !0
                })
            }
        },
        t = {};
    e.r(t), e.d(t, {
        helloNpm: () => o
    });
    const o = () => "hello NPM";
    return t
})()));

How can I display the number of doctors for each department in this code?

I have a table in the database that I named department, and another that I named doctor. I plan to display the number of doctors for each department. But when I try to display them, I always get the result 0 even if the department contains doctors.Here is the department table:

CREATE TABLE `department` (
  `id` int(10) NOT NULL,
  `name` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `description` varchar(1000) CHARACTER SET utf8 DEFAULT NULL,
  `x` varchar(10) CHARACTER SET utf8 DEFAULT NULL,
  `y` varchar(10) CHARACTER SET utf8 DEFAULT NULL,
  `hospital_id` varchar(100) CHARACTER SET utf8 DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Here is the doctor table:

CREATE TABLE `doctor` (
  `id` int(10) NOT NULL,
  `img_url` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `name` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `email` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `address` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `phone` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `department` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `profile` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `x` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `y` varchar(10) CHARACTER SET utf8 DEFAULT NULL,
  `ion_user_id` varchar(100) CHARACTER SET utf8 DEFAULT NULL,
  `hospital_id` varchar(100) CHARACTER SET utf8 DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

I put a foreign key from the department table to the doctor table as follows:

ADD COLUMN department_id INT,
ADD CONSTRAINT fk_department_id
FOREIGN KEY (department_id)
REFERENCES department(id);

Here is the function that counts the number of doctors in the department (models):

public function getDoctorsCountByDepartment($department_id) {
        $this->db->select('department_id, COUNT(*) as doctor_count');
        $this->db->from('doctor');
        $this->db->where('department_id', $department_id); // Filtre par ID de département
        $this->db->group_by('department_id');
        $query = $this->db->get();

        return $query->row()->doctor_count; // Retourne le nombre de médecins pour ce département
    }

Here is the function that retrieves the number of departments (controller):

public function getDoctorsCountByDepartment() {
         $this->load->model('department_model'); 
    $departments = $this->department_model->getDepartments(); 

    foreach ($departments as $department) {
        $department->doctor_count = $this->department_model->getDoctorsCountByDepartment($department->id);
    }

    $data['departments'] = $departments;
    $this->load->view('department_view', $data);
    }

And this is the view to display data:

          <div class="panel-body">
                <div class="adv-table editable-table ">
                    <div class="space15"></div>
                    <table class="table table-striped table-hover table-bordered" id="editable-sample">
                        <thead class="bg-info">
                            <tr>
                                <th> <?php echo lang('name') ?></th>
                                <th> <?php echo lang('description') ?></th>
                                <th> <?php echo lang('NbreMedecins') ?></th>
                                <th class="no-print"> <?php echo lang('options') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($departments as $department) { ?>
                                <?php
                                // Initialisation de la propriété doctor_count si elle n'est pas définie
                                $department->doctor_count = $department->doctor_count ?? 0;
                                $doctors_count_by_department=array();
                                foreach ($doctors_count_by_department as $count) {
                                    if ($count->department == $department->id) {
                                        $doctor_count = $count->doctor_count;
                                        break;
                                    }
                                }
                                ?>
                                <tr class="">
                                    <td><?php echo $department->name; ?></td>
                                    <td><?php echo $department->description; ?></td>
                                    <td><?php echo $department->doctor_count; ?></td>
                                    <td class="no-print">
                                        <button type="button" class="btn btn-info btn-xs btn_width editbutton" data-toggle="modal" title="<?php echo lang('edit'); ?>" data-id="<?php echo $department->id; ?>"><i class="fa fa-edit"></i> </button>   
                                        <a class="btn btn-info btn-xs btn_width delete_button" title="<?php echo lang('delete'); ?>" href="department/delete?id=<?php echo $department->id; ?>" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément?');"><i class="fa fa-trash-o"></i> </a>
                                    </td>
                                </tr>
                            <?php } ?>
                        </tbody>
                        
                    </table>
                </div>
            </div>

How to create a async set state in reactjs?

Have a project with ReactJS using classes, like as:

import { Component } from 'react';

class FooComponent extends Component {

    async setStateAsync(data) {
        return (new Promise(resolve => this.setState(data, resolve)));
    }

    async login() {
        // Preparing UI with loader
        return this.setStateAsync({
            sending: true,
            badCredentials: null
        })
        .then(AuthService.login(...))
        .then(...)
        .then(foo => this.setState({ foo: foo }))
        .then(...)
        .catch(e => this.setState({
            sending: false,
            badCredentials: e
        }))
    }
}

Why not use two setState in same function?, reactJS have problems to keep the context in async functions, the first set state chane the html content but is async, but the function is not async, require a finish callback, can not wait the results to continue in inline mode, for resolve this i made a async setstate and works fine when use multiple times the asyncState in same function.

I try set the function as global into Component class, from index.js:

import ReactDOM from 'react-dom/client';
import React, { Component } from 'react';
import reportWebVitals from './reportWebVitals';
import App from './app';

// Set a async state function
Component.prototype.setStateAsync = async (data) =>
    (new Promise(resolve => this.setState(data, resolve)));

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

reportWebVitals();

But does not work, the setState function is not found when initialize the Component class, the this object is not a instance of the new classs.

How to access to current setState instance of the initialized class or set the async function as global for Componen?

DataTables – Scroll to column text starting with

Hi All I did my best with the title, the issue I am having is I dont know how to approach this task. I have a datatable with 1000s of rows displayed on one page with ScrollY limit. The datatable is sorted alphabetically by the second column (Accounts), this column displays Account Code text.
When focused on the table I want to be able to press any letter key for example ‘L’ and auto scroll to the start of all Account Codes beginning with that letter if that makes sense?

I understand how to scroll to a specific place on the table container but not how to ask a specific row position in terms of scrollTop value

When quantity is changed, total is showing as NaN

I’m currently working on a clothing website as a personal project only dealing with the frontend, trying to get out of tutorial hell. I am having an issue with increasing the quantity of an item. Everytime I try to increase or decrease the quantity of an item instead of the correct price showing in the cart I get an output of $NaN. I feel like it might be an issue with the updateCartTotal function but I can’t seem to find the exact spot that is causing the error. I haven’t gotten very far into the actual programming part of it but this is the code that I have so far. Any kind of suggestions would be helpful.

——————- HTML ——————

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Clothing Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="shop-styles.css">
    <link rel="stylesheet" href="cart-styles.css">
    <script src="https://kit.fontawesome.com/2480d3976a.js" crossorigin="anonymous"></script>
    <script src="store.js" async></script>
</head>

<body>

    <section class="hero">
        <div id="header">
            <ul id="navbar">
                <li><a class="active" href="../index.html">Home</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a></li>
            </ul>
        </div>
    </section>

    <section class="pro-details">
        <table width="100%">
            <thead>
                <tr>
                    <td>Remove</td>
                    <td>Image</td>
                    <td>Product</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    <td>Subtotal</td>
                </tr>
            </thead>
            <tbody class="cart-items">
                <tr class="cart-row">
                    <td><a href="#"><i class="far fa-times-circle"></i></a></td>
                    <td><img class="table-img" src="img/north-face-puffer.png"></td>
                    <td>South Face Puffer</td>
                    <td class="cart-price">$90.00</td>
                    <td class="cart-quan-input" ><input type="number" value="1"></td>
                    <td>$90.00</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section class="cart-total">
        <h3>Cart Total</h3>
        <table>
            <tr>
                <td>Cart Subtotal</td>
                <td id="cart-subtotal">$95</td>
            </tr>
            <tr>
                <td>Shipping</td>
                <td>Free</td>
            </tr>
            <tr>
                <td>Total</td>
                <td id="total-price">$95</td>
            </tr>
        </table>

        <button type="submit">Checkout</button>
    </section>


    <footer class="section-p1">
        <div class="col col1">
            <!-- <img src="img/Rise above logo.png" alt="" class="logo2" style="padding-bottom: 20px;"> -->
            <h4>Contact Us:</h4>
            <p><strong>Address:</strong> 574 Maple Road, Chicago</p>
            <p><strong>Phone:</strong> +1 573-745-4384</p>
            <p><strong>Hours:</strong> 24/7</p>
            <div class="follow">
                <h4>Follow us</h4>
                <div class="icon">
                    <i class="fab fa-facebook-f"></i>
                    <i class="fab fa-twitter"></i>
                    <a href="https://www.instagram.com/kayden_2727/"><i class="fab fa-instagram"></i></a>
                    <a href="https://github.com/8i-ght"><i class="fab fa-github"></i></a>
                    <i class="fab fa-youtube"></i>
                </div>
            </div>
        </div>

        <div class="col">
            <h4>About</h4>
            <a href="#">About Us</a>
            <a href="#">Delivery Information</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms & Conditions</a>
        </div>

        <div class="col">
            <h4>My Account</h4>
            <a href="#">Sign In</a>
            <a href="#">View Cart</a>
            <a href="My Wishlist"></a>
            <a href="Help"></a>
        </div>
    </footer>

</body>`

**---------------- JavaScript -------------------**

// Update the price of cart based on the Quantity of items
const quantityChanged = (event) => {
    const input = event.target;
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1;
    } 
    updateCartTotal();
}

const ready = () => {
    // For loop for removing item from cart
    const removeCartItemButton = document.getElementsByClassName('far fa-times-circle');

    for (i = 0; i < removeCartItemButton.length; i++) {
        let button = removeCartItemButton[i];
        button.addEventListener('click', (event) => {
            event.target.parentElement.parentElement.parentElement.remove();
            updateCartTotal();
        })
    }
    // Get the number of items that the product has in the cart
    const quantityInputs = document.getElementsByClassName('cart-quan-input');
    for (let i = 0; i < quantityInputs.length; i++) {
        const input = quantityInputs[i];
        input.addEventListener('change', quantityChanged);
    }
}

// Check if Dom is loaded so no errors appear
if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready();
}

// Function for updating the cart total
let updateCartTotal = () => {
    const cartItemContainer = document.getElementsByClassName('cart-items')[0];
    const cartRows = cartItemContainer.getElementsByClassName('cart-row');
    let total = 0;
    for (var i = 0; i < cartRows.length; i++) {
        const cartRow = cartRows[i];
        const priceElement = cartRow.getElementsByClassName('cart-price')[0];
        const quantityElement = cartRow.getElementsByClassName('cart-quan-input')[0];
        const price = parseFloat(priceElement.innerText.replace('$', ""));
        const quantity = quantityElement.value;
        total = total + (price * quantity);
    }
    document.getElementById('total-price').innerText = '$' + total;
    document.getElementById('cart-subtotal').innerText = '$' + total;
}

const sendProduct = () => {

}

Problem in using Context api and react router dom together

I was trying to use context api and react router dom together but facing an issue, cartItem which is value passed to context provider is {} object in cart component item but working fine I mean getting modified as expected in Product component

This all is happening when I am using react router dom but when I am not using it, code is working fine and as expected.

App.js

import './App.css';
import { Product } from './components/product';
import   CartContextProvider from './context/cartcontext';

import { Cart } from './components/cart-component';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  // const [cartItem, setCartItem] = useState({});

  return (
    

      // <CartContextProvider>
      //   <Product />
      //   <Cart />
      //   </CartContextProvider>
      <Router>
      <CartContextProvider>  
        <Routes>
          <Route exact path='/' element={<Product />} />
          <Route path='/cart' element={<Cart />} />
        </Routes>
      </CartContextProvider>
    </Router>
     
   
  );
}

export default App;

Product component

import React, { useState } from 'react';
import './Product.scss';
import productobj from './productobj';
import  { useCartContext } from '../../context/cartcontext';

export default function Product() {


  const { cartItem, setCartItem } = useCartContext();
  console.log("context",useCartContext());

  // State to manage quantity for each product
  const [quantities, setQuantities] = useState(productobj.map(() => 1));

  // Function to handle increasing quantity for a specific product
  const increaseQuantity = (index) => {
    const newQuantities = [...quantities];
    newQuantities[index] += 1;
    setQuantities(newQuantities);
  };

  // Function to handle decreasing quantity for a specific product
  const decreaseQuantity = (index) => {
    if (quantities[index] > 1) {
      const newQuantities = [...quantities];
      newQuantities[index] -= 1;
      setQuantities(newQuantities);
    }
  };

  const handleAddToCart = (product, index) => {
    // Check if quantity is greater than 0 before adding to cart
    if (quantities[index] > 0) {
      let cartList = (prevCartItem => {
        const newCartList = { ...prevCartItem };

        // Use product ID as the key for cart items
        if (!newCartList[product.id]) {
          newCartList[product.id] = {
            id: product.id,
            name: product.name,
            price: product.price,
            quantity: 0
          };
        }

        newCartList[product.id].quantity += quantities[index];
        setQuantities(prevQuantities => {
          // Reset quantity to 1 after adding to cart
          const newQuantities = [...prevQuantities];
          newQuantities[index] = 1;
          return newQuantities;
        });
        //console.log("new cart list",newCartList);
        return newCartList;
      });
      setCartItem(cartList);
      console.log("new cart item",cartItem);
    }
  };

  return (
    <div className='products'>
      {productobj.map((product, index) => (
        <div key={index} className='main'>
          <h3 className='product-name'>Products with id = {product.id}</h3>
          <p>{product.name}</p>
          <p>{product.description}</p>
          <p>{product.price}</p>
          <div className='quantity-container'>
            <button onClick={() => decreaseQuantity(index)}>-</button>
            <input type='text' value={quantities[index]} readOnly />
            <button onClick={() => increaseQuantity(index)}>+</button>
          </div>
          <hr />
          <div className='product-footer'>
            <input type='submit' name='addtocart' value='Add To Cart' onClick={() => handleAddToCart(product, index)} />
          </div>
        </div>
      ))}
    </div>
  );
}

context.js

import { createContext, useContext, useState } from "react";

 const cartContext = createContext();

 function CartContextProvider({children}){
    const [cartItem, setCartItem] = useState({});
    

    return <cartContext.Provider value={{cartItem,setCartItem}}>
        {children}
    </cartContext.Provider>
    
}

export function useCartContext(){
    return useContext(cartContext);

}

export default CartContextProvider;

cart component

import React, { useEffect, useState } from 'react';
import './cart.scss';
import { useCartContext } from '../../context/cartcontext';

import useApiCall from '../../customHooks/ApiHook';

export default function Cart() {

  const [totalprice, setTotalPrice] = useState(0);

  const { cartItem , setCartItem} = useCartContext();
  console.log("context",useCartContext()); //showing empty 
  


  const cartKey = Object.keys(cartItem);


  const accesskey = 'jgt_lh5w-iQJz57Fmn6j0AW_n08PHx6xi96pk8iNhaA'; // Corrected access key

  const { isLoading, data, apiError } = useApiCall(null, "GET", 'https://api.unsplash.com/photos/random', accesskey);

  // Log data if there's no API error
  useEffect(() => {
    if (!apiError && data?.urls?.raw) {
      console.log("data url",data.urls.raw);
    }
  }, [data, apiError]);

  useEffect(() => {
    setTotalPrice(cartKey.reduce((acc, cur) => {
      return acc + cartItem[cur].price * cartItem[cur].quantity;
    }, 0)); // Initialize with 0
  }, [cartKey, cartItem]);

  let imageUrl = data && data.urls && data.urls.raw ? data.urls.raw : "";

  const handleRemoveItem = (itemId) => {
    const newCartItem = { ...cartItem };
    delete newCartItem[itemId];
    setCartItem(newCartItem);
  };

  const handlePlaceOrder = () => {
    // Implement logic to place order
    
  };

  return (
    <>
      <h2 className='cartheading'>My Cart</h2>
      <div className="cart">

        {isLoading ? (
          <p>I am Loading</p>
        ) : (
          <div className="product-item">
            {cartKey.length > 0 ? (
              cartKey.map((item) => (
                <div className="product-display" key={item}>
                  <div className='product-image'>
                    {apiError ? (
                      <p>I am not available= {apiError}</p>
                    ) : (
                      <img src={imageUrl} alt="product" height={200} width={200} />
                    )}
                  </div>
                  <div className='product-details'>
                    <p>Product Id : {cartItem[item].id}</p>
                    <p>Product Name :{cartItem[item].name}</p>
                    <p>Product Price : {cartItem[item].price}</p>
                    <p>Product Quantity : {cartItem[item].quantity}</p>
                  </div>
                  <button onClick={() => handleRemoveItem(cartItem[item].id)}>Remove</button>
                </div>
              ))
            ) : (
              <div>
                <p>No Item Found, Please add items in the cart</p>
              </div>
            )}
            <button className='placeorder' onClick={handlePlaceOrder}>Place Order</button>
          </div>
        )}
        <div className="cart-math">
          {/* I will show here total price and total quantity */}

          <div className='math-main'>
            <div className='price-heading'>
              Price Details:
            </div>
            <hr />
            <div className='price-summary'>
              <p>Price:</p>
              <p>Discount: </p>
              <p>Delivery Charges:</p>

            </div>
            <hr />
            {/* how to give dotted line */}
            <div className='price-total'>
              <strong>Total Price: {totalprice}</strong>
            </div>
            <hr />
            {/* how to give dotted line */}
            <div className='price-message'>
              <p>You will save $ in this order</p>
            </div>
            <hr />
          </div>


        </div>
      </div>
    </>
  );
}

removing flexitem from flexcontainer remaining flex items are disturbed

In react using display:none, flex-items are completely removing from Dom, but remaining flex items are disturbed,
if i’m using visibility:hidden flex Items is not visible or deleted, deleted flex items still persist there space. i want output like deleting or remaining some flex items in flexbox container remaining flex items
persist there original place, don’t move

i want output like deleting or remaining some flex items in flexbox container remaining flex items
persist there original place, don’t movediv,

How not to save data from Inline Django Model?

I’m trying to implement the ability to view users’ locations in a task through the inline Geoposition model.
Geoposition stores latitude and longitude, then thanks to changing the tabular.html template I display the map
When I try to save the model, I get an error: The number of GET/POST parameters exceeded settings.DATA_UPLOAD_MAX_NUMBER_FIELDS, because data from this Geoposition inline trying to POST. I would not like to change this setting.

In this case, the inline model class looks like this

class TaskTransitInline(admin.TabularInline):
    template = "admin/gis/tabular_override.html"
    model = Geoposition
    extra = 0
    max_num = 0
    can_delete = False
    fields = (
        "id",
        "task",
        "created_at",
        "longitude",
        "latitude",
        "speed",
    )
    readonly_fields = ["id", "task", "created_at", "longitude", "latitude", "speed"]

Why do I then see ID and task in the data POST?

Maybe someone can help me

why my modal has no content but if i reload it has content

this is the home page of my website where the modal doesn’t work, can someone answer this bug that I’ve been encountering for days

<title>Home</title>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>



<!-- Alertify sakit sa ulo -->

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/bootstrap.min.css"/>



<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>

<link rel="icon" type="image/x-icon" href="/img/logo.ico">

  <!--

    You may not copy, reproduce, distribute, publish, display, perform, modify, create derivative works, transmit, 

    or in any way exploit any such content, nor may you distribute any part of this content over any network, including a local area network, 

    sell or offer it for sale, or use such content to construct any kind of database. You may not alter or remove any copyright or 

    other notice from copies of the content on AI Tech’s website. 

  -->

<style>

  .thumb {

    display: flex;

    margin-top: -60px;

    justify-content: center;

  }

  .thumb a:hover {

    margin-top: -15px;

    transition: 0.2s;

  }

  .thumb img {

    width: 54px;

    margin: 20px 20px 0 10px;

    max-height: 100%;

  }



   /* Scrollbar*/

  ::-webkit-scrollbar {

    width: 20px;

  }

  ::-webkit-scrollbar-track {

    box-shadow: inset 0 0 5px grey; 

    border-radius: 10px;

  }

  ::-webkit-scrollbar-thumb {

    background: #006341; 

    border-radius: 10px;

  }

  ::-webkit-scrollbar-thumb:hover {

    background: #b30000; 

  }

  /* END OF Scrollbar */



  .navbar {

    background-color: #006341; 

    transition: background-color 0.3s ease; 

  }

  .navbar.blurred {

    background-color: transparent; /* aalisin niya yung background color */

    backdrop-filter: blur(20px); /* then eto papalit, blur effect */

  }

  .nav-link {

    color: white;

    font-weight: 500;

    transition: color 0.3s ease 

  }

  .nav-link.scrolled {

    color: #000000;

    font-weight: 500;

  }

  .nav-link.scrolled:hover {

    color: #006341; 

    font-weight: 500;

  }

  #mugIcon {

    color: white;

    transition: color 0.3s ease; /* Smooth transition effect for icon color */

  }



  #mugIcon.scrolled {

    color: #000000; /* Change icon color when scrolled */

  }

  #fruitimage {

    max-width: 100%;

    max-height: 300px; /* Adjust the height as needed */

}

</style>

<!--Navbar-->

<nav class="navbar navbar-expand-lg shadow-lg sticky-top" id="navbar">

  <div class="container-sm d-flex justify-content-between" style="width: 100%">



    <div class="d-flex justify-content-between align-items-center" style="width: 100vw">

      <div>

        <a href="#"> <img src="./img/logo.png" alt="" style="width: 100px" /></a>

      </div>

      <div>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent">

          <i class="fa-solid fa-mug-hot" id="mugIcon"></i>

        </button>

      </div>

    </div>



    <div class="collapse navbar-collapse container-fluid" id="navbarSupportedContent" style="width: 30vw">

      <ul class="navbar-nav mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link " aria-current="page" href="#">

            Home

          </a>

        </li>

        <li class="nav-item">

          <a class="nav-link  " href="#content">

            Product

          </a>

        </li>

        <li class="nav-item">

          <a class="nav-link " href="cart.html">

            Cart

          </a>

        </li>

      </ul>

    </div>



  </div>

</nav>

<!--End ti Navbar -->



<!-- MODAL ADD ITEMS -->

<div id="modalContainer"></div>

<!-- END MODAL ADD ITEMSSSSSSSS -->





<!--Banner-->

<div>

  <div class="position-relative">

    <img

      src="./img/banner.jpg"

      class="w-100 img-fluid"

      style="

        height: 50vh;

        object-fit: cover;

        filter: blur(2px);

        filter: saturate(2);

      "

    />

    <section

      class="position-absolute top-50 start-50 translate-middle text-center text-white"

    >

      <h1 class="text-white h1">Starbucks</h1>

      <p class="lead fst-italic h4">

        <i class="fa-solid fa-quote-left"></i> Find Your Perfect Sip at

        Starbucks! <i class="fa-solid fa-quote-right"></i>

      </p>

      <button class="btn text-white shadow" style="background-color: #006341; transition: background-color 0.3s;"

              onmouseover="this.style.backgroundColor='#004f2d'"

              onmouseout="this.style.backgroundColor='#006341'">



        <a href="#content" style="text-decoration: none; color: white;">

          <i class="fa-solid fa-mug-hot"></i> Order Now

        </a>



      </button>

    </section>

  </div>

</div>

<!--End Banner-->



<!---Carousel-->



<div class="container-sm mt-5 my-5 text-center">

    <div class="row">

        <div class="col-md-4"></div>

        <div class="col-sm-12 col-md-4 mx-auto">

            <img src="img/img1.png" alt="" class="starbucks img-fluid" style="width: 300px; height: 400px; filter: drop-shadow(11px 13px 9px #000000); 

        -webkit-filter: drop-shadow(11px 13px 9px #000000); -moz-filter: drop-shadow(11px 13px 9px #000000);" />

        </div>

        <div class="col-md-4"></div>

    </div>

</div>



<br>



<div class="container mt-5">

  <div class="row">



    <div class="col-md-3">

    </div>



    <div class="col-md-6 my-5">

      <div class="thumb d-flex justify-content-center " >

        <a href="home.html#content">

          <img id="bottom" src="img/thumb1.png" onmouseover="imgSlider('img/img1.png');" />

        </a>

        <a href="home.html#content">

          <img src="img/thumb2.png" onmouseover="imgSlider('img/img2.png');" />

        </a>

        <a href="home.html#content">

          <img src="img/thumb3.png" onmouseover="imgSlider('img/img3.png');" />

        </a>

        <a href="home.html#content">

          <img src="img/thumb4.png" onmouseover="imgSlider('img/img4.png');" />

        </a>



      </div>

    </div>



    <div class="col-md-2">

    </div>



  </div>

</div>

<!--End Carousel-->



<hr class="container-sm Sborder border-success mt-5 border-2 opacity-50" />



<!--Hero-->

<section class="container-sm">

  <div class="d-flex flex-column align-items-center text-center">

    <img

      src="./img/hero.png"

      style="width: 200px; height: 45px"

      alt=""

      class="mt-5 mb-3 img-fluid"

      srcset=""

    />

    <p class="w-75 lead text-secondary fst-italic">

      Starbucks is more than just a coffee shop; it's a community hub where

      people connect over delicious drinks and meaningful moments. With our

      expertly crafted coffees, teas, and snacks, every visit is an

      opportunity to treat yourself to quality and comfort. From our iconic

      lattes to seasonal favorites, there's something for every palate. Join

      us at Starbucks and let's make every sip count.

    </p>

    <!-- <a class="nav-link" data-bs-toggle="modal" data-bs-target="#addProduct"> 

    <button class="btn btn-outline-success" >Add Product</button>

    </a> -->

  </div>

</section>

<!-- End Hero-->



<hr class="container-sm Sborder border-success mt-5 border-2 opacity-50" />



<section class="mt-5">

  <div class="container-sm">

    <div class="row justify-content-center">

      <div class="col-12 text-center">

        <h1 class="fst-italic">Our Products</h1>

      </div>

    </div>

    <div

      class=" w-100"

      id="content"

    ></div>

  </div>

</section>





<!---Footer-->

<footer class="mt-5 text-white p-3" style="background-color: #006341;">

  <div class="container-sm d-flex justify-content-between align-items-center">

    <div class="">

      <h4>AI Tech</h4>

      <h5>CCSIT 210</h5>

      <p>BSIT-3A</p>

      <p>Worksheet 5.5 Database Driven JQuery Web-based Shop</p>

      <p>Submitted to: Sir. Donn Genita </p>

      <ul>

        <li>Dran Leynard Gamoso</li>

      </ul>

    </div>

    <div class="">

      <div>

        <img src="./img/top.png" style=" width: 50px; height: 50px;" alt="">

      </div>

      <div>

        <p class="fst-bold">&copy; 2024; J&D</p>



      </div>

    </div>

  </div>

</footer>

 <!---End Footer-->



  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script type="text/javascript">

    //For navbar

    window.onscroll = function () { scrollFunction() };



    function scrollFunction() {

      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {

        document.getElementById("navbar").classList.add("blurred");

        const navLinks = document.querySelectorAll(".nav-link");

        navLinks.forEach(link => link.classList.add("scrolled"));

        document.getElementById("mugIcon").classList.add("scrolled"); // Add scrolled class to the icon

      } else {

        document.getElementById("navbar").classList.remove("blurred");

        const navLinks = document.querySelectorAll(".nav-link");

        navLinks.forEach(link => link.classList.remove("scrolled"));

        document.getElementById("mugIcon").classList.remove("scrolled"); // Remove scrolled class from the icon

      }

    }

    //end of function for navbarrr



    // For carousel na nag chachange image

    function imgSlider(anything){

      document.querySelector('.starbucks').src = anything;

    }



    alertify.set('notifier', 'position', 'top-right');

    alertify.set('notifier', 'delay', 5);





 /*   document.addEventListener("DOMContentLoaded", function() {

        var customerID = sessionStorage.getItem('customerID');

    

        if (customerID) {

          document.getElementById('customerID').innerText = 'Customer ID: ' + customerID;

        } else {

            console.log('Customer ID not found in sessionStorage'); 

        }

    });

  */





    // para sa modal add product

  //  $(document).ready(function () {

    window.onload = function (){

      $('#modalContainer').load('modal.html');



      $('#total').hide()

      $(".addtocart").click(function () {



          var productId = $(this).data("product-id");

          var productName = $(this).data("product-name");

          var productImage = $(this).data("product-image");

          var productDetail = $(this).data("product-detail");

          var productPrice = $(this).data("product-price");



          //ayaw magpakita yung picture sa modal 

          console.log("Product Image URL:", productImage);

          console.log("Product ID:", productId);

          console.log("Product Name:", productName);

          console.log("Product Image:", productImage);

          console.log("Product Detail:", productDetail);

          console.log("Product Price:", productPrice);



          $("#modalProduct #fruitname").text(productName);

          $("#modalProduct #fruitprice").text("Php " + productPrice);

          $("#modalProduct #fruitdetail").text(productDetail);

          $("#modalProduct #fruitimage").attr("src", "/3rdyr/starbuckz/products/" + productImage); //kelangan pala yunf directory lols my ghad sayang 30 mins



          //FUnction for Increment Button on MOdal product

          $("#increment").click(function () {

              let quantity = parseInt($("#quantity").val());

              quantity += 1; 

              $("#quantity").val(quantity); 

              $('#total').show();

              $('#total').val(productPrice * quantity); 

          });



          //FUnction for Decrement Button on MOdal product

          $("#decrement").click(function () {

              let quantity = parseInt($("#quantity").val());

              if (quantity > 0) {

                  quantity -= 1; 

                  $("#quantity").val(quantity); 

                  $('#total').show();

                  $('#total').val(productPrice * quantity); 

              }

          });



          $('#close').click(function(){

            $('#quantity').val(0);

            $('#total').hide()



            //mahirap na bug requires modern solution reload para di mag double yung Qt sa modal

            setTimeout(function () {

                location.reload();

            }, 10);

          });



          $('#buy').click(function () {

              alertify.success('Item added to cart!');



              var quantity = parseInt($("#quantity").val());

              var total = productPrice * quantity;



              var cartItem = {

                  productId: productId, // Use the productId variable

                  productName: productName,

                  productPrice: productPrice,

                  quantity: quantity,

                  total: total

              };



              // Store the cart item in localStorage

              var cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];

              cartItems.push(cartItem);

              localStorage.setItem("cartItems", JSON.stringify(cartItems));



              // Clear the quantity after adding to cart

              $("#quantity").val(0);



              // Reload the page after a delay (e.g., 2000 milliseconds = 2 seconds)

              setTimeout(function () {

                  location.reload();

              }, 2000);

          });





          // Function to display cart items

          function displayCartItems() {

                var cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];

                var cartOutput = "Product NametQuantitytTotaln";

          }



          // Display cart items when the page loads

          displayCartItems();





      });

    }







    function loadProducts() { 

        $.ajax({

            url: 'fetchProduct.php',

            success: function (data) { 

                if (data.trim() === '') {

                    $('#content').append('<div><p>NO PRODUCTS AVAILABLE</p></div>');

                } else {

                    $('#content').append(data);

                }

            },

            error: function () {

                $('#content').append('<div><p>Error loading products. Please try again later.</p></div>');

            }

        });

    }



    loadProducts();



  </script>

I hosted it online sometimes the modal has content but also sometimes it doesn’t,i also tried adding a console.log to determine if the modal is clicked but it doesn’t work

Prefix increament in while loop [duplicate]

Node.js REPL

let i = 0;
while(i < 10){
    console.log(i);
    ++i;
}

The ouput of the above code block prints 10 along with numbers from 0 to 9. Why the following behaviour?
(Sorry for any grammatical mistakes, English is not first language)

I was expecting the output to be from 0 to 9.

Edit Fields are not replacing old values?

Why is my edit function failing to save the new text and date values? Currently, the function displays the edit modal but fails to submit updated text if it’s blank. Despite updating the object in the array and rendering it in the DOM, it seems to perceive the new values as blank, leading to the failure in saving them. What might be causing this issue?

function editTask(id) {
  let taskIndex = taskArray.findIndex((task) => task.id === id);
  let taskElement = document.querySelector(`.task-to-do[data-id="${id}"]`);

  let Editedmodal = document.querySelector("#edit-modal");
  let EditedInputTask = document.querySelector("#edit-task");
  let EditedInputDate = document.querySelector("#edit-duedate");

  EditedObject = {
    EditTask: taskArray[taskIndex].task,
    Editdate: taskArray[taskIndex].date
  }



  Editedmodal.style.display = "grid";
  /*Submit Edited task Form*/
  EditedsubmitForm.addEventListener("click", (e) => {

    EditedInputTask.value = EditedObject.editTask;
    EditedInputDate.value = EditedObject.Editdate;
    /*Form Validaion*/
    if (!EditedInputTask.value) {
      EditedInputNoTask.style.display = "block";
      EditedInputTask.style.marginTop = "-1em";
      timeout = setTimeout(() => {
        EditedInputNoTask.style.display = "none";
        EditedInputTask.style.marginTop = "0";
      }, 3000);
    }

    if (!EditedInputDate.value) {
      EditedInputNoDate.style.display = "block";
      EditedInputDate.style.marginTop = "-1em";

      timeout = setTimeout(() => {
        EditedInputNoDate.style.display = "none";
        EditedInputDate.style.marginTop = "0";
      }, 3000);
    } else {
      Editedmodal.style.display = "none";
      EditedInputTask.value = "";
      EditedInputDate.value = "";
    }

    taskArray[taskIndex].task = EditedInputTask.value;
    taskArray[taskIndex].date = EditedInputDate.value;


    taskElement.querySelector("#list-item-date").textContent = `Due: ${taskArray[taskIndex].date}`;
    taskElement.querySelector("#list-item-task").textContent = taskArray[taskIndex].task;
    
    renderTask();
    storeTaskArrayLocally();
    

    console.log(EditedObject)

  });

Error while trying to use my Vue Repository to Vercel

it run fine in localhost, butI get the following errors on build:

picture

how to fix this problem so i can put my repo on vercel , i try different method but still don’t work and the SearchInput.vue in App Vue folder is work properly but it shown error