Category: javascript

I have a angular application where I wnat to route the user to a new page after succesfull login. But the webpage is not loading just the url is changing, I tried router-outlet but it renders the component under my login component. What I want is to route to a complete new page.

App-routing module:

const routes: Routes = [
  {path: 'dashboard' , component: DashboardComponent, canActivate: [AuthGuard]},
  {path: 'authenticate', component: LoginComponent},
  {path: '' , redirectTo: 'authenticate', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule {

}

App component.html

  <nb-layout-header fixed >
    Moniesta
  </nb-layout-header>

  <nb-layout-column>
    <moniesta-login></moniesta-login>
    <router-outlet></router-outlet>
  </nb-layout-column>

  <nb-layout-footer fixed>
    <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

Method in my service to load to new url and webpage:

  authenticateUser(login: LoginModel){
    return this.http.post(environment.rootUrl + 'authenticate', {
      username: login.username,
      password: login.password,
    }).subscribe({
      next: (data) => {
       localStorage.setItem('token', data.toString())
        this.router.navigate(['/dashboard'])
      }, error: (error) => {
        this.isAuthenticated = false
      }
    })
  }

Could someone help me out and tell me what is wrong?

Here is my peer connection on the receiver side

somehow I am not able to receive hit on this.pc.ontrack in order to visualise the incoming stream. Looking for help.

I have some trouble on on converting my code to .json file.

document.getElementById('button').addEventListener("click", () => {
XLSX.utils.json_to_sheet(data, 'out.xlsx');
if(selectedFile){
    let fileReader = new FileReader();
    fileReader.readAsBinaryString(selectedFile);
    fileReader.onload = (event)=>{
     let data = event.target.result;
     let workbook = XLSX.read(data,{type:"binary"});
     console.log(workbook);
     workbook.SheetNames.forEach(sheet => {
          let rowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
          console.log(rowObject);
          document.getElementById("jsondata").innerHTML = JSON.stringify(rowObject,undefined,4)
     });
    }
}

});

Also I need to read xlsx file per row and convert it as a .json file
Thanks for the help!

I get a json file from outer link by ajax call. i want to check element is exists in this json file or not and get it if exists. because it changes every time and items increases or decreases.
If I get item and this item not existing, I get error and the code not complete. i want to check this item json.children[1].children and json.children[2].children ,….. if exists.

 {
    "num": 1,
    "name": "aa",
    "properites": [
        {
            "name": "prop1",
            "value": "value1"
        }
    ],
    "children": [
       
        {
            "num2": 1,
            "name2": "name2",
            "properites": [
                {
                    "name": "name",
                    "value": "value"
                }
            ],
            "children": []
        },
       
        {
            "name": 1,
            "num": "1",
            "attributes": [
                {
                    "name": "name",
                    "value": "value"
                }
            ],
            "children": []
        .......................... big json file

I am currently using node v16.14.0 as per the title and getting this error:

Error: Cannot find module 'node:events'
Require stack:
- /Users/username/bp/bp-website/backend/node_modules/discord.js/src/client/BaseClient.js
- /Users/username/bp/bp-website/backend/node_modules/discord.js/src/index.js
- /Users/username/bp/bp-website/backend/discord/bot.js
- /Users/username/bp/bp-website/backend/discord/purchase.js
- /Users/username/bp/bp-website/backend/webserver.js
- /Users/username/bp/bp-website/backend/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/username/bp/bp-website/backend/node_modules/discord.js/src/client/BaseClient.js:3:22)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/username/bp/bp-website/backend/node_modules/discord.js/src/client/BaseClient.js',
    '/Users/username/bp/bp-website/backend/node_modules/discord.js/src/index.js',
    '/Users/username/bp/bp-website/backend/discord/bot.js',
    '/Users/username/bp/bp-website/backend/discord/purchase.js',
    '/Users/username/bp/bp-website/backend/webserver.js',
    '/Users/username/bp/bp-website/backend/index.js'
  ]
}

I have looked at other questions, however, they all say upgrade to Node v16.6 which I downgraded to to test but also still didn’t work. Any help would be greatly appreciated!

I have a container div with 16 divs inside.
I have applied the gap property with 1 px both horizontally and vertically.
I created 4 columns and 4 rows, so that the container was 4 x 4.

This is the code:

HTML

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

CSS

#container {
 display: grid;
 background-color: #696969;
 border: 1px solid #000;
 width: 500px;
 height: 500px;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(4, 1fr);
 gap: 1px;
}

#container div {
 background-color: #fff;
}

100% default zoom.

Zoom 120%

Zoom 80%

You can see that at 120% zoom the vertical gap is larger in the middle line. On the other hand, at 80% zoom several lines of the gap disappear.

How can I avoid this behavior?

I can’t understand why my cookie button doesn’t work. I made the cookie with JS and php. I see the php cookie in application but not the js transmitted.

kirti@kirti-Vostro-14-3468:~/flipbook-vue$ node --version
v17.6.0
kirti@kirti-Vostro-14-3468:~/flipbook-vue$ vue --version
@vue/cli 5.0.1
kirti@kirti-Vostro-14-3468:~/flipbook-vue$ npm run serve

> [email protected] serve
> vue-cli-service serve

sh: 1: vue-cli-service: not found
kirti@kirti-Vostro-14-3468:~/flipbook-vue$ 

System: Ubuntu 20.04

Via: Downloaded via terminal.
I’m running a GitHub repo on my system. I saw the instructions for directly running a github repo on VS Code but as it gave me this error.

I thought, to verify and install vue & node properly first and then run. But, it still gives me error. What can I do?

So I have 1 request that is app.get('/assignment/loans', (req, res) => { const id = req.query.bookID; and another that is this app.get('/assignment/loans', (req, res) => { const id = req.query.studentID; for some reason the studentID one does not work and it always goes to the bookID to search. I use this http://localhost:3000/assignment/loans?bookID=1 and it works as intended but if I use http://localhost:3000/assignment/loans?studentID=9653 I get which is an error that should only appear for the bookID. How can I differentiate the two? Thank you in advance.

I’m out of ideas. I try get for example genere from this code. List items are generated dynamicaly if item has no information about something then section does not exist. I tring to find div with text “genere” and try to get text from next in h3 element. I use JS, Playwright, XPath. Example code:

<div class="infoItem">
    <h3 class="header">director</h3>
    <div class="info">John Doe</div>
    <h3 class="header">country</h3>
    <div class="info">DE</div>
    <h3 class="header">screenwriting</h3>
    <div class="info">John Doe</div>

    <!--[...]-->
    
    <h3 class="header">genere</h3>
    <div class="info">Comedy</div>
    <h3 class="header">premiere</h3>
    <div class="info">2019-02-18</div>
 </div>

Intention:

• If the below div is in offset the sticky button should be visible.
  <div class="cmp-show-pinnedbutton" ></div>

• if the below div is in offset the sticky button should be hidden.
  <div class="cmp-show-pinnedbutton" ></div>

• In between the classes <div class="cmp-hide-pinnedbutton" ></div> <div class="cmp-show-pinnedbutton" ></div> the sticky button will be visible

Problem

• It works only on Single Instance. If I repeat the them it’s not working.

Working Scenario

<div class="cmp-show-pinnedbutton"></div>    
   <div class="cmp-show-pinnedbutton"></div>    
        <p>Some text here</p>// where sticky button visible   
    <div class="cmp-hide-pinnedbutton"></div>

Not working Scenario

   <div class="cmp-show-pinnedbutton"></div>    
       <div class="cmp-show-pinnedbutton"></div>    
             <p>Some text here</p>//sticky button visible    
        <div class="cmp-hide-pinnedbutton"></div>
          <p>Some text here</p>//sticky button not visible

        <div class="cmp-show-pinnedbutton"></div>    ***Not working where sticky button should  visible
             sticky button should visible    
        <div class="cmp-hide-pinnedbutton"></div>

Thoughts

• I have referred the below stack overflow Solution but somehow I
  coudn’t able to achieve it.
  jQuery – Treat multiple instances of the same class separately?

Codepen Link

let pinnedbutton = document.getElementsByClassName('cmp-pinned-button')[0];
let hide_component = document.getElementsByClassName('cmp-hide-pinnedbutton')[0],
show_component = document.getElementsByClassName('cmp-show-pinnedbutton')[0],
_screenWidth = window.innerWidth,
observe = parseInt(window.innerHeight) - (_screenWidth < 1279 ? 80 : 20);
console.log(window.innerHeight);
window.addEventListener('scroll', () => {
let hide = hide_component.getBoundingClientRect().y,
show = show_component.getBoundingClientRect().y,
submitMain = pinnedbutton; //submitMain: pinned button div
  if (show < observe || hide > observe) {
    submitMain.classList.add('pinned_visible');
  }
  if (hide < observe || show > observe) {
    submitMain.classList.remove('pinned_visible');
  }
  });        

.cmp-pinned-button {
    position: fixed;
    bottom: 0px;
    max-height: 65px;
    width: 100%;
    height: 100%;
    background-color: rgba(256,256,256,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: rem(20px 0);
    z-index: 999999;
    transform: scaleY(1);
    transform-origin: top;
    transition: all 0.05s ease;
    display: none;
    text-align: center;
    font-size: 25px;
    text-decoration: none;
}

.cmp-pinned-button.pinned_visible{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cmp-pinned-button" data-component="pinnedbutton">
    <div class="button">
        <a class="cmp-button" href="#">
            <span class="cmp-button__text">MEET WITH AN EXPERT</span>
        </a>
    </div>
</div>
<p style="height: 500px; background-color: aqua;"></p>
<div class="cmp-show-pinnedbutton" ></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cmp-hide-pinnedbutton"></div>
<p style="height: 500px; background-color: aqua;"></p>
<div class="cmp-show-pinnedbutton" ></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cmp-hide-pinnedbutton"></div>

I have an dropdown list that gets it’s info from a Google Sheets doc. The thing is it takes a little while to fetch the data so rather than waiting for the dropdown to change, I want to show loading in the dropdown list.

Here’s my code:

function showMediaDropdownMenuOptions(el, arrayOfArrays, index) {
    var serviceTypeElement = document.getElementById("service-type").value;
    var currentlyAdded = []
    el.innerHTML = '';
    var filteredArray = arrayOfArrays.filter(function(r) {return r[17].includes(serviceTypeElement)})
    var result = filteredArray.flatMap(({ 0: key, 17: values }) => values
            .split(', ')
            .map(value => [key, value])
        );
        const mappedArray = result.map(item => item[0].toString().replace(/s*,s*/g, ",").split(',').sort())
        const sets = new Set([].concat(...mappedArray))
        const arrayValues = Array.from(sets)
    var option = document.createElement("option");
    arrayValues.forEach(function(r){
        var option = document.createElement("option");
        option.textContent = r;
        el.appendChild(option);
    });
  }

When I’m waiting for a whole page it’d use this at the end of a function.

document.getElementById("loading").remove();

With this html:

 <div id="loading" class="loading pt-40">
      <div class="d-flex justify-content-center">
        <div>
          <div class="spinner-border text-light" style="width:4em; height:4em;" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div>Loading...</div>
        </div>
      </div>
    </div>

And this css:

.loading {
  background-color:black;
  width: 100vw;
  height: 100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:10000;
}

I don’t know how to do it with a dropdown list especially as the contents come from an array?

I am trying to move a HTML element (a puzzle piece) back to its original position on the screen after a dragEnd event, if the element is not inside a specified target zone.

I using a javascript object to represent the puzzle piece. The object contains the starting x and y for the element as well as a reference to the element itself (along with some other information). The code is below.

function dragEnd(e) {

    if(selectedPiece.ele.id === "correctPiece" && selectedPiece.distanceVector < 30){
        window.alert("Game End");
    }
    else{

        console.log("returning piece: ", selectedPiece.ele.id);
        console.log("to point ", selectedPiece.startX, selectedPiece.startY);
        selectedPiece.ele.style.position = "absolute";
        selectedPiece.ele.style.left = selectedPiece.startX;
        selectedPiece.ele.style.top = selectedPiece.startY;
        
    }
    active = false;
}

Still when I drop the piece it stays wherever it was dropped.

When I look at the console it shows the element id and identifies the correct startX and startY properties. I have also tried appending “px” to the startX and startY with no luck.

Any help appreciated thanks 🙂

I want to implement a dropdown menu for mobile devices with animation so when the transition ends, it needs to be display:none. Here’s what I’ve done:

const menuButton = document.querySelector('.menuButton')
const navMenu = document.querySelector('.nav')

function menuToggle() {
    if (navMenu.classList.contains('navDisplay')) {
        navMenu.classList.remove('navShow')
        setTimeout(() => {
            navMenu.classList.remove('navDisplay')  
        }, 300)     
    } else {
        navMenu.classList.add('navDisplay') 
        setTimeout(() => {
            navMenu.classList.add('navShow')
        }, 0) 
    }
}

menuButton.addEventListener('click', menuToggle)

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    color: #e8e8e8;
}

html, body {
    overflow-x: hidden;
    background-color: rgb(66, 66, 66);
}

h2 {
    margin: 15px 0;
}

a {
    transition: all.3s ease;
    -webkit-transition: all.3s ease;
    -moz-transition: all.3s ease;
    color: #e8e8e8;
    text-decoration: none;
}

a:hover {
    color: #777777;
}

/*--------------NAV BAR------------*/

header {
    background-color: rgba(24, 24, 24, 0.95);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.menuButton {
    display: none;
    position: fixed;
    right: 0;
    color: white;
    font-size: 1.5em;
    line-height: 65px;
    margin: 10 30px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.logo {
    color: white;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Fredoka One', sans-serif;
    line-height: 65px;
}


    nav div ul {
        text-align: center;
        flex-direction: column;
        margin-top: 50px;
        overflow: hidden;
    }
    
    nav div ul li {
        margin: 20px 0;
    }
    
    nav {
        flex-direction: column;
    }

    .nav {
        display: none;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        height: 0;
        transition: height 300ms ease-in-out;
        -webkit-transition: height 300ms ease-in-out;
        -moz-transition: height 300ms ease-in-out;
    }

    .orderButton {
        padding: 20px;
    }
    
    .logo {
        text-align: center;
    }
    
    .menuButton {
        display: block;
    }

    .navShow {
        height: 100vh;
    }

    .navDisplay {
        display: block;
    }

<header>
<div class="menuButton">&#9776;</div>
      <nav>
        <a href="index.html"><p class="logo">LOGO</p></a>
        <div class="nav">
            <ul>
                <li><div class="orderButton">ELEMENT1</div></li>
                <li><a href="about.html">ELEMENT2</a></li>
                <li><a href="contact.html">ELM3</a></li>
            </ul>
        </div>
      </nav>
      </header>

So, the menu is display:none and height:0 by default. The click event listener triggers function that checks if menu is displayed or not and adds or removes respective classes (the display class removes after the transition ends with the help of timeout 400ms).

Is there any more beautiful or less code solutions?

I would like to click the button and make the value appear in <h3> inside the <div> and according to that value the background-color would change.

For example, when I typed a value (Your number) and clicked on Click Me!, h3 inside the div should show this typed value and the background-color would also change accordingly.

For example, if I typed 33 in Your number and then clicked, the value to appear would be 33 and the color would be orange. Thus:

My code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form name="myform">
  Your number: 
  <input type="text" name="inputbox" id='textBox' value="" />
  <input type="button" name="button" class="member" value="Click me!" />
  <div class='box1' style='background-color:lime;width:33.33%;padding-left:15px;padding-right:15px;'>
    <h3>
    0
    </h3>
    <p>
    Valor
    </p>
  </div>
</form>
<script>
  $(function() {

    $('.member').click(function() {
      var answer = $("#textBox").val();
      if (answer <= 20) {
        $('.box1').css('background-color','red');
      } else if (answer <= 50) {
        $('.box1').css('background-color','orange');
      } else {
        $('.box1').css('background-color','steelblue');
      }
    });

  });

</script> 

So I wanted to select the h3 tag and change it with if else statement.