DEV Community: Austin Chen

Create a color generator React App with Clipboard-Copy function function.

Austin Chen — Mon, 09 Jan 2023 14:15:35 +0000

Hi, My name is Yibo Chen and I am a self-taught developer.In this article, I build a Random Color Generate with React.js using values.js randomcolor API and clipboard-copy function.

You can check my whole project on my netify page: https://react-app-color-generator-ac.netlify.app/

Let me introduce you my whole project with code demostraction.

Install NPM Package:

npx create-react-app color-generator
npm install values.js --save

You can check out the whole API introduction on https://github.com/noeldelgado/values.js

Import the Value.js in our App component:

import Values from "values.js";
Build the h3 head tile of color generator.
With the form-input element and we can submit the input color to our page, and set the className with error, if there is error and the input column will show up the error with css styles.

Set the useState Hook default as false and if user input the error message, it would set the error state as true.

Of course, we would use the try and catch method to make the whole function run well. With the handleSubmit function of form-input element onsubmit Event Attribute, we can make this happening.

Set the list as the default value of #f15025 hex color of showing 10 colors:
const [list, setList] = useState(new Values("#f15025").all(10));
With the list variable, let's map out our data to the SingleColor component and show on the react page:

If we check out our data with console.log method, we can see the data pass out as which number we set as Value.all(number), and based on those data we can build our project with values.js passing data, and also we can pass the color.hex value to the SingleColor component.

Set the background color based on the rgb data, we are passing in SingleColor component.

Finally, let's build the copied to clipboard function with useState hook and useEffect hook.
Set the default useState hook of alert as false, and with p element with context of 'copied to clipboard'.

With onClick method and navigator.clipboard.writeText(hexValue) function, we can make the copy and paste function on page, and the useEffect hook with setTimeout and clearTimeout method to make the copy and paste show up in three minutes.

Thank you for reading my post and you can check my code on my github page: https://github.com/chenyibo406/color-generator or on netify to see the whole project: https://react-app-color-generator-ac.netlify.app/

With The Form Input element, I create a LOREM IPSUM Generating React App

Austin Chen — Sun, 08 Jan 2023 10:49:29 +0000

Hi! My name is Yibo Chen and I create an Lorem Ipsum Generating React App with the Input (Form Input) element.

First of all, let's build the h3 title:

Secondly, let's set up the Form element with input element. Build the input element with control value, onChange, and pass data the the setCount useState and determine how many paragraph we want to generate in the page.

With the useState hook, we can build the how many page we want to show in the React app.

Most importantly, let's build the button element to submit our data on the showing page.
The onSubmit control element with handleSubmit function to change the data.
Set the e.preventDefault() to prevent the page refresh when the data change.

With the** parseInt(count)** we can slice the paragraphs to show on the page. And if the user select the number smaller than 0, the showing amount of the paragraph should be one, but if the user select the number bigger than the data, and the showing amount of the paragraph should be eight.

Because of the setText useState hook, we can use map() method to demonstrate the showing page of the text:

Thank You for reading my article. Please check on my netify page: https://react-app-lorem-ipsum-ac.netlify.app/, or my github page: https://github.com/chenyibo406/react-app-lorem-ipsum

Create a Birthday Reminder with React App

Austin Chen — Wed, 04 Jan 2023 04:56:41 +0000

Introduction:

learn to load data from a static JS file
learn to use useState to store data
learn to clear the state variable and see that reflected in the UI

1. Create the HTML hierarchy in App.js:

App component h3 should contain the following text:

0 birthdays today

2. Create the List component in App.js and pass the data as props to List component:

set how many people birthdays today based on the data.length

3. The data file have all the image url, id, age, and name for List component:

4. List component

When pass the data as props to List component, we can deconstruct the props and map the passing data.

5. Add a “Clear” button which will reset it to 0 birthdays.

For the clear all button as the following in App.js component:

Create a new state variable called people and useState Hook to accept the initial value as the imported data from the top.
Pass this state variable in the List component.
When the Clear button is pressed, empty the state variable so that no record is displayed (Hint: set it to an empty array)

Conclusion
Building the birthday reminder react app can help newbie understanding the basic useState Hook, export data and then store in the App.js variable.
see more detail in my github page: https://github.com/chenyibo406
I also update the birthday-app in netify, see my project at: https://birthday-reminder-ac.netlify.app/