In this article, we will implement a republic day quote generator using react.js. This could be a great mini-project to add to your portfolio that will showcase your skills in react.js.
Before we implement it, let’s see the motivation behind it.
When is the Republic day Holiday in 2023?
Republic day holiday 2023 marks the 74th Republic day of India and every year it is celebrated on 26th January.
The day of 26th January 2023 is Thursday.
Why does India celebrate republic day?
Republic day in India is celebrated to pay tribute to all the martyrs and the people involved in the making of the constitution.
The constitution drafting committee was led by Dr. B.R. Ambedkar. You would be amazed to know the following facts about the constitution –
- It is the longest constitution in the world and includes 145,000 handwritten words.
- It was not typeset or printed but was handwritten and calligraphic in both English and Hindi.
- It took precisely 2 years, 11 months, and 17 days to create the Constitution of India.
- Each page of the constitution is decorated by artists.
- As of October 2021, a total of 105 amendments have been done to the Constitution of India since it was first enacted in 1950.
It is celebrated to remind ourselves that we are living with dignity and all such freedom, this all is possible because these people had sacrificed their lives for our betterment.
It’s a day to infuse patriotism in ourselves and our children so that we all collectively promise to contribute to the betterment of the nation and its people.
Note:- Republic Day is also known as ganatantra Diwas.
How Republic day is celebrated in India?
On 26th January 1950, the constitution was adopted and India become a democratic country. Since then, every year India celebrate the 26th of January as the Indian Republic day lavishly with so much pride and zeal. This year in 2023, the 26th Jan which is Thursday marks the 74th republic day.
The morning of Republic day really gives us goosebumps, all the streets, nukkad, and chauraha of the country everywhere you will hear patriotic songs.
The morning parade starts in each school and college and once the parade is over, several cultural activities and programs are performed by the students to remember the martyr and enjoy the happiness of freedom.
The President of India hoists the national flag in New Delhi which is the capital of India. Then the glorious among all parades start at Rajpath (now known as Kartavya Path) where the Indian Armed forces showcase their skills.
The complete day our mobiles keep giving notifications due to the continuous sharing of Republic day quotes. People share the quotes with their friends by sending Whatsapp messages and on social media platforms.
That’s how we get the idea of building this app where users can get random quotes at each 10s interval. So at each 10s interval, we get a new republic day quote which we share among friends and family.
Implementation of Republic day quote generator
The final output should appear like below and can be seen live at https://ygilce.csb.app/
The quotes at the bottom will refresh every 10 seconds and give us a new quote.
Folder Structure
republic-quote-generator
- src
- app.js
- index.js
- styles.css
- data.js
- public
- index.html
Let’s create the project –
npx create-react-app republic-quote-generatorReact will create the project with multiple files that we don’t want e.g we are not going to write the unit test so you can delete the redundant files. Or if you want to write in future you can keep it, it won’t harm.
app.js
In this project, we need to have the quotes array which could be present in any database or any file.
For simplicity, we have kept the quotes array in the data.js file. And we can keep updating the file with more quotes.
Now we have the array of data, we just need to find the indices randomly after a certain interval (e.g 10sec).
Let me explain how we are getting the random index –
Math.random(0, 1) – gives a random float number between 0 and 1
Now, multiply this number by the length of the array –
Math.random(0, 1) * len // this gives the number in range of 0 to len – 1
As the output of the above operation is in the float so we can take a floor of it.
Math.floor(Math.random(0, 1) * len) // gives a integer number between 0 to len – 1
Once we get the index, we can get the quote and set this on the component state through the React useState hook.
We have placed the logic inside the useEffect hook as we need to fetch the random quote at a certain interval – so we used setInterval and when the component unmounts we need to clear the interval.
I hope the implementation is clear now.
You can find the complete code at https://codesandbox.io/s/exciting-rui-ygilce
You might also be interested to build – How to create a search filter in react.js?
