General info

Four students did this project as a part of the fornt-end phase of an online full-stack Bootcamp provided by an online educational institution called Knowledge Academy :

1. Ayman Maani
2. Sahar Abdalazeez
3. Mohamad Jaber
4. Momen Ajarmah

You can try our website for yourself here or you can watch this quick review video here that Ayman Maani prepared.

Project's Aim

We were tasked to create a responsive website with multiple pages, a CRUD system, an API, and a local storage using only HTML5, JavaScript, CSS3, and Bootstrap. We were free to use plugins and different javascript libraries. However, we decided to push our coding skills to the limit by using only the "Sweet Alert" library at some places and vanilla Javascript or plain Javascript to build everything else from scratch.

Project's Components

1.The Navigation Panel

When you first open the website, you get greeted by the navigation panel, which offers three destinations, the bookstore, the weather (API), and the about us page. Everything in the navigation panel page was done using only plain JavaScript, CSS3, Bootstrap, and HTML5

2. The BookStore

The bookstore website consists of :

1. The navigation Bar has two versions. The fixed one at the top, and the dynamic one that appears once you scroll up, as long as the fixed nav bar is not visible. Furthermore, the nav bar has a login button, static icons, sidebar, and dropdown lists that are either statics or lead to the CRUD pages within the Bookstore.

   • The login button was designed to access the login window once clicked.
   • The login window will provide access to the admin list that appears in the navbar, alongside the dropdown lists, once the login is successful. For simplicity, you can try logging in using admin:admin as they are predefined user credentials.Lastly, the Nav bar was built using only plain JavaScript, HTML5, CSS3, and Bootstrap.
   • The sidebar is fixed to the right side of the page and can be accessed using an icon in the nav bar. It has static icons, input, and a button. The sidebar was built using only plain JavaScript, HTML5, CSS3, and Bootstrap.

2. The carousel slider was built using only plain Javascript, HTML5, CSS3, and BootStrap. The first frame, for instance, has four pictures grouped together and then animated individually alongside the paragraph and the "read more" button. The slider also features the autopilot mode, which automatically movies pictures when you are not interacting with it. To navigate, you can use the handlers on each side of the slider or the bullet navigation keys at the bottom.

3. The books' exhibit was designed using only plain JavaScript, CSS3, Bootstrap, and HTML5. This section is entirely editable through a CRUD system. Consequently, you can edit, add, and delete any book you want. This CRUD system is only available through the admin list that appears in the navigation bar once logged in.

4. The Authors' section is similar to the books' exhibit. Its components are entirely editable through a CRUD system that is connected to it and can be accessed through the admin list in the nav bar once logged in.

3. The Weather page

The weather page consists of a basic API that requests free weather-related data from a server to the selected city from the list.

4. About us

It provides brief information about our group and access to each contributor's Linkedin and GitHub pages.