1. Overview Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/8-weather-api
Live Demo: 08 - Weather API || Advent of JavaScript
Preview:
2. Details Users should be able to:
view weather for the upcoming week 3. Coding Setup React template index.html:
<!DOCTYPE html> <html lang="en"> <head> ... <link rel="stylesheet" href="./styles.css" /> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div class="wrapper menu" id="wrapper"></div> <script type="text/babel" src="./script.js"></script> </body> </html> script....
1. Overview Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/7-tip-calculator
Live Demo: 07 - Tip Calculator || Advent of JavaScript
Preview:
2. Details Users should be able to:
calculate tip based on tip percentage, bill amount, and number of people 3. Coding This is also an easy one.
const calculateAmount = () => { const tipPer = document.querySelector('input[name="tip"]:checked').value.slice(0, -1) * 0.01; const bill = document .getElementById("bill-amount") ....
1. Overview Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/6-range-slider
Live Demo: 06 - Range Slider || Advent of JavaScript
Preview:
2. Details Users should be able to:
Move the knob on the range and the dollar amount above it will update. 3. Coding This is an easy one. Just pay attention to the difference between oninput and onchange (Read more: onchange vs. oninput for Range Sliders)....
1. Overview Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/5-multiple-checkboxes
Live Demo: 05 - Multiple Checkboxes || Advent of JavaScript
Preview:
2. Details Users should be able to:
See the list of podcast episodes Check one episode, shift-click to select all the episodes in between 3. Coding 大致步骤如下：
读取全部的 checkbox DOM。 设置 lastChecked，用于记录上一次 check 的 checkbox。 当用户 check 某个 checkbox 时，检测是否摁着 shift 键，若是，则用一个遍历将 lastChecked 和当前 checkbox 之间的 checkbox 全部 check。 const checkboxes = document....
1. Overview Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/4-computer-keyboard
Live Demo: 04 - Eyes on the Screen || Advent of JavaScript
Preview:
2. Details Users should be able to:
See the computer keyboard centered on the page A random letter will start to jiggle. The user should type the same key that’s jiggling and it will stop. A new, random key will start jiggling 3. Coding 逻辑大致如下：...