DEV Community: Tracy | Software Engineer

Building A Serverless React App With AWS Lambda And API Gateway

Tracy | Software Engineer — Thu, 14 Dec 2023 04:57:50 +0000

The serverless architecture involves the steps and processes of managing server infrastructure and scaling resources shifted from the developer to the cloud provider. In a traditional server-based model, developers have to provision, manage, and scale servers to handle incoming requests. However, in a serverless architecture, developers focus solely on writing and deploying code without worrying about the underlying infrastructure.

By the end of this article, you will learn the following concepts:

What a serverless architecture is.
Navigating and using AWS services (e.g., API Gateway, Lambda function, and DynamoDB).
Build a serverless blog application.

Here is the link to the article: https://blog.openreplay.com/serverless-blog-with-aws-lambda-and-api-gateway/

Building Live Search Functionality with JavaScript

Tracy | Software Engineer — Sun, 06 Aug 2023 08:31:35 +0000

Introduction

The live search function is an important tool in modern websites that filters results based on a user's preference. This improves customers' experience and saves users the stress of navigating through hundreds of results to find a specific item.

A live search bar is an important tool for enhancing user experience, boosting engagement, and giving website administrators useful insights. It can increase traffic, boost conversion rates, and ultimately result in more success for a website or application by making it simpler for people to locate what they're looking for.

Project Overview

In this article, you will build a search bar that gives you the result for movies when you search for a particular movie. You will build this project with the use of HTML, CSS, and JavaScript.

Prerequisites

The prerequisites for following along with this project include the following:

Knowledge of HTML, CSS, and JavaScript. This article is neither an introduction to HTML, CSS, or JavaScript.
Knowledge of Application Programming Interface (API)
An account with The Movie Database (TMDB).

HTML - Create the UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <title>Searchbar</title>
</head>
<body>
  <form action="/" class="search-btn">
    <i class="fa fa-search searchIcon" aria-hidden="true"></i>
    <input type="text" placeholder="search for a movie...">
  </form>

  <div class="search-results"></div>
</body>
</html>

The above line of code above contains an HTML boilerplate with HTML code that creates a search form with a text input field for entering movie titles, and a container for displaying the search results.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

The link tag in the head content is a font icon link that will display a search bar icon.

<form action="/" class="search-btn">
    <i class="searchIcon" aria-hidden="true"></i>
    <input type="text" placeholder="search for a movie...">
</form>

The <form> element is used to create a container for the input field with an action of /, which means it will submit to the current page.
The <i class="searchIcon" aria-hidden="true"></i> is a search bar icon tag from font-awesome which will display movie results when clicked.
The input field is where users will enter search queries. The placeholder attribute indicates the kind of input expected in the field.

<div class="search-results"></div>

The div with a class of search-result is a container that will display the results.

CSS - Style the UI

.form{
  width: 70%;
  margin: 25px auto;
}

input{
  width: 80%;
  height: 28px;
  font-size: 1.1rem;
  padding-left: 40px;
}

.searchIcon{
  position: relative;
  left: 30px;
}

The .form class set the width container to 70% of its parent element and the margin element is set to 25px for the top and bottom. And auto margin on the left and right which centers the form element horizontally.
The input field has a width of 80% of its parent element, a height of 28px, and a font size of 1.1rem which is relative to the root font size.

JavaScript

const form = document.querySelector('.form');
const input = form.querySelector('input');
const searchResults = document.querySelector('.search-results');
const searchIcon = document.querySelector('.searchIcon')

Each of the elements is given a variable using the const type. These variables are used to reference elements in the HTML document using the document.querySelector().

const searchMovies = async (query) => {
  const apiKey = 'apiKey'; // replace this part with your actual API key
  const apiUrl = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${query}`;
}

A function called searchMovies is defined using the async keyword to indicate that takes a query parameter and uses it to construct an API URL that queries The movie database (TMDB) API for movie results.

try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    const movies = data.results;

The function try block executes an asynchronous fetch request to retrieve data from the API URL. The response is then parsed into JSON format using the json() method, and saved into a data variable.

searchResults.innerHTML = '';

The innerHTML of the movie result is set to an empty variable. This means that whenever you make a new search, the page will research to show the new research result.

movies.forEach((movie) => {
      const { poster_path, title, release_date, vote_average } = movie;

      const movieContainer = document.createElement('div');
      movieContainer.classList.add('movie');

      const posterUrl = poster_path
        ? `https://image.tmdb.org/t/p/w500/${poster_path}`
        : 'https://via.placeholder.com/500x750?text=No+poster';

      movieContainer.innerHTML = `
        <img src="${posterUrl}" alt="${title}" />
        <div class="movie-info">
            <h3>${title}</h3>
            <small>Released on ${release_date}</small>
            <span class="rating">${vote_average}</span>
        </div>
      `;

      searchResults.appendChild(movieContainer);
    });
}

The function uses forEach loop to iterate through each movie object in the array, and extracts several properties from each movie, including the poster image URL, title, release date, and vote average.
It also creates a new div element to represent each movie and sets the innerHTML of the element to a string of HTML code that includes an img for the movie poster, span for the rating, h3 for the movie title, and release date.
The function then appends the new movie div element to the searchResults container.

catch (error) {
    console.error(error);
  }
}

The above code will log any errors that may occur during the API request or movie data processing.

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const query = input.value;
  searchMovies(query);
});

The EventListener listens for a click event when the form is submitted and displays the result.

searchIcon.addEventListener('click', async () => {
  const query = input.value;
  searchMovies(query);
});

An EventListener is added to the search bar icon so that when the icon is clicked, the event listener calls the searchMovies function, passing in the current value of the input field as the query parameter.

Conclusion

A functional search is implemented in almost modern websites to ease the stress of users who visit the website. Knowing how to implement one will improve one's skill as a developer.

I hope you found this article useful, please like, follow, and share with your friends. I post content on web development.

Introduction To Technical Writing: A beginner's guide

Tracy | Software Engineer — Fri, 23 Jun 2023 18:50:34 +0000

Are you new to Technical writing? Never written an article before? Well, it's fine! By the end of this article, it will provide you with enough materials to get you started on your technical writing journey.

I will be sharing material courses on technical writing, where you can publish your articles and apply for jobs. I will also share how I got accepted to write for two companies. I hope all your questions will be answered by the end of this article.

What Is Technical Writing?

Technical writing is a type of writing that communicates complex and specialized information to a specific audience clearly and concisely.

It aims to explain technical concepts, procedures, and instructions to readers who may not have a technical background, expertise, and practitioners.

Technical writing includes user manuals, instruction guides, reports, and more. It often involves breaking down complex technical information into simpler terms, using diagrams, charts, and other visual aids to help readers understand the material.

Importance Technical Writing

Let's say the company you work for develops a new software product. The product was innovative and had the potential to revolutionize the market. However, the company didn't invest much time in documenting the technical aspects of the product.

As a result, the product was difficult to use, and customers were frustrated when they encountered problems.

Realizing their mistake, the company hired a technical writer to create comprehensive documentation for their product. The technical writer worked closely with the developers and created user manuals, online help files, and other types of documentation to assist customers.

With the new documentation in place, customers were able to use the product more easily and had fewer problems.

You can see how Technical writing played a crucial role in assisting customers in understanding the company's products. It's like when you buy an electronic gadget and you find a manual inside to help you understand how to use the product.

Technical writers are employed in many industries, such as engineering, software development, healthcare, and more.

Technical Writing Materials

Google Technical Writing Courses
Tech: Write and Earn - (Highly recommended)
Technical Writing - Documentation on software products
Documenting APIs: A Guide for Technical Writer
Learn Tech Writing
Coding for writers - Basic programming
Professional Technical Writing: Advance writing skills

Books For Technical Writers

Where To Get Technical Writing Gigs

Several companies pay writers to write for them. Most times, these companies require you to send a proposal. If your proposal is accepted, you get to write on the topic you proposed and get paid. These companies have been compiled in a GitHub repository for easy access.

I will be dropping different GitHub links, some might contain the same companies but with the addition of

Malgamves Community Writer Program - This contains a list of companies that hire Technical writers.
Getting Started With Technical Writing - This is a list of technical writing material with companies included where you can apply for technical writing jobs.
Who pays Technical writers - A list of Technical writing agencies and the amount they pay.

Technical Writing Tools

I will be dropping tools you can make use of to make your technical writing journey easier.

Technical-writing-template - A sample template with guidelines for writing technical articles.
HackMD - You can collaborate on technical documentation in markdown. It provides you with great writing tools so you get to see the code you document alongside your writing.
Canva - Create cover images for your articles and blog posts.
Annotely - Make drawings, highlights, blurs, and screenshots
Mermaid - Create diagrams and visualizations using text and code.
Notion - I personally make use of notion to write out my blogging ideas. The all-in-one workspace for your notes, tasks, wikis, and databases.
Grammarly - Grammarly is a writing assistant that goes deeper than grammar to offer you comprehensive writing feedback.
README Markdown generator - CLI that generates beautiful README.md files.

Technical Writing Guide

When deciding how to create content, it is important to pay attention to some companies that already have amazing style guides to guide you. Here is a list of them:

Microsoft style guide - Microsoft manual style guide.
Google style guide - provides editorial guidelines for writing clear and consistent Google-related developer documentation.
Diataxis - A systematic framework for technical documentation authoring
GitLab
IBM style guide - IBM editorial style guide.
Freecodecamp style guide - Their publication style guide.

Build Your Portfolio

One of the fastest ways of getting a response from a company you mailed for a job application is by showing them samples of your work. The two companies I work with got back to me with job offers because I showed them samples of my work - articles.

Having a blog where you post your writing will give you a high advantage and connect you to potential recruiters. Below is the list of platforms where you can post your articles.

Hashnode - A community for developers and technical writers.
Dev - A platform for writers and developers
Medium - A platform for writers

NOTE: You can also get paid on these platforms though they have rules and requirements.

Another important thing you should note is that the article you intend to show to any company matters! Don't send an article on JavaScript when the company only deals with the topic of AI. Also ensure, you present your best articles.

When you write, ensure your work is clean, understandable, and readable. That is another trait companies look out for.

Let me know if you have any questions in the comment section and if you found this article useful, please like, follow, and share with your friends.

Form Validation with JavaScript

Tracy | Software Engineer — Sat, 03 Jun 2023 17:44:54 +0000

Before submitting data to the server, It is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation and helps ensure data submitted matches the requirements set forth in the various form controls.

HTML Validation

Although validation can also be done with HTML attributes like - required, minlength, maxlength, min, max, type, and pattern. The downside of it is that you can't customize it to fit your requirements.

What is Form Validation?

Have you ever tried to sign up on a website where they had certain requirements? Like:

Ensuring your password is between 8 to 30 characters or making sure your password is mixed between letters, numbers, and asterisks.
Or ensure you include the @ for the email input field by popping messages like "Please enter a valid email address".
"This field is required" (You can't leave this field blank)

This is called Validation. When you enter your details on a form website, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application.

Form validation is the process of verifying that the data entered into an HTML form is accurate, complete, and meets the specified criteria before it is submitted to the server.

The application allows the data to be submitted to the server if the information is correctly formatted. If the information is not correctly formatted, it gives the user an error message explaining what needs to be corrected.

Building A Form

Let's build a form webpage in order to solidify our understanding of form validation.

The HTML Code

<div class="formContainer">
        <header>
            <h1>Sign In</h1>
            <a href="test1.html">CHECK</a>
        </header>

        <form id="myForm">
            <div class="formDetails">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name">
                <div class="errorMessage"></div>
            </div>

            <div class="formDetails">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                <div class="errorMessage"></div>
            </div>

            <div class="formDetails">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password">
                <div class="errorMessage"></div>
            </div>

            <div class="formDetails">
                <label for="confirmpassword">Confirm Password:</label>
                <input type="password" id="confirmPassword" name="confirmpassword">
                <div class="errorMessage"></div>
            </div>

            <button id="button" type="submit">Submit</button>
          </form>
    </div>

The HTML code defines a form with four input fields: name, email, password, and confirm password. Each input field is wrapped in a div element with a class of formDetails.
Below each input field, there is a div element with a class of errorMessage. This is where any error messages related to the corresponding input field will be displayed.
The form also has a submit button with an id of button. This button triggers the form submission when clicked.

The CSS Code

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

body{
    background-color: #021012;
    font-family: sans-serif;
}

.formContainer{
    width: 80%;
    height: 85vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #E2F4FD;
}
header{
    text-align: center;
    margin: 2rem 0;
    font-weight: 600;
}

#myForm{
    width: 90%;
    margin: 1rem auto;
}

.formDetails{
    margin: 1rem 0;
}

label{
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

input{
    width: 100%;
    padding: .6rem 0;
    outline: none;
    font-size: 1rem;
}

input:focus{
    outline: 1px solid #064247;
}
button{
    margin: 1.1rem 0;
    background-color: #053135;
    color: #fff;
    font-weight: 600;
    border: none;
    padding: .8rem 0;
    width: 100%;
}
.errorMessage{
    margin-top: .3rem;
    font-size: .9rem;
    font-weight: 600;
    font-family: monospace;
}
.formDetails.success input {
    border-color: #09c372;
    outline: none;
  }

  .formDetails.error input {
    border-color: #f2070e;
  }

@media screen and (min-width: 1024px) {
    .formContainer{
        width: 30%;
    }
}

The .formContainer selector sets the width of the form container to 80% of the parent element, and the height to 85% of the viewport height, and positions it in the center of the screen using absolute positioning and the transform property - transform: translate(-50%, -50%). The background color is set to a light shade of blue - #021012.
The input and button selectors set the width to 100% of the parent container, padding to 0.6rem at the top and bottom of the input selector, outline to none, and font size to 1rem. There is also a focus state added to the input selector that outlines the input with a 1px solid border in a different color.
The .formDetails.success input selector applies the styles to the input element when the .formDetails container has a class of success. It sets the border color to a light shade of green and the outline to none.
The .formDetails.error input selector applies the styles to the input element when the .formDetails container has a class of error. It sets the border color to a dark shade of red.

@media screen and (min-width: 1024px) {
    .formContainer{
        width: 30%;
    }
}

The @media rule creates a media query that applies styles when the screen width is above 1024px. In this case, the width of the .formContainer is set to 30% of the parent element. This makes the form container smaller when viewed on larger screens.

JavaScript For Validation

The code listens for the form submission event and prevents the form from submitting by default. It then performs validations on each input field and displays appropriate error messages in the errorMessage divs and applies the success and error classes to the parent formDetails divs based on the validation result.

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', (event) => {
    event.preventDefault(); 
}

For each input field, the code first gets the input value and trims any whitespace. It then gets the corresponding errorMessage div and input element using the querySelector method. If the input value is empty, the code sets the error message to a relevant message and applies the error class to the parent formDetails div. If the input value is not empty, the code clears the error message and applies the success class to the parent formDetails div.

const name = myForm.elements.name.value.trim();
const nameError = document.querySelector('#name + .errorMessage');
const nameInput = document.getElementById('name');
if (name === '') {
    nameError.textContent = 'Name is required.';
      nameInput.parentNode.classList.add('error');
      nameInput.parentNode.classList.remove('success');
    } else {
      nameError.textContent = '';
      nameInput.parentNode.classList.add('success');
      nameInput.parentNode.classList.remove('error');
    }

For the email input field, the code also checks if the email is in a valid format using a regular expression. If the email is invalid, the code sets the error message to a relevant message and applies the error class to the parent formDetails div.

const email = myForm.elements.email.value.trim();
    const emailError = document.querySelector('#email + .errorMessage');
    const emailInput = document.getElementById('email');
    if (email === '') {
      emailError.textContent = 'Email is required.';
      emailInput.parentNode.classList.add('error');
      emailInput.parentNode.classList.remove('success');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      emailError.textContent = 'Please enter a valid email address.';
      emailInput.parentNode.classList.add('error');
      emailInput.parentNode.classList.remove('success');
    } else {
      emailError.textContent = '';
      emailInput.parentNode.classList.add('success');
      emailInput.parentNode.classList.remove('error');
    }

For the password input field, the code also checks if the password is at least 8 characters long. If the password is less than 8 characters, the code sets the error message to a relevant message and applies the error class to the parent formDetails div.

const password = myForm.elements.password.value.trim();
    const passwordError = document.querySelector('#password + .errorMessage');
    const passwordInput = document.getElementById('password');
    if (password === '') {
      passwordError.textContent = 'Password is required.';
      passwordInput.parentNode.classList.add('error');
      passwordInput.parentNode.classList.remove('success');
    } else if (password.length < 8) {
      passwordError.textContent = 'Password is expected to be 8 characters.';
      passwordInput.parentNode.classList.add('error');
      passwordInput.parentNode.classList.remove('success');
    } else {
      passwordError.textContent = '';
      passwordInput.parentNode.classList.add('success');
      passwordInput.parentNode.classList.remove('error');
    }

For the confirm password input field, the code also checks if the confirm password matches the password. If the confirm password does not match, the code sets the error message to a relevant message and applies the error class to the parent formDetails div.

const confirmPassword = myForm.elements.confirmpassword.value.trim();
    const confirmPasswordError = document.querySelector('#confirmPassword + .errorMessage');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    if (confirmPassword === '') {
      confirmPasswordError.textContent = 'Confirm Password is required.';
      confirmPasswordInput.parentNode.classList.add('error');
      confirmPasswordInput.parentNode.classList.remove('success');
    } else if (confirmPassword !== password) {
      confirmPasswordError.textContent = 'Passwords do not match.';
      confirmPasswordInput.parentNode.classList.add('error');
      confirmPasswordInput.parentNode.classList.remove('success');
    } else {
      confirmPasswordError.textContent = '';
      confirmPasswordInput.parentNode.classList.add('success');
      confirmPasswordInput.parentNode.classList.remove('error');
    }

In the final step, the code checks if there are any error messages displayed. If there are no error messages, the code submits the form. Otherwise, it prevents the form from submitting.

if (nameError.textContent === '' && emailError.textContent === '' && passwordError.textContent === '' && confirmPasswordError.textContent === '') {
        myForm.submit();
      }
    });

The Final Result

Check it out on Codepen

If you found this article helpful, please ensure you follow for more helpful posts. I would also appreciate your ideas on what you would be interested in learning,

Mastering API Fetch: How to Build a Movie Website with Real-Time Data Updates

Tracy | Software Engineer — Fri, 02 Jun 2023 21:58:33 +0000

Learn how to use the Fetch API to asynchronously request data from an external API and dynamically build a movie website. This beginner-friendly tutorial is great for learning about APIs, async JS, and building dynamic front-end applications.

This article will explore how API fetch works while building a movie website.

What Is Fetch?

Fetch is a web API provided by modern browsers that allow developers to make HTTP requests to servers and retrieve data or resources from them.

If you have worked with XMLHttpRequest (XHR) object, the Fetch API can perform all the tasks as the XHR object does.

Using the Fetch API

To use Fetch, developers can call the global fetch() function and pass in a URL to the resource they want to fetch.

fetch('https://apiexample.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

The above code retrieves JSON data from a URL called https://apiexample.com/data and parses it as JSON using the .json() method, If an error occurs during the fetch, the catch() method logs an error message to the console.

Features of the movie website

Using TMDB API to display movie posters and information on the movie card.

Building a functional search bar to search for any movie and display results.

A modal box that displays details of the movie when you click on the movie card.

The layout of the website

The website would have a header, main, and footer.
The Header consists of the movie title and a search bar to search for movies.
The Search Bar
Main - This is where the movie card will be displayed.
Footer - The footer will carry copyright text along with the name of the developer.

The Header

Copy and paste this code into your code editor.

<header class="header">
        <div class="movieheader">
            <p style="display: flex; align-items: center;">🎥any<span style="color: hsla(349, 69%, 51%, 1);">movie</span></p>
        </div>

        <form action="/" class="search-btn">
            <input type="text" placeholder="search for a movie...">
        </form>
    </header>

The HTML tag consists of the movie title with the class name "movie header" and a search bar "search-btn".

The input field for the search bar is wrapped up in a form container because it provides a way to submit data to a server for processing. When a user enters a movie query into the search bar and hits "Enter", the data entered into the input field is packaged into an HTTP request and sent to a server for processing.

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Ubuntu', sans-serif;
    background-color: rgb(11, 12, 13);
}

.movieheader{
    font-size: 1.2rem;
    color: hsla(200, 100%, 95%, 1);
}
.movieheader p{
    font-size: 1.2rem;
    font-weight: 600;
}

.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    margin: 1.4rem auto;
}
.search-btn{
    align-items: center;
    border-radius: 5px;
}
.search-btn input{
    outline: none;
    border: none;
    padding: .5rem .3rem;
    font-size: .9rem;
    background-color: hsla(250, 6%, 20%, 1);
    color: hsla(200, 100%, 95%, 1);
    border-radius: 5px;
}


@media screen and (min-width: 750px) {
    .header{
        width: 90%;
        padding: 1rem 0;
    }
    .movieheader p{
        font-size: 1.7rem;
    }
    .search-btn input{
        width: 50vh;
    }
    .sm-search{
        display: none;
    }
    .search-btn input{
        padding: .8rem .5rem;
        font-size: 1rem;
    }
}



@media screen and (min-width: 1024px) {
    .header{
        width: 90%;
        padding: 1rem 0;
    }
    .movieheader p{
        font-size: 1.7rem;
    }
    .search-btn input{
        width: 50vh;
    }
    .sm-search{
        display: none;
    }
    .search-btn input{
        padding: .8rem .5rem;
        font-size: 1rem;
    }
}

It has a dark background color of rgb(11, 12, 13). On the Desktop screen, the font size of the movie title is font-size: 1.7rem; and on a mobile screen, the font size is 1.2rem.
I added a media query for responsiveness.

The Search Bar Functionality

<form action="/" class="search-btn">
   <input type="text" placeholder="search for a movie...">
</form>

I used the <form> tag as a container for the search bar input field because it provides a way to submit the search query to a server for processing.

const form = document.querySelector('.search-btn');
const movieCon = document.querySelector('.movieContainer');
const input = form.querySelector('input');
const searchResults = document.querySelector('.search-result');
const searchResultContainer = document.querySelector('.searchResultContainer');


form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const query = input.value;
  const apiKey = 'YOUR_API_KEY'; // replace with your actual API key
  const apiUrl = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${query}`;

  try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    const movies = data.results;

    searchResults.innerHTML = '';
    movieCon.innerHTML = '';


    movies.forEach((movie) => {
      const { poster_path, title, release_date, vote_average } = movie;

      const movieContainer = document.createElement('div');
      movieContainer.classList.add('movieCard');

      const posterUrl = poster_path
        ? `https://image.tmdb.org/t/p/w500/${poster_path}`
        : 'https://via.placeholder.com/500x750?text=No+poster';

      movieContainer.innerHTML = `
        <img src="${posterUrl}" alt="${title}" class="moviePoster">
        <div class="movieTitle">${title}</div>
        <div class="rating">
          <span class="rate">${vote_average}</span>
          <span class="year">${release_date ? release_date.slice(0, 4) : ''}</span>
        </div>
      `;

      searchResults.appendChild(movieContainer);
    });

    const header = searchResultContainer.querySelector('header');
    if (!header) {
      const header = document.createElement('header');
      header.innerHTML = `<h1>Search Results: ${query}</h1>`;
      searchResultContainer.insertBefore(header, searchResults);
    } else {
      header.innerHTML = `<h1>Search Results: ${query}</h1>`;
    }
  } catch (error) {
    console.error(error);
  }

});

This above code sets up a search feature for movies using The Movie Database TMDB API. It starts by selecting relevant elements from the HTML document using their class names (form, movieCon, input, searchResults, and searchResultContainer).
The code then adds an event listener to the form element for the submit event. When the user submits the form, the event listener function is called. The function first prevents the default form submission behavior with event.preventDefault().
It then retrieves the value of the user's search query from the input element and constructs the API endpoint URL with the query and the TMDB API key.
The code then sends a request to the TMDB API using fetch(). When the response is received, it is converted from JSON format to a JavaScript object using response.json(). The object is then processed to extract an array of movies matching the search query.
The movies array is then looped over using forEach(), and for each movie, a div element with the movie details is created using document.createElement(). The div element is then populated with movie data and appended to the searchResults element.
The code then checks if there is already a header element in the searchResultContainer. If there isn't, a new header element is created and inserted before the searchResults element. If there is, the h1 element of the header is updated with the new search query.
If any errors occur during the API request and response process, they are logged to the console using console.error().

Displaying the Movies - The Main

I will be using TMDB API to display movies on the website. Before that, create a movie container in the HTML body for the movie card and details.

<div class="movieContainer">
        <div class="movieCard">
            <img src="" alt="" class="moviePoster">
            <div class="movieTitle">John Wick</div>

            <div class="rating">
                <span class="rate"></span>
                <span class="year"></span>
            </div>
        </div>
    </div>

NOTE: If you don't have an API Key, you would be required to sign up on the TMDB website.

Styling The Movie Container

/*Movie container for mobile screen*/
.movieContainer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    margin: auto;
    margin-bottom: 5rem;
    padding-bottom: 2rem;
}
.movieCard{
    margin: .5rem 0;
}

.moviePoster{
    width: 100%;
    height: 40vh;
    object-fit: cover;
}

.movieTitle{
    font-size: 1rem;
    font-weight: 600;
    margin: .6rem 0;
}

.rating{
    display: flex;
    justify-content: space-between;
    color: gray;
    font-weight: 600;
}

@media screen and (min-width: 1024px) {
.movieContainer{
    flex-direction: row;
    flex-wrap: wrap;
}

.movieCard{
    margin: .6rem;
    width: 200px;
}

On mobile screen. the flex-direction of the movie container is set to column. So it displays one movie per column. While on the Desktop, it displays 6 movie cards per row.

Javascript Functionality For API Call To Display Movies

const apiKey = 'YOUR_API_KEY';

fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`)
  .then(response => response.json())
  .then(data => {
    console.log(data)
    const movies = data.results;
    const movieContainer = document.querySelector('.movieContainer');

    movies.forEach(movie => {
      const movieCard = document.createElement('div');
      movieCard.classList.add('movieCard');

      const moviePoster = document.createElement('img');
      moviePoster.classList.add('moviePoster');
      moviePoster.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;
      moviePoster.alt = movie.title;

      const movieTitle = document.createElement('div');
      movieTitle.classList.add('movieTitle');
      movieTitle.innerText = movie.title;

      const rating = document.createElement('div');
      rating.classList.add('rating');

      const rate = document.createElement('span');
      rate.classList.add('rate');
      rate.innerText = `${movie.vote_average}/10`;

      const year = document.createElement('span');
      year.classList.add('year');
      year.innerText = movie.release_date.split('-')[0];

      rating.appendChild(rate);
      rating.appendChild(year);

      movieCard.appendChild(moviePoster);
      movieCard.appendChild(movieTitle);
      movieCard.appendChild(rating);

      movieContainer.appendChild(movieCard);
    });
  })
  .catch(error => {
    console.error('Error fetching movies:', error);
  });

The above code will display popular movies including movie images, title, rating, and year of release. Here is how I went about it:

The line defines a variable to store your API Key.

const apiKey = 'YOUR_API_KEY';

The fetch function calls the URL of the API endpoint as a parameter, with the apiKey variable inserted into the URL string using template literals - {apiKey}.
The fetch function returns a Promise, which is resolved with the response data obtained from the API. The response is then parsed as JSON using the json() method, which also returns a Promise.

fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`)
    .then(response => response.json())
    .then(data =>

The container element for the movies is obtained using document.querySelector(), and then a loop is used to iterate over each movie in the list.

const movieContainer = document.querySelector('.movieContainer');

For each movie, a new div element is created using document.createElement(), with a class of movieCard. An img element is also created for the movie poster, with a class of moviePoster and an alt attribute set to the movie title.

movies.forEach(movie => {
      const movieCard = document.createElement('div');
      movieCard.classList.add('movieCard');

      const moviePoster = document.createElement('img');
      moviePoster.classList.add('moviePoster');
      moviePoster.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;
      moviePoster.alt = movie.title;
}

Two additional elements are created for the movie title and its rating, with classes of movieTitle and rating, respectively. The rating element contains two child span elements for the rating and year of release, with classes of rate and year, respectively. The movie poster, title, and rating elements are then added as child elements of the movieCard div. Finally, the movieCard div is added as a child element of the movie container element obtained earlier.

const movieTitle = document.createElement('div');
      movieTitle.classList.add('movieTitle');
      movieTitle.innerText = movie.title;

      const rating = document.createElement('div');
      rating.classList.add('rating');

      const rate = document.createElement('span');
      rate.classList.add('rate');
      rate.innerText = `${movie.vote_average}/10`;

      const year = document.createElement('span');
      year.classList.add('year');
      year.innerText = movie.release_date.split('-')[0];

      rating.appendChild(rate);
      rating.appendChild(year);

      movieCard.appendChild(moviePoster);
      movieCard.appendChild(movieTitle);
      movieCard.appendChild(rating);

      movieContainer.appendChild(movieCard);
    });
  })

Building A Box Modal To display Movie details

*I thought about creating a modal box to display the movie details, what is your thought about doing in another article? Let me know what you think about that.
*
If you have a question, do let me know in the comment section. Also like and follow me if you found this article helpful.

The Footer

<footer>
   <div class="footerContainer">
    <p>Copyright 2023</p>
    <p>Created By Tracy</p>            
    </div>     
</footer>

The footer tag contains two paragraph tags stating the name of the developer and a copyright text.

footer{
    background-color: #A01D1E;
    font-weight: 600;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
}
.footerContainer{
    display: flex;
    justify-content: space-between;
}

@media screen and (min-width: 1024px){
.footerContainer{
justify-content: space-around;
}
}

On a mobile screen, the spacing of the paragraph tag is set to space-between, while on a desktop, it is set to space-around.

The Final Result

The final result on Codepen

Git and GitHub Simplified

Tracy | Software Engineer — Tue, 16 May 2023 18:49:44 +0000

Git is a modern and widely used distributed version control system in the world. The version control system allows us to monitor and work with our team members in the same workspace.

This tutorial doesn't cover every aspect of git and GitHub but will provide you with enough knowledge to be comfortable using git and GitHub.

If you're a beginner developer, you might think that these two terms mean the same thing – but they're different.

Prerequisites

In order to complete this tutorial, you'll need the following:

• A command line interface.

• A text editor of your choice (I will be using Ubuntu).

• A GitHub account.

What is Git?

Git is a version control system that allows you to keep track of your codes and makes changes to your files.

What is Version Control System?

A version control system is basically software that helps developers to work together and maintain a complete history of their work. You can think of it as a digital time machine that allows you to go back to previous versions of your code and make changes as needed.

What Does Git Do?

Save Time - Each command takes only a few seconds to execute so we can save a lot of time compared to logging in to a GitHub account.
Offline Working - Git supports offline working which is crucial especially when facing internet connectivity issues, it will not affect one's work.
Undo Mistakes - You're able to undo any mistakes made during your coding session using the "git restore" command.
Track the Changes - You can track your codes and make changes to them using the git commands.
Used By Multiple People - When a team works on real-life projects, git helps ensure no code conflicts between the developers.

How To Configure Git

To configure git, you need to follow these steps:

Install git on your computer

You need to install git on your computer in order to use it. To verify if you have git on your system, you can run this command on the command line: git --version.

Set up your identity

After installation, open a command line or terminal and run the following commands:

git config --global user.name "Your Name"
git config --global user.email "youremail@domain.com"

NOTE: Replace "Your Name" with your own name and email.

Configure your text editor

Git uses a text editor to prompt you for commit messages and other input. paste this code to configure your text editor:

git config --global core.editor nano

NOTE: You can replace "nano" with the name of your preferred editor.

Creating A File

We use the touch command to create a file in git, you type touch followed by the name of the file.

touch filename

Cloning a repository

After creating the repository on your GitHub, click on 'code' and copy the HTTPS URL.

Type git clone on your code editor and paste the URL.

git clone https://github.com/Tra-G/anymovie.git

How to add files in git

After cloning the repository and working on the files, your work is not being tracked by Git. To track your work, you will make use of the git add command. There are two methods of adding files on git:

git add . - The dot that comes after "git" means all the files that exist in the repository. So when you use git add ., it will add all the files in that repository.

git add file - This is used to add specific file

git add filename
git add .

How to commit files in Git

Git commit is used to save changes made to a project and record them in the project repository. It is the next stage after git add. To commit files of a project:

git commit -m "the commit message goes here"

git commit tells Git that all the files staged are ready to be committed so it is time to take a snapshot. -m stands for message and -m "the commit message goes here" is the commit message.

How to push your project to GitHub

After committing your project changes, the next step is pushing your work to your GitHub. If you don't have a GitHub repository, don't worry. I will explain the process.

To push your work, type git push.

git push

git push command is used to upload the committed changes to a remote repository - GitHub where you will be able to see all the changes you have made so far.

Navigating your way on GitHub

To get started on Git, you need a GitHub account where you will upload all committed changes.

Creating a GitHub account
Go to the GitHub website and create an account

Creating a repository

After creating an account, to get started with working on a project:

Click on new and create a repository.

Deleting a repository

To delete a repository on GitHub, go to the specific repository you want to delete.
Click on settings and scroll down to the bottom of the page where you will see "Danger Zone".
Click on the last option at the bottom which says Delete this repository.

NOTE: It is not advisable to delete a repository unless it is necessary.

Collaborating with people on GitHub

There are times when you will be required to collaborate with people in building projects and knowing how to collaborate with people on GitHub will help you a long way even while working.

To collaborate with people on GitHub:

Go to the repository you intend to work on.
Click on settings and on the left side, click on Collaborators and you can start adding people you want to collaborate with.

Knowing how to make use of these commands will make your job as a software developer easier and increase your experience.

If you found this article helpful, like and follow for more helpful content on web development.

Building An Image Slider With Swiper Js

Tracy | Software Engineer — Thu, 11 May 2023 16:37:08 +0000

Swiper JS is a popular open-source library for creating responsive and mobile-friendly touch sliders, and carousel components for websites and web applications.

It provides a range of options for customizing the appearance and behavior of the slider, including navigation buttons, pagination, autoplay, and more. I will be going over the steps to use Swiper Js in building an image slider.

The image slider will contain a navigation for users to navigate back and forth in order to view different images. It will also contain a clickable pagination so you can click to view a particular image.

Step 1

Google https://swiperjs.com/
Click on demo

You will be provided with samples of various Swiper demos when you click on "Demos".

Scroll down and click on navigation-per-view; above it, click on element

The element page contains the sample code files and a live view of the project. Copy the whole HTML code and paste it into your code editor.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>

  <swiper-container class="mySwiper" pagination="true" pagination-clickable="true" space-between="30"
    slides-per-view="3">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper-container>

  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>

</body>

</html>

If you already have an HTML boilerplate, then you will need the Swiper link, HTML, and CSS code:
Scroll down the element page
Copy the link on the script tag and paste it into your HTML boilerplate below all HTML tags.

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>

The Swiper link is necessary to make any logic you add functional. Without the link tag, the slider wouldn't work.

The next step is to copy the HTML code and paste it into my code editor

<swiper-container class="mySwiper" pagination="true" pagination-clickable="true" space-between="30"
    slides-per-view="3">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper-container>

Then I will be replacing the slide 1 text with an image tag containing some images for each swiper-slide.

<div class="slide-container">
        <swiper-container class="mySwiper" pagination="true" navigation="true" loop="true" pagination-clickable="true" space-between="30"
            slides-per-view="3">
            <swiper-slide>
            <img src="https://thegadgetflow.com/wp-content/uploads/2020/04/10-gadgets-for-a-futuristic-home-office-1200x675.jpg">
            </swiper-slide>

            <swiper-slide>
            <img src="https://resources.owllabs.com/hubfs/uneebo-office-design-yNtCxu4kJXk-unsplash.jpg">
            </swiper-slide>

            <swiper-slide>
            <img src="https://cdn.bisnow.net/resize?type=jpeg&url=https%3A%2F%2Fs3.amazonaws.com%2Fcdn.bisnow.net%2Fcontent%2Fimages%2F2019%2F03%2F5ca121a2f2118-20180520_venture_arch_opentable_0002_screenres-copy.jpeg&width=2160&sign=0OQSfq1SFkLDAMZhNvFNGDfDgR7LLrpgTkBcab8_tqc">
            </swiper-slide>

            <swiper-slide>
            <img src="https://www.hpe.com/content/dam/hpe/insights/articles/2021/09/how-technology-is-enabling-the-new-hybrid-workspace/How-technology-is-enabling-the-new-hyrbid-workspace.jpg.transform/nxt-original/image.jpeg">
            </swiper-slide>

            <swiper-slide>
            <img src="https://cdna.artstation.com/p/assets/images/images/049/563/806/large/amy-colored.jpg?1652793049">
            </swiper-slide>

            <swiper-slide>
            <img src="https://cdn.oneesports.gg/cdn-data/2022/02/Anime_HimoutoUmaruChanR-1024x576.webp">
            </swiper-slide>

            <swiper-slide>
            <img src="https://i.pinimg.com/550x/f5/a3/85/f5a385e2976b8d378a55cfa04396315a.jpg">
            </swiper-slide>

            <swiper-slide><img src="https://www.cnet.com/a/img/resize/69256d2623afcbaa911f08edc45fb2d3f6a8e172/hub/2023/02/03/afedd3ee-671d-4189-bf39-4f312248fb27/gettyimages-1042132904.jpg?auto=webp&fit=crop&height=675&width=1200"></swiper-slide>

            <swiper-slide><img src="https://imageio.forbes.com/specials-images/imageserve/5f962df3991e5636a2f68758/0x0.jpg?format=jpg&crop=812,457,x89,y103,safe&width=1200"></swiper-slide>
        </swiper-container>

    </div>

The JavaScript Logic

Inside the swiper-container, the JavaScript code for the slider is included and you can add or remove any of them.

<swiper-container class="mySwiper" pagination="true" navigation="true" loop="true" pagination-clickable="true" space-between="30"
            slides-per-view="3"></swiper-container>

navigation="true" - provided for two arrows with a default color of blue to go to the next image or the previous image.

pagination="true" and pagination-clickable="true" provides for pagination below the images with a default color of blue. Since I set pagination-clickable="true", It allows users to click on the pagination to view a particular image. If not set, it won't be clickable.

slides-per-view="3" ensures only three images can be viewed on screen. To view more, you would need to use the navigation icon. So if I make it 4, It will set the images on view to be 4.

CSS Styling

The styling of a slider is important because it determines the look. This is why I will be giving a short explanation of the styling I used.

.slide-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    body {
      background: #1F1F1F;
    }

    swiper-container {
      width: 80%;
      height: 60%;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

The Styling

I gave the HTML body a dark grey background color of background: #1F1F1F;

The container holding the Swiper container slide-container is displayed flex allowing for flexible sizing and positioning of elements within a container. so it can be aligned to the center of the webpage using justify-content: center; align-items-center;.

The "height" property is set to "100vh", which means the height of the container will be equal to the height of the viewport, ensuring that the image slider takes up the entire screen.

.slide-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

The Swiper container swiper-container sets the width and height of the image slider to 80% and 60%, respectively. This means that the slider will take up 80% of the width of its container and 60% of the height, leaving some space around the edges for other content. This is a good practice to ensure that the slider is not too large or too small on the page.

swiper-container {
      width: 80%;
      height: 60%;
    }

The last section, swiper-slide img, styles the individual images within the slider. The display property is set to block to ensure that each image takes up its own space within the slider. The width and height properties are set to 100% to ensure that each image takes up the full width and height of its container. The object-fit set to cover, which means that each image will be scaled to cover the entire container while maintaining its aspect ratio.

The Final Result

https://codepen.io/Tracy4work/pen/ExdNOGG

NOTE: You can change the color of the navigation and pagination depending on your preference.

If you found this article helpful, do like and follow for more helpful tips on web development. If there's anything you need an explanation on, be sure to reach out. I will always be active to provide an explanation.

Tackling Browser Compatibility Issues: Tips for Web Developers

Tracy | Software Engineer — Thu, 11 May 2023 00:24:39 +0000

As a web developer, ensuring your website performs well on all major web browsers is one of your biggest hurdles. Numerous web browsers are available, each with its own peculiarities and subtleties, making it challenging to create a website that appears and functions uniformly across all platforms.

This article discusses some of the typical browser compatibility issues developers face and offers suggestions on how to handle them.

Why does Browser compatibility matter?

It's important to note that browser compatibility refers to a website's ability to operate and appear the same across various web browsers.

Different web browsers interpret HTML, CSS, and JavaScript code differently, which can result in inconsistencies in website design and functionality. This can lead to a poor user experience, potentially causing users to abandon the site. Consequently, ensuring browser compatibility is critical for creating a website that is accessible to as many users as possible.

Common Browser Compatibility Issues

Here are some of the most common browser compatibility issues that web developers may face:

Layout and Design Inconsistencies

**
Inconsistencies in layout and design can occur when different web browsers interpret CSS code differently. This means that a website can look great on one browser, but appear distorted or misaligned on another. For example, a website that looks great on Google Chrome may appear distorted or misaligned on Mozilla Firefox.

JavaScript Compatibility Issues

**
JavaScript is an essential programming language for creating interactive websites. However, JavaScript compatibility issues can also arise, as different browsers may interpret the code in different ways. This can lead to broken functionality or even crashes.

Font Rendering Issues

**
Different web browsers may render fonts differently, resulting in inconsistencies in typography across different platforms. This can make websites look unprofessional and may even affect readability.

Cross-Browser Compatibility Issues

**
Cross-browser compatibility refers to the ability of a website to function correctly across different web browsers. This can be challenging, as different browsers may have different interpretations of HTML, CSS, and JavaScript code.

As a web developer, ensuring that your website displays properly across different browsers and browser versions is crucial. Browser compatibility issues can frustrate users and reflect poorly on your skills. However, by following some best practices, you can minimize compatibility problems.

Tips for Tackling Browser Compatibility Issues
Here are some tips that web developers can follow to tackle browser compatibility issues:

Test Your Website on Multiple Browsers

**
The first step in tackling browser compatibility issues is to test your website on as many browsers as possible. This will help you identify any issues or inconsistencies that may arise when your website is viewed on different platforms.
There are several tools available that can help you test your website on different browsers, such as BrowserStack and Sauce Labs. These tools allow you to simulate different browsers and operating systems to see how your website looks and functions on each platform.

Use Vendor Prefixes

**
Vendor prefixes are a way to add specific CSS properties to your website that are only recognized by certain browsers. For example, the "-webkit-" prefix is used for properties that are only recognized by the Chrome and Safari browsers.
By using vendor prefixes, you can ensure that your website looks and functions correctly on different browsers, without having to create separate CSS files for each platform.

Use a CSS Reset

**
Different browsers have different default styles for HTML elements, which can lead to inconsistencies in website design and layout. To avoid this, you can use a CSS reset, which is a set of styles that "reset" the default styles for HTML elements to a consistent baseline.
There are several CSS reset libraries available, such as Normalize.css and Reset.css, that you can use to ensure that your website looks consistent across all browsers.

Avoid Browser-Specific Code

**
One of the biggest mistakes you can make as a web developer is to write browser-specific code. This means writing code that only works on certain browsers, and not on others.
To avoid this, you should always use standardized HTML, CSS, and JavaScript code that is recognized by all major browsers. This will help ensure that your website works well on all platforms and that you don't inadvertently exclude users on certain browsers.

Check CanIUse

**
The website CanIUse.com is an excellent resource for checking browser support for web technologies. You can view support tables for HTML elements, CSS rules, and JavaScript features across desktop and mobile browsers. Consult CanIUse to determine the workarounds you might need for older browser versions. You may need to use polyfill scripts to patch unsupported features.

For example, to check if browsers support Flexbox layout, you can use:

@supports (display: flexbox) {
    /* CSS rules for browsers that support Flexbox */
  }

Use Polyfills

**
Polyfills are snippets of code that add support for newer features in older browsers that don't natively support them. For example, you can use a polyfill library like Polyfill Service to add support for Flexbox in older IE browsers.

Keep Your Code Simple
Finally, it's important to keep your code as simple as possible. Complex code can be difficult to debug and can lead to compatibility issues on different browsers.
To keep your code simple, you should avoid using unnecessary code and focus on creating clean, efficient code that is easy to read and understand. This will help ensure that your website works well on all platforms and that you can quickly identify and fix any compatibility issues that arise.

For browsers that don't support a feature, provide a fallback option. For example, for Flexbox you can use:

.container {
  display: flex;
}

@supports not (display: flex) {
  .container {
    /* Fallback CSS rules */ 
  }
}

Conclusion

**
Tackling browser compatibility issues is an essential part of web development. By following these tips and best practices, you can ensure that your website looks and functions consistently across all major browsers and that you provide a great user experience for all your visitors. Remember to test your website on multiple browsers, use vendor prefixes, use a CSS reset, avoid browser-specific code, and keep your code simple. With these tips in mind, you can create a website that is accessible to as many users as possible, regardless of the browser they use.

How to create a pop-up: JavaScript Modal

Tracy | Software Engineer — Tue, 09 May 2023 23:38:47 +0000

Introduction

Modal is a way for a browser to display important information on a website. Some of its used cases are highlighting an important notice to a user, confirming, or providing additional information.

JavaScript modal also known as a pop-up window is a user interface that displays content on top of the current webpage. Modals are used to provide additional information for user input and confirm an action, you can also use it to create a dynamic page or dashboard with a single HTML file.

Project Overview

I will be using a user Dashboard and a form website to explain how modal works. To create a modal, I will be using HTML, CSS, and JavaScript. HTML and CSS are used to build the modal box while JavaScript handles the behavior of the modal so that when clicked, the pop-up window will be displayed.

Step 1 - The HTML

You will begin with creating the HTML structure for the project using the form tag:

<!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Modal Example</title>

      </head>
      <body>
        <h1>Modal Example</h1>

        <!-- Button to open the modal -->
        <button class="btn-open">Open Modal</button>

        <!-- The modal -->
        <div class="modal-background">
          <div class="modal-content">
            <h2>Modal Title</h2>
            <p>Modal message goes here.</p>

            <!--Button to close the modal content-->
            <button class="close-btn">Close Modal</button>
          </div>
        </div>

      </body>
      </html>

The HTML code contains a button <button class="btn-open">Open Modal</button> that would be clicked to view the pop-up and the content, <div class="modal-content"> that would display when the button is clicked.
A second button is included with the class <button class="close-btn">Close Modal</button> which closes the content when clicked on.

Step 2 - The CSS Styling

CSS is necessary to define the box modal and make the project more presentable.

/* Style the modal background */
    .modal-background {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    /* Style the modal content */
    .modal-content {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: white;
      border-radius: 5px;
      z-index: 1000;
    }

.modal-background gives the body container a gray background color which is positioned fixed and placed on the top - top: 0;.
.modal-content is the container for the modal content. top: 50%; sets the top edge of the modal to be at 50% of the height of the screen (viewport). This means that the top of the modal will be halfway down the screen, vertically centered.
left: 50%; sets the left edge of the modal to be at 50% of the width of the screen. This means that the left edge of the modal will be halfway across the screen, horizontally centered.
transform: translate(-50%, -50%); moves the modal back up by 50% of its own height (to counteract the top: 50%; setting) and back left by 50% of its own width (to counteract the left: 50%; setting). This centers the modal perfectly both horizontally and vertically.

Step 3 - JavaScript

The JavaScript code would ensure the modal box is displayed by responding to a click event.

let modalBG = document.querySelector('.modal-background');
let modalContent = document.querySelector('.modal-content');
let closemodal = document.querySelector('.closebtn');
let openmodal = document.querySelector('.openbtn');

function openModal() {
  modalBG.style.display = 'block';
  modalContent.style.display = 'block';
}

function closeModal() {
  modalBG.style.display = 'none';
  modalContent.style.display = 'none';
}

openmodal.onclick = openModal;
closemodal.onclick = closeModal;

The first part created a variable for each of the class container let modalBG = document.querySelector('.modal-background');.
The second part created a function that would be executed when the button is clicked function openModal() { modalBG.style.display = 'block'; modalContent.style.display = 'block'; }.

Initially, the modal-background is set to a display: none; on the CSS, but I created a function that sets the modal-background display: block; when the button <button class="btn-open">Open Modal</button> is clicked.

The result

Codepen Link: https://codepen.io/Tracy4work/pen/bGmvLqO

Do Check it out, try it, and let me know your thoughts. Also like and follow for more helpful articles on web development.

Building An Image Slider With Swiper Js

Tracy | Software Engineer — Tue, 09 May 2023 08:53:06 +0000

Swiper JS is a popular open-source library for creating responsive and mobile-friendly touch sliders, and carousel components for websites and web applications.

It provides a range of options for customizing the appearance and behavior of the slider, including navigation buttons, pagination, autoplay, and more. I will be going over the steps to use Swiper Js in building an image slider.

Step 1

Google https://swiperjs.com/
Click on demo

You will be provided with samples of various Swiper demos when you click on "Demos".

Scroll down and click on navigation-per-view; above it, click on element.

The element page contains the sample code files and a live view of the project. Copy the whole HTML code and paste it into your code editor.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>

  <swiper-container class="mySwiper" pagination="true" pagination-clickable="true" space-between="30"
    slides-per-view="3">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper-container>

  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>

</body>

</html>

If you already have an HTML boilerplate, then you will need the Swiper link, HTML, and CSS code:

Scroll down the element page

Copy the link on the script tag and paste it into your HTML boilerplate below all HTML tags.

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>

The Swiper link is necessary to make any logic you add functional. Without the link tag, the slider wouldn't work.

The next step is to copy the HTML code and paste into my code editor

<swiper-container class="mySwiper" pagination="true" pagination-clickable="true" space-between="30"
    slides-per-view="3">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper-container>

Then I will be replacing the slide 1 text with an image tag containing some images for each swiper-slide

<div class="slide-container">
        <swiper-container class="mySwiper" pagination="true" navigation="true" loop="true" pagination-clickable="true" space-between="30"
            slides-per-view="3">
            <swiper-slide>
            <img src="https://thegadgetflow.com/wp-content/uploads/2020/04/10-gadgets-for-a-futuristic-home-office-1200x675.jpg">
            </swiper-slide>

            <swiper-slide>
            <img src="https://resources.owllabs.com/hubfs/uneebo-office-design-yNtCxu4kJXk-unsplash.jpg">
            </swiper-slide>

            <swiper-slide>
            <img src="https://cdn.bisnow.net/resize?type=jpeg&url=https%3A%2F%2Fs3.amazonaws.com%2Fcdn.bisnow.net%2Fcontent%2Fimages%2F2019%2F03%2F5ca121a2f2118-20180520_venture_arch_opentable_0002_screenres-copy.jpeg&width=2160&sign=0OQSfq1SFkLDAMZhNvFNGDfDgR7LLrpgTkBcab8_tqc">
            </swiper-slide>

            <swiper-slide>
            <img src="https://www.hpe.com/content/dam/hpe/insights/articles/2021/09/how-technology-is-enabling-the-new-hybrid-workspace/How-technology-is-enabling-the-new-hyrbid-workspace.jpg.transform/nxt-original/image.jpeg">
            </swiper-slide>

            <swiper-slide>
            <img src="https://cdna.artstation.com/p/assets/images/images/049/563/806/large/amy-colored.jpg?1652793049">
            </swiper-slide>

            <swiper-slide>
            <img src="https://cdn.oneesports.gg/cdn-data/2022/02/Anime_HimoutoUmaruChanR-1024x576.webp">
            </swiper-slide>

            <swiper-slide>
            <img src="https://i.pinimg.com/550x/f5/a3/85/f5a385e2976b8d378a55cfa04396315a.jpg">
            </swiper-slide>

            <swiper-slide><img src="https://www.cnet.com/a/img/resize/69256d2623afcbaa911f08edc45fb2d3f6a8e172/hub/2023/02/03/afedd3ee-671d-4189-bf39-4f312248fb27/gettyimages-1042132904.jpg?auto=webp&fit=crop&height=675&width=1200"></swiper-slide>

            <swiper-slide><img src="https://imageio.forbes.com/specials-images/imageserve/5f962df3991e5636a2f68758/0x0.jpg?format=jpg&crop=812,457,x89,y103,safe&width=1200"></swiper-slide>
        </swiper-container>

    </div>

The JavaScript Logic

**
Inside the swiper-container, the JavaScript code for the slider is included and you can add or remove any of them.

<swiper-container class="mySwiper" pagination="true" navigation="true" loop="true" pagination-clickable="true" space-between="30"
            slides-per-view="3"></swiper-container>

navigation="true" - provided for two arrows with a default color of blue to go to the next image or the previous image.

slides-per-view="3" ensures only three images can be viewed on screen. To view more, you would need to use the navigation icon. So if I make it 4, It will set the images on view to be 4.

CSS Styling

**
The styling of a slider is important because it determines the look. This is why I will be giving a short explanation of the styling I used.

.slide-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    body {
      background: #1F1F1F;
    }

    swiper-container {
      width: 80%;
      height: 60%;
    }

 swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

The Styling

**
I gave the HTML body a dark grey background color of background: #1F1F1F;

The container holding the Swiper container slide-container is displayed flex allowing for flexible sizing and positioning of elements within a container. so it can be aligned to the center of the webpage using justify-content: center; align-items-center;.

The "height" property is set to "100vh", which means the height of the container will be equal to the height of the viewport, ensuring that the image slider takes up the entire screen.

.slide-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

The Swiper container swiper-container sets the width and height of the image slider to 80% and 60%, respectively. This means that the slider will take up 80% of the width of its container and 60% of the height, leaving some space around the edges for other content. This is a good practice to ensure that the slider is not too large or too small on the page.

swiper-container {
      width: 80%;
      height: 60%;
    }

The last section, swiper-slide img, styles the individual images within the slider. The display property is set to block to ensure that each image takes up its own space within the slider. The width and height properties are set to 100% to ensure that each image takes up the full width and height of its container. The object-fit set to cover, which means that each image will be scaled to cover the entire container while maintaining its aspect ratio.
The final Result

NOTE: You can change the color of the navigation and pagination depending on your preference.

How To Center An Element With CSS

Tracy | Software Engineer — Tue, 09 May 2023 08:37:17 +0000

Introduction

CSS is an important asset to structure a page in the right direction. Even though HTML is the building block of a website, without the use of CSS, it will be difficult to navigate through the website.

In this article, you will be taken through four processes to center an element with CSS using a login page. This is important because most times, people find it challenging to center an element and the process they take might be a long and stressful one.

The four methods to center an element are as follows:

- Flexbox
- Grid
- Margin
- positioning

For the sake of this article, I will use a form page to show the results of using these methods.

Flexbox

Flexbox provides an efficient way to align items in a container. The main idea behind Flexbox is to enable a container element to change the size and position of its child elements to fill the available space and create a responsive layout.

To center the Login page, I need three elements:

display: flex; - This CSS element will set the display of the form container to a flexible module which would give the container the ability to alter its height, width, and position.
justify-content: center; - This element will define the alignment of the container on the main axis.
align-items: center; - The align-item defines how items are laid out along the cross-axis. By setting it to center, the form container would be centered horizontally.

These three elements will be used in the body content of the HTML form tag to center the container vertically and horizontally:

The HTML Code

<div class="container">
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

The CSS Styling

The "container" element is the parent element of the form tag and any style given to it will have an effect on the form.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

We have a container element with a height of 100vh, which makes it take up the full height of the viewport - the webpage. The display: flex property is used to make the container a flex container, and justify-content: center and align-items: center is used to center the form both horizontally and vertically within the container.

Grid

Grid provides a powerful way to create layouts. One of the common use cases of CSS Grid is to center an object within a container. CSS grid uses two elements to center an object and they are:

display: grid
place-items: center

To center an object with Grid

Create a container element and apply the display: grid property to it.

.container {
  display: grid;
}

Set the place-items property to the center place. This will place the object in the center.

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

This will center the object both horizontally and vertically within the container.

Margin

To center an object with a margin using CSS, you can use the margin property along with the auto value. Here's how:

.container {
  width: 40%;
  margin: 3rem auto;
  height: 100vh;
}

The width of the container is important and will determine the width of the form container. If the width of the form container is not set, the margin: auto; property will NOT be effective.
The margin property is set to 0 auto. This tells the browser to automatically calculate and evenly distribute the left and right margins of the div, thus centering it horizontally.

positioning

Positioning is a CSS concept that allows you to control the placement of an element on a web page. It is often used to center an element horizontally or vertically within its parent container.

To center an object with position using CSS, you can use the position and transform properties. Here are the steps to follow:

.container {
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

In the code above, the position is set to absolute which allows us to position it relative to its nearest positioned ancestor, which is usually the body element.
Next, we set the top and left properties to 50%. This positions the top-left corner of the container at the center of its nearest-positioned ancestor.
The transform property to moves the container up and left by half its width and height, respectively. The translate(-50%, -50%) value does exactly that, by moving the container left by 50% of its width and up by 50% of its height.

Conclusion

Centering an element on a web page is a common task in web development. There are various techniques to achieve this, including using CSS properties such as margin, position, and transform. These techniques can be used to center an element horizontally and/or vertically within its parent container, depending on the specific requirements of the project.

If you found this article helpful, like and follow for more useful tips. Also, share with your friends.

DEV Community: Tracy | Software Engineer

Building A Serverless React App With AWS Lambda And API Gateway

Building Live Search Functionality with JavaScript

Introduction

Project Overview

Prerequisites

HTML - Create the UI

CSS - Style the UI

JavaScript

Conclusion

Introduction To Technical Writing: A beginner's guide

What Is Technical Writing?

Importance Technical Writing

Technical Writing Materials

Books For Technical Writers

Where To Get Technical Writing Gigs

Technical Writing Tools

Technical Writing Guide

Build Your Portfolio

Form Validation with JavaScript

HTML Validation

What is Form Validation?

Building A Form

The HTML Code

The CSS Code

JavaScript For Validation

The Final Result

Mastering API Fetch: How to Build a Movie Website with Real-Time Data Updates

What Is Fetch?

Using the Fetch API

Features of the movie website

The layout of the website

The Header

The Search Bar Functionality

Displaying the Movies - The Main

Building A Box Modal To display Movie details

The Footer

The Final Result

Git and GitHub Simplified

Prerequisites

What is Git?

What is Version Control System?

How To Configure Git

Creating A File

Cloning a repository

How to add files in git

How to commit files in Git

How to push your project to GitHub

Navigating your way on GitHub

Creating a GitHub account

Creating a repository

Deleting a repository

Collaborating with people on GitHub

Building An Image Slider With Swiper Js

Step 1

The JavaScript Logic

CSS Styling

The Styling

The Final Result

Tackling Browser Compatibility Issues: Tips for Web Developers

Why does Browser compatibility matter?

Common Browser Compatibility Issues

Layout and Design Inconsistencies

JavaScript Compatibility Issues

Font Rendering Issues

Cross-Browser Compatibility Issues

Test Your Website on Multiple Browsers

Use Vendor Prefixes

Use a CSS Reset

Avoid Browser-Specific Code

Check CanIUse

Use Polyfills

Conclusion

How to create a pop-up: JavaScript Modal

Introduction

Project Overview

Step 1 - The HTML

Step 2 - The CSS Styling

Step 3 - JavaScript

The result