• A cat picture & fac generator

A mobile first design web page, using 2 APIs and bunch of CSS stuff

an image of webpage which has shopping list
  • Shopping list

Used template element to add items with the li element. practiced the event handler while implmenting button event listeners to different elements.

  • Template Element

Created this page using template element and JS

an image of a webpage project showing 5 panels and some of panels' spaces are expansed
  • Flex-Panel

Used CSS flexbox to set the layout and understood more about transition. Also used the toggle method to add and remove class name on JS

an image of JavaScript Drum Kit project
  • JS Drum Kit

A simulated drum kit using an event handler. When a key is pressed, the audio which has the same data-key attribute will be played. I've leared about data attributes and using KeyboardEvent.keyCode.

an image of clock with second, minute and hour hands
  • JS and CSS Clock

Created a clock - Learned about using CSS transform & trasition properties. Created a function with setInterval() and got real time date & time using JavaScript

an image of a webpage project where can change border space, blur and colour
  • Update CSS variable with JS

Learned how to update CSS variables using data attributes.

an image of webpage which has some checkbox labled with messages
  • Checkbox

Checklist where you can cross out items by clicking on them. You can also cross out multiple items by clicking on the first and last of a group of items.