README.md

30 Days of React: Day 13 | Uncontrolled Components

Table of Contents

• Dev Notes
• Learnings
• Third Party Resources

Dev Notes

• styling done with mostly .css with partial done inline to implement themeColor generated from colorMe() custom hex color generator
• loading state represented by a loading svg ^[1]
• utils folder addition
  • qnaJSON_builder.js to generate content for level1qna.json
• getPatternFromRegEx function in customValidation.js to extract pattern which can be used in pattern attribute of input element

_{[ Go to Table of Contents ]}

Learnings

• pattern attribute for validating input value

  <input
    type="text"
    name="firstName"
    id="firstName"
    ref={firstName}
    pattern={nameRegEx}
    required
  />

• naming an imported image asset

import loader from '../assets/bean_eater_animated.svg'

const loadingStyle = {
  height: rem(360),
  width: '100%',
  backgroundImage: `url(${loader})`,
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'contain',
  backgroundPosition: 'center',
}

_{[ Go to Table of Contents ]}

Third Party Resources

• loader.io - used for loader ^[1]
• fakefiller - browser extension that fills form inputs automatically; making form testing faster
• Rest Countries API: https://restcountries.com/v3.1/all

_{[ Go to Table of Contents ]}