Feature Datepicker
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 50/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- frontend
Research direction
Start in the booking table component and review the js-datepicker basic usage guide linked in the issue. Add the package, give the check-in and check-out inputs distinct IDs, and create a picker for each. Done means a date picker appears when either input is clicked.
Written by the indexing model from the issue text.
Description
28. Date picker
Instructions: Add the js-datepicker package to your project using npm install, and import it at the top of your booking table component. Add different IDs to your 'check in date' and 'check out date' <input> elements, then create two date pickers using const checkInPicker = datepicker(YOUR_ID) (where YOUR_ID is the ID you assigned to your check in/check out date elements).
Hint: Read the js-datepicker usage guide
Test:
The date picker appears when you click on the 'check in date' and 'check out date' input elements.
Reflection:
Using js-datepicker in this exercise allows you to practice installing and working with packages in JavaScript.
Packages contain new functions and properties to work with that may not be available in native JavaScript/HTML. Using packages can often save time instead of writing your own functions, as you are importing code that someone else has written. However, this can have downsides:
- not all packages are high quality
- some may have bugs or may reduce accessibility by recreating native elements
(js-datepicker recreates HTML's native datepicker element)
Think about some of the code you have written in this project. Are there any packages available that might have helped you to complete the features?
For example, #26 used validation. Searching npmjs.com for 'validate' shows multiple packages, such as 'validator' and 'Validate'.
Open both of these packages in your browser, and consider the following questions:
- Is it clear what this package does? Will it solve my specific problem better than writing my own code?
- Do I trust that the code in this package is safe to run on my machine? Do other people trust this package? (Hint: look at weekly downloads, last update, dependents, and visit the repository)
- Is this package accessible? Will it work on all browsers?
- If I decide to use this package and it breaks, will I know how to fix it or replace it?
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 28
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from CodeYourFuture/React-Module-Project
-
♟️ Dependent ticket 🏕 Priority Mandatory 🐇 Size Small 📅 Week 3 📅 Week 4
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
🏕 Priority Mandatory 🐂 Size Medium 📅 Week 4 🧩 Feature
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Feature Search State Open🐂 Size Medium 📅 Week 3 🧩 Feature
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Feature Active Row Open🏝️ Priority Stretch 🐂 Size Medium 📅 Week 2 🧩 Feature
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
🏕 Priority Mandatory 🐇 Size Small 📅 Week 2 🧩 Feature
Difficulty 1/5 Under an hour Newbie friendliness 68/100
All issues in CodeYourFuture/React-Module-Project
Similar issues
-
ai-observability bug team/ai-observability
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
AllTheMods/ATM-10-L#19 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
SignalK/n2k-signalk#345 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
JuliaPluto/PlutoPlotly.jl#72 ·