Git Product home page Git Product logo

cpw204-bookstore's Introduction

CPW 204 Bookstore

This repository is a class example used to gain experience with source control and TypeScript.

Live Website

Check out the live website hosted by GitHub Pages

Getting Started

Installing TypeScript

  • Download and Install the LTS version of Node.js.
  • In the command line run this command exactly as shown npm install -g typescript.

Compiling TypeScript

To compile the TypeScript files with the watch option, run the following command: tsc --watch. Using the watch option, only requires us to compile once each time the project is opened.

VS Code Extensions

The following extensions are very helpful for development

cpw204-bookstore's People

Contributors

joeprogrammer88 avatar

Watchers

 avatar  avatar

cpw204-bookstore's Issues

Reset error messages when submit book is clicked

Currently, when the user clicks the Submit Book button, error messages will appear for invalid data. However, when adding valid data and clicking Submit Book again, the error messages do not clear.

At the beginning of the Submit Book button click, all error messages should be cleared out. Then only new invalid data will cause new error messages to appear.

In the example image below, a valid title was added, the Submit Book button was clicked again, but still the Title error message persisted.

image

DatePicker is off by one day

In the example screenshot below, when picking October 23rd in the DatePicker, the data is being stored as October 22nd. It looks like this may be a time zone issue or parsing from a string into a Date.

image

Add a book creation form

On a new page, named Book.html, create an add book form. The add book form should contain input fields and validation for the following pieces of required information:

  • ISBN 13 number
  • Title
  • Price
  • Release Date

Create a class in TypeScript to hold all of this information in a single class.

  • Create a documented Book class
  • Create a form to add a book in HTML
  • Add validation to the add book form

Style Add Book form

Using CSS, style the Add Book form, and line up the controls more consistently, such as a 2 column layout

Publish website

Publish website using GitHub Pages. Add the GitHub pages URL to the main repo page and the README

Store newly added books in localStorage

Using localStorage, when a book is added by the user, it should be stored in localStorage as a string.

The user should be able to store multiple books. We need to check if there are any books currently stored in localStorage. If there are books, the newly added book needs to be stored with the existing book data. If there are no books currently stored, the new book should be stored as a list/array of size 1, so it's easy to pull the list out of storage and add to it later.

Style output books

When a book is displayed on the page after filling out the add book form. It should be styled, and a layout for multiple books should be added and made responsive

Load books from localStorage and display them on page load

When the user comes back to the website, we must read book data from localStorage. If there are some books currently being stored, we must loop through them and display them on the web page. If there are no books currently in storage, no further action is needed.
This should be completed after #9

Add TypeScript

The client-side code will be written in TypeScript for this project. We need a tsconfig.json file, options need to be decided upon. We need instructions on how to get started in a README.md file. These instructions should include:

  • How to install TypeScript support
  • How to compile TypeScript with the watch option

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.