Category: javascript

Category Added in a WPeMatico Campaign

How to get the variable value correct from angular to node JavaScript API?

I have a public variable in angular and I need to use it in node API server.

I made a public variable with datatype of array in Angular:
public data1: Array<string> =["One"];
then with a click event I added the variable to the FormData:

    const imageForm = new FormData();
    imageForm.append('image', this.imageObj);
    imageForm.append('data', this.data1[0]);
    this.imageUploadService.imageUpload(imageForm).subscribe((res:any) => {
      this.imageUrl = res['image'];
      this.data1 = res['data'];
    });

Lastly in Angular I sent the data to API:

  imageUpload(imageForm: FormData) {
  console.log('image uploading');
  return this.http.post('http://localhost:3000/api/v1/upload/', imageForm);
 }

now in my server.js I have the below code that will get the variable and value:

   app.post('/api/v1/upload', upload.array('image', 1), (req, res) => {
  
   obj = JSON.parse(JSON.stringify(req.body));
   token = obj["data"];
   exports.token1 = token;
  
  console.log(obj["data"]); //this will print the data in obj which is "one"

now here is where my problem is, in upload.js I am trying to access the variable in server.js but getting undefined. here is what i did:

    const request = require('../server');
    let test = request.token1; //this will print the value correctly

but when I add the “test” variable as a key for AWS S3 Bucket I am getting “undefined”:

    const upload = multer({
   storage: multerS3({
    acl: 'public-read',
    s3,
    bucket: 'angular-upload-files',
    key: function(req, file, cb) {
      req.file = file.originalname;
      //the below test variable becomes undefined, why??
      cb(null, test+"/" + file.originalname);
     }
    })
   });

ESLint no-mixed-spaces-and-tabs errors in React component calls using TypeScript

I’ve configured ESLint for my TypeScript React project with the following settings:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

However, I’m encountering no-mixed-spaces-and-tabs errors in my code, specifically within React component calls like this:

<Sidebar
  backgroundColor='orange'
  color='#8ba1b7'
  className='sidebar'
  collapsed={!isDesktop}
>

Interestingly, the errors disappear when I remove the indentation as follows:

<Sidebar
backgroundColor='orange'
color='#8ba1b7'
className='sidebar'
collapsed={!isDesktop}
>

While this resolves the issue, it’s not the preferred indentation style. Is there a specific ESLint rule or configuration that can address this? I’d like to maintain a clean codebase without disabling potentially useful rules. Any insights or recommendations would be greatly appreciated.

Dynamically Adjust Font Size in a Fixed-Width Container Using HTML, CSS, and JavaScript

I’m working on a web project where I have a fixed-width container displaying a user’s name. I want to dynamically adjust the font size within this container as the user types more characters to ensure the text doesn’t overflow. Additionally, I need to consider the varying widths of different characters, especially the differences between uppercase and lowercase letters.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #profileCard {
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        #profileInfo {
            box-sizing: border-box;
            padding: 10px;
            height: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #name {
            font-size: 16px; /* Set a default font size for the name */
            transition: font-size 0.2s ease-in-out;
        }

        #inputBox {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="profileCard">
        <div id="profileInfo">
            <p id="name">John Doe</p>
        </div>
    </div>

    <textarea id="inputBox" placeholder="Type something..." oninput="updateProfileInfo()"></textarea>

    <script>
        const inputBox = document.getElementById('inputBox');
        const profileName = document.getElementById('name');
        const profileInfo = document.getElementById('profileInfo');

        function updateProfileInfo() {
            const typedText = inputBox.value;
            profileName.textContent = typedText;
            adjustFontSize();
        }

        function adjustFontSize() {
            const containerWidth = profileInfo.clientWidth;
            const textWidth = getTextWidth(profileName.textContent, profileName.style.font);
            const availableSpace = containerWidth - 20; // Adjust for padding

            // Calculate the ideal font size based on the available space and text width
            const idealFontSize = Math.min(16, (availableSpace / textWidth) * 10);

            // Set the font size, ensuring it doesn't go below a minimum size
            profileName.style.fontSize = idealFontSize + 'px';
        }

        function getTextWidth(text, font) {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            context.font = font;
            const width = context.measureText(text).width;
            return width;
        }
    </script>
</body>
</html>

Getting Error: could not find react-redux context value; please ensure the component is wrapped in a Even though I have layout wrapped

I am trying to render a next js component by accessing its route. I am using useSelector here, but I am getting this error.
After looking up, I found out i have to use a custom provider and wrap it in layout. But it didnt resolve the issue.

page.js
import Image from "next/image";
import Login from "../pages/login/Login";
import Dashboard from "../pages/dashboard/Dashboard";
import "./globals.css";

export default function Home() {
  return (
    <div className="min-h-screen bg-white flex flex-col items-center justify-start">
      <Login />
      
    </div>
  );
}

This is may layout.js file

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <body className={inter.className}>
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

and this is my Redux provider

"use client";
import { Provider } from "react-redux";
import { store } from "../store";
import React from "react";

const ReduxProvider = ({ children }) => {Ï
  return <Provider store={store}>{children}</Provider>;
};
export default ReduxProvider;

This is the file being loaded using next router.

"use client";
import React from "react";
import Image from "next/image";
import { useSelector } from "react-redux";

import Logo from "../../assets/logo.png";
import UserOut from "../../assets/userOut.png";
import UserIn from "../../assets/userIn.png";
const Header = ({ fromLogin = false }) => {
  const user = useSelector((state) => state.user);
  const { isLoggedIn } = user;
  return (
    <div className="HEADER flex flex-row items-center justify-between py-4 border-b border-[#DDDDDD] border-solid w-full gap-4">
      <div className="flex flex-row items-center justify-between gap-4">
        <Image src={Logo} alt="Picture of the author" width={75} height={75} />
        <h1 className="font-sans font-semibold text-[24px]">
          {" "}
          The Arqam Schools{" "}
        </h1>
      </div>
    </div>
  );
};

export default Header;

How to tell Google Search Console to crawl CSR website?

My goal is to tell Google Search Console to crawl https://event.topoint.org in CSR.

My expected result was: The crawled html file app-root is not empty.

My actual result was: The crawled html file is just empty app-root.

The problem is: The crawled html is not consistent. Some have on empty app-root, some do not.

  1. https://event.topoint.org/experience/1 crawled html file is not just app-root.
  2. https://event.topoint.org/event/1 crawled html file is just app-root.

The Source Code: https://github.com/jasonrichdarmawan/angular-structured-data-event-example

experience-page.html

<div style="border: 1px solid;">
    <p>experience-page works!</p>

    <ng-container *ngIf="experienceData else noExperienceData">
        <p>id {{ experienceData.id }}</p>
        <p>name {{ experienceData.name }}</p>

        <ng-container *ngIf="experienceData.events else noEventData">
            <ng-container *ngFor="let eventID of experienceData.events">
                <a routerLink="/event/{{eventID}}">event {{ eventID }}</a>
            </ng-container>
        </ng-container>

        <ng-template #noEventData>
            <p>event not found</p>
        </ng-template>
    </ng-container>

    <ng-template #noExperienceData>
        <p>experience not found</p>
    </ng-template>
</div>

event-page.component.html

<div style="border: 1px solid; padding: 8px;">
    <p>event-page works!</p>

    <ng-container *ngIf="eventData else noEventData">
        <p>id {{ eventData.id }}</p>
        <p>name {{ eventData.name }}</p>
        <p *ngIf="eventData.description">description {{ eventData.description }}</p>
        <p>startDate {{ eventData.startDate | date:'long' }}</p>
        <p>endDate {{ eventData.endDate | date:'long' }} </p>

        <p *ngIf="eventData.eventAttendanceMode">eventAttendanceMode {{ eventData.eventAttendanceMode }}</p>
        <p *ngIf="eventData.eventStatus">eventStatus {{ eventData.eventStatus }}</p>
        
        <div style="border: 1px solid; padding: 8px;" *ngIf="eventData.image">
            <ng-container *ngFor="let img of eventData.image">
                <img [src]="img">
            </ng-container>
        </div>

        <div style="border: 1px solid; padding: 8px;" *ngIf="eventData.offers">
            <ng-container *ngFor="let item of eventData.offers">
                <div style="border: 1px solid; padding: 8px">
                    <p>offer type {{ item["@type"] }}</p>
                    <p>offer availability {{ item.availability }}</p>
                    <p>offer price {{ item.price }} </p>
                    <p>offer priceCurrency {{ item.priceCurrency }}</p>
                    <p>offer validFrom {{ item.validFrom }}</p>
                    <p>offer url {{ item.url }}</p>
                </div>
            </ng-container>
        </div>

        <div style="border: 1px solid; padding: 8px" *ngIf="eventData.organizer">
            <p>organizer type {{ eventData.organizer['@type'] }}</p>
            <p>organizer name {{ eventData.organizer.name }}</p>
            <ng-container *ngIf="eventData.organizer['@type'] === 'Organization'">
                <p>organizer url {{ (eventData.organizer | as : Organization).url }}</p>
            </ng-container>
        </div>

        <div style="border: 1px solid; padding: 8px" *ngIf="eventData.performer">
            <p>performer type {{ eventData.performer['@type'] }}</p>
            <p>performer name {{ eventData.performer.name }}</p>
        </div>

        <div style="border: 1px solid; padding: 8px" *ngIf="eventData.previousStartDate">
            <ng-container *ngFor="let item of eventData.previousStartDate">
                <p>previousDate {{ item }}</p>
            </ng-container>
        </div>
    </ng-container>

    <ng-template #noEventData>
        <p>event not found</p>
    </ng-template>
</div>

The actual result:

<!DOCTYPE html>
<html lang="en"><head>
  
  <title>AngularStructuredDataEventExample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.ef46db3751d8e999.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.7611a4bdf3a12cea.js" type="module"></script><script src="polyfills.37aaad03170db895.js" type="module"></script><script src="main.5c0adfd072d8bbc3.js" type="module"></script>

</body></html>

The expected result

<!DOCTYPE html>
<html lang="en"><head>
  
  <title>AngularStructuredDataEventExample</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.ef46db3751d8e999.css" /><style></style><script type="application/ld+json">{"@context":"https://schema.org","@type":"Event","id":"1","location":[{"@type":"VirtualLocation","url":"https://operaonline.stream5.com/"},{"@type":"Place","name":"Snickerpark Stadium","address":{"@type":"PostalAddress","streetAddress":"100 West Snickerpark Dr","addressLocality":"Snickertown","postalCode":"19019","addressCountry":"US","addressRegion":"PA"}}],"name":"The Adventures of Kesha and Macklemore","startDate":"2023-12-16T12:45:53.743Z","description":"The Adventures of Kira and Morrison is coming to Snickertown in a can't miss performance.","endDate":"2023-12-17T12:45:53.743Z","eventAttendanceMode":"https://schema.org/MixedEventAttendanceMode","eventStatus":"https://schema.org/EventScheduled","image":["https://example.com/photos/1x1/photo.jpg","https://example.com/photos/4x3/photo.jpg","https://example.com/photos/16x9/photo.jpg"],"offers":[{"@type":"Offer","availability":"https://schema.org/InStock","price":"30","priceCurrency":"USD","validFrom":"2023-12-15T12:45:53.743Z","url":"https://event.topoint.org/event/1"}],"organizer":{"@type":"Organization","name":"Kira and Morrison Music","url":"https://kiraandmorrisonmusic.com"},"performer":{"@type":"PerformingGroup","name":"Kira and Morrison"}}</script></head>
<body>
  <app-root _nghost-poc-c5="" ng-version="13.3.12"><a _ngcontent-poc-c5="" routerlink="/experiences" href="/experiences">Experiences</a> |
<a _ngcontent-poc-c5="" routerlink="/events" href="/events">Events</a><router-outlet _ngcontent-poc-c5=""></router-outlet><app-event-page _nghost-poc-c6=""><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">event-page works!</p><p _ngcontent-poc-c6="">id 1</p><p _ngcontent-poc-c6="">name The Adventures of Kesha and Macklemore</p><p _ngcontent-poc-c6="">description The Adventures of Kira and Morrison is coming to Snickertown in a can&#39;t miss performance.</p><!----><p _ngcontent-poc-c6="">startDate December 16, 2023 at 4:45:53 AM GMT-8</p><p _ngcontent-poc-c6="">endDate December 17, 2023 at 4:45:53 AM GMT-8 </p><p _ngcontent-poc-c6="">eventAttendanceMode https://schema.org/MixedEventAttendanceMode</p><!----><p _ngcontent-poc-c6="">eventStatus https://schema.org/EventScheduled</p><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><img _ngcontent-poc-c6="" src="https://example.com/photos/1x1/photo.jpg" /><!----><img _ngcontent-poc-c6="" src="https://example.com/photos/4x3/photo.jpg" /><!----><img _ngcontent-poc-c6="" src="https://example.com/photos/16x9/photo.jpg" /><!----><!----></div><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">offer type Offer</p><p _ngcontent-poc-c6="">offer availability https://schema.org/InStock</p><p _ngcontent-poc-c6="">offer price 30 </p><p _ngcontent-poc-c6="">offer priceCurrency USD</p><p _ngcontent-poc-c6="">offer validFrom 2023-12-15T12:45:53.743Z</p><p _ngcontent-poc-c6="">offer url https://event.topoint.org/event/1</p></div><!----><!----></div><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">organizer type Organization</p><p _ngcontent-poc-c6="">organizer name Kira and Morrison Music</p><p _ngcontent-poc-c6="">organizer url https://kiraandmorrisonmusic.com</p><!----><!----></div><!----><div _ngcontent-poc-c6="" style="border: 1px solid; padding: 8px;"><p _ngcontent-poc-c6="">performer type PerformingGroup</p><p _ngcontent-poc-c6="">performer name Kira and Morrison</p></div><!----><!----><!----><!----><!----></div></app-event-page><!----> This is a live test.
<a _ngcontent-poc-c5="" href="https://github.com/jasonrichdarmawan/angular-structured-data-event-example">Source Code</a>
by <a _ngcontent-poc-c5="" href="https://github.com/jasonrichdarmawan">Jason Rich Darmawan</a></app-root>
<script src="runtime.84ecdfabc7408ad4.js" type="module"></script><script src="polyfills.37aaad03170db895.js" type="module"></script><script src="main.1b11d2bb5473d983.js" type="module"></script>

</body></html>

Event loop with promises and console.log which one exécuted first and why

I’m learning event loop and i’m confused about it’s working

const fetchUser = async () => {

   const response = await 
     fetch("URL")
   console.log(response)
   const data = await 
     response.json()
   console.log(data)

}

My question is why the console.log are executed After the promises ? If WE refer to évent loop and how it works WE should have firstly callstack exécuted and After that the job queue ? 1nd WE should have seen undefined from console.log and than the promises executed

Heading styles in react-quill

When I click normal to change heading style, the drop-down is open ed and closed immediately before I select, how can I get it

When I click normal to change heading style, the drop-down is open ed and closed immediately before I select, how can I get

Submit does not work if JavaScript id=”—” exists in Laravel 10

I have issue to submit form in Laravel 10 which require JavaScript and Laravel validation but submit does not work

User Controller Validation

public function insert(Request $request){
        $this->validate($request,[
            'name'=>'required|max:50',
            'email'=>'required|email|max:50|unique:users',
            'password'=>'required|min:8',
            'confirm_password'=>'required_with:password|same:password',
            'username'=>'required',
            // 'role'=>'required',
          ],[
            'name.required'=>'Please enter your name.',
            'email.required'=>'Please enter email address.',
            'password.required'=>'Please enter password.',
            'confirm_password.required'=>'Please enter confirm password.',
            'username.required'=>'Please enter username.',
            // 'role.required'=>'Please select user role.',
          ]);

This is user blade form

<form method="post" action="{{url('dashboard/user/submit')}}" enctype="multipart/form-data" id="form" class="form">
                                  @csrf
                                    <div class="card-body ll">
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Name<span class="req_star">*</span>:</label>
                                          <div class="col-sm-7">
                                            <input type="text" class="form-control form_control" id="name" placeholder="Enter your name" name="name">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Phone:</label>
                                          <div class="col-sm-7">
                                            <input type="number" class="form-control form_control" id="phone" placeholder="Enter your phone number" name="phone">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Email<span class="req_star">*</span>:</label>
                                          <div class="col-sm-7">
                                            <input type="email" class="form-control form_control" id="email" placeholder="Enter email" name="email">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Username<span class="req_star">*</span>:</label>
                                          <div class="col-sm-7">
                                            <input type="text" class="form-control form_control" id="username" placeholder="Enter your username" name="username">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Password<span class="req_star">*</span>:</label>
                                          <div class="col-sm-7">
                                            <input type="password" class="form-control form_control" id="password" placeholder="Enter password" name="password">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Confirm-Password<span class="req_star">*</span>:</label>
                                          <div class="col`*your text*`-sm-7">
                                            <input type="password" class="form-control form_control" id="password2" placeholder="Enter password again" name="confirm_password">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">User Role<span class="req_star">*</span>:</label>
                                          <div class="col-sm-4">
                                            <select class="form-control form_control" id="role" placeholder="Please Select role" name="">
                                              <option>Select Role</option>
                                              <option value="">Superadmin</option>
                                              <option value="">Admin</option>
                                            </select>
                                          </div>
                                        </div>
                                        <div class="row mb-3 fc act">
                                          <label class="col-sm-3 col-form-label col_form_label">Photo:</label>
                                          <div class="col-sm-4">
                                            <input type="file" class="form-control form_control" id="" name="pic">
                                            <small>Error Message</small>
                                          </div>
                                        </div>
                                    </div>
                                    <div class="card-footer text-center">
                                      <button type="submit" class="btn btn-sm btn-dark">REGISTRATION</button>
                                    </div>

I also have JavaScript validation too
When I try to submit it does not work but when I remove class=”form “id=”form” it submit perfectly fine but I need both Laravel and JavaScript validation does there any solution for this. Please help.

How To Save Chrome Extension State! I

Im making a Chrome Extension! im kinda new to this and im still trying to figure out how to store the extension state even if the popup is reload or user leaves the page or closes the browser..
i have used the storage.sync.set() function

getExtensionState function states the bool value of state sends it to content.js

Popup.js


let extensionState = false;

document.getElementById("toggle").addEventListener("click", function () {
  chrome.storage.sync.get(["state"], function () {
    console.log(state);
  });
  state = !state;
  if (document.getElementById("toggle").innerHTML === "Disable") {
    document.getElementById("toggle").innerHTML = "Enable";
  } else if ((document.getElementById("toggle").innerHTML = "Enable")) {
    document.getElementById("toggle").innerHTML = "Disable";
  }
  chrome.storage.sync.set({ state: extensionState }, function () {
    console.log(extensionState);
    getExtensionState(state);
  });
});

function getExtensionState(extension) {
  (async () => {
    const [tab] = await chrome.tabs.query({
      active: true,
      lastFocusedWindow: true,
    });
    const response = await chrome.tabs.sendMessage(tab.id, {
      state: extension,
    });
    // do something with response here, not outside the function
    console.log(response);
  })();
}

Popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/popup.css" />
  </head>
  <body>
    <h1>Popup</h1>
    <button id="toggle"></button>
  </body>
  <script src="popup.js"></script>
</html>

handle flask form with js

i have this form and script to get data from a flask api,
when i put js part in end of html page everything works fine, but when i seperate js function to new file ,after submit form new page get open with json data. i want to prevent this json page and just get data, i try defer already

    <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary" method="post" action="{{        url_for('get_morse') }}"
                  id="morse_form">
           <div class="form-floating mb-3">
           <input type="text" class="form-control" id="floatingInput" name="text">
           <label for="floatingInput">Your Word</label>
           </div>
           <button class="w-100 btn btn-lg btn-primary mb-3" type="submit" id="submitMorse"      onclick="get_morse()">Morse Up</button>
           <div class="form-floating mb-3">
           <p type="text" class="form-control" id="floatingMorse">{{morse_output}}</p>
           <label for="floatingMorse">Morse</label>
            </div>
            <button class="w-100  btn-sm btn btn-outline-danger mb-3" type="reset"  id="resetMorse">Reset</button>
    </form>

morseForm.addEventListener("submit",  function (e) { 
e.preventDefault();

    // Fetch morse_output from the server
     fetch('/morse', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            'text': morseInput.value,
        }),
    })
        .then(response => response.json())
        .then(data => {
            // Update the HTML content with the fetched morse_output

            morseOutput.innerText = data.morse_output

        })
        .catch(error => console.error('Error:', error));
});

    @app.route('/morse', methods=["POST"])
    def get_morse():
        if request.method == "POST":
            morse.reset()
            data = request.form.get("text")
            morse_output = morse.to_morse(data)
            return jsonify({"morse_output": morse_output})

Trouble with iframe and navbar inside the frame

I am trying to get frames to work where the navbar frame is on top and the frame below is the whole body, the navbar is in a different html file than the body frame. I have it the way I want it to LOOK. however, I cant click the links. Nothing I do is working. There are supposed to be 2 dropdowns, and some regular links.

Index file

<!Doctype HTML>
<html>
  <head>
    <!--Links to the other sheets-->
    <link rel="stylesheet" type="text/css" href="style2.css" />
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css'
      rel='stylesheet'>
    <link rel="icon" type="image/x-icon" href="./images/justpersonlogo.png" />
    <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>Thats What She Said LLC</title>
  </head>
  <body>
    <header></header>
   <div class="menuframe"><!--Menu-->
   <iframe src="navbar.html" style="border: none; width: 100%;" sandbox="allow-same-origin allow-popups allow-scripts"  name="NavBar"></iframe>
    </div>
  </header>
<!--Body Content-->
<div class="menutargetframe">    
<iframe src="landing.html" name="mainBodyFrame" style="position:absolute; top:0px;" width="100%" height=100% title="Main body Frame"></iframe>
  </div>
<script src="script.js"></script>
  </body>
</html>

navbar links

<!--template for html site-->
<!Doctype HTML>
<html>
  <head>
    <!--Links to the other sheets-->
    <link rel="stylesheet" type="text/css" href="navbar.css" />
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css'
      rel='stylesheet'>
    <link rel="icon" type="image/x-icon" href="./images/justpersonlogo.png" />
    <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>navbar</title>
  </head>
  <body>
    <!--Menu-->
    <header id="nav-menu" aria-label="navigation bar">
      <div class="container">
        <div class="nav-start">
          <a class="logo" href="/">
            <img
              src="./images/TWSS_logo2.png"
              width="245"
              height="245"
              alt="Inc Logo" />
          </a>
          <nav class="menu">
            <ul class="menu-bar">
              <li><a class="nav-link" href="/" target="_parent">Home</a></li>
              <li>                  
                <button
                  class="nav-link dropdown-btn"
                  data-dropdown="dropdown2"
                  aria-haspopup="true"
                  aria-expanded="false"
                  aria-label="subsidiaries">
                  Subsidiaries
                  <i class="bx bx-chevron-down" aria-hidden="true"></i>
                </button>
                <div id="dropdown2" class="dropdown">
                  <ul role="menu">
                    <li>
                      <span class="dropdown-link-title">Businesses</span>
                    </li>
                    <li role="menuitem">
                      <a class="dropdown-link" href="http://www.erotictutors.com" target="_parent">Erotic Tutors</a>
                    </li>
                    <li role="menuitem">
                      <a class="dropdown-link" href="http://www.vocationlocation.co" target="_parent">Vocation Location</a>
                    </li>
                    <li role="menuitem">
                      <a class="dropdown-link" href="#" target="_parent">Welcoming Oppertunities</a>
                    </li>
                    <li role="menuitem">
                      <a class="dropdown-link" href="http://www.OnlyBTCCoins.com" target="_parent">Only Btc Coins</a>
                    </li>
                  </ul>
                 </div>
                 <li>                  
                  <button
                    class="nav-link dropdown-btn"
                    data-dropdown="dropdown1"
                    aria-haspopup="true"
                    aria-expanded="false"
                    aria-label="Games">
                    Games
                    <i class="bx bx-chevron-down" aria-hidden="true"></i>
                  </button>
                  <div id="dropdown1" class="dropdown">
                    <ul role="menu">
                      <li>
                        <span class="dropdown-link-title">PC</span>
                      </li>
                      <li role="menuitem">
                        <a class="dropdown-link" href="https://patreon.com/ThatsWhatSheSaidLLC?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link"  target="_parent">The Career Coder</a>
                      </li>
                    </ul>
                   </div>
                </li>
              </li>
              <li><a class="nav-link" href="/" target="_parent">Careers</a></li>
              <li><a class="nav-link" href="/" target="_parent">News</a></li>
              <li><a class="nav-link" href="/" target="_parent">Jokes</a></li>
              <li><a class="nav-link" href="/" target="_parent">Contact Us</a></li>
            </ul>
          </nav>
        </div>
        <div class="nav-end">
          <div class="right-container">
            <a class="social" href="/"><img src='./images/social media/linkedin-blu_wh.png' alt="Linked In" /></a>
            <a class="social" href="/"><img src='./images/social media/facebook-blu_wh.png' alt="Facebook" /></a>
            <a class="social" href="/"><img src='./images/social media/WhatsApp_Logo_1-150x150.png' alt="" /></a>
            <a class="social" href="/"><img src='./images/social media/yt_icon_red-310x219.png' alt="" /></a>
            <a class="social" href="/"><img src='./images/social media/Twitter_Logo_Blue-150x150.png' alt="" /></a>
            <a class="social" href="/"><img src='./images/social media/snap-ghost-yellow.png' alt="" /></a>

            <a href="#profile">
              <img
                src="/assets/images/user.jpg"
                width="30"
                height="30"
                alt="user image" />
            </a>
          </div>
        </div>
      </div>
    </header>
    <script src="script.js"></script>
<!--Body Content-->



  </body>
</html>

css for the navbar

/* index.html */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

:root {
  --dark-grey: #333333;
  --medium-grey: #636363;
  --light-grey: #eeeeee;
  --ash: #f4f4f4;
  --primary-color: #2b72fb;
  --white: white;
  --border: 1px solid var(--light-grey);
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

body {
  font-family: inherit;
  background-color: var(--white);
  color: var(--dark-grey);
  letter-spacing: -0.4px;
 /* background-image: url("./images/mainbg.jpg");*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: inherit;
}

.btn {
  display: block;
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 5px;
}

.icon {
  padding: 0.5rem;
  background-color: var(--light-grey);
  border-radius: 10px;
}

.logo {
  margin-right: 1.5rem;
}

#nav-menu {
  border-bottom: var(--border);
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  column-gap: 2rem;
  height: 90px;
  padding: 1.2rem 3rem;
}

.menu {
  position: relative;
  background: var(--white);
}

.menu-bar li:first-child .dropdown {
  flex-direction: initial;
  min-width: 480px;
}

.menu-bar li:first-child ul:nth-child(1) {
  border-right: var(--border);
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
  border-bottom: var(--border);
}

.menu-bar .dropdown-link-title {
  font-weight: 600;
}

.menu-bar .nav-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.6px;
  padding: 0.3rem;
  min-width: 60px;
  margin: 0 0.6rem;
}

.menu-bar .nav-link:hover,
.dropdown-link:hover {
  color: var(--primary-color);
}

.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
  display: flex;
  align-items: center;
}

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  background-color: var(--white);
  border-radius: 10px;
  position: absolute;
  top: 36px;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97) translateX(-5px);
  transition: 0.1s ease-in-out;
  box-shadow: var(--shadow);
}

.dropdown.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateX(5px);
}

.dropdown ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.2rem;
  font-size: 0.95rem;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
}

.dropdown-link {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-radius: 7px;
  transition: 0.1s ease-in-out;
}

.dropdown-link p {
  font-size: 0.8rem;
  color: var(--medium-grey);
}

.right-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.right-container .social {
  position: relative;
}

.right-container img {
  border-radius: 50%;
  width:25px;
}



#hamburger {
  display: none;
  padding: 0.1rem;
  margin-left: 1rem;
  font-size: 1.9rem;
}

@media (max-width: 1100px) {
  #hamburger {
    display: block;
  }

  .container {
    padding: 1.2rem;
  }

  .menu {
    display: none;
    position: absolute;
    top: 87px;
    left: 0;
    min-height: 100vh;
    width: 100vw;
  }

  .menu-bar li:first-child ul:nth-child(1) {
    border-right: none;
    border-bottom: var(--border);
  }

  .dropdown {
    display: none;
    min-width: 100%;
    border: none !important;
    border-radius: 5px;
    position: static;
    top: 0;
    left: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .menu.show,
  .dropdown.active {
    display: block;
  }

  .dropdown ul {
    padding-left: 0.3rem;
  }

  .menu-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 1rem;
    padding: 1rem;
  }

  .menu-bar .nav-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0;
  }

  .menu-bar li:first-child .dropdown {
    min-width: 100%;
  }

  .menu-bar > li:not(:last-child) {
    padding-bottom: 0.5rem;
    border-bottom: var(--border);
  }
}

@media (max-width: 600px) {
  .right-container {
    display: none;
  }
}

javascript for navbar

// dropdown menus
const dropdownBtn = document.querySelectorAll(".dropdown-btn");
const dropdown = document.querySelectorAll(".dropdown");
const hamburgerBtn = document.getElementById("hamburger");
const navMenu = document.querySelector(".menu");
const links = document.querySelectorAll(".dropdown a");

function setAriaExpandedFalse() {
  dropdownBtn.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
}

function closeDropdownMenu() {
  dropdown.forEach((drop) => {
    drop.classList.remove("active");
    drop.addEventListener("click", (e) => e.stopPropagation());
  });
}

function toggleHamburger() {
  navMenu.classList.toggle("show");
}

dropdownBtn.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    const dropdownIndex = e.currentTarget.dataset.dropdown;
    const dropdownElement = document.getElementById(dropdownIndex);

    dropdownElement.classList.toggle("active");
    dropdown.forEach((drop) => {
      if (drop.id !== btn.dataset["dropdown"]) {
        drop.classList.remove("active");
      }
    });
    e.stopPropagation();
    btn.setAttribute(
      "aria-expanded",
      btn.getAttribute("aria-expanded") === "false" ? "true" : "false"
    );
  });
});

// close dropdown menu when the dropdown links are clicked
links.forEach((link) =>
  link.addEventListener("click", () => {
    closeDropdownMenu();
    setAriaExpandedFalse();
    toggleHamburger();
  })
);

// close dropdown menu when you click on the document body
document.documentElement.addEventListener("click", () => {
  closeDropdownMenu();
  setAriaExpandedFalse();
});

// close dropdown when the escape key is pressed
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeDropdownMenu();
    setAriaExpandedFalse();
  }
});

hamburgerBtn.addEventListener("click", toggleHamburger);

i am so lost at this point. I cant get anything to work right. oh and there is no hamburger, i took that out.

I tried every option i can find or think of, which isnt much btw.

Every step i take adds more problems that i cant fix,

all I want to do is have a navbar in one file framed into another, where all the links target that bodyframe.

There are always errors in console of Chrome and Visual Studio after doing the translation of web

When I debug and run my code of html(with Css qnd JavaScript) , there is a web page which has all information I want, but when I do translation in the web page, there are also the errors as those:’

Image (async)

po @ VM317:181

_.k.Ci @ VM317:381

_.k.nf @ VM317:369

_.k.Lf @ VM317:372

Rw.M @ VM317:332

Pw.s @ VM317:329

setTimeout (async)

Qw @ VM317:328

Pw.add @ VM317:328

Rw.B @ VM317:331

b @ VM317:352

px.s @ VM317:341

(anonymous) @ m=el_conf:499

eval @ VM317:346

bn @ VM317:87

next @ VM317:88

b @ VM317:88

Promise.then (async)

f @ VM317:88

eval @ VM317:88

en @ VM317:88

_.fn @ VM317:88

Vx @ VM317:346

eval @ VM317:352

qx @ VM317:341

dy.translate @ VM317:352

_.k.ei @ VM317:365

Rw.M @ VM317:332

Pw.s @ VM317:329

setTimeout (async)

Qw @ VM317:328

Pw.add @ VM317:328

Rw.B @ VM317:331

dy.U @ VM317:350

Wx.h @ VM317:346

Show 1 more frame

Show less’ in the console of Chrome web , there are also those erros in the console of Visual studio:’

Uncaught TypeError TypeError: Cannot read properties of undefined (reading ‘gzip’)

at ep.oh (<eval>/VM46947592:166:470)

at rm.flush (<eval>/VM46947592:69:71)

at eval (<eval>/VM46947592:65:445)

at Xd (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:524:469)

at _.k.dispatchEvent (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:523:373)

at Xl.tick (<eval>/VM46947592:64:214)

at eval (<eval>/VM46947592:63:349)

--- setTimeout ---

at Xl.start (<eval>/VM46947592:63:325)

at rm.log (<eval>/VM46947592:67:380)

at _.tm (<eval>/VM46947592:66:289)

at Tr.log (<eval>/VM46947592:166:663)

at js (<eval>/VM46947592:176:80)

at xy (<eval>/VM46947592:376:249)

at Zy (<eval>/VM46947592:441:262)

at onTranslateElementLoad (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:362:32)

at eval (<eval>/VM46947592:443:356)

at eval (<eval>/VM46947592:443:502)

at eval (<eval>/VM46947592:446:4)

at xhr.onreadystatechange (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:430:41)

--- XMLHttpRequest.send ---

at onLoadJavascript (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:432:11)

at <anonymous> (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:645:893)

at <anonymous> (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:646:11)

at <anonymous> (//_/translate_http/_/js/k=translate_http.tr.zh_CN.so1g-IS1zUQ.O/am=AAM/d=1/rs=AN8SPfp9QE3VMkOyoC1JZMeG7Kwt9sdp6Q/m=el_conf:647:9)' . I didn't write the code of translation neither use translate API in my code. Could someone help me see what's the problem and how to solve it? All of information is correct just the errors of translation. Thanks you!

I reviewed my codes and I think the code is correct.I hope solve the errors, there are no errors in the console of Chrome and Visual Studio after translation.

how i can submit a form in php after validation from javascript?

i want to create a register/login system and i create form in Register.php and i make the validation part goes to JavaScript code but the problem i had is that when i click on submit there is no values goes into the database.

Register.php



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/regStyle.css">
    <title>Register</title>
</head>
<body>
    <div class="container">
        <form id="form"  class="form" action="register.php" method="POST">
            <h2>Register With Us</h2>
            <div class="form-control">
                <label for="username">Username</label>
                <input type="text" name="username" id="username" placeholder="Enter username">
                <small> Error message </small>
            </div>
            <div class="form-control">
                <label for="email">Email</label>
                <input type="text" id="email" placeholder="Enter Email" name="email">
                <small>Error Message</small>
            </div>
            <div class="form-control">
                <label for="password" >Password</label>
                <input type="password" name ="password" id="password" placeholder="Enter password">
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="password2">Confirm Password </label>
                <input type="password" id="password2" placeholder="Enter password again">
                <small>Error message</small>
            </div>
            <button type="submit" name="signup">Signup</button>

        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

<<?php
 
 if(isset($_POST["signup"])) {

    require("connection.php");

    try {
        $username = $_POST["username"];
        $email = $_POST["email"];
        $password = $_POST["password"];

        // Sanitize and validate your inputs here

        // Hash the password
        $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

        $stmt = $db->prepare("INSERT INTO users (username, email, password) VALUES (:username, :email, :password)");
        $stmt->bindParam(':username', $username);
        $stmt->bindParam(':email', $email);
        $stmt->bindParam(':password', $hashedPassword);
        $stmt->execute();   

        // Redirect or inform the user of successful registration
    } catch (PDOException $e) {
        // Handle your error here
        echo "Error: " . $e->getMessage();
    }

    $db = null;
}
?>

and this is Script.js

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

form.addEventListener('submit', function (e) {
    if (e.submitter && e.submitter.name === "signup") {
    e.preventDefault();
    let allErrors = 0;
    allErrors += checkRequired([username, email, password, password2]);
    allErrors += checkLength(username, 3, 15);
    allErrors += checkLength(password, 6, 25);
    allErrors += checkEmail(email);
    allErrors += checkPasswordMatch(password, password2);

    if (allErrors == 0) {

     form.submit();
       
        
    }


}
});



function showError(input, message) {
    const formControl = input.parentElement;
    formControl.className = 'form-control error';
    const small = formControl.querySelector('small');
    small.innerText = message;
}


function showSuccess(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function checkRequired(inputArr) {
    let error = 0;

    inputArr.forEach(function (input) {
        if (!input.value || input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`);
            ++error;
        } else {
            showSuccess(input);
        }
    });

    return error;
}

function getFieldName(input) {
    return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

function checkLength(input, min, max) {
    let error = 0;

    if (input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min} characters`);
        error++;
    } else if (input.value.length > max) {
        showError(input, `${getFieldName(input)} must be less than ${max} characters`);
        error++;
    } else {
        showSuccess(input);
    }
}

function checkEmail(input) {

    let error = 0;
    const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0.9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    if (re.test(input.value.trim())) {
        showSuccess(input);
    } else {
        showError(input, 'Email is not valid');
        ++error;
    }
    return error;
}

function checkPasswordMatch(input1, input2) {
    let error = 0;
    if (input1.value !== input2.value) {
        showError(input2, 'Passwords do not match');
        ++error;
    }
    return error;
}

i want when the user click on submit button in the regiser.php the validation happens and according to that it will submit or not.. what i did it wrong?

thank you.