Discovering LIT
Published: 2022-01-17 04:59:48

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv317tqrejpc2m4k8o12.JPG)

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](https://medium.com/devops-with-valentine/2021-how-to-set-up-your-ssh-key-for-github-on-windows-10-afe6e729a3c0) on setting up my SSH keys for GitHub. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrl2lb57m4k6suvuof5r.JPG)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/874qwtzsl2krnbnxyjme.JPG)

**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](https://www.youtube.com/watch?v=r_mio0e6v1g) 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).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92buki69hbsleoa6fb7p.JPG)


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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4us7nbs1oqgtv9w1s98l.JPG)(WRONG, it should be src="../hello-world.js")


After patching up everything and running "npm start", the outcome looked like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eefj8vflurxb5lfqyk10.JPG)

You can check out my code on [GitHub](https://github.com/jfz5219/ist402).