This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Javascript, Webpack and Jest.

Overview

Metropolitan Museum of Art

This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Javascript, Webpack and Jest.

Built With

  • HTML
  • CSS
  • JavaScript
  • JEST
  • Webpack

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Modern web browser with Javascript enabled

Setup

Install

git clone https://github.com/indigodavid/webpack-first-project.git

Usage

Run tests

Deployment

Authors

👤 Brenda Wihogora

👤 David Vera

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Microverse
  • My supportive family 😊

📝 License

This project is MIT licensed.

Comments
  • Milestone 4. Home page layout

    Milestone 4. Home page layout

    For this milestone, the following features have been added:

    • Changed title for HTML
    • Use API to search elements, obtaining their IDs
    • Modify CSS for mobile
    • Add module to retrieve art object based on ID
    • Create module to render each art object
    • Limit number of rendered elements to 10
    • Remove unnecessary filler elements
    opened by indigodavid 2
  • Milestone 9. Edit header

    Milestone 9. Edit header

    For this milestone we added the following features:

    • Refactor functions using the Involvement API to use constants all over the code
    • Edit styles for the search input
    • Move all tests to the tests folder
    • Finish styles for header
    opened by indigodavid 1
  • Popup window

    Popup window

    In this Milestone: I have implemented the popup interface. I have implemented the function to add and display comments using the involvement-API. I have implemented the comments counter I write the test for the comment counter.

    opened by Brenda309 1
  • Milestone 7. Test item counter

    Milestone 7. Test item counter

    For this milestone we implemented the following features:

    • Tests for item counter
    • Mock for get-searched.js module
    • Search input functionality
    • Refactor art rendering to improve behavior
    opened by indigodavid 1
  • Searched Items taking too long

    Searched Items taking too long

    Hello @Brenda309 and @indigodavid

    Highlights

    ✔️ Clean code ✔️ Nice design

    Works slow

    https://github.com/indigodavid/metropolitan-museum-of-art/blob/059581d2271bf809f590afab1ff53d8cbebde8e3/src/modules/get-searched.js#L1-L10 You may want to limit the number of objects that the search function returns. You can limit it with slice().

    I think it is a very good project! Congratulations 👍

    opened by GiuseppeTG 1
  • Milestone 6. All items counter

    Milestone 6. All items counter

    For this milestone the following features have been implemented:

    • Edit HTML to include item counter
    • Add module to count the items obtained from the API
    • Add module to render the item count
    • Remove unused features
    • Improve overall styling of the home page
    opened by indigodavid 1
  • Milestone 5. Likes: counter and add functions

    Milestone 5. Likes: counter and add functions

    For this milestone we added the following features:

    • Module to get the likes for each specific art object
    • Module to add a new like for each art object
    • Implement modules when rendering the elements
    • Improve styling of art objects
    opened by indigodavid 1
  • Setup of capstone project

    Setup of capstone project

    ➡️ Project link: https://github.com/indigodavid/metropolitan-museum-of-art/projects/2

    ➡️ For the capstone project we are two members:

    • ✔️ Brenda Wihogora
    • ✔️ David Vera

    Happy reviewing! 😀

    opened by indigodavid 1
  • [0.5pt] Find external API - group task

    [0.5pt] Find external API - group task

    Find an API to base the development of the webapp around it. The API should allow you to

    • Get a list of items with a unique item id (or generate the unique id).
    • For a given item, get detailed information about it. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.
    opened by indigodavid 1
  • Version 1.0 - Metropolitan Museum of Art capstone project

    Version 1.0 - Metropolitan Museum of Art capstone project

    This project uses the Metropolitan Museum of Art API and the Involvement API to implement the following features:

    • Displaying Artworks based on search queries.
    • Displaying the number of likes stored using the Involvement API
    • Add new likes
    • Displaying a popup to get more details about each artwork
    • Displaying the number of comments stored using the Involvement API
    • Add new comments
    • Using JEST to test the number of items displayed on the home page and the number of comments
    opened by indigodavid 0
  • [4pt]  - Display list of items on the Homepage - Student A

    [4pt] - Display list of items on the Homepage - Student A

    Create the main part of the homepage that keeps the layout from the wireframe:

    Screenshot 2021-06-27 at 21 50 23

    When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

    Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

    This task does not include displaying the number of likes for each item.

    This task does not include the counter of the items.

    opened by indigodavid 0
Owner
David Vera Castillo
Full-Stack Developer, learning at @microverseinc. Currently developing projects using HTML, CSS, and JS. Open to new opportunities.
David Vera Castillo
3D Infinite Art Gallery! This pulls from Reddit's r/Art and creates a procedural infinite art gallery from random (sfw-only) posts.

Infinite-Art-Gallery Click for Demo! 3D Infinite Procedurally-Generated Art Gallery! This pulls from Reddit's r/Art and creates a procedural infinite

Austin 33 Dec 15, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
Erick Hans 5 Oct 26, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

Emmanuel Moombe 4 May 30, 2022
Web-pack based Todo-List Website built using HTML, CSS and JavaScript. Tested Using Jest.

To-DO List Live Link Additional description about the project and its features: Built With HTML and CSS Javascript HTML & CSS3 & JavaScript Linters Gi

Saadat Ali 8 Mar 31, 2022
Harrison Njuguna 5 Nov 11, 2022
🥾 A simple way to do testing AWS Services and Jest or Serverless and Jest

jest-localstack-preset Install Install via yarn or npm $ yarn add https://github.com/thadeu/jest-localstack-preset.git or $ npm i https://github.com/t

thadeu 5 Oct 1, 2022
This project is about building a simple HTML list of To Do tasks. Built using webpack and served by a webpack dev server.

To Do List app This project is about building a simple HTML list of To Do tasks and is built using webpack and served by a webpack dev server. Built W

Dino Ronald Quispe Arias 6 Nov 4, 2022
In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

To do list In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev ser

Jesús Vázquez 8 Dec 21, 2022
In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a webpack dev server.

To Do list with Webpack In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a w

Sidney Kaguli 8 Aug 23, 2022
In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

 Hassan Momanyi 10 Nov 25, 2022
In this project I write the test for several functions and used the TDD with Jest and JavaScript.

JavaScript-Testing-with-Jest npm init -y npm install --save-dev jest Once installed, you should see it in already created Json file Change Jest Script

Ben Kiboma Omayio 2 Jun 11, 2022
NFT Art Generator made to create random unique art and their metadeta for NFTS.

Welcome to HashLips ?? All the code in these repos was created and explained by HashLips on the main YouTube channel. To find out more please visit: ?

Haadi Raja 2 Dec 11, 2022