Welcome to this guide which will be a companion with the pair programming workshop. This guide needs to be used alongside the youtube class
Inputs
for Initial Price, Quantity, and the Current PriceTell me!
for Getting the Profile / Loss Output.Div
for Displaying the Output.id
to Elementsid="..."
to different elements, so they can be later used in our js file.<input type='number' id='initial-price' placeholder='Add Initial Price Here...' />
querySelector
querySelector
const initialPrice = document.querySelector('#ip_input');
We need a function for Calculating -
(SellingPrice - CostPrice)
(Profit/CostPrice)*100
(CostPrice - SellingPrice)
(Loss/CostPrice)*100
calculateProfitAndLoss
to calculate Loss and Profit.// Conditional Branching
if(sellingPrice > CostPrice){
// Profit Logic
}else if(costPrice > sellingPrice){
// Loss Logic
}
console.log
to check if the function is working properly.click
event listener to the Submit Button.submitBtn.addEventListener('click', submitHandler);
submitHandler
to handle the button Click.inputName.value
, and store them in a variable.calculateProfitAndLoss
, created in Ex-05, after adding some checks.toFixed(digits)
type='numbers'
as an attribute in the input tag.alert('Please fill out all Fields')
if validation fails.The Input (Form Input) element
Change the theme of application according to profit and loss, accessing the styles of the element using element.style.<cssPropertyName>
outputBox.style.color = 'green';