Project Description
Background
In this project, students will spend time researching, exploring, planning, and developing a replica of an app screen they’ve used previously. They should try their best to mirror the features of the chosen screen and think about the functionality that should be built into the app in order to clearly determine which topics they still need to learn when it comes to app creation.
Your Task
In this project, you’ll choose an app to recreate. You’ll only be creating one screen of the app, so try to find an app that includes the following:
- buttons
- some sort of text input
- an interesting layout
Plan the Layout and Functionality
Once you’ve chosen an app screen to recreate, take some time to plan the layout of the screen and how different components will interact.
Create a sketch of the screen and label any dimensions you think will be helpful (remember that you’ll be writing your program using either flex or ‘dimensions’ to create a responsive design.)
List any images you may need to include to complete this app screen. Do some research to find these images (adding the term ‘transparent’ to your search will usually give you .png images with transparent backgrounds which look much nicer in final designs!) and record any links you may need. The next item is a video that will show you step-by-step how to upload images through codehs to use in your program.
Think about and respond to these questions to make a plan before you begin coding:
- How do different components interact with one another?
- What happens when I click a button?
- How can alerts be used to mimic this functionality?
- Should anything on the screen change as a user types a value?
- How can the functionality of this app be altered based on the skills I currently have?
- Insert a link to your planning sketch here (once you’ve created a sketch of the layout, take a picture and upload it through codehs to create a link to share.)
Lastly, you’ll put it all together by adding functionality to your app screen layout! Copy and paste the code you wrote in the last exercise and add in the functionality of each button and text box. Use customized alerts to show what would happen in your app as each button is pressed.
