My Angular Projects

Use Angular 5 to build a clone of https://www.ptable.com/. When an element is hovered, its detailed information, element type, row number and column number are displayed. When solid is hovered, all elements that are solid are highlighted whereas the others are dimmed. The same effect is applied when hovering, gas, liquid and unknown state.

Use Angular 5 to build a 25-minute Pomodoro Timer. Scotch.io weekly coding challenge number 6.

Use Angular 5 to build movie player that plays specific youtube videos on an IFrame. The app makes an API call to obtain a movie list and renders thumbnails to represent them. Scotch.io weekly coding challenge number 5.

Use Angular 5 and sidebar component of Angular Material to build a canvas sidebar. When hamburger button is clicked, the sidebar slides open from left to right. Similar, it slides close when the x button is clicked. Scotch.io weekly coding challenge number 7. Background of the challenge can be found in here

This is the angular version of Wes Bos's JavaScript 30 project (JavaScript 30). In 30 days, I used Angular 4 and some Web APIS to recreate the 28 out of 30 exercises. JavaScript30 is a must-do project for beginners to pick up JavaScript in an interesting way. You can run the exercises locally or deploy them to third-party hosting site such as Firebase.

This project packages two Angular components into custom elements and register them as <time-theme> and <time-converter> respectively. The project generates JavaScript files (main.js, script.js, polyfill.js and runtime.js) that need to be bundled into a single file and distributed everywhere. Static website and other JS Frameworks can include this file to use the custom elements in html pages.
The custom elements also implement custom events; websites can add event listener to listen to them to perform custom logic. For example, <time-theme> implements themeChange event and website should listen to it to change the background color of the UTC offset square.