That worked, here's my code:
function convert(num) {
var decNum = [1, 4, 5, 9, 10, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900];
var romNum = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'];
if (num >= decNum[19]) { return romNum[19] + convert(num - 900);}
if (num >= decNum[18]) { return romNum[18] + convert(num - 800);}
if (num >= decNum[17]) { return romNum[17] + convert(num - 700);}
if (num >= decNum[16]) { return romNum[16] + convert(num - 600);}
if (num >= decNum[15]) { return romNum[15] + convert(num - 500);}
if (num >= decNum[14]) { return romNum[14] + convert(num - 400);}
if (num >= decNum[13]) { return romNum[13] + convert(num - 300);}
if (num >= decNum[12]) { return romNum[12] + convert(num - 200);}
if (num >= decNum[11]) { return romNum[11] + convert(num - 100);}
if (num >= decNum[10]) { return romNum[10] + convert(num - 90);}
if (num >= decNum[9]) { return romNum[9] + convert(num - 80);}
if (num >= decNum[8]) { return romNum[8] + convert(num - 70);}
if (num >= decNum[7]) { return romNum[7] + convert(num - 60);}
if (num >= decNum[6]) { return romNum[6] + convert(num - 50);}
if (num >= decNum[5]) { return romNum[5] + convert(num - 40);}
if (num >= decNum[4]) { return romNum[4] + convert(num - 10);}
if (num >= decNum[3]) { return romNum[3] + convert(num - 9);}
if (num >= decNum[2]) { return romNum[2] + convert(num - 5);}
if (num >= decNum[1]) { return romNum[1] + convert(num - 4);}
if (num >= decNum[0]) { return romNum[0] + convert(num - 1);}
if (num === 0) {return "";}
}
It goes through the numerals, returning a numeral, then subtracting the value of the numeral from the European digit, then running the remainder through the function again, until there is no remainder, then it adds and empty space. The total result ends up being a Roman Numeral, and it works up to 900.
Neat, huh? I'm messing with CodePen to see if I can incorporate this into a pen, but the problem I'm having is I need to get the return data into an innerHTML somehow. Maybe I need to place the output into a variable before returning it, in order to access it. O.k., I'm able to retrieve the data returned from the function, because it's not going into a variable.
I finally got it to show up on the HTML!!! It took me all day basically, but I've got the JavaScript code hooked up to the HTML now, and it works!
O.k., first, here's my code, I've got to save it here, it was quite a bit of work to figure this out, I don't have any mentors, it's just me, Google (thanks Google), and Stack Exchange(thanks, contributors).
Okay, here's the HTML:
<h1 class='text-primary'>The Great European Digits to Roman Numerals Converter!</h1>
<h4>Enter European Digits Below!</h4>
<form>
<input type="number" name="a" id="a"><br>
<input type="button" value="Convert" style="font-size: 14px;" onclick="var romanResult = convert(document.getElementById('a').value); insertRoman(romanResult);">
</input>
</form>
<div>
<h4 id="convertedNumber"></h4>
</div>
Things to note:
1. The input type is "button," because when I had the input type as "submit," the output from onclick would appear only for a split second and then vanish. Apparently, this is because submit causes the page to refresh, wiping out the content.
2. I chained functions together in the onclick, you can do that by simply entering a semicolon in between the functions.
3. I was able to use the convert function by entering document.getElementById('a').value as a parameter and assigning 'a' to the name and id fields for the number input type.
4. The problem I spend most of the day trying to solve is how to get the result of the function to equal the .innerHTML. What I finally realized I could do is create a variable, 'romanResult', to hold the value of the output from convert(), THEN I could create another function which used that value and assigned it to .innerHTML, after which I could insert that second function into the onclick event.
I love coding. I ordered two highly rated books today, one on html and css, and one on JavaScript and JQuery. I'm really enjoying front end web development, and at this point, I want to become a front end web dev expert. I could go for learning the full stack instead, but I've got a hunch that if I do that, I'll end up, at least in the short term, knowing not a smattering of many technologies. On the other hand, if I focus 100% on HTML5, CSS3, JavaScript, JQuery, BootStrap, and perhaps AngularJS and/or some other JavaScript framework(s), the material is related enough, and digestible enough, that I could reach a level of knowledge that would allow me to monetize my skills via employment within a few months. Following that, with the infusion of capital that will result in, I'll be able to hire a back end developer and start launching my own sites in partnership with my brother.
All right, then here's the JavaScript:
function convert(num) {
var decNum = [1, 4, 5, 9, 10, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900];
var romNum = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'];
if (num >= decNum[19]) { return romNum[19] + convert(num - 900);}
if (num >= decNum[18]) { return romNum[18] + convert(num - 800);}
if (num >= decNum[17]) { return romNum[17] + convert(num - 700);}
if (num >= decNum[16]) { return romNum[16] + convert(num - 600);}
if (num >= decNum[15]) { return romNum[15] + convert(num - 500);}
if (num >= decNum[14]) { return romNum[14] + convert(num - 400);}
if (num >= decNum[13]) { return romNum[13] + convert(num - 300);}
if (num >= decNum[12]) { return romNum[12] + convert(num - 200);}
if (num >= decNum[11]) { return romNum[11] + convert(num - 100);}
if (num >= decNum[10]) { return romNum[10] + convert(num - 90);}
if (num >= decNum[9]) { return romNum[9] + convert(num - 80);}
if (num >= decNum[8]) { return romNum[8] + convert(num - 70);}
if (num >= decNum[7]) { return romNum[7] + convert(num - 60);}
if (num >= decNum[6]) { return romNum[6] + convert(num - 50);}
if (num >= decNum[5]) { return romNum[5] + convert(num - 40);}
if (num >= decNum[4]) { return romNum[4] + convert(num - 10);}
if (num >= decNum[3]) { return romNum[3] + convert(num - 9);}
if (num >= decNum[2]) { return romNum[2] + convert(num - 5);}
if (num >= decNum[1]) { return romNum[1] + convert(num - 4);}
if (num >= decNum[0]) { return romNum[0] + convert(num - 1);}
if (num === 0) {return "";}
}
function insertRoman(romanResult) {
document.getElementById("convertedNumber").innerHTML = romanResult;
}
So, now that I've got the JavaScript side of things done, I'm going to turn the code above into a nice web page (on CodePen) to keep practicing my HTML and CSS skills.
For future reference, this code gives my text a white outline (black text with a white outline is readable over any color, so it's great when we have an image as the background:
.strokeme
{
color: black;
text-shadow:
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF,
1px 1px 0 #FFF;
}
Here's how to use a background image or set a background color:
body {
background-image: url("");
background-color: #cccccc;
}
Just enter the url in the quotes.
Note that HTML elements should each only have one ID. An element can have multiple classes, but it can only have one id.
Check out my Roman Numerals webpage!
I jumped ahead and completed Bonfire 13 of 21 (it had a Fibonacci Sequence problem, so I simply modified my solution Euler Problem 2, which I had solved previously, and input that, which worked). Here's my solution, which sums all odd numbers in the Fibonacci sequence up to and including the passed number:
function sumFibs(num) {
var fibArray = [1,2];
var total = 2;
for (var i = 0; i < fibArray.length; i += 1) {
var fib = fibArray[fibArray.length - 1] + fibArray[fibArray.length - 2];
if (fib < 4000001) {
fibArray.push(fib);
}
if (fib % 2 !== 0 && fib <= num) {
total = total + fib;
}
}
return total;
}
sumFibs(4);
The next Bonfire, Bonfire 14 of 21, requires us to sum all prime numbers up to the number given, as well as the number given, whether it's a prime or not. My solution to Euler Problem 3, which I still have saved on GitHub, will probably come in handy. I looked back at my blog/notes, and I retrieved an old screenshot of the code for finding the prime factors of a number, and that will also help.
Okay, it's late, I've been at this 10 hours today, I'm calling it a day, but this is exactly the kind of pace I need to become an expert at web development.
I learned so much today, this is great! Good night.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (768 pgs.)
In Progress: "Head First JavaScript," by Eric Freeman and Elisabeth Robson (on pg. 56)
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers (293 pgs., 89 chapters with 20 questions/problems per chapter, for a total of 1,780 coding questions/problems answered)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.
Note: Switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects On 4 of 5
10. Intermediate Algorithm Scripting On 4 of 21 (completed #13 also)
11. Intermediate Front End Development Projects
12. Claim Your Front End Development Certificate
13. Upper Intermediate Algorithm Scripting
14. Automated Testing and Debugging
15. Advanced Algorithm Scripting
16. AngularJS
17. Git
18. Node.js and Express.js
19. MongoDB
20. Full Stack JavaScript Projects
21. Claim Your Full Stack Development Certificate
After the FCC work above (estimated to take 800 hours), there are 800 more hours of coding projects on behalf of non-profits, which, in addition to contributing to the common good, provide us an opportunity to expand our networks and build a robust portfolio.
Hours Spent Coding Today: 10
Total Hours Coding: 707
No comments:
Post a Comment