₦airaland Forum

Welcome, Guest: RegisterLoginWith GoogleTrendingRecentNew

Stats: 3,325,099 members, 8,420,333 topics. Date: Thursday, 04 June 2026 at 04:42 PM

Toggle theme

Majorstark's Posts

Nairaland ForumMajorstark's ProfileMajorstark's Posts

1 2 3 (of 3 pages)

BusinessRe: Football (+/Other Sports) Betting Season 13 by majorstark: 6:38pm On Nov 30, 2019
Zabiboy:
Which bookie...
I can give u 6 odd of corners
Bet365 Sir.

I'm in.
BusinessRe: Football (+/Other Sports) Betting Season 13 by majorstark: 6:37pm On Nov 30, 2019
Lhimeet:
Tomorrow.
Sure Bro

God keep us. Amen
BusinessRe: Football (+/Other Sports) Betting Season 13 by majorstark: 2:22pm On Nov 30, 2019
Lhimeet:
Sorry, try again later. cheesy grin
Quote me. in future

Findings says u are the best corner analyst on here.
Give me 5 - 10 odds corner (it could be 1-2 days)

I will fund u 1k5 if it greens
BusinessRe: Football (+/Other Sports) Betting Season 13 by majorstark: 6:10pm On Nov 29, 2019
Chiefheywhy:
You're welcome , you no go fund us crumbs ? grin grin grin
I thought u had become a millionaire by now. angry
BusinessRe: Football (+/Other Sports) Betting Season 13 by majorstark: 12:36pm On Nov 22, 2019
wiseone28:
I WON WITH HIS BET YESTERDAY

HealthRe: Why You Should Avoid Eating Fruits During Medication - Pharmacist by majorstark:
afuye:
Your WhatsApp
...
Tech JobsRe: FULLSTACK COURSES by majorstark: 7:32pm On Sep 16, 2019
[quote author=afuye post=82291726][/quote]Nope.

If you have an idea of a great app, Call me asap.
Tech JobsRe: FULLSTACK COURSES by majorstark: 12:51pm On Sep 16, 2019
afuye:
Wise man, I know. My charge is only for downloading the courses cos you don't have to waste any dime and time downloading. My content are worth over 800gig and over 100 courses If you don't want the offer, use the downlaod link if not you can contact me
Irrespective delete the quote as i have deleted mine.

And shade out the download site.

Shikena
Tech JobsRe: FULLSTACK COURSES by majorstark:
...
ProgrammingFree Ebooks by majorstark(op): 3:41pm On Sep 11, 2019
ProgrammingRe: Free Tutorial On Php And My Sql by majorstark: 1:19pm On Aug 14, 2019
[quote author=dgreatmind post=7770506][/quote]How May I Help You??
ProgrammingRe: Devctrainingwithandela Profiling Assessment - SOLUTION by majorstark(op): 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();
ProgrammingDevctrainingwithandela Profiling Assessment - SOLUTION by majorstark(op):
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 2 3 (of 3 pages)