This project adds JavaScript, primarily with the use of jQuery for DOM manipulation, to the previous Bootstrap project found here.
This project duplicates the full dynamic front-end design of a fully-functional responsive website. The static content can be seen as 3 separate Figma designer files found here, here, and here.
Content on the page is dynamically loaded from the SmileSchool API found here.
The project_docs/ folder contains all documentation describing my goals, results, and thoughts on the project. Check out an overview of the final project including screenshots and my review here. This was a school project with a specific structure. I've outlined it here. Any of homepage.html, pricing.html, or courses.html would work as an entry point for the project, as all are connected via clickable links in the header.
Full desktop/tablet, and mobile examples are shown here:
The example for the first (single-item) carousel on the homepage and the carousel on the pricing page at full width:
.
The example for the second and third (multi-item) carousels on the homepage:
The example for the search bar on the courses page:
Clone the repository into your system with the command:
git@github.com:RLewis11769/holberton-smiling-school-javascript.git
Choose an HTML file. I recommend homepage.html! Install "Live Server" or another server preview extension, run it, and navigate to the open port.
"Holberton SmilingSchool - JavaScript" is now ready to view!
- You won’t have a lot of instruction, so you are free to implement it the way that you want. The objective is simple: Create a fully functional web page that looks the same as the designer file.
- Your styles.css must be as small as you can. You must use Bootstrap classes as much as you can.
- You have to use JQuery.
- Your scripts.js must contain all of your JavaScript.
- Your JavaScript must be executed only when the document is loaded.
- Reusable and easily-changeable content
- Decently accessible as defined by axe Dev Tools
- Working multi-item carousel (using Slick carousel plugin)
- No static content present in dynamic sections
- Loader is briefly visible if change Network to "Slow 3G"
- Search initialized by:
- Click on magnifying glass
- Pressing "enter" while in "keywords" input field
- New topic selected
- New sort selected
- Loader should be visible during click on "next" arrow on carousels but couldn't get it working and included "infinite" loop instead
- Latest tutorials only has 4 cards so arrows are not visible on desktop when exactly 4 are displayed (due to Slick carousel)
This webpage was designed by Nicolas Philippot, UI/UX designer. This HTML/CSS replica was implemented by Rachel Lewis.