added styled components, logic changes

code-and-cats · May 27, 2023 · f89d3c6 · f89d3c6
1 parent 3df5b1f
commit f89d3c6
Show file tree

Hide file tree

Showing 21 changed files with 372 additions and 223 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
-# random-randomizer
+## Random-randomizer
 
-A small project to practice React useState.
+A small project to practice React!
+
+## View it live
+
+https://random-randomizer.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -9,7 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^5.3.9",
+    "styled-components": "^5.3.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/code/public/favicon.ico b/code/public/favicon.ico
diff --git a/code/public/index.html b/code/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
@@ -12,7 +13,6 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/code/public/manifest.json b/code/public/manifest.json
diff --git a/code/src/App.css b/code/src/App.css
@@ -4,82 +4,3 @@
   text-align: center;
   font-family: 'Archivo', sans-serif;
 }
-
-main {
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  gap: 2rem;
-}
-
-.two-choices-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-}
-
-button {
-  width: 180px;
-  height: 50px;
-  border-radius: 12px;
-  background-color: rgba(221, 217, 219);
-  border: none;
-  font-family: 'Archivo', sans-serif;
-  font-weight: 600;
-}
-
-button:hover {
-  background-color:  rgba(221, 217, 219, 0.36);
-  color: white;
-}
-
-.yes-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 200px;
-  height: 200px;
-  border: 15px solid rgba(221, 217, 219, 0.36);
-  border-radius: 50%;
-}
-
-.no-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 200px;
-  height: 200px;
-  border: 15px solid rgba(221, 217, 219, 0.36);
-  border-radius: 50%;
-}
-
-.more-choices-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-}
-
-.gradient-background-1 {
-  background: linear-gradient(-45deg, #19cfc5,#18a3a0,#4bdaf3,#4b8ff3,#4b63f3);
-  background-size: 400% 400%;
-  animation: GradientAnimation 10s ease infinite;
-}
-
-.gradient-background-2 {
-  background: linear-gradient(-45deg, #974bf3,#c94bf3,#b04bf3,#693ad6,#9433c2);
-  background-size: 400% 400%;
-  animation: GradientAnimation 10s ease infinite;
-}
-
-@keyframes GradientAnimation {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,18 +1,41 @@
-import './App.css';
-import YesNo from './components/YesNo';
-import { RandomNumber } from './components/RandomNumber';
-import Header from './components/Header';
+import React, { useState } from 'react'
+import { RandomNumber } from './components/RandomNumber'
+import Header from './components/Header'
+import { Background } from './components/Background'
+import TwoChoices from './components/TwoChoices'
+import GlobalStyles from './components/GlobalStyle'
+
+const App = () => {
+  const [xOrY, setXOrY] = useState(null)
+  const [loading, setLoading] = useState(false)
+  console.log(xOrY)
+
+  const handleRandomGenerator = () => {
+    setLoading(true)
+    //setTimeout to show the loading for 2 seconds
+    setTimeout(() => {
+      //the random generation happens here
+      const randomGenerator = Math.floor(Math.random() * 2) + 1
+      setXOrY(randomGenerator)
+      //removing loading again
+      setLoading(false)
+    }, 2000)
+  }
 
-function App() {
   return (
-    <div className="App">
-     <Header />
-     <main>
-     <YesNo />
-     <RandomNumber />
-     </main>
-    </div>
-  );
+    <>
+      <GlobalStyles />
+      <Background x={xOrY === 1} y={xOrY === 2} loading={loading}>
+        <Header />
+        <TwoChoices
+          onXOrYChange={setXOrY}
+          loading={loading}
+          onRandomGenerator={handleRandomGenerator}
+          xOrY={xOrY}
+        />
+        <RandomNumber />
+      </Background>
+    </>
+  )
 }
-
-export default App;
+export default App
diff --git a/code/src/App.test.js b/code/src/App.test.js
diff --git a/code/src/components/Background.js b/code/src/components/Background.js
@@ -0,0 +1,62 @@
+import styled, { css, keyframes } from 'styled-components'
+
+const GradientAnimation = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+  `
+export const Background = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background: linear-gradient(-45deg, #85ffbd, #fffb7d, #e2ff7d, #3adea6);
+  background-size: 400% 400%;
+  animation: ${GradientAnimation} 10s ease infinite;
+
+  ${(props) =>
+    props.x &&
+    css`
+      background: linear-gradient(
+        -45deg,
+        #19cfc5,
+        #18a3a0,
+        #4bdaf3,
+        #4b8ff3,
+        #4b63f3
+      );
+      background-size: 400% 400%;
+      animation: ${GradientAnimation} 10s ease infinite;
+    `}
+
+  ${(props) =>
+    props.y &&
+    css`
+      background: linear-gradient(
+        -45deg,
+        #974bf3,
+        #c94bf3,
+        #b04bf3,
+        #693ad6,
+        #9433c2
+      );
+      background-size: 400% 400%;
+      animation: ${GradientAnimation} 10s ease infinite;
+    `}
+
+  ${(props) =>
+    props.loading &&
+    css`
+      background: linear-gradient(-45deg, #ffad4d, #ffd55f, #fffa83, #fff);
+      background-size: 400% 400%;
+      animation: ${GradientAnimation} 10s ease infinite;
+    `}
+`
diff --git a/code/src/components/GlobalStyle.js b/code/src/components/GlobalStyle.js
@@ -0,0 +1,8 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    font-family: 'Archivo', sans-serif;
+  }
+`
+export default GlobalStyles
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -1,11 +1,44 @@
-import React from "react";
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledHeader = styled.header`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const StyledH1 = styled.h1`
+  font-weight: 700;
+  text-align: center;
+  margin: 0;
+  padding-top: 2rem;
+`
+
+const StyledP = styled.p`
+  font-size: 12px;
+  margin: 5px;
+`
+
+const StyledSmallP = styled.p`
+  font-weight: 700;
+  font-size: 10px;
+`
+const StyledH2 = styled.h2`
+  font-weight: 700;
+  font-size: 14px;
+  margin: 0;
+  padding-top: 1rem;
+`
 
 const Header = () => {
-    return (
-        <header>
-            <h1>Vios random randomizer</h1>
-        </header>
-    )
+  return (
+    <StyledHeader>
+      <StyledH1>Vios random randomizer</StyledH1>
+      <StyledSmallP>For when choices need to be made.</StyledSmallP>
+      <StyledH2>Click the circle to generate your choice! </StyledH2>
+      <StyledP>1 for no. 2 for yes.</StyledP>
+    </StyledHeader>
+  )
 }
 
-export default Header;
+export default Header