Toggle Text App - Step 13

Curriculum Help
1

Tell us what’s happening:

const { useState } = React;

export const ToggleApp = () => {
const [isVisible, setIsVisible] = useState(false);

const handleToggleVisibility = () => {
setIsVisible(!isVisible);
}

return (

{isVisible ? “Hide” : “Show”}
Message

{isVisible && I love freeCodeCamp!}

);
};

Your code so far

<!-- file: index.html -->
<!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>

/* file: styles.css */
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;
}

/* file: index.jsx */
const { useState } = React;

export const ToggleApp = () => {
  const [isVisible, setIsVisible] = useState(false);
  
  const handleToggleVisibility = () => {
    setIsVisible(!isVisible);
  }
  
  return (
    <div id="toggle-container">
      <button onClick={handleToggleVisibility} id="toggle-button">{ !isVisible ? "Hide" : "Show"}
{/* User Editable Region */}
        Message
{/* User Editable Region */}
      </button>
      {isVisible && <p id="message">I love freeCodeCamp!</p>}
    </div>
  );
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Challenge Information:

Toggle Text App - Step 13

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-toggle-text-app/67cd61c24bfc0a240132fd2f.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!