Posting and Commenting Guidelines

I already know basic html,css and touched most of js basics inculding the dom and built some websites. I'm looking forward to learning react and bootstrap. If you find yourself in the same position feel free to dm me.

To start of with, i want to say that i'm (obviously) new to programming and this is my first post here. I hope i ask this all the right way, if not please tell me.

I have done freeCodeCamp projects and i am now busy on the Odin Project. At the moment i'm doing their Etch-a-Sketch project. I am following their guidelines as to create a div using javascript render a grid.
I am aware that the better option should be to use the <canvas> html element. I'm thinking of branching off main later to change this all to <canvas> to explore that a bit better, but for now i'm stumbling upon the following.

But first a little about the project for those who do not know it. These are the assignments

• Set up a GitHub repository for your project.
• Create a webpage with a 16x16 grid of square divs using JavaScript to generate them dynamically.
• Use Flexbox to arrange the divs in a grid layout.
• Implement a hover effect so that the grid divs change color when the mouse passes over them.
• Add a button that prompts the user for the number of squares per side for a new grid, generates the new grid accordingly, and maintains the total space of the sketch pad.
• Push your project to GitHub.

EXTRA CREDIT:

• Randomize the RGB values of the squares with each interaction.
• Implement a progressive darkening effect where each interaction darkens the square by 10%, aiming for a completely black square after ten interactions.

I finished the project but i want to make the project work on mobile. Within the original project i added event listeners to mousedown, mousemove, mouseup, mouseleave and mouseenter, which i later changed to the pointer variants with the idea of making it work for touchscreens.

The first thing i encountered after that was that inside the drawboard, when i touched it and moved it, the page just scrolls up or down. So i added a touchstart event to prevent the default event from happening.

Now with all this in place i tested it again and now, when i touch a board element of the drawboard, that div starts coloring, but when i move my finger whilst touching, it would not change to the other elements below my finger. Making it almost impossible to draw a line.

I tried using the touchend and touchmove events, but they did not change much, so i deleted this bit.

What am I doing wrong? Why is it that when I touch a board element of the drawboard, that div starts coloring, but when I move my finger while touching, it would not change to the other elements below my finger, making it almost impossible to draw a line?

Function that draws the board and adds the event listeners:

function drawBoard(gridSize = 16) {
  boardContainer.innerHTML = "";
  const boardSize = boardContainer.clientHeight;
  for (let i = 0; i < gridSize; i++) {
    const row = document.createElement("div");
    for (let j = 0; j < gridSize; j++) {
      const column = document.createElement("div");
      column.classList.add("board-element");
      column.style.width = boardSize / gridSize + "px";
      column.style.height = boardSize / gridSize + "px";
      row.appendChild(column);
    }
    boardContainer.appendChild(row);

    // Adds event listeners to each created board element
    const boardElements = document.querySelectorAll(".board-element");
    boardElements.forEach((boardElement) => {
      boardElement.addEventListener("pointerdown", () => {
        isDrawing = true;
      });
      boardElement.addEventListener("pointermove", (e) => {
        if (isDrawing) {
          draw(e);
        }
      });
      boardElement.addEventListener("pointerup", () => {
        isDrawing = false;
      });
      // Prevents default dragging event from happening, to draw more fluidly
      boardElement.addEventListener("dragstart", (e) => {
        e.preventDefault();
      });
    });
  }
  boardContainer.addEventListener("pointerleave", () => {
    isDrawing = false;
  });
  boardContainer.addEventListener("pointerenter", (e) => {
    // If mouse is clicked
    if (e.buttons === 1) {
      isDrawing = true;
    }
  });
  boardContainer.addEventListener("touchstart", (e) => {
    e.preventDefault();
  });
}

Repository: https://github.com/Timmehh90/Etch-a-Sketch

this is the chart i am looking for (something similar not actually the same)

https://www.highcharts.com/demo/highcharts/packed-bubble

here are my requirements

• it should be interactive

• it should be responsive to window size

• it should be 3D

is there a way i can get something like this for free out there?

Hi

this code it meant to pull this data and pull out the bit of data called "grd"

When i run this code:

i've taken out my username and password for obvious reasons

const username = 'username';
const password = 'password';

const url = 'https://s18.myenergi.net/cgi-jstatus-*';

// Constructing authentication header
const basicAuth = 'Basic ' + btoa(username + ':' + password);

fetch(url, {
  method: 'GET',
  headers: {
    'Authorization': basicAuth
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  const grdData = data.grd; // Accessing the "grd" data
  console.log('grd Data:', grdData);
})
.catch(error => {
  console.error('There was a problem with the fetch operation:', error);
});

I get this eror:

Access to fetch at 'https://s18.myenergi.net/cgi-jstatus-*' from origin 'https://developer.chrome.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://admin-ui.s18.myenergi.net' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. VM273:9

GET  503 (Service Unavailable)https://s18.myenergi.net/cgi-jstatus-*

There was a problem with the fetch operation: Error: Network response was not ok
    at <anonymous>:17:11

Does anyone have any idea why? i'm a bit of a newbie with Javascript and APIs but giving it a go!

If i just type in https://s18.myenergi.net/cgi-jstatus-* into chrome i get asked for a username and password. If i enter it then i get all the data.

But i can't seem to make code to do this.

i get this error in JSFiddle:

<a class='gotoLine' href='#"There was a problem with the fetch operation:", [object Error] { ... }'>"There was a problem with the fetch operation:", [object Error] { ... }</a>

Thanks

Okay, I have a form in which there are week that can be added. I have made it to were I can add a week then reset it the weeks back to the base number. To explain, the base/default number is 2wks( so there is wk 1 and wk 2.) When I click the "Add I more Week' button, it adds 1 week. This will make it 3 wks. Then I can press " Reset" which will remove the node and it will be back to the default 2 wks.

function plusContent(){
//make a copy of the second week
const newWeek = secondWeek.cloneNode(true);

//Remove the ID for the cloned week since the same ID would not
// be allowed to exist more than once in a document!
newWeek.attributes.removeNamedItem("id");

//Increase the number of weeks

//Incrementation
currentNumberOfWeeks++;

//Find the header inside the new week and update the text

newWeek.querySelector("h2").textContent="Week " + currentNumberOfWeeks;



//Put the new week into the container 

newWeekContainer.appendChild(newWeek);

}

// Working on reset button

function removeNewWeek(){
  newWeekContainer.remove();
}
function plusContent(){
//make a copy of the second week
const newWeek = secondWeek.cloneNode(true);


//Remove the ID for the cloned week since the same ID would not
// be allowed to exist more than once in a document!
newWeek.attributes.removeNamedItem("id");


//Increase the number of weeks


//Incrementation
currentNumberOfWeeks++;


//Find the header inside the new week and update the text


newWeek.querySelector("h2").textContent="Week " + currentNumberOfWeeks;




//Put the new week into the container 


newWeekContainer.appendChild(newWeek);


}


// Working on reset button


function removeNewWeek(){
  newWeekContainer.remove();
}

How can I make it to where after I click 'Reset', I will be able to add weeks and reset over and over again? Should I remove the "newWeekContainer.remove()" and instead put a loop that will let me reset the nodes back to the default? If so, how would I go about doing that? Would I do an if loop for 'new-week-container' to decrement to 0(or back to the base) when the 'reset' button is clicked?

Any ideas and help is greatly appreciated?

https://open.substack.com/pub/zacharylee/p/the-role-of-tojson-in-javascript?r=1g2tj4&utm_campaign=post&utm_medium=web

Hello guys, I am learning JavaScript and I came across standard built-in objects. There are tons of them, so should I remember and learn how to use each one of them? Are they really that important? or should I just move on and use them whenever I need one during actual projects??

I am in a full stack developer course. I have finished the front end part. topics covered: basics of html, css styling, JS, react and redux. The thing is that the projects developed in the course were not the same, in hindsight the course is just a mixture of several independent courses so in each topic a different project was presented and in the end I have never done anything from the start. I have always worked on something already set up. For example: learning react I already had a huge css code styling the project. Learning redux, a lot of code for react modules were already given. In the end I feel the lack of practice and the capabilities to integrate all the knowledge obtained up to now.

So here I am scratching my head and thinking what should I do now. I don't want to go ahead with the course of the back end part because I want to implement a project from start by myself, the thing is, most of the things I am interested in, involve some sort of database in the back end which I don't know to set up right now. I do, however, want to set up a project which I can develop for the rest of the course as I am learning things of back end and finally the integration of back and front ends.

I do have a clear problem to solve, I do know that this problem requires front and back end, I only know for now front end. How should I tackle this?

help me add line of code to my Function

i have a function that get specific at google sheets AppScript column range and add a column after that range

i want to copy the formulas of that column and paste it to the new column i add

i want to add this functionality :

sheet.getRange(1,col,sheet.getLastRow()).copyTo(sheet.getRange(1,col+1,sheet.getLastRow());

To my code

function insertColumn(){

// Get the active spreadsheet and sheet
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var mainSheet = ss.getSheetByName('Main');

// Get the search text from cell D3
columnRange = sheet.getRange("D3").getValue();
columnNumber = mainSheet.getRange(columnRange).getColumn();
mainSheet.insertColumnAfter(columnNumber);
}

​

I wrote an article explaining everything --> mernmentor.com

Currently I'm doing app academy open and I'm in loops section, I understand them well however when I'm presented with problems I just get stuck and don't know how to solve them

For example, this:

Write a function isPerfectSquare that accepts a number as an argument. The method should return a boolean indicating whether or not the argument is a perfect square. A perfect square is a number that is the product of some number multiplied by itself. For example, since 64 = 8 * 8 and 144 = 12*12, 64 and 144 are perfect squares; 35 is not a perfect square.

let number = 0; while(number <= 10){ number++ console.log(number - 1) }

let hashs="#" while(hashs <= 10){ hashs += "#" console.log(hashs) }

the number one prints but hash triangle doesn't :(

Many of our users reported that in one of their machine coding rounds they asked candidates to implement a tree like UI based on the given nested data. It is similar to the sidebar in Confluence.

Hi all,

Everytime I tried to render the reCAPTCHA manually using the render function I get the following error

Error: Invalid site key or not loaded in api.js: "6Lf....." 

It works fine when doing it the way shown in the docs

<head> <script src="https://www.google.com/recaptcha/enterprise.js?render=6L..."></script> <!-- Your code --> </head>   
<script>   
function onClick(e) {      
    e.preventDefault();       
    grecaptcha.enterprise.ready(async () => {        
    const token = await grecaptcha.enterprise.execute('6L...', {action: 'LOGIN'});       
    });     
}   
</script>   

But whenever I try to manually render:

<script src="https://www.google.com/recaptcha/enterprise.js?render=explicit&onload=onRecaptchaLoadCallback"></script>    

// recaptcha.js   
function onRecaptchaLoadCallback(){    
    grecaptcha.enterprise.render('recaptcha', {  
        sitekey: "6L...",   
        badge: 'inline',   
        size: "invisible",           
        callback: function () {   
        console.log('recaptcha callback');               
        }    
   })   
}    

// executed upon form onsubmit   
function onClick(e) {    
    e.preventDefault();     
    grecaptcha.enterprise.ready(async () => {       
    const token = await grecaptcha.enterprise.execute('KEY\_ID', {action: 'LOGIN'});          
    }); 
}    

I get the above-stated error. I have already double-checked the keys and tried creating a new key, but it did not work. Any ideas as to why it doesn't work when trying to render manually?

Thanks

I made a simple library which contains several files. Each file is a method in the library. How do I take this library and make a single file bundle for the browser and for NodeJS? I cannot find a guide anywhere on this.

Learning to code on my own and am struggling with loops. I know how to do each of the loops but am struggling with knowing when to use each and why. The ‘while’ loops and ‘do while’ loops make sense, but as for ‘for’ loops I don’t know when to use them or why I would use one as opposed to the other. Can anyone explain?

While checking MDN, I discovered this long-awaited API - Promise.withResolvers(). It can be very convenient and simplify code in certain scenarios. Here is my detailed introduction article: https://levelup.gitconnected.com/new-async-api-promise-withresolvers-simplifies-your-code-1355784fb435 I hope you find it useful.

I'm experimenting with a Direct Sockets TCPServerSocket and posting a ReadableStream from fetch() implementation of both respective JavaScript runtimes.

Each runtime sends chunks to the server differently.

Deno sends the request line for each chunk, Node.js doesn't.

async function fn(body = "test") {
  return fetch("http://0.0.0.0:8080", {
    duplex: "half",
    method: "post",
    body,
    headers: {
      "Access-Control-Request-Private-Network": true,
    }
  })
  .then((r) => {
  console.log(...r.headers, r.body);
  r.body.pipeTo(new WritableStream({
    write(v) {
      console.log(decoder.decode(v));
    }, 
    close() {
      console.log("Stream closed");
    }
  })).catch(console.warn);
 }).catch(console.error);
}

fn(new ReadableStream({
  async start(c) {
    c.enqueue(encoder.encode("test "));
    c.enqueue(encoder.encode("another test "));
    await new Promise((r) => setTimeout(r, 7));
    c.enqueue(encoder.encode("another test after a delay "));
    c.close();
  }
}));

Deno

POST / HTTP/1.1
access-control-request-private-network: true
accept: */*
accept-language: *
user-agent: Deno/1.42.4
accept-encoding: gzip, br
host: 
transfer-encoding: chunked 2D
test another test another test after a delay 
0
script.js:205 POST / HTTP/1.1
access-control-request-private-network: true
accept: */*
accept-language: *
user-agent: Deno/1.42.4
accept-encoding: gzip, br
host: 
transfer-encoding: chunked
00.0.0.0:80800.0.0.0:8080

Node.js

POST / HTTP/1.1
host: 
connection: keep-alive
Access-Control-Request-Private-Network: true
accept: */*
accept-language: *
sec-fetch-mode: cors
user-agent: node
accept-encoding: gzip, deflate
transfer-encoding: chunked 5
test 

POST / HTTP/1.1
host: 
connection: keep-alive
Access-Control-Request-Private-Network: true
accept: */*
accept-language: *
sec-fetch-mode: cors
user-agent: node
accept-encoding: gzip, deflate
transfer-encoding: chunked

d
another test 
1b
another test after a delay 0.0.0.0:80800.0.0.0:8080

The logic to handle the respective implementations in the same server code is quickly becoming tedious

if (/^(POST|query)/i.test(request) || typeof parseInt(request.match(/^[a-f\d]+/i)[0], 16) === "number") {
  const re = /^[a-f\d]+[\r\n]+/i;
  let header, body, headers, method, uri, servertype, length;
  if (/^(POST|query)/i.test(request)) {
    ([header, body] = request.split(/\r\n\r\n/));
    console.log(header, body);
    ({
      headers,
      method,
      uri,
      servertype = {}
    } = getHeaders(header));
    body = body.replace(re, "").replace(/[\r\n]+$/, "");
  } else {
    body = request.replace(re, "");
    body = body.replace(/[\r\n]+$/, "");
    console.log({
      body
    });
  }

How would you approach the Node.js request where we have to handle mutiple chunk length lines and chunk data lines in the same request body?

I want to use eslint (v 9.1.1) for a react project. From following the documentation, I did the following:

• npm init eslint/config

Following that it says the following: https://eslint.org/docs/v8.x/use/getting-started#configuration

After running npm init eslint/config, you’ll have an .eslintrc.{js,yml,json} file in your directory.

Yet that file doesn't exist in my directory. Any idea why this file wasn't included?

I have a class that creates a button that I want to make run another non-static class method, something like this:

render(){

let button = document.createElement('button');

button.onclick = this.editContent;

}

editContent(){

console.log(this.content);

}

is there a way to do this?

I am a beginner in coding need someone so that we can both start web development together so that it helps me to keep my interest in this

Hello everyone, I'm taking my first steps in JS and I'm stuck with this problem.

I have created a component, when I try to use it in another component and give it a class with css modules, it is not applied because it interprets it as a prop (that's what I think).

Try passing it a class name like prop and defining that class in the css module of the child component, then when that class is present different styles will be applied but it hasn't worked.

The solution I found is to pass the styles as props, which doesn't convince me.

Is there any way to do what I'm trying to do?
This is how I render it from the parent:

       <StarRating
      rating={prodDetail.stars}
      customStyles={{
        fontFamily: "Roboto",
        fontSize: "0.875rem",
        fontWeight: 500,
        lineHeight: "1.25rem",
        color: "var(--md-sys-color-on-surface)",
        letterSpacing: "0.1px",
      }}

And this is the child component:

import styles from "../StarRating/StarRating.module.css";

const StarIcon = ({ filled }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.star_icon}`}
      fill={filled ? "var(--md-sys-color-primary)" : "none"}
      viewBox="0 0 24 24"
      width="0.875rem"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 2l2.76 6.36L22 9.24l-5.64 4.68L18.48 22 12 17.76 5.52 22l1.12-8.76L2 9.24l7.24-.88L12 2z"
      />
    </svg>
  );
};

const StarRating = ({ rating, customStyles }) => {
  const renderStars = () => {
    const filledStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    const stars = [];

    for (let i = 0; i < filledStars; i++) {
      stars.push(<StarIcon key={i} filled />);
    }

    if (hasHalfStar) {
      stars.push(<StarIcon key="half" filled />);
    }

    return stars;
  };

  return (
    <div className={` ${styles.card_cal} `} style={customStyles}>
      ({rating}){renderStars()}
    </div>
  );
};

export default StarRating;

Thank you so much!

I want to select an element that has "Hello World!" literally anywhere in its code.

The "Hello World!" can be in its id, its value, its name, its title, its onclick etc, anywhere.

How can I do that?

I was looking something like the below:

document.querySelector(innerText="Hello World!")

document.querySelector(textContent="Hello World!")

document.querySelector(outerHTML="Hello World!")

I want to select an element that has "Hello World!" literally anywhere in its code.

The "Hello World!" can be in its id, its value, its name, its title, its onclick etc, anywhere.

How can I do that?

I was looking something like the below:

document.querySelector(innerText="Hello World!")

document.querySelector(textContent="Hello World!")

document.querySelector(outerHTML="Hello World!")

Im confused about when to use the call ball function parameter in the code block and when im not supposed to? Is that an exception to some method iterators for .every() and .map()

​

let sentence ='Today is Sunday unfortunately and tomorrow is Monday'

let storyWords = sentence.split(' ')

let lengthCheck = storyWords.every(word = > {return storyWords.length < 10}); //Arent you suppposed to use the 'word' parameter and not storyWords like in the code below? 'storyWords.length< 10' and not 'words.length< 10'

storyWords=storyWords.map(word = > {if (word.length> 10){return 'sadly'} else {return word}})

console.log(storyWords.join(' '))

console.log(lengthCheck)

There is a timer that appears on the screen after clicking .exitA, 1st button.

I want the timer to start after that button is clicked.

https://jsfiddle.net/87jvr3uh/

Right now, it stops after that button is clicked.

    <h2>Click anywhere to stop the timer</h2>

<p id="timer"></p>

<script>
  let seconds = 0;
  let timerId = setInterval(updateTimer, 100);

  function updateTimer() {
    seconds += 0.1;
    document.getElementById("timer").innerHTML = seconds.toFixed(1) + " seconds";
  }

  document.body.addEventListener("click", function() {
    clearInterval(timerId);
    document.getElementById("timer").innerHTML += " (stopped)";
  });

</script>

Here is the standalone timer code by itself:

https://jsfiddle.net/o4qLxnr8/2/

Most of all sites contain problems on algorithms and data structures. I don't understand the benefit of this at all. I want real tasks, for example adding some functionality to the site. Can I find such problems that are also in order of difficulty?

I know this questio appear several time, I looking a lot all the comment around the web but I stil don't understand where I'm going wrong.

This is my doce:

class Design {
  constructor(deck) {
    this.deck = deck;
    this.cards = deck.cards;
    this.selectPolygon = null;
    this.selectedCard = null;

    this.#addEventListener();
  }
  
  #addEventListener() {
   canvas.addEventListener("mousedown", this.#selectCard.bind(this));
  }

  #selectCard(event) {
    const point = {x: event.offsetX, y: event.offsetY}
    const card = this.isOverACard(point);
    if(card) {
      this.addCardRotation(card);
    } else {
      console.log('Non hai cliccato una carta.');
    }
  }

  isOverACard(p) {
    for (let i=0; i<this.cards.length; i++) {
      if (pointInsideRect(p, this.cards[i]).result) {
        this.selectPolygon = pointInsideRect(p, this.cards[i]).polygon;
        return this.cards[i];
      }
    }
    return false;
  }

  addCardRotation(card) {
    this.selectedCard = card;
    drawPolygonEdges(this.selectPolygon);
    canvas.removeEventListener("mousedown", this.#selectCard.bind(this));
    console.log('Hai selezionato: ' + card.value + ' di ' + card.seed);
  }
}

The removeEventListener is not working.

Hi there,

I've gone through basic tutorials, I can create basic landing pages, and some full-stack apps. Using Javascript/React.

However, when I go to something like Javascript 30 on Leetcode, those are WAY different types of things I've ever learned with JS. Same with Frontend Expert JS questions.

​

Should I continue to build projects? Or go in moreso these advanced topics? If so, what's the best place you've gotten to learn these intermediate Javascript foundations?

​

And FYI - I can do most Easy Leetcode and some Mediums using Python. So I have a decent grasp on DSA. But when I look at the Leetcode Javascript 30 days, I'm completely lost.

​

​

​

​

Hello all,

I am trying to build a simple Wordpress page with a form (WPForm) that asks

1. starting city

2. final destination

then gives you the distance.

I already have my Google Map API. With ChatGPT I've been trying to make it work but there is always something. (I know ChatGPT is not good at coding.

One of the issues (I suspect) is the field of the input where the cities are put.

Any tips ? (I can send the code to be more precise)

thank you all!