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....
教程：FullStackOpen2022/Part 3 - 用NodeJS和Express写服务端程序
前端部分：FullStackOpen：phonebook app / front-end 要点总结
后端部分：FullStackOpen：phonebook app / back-end 要点总结
App：React Phonebook App
1. 使用 MongoDB Atlas 创建 MongoDB MongoDB 是一个所谓的文档数据库。文档数据库在组织数据的方式以及它们所支持的查询语言方面不同于关系数据库。文档数据库通常被归类为NoSQL的术语集。
我们选择的 MongoDB 提供者是 MongoDB Atlas。
步骤：
创建并登录 MongoDB Atlas 账户。 创建一个集群（Create/Build a Cluster）。 选择任一 Free Tier 的提供商和地区。 等待 Cluster 准备好，这大约需要几分钟，在 Cluster 准备好之前不要继续。 在 Database Access 中为数据库创建用户凭据，用来让应用连接到云端数据库。 授予用户读写数据库的权限。 在 Network Access 中定义允许访问数据库的 IP 地址。为了方便，可以允许所有访问的 IP 地址：0.0.0.0/0。 回到 Cluster，点击 Connect 连接数据库，选择对应驱动，获得可以添加到应用的 MongoDB 客户端库的数据库地址。例：mongodb+srv://fullstack:<PASSWORD>@cluster0-ostce.mongodb.net/test?retryWrites=true 2. 使用 mongoose 连接数据库 可以通过官方 MongoDb Node....
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：...
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="....