21 Mar 25, by Lai Yi Ting Elaine
Front End Developer
HTML/ SCSS/ JS /GSAP / Parcel.js
This project applies Object-Oriented Programming (OOP) principles in JavaScript to create an interactive bread-making guide for beginners.
A base class representing a bread recipe, with properties like ingredients and baking time.A child class extending the base class, allowing customization for different types of bread.
A dynamic web page where users can browse and select recipes.
Implementing OOP principles proved challenging when populating text elements in JavaScript while using SCSS for styling. I leveraged the four pillars of OOP by creating encapsulation within the Bread class, where methods like render() operate on the class data. I also established inheritance hierarchies allowing child classes to inherit behaviors from parent classes. However, I encountered limitations when subclasses didn't effectively extend functionality beyond their parent implementations.
Creating populated information for all the breads orgins and details.
With four pillars of OOP, I have successfully used Encapusaltion to bundling data with methods and inherited child classes from parent classes.
Created JavaScript class named CapybaraSoundButton. It's a reusable component that creates a button which, when clicked, plays a music while user browsing the website.
What I would do differently
The improvement part is the Abstraction, that I can create a base method to refacrtor and return to the getHTML.getHtml() is the abstraction of your bread's visual representation and render() is the interface that clients (e.g., bake()) will call.
