App Flow Sketch
The app flow shows the user's journey through the Life on Land application. It shows what the user sees, what they click, and what happens next.
Home
User opens the Life on Land app.
Find Activities
User searches for local conservation activities.
Choose Activity
User selects an activity such as tree planting.
View Details
User reviews the activity information.
Join
User chooses to participate.
Confirmation
App confirms the user's registration.
Low-Fidelity Prototype
The Home screen introduces the Life on Land app and gives users quick ways to learn about forests, wildlife, habitat protection, and local conservation activities.
Life on Land
Explore ways to protect nature and make a difference in your community.
Learn about protecting forests, wildlife, and natural habitats.
Multi-Screen Prototype
Life on Land
Explore ways to protect nature and make a difference in your community.
Topic
Topic
Topic information.
Local Conservation Activities
Activity
Activity:
Location:
Purpose:
What to Bring:
Description:
Join Activity
You are ready to participate in:
You're Registered!
Your participation in this activity has been confirmed.
Thank you for helping protect life on land!
Core Function Draft & Function Mapping
Action: Navigate Through Conservation Activities
The main function allows users to move through the Life on Land activity process from Home to Activities, then to the selected activity details, Join, and Confirmation.
updatePage(screenId)
Hides all screens and displays the selected screen.
showTopicDetails(topic)
Loads different information when the user selects Forests, Wildlife, or Habitat Protection.
showActivityDetails(activity)
Loads the information for the activity the user selected.
classList.remove("active-screen")
Hides the current screen.
classList.add("active-screen")
Shows the selected screen.
Topic Mapping
- 🌲 Forests → Forests details
- 🐾 Wildlife → Wildlife details
- 🌿 Habitat Protection → Habitat Protection details
Activity Mapping
- 🌱 Tree Planting → Tree Planting details
- 🧹 Community Cleanup → Cleanup details
- ♻️ Recycling Event → Recycling details
- 🐦 Wildlife Protection → Wildlife details
JavaScript Code Generation
Prompt Used
Summary of Work & Iteration
Project Link
Project Link: CodeCraft Works Web Studio Project
What We Built
We built a Life on Land multi-screen application prototype using HTML, CSS, and JavaScript. The prototype includes a Home screen, topic information, Find Activities screen, activity details, Join screen, and Confirmation screen. Users can select Forests, Wildlife, Habitat Protection, Tree Planting, Community Cleanup, Recycling Event, and Wildlife Protection.
Challenges & Learnings
One challenge was that the Forests, Wildlife, and Habitat Protection buttons were not connected to the Multi-Screen Prototype. We fixed this by creating a JavaScript topic data object and a showTopicDetails() function. Each button now displays its own information.
Demonstration of Iteration
We started with a simple Home screen and improved it by adding Forests, Wildlife, and Habitat Protection buttons. We then connected each button to a separate topic screen. Users can now learn about each conservation topic and move from the topic screen to local conservation activities.
This iteration helped turn the Home screen into a more functional Life on Land prototype and showed how JavaScript can respond to different user selections.