[x] Purpose: Help teenagers to gain a thorough understanding of their own skin and how to treat it. Uplifting inner and outer confidence so that they feel comfortable engaging with those around them and showing their personality to their full potential.
[x] Function: CSP (Customized Skin Products) --> A fast & free website that caters to users' specific skin types to produce an in-depth evaluations of how to improve and recommend quality skin care products.
[x] Input: User skin type and product want recommendation for
[x] Code segment shows how data is being stored in a list
[x] Code segment shows the data in this same list being used as part of fulfilling the program’s purpose --> Fetching backend database and storing it in the frontend in global variable allSkinProducts. Using the read function to get the data.
[x] Identifies name of variable representing list being used --> allSkinProducts
[x] Describes what the data contained in this list is representing in the program --> Data represents the different skin types and corresponding skin products for moisturizer, sunscreen, serum, face cleanser
Row 3: Managing Complexity
In the written response (3B):
[x] Explains how list manages complexity + why vital to program: If program were to run without the allSkinProducts data, it would make everything very inefficient because I would have to make new individual variables to store each skin product that corresponds to the skin type. By using "allSkinProducts", I can consolidate all that information in one place, making it easier to manipulate in my frontend and keep track of.
Row 4: Procedural Abstraction
In the written response (3C):
[x] Code segment that shows a student-developed procedure with at least one parameter that has an effect on the functionality of the procedure: I created a function called findSkinProduct() that takes the user's input of their skin type and product type and then compares these variables to the database products. The skin type in the data base row must match with the user's skin type, and the user's wanted product type must be either serum, face cleanser, sunscreen, or moisturizer to output a recommended skin product. My function also takes into account error conditions such as if the user inputs a skin type or product type we don't have in the database.
[x] Code segment where student-developed procedure is being called: "findSkinProduct" called when button is pressed
[x] Describes identified procedure does and how contribute to overall functionality of the program: This recommendation function contributes to my project's key feature which is giving custom product recommendation. Without this backend code, when the user submits their skin type and product type they will recieve no result
Row 5: Algorithm Implementation
In the written response (3C):
[x] Code Segment in student-developed procedure that shows:
sequencing: Code runs in order from line at top to line at bottom (starts with list of questions --> recommendation function to output face cleanser)
iteration: iterates through database row to find skin type and product that matches user
selection: if/else statements to check which variable is the max to output what product to recommend
[x] Explains in detailed steps how the identified algorithm works in enough detail that someone else could recreate it --> For the backend it was just generating a backend, but the real challenge was fetching the data base from the backend and saving it in the frontend, displaying it, and taking the user input to output the product recommendation. Here is a step by step:
1. Fetching Database & displaying on website
Here I take the Javascript-generated skin product table and assign it to "result" id at the beginning of the file right after the column headers for the data table.
Now, I use document.getElementByID() to access the "result" id and assign it to "resultcontainer".
The last step is to write innerHTML to each "tr" element, then append all "tr"s to form each row, and all "tr" rows are appended to "td" to form the whole table. Finally, I append "td" to "resultcontainer" which displays on the website!
2. Taking user input & displaying output on the website
Taking user input from HTML uses the same document.getElementById(""). By looking through "allSkinProducts" and comparing it with user input, we can find the skin product the user is looking for. Corner cases are also been handled.
Here is the function where first I check if the user's skin type is equal to the data row's skin type, if so then I check if the user wanted product is a product type available in the database too. If either is not met the input, the error message will be reported as we do not offer this skin type/skin product recommendation.
Row 6: Testing
[x] In the written response (3D):
1st call: Text shows "Skin type:" and user will type out their skin type. Text shows "Skin Product type" and user will type out what kind of skin care product they want to be recommended to them
2nd call: Text shows "Skin type:" and user will type out their skin type. Text shows "Skin Product type" and user will type out what kind of skin care product they want to be recommended to them
1st condition: if user types out "oily" for skin type and "moisturizer" for product type
2nd call: if user types out "dry" for skin type and "serum" for product type
Row 1: Program Purpose & Function
Row 2: Data Abstraction
In the written response (3B):
Row 3: Managing Complexity
In the written response (3B):
Row 4: Procedural Abstraction
In the written response (3C):
[x] Code segment that shows a student-developed procedure with at least one parameter that has an effect on the functionality of the procedure: I created a function called findSkinProduct() that takes the user's input of their skin type and product type and then compares these variables to the database products. The skin type in the data base row must match with the user's skin type, and the user's wanted product type must be either serum, face cleanser, sunscreen, or moisturizer to output a recommended skin product. My function also takes into account error conditions such as if the user inputs a skin type or product type we don't have in the database.
[x] Code segment where student-developed procedure is being called: "findSkinProduct" called when button is pressed
[x] Describes identified procedure does and how contribute to overall functionality of the program: This recommendation function contributes to my project's key feature which is giving custom product recommendation. Without this backend code, when the user submits their skin type and product type they will recieve no result
Row 5: Algorithm Implementation
In the written response (3C):
[x] Code Segment in student-developed procedure that shows:
sequencing: Code runs in order from line at top to line at bottom (starts with list of questions --> recommendation function to output face cleanser)
iteration: iterates through database row to find skin type and product that matches user
selection: if/else statements to check which variable is the max to output what product to recommend
[x] Explains in detailed steps how the identified algorithm works in enough detail that someone else could recreate it --> For the backend it was just generating a backend, but the real challenge was fetching the data base from the backend and saving it in the frontend, displaying it, and taking the user input to output the product recommendation. Here is a step by step:
1. Fetching Database & displaying on website Here I take the Javascript-generated skin product table and assign it to "result" id at the beginning of the file right after the column headers for the data table.
Now, I use document.getElementByID() to access the "result" id and assign it to "resultcontainer".
The last step is to write innerHTML to each "tr" element, then append all "tr"s to form each row, and all "tr" rows are appended to "td" to form the whole table. Finally, I append "td" to "resultcontainer" which displays on the website!
2. Taking user input & displaying output on the website Taking user input from HTML uses the same document.getElementById(""). By looking through "allSkinProducts" and comparing it with user input, we can find the skin product the user is looking for. Corner cases are also been handled.
Here is the function where first I check if the user's skin type is equal to the data row's skin type, if so then I check if the user wanted product is a product type available in the database too. If either is not met the input, the error message will be reported as we do not offer this skin type/skin product recommendation.
Row 6: Testing
1st call: Text shows "Skin type:" and user will type out their skin type. Text shows "Skin Product type" and user will type out what kind of skin care product they want to be recommended to them 2nd call: Text shows "Skin type:" and user will type out their skin type. Text shows "Skin Product type" and user will type out what kind of skin care product they want to be recommended to them
1st condition: if user types out "oily" for skin type and "moisturizer" for product type 2nd call: if user types out "dry" for skin type and "serum" for product type
1st result: Output "SkinCenuticals Moisturizer" 2nd call: Output "Simple Booster Serum"