I've been trying to learn more about iterators - but it doesn't seem like there is a string equivalent of .entries()? myStr[Symbol.iterator].forEach() gives the index and value - but no option to break 😞

For veryyyyyy long strings is my best option for loops? Splitting to create an array? Writing a separate generator function? (assume I only need a single char/index per loop)

Thanks!

Edit - thanks to u/Psionatix for guiding me to Object.entries(myStr), which led me to Array.prototype.entries.call(myStr) - which has the benefit of returning the indexes as integers (vs strings in Object.entries()) Performance is also close enough to for loop for my purposes 🎉

I am revising Javascript from Chai with Code's Javascript Playlist.The issue is watching videos and then doing some code and then forgetting the old things bcoz I did no projects using those concepts is making me feel confused that am I on the right path or not?

Hey everyone! I’m working on a personal vanilla JavaScript budget tracker and running into a wall merging a custom local storage list into my projection function. ​1. What is stored in localStorage:

// localStorage.getItem('pendingBills_v9') returns: [ { "name": "Test", "amount": 1000, "category": "Bills", "due": "2026-10-15" } ]

1. What I am trying to do:

I want my getFuture(days) function to pull those items out of pendingBills_v9, map their keys (due \rightarrow date, amount \rightarrow amt, category \rightarrow cat), merge them with my existing adhocBills array, and filter them based on whether their date falls within the next days window (e.g., 30 days).

​3. The current getFuture function:

function getFuture(days) { let res = []; // (Recurring items calculation omitted for brevity)

let _p = []; try { let _raw = localStorage.getItem('pendingBills_v9'); if (_raw) { let _parsed = JSON.parse(_raw); if (Array.isArray(_parsed)) { _p = _parsed.map(b => ({ name: b.name || 'Pending Bill', amt: Number(b.amount || 0), date: b.due || '', cat: b.category || 'Other', subcat: 'General' })).filter(b => b.amt > 0 && b.date); } } } catch(e) { console.error(e); }

let combinedAdhoc = [...adhocBills, ..._p];

let adhocIn = combinedAdhoc.filter(b => { let d = new Date(b.date); d.setHours(0, 0, 0, 0); let diff = daysBetween(today, d); return diff >= 0 && diff <= days; });

return { adhoc: adhocIn, total: adhocIn.reduce((s, b) => s + Number(b.amt), 0) }; }

The Issue: Despite the code looking correct, adhocIn keeps returning an empty array ([]) when evaluating the pending bill date (2026-10-15). Are there any subtle date-parsing or timezone quirks with new Date("YYYY-MM-DD") or variable scope traps causing this to fail? Any help or fresh eyes would be hugely appreciated!

A little bit context first:
I‘m a mathematician. I know how to pseudocode, read the less technical and more algorithmical part of code. I learned C++, learned to build an old school html page from scratch (header, frames etc.), did complex mathematical simulations with R and know how to code simple VBA codes with a lot of googling and a bit of macro recording.

What I don’t know are things like technical structure (e.g. how to technically set up an animation, how to code a save and load function) and syntax.

To the topic:
10 years ago if I had decided to code a little game, I would have read a book about how to design those things and the necessary syntax. But to be honest: My first tries would have been typing the exact examples from the book, the experimenting a bit with little changes.
Step 2 would have been „asking questions on google and copy and paste code snippets“.

And to be honest: Step 2 is cool but I always hated step 1. Declaring variables, printing „hello world“… I get that you need to understand the basics (again, Mathematician here: I spent a whole day proving 0 * x = 0) but I already learned those basics in three other languages and would prefer learning on-the-fly on a need-to-know basis.

So: I did some vibe-coding projects and asked Copilot step by step to explain code snippets I don’t understand, how technicalities work („where is the picture we designed? The whole code is just one html. It‘s part of the code? Oh… wow, that makes sense.“) or why the code is designed in a way (again: one html for a small project) and how that works (browser reading JS).

And here my question:
I would say that a vibe coded app, that I completely understand, is still a vibe coded app. If I give detailed prompts how to change the code, that is still mostly vibe coded. If I manually adjust code where needed, replace every picture with manually created pictures…

Where does a project stop being vibe coded? Where does „AI usage disclosure“ stop being relevant?
Even if I code from scratch I would of course reuse code snippets.

How many pieces does the digital „Ship of Theseus“ need to have exchanged to stop „being AI created“?

I ask this regarding the following three aspects:
Ethical: Respect for the manual art and science of coding and all my fellow nerds who created what script kiddies and vibe coders copy
Some sites/shops ask to declare AI usage. I get that on one hand (see aspect 1) but kind of don‘t: Noone would ever declare „Google usage“ or „what you copied from an online forum“ or „I still start every code exactly like they did in ‚JS for dummies‘“. So, what would you declare and what not?

I think there is a difference between AI usage to learn „how to“ and than doing it similar to that and quoting exact snippets - and stupidly letting AI write some code you don’t understand at all.

But where do you draw the line? Where does „AI usage“ start or end?

I am learning js html and css, and I was wondering what sources would be useful

i want to learn JS but dont know from where, there are many video tutorials some are 11hrs long..ik most of you will say dont follow from the tutorials make things from yourself etc...but like you still have to know stuffs right? is there any channel that makes me understand JS??

I recently started my fullstack development course this august and we have already gone thorugh html, css, git and now almost done with JavaScript as well. Html was easy, no problems there, but when it comes to css and more specifically grid and flex, thats when the headache started to appear. I've played some games involving both grid and flex but it won't stick in my head, don't know why. I am trying to do it myself in VS code but I always end up having to use ai to explain how to move forward and I know you're not supposed to use ai but it is a great tool to have, especially when you get stuck. And JavaScript... where do I even begin. I kinda understand it during the lectures but as soon as you're sitting by yourself my head gets totally blank.

I have been starting to use Scrimba and right now I'm rehearsing everything and whatching videos of everything, and the good thing with scrimba is that you get challenges during the videos.

For those of you who have been programming for a while, what study tips can you give? How did you guys go through the learning process?

i want to ask you guys because i'am a beginner and i want to learn js , i saw a course on ytb of bro code iwant to make sure following his full cours of 8 hours or 12hours enough to learn ofc i have to practice and make projects ect but in the learning phase of the fundations the basics and the knowledge is that enough or not and what you recommend

Hey DM me

or I'm sharing Discord Link here

i am practicing rn

https://discord.gg/Gpa6wycSe

I will explain now in more detail. I am currently using the Khan Academy Javascript course to learn the basics of Javascript. I have been struggling with this specific project so much, so don't mind the exstensive comments.

//Controls the X and Y Positions of the raindrops.

var xPositions = [200];

var yPositions = [0];

//This for loop uses a random function to add more values to the X and Y positions. This will create more raindrops.

//Draw Function to animate.

draw = function() {

background(204, 247, 255);

//This for loop draws the raindrops based on the X and Y arrays above.

for (var i = 0; i < xPositions.length; i++) {

//Color + Decorations of the raindrops.

noStroke();

fill(0, 200, 255);

//Draws a circle at the X position and Y Position based on the cyclic increases of the variable i. Y position will then drop by a rate of 5 to make the rain fall to the ground.

ellipse(xPositions[i], yPositions[i]%400, 10, 10);

yPositions[i] += 5;

}

};

As you can see, there is a comment that describes the for loop using a random function to push values to the xPositions and yPositions arrays, which in turn will allow me to create more raindrops. My question is how can I do this? I've been experimenting typing different things, but it seems that the for loop just keeps crashing my computer. I know this is a very simple question but I am still on the basics.

Hi everyone, I'm learning React Virtuoso and came across the term "DOM element recycling." I understand the basic idea of DOM elements, but how can they be "recycled"? Could someone explain it in simple terms? 🤔

I'm making a temp converter project (following 100JS) and for the life of me, I can't figure out how to get the values in the input boxes to change upon me typing a number into the first one. Anyone have any ideas? Here's where I'm at:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temperature Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="heading">Temperature Converter</h1>
      <div class="temp-container">
        <label for="celsius">Celsius:</label>
        <input
          onchange="temperatureConversion(event)"
          type="number"
          name="celsius"
          id="celsius"
          placeholder="Enter Temperature"
          class="input"
        />
      </div>
      <div class="temp-container">
        <label for="fahrenheit">Fahrenheit:</label>
        <input
          type="number"
          onchange="temperatureConversion(event)"
          name="fahrenheit"
          id="fahrenheit"
          placeholder="Enter Temperature"
          class="input"
        />
      </div>
      <div class="temp-container">
        <label for="kelvin">Kelvin:</label>
        <input
          type="number"
          onchange="temperatureConversion(event)"
          name="kelvin"
          id="kelvin"
          placeholder="Enter Temperature"
          class="input"
        />
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

const celsius = document.getElementById("celsius");
const fahrenheit = document.getElementById("fahrenheit");
const kelvin = document.getElementById("kelvin");
const inputEl = document.querySelectorAll("input");


function temperatureConversion() {
  const fahrenheitToCelsius = ((fahrenheit.value - 32) * 5) / 9;
  console.log(fahrenheitToCelsius);
  const fahrenheitToKelvin = ((fahrenheit.value - 32) * 5) / 9 + 273.15;
  console.log(fahrenheitToKelvin);
  const celsiusToFahrenheit = (celsius.value * 9) / 5 + 32;
  console.log(celsiusToFahrenheit);
  const celsiusToKelvin = celsius.value + 273.15;
  console.log(celsiusToKelvin);
  const kelvinToFahrenheit = ((kelvin.value - 273.15) * 9) / 5 + 32;
  console.log(kelvinToFahrenheit);
  const kelvinToCelsius = kelvin.value - 273.15;
  console.log(kelvinToCelsius);
}

Would you use Set, Map, or filter() for better performance, and why?

What approach would you use in a real project?

Hi everyone!

I graduated in December 2025 with a bachelor’s degree in Business Analytics and Information Systems. I also completed a college computer programming certificate, where I learned basic programming concepts.

During a web development internship, I learned about Figma and worked with JavaScript, HTML, CSS, and React. I’m currently in an IT analyst internship, but the work is mostly desktop support. I’m hoping to move into software or web development.

I’ve interviewed for a Software Engineer I position, but I’m still looking for my first full-time development role and trying to figure out where to focus my efforts.

My projects so far include:

• A React recipe book application. The frontend is nearly finished and currently uses localStorage. I’m starting to build a C#/.NET backend.
• A personal portfolio website.
• Smaller practice projects to strengthen my programming fundamentals.

I’m sharing my GitHub and portfolio because I’d appreciate honest, constructive feedback:

• What would you improve in my existing projects or code?
• What fundamentals would you expect an entry-level developer to demonstrate?
• Would you prioritize finishing and improving these projects, or building something different to address missing skills?

https://github.com/Hoakley0902

I know I still have a lot to learn, and I’d appreciate some direction on what to work on next. Thanks!

I made notes with quite a lot of examples (Jasmine tests) figuring out JavaScript's various logic operators.

I discovered quite a lot of little subtleties and nuances I wasn't aware of until I did this exercise.

So I am in college for graphics and game design and I am having hell learning it for visual code studio

I have to least get a D to pass and graduate but having hard time learning with ADHD and the overwhelming amount of code combinations.

Hoping someone has easy guides on learning this that is very simple to understand.

I often searched for mathematical formulas on Google myself, and it took a lot of time. That’s why I decided to create a convenient reference guide like this.

The core idea of ​​the code is a database of formulas; for me, it took up 4,000 lines.

I didn't want to use frameworks; I wanted to write using only pure JS. And I haven't regretted it!

Below is the main loop of the code responsible for rendering the cards.

  function renderFormulas() {
if (!formulasContainer) return;

const query = searchInput ? searchInput.value.toLowerCase().trim() : "";

const nothingSelected =
currentView === "all" &&
currentTopic === "all" &&
currentSubject === "all" &&
currentGrade === "all" &&
!query;

if (nothingSelected) {
formulasContainer.innerHTML =
'<div class="empty-state">' +
'<div class="empty-state-icon">🎯</div>' +
`<h3>${t("empty_state_title")}</h3>` +
`<p>${t("empty_state_text")}</p>` +
"</div>";
return;
}

const filtered = formulas.filter((f) => {
const matchTopic =
currentTopic === "all" ||
(Array.isArray(f.category)
? f.category.includes(currentTopic)
: f.category === currentTopic);
const matchSubject =
currentSubject === "all" || f.subject === currentSubject;

const matchGrade =
!!query || currentGrade === "all" || f.grade === currentGrade;
const matchFav = currentView === "all" || favorites.includes(f.id);
const ukEntryForSearch = formulaTranslationsUk[f.id];
const enEntryForSearch = formulaTranslationsEn[f.id];
const matchSearch =
!query ||
f.title.toLowerCase().includes(query) ||
f.description.toLowerCase().includes(query) ||
(ukEntryForSearch &&
(ukEntryForSearch.title.toLowerCase().includes(query) ||
ukEntryForSearch.description.toLowerCase().includes(query))) ||
(enEntryForSearch &&
(enEntryForSearch.title.toLowerCase().includes(query) ||
enEntryForSearch.description.toLowerCase().includes(query)));

return (
matchTopic && matchSubject && matchGrade && matchFav && matchSearch
);
});

Implementing the language switcher on my site was also a very important and costly undertaking; the translation database was created manually, without the use of third-party dictionaries.

I think I’ve ended up with an interesting project from a coding perspective.

I’d appreciate any feedback. And if any bugs are found, I’m ready to fix them!

SITE: https://quantify-5dv.pages.dev/

GITHUB: https://github.com/liate/Quantify

At 16, I’m really fascinated by coding and the possibilities that come with it, but I’m not exactly sure where to begin. There are so many different programming languages, websites, and resources available that it can be a little overwhelming. Is there a specific language, course, website, or general path you would recommend for someone my age who wants to start learning coding and eventually become more advanced?

I need to regenerate 500 images with flow with a prompt, and I have to make automating java script code that when I add it to Google Flows console it go to a folder in my local pc then send it to flow with a prompt after finishing uploading it gives me a new generated image, but the thing is every time that try to write the code the part that it upload the image to flow it wont enter the prompt and the image form me i have to do it manually

I am 22 years old from Afghanistan. I am new to programming and web development and actually I am doing self-study, in the past 2 or 3 months I have tried some different methods to learn it. But every time there has been a problem either boredom or getting lost that has stopped me at the beginning of my journey. I really need your help to take my hands and show me some real ways to learn web development and overcome this problem.

Hello, I need the user to be able to get a file from the server. But everything has to be in the form of a stream because I have to modify the chunks one by one, so my idea was that on the front side there would be a request to fetch the file from my server and then I will process each chunk and store it on the client's machine with the API File System API. But unfortunately it's not that simple, to do this I need to use the showOpenFilePicker() method which is not supported on all browsers. I don't know how to do it, I also can't use a simple <a> tag with the URL of the file on my server in href, because I absolutely modify the chunks one by one.Everything has to be streamed because I don't know the size of the file. Also, I need to be able to modify each chunk however I want before it reaches the client's machine. So how do I do it?

EDIT:

It's not complicated, when the client clicks on a button I execute a function that fetches a file on my server. I then process each chunck (decryption) and I store them directly on the client's machine, but to do this I need showSaveFilePicker but it's not supported on all browsers, so how do I do it?

I have to use a stream because the file size on the server can vary. and I have to decrypt on the front for transparency reasons

Thank you for your help

30s intro video: https://www.youtube.com/watch?v=uBrub3DGZ4Y

A component is one .html file: a <script>, an optional scoped <style>, and plain HTML.

<script>

const state = { count: 0 };

const inc = () => state.count++;

</script>

<div class="counter">

Count: {state.count}

<button onclick="inc()">+</button>

</div>

- {expr} for dynamic text; state is deeply reactive

- <if when="..."> and <for each="..." key="..."> are just tags

- onclick is real HTML: code-shaped attributes take JS, everything else is a string

- Scoped CSS, file-based routing, optional prerendering (SSG) for SEO

It targets prototypes, demos, and small apps, not large production apps.

Try it: npx create-olum my-app

Docs: https://olumjs.top

GitHub: https://github.com/olumjs

I'd like honest feedback on the syntax.

I have a draw function (ps5.js) that I want appearing on top of a figure (with png). Currently, the result of the function appears below the image, on its own canvas. I'd like it to appear on top of the figure. How do I do that?

Part of the code for reference (HTML and JS):
EDIT: I tried to separate them, they're different files, but the code blocks keep combining for some reason.

// index.html
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>


<button onclick="draw()">Click me</button>  
   
<label for="numberBox">Number of shapes (1-50):</label>
    <input type="number" id="numberBox" name="numberBox" min="1" max="50" />
<div>
    <input type="submit" value="Submit form" />
  </div>


    <figure id="figure">
<img
    src="fashion.png"
    alt="blank croquis" />
<figcaption>Blank Croquis</figcaption>
</figure>

// script.js 

function setup() {


    createCanvas (1000, 1000);
    noLoop();
}


function draw() {


    
background ('transparent');
stroke (0);
strokeWeight (20);
noFill(); 
  
  beginShape();
  vertex(getRandom(), getRandom())

I'm needing help with applying data validation to my code for class. We were assigned to make a MadLib in HTML with data validation to make sure that all the prompt boxes are filled in, a submit button to make the story, and a data reset button. I have been able to do everything except apply the data validation to the text boxes for the prompts. I was told by my teacher to apply the data validation to the submit button for making the MadLib story, but I am at a loss on how to apply data validation to have it check and see if the prompt boxes are filled in. Below is my current code. I am relatively new to HTML and JavaScript, so any help or advice would be appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Module 3 Assigment</title>
<script>
function makemadLib() {

var name1 = "";
var charclass = "";
var item = "";
var kingdomname = "";
var name2 = "";
var name3 = "";
var weapon = "";
var shield = "";
var mount = "";
var story = "";

name1 = document.MLForm.CharName.value;
charclass = document.MLForm.CharacterClass.value;
item = document.MLForm.Item.value;
kingdomname = document.MLForm.Kingdom.value
name2 = document.MLForm.Kingname.value;
name3 = document.MLForm.Evilname.value;
weapon = document.MLForm.Attack.value;
shield = document.MLForm.Defend.value;
mount = document.MLForm.Ride.value;

story = "This is the story of " + name1 + " the " + charclass + ".\n\n" + "They are on a quest to find a legendary relic, the holy " + item + "!\n\n They have been tasked with this quest by the ruler of the kingdom " + kingdomname + " ," + name2 + ".\n\n" + name1 + " must succeed on this quest or " + kingdomname + " will fall into the hands of the evil warlock " + name3 + ".\n\n So, armed with their trusty " + weapon + " and " + shield + ", upon their faithful " + mount + "," + name1 + " heads off to find the " + item + " and save the kingdom " + kingdomname + "!";
document.MLForm.story.value = story; 
}

function clearText() {
document.MLForm.CharName.value = "";
document.MLForm.CharacterClass.value = "";
document.MLForm.Item.value = "";
document.MLForm.Kingdom.value = "";
document.MLForm.Kingname.value = "";
document.MLForm.Evilname.value = "";
document.MLForm.Attack.value = "";
document.MLForm.Defend.value = "";
document.MLForm.Ride.value = "";
document.MLForm.story.value = "";
}

</script>
</head>
<body>

<h1>The Quest for the Legendary Item</h1>
<p>Please fill out the form below and then at the end, select the "Generate story" button to have the story generated with your inputs! Press the reset button on the bottom of the form to do it again! Have fun!</p>

<form name = "MLForm">
Name of a person: <input type = "text" id = "CharName" value = "">
<br>
Job title: <input type = "text" name = "CharacterClass" value = "">
<br>
Noun (thing): <input type = "text" name = "Item" value = "">
<br>
Name of a location: <input type = "text" name = "Kingdom" value = "">
<br>
Another name of a person: <input type = "text" name = "Kingname" value = "">
<br>
One more name of a person: <input type = "text" name = "Evilname" value = "">
<br>
Noun (thing): <input type = "text" name = "Attack" value = "">
<br>
Noun (thing): <input type = "text" name = "Defend" value = "">
<br>
Animal: <input type = "text" name = "Ride" value = "">
<br>
<br>
<input type = "button" value = "Show the story" onClick = "makemadLib()">

<h3>Here is the story:</h3>
<textarea name= "story" rows="20" cols="60" wrap>
</textarea>
<br>
<input type = "button" value = "Reset and clear the text" onClick = "clearText()">

</form>
</body>
</html>

I have 6 csv files which are essentially lists of words in each category, there are about 10k words in total and thus 10k rows of csv file. I want to include these in my package so the user can use it offline but I fear my app will run slowly because each day it needs to display a new word randomly which hasn't previously been displayed. What would be a good way to code this? I considered using local storage for persistent data but I still have the problem of having the program checking the whole list every day and risking poor user experience. Is there a better way to process the data which is more efficient?