Categories
Code Learn

Simulating Bicycle Light Using CSS and Vanilla JS

My bicycle’s rear light inspired me to create a pen. In this pen, I’m exploring the LED/neon light effect that CSS can create using simple animation and box-shadow properties. The most challenging bit is to decide what colour the LED circles should be when it’s off. Or how to decorate the box shadows to delineate […]

Categories
Code Learn

Implementing Caesars Cipher in Javascript using ES6 Syntaxes

What is Caesars Cipher? The particular constraint for this exercise is ROT13 algorithm (rotate by 13 alphabets), and only use upper case letters. Here is my quick implementation: The numbers inside the if statements of the code above are ASCII codes that correspond to the uppercase letters of the alphabets.

Categories
Code Learn

Micro Coding Exercise Using CSS Grid, Web API and Vanilla Javascript

This afternoon I came up with a useful coding challenge after spending some time reading about Web APIs – make a battery status using CSS grid, Web APIs and vanilla javascript. I created this small pen. The idea is to use a grid with fours rows, each row represents a quarter of battery life. Using […]

Categories
Code Learn

Check If a Phrase is Palindromic in Javascript

I completed this exercise from Free Code Camp today. In essence, it’s palindrome checker that will return TRUE if a word or a phrase is a palindrome (minus all numbers and special characters), or FALSE if it’s not a palindrome. I applied all the recent Javascript lessons I have revisited recently to check if a […]

Categories
Code Learn

Mapping Nav Components into a Navbar Implementing React Router

I was tinkering with a way to map Nav Components into a navigation bar in React by utilising map() function. The original code looks like the following: We can do an abstraction for the following lines of code: To do so, we can create an array of objects with properties of name and path. Let’s […]

Categories
Code Learn

Create a New Javascript Object by Destructuring Existing Objects

I learned some new Javascript methods this week which I think are very useful. Imagine a scenario where you have an object of customer and object of a shopping item, in the example below, an Adidas T-shirt. You can deconstruct the properties from the two objects and combine them to create an order object. The […]

Categories
Code

Saver App – Exploring React + CSS Grid

Last week, I read this post, and I got inspired. The idea is to have a printed collection of coupons with 52 entry coupons; each coupon has a dollar amount attached. You can cross out a coupon each time you manage to save that amount. If you cross out one coupon each week for one […]