advent of js

#14 Calendar Picker (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/14-calendar-picker Live Demo: 14 - Calendar Picker || Advent of JavaScript Preview: 2. Details Users should be able to: view calendar with correct days with the current day highlighted navigate through different months 3. Coding Setup React template Please be aware: this approach is fine for learning and creating simple demos but is not suitable for production....

#13 Custom Modal - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/13-custom-modal Live Demo: 13 - Custom Modal || Advent of JavaScript Preview: 2. Details Users should be able to: Click on a point on the image, that triggers the modal Click on the x within the modal to close the modal 3. Coding This is a simple one. style.css: .hidden { display: none; } script.js: const showBtn = document....

#12 Rock, Paper, Scissors (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/12-rock-paper-scissors Live Demo: 12 - Rock, Paper, Scissors || Advent of JavaScript Preview: 2. Details Users should be able to: play the game and see the results 3. Coding Setup React template Please be aware: this approach is fine for learning and creating simple demos but is not suitable for production. index.html: <!DOCTYPE html> <html lang="en"> <head> ....

#11 Accordion - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/11-accordions Live Demo: 11 - Accordions || Advent of JavaScript Preview: 2. Details Users should be able to: Click on a collapsed question to expand it and view the answer. Click on a collapsed answer to collapse it and hide the answer. 3. Coding Coding logic: Toggle the expand class in li element when clicking the question....

#10 Four Digit Code - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/10-4-digit-code Live Demo: 11 - Four Digit Code || Advent of JavaScript Preview: 2. Details Users should be able to: type in a digit and automatically be taken to the next input paste in a 4 digit code 3. Coding 逻辑如下：当 input value 的 length 达到上限（maxlength="1"）时，自动 focus 到下一个 input。对 input 进行粘贴时，将粘贴的字符串拆成单独的字符数组，用循环按序设置为 input 的 value。（详见：Element: paste event - Web APIs | MDN）额外的 validation：...