Table of contents
I aim to grow by staying open to learning and connecting with other developers. By doing so, I want to understand software development better, not just focusing on frontend or backend separately. Lets Goooo💪🏼🚀
Fundamentals of Node JS
Creating Reusable functions
This is basically a continuation from the previous lessons.
From the previous lesson, we modified the "/products" route that if we have the ID query string returned a text response. 👇🏼
Web display 👇🏼
Instead of sending a text response, what we actually want is to display the HTML response of the product.
Inside the template folder, lets create a new HTML file product-details.html . And lets write some HTML. 👇🏼
This lesson is not about styling, you can style it however you want. We hard coded the product details but that is not exactly what we want. We are going to replace the hard coded product values with the property value of of the product we want to display in the web page using the HTML.
In the app.js file we have already written a logic to replace the placeholders in the product list. 👇🏼
We want to reuse the above logic for the product-details.html as well. For that we create a reusable function. This function takes two parameters. The first is the template parameter which we'll assign the HTML file and the the second we'll be the product parameter. Lets refactor and update the code base👇🏼
We need to modify our logic in the product route. 👇🏼
From the above image, We are mapping through the products and returning new array which is assigned to productHtmlArray and we're calling the function replaceHtml() and passing productListHtml as the template and prod as the product.
Restart the server and checkout the web page. 👇🏼
The product route still works perfectly after the restructuring.
Just like we use replaceHtml()function to replace the productListHtml file, we also want to use it to replace the place holders in the product-details.html file. Lets update the code. Instead of the hard coded values, we'll use the placeholders.👇🏼
Lets create a productDetailsHtml variable so we can read the file from product-details.html and assign the value to productDetailsHtml variable. 👇🏼
Lets go ahead and update the products route so we can be able to send the product details as a response to the web page. We call the replaceHtml() function and pass the productDetailsHtml variable as the template and for the product, we have the query object and the query object has an ID property if the use specified the ID query string in the URL. so we use the product which is an array storing all our products from the Json data and to that we pass the query.ID . lets create a variable to assign the value of the replaceHtml() function and also a variable to assign the product passing the query.ID👇🏼
Our response is still returning a normal text but we want to return the HTML value of the product. Lets update the response in the product route. 👇🏼
Lets restart the server and checkout the response in our web page.
When we click on the show details for any of the product, we notice that a query string have been added and based on that query string it is showing the product details. When you click on the back button, it takes us back to the product page.
Next: Creating a custom module.
See you soon😊🫡✌🏼...