Merge branch 'demo'

OmkarKirpan · Oct 23, 2023 · 34c41ad · 34c41ad
2 parents 0cdb304 + 1a56948
commit 34c41ad
Show file tree

Hide file tree

Showing 2 changed files with 225 additions and 27 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,15 +1,109 @@
-*{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;500;600;700;800;900&display=swap");
 :root{
   --background: #FFF;
   --font: #000
+  --fontfamily: "Raleway", sans-serif;
+  --white:rgb(255, 255, 255);
+  --button: rgb(163, 89, 231);
+  --text: rgba(0, 0, 0, 0.733);
+  --wrong:rgb(243, 12, 58);
+  --redlight:rgba(220, 20, 60, 0.342);
+  --right:rgb(113, 221, 4);
+  --greenlight:rgba(113, 221, 4, 0.342);
+}
+html,
+body {
+  margin: 0%;
+  padding: 0%;
+  font-family: raleway;
+  box-sizing: border-box;
+}
+.App {
+  font-family: var(--fontfamily);
+  font-weight: bold;
+  width: 100vw;
+  height: 100vh;
+}
+.main {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+  padding: 3% 0%;
+  border-radius: 20px;
+  background-color: rgb(255, 255, 255);
+  border-width: 5px;
+  border-style: solid;
+}
+h1 {
+  margin: 0%;
+  padding: 2%;
+  color: var(--text);
+  text-align: center;
+}
+button {
+  padding: 2%;
+  margin: 2%;
+  border: 2px solid var(--button);
+  height: fit-content;
+  border-radius: 10px;
+  font-family: var(--fontfamily);
+  background-color: var(--button);
+  color: var(--white);
+  font-weight: bold;
+}
+button:active {
+  background-color:var(--white);
+  border: 2px solid var(--button);
+  color: var(--button);
+}
+
+
+.guess-me {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 70%;
 }
 
-.darkmode{
+
+p {
+  text-align: center;
+  width: 45%;
+  margin: auto;
+}
+.correct{
+  color: var(--right);
+  font-weight: bold;
+  padding: 5%;
+  background-color: var(--greenlight);
+  border-radius: 10px;
+  border: 2px solid var(--right);
+
+}
+.wrong{
+  color:var(--wrong);
+  padding: 5%;
+  background-color: var(--redlight);
+  border-radius: 10px;
+  border: 2px solid var(--wrong);
+}
+h3 {
+  text-align: center;
+  color: var(--text);
+  font-size: 1rem;
+}
+.congo{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 100vh;
+}
+
+
+/* .darkmode{
   --background: #1b1c25;
   --font: #ffffff
 }
@@ -60,4 +154,6 @@ button + button {
   position: absolute;
   top: 30px;
   right: 30px;
-}
+} */
+
+
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,20 +1,107 @@
+// import { useEffect, useState } from "react";
+// import "./App.css";
+
+// export const generateRandomColor = () => {
+//   return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
+// };
+
+// enum Result {
+//   Correct,
+//   Wrong,
+// }
+
+// function App() {
+//   const [color, setColor] = useState("");
+//   const [answers, setAnswers] = useState<String[]>([]);
+//   const [result, setResult] = useState<Result | undefined>(undefined);
+
+//   const generateRandomColors = () => {
+//     let actualColor = generateRandomColor();
+//     setColor(actualColor);
+//     setAnswers(
+//       [actualColor, generateRandomColor(), generateRandomColor()].sort(
+//         () => 0.5 - Math.random()
+//       )
+//     );
+//   };
+
+//   useEffect(() => {
+//     generateRandomColors();
+//   }, []);
+
+//   function handleAnswerClicked(answer: String): void {
+//     if (answer === color) {
+//       console.log("Correct answer");
+//       setResult(Result.Correct);
+//       generateRandomColors();
+//     } else {
+//       console.log("Wrong answer");
+//       setResult(Result.Wrong);
+//     }
+//   }
+
+//   function changeTheme(){
+//     document.body.classList.toggle("darkmode");
+//   }
+
+
+//   return (
+//     <div className="App">
+//       <button
+//       className="theme-button"
+//       onClick={changeTheme}
+//       >Change Theme</button>
+//       <div>
+//         <div data-testid="guess-me" className="guess-me" style={{ background: color }}></div>
+
+//         {answers.map((answer, index) => (
+//           <button onClick={() => handleAnswerClicked(answer)} key={index}>
+//             {answer.toUpperCase()}
+//           </button>
+//         ))}
+
+//         {result === Result.Correct && <div className="correct">Correct!</div>}
+//         {result === Result.Wrong && <div className="wrong">Wrong Answer</div>}
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default App;
+
+
+
+
+
+
+
+
+
+
+
 import { useEffect, useState } from "react";
 import "./App.css";
+import ConfettiExplosion from 'react-confetti-explosion';
+
 
 export const generateRandomColor = () => {
   return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
 };
 
+
 enum Result {
   Correct,
   Wrong,
 }
 
+
 function App() {
   const [color, setColor] = useState("");
+  const [bordercolor, setborderColor] = useState("");
   const [answers, setAnswers] = useState<String[]>([]);
   const [result, setResult] = useState<Result | undefined>(undefined);
 
+
   const generateRandomColors = () => {
     let actualColor = generateRandomColor();
     setColor(actualColor);
@@ -24,47 +111,62 @@ function App() {
       )
     );
   };
+  const generateColor = () => {
+    let actualColor = generateRandomColor();
+    setborderColor(actualColor);
+  };
+
 
   useEffect(() => {
     generateRandomColors();
+    generateColor();
   }, []);
 
+
   function handleAnswerClicked(answer: String): void {
     if (answer === color) {
       console.log("Correct answer");
       setResult(Result.Correct);
       generateRandomColors();
+      // generateColor();
     } else {
       console.log("Wrong answer");
       setResult(Result.Wrong);
     }
   }
 
-  function changeTheme(){
-    document.body.classList.toggle("darkmode");
-  }
+
 
 
   return (
-    <div className="App">
-      <button
-      className="theme-button"
-      onClick={changeTheme}
-      >Change Theme</button>
-      <div>
-        <div data-testid="guess-me" className="guess-me" style={{ background: color }}></div>
-
-        {answers.map((answer, index) => (
-          <button onClick={() => handleAnswerClicked(answer)} key={index}>
-            {answer.toUpperCase()}
-          </button>
-        ))}
-
-        {result === Result.Correct && <div className="correct">Correct!</div>}
-        {result === Result.Wrong && <div className="wrong">Wrong Answer</div>}
+    <div className="App" style={{ background: color }} >
+
+
+      <div className="congo">
+        {result === Result.Correct && <ConfettiExplosion />}
+      </div>
+      <div className="main" style={{ borderColor: bordercolor }} >
+        <h1>🎨GuessColors</h1>
+        <h3>Test your yourself by guessing the right Hex code for the colors on the background</h3>
+        <div data-testid="guess-me" className="guess-me" >
+
+
+          {answers.map((answer, index) => (
+            <button onClick={() => handleAnswerClicked(answer)} key={index}>
+              {answer.toUpperCase()}
+            </button>
+          ))}
+        </div>
+
+
+        <p>
+          {result === Result.Correct && <div className="correct"> You guessed it right!</div>}
+          {result === Result.Wrong && <div className="wrong">Not your lucky guess!</div>}
+        </p>
       </div>
     </div>
   );
 }
 
+
 export default App;