Category: javascript

On this image, is what I coded, I want to add a modal Popup when clicked “Next”.

On the modal Popup, I want to add complex HTML and css codes like this: This is what I want the modal Popup to look like

Then if possible, add a JavaScript code that allows to continue on the next step with other contents appearing like this: i also want this on the modal Popup.

I know it’s a complex code to code but I would really appreciate your help. I tried coding the modal Popup but it doesn’t work correctly and sometimes it changes and affects my css on other parts of the website.

Here is the complete code of what I coded (Picture 1) and which I want the modal Popup to appear when Next is clicked:

let selectedDestinations = [];

function toggleSelection(element) {
  if (element.classList.contains("selected")) {
    element.classList.remove("selected");
    selectedDestinations = selectedDestinations.filter(item => item !== element.textContent);
  } else {
    element.classList.add("selected");
    selectedDestinations.push(element.textContent);
  }
}

function continueToNextStep() {
  if (selectedDestinations.length === 0) {
    alert("Please select at least one destination.");
  } else {
    alert("Selected destinations: " + selectedDestinations.join(", "));
    // Add your logic to proceed to the next step here
  }
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
}

h1 {
  font-size: 24px;
}

.destination-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.destination {
  flex: 1;
  color: #202f1c;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  border-radius: 100px;
  border: 1px solid #A67c39;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  margin: 5px;
}

.destination.selected {
  background-color: #A67C39;
  color: #15100B;
}

button {
  background-color: #000000;
  color: white;
  border: none;
  border-color: #15100b;
  border-radius: 100px;
  margin-top: 20px;
  padding: 10px 70px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #A67c39;
}

@media screen and (max-width: 768px) {
  .destination {
    font-size: 12px;
  }
}

<div class="destination-options">
  <div class="destination" onclick="toggleSelection(this)">Serengeti National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Ngorongoro Crater</div>
  <div class="destination" onclick="toggleSelection(this)">Lake Manyara National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Tarangire National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Arusha National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Stone Town</div>
  <div class="destination" onclick="toggleSelection(this)">Beach Holiday</div>
  <div class="destination" onclick="toggleSelection(this)">Udzungwa National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Olduvai Gorge</div>
  <div class="destination" onclick="toggleSelection(this)">Mountain Kilimanjaro Climbing</div>
  <div class="destination" onclick="toggleSelection(this)">I have not yet decided, please help me decide exciting places</div>
  <div class="destination" onclick="toggleSelection(this)">Volunteer</div>
</div>
<button id="continue-btn" onclick="continueToNextStep()">Next</button>

I tried coding the modal Popup that would appear when “Next” button is clicked so that the modal Popup is triggered to appear. I expected the modal Popup to be fullWidth until a close icon is clicked to close the modal. Here is the code I tried coding:

let selectedDestinations = [];

function toggleSelection(element) {
  if (element.classList.contains("selected")) {
    element.classList.remove("selected");
    selectedDestinations = selectedDestinations.filter(item => item !== element.textContent);
  } else {
    element.classList.add("selected");
    selectedDestinations.push(element.textContent);
  }
}

function openModal() {
  if (selectedDestinations.length === 0) {
    alert("Please select at least one destination.");
  } else {
    const modal = document.getElementById("custom-modal");
    modal.style.display = "block";
    const selectedDestinationsElement = document.getElementById("selected-destinations");
    selectedDestinationsElement.textContent = "Selected destinations: " + selectedDestinations.join(", ");
    // Add your logic to proceed to the next step here
  }
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
}

h1 {
  font-size: 24px;
}

.destination-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align items: center;
  gap: 10px;
  text-align: center;
}

.destination {
  flex: 1;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  border-radius: 100px;
  border: 1px solid #A67c39;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  margin: 5px;
}

.destination.selected {
  background-color: #A67C39;
  color: #15100B;
}

button {
  background-color: #000000;
  color: white;
  border: none;
  border-color: #15100b;
  border-radius: 100px;
  margin-top: 20px;
  padding: 10px 70px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #A67c39;
}

@media screen and (max-width: 768px) {
  .destination {
    font-size: 12px;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
  margin: 10% auto;
  padding: 20px;
}

<div class="destination-options">
  <div class="destination" onclick="toggleSelection(this)">Serengeti National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Ngorongoro Crater</div>
  <div class="destination" onclick="toggleSelection(this)">Lake Manyara National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Tarangire National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Arusha National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Stone Town</div>
  <div class="destination" onclick="toggleSelection(this)">Beach Holiday</div>
  <div class="destination" onclick="toggleSelection(this)">Udzungwa National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Olduvai Gorge</div>
  <div class="destination" onclick="toggleSelection(this)">Mountain Kilimanjaro Climbing</div>
  <div class="destination" onclick="toggleSelection(this)">I have not yet decided, please help me decide exciting places</div>
  <div class="destination" onclick="toggleSelection(this)">Volunteer</div>
</div>
<button id="continue-btn" onclick="openModal()">Next</button>

Is it possible to use JavaScript on the client side to download an entire website consisting of approximately 100+ HTML pages as a PDF? I have a website with multiple HTML files, and I’ve added a Download button in the navbar. When the user clicks on the Download button, I want the entire website to be downloaded as a PDF. Are there any JavaScript solutions or libraries that can accomplish this task?

i get a problem trying to obtain a list of uploaders names for each chapter; i tried to get them using chapterSelector and a CSS SELECTOR “a.link.link-hover.link-primary”. It logs error thouth i tried using page$$eval also failed, maybe im using the wrong for loop?. Let you guys the updated code here:

    import playwright from "playwright";

(async  () => {
  let browser;
  let context;
  try {
    const url = "https://battwo.com/title/75019-blue-lock";
    const yearUrl = "https://www.anime-planet.com/manga/blue-lock"; // Replace with the URL containing the year element
    const userAgent =
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36";

      // Start the browser, observe the process.
    browser = await playwright.firefox.launch({ headless: true });

    // the data you want is baked into the static HTML, you can disable JS and block requests.
    context = await browser.newContext({ userAgent,javaScriptEnabled: false, }); 
    
    // Create a new page in a pristine context. Set ViewportSize.
    const page = await context.newPage();
    await page.route("**/*", (route) =>
      route.request().url() === url ? route.continue() : route.abort()
    );

    await page.goto(url);
    await page.waitForLoadState();
    await page.setViewportSize({ width: 640, height: 480 });

    // Set the timeout to 2 minutes
    page.setDefaultTimeout(120000);

    // Page to extract data. // wait for DOM (document object models) to load. // More load time for the page.
    await page.waitForLoadState(); // Wait for the page to finish loading
    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 60000 });

    // Wait for the elements to be present on the page. Using CSS Selectors.
    await page.waitForSelector("h3 > a.link.link-hover", { visible: true });// => const title
    await page.waitForSelector("div.relative.w-full p");// => const synopsis
    await page.waitForSelector("span.font-bold.uppercase.text-success");// => const status
    await page.waitForSelector("div.flex.items-center.flex-wrap");// => const genres
    await page.waitForSelector('a.link.link-hover.link-primary', { visible: true });// => const authors / const artists

    // Extract the data from the page.
    const title = await page.$eval(
      "h3 > a.link.link-hover",
      (element) => element.innerText
    );
        const synopsis = await page.$$eval("div.relative.w-full p", (elements) =>
      elements.map((element) => element.innerText.trim())
    );
        const status = await page.$eval(
      "span.font-bold.uppercase.text-success",
      (element) => element.innerText
    );
        const genres = await page.$$eval(
      "div.flex.items-center.flex-wrap",
      (elements) =>
        elements.map((element) =>
          element.innerText.replace(/n/g, ", ").replace(/,,/g, ",")
        )
    );
        const trimmedGenres = genres.map((genre) => genre.replace("(B)", "").trim());
    
        let elements = await page.$$("a.link.link-hover.link-primary");
        let indexOne = 0; // Replace with the desired index (authors)
        let desiredElementOne = elements[indexOne];
        const authors = await desiredElementOne.innerText();
    
        let indexTwo = 1; // Replace with the desired index (artists)
        let desiredElementTwo = elements[indexTwo];
        const artists = await desiredElementTwo.innerText();
        const trimmedArtists = artists.replace("(Art)", "").trim();
    
    // Open a new page to scrape the year element from another URL
    const yearPage = await context.newPage();
    await yearPage.goto(yearUrl, { waitUntil: "domcontentloaded", timeout: 60000 });
    
    // Wait for the selector to appear on the page.
    await yearPage.waitForSelector("div.pure-1.md-1-5 > span.iconYear", { visible: true });
    
    // Extract the innerText from the year element.
    const year = await yearPage.$eval("div.pure-1.md-1-5 > span.iconYear", 
    (element) => element.innerText.replace(/[-?]/g, "").trim());
    
    // Extract the textContent from the chapter-list and space-x-1 to get chapter and name.
    const chapterSelector = '[name="chapter-list"] [class="space-x-1"]';
    const chapters = await page.locator(chapterSelector).evaluateAll((elements) =>
      elements.map((element) => ({
        chapter: element.querySelector("a").textContent,
        name: element.querySelector("span").childNodes[2].textContent,
      }))
    );
    
    // Join the strings of chapter and name.
    chapters.forEach((chapter) => {
      chapter.chapterName = `${chapter.chapter} - ${chapter.name}`;
    });
    
    // Extract the href attribute from the chapter links
    const chapterLinks = await page.$$eval(chapterSelector, (elements) =>
      elements.map((element) => element.querySelector("a").href)
    );
    
    // Create an array of objects containing chapterName and chapterLink.
    const chapterData = chapters.map((chapter, index) => ({
      chapterName: chapter.chapterName,
      chapterLink: chapterLinks[index],
      }));

// Extract the uploader names for each chapter
const uploaderSelector = `${chapterSelector} a.link.link-hover.link-primary`;
const uploaderNames = [];
for (const chapterElement of await page.$$(chapterSelector)) {
  const uploaderElement = await chapterElement.$(uploaderSelector);
  const uploaderName = await uploaderElement.innerText();
  uploaderNames.push(uploaderName.trim());
}


    // Store the scraped data in an object.
        const scrapedData = {
          title,
          synopsis,
          status,
          year,
          genres: trimmedGenres,
          authors,
          artists: trimmedArtists,
        };
        console.log(scrapedData);
        console.table(chapterData);
        // Print the list of uploader names
        console.table("Uploader Names:", uploaderNames);
        console.log("Total chapters:", chapters.length);
        
      } catch (e) {
        console.error(e); // If an error occurs, log it
      } finally {
        console.log("...Scraping");
    
        // Wait for a random time between 8 to 15 seconds.
        const delay = Math.floor(Math.random() * (15000 - 8000 + 1)) + 8000;
        await new Promise((resolve) => setTimeout(resolve, delay));
        if (context) await context.close();
        if (browser) await browser.close();
      }
    })();

I have a search (ion-searchbar) on my ionic app
I’m trying to filter object keys by value
I want it to return only uniqueValue equals 2 for example

My Array is:

{
    "קבוצה 1": [{
            "Code": "0300",
            "Codegruppe": "קבוצה 1",
            "Kurztext": "ניסיון1",
            "uniqueValue": "1",
            "icon": "heart-outline"
        }
    ],
    "קבוצה 2": [{
            "Code": "0300",
            "Codegruppe": "קבוצה 2",
            "Kurztext": "ניסיון2",
            "uniqueValue": "2",
            "icon": "heart-outline"
        }
    ]
}

I’ve been getting an issue with screen sharing in the Google Chrome browser which says

“A participant could not get the screen track from userMedia event,
exception: Permission denied”

Screen recording is enabled for the browser and all the other permissions were allowed but strangely I get “Permission denied” for that specific tab.

Screen sharing is working fine for other tabs which doesn’t have the same origin URL and the other windows as well.

Does anyone has a clue why that is?

Please give me suggestion regarding HTML Code with css

facing issue regarding on image not overlap in hover.

So, I shared my page url . Please solve my issue and clear my mistake and give me exact solution . Thanks in advance.

http://htmldesign.checksample.co.uk/

i have two modals the one to confirm the payment, if user accepts it opens the other modal to allow uploading the receipt to be sent to the client, now consider a situation i want to allow users to cancel the upload even after selecting the file of the receipt, by preventing the form from submitting

below is my code for the template and js, but the form is still submitting

                            <div class="modal fade" id="confirmationModal" aria-hidden="true" aria-labelledby="confirmationModalLabel" tabindex="-1">
                              <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="confirmationModalLabel">Are you sure?</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                  </div>
                                  <div class="modal-body">
                                    Confirm the required amount is received for this service
                                  </div>
                                  <div class="modal-footer">
                                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button class="btn btn-primary" data-bs-target="#fileUploadModal" data-bs-toggle="modal" data-bs-dismiss="modal">Yes</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            
                            <div class="modal fade" id="fileUploadModal" aria-hidden="true" aria-labelledby="fileUploadModalLabel" tabindex="-1">
                              <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                  <form method="POST" action="{% url 'approve-centre-renewal-payment' query.centre_renewal.id %}" id="receiptUploadForm" enctype="multipart/form-data">

                                  <div class="modal-header">
                                    <h5 class="modal-title" id="fileUploadModalLabel">Receipt</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                  </div>

                                  <div class="modal-body">
                                    
                                        {% csrf_token %}
                                      <div class="form-group">
                                        <label for="receipt">Upload receipt</label>
                                        <input type="file" id="receipt" name="receipt" class="form-control" accept="application/pdf" required>
                                      </div>
                                    
                                  </div>
                                  <div class="modal-footer">
                                    <button class="btn btn-secondary" data-bs-dismiss="modal" id="CancelSubmission">Cancel</button>
                                    <button class="btn btn-primary" id="uploadReceiptButton" >Upload</button>
                                  </div>

                                </form>

                                </div>
                              </div>
                            </div>

                          </div>
                           




let ApprovePayment = document.getElementById('uploadReceiptButton')
if(ApprovePayment){
    
    CancelConfirmation = document.getElementById('CancelConfirmation')
    if(CancelConfirmation){

        CancelConfirmation.addEventListener('click', function (event) {
            // Prevent the form submission            
            event.preventDefault();            

        });

    }


    ApprovePayment.addEventListener('click', ApprovePaymentFunction);
}

function ApprovePaymentFunction(event) {
    
    event.preventDefault(); // prevent the link from opening immediately
    var receiptUploadForm = document.getElementById('receiptUploadForm')
    
    
    Swal.fire({
        title: 'Are you sure?',
        text: 'Confirm that the correct Receipt is sent to the Applicant',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes!'
    }).then((result) => {

        // Remove the Cancel listener, so the form submits when "Yes" is clicked
        CancelConfirmation.removeEventListener('click');
        if (result.isConfirmed) {

            receiptUploadForm.submit();
        }
    });

}

I’m working on a project that includes a Geo Map Chart, something like this

On hovering a country I show specific values that I receive from the Backend for every country

The Problem is the map according to my project manager is wrong, since the our product marketing is for India, we can’t show the wrong map of India. So I’m told to edit these coordinates & include the disputed areas of India in the map, i.e this area

I have found various geoJson editors but they expect me to draw the complete map of India with polygons, I wanna know how exactly are geoJson files meant to be edited, I don’t think I should be editing vector coordinates inside the file myself

here’s the geoJson file hosted on s3
https://s3-us-west-2.amazonaws.com/s.cdpn.io/95368/world.json

I have recently upgrade to Dygraph v2.2.1 from v1.1.1 and the option axisLabelColor to color the labels of the axis is not there anymore. Was it substituted by another option or this option is not available anymore?

My current solution was to change the color through the class of the elements (dygraph-axis-label-y) but I am wondering if there is a better solution.

I am using Apache ECharts and I don’t want to show the labels of the y axis except the min and max.

Here is an screenshot, I want to hide all except 1 and 625:

Currently, I have this settings for y axis:

{
 type: "log",
 min: 1,
 logBase: 5,
}

I tried to set “splitNumber” to 1 but the chart is showing 9.8M as max when the expected is 625:

// atom.js

export const cropPath = atom({
  key: "cropPath",
  default: []
});

export const prevImgState = atom({
  key: "prevImgState",
  default: []
});

export const croppedImgState = atom({
  key: "croppedImgState",
  default: []
});

// TopMenu.jsx

const cropPaths = useRecoilValue(cropPath);
const setImageFilesState = useSetRecoilState(prevImgState);


const [autoSiTiVisible, setAutoSiTiVisible] = useState(false);

const handleCalculatingAutoSiTiClick = () => {
      setAutoSiTiVisible(true);
};


 const readDir = (dirPath) => {
      return new Promise((resolve, reject) => {
        fs.readdir(dirPath, (err, files) => {
          if (err) {
            reject(err);
          } else {
            const allFiles = [];
            const promises = [];

            files.forEach((item) => {
              let newPath = path.join(dirPath, item);

              promises.push(
                new Promise((resolve, reject) => {
                  fs.stat(newPath, (err, stats) => {
                    if (err) {
                      reject(err);
                    } else {
                      if (stats.isDirectory()) {
                        readDir(newPath)
                          .then((subFiles) => {
                            allFiles.push(...subFiles);
                            resolve();
                          })
                          .catch(reject);
                      } else {
                        allFiles.push(newPath);
                        resolve();
                      }
                    }
                  });
                })
              );
            });

            Promise.all(promises)
              .then(() => {
                resolve(allFiles);
              })
              .catch(reject);
          }
        });
      });
    };
    const fetchImageFiles = async (dirPath) => {
      try {
        const allFiles = await readDir(dirPath);
        console.log("allFiles: ", allFiles);
        return allFiles;
      } catch (error) {
        throw error;
      }
    };

    const processDirectory = async () => {
      try {
        const allFiles = await fetchImageFiles(cropPaths[0]);
        setImageFilesState(allFiles);
      } catch (error) {
        console.error("Error:", error);
      }
    };

    useEffect(() => {
      processDirectory();
    }, [cropPaths[0]]);

return (
<>
 <Button onClick={handleCalculatingAutoSiTiClick}>AUTO SITI</Button>
{autoSiTiVisible && (
          <WidthHeightInputModal
            visible={autoSiTiVisible}
            onCancel={() => setAutoSiTiVisible(false)}
            onConfirm={autoCalculateSiTi}
          />
        )}
</>
)

// SegmentList.jsx

const imageFilesStates = useRecoilValue(prevImgState);

....

return (
<CroppedImageViewer
  prevImg={imageFilesStates}
...
/>
)

// CroppedImageViewer.jsx

import { Button, Image, Modal, Popover } from "antd";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { v4 as uuidv4 } from "uuid";

const CroppedImageViewer = ({
  prevImg,
....
}) => {
  console.log("prevImg", prevImg);



export default CroppedImageViewer;

In the TopMenu.jsx file, set the

cropPaths[0] is a value of type string called ‘xxxx/1/splitted_1’ and we used a function called readDir to navigate to the subfolders within this splitted_1 folder.

And to get the images inside the subfolders, we want to use the fetchImageFiles function and the processDirectory function to fetch the images.

The issue I’m currently having is that I’m getting an error within the processDirectory function, even though I’ve conditioned it with typeof cropPaths[0]==='string'.

Also, when I use useEffect, the result is the same.

When I console check the imageFilesStates in SegmentList.jsx, it is initially an empty array, but when I press Ctrl+s (save code) once more in TopMenu.jsx, the imageFilesStates are showing as values filled with a list of images.

I would like to know what is wrong

I have a get request where i get data from the server and this is how it looks

 getStreakConfigurations(){
    this.loyaltyPointsService.getStreakConfigurations().subscribe( data => {
      this.streakConfiguration = data
 console.log(this.streakConfiguration,'check')
    }
       )
  }

when i console.log i get

{id: 8, tenantId: null, days: 2, points: 3, tier: 'MID'}

but when i check the typeof streakConfid.id it says undifiend

console.log(typeof this.streakConfiguration.id);

why is it undefined and why is it not a number

I am trying to learn woocommerce and googlesheet app script programming where I am getting this TypeError: Cannot destructure property ‘parameters’ of ‘e’ as it is undefined.
First I was getting values but now i am getting DoPost function Failed.
I tried to get idea from github

I am working on webhook to googlesheet and DoPost() function seems Failed . first it was giving me results but now it failed

im a newbie in javascript so any suggestion would be much appreciated
so

i have this array

var mixedArray = [[“online”,”abc”,”def”],[“offline”,”ghi”,”jkl”],[“online”,”mno”,”pqr”],[“offline”,”stu”,”vwx”] ]

i want to output like this:

var array1 = [[“online”,”abc”,”def”],[“online”,”mno”,”pqr”]]
var array2 = [[“offline”,”ghi”,”jkl”],[“offline”,”stu”,”vwx”]]

is there any method to make that solution?
thank you in advance

I would like to have some easy way to support me while rewriting legacy functions/methods.

Say we have a legacy function and a rewritten one:

var legacyFunction = function() { return 1; };
var reloadedFunction = function() { return 1; };

Is it possible to compare legacyFunction and reloadedFunction side-by-side, in the context where they are executed in production?

I have in mind something along those lines:

return rewriteLegacyCode((usagePerDevice, steps) => {
    // broken implementation
   for (let i = 0; i < inclusiveVolumeSteps.length; i++) {
       if (usage >= steps[i].volume && usage < steps[i + 1].volume) {
           return inclusiveVolumeSteps[i];      
       }
    }
    return undefined;
}).withNewVersion((usagePerDevice, steps) => {
    return steps.findLast((step) => step.volume <= usagePerDevice});
})
.compareResults(usagePerDevice, inclusiveVolume)
.trustNewVersion();

I am looking for a nice implementation