Category: javascript

So I have been having some problems with launching the initial react-native template project on android. And after consulting someone I was told that jdk 17 is not supported. But I really don’t want to downgrade as this could break other things that I already have and work with. To be specific this is the error I get:

> Task :app:processDebugMainManifest FAILED
11 actionable tasks: 2 executed, 9 up-to-date

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugMainManifest'.
> Unable to make field private final java.lang.String java.io.File.path accessible: module java.base does not "opens java.io" to unnamed module @7ec6bc9b

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. 

* Get more help at https://help.gradle.org

BUILD FAILED in 20s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081


* What went wrong:
Execution failed for task ':app:processDebugMainManifest'.
> Unable to make field private final java.lang.String java.io.File.path accessible: module java.base does not "opens java.io" to unnamed module @7ec6bc9b

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. 
* Get more help at https://help.gradle.org

BUILD FAILED in 20s

    at makeError (C:UserskartiDesktopShoppingListnode_modulesexecaindex.js:174:9)
    at C:UserskartiDesktopShoppingListnode_modulesexecaindex.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (C:UserskartiDesktopShoppingListnode_modules@react-native-communitycli-platform-androidbuildcommandsrunAndroid    at async Command.handleAction (C:UserskartiDesktopShoppingListnode_modules@react-native-communityclibuildindex.js:192:9)

I have looked at this already and nothing worked.
Gradle: Execution failed for task ‘:processDebugManifest’

I’ve made video on this topic that will help you get basic idea on how to effectively work with objects.

Click Here To Checkout Youtube Video

let a= async function d(frm,to){
let c = await fetch('http://api.exchangeratesapi.io/v1/latest? 
access_key=77bdf9458124569180fd15fdab79f07f')
return await c.json()
}

a(frm,to).then(value=>{
    return value.rates}).then(data=>{
        if((data[to]/data[frm]).toString().length===1){
            output.value=`${(amount*(data[to]/data[frm])).toFixed(2)}`;
            console.log(data[to]);
        }
        else{
        output.value=`${amount*(data[to]/data[frm]).toFixed(2)}`;
        console.log(data[to]);
        }
    })

I am working on currency converter i have used api for that my code above works properly and i am getting output correctly but i am not getting output when i have published it on git hub.Error is shown below in the image

I have a JSON which is too big to show here, you can check that json on this site

So in flavor_text_entries there are a lot of Arrays I want to filter array which includes A key language with value en.

How can I filter it?
And I will get different amount of Arrays in flavor_text_entries every time.

Thanks in advance.

I am attempting to View my Local host Browser using the “Yarn Start” In the Terminal, however when i try to open it i get an error that says “Compiled with problems:X

ERROR in ./src/App.js 6:0-56

Module not found: Error: Can’t resolve ‘./components/DirectoryComponent’ in ‘/Users/keithquinney/Desktop/NucampFolder/3-React/nucampsite/src'”

Any ideas as to what the problem could be , as i retraced my steps to see if i was missing something including looking at my fellow classmates code to compare and i don’t screenshot seem to find the source of the problem. ** Please see the Screenshot attached** Thank you

I have created a simple form, and I’m trying to store the input values via the JavaScript. As you can see in the screenshot that I have attached down below one of the variables doesn’t print anything while the one without the “.value” returns the correct HTML tag. This means that I am able to pick the correct tags and it is not an issue of “wrong id or spelling errors”. Please let me know why this happens, or where is the fault in this code.

Screenshot of the code and the browser with console.

The official React docs says that you should fetch data from server in componentDidMount lifecycle method.

It could sound a bit weird that in case when your component need some data (which is pretty often) you should always wait for initial rendering, including slow DOM api manipulations for the component and its children. It provides unreasonable delay in sending the request to server.

How could you explain why it is a good decision for React team not to implement a special lyfecycle method like componentFetchInitialData (which is invoked at the beginning) for initial data fetching?

The question from the interview that made me confused

Currently my structure looks like this: https://i.imgur.com/jiZuN5D.png
And my index.js contains this code:

import AddStudentForm from "../lib/StudentForm";
import CreateCarForm from "../lib/StudentForm";
import SearchStudent from "../lib/SearchForm";

export default function Home() {
  return (
        <><title>351 Project</title>
        <link rel="stylesheet" type="text/css" href="styles/globals.css" />
        <body>
      <div id="wrapper">
        <nav>
          <ul>
            <li><a href="index.html" title="Homepage">Homepage</a></li>
            <div class="dropdown">
        <li class="dropbtn"><a href="student_advisor_notes.html" title="Student">Student information</a></li>
            <div class="dropdown-content">
            <a href="student_advisor_notes.js">Student/Advisor Notes</a>
                <a href="#">N/A</a>
            </div>
        </div>
            <li><a href="blank.html" title="Advisor">Advisor Information</a></li>
            <div class="dropdown">
              <li class="dropbtn"><a href="blank.html" title="Information">Information Station</a></li>
              <div class="dropdown-content">
                <a href="#">Schedule of Classes</a>
                <a href="#">Common Caveats</a>
                <a href="#">Degree Evaluation</a>
              </div>
            </div>
            <li><a href="blank.html" title="Contact">Account Name</a></li>
          </ul>
        </nav>
        <div id="border">
          <main>
            <h1>Advising System</h1>
            <p>Created by:   </p>
            <p>Don't forget to register for classes, here are the times you can register:<br></br>
            </p>
            <table>
              <tbody><tr>
                <th>From</th>
                <th>Begin Time</th>
                <th>To</th>
                <th>End Time</th>
              </tr>
                <tr>
                  <td>Nov 04, 2021</td>
                  <td>07:30 am</td>
                  <td>Nov 12, 2021</td>
                  <td>11:59 pm</td>
                </tr>
                <tr>
                  <td>Dec 13, 2021</td>
                  <td>08:00 am</td>
                  <td>Dec 17, 2021</td>
                  <td>11:59 pm</td>
                </tr>
                <tr>
                  <td>Jan 03, 2022</td>
                  <td>08:00 am</td>
                  <td>Jan 18, 2022</td>
                  <td>11:59 pm</td>
                </tr>
                <tr>
                  <td>Jan 03, 2022</td>
                  <td>08:00 am</td>
                  <td>Jan 18, 2022</td>
                  <td>11:59 pm</td>
                </tr>
              </tbody></table>
            <div class="box">
              <h1>Add a Student</h1>
              <AddStudentForm />
              <h1>Search for Student</h1>
              <SearchStudent />
            </div>
            <h3>About us:</h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Tellus mauris a diam maecenas sed. Donec et odio pellentesque diam volutpat commodo sed. Ac tincidunt vitae semper quis. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Etiam tempor orci eu lobortis elementum. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. In massa tempor nec feugiat nisl. Lorem dolor sed viverra ipsum nunc.</p>
          </main>
          <footer>
            Copyright &copy; 2020 <br></br>
            <a href="mailto:[email protected]">[email protected]</a>:: <a href="placeholder.html" title="Contact Form">Contact Form</a>
          </footer>
        </div>
      </div>
    </body></>
)
}

It works fine and when i load up the page on localhost:3000(loads index.js), it shows me the page correctly and all the forms works etc. My question is, how do i make other pages work like this? I have a page under public that is called student_advisor_notes and when i make it a .js, it just displays plain text when i go to it, but if i make it an HTML then the forms dont work. I know this is a dumb question, but im completely new to all this. Basically, how do i structure my files to make it so that the webpages load and can be displayed properly but also run the code inside them, like my index.js does?

Currently I’m trying to print two copies of the same receipt without using the browser-print dialogue. Now unfortunately there is no way to pass the number of copies to the print dialog so the only solution I came up with is doing it in a LOOP, but when looping the print command it does not work! while looping the whole POST method works just fine.

Here’s the code before I enter the loop
print function

function p_print(receipt) {

        $('#receipt_section').html(receipt.html_content);
        __currency_convert_recursively($('#receipt_section'));
        __print_receipt('receipt_section');
    
}

Code without Loop

        $.ajax({
            method: 'POST',
            url: url,
            data: data,
            dataType: 'json',
            success: function(result) {
                if (result.success == 1) {
                    if (result.mail_enabled) {
                        window.open(result.mail_enabled);
                    }
                    $('#modal_payment').modal('hide');
                    toastr.success(result.msg);


                    //Check if enabled or not
                    if (result.receipt.is_enabled) {
                        p_print(result.receipt);
                    }
                } else {
                    toastr.error(result.msg);
                }
            },
        });

Functioning loop that prints twice but also POSTS the data twice

        var Count = 0;
        var Copies = 2; 
        while ( Count < Copies ) {
        $.ajax({
            method: 'POST',
            url: url,
            data: data,
            dataType: 'json',
            success: function(result) {
                if (result.success == 1) {
                    if (result.mail_enabled) {
                        window.open(result.mail_enabled);
                    }
                    $('#modal_pay').modal('hide');
                    toastr.success(result.msg);


                    if (result.receipt.is_enabled) {
                        p_print(result.receipt);
                    }
                } else {
                    toastr.error(result.msg);
                }
            },
        });
        Count ++;  
        };

Now If I apply the loop only on p_print(result.receipt) it wont print twice, only by applying it to the whole POST request it would then print twice but also stores the data twice which is not a proper solution at all.

Any help would be very appreciated.

I have an videos array, which in turn has objects of type Video (typing below).

I need that when clicking on the button corresponding to a specific video, I can open only one modal with the information of the clicked video.

interface VideosInfo {
  id: number;
  title: string;
  url: string;
  quiz: boolean;
}

interface PagePros {
  videos: VideosInfo[]
}

Below is the component that renders the array of videos through a map, notice that inside the map, I have an onClick function that calls the modal.

import { VideoModal } from '../index';
import { useVideos } from '../../../../hooks/Videos';

export const Videos: React.FC<VideoProps> = ({ module_id }) => {
  const [modalOpen, setModalOpen] = useState<boolean>(false);

  const { getVideos, videos, loadingVideos } = useVideos();

  const handleCloseModal = () => {
    setModalOpen(false);
  };

  const VideosData = () => {
    if (videos.length) {
      return (
        <List dense>
          {videos?.map(video => (
            <div key={video.id}>
              <ListItem onClick={() => setModalOpen(true)} button>
                <ListItemText primary={video.title} />
              </ListItem>
              <Divider />

              <VideoModal
                open={modalOpen}
                handleClose={() => handleCloseModal()}
                video={video}
                video_id={video.id}
              />
            </div>
          ))}
        </List>
      );
    }

    if (!videos.length && !loadingVideos) {
      return (
        <Typography variant="body1">
          Não existem vídeos cadastrados neste módulo.
        </Typography>
      );
    }

    return <LoadingScreen text="Carregando vídeos..." />;
  };

  useEffect(() => {
    getVideos(module_id);
  }, [module_id, getVideos]);

  return (
    <Grid container spacing={2}>
      <Grid item xs={12} md={12}>
        <VideosData />
      </Grid>

      <Grid item xs={12} md={12}>
        <Button variant="text" color="primary">
          Novo Vídeo
        </Button>
      </Grid>
    </Grid>
  );
};

And below the VideoModal component:

export const VideoModal: React.FC<ModalProps> = ({
  video,
  open,
  handleClose,
  video_id,
}) => {
  console.log('videos modal', video);

  return (
    <Dialog
      open={open}
      aria-labelledby="form-dialog-title"
      onClose={handleClose}
    >
      <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        <h2>test</h2>
      </DialogContent>
    </Dialog>
  );
};

I understand that the modal uses the “open” property to define whether it is open or not, but when I click the button and perform the setModalOpen, it renders a modal for each object in the array. I don’t understand how I could assemble this correctly.

I want Inspect a site but Java Script pause my debugger.

enter image description here

1 – The site does not load when I turn off JavaScript.

2 – This script, like the one you see in the picture, run with different names each time.

Buen día, en mi viaje aprendiendo react, estoy usando la librería de react router dom para lo que es una aplicación de las características de cada uno de los países del mundo, bueno el problema surge que cuando mando las propiedades que capturo del método fetchCountry y los mando a mi componente card, lo que me gustaría hacer si es posible o si hay una solución mas factible es que cuando le doy click al componente link este me mande al componente Descripcion.js y hay lo que quiero es mostrar todas las características de cada pais que vaya seleccionando

import { useState,useEffect } from "react";
import Card from "./Card";

const Section1 = () => {

    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);

    const [items, setItems] = useState([]);

    const fetchCountry = async () => {
      fetch('https://restcountries.com/v2/lang/es')
      .then(res => res.json())
      .then((data) => {
          setIsLoaded(true);
          setItems(data);
      },
        (err) => {
          setIsLoaded(true);
          setError(err);
        }
      );
    }

    useEffect(() => {
        fetchCountry();
      }, [])
      
      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
        return (
          <section>
              <div className="flex flex-wrap p-1 m-10">
              { 
                items.map((item) => (
                  <div className="mr-8 mb-10" key={item.name} >
                  <Card {...item}/>
                  </div>
                ))
              }
              </div>
          </section>
          
    )
  }
}
export default Section1

Aquí se puede ver el componente section que lo que hace es llamar a la api de apicountry y los datos los mando a mi componente Card.js

import { Link } from "react-router-dom"
const Card = ({ name, flag, population, region, capital, ...props }) => {

  return (
      <div className="w-280 h-full shadow-md rounded-md">
                    <Link to={`/description/${name}`} params={ props }>
          <img className="rounded-t-md w-full h-180" src={flag} alt="" />
                    </Link>
          <div className="p-2 mt-4 mb-10 mx-3">
              <h1 className="font-bold text-xl mb-3">{name}</h1>
              <h2 className="font-bold my-1">Population:<span className="font-normal ml-1">{population}</span></h2>
              <h2 className="font-bold my-1">Region:<span className="font-normal ml-1">{region}</span></h2>
              <h2 className="font-bold my-1">Capital:<span className="font-normal ml-1">{capital}</span></h2>
          </div>
      </div>
   )
};

export default Card;

Aquí en mi componente Card recibo las props e itero algunos datos como el nombre del pais, la region y la capital ahora bien en lo que es el componente link al darle click me dirige al componente description, pero ahora estando dentro de este componente quisiera agregar algunas de las descripciones que me incluye la api como el lenguaje, distancia, clima etc. pero no logro hacer que las props que recibo de card las pueda mandar por medio del componente link a mi componente descripcion y hay dentro poder iterar las propiedades faltantes, cualquier ayuda que puedan brindarme seria de gran ayuda y la apreciaría mucho de antemano gracias

Attempting to make a chessboard with JavaScript using canvas, but my code is only displaying a blank screen when I go to test.

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
//ctx.fillRect(0, 0, canvas.width, canvas.height);

class Square {
    constructor(space, color, size) {
        ...
    }

    draw(x, y) {
        ctx.fillStyle = this.color
        ctx.fillRect(x, y, this.size, this.size)
    }
}

class Game {
    constructor() {
        this.squares = createBoard()
    }

    createPattern(length, size) {
        for (let i = 0; i < length; i++) {
            var xOffset = size * (i + 1)
            let color = ''

            for (let j = 0; j < length; j++) {
                var yOffset = size * i
                if (i % 2 === 0 && j % 2 === 0) {
                    color = '#FFE9C4'
                } else {
                    color = '#FFD58F'
    
                    if (i % 2 != 0 && j % 2 != 0) {
                        color = '#FFE9C4'
                    }
                }

                const square = new Square(this.squares[(i*8) + j], color, 80)
                square.draw(xOffset, yOffset)
            }
        }
    }
}

I used some console.log() print checks in the createPattern function and they returned when they were supposed to, so I figure there is something I am missing that physically allows the canvas to draw what I want.

Assume that I have code to initialize createPattern after this code block.

thank you for the time you will take to resolve my issue !

I am not sure that Google app script allows to do what I need.
Could you please tell me if it is possible?
If yes, do you have already a script code to do it?

I have created a file which I have shared it with others colleagues (in a shared drive), and it is used as a “template”.

When a colleague creates a copy of it, I would like that the script to give me the new Google sheet id created from the model and saved this id in my Google sheet dashboard?

Is it possible with appscript?

Thanks a lot and have a good day !

I’m trying to use a user inputted number for multiple calculations in a component. I am able to use the input for the first calculation (deckboards) but not for the others. For example, newArea / 0.145 is output. But the next calculation for joists (newArea / 0.45) is not output, and neither are the following calculations. Any help would be much appreciated!

import { useState } from "react";
import AddPercent from "./AddPercent";

const Counter = () => {
  const [area, setArea] = useState("");
  const newArea = (e) => {
    const value = e.target.value;
    const deckCalc = deckBoards(value);
    setArea(deckCalc);
  };

  const deckBoards = (newArea) => {
    return (newArea / 0.145).toFixed(2);
  };
  const joists = (newArea) => {
    return (newArea / 0.45 + 1).toFixed(2);
  };
  const sixMJoists = (joists) => {
    return (joists / 6).toFixed(2);
  };
  const fourMJoists = (joists) => {
    return (joists / 4.8).toFixed(2);
  };
  const screws = (joists) => {
    return (joists * 13.2).toFixed(0);
  };

  return (
    <div label="Deck">
      <h2>Total area of deck</h2>
      Area
      <input
        placeholder="Enter area here"
        type="text"
        onChange={newArea}
        type="number"
      />
      <br />
      <h2>Deck boards</h2>Deck boards at 140mm wide : {area} lineal metres
      <AddPercent />
      <br />
      <h2>Joists</h2>Joists based on 450mm spacing : {joists} lineal metres
      <p>Which is equal to this many 6m lengths : {sixMJoists}</p>
      <p>or</p>
      <p>This many 4.8m lengths : {fourMJoists}</p>
      <AddPercent />
      <br />
      <h2>Screws</h2>Number of screws needed : {screws}
      <AddPercent />
    </div>
  );
};