javascript – Page 1083 – Blancer.com Tutorials and projects

How do we implement round half up, round half down and round half even functions

In C# we have built-in options available for doing round-half-up, round-half-down nad round-half-even calculations.

Math.Round(d, Convert.ToInt32(decimalPlaces), MidpointRounding.AwayFromZero);

But the same way, I want to implement the logic in JavaScript.

Can anyone please help me on this, how could we implement/create a logic for the round-half-up/down/even in JavaScript?

How can I adapt and active the Sidebar menu fomantic-ui?

How can I adapt the Sidebar fomantic-ui?

My Sidebar fomantic-ui not active.

If i click menu button it’s not active.

I’m trying to create a Django . HTML design from the navigation bar made by hand and the rest of the content to design based on ready-made styles – fomantic-ui.com.

I would like, if possible, to try to somehow integrate the menu bar into the style system. I’m still a beginner. I mainly do logic in Django, and for the interface, blocks are something similar to fomantic-ui.com – ready-made style systems.

{% load static %}
<!DOCTYPE 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>Sidebar Menu | Side Navigation Bar</title>
    <!-- CSS -->
    <!-- You MUST include jQuery 3.4+ before Fomantic -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <div class="ui top attached demo menu">
      <a class="item">
        <i class="sidebar icon"></i>
        Menu
      </a>
    </div>
    <div class="ui bottom attached segment pushable">
      <div class="ui inverted labeled icon left inline vertical sidebar menu" style="">
        <a class="item">
          <i class="home icon"></i>
          Home
        </a>
        <a class="item">
          <i class="block layout icon"></i>
          Topics
        </a>
        <a class="item">
          <i class="smile icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="calendar icon"></i>
          History
        </a>
      </div>
      <div class="pusher">
        <div class="ui basic segment">
          <h3 class="ui header">Application Content</h3>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
    <script>
      // using context
      $('.context.example .ui.sidebar')
        .sidebar({
          context: $('.context.example .bottom.segment')
        })
        .sidebar('attach events', '.context.example .menu .item')
      ;
    </script>

    <script src="{% static "script/script.js" %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
  </body>
</html>

https://fomantic-ui.com/modules/sidebar.html#/examples

How to combine two array options in one field select dropdown

I want to combine two array object options in one field use select in reactJS. And this is my code:

const DayOptions = [
{
  value: 'day1',
  label: 'Day 1'
},
{
  value: 'day 2',
  label: 'Day 2'
},
 
etc...
];
 
const TimeOptions = [
{
  value: '10:00AM',
  label: '10:00 AM'
},
{
  value: '10:30AM',
  label: '10:30 AM'
},
 
etc...
  ];
 
 
 const getDataList = () => {
    const dataArr = []
    DayOptions.map((item, index) => {
      const newData = {
        value: item.value,
        label: item.label
      }
      dataArr.push(newData)
    });
    TimeOptions.map((item, index) => {
      const newData = {
        value: item.value,
        label: item.label
      }
      dataArr.push(newData)
    });
    return dataArr;
  };
 
return (
 <Select
  closeMenuOnSelect={true}
  options={getDataList()}
 />
)

But, this code only works to select one array (only day or time) and does not combine two arrays (day and time) like the image below that I want. So what should i do? Thanks.

How to hide specific product price through out all prebuilt wix store pages?

I need to hide the product price for specific product and also need to create custom configuration for that
for example: if I select no for that product so the product price will be hide for that specific product

here I share the screenshoot

enter image description here

I tried to save the product price in another cms and remove it from the main collection but it didn’t help at all
I expect that any guidence about how to hide specific product price with configuration

after setting up Firebase functions and configuring app.use(cors({ origin: true })), a CORS error still occurs

I deployed the frontend with Firebase Hosting, and my project name is ‘nulligpt.’ In the function, it says to make requests to the endpoint https://us-central1-nulligpt.cloudfunctions.net/api. However, I encounter a CORS error when making the requests. It worked fine when running locally, so I don’t understand what’s happening.

Access to fetch at 'https://us-central1-nulligpt.cloudfunctions.net/api' from origin 'https://nulligpt.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Understand this error

const functions = require('firebase-functions');
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const OpenAI = require('openai');

const app = express();


app.use(cors({ origin: true }));
app.use(bodyParser.json());

const OPENAI_API_KEY = 'sk-';
const client = new OpenAI({
  apiKey: OPENAI_API_KEY,
});


app.post('/api', async (req, res) => {
  const { name } = req.body;

  if (!name) {
    console.error('Name is missing from request body');
    return res.status(400).json({ error: 'Name is required' });
  }

  try {
    console.log(`Request received with name: ${name}`);
    
    const response = await client.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: `Translate this name to Korean: ${name}` }],
    });

    console.log('OpenAI API response:', response);

    const translatedName = response.choices[0].message.content.trim();
    console.log(`Translated name: ${translatedName}`);

    return res.json({ translatedName });
  } catch (error) {
    console.error('Error communicating with OpenAI:', error.response?.data || error.message || error);
    return res.status(500).json({ error: 'Failed to translate name' });
  }
});

exports.api = functions.https.onRequest(app);

                const response = await fetch('https://us-central1-nulligpt.cloudfunctions.net/api', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                    },
                    body: JSON.stringify({ name: name }),

Docker + Nginx + Laravel = File not found

I can’t find the reason why my page can’t find any PHP file, it shows “file not found” when I visit the page http://dev.mywebsite:8080. I have production and staging containers running on server, production works fine, I have issues only with everything what is prefixed with dev. This is my setup, nginx.conf file:

server {
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;

    server_name app.mywebsite.com www.app.mywebsite.com;

    ssl_certificate /etc/nginx/ssl/live/app.roomradius.com/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/live/app.roomradius.com/privkey.pem;

    root /var/www/public;
    index index.php index.html;

    if ($host ~* ^www.(.*)) {
        set $host_without_www $1;
        rewrite ^/(.*)$ $scheme://$host_without_www/$1 permanent;
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }


    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }


    location ~ .php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+.php)(/.+)$;
        fastcgi_pass nebo_laravel:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /.ht {
        deny all;
    }
}

server {
    listen 8080 default_server;
    listen [::]:8080 default_server;
    root /var/dev_www/public;
    index index.php index.html;

    server_name dev.mywebsite.com www.dev.mywebsite.com;

    if ($host ~* ^www.(.*)) {
        set $host_without_www $1;
        rewrite ^/(.*)$ $scheme://$host_without_www/$1 permanent;
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+.php)(/.+)$;
        fastcgi_pass dev_nebo_laravel:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /.ht {
        deny all;
    }
}

This is my production docker-compose:

services:
  app:
    image: myimage/image_laravel:latest
    container_name: nebo_laravel
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: app
      SERVICE_TAGS: prod
      APP_NAME: ${APP_NAME}
      APP_URL: ${APP_URL}
      DB_DATABASE: ${DB_DATABASE}
      DB_CONNECTION: ${DB_CONNECTION}
      DB_HOST: ${DB_HOST}
      DB_PORT: ${DB_PORT}
      DB_USERNAME: ${DB_USERNAME}
      DB_PASSWORD: ${DB_PASSWORD}
      APP_ENV: ${APP_ENV}
      APP_KEY: ${APP_KEY}
      APP_DEBUG: ${APP_DEBUG}
      SESSION_DRIVER: ${SESSION_DRIVER}
      QUEUE_CONNECTION: ${QUEUE_CONNECTION}
    volumes:
      - app_data:/var/www
      - app_storage:/var/www/storage
    ports:
      - "9000:9000"
    depends_on:
      - db
    networks:
      - app-network

  certbot:
    image: certbot/certbot
    container_name: certbot
    volumes:
      - ./certbot/www/:/var/www/certbot/:rw
      - ./certbot/conf/:/etc/letsencrypt/:rw
    networks:
      - app-network

  db:
    image: mysql:8.0
    container_name: nebo_db
    restart: unless-stopped
    tty: true
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
    volumes:
      - dbdata:/var/lib/mysql
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  dbdata:
    driver: local
  app_data:
    driver: local
  app_storage:
    driver: local

My dev (staging) docker-compose:

services:
  app:
    image: myimagedev/myimage:latest
    container_name: dev_nebo_laravel
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: app
      SERVICE_TAGS: prod
      APP_NAME: ${APP_NAME}
      APP_URL: ${APP_URL}
      DB_DATABASE: ${DB_DATABASE}
      DB_CONNECTION: ${DB_CONNECTION}
      DB_HOST: ${DB_HOST}
      DB_PORT: ${DB_PORT}
      DB_USERNAME: ${DB_USERNAME}
      DB_PASSWORD: ${DB_PASSWORD}
      APP_ENV: ${APP_ENV}
      APP_KEY: ${APP_KEY}
      APP_DEBUG: ${APP_DEBUG}
      SESSION_DRIVER: ${SESSION_DRIVER}
      QUEUE_CONNECTION: ${QUEUE_CONNECTION}
    volumes:
      - dev_app_data:/var/www
      - dev_app_storage:/var/www/storage
    ports:
      - "9001:9000"
    depends_on:
      - db
    networks:
      - app-network

  certbot:
    image: certbot/certbot
    container_name: dev_certbot
    volumes:
      - ./certbot/dev_www/:/var/www/certbot/:rw
      - ./certbot/dev_conf/:/etc/letsencrypt/:rw
    networks:
      - app-network

  db:
    image: mysql:8.0
    container_name: dev_nebo_db
    restart: unless-stopped
    tty: true
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
    volumes:
      - dev_dbdata:/var/lib/mysql
    ports:
      - "3307:3307"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  dev_dbdata:
    driver: local
  dev_app_data:
    driver: local
  dev_app_storage:
    driver: local

This is my nginx docker compose:

services:
  webserver:
    image: nginx:alpine
    container_name: nebo_webserver
    restart: unless-stopped
    tty: true
    ports:
      - "80:80"
      - "443:443"
      - "8080:8080"
    volumes:
      # Production volumes
      - deploy_prod_app_storage:/var/www/storage
      - deploy_prod_app_data:/var/www
      # Development volumes
      - deploy_dev_dev_app_storage:/var/dev_www/storage
      - deploy_dev_dev_app_data:/var/dev_www
      # Nginx configuration
      - /etc/nginx/conf.d/:/etc/nginx/conf.d/
      # Certbot mappings for production
      - ../deploy_prod/certbot/www:/var/www/certbot/:ro
      - ../deploy_prod/certbot/conf/:/etc/nginx/ssl/:ro
      # Certbot mappings for development
      - ../deploy_dev/certbot/dev_www:/var/www/certbot_dev/:rw
      - ../deploy_dev/certbot/dev_conf:/etc/nginx/ssl_dev/:rw
      # Pass
      - /etc/nginx/.htpasswd:/etc/nginx/.htpasswd
    networks:
      - deploy_prod_app-network
      - deploy_dev_app-network

networks:
  deploy_prod_app-network:
    external: true
  deploy_dev_app-network:
    external: true

volumes:
  deploy_prod_app_data:
    external: true
  deploy_prod_app_storage:
    external: true
  deploy_dev_dev_app_data:
    external: true
  deploy_dev_dev_app_storage:
    external: true

The Laravel app is running, files are inside nginx dev_www folder, when I add there test.html and visit http://dev.mywebsite.com/test.html it shows that file, but when I try to add any PHP file or hit index.php I get “file not found”.

What I am missing here?

Is there a less obtuse way to set a max date using template literals?

I am using this code to generate a max date of +1 month with template literals in an HTML date input:

`<input type="date" max="${new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0]}" required>`

Are there any simpler ways to achieve this?

Writing reservations to FullCalendar from php file

I need some advice. I have created a booking calendar using FullCalendar together with a booking form. I was able to send the data from the form to the database but the booking is not transferred to the calendar.

I have created this php file which takes the start and end date of the booking from the database (Calendar.php):

<?php
require_once '../system/access.php';

$sql = "SELECT date_start, date_end FROM booking";
$result = $conn->query($sql);

$events = array();

if ($result) {
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $events[] = array(
                'start' => $row["date_start"],
                'end' => $row["date_end"]
            );
        }
    }
} else {
    
    error_log("Database error" . $conn->error);
}

$conn->close();


echo json_encode($events);
?>

But now I’m stuck and I don’t know how to send this data to the calendar so that the booking shows up there. I’ve been told that I need to use JS to call the Calendar.php file using Ajax but I don’t know how. I was also told that I need to make an array of objects from the JS object and then somehow include that in the calendar code.

Here is the code for FullCalendar (Calendar.js):

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'cs',
    navLinks: true,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    timeFormat: 'h(:mm)',
    showNonCurrentDates: false,
    buttonText: {
      today: 'Dnes',
      month: 'Měsíc',
      week: 'Týden',
      day: 'Den',
      list: 'Seznam'
    },
    titleFormat: {
      month: 'short',
      year: 'numeric',
    },
    slotLabelFormat: {
      hour: 'numeric',
      minute: '2-digit',
      omitZeroMinute: false,
      meridiem: false,
    },
    eventTimeFormat: {
      hour: 'numeric',
      minute: '2-digit',
      meridiem: false
    },
    allDayText: 'Celý den',
  });
  calendar.render();

});

Any advice or techniques would be greatly appreciated so that I can solve this problem. Thank you 😉

I haven’t tried anything because I don’t know how that’s why I’m creating this post. I expect that once I create a reservation using the form the reservation will show up in the calendar.

How to use skeleton in react?

i am using nextui in my react project. in one section of my project i get the products from server with fetch and use ProductCard component to show product infos in dom(every product card is a component in app.jsx) and want use nextui skeleton component before get products and ahow in dom. Now, am i use skeleton in ProductCard component or in app.jsx before fetch?

for example:

App.jsx:

{products.length?
<Skeleton>
   //codes
</Skeleton>
:
products.map(product=><ProductCard {...product}/>)
}

Is it true and clean?

I dont tried beacause iam not sure is it true?
But i know it work.

How to make these two lists always have the same width?

I have a React component that consists of two lists that sit side by side:

import { useState } from 'react';
import { Col } from '@/components/Col';
import { Heading } from '@/components/Heading';
import { Row } from '@/components/Row';
import { Button } from '@/components/Button';
import {
  IconArrowLeft,
  IconArrowRight,
  IconArrowUp,
  IconArrowDown,
} from '@tabler/icons-react';
import { cn } from '@/utils';

type ListEditorProps = {
  keys: string[];
  className?: string;
  onChange: (activeKeys: string[]) => void;
};

export function ListEditor({ keys, className, onChange }: ListEditorProps) {
  const [inactiveItems, setInactiveItems] = useState<string[]>(keys);
  const [activeItems, setActiveItems] = useState<string[]>([]);
  const [pickedInactiveItems, setPickedInactiveItems] = useState<string[]>([]);
  const [pickedActiveItems, setPickedActiveItems] = useState<string[]>([]);

  const handleAllItemClick = (key: string) => {
    setPickedInactiveItems((prev) =>
      prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
    );
  };

  const handlePickedItemClick = (key: string) => {
    setPickedActiveItems((prev) =>
      prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
    );
  };

  const updateActiveItems = (newActiveItems: string[]) => {
    setActiveItems(newActiveItems);
    onChange(newActiveItems);
  };

  const updateAllItems = (
    newActiveItems: string[],
    newInactiveItems: string[],
  ) => {
    setActiveItems(newActiveItems);
    setInactiveItems(newInactiveItems);
    onChange(newActiveItems);
  };

  const handleAddItems = () => {
    const newActiveItems = [...activeItems, ...pickedInactiveItems];
    const remainingInactiveItems = inactiveItems.filter(
      (item) => !pickedInactiveItems.includes(item),
    );

    updateAllItems(newActiveItems, remainingInactiveItems);
    setPickedInactiveItems([]);
  };

  const handleRemoveItems = () => {
    const remainingActiveItems = activeItems.filter(
      (item) => !pickedActiveItems.includes(item),
    );
    const newInactiveItems = [...inactiveItems, ...pickedActiveItems];

    updateAllItems(remainingActiveItems, newInactiveItems);
    setPickedActiveItems([]);
  };

  const handleMoveUp = () => {
    const newActiveItems = [...activeItems];
    const sortedPickedItems = [...pickedActiveItems].sort(
      (a, b) => newActiveItems.indexOf(a) - newActiveItems.indexOf(b),
    );

    sortedPickedItems.forEach((pickedItem) => {
      const index = newActiveItems.indexOf(pickedItem);
      if (index > 0) {
        [newActiveItems[index - 1], newActiveItems[index]] = [
          newActiveItems[index],
          newActiveItems[index - 1],
        ];
      }
    });
    updateActiveItems(newActiveItems);
  };

  const handleMoveDown = () => {
    const newActiveItems = [...activeItems];
    const sortedPickedItems = [...pickedActiveItems].sort(
      (a, b) => newActiveItems.indexOf(b) - newActiveItems.indexOf(a),
    );

    sortedPickedItems.forEach((pickedItem) => {
      const index = newActiveItems.indexOf(pickedItem);
      if (index < newActiveItems.length - 1) {
        [newActiveItems[index + 1], newActiveItems[index]] = [
          newActiveItems[index],
          newActiveItems[index + 1],
        ];
      }
    });
    updateActiveItems(newActiveItems);
  };

  const renderList = (
    items: string[],
    pickedItems: string[],
    onItemClick: (key: string) => void,
  ) => (
    <ul className="h-40 w-full overflow-y-auto rounded border border-border p-2 text-sm">
      {items.map((item) => (
        <li
          key={item}
          onClick={() => onItemClick(item)}
          className={cn('cursor-pointer px-2 py-1', {
            'bg-muted text-white': pickedItems.includes(item),
          })}
        >
          {item}
        </li>
      ))}
    </ul>
  );

  const renderEditButtons = () => (
    <>
      {/* The margin offsets the headings */}
      <Col fluid className="self-center md:-mt-5">
        <Button
          isFull
          onClick={handleAddItems}
          disabled={pickedInactiveItems.length === 0}
        >
          <IconArrowRight size={20} /> Add
        </Button>
        <Button
          variant="danger"
          isFull
          onClick={handleRemoveItems}
          disabled={pickedActiveItems.length === 0}
        >
          <IconArrowLeft size={20} /> Remove
        </Button>
      </Col>
    </>
  );

  const renderMoveButtons = () => (
    <Row align="center">
      <Button
        variant="secondary"
        onClick={handleMoveUp}
        disabled={
          pickedActiveItems.length === 0 ||
          activeItems.indexOf(pickedActiveItems[0]) === 0
        }
      >
        <IconArrowUp size={20} /> Move Up
      </Button>
      <Button
        variant="secondary"
        onClick={handleMoveDown}
        disabled={
          pickedActiveItems.length === 0 ||
          activeItems.indexOf(
            pickedActiveItems[pickedActiveItems.length - 1],
          ) ===
            activeItems.length - 1
        }
      >
        <IconArrowDown size={20} /> Move Down
      </Button>
    </Row>
  );

  return (
    <Row gap="lg" className={className}>
      <Col>
        <Heading size="sm">Inactive</Heading>
        {renderList(inactiveItems, pickedInactiveItems, handleAllItemClick)}
      </Col>
      {renderEditButtons()}
      <Col>
        <Heading size="sm">Active</Heading>
        {renderList(activeItems, pickedActiveItems, handlePickedItemClick)}
        {renderMoveButtons()}
      </Col>
    </Row>
  );
}

Sometimes the lists will try to fit the content, causing them to have different widths:

How can I force them to always have the same width?

DUCKDB – WASM Scalar UDF with Utf-8 return type returning null values always

In my project, I am utilizing duckdb wasm. I encountered a need for a custom user-defined function (UDF), so I created one with a return type of UTF-8. However, it consistently returns u0000.


 // Test udf
    function stringTest(a) {
      try {
        return a + "hello";
      }catch(ex){
        console.log(ex)
      }
    }

    conn.createScalarFunction('stringTest', new arrow.Utf8, stringTest);
Code for element print log

    const result = await conn.query(`SELECT * FROM '${tableName}'`);
        console.log('result: ', result);
        // Get columns and rows
        const columns = result.schema.fields.map(field => field.name);
        let rows = result.toArray();
      
        
        console.log('columns: ', columns);
        
      
        rows.forEach(item => console.log(item));

Image of dubugged value in browser

https://i.sstatic.net/6c9CZGBM.png

There are many use cases involving string return types. Can you please assist me with this problem?

How can I adapt the menu bar and content using ready-made styles?

I tried to adapt the menu bar and content using ready-made styles.

And then I try to add some content from a known set of ready-made styles.

I try to add several elements
but they overlap or remove each other’s style or elements.

How can I make the navigation bar separately independent and be able to add content elements from a known set of ready-made styles without damaging the navigation bar and themselves?

How can I adapt the menu bar and content using ready-made styles?

I would like, if possible, to try to somehow integrate the menu bar into the style system. I’m still a beginner.

I mainly do logic in Django, and for the interface, blocks are something similar to fomantic-ui.com – ready-made style systems.

Now I’m trying to add a menu bar different from the style (“fomantic-ui.com”) – but it doesn’t work the same as without the style system (“fomantic-ui.com”).
It overlaps the content and the style seems to be mixed.

I’m trying to create a Django . HTML design from the navigation bar made by hand and the rest of the content to design based on ready-made styles – fomantic-ui.com.

index.html

{% load static %}
<!DOCTYPE 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>Sidebar Menu | Side Navigation Bar</title>
    <!-- CSS -->
    <link rel="stylesheet" href="{% static "css/style.css" %}" />
    <!-- Boxicons CSS -->
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
    <!-- You MUST include jQuery 3.4+ before Fomantic -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <nav>
      <div class="logo">
        <i class="bx bx-menu menu-icon"></i>
        <span class="logo-name">InfoEco</span>
      </div>
      <div class="sidebar">
        <div class="logo">
          <i class="bx bx-menu menu-icon"></i>
          <span class="logo-name">InfoEco</span>
        </div>
        <div class="sidebar-content">
          <ul class="lists">
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-home-alt icon"></i>
                <span class="link">Home</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-bar-chart-alt-2 icon"></i>
                <span class="link">Label Nav Menu 1</span>
              </a>
              <div class="sub-menu">
                <a href="#">Label Nav Sub Menu 1</a>
                <a href="#">Label Nav Sub Menu 2</a>
                <a href="#">Label Nav Sub Menu 3</a>
                <a href="#">Label Nav Sub Menu 4</a>
              </div>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-bell icon"></i>
                <span class="link">Label Nav Menu 2</span>
              </a>
              <div class="sub-menu">
                <a href="#">Label Nav Sub Menu 1</a>
                <a href="#">Label Nav Sub Menu 2</a>
              </div>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-heart icon"></i>
                <span class="link">Label Nav Menu 3</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-folder-open icon"></i>
                <span class="link">Label Nav Menu 4</span>
              </a>
            </li>
          </ul>

          <div class="bottom-cotent">
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-cog icon"></i>
                <span class="link">Label Nav Menu 5</span>
              </a>
            </li>
            <li class="list">
              <a href="#" class="nav-link">
                <i class="bx bx-log-out icon"></i>
                <span class="link">Label Nav Menu 6</span>
              </a>
            </li>
          </div>
        </div>
      </div>
    </nav>

    <section class="overlay"></section> 
    
    <div class="ui container">
      <div class="ui grid">
        <div class="four wide column">
          <div class="ui vertical menu">
            <a class="item">
              <h4 class="ui header">Promotions</h4>
              <p>Check out our new promotions</p>
            </a>
            <a class="item">
              <h4 class="ui header">Coupons</h4>
              <p>Check out our collection of coupons</p>
            </a>
            <a class="item">
              <h4 class="ui header">Rebates</h4>
              <p>Visit our rebate forum for information on claiming rebates</p>
            </a>
          </div>
        </div>
        <div class="twelve wide column">content</div>
      </div>
    </div>
    <script src="{% static "script/script.js" %}"></script>
  </body>
</html>

style.css

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100%;
  background: #e3f2fd;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
nav .logo {
  display: flex;
  align-items: center;
  margin: 0 24px;
}
.logo .menu-icon {
  color: #333;
  font-size: 24px;
  margin-right: 14px;
  cursor: pointer;
}
.logo .logo-name {
  color: #333;
  font-size: 22px;
  font-weight: 500;
}
nav .sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100%;
  width: 260px;
  padding: 20px 0;
  background-color: #fff;
  box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}
nav.open .sidebar {
  left: 0;
}
.sidebar .sidebar-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 16px;
}
.sidebar-content .list {
  list-style: none;
}
.list .nav-link {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 14px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.lists .nav-link:hover {
  background: linear-gradient(#dfe4e6, #eff2f4);
}
.nav-link .icon {
  margin-right: 14px;
  font-size: 20px;
  color: #707070;
}
.nav-link .link {
  font-size: 16px;
  color: #707070;
  font-weight: 400;
}
.lists .nav-link:hover .icon,
.lists .nav-link:hover .link {
  color: #4b6a78;
  font-weight: 500;
}
.overlay {
  position: fixed;
  top: 0;
  left: -100%;
  height: 1000vh;
  width: 200%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  background: rgba(0, 0, 0, 0.3);
}
nav.open ~ .overlay {
  opacity: 1;
  left: 260px;
  pointer-events: auto;
}
nav .sidebar .sidebar-content .list .sub-menu {
  margin-left: 5px;
  padding-left: 10px;
  border-left: 1px solid #bbb;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
}
nav .sidebar .sidebar-content .list.active .sub-menu {
  max-height: 500px;
}
nav .sidebar .sidebar-content .list .sub-menu a {
  text-decoration: none;
  display: block;
  padding: 5px;
  margin: 5px 0px;
  font-size: 16px;
  color: #707070;
  font-weight: 400;
  cursor: pointer;
}
nav .sidebar .sidebar-content .list .sub-menu a:hover {
  background: linear-gradient(#dfe4e6, #eff2f4);
  color: #4b6a78;
  font-weight: 500;
}

script.js

const navBar = document.querySelector("nav"),
       menuBtns = document.querySelectorAll(".menu-icon"),
       overlay = document.querySelector(".overlay");

     menuBtns.forEach((menuBtn) => {
       menuBtn.addEventListener("click", () => {
         navBar.classList.toggle("open");
       });
     });

     overlay.addEventListener("click", () => {
       navBar.classList.remove("open");
     });

document.querySelectorAll("nav .sidebar .sidebar-content .list a").forEach(function(list){
  list.addEventListener("click",function(e){
    if(e.target.parentNode.children.length > 1){
      e.target.parentNode.classList.toggle("active");
    }
  });
});

playwright asynchronous work on two pages ts

I have a test written like this trying to create a program on two pages at the same time. Now it doesn’t work as expected and browser awaits for action on first page to start it on the second one, what am I doing wrong?
Can someone help?
The problem was that test worked 27seconds, now after the refactor it takes 29:)
not so experienced with pw

import type { Locator, Page } from '@fe/pw-config'
import { test } from '@fe/pw-config'
import { allure } from 'allure-playwright'
import { constructN } from 'ramda'

import { chooseItemForProgram, clickAddItem, clickAddProgram, clickDeleteProgram, clickEditAddItem, clickEditSave, clickExpandItems, clickOvenType, confirmProgramDelete, deleteItemFromCurrentProgram, fillAddProgramItem, fillProgramNameField, getProgramFromProgramsByName } from '../../utils'
import { addProgramItemTable, addProgramSaveButton, editProgramPopup, itemAddPopUp, noItemsLocator, tooltipDeleteText, tooltipTrigger } from '../../bakery-manage-pageobjects'

import { checkHidden, checkVisible, getLocatorDataTestId, goToPageAndGetToken } from '~/playwright/utils'
import { getOvenTypes, itemDeleteById } from '~/playwright/requests'
import type { OvenTypeDto } from '~/api/generated/oe-wms-bakery'

test('program edit add item from another program test with parallel windows', async ({ browser, page, baseURL }) => {

    const itemId = '1312275664'
    const itemId1 = '1312275668'
    const itemName = 'Пирог осетинский с мясным фаршем Фыдджын, 500 г'
    const itemName1 = 'Пирог осетинский со свежим сыром Уалибах Дабон, 500 г'
    const random = Math.floor(Math.random() * 1000)
    const programName = `автотест${random}`
    const programName1 = `автотест${random + 1}`

    const token = await goToPageAndGetToken(page, `${baseURL}/bakery-manage`)

    const context = await browser.newContext()
    const page1 = await context.newPage()
    const page2 = await context.newPage()
    const ovenTypes = await getOvenTypes(token)
    await Promise.all([
        await goToPageAndGetToken(page1, `${baseURL}/bakery-manage`),
        await goToPageAndGetToken(page2, `${baseURL}/bakery-manage`),
    ])

    await Promise.all([
        clickOvenType(page1, ovenTypes[0].name as string),
        clickOvenType(page2, ovenTypes[0].name as string),
    ])
    async function createProgram(page: Page, programName: string, itemId: string, itemName: string) {
        await clickAddProgram(page)
        await clickAddItem(page)
        await fillAddProgramItem(itemId, page)
        await chooseItemForProgram(page, itemName)
        await checkHidden(itemAddPopUp(page))
        await checkVisible(addProgramItemTable(page).getByText(itemName))
        await fillProgramNameField(page, programName)
        await addProgramSaveButton(page).click()
    }

    await Promise.all([
        createProgram(page1, programName, itemId, itemName),
        createProgram(page2, programName1, itemId1, itemName1),
    ])

    const program = getProgramFromProgramsByName(page1, programName)
    await program.getByTestId('edit-program-button').click()
    await checkVisible(editProgramPopup(page1))
    await clickEditAddItem(page1)
    await fillAddProgramItem(itemId1, page1)
    await chooseItemForProgram(page1, itemName1)
    await tooltipTrigger(page1).hover()
    await checkVisible(tooltipDeleteText(page1, programName1))
    await deleteItemFromCurrentProgram(page1)
    await clickEditSave(page1)
    await checkHidden(editProgramPopup(page1))

    await clickExpandItems(program)
    await Promise.all([
        checkVisible(page1.getByText(itemId)),
        checkVisible(page1.getByText(itemName)),
        checkVisible(page1.getByText(itemId1)),
        checkVisible(page1.getByText(itemName1)),
        checkHidden(noItemsLocator(program)),
    ])

    const program1 = getProgramFromProgramsByName(page2, programName1)

    const testId = await getLocatorDataTestId(program)
    const testId1 = await getLocatorDataTestId(program1)

    await Promise.all([
        clickDeleteProgram(page1, testId),
        confirmProgramDelete(page1, testId),
        clickDeleteProgram(page2, testId1),
        confirmProgramDelete(page2, testId1),
    ])
})

JavaScript is multiplying by 2 instead of adding by 1 [duplicate]

I have a piece of code that has a text with an id, a button with a function to go to JavaScript to add a number every 10 seconds my problem is instead of adding 1 number it multiplies by 2

This is what I tried

function autoclick() {
  var x = Math.floor((Math.random() + 1) + 0, ),
    el = document.getElementById('test'),
    val = parseInt(el.innerHTML, 10);
  el.innerHTML = val + x;
  var t = setInterval(autoclick, 1000);
}

<p id="test">0</p>
<button onclick="autoclick()">autoclick</button>

I’m able to fetch data from the movie data base , from front end getting error accessing from backend [closed]

I’am unable to connect to the movie database from backend even though my api url and the api-key mentioned as given in TMDB api reference site as shown in image below

I’m able to get data from TMDB in front end though

TMDB api reference page

Can anyone explain why I’m unable to connect to TMDB at backend but can do in front end.