Skip to content

18m Solution #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: 18m
Choose a base branch
from
+19 −1
Open

18m Solution #114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion 2-copy-of-code/lesson-18/scripts/orders.js
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have noticed that the estimatedDeliveryTime response from the POST /orders does not use isWeekend().

Screenshot from 2025-03-12 14-11-40

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it does not. But the "skipping weekends part" was an exercise. Lesson 15 Exercise 15m.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@a10n-jsd use this code

const matchedOption = findDeliveryOption(order.orderTime, productDetails.estimatedDeliveryTime);
console.log(matchedOption);

let deliveryDate = 'undefined';
if(matchedOption){
       deliveryDate = calculateDeliveryDateFrom(order.orderTime, matchedOption);
}

 <div class="product-quantity">
     Quantity: ${productDetails.quantity}
 </div>

// all this code for skipping weekends from product-delivery-date
// to skip weekends we need deliveryOptions.deliveryDays 
// but the products we get from backend doesnt have deliveryOption, and we cant change backend
// so here is the code for finding an deliveryOption, which we can use in our function

function countDaysBetween(startDate, endDate) {
    // .diff is built-in method of dayjs which calculates tha difference between two dates in days
    return dayjs(endDate).diff(dayjs(startDate), 'day');
}

function findDeliveryOption(orderTime, estimatedDeliveryTime){
    const daysBetween = countDaysBetween(orderTime, estimatedDeliveryTime);
    return deliveryOptions.find(option => option.deliveryDays === daysBetween) || null;
}

Alternate version of calculateDeliveryDate(). Put this code in deliveryOptions.js

export function calculateDeliveryDateFrom(orderTime, deliveryOption){
    let orderDate = dayjs(orderTime);
    let daysAdded = 0;

    while(daysAdded < deliveryOption.deliveryDays){
        orderDate = orderDate.add(1, 'day');

        //skip weekends: 0 = Sunday, 6 = Saturday
        if(orderDate.day() !== 0 && orderDate.day() !== 6){
            daysAdded++;
        }
    }

    return orderDate.format('MMMM D');
}

this calculates not from current date but the day we ordered

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@im-anuj thanks dude!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please tell where do we have to put the code you gave above alternate version of calculatedeliverydate?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can put these code at bottom of deliveryOptions.js file, and then can import in order.js and tracking.js

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if anyone having problems, you can checkout my repo- https://github.com/im-anuj/shopping-site-vanilla
i have done all the assignments and modified it a bit, hope it helps.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks i just put it inside order.js and made it a function so i can export it to tracking.

Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {getProduct, loadProductsFetch} from '../data/products.js';
import {orders} from '../data/orders.js';
import dayjs from 'https://unpkg.com/[email protected]/esm/index.js';
import formatCurrency from './utils/money.js';
import {addToCart} from '../data/cart.js';

async function loadPage() {
await loadProductsFetch();
Expand Down Expand Up @@ -61,7 +62,8 @@ async function loadPage() {
<div class="product-quantity">
Quantity: ${productDetails.quantity}
</div>
<button class="buy-again-button button-primary">
<button class="buy-again-button button-primary js-buy-again"
data-product-id="${product.id}">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
Expand All @@ -81,6 +83,22 @@ async function loadPage() {
}

document.querySelector('.js-orders-grid').innerHTML = ordersHTML;

document.querySelectorAll('.js-buy-again').forEach((button) => {
button.addEventListener('click', () => {
addToCart(button.dataset.productId);

// (Optional) display a message that the product was added,
// then change it back after a second.
button.innerHTML = 'Added';
setTimeout(() => {
button.innerHTML = `
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
`;
}, 1000);
});
});
}

loadPage();