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.
Local Conservation Activities
Tree Planting
Help plant trees and improve local natural habitats.
Tree Planting Activity
Activity: Community Tree Planting
Location: Local Community Park
Purpose: Support forests and wildlife habitats.
What to Bring: Water, gloves, and comfortable clothing.
Join This Activity
You are ready to participate in the community tree planting activity.
You're Registered!
Your participation 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 the Home screen to confirmation.
updatePage(screenId)
Hides all screens and displays the selected screen.
querySelectorAll(".screen")
Finds all application screens.
classList.remove("active-screen")
Hides the current screen.
classList.add("active-screen")
Shows the selected screen.
Button Mapping
- Find Activities → Activities screen
- Choose Activity → Activity details
- View Details → Detailed activity information
- Join → Participation screen
- Confirm Participation → Confirmation screen
JavaScript Code Generation
Prompt Used
Generated Function
function updatePage(screenId) {
const screens = document.querySelectorAll(".screen");
screens.forEach(function(screen) {
screen.classList.remove("active-screen");
});
const selectedScreen = document.getElementById(screenId);
if (selectedScreen) {
selectedScreen.classList.add("active-screen");
}
}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, Find Activities screen, Choose Activity screen, View Details screen, Join screen, and Confirmation screen. The Home page also introduces forests, wildlife, and habitat protection.
Challenges & Learnings
One challenge was making sure the buttons correctly connected
to the JavaScript navigation functions. We learned that the
screen IDs in the HTML must match the IDs being passed to the
JavaScript function. We also learned how CSS classes such as
screen and active-screen can be used
to hide and show different screens.
Demonstration of Iteration
We started with a simple low-fidelity Home screen and improved it by adding a forest image, green colors, conservation topic buttons, and a Find Activities button. We then expanded the design into a multi-screen experience that guides the user from Home through finding an activity, viewing details, joining, and receiving confirmation.
This process showed us how testing and iteration can turn a simple wireframe into a working software prototype.