Book Shop by birbwatcher · Pull Request #2 · birbwatcher/Book-Shop

birbwatcher · 2022-09-13T20:04:29Z

Task:
https://github.com/rolling-scopes-school/js-fe-course-en/blob/main/tasks/books-shop/books-shop.md

3. Deploy: https://birbwatcher.github.io/Book-Shop/
4. Done 13.09.2022
5. Score: 100 / 100

The content of catalog page created thru the JavaScript is implemented
After user clicks on Show more button the popup with description and close button are shown is implemented
The HTML elements should be added to page by one step (it's a hint to read about document fragment) is implemented
When the user adds the book to the bag (either by click on Add to bag button or by drag-and-drop), the book appears in the bag with shorten data (title, author, price) and remove (cross) button. Also, the total sum is updated. Is implemented
When user click on Confirm order he appears in the Order form page. Is implemented
The order form contains fields with own validation rules and Complete button. Is implemented
The Complete button is disabled until the user full form with valid information. Is implemented
If user left the field empty or full of invalid data, this field became red (means red border) and the validation message (The field is invalid) is appeared. After user fix data and left the field again, the validation red border and message should disappear. Is implemented
After user full all mandatory field with valid information, the Complete button become active. Is implemented
After user click on Complete button, he will see the summarized information: for instance, The order created. The delivery address is Amazing street house 3 flat 10. Customer John Gald. Is implemented

Xelsoid · 2022-09-14T11:22:50Z

index.html

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Shop</title>
+    <link rel="stylesheet" href="./dist/style.css">
+    <link rel="stylesheet" href="./dist/normalize.css">


I'm pretty sure "normalize.css" should come first (before style.css)

Xelsoid · 2022-09-14T11:23:31Z

script.js

+async function getBooks() {
+    let result = await fetch("./books.json");
+    let array = await result.json();
+    books = await array;


redundant "await"

Xelsoid · 2022-09-14T11:26:33Z

script.js

+async function shopInit() {
+    createHeader();
+    createMain();
+    await getBooks();


await expects a Promise, I don't see you return Promise from 'getBooks' function

Xelsoid · 2022-09-14T11:27:09Z

script.js

+import ddInit from "./scripts/dragndrop.js";
+
+async function getBooks() {
+    let result = await fetch("./books.json");


const here and below

Xelsoid · 2022-09-14T11:28:32Z

script.js

+    createFooter();
+    createPopUp();
+    loadedPage.append(wrapper);
+    loadedPage.append(createFooter());


do you need to execute "createFooter()" function twice?

Xelsoid · 2022-09-14T11:52:26Z

scripts/checkoutPage.js

+    label.innerHTML = labelName;
+    input.type = "radio";
+    input.name = "Payment";
+    if (checked) {


Suggested change

if (checked) {

input.checked = checked

Xelsoid · 2022-09-14T11:54:27Z

scripts/createCard.js

+         fastView.innerHTML = "Fast View";
+         card.append(fastView);
+
+         fastView.onclick = function () {


I would recommend you to use event delegation

Xelsoid · 2022-09-14T11:58:27Z

scripts/formValidation.js

+    let fieldFlatNumber = document.getElementById('flat-number');
+    let fieldDeliveryDate = document.getElementById('delivery-date');
+
+    fieldFlatNumber.onblur = function() {


the best practice is to use addEventListener instead of inline handlers

Xelsoid · 2022-09-14T11:59:10Z

scripts/formValidation.js

+import createElement from "./createElement.js";
+import {cart} from "./cart.js";
+
+export default function checkForms() {


the function looks to long, it's better to split it by logical pieces to improve readability

Xelsoid · 2022-09-14T12:01:45Z

scripts/formValidation.js

+    let fieldFlatNumber = document.getElementById('flat-number');
+    let fieldDeliveryDate = document.getElementById('delivery-date');
+
+    fieldFlatNumber.onblur = function() {


I would recommend you to use "focusout" event + event delegation. It will help you to avoid boilerplate
https://learn.javascript.ru/focus-blur#sobytiya-focusin-focusout

Xelsoid · 2022-09-14T12:08:46Z

Things to improve:

function and variable naming
let/const
do not use "long" functions, split code into small logic chunks
improve code readability by splitting operations into variables
use event delegation
use modern features like arrow function and forEach

Xelsoid · 2022-09-14T12:09:37Z

missed "for" attributes

birbwatcher added 30 commits August 29, 2022 16:44

init: start book store task

b6d7470

feat: webpack installed

63e0743

feat: normalize added

e7eb4ca

fix: normalize added

6ad60df

feat: books added

0df56ef

fix: src excluded from gitignore

8db7db8

feat: layout created

bc17bf6

feat: full layout with books implemented

fc72d69

feat: buttons and price added

174fbdb

feat: fast view button added

4203b4a

feat: logo added

b8610fc

refactor: functions for creating elements and blocks

a7c3274

feat: sidebar cart added

c763601

feat: popup implemented

0fb5f6a

feat: popup close button design implemented

cf1e414

feat: external module for create element implemented

f48e271

feat: external module for create header implemented

dacb406

feat: external modules for main, sidebar and cart container

1da9716

feat: external module for create footer

8b02d0e

feat: external module for create Card

69d1dc0

feat: external module for popUp

37e1d20

feat: function getpopup implemented

6046435

feat: popup open and close implementation

dd0fc56

feat: fast view button get right book implementation

ef30c3f

feat: add to cart button set data

8146b2c

feat: cart without count is implemented

0c5fd58

feat: cart with count adding and removing implemented

decdd99

feat: add to card and added buttons implemented

51b0afd

feat: adding from popup is implemented

0bcba9b

fix: adding from popup is fixed

6768d1a

birbwatcher added 14 commits September 7, 2022 16:20

feat: count of books in cart can be increased by drag n drop

85a5aa9

feat: full working dragndrop

06eef5e

feat: checkout and empty cart buttons implemented

37a465d

refactor: function alreadyincart refactored

f7dcf2b

feat: forms on checkout page is created

ba46a41

feat: date form minimum implemented

fb4d1f0

feat: forms cant be blank

642cd24

feat: default payment type implemented

cce8f5a

feat: posible to get only two gifts

81eb4a0

feat: form checked on focus out

f106e06

feat: button checkout hidden when fields is empty

93cf7ca

feat: order function implemented

ec8a974

feat: basket delete item is ready

f9c7cb7

fix: dragndrop icon position fixed

8b221ad

github-pages bot temporarily deployed to github-pages September 13, 2022 20:13 Inactive

refactor: comments and console.logs deleted

febcf70

github-pages bot temporarily deployed to github-pages September 13, 2022 20:45 Inactive

refactor: scss variables refactored

03f556a

github-pages bot temporarily deployed to github-pages September 13, 2022 20:57 Inactive

Xelsoid reviewed Sep 14, 2022

View reviewed changes

fix: apartment number checkin

0f75387

github-pages bot temporarily deployed to github-pages September 15, 2022 10:57 Inactive

fix: date is checked properly

bcc446a

github-pages bot temporarily deployed to github-pages September 15, 2022 11:34 Inactive

feat: date checking message is changed

72fa38a

github-pages bot temporarily deployed to github-pages September 15, 2022 11:35 Inactive

fix: order of css files changed

627211c

github-pages bot deployed to github-pages September 15, 2022 17:50 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Book Shop#2

Book Shop#2
birbwatcher wants to merge 55 commits intomainfrom
work

birbwatcher commented Sep 13, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid Sep 14, 2022

Uh oh!

Xelsoid commented Sep 14, 2022 •

edited

Loading

Uh oh!

Xelsoid commented Sep 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

birbwatcher commented Sep 13, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Xelsoid commented Sep 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Xelsoid commented Sep 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Xelsoid commented Sep 14, 2022 •

edited

Loading