Random Tech Notes

一个笔记定位的技术博。

#9 Image Carousel (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/9-image-carousel Live Demo: 09 - Image Carousel || Advent of JavaScript Preview: 2. Details Users should be able to: toggle left and right through the image thumbnails click an image to select it manually 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="....

2022-01-14 · 2 min

#8 Weather API (React.js) - Advent of JS

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

2022-01-14 · 3 min

#7 Tip Calculator - Advent of JS

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") ....

2022-01-13 · 1 min

#6 Range Slider - Advent of JS

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

2022-01-08 · 1 min

#5 Multiple Checkboxes - Advent of JS

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

2022-01-08 · 1 min