Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.
- User can enter a search query into an
inputfield - User can submit the query. This will call an API that will return an array of books with the corresponding data (Title, Author, Published Date, Picture, etc)
- User can see the list of books appearing on the page
- For each item in the list add a link that will send the User to an external site which has more information about the book
- Implement a Responsive Design
- Add loading animations
You can use the Google Books API
The objective of Sales Receipts is to implement point-of-sale functionality for a merchant and to make a record of all sales in a database.
-
Developer should implement this app as a frontend application that uses the IndexedDB database in the browser to record all sales receipts.
-
Developer may implement the inventory of items available for sale as an array of objects in the application source. Each item should be defined with the following attributes:
- Item number (unique)
- Description
- Unit price
-
Developer should use her UI/UX skills to create a pleasant and efficient window layout that makes it easy for the user to purchase items and display purchase history.
-
The primary use case for a browser based database is to maintain state or status information that needs to persist across sessions, or as a work area for temporary data. For example, data retrieved from a server that must be reformatted or cleansed before it's presented to the user.
-
It is important to keep in mind that since the client-side browser environment cannot be secured you should not maintain any confidential or personal identifying information (PII) in a browser based database.
- User can see an purchase panel containing buttons for each item containing the item number, description, and unit price, as well as a 'Clear' and a 'Checkout' button.
- User can click an item button to make a purchase.
- User can see an field displaying the total sale amount incremented as items are purchased.
- User can see a reciept panel displaying the date and time of the sale, as well as all items selected for purchase. This includes the item number, description, and unit price.
- User can click the 'Clear' button to clear all purchases at any time before checking out.
- User can click the 'Checkout' button to complete purchase all selected items. The final total purchase amount will be added to the end of the reciept panel and all selected items will be added to the database.
- User can see the receipt panel cleared after all items have been added to the database.
- User can see a 'Daily Sales' and a 'Clear All' button at the bottom of the app window.
- User can click the 'Daily Sales' button to display all items purchased by all customers in the receipt panel along with the total of them all.
- User can click the 'Clear All' button to clear the receipt panel and delete the record of all purchases from the database.
- User can see an thumbnail image of the items on the item buttons.
- User can see the 'Clear' button replaced by 'Clear Entry' and 'Cancel All' buttons under the purchase panel
- User can click the 'Clear Entry' button to clear the last selected item from the receipt panel. This has the effect of unselecting that item.
- User can click the 'Cancel All' button to clear all purchases made before checking out.
- User can see an input field in the input panel the user may enter the name of the customer into when a purchase is made. The customer name will be added to all items purchased by that customer in the receipt panel and in the rows added to the database.
Create and store your notes for later purpose!
- User can create a note
- User can edit a note
- User can delete a note
- When closing the browser window the notes will be stored and when the User returns, the data will be retrieved
- User can create and edit a note in Markdown format. On save it will convert Markdown to HTML
- User can see the date when he created the note
2 3 Tier: 1-Beginner 4 5 You might not have realized this, but recipe's are nothing more than culinary 6 algorithms. Like programs, recipes are a series of imperative steps which, 7 if followed correctly, result in a tasty dish. 8 9 The objective of the Recipe app is to help the user manage recipes in a way 10 that will make them easy to follow. 11 12
13 14
- For the initial version of this app the recipe data may be encoded as a 15 JSON file. After implementing the initial version of this app you may 16 expand on this to maintain recipes in a file or database. 17 18
19 20
- User can see a list of recipe titles 21
- User can click a recipe title to display a recipe card containing the 22 recipe title, meal type (breakfast, lunch, supper, or snack), number of people 23 it serves, its difficulty level (beginner, intermediate, advanced), the list 24 of ingredients (including their amounts), and the preparation steps. 25
- User click a new recipe title to replace the current card with a new 26 recipe. 27 28
29 30
- User can see a photo showing what the item looks like after it has 31 been prepared. 32
- User can search for a recipe not in the list of recipe titles by 33 entering the meal name into a search box and clicking a 'Search' button. Any 34 open source recipe API may be used as the source for recipes (see The MealDB 35 below). 36
- User can see a list of recipes matching the search terms 37
- User can click the name of the recipe to display its recipe card. 38
- User can see a warning message if no matching recipe was found. 39
- User can click a 'Save' button on the cards for recipes located through 40 the API to save a copy to this apps recipe file or database. 41 42
43 44
- Using Fetch 45
- Axios
In the product landing page project you implemented a landing page to provide your users with information about a product and to hopefully increase your sites conversion rate.
The goal of the Simple Online Store is to give your users the capability of selecting a product to purchase, viewing purchase information, adding it to an online shopping cart, and finally, actually purchasing the products in the shopping cart.
- Starting out you may implement your product inventory as an array of Javascript objects if you are developing in Javascript. For other languages feel free to choose the in memory solution of your choice.
- User can click on a
View Productsbutton on the Landing Page to display the Products Page. - User can see a card on the Products Page for each
Product showing the product thumbnail, name, price, a short description,
and a
Selectbutton. - User can see a Product Details page displayed when the
Selectbutton is clicked showing the same information from the product card, but also a unique product id, a long description,Add to Cartbutton, and aSee More Productsbutton. - User can see a confirmation message when the product is added to the shopping cart.
- User can click on the
See More Productspage to return to the Products Page. - User can see a
Shopping Cartbutton on both the Landing Page or the Products Page. Hint: a top bar might be a good common location for this button. - User can click on the
Shopping Cartbutton to display the Shopping Cart page containing the product id, name, price, and quantity ordered input box for each product previously added to the Shopping Cart. - User can see a total purchase amount on the Shopping Card that is calculated as the sum of the quantities multiplied by the unit price for each product ordered.
- User can adjust the quantity ordered for any product to adjust the total purchase amount.
- User can click a
Place Orderbutton on the Shopping Cart Page to complete the order. User will see a confirmation number when the order has been placed. - User can click a
Cancel Orderbutton on the Shopping Cart Page to cancel the order. User will see the product quantities and the total purchase amount reset to zero. - User can click a
See More Productsbutton on the Shopping Cart Page to return to the Products Page. If the order hasn't been placed yet this will not clear the products that have already been added to the Products Page.
- User can see an error message if the quantity ordered exceeds the "on hand" quantity of the product.
- User can specify a bill to and ship to address when the order is placed from the Shopping Cart Page
- User can see shipping charges added to the total purchase amount
- User can see sales taxes added to the total purchase amount
- Developer will implement the product inventory in an external file or a database.
There are plenty of eCommerce Site Pages out there. You can use Dribbble and Behance for inspiration.
FlashCards are a time tested technique used by students to review and test their knowledge on a particular subject.
This app is based on a knowledge base of questions and answers about a particular subject and randomly displays a card with the question and multiple answers. The objective is for the user to select the correct answer(s).
- User can see a single card, randomly picked from the "deck" displayed at any point in time
- User can see a question on the card and a list of four possible answers, each of which is identified by a letter.
- User can select an answer by clicking on it
- User can see an error displayed when the wrong answer is selected
- User can see a congratulations message when the correct answer is selected.
- User can click a 'Next Question' button to display the next flash card.
- For this app the knowledge base of questions and answers should be encoded in a JavaScript object.
- The possible answers display on each card should be randomly chosen from other flashcards.
- User can click a 'Results' button to display the tallies of correct and incorrect answers.
- User can click a 'Reset' button to reset the tallies of correct and incorrect answers.
- User can click a 'Shuffle' button to re-randomize the "deck"
- User can click a 'More Info' button to flip the flash card to see additional information. For example, detailed information about the subject of the question on the front of the card.
The definitive source for HTML/CSS/Javascript is MDN
Example Javascript questions and answers can be found at Brainscape.
Allow users to generate custom memes by adding text over an image.
- User can upload an image that will appear in a canvas
- User can add text in the top part of the image
- User can add text in the bottom part of the image
- User can select the color of the text
- User can select the size of the text
- User can save the resulting meme
- User can select the font-family for the text
- User can share the meme on social media (twitter, reddit, facebook, etc)
- User can drag the text around and place it wherever he wants on top of the image
- User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse)
Working with canvas is made very easy by the p5js library.
A currency converter is used to convert an amount in one currency to its corresponding value in another currency using their current exchange rate, for example it can be used to calculate the value of 100 US Dollars in Euros. Current exchange rates are usually provided by banks and other financial service providers, they also (in some cases) offer free and paid APIs for developers to get current and historical exchange rates between two or more currencies.
- User can enter up to 9 digits to represent the amount to convert in a source input field
- User can view a sorted list of available currencies and select the currency to convert from in a source drop-down list
- User can view a sorted list of available currencies and select the currency to convert to in a destination drop-down list
- User views the value (rounded to two decimal places) of the source amount converted to the destination currency in a single output field as soon as either the input value, the source currency, or the destination currency is changed.
- User must be alerted if the input is not a number
- User should be able to swap the values of the source and destination drop-down lists on the click of a button
Find your next movie or create your watchlist with this App. It include reviews, rating, actors and anything you need to know about the movie.
- This application will help users find their next movie to watch by showing helpful stats
- Resource needed for the project is movie api, examples include Imdb, MovieDB etc.
- User can see all the latest movie on the front page
- User scroll down to see all other movies according to release date
- User can click on any of the movie to go to their own separate page
- User can then see all about the movie ratings, about, actors present on each separate movie page
- User can create an account
- User can create their own watch list
- User can review movies
Surveys are a valuable part of any developers toolbox. They are useful for getting feedback from your users on a variety of topics including application satisfaction, requirements, upcoming needs, issues, priorities, and just plain aggravations to name a few.
The Survey app gives you the opportunity to learn by developing a full-featured app that will you can add to your toolbox. It provides the ability to define a survey, allow users to respond within a predefined timeframe, and tabulate and present results.
Users of this app are divided into two distinct roles, each having different requirements:
- Survey Coordinators define and conduct surveys. This is an administrative function not available to normal users.
- Survey Respondents Complete surveys and view results. They have no administrative privileges within the app.
Commercial survey tools include distribution functionality that mass emails surveys to Survey Respondents. For simplicity, this app assumes that surveys open for responses will be accessed from the app's web page.
- Survey Coordinators and Survey Respondents can define, conduct, and view surveys and survey results from a common website
- Survey Coordinators can login to the app to access administrative functions, like defining a survey.
- Survey Coordinator can define a survey containing 1-10 multiple choice questions.
- Survey Coordinator can define 1-5 mutually exclusive selections to each question.
- Survey Coordinator can enter a title for the survey.
- Survey Coordinator can click a 'Cancel' button to return to the home page without saving the survey.
- Survey Coordinator can click a 'Save' button save a survey.
- Survey Coordinator can open a survey by selecting a survey from a list of previously defined surveys
- Survey Coordinators can close a survey by selecting it from a list of open surveys
- Survey Respondent can complete a survey by selecting it from a list of open surveys
- Survey Respondent can select responses to survey questions by clicking on a checkbox
- Survey Respondents can see that a previously selected response will automatically be unchecked if a different response is clicked.
- Survey Respondents can click a 'Cancel' button to return to the home page without submitting the survey.
- Survey Respondents can click a 'Submit' button submit their responses to the survey.
- Survey Respondents can see an error message if 'Submit' is clicked, but not all questions have been responded to.
- Survey Coordinators and Survey Respondents can select the survey to display from a list of closed surveys
- Survey Coordinators and Survey Respondents can view survey results as in tabular format showing the number of responses for each of the possible selections to the questions.
- Survey Respondents can create a unique account in the app
- Survey Respondents can login to the app
- Survey Respondents cannot complete the same survey more than once
- Survey Coordinators and Survey Respondents can view graphical representations of survey results (e.g. pie, bar, column, etc. charts)
Libraries for building surveys:
Some commercial survey services include: