Discovering LIT

I thought I knew some basics of Javascript and CSS, but I was wrong. To begin, I'm writing this blog for one of my IST lab assignments. I first had to complete a list of thing.

List:

Download VSCode, NPM, and NodeJS
Create GitHub account
Link SSH

NPM is important because it provides tools that Node.js files may need. It also helps us interact with and create repos.

I already had VSCode and NPM, so all I needed was NodeJS. To download NodeJS, I search type it into Google and clicked the first link. I wanted to download the the recommended version and stuck with Ver. 16.13.2.

I had a GitHub account and just needed to create a repository for this lab assignment. Then, I went on a tangent on what a SSH was and how to find my keys. I ended up using this tutorial on setting up my SSH keys for GitHub.

With everything installed and ready I ran over the LIT tutorials provided by our professor. This was when I realized I knew nothing about Javascript. The tutorial started off easy, but got harder as more components came together. I was kinda lost at the last page of the tutorial, but I think it was enough for me to complete the lab.

Lab 1: Create a Hello World Element

I looked over the simple sample code given to us as a reference and documented what I understood and didn't. Deleting and checking what the code would produce helped me understand some components. After studying the code, I renamed all the element components to "Hello World". I knew I was correct once it produced the same results as the sample code. However, all of this was done in the LIT tutorial website, I still had to run my code using NPM. In the end, I couldn't completely finish the assignment because it didn't run and I had errors. I'm still trying to figure out what happened and if there's no result, I will head to my classmates, professor, or TAs for help.

Update Jan 19

With the help of some of my classmates, I was able to figure out what went wrong. I should have looked over the professors tutorial because I completely skipped over some steps for the "open-wc". Once everything was installed, then I could run "npm start".

I still came across some errors after running my code and I'll go over some of them.

First, my "HelloWorld" class was not capitalized so it looked like this (picture below).

Second, I did not import the source correctly. I should have added two dots to get to my hello-world.js directory, instead I only had one.
(WRONG, it should be src="../hello-world.js")