JavaScript Project #1: Flashlight Effect

-

     To better sharpen my JavaScript skills, I will start building and posting random projects found on the Internet. I decided to attack a different approach to these projects. In the past, I've used tutorials or interactive web platforms in an attempt to master JS, but none of these have helped me learn the concepts. I can follow patterns and memorize code but I have not developed a deeper understanding. I find that I learn better when I have a good understanding of the foundations to build upon. 

    In one episode of the Scrimba podcast, an interviewee spoke about how the best way for her to learn was good old-fashioned pen and paper. She would write the code out to better help her remember it. Writing code sounds strange, but I figured it was worth a try. The first project I decided to build was a flashlight effect that I found here. Developed using HTML, CSS, and JS, it gives the effect of a flashlight shining across the computer screen as you move your mouse.

    The original code had the lorem ipsum text, but I replaced it with the ending from my favorite novel, The Great Gatsby by F. Scott Fitzgerald. I didn't change much else associated with the original code, outside of adding a <hr> break to add a separator between text. The project was simple and quick, but I spent a significant amount of time studying the lines of code and Googling concepets to get a better grasp of everything. The HTML was basic and I was familiar with most of the CSS, except using radial-gradient on the background property to create the flashlight circle on the page.

    As for the JavaScript, it implemented just two functions, with a try method inside of one of them to check to see if the device was touch screen or not. I am familiar with the try method from using it in projects during my Bootcamp course. I was not familiar with creating TouchEvents, pageX, pageY, and event.touches. I ended up reading articles from MDN and W3Schools to help me understand their functionality better. I have always had issues with X and Y coordinates. My first step to tackling the JS portion was to handwrite notes on what steps needed to be implemented. I then tried to write the code in VS just from my notes. Unfortunately, my note-taking skills weren't that great, so I ended up having to look back at the original code a couple of times. After typing the code out, I then tried to duplicate it with pen and paper, followed by typing it out in VS again. By that time, I had the code memorized.

    I have included a link below to the completed project.


Flashlight Effect



Comments

Post a Comment

Popular posts from this blog

Learning WordPress

-
Image
      It's been awhile since I last posted. I took a break from the Blog, as well as posting on LinkedIn, for the past few weeks. I had a phone interview for a job last month that I thought would pan out. It wasn't quite in the tech field like I wanted, but it was a tech company, which was a step in the right direction. Ultimately the recruiter ghosted me though, so I took some time away and to try and pivot mentally. I landed my first client though. I was tasked with building a website for their appliance repair business. The only specifications that I was given were that it should be basic and contain an appointment calendar. Since I would be building my first professional site, I thought it would be a good opportunity to start learning WordPress and how to host a site outside of GitHub. I chose WordPress because I have seen a lot of job listings referencing it, so figured it would be a useful skill to learn. I knew also that WordPress would require at least a little ba...
Read more

WordPress portfolio is live

-
        It's been a difficult couple of weeks. I feel like my day job has been mentally taxing and any free time that I have after work is spent on adult responsibilities and professional development. My brain doesn't get much of a break. I read this book The Miracle Morning by Hal Elrod and it talks about how the majority of successful individuals have a morning routine that involves them waking up early and setting the day up to be productive. I've been trying to develop my own routine. I've set my alarm to wake up at least 30 minutes earlier so that I don't feel rushed. I'm also trying to incorporate a habit of reading a daily inspiration excerpt from a book, journaling in a gratitude notebook, and spending at least 10 minutes on mindfulness/self reflection. I've been making a fruit/vegetable smoothie for breakfast and working out most days. It's been difficult to keep up with the practice though. My small apartment doesn't really provide a quiet,...
Read more

My Coding Buddy

-
Image
      A little over three years ago, at my previous apartment, there was neighborhood cat that everyone fed. Each person had their own name for her, but my family and I called her Gato. Well, Gato was the definition of scraggly. She was tiny, had awful skin problems, and was missing chunks of hair, but everyone absolutely adored her. She was a street cat through and through and wouldn't let anyone convert her into a house cat, but we did our best to look after her. Within a year, she had given birth to two litters of kittens. After the second litter, I took her to get fixed and her shots. The first litter I hope was adopted throughout the neighborhood as the feral kittens all eventually disappeared. The second litter remained a mystery for a few weeks. While she was pregnant the second time, we often let her inside to look after her. My partner would rub her belly and feel the kittens kick. She even spent Christmas with us and slept under the tree. Then one day Gato poppe...
Read more