challenge attempts

app/javascript/components/challenges/Cards.tsx

@@ -4,11 +4,27 @@ export default function Cards() {
   const nasaApiKey = '6H6EdNLLrDu8SC1LZMJkbJzoGIghjvrjzgQpF72W';
   const baseUri = 'https://api.nasa.gov/planetary/apod';
 
+  const []
+
+  const Component = React.Component;
+  const Shuffle = window.Shuffle;
+
+/* I understand that I need to assign these images a random number
+  and pass through to the onClick action of the button, so that
+  each time it's clicked, it will grab a different image
+  */
+
+  const randomID = Math.floor(Math.random + 1);
+
+/* these probably need turning into an array for the slider
+this guide looks useful: https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4
+*/
   const [image1Url, setImage1Url] = React.useState<string>('');
   const [image2Url, setImage2Url] = React.useState<string>('');
   const [image3Url, setImage3Url] = React.useState<string>('');
   const [image4Url, setImage4Url] = React.useState<string>('');
 
+
   React.useEffect(() => {
     getImage('2020-02-13').then(response => setImage1Url(response));
     getImage('2020-02-12').then(response => setImage2Url(response));
@@ -40,7 +56,12 @@ export default function Cards() {
       {/* NASA API docs here: https://api.nasa.gov/ */}
       <h3>Slider</h3>
       <h3>1. Refactor this code to remove duplication and make it more 'Reacty'.</h3>
+      /* I can see that the refactoring task here is to take the repeated code below
+      and use some sort of iterating loop, but I really can't figure out how to do this. I
+      also lack the knowledge to make this more Reacty
+      */
       <h3>2. Convert the images into a slider using the pagination buttons.</h3>
+
       <div className="cards">
         <div className="card" style={{ backgroundImage: `url(${image1Url})` }} />
         <div className="card" style={{ backgroundImage: `url(${image2Url})` }} />
@@ -53,8 +74,11 @@ export default function Cards() {
       </div>
       <h3>Randomised Image</h3>
       <h3>1. Randomise the image when you click the button.</h3>
+      /* this can potentially be achieved by using the NASA api documentation to fetch
+      an image from their database each time */
       <div className="cards">
         <div className="card" style={{ backgroundImage: `url(${image1Url})` }} />
+
       </div>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
         <button style={buttonStyles}>Randomise</button>

app/javascript/components/challenges/Counter.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 
 import NextButton from './NextButton';
 
-export default function Counter() {
-  const [count, setCount] = React.useState<number>(0);
+export default function Counter(initialCount = 1) {
+
+  const [count, setCount] = React.useState<number>(-10);
+  const resetCounter = () => setCount(0);
 
   return (
     <div>
@@ -16,8 +18,10 @@ export default function Counter() {
         <input readOnly value={count} />
       </div>
       <div>
-        <button onClick={() => setCount(count ** 2)}>Decrease</button>
+        <button onClick={() => setCount(count - 1)}>Decrease</button>
         <button onClick={() => setCount(count + 1)}>Increase</button>
+        <button onClick={resetCounter}>Reset</button>
+
       </div>
       {count === -10 && <NextButton />}
     </div>

app/javascript/components/challenges/Login.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React, { useState } from 'react';
+
 
 export default function Login() {
-  const [email, setEmail] = React.useState<string>('');
+  const [values, setValues] = useState({ email: "", password: ""});
 
   React.useEffect(() => {
     console.log(
@@ -17,29 +18,38 @@ export default function Login() {
     color: 'white',
   };
 
+
   const authToken = document.querySelector('head meta[name="csrf-token"]' as any).content;
 
+
   return (
     <div>
       <h1>🥈 Challenge 2</h1>
-      <h3>1. Fix the email field.</h3>
+      <h3>1. Fix the email field.</h3> //Done
       <h3>2. Validate the email is in the correct format (client side) on input blur.</h3>
+      /*  I've implemented a simple input pattern validation. I lack the knowledge to implement an onBlur function */
       <h3>3. Implement the functionality to show the password.</h3>
+      // Attempted multiple ways to do this, but do not understand how to do so successfully
       <h3>4. Login successfully using the correct password.</h3>
+      // password is password123
+
       <form method="POST" action="/login">
         <input type="hidden" name="authenticity_token" value={authToken} />
+
         <label htmlFor="">Email</label>
-        <input name="email" type="text" value={email} />
+        <input name="email" type="email" defaultValue="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+" />
+
         <div style={{ color: 'red', margin: '10px 0' }}>{/* Email validation errors go here */}</div>
+
         <label htmlFor="">Password</label>
         <div style={{ display: 'flex', marginBottom: '20px' }}>
-          <input name="password" type="password" />
+        <input name="password" type="password" values={values.password} onChange={handleChange} />
+
           <button type="button">Show Password</button>
-        </div>
+
         <button style={buttonStyles} disabled={!email}>
           Login
         </button>
       </form>
     </div>
-  );
-}

app/javascript/components/challenges/NextButton.tsx

@@ -12,8 +12,10 @@ export default function NextButton() {
       { x: 400, y: -200 },
       { x: 50, y: 200 },
     ];
-    setLeft(positionArray[randomIndex].x);
-    setTop(positionArray[randomIndex].y);
+    //I stopped this from running away from me by commenting this out ...not sure if I was meant to
+
+    // setLeft(positionArray[randomIndex].x);
+    // setTop(positionArray[randomIndex].y);
   }
 
   const styles: React.CSSProperties = {

app/views/static_pages/home.html.erb

@@ -1,2 +1,2 @@
 <%# This is the link to the first challenge -> challenge_1_path %>
-<%= react_component 'staticPages/Home', linkPath: nil %>
+<%= react_component 'staticPages/Home', linkPath: challenge_1_path %>