Clenia

first_challenge.js

const dbQuery = (query) => {
 return new Promise( (resolve, reject) => {
   setTimeout( ()=> { resolve(`Results for db query: ${query}`) }, 1000 * Math.floor(5*Math.random()) );
 } )
}
const queries = ['Query 1', 'Query 2', 'Query 3', 'Query 4', 'Query 5'];

// Fix this snippet of code so that it prints the query results
queries.forEach( q => console.log(dbQuery(q)) );

second_challenge.md

Problem Statement

Create a single-page application using React Hooks that fetches the data from the following endpoint:

https://jsonplaceholder.typicode.com/posts

This endpoint returns a list of blog posts in JSON format. You need to display these blog posts in a visually appealing way on the page.

Requirements

1. Create a React app in your local.
2. Use React Hooks for all state management and component logic.
3. Fetch the data from the above endpoint when the component is first rendered.
4. Display the title, body, and author of each blog post.

third_challenge.md

1. Add a spinner/loading that shows while the data is being fetched.
2. Add a filter by title

queries.forEach( async (q) => console.log( await dbQuery(q)) )

import "./styles.css";
import{ useState, useEffect} from "react";

export default function App() {
const [list, setList] = useState([])
const url = "https://jsonplaceholder.typicode.com/posts"

useEffect( () => { getData() },[])

const getData = async() => {
try {
const resp = await fetch(url);
const dataR = await resp.json()
setList(dataR);
} catch (error) {
console.log("error", error)
}
}

console.log(list)
return (

{list.map((item) => {
return (

• {item.title}

)
})}

</div>

);
}

// userId: 1
// id: 1
// title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
// body: "quia et suscipit
// suscipit recusandae consequuntur expedita et cum
// reprehenderit molestiae ut ut quas totam
// nostrum rerum est autem sunt rem eveniet architecto"

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
const [list, setList] = useState([]);
const url = "https://jsonplaceholder.typicode.com/posts";

useEffect(() => {
getData();
}, []);

const getData = async () => {
try {
const resp = await fetch(url);
const dataR = await resp.json();
setList(dataR);
} catch (error) {
console.log("error", error);
}
};

const filtered = list.filter((item) => {
item.title;
});

console.log(list);
return (

{
!list?.length ?

is Loading ...

:
list.map((item) => {
return (

• {item.title}

);
})}

);
}

// userId: 1
// id: 1
// title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
// body: "quia et suscipit
// suscipit recusandae consequuntur expedita et cum
// reprehenderit molestiae ut ut quas totam
// nostrum rerum est autem sunt rem eveniet architecto"