Day 31 of learning MERN Stack

Hello Dev Community! 👋 It is officially Day 31 — stepping straight into my second month of documented full-stack engineering! Fresh off the 30-day milestone yesterday, I decided to keep the engineering momentum high by building a classic browser game: Rock, Paper, Scissors using HTML5, CSS3, and vanilla JavaScript. After mastering API integration yesterday, today was about refinement—handling dynamic score states, tracking user choices, and creating a clean automated opponent engine. 🛠️ The Core Logic Architecture To make the game interactive and clean, I divided the code structure into distinct logical components: 1. Capturing User Selection I assigned the choices (rock, paper, scissors) to clickable image/div nodes in the layout. Instead of writing repetitive lines, I used a forEach array loop to attach an addEventListener("click", ...) to each choice, pulling the user's explicit selection instantly via DOM attributes. 2. The Computer's Automated AI Brain Since a computer cannot pick words, I mapped out an array of strings: ["rock", "paper", "scissors"] . I then utilized JavaScript's math utility library to generate a randomized index number: javascript const genCompChoice = () => { const options = ["rock", "paper", "scissors"]; const randIdx = Math.floor(Math.random() * 3); return options[randIdx]; };