256 HW 10- Joseph Vanacore & John Szwarc
Published: 2023-03-21 16:03:52

**Include images of how you are conceiving the API for the elements involved and the names**

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

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



As shown in the code above, the first screenshot shows the API input information that builds that clone of the card. It includes a description, name, title, image files and text code. This connects to the local host address thus updating the card so that it looks efficient. The second image shows the end of the API file, the first line "Cache-Control" keeps the shared cache up to 1800 seconds. The other lines classified as "Access-Control" allows origin requests from specific domains allowing certain HTTP methods to be put into place. To finish the API files, the last line ensures the resource be accessed via credentials. After all of this input, the files gets shot out to vercel to be published via local host.


**What properties do you think you'll need**

In JS we need properties such as "name", "title" including CSS properties "color", "background-color", "font-size", "margin", and "padding".

**What sort of information will need to come from the backend to make this work?**

First we would need to ensure that our Object, DOM, and array properties are correctly imputed into our system. Then the backend can use specific information gained by the codes API's and database queries to build that connect between the front and backend systems of a web component.

Either using a screen cast, taking screen shots, links to your code, show how you'll apply concepts from the Homework

(Shows the different implications, strings, and Boolean types being used within the card.) 

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


(Some mild CSS examples that can be used within project 2 to assist in organization viewpoints) 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pq23lyy4a6awrukkxkm.png)


(Constructor is going to be an important part of the project 2 build) 

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


(To ensure a drop down details/information button can be activated) 

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


**Relate it to what you'll have to do in order to pull this off for Project 2**

In project 2 we will be working with some backend components that we haven't been exposed to until now. We will need to research meanings for new terms such as API and figure out ways to implement that code into our current code project so that we can see how the web-components work behind the scenes. For example, knowing how the local host is published via backend code will be a necessity to the success to project 2.
Article one is a focus on scope and the activity we did in class. What is the project, what will things be named, how will you initially conceive of attacking the problem
For this project, we will be assigned a type of comp to work with and build using not only frontend tools but backend tools as well. We will be using some familar tooling such as properties, CSS styling, and core JS code while also being exposed to new components such as API's and connecting our project to versel and NPM. When it comes to naming the specific items at use, that will depend on if we continue to use our card from project 1 as a base or if we build something brand new. Making sure everything is named with an implication is very important into making the front and backend components to work. The first step to attacking the problem first hand is research. Find definitions to new phrasing and tooling like API's, explore vercel and figure out how the publishing works and the backend work of vercel. Find examples and new terms that can make our project better than expected. Once the research is done, applying our knowledge to the code styles of front/backend and using CSS styling to ensure our web-components are styled and designed the way wanted will be the key to attacking and figuring out anny future problems or issues we will run into.