Introduction
Quote generator project is a web-based JavaScript app. The app is useful for generating a new quote when a button is clicked.
Quote generator project is coded in HTML, CSS, and JavaScript. The project is responsive from small to large device. The project has a simple layout with background image, cards, buttons, social icons, etc. The background images have a basic circuit pattern. The card has a shadow effect.
You can share the quote on twitter also. Whenever you click a next button you will see a new quote automatically generated. The size of the card where the quote appears automatically increase or decrease according to the length of the quote. See the screenshots below.
Building the project quote generator
Programming language like html, css, js is used for building this project. HTML is used for making the layout of the project and adding the text. CSS is used in styling the html element. We are using google fonts. JavaScript is used for making it functional. We are applying DRY (Don’t repeat yourself) principle by using functions and making our code simple and clear.
JavaScript is used generating the quote. We are using on click event listener for button that generates a new quote and same on social icon button that shares the quote on twitter. The quote generator project works correctly without error. It is an intermediate level project. Download the project and get experienced by yourself.
How to use this project?
- Download the project.
- Extract the zip file & get the folder.
- Set up an editor or IDE. (vs code, sublime text, atom)
- Open the project folder on the editor.
- Launch the project in the browser. (chrome, firefox)
- Use the project.
- Enjoy & Share.
Click the button below to get the source code for this quote generator project.