Solidify what you’ve learnt by building cool simple things you can showcase
Practice makes perfect. We’re getting you ready for all the fun projects in the coming semester
- Build any one of the below projects as a group / team, using Repl.it
- Vanilla HTML/CSS and Javascript is sufficient to build these projects as fully functional apps, so don’t use any fancy libraries or frameworks. Doing so can cost you some points!
- It’s a healthy competition amongst teams, so try your best to make your application functional, clean and presentable
As a team, decide which of the below projects you are excited about, then go ahead and build it.
Make sure to always update the
app.propertiesfile within the project codebase to reflect the choice of project as well as details of the team Rep and all the members working to build it.
This is the solution to the Phonie Challenge Holiday Circle Hackathon set by Altschool Africa.
A user is filling a form in your web application and they are required to enter their phone number into a form field.
After typing the phone number into the form field, the UI indicates that it is an MTN or GLO or Airtel or Etisalat number e.t.c (e.g if its an MTN line, display the MTN icon/logo somewhere beside the form field)
- Add validation - Use the
patternattribute of the HTML form field to restrict phone numbers to a certain carrier, e.g restrict to only Airtel such that entering an MTN/GLO number would be invalid - Support +XYZ country codes (e.g +234 for Nigeria) - Still detect the carrier even if the user prefixed the number with their +XYZ country code
- Show auto-completion - Show suggestions as the user starts typing the phone number. E.g once they type 080, show them that 0803 and 0806 and other possible matching variants of the carrier
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Vanilla js
- Website - TheDeola
- Frontend Mentor - @TheDeola
- Twitter - @deolacodes
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent