Category: javascript

Category Added in a WPeMatico Campaign

How do I trim excess decimals without rounding?

The first output is correct 65.616, the second one should be 6.096. How do I trim the excess decimals without any rounding on the number?

I tried:

document.querySelector(".meters-value").innerHTML=Math.trunc((input/3.2808) * 200)/200;

But this gave me 6.095, not 6.096

let input = 20;

function converter(input) {
    document.querySelector(".feet-value").innerHTML=input*3.2808; // OUTPUT = 65.616
    document.querySelector(".meters-value").innerHTML=input/3.2808; // OUTPUT = 6.0960741282613995
} converter();

how do i over put something in css?

I am creating a modal and I need to place the modal above

let buttonOpen = document.querySelector(".button-open");
let buttonClose = document.querySelector(".button-close");
let modal = document.querySelector(".modal");

buttonOpen.addEventListener("click", () => {
  modal.classList.add("show-modal");
});

buttonClose.addEventListener("click", () => {
  modal.classList.remove("show-modal");
});
body {
  padding: 0;
  margin: 0;
}


/* for open the modal*/

#container {
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.modal {
  display: none;
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.show-modal {
  display: block;
  z-index: 1;
}
<!-- for open the modal -->
<div id="container">
  <button class="button-open">Open Modal</button>
</div>

<div class="modal">
  <div class="modal-content">
    <h3>Title a modal</h3>
    <button class="button-close">Close Modal</button>
  </div>
</div>

photo the result:

Image

and I want the box to be on top of the content
so that it is not below the content but above it, as if it were a layer above my real page content

how do i change the .innerHTML of a html page after a link has been clicked on a different html page?

i have a problem i am trying to solve. i am trying to recreate the music video page (page 1) of Capital dreams pictures here is the page. the issue have now is that, when you click on the play button, it takes you to a different video page (page 2) corresponding to the link clicked here is the link for that. i don’t want to single handedly code that page (page 2) for each of the link on the music video page (page 1). is there a way i can change the content of (page 2) when i click the play button link on (page 1).

here is the code for (Page 1). N.B i render the images using javascript

<body class="body">
    <header>
        <p>your logo</p>
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="video.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="musicvid.html" class="nav-link">Music Videos</a></li>
                <li class="nav-item"><a href="film.html" class="nav-link">Film</a></li>
                <li class="nav-item"><a href="showreels.html" class="nav-link">Show Reels</a></li>
                <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
            </ul>
        </nav>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </header>
    <h3>
        <p>music videos</p>
    </h3>
    <main>
        <section  class="dera">
            <!--------------------render images here hopefully -------------->
        </section>
    </main>
    
    <footer>
        <p>
            Copyright Simple <small>2021 - </small>
        <small id="demo"> </small>
        </p>
    </footer>
    <script>
        const d = new Date ();
        document.getElementById("demo").innerHTML = d.getFullYear();
    </script>
    <script src="array.js"></script>
    <script src="video.js"></script>
    </body>

here is the html for (page 2)

<body>
    <header>
        <p>your logo</p>
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="video.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="musicvid.html" class="nav-link">Music Videos</a></li>
                <li class="nav-item"><a href="film.html" class="nav-link">Film</a></li>
                <li class="nav-item"><a href="showreels.html" class="nav-link">Show Reels</a></li>
                <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
            </ul>
        </nav>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </header>
    <h3>
        <p>video name here</p>
    </h3>

    <main>
    <div class="container">
        <div class="videocontainer">
            <iframe width="700" height="700" 
            src="https://www.youtube.com/embed/OFKBep95lb4" title="YouTube video player"
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
            </iframe>
        </div>

        <div class="cat-container">
            <div class="cart-contain">
                <div class="category">
                    <p><b>category</b>: <span>Music Videos</span></p>
                </div>
                <div class="date">
                    <p><b>date</b>: <span>December 31, 2020</span></p>
                </div>
            </div>
        </div>
    </div>
    </main>
    <section>
        <div class="join">
            <p>previous</p>
            <i class="fab fa-instagram"></i>
            <p>next</p>
        </div>
    </section>
    <footer>
        <p>
            Copyright Simple <small>2021 - </small>
            <small id="demo"> </small>
        </p>
        <a href="music-page.html"><i class="fas fa-play"></i></a>
    </footer>
    <script>
        const d = new Date();
        document.getElementById("demo").innerHTML = d.getFullYear();
    </script>
    <script src="array.js"></script>
    <script src="video.js"></script>

the array

 const images = [
    {
        id: 0,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 1,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 2,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 3,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 4,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 5,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 6,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 7,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 8,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 9,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 10,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 11,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 12,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 13,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 14,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 15,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 16,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 17,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },
]

const images1 = [
    {
        id: 0,
        chidera: "https://www.youtube.com/embed/OFKBep95lb4",
    },

    {
        id: 1,
        chidera: "https://www.youtube.com/embed/JqFrYYIKl_4",
    },

    {
        id: 2,
        chidera: "https://www.youtube.com/embed/OFKBep95lb4"
    },

]

the javascript

// select elements
    const burger =  document.querySelector(".burger");
    const navMenu = document.querySelector(".nav-menu");
    const navLink = document.querySelectorAll(".nav-link")

    burger.addEventListener("click",   function () {
   //toggles the burger
    burger.classList.toggle("is-active");

   //toggles the nav menu
    navMenu.classList.toggle("active");
});
    //removes well, you should know
    navLink.forEach(n =>  n.addEventListener("click", function () {
  burger.classList.remove("is-active");
  navMenu.classList.remove("active");
}))

//wahala dey to render images like this. somebody save me!!!!!!!!!
//this actually worked
    const dera = document.querySelector(".dera");
    const videoContainer = document.querySelector(".videocontainer");

    function renderImages() {
    images.forEach((image) => {
    dera.innerHTML += `<div>
                <!--------render images   here hopefully -->
                <img  src="${image.imgsrc}" alt="">
                <p>${image.videoName}</p>
                <samp> Music Videos </samp>
                <a href="${image.href}" ><i class="fas fa-play fa-3x"></i></a>
            </div>
            `
  })
}
    renderImages();

    //when users click on the play button,
    //i want to change the .innerHTML of the music video page :)
    //for music page thing
    //this is a massive fail tho
    console.log(videoContainer)
    const playButton = document.getElementsByTagName("i");
    const arr = [...playButton];
    console.log(arr)
    arr.forEach((button) => {
  button.addEventListener("click",  function () {
     images1.forEach((_thing) => {
      if (image.id === _thing.id) {
        videoContainer.innerHTML += `
            <iframe width="700"  height="700" 
            src="${_thing.chidera}" title="YouTube video player"
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
            </iframe>
    `
      }
      else {
        alert('jdhcodshdioshdioES')
      }
    })
  })
  });

please, how do i go about it? Thank you 🙂

adding parameter from html form to jquery string

I am trying to add to the below async call in javascript which sends parameter q=<query>, the second parameter l=<lquery>, but I don’t see it sent out.

var searchbox = $('input#search');
var langquery = $('input#fav_language');
var timer = 0;

// Executes the search function 250 milliseconds after user stops typing
searchbox.keyup(function () {
  clearTimeout(timer);
  timer = setTimeout(search, 250);
});

async function search() {
  // Clear results before searching
  noresults.hide();
  resultdiv.empty();
  loadingdiv.show();
  // Get the query from the user 
  let query = searchbox.val();
  // Only run a query if the string contains at least three characters
  if (query.length > 2) {
    let lquery = langquery.val();   
    // Make the HTTP request with the query as a parameter and wait for the JSON results
    let response = await $.get(apigatewayendpoint, { q: query, l: lquery, size: 25 }, 'json');

I can’t fix Heroku “Could not find a required file, Name: index.html” error

I am new to Heroku. I tried deleting .gitignore and rearranging my files around, but it still gives me that error. I have a program with React.js as the front end and Node.js as the backend. I need this to deploy to Heroku. The image below shows the error I get.

Image of the error I get

In my Node.js code, I tried specifying where Heroku should in “client” folder for the “index.html” file. This is my node.js code:

//code based off of:
// https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

const express = require('express');
const request = require('request');

const app = express();
const apiKey = 'api-key-here';

// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../client/build')));

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



app.get('/getCoinInfo', (req, res) => {
  console.log('The request has been received!!')
  request(
    { url: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=' + apiKey},
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).json({ type: 'error', message: err.message });
      }
      res.json(JSON.parse(body));
    }
  )
});

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

Also here is my file structure.

enter image description here

What are your suggestions to fix this problem?

How to deselect a checkbox using two condition/if statements (one a dropdown select and one a radio)

I’m trying to set this condition in a form:

If the #Size (from a dropdown selection) = ‘extra-cab’ AND a radio select button called ‘canopy-14x-select’ (from a group of radio buttons called ‘Canopy’) are both selected, then the checkbox with a class called .rack-kit is deselected.

I’m not sure how to nest these into each other, I’ve attempted it below but it isn’t working.

Any help would be much appreciated.

$('#Size').on('change', function() {
         if (this.value == 'extra-cab') {
                if ($(this).attr("id") == "canopy-14x-select") {
                    $('.rack-kit input[type="checkbox"]:checked').prop('checked', false).trigger('change');
                }
            }

Thank you in advance 🙂

Escaping words in between quotes [closed]

I am working on a small project using yandex translate api for school.
My code has an input field where you type a phrase which will be translated into Russian or other language.
There are words that I would like to escape from translation by adding them in double-quotes.
There are thousands of words that I would like to escape and adding them into an object or array isn’t an option. What I am looking for is to send the phrase to yandex including words in double-quotes and upon return of translated text, to have them words which are still in double-quotes replaced with original words.
I would be easy if in that sentence or phrase would be only one word in double-quotes but there might be more than 5 or 10.
I don’t know if it makes any sense but here’s a small example.

input string: This is Anton, he is my best "friend". We met at a local "club" where we played some "snooker".

output string: Это Антон, он мой лучший "friend". Мы встретились в местном «club», где играли в «snooker».

Apologies for not adding any code as I do not have access to my code at the moment.

JavaScript. Google Chrome Extension. How do I save the page state with javascript execution results and restore it later?

I’m developing a chrome extension for YouTube.
The extension writes alternative subtitles with different behavior.
The subtitle file is taken from YouTube by the link.
In order for me to be able to show subtitles by the time the video starts playing, I have to download the subtitle files before the video loads.
At low Internet speed, JSON files of subtitles are loaded simultaneously with the YouTube page for a very long time.
I use this approach.
To prevent my extension from competing with YouTube scripts, my extension:

  • calls window.stop() at the very beginning of page loading.
  • After stopping the download, I download the files I need.
  • Then the extension reloads the page.

But I would not want to reload the page if there are entries in window.history.
Of course, I would just like to block the page rendering thread for example by window.renderPause() and then resume by window.renderResume(). I would not use window.stop(). But JavaScript does not provide such an opportunity.
How do I save the page state with JavaScript execution results and restore it later?
This code doesn’t work for youtube. JavaScript of YouTube does not start.

let clonedHtml = document.documentElement.cloneNode(true);
let clonedWindow = Object.assign({}, window);
document.documentElement.innerHTML = "";
window = clonedWindow;
document.replaceChild(clonedHtml, document.documentElement);

I can not use window.history.back() or window.history.forward() because window.stop() does not allow to load a page.

How do I group muiltiple record in array to object in Javascript? [duplicate]

hope everyone doing well!

Is there anyone in here who can help how to group the below array to object sort by the second item of each record in Javascript?

i.e: "{first},{second},{third},{fourth}" -> “bob,627,1973,Amsterdam”

Take for example this array:

[
  'bob,627,1973,amsterdam',
  'alice,387,885,bangkok',
  'alice,355,1029,barcelona',
  'alice,587,402,bangkok',
  'charlie,973,830,barcelona',
  'alice,932,86,bangkok',
  'bob,188,989,amsterdam'
];

expected result:

{
  alex: [
    [ 355, '1029', 'barcelona' ],
    [ 387, '885', 'bangkok' ],
    [ 587, '402', 'bangkok' ],
    [ 932, '86', 'bangkok' ],
  ],
  bob: [ 
    [ 188, '989', 'amsterdam' ],
    [ 627, '1973', 'amsterdam' ],
  ],
  charlie: [
    [ 973, '830', 'barcelona' ],
  ],
}

Shopify adding two products to cart with one checkout button

So I have a bundle I created to add two products to cart once those products are selected. I want them to be added to cart at the same time. I’m currently only getting one product being added, with the name=”id”. How can I create the values in input for both to checkout?

Here’s my form:

<form method="post" action="/cart/add" class="col-button ">
                    <input id="idPrice" type="hidden" name="id" value="" />
                    <input id="designPrice" type="hidden" name="id" value="" />
                    <input min="1" max="2" type="hidden" id="quantity" name="quantity" />
                      <button name="checkout"  {%unless product.available %}style='margin-bottom:20px;'{% endunless %}type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="collection-add-to-cart {% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
                        {{ 'layout.general.checkout' | t }}
                      </button>
                 </form>

Thanks in advance!

window.onscroll from webpage not working on react-native-webview

I’m currently using https://github.com/react-native-webview/react-native-webview for a website to load within the app. The app is essentially a glorified website so everything in implemented on webapp.

Anyway, I’ve bunch of stylings changes based on window.onscroll function in webapp.
Obviously they work just fine when loaded from browser, whether it be mobile or desktop.

My problem is the react native web view doesn’t respond to any of those functions from window.onscroll.
I tried to do something like injectJavaScript inside but there are many on scroll functions and that will basically mean i am replicating same thing from web to ReactNative just to inject JS. Even then, some variables are dynamic so injectJavaScript essentioally woudln’t work unless that injected JS triggers on scroll function somehow.

How can I solve this issue?

TLDR; window.onscroll function on webview is not being triggered when loaded from webview.

How to solve localstorage exeeded the quota error in Reactjs

Regarding redux-localstorage-simple in React.js/Typescript, exceeded the quota error occured when trying to store a huge amount of data(It’s actually an array of objects related to tilemap coordinate data).
I’m sure it is because the local storage limit for a certain host has been exceeded.

Reloading the page initializes the redux storage, so I had to use the redux-localstorage-simple library to avoid data loss.

In this case, which alternative should I use to avoid exceeded the quota error?

How can I get a random item from multiple arrays based on a checkbox?

I want to only show the text from the arrays that are selected with the checkboxes (so, if i only want txt and ran, it only shows options from those arrays)

HTML:

<input type="checkbox"> txt<br>
<input type="checkbox"> test<br>
<input type="checkbox"> ran
<br>
<br>

<button onclick="myFunc()">One Character</button>

<p id="tst">
sum text lol
</p>

Javascript:

 function myFunc() {
     let txt = ["txt1", "txt2", "txt3"];
     let test = ["test1", "test2", "test3"];
     let ran = ["ran1", "ran2", "ran3"];

     let tst = txt[Math.floor(Math.random() * txt.length)] + "<br><br><br>" + test[Math.floor(Math.random() * test.length)] + "<br><br><br>" + ran[Math.floor(Math.random() * ran.length)];
     document.getElementById("tst").innerHTML = tst;
 }

Code: https://jsfiddle.net/RoseLovesGreene/ps17u8yd/6/

I’d also like to be able to show it in a random order so that each array doesn’t have it’s own line.

For each await push into global variable returns undefined [duplicate]

My code below loops through a zip file called a global variable zipArray, then adds the file contents into zipFileArray. However, when I console.log(zipFileArray) it returns undefined:

        await zip.forEach(async (relativePath: any, file: any) => {
            zipArray.push(file)
        })
        console.log(zipArray)
        var zipFileArray: any[] = []
        await zipArray.forEach(async (file: any) => {
           console.log("reached")
            const file2 = await zip.file(file.name).async("string")
            zipFileArray.push(file2)
        })
        console.log("zipFileArray:" + zipFileArray)

Is there a way I could get a email when someone submits my contact form using JavaScript?

I made a contact form using HTML and JavaScript. The text editor I am using right now only supports HTML and JavaScript CSS and markdown files. I made contact form using HTML and JavaScript but I don’t know how to make the users content go into my mailbox. Like I don’t know how the email could come to my mailbox so I could see their issue. Here’s my code for the contact form.
HTML:


<!DOCTYPE html>
<html>
<head>
<title>Contact Form using JavaScript</title> <!-- Include CSS file here -->
<link href="css/form.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="form_sample"></div> <!-- Include JS file here -->
<script src="form.js"></script>
</div>
</body>
</html>

Here’s the JavaScript.

// Fetching HTML Elements in Variables by ID.
var x = document.getElementById("form_sample");
var createform = document.createElement('form'); // Create New Element Form
createform.setAttribute("action", ""); // Setting Action Attribute on Form
createform.setAttribute("method", "post"); // Setting Method Attribute on Form
x.appendChild(createform);

var heading = document.createElement('h2'); // Heading of Form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);

var line = document.createElement('hr'); // Giving Horizontal Row After Heading
createform.appendChild(line);

var linebreak = document.createElement('br');
createform.appendChild(linebreak);

var namelabel = document.createElement('label'); // Create Label for Name Field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);

var inputelement = document.createElement('input'); // Create Input Field for Name
inputelement.setAttribute("type", "text"); inputelement.setAttribute("name", "dname");
createform.appendChild(inputelement);

var linebreak = document.createElement('br');
createform.appendChild(linebreak);

var emaillabel = document.createElement('label'); // Create Label for E-mail Field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);

var emailelement = document.createElement('input'); // Create Input Field for E-mail
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);

var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);

var messagelabel = document.createElement('label'); // Append Textarea
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);

var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);

var messagebreak = document.createElement('br'); createform.appendChild(messagebreak);

var submitelement = document.createElement('input'); // Append Submit Button
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement); ```

Any help is appreciated.