Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit aba3e03

Browse files
Natalia504shubham2704
Natalia504
and
shubham2704
authoredOct 16, 2020
Feature/to roman numerals (#111)
* added conversion for romanNumerals * updated ReadMe.md Co-authored-by: Shubham Goswami <[email protected]>
1 parent 64b782c commit aba3e03

File tree

4 files changed

+222
-2
lines changed

4 files changed

+222
-2
lines changed
 

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ If you want to add Color Gradients to your code [click here](https://backgroundg
6767
- [ ] [resolution]
6868
- [ ] [charge]
6969

70-
### [Mathmetical Tools](mathmeticalTools)
70+
### [Mathematical Tools](mathematicalTools)
7171
- [ ] [number base]
7272
- [ ] [number series]
73-
- [ ] [roman numericals]
73+
- [x] [roman numericals](mathematicalTools/romanNumerals/romanNumerals.html)
7474
- [x] [ratio](mathematicalTools/ratio/ratio.html)
7575
- [ ] [propotions]
7676
- [x] [decimal to fraction](mathematicalTools/decimalToFraction)

‎mathmeticalTools/romanNumerals/romanNumerals.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
*----------------------------------------------------------------
3+
* SITE HEADER
4+
*----------------------------------------------------------------
5+
*/
6+
.site-header {
7+
background-color: rgba(0, 0, 0, 0.85);
8+
-webkit-backdrop-filter: saturate(180%) blur(20px);
9+
backdrop-filter: saturate(180%) blur(20px);
10+
}

‎mathmeticalTools/romanNumerals/romanNumerals.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!--
2+
Contributor Details:
3+
Name: NataliaC
4+
Mail: nataliac@gmail.com
5+
twitter None
6+
github link https://www.github.com/natalia504
7+
-->
8+
<!DOCTYPE html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta
13+
name="viewport"
14+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
15+
/>
16+
<meta name="theme-color" content="#6610f2" />
17+
<link rel="icon" type="image/ico" href="../../favicon.ico" />
18+
<title>Utility Website</title>
19+
<!-- Styles -->
20+
<link
21+
rel="stylesheet"
22+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
23+
/>
24+
<link
25+
rel="stylesheet"
26+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
27+
/>
28+
<link rel="stylesheet" href="../../assets/styles/style.css" />
29+
<link rel="stylesheet" href="romanNumerals.css" />
30+
</head>
31+
<body>
32+
<!-- Navbar -->
33+
<nav class="site-header sticky-top py-1 text-light position-fixed w-100">
34+
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
35+
<a class="py-2 text-light" href="/index.html">
36+
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
37+
</a>
38+
39+
<div class="btn-group d-none d-md-block py-2">
40+
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Conversion Tools</button>
41+
<div class="dropdown-menu">
42+
43+
<a href="/conversionTools/Angle_Conversion/angleconversions.html" class="dropdown-item">Angle Conversion Tool</a>
44+
<a href="/conversionTools/density/density.html" class="dropdown-item">Density Conversion Tool</a>
45+
<a href="/conversionTools/Energy/energy.html" class="dropdown-item">Energy Conversion Tool</a>
46+
<a href="/conversionTools/fuelEfficiency/fuel.html" class="dropdown-item">Fuel Efficiency Calculator</a>
47+
<a href="/conversionTools/image/image.html" class="dropdown-item">Image Conversion Tool</a>
48+
<a href="/conversionTools/imagePdf/imagePdf.html" class="dropdown-item">Image to PDF Conversion Tool</a>
49+
<a href="/conversionTools/length/length.html" class="dropdown-item">Length Conversion Tool</a>
50+
<a href="/conversionTools/power/power.html" class="dropdown-item">Power Conversion Tool</a>
51+
<a href="/conversionTools/pressure/pressure.html" class="dropdown-item">Pressure Conversion Tool</a>
52+
<a href="/conversionTools/temperture/temperture.html" class="dropdown-item">Temperture Conversion Tool</a>
53+
<a href="/conversionTools/Torque/torque.html" class="dropdown-item">Torque Conversion Tool</a>
54+
<a href="#" class="dropdown-item">Demo</a>
55+
56+
</div>
57+
</div>
58+
59+
<div class="btn-group d-none d-md-block py-2">
60+
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Daily Use Tools</button>
61+
<div class="dropdown-menu">
62+
63+
<a href="/dailyUseTools/bmicalculator/bmi-calculator.html" class="dropdown-item">BMI Calculator</a>
64+
<a href="/dailyUseTools/notes/notes.html" class="dropdown-item">Take Notes</a>
65+
<a href="/dailyUseTools/passwordGenerator/passwordGenerator.html" class="dropdown-item">Password Generator</a>
66+
<a href="#" class="dropdown-item">Demo</a>
67+
68+
</div>
69+
</div>
70+
<div class="btn-group d-none d-md-block py-2">
71+
<button
72+
type="button"
73+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
74+
data-toggle="dropdown">
75+
Finance Tools
76+
</button>
77+
<div class="dropdown-menu">
78+
79+
<a href="financeTools/compound-interest-calculator/compoundinterestcalculator.html" class="dropdown-item">Compound Interest Calculator</a>
80+
<a href="/financeTools/discountcalculator/discount.html" class="dropdown-item">Discount Calculator</a>
81+
<a href="/financeTools/emiCalculator/emi-calculator.html" class="dropdown-item">EMI Calculator</a>
82+
<a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="dropdown-item">Mortgage Calculator</a>
83+
<a href="/financeTools/retirementcalaculator/index.html" class="dropdown-item">Retirement Calculator</a>
84+
<a href="/financeTools/service-tax-calculator/tools.html" class="dropdown-item">Service Tax Calculator</a>
85+
<a href="#" class="dropdown-item">Demo</a>
86+
87+
</div>
88+
</div>
89+
90+
<div class="btn-group d-none d-md-block py-2">
91+
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Mathematical Tools</button>
92+
<div class="dropdown-menu">
93+
94+
<a href="/mathmeticalTools/percentageCalculator/percentageCalculator.html" class="dropdown-item">Percentage Calculator</a>
95+
<a href="/mathmeticalTools/romanNumerals/romanNumerals.html" class="dropdown-item">Roman Numerals</a>
96+
<a href="#" class="dropdown-item">Demo</a>
97+
98+
</div>
99+
</div>
100+
101+
</div>
102+
</nav>
103+
<!-- Navbar End -->
104+
<div class="container-fluid p-0 position-relative" style="min-height: 100vh">
105+
<!-- Error Modal -->
106+
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
107+
<div class="modal-dialog">
108+
<div class="modal-content">
109+
<div class="modal-body mx-auto">
110+
<h4 class='text-danger'>Please enter a valid number!</h4>
111+
</div>
112+
<div class="modal-footer">
113+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
<!-- End of Error modal -->
119+
<div class="text-center py-5 hero-section mt-5">
120+
<h3 class="text-white">Number to Roman Numerals Conversion</h3>
121+
</div>
122+
123+
<div class="container">
124+
<div class="mx-auto d-flex flex-column justify-content-center">
125+
<label class='text-body mt-3' for="numeric_value"><h5 class="text-center mx-auto">Enter the number: </h5></label>
126+
<input class="w-25 mx-auto p-2 font-weight-bold" type="text" name="numeric_value" id="numeric_value">
127+
<div class="text-center my-2" >
128+
<button type="button" class="btn btn-primary" id="convert_button">Convert</button>
129+
<p class="mx-auto p-3 overflow-auto text-body text-center text-break" id="result_container"></p>
130+
</div>
131+
</div>
132+
</div>
133+
134+
<footer class="border-top py-3 px-4 w-100 position-absolute" style="bottom: 50px">
135+
<div class="row align-items-center">
136+
<div class="col-md-6">
137+
<p class="m-0">Copyright &copy; 2020 Natalia C</p>
138+
<p class="m-0">
139+
Page Created by
140+
<a href="https://github.com/Natalia504" target="_blank"
141+
>Natalia C</a
142+
>
143+
</p>
144+
</div>
145+
<div class="col-md-6 text-md-right">
146+
<a href="contributors.html" target="_blank" class="text-dark"
147+
>Contributors</a
148+
>
149+
<span class="text-muted mx-2">|</span>
150+
151+
<a href="#" class="text-dark">Terms of Use</a>
152+
<span class="text-muted mx-2">|</span>
153+
<a href="#" class="text-dark">Privacy Policy</a>
154+
</div>
155+
</div>
156+
</footer>
157+
</div>
158+
159+
<script src="romanNumerals.js"></script>
160+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
161+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
162+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
163+
</body>
164+
</html>

‎mathmeticalTools/romanNumerals/romanNumerals.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
function toRomanNum() {
2+
let num_value = parseInt(document.getElementById("numeric_value").value);
3+
let resultContainer = document.getElementById("result_container");
4+
5+
if (resultContainer.innerText !== "") {
6+
resultContainer.innerText = "";
7+
}
8+
if (isNaN(num_value)) {
9+
$("#exampleModal").modal("show");
10+
}
11+
12+
const romanObj = {
13+
1000: "M",
14+
900: "CM",
15+
500: "D",
16+
400: "CD",
17+
100: "C",
18+
90: "XC",
19+
50: "L",
20+
40: "XL",
21+
10: "X",
22+
9: "IX",
23+
5: "V",
24+
4: "IV",
25+
1: "I"
26+
};
27+
const keys = Object.keys(romanObj).sort((a, b) => b - a);
28+
let output = "";
29+
30+
function innerLoop() {
31+
for (var i = 0; i < keys.length; i++) {
32+
if (num_value >= keys[i]) {
33+
output += romanObj[keys[i]];
34+
num_value -= keys[i];
35+
return;
36+
}
37+
}
38+
}
39+
while (num_value > 0) {
40+
innerLoop();
41+
}
42+
return (resultContainer.innerText = output);
43+
}
44+
45+
const targetButton = document.getElementById("convert_button");
46+
targetButton.addEventListener("click", toRomanNum);

0 commit comments

Comments
 (0)
Please sign in to comment.