The scope of project to will be to create a badge list with a high level search bar that is similar or exactly to that of the Amazon Web Services Intro, the example/image is the image below.
We will need elements like images, title, description, and the name of the creator of the badges. To create the badges, the title of the badges, and the names of the creators will be needed so that they are able to be searched on the search bar. The title, description, and the names will be created using a String. The information we will need from the backend to make the list work is to use something that stores the data so that the badge can be search on the search bar like the name of the creator and the title of the badge can be searched. This is to allow the search bar to be functional and working instead of being static. Another information about backend we will need is the structure and API in order to create a more consistent and better structure performing badge list.
Some lines of code we can apply to the project can be this
We can use this snip of code in the .json file to assign different properties with different assigned values to the badges like the badge images. This concept is better then hardcoding in different elements into our design.
We can use this snip of code to read the .json file. This concept creates an array that is filled with information from the file. This can be used to assign values to different elements.
The project itself is to create something similar to the Amazon Web Services Intro which can be seen in the picture above in the beginning. There will be 5 to 10 badges at least in the badge list which will all have different images, names, and creators this is to make each of the badges unique from each other. They will all be able to be searched. The badges will be named based on what we make the badge list on. We are still deciding on the concept of the badges which is to be determined. How we will initially conceive on attacking the problems will be through trial and error. When we get an error, we will talk together and see what we can do to fix it, we can use the power of the internet and google to find solutions. We can also ask the TA's and Professors for help even asking other groups can help.
The current progress made to the project is slow but we are getting there. The image below shows the progress of the badge list. It does render the the badge and as well collapse it when the plus is click on and goes back when click on again
Since, the drop down works and we were able to make one badge. We used the same method to create 10 different badges. The image below shows a few of the badges.
We used API in order to create the badge list information like the title, image, description, the creator, and many others. The API also allows us to search various parts of the badges to help quickly filter out the information to get the badge we are looking for.
The search bar does allow inputs but there is still no output being outputted. The image below shows that, it is still disorganized as the formatting is not fixed but will be fix, the search bar is there and can have a input but does not show a output
The search bar now works and is more organized compare to before. The image below shows the current search bar
After weeks of working on project 2. We have progress pretty far into the project. The image below shows our final progress on the project. The badge list is there, the search bar works. The simple icons kind of work and kind of do not.
This is the final product of our project that we have created it has a search bar and collapses when clicked on. It is similar to the image below but with a search bar added to filter out and search
Oldest comments (0)