Category: javascript

I am creating a portfolio website for myself but i am a beginner in web dev. I wanted to create a section in my page at the bottom where the “start a project” box in the picture will be my about section and rest will be used as my footer for links and copyrights.enter image description here

It looks like this currently. i just need a background that is underneath the about section and starts from middle to the bottom and no margins for the background.

<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>

#about {
    margin-left: 70px;
    margin-right: 5%;
    margin-bottom: 20%;
    padding: 80px 0px;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}[enter image description here](https://i.stack.imgur.com/dUTIz.png)

I have a packed bubble chart, and I want to drill down the bubbles to a scatter plot. Also as a bonus would love to be able to drill down the main bubble to a scatter plot which is a mix of all of the scatter plots, I am not sure if that is possible.

I am building this code using React. Right now. On drill down, the scatter plot is not rendering.

My code: component.js

import React, { useEffect, useState } from "react";
import { Spinner } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import ScatterChart from "./scatter";
import "./App.css";

const ScatterComponent = ({ data, filteredData }) => {
  const [loading, setLoading] = useState(true);
  const chartData = filteredData.length !== 0 ? filteredData : data;

  const bubbleSeries = [{"name":"ABC","data":[{"name":"page_views","value":6652301,
  "drilldown":"ABC - page_views"},{"name":"article_views","value":4812992,"drilldown":"ABC - article_views"},
  {"name":"visits","value":5116176,"drilldown":"ABC - visits"},]},
  {"name":"XYZ","data":[{"name":"page_views","value":16448241,"drilldown":"XYZ - page_views"},
  {"name":"article_views","value":10791478,"drilldown":"XYZ - article_views"},
  {"name":"visits","value":11921915,"drilldown":"XYZ - visits"},]}];

  const scatterSeries = [{"type":"scatter","id":"ABC - page_views",
  "data":[["2024-02-27T00:00:00.000Z",1],["2024-02-26T00:00:00.000Z",1],["2024-02-27T00:00:00.000Z",1],["2024-02-28T00:00:00.000Z",1]],},
  {"type":"scatter","id":"ABC - article_views",
  "data":[["2024-02-27T00:00:00.000Z",1],["2024-02-26T00:00:00.000Z",1],["2024-02-27T00:00:00.000Z",1],["2024-02-28T00:00:00.000Z",1]],},
  {"type":"scatter","id":"ABC - visits",
  "data":[["2024-02-27T00:00:00.000Z",1],["2024-02-26T00:00:00.000Z",1],["2024-02-27T00:00:00.000Z",1],["2024-02-28T00:00:00.000Z",1]],},
  {"type":"scatter","id":"XYZ - page_views",
  "data":[["2024-02-27T00:00:00.000Z",1],["2024-02-26T00:00:00.000Z",1],["2024-02-27T00:00:00.000Z",1],["2024-02-28T00:00:00.000Z",1]],},
  {"type":"scatter","id":"XYZ - article_views",
  "data":[["2024-02-27T00:00:00.000Z",1],["2024-02-26T00:00:00.000Z",1],["2024-02-27T00:00:00.000Z",1],["2024-02-28T00:00:00.000Z",1]],},
  {"type":"scatter","id":"XYZ - visits",
  "data":[["2024-02-27T00:00:00.000Z",1],["2024-02-26T00:00:00.000Z",1],["2024-02-27T00:00:00.000Z",1],["2024-02-28T00:00:00.000Z",1]],},
]
  


  useEffect(() => {
    const delay = setTimeout(() => {
      setLoading(false);
    }, 2000);

    return () => clearTimeout(delay);
  }, []);

  return (
    <div className="bubbleScatterTrends clearfix w-100 column">
      <h3 className="mt-1 ms-1" style={{ color: "#81b0d2" }}>
        <u>ABC-XYZ Breakdowns</u>
      </h3>
      {loading ? (
        <div className="text-center">
          <Spinner animation="border" variant="primary" />
          <Spinner animation="border" variant="secondary" />
          <Spinner animation="border" variant="success" />
          <Spinner animation="border" variant="danger" />
          <Spinner animation="border" variant="warning" />
          <Spinner animation="border" variant="info" />
          <Spinner animation="border" variant="light" />
          <Spinner animation="border" variant="dark" />
        </div>
      ) : (
        <div className="clearfix w-100 column">
          <div className="clearfix w-100 column">
            <div className="w-100 bubbleScatterCharts">
              <ScatterChart
                bubbleData={bubbleSeries}
                scatterData={scatterSeries}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ScatterComponent;

scatter.js

import React, { useMemo } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import highchartsAccessibility from "highcharts/modules/accessibility";
import highchartsExporting from "highcharts/modules/exporting";
import highchartsExportData from "highcharts/modules/export-data";
import highchartsPackedbubble from "highcharts/highcharts-more";
import dayjs from "dayjs";
import "dayjs/locale/es";

highchartsAccessibility(Highcharts);
highchartsExporting(Highcharts);
highchartsExportData(Highcharts);
highchartsPackedbubble(Highcharts);

const ScatterChart = ({ bubbleData, scatterData }) => {
  dayjs.locale("en");
  const addCommas = (x) =>
    x.toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, ",");

  const options = useMemo(
    () => ({
      chart: {
        type: "packedbubble",
        backgroundColor: "#283347",
      },
      exporting: {
        enabled: true,
      },
      navigation: {
        buttonOptions: {
          verticalAlign: "top",
          y: -10,
          x: -5,
        },
      },
      accessibility: {
        enabled: false,
      },
      credits: {
        enabled: false,
      },
      legend: {
        enabled: true,
        itemStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        backgroundColor: "#283347",
        style: { color: "#fff" },
        formatter: function () {
          if (this.y !== undefined || this.key !== undefined) {
            let tooltip = `<span><b><u>${this.key}</u></b>: ${addCommas(
              this.y
            )}</span>`;
            return tooltip;
          }
        },
        useHTML: true,
      },
      plotOptions: {
        packedbubble: {
          minSize: "20%",
          maxSize: "100%",
          zMin: 0,
          zMax: 1000,
          layoutAlgorithm: {
            gravitationalConstant: 0.05,
            splitSeries: true,
            seriesInteraction: false,
            dragBetweenSeries: true,
            parentNodeLimit: true,
          },
          dataLabels: {
            enabled: true,
            format: "{point.name}",
            filter: {
              property: "y",
              operator: ">",
              value: 250,
            },
            style: {
              color: "black",
              textOutline: "none",
              fontWeight: "normal",
            },
          },
        },
      },
      series: bubbleData,
      drilldown: {
        series: scatterData,
      },
    }),
    [bubbleData, scatterData]
  );

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default ScatterChart;

My scatter plot is not rendering.

What course or what should I study in JavaScript to create such projects? In this article, I want the best sources to master this point in this JavaScript.
JavaScript projects

What course or what do I study in JavaScript to create such projects in this article

I am using the Javascript Proxy system to allow individual functions to subscribe to any changes in an object defined by a class. For example purposes, say this is my code:

class Data {
    i = 0
    increment() {
        this.i++;
    }
}

const obj = new Data();
const objProxy = new Proxy(obj {
    get: function(target, prop) {
        return Reflect.get(target, prop, objProxy);
    },
    set: function(target, prop, value) {
        console.log("setting", prop, "of", target);
        return Reflect.set(target, prop, value, objProxy);
    }
}

objProxy.increment();

The issue is that the this reference in the increment function is a reference to the object itself, not the proxy, so the proxy setter doesn’t seem to be triggered.

I tried to specify the object proxy as the “receiver” option for both the getter and the setter, expecting that the “this” reference would be changed to the proxy and the log message would be triggered when “i” is changed.

I am a FrontEnd engineer with more than 10 years of experience,
Recently I found out that market has been changing and now a full stack is more required than before (or at least the FE should know in a proficient way a BE Language) so I decided to move to node as the learning curve will be easier.

• Any recommendations to become a proficient Node JS developer? Should
• I learn a DB such as mongo or is it better a relational kind of BD?
• which framework should I learn? Node or Nest
• which things should I avoid in order to truly understand the node
  philosophy.

Thanks!

I have Javascript module named constants.js with the following in it:

const coreObjects = {
    activity: {
        objectName: 'activity',
        table: 'activities',
        pk: 'activity_id',
        recordTypeID: 'A'
    }
}
export { coreObjects }

I’m trying to reference the ‘table’ attribute of this constant with the following in a separate script file:

let constants = await import('./constants.js');
let actvityTable = constants.coreObjects.activity.table;

And I get the following error:

TypeError: Cannot read properties of undefined (reading 'activity')

Any thoughts on how I get this to work? Thanks!

When I change to the following it doesn’t generate an error but is not giving me the specific access to the ‘table’ field that I was looking for:

let actvityTable = constants.coreObjects

I’m reworking a program I worked on last week to take data from an API and need to update the reviews by using PUT, however, the form section is giving my issues. When I click on the Submit button the user’s review is supposed to render onto the app, but when Submit is clicked nothing happens.

So far the code I have uses PUT but I have POST as well. I’m not sure which would be better to use, what should I be using to add data to the API?

Here is the code I have so far for the App component:

App Component:

import './App.css';
import React, { useState, useEffect } from 'react';

import ToDoForm from './ToDoForm';
import ToDoList from './ToDoList';
import { fetchAPI } from './utils';

const URL = 'https://api-server-xki8.onrender.com/todos';

function App() {
  const [todos, setStoreToDos] = useState([]);

  useEffect(() => {
    let options = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    };

    async function fetchData() {
      try {
        const todosData = await fetchAPI(URL, options);
        todosData.sort((a, b) => (a.id < b.id) ? 1 : -1);
        setStoreToDos(todosData);
      } catch (error) {
        console.error('Error fetching data!', error.message);
        setError('Error setting data. Please try again later.');
      }
    }

    fetchData();
  }, []);

  const addToDos = async (val) => {
    const newToDoItems = {
      text: val,
      isCompleted: false,
    };

    let options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify(newToDoItems),
    };

    try {
      const newTodo = await fetchAPI(URL, options);
      const newToDos = [...todos, newTodo].sort((a, b) =>
       (a.id < b.id) ? 1 : -1
      );

      setStoreToDos(newToDos);
    } catch (error) {
      console.error('Error:', error.message);
    }
  };

  const completeToDo = async (id) => {
    const tempToDos = [...todos];
    const index = tempToDos.findIndex((todos) => todos.id === id);
    tempToDos[index].isCompleted = !tempToDos[index].isCompleted;

    const updatedToDo = {
      text: tempToDos[index].text,
      isCompleted: tempToDos[index].isCompleted
    };

    let options = {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedToDo)
    };

    try {
      await fetch(`${URL}/${id}`, options);

      setStoreToDos(tempToDos);
    } catch (error) {
      console.error('Error:', error.message);
    }
  };

  const deleteToDos = async (id) => {
    let options = {
      method: 'DELETE'
    };

    try {
      const resDelete = await fetch(`${URL}/${id}`, options);

      if (!resDelete.ok) {
        throw new Error('DELETE failed!');
      }
      const res = await fetch(URL);
      const data = await res.json();

      setStoreToDos(data);
    } catch (error) {
      console.error('Error:', error.message);
    }
  };

  const editToDos = async (id, text) => {
    try {
      const temporaryToDos = [...todos];
      const index = temporaryToDos.findIndex((todo) => todo.id === id);
      temporaryToDos[index].text = text;

      const updatedToDo = {
        text,
        isCompleted: temporaryToDos[index].isCompleted
      };

      let options = {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedToDo)
      };
      await fetch(`${URL}/${id}`, options);

      setStoreToDos(temporaryToDos);
    } catch (error) {
      console.error('Error', error.message);
    }
  };

  // console.log("App is Rendering");

  return (
    <>
      <h2>To Do App</h2>
      <h5>Add New To Do Items via the Input Field: </h5>
      <ToDoForm addToDos={addToDos} />

      <ToDoList
        todos={todos}
        completeToDo={completeToDo}
        deleteToDos={deleteToDos}
        editToDos={editToDos}
      />
    </>
  );
}
export default App;

import React, { useState} from 'react';
// import { fetchAPI } from './utils';

import StarRating from './StarRating.jsx';

function UserRating({ movieID,   onUpdateReview}) {
  const [user, setUser] = useState('');
  const [review, setReviews] = useState('');
  const [stars, setStars] = useState(0);

  
  
  const handleUser = (e) => {
    setUser(e.target.value);
  };

  const handleReview = (e) => {
    setReviews(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    


    const addReview = ({ 
      movieID,
     user: user, 
     review: review, 
     rating: stars
  }
)
  
    onUpdateReview(addReview)
    
    formReset();
    
  };

  
  
  const formReset = () => {
    setUser('');
    setReviews('');
    setStars(0);
  };

  return (
    <div className="userReview">
      <form onSubmit={handleSubmit} >
        
        <h2>Rate This Movie:</h2>
        <label>
          <label>
            Name:
            <input
              type="text"
              value={user}
              onChange={handleUser}
              required
              placeholder={'Enter Name Here:'}
            />
          </label>

          <label>
            Review:
            <textarea
              value={review}
              onChange={handleReview}
              required
              placeholder={'Enter Review Here:'}
              rows={8}
              cols={39}
            ></textarea>
          </label>
        </label>

        <StarRating disabled={false} stars={stars} set={setStars} />

        <button type="submit" value="Submit">
          Submit {''}
        </button>
      </form>
    </div>
  );
  
}

export default UserRating;

So far, I’ve tried using PUT and have a function in the UserRating component to submit data. I’ve tried different variations of the value tempMovies[index] including using tempMovies[index].user = user, tempMovies[index].user = !tempMovies[index].user. I had also tried to make a useState in UserRating that would set the values of the form into the handleSubmit function, but it causes the program to crash.

I’m having issues with adding my product items to my side cart and also having quantity adjustment problems on my product page. It works fine on my index and shop page. but l’ve been at it for months trying to figure out what’s wrong. Can anyone help me?

https://github.com/iammonster2/ZenPadProjects

the idea here is to make this div that shows details of a clicked project slide in and out smoothly from the right.

this is what ive tried. note: i’m using tailwind

{selectedProject !== null && (
        <div
          className={`fixed top-0 right-0 w-full h-full md:w-1/2 z-20 bg-white px-5 py-10 overflow-scroll transform transition duration-600 ${
            selectedProject !== null ? 'translate-x-0' : 'translate-x-full'
          }`}
        >
          {' '}
          <div
            className="flex items-center justify-between w-full px-1 py-2"
            onClick={closeDetails}
          >
            <div>
              <Image
                src={back}
                alt={back}
                quality={100}
                height={30}
                width={30}
                placeholder="blur"
                className="cursor-pointer"
              />
            </div>
            <Link href="#projects">
              <div onClick={closeDetails} className="font-bold cursor-pointer">
                Back to projects
              </div>
            </Link>
          </div>
          <hr className="pb-10" />
          <p className="text-lg font-extrabold text-black pb-1">
            {projects[selectedProject].name}
          </p>
          <p className="text-gray-700  text-base pb-4 ">
            {projects[selectedProject].details}
          </p>
          <Image
            src={projects[selectedProject].image}
            alt={`${projects[selectedProject].name} screenshot`}
            quality={100}
            placeholder="blur"
            blurDataURL="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOMzoyuBwAD5gGgL5NkuQAAAABJRU5ErkJggg=="
            className="h-72 md:h-80 max-w-auto rounded-lg"
          />
          <p className="text-base font-bold text-black pb-1 pt-7">About</p>
          <p className="text-xs md:text-base">
            {projects[selectedProject].details}
          </p>
          <p className="text-base font-bold text-black pb-1 pt-7">
            Technologies
          </p>
          <div className="mt-5">
            <div className="flex flex-wrap gap-3 mt-3">
              {projects[selectedProject].skills.map((skill, skillIndex) => (
                <span
                  key={skillIndex}
                  className="w-fit inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-sm font-medium text-black ring-1 ring-inset ring-indigo-700/10"
                >
                  {skill}
                </span>
              ))}
            </div>
          </div>
          <div className="w-fit gap-1 flex items-center">
            <Image
              src={earth}
              alt="earth icon"
              quality={100}
              height={20}
              width={20}
              placeholder="blur"
              className="cursor-pointer"
            />
            <p className="text-base font-bold text-black pb-1 pt-7">Website</p>
          </div>
          <Link href={projects[selectedProject].link}>
            {projects[selectedProject].link}
          </Link>
          <div className="w-fit gap-3 flex items-center">
            <Image
              src={github}
              alt="github icon"
              quality={100}
              height={20}
              width={20}
              placeholder="blur"
              className="cursor-pointer"
            />
            <p className="text-base font-bold text-black pb-1 pt-7">Github</p>{' '}
          </div>
          <Link href={projects[selectedProject].github}>
            {projects[selectedProject].github}
          </Link>
        </div>
      )}

for the life of me, i cannot get it to work as desired . i have the same issues applying this same feature in my menu bar too but an answer to this should fix all i suppose

I have a JavaScript function which recursively calls the Spotify API in order to get data for a users saved songs such as track name, album, date added etc. (call limit is 50 so I need to repeat the call many times). It then manipulates the data into .csv format for the user to download. It is shown below (it works completely fine).

async function repeatGet(url, tracksArray = [["Track", "Artist", "Album", "Date-Time Added", "Spotify Link"]]) {

    tracksObject = await apiCall(url);
    for (track of tracksObject.items) { tracksArray.push([track.track.name, track.track.artists[0].name, track.track.album.name, track.added_at, track.track.external_urls.spotify]) }//tracksTotal.push(track) }

    if (tracksObject.next != undefined) { await repeatGet(tracksObject.next, tracksArray) }

    return tracksArray
}

tracksArray = await repeatGet("https://api.spotify.com/v1/me/tracks?limit=50")
console.log(tracksArray);

let csvData = "sep=t  n";
tracksArray.forEach(row => csvData += row.join("t") + "n")

console.log(csvData);

I tried to increase the efficiency by having the called data be turned into .csv format straight away and concatenating to a string (code below):

async function repeatGet(url, csvData = "sep=t  nTracktArtisttAlbumtDate-Time AddedtSpotifytLink") {
    
    tracksObject = await apiCall(url);
   
    for (track of tracksObject.items) {
        csvData += "n" + track.track.name + "t" + track.track.artists[0].name + "t" + track.track.album.name
        + "t" + track.added_at + "t" + track.track.external_urls.spotify;
    }
    // console.log(csvData)
    if (tracksObject.next != undefined) { await repeatGet(tracksObject.next, csvData) }

    console.log(csvData,csvData.length);
    return csvData;
}

csvData = await repeatGet("https://api.spotify.com/v1/me/tracks?limit=50");

For an unknown reason to me this code only returns the .csv string from the first api call (not the total string which is combined with all of the subsequent ones).

I’ve tried bugfixing by using console.log on certain parts and the code correctly appends to the csv as each new call is passed. However, after the final call all hell breaks loose and the console instantly returns all of the logs that happened as each subsequent call happened (with the csv string growing in size), but somehow in REVERSE order. Does anyone have any ideas? Thanks.

The website I am trying to replicate is roblox-interstellar.vercal.app . I would like this to open a different link automatically via the proxy “interstellar” without using a backend.

Let me know if you find a solution!

Thank You.

I could not find any source code of the site. I want the site to open a link (of my choice) automatically with interstellar. (a web proxy)

As far as I know and read the official documentation, updates will only be triggered if the value is different.

The set function that lets you update the state to a different value and trigger a re-render.

However, after my testing in version 18.2, there is a situation that triggers repeated rendering.enter image description here

demo: https://playcode.io/1796380

I want to know what his capacity is and whether I need to be concerned about it

what I want is to make the TextPanel disabled if payStub has a value, and not be disabled if payStub does not have a value,

In my react code, I have the following:

    const [payStub, setPayStub] = useState(() => {
            if (isNewPayStub) {
                return get(user, 'stub', '');
            }
            return stubEdit.value?.name || '';
        }); 

const stubIsValid = Boolean(trim(payStub));

and in the react side I have the following:

return (
        <Panel
            onClose={onClose}
            onSave={handleSave}
            addNewText={isNewPayStub ? 'Add New PayStub' : ''}
        >
        
        ....
        
        <TextPanel
                    handleChange={setPayStub}
                    isValid={stubIsValid}
                    isRequired
                    label="Stub"
                    placeholder="Enter STUB"
                    value={payStub}
                />

The TextPanel receives a property of disabled , and when I add a property as disabled: {stubIsValid}, when the user enters the first character, the condition will be met and it makes the TextPanel disabled which is not what I want (user should be able to fill enter the payStub) .
How do I fix this situation?

In this demo I’m trying to style the mat-expansion-panel-header‘s ::before pseudo element like this (Style rules added to styles.scss):

mat-expansion-panel-header {
  position: relative;
}

mat-expansion-panel-header::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1000;
  background-color: black;
}

So if the above rule would take effect the mat-expansion-panel-header items in the demo would just be black.

However the rule does not take effect and when I look in the developer tools I don’t see the ::before element.

Any ideas on how to fix this?

I have a react Application where I am trying to add the AWS Chat Widget.

It is working but I want to add some additional styling to the launch icon which doesnt seem to be their out of the box – https://docs.aws.amazon.com/connect/latest/adminguide/customize-widget-launch.html

I want too add a tool tip as I have mocked up in the image:

This is the code I have added to useEffect method:

  useEffect(() => {
    const widgetEle =  document.getElementById('amazon-connect-chat-widget');
    debugger;
    if (widgetEle) {
      widgetEle.innerHTML = '<span class="tooltip-text" id="left">Chat with us!<button id="chatToolTipClose" type="button" class="close">x</button></span>';
    }
 }, []);

I thought this should only run after the DOM has fully rendered – but on my debugger the widgetEle is always null. But when I run the exit the debugger the default google chat icon is displayed – and when I inspect the element I can see there is no typo in the id – it is exactly what I specify.

Is there something I am missing?