Develop a Node/Express API, and build a website that uses this API.
Build an API using Node and Express. You are allowed to use or expand the web service you developed in assignment 7.2. If you are satisfied with the API, feel free to jump into Part 2 to start building a website using the API you made.
Note that you must allow CORS so your website won't encounter CORS errors when making requests.
Create an interactive website where users can make requests to your API based on their interactions. For example, clicking a search button to retrieve a movie info based on a search key word.
Submit the URL to either your API or website's Github repo on Canvas.
npm install cors in your node serviceindex.js file add import cors from 'cors', then addapp.use(cors({
origin: '*'
})); Build a web service using Node.js and Express that responds with different outputs based on the request data. Submit the link to your repo that includes the following to Canvas.
.gitignore file that includes /node_modules in your project (this will ensure you don't push your node_modules to your repo).README.md that includes your deployed web service URL, required queries or parameters, and a sample request and response./courses/:department/:level) or query strings (e.g., /clothing?category=top&color=black) in your web service.When developing your web service, consider the following:
console.log to debug and read the request data.Modify the web service we went through today by designing your own endpoints and responses with query parameters or route parameters. Submit your documentation that includes your code and the following on Canvas.
/item/:id)./items?category=fruits).make a website with React.js. you can take inspiration from any websites you have made before. you are encouraged to:
.map()Submit the website URL or link to your GitHub Pages on Canvas
Create a data visualization website with D3.js, HTML, CSS, and JavaScript. You are encouraged to:
Use SVG shapes, elements, and functions to draw a poster, pattern, or collage you like. You are allowed to:
Upload your SVG drawing to GitHub Pages and submit the link to Canvas.
submit a github page link to Canvas
create a website/web-based poster that involves movements or a sequence of animations.
create an interactive website where users can manipulate the DOM through interactions. this could be clicking to add new elements or change their behavior, scrolling to append or reveal content, or dragging and dropping elements.
Choose one or more event listeners, create an element/interface/website where interactions are involved to change how an element/website appears or behaves. Upload the site to github pages, submit the link to Canvas.
submit as a writeup on Canvas
Watch this video about debugging in the Chrome browser, and take notes on using a debugger, breakpoints, and dev tools.
write a README.md for your first Studio project in its github repo. include the link to your repo in the writeup.
there is no specific format on how to write a README.md, but it should tell the following:
submit the screenshot of your code and console as a screenshot to Canvas
Think about an object you have interacted with either in real-life or online that can be represented using a class. For example:
Follow the Object Oriented Programming paradigm, create your own Class and objects using JavaScript Class syntax. Your class should include:
Create at least two instances of your class with different values for the properties. Use the methods to interact with your objects and show how they work. For example:
// Create a class
class Pet {
constructor(name, species, age) {
this.name = name;
this.species = species;
this.age = age;
}
feed() {
console.log(`${this.name} is being fed.`)
}
play() {
console.log(`${this.name} is playing happily.`)
}
celebrateBirthday() {
this.age++
console.log(`${this.name} turns ${this.age} years old!`)
return this.age
}
}
// Instantiate objects
const myDog = new Pet('Buddy', 'Dog', 3);
const myCat = new Pet('Whiskers', 'Cat', 2);
myDog.feed() // Buddy is being fed.
myCat.play() // Whiskers is playing happily.
myDog.celebrateBirthday()
console.log(myDog.age)pick an open-source project available on github, such as the book of shaders, ml5.js, three.js, or any projects you like on github. observe the project by doing the following. take notes and submit as a writeup on canvas.
What project (include the link to repo) are you observing? Who manage it or who are the main contributors? When's the latest update/commit and how active or healthy do you think this project is?
read the README.md of the repo: what is this project about and what is included in the README, such as instructions on running the project, its contributors, or available features and usages?
check the branches under the repo, what do you think they are about? bug fixing, feature development or others?
read the issues under the Issues tab (Open + Closed) look into issues you find well-written: what are the issues about, such as bug reports, feature requests, or questions? and share the URLs of the issues
read the pull requests (Open and Closed) under the Pull Requests tab, click some of them you find interesting. observe their conversation or activity. what is this PR about or trying to fix? how are the commit messages written? do you find any github users who have engaged or closed many issues? and share the URLs of the issues
If you would like some hands-on practices for this exercise, you can contribute to our class site. Here's the repo, and our community agreements page hasn't been filled yet.
To contribute, please email me your GitHub account and I will add you as a collaborator, and then do the following:
git clone https://github.com/leey611/f24corelabsystems.gitpages/community_agreements/index.vue.<ul>.community-agreements/<your-firstname> (or name it whatever you like):git branch <new-branch-name>git checkout <new-branch-name><li>.git add .git commit -m "update community agreements"git push origin <new-branch-name>Create a tree structure directory/folder using command line interface (mainly cd and mkdir). This directory must have at least 3 levels of nesting (meaning at least 3 subdirectories).
Folder Tree Structure Example:
FolderPoetry/
├── Planet/
│ ├── Earth/
│ │ └── Forest/
├── Moon/
│ └── Crater/
└── Mars/
└── Rover/
This exercise is a version of Melanie Hoff's Folder Poetry workshop. Check out some student work and the workshop below:
Make a website that serve as an index/portfolio page for your Studio projects. submit your website as a github page link
Pick one of the following options:
Website Element: Choose a website element that you find interesting, such as a card component, image gallery, carousel, a navigation bar, a form, or a section layout. Recreate it using HTML and CSS.
Real-Life Object: Find a real-life object that you have interacted with, such as an album cover, poster, user interface, driver license/ID, or a product label. Recreate this object as a digital representation using HTML and CSS.
Site Layout/Design: Recreate a site's landing page you like.
Pick one of the following readings or videos:
Answer the following prompts: Take notes from the reading or video. Did anything interest or surprise you? What do you have questions about?
Pick a topic that interested you during class or in the readings. For example: client-server model, layers of the Internet, or submarine cables.
Draw a drawing or diagram to help remember that concept OR that would help you explain to a friend. This prompt is open to interpretation! It can be as creative or representative as you want.