challenge attempts

[LiamBorner]

These are my attempts at completing the challenges

[BowlegsBill]

Added some comments

[BowlegsBill]

I guess these were all previous attempts at validating the email?

[LiamBorner]

They were indeed

[BowlegsBill]

So basically NASA has 1 image per day so you need to create a random date and pass it into the getImage method and it will give you back their image for that day

[LiamBorner]

Hi Bill,

If I've done this correctly, you should be able to see my amends based on your review that have been committed back to my master branch. I'm clicking 'Close and comment' so hopefully this submits those changes.

I have two outstanding issues that I'm stumped with and have tried many methods to solve them. It's frustrating as I was hoping to have them all resolved thanks to your guidance.

[BowlegsBill]

Thanks for doing this mate, much appreciated. You should receive an email from me through Pinpoint shortly

[BowlegsBill]

You don't need to use myDate here since we are passing the date into the method.

Just needs to be return fetch('${baseUri}?api_key=${nasaApiKey}&date=${date}')

[BowlegsBill]

So for the onClick add an onclick handler to the button;

<button style={buttonStyles} onClick={handleRandomise}>Randomise</button>

Then we also need to do something with the onClick so:

function handleRandomise() {
   const randomDate = "2019-0"+Math.floor(Math.random()*12).toString() +"-" +  
   Math.floor(Math.random()*29).toString();
     getImage(randomDate).then(response => setRandomImage(response))
   }

Then we need some new state const [randomImage, setRandomImage] = React.useState('')

And finally change the background image for the card:

<div className="card" style={{ backgroundImage: `url(${randomImage})` }} /></div>
  <div style={{ display: 'flex', justifyContent: 'center' }}>
    <button style={buttonStyles} onClick={handleRandomise}>Randomise</button>
  </div>

[BowlegsBill]

Pretty much there with this one.

Add an onblur handler to the email input and add the email validation error into the error box:

<input name="email" type="email" value={email} onChange={handleEmailChange} onBlur={validateEmail} />
<div style={{ color: 'red', margin: '10px 0' }}>{emailValidationError}</div>

Then change your validation function slightly:

function validateEmail(event) {
    const value = event.target.value;
    let error;
    if (!value) {
      error = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i.test(value)) {
      error = 'Invalid email address';
    }
    setEmailValidationError(error)
  };