My Journey into App Development
Let me tell you about the story when I created my first three apps. Although, I’ve been created these app, and this story isn’t anything new to me…it’s quite new to you. So, buckle up and keep your hands, and feet inside the vehicle at all times and if anything happens to you…I don't have insurance, so you should’ve listened 😊
Once upon a time, I found myself in the solitude of a castle, armed with nothing but my trusty MacBook Pro. Then, out of nowhere, a canary landed on my windowsill, urging me to embark on a quest to create three remarkable apps. The first one, inspired by the epic Game of Thrones (GoT) saga, would randomize and show character names, famous quotes, and even their house. Now, I know what you’re thinking — how does a canary know about GoT? Trust me, I asked the same question, and her cryptic response was, “Be thankful I’m not a dragon.” I’ve created this one as a passion project and because I miss GoT and would do anything to get that daily does of GoT, whatever…. judge your mother.
Next, the canary suggested an app that would guess a user’s age based solely on their first name. Beware if you have an early 18th century old-fashioned name, it will show you no mercy. But hey, this is a randomize app- it will give you the estimate of your age at random and it does not know you personally (or do it *insert evil laugh* 😊).
Lastly, my prized creation — the Bible App. Here, users could input their desired book, chapter, and verse, and the app would fetch the corresponding text from an API. And if you haven't figured it out yet, there isn't a canary and there definitely isn't any MacBooks. I might have the latest iPhone, but I refuse to take a whole cup of the “punch”. I might take a sip (because I have the iPhone and iPad) but nothing more and i mean it!
Unveiling the Code
The heart of these apps lies in their JavaScript code. Let’s dissect each one:
Bible app:
The .js code for the Bible app was very tricky. In summary, the JavaScript code listens for a click on a button, retrieves the user’s input for the book and verse ranges, fetches the corresponding data from the Bible API, and then displays the results in the DOM. Let’s break it down further:
- Listening for Button Click: Sets up an event listener to detect button clicks.
- Retrieving User Input: Grabs the user’s input for book and verse ranges from input fields.
- Fetching Data from Bible API: Constructs a URL to query the API and sends a request.
- Asynchronous Fetching: Sends asynchronous requests to the API without blocking other operations.
- Handling Promises: Uses
Promise.all()to wait for all API requests to be resolved. - Processing and Displaying Data: Extracts relevant information from the API response and updates the DOM accordingly.
Here’s how my app look like with the user input already included:
GoT App:
GoT App:
This app fetches random quotes from the Game of Thrones API when a button is clicked, updates the webpage, and handles any errors gracefully.
- Button Click Event: Sets up an event listener for a button click.
- Fetching Data from API: Sends a request to the GoT quotes API.
- Processing Response Data: Selects a random character and quote from the API response.
- Updating the DOM: Displays the retrieved data on the webpage.
- Error Handling: Includes error handling using the
.catch()method.
Here’s how the app look when the user clicks on the button:
Age Guessitmate App:
This app fetches estimated age data from the Agify API based on a user’s input and updates the webpage accordingly.
- Button Click Event: Sets up an event listener for a button click.
- Fetching Data from API: Sends a request to the Agify API.
- Processing Response Data: Extracts the estimated age from the API response.
- Updating the DOM: Displays the retrieved age on the webpage.
- Error Handling: Includes error handling using the
.catch()method.
How the app looks when I enter my first name:
Future Ventures
Looking ahead, I aim to enhance these apps by incorporating ML and AI technologies. For the Bible App, a text-to-speech feature using Amazon Polly sounds intriguing. And for the Guesstimate App, leveraging ML and real-life data could vastly improve its accuracy. Who knows what else lies on the horizon? With patience and perseverance, the possibilities are endless.
In conclusion, these three apps mark just the beginning of my journey into app development. Patience was my first lesson, and I’m eager to see what other lessons lie ahead. Stay tuned for more adventures in coding!
P.S: if you see a canary on your windowsill, don’t talk to it.
Short prayer on success:
Dear Father,
Grant me the strength to pursue my goals with determination and wisdom. May Your guidance light my path to success and may Your blessings overflow in all my endeavors.
Amen.
**Portfolio: https://brittanyw.netlify.app