For the holiday challenge, we were tasked to improve on our second-semester exam project by re-implementing wrongly implemented features or adding not implemented features.
In my exam project, I had some bugs in my code and a few features I didn't implement. So in this documentation, I will take you through how my holiday challenge went and I also get to explain some concepts to you.
Prerequisites
The exam project was a counter app built with Reactjs. Knowledge of the following will be helpful but it's not required to understand this article.
JavaScript
ReactJs
React Hooks
LocalStorage
Bootstrap CSS
Journey begins
I started the holiday challenge by first reviewing my codes and finding bugs and possible features to be added and I noted them down. So basically before I started to write any code I already know what to do and how to do it.
Here are the major features and bug changes:
The Website wasn't responsive
A responsive website is a website that renders well on all screen sizes and resolutions while ensuring good usability.
While I was working on this project for my exam submission, I couldn't make it responsive because of the time constraint so it was available only for large-screen devices.
Making it responsive was not much of a task for me as I already have knowledge and experience in responsive web designs. I used Bootstrap CSS to make my work much faster.
Before I made it responsive:
After I made it responsive:
Bug in setValue Function
When you use the input option to enter a number, it changes the counter variable datatype from "number" to "string". So using the + button adds 1's to the end of the counter.
Fixing this was quite easy and I did this by converting the value of the counter variable's datatype to "number" before setting it.
BEFORE:
setCount(e.target.value)
AFTER:
setCount(Number(e.target.value))
Adding LocalStorage
What is LocalStorage? localStorage is a web storage object that allows JavaScript sites and apps to keep key-value pairs in a web browser with no expiration date. In simple terms, it is a means of saving data from a website in your browser.
One major feature I wanted to add was localStorage, this was my first time using localStorage with Reactjs and I learned a lot of things while implementing this feature.
I used three localStorage methods to achieve this task:
setItem() Method: This is used to save data to the localStorage in key and value pair. I used this to save the counter value, the list of observations, and the ID of each observation.
getItem() Method: This is used to retrieve data from the localStorage using its key. I called this method when I needed the retrieve the data from the localStorage.
removeItem() Method: This is used to delete specific data from the localStorage using its key. When a particular observation is deleted this method is called to delete that observation from the localStorage.
It takes in an argument ("id") which is used to identify the specific data you wish to delete.
localStorage.removeItem(`id`)
Conclusion
I enjoyed working on this holiday challenge as it made me learn new concepts and improve my already gotten skills. My attention to detail was greatly improved and I also learned to be more patient when encountering a challenge. Kudos to AltSchool Africa for setting this up.
Thanks for reading...