Hui Chieh Jackson's repositories
Background-Colors
Media Queries project to show new background colors when browser is resized for mobile, tablet and desktop viewing.
github-repo-gallery
A project that will pull data from my GitHub portfolio to create a gallery of repos with dynamic search feature.
guess-the-word
A project using vanilla JavaScript to create an interactive game, where the player guesses the letters of a mystery word.
Jubilee-Austen
Creating a simple one-page website, where I learned how to do the set up, coding, and launching of a website.
Recipe-Collection
Using CSS and HTML to create three styled recipe cards.
Rogue-Pickings
Using a design comp to create a website.
Unplugged-Responsive-Website
My first responsive website development project that uses design comps, boilerplate and flexbox plus desktop, mobile and tablet viewing options.
Center-Divs-With-Flexbox
Project on centering divs with flexbox so they are lined up in a row and evenly spaced.
Centering-Content-Flexbox
Project on centering content using flexbox for mobile, tablet and desktop viewing.
Centering-Content-Flexbox-Props
Project on centering content using flexbox properties to center align main content of a website both horizontally and vertically.
Change-Font-Colors
Media Queries project for changing font colors when viewing from mobile, tablet and desktop.
Customized-Content-Flexbox
Project on customizing content and implementing flexbox properties on a website both horizontally and vertically.
git-practice
Becoming familiar with github workflow. Learning the basics.
huichieh-jackson-portfolio
Portfolio website that uses responsive design for seamless user experience. Media queries and breakpoints were added to allow viewing from mobile, tablet or desktop devices.
js-l12-challenge-01
Revealing a Random Image. This project pulls images using the Lorem Picsum API then adds the data to a webpage when a button is clicked.
js-l12-practice-exercise-01
In this exercise, random profile data will be fetched from the Random User Generator API. Data gets parsed to a JSON file and then create an array with the data. Finally, a function expression is created to populate data on the page, including the country, name, and profile image.
js-l12-practice-exercise-02
This builds off previous work in Exercise #1. More functionality is added to the Random User Generator app by programming a drop-down list to change the number of profiles displayed by creating a change event & make adjustments to the async function to retrieve 1, 3, or 5 users at a time, depending on which option is selected.
js-l12-practice-exercise-03
In this exercise, pretend you’re a kindergarten teacher with an upcoming field trip, and you want to know which students still need to register. Use JavaScript to fetch data from a JSON file with an array of student objects (names and registration status). Generate list of unregistered students.
js-lesson06-challenge02-subscription-calculator
Creating a subscription calculator to provide user with the cost of plans for different subscription types and durations.
js-lesson09-challenge-02-potluck-guest-list-and-dish
Creating a potluck guest list and randomly assigning a potluck dish to each invitee.
js-lesson11-challenge-02-pet-rescue
Using pet data to populate Sharon's Pet Rescue webpage. Pets that are available to meet and play will be shown when visitors click "Show Pet Status" button.
l11-decomposed-color-palette
The goal was to decompose the UI to determine how the UI's code can be organized based on separation of concerns. The code is separated into individual presentational components to make it easier to edit and follow data flow.
l14-sticky-note-ui
Build an interactive sticky note app using JavaScript React with ES6, JSX, data flow management and manipulation of the DOM. This greenfield project started as a static UI then functionality was added to allow user to create, delete, edit, search and save last session of notes.
l7-hotel-booking-ui
Build a hotel search tool using JavaScript React that allows user to filter the type of hotel they want to stay in. The filter function was created using ES6, JSX, stateful components, data flow management and manipulation of the DOM.
l9-name-tag-generator
Build a name tag generator with JavaScript React using functional components, ES6 modules, data flow management and lifecycle methods. This allows user to create bulk name tags, delete name tags and save state between sessions.
Making-Static-Site-Responsive
Project to transform a static website to be fully responsive using breakpoints and flexbox properties. Setting up mobile styles, then tablet and desktop styles for different browsing experiences.
Responsive-Breakpoints
Media Queries project for creating responsive breakpoints for mobile, tablet and desktop viewing.
Static-To-Fluid
Transforming a static website into a fluid website.
Website-Layout-Flexbox
Project on simple website layout using flexbox properties.