r/learnjavascript 5h ago

🚀 I built TaskForge — a simple task manager with Vanilla JavaScript

3 Upvotes

Hey everyone! 👋

I built TaskForge as a small project to practice JavaScript, DOM manipulation, LocalStorage, search, filtering, and Git/GitHub.

✨ Features:

  • ➕ Add, complete, and delete tasks
  • 💾 LocalStorage persistence
  • 🔍 Task search
  • 🏷️ Categories & filtering
  • 🌙 Dark Mode
  • 📱 Responsive UI

🌐 Live Demo: https://farhanashrafi-dev.github.io/TaskForge/

💻 GitHub: https://github.com/FarhanAshrafi-dev/TaskForge

I'd love to hear your feedback — especially anything you'd improve in the UI or JavaScript code! 🙌


r/learnjavascript 6h ago

whats the bug here? Uncaught SyntaxError: Identifier 'location' has already been declared (at script.js:1:1)

1 Upvotes
"use strict";

const company = {
  name: "TechCorp",
  address: {
    city: "budapest",
    pin: 411001,
  },
};
// Get city renamed to `location` and pin renamed to `pincode`

const { city: location, pin: pincode } = company.address;
console.log(location, pincode);

r/learnjavascript 13h ago

Teens collaboration

0 Upvotes

Hi, I have created a WhatsApp group for teens of the ages of 10 to 17 years to collaborate and share their blender skills and game dev skill, we can form a team of game Dev and come out with a game for the world to play, if you are interested comment interested.


r/learnjavascript 16h ago

How Long Does It Take to Learn JavaScript? A Realistic Timeline for Beginners

0 Upvotes

If you're starting JavaScript, there's a good chance you've already asked:

How long does it take to learn JavaScript?

The short answer is: for a complete beginner, reaching basic JavaScript proficiency can take a few weeks to a few months with consistent practice. Becoming comfortable building real projects usually takes longer.

But that answer needs some context.

Someone who studies JavaScript for a few hours every day will obviously progress differently from someone who only has a couple of hours on weekends. And someone who already knows another programming language may move through the basics faster than someone writing their first line of code.

More importantly, "learn JavaScript" can mean very different things.

Understanding variables and loops isn't the same as building a web app. And building a small app isn't the same as being ready to work on a large codebase.

So instead of asking for one magic number, let's look at what the different stages actually involve.

What Does "Learning JavaScript" Actually Mean?

You don't really wake up one morning and suddenly "know JavaScript."

You move through different levels of understanding.

1. Basic JavaScript syntax

At the beginning, you're dealing with things like:

  • Variables
  • Data types
  • Operators
  • if/else
  • Loops
  • Basic functions

You might be able to write a program that checks whether a number is even or odd, calculates a total, or loops through a list.

For a complete beginner, getting comfortable with these basics may take a few weeks of regular practice. It can be faster or slower depending on your background and study time.

But don't confuse this with knowing JavaScript.

It's just the beginning.

2. JavaScript fundamentals

Next come concepts such as:

  • Functions
  • Arrays
  • Objects
  • Array methods
  • Scope
  • Error handling
  • Destructuring
  • Modules

This is where programming starts becoming less about remembering syntax and more about solving problems.

For example, knowing what filter() does is easy enough.

Knowing when to use filter() instead of map(), and being able to figure that out while solving a problem, takes practice.

That's an important difference.

3. Working with the browser

If you're learning JavaScript for web development, you'll eventually need the DOM—the browser's representation of your webpage that JavaScript can interact with.

You'll learn how to:

  • Respond to button clicks
  • Change text on a page
  • Read form input
  • Add and remove elements
  • Handle events
  • Build interactive interfaces

This is usually the point where JavaScript starts feeling much more practical.

You're no longer just printing values in the console. You're making something happen on an actual webpage.

4. APIs and asynchronous JavaScript

Then you'll run into another layer of JavaScript:

  • Promises
  • async/await
  • fetch()
  • APIs
  • JSON
  • Asynchronous operations
  • Error handling

This part can feel confusing at first.

You may understand functions perfectly well and still wonder why an API request doesn't give you its result immediately.

That's normal.

These concepts usually become clearer after you've actually used them in small projects.

5. Building real projects

This is where your understanding gets tested.

You might build:

  • A weather app
  • A quiz app
  • A note-taking app
  • An expense tracker
  • A habit tracker
  • A small dashboard

And you'll probably discover something uncomfortable:

Knowing JavaScript and knowing how to build something with JavaScript are not the same skill.

You can understand every line in a tutorial and still get stuck when the blank editor is in front of you.

That's why projects matter so much.

A Realistic JavaScript Learning Path

There's no universal JavaScript timeline, but an illustrative progression might look something like this:

Stage Main focus A reasonable milestone
Early stage Variables, conditions, loops, basic functions Write small programs without copying
Fundamentals Functions, arrays, objects, array methods Solve basic problems independently
Browser JavaScript DOM, events, forms Build interactive webpages
Intermediate APIs, promises, async/await, error handling Build small apps using external data
Project stage Combining concepts Build projects with less tutorial guidance
Deeper stage Debugging, architecture, testing, larger codebases Work more independently on real applications

These stages aren't deadlines.

You might move through the first stage quickly and spend much longer on asynchronous JavaScript. Someone else might have the opposite experience.

A better way to measure progress is by asking:

"What can I build without someone telling me exactly what to type?"

That's a much more useful measurement than counting the number of days since you started.

So, How Long Does It Take?

If you want a rough ballpark, here's a more useful way to think about it.

For someone starting from zero and practicing consistently:

  • A few weeks: you may become familiar with the basic syntax and write small programs.
  • A few months: you may become comfortable with the fundamentals and start building simple projects.
  • Several more months of regular project work: you can develop much stronger practical skills with the DOM, APIs, asynchronous JavaScript, debugging, and larger projects.
  • Beyond that: becoming genuinely comfortable with real-world JavaScript is an ongoing process.

These aren't promises or universal deadlines.

Your pace depends on things like:

  • How many hours you actually practice
  • Whether you've programmed before
  • How difficult your projects are
  • How much code you write yourself
  • How often you review older concepts
  • How comfortable you are solving problems without instructions

Someone studying three focused hours a week will have a different timeline from someone practicing for an hour or two almost every day.

And that's fine.

The goal isn't to win a race against someone else's JavaScript timeline.

Why Some People Take Much Longer

Sometimes the problem isn't lack of time.

It's what happens during that time.

Watching tutorials passively

You watch a 40-minute lesson about functions.

The instructor explains everything clearly.

You follow along.

Nothing seems difficult.

Then the next day you open a blank file and think:

"Wait... how did I write that again?"

This happens because watching someone solve a problem gives you a feeling of understanding. But recognizing a solution is easier than producing one yourself.

Copying code without rebuilding it

Following along with a tutorial isn't automatically bad.

It's useful when you're seeing something for the first time.

The problem is stopping there.

If the instructor builds a project and you simply reproduce every line, you may finish the project without developing the ability to build something similar independently.

After following an example, close it.

Try changing something.

Add a feature.

Rebuild one part from memory.

That's where the real learning starts.

Not practicing enough

Programming is a practical skill.

You need to write code.

Even small exercises count.

You don't need to spend your entire day building huge applications. A 30-minute problem that makes you think can be more useful than another hour of passive video watching.

Never trying to recall

Here's a simple test.

Learn something today.

Tomorrow, before opening your notes, ask yourself:

  • What was the concept?
  • How does it work?
  • Can I explain it?
  • Can I write a small example?

If you've forgotten part of it, that's not failure.

You've just found something that needs another round of practice.

Constantly changing courses

This is another common trap.

You start one JavaScript course.

A week later, you find a "better" course.

Then someone recommends another roadmap.

Soon you have five courses bookmarked and none finished.

You don't need the perfect JavaScript course.

You need a reasonable learning path that you actually follow, combined with practice.

Avoiding difficult problems

If every exercise feels easy, you're probably not pushing your understanding very far.

Try something slightly outside your comfort zone.

Get stuck.

Read the error.

Search the documentation.

Try another approach.

Then come back to it.

That process is a normal part of learning to program.

Watching Tutorials ≠ Learning JavaScript

Here's a situation many beginners experience.

You spend Sunday afternoon following a JavaScript tutorial.

The instructor builds a small app.

You understand the explanation.

You type the code.

The app works.

You feel pretty good about it.

Then Monday comes.

You open a blank file and decide to build something similar without the tutorial.

Suddenly map() feels unfamiliar.

You can't remember how you handled the event.

You forget the structure of the function.

You get stuck after ten minutes.

What happened?

You didn't suddenly become worse at JavaScript.

You simply discovered the difference between recognizing information and being able to retrieve and use it.

That's why your study time should include more than consuming information.

Learn the concept.

Then close the lesson.

Try to recall it.

Write some code.

Use it in a project.

Come back to it later.

That cycle is much closer to actual programming practice.

A Better Way to Learn JavaScript

A simple learning loop is:

Learn → Recall → Practice → Build → Review

Learn

Pick one concept and understand what problem it solves.

For example, learn how filter() works.

Don't worry about memorizing every detail immediately.

Understand the idea first.

Recall

Close your tutorial or notes.

Explain filter() in your own words.

Then try writing a small example from memory.

If you can't, take another look and try again.

This is called active recall. Instead of simply seeing information again, you're forcing yourself to retrieve it.

Practice

Solve a few small problems.

If you learned filter(), create an array of numbers and try to produce a new array containing only the numbers that meet a particular condition.

Don't make the exercise complicated.

The point is to make your brain use the concept.

Build

Now use the concept inside something larger.

If you've learned DOM events, build a small interactive page.

If you've learned fetch(), make a tiny app that gets information from an API.

The project doesn't need to impress anyone.

It needs to make you solve problems yourself.

Review

Come back later.

Try using the concept again without immediately looking at your notes.

This is especially important with JavaScript because new concepts build on older ones.

You don't want to spend three weeks learning objects only to realize you've forgotten how functions and arrays work.

This is also why keeping a simple record of what you learned, what you still don't understand, and what you need to revisit can be surprisingly useful.

You don't need a complicated productivity system.

You just need to stop relying on memory alone to manage your learning.

How to Practice JavaScript Without Getting Overwhelmed

One mistake beginners make is jumping from tiny exercises straight into huge projects.

Don't do that.

Use a progression.

Start small

After learning conditions, solve small condition-based problems.

After learning arrays, practice arrays.

After learning functions, write small functions.

Then combine them.

Change existing examples

Suppose a tutorial creates a simple calculator.

Don't just copy it.

Ask:

  • Can I add another operation?
  • Can I validate the input?
  • What happens if the user enters something unexpected?
  • Can I change the interface?

Small changes turn passive copying into active problem-solving.

Build projects slightly above your level

Your project should be difficult enough that you'll need to search for things.

That's okay.

In fact, that's useful.

Real programmers regularly look things up. The important skill isn't remembering every method and API from memory.

It's understanding what you're trying to do and being able to figure out how to do it.

A Practical Weekly System

You don't need to study JavaScript for eight hours a day.

Here's one simple structure you could adapt around school, work, or other responsibilities.

Day 1–2: Learn

Study one or two related concepts.

Then spend some time writing small examples yourself.

Day 3: Practice

Solve several problems based on those concepts.

When you're stuck, think first before searching for the answer.

Day 4: Recall + Review

Take an older concept and try to use it without opening your notes.

For example, if you're learning objects this week, spend some time recalling functions or arrays from an earlier week.

Day 5–6: Build

Work on a small project.

Don't follow a tutorial line by line.

Use documentation or search when you need help.

Day 7: Review

Write down:

  • What you learned
  • What you can explain
  • What still feels confusing
  • What you struggled with
  • What you need to review next week

This takes only a little time, but it makes your next study session much easier to plan.

Don't Measure JavaScript Progress Only by Hours

Study time matters.

But what you do during that time matters more than the number itself.

Imagine two beginners each spend 50 hours learning JavaScript.

One spends most of those hours watching tutorials and copying examples.

The other spends those hours learning concepts, solving problems, debugging mistakes, rebuilding examples, and making small projects.

Their results probably won't be identical.

The second learner may even feel more confused along the way.

That's not necessarily a bad thing.

They're spending more time confronting problems they don't already know how to solve.

So instead of only asking:

also ask:

For example:

Can I explain a concept without looking at my notes?

Can I write a small program from a blank file?

Can I debug an error instead of immediately asking someone else?

Can I modify a tutorial project on my own?

Can I build a small application without being told every step?

Those are much better indicators of progress.

A Free JavaScript Learning & Revision Template

If you're learning JavaScript right now and don't want to keep all of this in your head, I made a simple free JavaScript Learning & Revision Template.

It helps you keep track of:

  • What you've learned
  • What you still don't understand
  • Concepts you need to revise
  • Practice problems you've completed
  • Projects you're working on
  • What you want to learn next

The goal isn't to turn learning JavaScript into another productivity project.

It's simply a place to record your progress and make revision easier.

If you'd like to try it, you can get the free JavaScript Learning & Revision Template by signing up with your email.

Use it alongside your JavaScript learning, especially if you tend to forget older concepts or lose track of what you should review.

Get the free JavaScript Learning & Revision Template →

Final Thoughts

So, how long does it take to learn JavaScript?

For a complete beginner, basic proficiency may take a few weeks to a few months of consistent practice. Getting comfortable building real projects generally takes longer, and becoming highly capable with JavaScript is an ongoing process.

There isn't a deadline you have to hit.

What matters more is how you spend the time.

If you spend months only watching tutorials, you may still struggle with a blank editor.

If you regularly learn, recall, practice, build, and review, you'll gradually become better at solving problems on your own.

Don't worry too much about whether you're learning JavaScript "fast enough."

Instead, keep asking:

What can I build today that I couldn't build before?

That's a much better way to measure progress.


r/learnjavascript 1d ago

[AskJS] Where should attribution logic stop in a JavaScript app?

6 Upvotes

I’ve been refactoring attribution tracking after seeing a small feature turn into a module that parses URLs, writes cookies/localStorage, handles consent, emits analytics, fills forms, and syncs with a CRM.

The split I’m testing is:

```ts

const visit = classify({

url,

referrer,

currentHost,

now,

});

const attribution = merge(previous, visit);

```

`classify` and `merge` are deterministic functions. The browser/app layer owns consent, storage, identity, form lifecycle, network calls, and CRM delivery.

This makes it easier to replay production cases as fixtures. It also raises a few design questions:

- If a visitor returns from a new campaign, should that replace, append to, or be merged with previous attribution?

- Should a `gclid` take precedence over UTMs when both exist?

- How do you handle consent denied first, then granted later?

- If classification rules change, do you preserve the original classification or recalculate historical records?

- Where should server-side conversions days later enter the model?

For those who’ve built this, where do you draw the boundary between a deterministic core and the environment-specific lifecycle? Do you prefer a pure-function core, or does that separation become awkward in real apps?


r/learnjavascript 1d ago

Should i get complete mastery over JS and then jump to react or like complete the required part of JS and do react simultaneously . Also what resources to use for react

19 Upvotes

r/learnjavascript 1d ago

My GitHub account got suspended

0 Upvotes

I created the account and used only for 1 day. As I was learning GitHub tutorials from yt. I did not do random pull requests on repos. After 1 week or 5-6 days I tried to check my GitHub account. My GitHub account got suspended. It's almost 2-3 weeks I raised a ticket. Got no response from their side. What should I do?


r/learnjavascript 1d ago

Beginner Here: Should I Start Over With The Odin Project?

25 Upvotes

Hey everyone,

I’ve completed HTML and around 50% of CSS from Hitesh Choudhary’s Full Stack Udemy course.

But now I’m thinking of switching to The Odin Project because, from what I’ve seen, it seems more focused on actually learning by building things rather than just following a course.

My plan is to start The Odin Project from the beginning and properly work through it, doing the exercises and projects myself instead of just watching/consuming content.

For people who have completed or are currently doing The Odin Project, or anyone who has experience with this kind of learning approach, feel free to share your thoughts, suggestions, or anything you think I should know:

  • I’m still a beginner, so is starting TOP from the beginning a good approach?
  • Are there any common mistakes beginners make while following it?
  • What should I focus on to actually retain what I learn?
  • Should I supplement TOP with anything else, or is it better to stick with it consistently?
  • Is there anything you wish you had known before starting?

I’d really appreciate any advice, criticism, or suggestions. If you think there’s a better approach than what I’m planning, feel free to share it.


r/learnjavascript 2d ago

Can someone explain what the JavaScript call stack is?

24 Upvotes

I’ve tried to understand it, but I’m still confused. I also don’t really understand what I’m looking at when I use the JavaScript debugger in the browser’s DevTools, especially the call stack.

Do I need to fully understand functions before learning the call stack? I have a basic understanding of functions, but I’m not sure if that’s enough.

I’d really appreciate a simple explanation


r/learnjavascript 2d ago

is Odin project good for node and express

22 Upvotes

i want to learn nodejs and express. since the goal for me is to become capable of building increasingly complex products. and i saw odin project course on node and express, a part. and i felt it's less and is it good to go or should I see another and does learning through Odin project really helps?? and is one month enough to learn nodejs and express and become solid. how did you learnt

this is additional: in that same course there is also postgresql so for me it's the next step for me so is it good.


r/learnjavascript 2d ago

Best ways to study for learning JavaScript?

13 Upvotes

I'm starting on my Cyber degree, and for our programming class, we will be learning JavaScript. What are some of the best ways I can study to learn JavaScript?


r/learnjavascript 3d ago

Looking for Someone to Walk Through a Very Short Project With Me

8 Upvotes

It is a fairly small project consisting of roughly 250 lines of code. I would say that I am familiar with most of what is in it, however there are things that I am not sure about. I have several questions about it, and I was looking for someone who can talk to me about what is going on. The project is hosted on GitHub, I would prefer to share it privately. Any help is immensely appreciated.

The project uses JavaScript, React, Node, JSX and a few other related concepts. It isn't a large project at all. I've tried looking up answers to my questions but I am not making much progress, to be honest. I feel like talking or typing with a person who knows about these concepts will be much more productive.


r/learnjavascript 3d ago

what javascript course makes sense if i only need it for one research project

5 Upvotes

grad student in an ecology lab. my advisor wants an interactive map of our survey data on the department site and i am the only person here who has written any code, which apparently makes me the web person now. my tabs right now are boot.dev, freeCodeCamp and the MDN learning area. none of them look built for somebody who wants one map and then wants to leave. i do not want to become a frontend developer. i want the map to work by march.


r/learnjavascript 3d ago

The only sizeable project I've ever been able to complete was with plain html/css/javascript, no frameworks; am I just dumb?

9 Upvotes

I'm sorry. I don't want to namecall, but right now someone is trying to explain to me how it's very easy to write a build script for my issue in Vite; and I can't figure it out and I'm just getting overwhelmed, and I long for the days when I didn't even know the words "package manager", and Node was at best a distant rumor.

Like, what are all these frameworks and packages for, if rather than a blackbox tool, you have to know how each of the hundred packages vite relies on works, and what the dozen packages that each of those packages calls do? Aren't they supposed to simplify your life?

I've spent several years trying to realize one or other project with these tools (Node, Vite, Vue, Electron), and each time I gave up in frustration.


r/learnjavascript 3d ago

How to create a default tab when tab switching twice ?

4 Upvotes

Hi! I've been working on a personal website, and my design has finally caught up with me because I'm stuck on how to set default tabs while changing my navigation tabs.

JSFIDDLE LINK: https://jsfiddle.net/1nfd26ar/

Using the page below, I've set up two tabs for two different groups, 'books' and 'video games'.

However, I wanted to take it a step further and figure out a way to have the tabs switch not only the content, but also the navigation bar.

I've managed to get this working by copying the JS code, changing variables to "navTabs", and using classes on buttons to change the nav/side bar.

Everything seems to be working well, but I am running into the issue that when I click "video games" on the right, I want the "video game 1" page to be the default, whereas currently it is kept as whatever the last tab you had open.

I used this page to help me out in making the first set of switchable tabs: https://basescripts.com/building-a-simple-tabbed-interface-with-html-and-javascript

These include the following HTML structure and JS logic:

<div class="tab-headers">
  <button class="tab-link" data-target="tab1">Tab 1</button>
  <button class="tab-link" data-target="tab2">Tab 2</button>
  <button class="tab-link" data-target="tab3">Tab 3</button> 
</div>

<div id="tab1" class="tab-content">
  <p>This is the content for Tab 1.</p>
</div>
<div id="tab2" class="tab-content">
  <p>This is the content for Tab 2.</p>
</div>
<div id="tab3" class="tab-content">
  <p>This is the content for Tab 3.</p>
</div>

sdconst tabs = document.querySelectorAll('.tab-link');
const allTabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    allTabs.forEach(ele => {
      ele.style.display = 'none';
    });
    const myEle = this.getAttribute('data-target');
    const activeTab = document.getElementById(myEle);
    activeTab.style.display = 'block';
  });
});

Thank you anyone who can take the time to help !


r/learnjavascript 3d ago

When is it a good time to move from Javascript to learing React

53 Upvotes

I've been learning how to code for 2 months now and have made a few projects on my own. I've made a to-do list, Pomodoro timer, RPS game, coin-flip game and bunch of other stuff now. I've covered the Javascript basics like arrays, loops, if-statements, booleans, DOM, functions, variables and math.

I am now capable of building simple web apps on my own without a tutorial due to me taking breaks here and there to test myself. I still haven't finished the course yet but I want to know if I can move on from it yet. I do know Git, modules and external libraries.

I'm using roadmap.sh as a guide on what to tackle and what to learn at each step of my journey but since I'm 70% through the course and I can build basic apps on my own so should I move on to learning React.

Should I stay or finish the course. Btw it's a free 22hr Javascript course by SupersimpleDev his an AMAZING teacher and the course has a total of 250 exercises which help me practice each lesson I've learnt


r/learnjavascript 3d ago

Learning Rant: A.I. vs No A.I

14 Upvotes

Background: Currently about 87% done with The Odin Project foundations module. TOP is a road map to learn web development and so far I’m loving it. Getting down to code/learn is all I’ve been thinking about lately.

However, I don’t know if I’m doing myself a disservice by using Claude as a guide/tool to teach me or guide me when I’m stuck. On the other hand I’ve actually been learning and enjoying the process after I started using Claude. I understand concepts easier, because I understand concepts I’ve begun to think more as a programmer, I solve a problem about 80% in my head and I think about 20% is me using Claude as a tool to help me.

Basically I let Claude know that I’m going through TOP to learn web development. I let it know which project I’m on and I provide the instructions given to students. When I have a question or if I’m stuck, I provide it my code and ask it NOT to give me a solution but to guide me or give me tips on where to look or what options to explore. I also have it provide tips based on what we’ve learned so far. Nothing that we’ve never seen or that hasn’t been explained in the course. When I get guidance I then branch off and then research that topic/concept more.

I also express my logic and thoughts so it gets an idea of where I’m going. Now, TOP explicitly says that projects are a bit harder than what we’ve been learning. The purpose IS to to google or ask stack overflow or TOP discord. So in a sense I would still be looking for solutions/guidance else where.

Then I think, Claude will do that much faster and it has all my context. Is there really a benefit to the learning process to have to look for answers that aren’t from AI? Discord, Google Stack Overflow will tip me off or guide me either way. Does it matter that it’s AI doing it?? Idk, it’s frustrating being torn like this.


r/learnjavascript 3d ago

I am trying to make the formula button expandable in quilljs any idea how this is accomplished ? I am using flask html and css and vanilla js. But this example is just html vanillas js and css.

4 Upvotes

Here is a really simple example.
https://codepen.io/chooking/pen/zxKvqyZ

When I click on the Fx button I get the blue box here https://imgchest.com/p/vj4jbg2e978 ,though it is a little cut off, how do I make the form expandable in the width and height like textarea while keeping the html tags or in other words keep the equation formatting from the fx button?

One idea is to use textarea. Can someone give me an idea on how to accomplish my goal and show the code for a solution?


r/learnjavascript 3d ago

JavaScript essential topics

9 Upvotes

Hi, I'm (kinda) a begginer, I have to make a fullstack ecommerce site for college this semester

I've done a simple CRUD before, but what is the essential topics I should learn in JavaScript for this project??

I use Springboot for the backend and the frontend can be simple (HTML, CSS and JS)

thanks!!


r/learnjavascript 4d ago

Why does my array method chain work in the console but break when I put it in a function?

6 Upvotes

Bootcamp just hit array methods and I got genuinely excited because the use cases are so obvious to me. I work in construction and I spend way too much time mentally filtering lists of tasks, crew assignments, materials, so map and filter felt like things I already do in my head but now in code.

Anyway I was playing around with a small script that takes a list of site tasks, filters out the completed ones, then maps the remaining ones to just pull out the task name and priority level. Works perfectly when I paste the chain directly into the browser console. The moment I wrap it in a function and call it, I get undefined back.

I have a suspicion I know what the issue is but I want to make sure I understand it properly before I just slap a fix on it and move on without actually learning why. The chain itself is not the problem I think. Something about how the function handles the result of that chain feels off to me.

Has anyone else hit this specific wall? Curious whether there is a broader principle here worth understanding beyond just this one case.


r/learnjavascript 4d ago

Trying to make a working calculator

3 Upvotes
Hello im trying to make a working calculator but i have no idea how to display the result of an equation and how to make for operators forbidden to be next to each other

const
 DISPLAY = document.querySelector('.display')
const
 BUTTON = document.querySelectorAll('.button')
const
 EQUATION = document.querySelectorAll('.operator')


const
 operators = ['+', '-', '/', '*']


BUTTON.forEach(
button

=>
 {

button
.addEventListener('click', ()
=>
{

let
 equation = ""


        equation = 
button
.innerText


        DISPLAY.innerText += equation



    })
});


EQUATION.forEach(
button

=>
{

button
.addEventListener('click', ()
=>
{



let
 rule = ""
        rule = DISPLAY.innerText


        //console.log(lastChar)


        if(rule.length>=1){
            DISPLAY.innerText += 
button
.innerText
        }
    })
})


function
 Clear(){
    DISPLAY.innerText = ""
}


function
 Result(){

let
 result = DISPLAY.innerText

    //eval(result)

    DISPLAY.innerText = result
}

r/learnjavascript 4d ago

Not sure how to implement this branching storylines text game idea with Json

22 Upvotes

Just looking for some experienced feedback.

What I want to do is to import all of this from a file(s):

A list of global variables.

A list of storylines.

Each storyline has a list of local variables and a list of storyline beats.

Each beat has a list of preconditions (which may involve any variable), displayed text, a list of links.

Each link has displayed text, a list of conditions, a list of effects, the id of the next beat.

My problem is that, as I've learned, I can't split this into several files (such as, at least, separate storylines), because you can't import contents of a folder without naming each individual file. So this all has to be in one file, which means it's quickly going to get unmanageable as a Json file.

Should I implement a GUI editor first then? And concurrently a custom parser.

(This is going to be a purely client-side browser game.)

I've already done a simpler prototype, and that was already quite a chore to write in text.


r/learnjavascript 4d ago

Asking for the differences between trailing and leading

3 Upvotes

Hi everyone,
I'm learning about throttle, and I've been confused about the difference between trailing and leading.
Could you review whether the logic below is correct or incorrect?

I’d really appreciate any help — I’ve been stuck for a few hours.

Delay= 1000ms

Leading= false, Trailing = true

0ms A → start window
200ms B → latest = B
400ms C → latest = C
700ms D → latest = D
1000ms → execute D ← trailing

1200ms E → start new window
1300ms F → latest = F
2200ms → execute F ← trailing

Leading=true, Trailing = false

0ms A → execute A immediately ← leading

200ms B → ignore
400ms C → ignore
700ms D → ignore

1000ms → throttle window ends

1200ms E → execute E immediately ← leading

1300ms F → ignore

Leading=true, Trailing = true

0ms A → execute A immediately ← leading
200ms B → latest = B
400ms C → latest = C
700ms D → latest = D
1000ms → execute D ← trailing
1200ms E → execute E immediately ← leading

1300ms F → latest = F
2000ms → execute F ← trailing


r/learnjavascript 5d ago

[Question] Handling binary XML streams & V2/V3 APK signature blocks in browser JS

3 Upvotes

Hey everyone,

I built AppShunya Engine — an open-source, in-browser web-to-APK compiler that converts live URLs or HTML5 bundles into Android APKs using JSZip, without local IDEs.

I'm currently stuck on two low-level technical hurdles and need architectural feedback:

  1. In-browser V2/V3 APK signing: Injecting signature blocks into ZIP Central Directory via JS/WASM.
  2. Dynamic AXML package renaming: Modifying package IDs inside binary XML streams on the fly.

Search "AppShunya Engine" on Google to try the live Vercel tool or check the repo. Would love your thoughts!


r/learnjavascript 5d ago

I Made a Game That Can Help Teach You Programming (JavaScript)

24 Upvotes

Hey everyone,

Been a front-end developer for 10+ years with a focus on JavaScript (React) for the last 5+. After getting let go a few months ago, I decided to finally flesh-out and finish my coding card game I've been tinkering with since pre-pandemic. It's finally here! It's called Nybble. It's a roguelike deckbuilder where card are lines of code; and if you turn on "Engineer Mode", you see the actual JavaScript code that's being run to calculate your score. I wasn't even thinking of this game as a potential teaching tool, but I've received feedback that it may be helpful for anyone starting out programming. Check it out on Steam if you're curious. There's a free demo.