https://github.com/jdegand/windbnb
Devchallenges - Legacy - Frontend Developer - Windbnb
https://github.com/jdegand/windbnb
devchallenges devchallenges-legacy react
Last synced: about 1 year ago
JSON representation
Devchallenges - Legacy - Frontend Developer - Windbnb
- Host: GitHub
- URL: https://github.com/jdegand/windbnb
- Owner: jdegand
- Created: 2022-06-13T17:46:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-06T02:14:59.000Z (over 1 year ago)
- Last Synced: 2025-01-22T09:12:41.931Z (about 1 year ago)
- Topics: devchallenges, devchallenges-legacy, react
- Language: JavaScript
- Homepage: https://jdegand.github.io/windbnb/
- Size: 936 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Windbnb
## Table of Contents
- [Overview](#overview)
- [Built With](#built-with)
- [Features](#features)
- [Useful Resources](#useful-resources)
## Overview
### Built With
- [React](https://react.dev/)
## Features
This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://web.archive.org/web/20240417023514/https://legacy.devchallenges.io/challenges/3JFYedSOZqAxYuOCNmYD) was to build an application to complete the given user stories. **Note**: The previous design document may be incomplete, as you need to find an archived version of the challenge as all `legacy` challenges have had their documentation removed from DevChallenges.
## Useful Resources
- [CodeSandbox](https://codesandbox.io/s/heuristic-shamir-uvkxc) - modal with form
- [CodeSandbox](https://codesandbox.io/s/currying-breeze-8llqgv) - locked modal
- [Dev.to](https://dev.to/link2twenty/react-using-portals-to-make-a-modal-2kdf) - react portals
- [Stack Overflow](https://stackoverflow.com/questions/63074577/close-modal-popup-using-esc-key-on-keyboard) - esc key to close modal
- [Stack Overflow](https://stackoverflow.com/questions/59017954/react-close-modal-on-click-outside#:~:text=But%20if%20you%20click%20on,body%20will%20close%20the%20modal.) - click outside modal to close
- [YouTube](https://www.youtube.com/watch?v=eWO1b6EoCnQ) - click outside to close hook
- [YouTube](https://www.youtube.com/watch?v=mwb6zgs9peU) - click outside to close
- [Blog](https://javascript.plainenglish.io/using-forwardref-with-react-hooks-9d0d096ad810) - forwardRef
- [YouTube](https://www.youtube.com/watch?v=f76ZAvCDWZI) - detect outside click of a modal
- [Stack Overflow](https://stackoverflow.com/questions/54989513/react-prevent-scroll-when-modal-is-open) - prevent scroll
- [Microsoft Forum](https://social.msdn.microsoft.com/Forums/en-US/d208e967-868c-4dde-8e3e-a549b3d2bdcd/problem-when-pressing-enter-key-in-a-textbox?forum=aspwebforms) - default button
- [Stack Overflow](https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined) - first button was triggered when pressing enter when input focused. That caused my guests panel to display. I had the guest section as a button.
- [Stack Overflow](https://stackoverflow.com/questions/7060750/detect-the-enter-key-in-a-text-input-field) - detect enter key
- [Stack Overflow](https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) - prevent users from submitting a form by hitting enter
- [Stack Overflow](https://stackoverflow.com/questions/12692089/preventing-double-borders-in-css) - double borders
- [Codepen](https://codepen.io/dcode-software/pen/oNeyjeR) - button group
- [Stack Overflow](https://stackoverflow.com/questions/12546499/tint-image-using-css-without-overlay) - overlay
- [Idea Base Kent](https://ideabasekent.com/wiki/adding-image-overlay-tint-using-css) - image overlay
- [CSS Tricks](https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/) - prevent page scrolling