DEV Community: HARUN NZAI

You can view my submission

HARUN NZAI — Sat, 14 Dec 2024 05:29:49 +0000

The frontend challenge

Winter Solstice Celebrations.

HARUN NZAI — Sat, 14 Dec 2024 05:26:25 +0000

Winter Solstice Celebrations: Exploring Science, Traditions, and Culture

Project Overview

This project showcases an interactive and visually appealing web page dedicated to the Winter Solstice. It delves into its scientific significance, cultural importance, and traditions celebrated worldwide. The goal is to create a stunning and interactive experience, blending modern design with meaningful content.

Demo

You can preview the live version of the Winter Solstice project and access the source code below:

Live Demo Link

GitHub Repository

Journey

The inspiration for this project came from the universal significance of the solstice. I wanted to present both scientific facts and cultural diversity through a modern and engaging interface. The project allowed me to:

Enhance my frontend skills using HTML, CSS, and JavaScript.

Experiment with smooth animations, responsive design, and interactive elements.

Learn about optimizing user navigation with smooth scrolling and dynamic buttons.

Here’s how the project evolved:

HTML: Structured content for clarity and semantic accuracy.
CSS: Enhanced the design with gradient backgrounds, animations, and responsive layouts.
JavaScript: Brought the page to life with interactive navigation and scroll-triggered effects.

I am proud of the smooth animations, responsive design, and scroll-to-top feature, which ensure a delightful user experience. Future improvements could include adding a carousel of solstice imagery or integrating API-based data for live solstice tracking.

Code

HTML

<!DOCTYPE html>

Winter Solstice Celebrations

Winter Solstice

Explore the Science, Traditions, and Global Celebrations

Start Exploring

Introduction
Science
Hemispheres
Celebrations
Traditions
Conclusion

<main>
    <section id="introduction" class="fade-in">
        <h2>Introduction</h2>
        <p>The winter solstice is the shortest day and longest night of the year. It has inspired traditions worldwide, celebrating the triumph of light over darkness.</p>
    </section>

    <section id="science" class="fade-in">
        <h2>The Science</h2>
        <p>Caused by the Earth's axial tilt, the solstice is a moment when the Sun reaches its lowest or highest point in the sky, marking a pivotal astronomical event.</p>
    </section>

    <section id="hemispheres" class="fade-in">
        <h2>Hemispheres Experience</h2>
        <p>While the Northern Hemisphere associates the solstice with winter, the Southern Hemisphere experiences summer celebrations.</p>
    </section>

    <section id="celebrations" class="fade-in">
        <h2>Global Celebrations</h2>
        <p>From bonfires to festive dances, the solstice is celebrated globally as a time of renewal and hope.</p>
    </section>

    <section id="traditions" class="fade-in">
        <h2>Traditions</h2>
        <ul>
            <li>Lighting fires to symbolize light overcoming darkness.</li>
            <li>Feasting to strengthen community bonds.</li>
            <li>Exchanging gifts to celebrate goodwill.</li>
        </ul>
    </section>

    <section id="conclusion" class="fade-in">
        <h2>Conclusion</h2>
        <p>The winter solstice unites us through themes of renewal, hope, and celebration. Join us in embracing the wonder of this celestial event.</p>
    </section>
</main>

<footer id="main-footer">
    <p>&copy; 2024 Winter Solstice</p>
    <button id="scrollTopBtn">Back to Top</button>
</footer>

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

CSS

/* Base Reset */

{ margin: 0; padding: 0; box-sizing: border-box; }

/* Fonts and Colors */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background: linear-gradient(to bottom, #001f3f, #1c1c1c);
color: #fff;
}

header {
position: relative;
text-align: center;
color: #fff;
background: url('header-bg.jpg') no-repeat center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.header-overlay {
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 8px;
}

header h1 {
font-size: 3rem;
margin-bottom: 10px;
}

header p {
font-size: 1.2rem;
margin-bottom: 20px;
}

.btn {
padding: 10px 20px;
font-size: 1.1rem;
color: #001f3f;
background: #ffcc00;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.btn:hover {
background: #e0ac00;
}

main section {
padding: 40px 20px;
max-width: 800px;
margin: 20px auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Animations */
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}

footer {
text-align: center;
padding: 10px 0;
background: #111;
color: #fff;
}

scrollTopBtn {

position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
background: #ffcc00;
color: #001f3f;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
transition: all 0.3s ease;

}

JavaScript

// Smooth Scroll to Sections
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

// Scroll-to-Top Button
const scrollTopBtn = document.getElementById('scrollTopBtn');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
scrollTopBtn.style.display = 'block';
} else {
scrollTopBtn.style.display = 'none';
}
});

scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});

Conclusion

This project reflects the significance of the Winter Solstice while leveraging modern web technologies to provide an engaging user experience. It demonstrates creative design, interactive navigation, and responsive functionality, making it a strong contender in the challenge.Thank you so much for this opportunity,hope you will consider my submission.

Real time E commerce price tracker and Deal finder

HARUN NZAI — Sat, 14 Dec 2024 04:58:33 +0000

Project Title

Real-Time E-commerce Price Tracker and Deal Finder

Introduction

In today’s competitive online shopping landscape, finding the best deals can be overwhelming for consumers. This project, Real-Time E-commerce Price Tracker and Deal Finder, is designed to scrape real-time product prices and discounts from e-commerce websites to help users identify the best deals.

Using Bright Data Scraping Browser, the project effectively handles complex, dynamic web elements like infinite scrolling, AJAX requests, and user authentication pages to extract structured data.

Objective

To create a tool that:

Scrapes real-time prices and discounts from dynamic e-commerce websites.
Filters and organizes data by categories like electronics, clothing, and home appliances.
Provides a user-friendly dashboard to search and explore the best deals.

Technical Setup

Tools and Technologies

Bright Data Scraping Browser: To handle dynamic content and simulate user interactions.

Python: For scripting and automation.

Selenium: To control the browser and extract web data.

Pandas: To process and structure the scraped data.

Streamlit: For creating an interactive dashboard.

Website Targeted

For this project, we focused on websites with infinite scrolling and AJAX-based content. An example is an e-commerce website such as Amazon, which requires handling dynamic elements to extract information about product prices, discounts, and ratings.

Challenges and Solutions

Challenge 1: Infinite Scrolling

Issue: Dynamic websites often load new content as users scroll down.

Solution: Implemented scrolling logic in Selenium to trigger additional data loads and used Bright Data’s infrastructure to maintain session stability.

Challenge 2: Dynamic Content Rendering

Issue: Many sites rely on JavaScript to load elements.

Solution: Bright Data Scraping Browser processed JavaScript-heavy pages to retrieve fully loaded content.

Challenge 3: Anti-Bot Measures

Issue: CAPTCHAs and rate-limiting blocked traditional scrapers.

Solution: Bright Data handled these using its CAPTCHA bypass and rotating IPs.

Implementation

Code Snippets

Step 1: Scraping Dynamic Data

The following Python script handles infinite scrolling, dynamic content, and data extraction:

from selenium import webdriver
from selenium.webdriver.common.by import By
import pandas as pd
import time

Configure WebDriver

options = webdriver.ChromeOptions()
options.add_argument('--headless') # Run browser in background
driver = webdriver.Chrome(options=options)

def scrape_ecommerce_data(url):
driver.get(url)
time.sleep(5) # Allow page to load

products = []

  
  
  Scroll and extract data


for _ in range(5):  # Adjust the range for more scrolling

    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

    time.sleep(2)  # Wait for new content to load

items = driver.find_elements(By.CLASS_NAME, "product-class")  # Update class names for the site

for item in items:
    try:
        name = item.find_element(By.CLASS_NAME, "name-class").text  # Product name
        price = item.find_element(By.CLASS_NAME, "price-class").text  # Product price
        rating = item.find_element(By.CLASS_NAME, "rating-class").text  # Product rating

        products.append({
            "Name": name,
            "Price": price,
            "Rating": rating
        })
    except:
        continue  # Handle missing data gracefully



return pd.DataFrame(products)

Example usage

url = "https://www.example-ecommerce.com"
data = scrape_ecommerce_data(url)
data.to_csv("ecommerce_data.csv", index=False)
driver.quit()

Step 2: Building the Dashboard

Using Streamlit, I created an interactive dashboard to showcase the data:

import streamlit as st
import pandas as pd

Load scraped data

data = pd.read_csv("ecommerce_data.csv")

Dashboard design

st.title("Real-Time E-commerce Price Tracker")
st.write("Explore the best deals in various categories!")

Filters

category = st.selectbox("Select Category", options=["All", "Electronics", "Clothing", "Home Appliances"])
price_range = st.slider("Price Range", 0, 5000, (0, 5000))

Filter data

filtered_data = data[(data["Price"] >= price_range[0]) & (data["Price"] <= price_range[1])]

st.write("### Filtered Results")
st.write(filtered_data)

Results

Sample Output
The following table shows the extracted data (mock sample for illustration):
Interactive Dashboard
The Streamlit dashboard allowed users to filter deals by price and categories in real time.

Conclusion

This project demonstrates how Bright Data’s Scraping Browser simplifies the process of extracting data from complex websites. By leveraging its tools, the challenges of infinite scrolling, dynamic content, and CAPTCHA protection were effectively addressed.

Future Enhancements

Include multiple e-commerce websites.

Add alerts for price drops and better deals.

Expand to regional websites for localized deal tracking.

Files and Submission

The following files are ready for submission:

Scraper Code: ecommerce_scraper.py
Dashboard Code: dashboard.py
Sample Data: ecommerce_data.csv
Documentation: This file as README.md.