cleaning

problems/file-explorer/solutions/react-ts/src/App.tsx

@@ -111,7 +111,7 @@ function FileTree({ treeData }: { treeData: Readonly<FileTreeNode[]> }) {
 
 export default function App() {
   return (
-    <main className="bg-gray-800 h-screen w-full text-white text-2xl p-12">
+    <main className="!bg-gray-800 w-full text-white text-2xl p-12 h-full">
       <FileTree treeData={fileTreeData} />
     </main>
   );

problems/file-explorer/solutions/react-ts/src/styles.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   font-family: "Poppins";
 }

problems/traffic-light/README.md

@@ -4,8 +4,6 @@
 
 Create a simulated traffic light. The traffic light should cycle through red, yellow, and green lights automatically, mimicking the behavior of a real traffic signal.
 
-![Traffic Light Demo](solutions/react-ts/public/images/demo.png)
-
 ## Requirements
 
 1. Display three lights: red, yellow, and green.
@@ -15,8 +13,4 @@ Create a simulated traffic light. The traffic light should cycle through red, ye
    - Yellow: 1 second
    - Red: 4 seconds
 4. Only one light should be active at a time.
-5. The cycle should repeat indefinitely.
-
-## Live Demo
-
-[Check out the live demo here](#)
+5. The cycle should repeat indefinitely.

problems/traffic-light/solutions/react-ts/src/styles.css

@@ -4,12 +4,15 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: "Poppins";
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
 }
 
 body {
-  font-family: sans-serif;
+  font-family: "Poppins";
 }
 
 .traffic-light-container {

problems/twitter-like-II/README.md

@@ -2,8 +2,6 @@
 
 ## Problem Description
 
-![Demo](solutions/react-ts/public/images/demo.png)
-
 The basic Twitter like button can be visually dull without animation. Building on the first Twitter like challenge, your task is to add animation to the button. Additionally, implement a like counter that starts at 32.
 
 ## Requirements

problems/twitter-like-II/solutions/react-ts/src/App.tsx

@@ -84,7 +84,7 @@ export default function App() {
   const totalPostLikes = postLikes + Number(isLiked);
 
   return (
-    <main className=" h-screen flex items-center justify-center bg-[#9DA3AF]">
+    <main className="flex items-center justify-center bg-[#9DA3AF] h-full">
       <div className="flex justify-center items-center">
         <span className="text-2xl">{totalPostLikes}</span>
         <LikeButton isLiked={isLiked} setIsLiked={setIsLiked} />

problems/twitter-like-II/solutions/react-ts/src/styles.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   font-family: "Poppins";
 }

problems/twitter-like/README.md

@@ -4,8 +4,6 @@
 
 Create a "like button" component similar to the one used in Twitter tweets. The button should be initially set to "false" and can be toggled by clicking on it.
 
-![File Tree Demo](solutions/react-ts/public/images/demo.png)
-
 ## Requirements
 
 - Implement a debounce mechanism to prevent unnecessary requests.

problems/twitter-like/solutions/react-ts/src/App.tsx

@@ -80,7 +80,7 @@ export default function App() {
   );
 
   return (
-    <main className="bg-gray-400 h-screen flex items-center justify-center">
+    <main className="flex items-center justify-center bg-gray-400 h-full">
       <LikeButton isLiked={isLiked} setIsLiked={setIsLiked} />
     </main>
   );

problems/twitter-like/solutions/react-ts/src/styles.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   font-family: "Poppins";
 }

problems/whack-a-mole/README.md

@@ -4,8 +4,6 @@
 
 Create a Whack-a-Mole game where players must click on moles as they randomly appear from holes. The game tests reflexes and timing as players try to achieve the highest score possible within a time limit.
 
-![Whack a Mole Demo](solutions/react-ts/public/images/demo.png)
-
 ## Requirements
 
 - The game should have a grid of 9 holes.
@@ -15,8 +13,4 @@ Create a Whack-a-Mole game where players must click on moles as they randomly ap
 - New moles randomly appear from the holes as the game progresses.
 - The player has 20 seconds to hit as many moles as possible.
 - The game ends when the timer runs out. The final score is displayed and the player has the option to play again.
-- The game should have a start button and display the current score and time remaining.
-
-## Live Demo
-
-[Check out the live demo here](#)
+- The game should have a start button and display the current score and time remaining.

problems/whack-a-mole/solutions/react-ts/src/styles.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   font-family: "Poppins";
 }

problems/wordle-game/solutions/react-ts/src/styles.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   font-family: "Poppins";
   background-color: #121214;

starter/README.md

@@ -2,8 +2,6 @@
 
 ## Problem Description
 
-![File Tree Demo](solutions/react-ts/public/images/demo.png)
-
 ## Requirements
 
 ## Example

starter/solutions/react-ts/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

starter/solutions/react-ts/src/App.tsx

@@ -1,5 +1,5 @@
 import "./styles.css";
 
 export default function App() {
-  return <main className="bg-gray-400 h-screen">Hello!</main>;
+  return <main className="bg-gray-400 h-full">Hello!</main>;
 }

starter/solutions/react-ts/src/styles.css

@@ -4,6 +4,14 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   font-family: "Poppins";
+  background-color: black;
 }