Category: javascript

I am trying to select a drop-down menu but there is no id to select. How can I make the selection and then the follow-up selection? In this case, I need to select All Transactions and then All tolls. Thank you for all the help.

//From first drop down

<div _ngcontent-mxw-c311="" ngclass.lt-md="filterItem" class="filterItem ng-star-inserted" style="margin-right: 10px;">
<ng-component _nghost-mxw-c298="" class="ng-star-inserted">
<div _ngcontent-mxw-c298="" fxlayout="column" fxlayoutalign="start start" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start;">
<div _ngcontent-mxw-c298="" fxlayout="row" fxlayoutalign="space-between center" cdkoverlayorigin="" class="criteria-shape criteria-color criteria-size criteria-text criteria-hover" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center;">

//What is highlighted when I do an inspect

<span _ngcontent-mxw-c298="" style="color: #007aff; font-size: 14px;"> All Transactions </span>

<div _ngcontent-mxw-c298="" class="glyphicon glyphicon-chevron-down chevron-color chevron-adjustment ng-star-inserted">
</div>
<!---->
</div>
<!---->
<!---->
</div>
</ng-component>
<!---->
</div>

//From the drop down I need to select

<div _ngcontent-mxw-c298="" fxlayout="column" fxlayoutalign="start start" class="ng-star-inserted" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start;">
<div _ngcontent-mxw-c298="" class="transactionType-text criteria-hover">

//What is highlighted when I do an inspect

<span _ngcontent-mxw-c298="" class="parentItem">&nbsp;&nbsp;&nbsp;&nbsp;All Tolls</span>


</div>
</div>

const puppeteer = require ('puppeteer');

async function start(){ const browser = await puppeteer.launch({ headless: false}); const page = await browser.newPage(); await page.goto("https://www.hctra.org/Login");
await page.waitForSelector('#usernameTxtBox');

await page.type('#usernameTxtBox', 'Rosariofamily');
await page.type('#passwordTxtBox', 'R00tbeer');
await page.click('.btn.u-spacing--widthFill');
await page.waitForNavigation();
await page.goto("https://www.hctra.org/AccountActivity");
await page.$('[name="All Transactions"]');
await page.select ("All Transactions", "All Tolls");
await page.screenshot({path: "Reservation.png"});
await browser.close();
}

start()

I have this animation where a box moves from one part of the page to another with the click of a start button.

How would I get the box to disappear from the page after the animation is completed?

<div id="box">
        <p> BOX </p>
    </div>
<div id="box">
        <p> Box </p>
    </div>

    <style type='text/css'>
    #box {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      left: 0px;
      top: 300px;
      text-align: center;
      font-family: Times New Roman;
    }
  </style>

<button>Start</button> 

<script>
$(function() {
        $("button").click(function() {
            $("#box").animate({
                left: $(window).width() - 800
                 });
            });
        });
</script>

I have two Button (Add and mines) that I want as long as I press the Add button it constantly Adds to the center number and also the longer I press it, it adds faster

I tried setTimeout and setInterval but did not worked.

this is what I have, any suggestions?

const [amount, setAmount] = useState(0);

—

     <IconButton onClick={handlePlus} className="payout__icon-button">
     <Add />
     </IconButton>

     {amount}

     <IconButton onClick={handleMinus} className="payout__icon-button">
     <Remove />
     </IconButton>

—

const AMOUNT_UNIT = 10000;
function handlePlus() {
        let val;        
        val = amount + AMOUNT_UNIT;
        setAmount(val);
    
    }

    function handleMinus() {
        var val = 0;
        val = amount - AMOUNT_UNIT;
        setAmount(val);
        }
        
    }

Is this possible? I’m doing a Frontend mentor challenge that connects and pulls Github user information after searching for a user. Everything works and is connected. I’m ready to push my code and submit my project but I would like to hide my API keys. I’m fairly new to JS, is there a way to do this without NodeJS? I’ve removed the keys themselves but this is where I am fetching the API data.

class Github {
  constructor() {
    this.client_id = CLIENT_ID_GOES_HERE;
    this.client_secret = CLIENT_SECRET_GOES_HERE;
  }

  async getUser(user) {
    const profileResponse = await fetch(`https://api.github.com/users/${user}?client_id=${this.client_id}&client_secret=${this.client_secret}`);

    const profileData = await profileResponse.json();

    console.log(profileData);

    return {
      profileData,
    };
  }
}

I am building an app like Messenger, everything works normally like sending messages, receiving messages, video calling. the technologies i use are react-native, reactJS, socket.io, nodeJS, react-native-webrtc

I wonder how can when I close an app like the messenger I can still receive incoming call notifications from other people. I’m studying firebase notification and react-native-background-timer but it doesn’t seem to work the way I want it to

Has anyone had a problem like this and have an answer, please let me know
Have a nice day guys <3

HTML Code

Javascript code

I am trying to set up some code where i can click on a specific div and it would be copied over to another div. However as the HTML code shows, the original-container falls within the originals section, then a div, then the text is under another div. I want to be able to copy one or two depending on which one i click on. It needs to be done this way specifically because we need to be able to add other divs as well. If there needs to be more details I can specify them.

PS: We were told we cannot use jquery.

I have searched a lot for this and I can not find anything that answers the specific problem that I am having. I am tying to make a game with vanilla javascript that for the simplicity of this post is similar to wordle. I need to compare user typed words against a large list of words. I have found a website that has what I need as a json object. Here is the website -> https://www.wordgamedictionary.com/word-lists/3-letter-words/3-letter-words.json or an example in case you don’t want to see the whole thing

[
{
"word": "aah"
},
{
"word": "aal"
},
{
"word": "aas"
}
]

I was able to use fetch to get the file into my main.js script using fetch

    fetch("./json/3-letter-words.json")
        .then(response => response.json())
        .then(data => {
            console.log(data)
        })

but I can’t figure out any way to use it. I want to be able to check if a user typed word is in the object and each entry only has one attribute so I figured converting it to an array of strings would be best but I just don’t know how to do that. I am currently not using any libraries or frameworks and would like to keep it that way since that is part of the point of this project. If you have any tips it would be greatly appreciated!

I am working on a react-application with react-router v6

Where the user is not logged in I want to give the access to a few pages and also i would like to have the Top Navigation bar.
But when a user is logged in I am checking the type of user and accordingly i will redirect it to the admin or user page. So now when i am redirecting it to the admin page i have got a side bar instead of a top bar. and when i am trying to access any link on the side-nav i am redirected to Pagenotfound

I have mentioned my routes on app.js

 <div>
      <Header />

      <Routes>
        {!auth && <Route path="/signin" element={<Login />} />}
        <Route path="/" element={<LandingPage />} />
        <Route path="/signin" element={<Login />} />
        <Route path="/allcourses" element={<Course />} />
        <Route path="/productdetails" element={<ProductDetail />} />

        <Route path="/admindashboard" element={<Dashboard />} />

        <Route path="*" element={<WorkInProgress />} />
      </Routes>

      <Footer />
    </div>

and the other routes which is supposed to be a Protected in the dashboard.js which is only accessible by Admin.

<Routes>
              <Route path="/admindashboard/user" element={<User />} />
              <Route path="/admindashboard/allproducts" element={<Product />} />
</Routes>

how to insert a navbar unread bold I’m using javascript inside.html the bold function is not working can you guys help me with the answer?

<script type="text/javascript">
    function GetSideBarCount() {
        $.ajax({
            url: '/Supervisor/GetSideBarCount',
            async: true,
            contentType: "application/json",
            beforeSend: function () { },
            cache: false,
            success: function (data) {
                if (data.notice != 0) {
                    $('.spn-notice-count').text(data.notice).show();
                    $('.spn-notice').html('<i class="text-danger fas fa-exclamation-circle mr-0"></i> ' + data.notice + '<b>NOTICE</b>').show();
                }
                else {
                    $('.spn-notice-count,.spn-notice').hide();
                }

I am running a loop over some data. I have an object with a key value message. Every time I loop over my array I want to append to this objects key value, I tried using spread operator but not having any luck

  const arr1 = [
    "keith",
    "kelly",
    "ed",
    "shelby"
]

const arr2 = [
    "Parker",
    "Morgan",
    "Arnold",
    "Suski",
    "Parks"
]

const addToObjectsMessageKey = arr1.map((name) => {
 let obj = {}
    arr2.forEach((lastName) => { return {...obj, message: ...obj.message + name}})
 return obj
})

console.log(addToObjectsMessageKey)

expected output

addObjectsToMessageKey = [
{ message: "Parker Morgan Arnold Suski Parks" },
{ message: "Parker Morgan Arnold Suski Parks" },
{ message: "Parker Morgan Arnold Suski Parks" },
{ message: "Parker Morgan Arnold Suski Parks" },
]

If I click on radio button, Approver list is not showing up and I can’t find error about that. I will provide both codes and screenshot. Approver should be show as in first picture but it’s not showing anything as can see in second pic.

As in the picture, If I select on Request to Access line, the Approve list should be shown down below.

The Following codes are forom JavaScript.

function ChkArea(){

var area = '';

var a_list = document.getElementsByName('chk_Area[]');

for(z=0;z<a_list.length; z++)
{
if(a_list[z].checked == true)
{
area = area + a_list[z].value + "|";
}

}

document.pac_request.area_listing.value = area;
AsynReqData(reqHttp,'approver_list.php?area=' + area,'RequestForm');
}

function AsynReqData(request,url,fn) {  // To send a request to a server
  request.open("GET", url + '&sid=' + Math.random(), true);
        request.onreadystatechange = eval(fn);
        request.send(null);
    }

These codes below are for selecting area from 19,23

<?php  
include("_dbconn.php");

echo "<script src="ews_pac.js" type="text/javascript"></script>";

$area = isset($_GET["area"])? $_GET["area"] : "";

$list_area = "";
$ary_area = array();
$ary_areano = array();

    $sql = "Select distinct(area),area_no from access_request.tbl_access_area order by area_no";
    $result = mysqli_query($conn,$sql);
    $count = mysqli_num_rows($result);
    
    while($row = mysqli_fetch_array($result)){
        $ary_area[] = $row["area"];
        $ary_areano[] = $row["area_no"];
    }
    
    if($count > 0){
    
        for($i=19;$i<23;$i++){
            $list_area .= " <input type="radio" name="chk_Area[]" id="chk_Area".$ary_areano[$i]."" value="".$ary_areano[$i]."" onclick="ChkArea()"><font face="arial" size="2" color="#3C5F84">".$ary_area[$i]."</font>&nbsp &emsp;&emsp;&emsp;&emsp;&emsp;n";
        }
    
        
    }

echo "<table align="center" border="0" width="95%" bordercolor="#DADADA" cellpadding="3" cellspacing="1">n";
echo  "<tr bgcolor="#F5F5F5"><td align="left" colspan="5">n";
echo  "<font face="arial" size="2" color="#3C5F84">&nbsp Request to Access &nbsp</font>";
echo  "&nbsp &nbsp ".$list_area;
echo  "</td></tr>n";
echo "<tr bgcolor="#F5F5F5"></tr>n";
echo  "</table>n";

?>

This part is for approver_list.php

<?php  
include("_dbconn.php");

$area = isset($_GET["area"])? $_GET["area"] : "";

if(substr($area,-1) == "|"){
    $area = substr($area,0,-1);
}
$area_list = explode("|",$area);

// print_r($area_list);
$area_clause = " area_no in ('" . implode("','", $area_list) . "')";

$ary_approver = array(
  "Lay Tian TAN"      => "[email protected]",
  "Ee-Liang LIM"      => "[email protected]",
  "Vikas JAIN"        => "[email protected]",
  "Joseph TEO"        => "[email protected]",
  "Soon Ik HONG"      => "[email protected]",
  "Cheng-Lay ANG"     => "[email protected]",
  "Tun TIN"           => "[email protected]",
  "Siong Loong WONG"  => "[email protected]",
  "TW TOH"            => "[email protected]",
  "David CHOI"        => "[email protected]",
  "Edwin FONG"        => "[email protected]",
  "Ken CHEW"          => "[email protected]",
  "Vincent TAN"       => "[email protected]"
);


$sql = "Select distinct(approver_name) from access_request.tbl_access_area where ".$area_clause."";
$result = mysqli_query($conn,$sql);

$cnt = 0;

echo "<table align="center" border="0" width="95%" bordercolor="#DADADA" cellpadding="3" cellspacing="1">n";
echo  "<tr bgcolor="#F5F5F5"><td align="left" colspan="5">n";
    echo  "<font face="arial" size="2" color="#3C5F84">&nbsp Approver &nbsp</font>";

    echo "&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;";

    while($row = mysqli_fetch_array($result)){
        foreach($ary_approver as $k => $v){


            if($k == $row["approver_name"]){
                echo "<input type="checkbox" id="chkApprover" . $cnt . "" name="chkApprover[]" value="$v" checked disabled><font face="arial" size="2" color="#3C5F84">". $k . "</font>";
                echo "<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;";
            }
        }
        $cnt++;
    }

    echo  "</td></tr>n";
    echo "<tr bgcolor="#F5F5F5"></tr>n";
    echo  "</table>n";

?>

I was using the default breakingpoint provided by Material UI for my media queries , then added one more breaking point (mobile : 400) , all the other breaking points works fine except when i reach to the width of 400px the changes doesnt take effect at that point , am i doing anything wrong here?

const theme = createTheme({
 breakpoints: {
      values: {
        xs: 0,
        mobile: 400,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,
      },
    },

at below when the screen reachs 600px width MQsm value turns to ‘true’ , but when i reach the width of 400px MQmb doesnt change.

const Navbar = (props) => {
  const cartQuantity = useSelector((state) => state.cart.totalQuantity);
  const classes = useStyles();
  const theme = useTheme();
  const MQsm = useMediaQuery(theme.breakpoints.down("sm")); //600px
  const MQmb = useMediaQuery(theme.breakpoints.down("mobile")); //360px
  console.log(MQsm);
  console.log(MQmb);

I am very new to all of this. I want a user to be able to type anywhere in a text area. Wherever the cursor is when they click is where they start typing. Is this something that can be done in a textarea or is there a better way to make this happen in HTML?

I am using Intl.NumberFormat() to format different currency correctly.
Sadly, I have a requirement that want me to put all code at the end of the value, and not at the start.

So something like this is fine, but the code is at the start and not at the end/

const number = 123456.789;


// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency',currencyDisplay:'code', currency: 'JPY' }).format(number));
// expected output: "￥123,457"

Is there a way to force it at the end without having to manually add it at the end by doing .replace('JYP','').trim()

I was copying facebook draftjs, in which just main features were added that accepts chars insertion, the case here that cursor moved to the start position of a line where it been typed in when inserting char in contenteditable div and then updating state.

From the console output, the ‘onSelect’ event handles and casts the right SelectionState from dom object which triggers twice that, the first for focusing the position of the text area, the second occurs in after ‘onInput’ event returns as the cursor position changes.

The issue here that after insert chars(which works), it didnt work as expected to remain cursor to the position where it was but the initial value

function onSelect(_this: Editor): void {
  console.log('SELECT')
  
  const { editorState } = _this.props
  
  if(_this._blockSelectEvent ||
     _this._latestEditorState != _this.props.editorState) {
    return
  }
  
  // forceSelection
  const selection = getCastSelection(editorState, getContentEditable(_this))
  
  let newEditorState: EditorState 

  if(selection !== editorState.getSelection()) {
    newEditorState = editorState.acceptSelection(selection)    
    _this.sync(newEditorState)
  }
}

function onBeforeInput(
  _this: Editor,
  e: SyntheticInputEvent<HTMLElement>
): void {
  console.log('BEFOREINPUT')  
  
  const editorState = _this._latestEditorState,
        { data } = e
  
  if(!data) {
    return
  }
  
  const selection = editorState.getSelection(),
        inlineStyle = editorState.getInlineStyle(),
        chars = data
  
  if(!selection.collapsed()) {}
 
  let newEditorState = replaceChars(
    editorState,
    chars,
    inlineStyle,
    false
  )

  _this._pendingEditorState = newEditorState
}

function onInput(
  _this: Editor,
  e: ?SyntheticInputEvent<>
): void {
  console.log('INPUT')

  if(_this._pendingEditorState != undefined) {
    _this.sync(_this._pendingEditorState)
    _this._pendingEditorState = undefined
  }
}