Memory Game

What are you most proud of, and what would you do differently next time?

Before creating the project, I already had the things I needed to make in Javascript written in scratch paper, laid out for review. This made the process of writing code so much easier and smoother without having to think about what to do next. Although it did leaps to my productivity, this also meant that the code works but there could have been better implementations that I could have done instead of what was initially planned. That said, it was overall a good practice on visualizing the task and how to solve them. To add, I integrated SASS CSS preprocessor to my work using Vue JS framework. I needed the refresher for SASS and it reminded me of how convenient SASS functions could be. But the thing I am most proud of for this project is finishing within my expected time and not spending too much time having problems with Typescript.

What challenges did you encounter, and how did you overcome them?

I had an issue in Vue for an <img> that has a dynamic src. This apparently meant that I would have issues loading in my .svg files. I used:

import.meta.glob('@/assets/icons/*.svg', { eager: true }) as Record<
  string,
  { default: string }
>

to load the .svg files thus giving me the ability to use their module and load it as img element.

I also have:

const isDesktop = ref(false)

onMounted(() => {
  const mq = window.matchMedia('(min-width: 43.75em)')
  isDesktop.value = mq.matches
  mq.addEventListener('change', (e) => (isDesktop.value = e.matches))
})

to keep track of the screen's size, thus, can help in dynamically changing elements based on screen-size just like @media queries for CSS.