medhatdawoud / words-frontend Goto Github PK
View Code? Open in Web Editor NEWFrontend site for words application to learn any language words with pictures
Frontend site for words application to learn any language words with pictures
As a use i shouldn't be able to add any random text to the input of the image url, i should get a hint that I've entered invalid URL
on save it's only closing the details and not resetting the form
As a user i should be able to login with facebook and twitter through the login/registration page
Design: TBD
As a user i should be able to view my profile with my basic information in it.
with a side menu including:
design: TBD
Add a label beside the search bar to indicate the number of the viewed words out of the whole number based on the search like:
display 20 out of 300 words
create this custom validator to check the minimum count of a given field and use it for the multicomponent
As a user i should be able to delete my words
this component should be called for example limit-length
and should take some values from the attributes sent like data-max-length
that take number and data-show-countdown
that take boolean value,
pay attention to be tested in both description (300) and example (100) fields for words, and to be reusable not to have any specific data inside it, make it generic as much as possible.
Implement each section like "add word" and the words list each with the height of the viewport so the user wouldn't use the browser scrollbar by any mean
To Reproduce:
focus on word field then switch to the pronounce field, no validation errors appear but if you go back to the word field and write something the validation error of require appears for the pronounce field
if you open the Vegetables word for edit you can find that it has tag and synonym but when searching with any of them they are not working
All labels and text that appear to the user in the project should come from localisation files, so it should be easier later on to change language or change messages for any purpose
the search box and the sorting dropdown should look better
Useful links:
the words list should look much better, the boxes should be justified and fill the whole width with keeping the same ratio as a square
As a user I should not be allowed to submit the add word form except with the following validations:
About the error messages, it should be all in localisations so we can change them later or add different language easily, for simplicity add any message for now that express the error
As a user I should be able to login or create an account easily.
Design: TBD
as a user i should be able to load only for the full screen and by scrolling i should be able to load more
As a user i should have the ability to search in the words I've added by:
the importing of the vendors' files should be directly to the angular-cli.json
file not to a sass file, add some structure for the generic styling stuff, and set a naming convention for classes, variables, mixins, ... etc
As a user i should be able to mark some words as favourite and remove it from favourite
Design: TBD
As a user i should be able to switch between pages, for now we don't have except the all words page, but later on we will have more, and the login information.
the bar should include:
add implementation for the save word in the update state when the word has Id already
As a user i should not be allowed to click add when it's empty input in multi select controls
Expected: the action to open the modal shouldn't be on the whole container or at-least exclude the button of edit
we need to have a separate custom component for the modal that take all the required information as params and return the required modal, then we don't need to copy/paste the modal each time we need to create a new one
As a user i should not be able to add a duplicated word, so as a solution we should provide the user with such auto complete for the word he/she is writing so if he found the word he can add what ever he/she wants and if not he can continue adding new word.
the autocomplete should not bind the word directly, it should appear like a dropdown list below the input control and if the user click on a word from the search list, then it should be bind to the form with all the data.
the user should be able to move between the search list with the keyboard arrows (up/down) for accessibility reasons.
the pronounce input shouldn't accept any characters except (alphabets and -)
check the below requirements first @mahaelbasuony
The submit button should be enabled so the user when he click it, all the validation issues show up
words should be sortable with like a dropdown list of the options that can be sorted with, for now we need to sort them with only desc and asc orders, as we need to add in the top of the list a drop down list has 2 options as follow
[
{'label': 'Newest first', 'value' : 'desc'},
{'label': 'Oldest first', 'value' : 'asc'}
]
Run npm run lint
and fix all the list of issues, afterwards make sure to run this command each time before commiting
make the add word form by default hidden in the right hand side and a button appear to open it, and it should slide from right to add a form and collapse it again after adding a word
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.