DEV Community: njd5435

Blog Post #10

njd5435 — Mon, 13 Dec 2021 04:16:46 +0000

Summary
For this project, I worked with a group of 3 other members to create a sorting test where the user is able to drag or press a button to put the items in order. The user can reset the game and check their answers.

Question 1 Screen Setup

Check Answer Screen

Example of a piece of code used in the project
For this project we mainly focus in creating everything within 2 specific classes, the SortableFrame.js and SortableOption.js. Attached is the render function used in the SortableOption.js. We used slots and divs within our render function. It will render based on the users actions and includes the up and down buttons if the user chooses to move their choices to the correct location that way.

HAX and JSON
Our group is still currently adding components of HAX into it since we did do this differently then other groups in our class. The portion of HAX that is included in our project is the HAX Schema. JSON file includes our questions and answers to allow that to populate and work.

Link
Github:https://github.com/njd5435/project-3/tree/master
NPM:https://www.npmjs.com/package/@table-in-the-corner/project-3

Passion Project- Blog Post 402

njd5435 — Mon, 08 Nov 2021 04:21:41 +0000

If I were to have unlimited resources and time to work on my passion project, I would focus on creating an application that would help all in a positive way and it would be in the health field. With the world always changing and something always happening, the medical field constantly needs innovating. My idea would involve an application that would track waiting times, allow people to sign up for appointments and fill their forms online, show availability of vaccines or tests, etc. Last year everyone was running around waiting for hours to just get a covid test or a vaccine. Why not get ahead of that and make an application that every urgent care uses and possibly hospitals. It would allow waiting rooms to be less cluttered and it would allow more people to be seen faster by having an application that everyone can join and see distance of where the clinics are.

This application would need funding and it would need awareness of all to convert their files to be on the app. It would be difficult to get a bunch of companies to change their application over to this but having this application could give all more business. I feel I have enough interest in the medical field that I could have a good base line of what to put in to create the application but would need assistance to see what can and cannot be shown. I think I would need help from others to create this application. I do have coding experience but this would be a large project that would need more than one person generating code and editing it to always be up to date.

For the patients, I would want them to put their current location in and be able to see all the doctor offices around them. There can be filters that would be how far they are willing to travel, input of what they specifically are going to the doctor for, and if their insurance is taken by that office. The patient will be able to click on each office and see the wait times currently. For the offices, I would want them to constantly be updating their wait times, take the patient records virtually, and payment through the app.

Slots

njd5435 — Mon, 25 Oct 2021 03:57:18 +0000

Slots is definitely a topic that when I first started working with them and seeing them in code, I was left utterly confused. After working with a team and taking a web components class, slots aren't as hard as I originally saw them as and have learned how to use them. Currently, my team is working with cards such as the one attached.

Example of slots in our Card

While I am currently focused on the Icon portion of the project, the example I am attaching in our code is within the card banner section because of how organized it is and the use of it. There are two slots defined in this as name slots. Using slots it allows us to have structure and share content within the elements that are created. Slots are more clear to read and use.

github link: https://github.com/njd5435/project-two/blob/master/src/SciCardBanner.js

Project 2 10/10/21

njd5435 — Mon, 11 Oct 2021 03:43:27 +0000

Project 2:

Over the next few weeks I will be working alongside my teammates to create a card for our web components course. Above is an image of cards that look similar to what we are going to be creating. These cards are made up of 4 elements:

Scaffolding (the card itself)
Header/banner
Body
Icon

Obstacles:

The biggest obstacle my group my run into is working on the interactive functions of the card. We had came up with many potential ideas of what our cards will be able to do. One of the ideas was to make the card it flip when its either clicked or hovered over. This is a concept that none of us have work with yet so we will all have to research and work together to find sources to be able to create these functions.

After working with the button:

The last project that we worked on was creating a button. Doing this project, it allowed me to learn more about CSS and HTML. I came into this course with very little experience working with these and I was so shocked and glad with the progress I learned from the last project about how they work. I am eager to work on this project with my teammates and work on my web component skills!

github link: https://github.com/table-in-the-corner/project-two

Progress with Button up to Sept 26

njd5435 — Mon, 27 Sep 2021 03:34:39 +0000

Issues:

My partner and I have been looking into different parts of the button to resolve issues. One goal issue I am trying to resolve is having the button change size with the size of the screen. We have gotten the button to be centered but I am struggling with creating the correct code to make it adjust. Another thing that is an issue with our button since we are new to this process is getting the disabled aspect to work on the button completely.

Success:

We did get the icon feature to work with our button after learning more about it in class! Our button does have the basic features of being able to hover over it and keyboard accessibility. We will continue to work on it together to simplify our code and to also add more features!

Here is a link to our code: https://github.com/table-in-the-corner/invisi-button-group1a.git

Comparison of Boilerplates

njd5435 — Tue, 14 Sep 2021 16:36:18 +0000

Similarities between VueJS, Angular, React, and StencilJS:

VueJS, Angular, React, and StencilJS all are javascript based that use it to create their components. Httml and CSS are also commonly found with these four. The four different boilerplates also come with src and app directories which contain key components in the apps functionality.
All of these

Easiest Developer Experience:
VueJS to me has the easiest developer experience because of the components it has. It worked smoothly and was the easiest to understand since I do not have experience with any of these boilerplates.

Preference:
I prefer the VUE boilerplate because it was the easiest to understand and work with. The app started up quickly and the structure of it was familiar to me due to its similarities and common language. I'd work with this for a project because it was easy to create the set up and work within it and a lot of resources to work with.

To view the boilerplate I created, follow https://github.com/njd5435/boilerplates.git
To view my groups page, follow https://github.com/table-in-the-corner/boilerplates.git

Vue Boiler Plate

njd5435 — Mon, 13 Sep 2021 17:59:35 +0000

https://github.com/njd5435/boilerplates.git