Git Product home page Git Product logo

samipak458 / simple-library-managment-with-azure-services Goto Github PK

View Code? Open in Web Editor NEW
38.0 2.0 58.0 508 KB

A simple library management project that is easy to use and helps learners understand the basic concept of JS.

Home Page: https://lively-dune-0b6b72f00.2.azurestaticapps.net

License: GNU General Public License v3.0

HTML 5.15% JavaScript 4.25% CSS 47.95% SCSS 42.65%
bootstrap html javascript beginner beginner-project beginners-guide github learn azurestaticwebapp microsoftlearn

simple-library-managment-with-azure-services's Introduction

Simple Library Management

A simple library management project is an Open Source Website built using HTML, CSS, JavaScript and Bootstrap and is easy to use and helps learners understand the basic concept of JS. In this project, the user has a provision to add book details like book name, author name, book URL, ISBN, edition, publication date, the status of reading the book, and book genre through the web page. In addition, the user has a provision to search for the available books in the library by the book name, author name, or type. If book details are present in the LocalStorage, the search details are displayed on the web page. Users also have a provision to delete a specific book or all books. The user can choose his favorites and edit any book details very quickly.

In this project, you will learn how to implement add, remove/delete, search, and save functionalities. You will also learn how to deploy, or publish, your web site to Azure so that you can show it off to your friends.

Visit Website:

You can try the website at Online Library

Functionalities :

Input the book Name, Author, URL, Edition, ISBN, Publication Date, Status, and Book Type to add the book. If the book name is missing, it will show you an error. As I used LocalStorage, if you refresh or close the tab, your books will not disappear. You can clear the bookshelf just by clicking on clear shelf. You can also search books by book name, author, and type.

Adding

Adding Book in Shelf:

Adding Book Without Entering Book Name:

Clearing Book Shelf:

Searching

Search Book By Type:

Search Book By Author:

Search Book By Name:

Sample working

online-library-google-chrome-2022-10-11-22-11-01_Zm40kwg7.mp4

Tech Stack

How to use :

  • Clone the repository
  • Go to the directory
  • Run index.html file
  • Enter book name, author and type of book
  • Press add book

Code Of Conduct 📜

To maintain a safe and inclusive space for everyone to learn and grow, contributors are advised to follow the Code of Conduct.

Contribution is fun! ✌🏼

If you have any feedback or suggestions please reach out to me.

In order to make a hassle-free environment, I implore you all (while contributing) to follow the instructions Contributing Guidelines!

You can create a issue and mention there , which new features or extension can make this Project more good.



Show some ❤️ by starring⭐ this awesome Repository!


OUR VALUABLE CONTRIBUTORS✨

simple-library-managment-with-azure-services's People

Contributors

adwaith-krishna avatar aryan-srivastava avatar captaintron avatar deepaksuthar40128 avatar dhcjs avatar diego-rapoport avatar dvig14 avatar hrishit-b avatar imrezwan avatar leidiflores avatar maharshi-sinha avatar nalin243 avatar nileshlad09 avatar pratikshamanjrekar avatar richardhanitio avatar saimaheshtaduri avatar sakshimishra19 avatar samipak458 avatar sarthakastic avatar shaba1406 avatar shashwat0227 avatar shreyas-9 avatar sohaibkamran-25 avatar soustab10 avatar steven4714 avatar sumitbishti avatar vaibhav-1508 avatar varshil-shah avatar wardahabid03 avatar youtanimstar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

simple-library-managment-with-azure-services's Issues

Adding a custom book type.

When user selects other, a input should appear where they can type the book type. This could be useful coz very few types are mentioned.

Website contents is visible on navbar

Hi, when we scroll on the website, we can see website content on the navbar. I am just curious if it is intentionally designed that way. If not, can we please fix that ?
image

Add Publication Date of Book, ISBN number of book and Edition of Book

There should be two more Inputs for getting the Publication Date or ISBN number of book Because there are many books can containing the similar type of names so it is easy to find out which book we want by seeing the publication date of the book,
and another input for the edition of the book because there can be many editions available for a similar book

This data is helpful for users to get the right book they want.

Adding filter/sort feature

Hi, would it be nice if we add filter/sorting feature in "Your Book Shelf" section?

If you agree, please kindly assign it to me, thank you!

I will fixed navbar design issue

image
Navbar is transparent, which causes text to show behind it.
This can be fixed by changing opacity of navbar.
Please assign this issue to me

Adding a Heading and Fix Typo

Hi there,

I wanted to add another heading for the first section. So after Welcome To Online Library, another title will make it straightforward for another area.
image

and the second, I want to change the first letter of this box into uppercase instead of lower case
image

I think I might a little bit of help too if you are willing to help me in this case to make a pull request.

Thank you!

Creating another type of book

I just made a very few changes to add a new type of book in my fork
29-09-2022-23h12min45

It also has a click management to toggle the input tag for all radio buttons and it will keep the type "Other" if you don't write anything inside the input. If this is an interesting feature, I'll be glad to make a PR.

Mobile Responsive!

The site is not mobile responsive.
Navbar and books table are not responsive. It's overflowing in x axis.

Adding a Edit book option

Now if we enter the book information incorrect, we have to remove it and add it again. Instead there could be a edit button, using which details can be updated instantly.

Improvement of intro text design

Hi, this text doesn't have the same top and bottom padding, so it doesn't look vertically centered.
Wouldn't it be nice if we keep the title vertically centered?
image

Toggle button for favorite book

Toggle button can be more accurate or more user-friendly form control for the favorite book toggle. If you want to fix this issue kindly assign this to me I am willing to contribute on this

Navbar marquee logo issue

When we hover on the marquee logo "Online Library", on top-left side of the navbar, the height of the navbar increases. Can I please fix this issue?
image

Adding Background and Footer

I'll add background to the body and improve the footer section by adding about, support, social media links, and experience to make it stand out.

Here is the background preview for the body
image

Here is the footer section
image

What do you think?
If it suits you, please assign me, and I have coded it.

Adding seperate log in spaces for the ADMIN and a NEW USER

HEY !
So adding seperate workspace for an existing user will help them to manage their records and hence modify the previous changes. While, there will be new user who need to log in first to become a member. They will be able to see the already existing books so that they can save/add for themselves from the slot. @samipak458

add book urls and also the status of that book

I think it will be good, if ppl are able to store the url of the book. Thus on clicking the book, they will be able to read it online then and there it self. The status of the book ( if possible the page no where they stopped reading ) will also be useful.

Footer design

Hey @samipak458 I just saw your amazing website. The design is good but the footer is not developed well. So I want to contribute in your footer and make it more attractive. Can you please assign this issue to me? Screenshot_2022-10-22-08-39-16-027_com.android.chrome.png

bug: dark mode button toggle issue and improve dark mode design

Issues I encountered :

  • The dark mode button icon is not toggling well.
  • The nav bar is not so attractive, the search bar could be a bit longer
  • In dark mode, date icon isn't visible
  • There is no validation for ISBN number input field
  • improve fonts and colors

Improve README.md

As new features and functionalities have come, I think the readme should be updated too

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.