ShopEase

Sweta Kanguri Sonulkar — Sat, 13 Jul 2024 00:20:22 +0000

This is a submission for the Wix Studio Challenge .

What I Built

I built a fully functional e-commerce website called ShopEase using Wix Studio. ShopEase focuses on promoting and selling eco-friendly products, specifically reusable bags. The website features a dynamic homepage with sections for featured products, promotional banners, and seamless navigation.

Demo

https://swetakanguri.wixsite.com/shopease

Development Journey

Leveraging Wix Studio’s JavaScript Development Capabilities
I utilized Wix Studio's powerful JavaScript capabilities to enhance the functionality and interactivity of the ShopEase website:

Custom JavaScript Functions: Implemented custom JavaScript to add interactive elements such as hover effects and dynamic content updates.

javascript
Hover Effects for Banner Text:

javascript
Copy code
// Change banner text on hover
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Don't Miss Out - Limited Time Offer!";
});

$w("#bannerText").onMouseOut(() => {
    $w("#bannerText").text = "Summer Sale - Up to 50% Off";
});

});
This script changes the text of #bannerText when a user hovers over it, providing dynamic content based on user interaction.

Dynamic Product Listing:

javascript
Copy code
// Fetch and display product data dynamically
import wixData from 'wix-data';

$w.onReady(function () {
wixData.query("Products")
.find()
.then((results) => {
let items = results.items;
items.forEach((product) => {
// Display product details on the page
$w("#productList").append(<div>${product.name} - $${product.price}</div>);
});
})
.catch((error) => {
console.log("Error fetching products: ", error);
});
});
This script fetches product data from a collection named "Products" and dynamically displays each product's name and price on the website.

Navigation Menu Activation:

javascript
// Activate navigation menu item based on current page
$w.onReady(function () {
let currentPage = window.location.pathname;
$w("#navMenu").forEach((menuItem) => {
if (menuItem.link === currentPage) {
menuItem.activate();
}
});
});
This script activates the navigation menu item that corresponds to the current page URL, providing visual feedback to users about their current location on the site.

// Example: Change banner text on hover
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Don't Miss Out - Limited Time Offer!";
});

$w("#bannerText").onMouseOut(() => {
    $w("#bannerText").text = "Summer Sale - Up to 50% Off";
});

});

APIs and Libraries Utilized

Wix Velo (Corvid): Leveraged for custom JavaScript development, enabling advanced interactions and data handling.
Wix Editor: Used for visual customization and layout design.
Wix Stores API: Integrated to manage product data and display information on the website
import wixStoresBackend from 'wix-stores-backend';

// Example function to fetch products from Wix Stores API
async function fetchProducts() {
try {
// Query products using Wix Stores API
const products = await wixStoresBackend.products.query()
.limit(10) // Limit the number of products returned
.find();

    // Process the products data
    products.items.forEach(product => {
        console.log(`Product Name: ${product.name}, Price: ${product.price}`);
        // Further processing or display logic can be added here
    });

    return products.items; // Return the products array if needed
} catch (error) {
    console.error('Error fetching products:', error);
    throw error; // Handle or rethrow the error as needed
}

}

// Example usage
fetchProducts()
.then(products => {
// Handle products data as needed
console.log('Fetched products:', products);
})
.catch(error => {
// Handle errors
console.error('Error fetching products:', error);
});

Team Submissions: https://dev.to/sweta_kangurisonulkar_ published the submission and credit Sweta Kanguri Sonulkar

Computer Science Concept: Hash Function

Sweta Kanguri Sonulkar — Thu, 13 Jun 2024 23:51:33 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Computer Science Concept: Hash Function
A hash function converts input data of any size into a fixed-size value, typically used in hash tables for fast data retrieval. It's crucial for efficient indexing and storage, ensuring quick access to data by assigning unique keys to inputs.

Additional Context

The explanation provides a concise overview of hash functions, highlighting their role in data structures and emphasizing their importance in ensuring efficient data retrieval and storage. Hash functions are foundational in many computer science applications, from databases to cryptography, making their understanding crucial for CS students and professionals.

DEV Community: Sweta Kanguri Sonulkar