Bored Tasks Web App -
Contents:
About:
The "Bored Tasks" project is a web application built using the React.js framework and powered by the BoredAPI. This application aims to help people find fun and engaging activities to do when they are bored.
Upon opening the application, the user is presented with a simple user interface that displays a activity of any category.
Each activity is displayed randomly and provides the user with a link (optional to activity) to the most relevent resource to complete the task or atleast learn something about it and number of participants requireed to do it.
Overall, this project aims to provide an easy-to-use, interactive platform for people who are bored and looking for something fun and engaging to do. By leveraging the power of the BoredAPI and the React.js framework, this application offers a vast array of activities for users to choose from, making it an ideal platform for individuals of all ages and interests.
Working:
This code uses the React library to create a component called App. This component is a class-based component that contains state data which is initially set to an empty string for the task.
When the component is mounted on the DOM, the componentDidMount() lifecycle method is called which then calls the fetchTasks() function. This function sends a GET request to the https://www.boredapi.com/api/activity/ API endpoint using the axios library. The API response data is then extracted and stored in the component's state data.
In the render() method, the state data is accessed using destructuring assignment. The data is then displayed in the JSX markup by rendering it as HTML elements on the webpage.
The code checks if the link parameter has a value and if it does, it displays it as a clickable hyperlink. If not, the hyperlink is not shown.
Finally, a button is rendered which, when clicked, calls the fetchTasks() function to retrieve new data from the API endpoint and update the component's state with the new data.
[ Generated by ChatGPT.]
Resources used:
- Errors solved with help of Stackoverflow.
- Data generated with BoredAPI.
- This project was bootstrapped with React App..
- Deployed on Google Firebase