Category: javascript

So I am using the Angular tree component defined here https://angular2-tree.readme.io/docs

I am trying to have a breadcrumbs path on search for single results from the root.
So searching something like “test” would yield results like the following, where ‘>’ represents a new root.

> A1 / A2 
    test
> B1 / B2 / B3
    test
> C3
    test

My idea is to hide all the subparents that are not the test leaf, but still have the leaf visible. I would also simply change the name of the root node to simulate breadcrumbs.

Is that possible to hide all the subparents except the final leaf, if so how would I do that?

Another possible idea I had was to move the final leaf node into the children of the root node, and do the same with the simulated breadcrumbs path. Although I am not sure how to restore the trees original structure upon clearing search.

Natural resource Depletion Survey link:
https://forms.gle/ThcwnYBoNvBs4iyk8

i was wondering if switches runs continuously or does not need of setIntervals to run (forever). i’m making a game where in a level value changes and the switch will change all entities position based on the level;

let LEVEL = 0;

switch (LEVEL) {
    case 1: 
    player.x = 64;
    player.y = 64;
    enemy.x = 32;
    enemy.y = 32;
    break;
    case 2: 
    player.x = 0;
    player.y = 64;
    enemy.x = 72;
    enemy.y = 56;
    break;
}

currently I’ve faced that such a destructuring notation

const {selectedSpectrums, fetchedSpectraData, fetchedSpectraIndex} = useSelector(state => state.testResultsTreeReducer, isEqual);

works wrong and it is better to use

const selectedSpectrums = useSelector(state => state.testResultsTreeReducer.selectedSpectrums, isEqual);
const fetchedSpectraData = useSelector(state => state.testResultsTreeReducer.fetchedSpectraData, isEqual);
const fetchedSpectraIndex = useSelector(state => state.testResultsTreeReducer.fetchedSpectraIndex, isEqual);

So, why this is wrong and how can I avoid so many similar lines and use destructuring with lodash’ isEqual?

I am having 2 Nested Arrays:

let arr1 = [
  ['155726', '-864280620000', '-863970180000', '0'],
  ['183350', '-1014812640000', '-1013348820000', '0'],
  ['128755', '-1000736160000', '-1000483200000', '0'],
];

let arr2 = [
  ['155726', '-864280620000', '-863970180000', '0'],
  ['183350', '-1014812640000', '-1013348820000', '0'],
];

My intention is the find the differences and my desired output is:

[
  ['128755', '-1000736160000', '-1000483200000', '0']
];

How can I achieve it? Thank you.

I have created my class, and inside it, I have an object of YouTube Iframe API and an object of ion Range Slider.

How do I make those 2 other objects interact with each other? I need iframe’s video progress to seek with the RangeSlider position change?

class VideoPlayer {
  constructor(url, numItems, div) {
    ...
    this.player = this.createPlayer();  // this way it seems that I cant refer to this.player from within RangeSlider class
    this.createRangeSlider();
  }
...
  createRangeSlider() {
    // alert(this.player.getDuration());
    $(".js-range-slider").ionRangeSlider({
      type: "double",
      onChange: function (data) {
        this.player.seekTo(data);  // this.player here is unaccessible
      },
    });
  }
  createPlayer() {
    let obj = new YT.Player(`player-${this.numItems}`, {
      width: "640",
      height: "390",
      videoId: this.url,
      events: {
        onReady: this.onPlayerReady,
      },
    });
    return obj;
  }
...
}

This is my JavaScript code

var vals = [date.getFullYear() + (scale === YEAR ? qty : 0),
  date.getMonth() + (scale === MONTH ? qty : 0),
  date.getDate() + (scale === DAY ? qty : 0),
  date.getHours() + (scale === HOUR ? qty : 0),
  date.getMinutes() + (scale === MINUTE ? qty : 0),
  date.getSeconds() + (scale === SECOND ? qty : 0),
  date.getMilliseconds() + (scale === MILLISECOND ? qty : 0)
];

My problem is that the months are displaying till “April” which means starting from Jan to Next Year’s April. I only need to display months till December.

I am not sure if something else could be causing this problem. I’m using Gantt chart and I only want to display 12 months.

I’m trying to make a simple web-based game where there’s a static map but you can move the player with some certain, still unknown, animations.
I have been using the canvas, but I’m getting to the point where I want to move the player (a simple circle, maybe an image later). I’ve stumbled upon Element.animate(), which is apparently very efficient. Though I cannot really use this with the canvas as far as I’m aware. So now I’m wondering why I am using canvas when I could just draw everything on the html document itself.
Why would you ever want to use the canvas (for 2d) when this is always the case?

I made a website in which content changes when user clicks on a toggle switch, the price changes from monthly to annual and vice versa when a user clicks on the toggle i.e. the h2 with the class monthly gets displayed when toggler is checked(true) and the h2 with class annual gets displayed when toggler is unchecked(false).

function refreshPage(){
    window.location.reload();
} 
const toggler = document.querySelector("#switch");
const annual = document.querySelectorAll(".annual");
const monthly = document.querySelectorAll(".monthly");
window.onload = function priceChange(){
    if (toggler.checked === false) {
        monthly.forEach(hideMonthly);
        function hideMonthly(item) {
            item.style.display = "none";
        }
    } else if (toggler.checked === true ) {
        annual.forEach(hideAnnual);
        function hideAnnual(item) {
            item.style.display = "none";
        }
    }
}

:root {
    --gradient: linear-gradient(to bottom right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
    --gradient-900: hsl(237, 63%, 64%);
    --neutral-grey-100: hsl(240, 78%, 98%);
    --neutral-grey-300: hsl(234, 14%, 74%);
    --neutral-grey-600: hsl(233, 13%, 49%);
    --neutral-grey-900: hsl(232, 13%, 33%);
    --neutral-100: #fff;
    --neutral-900: #000;
}

*,
*::after, 
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    background: #F6F6FE url("../images/bg-top.svg") no-repeat;
    background-position: top right -170px; 
    text-align: center;
}

.neutral-grey-100 {
    color: var(--neutral-grey-100);
}

.neutral-grey-300 {
    color: var(--neutral-grey-300);
}

.neutral-grey-600 {
    color: var(--neutral-grey-600);
}

.neutral-grey-900 {
    color: var(--neutral-grey-900);
}

h1 {
    font-size: 2em;
    margin-bottom: .8em;
}

h2 {
    font-size: 3em;
    margin: 1rem 0;
}

.container {
    width: 85%;
    margin: 0 auto;
}

.header {
    padding: 2.4em;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-100);
    border-radius: .8em;
    padding: 1em 2.6em;
    margin-bottom: 2.5em;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
}

.card:nth-child(odd) {
    background: var(--gradient);
    color: var(--neutral-100);
}

.card > div:not(:last-child) {
    border-bottom: 1px solid rgba(183, 184, 194, 0.45);
}

.card-inverse > div:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

section div {
    padding: 1em 0;
}

.button {
    text-transform: uppercase;
    padding: 1em 2em;
    margin: 2.6em 0 1.2em 0;
    background: var(--gradient);
    border: 1px solid var(--neutral-100);
    border-radius: 6px;
    text-decoration: none;
    color: var(--neutral-100);
}

.button:hover, .button:focus {
    background: var(--neutral-100);
    border: 1px solid hsl(237, 63%, 24%);
    color: var(--gradient-900);
    outline: none;
}

.button-inverse {
    background: var(--neutral-100);
    text-decoration: none;
    color: var(--gradient-900);
}

.button-inverse:hover, .button-inverse:focus {
    background: hsl(237, 63%, 64%);
    border: 1px solid var(--neutral-100);
    color: var(--neutral-100);
    outline: none;
}

.attribution { 
    font-size: 11px; 
    text-align: center; 
    margin-bottom: 1rem;
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}

/*-------- TOGGLER --------*/

 .toggle {
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
}

label {
    cursor: pointer;
    text-indent: -9999px;
    width: 65px;
    height: 35px;
    background: var(--gradient);
    display: block;
    border-radius: 100px;
    position: relative;
    margin: 1.4em;
}

label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 27px;
    height: 27px;
    background: #fff;
    border-radius: 110px;
    -webkit-transition: all 350ms;
        -moz-transition: all 350ms;
            transition: all 350ms; 
}

input:checked + label {
    background: var(--gradient);
}

input + label:hover, input + label:focus-within {
    background: hsl(236, 72%, 81%)
}

input:checked + label:after {
    transform: translate3d(114%, 0, 0);
}

@media (min-width: 1440px) {
    body {
        font-size: 16px;
        background-image: url("../images/bg-top.svg"), url("../images/bg-bottom.svg");
        background-repeat: no-repeat, no-repeat;
        background-position: 100% 0%, 0% 130%; 
        background-size: 24%, 24%;
    }

    .container {
        display: grid;   
        grid-template-areas: 
            "header header header"
            "basic professional master"
            "attribution attribution attribution"; 
        align-items: center;
        width: 65%;
    }

    .header {
        grid-area: header;
    }

    h2 {
        font-size: 4em;
    }

    h3 {
        font-size: 1.3033333333333335em;
    }

    .card-inverse {
        padding: 3em 2em;
    }

    .card {
        margin-bottom: 0;
    }

    #basic {
        grid-area: basic;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    #professional {
        grid-area: professional;
    }
    
    #master {
        grid-area: master;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .attribution {
        grid-area: attribution;
        margin-top: 4em;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <script defer src="js/script.js"></script>
    <title>Frontend Mentor | Pricing component with toggle</title>

</head>
<body>

    <div class="container">
        <section class="header">
            <h1 class="neutral-grey-900">Our Pricing</h1>
            <div class="toggle neutral-grey-300">
                Annually
                <input type="checkbox" id="switch" onClick="refreshPage()"/><label for="switch">Toggle</label>
                <!-- <label class="switch"><input type="checkbox" name="toggler" id="toggler" onClick="refreshPage()"/>    <figure></figure>
                </label> -->
                Monthly
            </div>
        </section>

        <section class="card" id="basic">
            <div>
                <h3 class="neutral-grey-600">Basic</h3>
            
                <h2 class="neutral-grey-900 monthly">&dollar;19.99</h2>
                <h2 class="neutral-grey-900 annual">&dollar;199.99</h2>
            </div>
            
            <div class="neutral-grey-600">500 GB Storage</div>
            
            <div class="neutral-grey-600">2 Users Allowed</div>
            
            <div class="neutral-grey-600">Send up to 3 GB</div>

            <a class="button button-main" href="">Learn More</a>
        </section>
        
        <section class="card card-inverse" id="professional">
            <div>
                <h3>Professional</h3>
            
                <h2 class="monthly">&dollar;24.99</h2>
                <h2 class="annual">&dollar;249.99</h2>
            </div>
            
            <div>1 TB Storage</div>
            
            <div>5 Users Allowed</div>
            
            <div>Send up to 10 GB</div>
            
            <a class="button button-inverse" href="">Learn More</a> 
        </section>

        <section class="card" id="master">
            <div>
                <h3 class="neutral-grey-600">Master</h3>
                
                <h2 class="neutral-grey-900 monthly">&dollar;39.99</h2>
                <h2 class="neutral-grey-900 annual">&dollar;399.99</h2>
            </div>

            <div class="neutral-grey-600">2 TB Storage</div>
            
            <div class="neutral-grey-600">10 Users Allowed</div>
            
            <div class="neutral-grey-600">Send up to 20 GB</div>
            
            <a class="button button-main" href="">Learn More</a> 
        </section>
        
        <div class="attribution">
            Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
            Coded by <a href="#">Sachin Jadhav</a>.
        </div>
    </div>
</body>
</html>

The toggle is working in Firefox but not in Chrome, I am not able to figure out what’s wrong with my javascript.

So I wish to create a portfolio for myself by using the scrolling effect done here. As you can see, the left content scroll at a slower speed and the right content scroll at a faster speed. How can I archive this scrolling effect (VanillaJs or ReactJS). I tried using gsap scrollTrigger but to no avail. I just want the scrolling effect.

Thank you.

I created a test using a javascript enum as per this tutorial:
https://www.sohamkamani.com/javascript/enums/

I tested it in standard javascript but i keep getting an error when using it in Jest:
Jest encountered an unexpected token ‘=’

 static test1 = new test("test1");
               ^

 SyntaxError: Unexpected token =

this is the enum i created:

     class test { 

       constructor(name) { 
          this.name = name;
        }

      static test1 = new test("test1")
      static test2 = new test("test2")
      static test3 = new test("test3")
    }

Here is the html is very simple but it does what it needs.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css.css">
    <script src="/script.js"></script>
    <title>Nasa</title>
</head>
<body>
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="wrapper">
<h1>Nasa Images</h1>
<div class="search">
  <form id="form">
    <input type="text" id="searchbox" placeholder="Search...">
    <input type="button" id="search" placeholder="Search" value="Search">
  </form>
</div>
<div id="content" class="contentbox">
  
</div>
</div>
</body>
<footer>
    
</footer>
</html>

Here is the js I don’t know if this is the best way to doit but I hope it makes sense.

// Window load will wait for the website to load and then run the script 
window.addEventListener('load' , function(){
const bnt = document.querySelector('#search') //Declaring the button 
const box = document.querySelector('#searchbox').value//Declaring the Search Box


async function search(){ //In this fuction the script will take rhe users imput make a searcha 
and save the information sendt from the API/Server
    let q = document.querySelector('#searchbox').value
    let url = "https://images-api.nasa.gov/search?q="+q+"&description&media_type=image"
    let response = await fetch (url);
    console.log(response)
    let data = await response.json()
    console.log(data)
    displayData(data)
    console.log(q)

}
 
function displayData(data){ //In this fuction we will display the data recived from the server
    document.querySelector('#content').innerHTML += " <h1>"+data.collection.items[0].data[0].description+"</h1>"
    document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[0].links[0].href+"' width='955' />";
    document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[1].links[0].href+"' width='955' />";
    document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[2].links[0].href+"' width='955' />";
    document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[3].links[0].href+"' width='955' />";
    document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[4].links[0].href+"' width='955' />";

}

bnt.addEventListener('click', search); //This event will tell the script when the button as 
been pressed and will run the fuction search
})

I am new to this and I have done loops in the past but I don’t know how will I be able to create a loop for this situation.

I’m trying to update the number of participants by increasing it by one every time the submit button gets clicked, and by doing so I added an add() inside my script tag and increased the participant number every time it gets clicked. But the number of participants doesn’t get changed for some reason.

Btw I’m new to DOM and JS

 <h5>Number of participant:<span id="submit">0</span></h5>
    <button type="button" onclick="add()">Submit</button>
</div>
<script>
    let Agenda_style = document.querySelector('.agenda'); //to add style  you must acess the class name/ID using querySelector
    Agenda_style.style.color = "red "; // set color to red to change the color of the class agenda
    let NewElement = document.createElement("li "); //create new element of type <li>
    NewElement.innerText = "Here "; // add a text inside the <li> element 
    Agenda_style.append(NewElement); // append a tet to the agendaa class

    let participant = 0;

    function add() {
        participant++;
        document.getElementById("submit").innerText = participant;
    };
</script>

I used the following script to autofill an input date with current date/time

var today = moment().format('YYYY-MM-DD');
document.getElementById("MyDate").value = today; 

Output :

Date : 2022-03-09 11:39:19.000000,3,Europe/Berlin

Would it be possible to remove the timezone… etc.

So the output will look like :

Date : 2022-03-09 11:39:19

Actually i want to show this Names in a sequence but whenever i click increment button the order ( in useState ) increment by 1 but when i click decrement button first time the order again increment by 1 and then is less than one.

function func() {
  let [getVal, setVal] = useState({
    alerts: "no alerts",
    order: 0,
  });
  
  let Names = [
      "Default",
      "Evil laugh",
      "classic alarm",
      "Pause",
      "intro music",
      "Got item",
      "Old bounce",
      "bark",
      "alarm tone",
    ];

  function slider(e) {
    let { order } = getVal,
    value = e.target.id,
    total = Names.length; 
    if (value === "up" && order !== total - 1) {
      setVal((rest) => ({ ...rest, order:order + 1 })); 
    } else if (value === "down" && order !== 0) {
      setVal((rest) => ({ ...rest, order: order - 1 })); 
    }
    setVal((rest) => ({ ...rest, alerts: Names[order] }));
  }


  return (
    <>
       
        <button
          onClick={slider}
          id="up"
        >
          up
        </button>

        <p>
          {getVal.alerts}
        </p>

        <button
          onClick={slider}
          id="down"
        >down
        </button>
</>
)
}