sury⩀

Tag: javascript

  • Weekend Coding Kata Challenge – Yatzy Refactor in Typescript

    —

    by

    suryast
    in

    I had done the Yatzy refactoring kata (https://github.com/emilybache/Yatzy-Refactoring-Kata) a few times before. I think once it was in Kotlin, and once in Java. However, due to time constraint, I never managed to finish the kata. I think I was pair-programming with one of my work colleagues, and we only had around 90 minutes to do…

  • Simulating Bicycle Light Using CSS and Vanilla JS

    —

    by

    suryast
    in

    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…

  • Implementing Caesars Cipher in Javascript using ES6 Syntaxes

    —

    by

    suryast
    in

    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.

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

    —

    by

    suryast
    in

    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…

  • Check If a Phrase is Palindromic in Javascript

    —

    by

    suryast
    in

    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…

  • Mapping Nav Components into a Navbar Implementing React Router

    —

    by

    suryast
    in

    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…

  • Create a New Javascript Object by Destructuring Existing Objects

    —

    by

    suryast
    in

    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…

  • Saver App – Experimental App Using React + CSS Grid

    —

    by

    suryast
    in

    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…