javascript – Page 4228 – Blancer.com Tutorials and projects

How to stop a fixed footer from over lapping content on a drop down menu

I’m very new to all of this.
so, I have a side dropdown menu, that is supposed to overlap body content, but when I set any element in the main to position:fixed, the element begins to overlap the drop down, I successfully removed position from other elements except the bottom nav, which I need fixed to the bottom, so it won’t scroll with the body, but then it overlaps the dropdown.
Any idea how to resolve this ?

Html



  <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>over lapping probs.</title>

  </head>

  <body>

    <nav>

      <div class="logo">

        <i class="bx bx-menu menu-icon"></i>

     <span class="logo-name">top nav</span> </div>

      <div class="sidebar">

        <div class="logo">

        </div>

        <div class="sidebar-content">

            <p class="sideheadings">Menu</p>

          <ul class="lists">

            <li class="list">

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

                <i class="bx bx-home-alt icon"></i>

                <span class="link">Dashboard</span>

              </a>

            </li>

            <li class="list">

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

                <i class="bx bx-bar-chart-alt-2 icon"></i>

                <span class="link">Services</span>

              </a>

            </li>

          </ul>

          <div class="bottom-content">

             <p class="sideheadings">Others</p>

            <li class="list">

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

                <i class="bx bx-cog icon"></i>

              <span class="link">Settings</span>

              </a>

            </li>

            <li class="list">

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

             <i class="bx bx-log-out icon"></i>

               <span class="link">Logout</span>

              </a>

            </li>

          </div>

        </div>

        <div class="©sidebar"><p class="©"><span class="num">©2023</span>over lap inc</p>

        </div>

    </nav>

    <section class="overlay"></section>

    <div class="main">

    <p>

        R<br>

        A<br>

        N<br>

        D<br>

        O<br>

        M<br>

        <br>

        C<br>

        O<br>

        N<br>

        T<br>

        E<br>

        N<br>

        T<br>

        <br>

        T<br>

        O<br>

        <br>

        S<br>

        C<br>

        R<br>

        O<br>

        L<br>

        L<br>

        <br>

        P<br>

        A<br>

        G<br>

        E<br>

    </p>

    </div>

     <section class="footermenu">

            <div class="footer">

                <p>[FOOTER MENU CONTENT]-OVERLAPS</p>

                </div>

    </section>

Css



* {

  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: 45px;

  width: 100%;

  display: flex;

  align-items: center;

  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); 

  background: #4070f4;

  

}

nav .logo {

  display: flex;

  align-items: center;

  margin: 0 24px;

}

.logo .menu-icon {

  color: #333;

  font-size: 24px;

  margin-right: 45px;

  cursor: pointer;

}

.logo .logo-name {

  color: #333;

  font-size: 22px;

  font-weight: 500;

  text-align:center;

}

nav .sidebar {

  position: fixed;

  top: 0;

  left: -100%;

  height: 100%;

  width: 260px;

  background-color: #fff;

  box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);

  transition: all 0.4s ease; 

  z-index:9999;

}

nav.open .sidebar {

  left: 0;

}

.sidebar .sidebar-content {

  display: flex;

  height: 100%;

  flex-direction: column;

  justify-content: space-between;

  padding: 25px 10px;/*edit here - 30px 16px*/

  overflow:scroll;

}

.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-color: #4070f4;

}

.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: #fff;

}

.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;

}

.main{

    color:black;

    font-size:20px 0 20px 0;

    padding:50px;

    text-align:center;

}

/**STYLE FOR THE BOTTOM MENU**/

.footermenu{

    bottom:0%;

    width:100%;

    background: #4070f4;

    overflow: hidden;

    position:fixed;

}

JavaScript

    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");

     });

GET http://127.0.0.1:3000/ 500 (Internal Server Error) [closed]

Every time I try to fetch data from my DB (using node.js) I’m getting a internal server error and I’m not sure what’s causing it, but I know it’s coming from the get code block, here’s the code:

const express = require('express');
const app = express();
app.use(express.json());

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});


const { createPool } = require('mysql2');
const pool = createPool({
  host: 'localhost',
  user: 'root',
  password: '*****',
  database: 'property_db'
});



app.get('/properties', function(req, res) {
  const BuildingUse = req.body['building-use'];
  const MinUnits = req.body.MinUnits;
  const MaxUnits = req.body.MaxUnits;
  const CommunitySearch = req.body['community-search'];

  console.log(CommunitySearch);

  const sqlQuery = 'SELECT * FROM properties WHERE BUILDING_USE = ${BuildingUse} AND DWELLING_UNITS BETWEEN ${MinUnits} AND ${MaxUnits} AND COMMUNITY_NAME = ${CommunitySearch}';
  pool.query(sqlQuery, (err, results) => {
    if (err) {
      console.log(err);
      res.status(500).json({ error: 'Internal Server Error' });
    } else {
      res.json(results);
    }
  });
});








// Start the server
app.listen(3000, function() {
  console.log('Server is running on port 3000');
});

HTML code:

<script>
const form = document.getElementById("Form");

form.addEventListener("submit", function(event) {
      // Prevent the form from submitting and refreshing the page
      event.preventDefault();

      const BuildingUse = document.getElementById("select-building").value;
      const MinUnits = document.getElementById("MinUnits").value;
      const MaxUnits = document.getElementById("MaxUnits").value;
      const CommunitySearch = document.getElementById("select-community").value;

      console.log(BuildingUse);
      console.log(MinUnits);
      console.log(MaxUnits);
      console.log(CommunitySearch);
      

    });

    document.getElementById('fetchData').addEventListener('click', function() {
  
  fetch('http://127.0.0.1:3000/properties')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      // Display data on frontend
      var resultsContainer = document.getElementById('resultsContainer');
      if (data.length === 0) {
        resultsContainer.innerText = 'No results';
      } else {
        var html = '';
        data.forEach(function(property) {
          html += '<p>' + JSON.stringify(property) + '</p>';
        });
        resultsContainer.innerHTML = html;
      }
    })
    .catch(function(error) {
      console.log(error);
    });
});
    
</script>

Notes:

The server is running
The HTML form element names match the ones used in the JS code so that’s not what’s causing the error.
The table name, and column fields used in the query match the ones in the mysql DB.

When I didn’t try to use the input from HTML form as my query and wrote my own query manually, it returned fine. But when I tried using the input submitted in the form that’s when the error started happening

How to show quill data on screen with attributed?

I used the quill-delta-to-html package and managed to display the text on the screen. However, the styles were not displayed properly.

const deltaOps = blog.content2
const cfg = {};
const converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
const html = converter.convert();

So, GPT suggested something to me. Here’s the suggestion:

const cfg = {
inlineStyles: {
  bold: 'font-weight: bold;',
  italic: 'font-style: italic;',
  underline: 'text-decoration: underline;',
  strike: 'text-decoration: line-through;',
  script: (value) => {
    switch (value) {
      case 'sub':
        return 'vertical-align: sub;';
      case 'super':
        return 'vertical-align: super;';
      default:
        return '';
    }
  },
  background: (value) => {
    return `background-color: ${value};`;
  },
  color: (value) => {
    return `color: ${value};`;
  },
  font: (value) => {
    return `font-family: ${value};`;
  },
  size: (value) => {
    return `font-size: ${value}px;`;
  }
}

But this also didn’t work.

which expressions from image return true? [closed]

Can somebody explain to me why is not correct?

if I’m running in the console I have true: !!’false’ === !!’true’, null >= 0, 0.2 + 0.6 == 0.8. I dont understand why 0.2 + 0.6 == 0.8 is true and 0.2+0.7 == 0.9 is false. I think true == “true” should be true because of type coercion before comparison.

Swiper not working after Ajax loaded content

I’m asking this question because of many hours and days of research and still didn’t find the solutin of a problem with swiper in my page.

It works fine until I apply a popup to the page (Eg. select an item) and show popup dialog with the ajax loaded content including the swiper.

The popup opens with AJAX and shows only relevant listings, the only problem is that the Swiper Slider doesn’t work anymore, in fact, I cannot slide it, it keeps freezing with no functionality.

I think I need to reinitialize Swiper after every AJAX call but I’m not so good at AJAX I’m kind of wondering if anyone can point me into the right direction. Thank you very much.

function initSwiper() {
swiper = new Swiper('.swiper-container', {
// Optional parameters
  direction: 'horizontal',
  effect: 'slide',
  speed: 150,
  loop: true,
  observer: true,

// Navigation arrows
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},
  
    pagination: {
  el: '.swiper-pagination',
},

});
}

Not able to create an MFA enabled Single Page Application in Auth0 using Terraform

I am trying to create a single-page application in Auth0 using Terraform but it is throwing me an error called Error: 400 Bad Request: Invalid grant types: mfa.

MFA grant type should be enabled into the Auth0 Applicaiton.

resource "auth0_client" "auth0_ui_client" {
  name                = "auth0_ui_client"
  app_type            = "spa"
  callbacks           = ["http://localhost:3000/callback"]
  allowed_logout_urls = ["http://localhost:3000/logout"]
  allowed_origins     = ["http://localhost:3000"]
  grant_types         = ["authorization_code", "implicit", "refresh_token", "mfa"]
}

Able to create the app in auth0 if I remove mfa from the grant_types but I need to create it with MFA.
enter image description here

I can create application manually directly in the auth0 and enable MFA grant type but the same is not happening while creating the application through terraform.

I want sort this array with this method

var img = [
          "IMG_COM_20220516_1150_41_1375.webp",
          "IMG_COM_20220516_1150_41_13810.webp",
          "IMG_COM_20220516_1150_41_1386.webp",
          "IMG_COM_20220516_1150_41_1389.webp",
          "IMG_COM_20220516_1150_41_13911.webp",
          "IMG_COM_20220516_1150_41_13912.webp",
        ];

I want to sort this array by bigger number
when I try .sort() didn’t change

I want the result be like this

[
          "IMG_COM_20220516_1150_41_1375.webp",
          "IMG_COM_20220516_1150_41_1386.webp",
          "IMG_COM_20220516_1150_41_1389.webp",
          "IMG_COM_20220516_1150_41_13810.webp",
          "IMG_COM_20220516_1150_41_13911.webp",
          "IMG_COM_20220516_1150_41_13912.webp",
        ]

Token not send on redirect to another domain

I have a problem when I’m trying to send a cookie to another domain, the cookie is not being sent even if I set already the cookie option as a third param on the function, here’s the code.

note that I did all imports and install the deps.

app.use(cookieParser());

const app = express();

app.get('/', (req, res) => {
    res.cookie('test', 'testervalue', {
        maxAge: 900000,
        expires: new Date(Date.now() + 900000),
        hostOnly: false,
        httpOnly: false,
        signed: false,
        sameSite: 'Lax',
        domain: ".vercel.app"
    })
    res.redirect("https://okbafolio.vercel.app") //this is an example only
})

Apply tailwind inline styles to components imported from a library

I am building a React component library using TailwindCSS and I was wondering if there was a way to have the styles for the library’s components (in node_modules) get compiled with the consuming app’s styles, without having every app have the relative path to the components added to the content field of its tailwind.config.js. Having looked at the docs for presets it seems that if I just add it to the library’s preset just it gets overwritten by the app’s custom config.

How to add a multi-line text field to a Discourse Community signup page?

I would like to add a multi-line text field to my Discourse community’s signup page, but I am not sure how. Am I able to edit the source code to do this, add a file to the source code, or use a plugin that enables this? Either way, I am unsure how to accomplish this task.

I tried using the default settings first and was only presented with single-line text field, confirmation, drop-down, and multi-select field options.

How to show quill data on screen?

I am sending the text I wrote using the quill package to Firebase with Flutter. How can I display this text in React? I am storing the text as a string in Firebase.

Here is the representation of the text in Firebase:

“[{“insert”:”Başlık”},{“insert”:”n”,”attributes”:{“header”:3}},{“insert”:”Alt”,”attributes”:{“italic”:true}},{“insert”:”nLalalal”},{“insert”:”n”,”attributes”:{“list”:”bullet”}},{“insert”:”lalala”},{“insert”:”n”,”attributes”:{“list”:”bullet”}},{“insert”:”la”},{“insert”:”n”,”attributes”:{“list”:”bullet”}},{“insert”:”dsfsdffsd”,”attributes”:{“font”:”serif”}},{“insert”:”n”}]”

I couldn’t find how to do it.

How to extract data from array into another array?

I’m using react native and I have an array that looks like:

[
  [
    {
      "__typename": "Todo",
      "createdAt": "2023-07-15T01:19:56.489Z",
      "description": null,
      "id": "43696aa7-3244-44a9-abd0-3437be799121",
      "name": "squat",
      "reps": 12,
      "updatedAt": "2023-07-15T01:19:56.489Z",
      "weight": 135
    },
    {
      "__typename": "Todo",
      "createdAt": "2023-07-15T13:04:32.141Z",
      "description": null,
      "id": "616e19b9-4786-4b2e-bf11-7c54bd725e4b",
      "name": "squat",
      "reps": 1,
      "updatedAt": "2023-07-15T13:04:32.141Z",
      "weight": 135
    }
  ]
]

I would like to get all of the “weights” from each array object into a separate array where it would look like:

[135, 135]

I tried doing arrayname.map((b,i) => b[i].weight) but this only gave me the first objects weight so it looked like: [135]

Any help would be appreciated. I understand this might be a dumb question but I really don’t know how to do it.

Page object decomposition into smaller reusable components

I currently work on UI-level e2e test automation of a web app, where entire flow is concentrated in one page. To avoid huge single page object size, I’ve split it into smaller components, listed out and presented in the pic below:

Table (red) class with TableRow elements
Toolbar (green) class with ToolbarBtn elements
List (yellow) with ListElement elements, that in turn contain ListElementStatusBox element

An example business flow goes as follows:
Click TableRow[i] -> Click ListElement[i] -> Click ToolbarBtn1 ->ListElementStatusBox[i] changes status to "Status 1"

The code for a decomposed page object and its components is presented below:
list.component.ts

import { ElementStatus } from "../enums/element.status.enum";

export class List {

    public readonly listElement: Locator;

    constructor(page: Page) {
        this.listElement = page.getByTestId(`list-element`);
    }

    public async clickListElementWithTitle(title: string): Promise<void> {
        await this.listElement.getByText(title).click();
    }

    public async getElementStatus(elementTitle: string): Promise<ElementStatus> {
        const status = await this.listElement.getByText(elementTitle).locator(`list-element-status-box`);

        return status;
    }
}

table.component.ts

export class Table {

    private readonly _tableRow: Locator;

    constructor(page: Page) {
        this._tableRow = page.getByTestId(`left-table-row`);
    }

    public async clickTableRowWithTitle(title: string): Promise<void> {
        await this._tableRow.getByText(title).click();
    }
}

toolbar.component.ts

export class Toolbar {

    private readonly _toolbarBtn1: Locator;
    private readonly _toolbarBtn2: Locator;
    private readonly _toolbarBtn3: Locator;
    
    constructor(page: Page) {
        this._toolbarBtn1 = page.getByTestId(`toolbar-button-1`);
        this._toolbarBtn2 = page.getByTestId(`toolbar-button-2`);
        this._toolbarBtn3 = page.getByTestId(`toolbar-button-3`);
    }

    public async clickButton1(): Promise<void> {
        await this._toolbarBtn1.click();
    }

    public async clickButton2(): Promise<void> {
        await this._toolbarBtn2.click();
    }

    public async clickButton3(): Promise<void> {
        await this._toolbarBtn3.click();
    }
}

element.status.enum.ts

export enum ElementStatus {
    STATUS_1 = "Status 1",
    STATUS_2 = "Status 2"
}

main.page.ts

import { List } from "../components/list.component";
import { Table } from "../components/table.component";
import { Toolbar } from "../components/toolbar.component";
import { ElementStatus } from "../enums/element.status.enum";

export class MainPage {
  private readonly _leftTable: Table;
  private readonly _topToolbar: Toolbar;
  private readonly _centerList: List;

  constructor(private readonly page: Page) {
    this._leftTable = new Table(page);
    this._topToolbar = new Toolbar(page);
    this._centerList = new List(page);
  }

  public async goTo(): Promise<void> {
    await this.page.goto('https://playwright.dev/');
  }

  public async changeTheStatusOfItem(rowTitle: string, listElementTitle: string): Promise<void> {
    await this._leftTable.clickTableRowWithTitle(rowTitle);
    await this._centerList.clickListElementWithTitle(listElementTitle);
    await this._topToolbar.clickButton1();
  }

  public async getItemStatusForElementWithTitle(title: Locator): Promise<ElementStatus> {
    const status = await this._centerList.getElementStatus(title);

    return status;
  }
}

example.test.ts

import { test, expect } from '@playwright/test';
import { MainPage } from '../pages/main.page';
import { ElementStatus } from '../enums/element.status.enum';

const rowTitle = "Test Row Title 1";
const listItemTitle = "Test List title 1"

test('get started link', async ({ page }) => {
    const mainPage = new MainPage(page);
    
    await mainPage.goTo();
    await mainPage.changeTheStatusOfItem(rowTitle, listItemTitle);
    
    await expect.poll(async () => {
        const status = await mainPage.getItemStatusForElementWithTitle(listItemTitle);
        return status;
    }).toBe(ElementStatus.STATUS_1)
  });

I’m not sure if this decomposition is correct, as there are some code smells:

page object mainPage become more like actions aggregator than actual page object modelling a page and its behavior.
Some methods in mainPage are just wrappers around basically the same methods from components, e.g. getItemStatusForElementWithTitle(title), which violates DRY rule.

I’m also unsure about other topics, like:

Would it be better to move expect.poll() to page object and replace it with verifyElementStatus method in test file?
How to approach clicking nth element from the list? Would adding method in mainPage, like:

public getListElementWithNumber(number: number): Locator {
  return this._centerList.listElement.nth(number)
}

or adding getter (in case only 1st element is important)

public get firstListElement(): Locator {
  return this._centerList.listElement.first()
}

do the trick in a clean way?
Or is there a design pattern that would make this code more elegant?

What is alternative of JavaScript Recursion pattern? [closed]

A simple example of a recursive function would be to count down the value to 1:

function countDown (number){
   let count = number - 1;
   if(count > 0){
     countDown(count);  
   }
}
countDown(5);

What is an alternative of this pattern?

cannot get href for youtube videos

I’m having this issue where my code does not get the urls for the 6 videos on youtube channel videos page.
My code has been fine before but it’s not identifying the videos on the page – stopping me from getting the urls.

I’m expecting the code to get 6 random urls from the youtube channel page and randomise the order, to then go to the video.
I can’t show too much otherwise this becomes a long question, but here below is the part which is troubling me. (It uses puppeteer by the way).

// goes to channel page: https://youtube.com/@username/videos
let linked = await Promise.all((await page.$$(selector.videoTitleinSearch)).map(async a => {
            return {
                url: await (await a.getProperty('href')).jsonValue(),
                title: await (await a.getProperty('title')).jsonValue()
            };
        }));
        const linkz = linked.filter((el) => el.url != null);
        spinners.add('hasil', {
            text: `FOUND: ${linkz.length} LINKS`,
            color: 'yellow',
        });
        // randomize links
        const link = linkz.sort(() => Math.random() - Math.random()).slice(0, linkz.length);
            const tweet = link[j].url;
            const title = link[j].title;
            page.goto(tweet);