Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,200,420 members, 7,974,714 topics. Date: Monday, 14 October 2024 at 10:08 AM |
Nairaland Forum / Science/Technology / Programming / Devctrainingwithandela Profiling Assessment - SOLUTION (2687 Views)
I Just Took Altschool Software Engineering Assessment. Here's My Findings / Alx Udacity Assessment Certificate Q & A / Snapnet Assessment Test (2) (3) (4)
Devctrainingwithandela Profiling Assessment - SOLUTION by majorstark: 11:21am On Aug 09, 2019 |
Solution to FaceCard - Challenge 1 of 4 Build & Style The UI /* Add Your CSS From Here */ body { background-color: white; } span { display: inline-block; vertical-align: middle; } span.material-icons { font-size: 150px; } [data-credit-card] { width: 435px; min-height: 240px; border-radius: 10px; background-color: #5d6874; } [data-card-type] { display: block; width: 120px; height: 60px; } [data-cc-digits] { margin-top: 2em; } [data-cc-digits] > input { color: white; font-size: 2em; line-height: 2em; border: none; background: none; margin-right: 0.5em; } [data-cc-info] { margin-top: 1em; } [data-cc-info] > input { color: white; font-size: 1.2em; border: none; background: none; } [data-cc-info] > input:nth-child(2) { padding-right: 10px; float: right; } [data-pay-btn] > input:nth-child(2) { padding-right: 10px; float: right; } [data-pay-btn] { position: fixed; width: 90%; border: solid 1px; bottom: 20px; } 1 Like 2 Shares |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by majorstark: 11:21am On Aug 09, 2019 |
Solution to FaceCard - Challenge 2 of 4 FaceCard Challenge 2 of 4 Step 1 Within the SCRIPT element and just after the billHype function, create an appState variable and assign it an empty Object literal. This variable will hold data for the app. const appState = {}; Create a formatAsMoney function. It should take in an amount and a buyerCountry parameter. It will use these parameters to format the user's bill as a proper currency. const formatAsMoney = (amount, buyerCountry) => {}; Create detectCardType, validateCardExpiryDate, and validateCardHolderName functions. detectCardType should be declared to accept first4Digits as a parameter represneting the first four digits of the 16-digit long credit card number. As implied by their names, these functions will play major roles in validating various aspects of the card being used for payment const detectCardType = (first4Digits) => {}; const validateCardExpiryDate = () => {}; const validateCardHolderName = () => {}; Create a uiCanInteract function. It will be called to setup the UI, including adding event handlers to enable interactions with the app. const uiCanInteract = () => {}; Create a displayCartTotal function. It should expect a parameter and should use object de-structuring to obtain the results property of the given parameter. This function will be called with the data from an API call and it will display the total bill to be paid. const displayCartTotal = ({results}) => { const [data] = results; }; Step 2 Update the fetchBill function. It should then use the browser's fetch function to make a HTTP request to apiEndpoint. Using an arrow function in a .then call to the fetch function, return the response after converting it to JSON. Using another .then call to the first one, pass the JSON data to displayCartTotal. Make sure to handle errors that may occur, e.g by showing a warning message in the console. const fetchBill = () => { ... ... ... fetch(apiEndpoint) .then((response) => {response.json()}) .then((data) => {displayCartTotal(data)}) .catch((error) => {console.log('Warning ' + error)}) const startApp = () => {}; ... }; Call the fetchBill function from inside the startApp. This should be the only code or function call within startApp. const startApp = () => { fetchBill(); }; Step 3 In the body of the displayCartTotal function, de-structure the first item in the results array parameter into a data variable. Next, use object de-structuring to obtain the itemsInCart and buyerCountry properties from data. You might want to install the JSONViewer Chrome extension, open a new tab and navigate to https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c to see the shape of the JSON data we are dealing with. const displayCartTotal = ({results}) => { const [data] = results; const {itemsInCart, buyerCountry} = data; ... } Next, displayCartTotal should set appState.items to itemsInCart and appState.country to buyerCountry. const displayCartTotal = ({results}) => { ... ... appState.items = itemsInCart; appState.country = buyerCountry; ... } Use the Array .reduce function to calculate the total bill from itemsInCart Note that each item has a qty property indicating how many of that item the user bought. Assign the calculated bill to appState.bill const displayCartTotal = ({results}) => { ... ... appState.bill = itemsInCart.reduce((total, item) => { return total + (item.price * item.qty) }, 0); ... ... } Go back to the formatAsMoney function. Use the in-built javascript .toLocaleString function on the amount and buyerCountry parameters to format amount as a currency with the currency symbol of buyerCountry. The countries and their currency symbols are in the countries array you got in your starter code. If the buyerCountry is not in countries, then use United States as the country and format the currency accordingly. const formatAsMoney = (amount, buyerCountry) => { amount = amount.toLocaleString('en-NG', {style: 'currency', currency: 'NGN'}); buyerCountry = buyerCountry.toLocaleString('en-NG'); } Continuing from where you left off in displayCartTotal, use the formatAsMoney function to set appState.billFormatted to the formatted total bill. The already assigned appState.bill and appState.country should be handy for this task! const displayCartTotal = ({results}) => { ... appState.billFormatted = formatAsMoney(appState.bill, appState.country); ... } Set the text content of the data-bill SPAN element to the formatted bill saved in appState.billFormatted const displayCartTotal = ({results}) => { ... document.querySelector('[data-bill]').textContent = appState.billFormatted; ... } Assign an array literal to appState.cardDigits const displayCartTotal = ({results}) => { ... appState.cardDigits= []; ... } Finally, call uiCanInteract to wrap up displayCartTotal const displayCartTotal = ({results}) => { ... uiCanInteract(); ... } Final Result const appState = {}; const formatAsMoney = (amount, buyerCountry) => { amount = amount.toLocaleString('en-NG', {style: 'currency', currency: 'NGN'}); buyerCountry = buyerCountry.toLocaleString('en-NG'); } const detectCardType = (first4Digits) => {} const validateCardExpiryDate = () => {} const validateCardHolderName = () => {} const uiCanInteract = () => {} const displayCartTotal = ({results}) => { const [data] = results; const {itemsInCart, buyerCountry} = data; appState.items = itemsInCart; appState.country = buyerCountry; appState.bill = itemsInCart.reduce((total, item) => { return total + (item.price * item.qty) }, 0); appState.billFormatted = formatAsMoney(appState.bill, appState.country); document.querySelector('[data-bill]').textContent = appState.billFormatted; appState.cardDigits= []; uiCanInteract(); } const fetchBill = () => { const apiHost = 'https://randomapi.com/api'; const apiKey = '006b08a801d82d0c9824dcfdfdfa3b3c'; const apiEndpoint = `${apiHost}/${apiKey}`; fetch(apiEndpoint) .then((response) => {response.json()}) .then((data) => {displayCartTotal(data)}) .catch((error) => {console.log('Warning ' + error)}) }; const startApp = () => { fetchBill() }; startApp(); 1 Like 2 Shares |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by princesweetman2(m): 3:00pm On Aug 09, 2019 |
majorstark: <!-- your HTML goes here --> <div data-cart-info> <heading class="mdc-typography--headline4"> <span class="material-icons">shopping_cart</span> <span data-bill></span> </heading> </div> <div class="mdc-card mdc-card-outlined" data-credit-card> <div class="mdc-card__primary-action"> <img src="https://placehold.it/120x60.png?text=Card" data-card-type> </div> <div data-cc-digits> <input type="text" size="4" placeholder="----"> <input type="text" size="4" placeholder="----"> <input type="text" size="4" placeholder="----"> <input type="text" size="4" placeholder="----"> </div> <div data-cc-info> <input type="text" size="20" placeholder="Name Surname"> <input type="text" size="6" placeholder="MM/YY"> </div> </div> <button type="button" class="mdc-button" data-pay-btn>Pay Now</button> |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by makavele: 7:44pm On Aug 11, 2019 |
there are many things wrong those codes, and even while it may pass the automated tests, will fail a manual review. the codes are in dire need of optimization. not bad though. 2 Likes |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by regal4luv(m): 10:10pm On Aug 12, 2019 |
nice one |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by cyberpeaks01: 8:05pm On Aug 16, 2019 |
Weldone bross, thanks so much as I have learned so much. Please what about challenge 3 and 4 |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by makavele: 9:14pm On Aug 17, 2019 |
cyberpeaks01: i thought i submitted it, yeah? |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by dodosecret: 4:33am On Aug 18, 2019 |
Boss, there is no step 4 ? |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by makavele: 9:54pm On Aug 22, 2019 |
dodosecret: Did you follow our FaceBook updates, i unblocked lots and lots of people there. And not just me alone, a lot of others did too. |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by makavele: 1:54am On Aug 23, 2019 |
dodosecret: You should have gotten this by now
|
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by Nobody: 8:16pm On Sep 05, 2019 |
makavele:Don't listen to this clown .I heard he only logs on Nairaland when he's high |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by Nobody: 8:23pm On Sep 05, 2019 |
makavele:Don't follow his advice. We heard he's a fake programmer and an online bully. Check his post fake fake fake |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by Nobody: 8:24pm On Sep 05, 2019 |
makavele:Don't listen to this man. I thought I summited it ko you thought you copied pasted ni |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by Nobody: 8:25pm On Sep 05, 2019 |
makavele:Dont listen to this man. We heard he's a pyscho |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by Nobody: 2:02am On Sep 16, 2019 |
makavele:So you're even doing Dev training with fb. The fake programmer. Hahahaha Makeve fucking vele. Let me catch u at Andela. I'll show the world what copy paste programmer u are. This is bonaventure73. I'll torment u untill you repent. I'll be the last person you'll ever degrade and make feel inferior. Useless he-goat. I'll naked u if I catch u near Andela office |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by makavele: 10:16am On Sep 16, 2019 |
Yawns !!! What a sunny day |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by princesweetman2(m): 4:21pm On Sep 16, 2019 |
BUY UDEMY, UDACITY, AND PLURALSIGHT COURSES FOR N1K PERE CONTACT BELOW BELOW COURSES ARE 1: PHP MVC & OOP 2: JAVA DEVELOPER 3: RUBY ON RAILS 4: SQL - MySQL
|
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by princesweetman2(m): 5:01pm On Sep 16, 2019 |
REACH ME ON MY SHIGGY TO DOWNLOAD ANY OF BRAD TRAVERSY PROGRAMMING COURSE FOR N1K PERE https : // www . udemy . com/user/brad-traversy/ |
Re: Devctrainingwithandela Profiling Assessment - SOLUTION by Nobody: 9:09pm On Sep 16, 2019 |
makavele:Another day of copying and pasting? U must be very tired |
(1) (Reply)
Native Mobile Internet App Or Responsive Site? / Admob Suspension / Data Science With Python Tutorial
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 36 |