[ad_1]
The next calculator computes your incomes potential based mostly on some inputs. Observe that this serves solely for instance based mostly on some frequent inputs. I’ll clarify the code for this later within the article! 
physique {
font-family: Arial, sans-serif;
}
.calculator {
width: 300px;
padding: 16px;
background-color: #f8f9fa;
margin: 0 auto;
margin-top: 50px;
border: 1px strong #ced4da;
border-radius: 4px;
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
show: block;
margin-bottom: 5px;
}
.input-group enter, .input-group choose {
width: 100%;
padding: 5px;
box-sizing: border-box;
}
#consequence {
margin-top: 20px;
font-size: 20px;
colour: #007bff;
}
Bachelor’s
Grasp’s
PhD
operate calculate() {
var baseRate = 20; // Base hourly fee – you would possibly need to modify this
var expertise = doc.getElementById(“expertise”).worth;
var languages = doc.getElementById(“languages”).worth;
var diploma = doc.getElementById(“diploma”).worth;
var hours = doc.getElementById(“hours”).worth;
var earnings = baseRate * (1 + expertise * 0.05) * (1 + languages * 0.1) * diploma * hours * 52; // 52 weeks per 12 months
doc.getElementById(“consequence”).innerHTML = “Estimated Earnings: $” + earnings.toFixed(2);
}
I’ve based mostly the earnings potential on the next inputs:
- Years of Expertise: Assuming the coder earns extra as their expertise will increase.
- Variety of Languages Identified: Extra languages would possibly result in a better wage.
- Diploma Degree: Larger training could contribute to increased earnings.
- Work Hours per Week: Extra hours, extra pay.
Right here’s how the calculation works: it begins with a base hourly fee, after which will increase this fee based mostly in your expertise, the variety of languages they know, and their diploma stage. Then, it multiplies the consequence by the variety of hours they work every week and the variety of weeks in a 12 months to get their annual earnings.
You may take a look at the next code to perform this:
<!DOCTYPE html>
<html>
<head>
<type>
physique {
font-family: Arial, sans-serif;
}
.calculator {
width: 300px;
padding: 16px;
background-color: #f8f9fa;
margin: 0 auto;
margin-top: 50px;
border: 1px strong #ced4da;
border-radius: 4px;
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
show: block;
margin-bottom: 5px;
}
.input-group enter, .input-group choose {
width: 100%;
padding: 5px;
box-sizing: border-box;
}
#consequence {
margin-top: 20px;
font-size: 20px;
colour: #007bff;
}
</type>
</head>
<physique>
<div class="calculator">
<div class="input-group">
<label for="expertise">Years of Expertise:</label>
<enter sort="quantity" id="expertise" min="0">
</div>
<div class="input-group">
<label for="languages">Variety of Languages Identified:</label>
<enter sort="quantity" id="languages" min="0">
</div>
<div class="input-group">
<label for="diploma">Diploma Degree:</label>
<choose id="diploma">
<choice worth="1">Bachelor's</choice>
<choice worth="1.2">Grasp's</choice>
<choice worth="1.4">PhD</choice>
</choose>
</div>
<div class="input-group">
<label for="hours">Work Hours per Week:</label>
<enter sort="quantity" id="hours" min="0">
</div>
<button onclick="calculate()">Calculate</button>
<div id="consequence"></div>
</div>
<script>
operate calculate() {
var baseRate = 20; // Base hourly fee - you would possibly need to modify this
var expertise = doc.getElementById("expertise").worth;
var languages = doc.getElementById("languages").worth;
var diploma = doc.getElementById("diploma").worth;
var hours = doc.getElementById("hours").worth;
var earnings = baseRate * (1 + expertise * 0.05) * (1 + languages * 0.1) * diploma * hours * 52; // 52 weeks per 12 months
doc.getElementById("consequence").innerHTML = "Estimated Earnings: $" + earnings.toFixed(2);
}
</script>
</physique>
</html>
Let’s clarify the totally different elements of this code subsequent!
HTML
HTML kinds the skeleton of the web page.
It contains enter fields for the person’s years of expertise, the variety of programming languages they know, their diploma stage, and their working hours per week. There’s additionally a button that the person will press to calculate their earnings, and a div the place the consequence shall be displayed.
CSS
CSS kinds the web page.
The given CSS is pretty simple – it units the font, kinds the container that holds all the things, and kinds the enter fields and the consequence textual content. This makes the calculator extra visually interesting.
JavaScript
That is the place the calculator’s logic is positioned.
It begins with setting a base hourly fee (which you’ll be able to modify). When the person clicks the “Calculate” button, it grabs the values the person has entered within the enter fields.
For the diploma stage, a choose HTML factor is used, which permits customers to decide on between Bachelor’s, Grasp’s, or PhD. These are assigned values of 1, 1.2, and 1.4 respectively, indicating that increased levels result in a better wage.
The JavaScript then performs a calculation with these values. It takes the bottom fee and will increase it based mostly on the person’s years of expertise and the variety of programming languages they know (assuming that each of those will improve the hourly fee).
It then multiplies this by the diploma stage to account for the affect of training on earnings.
Lastly, it multiplies the hourly fee by the variety of hours the person works every week and the variety of weeks in a 12 months (52) to calculate their annual earnings. This worth is then displayed on the web page.
Should you loved this sensible undertaking, be sure to hitch our free e mail e-newsletter that teaches you programming every day by downloading our cheat sheets beneath:
Additionally, you might have an interest within the following weblog tutorial:
Advisable: What’s the Hourly Price of a Python Freelancer?
[ad_2]
