curriculum/challenges/english/blocks/workshop-toggle-text-app/67cd33334277c108f5e0cb21.md
In previous lessons, you learned about state and how to work with the useState hook. For this workshop, you will create an app that will hide/show a piece of text on the screen when a user clicks on a button.
All of the boilerplate code, including the CSS, has been provided for you.
To begin, return a div element inside of the ToggleApp component with an id called toggle-container.
You should have a div element.
assert.exists(document.querySelector("div"));
Your div element should have an id called toggle-container.
const el = document.getElementById("toggle-container");
assert.exists(el);
assert.strictEqual(el.tagName, "DIV");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Toggle Visibility</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
<script
data-plugins="transform-modules-umd"
type="text/babel"
src="index.jsx"
></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-modules-umd"
type="text/babel"
data-presets="react"
data-type="module"
>
import { ToggleApp } from "./index.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(<ToggleApp />);
</script>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
#toggle-container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#toggle-button {
padding: 10px 20px;
border: none;
background: #007BFF;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
#toggle-button:hover {
background: #0056b3;
}
#message {
margin-top: 20px;
font-size: 1.125rem;
color: #333;
}
const { useState } = React;
--fcc-editable-region--
export const ToggleApp = () => {
};
--fcc-editable-region--