5.ICE.1: Full-Stack Modal

Search…
Introduction
Create a full-stack app that uses front-end JavaScript modals. Create modals with client-side JavaScript and CSS, and refrain from using the Bootstrap Modal component. This is to practise client-side JavaScript and CSS.
Base
Begin by cloning the full-stack-modal-bootcamp repo. The database is already set up to include Items.
Set the app up by running npm install and npx sequelize-cli db:migrate.
Try the included route here: http://localhost:3000/items​
The database is empty by default, we must add data.
Fake Data
Seed fake data into the database using the Faker NPM library.
The latest version of Faker.js (6.6.6) is not functional. Since then the open source community has put up a replacement. Use the following command to install the working version.
npm install @faker-js/faker -D
1.Create a seed file and use require syntax to import faker into the seed file. import won't work because seed files aren't modules.
2.Use the product and productDescription methods of Faker to insert 50 new records into the database using a loop. Use the bulkInsert method like in Module 4.3: MVC.
3.Test the /items route again to see the filled-in data.
Modal
1.Update the app to also render item descriptions.
2.Add CSS to hide descriptions by default.
3.Add a button for each description.
4.Add client-side JavaScript so that button clicks will show the relevant description in a modal.
5.Render a button in each modal to dismiss the modal.
Modal CSS
From a CSS perspective, a modal is a div with an absolute position. We can show and hide the modal with the display CSS property. Center the modal by setting the position with margin: auto.
.modal {
  left: 0;
  right: 0;
  margin: 0 auto;
}
Comfortable
1.When the page renders a modal, position it in the top half of the screen. Use position: fixed.
2.Allow the user to open 2 modals at once. The 2nd modal appears in the bottom half of the screen.
More Comfortable
1.The user can open unlimited modals at once. All modals appear in the top half of the screen.
2.Change the modal CSS to have overflow: scroll so the user can still read all modal content.
3.As the user opens more modals, the existing modals resize themselves so that all modals still fit within the top half of the screen.
5.ICE: In-Class Exercises
5.ICE.2: AJAX
Last modified 3mo ago
Copy link
Outline