Children Educatioin App

Learn about 6 Fantastic Birds! (4 Members' Group Project)

Features

Group Aims

• Education App for Children Stage 1
• 4 Activities
• Interact Design

My works

• Wireframe, Outline Design
• Odd One Out Activity to pick the animal which is not a bird
• Transform Vector image(SVG) to JavaScript file to make Colouring Book App
• Manage quiz activity to change each answer's colour when user clicks

Technology

• JavaScript
• React
• HTML
• CSS
• SVG data

Birds Information Card Demo

Activity Demo

Colouring Book Demo

Deployment

To deploy this project run

Your local machine terminal:
- git clone https://github.com/hanselkang/fantastic_birds
- npm install
- npm start

Code for Pallete in Colouring Book

const [fillColors, setFillColors] = useState(Array(30).fill("white"))
const [currentColor, setCurrentColor] = useState('white')

const paintColor = (event) => {
        const newColors = [...fillColors]
        newColors[event.target.id] = currentColor
        return setFillColors(newColors)
    }



const Palette = ({ setCurrentColor }) => {

    const colors = [
        'WHITE', 'RED', 'BLUE', 'NAVY', 'OLIVE', 'GREEN', 'TEAL', 'LIME', 'YELLOW', 'ORANGE', 'CORAL', 'PINK', 'PURPLE', 'FUCHSIA', 'BROWN', 'MAROON', 'BLACK'
    ]

    const changeColor = (event) => {
        return setCurrentColor(event.target.outerText)   
    }
    const changeColorPicker = (event) => {
        return setCurrentColor(event.target.value)
    }

    

    
    return (
        <div id="color-box">
            <div onClick={changeColorPicker}>
                <input id="color-input" type="color" name="head" />
            </div>
            {colors.map(color => {
                return <div onClick={changeColor} style={{ backgroundColor: color, color: color }}>{color}</div>
            })}
        </div>)
}

   

Arrays of background colours

Code for Showing Current Colour

<div id="current-color" style={{ background: currentColor }} ></div>

Codes inside SVG data

<path id="0" fill={fillColors[0]} onClick={paintColor} d="M396.702, ... "/>
<path id="1" fill={fillColors[1]} onClick={paintColor} d="M498.795, ... "/>
<path id="2" fill={fillColors[2]} onClick={paintColor} d="M577.513, ... "/>
 ...
<path id="29" fill={fillColors[29]} onClick={paintColor} d="M417.8, ... "/>      

 

Contributors

• @emma-dougherty
• @mwdfn
• @sapphireflygon