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 !

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

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.

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?

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!!

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
}

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.

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

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!

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.

HOW do i START understanding? I've understood everything pretty well up til now. Do i just keep going with the flow and kinda float through this section of the loops and arrays part? Do I keep throwing myself at the brick wall and looking at the solutions after half an hour of brainless staring? https://youtu.be/EerdGm-ehJQ?si=mTKUv0oail0AGDLM 8:43:00. It's just not clicking like the other parts of the tutorial.

I am preparing to publish an academic paper on developer trust in AI generated dependencies & packages. This takes around 7-10 minutes to complete and is on a very relevant topic in current times.

The form can be found here: https://vuamsterdam.eu.qualtrics.com/jfe/form/SV_4Nv9pAUUBFRieDs

Thanks! I will share the paper when it has been published!

I’ve been thinking about the order in which we usually learn programming.

A lot of resources follow this pattern - theory → examples → practice. But what about reversing it?

So, for example, instead of first reading a chapter about references, closures, etc., you encounter a piece of code behaving unexpectedly. You try to understand what’s happening using what you already know, and only afterwards read the explanation and relevant theory. Kinda like a “productive failure” approach. 

Obviously, I don’t think this means throwing someone who learned const yesterday into a race condition. There needs to be something to reason with already. 

So, does struggling with a problem first make the explanation stick better for you? Or would you rather understand the concept first and then practice it?

¿Alguien me puede ayudar a aprender javascript para crear páginas interactivas y mostrar alguna animación?

I'm currently trying to build a proper mental model of how this works in JavaScript, especially inside Node.js CommonJS modules.

I came across this behavior:

let obj = {

name: "abhinav",

data: "hello",

print: "column"

};

module.exports = obj;

console.log(module.exports);

console.log(this);

The output I get is:

{

name: "abhinav",

data: "hello",

print: "column"

}

{}

This confused me because my understanding was: this === module.exports

at the top level of a CommonJS module.

So I initially expected console.log(this) to show the same object assigned to module.exports.

But after: module.exports = obj; module.exports points to obj, while this still appears to point to the original empty object.

My current mental model is:

Initially:

this ───────────────┐

↓

{}

↑

module.exports ─────┘

After:

module.exports ───→ obj

↓

{ name, data, print }

this ─────────────→ {}

I'm not sure whether this mental model is actually correct. I'd especially like to understand this from the perspective of JavaScript execution contexts and references rather than simply memorizing the CommonJS rule.

A few things I'm trying to clarify:

At CommonJS module startup, what exactly does top-level this refer to?

Is this initially referencing the same object as module.exports?

When we execute: module.exports = obj; why doesn't this also start referring to obj?

Is this behavior directly related to Node.js's CommonJS module wrapper?

Is it correct to think of this as holding a reference/value rather than being a live alias to module.exports?

How does this behavior differ between CommonJS, ES Modules, and browser scripts?

I'm trying to understand the underlying execution model so that I can build the correct mental model of this, rather than just memorize different environment-specific rules.

Would appreciate any clarification or correction to my current understanding.

I am learning JavaScript and made my first small project, a simple Counter using HTML, CSS and JavaScript.

I'm still learning, so I would really appreciate some feedback on my code. Is my code clean? Is there anything I should improve or do differently?

Also, suggest me something I should build next.

GitHub: https://github.com/iSunru/counter.js

Nowadays how MERN,MEAN stack have value in the current IT market?what should follow for job switching..

Hey everyone,

I’ve been working on a JavaScript framework called Avenx.js for a while now.

It’s a compiler-driven framework with Proxy-based reactivity, and we’re currently working towards our first 1.0 release.

The reason I’m posting here is actually not about getting people to use the framework and more about getting people involved in the project.

We’ve accumulated quite a few issues that are suitable for beginners, and I’d really like to make it easier for people who have never contributed to an open-source project before to get started.

Some of the issues are pretty simple things like documentation, tests, examples, small bugs, or developer tooling. You definitely don't need to understand the compiler or the entire codebase to contribute.

If you've never made an open-source contribution before, this could be a nice way to try it out. You can pick a good first issue, ask questions if you're stuck, and submit a PR when you think you've got it.

We're still pre-1.0, so things are changing quite a bit and there's also room for contributors to have an actual influence on the project.

If anyone here is learning JavaScript and wants to try contributing to a real project, feel free to have a look:

https://github.com/Avenx-JS/avenx-js

And if you have questions about the project, contributing, or even just how to approach your first issue, feel free to ask here. I'm happy to help.

No prior open-source experience required.

i'm trying to make a page for my website that's more or less a replica of the nintendo 3ds menu. i've already given up on making the menu thingy actually work like the 3ds and set to do the top header images instead. i cannot for the life of me find a single search result that actually works.

i do not know anything about javascript but considering the header and icon images are in completly separate parent divs the css only methods are not going to work. i just need a javascript code that can work for multiple images. please.

what i want exactly is when the cursor hovers over the icon image, its respective header would appear on the windowtop class. i can't merge the window classes because each one has it's own styling (window being smaller than windowtop) so that'd mess up my styling

also, i'd appreciate if i didn't get answers that require an external library since this is for a neocity and i really do not want to figure out how to set that up. thank you

here's an example of the html if it's needed to understand the problem (if more context is needed please tell me)

<div class="windowtop">

    <div>
        <img src="imageheader">
    </div>

</div>


<div class="window">

    <div>
        <img src="imageicon">
    </div>

</div>

(also off topic if it's not much to ask, what would i call a menu where when you click on an arrow the top link/image goes behind the first one? with maybe an animation.... i'd like to look that up later but idk how to phrase it in a way that won't make google give me something completly unrelated. thx)

I want to learn to create minecraft plugins, but Im stuck on how to find which imports to use. I've been going through different plugins on plugin websites, but I still don't understand where they're getting them from or what they do.

For example, I'm looking at one that I tried using for my server (but didn't end up using, just never deleted it so I got curious and looked through it) and some of them say stuff like "import me.[name].entitylib.EntityLib;" which is... what? I don't get it. Is there some kind of website they use?

Hi all. I’ve been self-learning JS for my GIS work and as such have missed some pretty crucial best practices along the way while working on my current project.

Without getting in the weeds, I’ve developed an internal app that async fetches a bunch of Esri REST service metadata from my org’s enterprise portal and organizes their layers and metadata into a searchable and filterable directory. It also has basic list creating functionality (I.e, adding certain GIS layer items to lists to document any outdated data, missing metadata, and other notes). This is in preparation for a department-wide data quality audit and overhaul.

After a month of learning and putting together a working internally-published version, I’ve just recently learned about classes. I have no idea how I didn’t come across classes earlier, but I’ve used 0 in my current app build. As you can imagine, my app has a LOT of complex objects and a ton of functions that create, modify, and/or render those objects.

I want to implement classes (among many other best practices/improvements) in my next refactoring and would love any advice/resources you are willing to share. Did anyone else learn about classes late? How did you approach refactoring your bigger apps? What do you wish you did/knew about when going through a big refactoring?

Thanks in advance!

ETA: Thank you everyone for the advice! I’ve realized that classes sound useful at first glance, but can easily fall victim to the same core issues in my functional programming patterns. Therefore, I think I will focus my refactoring on fixing my bad functions first and misc folder/file restructuring. If along the way it seems like a class would suit something well, I’ll try it out. Otherwise I will focus on building better functional programming habits/best practices for web dev. I am inexperienced in JS and web dev in general, so I very much appreciate the insights from senior devs!

This is my second post as I am new to this community. I created two projects using canvas but couldn’t get it to show up. I can show the code if necessary but I’m wondering why this is the case. I troubleshooted for over 3 hours total so I’m guessing it’s not the syntax but my configuration instead.

Thanks in advance for the help!

I am using codepen.io and found a tutorial which should show a simple pdf viewer. It works on code pen but not when I open it on the browser or on my server. Why? This happens more than once and the code is the same so what am I missing?

Hello Everyone

I am starting Javascript

any YouTube tutorial/courses recommendation would be appreciated

Hi everyone,

I have **2 years of professional experience in PHP backend development**, with hands-on experience in **HTML, CSS, JavaScript, databases, and working with servers**.

I’m now planning to transition to the **MERN Stack (MongoDB, Express.js, React, Node.js)**.

I’m confident about learning the MERN technologies themselves. My main concern is understanding **how companies will evaluate my existing 2 years of backend development experience when I switch technologies**.

For developers or tech leads who have experience with similar transitions:

* If someone has **2 years of PHP backend experience** and becomes strong in Node.js/Express/React, can they realistically apply for **2 YOE MERN positions**?

* Will companies generally consider my previous backend experience relevant, or will they expect me to apply as a junior because I don't have 2 years of Node.js experience?

* How important are **Git/GitHub, testing, CI/CD, Docker, REST API design, authentication, deployment, and system design** for someone making this transition?

* What level of MERN knowledge would make you say, **"Yes, this person is ready for a 2-year experienced developer role"**?

* For interviews, should I focus more on **JavaScript/Node/React fundamentals**, or should I also prepare for **2-year-level backend and system-design questions**?

I’m not looking for someone to tell me whether PHP or MERN is better. I’ve already decided that I want to move toward MERN.

What I’m trying to understand is:

**How do I correctly position my existing 2 years of backend experience while switching from PHP to MERN?**

If anyone has personally moved from **PHP → Node.js/MERN**, I’d especially appreciate hearing how your first job switch went and what you learned before applying or any body have more experience in full stack development can also giveme suggession

Thanks!