Web scraping is the process of automatically extracting information from websites, making it a powerful tool for data collection and analysis. In this tutorial, we will explore how to use Python and BeautifulSoup to scrape news data from a website. We’ll specifically focus on the task of extracting news headlines, publish dates, article content, and images from a news website.

Prerequisites

Before we start, make sure you have the following installed:

1. Python (https://www.python.org/downloads/)
2. Requests library (pip install requests)
3. BeautifulSoup library (pip install beautifulsoup4)

Introduction to Web Scraping

Web scraping involves fetching HTML content from web pages and then parsing that content to extract relevant data. The requests library allows us to fetch the HTML content of web pages, and BeautifulSoup makes it easy to parse and extract data from the HTML.

import requests
from bs4 import BeautifulSoup
from urllib.parse import urljoin

Creating the Telegram bot

First, we need to create a Telegram bot. To do this, follow these steps:

1. Open Telegram and search for the BotFather bot.
2. Start a chat with BotFather.
3. Send the /newbot command to BotFather.
4. Follow the prompts to create a new bot.
5. Once you’ve created the bot, BotFather will give you a token. Copy this token and save it somewhere safe.

Writing the Python script

Now that we have our bot token, we can write our Python script for scraping :

def get_news():
    base_url = ' insert here the URL you want to scrape'
    html_text = requests.get(base_url).text
    soup = BeautifulSoup(html_text, 'lxml')

    news_container = soup.find_all('article', class_='listing-item-blog')

    my_news = []
    prev_publish_date = None  # Store the previous news publish date
    for each_news in news_container:
        new_subpage = each_news.find('a', class_="post-title post-url")['href']
        subpage_html = requests.get(new_subpage).text
        subpage_soup = BeautifulSoup(subpage_html, 'lxml')

        news_title = subpage_soup.find('span', class_="post-title").text

        news_publish_date_element = each_news.find(
            'time', class_="post-published updated")
        news_publish_date = news_publish_date_element['datetime']

        if prev_publish_date and news_publish_date > prev_publish_date:
            # Skip this news as its publish date is not greater than the previous one
            continue

        div_element = subpage_soup.find(
            'div', class_='entry-content clearfix single-post-content')
        p_elements = div_element.find_all('p')

        paragraphs = []
        for p_element in p_elements:
            paragraph_text = p_element.get_text(strip=True).replace(
                '�', '')  # Remove unsupported character '�'
            paragraphs.append(paragraph_text)

        # Extract the image URL
        image_element = subpage_soup.find(
            'a', class_="post-thumbnail open-lightbox")
        if image_element:
            image_url = image_element['href']
            news_data = {
                'Title': news_title,
                'Publish Date': news_publish_date,
                'Paragraphs': paragraphs,
                'Image': image_url,
                'link': new_subpage
            }
        else:
            news_data = {
                'Title': news_title,
                'Publish Date': news_publish_date,
                'Paragraphs': paragraphs,
                'link': new_subpage
            }

        my_news.append(news_data)

    # Update the previous publish date for the next iteration
    if my_news:
        prev_publish_date = my_news[-1]['Publish Date'][0]


    return my_news

This function fetches the latest news data using the get_news() function. For each news item, it creates the message content, including the title, publish date, and paragraphs. If the news item has an image, it sends a photo message; otherwise, it sends a text message to the Telegram channel.

def send_latest_news_message():
    try:
        # Fetch the latest news data
        news_data = get_news()

        # Check if there are no news articles available
        if not news_data:
            logging.info("No news available to send.")
            return

        for latest_news in news_data:
            # Create the message content
            message = f"*Title: {latest_news['Title']}*\n_{latest_news['Publish Date']}_ \n\n"
            message += "\n".join(latest_news['Paragraphs'])

            # Check if the news item has an image
            if 'Image' in latest_news:
                image_url = latest_news['Image']
                # Truncate the caption to the allowed length
                caption = message[:CAPTION_LIMIT]
                bot.send_photo(chat_id=channel_id, photo=image_url,
                               caption=caption, parse_mode='Markdown')
                logging.info("News message sent successfully.")
            else:
                bot.send_message(chat_id=channel_id,
                                 text=message, parse_mode='Markdown')

    except Exception as e:
        logging.error("Error occurred while sending news:", exc_info=True)

Putting it All Together

1. Make sure you have created a Telegram bot and obtained the API key.
2. Create a Telegram channel and obtain its channel ID.
3. Create a constants.py file with the following content, replacing the placeholders with your actual API key and channel ID:

# constants.py
API_KEY = 'YOUR_TELEGRAM_BOT_API_KEY'
CHANNEL_ID = '@YOUR_TELEGRAM_CHANNEL_ID'

In this tutorial, we have learned how to automate the process of sharing the latest news articles on a Telegram channel using Python and Telebot. By integrating web scraping and scheduling features, you can keep your channel up-to-date with the latest news effortlessly. Remember to handle exceptions and errors properly in your final implementation to ensure the bot runs smoothly. Happy bot building!

Weather is an integral part of our lives, impacting our daily activities, travel plans, and even our moods. Wouldn’t it be great to have a visually appealing and informative weather dashboard that provides real-time weather data along with insightful charts and maps? In this article, we will walk you through the process of creating an interactive weather dashboard called Earth Flow, using HTML, CSS, and JavaScript.

Setting Up the Environment

Before we delve into the code, let’s ensure that we have the necessary dependencies and libraries. Earth Flow utilizes the Bootstrap framework, Leaflet maps, Highcharts for data visualization, and Font Awesome for icons. Make sure you have the following links in your HTML file’s <head> section:

<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- Leaflet map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

<!-- Google Font - Space Grotesk -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet" />

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/ada9dfd0e0.js" crossorigin="anonymous"></script>

<!-- Custom CSS -->
<link rel="stylesheet" href="./style.css" />

In addition to the CSS and font links, we need to include the necessary JavaScript libraries at the end of the <body> tag:

<!-- Highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

<!-- Leaflet map -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<!-- Custom JavaScript -->
<script src="./index.js"></script>

Now that our environment is set up let’s proceed to the code implementation.

Building the HTML Structure

The first step is to define the HTML structure of our weather dashboard. We’ll have a header, main section, and a footer. Here’s a snippet of the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Earth Flow</title>
  <!-- Required meta tags, CSS links, and libraries -->
</head>
<body>
  <header>
    <!-- Navbar -->
  </header>
  <main>
    <!-- Location and weather overview section -->
    <!-- Weekly charts section -->
  </main>
  <footer>
    <!-- Footer content -->
  </footer>
</body>
</html>

This navbar includes the Earth Flow logo, the brand name, and a search input field to allow users to search for a specific location. We have used Font Awesome icons to enhance the visual appeal of the search button.

Designing the Weather Overview Section

The weather overview section displays the current weather conditions, including temperature, humidity, and wind speed. It also provides a map to visualize the location. Here’s the HTML code for this section:

<section class="topSection">
  <div class="container-fluid">
    <div class="row">
      <h2>Today OverViews</h2>
      <div class="col col-lg-6 col-12 DailyWeather">
        <div class="countryDiv d-flex">
          <!-- Country icon and name -->
          <!-- Temperature, humidity, and wind speed -->
        </div>
        <div class="WeatherDailyList"></div>
      </div>
      <div class="col col-lg-6 col-12 weatherMapContainer">
        <div class="weatherMap"></div>
      </div>
    </div>
  </div>
  <img src="" alt="" />
</section>

Inside the .DailyWeather container, we'll display the country icon and name, temperature, humidity, and wind speed. The .WeatherDailyList container will dynamically populate weather data for different time intervals. The .weatherMapContainer will hold the Leaflet map to visualize the location. Make sure to include the necessary CSS classes for proper styling.

Including the Weekly Charts

To provide users with insights into weekly weather trends, we’ll include informative charts. Here’s the HTML code for the weekly charts section:

<section class="weeklyCharts">
  <div class="container-fluid">
    <div class="row">
      <div class="d-flex">
        <h3>Weekly OverViews</h3>
        <a href="#temprature" class="text-secondary"> More</a>
      </div>
      <div class="col col-lg-6 col-12">
        <figure class="highcharts-figure humidityChart">
          <div id="humidity"></div>
        </figure>
      </div>
      <div class="col col-lg-6 col-12">
        <figure class="highcharts-figure">
          <div id="temprature"></div>
        </figure>
      </div>
      <div class="col col-lg-6 col-12">
        <figure class="highcharts-figure">
          <div id="pressure"></div>
        </figure>
      </div>
      <div class="col col-lg-6 col-12">
        <figure class="highcharts-figure">
          <div id="overViewAll"></div>
        </figure>
      </div>
    </div>
  </div>
</section>

This section includes four Highcharts figures representing the humidity, temperature, pressure, and overall weather trends. You can customize the chart titles, subtitles, and the number of charts based on your preferences.

Styling with CSS

To ensure our weather dashboard looks visually appealing, we’ll add custom CSS. You can either define your styles in the <style> tag within the HTML file or link an external CSS file. Here's an overview of the main CSS classes used:

• .navbar: Styles the overall appearance of the navbar.
• .brandName: Controls the layout and alignment of the brand name and logo.
• .search-input-Div: Styles the search input field and search icon.
• .topSection: Defines the layout of the weather overview section.
• .DailyWeather: Styles the layout of the daily weather information.
• .weatherMapContainer: Adjusts the appearance of the weather map container.
• .weeklyCharts: Defines the layout and spacing of the weekly charts section.
• .humidityChart, .highcharts-figure: Styles the individual chart figures.

Feel free to customize these styles to match your desired design aesthetic.

Fetching Weather Data

Now comes the exciting part — fetching real-time weather data using the OpenWeatherMap API. We’ll utilize JavaScript to retrieve the weather data and dynamically update the dashboard. Here’s the code responsible for fetching the weather data:

const endpoints = {
  weather: {
    baseUrl: 'https://api.openweathermap.org/data/2.5/forecast',
    apiKey: '4f944c0231428c0ac6ebf79e36eba04d'
  },
};

let countryChoice = 'Addis Ababa';
fetchWeatherData(countryChoice);

$('.searchIcon').click(function() {
  const userChoice = $('.search-input').val();
  if (userChoice !== '') {
    countryChoice = userChoice;
    fetchWeatherData(countryChoice);
  }
});

function fetchWeatherData(city) {
  const weatherURL = `${endpoints.weather.baseUrl}?q=${city}&appid=${endpoints.weather.apiKey}&units=metric`;
  fetch(weatherURL)
    .then((response) => response.json())
    .then((data) => {
      weatherData(data);
    })
    .catch((error) => {
      console.log("Error:", error);
    });
}

const weatherData = (data) => {
  // Process and display weather data
};

In the endpoints object, we store the base URL for the OpenWeatherMap API and the provided API key. The fetchWeatherData function sends a request to the API using the provided city name. Upon receiving the data, the weatherData function is called to process and display the weather information.

Displaying Weather Data and Charts

The weatherData function is responsible for extracting the necessary weather data and updating the dashboard. Here's a snippet of the code that populates the weather overview section:

const weatherData = (data) => {
  const listOfWeatherData = data.list;
  const startDate = fixDateInterval(data.list[0].dt_txt);
  const humidityArray = [];
  const tempArray = [];
  const windArray = [];
  // Extract relevant data and populate arrays
  
  // Display country icon, name, temperature, humidity, wind speed, and map
  createWeatherList(iconArray, tempArray, humidityArray, windArray, startDate, data);
  createMap(xAxis, yAxis);
};

We extract the necessary weather data from the API response and store it in arrays (humidityArray, tempArray, windArray, etc.). These arrays will be used to populate the weather list and charts. The createWeatherList function dynamically generates the weather list based on the time intervals, and the createMap function creates the Leaflet map with the provided latitude (xAxis) and longitude (yAxis).

Lastly, we create the charts using the Highcharts library. The createHumidityChart, createPressureChart, createTempChart, and createOverAllChart functions generate the respective charts by passing the necessary data and configurations.

Are you interested in creating your own movie and TV show website? In this tutorial, we’ll walk you through the process of building a website that displays trending movies, trending TV shows, upcoming movies, and top-rated movies using the Themoviedb API. By following this step-by-step guide, you’ll gain a profound understanding of how to implement fundamental functions and features in your own program.
Prerequisites

To follow along with this tutorial, you’ll need the following:

1. Basic knowledge of HTML, CSS, and JavaScript.
2. A text editor or integrated development environment (IDE) to write your code.
3. An internet connection to fetch data from the Themoviedb API.
4. An API key from Themoviedb. You can sign up for a free account and obtain your API key from the Themoviedb website.

Setting Up the Project

Let’s start by setting up the basic structure of our project. Follow these steps:

1. Create a new directory for your project.
2. Open your text editor or IDE and create a new HTML file. Save it as index.html in your project directory.
3. Create a new CSS file and save it as style.css in your project directory.
4. Create a new JavaScript file and save it as script.js in your project directory.

Creating the HTML Structure

In the index.html file, paste the following HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Movie and TV Show Website</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS v5.2.1 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <!-- Navbar code goes here -->
    </header>

    <main>
      <!-- Banner section goes here -->
      <section id="banner">
        <div class="col col-lg-12 col-12 h-75 w-100">
          <div
            id="carouselExampleDark"
            class="carousel carousel-dark slide"
            data-bs-ride="carousel"
          >
            <div class="carousel-indicators"></div>
            <div class="carousel-inner"></div>
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleDark"
          data-bs-slide="prev"
        >
          <span
            class="carousel-control-prev-icon visually-hidden"
            aria-hidden="true"
          ></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleDark"
          data-bs-slide="next"
        >
          <span
            class="carousel-control-next-icon visually-hidden"
            aria-hidden="true"
          ></span>
          <span class="visually-hidden">Next</span>
        </button>
      </section>

      <!-- Trending Movies section goes here -->

      <!-- Trending TV Shows section goes here -->

      <!-- Upcoming Movies section goes here -->

      <!-- Top Rated Movies section goes here -->
    </main>

    <footer>
      <!-- Footer code goes here -->
    </footer>

    <!-- JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

This code sets up the basic structure of our webpage and includes the necessary CSS and JavaScript files.

Styling the Website

Now, let’s add some styles to our website. Open the style.css file and add the following CSS code:

/* Add your CSS styles here */

Feel free to customize the styles based on your preferences or add additional CSS to enhance the appearance of your website.

Implementing jQuery

To simplify DOM manipulation and make AJAX requests, we utilize the jQuery library in our project.

In the HTML file, we include the jQuery library by adding the following script tag before the closing body tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

This allows us to use jQuery’s functions and methods in our JavaScript code.

In the script.js file, we use jQuery selectors (e.g., $('#carouselExampleDark')) to target elements in the HTML document and perform operations on them.

For example, we create new HTML elements using $('<element>') and manipulate their attributes and content using jQuery's methods (e.g., .attr(), .addClass(), .text()). We also append these elements to specific containers using jQuery's .append() method.

By utilizing jQuery, we simplify the process of selecting and manipulating HTML elements, making our code more concise and readable.

Remember to include the jQuery library in your project by referencing it in your HTML file before using any jQuery code.

let continue ….

Explanation of Data Fetching Process

To fetch data from the Themoviedb API, we use JavaScript’s fetch function. We send a GET request to the API endpoints, specifying the necessary headers and authorization using our API key.

We use the fetchData function to handle the API requests. It takes a URL as a parameter and returns a promise. The promise resolves to the response data in JSON format.

In the Promise.all block, we fetch data from multiple API endpoints simultaneously using fetchData function. We use destructuring to store the responses in separate variables for each endpoint.

We then call the appropriate functions to populate each section of the website with the retrieved data.

Fetching Data from Themoviedb API

In the script.js file, we'll write JavaScript code to fetch data from the Themoviedb API and populate our website with the retrieved information. Paste the following code:

// API configuration
const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key

// Fetch data from the API
const fetchData = (url) => {
  return fetch(url, {
    method: 'GET',
    headers: {
      accept: 'application/json',
      Authorization: `Bearer ${apiKey}`,
    },
  }).then((response) => response.json());
};

// Fetch data from different API endpoints
Promise.all([
  fetchData('https://api.themoviedb.org/3/trending/all/day?language=en-US'),
  fetchData(
    'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc'
  ),
  fetchData(
    'https://api.themoviedb.org/3/discover/tv?include_adult=true&include_null_first_air_dates=false&language=en-US&page=1&sort_by=popularity.desc'
  ),
  fetchData('https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1'),
  fetchData('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1'),
])
  .then((responses) => {
    const trendingResponse = responses[0];
    const moviesResponse = responses[1];
    const tvShowsResponse = responses[2];
    const upcomingMoviesResponse = responses[3];
    const topRatedMoviesResponse = responses[4];

    // Call functions to populate each section with data
    populateBanner(trendingResponse);
    populateMovies(moviesResponse);
    populateTVShows(tvShowsResponse);
    populateUpcomingMovies(upcomingMoviesResponse);
    populateTopRatedMovies(topRatedMoviesResponse);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

// Function to populate the banner section with trending content
const populateBanner = (data) => {
  // Add code to populate the banner section with data
};

// Function to populate the trending movies section
const populateMovies = (data) => {
  // Add code to populate the trending movies section with data
};

// Function to populate the trending TV shows section
const populateTVShows = (data) => {
  // Add code to populate the trending TV shows section with data
};

// Function to populate the upcoming movies section
const populateUpcomingMovies = (data) => {
  // Add code to populate the upcoming movies section with data
};

// Function to populate the top rated movies section
const populateTopRatedMovies = (data) => {
  // Add code to populate the top rated movies section with data
};

Make sure to replace 'YOUR_API_KEY' with your actual Themoviedb API key.

Populating the Website with Data

Now that we have the basic structure and API data fetching in place, let’s implement the functions to populate each section of our website with the retrieved data.

Populating the Banner Section

Inside the populateBanner function, add the following code to populate the banner section with trending content:

const populateBanner = (data) => {
  const carouselExampleDark = $('#carouselExampleDark');

  for (const item of data.results) {
    const index = data.results.indexOf(item);
    let indexActive = '';

    if (index === 0) {
      indexActive = 'active';
    }

    const indicator = $('<button>')
      .attr('type', 'button')
      .attr('data-bs-target', '#carouselExampleDark')
      .attr('data-bs-slide-to', index)
      .addClass(indexActive)
      .attr('aria-current', index === 0)
      .attr('aria-label', `Slide ${index + 1}`);

    $('.carousel-indicators').append(indicator);

    const carouselItem = $('<div>').addClass('carousel-item');
    if (index === 0) {
      carouselItem.addClass('active');
    }
    carouselItem.attr('data-bs-interval', 3000);

    $('.carousel-inner').append(carouselItem);

    const carouselImg = $('<img>')
      .attr('alt', `Image of ${item.name}`)
      .addClass('d-block w-100');

    if ($(window).width() > 600) {
      carouselImg.attr('src', `http://image.tmdb.org/t/p/w500${item.backdrop_path}`);
    } else if ($(window).width() < 600) {
      carouselImg.attr('src', `http://image.tmdb.org/t/p/w500${item.poster_path}`);
    }

    const carouselCaption = $('<div>').addClass('carousel-caption d-none d-md-block text-start col col-lg-4');
    let h5Caption;

    if (item.name) {
      h5Caption = $('<h1>').text(`${item.name}`);
    } else {
      h5Caption = $('<h1>').text(`${item.title}`);
    }

    const pCaption = $('<h4>').text(item.overview);
    carouselCaption.append(h5Caption, pCaption);

    carouselItem.append(carouselImg, carouselCaption);
  }
};

This code dynamically generates the carousel slides and adds the necessary indicators and captions.

Populating the Trending Movies Section

Inside the populateMovies function, add the following code to populate the trending movies section:

const populateMovies = (data) => {
  for (const movie of data.results) {
    const card = $('<div>').addClass('card');
    const img = $('<img>')
      .addClass('card-img-top')
      .attr('alt', `Image of ${movie.name}`)
      .attr('src', `http://image.tmdb.org/t/p/w500${movie.poster_path}`);

    const cardBody = $('<div>').addClass('card-body');
    const cardTitle = $('<h5>').addClass('card-title').text(movie.title);

    cardBody.append(cardTitle);
    card.append(img, cardBody);
    $('.movieGroup').append(card);
  }
};

This code creates cards for each trending movie and adds them to the movieGroup container.

Populating the Trending TV Shows Section

Inside the populateTVShows function, add the following code to populate the trending TV shows section:

const populateTVShows = (data) => {
  for (const tvShow of data.results) {
    const card = $('<div>').addClass('card');
    const img = $('<img>')
      .addClass('card-img-top')
      .attr('alt', `Image of ${tvShow.name}`)
      .attr('src', `http://image.tmdb.org/t/p/w500${tvShow.poster_path}`);

    const cardBody = $('<div>').addClass('card-body');
    const cardTitle = $('<h5>').addClass('card-title').text(tvShow.name);

    cardBody.append(cardTitle);
    card.append(img, cardBody);
    $('.tvGroup').append(card);
  }
};

Add more section according to your needs

Finalizing the Website

To complete your website, you can customize the navbar, footer, and overall styling based on your preferences. Feel free to add additional features and functionalities to enhance the user experience.

Testing Your Website

To test your website, open the index.html file in a web browser. You should see the banner section, trending movies section, trending TV shows section, upcoming movies section, and top rated movies section populated with data from the Themoviedb API.

Congratulations! You have successfully built a movie and TV show website using the Themoviedb API. You can further expand and improve this project by adding search functionality, movie details pages, TV show details pages, and more.

Remember to keep your API key secure and avoid committing it to a public repository.

Hello everyone! In this article, I will be sharing my experience as an intern at Let’s Grow More (LGM) during their Virtual Internship Program (LGMVIP 2021) as a Web Developer. This program lasted for a month and was filled with valuable new knowledge.

As a Web Developer intern, my responsibilities included completing a minimum of two tasks from a list of three, utilizing relevant technologies. The tasks were as follows:

1. Beginner Level Task: Developing a web application using create-react-app and creating a to-do list using HTML, CSS, and JavaScript. I successfully completed this task and gained hands-on experience in building interactive web applications and managing user tasks.

2. Intermediate Level Task: Designing a registration form that displays the entered data on the same page using HTML, CSS, JavaScript, or ReactJS. I successfully completed this task and gained proficiency in creating user-friendly registration forms with real-time data display.

3. Advanced Level Task: Student Result Management System (titled “05 Advance LEVEL Task”). Although I did not complete this task, I gained valuable insights into managing and organizing student results within a system.

Throughout the internship, I had the opportunity to work on diverse projects such as a calculator, to-do list, and registration form. These projects allowed me to apply my knowledge, enhance my problem-solving skills, and further develop my proficiency as a web developer.

Overall, my internship experience at Let’s Grow More was enriching, and I am grateful for the opportunity to learn and grow in a supportive environment.

User Registration and Contributions

As a user on Harmony Harvest (Equib), you can enter your personal information, such as your name, contact details, and financial information. Once registered, you can make contributions towards the wealth-building initiative. These contributions can be in the form of monetary investments, sharing resources or knowledge, or any other means determined by the community.

Harmony Harvest (Equib) embraces a spirit of inclusivity and fairness by randomly selecting a winner from the participants after a certain interval. This random selection process adds an element of excitement and ensures equal opportunities for all contributors. It encourages active participation and motivates users to continue contributing towards the community’s wealth-building goals.

Cultural Integration

Harmony Harvest (Equib) acknowledges and respects the traditional values and practices of Ethiopia, infusing them with modern approaches to wealth creation and collaboration. The website fosters a sense of community, encourages collective effort, and embraces the principles of harmony and abundance found within Ethiopian culture.

How the system works

Dependency

This project has the following dependencies:

• Bootstrap CSS v5.2.1
• Font Awesome

These dependencies are included via CDNs (Content Delivery Networks) in the HTML file.

If you are interested in seeing the design of the registration webpage, you can visit yosami14.github.io/Harmony-Harvest/ to view it.

1.User fills in the form fields:

- The JavaScript code uses the getElementById method to access the input fields in the HTML form and retrieves the values entered by the user.
- The values are stored in variables: firstName, fathersName, email, phoneNumber, contributionAmount, and gender.
- These variables will be used to create a user object that represents the data entered by the user.

let firstName = document.getElementById("firstNameInput").value;
let fathersName = document.getElementById("fatherNameInput").value;
let email = document.getElementById("userEmailInput").value;
let phoneNumber = document.getElementById("userPhoneNumberInput").value;
let contributionAmount = document.getElementById("userContributionInput").value;
let gender = document.querySelector('input[name="userGender"]:checked').value;
userObject[countOfUsers] = {
 firstName: firstName,
 fathersName: fathersName,
 gender: gender,
 email: email,
 phoneNumber: phoneNumber,
 contributionAmount: contributionAmount,
 date: formattedDate
};

2. User clicks the “submit” button:

- An event listener is attached to the “submit” button using the addEventListener method.
- The event listener is triggered when the button is clicked.
- The collectData function is called when the event is triggered.

document.getElementById("collectDataBtn").addEventListener("click", collectData);
function collectData() {
 // Code body
}

3. The collectData function is executed:

- The collectData function is responsible for collecting the data entered by the user and processing it.
- It retrieves the values entered by the user from the input fields using their respective id attributes.
- The values are stored in variables: firstName, fathersName, email, phoneNumber, contributionAmount, and gender.
- The function then creates a new user object and assigns the retrieved values to its properties.
- The user object is stored in the userObject variable.

4. User data is added to the table:

- The user data is added to the HTML table by manipulating the table’s DOM (Document Object Model).
- The addUserToTable function is called to add the user data to the table.
- The function first creates a new table row (<tr>) and table data (<td>) elements.
- The user data is inserted into the table data elements using the textContent property.
- The table data elements are appended to the table row.
- The table row is then appended to the table’s <tbody> element.

        // Row data print
        let lastObject = userObject[countOfUsers - 1];

        for (let property in lastObject) {
          if (lastObject.hasOwnProperty(property)) {
            var createRowData = document.createElement('td');
            createRowData.textContent = lastObject[property];
            createRow.appendChild(createRowData);
          }
        }

    // Append the row to the table
    addUserRow.appendChild(createRow);

    // append the row to the table
    addUserRow.appendChild(createRow);

5. User data is displayed on the table:

- The user data is displayed in the HTML table, which is initially empty.
- When the addUserToTable function is called, it adds the user data to the table.
- The function creates a new table row and appends it to the table’s <tbody> element.
- The table row contains table data elements that display the user’s data in separate columns.
- The textContent property is used to set the content of each table data element.

<tbody class="" id="addUserRow">
 <! - User data will be added dynamically here →
</tbody>

6. Total contribution is calculated and displayed:

- The calculateTotalContribution function calculates the total contribution amount from all users.
- It iterates over the table rows and retrieves the contribution amount from each row.
- The contribution amounts are converted to numbers using the parseFloat function and added together.
- The total contribution amount is stored in the totalContribution variable.
- The total contribution is displayed in the table by setting the textContent of the corresponding table data element.

// Update total contribution
totalContribution += parseInt(contributionAmount);
// Update total contribution display
let totalContributionElement = document.getElementById("displayTotal");
totalContributionElement.textContent = `Total: ${totalContribution}`;

7. Lot winner is generated and displayed in a modal:

- The winner function is called when the “generate” button is clicked.
- The function selects a random user from the table to determine the lot winner.
- It retrieves the table rows using the querySelectorAll method and stores them in an array.
- A random index is generated using the Math.random() function and the length of the table rows array.
- The user at the randomly generated index is selected as the lot winner.
- The winner’s details (name and contribution amount) are extracted from the table.