Category: javascript

My questions is mostly intended for people that are included or follow changes and new features in ECMA SCRIPT drafts / specs.

The question is: Will there be new data structure in JavaScript for Date? Similar to the one Oracle introduced in Java 8 i.e. adding LocalDate, LocalTime, LocalDateTime structures. Meaning not touching the Date object for backwards compatibility, but just adding new type.

Additionally if there is no draft or planed release, if someone can answer why is that and what are the issues with introducing new types for working with dates?

I’m writing this beginner rock-paper-scissors game. Added event listeners. Somehow it works very strangely.

When I click on weapons with approximately 2s delay or more between each click – it works fine, but when I click really fast on them then my player’s weapon and scores update really slow or sometimes don’t event update and nothing changes.

I’ve tried replacing variable declarations in code from global scope to function scope and it still works the same.

const weapons = document.querySelectorAll(".weapons__img");
const playerWeaponSpan = document.getElementById("playerWeapon");
const computerWeaponSpan = document.getElementById("computerWeapon");
const playerScoreSpan = document.getElementById("playerScore");
const computerScoreSpan = document.getElementById("computerScore");

let playerScore = 0;
let computerScore = 0;

const getComputerWeapon = function() {
  const randomNum = Math.floor(Math.random() * 15) + 1;
  if (randomNum <= 5) {
    return "rock";
  } else if (randomNum <= 10) {
    return "scissors";
  } else if (randomNum <= 15) {
    return "paper";
  } else {
    return "ERROR";
  }
};

weapons.forEach((weapon) => {
  weapon.addEventListener("click", (event) => {
    const playerWeapon = weapon.id;
    const computerWeapon = getComputerWeapon();
    if (playerWeapon === "paper" && computerWeapon === "rock") {
      playerWeaponSpan.textContent = "Paper";
      computerWeaponSpan.textContent = "Rock";

      playerScore++;
    } else if (playerWeapon === "paper" && computerWeapon === "scissors") {
      playerWeaponSpan.textContent = "Paper";
      computerWeaponSpan.textContent = "Scissors";
      computerScore++;
    } else if (playerWeapon === "scissors" && computerWeapon === "paper") {
      playerWeaponSpan.textContent = "Scissors";
      computerWeaponSpan.textContent = "Paper";
      playerScore++;
    } else if (playerWeapon === "scissors" && computerWeapon === "rock") {
      playerWeaponSpan.textContent = "Scissors";
      computerWeaponSpan.textContent = "Rock";
      computerScore++;
    } else if (playerWeapon === "rock" && computerWeapon === "scissors") {
      playerWeaponSpan.textContent = "Rock";
      computerWeaponSpan.textContent = "Scissors";
      playerScore++;
    } else if (playerWeapon === "rock" && computerWeapon === "paper") {
      playerWeaponSpan.textContent = "Rock";
      computerWeaponSpan.textContent = "Paper";
      computerScore++;
    }
    playerScoreSpan.textContent = playerScore;
    computerScoreSpan.textContent = computerScore;
  });
});

<header class="header">
  <h1 class="header__heading">Welcome to Rock-Paper-Scissors Game</h1>
  <p>In order to win you need to score up to 5 points</p>
  <p>Pick one of three weapons:</p>
</header>
<main class="main">
  <section class="weapons">
    <div class="weapons__images">
      <img src="https://mgarcia-rps.netlify.app/Paper_1.png" alt="Image #1" id="paper" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Scissors_1.png" alt="Image #2" id="scissors" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Rock_1.png" alt="Image #3" id="rock" class="weapons__img" />
    </div>
  </section>
  <section class="score">
    <div class="score__text">
      <div class="score__numbers">
        <p>
          Player <span id="playerScore">0</span> &mdash;
          <span id="computerScore">0</span> Computer
        </p>
      </div>

      <div class="score__weapons">
        <p>Player's Weapon: <span id="playerWeapon">?</span></p>
        <p>Computer's Weapon: <span id="computerWeapon">?</span></p>
      </div>
    </div>
  </section>
</main>

So I tried to mimic a youtube video doing a Sign in/up form, but it wasn’t React, just JavaScript
(https://www.youtube.com/watch?v=PlpM2LJWu-s&ab_channel=AsmrProg)

HTML CSS was working, just when importing the js file and activating the animated slide the whole container disappears,you will understand what I mean by it in the first 15 seconds of the video.
here is the js code

const container = document.getElementById("container");
const registerBtn = document.getElementById("register");
const loginBtn = document.getElementById("Login");

registerBtn.addEventListener("click", () =>
  container.classList.add("active")
);

loginBtn.addEventListener("click", () =>
  container.classList.remove("active")
);

and here is the active in the css

.container.active .sign-in{
    transform: translateX(100%);
}

.container.active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: move 0.6s;
}
.container.active .toggle-container{
    transform: translateX(-100%);
    border-radius: 0 150px 100px 0;
}
.container.active .toggle{
    transform: translateX(50%);
}
.container.active .toggle-left{
    transform: translateX(0);
}
.container.active .toggle-right{
    transform: translateX(200%);
} 

Sorry if it’s mixed up or not clear, just never dealt with animations before so I don’t quite get the code

I tried switching the classList for login and register add and remove
I tried exporting login and register

maybe I should do the change in the transformY()
but in the first build the first press to slide, it did slide but without visible login left side, after refreshing page the whole form disappeared

I met a strange issue to resolve out urgently. The issue comes from ModalView in InboxSDK, that is just list items what doesn’t trigger click events. The code lines are like as below:

const openAutoReplyView = () => {
    const el = document.createElement('div');
    el.innerHTML = AutoReplyPage();
    const btn_insert_template = el.querySelector('#btn-insert-template');
    console.log(btn_insert_template);
    btn_insert_template.addEventListener('click', (e) => {      
      console.log(e);
    });
    // btn_insert_template.click();
    const replyModal = sdk.Widgets.showModalView({
      title: "Automail Reply",
      chrome: true,
      el: el
    });
    console.log(replyModal)
}

// auto-reply-page.js
export const AutoReplyPage = () => `
...
<div class='flex items-center mt-6'>
    ...
    <div class="dropdown border border-gray-300">
        ${IconButton("mnu-template", ComposeIcon())}
        <ul class="dropdown-content p-3" style="width: 120px;">
            <div class="dropdown-content-header">Template</div>
            ${TemplateDropdown.map((item) => ("<li>"+ MenuItem(item.id, item.children) +"</li>")).join('')}
        </ul>
    </div>
</div> 
`

// menu-item.js
export const MenuItem = (id, children) => `
<a id="${id}">${children}</a>
`

I am looking for a quick solution for it.

I’ve finished the main part of my Reddit App,

Site:(https://breadddit.netlify.app/)
Repo:(https://github.com/lpscrim/reddit-redux)

I am however really struggling with implementing testing,
My SubbredditList.test and SearchResults.test both fail and I cant quite figure out why.

Any suggestions?

I implemented the my SubredditList.test.js and expected that the test would render the Subreddits correctly but it actually just loads the loading state. (I understand the other files are important for context but I didnt want to spam them all here.

I’ve a project with dev.env file and dotenv installed, and I can access the variables from anywhere in the project, but not in my local “linked” package.

I have a variable in my main project’s dev.env to store the database cluster URI:

DB_CLUSTER_URI=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

I expected that since my database package is running under the same process I can simply access it:

// The linked package
const cluster_uri = process.env.DB_CLUSTER_URI;

But instead I got undefined, but apparently, looks like it’s running in a different process, hence I can’t access the variable. But how can I access it? Is there a better approach?

Thanks for your time.

I have mutiple rows in Pentoho with Coulmn name LDAP flag

Coulmn LDAP flag
ROw 1    0
Row 2    1
Row 3    0

If atleast one row is 0 then I need to set LDAP check is true

Coulmn LDAP flag
ROw 1    1
Row 2    1
Row 3    1

If all rows are 1 then I need to set LDAP check is false

It is not working

I need scrollbar thumb to change color when i hover over its track. I am trying to do something like this

&::-webkit-scrollbar-track-piece:hover {
  &::-webkit-scrollbar-thumb {
    background: blue;
  }
}

and

&::-webkit-scrollbar-track-piece:hover + &::-webkit-scrollbar-thumb {
    background: blue;
    background-clip: content-box;
  }

but it doesn’t work. Is this approach even possible?

I am using Heroku Scheduler to run a specific function in my code, but sometimes the file is not working. This means that it does not use the file and execute the code inside. I think the problem is related to an “eco dyno”. Maybe the app is asleep and therefore cannot execute the code. For instance, on 26/12 the command was executed, but on 27/12 it was not, and the next execution is on 28/12. So, it seems that 27/12 has been skipped. Sometimes it works, sometimes it doesn’t. Perhaps if it’s asleep, it cannot execute the scheduler? I use it every day at 10 PM. In the documentation, it is mentioned that sometimes it may not work at the specific time and can be skipped. So, should I maybe use it every hour? I think that’s overkill because I need it to run only on Sunday and Wednesday at 10 PM.

I’m trying to show and hide a spinner on a submit button of a contact form. While the form is being submitted the spinner should be showed on the button. As soon as the form gets submitted the spinner should be hidden.

Here’s my submit button along with the spinner span:

<div class="d-flex justify-content-center">
  <button class="btn btn-medium btn-fancy btn-primary mb-0 ls-wider" type="submit" id="submitButton">
    <span class="submitSpinner spinner-border spinner-border-sm me-1"></span> Send Message
  </button>
</div>

And this is the AJAX function I’m using:

      $(document).ready(function() {
        $('.submitSpinner').css('display','none');
        $("#contact-form").submit(function(e) {
          e.preventDefault();
          $('#submitButton').text('Sending Message');
          $('.submitSpinner').css('display','inline-block');
          var data = {
            'name': $('#name').val(),
            'email': $('#email').val(),
            'phone': $('#phone').val(),
            'company': $('#company').val(),
            'message': $('#message').val(),
          }
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
          $.ajax({
            type: "POST",
            url: "/contact/message/send",
            data: data,
            dataType: "json",
            success: function(response) {
              // console.log(response);
              if (response.status == 400) {
                $.each(response.errors, function(key, error) {
                  $('#contact-alerts').append('<div class="col-12 col-md-9 col-lg-7 alert alert-danger alert-dismissible fade in show" role="alert"><button type="button" class="btn-close line-height-unset" data-bs-dismiss="alert" aria-label="Close"></button>' + error + '</div>')
                });
                $('.submitSpinner').css('display','none');
              } else {
                $("#contact-form")[0].reset();
                $('#submitButton').text('Send Message');
                $('.submitSpinner').css('display','none');
                $.magnificPopup.open({
                  showCloseBtn: true,
                  items: {
                    src: '#contact-success'
                  },
                  type: 'inline',
                  fixedContentPos: false,
                  fixedBgPos: true,
                  overflowY: 'auto',
                  closeBtnInside: true,
                  preloader: false,
                  midClick: true,
                  removalDelay: 300,
                  blackbg: true,
                  mainClass: 'my-mfp-slide-bottom',
                });
              }
            }
          });
        });
      });

I am developing Candidate Recruitement Application,so whenever I create a new job requirement in my application, I also want to post this requirement in job portals automatically. Can anyone have idea about how to do this? I am using node js, express js and javascript for my Backend.

I am searching for answers but I am not sure how many job portals provide free job posting APIs and how to use them?

Logo Changed And JavaScript IN white color in VS Code

Please tell me solution for above problem I am facing these problem since last 5 months I already uninstalled and downloaded VSCode and also installed javascript and typescript older version but it still not working . If anyone know the solution please tell the solution.

I’m looking to use mongoose to find a document based on a query that finds two property values within an object which is in an array. I used the code shown below but it didn’t work as expected – it returned documents that contained “kiosk” in the name and also any equipment item in the array that had a count of 3. I want it to only return documents with an equipment name of kiosk and only if it has 3 kiosks. Can anyone assist?

  if (equipment && equipment !== "All") {
    const projects = await Project.find({
      $and: [
        {
          "equipment.name": "kiosk",
          "equipment.count": 3,
        },
      ],
    });
    res.status(StatusCodes.OK).json({ projects });
    
    return;
  }

All I’ve tried so far is what I’ve shown. Any suggestions would be appreciated.

I am trying to understand the code from leetcode solution.
The thing is I have no idea how this code working?

Let me show you the code. This Solution is accepted.

var maxDepth = function (root) {
  if (!root) return 0;
  const queue = [root];
  let depth = 0; // len is always 1
  while (queue.length !== 0) {
    depth++; // depth is 1 when console
    const len = queue.length;
    for (let i = 0; i < len; i++) {
      if (queue[i].left) { //queue[i].left is undefined
        // console.log("a"); // nothing comes out
        queue.push(queue[i].left); // what this pushing since undefined?
      }
      if (queue[i].right) { //queue[i].right is undefined
        // console.log("b"); // nothing comes out
        queue.push(queue[i].right);  // what this pushing since undefined?
      }
    }
    // console.log(queue.length)
    queue.splice(0, len);
  }
  // console.log(depth)// depth is still 1 when console
  return depth;
};

Here are some questions I need answers.

1. You will see the while clause while (queue.length !== 0). This while loop is run only one time since there is only 1 root. So the depth++ code will run only 1 time. So depth will always 1. Why this is accepted?
2. Why use while clause when we know there is only 1 root and will run only 1 time.
3. You will see the for loop. This loop also run 1 time too. because len is alway 1. Inside there you will see if conditions but when you console queue[i].left or queue[i].right it will always be undefined. Since there is no left and right for that element. What are these doing?
4. If condition never run when you console a and b. Does it even needed?
5. Why use for clause when we know it will run only 1 time?
6. Can it be written so that console.log will work?

Here are some test cases

maxDepth([3,9,20,null,null,15,7]); // 3
maxDepth([1,null,2]) // 2
maxDepth([
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  null,
  null,
  10,
  11,
  12,
  13,
  null,
  null,
  null,
  14,
  15,
  16,
]);

I buid a live score website using Laravel and React template, I use an API to get live data with json format like this :

[
{
    "country_id": "6",
    "country_name": "Spain",
    "league_id": "300",
    "league_name": "Copa del Rey",
    "league_season": "2020/2021",
    "league_logo": "https://apiv3.apifootball.com/badges/logo_leagues/300_copa-del-rey.png",
    "country_logo": "https://apiv3.apifootball.com/badges/logo_country/6_spain.png"
},
{
    "country_id": "6",
    "country_name": "Spain",
    "league_id": "302",
    "league_name": "La Liga",
    "league_season": "2020/2021",
    "league_logo": "https://apiv3.apifootball.com/badges/logo_leagues/302_la-liga.png",
    "country_logo": "https://apiv3.apifootball.com/badges/logo_country/6_spain.png"
},

And I do like that to get values :

$APIkey='xxxxxxxxxxxxxx';
$country_id = 6;

$curl_options = array(
CURLOPT_URL => "https://apiv3.apifootball.com/? 
action=get_leagues&country_id=$country_id&APIkey=$APIkey",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HEADER => false,
CURLOPT_TIMEOUT => 30,
CURLOPT_CONNECTTIMEOUT => 5
);

$curl = curl_init();
curl_setopt_array( $curl, $curl_options );
$result = curl_exec( $curl );

$result = (array) json_decode($result);

var_dump($result);

What I’m looking for is to do translations of some specific json fields before displaying it in frontend, I clarify my idea like that:

 ------------------------------------------------------------------------

        JSON file from API ======> make translations ===>displaying in view
                                             ||
                                             ||
                           getting translations words from database

for example Copa del Rey translate it to Coupe du Roi who this word stored in database in french language?

Any Ideas?