The fifth project of OpenClassroom's Front-End web developer path required me to program for a quotation generator which would generate 1 to 5 quotes from two different books. I decided to choose two different George Orwell books to Quote. Thus, the design was crafted with a Orwellian dystopic theme using html, bootstrap and CSS. Additionally, the functionallity of the website was established using vanilla JavaScript. This project served as a great way to learn JavaScript.
- HTML5
- CSS3
- Bootstrap
- Vanilla JavaScript
https://mbdev95.github.io/OpenClassrooms-Project-5-Orwellian-Quotation-Generator/
I used bootstrap to efficiently create most of the basic components including the buttons, alert and radio boxes. In addition, while the other components were generated using HTML5, they were often styled using bootstrap styling classes. For example, Bootstrap was used to quickly add margins and initiate a flex display in certain components. Custom CSS was used to create more specific styles such as creating a sticky footer. The quotation generator was made responsive through the use of media queries with a mobile-first approach.
The quotes were generated randomly by creating a series of random string sentence fragments and storing each fragment in as an array item within an array representing one of the two Orwell books. A quote generator function then selected for a random sentence fragment from the selected book's arrays using a random number generated by the Math.random function as the index value. The three sentence fragments were then combined and returned.
A second function executes a for loop which will render as many quotes as the user selected by executing the quote generator function as many times as there are iterations. Each generated quote will be rendered to the page. An if conditional statement will also check if one of the two books was selected. If neither is selected an alert will be given.
A third function called clearQuotes() causes the inner html for the element where the quotes are rendered to the page to be cleared to an empty string. This function is executed every time the clear quotes button is clicked.
In conclusion, my fifth project with OpenClassrooms allowed me to learn vanilla JavaScript and make use of my previous skills in HTML, CSS and bootstrap by creating a fun quotation generator application. The next three projects in OpenClassrooms expand greatly on the programming concepts learned in this project.