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....
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....
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> ....
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....
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:...