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

2022-04-18 · 2 min

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

2022-04-12 · 3 min

#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

#2 eCommerce Component (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/2-eCommerce-component Live Demo: 02 - E-Commerce Component || Advent of JavaScript Preview: 2. Details Users should be able to: View the plates on the left side of the screen and add them to your cart on the right side. When there are no plates within your cart, you should see a message that says, “Your cart is empty.” When a plate is added to your cart, the Subtotal and Totals will automatically update....

2022-01-06 · 4 min