Crie o máximo de exercícios práticos SÓ SOBRE o que o texto que eu irei mandar depois desse input. Esses exercícios devem seguir dois formatos:

1. Completar o código.
2. Achar um problema no código.

Ambos os formatos de exercício devem:

1. Serem curtos.
2. Tudo em português.
3. Fornercer um bloco com código já pronto com markdown. Nesse código deve ter um comentário no topo dele dizendo o que o usuário deve fazer pra completar o exercício.
4. Não dizer o que o usuário deve usar no exercício.
5. Não dizer como resolver o exercício.

Para te ajudar a entender melhor sobre como eu gostaria que fosse a qualidade das perguntas e respsotas, vou te fornecer um texto que li e as perguntas e respsotas que eu mesmo fiz, como exemplo de como eu gostaria que você fizesse.

O texto que li:

"JavaScript in JSX with Curly Braces
JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.

You will learn
How to pass strings with quotes
How to reference a JavaScript variable inside JSX with curly braces
How to call a JavaScript function inside JSX with curly braces
How to use a JavaScript object inside JSX with curly braces
Passing strings with quotes 
When you want to pass a string attribute to JSX, you put it in single or double quotes:


App.js
export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}


Here, "https://i.imgur.com/7vQD0fPs.jpg" and "Gregorio Y. Zara" are being passed as strings.

But what if you want to dynamically specify the src or alt text? You could use a value from JavaScript by replacing " and " with { and }:


App.js
export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}


Notice the difference between className="avatar", which specifies an "avatar" CSS class name that makes the image round, and src={avatar} that reads the value of the JavaScript variable called avatar. That’s because curly braces let you work with JavaScript right there in your markup!

Using curly braces: A window into the JavaScript world 
JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces { }. The example below first declares a name for the scientist, name, then embeds it with curly braces inside the <h1>:


App.js
export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}


Try changing the name’s value from 'Gregorio Y. Zara' to 'Hedy Lamarr'. See how the list title changes?

Any JavaScript expression will work between curly braces, including function calls like formatDate():


App.js
const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}


Where to use curly braces 
You can only use curly braces in two ways inside JSX:

As text directly inside a JSX tag: <h1>{name}'s To Do List</h1> works, but <{tag}>Gregorio Y. Zara's To Do List</{tag}> will not.
As attributes immediately following the = sign: src={avatar} will read the avatar variable, but src="{avatar}" will pass the string "{avatar}".
Using “double curlies”: CSS and other objects in JSX 
In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like { name: "Hedy Lamarr", inventions: 5 }. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: person={{ name: "Hedy Lamarr", inventions: 5 }}.

You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the style attribute:


App.js
export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}


Try changing the values of backgroundColor and color.

You can really see the JavaScript object inside the curly braces when you write it like this:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>
The next time you see {{ and }} in JSX, know that it’s nothing more than an object inside the JSX curlies!

Pitfall
Inline style properties are written in camelCase. For example, HTML <ul style="background-color: black"> would be written as <ul style={{ backgroundColor: 'black' }}>  in your component.

More fun with JavaScript objects and curly braces 
You can move several expressions into one object, and reference them in your JSX inside curly braces:


App.js
const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}



Show more
In this example, the person JavaScript object contains a name string and a theme object:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
The component can use these values from person like so:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>
JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript."


As perguntas e respsotas que fiz:

- Adicione um link qualquer á imagem retornada.

```javascript
function ImagemDePerfil() {
  return (
    <img/>
  );
}
```>>>
- Use as variávels `imagemLink` e `imagemAlt` nos atributos `src` e `alt`.

```javascript
function ProdutoDaImagem() {
  const imagemLink = valor;
  const imagemAlt = valor;

  return (
    <img
      className="product-image"
      src=
      alt=
    />
  );
}
```>>>
- A função deve retornar `"Bem-vindo"` seguido pelo nome do usuário.

```javascript
function Saudacao() {
  const nomeDoUsuario = valor;
  
  return (
    <h2>Bem-vindo, </h2>
  );
}
```>>>
- No lugar de `"pessoa"`, use o resultado da função `formatName`.

```javascript
function formatarNome() {
  // ...
}

function SaudarUsuario() {
  return (
    <h1>Bem-vinda, pessoa!</h1>
  );
}
```>>>
- Qual é o problema do código?

```javascript
function AvatarDoUsuario() {
  const linkDoAvatar = 'https://i.imgur.com/user-avatar.jpg';

  return (
    <img
      className="user-avatar"
      src="{avatarUrl}"
      alt="Avatar do usuário"
    />
  );
}
```>>>
- Adicione um background verde no botão, mas tem que ser inline.

```javascript
function Botao() {
  return (
    <button style= >
      Clique aqui
    </button>
  );
}
```>>>
- Qual é o problema do código?

```javascript
function Notificar() {
  return (
    <p style={{
      'background-color': 'yellow',
      'font-size': '18px',
      'text-align': 'center'
    }}>
      Esta é uma notificação importante.
    </p>
  );
}
```>>>
- A propriedade `usuario.estilo` deve ser o valor do atributo `style`.

```javascript
const usuario = {
  nome: 'Alice Johnson',
  estilo: {
    // ...
  }
};

function PerfilDoUsuario() {
  return (
    <div style= >
      <h1>Perfil</h1>
      <p>Bem-vindo!</p>
    </div>
  );
}
```>>>

Observação: Cada pedaço de informação do texto precisa ter uma pergunta e uma respsota, porém não se importe com a quantidade delas.