Category: javascript

I need to make a multi item carousel with youtube videos, I found one example and made it work for me using bootstrap 5 carousel and cards, but the animation when de carousel slides is not fluid, the problem is the cards overlaps when the carousel slide, I tried to change the values on transform: translateX(%) but the animation is not that fluid, any advice on this?

This is the carosuel code, this displays 3 cards with the videos and the tittle in the bottom, as you can see I’m using iframe to call the youTube videos

<!--Carrusel videos-->
      <div class="col-lg-12 ms-2 mt-5">
        <div class="mx-auto my-auto justify-content-center">
          <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/rf8vM_X1g9U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="fs-5 fw-bold">Experiencia John Deere, Expo Agroalimentaria 2021</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/3xq7z7WBOGU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex text-center align-items-center justify-content-center">
                        <p  class="fs-5 fw-bold">Cosecha en la mira, Ensiladora 8300i</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/9PBeqHEopLs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">Cosecha en la mira, CH570</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/1jeHyrRskdk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">"EL INGE" Arandas, Jalisco</p>
                      </div>  
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/KauOtgNuzQQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">"EL INGE" Ayotlán, Jalisco</p>
                      </div>  
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        </div>
      </div>
      <!--Carrusel videos-->

This is the CSS where i have the transform: translateX()%

#cardHeight {
  height: 80px;
}

@media only screen and (min-width: 768px) {
  iframe{
    height: 24em;
  }
  .card{
    width: 100%;
  }
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
      display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
transform: translateX(0);
}

An finally the JS for the carousel

  let items = document.querySelectorAll('.carousel .carousel-item')

  items.forEach((el) => {
    const minPerSlide = 3
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

I’ll leave an image of my project to show you how this carousel is displayed in my project
carousel-image

In the code below the error is never caught:

const fn = () => {
  try {
    setTimeout(() => { throw new Error('An exception is raised') }, 10)
  } catch (error) {
    console.error({ error })
  }
}
fn()

The following is a solution:

const fn2 = () => {
  const errorFn = (error) => console.error({ error })
  setTimeout(() => {
    try {
      throw new Error('An exception is raised')
    } catch (e) { errorFn(e) }
  }, 10)
}
fn2()

The downside to this solutions is that it has to be implement in the function within setTimeout. That’s fine if one controls the code, but if users are supplying the code and calling setTimeout and don’t implement appropriate error handling, it could bring down one’s server!

Another solution is process.on('uncaughtException,... but that loses the context of the originating sync call that initiated the async function. Unless there is some clever way to supply that context?

Are there any other ways to catch async errors with context to the originating sync code?

Could one set a default error handler for a particular async branch – that’s catches all unhandled errors that may occur in that async branch?

I’m starting to learn how to make a website using HTML,css, and js. When I try to open my html file on google chrome to see if my js function is working it says “Uncaught ReferenceError”. I than went to sources and realized that my javascript file isn’t there. I’m not sure what I am doing wrong and why my js file isn’t in sources.

Thank you for the help!

I am using React and have built an email form. I currently have this class: <div className="msg">Message has been sent</div> but only want it to appear when the message has successfully sent. So only when the following resolves as status: true. How can I target this using only React/CSS?

  .post('/api/email', values)
  .then((res) => {
    console.log("Server responded")
    setValues({
      name: "",
      email: "",
      message: "",
      status: true
    })
    .catch(err => {
      console.log(err);
      window.alert("Email not sent")
    });```

Luckily this is a purely JS task and I also have a full instruction for it, which kinda simplifies solving it. I imagined how I can create something that is needed, but even after searching everywhere I couldn’t figure it out. This “odd” one made me write a question to our friendly programmer team!

I would be grateful if you can write a working code for the task below and it surely could be an achievement. You know that otherwise it may throw some unexpected errors. I include it in details to get rid of any uncertainty :

Write a function, nicknameGenerator that takes a string name as an argument and returns the first 3 or 4 letters as a nickname.

If the 3rd letter is a consonant, return the first 3 letters.

nickname("Robert") //=> "Rob"
nickname("Kimberly") //=> "Kim"
nickname("Samantha") //=> "Sam"

If the 3rd letter is a vowel, return the first 4 letters.

nickname("Jeannie") //=> "Jean"
nickname("Douglas") //=> "Doug"
nickname("Gregory") //=> "Greg"

If the string is less than 4 characters, return “Error: Name too short”.

Notes:

Vowels are “aeiou”, so discount the letter “y”.
Input will always be a string.
Input will always have the first letter capitalised and the rest lowercase (e.g. Sam).
The input can be modified

i have a question if it is possible to make all youtube embeds to be automatically converted to regular webm in javascript/css? I have looked in many places but have not found this answer anywhere.

I am trying to have my arrays sorted by the indexes of strings in another array.

I am getting back the following:

const matchtoThisArray:

['11006', '10240', '10142', '10309', '10367', '10724', '10741', '10362', '10919', '11115', '10590', '10179', '18510', '10051']

if there is a match in one of my arrays, the output will be in that position.

My default output starts with this below, which is at index 0. My desired output is that it would at the end since “10051” is at the end in the “matchThisArray”

     0: Array(36)
        0: {TMSId: 'EP009285440323', rootId: '21253358', time: '17:00', dur: 'PT00H30M', prgSvcId: '10051', …}
        1: {TMSId: 'EP035579760050', rootId: '21253391', time: '17:30', dur: 'PT00H30M', prgSvcId: '10051', …}
        2: {TMSId: 'EP033168400060', rootId: '21166708', time: '18:00', dur: 'PT01H00M', prgSvcId: '10051', …}

1: Array(24)
0: {TMSId: 'EP014781492754', rootId: '21041927', time: '16:00', dur: 'PT01H00M', prgSvcId: '10142', …}
1: {TMSId: 'EP006062994294', rootId: '21041931', time: '17:00', dur: 'PT01H00M', prgSvcId: '10142', …}
2: {TMSId: 'EP041682710002', rootId: '21418098', time: '18:00', dur: 'PT01H00M', prgSvcId: '10142', …}

Filtering method that does not work:

const criteria = ['11006', '10240', '10142', '10309', '10367', '10724', '10741', '10362', '10919', '11115', '10590', '10179', '18510', '10051']
      
    const filterPrgs = resultSchedules.map((rows) => {
            return rows.map((column) => {
              return column;
            });
          });
          const filtered = filterPrgs.filter((obj) => {
           return criteria.indexOf(obj.prgSvcId) >= 0;
          });

I’m trying to learn destructuring to create an object from function inputs. I’d do it like this normally:

  const createContact = (name, email, phone) => {
    const newContact = {
      name: name,
      email: email,
      phone: phone
    };
    console.log(newContact);
  };

  createContact("virge", "[email protected]", "1234555555");

But when I try to assign these values using destructuring I get an error “Identifier ‘name’ has already been declared.”

  const createContact = (name, email, phone) => {
    const { name, email, phone } = newContact;
    console.log(newContact);
  };

  createContact("virge", "[email protected]", "1234555555");

How can I fix this?

I’m having a hard time to express my problem, take this following code for exemple.

class Foo {}

class Bar extends Foo {}

const myFct = (bar: typeof Bar) => {
    if(bar instanceof Foo) { 
        // I want to check if Bar extends Foo 
        // bar is not an instance so instanceof won't do it
    }

}

How I can check the class Bar extends Foo from a typeof ?

I have a class of dropdowns — .selMapField — and I want to select the dropdown that has a specific value. For instance:

const myattr=$(`.selMapField[value="MYSKU"]`).attr(`x`);

I’m using SendBird Javascript SDK createMyGroupChannelListQuery() and the instance’s next() method to retrieve the list of group channels. However, it will return the list only one time after initialized the instance, the next time it gets called, it result is always an empty array. Since I need to fetch the channels multiple times I need to have the full list of channels always. Please let me know if you have experienced this.

// Retrieve a list of channels
var listQuery = sb.GroupChannel.createMyGroupChannelListQuery();
listQuery.includeEmpty = true;
listQuery.order = 'latest_last_message'; 
listQuery.limit = 100;   // The value of pagination limit could be set up to 100.

if (listQuery.hasNext) {
    listQuery.next(function(groupChannels, error) {
        if (error) {
            // Handle error.
        }

        // A list of group channels is successfully retrieved.
        groupChannels.forEach(channel => {
            ...
        });

        ...
    });
}

I have used

let copy = true;
export const textPaste = () => copy;

function myFunction() {
  
  navigator.clipboard.writeText(copyText.value);

  alert("Copied the text: " + copyText.value);
}

document.querySelector('#textBtn').addEventListener('click', myFunction);

to copy text from a text area to clipboard
But when I try to paste it onto my canvas the canvas doesn’t respond.

for pasting I used:

/* eslint-disable no-undef */
import { textPaste } from "./textHelper.js";

function textInput() {
  this.icon = "./assets/textInput.png";
  this.name = "textInput";

  let drawing = false;
  let startMouseX = -1;
  let startMouseY = -1;

  this.draw = function () {
    if (mouseIsPressed) {
      if (startMouseX === -1) {
        startMouseX = mouseX;
        startMouseY = mouseY;
        drawing = true;
        // save the current pixel Array
        loadPixels();

        if (mouseIsPressed) {
          document.getElementById("myInput").value;
          async function paste(input) {
            const text = await navigator.clipboard.read();
            input.value = text;
          }
        }
      }
    } else if (drawing) {
      // save the pixels with the most recent rectangle and reset the
      // drawing tool and start locations
      const copy = textPaste();
      set(startMouseX, startMouseY, copy);

      loadPixels();
      drawing = false;
      startMouseX = -1;
      startMouseY = -1;
    }
  };
}

export default textInput;

I want to retrieve the variable x from the function, but this code does not work
who has an idea

thank you

function myFunction(){
  var x = document.getElementById("nom").value;
  //document.getElementById("demo").innerHTML =x ;

 return x;
}

response = myFunction();

document.getElementById("deux").innerHTML =response ;

I’m confused by the ordering of event listeners in Javascript. If I have a form with a submit button and I’d like to alert a user instead of automatically submitting the form, but only when the submit using the Enter key, I can create an event listener for an Enter keypress, event.preventDefault(), etc.

Why is it that the default onsubmit event listener for the form is not triggered first?

I got this div-table populated dynamically, but I can’t find a way to add a header to it, given the way this is being built.

HTML piece:

<div class="block div-table" id="sidebar-record-block"></div>

This is the script populating the table dynamically:

function showRecord(record) {
    if (record.length) {
      for (var i = 0; i < record.length; i++) {
        // build field name on the fly, formatted field-1234
        var str = '' + i;
        var fieldId = 'field-' + ('0000' + str).substring(str.length)

        // If this field # doesn't already exist on the page, create it
        if (!$('#'+fieldId).length) {
          var newField = $($.parseHTML('<div id="'+fieldId+'"></div>'));
          $('#sidebar-record-block').append(newField);
        }

        // Replace content of the field div with new record
        $('#'+fieldId).replaceWith('<div id="'+fieldId+'" class="div-table-row"></div>');
        $('#'+fieldId).append('<input id=checkBox type="checkbox"</input>')
                      .append($('<div class="div-table-th">' + record[i].heading + '</div>'))
                      .append('<div class="div-table-td">' + record[i].cellval + '</div>')             
      }  
    }

Appreciate your help!