Category: javascript

I am currently working on a project for internship and got a problem with the website. Let me describe the problem so I have a slideshow on the page and got a button and a div placed on it with position: absolute;. But the image doesn’t scale depending on the content so it goes out of the image.

This is my js, html and css code for the slideshow and button and clear div:

 **JS Code:**
    <Script>
        var i = 0;
        var images = [];
        var time = 3000;
    
        // Image list
        images [0] = 'img/image1.png';
        images [1] = 'img/image2.png';
        images [2] = 'img/image3.png';
        images [3] = 'img/image4.png';
    
        // Change Image
    function changeImg() {
    document.slide.src = images[i];
    
    if (i < images.length - 1) {
    i++;
    } else {
    i = 0;
    }
    setTimeout("changeImg()", time);
    }
    
    window.onload = changeImg;
    </Script>
    
    **Html code:**
    <div class="slideshow-content">
        <!-- Slideshow -->
        <img class="slideshow" name="slide">
    
        <!--White box on slideshow-->
        <div class="DivOnImage">
            <p class="TitleOnImage">UITZENDEN ZOALS HET HOORT</p>
            <p class="TextOnImage">'DE VRIJE WERKERS is een unieke, bewezen en door overheid goedgekeurde backoffice methode
                waarmee uitzendkrachten <b>nooit in vaste dienst</b> hoeven, <b>bruto uitbetaald worden</b> (en zo meer
                overhouden), <b>beter verzekerd</b> zijn, <b>pensioen</b> opbouwen, de <b>administratieve rompslomp wordt
                    geëlimineerd</b>, en <b>uitzendbureaus meer verdienen.*</b></p>
        </div>
    
        <div>
            <!--Button on slideshow-->
            <button class="button3" type="button">MEER INFO</button>
        </div>
    </div>

     **CSS code:**
    * {
        margin: 0;
        font-family: Calibri;
    }
    
    IMG.slideshow {
        object-fit: cover;
        display: block;
        max-height: 340px;
        width: 100%;
    }
    
    .button3 {
        background-color: #5BD8C0;
        position: absolute;
        width: 157px;
        height: 35px;
        top: 250px;
        border: none;
        outline: none;
        text-align: center;
        text-decoration: none;
        font-size: 17px;
        color: white;
        font-weight: lighter;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .button3:hover {
        background-color: #68BBCE;
        cursor: pointer;
    }
    
    .DivOnImage {
        position: absolute;
        width: 70%;
        height: auto;
        top: 60px;
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.7);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
    }
    
    .TitleOnImage {
        font-size: 38px;
        color: black;
        font-weight: bold;
        text-align: center;
        padding-top: 30px;
    }
    
    .TextOnImage {
        color: black;
        text-align: center;
        padding-top: 15px;
        max-width: 100%
    }

My app gets initialized with a json payload of ‘original values’ for attributes in a task form. There is a shared state between various components through a context manager submissionState that also gets imported to this form component. This shared state is a copy of the original values json but includes any edits made to attributes in the payload. I would like to include individual ‘reset’ buttons for each input of the form which would update the shared state to the original value in the json payload. The original values get passed into the parent form component as props and the edited value state gets called from within the parent component as well.

const FormInput = ({ fieldName, fieldValue, onChange, originalValue }) => {

  const handleReset = e => {
    //????
  }

  return (
    <div>
      <label htmlFor={fieldName}>
        {fieldName}
      </label>
      <br />
      <input type="text"
        name={fieldName}
        value={fieldValue}
        onChange={onChange}/>
      <button id="reset" onClick={handleReset}>↻</button>
      <br />
      <div>{originalValue}</div>
    </div>
  );
};


const TaskForm = (payload: TaskPayload) => {
  const { submissionState, setSubmission } = useTask();

  function handleChange(evt) {
    const value = evt.target.value;
    setSubmission({
      ...submissionState,
      [evt.target.name]: value,
    });
  }

  const taskFields = ["name", "address", "address_extended", "postcode", "locality", "region", "website"];

  return (
    <div>
      <form>
        {taskFields.map((field) => {
              <FormInput
                key={field}
                fieldName={field}
                fieldValue={submissionState[field]}
                onChange={handleChange}
                originalValue={payload[field]}
              />
          })
        }
      </form>
    </div>
  );
};
export default TaskForm;

What I would like to do is include logic in the reset button function so that any edits which were made in a form input (from state) get reverted to the original value (stateless), which comes from the payload props: payload[field].

The form input is controlled through a global shared state submissionState, so the reset button logic can either modify the shared state itself with something like:

  const handleReset = (submissionState,setSubmissionState) => {
    setSubmission({
      ...submissionState,
      fieldName: originalValue,
    });

but I would need to pass the submissionState and setSubmission down through to the child component. It would be better if I can somehow update the value attribute in the input, which in-turn should potentially update the shared state? And the logic can just be something like this (assuming I can somehow access the input’s value state in the reset button)

  const handleReset = (?) => {
    /*psuedo code:
      setInputValueState(originalValue)
     */
  }

I’m asking this question because I was surprised how little information I could find from Googling. However, I was able to track down what I think is the root cause. I’ll share it as an answer and see if someone is able to elaborate or provide a better explanation.

So, to clarify, I’m using the AWS JavaScript SDK for Cognito. When I tried some of the standard use cases, I received the following error:

Client is configured for secret but secret was not received

What steps can I take to resolve this?

I’m working in this very old application that relies pretty heavily on jQuery.

What I am trying to grab is this specific elements background image. I can log the entire DOM element and clearly see that backgroundImage has a value, the URL is correct, and I know that that is exactly what it should be giving me.

However, when I go get that value I get nothing. I can’t log it into the console or anything. Is there something very specific I need to be doing? I feel like this should be pretty simple: if I can see the element and log it, I should be able to grab anything from it.

I’m traversing up the DOM with .parents() and grabbing the correct element, then trying to put the background image of that element into a variable with element.style.backgroundImage but nothing is happening.

Can’t log it and no errors. Am I doing something very wrong here? I haven’t found anything specific to this problem.

Thanks!

I have two events, let’s call them a and b.

b is always triggered when a is triggered but

when b is triggered, a is not guranteed to trigger.

How do I make it so that when a is triggered, b doesn’t happen?

el.addEventListener('a', async (event) => {
  doSomething();
});
el.addEventListener('b', async (event) => {
  doSomething();
});

We get a non nested object

obj = {
        "your-email": "[email protected]",
        "prename": "Jane Doe",
        "service__1": "Google",
        "login__1": "[email protected]",
        "password__1": "PW1",
        "service__2": "Microsoft",
        "login__2": "[email protected]",
        "password__2": "PW12!",
        "service__3": "Stackoverflow",
        "login__3": "[email protected]",
        "password__3": "3PW2!",
        "DPA": "1"
    }

We would like to transform this object into following structure:

nestedOBJ =         
{
        "your-email": "[email protected]",
        "prename": "Jane Doe",
        "DPA": "1",
        "service1": 
                  {
                    "service__1": "Google",
                    "login__1": "[email protected]",
                    "password__1": "PW1"
                  },
        "service2": 
                  {
                    "service__2": "Microsoft",
                    "login__2": "[email protected]",
                    "password__2": "PW12!"
                  },
        "service3": 
                  {
                    "service__3": "mySQL",
                    "login__3": "[email protected]",
                    "password__3": "3PW2!"
                  },
        "service4": 
                  {
                    "...":"..."
                  }
}

The following code has been tried without success:

let res = {}
let length = Object.keys(obj).length -3;
for (let i = 0; i < length  ; i + 3){
console.log(steps.trigger.event.body[0]["service__"+i])
  let onestedOBJ = {
    ["creds"+i]:steps.trigger.event.body[0]["service__"+i],
    ["creds"+i]:steps.trigger.event.body[0]["login__"+i],
    ["creds"+i]:steps.trigger.event.body[0]["password__"+i]
  }  
console.log(nestedOBJ)
}

We didn’t include the DPA, your-email and prename. Because the for loop didn’t even work.

I am using material-UI and redux in react I am using first-time redux so I am confused about how to implement it with my list items.

here is my code of product.js and I am successfully getting data in my redux store, I will show you below

const dispatch = useDispatch(); 

const {loading, product, error, productCount} = useSelector(state => state.products);
console.log(loading)
console.log(product)
console.log(error)
console.log(productCount)


useEffect(()=>{
      const data =  dispatch(getProducts());
      console.log(data)
},[dispatch])

here is my code of table

<TableContainer component={Paper}>
<Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
  <TableBody>
    {(rowsPerPage > 0
      ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
      : rows
    ).map((row) => (
      <TableRow key={row.name}>
        <TableCell component="th" scope="row">
          {row.name}
        </TableCell>
        <TableCell style={{ width: 160 }} align="right">
          {row.calories}
        </TableCell>
        <TableCell style={{ width: 160 }} align="right">
          {row.fat}
        </TableCell>
      </TableRow>
    ))}

    {emptyRows > 0 && (
      <TableRow style={{ height: 53 * emptyRows }}>
        <TableCell colSpan={6} />
      </TableRow>
    )}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TablePagination
        rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
        colSpan={3}
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        SelectProps={{
          inputProps: {
            'aria-label': 'rows per page',
          },
          native: true,
        }}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
        ActionsComponent={TablePaginationActions}
      />
    </TableRow>
  </TableFooter>
</Table>

if I show to my redux data so I am receiving data on this page

here is my console image

I hope it will be enough code to describe my problem but if anyone want to see further code to understand my problem so i will provide it

i am trying to use ‘normal’ camera on my iphone 11 pro.
I use react-native-vision-camera.
When i run this code:

  const devices = useCameraDevices();
  const deviceBack = devices.back;
  console.log(deviceBack?.devices)

I get only 2 cameras : ["ultra-wide-angle-camera", "wide-angle-camera"], I don’t want a wide camera, I want to access to my normal camera, how to do it ?
Thanks.

When I server the app from this repo with live Server I get a neat

But If I serve it with node const server = http.createServer((req, res) => {...} code in the index.js file, I get this blurred result.

I tried also with an static server with the same result (commented in the index.js codein the repo)

var file = new(static.Server)(__dirname);

http.createServer(function (req, res) {
  file.serve(req, res);
}).listen(8000);

In the screenshots might not be that clear, but when the app runs in the browser the difference is huge. I think there should be some step in the serving process that I am missing.

Thanks in advanced for any idea.

I am working on a function using Javascript that according a received value (a mark) returns to you the qualification of this mark, according to the Spanish educational system. The code is the following one:

function calculateSpanishClassAverageMark(averageMark) {
    console.log("me muestra mi nota media", averageMark);
    var markText = " ";

    switch (averageMark) {
        case 10:
            markText = "Esta clase ha obtenido una matrícula de honor"
            break;
        case averageMark >= 9 && averageMark < 10:
            markText = "Esta clase ha obtenido un sobresaliente"
            break;
        case averageMark >= 7 && averageMark < 9:
            markText = "Esta clase ha obtenido un notable"
            break;
        case averageMark >= 6 && averageMark < 7:
            markText = "Esta clase ha obtenido un bien"
            break;
        case averageMark >= 5 && averageMark < 6:
            markText = "Esta clase ha obtenido un suficiente"
            break;
        case averageMark >= 4 && averageMark < 5:
            markText = "Esta clase ha obtenido un insuficiente"
            break;
        case averageMark < 4:
            markText = "Esta clase ha obtenido un muy deficiente"
            break;
        default:
            break;
    }

    return console.log("Marktext", markText);
}

The first console.log shows me muestra mi nota media 7.625so the averageMark parameter is being received. However, the console.log that I return shows the following stuff: Marktext . I have tried to debug, and the behavior is that when the program gets to the switch, it goes directly to the default option, so it does not change the value of markText. Where am I making an error? I dont understand why if the averageMark value is 7.625, why it doesnt enter in that case of the switch. Thanks.

I have created a small Angular component called Modal to use it as a modal on my app. The modal opens when clicking on a button on the page and should close when clicking on the backdrop or a cancel button.

Now is opening when clicking on the button on the page (good) and closing when clicking on the backdrop (good) my issue is that is closing when I click on the content (bad).

To manage when the modal is open or close I’ve defined a variable on the page controller that starts at false and when clicking on the button switches to true and shows the modal. When clicking on the backdrop the same function switches back the variable to false.

This is my board-page.component.ts:

export class BoardPageComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  isModalShown: boolean = false;

  newTask() {
    console.log(`Click Modal!`);
    this.isModalShown ? this.isModalShown = false : this.isModalShown = true;
  }
}

This is the board-page.component.html:

<app-modal *ngIf="isModalShown" (close)="newTask()">
  <h1>Modal Content</h1>
</app-modal> 

And this is the modal component modal.component.ts:

export class ModalComponent implements OnInit {
  @Output() close = new EventEmitter();

  constructor() {}

  ngOnInit(): void {
  }

  onClose() {
    this.close.emit();
  }
}

And the modal.component.html

<div class="modal-backdrop" (click)="onClose()">
  <div class="modal-content" id='modal'>
    <ng-content></ng-content>
  </div>
</div>

I’ve placed the click event on the backdrop, but seems that when clicking on the content the click event fires thou the z-index is higher. When the click events are fired emits to the function in the parent component that updates the isModalShown value.

And the styles that make the backdrop and content effect:

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-content {
  position: fixed;
  top: 15vh;
  left: 5%;
  width: 90%;
  background-color: white;
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 30;
  animation: slide-down 300ms ease-out forwards;

  pointer-events: none;
}

@media (min-width: 768px) {
  .modal-content {
    width: 40rem;
    left: calc(50% - 20rem);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

I guess I should disable the click events on the content? I’ve tried with this:

document.getElementById('modal').addEventListener('click', (event) => {  
  event.preventDefault();  
});

But didn’t work.

I did not find a lot of examples to do this modal without 3rd party libraries.

I probably wrote the title weirdly but honestly I don’t know any other way to put it in the title. But essentially what I mean is what languages run with html the way javascript runs with html? and what I mean by this is just using

<script src='./scripts/code.js'></script>

but with a different coding language.

I have used google places api for address suggestion. From country drop down i am selection country and passing it to “component restriction” in google places to restrict the address suggestion. Everytime when i change the country from dropdown, it showed me dual suggestions. Please help me to resolve the issue?

Thanks in advanced.

Here is my code

var initAutocomplete = (() => {
var autocomplete = null
var countryInput = document.getElementById('country')
var address1Field = document.getElementById('address')

var ISOCountry = 'US';
function handleCountryChange(event) {
    ISOCountry = event.target.value
    console.log(ISOCountry);
    autocomplete = new google.maps.places.Autocomplete(address1Field, {
        componentRestrictions: { country: ISOCountry },
        fields: ["address_components", "geometry"],
        types: ["address"]
    })
    autocomplete.addListener("place_changed");
}
countryInput.addEventListener('change', handleCountryChange)

return function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')), {
        types: ['geocode'],
        componentRestrictions: { country: ISOCountry }
    });
    autocomplete.addListener("place_changed");
}

})

In this below code I need ThemeState to come over the AlertState, but if I do that, then I get the same error as what I am getting now. So how to handle this type of code.

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import About from "./components/About";
import { Navbar } from "./components/Navbar";
import { Home } from "./components/Home";
import NoteState from "./context/notes/noteState";
import { Alert } from "./components/alert";
import Login from "./components/Login";
import SignUp from "./components/SignUp";
import AlertState from "./context/notes/alertState";
import { ThemeState } from "./context/notes/ThemeContext";

function App() {
  return (
    <>
      <NoteState>
        <AlertState>
          <ThemeState>
            <Router>
              <Navbar />
              <Alert message={null} />
              <div className={`my-2 text-dark bg-light`}>
                <Routes>
                  <Route exact path="/" element={<Home />} />
                  <Route exact path="/about" element={<About />} />
                  <Route exact path="/signup" element={<SignUp />} />
                  <Route exact path="/login" element={<Login />} />
                </Routes>
              </div>
            </Router>
          </ThemeState>
        </AlertState>
      </NoteState>
    </>
  );
}

export default App;

This is the error I am getting now and if I swap those two position I get the same error

cannot destructure property ‘setmsg’ of ‘(0,react__webpack_imported_module_0__.usecontext)(…)’ as it is undefined.

I use a fairly popular add-on for firefox that changes my home page to a photo from google earth, but I hate how firefox attempts to show the add-ons name as part of the search bar on each new page. It’s too long a name to fit in the provided space, so it just shows as a garbled mess like, “Goo..EarthVi.” I just want to edit the add-ons manifest.json to shorten its title to “EarthView” so it hopefully fits in the add-on indicator in the search bar … which seemed easier than it’s been in practice.

(I’m not super familiar with JS or Java. I used VSCode as my IPE to edit files directly.)

Changing the manifest.json corrupts the add-on, which I think has to do with it no longer matching the hashes provided in the manifest.mf file in META-INF, so I used powershell to grab the 40 character SHA1 hash of my modified .json file only for that hash to be different from the hash-digests provided in manifest.mf

Name: manifest.json
Digest-Algorithms: MD5 SHA1
MD5-Digest: sEp1Fj2LQxivX8gRp/XclQ==
SHA1-Digest: 8TVzp9sQ5YN7ctlFbbvs5JgtNQY=