Category: javascript

Category Added in a WPeMatico Campaign

How to show a table after submit a form

I have a problem here, I have a form to enter scores and calculate the average score. After entering the form, the user clicks on the submit button, it will display a table of scores that have been entered before along with 2 buttons. First button will add a column of average scores to the form and the second button will determine if any average score is >= 8 the letter in that column will be highlighted in red.
Here is my code, i hope someone can help me.
Here is my html file:

<!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.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <script src="js/script.js"></script>
    <h1 align="center">Class Marksheet</h1>
    <table align="center">
      <tr>
        <td>Name:</td>
        <td><input name="name" id="name" type="text" /></td>
      </tr>

      <tr>
        <td>Math:</td>
        <td><input name="math" id="math" type="text" /></td>
      </tr>

      <tr>
        <td>Physics:</td>
        <td><input name="physics" id="physics" type="text" /></td>
      </tr>

      <tr>
        <td>Chemistry:</td>
        <td><input name="chemical" id="chemical" type="text" /></td>
      </tr>

      <td>
        <button type="submit" onclick="score_table()">Submit</button>
      </td>
    </table>

<!--
This table below must not show when user access the browser, 
it only show when user click the "Submit" button and 2 button below
-->
    <table id="tableScore" border="2" width="100%">
      <th>No</th>
      <th>Name</th>
      <th>Math</th>
      <th>Physics</th>
      <th>Chemistry</th>
      <th>Average Score</th> <!-- This still can not show -->
    </table>

   <div>
  <button onclick="">Show the average score</button> <!--This will show the average score column-->
  <button onclick="">Best student</button> <!--Determine if any average score >= 8 hightlight all the text into red-->
    </div>
  </body>
</html>

My JS file:

var testScore = { 
    name: "",
    math: 0,
    physical: 0,
    chemistry: 0
};
var i = 0; /* This variable is incremented by 1 every time the user clicks the "Submit" button. Display the "No" column, and the position of rows when added to the table 
*/

// Show a table after submit
function score_table() {
    document.getElementById("tableScore").style.display="block";

    // Gathering the data after submit
    testScore.name = document.getElementById("name").value;
    testScore.math = document.getElementById("math").value;
    testScore.physical = document.getElementById("physics").value;
    testScore.chemistry = document.getElementById("chemical").value;
}

Finally, my CSS file:

/* I just do to hidden the table, because i struggle with JS file :)) */
#tableScore {
  display: none;
}

Bootstrap 5 Dropdown Not Functioning

I am using Bootstrap 5 along Django to develop a website and I’m having issues getting a dropdown to function correctly. I have copied this code from w3schools exactly how it is and it is not working when I load the HTML. I’ve tried running it on the latest version of Chrome and Firefox and still no success. Does it have to do with the Bootstrap CDN?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </div>
</div>

</body>
</html>

ReactJS – Function is never dispatched in production

I have this component that fetches some data from an open API and I am trying to render the data in <LeadsTable leads={myDataState} /> component. The problem is that in development mode, it fetches and updates the state, but in production build it never dispatches getCurrentLeads() function. Below is my react component:

export const SomePage = () => {
  const dispatch = useDispatch();
  const myData = useSelector(({ myDataStore }) => myDataStore.leads)
  const [myDataState, setMyDataState] = useState([]);
  
  useEffect(() => {
    dispatch(getCurrentLeads('api/leads/'));
    setMyDataState(myData)
  }, [dispatch, myData]);

  return (
    <Fragment>
      <Navbar />
      <PageTitle pageTitle={'My Page'} />
      <LeadsTable leads={myDataState} />
      <Footer footerClass={'footer'} />
      <Scrollbar />
    </Fragment>
  )
};

This is my leads reducer:

const initialState = {
  leads: [],
}

export const leadsReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_CURRENT_LEADS: return { ...state, leads: action.payload }
    default: return state
  }
}

And this is my action:

export const getCurrentLeads = (url) => async (dispatch) => {
  try {
    const myLeads = await leadsService.getCurrentLeads(url)
    dispatch(getCurrentLeadsSuccess(myLeads))
  } catch (err) {
    console.log(err)
  }
}

const getCurrentLeadsSuccess = (leads) => ({
  type: GET_CURRENT_LEADS,
  payload: leads
})

I suspect it has something to do with the lifecycle of react components, and I would greatly appreciate if you explain why this behaviour or provide some link where I can read in further detail.

i want the function of for loop to perform one by one when a key or mouse is pressed

<div id="text">Nature in the broadest sense is the physical world or universe</div>
let el = document.getElementById(text);
let eltext = el.innerText;
let final = eltext.split(" ");
let i;
for (i = 0; i < final.length; i++) {
 if (final[i] === "the") {
   final[i] = `<b>${final[i]}</b>`;
 }
let result = (final + " ").replace(/,/g, " ");
el.innerHTML = result;

the result will be:
Nature in the broadest sense is the physical world or universe

what i want:
when any key is triggered for the first time:
Nature in the broadest sense is the physical world or universe

when any key is triggered for the second time:
Nature in the broadest sense is the physical world or universe

when any key is triggered for the third time again:
Nature in the broadest sense is the physical world or universe

Scraping ASPX NodeJS Cheerio

I’m trying to scrape this website: https://sousa.umerl.maine.edu:444/nutrition/WeeklyMenu.aspx using cheerio. Essentially, I’m trying to get the breakfast, lunch, and dinner menus for each day. Right now, I’m trying to scrape Sunday’s breakfast. I’m using this script. The issue is that the script returns everything in the “foodItem”. I just want the names of each meal, but there doesn’t seem to be a class or id to get the names by. If anyone can help, I’d much appreciate it! Thanks!

const express = require('express');
const request = require('request');
const cheerio = require('cheerio');
const app = express();
//CORS- ISSUE SORTED
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
  next();
});
//CORS- ISSUE SORTED
app.get('/', async function(req, res) {
  const url = 'https://sousa.umerl.maine.edu:444/nutrition/WeeklyMenu.aspx';
    const options = {
      url: url,
      headers: {
        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36'
      }
    };
    request(options, function(error, response, html) {
        //Scrape each foodItem. If div with class labelComingSoon or label exists, get value right before the div. Some examples of the values I'm scraping include Grandy Oats Steel-Cut Oatmeal, or Hard Boiled Eggs:
        const $ = cheerio.load(html);
        const foodItems = $('.foodItem');
        const foodItemArray = [];
        foodItems.each(function(i, element) {
          const foodItem = $(this).text();
          foodItemArray.push(foodItem);
        });
        res.send(foodItemArray);
    });
});

app.listen(process.env.PORT || 5000);
module.exports = app;

How do I download the file returned from my API (HTML)?

So still a noob at this, here is my code

Here is my FAST API(python) which returns a .ics file:

@app.get("/latLong/")
async def read_item(lat: float,long:float):
    mainFunc(lat,long)
    return FileResponse("/tmp/myics.ics")

Now, when here is my front end via HTML:

<script>
  async function apiCall(long,lat) {

  
    let myObject = await fetch('myapi.com/lat/long');
    let myText = await myObject.text();
  
 
  }
  
</script>

So from my visor (my api logs), it successfully calls the API. But from the front end, I am trying to get it to return the file.

The end result I would like to achieve is when the user clicks a button, the browser grabs the location.

Sends the location to the API, API returns a file in which the user can download.

Thanks in advance!

How to define time out to API petition using axios reactjs

I am trying to set timeout to API petition in case i get some error using get, then Loader keeps running for at least 3 seconds to finally show a text sayd “no data or API connection/petition failed”.

I have Dashboard.jsx that works perfectly if theres not error for url, server API fallen, etc.
To simulate an error i just changed url and I turned off the server but i get TypeError: paciente.map is not a function and Loader dies instantly.

I tried setting timeout: 3000 in axios but get anything

export const Dashboard = (props) => {
  const [paciente, setPaciente] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [errormsg, setErrormsg] = useState("");

  const navigate = useNavigate();
  let url = `${Apiurl}pacientes?page=1`;
  useEffect(() => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        if (!response.err) {
          setPaciente(response.data);
          setError(null);
        } else {
          setPaciente([]);
          setError(response);
        }
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setErrormsg("No data");
        setLoading(false);
      });
  }, []);
  const handleClick = (id) => {
    navigate(`/edit/${id}`);
  };
  return (
    <>
      <Header />
      {loading && (
        <div className="loader-container">
          <Loader />
        </div>
      )}
      <div className="container">
        <table className="table table-dark table-hover">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">DNI</th>
              <th scope="col">NOMBRE</th>
              <th scope="col">TELEFONO</th>
              <th scope="col">CORREO</th>
            </tr>
          </thead>
          <tbody>
            {!error ? (
              paciente.map((data, i) => {
                return (
                  <tr key={i} onClick={() => handleClick(data.PacienteId)}>
                    <td>{data.PacienteId}</td>
                    <td>{data.DNI}</td>
                    <td>{data.Nombre}</td>
                    <td>{data.Telefono}</td>
                    <td>{data.Correo}</td>
                  </tr>
                );
              })
            ) : (
              <tr>
                <td colSpan="5">{errormsg}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </>
  );
};

Selecting 1 Index from a Mapped array

I am trying to build a Sound Board.
I’m having a hard time understanding how to select one index to change my button’s colour as currently it is changing all the buttons, but I want to change only one.

$isActive is passed above in a styled comp like this :
const Button = styled.button<{ $isActive?: boolean }>background: ${props => props.$isActive ? "linear-gradient(55deg, #ff00e1, #ffb9df,#ffb9df, #ff00cc);" : "black"};

export default function BassPlayer() {
const [activeSound, setActiveSound] = useState(null);
const [activeIndex, setActiveIndex] = useState(null);
const [isActive, SetIsActive] =useState(false); 

const createSound = (beat: string) => {
    return new Howl({
        src: beat,
        autoplay: false,
        loop: false,
        volume: 0.5
    });
}

const handleClick = (beat: string, index: number ) => {
const ButtonColorChange = SetIsActive(!isActive);
    if (activeSound) {
        activeSound.stop(); 
    }
    if (activeIndex !== index) {
        const newSound = createSound(beat);
        newSound.play();
        setActiveSound(newSound);
    }
    setActiveIndex(index);
};
return (
    <Container>
        <Title>Bass</Title>
        <Grid>
            {
                bassData.map((beat, index: number) => {
                    return <Button key={index} $isActive={isActive} onClick={() => handleClick(beat.src,index)}>{beat.title}</Button>
                })
            }
        </Grid>
    </Container>

)

};

form events submission exercise solution

enter image description here

index. html

<!DOCTYPE html>

<head>
<title>Grocery List</title>
<!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
<script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
<h1>Grocery List</h1>
<form action="/nowhere">
    <label for="item">Enter A Product</label>
    <input type="text" id="product" name="product">
    <label for="item">Enter A Quantity</label>
    <input type="number" id="qty" name="qty">
    <button>Submit</button>
</form>

<ul id="list"></ul>
</body>

</html>

app.js

`// Leave the next line, the form must be assigned to a variable named 'form' in order for the 
exercise test to pass
const form = document.querySelector('form');
const qty = document.querySelector('#qty');
const product = document.querySelector('#product');
const ul = document.querySelector('#list');
form.addEventListener('submit',function(e){
   e.preventDefault()
   const productVal = product.value;
   const qtyVal = product.value;
   const newLi = ul.createElement('li');
   newLi.innerText = `${qtyVal } ${productVal}`;
   ul.appendChild('newLi');
   product.value = '';
   qty.value = '';

});`

This is the code I am finding trouble with please see the attached pic and help me with the solution Thank you,

Update user/workspace settings from vs code extension

I am trying to update setting.json from my vs code extension and I want to add below code

 "files.associations": {
        "*.app": "auraComponent"
    }

In other words I want to add below key value pair from extension to the users who are going to install my app

enter image description here

So I tried putting the below code in extension.js but it didn’t update the settings.

import { ConfigurationTarget, workspace } from 'vscode';

const configuration = workspace.getConfiguration('files.associations');
configuration.update('.app', 'auraComponent', ConfigurationTarget.Global).then(() => {
    // take action here
});

Could someone please suggest if I am using the right approach to update the user or workspace settings and also if the code inside extension.js would be executed automatically or not.

divs used as buttons don’t stay active

robbie-robertson.com/uw_test/poverty-simulation.html

that is the site i’m working on… the code that is supposed to make the divs stay active doesn’t do it. i suspect it’s because my divs are all grouped by class and im trying to split them up in 3’s. i tried to use session storage to store the individual divs active state by id but it didnt work. thanks in advance.


var active = 0;

var btns = document.getElementsByClassName("card");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
// sessionStorage.getItem(this.className); 
btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");

  // If there's no active class
  if (current.length > 0) {
    current[0].className = current[0].className.replace(" active", "");
  
  }

  // Add the active class to the current/clicked button
  this.className += " active";
  // sessionStorage.setItem(this.className, active);
});
}

here is the rest of the javascript.

https://robbie-robertson.com/uw_test/scripts/main.js