Category: javascript

Im trying to make a portfolio website and would like to have a mechanic that lets the user stay on the same page while having access to all my information. Now instead of just having a long page of information for the user to scroll endlessly through, I have a side menu that allows the user to select what information they would like to see. My goal is for that said information, when selected by the menue, to then slide in from the right and cover the rest of the screen (not the menu). I have not seen anything explaining this on youtube but did see a video where someone had implemented it.youtube. I do not know what this is called and would apreciate any help leading to the answer.

Ive tried toggleable images that had the information on them but that resulted in me being unable to add links, animations, and download buttons.

I also tried this code, that lets me slide between pages but that resulted in either the whole page being covered or the user able to see all pages.

I’m building a massive calculator website with TONS of pages (10,000+). It’ll have different calculator types, organized into categories like domain/physics/calculator-slug.

I’m good with HTML, CSS, and JavaScript, but React is a bit new to me. I want to make the site static for speed and security, but I also need to control some things dynamically, like:

• Meta tags
• Navigation
• Footer

Could you recommend an SSG or CMS that:

• Can handle a website this big?
• Is easy to use, even without a ton of coding knowledge?
• Lets me manage those dynamic elements easily?
• Stays fast and stable as the website grows?

I’ve looked at Jekyll and Hugo, but those seem better for blogs. I’m curious about Next.js, Nuxt.js, Gatsby, Eleventy, and Forestry. Anyone have experience with those for calculator-heavy projects?

Thanks for your help, experts!

I want to write to replicate the code and test cases from a Leetcode page into a local file

Basically to bypass the rate limit of compiling on leetcode, I would like to sync the code between my local file and the leetcode environment.

I would like

1. to copy the code from the leetcode text editor and prefix with some headers, main() and write to a local file (vscode workspace ex: C:/workspace/solution.cpp)
2. to copy test cases to a local testcases files (ex: C:/workspace/test.txt)

What I have tried: creating a chrome extension:
this can read from local file to browser, but cant write to a specific local filesystem
(i looked into chrome extension storage api but its sandboxed?)

I have a question about how to update column in the same row using css class selector. below is the example scenario.

From the above table, discount column has text fields at each row. When user enters the discount percentage, the final price of that row much be updated accordingly.

assume that column Final Price has class attribute(.final-price).

Please let me know the css selector for this scenario so that I can use it in JavaScript?

Thanks in advance.

Sri

I have tried:

I tried using siblings() function from css, however it ended up using number, siblings()[3]. Somehow, I need to make this dynamically (not numbering).

I was trying to send the javascript array value to the controller.
My javascript array output is like that:

0 : (4) ['Name', 'contact_email', 'phone number', 'contact_location']
1 : (5) ['John Doe', '[email protected]', '15551234567', '"New York', ' NY"']
2 : (5) ['Jane Smith', '[email protected]', '15552345678', '"Los Angeles', ' CA"']
3 : (5) ['Robert Johnson', '[email protected]', '15553456789', '"Chicago', ' IL"']
4 : (5) ['Emily Davis', '[email protected]', '15554567890', '"Houston', ' TX"']

Now i have submitted a hidden form to pass the array like that,,

<form id="importContact" action="{{url('reviewContacts')}}" method="post">
    @csrf
    <input type="hidden" id="contacts" name="data[]">
</form>

on Js Part:

$("#contacts").val('');
  $('#contacts').val(dataArray); 
  $("#importContact").submit();

But here the problem is when i pass the array through form , it doesn’t show output like array.it shows single array like this:

Array ( [0] => Name,contact_email,phone number,contact_location,John Doe,[email protected],15551234567,"New York, NY",Jane Smith,[email protected],15552345678,"Los Angeles, CA",Robert Johnson,[email protected],15553456789,"Chicago, IL",Emily Davis,[email protected],15554567890,"Houston, TX", )

How do I get the output as it is like js part?

I’m working on a JavaScript project where I’m trying to use an asynchronous function to fetch data from an API. However, despite my efforts, the function is not returning the expected result. Here’s the code snippet I’ve tried:

I’m using fetch to get data from an API, and I’m expecting the result to contain the fetched data. However, when I log the result to the console, it’s showing undefined or a pending promise.

I’ve checked the API endpoint, and it seems to be returning valid JSON. Am I missing something in my asynchronous function, or is there a better way to handle asynchronous operations in JavaScript? Any insights or corrections to my code would be greatly appreciated.
My code that I’ve tried:

async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
return null;
}
}

// Calling the function
const result = fetchData();
console.log('Result:', result);

I deleted the v1 function and uploaded the v2 function, but I got the following error:

!  functions: HTTP Error: 400, Validation failed for trigger projects/unicard-83f52/locations/us-central1/triggers/matchmaker-471173: The request was invalid: generic::invalid_argument: generic::not_found: pattern cannot match any databases in region us-central1
!  functions:  failed to create function projects/unicard-83f52/locations/us-central1/functions/matchmaker
Failed to create function projects/unicard-83f52/locations/us-central1/functions/matchmaker

Only functions using Oncall were successfully uploaded, and only trigger functions failed to upload.

I’m trying to make a accordion / card stack like list in my React Native application. Basically all list items should be stacked behind one prominent item that reacts to a click. After the prominent item is clicked, the items underneath the prominent item uncollapse and the list is fully visible.
Prototype made in Figma. This is how it should be working and looking like

I tried making an accordion list with react-native-reanimated and React Native’s “Animated”, but i had no luck.

I am trying to implement React.createElement().But I am getting following error

Uncaught Error: Objects are not valid as a React child (found: object with keys {type, props}). If you meant to render a collection of children, use an array instead.

But when I try original function {React.createElement} mine is {Reacto.createElement} it works
but if I log the element returned from Original and mine function they are pretty much same

Here is code

import {createRoot} from "react-dom/client";
import  React from "react";


function createTextElement(text){
    return text
}

function createElement( type , props , ...children ){
    return{
        type,
        props : {
            ...props,
            children : children.map(child =>
                typeof child === "object"
                ? child
                : createTextElement(child)
            ),
        },
    }
}

const Reacto = {
    createElement,
}
//Calling mine function
const element = Reacto.createElement(
    'h1',
    { className: 'greeting' },
    "This is another",
    'Hello'
);
//calling Reacts function
const elementReact = React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello',
    "This is another"
);
//logging both elements
console.log(element);
console.log(elementReact);
const root = createRoot(document.getElementById("root"));
root.render(element)

Here is some logs

This is my element

Object { type: "h1", props: {…} }
​
props: Object { className: "greeting", children: (2) […] }
​​
children: Array [ "This is another", "Hello" ]
​​​
0: "This is another"
​​​
1: "Hello"
​​​
length: 2
​​​
<prototype>: Array []
​​
className: "greeting"
​​
<prototype>: Object { … }
​
type: "h1"
​
<prototype>: Object { … }

This is Reacts element

Object { "$$typeof": Symbol("react.element"), type: "h1", key: null, ref: null, props: {…}, _owner: null, _store: {…}, … }
​
"$$typeof": Symbol("react.element")
​
_owner: null
​
_self: null
​
_source: null
​
_store: Object { … }
​
key: null
​
props: Object { className: "greeting", children: (2) […] }
​​
children: Array [ "Hello", "This is another" ]
​​​
0: "Hello"
​​​
1: "This is another"
​​​
length: 2
​​​
<prototype>: Array []
​​
className: "greeting"
​​
<prototype>: Object { … }
​
ref: null
​
type: "h1"

I dont know whats happening anything will help if you know.

Hello Stack Overflow community,

I’m starting a new e-commerce project from scratch using Next.js 14 and I’m interested in adopting a clean architecture approach for better maintainability and scalability. I’ve read about the benefits of clean architecture in software development, but I’m unsure about the specific steps and best practices when implementing it with Next.js 14.

Could someone provide guidance or share their experiences on how to structure a Next.js 14 project following clean architecture principles? Are there any recommended libraries or tools that work well with Next.js for achieving a clean and modular codebase?

I want to make informed decisions from the beginning of the project, so any insights, code examples, or recommended resources would be greatly appreciated.

Additionally, I’ve started exploring the official Next.js 14 documentation and various articles on clean architecture principles. However, I haven’t yet found concrete examples or best practices specifically tailored for Next.js 14.

In my initial attempts, I began structuring the project with separate folders for components, pages, and API routes, but I’m uncertain about how to effectively implement clean architecture concepts like separating business logic from infrastructure concerns.

I expected to find more community-driven insights or examples related to Next.js 14 and clean architecture, but my searches haven’t yielded comprehensive results.

Any advice, code snippets, or practical examples from the community would greatly assist me in steering the project in the right direction.

Thank you!

This is JS. so I have a program with many custom made icons/ emojis/ signals. I needed to make a separate file for each. The point is to type on the keyboard and have each keydown correspond to an icon and display the chain of icons in an output box. I have been able to do this but only using an the html ‘picture’ element to hold the displayed icons.I would really like to find a way to use a different element or device to show the icon output so i could copy the output, but all my attempts have been a failure.
Thanks

I have been able to do this but only using an the html ‘picture’ element to hold the displayed icons.

I need ideas for converting list int or list string to a manageable string that can be attached to a filename to give the filename a unique identifier.

The Lists would be fairly short, no more than 30 at a time, and the string/int would all be an integer when converted.

I was thinking base32 or base64 with removing ineligible characters for a file name, however I was wondering if there are better ways to go about this.

My App Insights connection string contains two URLs: IngestionEndpoint and LiveEndpoint and they are different. Given that I’m adding the connection string to the website, I need to adjust my CSP connect-src to be able to connect to these URLs. By looking at the network, it seems it’s only connecting to the IngestionEndpoint – will it ever need to connect to the other one? Or can I leave it off?

I have an image of a ball that I wish to move using JS. I will add more precise code later for .left and .top that will precisely describe the throw of the ball with gravity function. What I have now goes too fast to see.

I have:

HTML

<img id="bal1" src="Afbeeldingen/bal1.png" alt="Bal" width="100" height="100">

JS

    for (var x = 0; x < 10; x++) {
      document.getElementById('bal1').style.left=30*x +"px";
      document.getElementById('bal1').style.top=30*x +"px";
    
    } 

This works, but it goes too fast to see the movement. How would I make this into a visible animation?

thanks!

I am working on an small interface for file uploads in angular and attempting to send the file as form data. Looks like the file is non existent on the back end for some reason though.

When the file is selected I set it as the current file like this:

onFileChange(event){
    this.currentFile = event.target.files[0];
}

In addition to that there is a name and type input the user fills out and then once the form is filled they can submit the form. Here is the code for my submit event:

onSubmit(){
    this.service.fileUpload(this.currentFileName, this.selectedFileType, this.currentFile).subscribe((rslt: any) => {
    alert('submitted!');
  })
}

And the onSubmit function calls the services fileUpload function passing in the name, type and file.

In the service function I am creating formdata and appending the 3 params like this:

packShipFileUpload(fileName: string, fileType: string, file: File){

  let formData: FormData = new FormData();
  formData.append('file', file);
  formData.append('fileName', fileName);
  formData.append('type', fileType);

  let f = formData.get('file'); // This is just me making sure that file is added to the formData

  debugger; //debugging to check formData values

  return this._http.post('/DataGetter/UploadFile', formData, {
    headers: { "Content-Type": "multipart/form-data" }
  });
}

On the back I have an endpoint written in vb.net that so far just looks like this:

    Public Function UploadFile() As String

        Dim fileName = HttpContext.Request.Form.Item("fileName")
        Dim fileType = HttpContext.Request.Form.Item("fileType")
        Dim file = HttpContext.Request.Form.Item("file")

        Console.WriteLine(fileName) //break point here and I inspect the form items.

        Return ""

    End Function

I have ran through with debuggers attached to both the browser and back end application and even made attempts in my js to get the file object from the form data using formData.get('file') and I have verified that the file is added to the formData on the front end. For some reason though the back end always is completely missing that item from the formData.

I have seen several other questions on SO that seem to have similar issue but I have not yet found one that has helped to get this fixed.

Thanks in advance for the help.