This week (week-5), author has a task to develop Pet Drug Site and to deploy this site with custom domain and the author should explain about their process and workflow. Author will explain in brief about the site in this documentation for the limited time. If there is enough time, Author will add other more detailed explanations on this site development.

This week (week-5), Author develop a site that focus on medication for pets. The name is Pet Drug. This is a company profile site for Pet Drug which planned to be a medication marketplace for pets. This site development based on product research mini survey that has been done since July, 11th 2023 (Tuesday). The main result is that Pet Drug has the highest popularity which is 15 respondents voted for Pet Drug out of 36 respondents (update per Friday, July 14th 2023 11.08 PM). The complete result and screenshots hopefully will be posted later on in this readme.

Custom domain that is used for deployment is the previous wweek (week-4) assignment as instructed. Hence, there will be no any signficant changes in topics on how to deploy the site to the custom domain. However, there will be some slight changes which is the simple steps to deploy new site the custom domain is to remove domain from custom domain in netlify to the previous week-4 task then change netlify domain on DNS record in cloudflare. It could be changed directly since (https://aldinotaher.site/) is already registered on cloudflare.

The steps of deployment have already done in previous week (week-4). Hence, for the one who seeks previous work could see through links provided below:

[Link for The Previous Assignments] (https://github.com/RevoU-FSSE-2/week-4-andalanaldi)

Without further do here are the structure of the site of Pet Drug with (https://aldinotaher.site/) as a custom domain. The site consist of these structure:

1. Pet Drug logo, notification logo, and navigation menu
2. The site name which is Pet Drug, descrpition, Why Pet Drug and call to action buttons

3. Product Section
4. Services Section
5. Appointment Form
6. Sister company in noTaher Group
7. News and Event

8. Contact Information
9. Navigation menu and copyright

The navigation menu and call to action button has hypertext reference link to other section in the site. The link mostly directed to product section, services section, appointment form, contact information and about company which is in header section. Product for Pet Drug consist of drug for pets, vaccines and supplement. whereas services is consist of consultations, vaccinations and check-up for pets. The products and services are not limited to the one taht is displayed on site. For instance, grooming is not in main list of services displayed in the site but it is still an option in appointment form.

The siste company section is inspired by the result of product research mini survey that has been mentioned with 36 respondents. The other app or site suggestion such as Vet Drug, CRISPY, HealthReg, HealthySpend and SoulML are included in sister company section. Please see (https://aldinotaher.site/) to see more detail on each of product, services and sister company descriptions.

The reference for this Pet Drug site initially from the insightful discussion and the contribution from Team 1 and Team 4 which are Pak Moh. Ryan Alfa Maulana and Pak Dion Maulana Williawarma as team leaders. Along with insightful discussion with Kak Kresna and Kak Zafirah from team 1 and Kak Audi, Kak Insan, Kak Hendrin etc from Team 4. The discussion encouraged the author to do a product research and gathered ideas for this Pet Drug site.

From those insightful discussion, the author use some tool for making content and color reference but not Ai helper to make automatic codes in HTML, CSS or Javascript. content ideas for Pet Drugs is taken from dicsussion with ChatGPT and color reference is from Dribble with key word "Pet Drug" or "Vet Drug" on its search engine. The Custom Font reference is from google font which is Roboto Slab. The reason that font is chosen because some articles reccommended to use that for health apps or sites. Link for the article will be added later on by author if there is enough time.

Color reference is from dribble and some icons and pictures are from bing search engine. Nevertheless, some pictures are not a good match with color reference from dribble. Hence, the author try to use and make pictures reference from leonardo.ai. However, keep in mind that prompt with hexadecimal color from dribble reference cannot be processed by leonardo.ai as its limitation. Hence, the hexadecimal color should be in color name and with chatGPT help, the color name from dribble could be generated. After the color name is obtained, those color names are inserted to the leonardo.ai prompt and it produces vector icon pictures that match the reference color from dribble.

The codes reference mostly from RevoU FSSE class these past 5 weeks, W3 schools, CSS tricks, and other that will be mentioned later on because author forgot them. Code library that is used is for carousel and hamburger buttons. Nevertheless, hamburger button is postponed although it is matched with media query responsiveness across devices, it is postponed beacuse of some errors. If there is enough time, author will be revisit the hamburger button again.

Author belives that author has fullfilled the criteria for week 5 assignment which is semantic HTML, Responsive CSS and without any massive javascript codes. The codes that author pushed into github could be opened to be reviewed. Responsive CSS for this Pet Drug site is for PC?Laptop with 1024px screen size, 768px for Tablet screen and 320px for Mobile screen. Nevertheless, there are some limitations which are the images inside the carousel which have not resized yet that add limitations despite the hamburger button, eventhough the grid part, carousel container has been coded into responsive media query for 3 devices need that has been mentioned before.

If there is enough time author aspire to resized images inside the carousels, refixing the hamburger button with javascript, try to use javascript to do a regular expression for the forms to protect data input, use fromspree and javascript to record data that is entried on appointment form in this site. Some paginations that is learnt for milestone 2. By the way, pagination and fromspree are inspired from Kak Hendrin and Kak Audi's discussion in these past 3 days of TL sessions. Last but not least author should checks some tags again on the HTML part beacuse maybe some tags are not yet closed properly.

Hopfully this site and github repo along with its readme markdown documentation could be updated sooner with better site apperances and features with screenshots for this readme markdown documantation.

Author expressed deep gratitude for the one who pays attention to this documentation.