Forem: Pillagerplayz 💻🌐

How to create a simple shopping cart in HTML5, CSS3, and JS with Payment integration

Pillagerplayz 💻🌐 — Wed, 18 Sep 2024 23:05:59 +0000

If you want to create your own shopping cart in HTM5, CSS3, and JS, you are in the right place! This is how to create a shopping cart. This also includes Payment integration from the Payment Request API!

1. Create the files

Create a folder and put these files in it:

index.html
style.css
script.js

2. Add HTML

Put this in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="products">
        <div class="product">
            <h2>Product 1</h2>
            <p>$10</p>
            <button onclick="addToCart('Product 1', 10)">Add to Cart</button>
        </div>
        <!-- Add more products as needed -->
    </div>
    <div class="cart">
        <h2>Shopping Cart</h2>
        <ul id="cart-items"></ul>
        <p>Total: $<span id="cart-total">0</span></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Add CSS

Put this in style.css:

.products, .cart {
    margin: 20px;
}
.product, .cart-item {
    margin-bottom: 10px;
}

4. Add Javascript

Put this in script.js:

let cart = [];

function addToCart(name, price) {
    const item = cart.find(product => product.name === name);
    if (item) {
        item.quantity++;
    } else {
        cart.push({ name, price, quantity: 1 });
    }
    updateCart();
}

function removeFromCart(name) {
    cart = cart.filter(product => product.name !== name);
    updateCart();
}

function updateCart() {
    const cartItems = document.getElementById('cart-items');
    const cartTotal = document.getElementById('cart-total');
    cartItems.innerHTML = '';
    let total = 0;
    cart.forEach(product => {
        const li = document.createElement('li');
        li.textContent = `${product.name} - $${product.price} x ${product.quantity}`;
        const removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.onclick = () => removeFromCart(product.name);
        li.appendChild(removeButton);
        cartItems.appendChild(li);
        total += product.price * product.quantity;
    });
    cartTotal.textContent = total;
}
const paymentRequest = new PaymentRequest(
  [
    {
      supportedMethods: 'basic-card',
      data: {
        supportedNetworks: ['visa', 'mastercard'],
      },
    },
  ],
  {
    total: {
      label: 'Total',
      amount: { currency: 'USD', value: '10.00' },
    },
  }
);
paymentRequest.show().then((paymentResponse) => {
  // Process the payment
  console.log(paymentResponse);

  // Complete the payment
  paymentResponse.complete('success').then(() => {
    console.log('Payment completed successfully');
  });
}).catch((error) => {
  console.error('Payment failed', error);
});

5. Explaining the JS file

1. Shopping cart functionality

Initialize the cart

let cart = [];

cart: An empty array to store items added to the cart.

2 Add items to the cart

function addToCart(name, price) {
    const item = cart.find(product => product.name === name);
    if (item) {
        item.quantity++;
    } else {
        cart.push({ name, price, quantity: 1 });
    }
    updateCart();
}

addToCart(name, price): Function to add items to the cart.
cart.find(product => product.name === name): Searches for an item in the cart by name.
if(item): If an item is found, it increments the quantity.
else: If the item is not found, it adds a new item to the cart with the specified name, price, and a quantity of 1.
updateCart(): Calls the updateCart function to refresh the cart display.

3 Remove items from the cart

function removeFromCart(name) {
    cart = cart.filter(product => product.name !== name);
    updateCart();
}

removeFromCart(name): Function to remove items from the cart.
cart.filter(product => product.name !== name): Filters out the item with the specified name from the cart.
updateCart(): Calls the updateCart function to refresh the cart display.

4 Update the cart display

function updateCart() {
    const cartItems = document.getElementById('cart-items');
    const cartTotal = document.getElementById('cart-total');
    cartItems.innerHTML = '';
    let total = 0;
    cart.forEach(product => {
        const li = document.createElement('li');
        li.textContent = `${product.name} - $${product.price} x ${product.quantity}`;
        const removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.onclick = () => removeFromCart(product.name);
        li.appendChild(removeButton);
        cartItems.appendChild(li);
        total += product.price * product.quantity;
    });
    cartTotal.textContent = total;
}

updateCart(): Function that updates the cart display.
cartItems: Gets the HTML element with the ID cart-items.
cartTotal: Gets the HTML element with the ID cart-total.
cartItems.innerHTML = '': Clears the current cart items display.
let total = 0: Initializes the total amount to 0.
cart.forEach(product => { ... }): Iterates over each product in the cart.
document.createElement('li'): Creates a new list item element.
li.textContent = ${product.name} - $${product.price} x ${product.quantity}: Sets the text content of the list item.
document.createElement(‘button’): Creates a new button element.
removeButton.textContent = 'Remove': Sets the text content of the button.
removeButton.onclick = () => removeFromCart(product.name): Sets the button’s click event to call removeFromCart.
li.appendChild(removeButton): Adds the button to the list item.
cartItems.appendChild(li): Adds the list item to the cart items display.
total += product.price * product.quantity: Adds the product's total price to the total amount.
cartTotal.textContent = total: Updates the total amount display.

Payment Request API

Create a Payment Request object

const paymentRequest = new PaymentRequest(
  [
    {
      supportedMethods: 'basic-card',
      data: {
        supportedNetworks: ['visa', 'mastercard'],
      },
    },
  ],
  {
    total: {
      label: 'Total',
      amount: { currency: 'USD', value: '10.00' },
    },
  }
);

PaymentRequest: Creates a new payment request.
supportedMethods: Specifies the payment methods supported (e.g., ‘basic-card’).
data: Contains additional information about the payment method, such as supported networks.
total: Represents the total amount to be charged.

2 Show the Payment Request

paymentRequest.show().then((paymentResponse) => {
  // Process the payment
  console.log(paymentResponse);

  // Complete the payment
  paymentResponse.complete('success').then(() => {
    console.log('Payment completed successfully');
  });
}).catch((error) => {
  console.error('Payment failed', error);
});

show(): Displays the payment interface to the user.
then((paymentResponse) => { ... }): If the user approves the payment, this promise resolves with a paymentResponse object.
paymentResponse: Contains the user’s payment details.
console.log(paymentResponse): Logs the payment response for processing.
catch((error) => { ... }): If the payment fails or is canceled, this promise catches the error and logs it.

Summary

This code manages a shopping cart by adding, removing, and updating items, and then processes a payment using the Payment Request API. If you have any more questions or need further clarification, feel free to ask in the comments!

Conclusion

That concludes my article about creating a shopping cart with payment integration in HTML5, CSS3, and JS! Make sure to leave a comment and a reaction and check out more of my stuff!

Understanding Class Fields and Static Properties

Pillagerplayz 💻🌐 — Mon, 02 Sep 2024 20:33:19 +0000

Hello! Welcome to this article about Class Fields and Static Properties!
ES15 added the ability to define class fields and static properties directly within the class body. This eliminates the need for constructor functions to initialize properties, leading to cleaner and more concise code. This is about understanding this new feature!

1. Define a class.

You need to define a class to use it:

class myClass {
}

2. Put the properties in the class.

Putting the properties in the class defines the properties:

class myClass {
    property1;
    property2;
}

You can add as many properties as you need.

3. Add the `constructor()` function.

Add the constructor function to define the keys in the this object for the properties:

class myClass {
    property1;
    property2;
    constructor(property1, property2) {
        this.property1 = property1;
        this.property2 = property2;
    }
}

4. Example

This is an example of using this new feature in JS:

class Person {
    name;
    age;
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

5. Conclusion

And that is the conclusion for this post!
Make sure you add a reaction and bookmark this!
Also make sure you comment down below!
This post was made for The Frontend Challenge!

How to create a library and use it in Javascript

Pillagerplayz 💻🌐 — Sat, 17 Aug 2024 12:44:36 +0000

Ever wanted to create your own JS library and use it? Well, you went to the right place! Learn how by reading this post!

Chapter 1: Creating the library

These are the methods of creating the library!

Method 1: Making an object method (6 steps)

Step 1: Make a function.

function LibObjectName() {
};

Tip: You can change the "LibObjectName" to the library name.

Step 2: Make a constant of the object with the methods.

function LibObjectName() {
    const OBJ_NAME = {};
};

Tip: Make the object with methods a constant so NOBODY could edit it.

Tip: Make the object name very random so it is secure.

Step 3: Put a return function to return the object with the methods.

function LibObjectName() {
    const OBJ_NAME = {};
    return OBJ_NAME;
}

Step 4: Put the methods in the object with methods.

function LibObjectName() {
    const OBJ_NAME = {
        "methodName": (parameters) => {
           // Code goes here
        }
    };
    return OBJ_NAME;
};

Tip: You can add as many methods as your library needs.

Tip: The "parameters" are optional.

Step 5: Make a constant of the library name with the library object.

const LibName = new LibObjectName();

Tip: The `new` keyword is optional. It works without and with the `new` keyword. The `new` keyword is used in most libraries that use this method.

Tip: Change "LibName" to the name of your library.

Tip: The library name constant can be put in or out of the library script. Some libraries use it inside the library script and some of the libraries need it out of the library script. When it is out, it is like an API Key.

Step 6: Final step, test all the methods to see if they work!
Here's an example library:

function HelloWorld() {
    const HW_OBJ = {
        "sayMessage": () => {
                alert("Hello World!")
        }
    };
    return HW_OBJ;
};
const helloworld = new HelloWorld();
helloworld.sayMessage();

Returns:

Hello World!

That is how to make a library with Method 1!

Method 2: Making String Methods (4 steps)

Step 1: Make the string method name.

String.prototype.methodName

Tip: Change "methodName" to whatever is needed for your library.

Step 2: Set it to a function value.

String.prototype.methodName = function(parameters) {
    // Code goes here
};

Tip: The "parameters" are optional.

Step 3: Put the return function at the end of the code.

String.prototype.methodName = function(parameters) {
    // Code goes here
    return value;
};

Tip: The "value" is what the string will return.

Tip: The Javascript `this` keyword gets the datatype and string that is using the string method. Use `this.toString()` to get the string only.

Step 4: Final step, test all the string methods added!
Example Library with string method:

String.prototype.addPuncAtEnd = function(punc) {
    return this.toString() + punc;
};
alert("What's your name".addPuncAtEnd("?"));

Returns:

What's your name?

That is how to make a library with Method 2!

Method 3: Making custom functions (4 steps)

Step 1: Add a function.

function funcName() {
};

Tip: Change "funcName" to the function name.

Step 2: Add Parameters. (Optional)

function funcName(parameters) {
};

Tip: This step is optional. You can skip this step if you don't want any parameters.

Step 3: Add code.

function funcName(parameters) {
    // Code goes here
};

Step 4: Final step, test all the custom functions to see if they work!
Example Library:

function say(text) {
    alert(text)
};
say("Hello World!")

Returns:

Hello World!

That is how to make a library with Method 3!

Method 4: Creating custom DOM's (5 steps)

Step 1: Make the document method.

document.method

Tip: Change "method" to the DOM name.

Step 2: Substituting it with a function.

document.method = function(parameters) {
};

Tip: The parameters are optional.

Step 3: Putting code in the function.

document.method = function(parameters) {
    // Code goes here
};

Step 4: Put a return function. (optional)

document.method = function(parameters) {
    // Code goes here
    return value;
};

Tip: Change "value" to the value you want it to return

Tip: This step is optional. Skip this if you don't want it to return something.

Step 5: Final step, test every custom DOM method to see if they work!
Example Library:

document.changeText = function(text, id) {
    document.getElementById(id).textContent = text;
};
document.changeText("Surprise!", "p");

Returns:

From jsfiddle.net (Fiddle Link)
That is how to create a library with Method 4!

Tip: You can use multiple methods in your library!

Chapter 2: Using the library.

These are methods of using the library!

Tip: When the checkmark (✅) is next to a method, that means that if a person wants to always automatically update the library, it'll update itself every time the library is updated!

Method 1: Import method (2 steps)

Step 1: Create your library.

Open a code editor, write the JS library code, and save it as a JS file.
Rename your JS file to the library name with the information like, version, build, etc. Step 2: Importing the library. You can use HTML:

<script src="libname.js"></script>

Or JavaScript:

import 'libname.js';

Tip: If you are sharing the file with other people to download, this method isn't the best. Because, if the library constantly updates, people will need to download another file and put the new file in all the projects that use it.

Method 2: Using Cloudflare cdnjs (2 steps)

Step 1: Share your library on cdnjs.cloudflare.com
Consider reading How to share a library on cdnjs to learn how to do this!
Step 2: Importing the library.
You can use HTML (recommended)

<script src="[cdnjs link here]">

Or JavaScript (not recommended)

let scriptElement = document.createElement("script").setAttribute("src", "[cdnjs link here]");
let elem = document.scriptElement;
let parentDiv = elem.parentNode;
parentDiv.insertBefore(scriptElement, elem);

Tip: A cdnjs link has a version in it. If a person wants to keep using the newest version of the library, he/she will have to update the cdnjs link for every project that uses it to the newest version link. So, this method isn't the sharpest tool in the shed.

Method 3: Using Raw Pastebin ✅ (5 steps)

Step 1: Create an account.
If you don't have an account, create your account on Pastebin. If you do, skip this step.
Step 2: Create a new JavaScript paste.
Step 3: Type your library source code in the box.
Step 4: Press "Create new paste".
Step 5: Importing the library.
You can use HTML (recommended)

<script src="https://www.pastebin.com/raw/[paste id]/"></script>

Or JavaScript (not recommended)

let scriptElement = document.createElement("script").setAttribute("src", "https://www.pastebin.com/raw/[paste id]/");
let elem = document.scriptElement;
let parentDiv = elem.parentNode;
parentDiv.insertBefore(scriptElement, elem);

Method 4: Using Raw Github ✅ (4 steps)

Step 1: Create an account on Github. If you already have an account, skip this step!
Step 2: Create a new repository of your library.
Step 3: Add the library file to your repository.
Step 4: Importing the library.
You can use HTML (recommended)

<script src="https://raw.githubusercontent.com/[user]/[repository name]/[branch]/[library file]/"></script>

Or JavaScript (not recommended)

let scriptElement = document.createElement("script").setAttribute("src", "https://raw.githubusercontent.com/[user]/[repository name]/[branch]/[library file]/");
let elem = document.scriptElement;
let parentDiv = elem.parentNode;
parentDiv.insertBefore(scriptElement, elem);

Chapter 3: Conclusion

And that is how to create and share a JavaScript library!
Make sure you add a reaction and bookmark this!
Comments will be helpful!
Hope this helped and have a great day! 😀
Make sure you follow me to get notifications about my posts!

How to share a library on cdnjs

Pillagerplayz 💻🌐 — Fri, 09 Aug 2024 00:19:04 +0000

Ever wanted to share your library on cdnjs.cloudflare.com? Then, you found the right place! Learn how by reading this post!

1. Requirements

These are the things you need before you start:
A Github account
A public repository for your library

2. Ensure your library meets requirements.

Your library should be open-source and meet the popularity criteria (e.g. 100 stars on Github or 500 downloads/month on npm)

3. Fork the cdnjs Repository.

Go to the cdnjs Github repository and fork it to your own Github account.

4. Add your library.

Open the terminal and clone your forked repository. Create a new directory for your library under the ajax/libs directory. Add your library files and a package.json file with the necessary metadata.

5. Create a Pull Request.

Once you’ve added your library, commit your changes and push them to your forked repository. Then, create a pull request to the main cdnjs repository.

6. Wait for Review.

The cdnjs team will review your pull request. If everything is in order, they’ll merge it, and your library will be available on cdnjs.

7. Conclusion

And that is how to share a library on cdnjs!
Consider leaving comments down below if I missed anything, give a compliment, or suggesting ideas.

How to make a slider in HTML + CSS

Pillagerplayz 💻🌐 — Sat, 20 Jul 2024 23:36:23 +0000

Have you ever wanted to create a slider in HTML + CSS? Well, you're in the right place! This is how to create a slider!

1. Switch Label

Rectangular Switch:

<!DOCTYPE html>
<html>
<body>
    // Define Label
    <label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
    </label>
</body>
</html>

Round Switch:

<!DOCTYPE html>
<html>
<body>
    // Define Label
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</body>
</html>

2. Add CSS

CSS:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

Add this if it is a round slider:

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

And this is the result:

w3schools.com

I hoped this tutorial helped you! :)

Keep Coding!

Forem: Pillagerplayz 💻🌐

How to create a simple shopping cart in HTML5, CSS3, and JS with Payment integration

1. Create the files

2. Add HTML

3. Add CSS

4. Add Javascript

5. Explaining the JS file

1. Shopping cart functionality

Payment Request API

Summary

Conclusion

Understanding Class Fields and Static Properties

1. Define a class.

2. Put the properties in the class.

3. Add the constructor() function.

4. Example

5. Conclusion

How to create a library and use it in Javascript

Chapter 1: Creating the library

Method 1: Making an object method (6 steps)

Tip: You can change the "LibObjectName" to the library name.

Tip: Make the object with methods a constant so NOBODY could edit it.

Tip: Make the object name very random so it is secure.

Tip: You can add as many methods as your library needs.

Tip: The "parameters" are optional.

Tip: The new keyword is optional. It works without and with the new keyword. The new keyword is used in most libraries that use this method.

Tip: Change "LibName" to the name of your library.

Tip: The library name constant can be put in or out of the library script. Some libraries use it inside the library script and some of the libraries need it out of the library script. When it is out, it is like an API Key.

Method 2: Making String Methods (4 steps)

Tip: Change "methodName" to whatever is needed for your library.

Tip: The "parameters" are optional.

Tip: The "value" is what the string will return.

Tip: The Javascript this keyword gets the datatype and string that is using the string method. Use this.toString() to get the string only.

Method 3: Making custom functions (4 steps)

Tip: Change "funcName" to the function name.

Tip: This step is optional. You can skip this step if you don't want any parameters.

Method 4: Creating custom DOM's (5 steps)

Tip: Change "method" to the DOM name.

Tip: The parameters are optional.

Tip: Change "value" to the value you want it to return

Tip: This step is optional. Skip this if you don't want it to return something.

Tip: You can use multiple methods in your library!

Chapter 2: Using the library.

Tip: When the checkmark (✅) is next to a method, that means that if a person wants to always automatically update the library, it'll update itself every time the library is updated!

Method 1: Import method (2 steps)

Tip: If you are sharing the file with other people to download, this method isn't the best. Because, if the library constantly updates, people will need to download another file and put the new file in all the projects that use it.

Method 2: Using Cloudflare cdnjs (2 steps)

Tip: A cdnjs link has a version in it. If a person wants to keep using the newest version of the library, he/she will have to update the cdnjs link for every project that uses it to the newest version link. So, this method isn't the sharpest tool in the shed.

Method 3: Using Raw Pastebin ✅ (5 steps)

Method 4: Using Raw Github ✅ (4 steps)

Chapter 3: Conclusion

How to share a library on cdnjs

1. Requirements

2. Ensure your library meets requirements.

3. Fork the cdnjs Repository.

4. Add your library.

5. Create a Pull Request.

6. Wait for Review.

7. Conclusion

How to make a slider in HTML + CSS

1. Switch Label

2. Add CSS

3. Add the `constructor()` function.

Tip: The `new` keyword is optional. It works without and with the `new` keyword. The `new` keyword is used in most libraries that use this method.

Tip: The Javascript `this` keyword gets the datatype and string that is using the string method. Use `this.toString()` to get the string only.