DEV Community: CodingNepal

How to Create Card Slider in HTML CSS & JavaScript | Step-by-Step Guide

CodingNepal — Thu, 05 Sep 2024 17:52:12 +0000

This article was originally published at https://www.codingnepalweb.com.

Sliders are a great way to showcase products, testimonials, or important content on a website. They add a dynamic, engaging, and user-friendly look to a site. If you’re a beginner web developer, have you considered creating one and integrating it into your project?

In this blog post, I’ll guide you through creating a Responsive Card Slider using HTML, CSS, and JavaScript. This slider allows users to navigate the cards using buttons or pagination bullets. We’ll use SwiperJS, a popular and easy-to-use slider library that will make your slider modern, touch-friendly, and work seamlessly across all devices and browsers.

If you prefer to create a slider without using an external library like SwiperJS, check out my other blog post where I guide you through creating a custom slider from scratch.

By the end of this guide, you’ll have a fully functional card slider that boosts your coding skills and adds a polished feature to your site. Whether you’re adding it to your portfolio or experimenting with slider functionality, this project is a valuable step in your web development journey.

Video Tutorial of Responsive Card Slider in HTML CSS & JavaScript

The YouTube video above is a great resource if you prefer video tutorials. It explains each line of code and provides comments, making it easy to follow along with your card slider project. If you like reading or need a step-by-step guide, keep following this post.

Steps to Create Card Slider HTML CSS & JavaScript

To create a responsive and interactive card slider using HTML, CSS, and JavaScript, follow these simple step-by-step instructions:

Create a folder with any name you like, e.g., card-slider.
Inside it, create the necessary files: index.html, style.css, and script.js.
Download the Images folder and put it in your project directory. This folder contains images used on this card slider.

In your index.html file: Add the essential HTML markup along with SwiperJS CDN links to set up the card slider layout.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Slider HTML & CSS | CodingNepal</title>
  <!-- Linking Google fonts for icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <!-- Linking SwiperJS CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container swiper">
    <div class="card-wrapper">
      <!-- Card slides container -->
      <ul class="card-list swiper-wrapper">
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="images/designer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-designer">Designer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="images/developer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-developer">Developer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="images/marketer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-marketer">Marketer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="images/gamer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-gamer">Gamer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="images/editor.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-editor">Editor</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
      </ul>

       <!-- Pagination -->
      <div class="swiper-pagination"></div>

      <!-- Navigation Buttons -->
      <div class="swiper-slide-button swiper-button-prev"></div>
      <div class="swiper-slide-button swiper-button-next"></div>
    </div>
  </div>

  <!-- Linking SwiperJS script -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!-- Linking custom script -->
  <script src="script.js"></script>
</body>
</html>

In your style.css file: Style your card slider to make it responsive and visually appealing. Experiment with colors, fonts, and backgrounds to enhance the design.

/* Importing Google fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#ECEFFE, #C5CFFC);
}

.card-wrapper {
  max-width: 1100px;
  margin: 0 60px 35px;
  padding: 20px 10px;
  overflow: hidden;
}

.card-list .card-item {
  list-style: none;
}

.card-list .card-item .card-link {
  display: block;
  background: #fff;
  padding: 18px;
  user-select: none;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  transition: 0.2s ease;
}

.card-list .card-item .card-link:active {
  cursor: grabbing;
}

.card-list .card-item .card-link:hover {
  border-color: #5372F0;
}

.card-list .card-link .card-image {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-list .card-link .badge {
  color: #5372F0;
  width: fit-content;
  padding: 8px 16px;
  font-size: 0.95rem;
  border-radius: 50px;
  font-weight: 500;
  background: #DDE4FF;
  margin: 16px 0 18px;
}

.card-list .card-link .badge-designer {
  color: #B22485;
  background: #F7DFF5;
}

.card-list .card-link .badge-marketer {
  color: #B25A2B;
  background: #FFE3D2;
}

.card-list .card-link .badge-gamer {
  color: #205C20;
  background: #D6F8D6;
}

.card-list .card-link .badge-editor {
  color: #856404;
  background: #fff3cd;
}

.card-list .card-link .card-title {
  color: #000;
  font-size: 1.19rem;
  font-weight: 600;
}

.card-list .card-link .card-button {
  height: 35px;
  width: 35px;
  color: #5372F0;
  margin: 30px 0 5px;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #5372F0;
  transform: rotate(-45deg);
  transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
  color: #fff;
  background: #5372F0;
}

.card-wrapper .swiper-pagination-bullet {
  height: 13px;
  width: 13px;
  opacity: 0.5;
  background: #5372F0;
}

.card-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.card-wrapper .swiper-slide-button {
  color: #5372F0;
  margin-top: -35px;
}

/* Responsive media query code for small screens */
@media (max-width: 768px) {
  .card-wrapper {
    margin: 0 10px 25px;
  }

  .card-wrapper .swiper-slide-button {
    display: none;
  }
}

In your script.js file: Initialize SwiperJS with JavaScript code to make the card slider functional. Configure various Swiper methods to control the slider’s behavior, including navigation, pagination, and autoplay.

new Swiper('.card-wrapper', {
    loop: true,
    spaceBetween: 30,

    // Pagination bullets
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // Responsive breakpoints
    breakpoints: {
        0: {
            slidesPerView: 1
        },
        768: {
            slidesPerView: 2
        },
        1024: {
            slidesPerView: 3
        }
    }
});

That’s it! If you’ve added the code correctly, you’re ready to see your card slider. Open the index.html file in your preferred browser to view the project in action.

Conclusion and final words

By following this guide, you will successfully create a responsive and interactive card slider that enhances your website‘s functionality and visual appeal. Whether you choose to use SwiperJS for its ease and advanced features or decide to build a custom slider from scratch, you will gain valuable skills and insight into slider development.

Feel free to customize the slider and experiment with different settings to make it your own. For more customization details, you can check out the SwiperJS documentation.

If you encounter any problems while creating your slider, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.

View Live Demo

Download Code Files

⛅ Build A Weather App in HTML CSS and JavaScript

CodingNepal — Sat, 17 Aug 2024 11:05:06 +0000

This article was originally published at https://www.codingnepalweb.com.

Building a weather app is an excellent project for beginner web developers. It helps to strengthen your fundamental skills while introducing you to the practical use of APIs in JavaScript. You’ll gain hands-on experience in fetching and displaying data from external sources. These skills are essential for developing real-world applications.

In this blog post, I’ll guide you through building a beautiful and interactive weather app using HTML, CSS, and JavaScript. This app allows users to check the weather for any city or use their current location to get the weather forecast. The app will feature real-time weather updates and forecasts for 24 hours.

By the end of this guide, you’ll have a fully functional weather app that not only enhances your coding skills but also provides a practical tool you can use and showcase. Whether you’re adding it to your portfolio or just experimenting with new techniques, this project is a valuable step in your web development journey.

Video Tutorial of Weather App in HTML & JavaScript

The YouTube video above is a great resource if you prefer video tutorials. It explains each line of code and provides comments, making it easy to follow along with your weather app project. If you prefer reading or need a step-by-step guide, keep following this post.

Steps to Build Weather App in HTML & JavaScript

To build a functional weather app using HTML, CSS, and JavaScript, follow these simple step-by-step instructions:

Create a folder with any name you like, e.g., weather-app.
Inside it, create the necessary files: index.html, style.css, and script.js.
Download the Icons folder and put it in your project directory. This folder contains necessary icons for weather conditions.

In your index.html file, add the essential HTML markup to structure your Weather app layout. This includes a search input for city names, a location button, and sections to display the current weather and hourly forecast, all structured with semantic tags.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/@codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App | CodingNepal</title>
  <!-- Linking Google fonts for icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <!-- Search section -->
    <div class="search-section">
      <div class="input-wrapper">
        <span class="material-symbols-rounded">search</span>
        <input type="search" placeholder="Enter a city name" class="search-input">
      </div>
      <button class="location-button">
        <span class="material-symbols-rounded">my_location</span>
      </button>
    </div>

    <!-- No results message -->
    <div class="no-results">
      <img src="icons/no-result.svg" alt="No results found" class="icon">
      <h3 class="title">Something went wrong!</h3>
      <p class="message">We're unable to retrieve the weather details. Enure you've entered a valid city or try again later.</p>
    </div>

    <!-- Container for displaying weather data -->
    <div class="weather-section">
      <div class="current-weather">
        <img src="icons/no-result.svg" class="weather-icon">
        <h2 class="temperature">00<span>°C</span></h2>
        <h5 class="description">Weather description</h5>
      </div>

      <!-- Hourly weather forecast list -->
      <div class="hourly-weather">
        <ul class="weather-list"></ul>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

In your style.css file, add CSS code to style your weather app, and give it a responsive and visually appealing design. Play with different colors, fonts, and backgrounds to make the interface user-friendly and attractive.

/* Importing Google Fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5f41e4;
}

.container {
  flex-grow: 1;
  overflow: hidden;
  max-width: 425px;
  border-radius: 10px;
  position: relative;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.search-section {
  display: flex;
  gap: 10px;
  padding: 25px;
  align-items: center;
}

.search-section .input-wrapper {
  height: 54px;
  width: 100%;
  position: relative;
}

.search-section .input-wrapper span {
  position: absolute;
  top: 50%;
  left: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}

.search-section .search-input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  text-transform: uppercase;
  padding: 0 20px 0 50px;
  border: 1px solid #beb0ff;
  background: #fff;
  transition: 0.1s ease;
}

.search-section .search-input:focus {
  border-color: #5f41e4;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
}

.search-section .search-input::placeholder {
  text-transform: none;
}

.search-section .location-button {
  height: 54px;
  width: 56px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #fff;
  color: #5f41e4;
  border: 1px solid #beb0ff;
  transition: 0.3s ease;
}

.search-section .location-button:hover {
  color: #fff;
  background: #5f41e4;
  border-color: #5f41e4;
}

.search-section .location-button span {
  font-size: 1.3rem;
}

.no-results {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  display: none;
  padding: 40px;
  text-align: center;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  transition: 0.2s ease;
}

body.show-no-results .no-results {
  display: flex;
}

.no-results .title {
  font-weight: 700;
  margin: 25px 0 15px;
}

.no-results .message {
  font-weight: 500;
  line-height: 23px;
}

body.show-no-results .weather-section {
  visibility: hidden;
}

.weather-section .current-weather {
  display: flex;
  padding: 20px 0 50px;
  flex-direction: column;
  align-items: center;
}

.current-weather .weather-icon {
  width: 140px;
  aspect-ratio: 1;
}

.current-weather .temperature {
  font-size: 3.38rem;
  margin: 23px 0;
  display: flex;
}

.current-weather .temperature span {
  font-size: 1.56rem;
  font-weight: 500;
  margin: 5px 0 0 2px;
}

.current-weather .description {
  font-weight: 500;
  font-size: 1.25rem;
}

.hourly-weather {
  padding: 16px 25px;
  border-top: 1px solid #d5ccff;
}

.hourly-weather .weather-list {
  display: flex;
  gap: 41px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: -16px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.hourly-weather:hover .weather-list {
  scrollbar-color: #bfbfbf transparent;
}

.hourly-weather .weather-list .weather-item {
  display: flex;
  gap: 7px;
  width: 60px;
  font-weight: 500;
  flex-direction: column;
  align-items: center;
}

.hourly-weather .weather-item .weather-icon {
  width: 28px;
  aspect-ratio: 1;
}

/* Responsive media query code for small screen */
@media (max-width: 624px) {
  body {
    padding: 15px;
  }

  .search-section {
    padding: 20px;
  }

  .no-results {
    padding: 30px;
  }

  .hourly-weather {
    padding: 16px 20px;
  }

  .hourly-weather .weather-list {
    gap: 32px;
  }
}

In your script.js file, add JavaScript code to make your weather app interactive and functional. This code will fetch the current weather and hourly forecast from an external API, then dynamically update the DOM to display the data in real-time.

const searchInput = document.querySelector(".search-input");
const locationButton = document.querySelector(".location-button");
const currentWeatherDiv = document.querySelector(".current-weather");
const hourlyWeather = document.querySelector(".hourly-weather .weather-list");

const API_KEY = "YOUR-API-KEY-HERE"; // API key

// Weather codes for mapping to custom icons
const weatherCodes = {
  clear: [1000],
  clouds: [1003, 1006, 1009],
  mist: [1030, 1135, 1147],
  rain: [1063, 1150, 1153, 1168, 1171, 1180, 1183, 1198, 1201, 1240, 1243, 1246, 1273, 1276],
  moderate_heavy_rain: [1186, 1189, 1192, 1195, 1243, 1246],
  snow: [1066, 1069, 1072, 1114, 1117, 1204, 1207, 1210, 1213, 1216, 1219, 1222, 1225, 1237, 1249, 1252, 1255, 1258, 1261, 1264, 1279, 1282],
  thunder: [1087, 1279, 1282],
  thunder_rain: [1273, 1276],
}

// Display the hourly forecast for the next 24 hours
const displayHourlyForecast = (hourlyData) => {
  const currentHour = new Date().setMinutes(0, 0, 0);
  const next24Hours = currentHour + 24 * 60 * 60 * 1000;

  // Filter the hourly data to only include the next 24 hours
  const next24HoursData = hourlyData.filter(({ time }) => {
    const forecastTime = new Date(time).getTime();
    return forecastTime >= currentHour && forecastTime <= next24Hours;
  });

  // Generate HTML for each hourly forecast and display it
  hourlyWeather.innerHTML = next24HoursData.map((item) => {
    const temperature = Math.floor(item.temp_c);
    const time = item.time.split(' ')[1].substring(0, 5);
    const weatherIcon = Object.keys(weatherCodes).find(icon => weatherCodes[icon].includes(item.condition.code));

    return `<li class="weather-item">
            <p class="time">${time}</p>
            <img src="icons/${weatherIcon}.svg" class="weather-icon">
            <p class="temperature">${temperature}°</p>
          </li>`;
  }).join('');
};

// Fetch and display weather details
const getWeatherDetails = async (API_URL) => {
  window.innerWidth <= 768 && searchInput.blur();
  document.body.classList.remove("show-no-results");

  try {
    // Fetch weather data from the API and parse the response as JSON
    const response = await fetch(API_URL);
    const data = await response.json();

    // Extract current weather details
    const temperature = Math.floor(data.current.temp_c);
    const description = data.current.condition.text;
    const weatherIcon = Object.keys(weatherCodes).find(icon => weatherCodes[icon].includes(data.current.condition.code));

    // Update the current weather display
    currentWeatherDiv.querySelector(".weather-icon").src = `icons/${weatherIcon}.svg`;
    currentWeatherDiv.querySelector(".temperature").innerHTML = `${temperature}<span>°C</span>`;
    currentWeatherDiv.querySelector(".description").innerText = description;

    // Combine hourly data from today and tomorrow
    const combinedHourlyData = [...data.forecast?.forecastday[0]?.hour, ...data.forecast?.forecastday[1]?.hour];

    searchInput.value = data.location.name;
    displayHourlyForecast(combinedHourlyData);
  } catch (error) {
    document.body.classList.add("show-no-results");
  }
}

// Set up the weather request for a specific city
const setupWeatherRequest = (cityName) => {
  const API_URL = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${cityName}&days=2`;
  getWeatherDetails(API_URL);
}

// Handle user input in the search box
searchInput.addEventListener("keyup", (e) => {
  const cityName = searchInput.value.trim();

  if (e.key == "Enter" && cityName) {
    setupWeatherRequest(cityName);
  }
});

// Get user's coordinates and fetch weather data for the current location
locationButton.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      const API_URL = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${latitude},${longitude}&days=2`;
      getWeatherDetails(API_URL);
      window.innerWidth >= 768 && searchInput.focus();
    },
    () => {
      alert("Location access denied. Please enable permissions to use this feature.");
    }
  );
});

// Initial weather request for London as the default city
setupWeatherRequest("London");

Important: Your weather app won’t function until you connect it with a weather API. Sign up for a free API key from WeatherAPI and add it to the API_KEY variable in your script.js file. This key enables your app to retrieve real-time and hourly forecasts. The key will be something like this: 5f2b6b5a24044bcdbbc103609241008.

Once the API key is added to the code, the weather app is ready to use. Open the index.html file in your browser and enter a city name or use your location to check the weather.

Conclusion and final words

In conclusion, building a weather app with HTML, CSS, and JavaScript is a great way for beginners to enhance their core web development skills and gain valuable experience with APIs. By following this guide, you’ve created a functional and visually appealing weather app that’s a perfect addition to your portfolio.

To further improve your skills, you can check out other related JavaScript projects such as the Currency Converter, Image Search Engine, Gemini Chatbot, and many more. Each of these projects is created to enhance your understanding of HTML and CSS, while also giving you hands-on experience with better styling techniques and API integrations.

If you encounter any problems while building your weather app, you can download the source code files for this project by clicking the “Download” button.

Download Code Files

Build A Google Gemini Chatbot with HTML CSS and JavaScript

CodingNepal — Wed, 31 Jul 2024 16:16:50 +0000

This article was originally published at https://www.codingnepalweb.com.

AI chatbots like Google Gemini or ChatGPT have changed how we interact with technology, making conversations with machines almost human. As a beginner web developer, have you ever thought about building your own AI chatbot? The good news is that it is possible to build a Google Gemini-like chatbot using HTML, CSS, and JavaScript.

For those who aren’t familiar, Gemini is an advanced chatbot model developed by Google, similar to ChatGPT. It uses artificial intelligence to produce human-like responses and has become popular for its natural conversational abilities.

In this blog post, I’ll guide you through building a Google Gemini Chatbot in HTML, CSS, and JavaScript. With this chatbot, users will be able to chat, copy responses, and toggle between light and dark themes. Additionally, the themes and chat history will be saved in the browser’s local storage, ensuring they persist even after a page refresh.

Video Tutorial to Build Gemini Chatbot in HTML CSS & JavaScript

The YouTube video above is a great resource if you prefer video tutorials. It explains each line of code and provides comments, making it easy to follow along with your Gemini chatbot clone project. If you prefer reading or need a step-by-step guide, keep following this post.

Steps to Build Gemini Chatbot in HTML & JavaScript

To build an interactive and functional Gemini chatbot using HTML, CSS, and JavaScript, follow these simple step-by-step instructions:

Create a folder with any name you like, e.g., gemini-chatbot.
Inside it, create the necessary files: index.html, style.css, and script.js.
Download the Images folder and put it in your project directory. This folder contains logos you’ll need for this chatbot project.

In your index.html file, add the essential HTML markup to structure your Gemini chat layout. It features a greetings header, suggestion list, chat section, and typing form, all structured with semantic tags.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gemini Chatbot | CodingNepal</title>
  <!-- Linking Google Fonts For Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <!-- Header Greetings -->
    <h1 class="title">Hello, there</h1>
    <p class="subtitle">How can I help you today?</p>

    <!-- Suggestion list -->
    <ul class="suggestion-list">
      <li class="suggestion">
        <h4 class="text">Help me plan a game night with my 5 best friends for under $100.</h4>
        <span class="icon material-symbols-rounded">draw</span>
      </li>
      <li class="suggestion">
        <h4 class="text">What are the best tips to improve my public speaking skills?</h4>
        <span class="icon material-symbols-rounded">lightbulb</span>
      </li>
      <li class="suggestion">
        <h4 class="text">Can you help me find the latest news on web development?</h4>
        <span class="icon material-symbols-rounded">explore</span>
      </li>
      <li class="suggestion">
        <h4 class="text">Write JavaScript code to sum all elements in an array.</h4>
        <span class="icon material-symbols-rounded">code</span>
      </li>
    </ul>
  </header>

  <!-- Chat List / Container -->
  <div class="chat-list"></div>

  <!-- Typing Area -->
  <div class="typing-area">
    <form action="#" class="typing-form">
      <div class="input-wrapper">
        <input type="text" placeholder="Enter a prompt here" class="typing-input" required />
        <button id="send-message-button" class="icon material-symbols-rounded">send</button>
      </div>
      <div class="action-buttons">
        <span id="theme-toggle-button" class="icon material-symbols-rounded">light_mode</span>
        <span id="delete-chat-button" class="icon material-symbols-rounded">delete</span>
      </div>
    </form>
    <p class="disclaimer-text">
      Gemini may display inaccurate info, including about people, so double-check its responses.
    </p>
  </div>

  <script src="script.js"></script>
</body>
</html>

In your style.css file, add CSS code to style your chatbot, and give it a responsive and Gemini-like design. Experiment with different CSS properties such as colors, fonts, and backgrounds to make your clone more attractive.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  /* Dark mode colors */
  --text-color: #E3E3E3;
  --subheading-color: #828282;
  --placeholder-color: #A6A6A6;
  --primary-color: #242424;
  --secondary-color: #383838;
  --secondary-hover-color: #444;
}

.light_mode {
  /* Light mode colors */
  --text-color: #222;
  --subheading-color: #A0A0A0;
  --placeholder-color: #6C6C6C;
  --primary-color: #FFF;
  --secondary-color: #E9EEF6;
  --secondary-hover-color: #DBE1EA;
}

body {
  background: var(--primary-color);
}

.header, .chat-list .message, .typing-form {
  margin: 0 auto;
  max-width: 980px;
}

.header {
  margin-top: 6vh;
  padding: 1rem;
  overflow-x: hidden;
}

body.hide-header .header {
  margin: 0;
  display: none;
}

.header :where(.title, .subtitle) {
  color: var(--text-color);
  font-weight: 500;
  line-height: 4rem;
}

.header .title {
  width: fit-content;
  font-size: 3rem;
  background-clip: text;
  background: linear-gradient(to right, #4285f4, #d96570);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header .subtitle {
  font-size: 2.6rem;
  color: var(--subheading-color);
}

.suggestion-list {
  width: 100%;
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin-top: 9.5vh;
  overflow: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.suggestion-list .suggestion {
  cursor: pointer;
  padding: 1.25rem;
  width: 222px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-radius: 0.75rem;
  justify-content: space-between;
  background: var(--secondary-color);
  transition: 0.2s ease;
}

.suggestion-list .suggestion:hover {
  background: var(--secondary-hover-color);
}

.suggestion-list .suggestion :where(.text, .icon) {
  font-weight: 400;
  color: var(--text-color);
}

.suggestion-list .suggestion .icon {
  width: 42px;
  height: 42px;
  display: flex;
  font-size: 1.3rem;
  margin-top: 2.5rem;
  align-self: flex-end;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  color: var(--text-color);
  background: var(--primary-color);
}

.chat-list {
  padding: 2rem 1rem 12rem;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-color: #999 transparent;
}

.chat-list .message.incoming {
  margin-top: 1.5rem;
}

.chat-list .message .message-content {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  align-items: center;
}

.chat-list .message .text {
  color: var(--text-color);
  white-space: pre-wrap;
}

.chat-list .message.error .text {
  color: #e55865;
}

.chat-list .message.loading .text {
  display: none;
}

.chat-list .message .avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  align-self: flex-start;
}

.chat-list .message.loading .avatar {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.chat-list .message .icon {
  color: var(--text-color);
  cursor: pointer;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  font-size: 1.25rem;
  margin-left: 3.5rem;
  visibility: hidden;
}

.chat-list .message .icon.hide {
  visibility: hidden;
}

.chat-list .message:not(.loading, .error):hover .icon:not(.hide){
  visibility: visible;
}

.chat-list .message .icon:hover {
  background: var(--secondary-hover-color);
}

.chat-list .message .loading-indicator {
  display: none;
  gap: 0.8rem;
  width: 100%;
  flex-direction: column;
}

.chat-list .message.loading .loading-indicator {
  display: flex;
}

.chat-list .message .loading-indicator .loading-bar {
  height: 11px;
  width: 100%;
  border-radius: 0.135rem;
  background-position: -800px 0;
  background: linear-gradient(to right, #4285f4, var(--primary-color), #4285f4);
  animation: loading 3s linear infinite;
}

.chat-list .message .loading-indicator .loading-bar:last-child {
  width: 70%;
}

@keyframes loading {
  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }
}

.typing-area {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 1rem;
  background: var(--primary-color);
}

.typing-area :where(.typing-form, .action-buttons) {
  display: flex;
  gap: 0.75rem;
}

.typing-form .input-wrapper {
  width: 100%;
  height: 56px;
  display: flex;
  position: relative;
}

.typing-form .typing-input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 1rem;
  color: var(--text-color);
  padding: 1.1rem 4rem 1.1rem 1.5rem;
  border-radius: 100px;
  background: var(--secondary-color);
}

.typing-form .typing-input:focus {
  background: var(--secondary-hover-color);
}

.typing-form .typing-input::placeholder {
  color: var(--placeholder-color);
}

.typing-area .icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  font-size: 1.4rem;
  color: var(--text-color);
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
  transition: 0.2s ease;
}

.typing-area .icon:hover {
  background: var(--secondary-hover-color);
}

.typing-form #send-message-button {
  position: absolute;
  right: 0;
  outline: none;
  border: none;
  transform: scale(0);
  background: transparent;
  transition: transform 0.2s ease;
}

.typing-form .typing-input:valid ~ #send-message-button {
  transform: scale(1);
}

.typing-area .disclaimer-text {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 1rem;
  color: var(--placeholder-color);
}

/* Responsive media query code for small screen */
@media (max-width: 768px) {
  .header :is(.title, .subtitle) {
    font-size: 2rem;
    line-height: 2.6rem;
  }

  .header .subtitle {
    font-size: 1.7rem;
  }

  .typing-area :where(.typing-form, .action-buttons) {
    gap: 0.4rem;
  }

  .typing-form .input-wrapper {
    height: 50px;
  }

  .typing-form .typing-input {
    padding: 1.1rem 3.5rem 1.1rem 1.2rem;
  }

  .typing-area .icon {
    height: 50px;
    width: 50px;
  }

  .typing-area .disclaimer-text {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}

In your script.js file, add JavaScript code to make your chatbot interactive and functional. This includes enabling features such as sending and receiving messages, toggling between light and dark themes, and managing chat history.

const typingForm = document.querySelector(".typing-form");
const chatContainer = document.querySelector(".chat-list");
const suggestions = document.querySelectorAll(".suggestion");
const toggleThemeButton = document.querySelector("#theme-toggle-button");
const deleteChatButton = document.querySelector("#delete-chat-button");

// State variables
let userMessage = null;
let isResponseGenerating = false;

// API configuration
const API_KEY = "PASTE-YOUR-API-KEY"; // Your API key here
const API_URL = `https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}`;

// Load theme and chat data from local storage on page load
const loadDataFromLocalstorage = () => {
  const savedChats = localStorage.getItem("saved-chats");
  const isLightMode = (localStorage.getItem("themeColor") === "light_mode");

  // Apply the stored theme
  document.body.classList.toggle("light_mode", isLightMode);
  toggleThemeButton.innerText = isLightMode ? "dark_mode" : "light_mode";

  // Restore saved chats or clear the chat container
  chatContainer.innerHTML = savedChats || '';
  document.body.classList.toggle("hide-header", savedChats);

  chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
}

// Create a new message element and return it
const createMessageElement = (content, ...classes) => {
  const div = document.createElement("div");
  div.classList.add("message", ...classes);
  div.innerHTML = content;
  return div;
}

// Show typing effect by displaying words one by one
const showTypingEffect = (text, textElement, incomingMessageDiv) => {
  const words = text.split(' ');
  let currentWordIndex = 0;

  const typingInterval = setInterval(() => {
    // Append each word to the text element with a space
    textElement.innerText += (currentWordIndex === 0 ? '' : ' ') + words[currentWordIndex++];
    incomingMessageDiv.querySelector(".icon").classList.add("hide");

    // If all words are displayed
    if (currentWordIndex === words.length) {
      clearInterval(typingInterval);
      isResponseGenerating = false;
      incomingMessageDiv.querySelector(".icon").classList.remove("hide");
      localStorage.setItem("saved-chats", chatContainer.innerHTML); // Save chats to local storage
    }
    chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
  }, 75);
}

// Fetch response from the API based on user message
const generateAPIResponse = async (incomingMessageDiv) => {
  const textElement = incomingMessageDiv.querySelector(".text"); // Getting text element

  try {
    // Send a POST request to the API with the user's message
    const response = await fetch(API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ 
        contents: [{ 
          role: "user", 
          parts: [{ text: userMessage }] 
        }] 
      }),
    });

    const data = await response.json();
    if (!response.ok) throw new Error(data.error.message);

    // Get the API response text and remove asterisks from it
    const apiResponse = data?.candidates[0].content.parts[0].text.replace(/\*\*(.*?)\*\*/g, '$1');
    showTypingEffect(apiResponse, textElement, incomingMessageDiv); // Show typing effect
  } catch (error) { // Handle error
    isResponseGenerating = false;
    textElement.innerText = error.message;
    textElement.parentElement.closest(".message").classList.add("error");
  } finally {
    incomingMessageDiv.classList.remove("loading");
  }
}

// Show a loading animation while waiting for the API response
const showLoadingAnimation = () => {
  const html = `<div class="message-content">
                  <img class="avatar" src="images/gemini.svg" alt="Gemini avatar">
                  <p class="text"></p>
                  <div class="loading-indicator">
                    <div class="loading-bar"></div>
                    <div class="loading-bar"></div>
                    <div class="loading-bar"></div>
                  </div>
                </div>
                <span onClick="copyMessage(this)" class="icon material-symbols-rounded">content_copy</span>`;

  const incomingMessageDiv = createMessageElement(html, "incoming", "loading");
  chatContainer.appendChild(incomingMessageDiv);

  chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
  generateAPIResponse(incomingMessageDiv);
}

// Copy message text to the clipboard
const copyMessage = (copyButton) => {
  const messageText = copyButton.parentElement.querySelector(".text").innerText;

  navigator.clipboard.writeText(messageText);
  copyButton.innerText = "done"; // Show confirmation icon
  setTimeout(() => copyButton.innerText = "content_copy", 1000); // Revert icon after 1 second
}

// Handle sending outgoing chat messages
const handleOutgoingChat = () => {
  userMessage = typingForm.querySelector(".typing-input").value.trim() || userMessage;
  if(!userMessage || isResponseGenerating) return; // Exit if there is no message or response is generating

  isResponseGenerating = true;

  const html = `<div class="message-content">
                  <img class="avatar" src="images/user.jpg" alt="User avatar">
                  <p class="text"></p>
                </div>`;

  const outgoingMessageDiv = createMessageElement(html, "outgoing");
  outgoingMessageDiv.querySelector(".text").innerText = userMessage;
  chatContainer.appendChild(outgoingMessageDiv);

  typingForm.reset(); // Clear input field
  document.body.classList.add("hide-header");
  chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to the bottom
  setTimeout(showLoadingAnimation, 500); // Show loading animation after a delay
}

// Toggle between light and dark themes
toggleThemeButton.addEventListener("click", () => {
  const isLightMode = document.body.classList.toggle("light_mode");
  localStorage.setItem("themeColor", isLightMode ? "light_mode" : "dark_mode");
  toggleThemeButton.innerText = isLightMode ? "dark_mode" : "light_mode";
});

// Delete all chats from local storage when button is clicked
deleteChatButton.addEventListener("click", () => {
  if (confirm("Are you sure you want to delete all the chats?")) {
    localStorage.removeItem("saved-chats");
    loadDataFromLocalstorage();
  }
});

// Set userMessage and handle outgoing chat when a suggestion is clicked
suggestions.forEach(suggestion => {
  suggestion.addEventListener("click", () => {
    userMessage = suggestion.querySelector(".text").innerText;
    handleOutgoingChat();
  });
});

// Prevent default form submission and handle outgoing chat
typingForm.addEventListener("submit", (e) => {
  e.preventDefault(); 
  handleOutgoingChat();
});

loadDataFromLocalstorage();

Important: Your chatbot is not ready to generate responses until you configure it with a Gemini API key. To do this, add your API key to the API_KEY variable in the script.js file. You can get your free API key from Google AI Studio. It will look something like this: AIzaSyAtpnKGX14bTgmx0l_gQeatYvdWvY_wOTQ.

Once you have added your API key to the code, you’ll be ready to start chatting with your Gemini chatbot. Simply open the index.html file in your browser to see it in action!

Conclusion and final words

You have successfully built your own Google Gemini chatbot using HTML, CSS, and JavaScript. Following these steps, you have developed a functional chatbot capable of interacting with users, changing themes, and saving chat history using local storage.

This project not only improves your web development skills but also gives you practical experience in integrating APIs and managing application states. With your chatbot operational, you can now explore adding extra features or improving its functionality to better meet your requirements.

If you encounter any problems while building your Gemini chatbot, you can download the source code files for this project by clicking the “Download” button.

Download Code Files

Create A Responsive Login Form in ReactJS and CSS

CodingNepal — Thu, 25 Jul 2024 06:25:48 +0000

This article was originally published at https://www.codingnepalweb.com.

Are you new to ReactJS and excited to create something simple and practical? Creating a login form is a great way to dive into ReactJS and CSS. This project will help you understand essential concepts like components, state management, and style while giving you a functional and stylish login interface.

In this blog post, I’ll guide you through creating a Responsive Login Form using ReactJS and CSS. This form includes important features such as email and password fields, a password toggle for better usability, and social login options for Google and Apple.

With this guide, you’ll learn how to manage form states, implement user-friendly features, and style your components to create a clean and responsive login form. Ready to get started? Let’s create it!

Video Tutorial to Create Login Form in ReactJS

If you prefer video tutorials, the YouTube video above is a great resource. It explains each line of code and provides comments to make the process of creating your ReactJS login form easy to follow. If you prefer reading or need a step-by-step guide, keep following this post.

Setting Up the Project

Before we start making the responsive login form with ReactJS and CSS, make sure you have Node.js installed on your computer. If you don’t have it, you can download and install it from the official Node.js website.

Create a Project Folder:

Make a new folder, for instance, “login-form”.
Open this folder in your VS Code editor.

Initialize the Project:

Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:

npm create vite@latest ./ -- --template react

Install necessary dependencies and start the development server:

npm install
npm run dev

If your project is up and running in your browser, congratulations! You’ve successfully set up your project. Now, let’s move on to the next step modifying folders and files.

Modify folder and CSS Files:

Remove the default assets folder and App.css file.
Download the logos and place them directly into your public folder. Ensure you only include the SVG logo files and not the logos folder itself.
Replace the content of index.css with the provided code.

/* Importing Google Fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5F41E4;
}

#root {
  width: 100%;
  padding: 0.6rem;
}

.login-container {
  margin: 0 auto;
  max-width: 410px;
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.login-container .form-title {
  text-align: center;
  font-size: 1.37rem;
  font-weight: 600;
  margin-bottom: 1.87rem;
}

.login-container .social-login {
  display: flex;
  gap: 1.31rem;
}

.social-login .social-button {
  display: flex;
  gap: 0.81rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.75rem 0;
  border-radius: 0.31rem;
  align-items: center;
  justify-content: center;
  background: #F9F8FF;
  border: 1px solid #D5CBFF;
  transition: 0.3s ease;
}

.social-login .social-button:hover {
  border-color: #5F41E4;
  background: #f1eff9;
}

.social-login .social-button .social-icon {
  width: 23px;
}

.login-container .separator {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
  background: #fff;
}

.login-container .separator span {
  z-index: 1;
  font-weight: 500;
  color: #6652BE;
  position: relative;
  background: #fff;
  font-size: 1.06rem;
  padding: 0 0.9rem;
}

.login-container .separator::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
  background: #bfb3f2;
}

.login-form .input-wrapper {
  height: 54px;
  width: 100%;
  position: relative;
  margin-bottom: 1.5rem;
}

.login-form .input-field {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 1.06rem;
  border-radius: 0.31rem;
  border: 1px solid #bfb3f2;
  padding: 0px 1.25rem 0 3.12rem;
  transition: 0.2s ease;
}

.login-form .input-field:focus {
  border-color: #5F41E4;
}

.login-form .input-field::placeholder {
  color: #9284c8;
}

.login-form .input-wrapper i {
  position: absolute;
  top: 50%;
  height: 100%;
  display: flex;
  color: #a395e0;
  align-items: center;
  transform: translateY(-50%);
  transition: 0.2s ease;
}

.login-form .input-wrapper i:not(.eye-icon) {
  left: 0.93rem;
  pointer-events: none;
}

.login-form .input-field:focus ~ i:not(.eye-icon) {
  color: #5F41E4;
}

.login-form .input-wrapper i.eye-icon {
  display: none;
  right: 0.93rem;
  color: #917DE8;
  cursor: pointer;
  font-size: 1.25rem;
}

.login-form .input-wrapper .input-field:valid ~ .eye-icon {
  display: flex;
}

.login-form .forgot-password-link {
  display: block;
  width:fit-content;
  margin-top: -0.44rem;
}

.login-form .login-button {
  border: none;
  outline: none;
  width: 100%;
  height: 54px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 2.19rem;
  border-radius: 0.31rem;
  background: #5F41E4;
  transition: 0.3s ease;
}

.login-form .login-button:hover {
  background: #4320df;
}

.login-container .signup-prompt {
  text-align: center;
  font-size: 1.06rem;
  font-weight: 500;
  margin: 1.75rem 0 0.31rem;
}

.login-container a {
  color: #5F41E4;
  font-weight: 500;
  text-decoration: none;
}

.login-container a:hover {
  text-decoration: underline;
}

Creating the Components

Within the src directory of your project, organize your files by creating a “components” folder. Inside the components folder, create the following files:

SocialLogin.jsx
InputField.jsx

Adding the Codes

Add the respective code to each newly created file. These files define the layout and functionality of the Login Form.

In components/SocialLogin.jsx, add the code to render social login buttons for Google and Apple.

const SocialLogin = () => {
  return (
    <div className="social-login">
      <button className="social-button">
        <img src="google.svg" alt="Google" className="social-icon" />
        Google
      </button>
      <button className="social-button">
        <img src="apple.svg" alt="Apple" className="social-icon" />
        Apple
      </button>
    </div>
  )
}

export default SocialLogin;

In components/InputField.jsx, add the code for email and password fields, and the functionality to toggle password visibility.

import { useState } from "react";

const InputField = ({ type, placeholder, icon }) => {
  // State to toggle password visibility
  const [isPasswordShown, setIsPasswordShown] = useState(false);

  return (
    <div className="input-wrapper">
      <input
        type={isPasswordShown ? 'text' : type}
        placeholder={placeholder}
        className="input-field"
        required
      />
      <i className="material-symbols-rounded">{icon}</i>
      {type === 'password' && (
        <i onClick={() => setIsPasswordShown(prevState => !prevState)} className="material-symbols-rounded eye-icon">
          {isPasswordShown ? 'visibility' : 'visibility_off'}
        </i>
      )}
    </div>
  )
}

export default InputField;

Finally, update the content of src/App.jsx with the provided code. It imports and uses these components to complete your login form.

import SocialLogin from "./components/SocialLogin";
import InputField from "./components/InputField";

const App = () => {
  return (
    <div className="login-container">
      <h2 className="form-title">Log in with</h2>
      <SocialLogin />

      <p className="separator"><span>or</span></p>

      <form action="#" className="login-form">
        <InputField type="email" placeholder="Email address" icon="mail" />
        <InputField type="password" placeholder="Password" icon="lock" />

        <a href="#" className="forgot-password-link">Forgot password?</a>
        <button type="submit" className="login-button">Log In</button>
      </form>

      <p className="signup-prompt">
        Don&apos;t have an account? <a href="#" className="signup-link">Sign up</a>
      </p>
    </div>
  )
}

export default App;

That’s it! If you’ve completed all the steps, you should now see your Login Form project in your browser. You can test it by entering an email and password, toggling password visibility, and trying out the social login options.

Conclusion and final words

Congratulations! You’ve successfully created a functional and stylish login form using ReactJS and CSS. With this project, you’ve practiced managing form states, adding user-friendly features, and applying CSS to create a beautiful look.

This is just the beginning! Consider expanding your form with additional features or integrating it with a backend for real-world use. For more inspiration, there are many other login form templates available on this website.

If you encounter any problems while creating your ReactJS login form, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.

View Live Demo

Download Code Files

If you’ve found my content helpful, please consider buying me a coffee to support me in creating more content.

How to Build A YouTube Clone in HTML CSS and JavaScript

CodingNepal — Fri, 12 Jul 2024 13:51:14 +0000

This article was originally published at https://www.codingnepalweb.com.

Building a YouTube clone is a fun and educational project that can greatly boost your front-end development skills. This project lets you work with a familiar design, giving you hands-on experience with essential web technologies like HTML, CSS, and JavaScript. By creating this clone, you’ll gain insights into how modern websites are structured and styled.

In this blog post, I’ll guide you through creating a responsive YouTube clone using HTML, CSS, and JavaScript. We’ll replicate key features of YouTube’s homepage design, including a navbar with search, a grid layout for videos, a collapsible sidebar, and options for dark or light themes.

As you work on this project, you’ll learn how to structure and style websites effectively to ensure they look great on all devices.

Why Build a YouTube Clone in HTML CSS & JavaScript?

By building this YouTube clone project using HTML, CSS, and JavaScript, you can gain the following skills:

Master HTML and CSS: Get hands-on experience structuring and styling professional-looking webpages.
Responsive Design: Learn how to use media queries and flexible layouts to make your site look great on any device.
JavaScript Basics: Add interactive elements with JavaScript, such as a collapsible sidebar and theme toggling.
Portfolio Piece: A recognizable project like a YouTube clone can impress potential employers and showcase your skills.

Video Tutorial to Build YouTube Clone in HTML CSS & JavaScript

The YouTube video above is a great resource if you prefer video tutorials. It explains each line of code and provides comments to make building your YouTube clone project easy to follow. If you prefer reading or need a step-by-step guide, keep following this post.

Steps to Build YouTube Clone in HTML & JavaScript

To build a responsive YouTube clone using HTML, CSS, and JavaScript, follow these simple step-by-step instructions:

Create a folder with any name you like, e.g., youtube-clone.
Inside it, create the necessary files: index.html, style.css, and script.js.
Download the Images folder and put it in your project directory. This folder contains all the images you’ll need for this YouTube clone. Alternatively, you can also use your images.

In your index.html file, add the essential HTML markup with different semantic tags and content to structure your YouTube homepage layout.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YouTube Homepage Clone | CodingNepal</title>
  <!-- Linking Unicons For Icons -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
  <link rel="stylesheet" href="style.css">
</head>
<body class="sidebar-hidden">
  <div class="container">
    <!-- Header / Navbar -->
    <header>
      <nav class="navbar">
        <div class="nav-section nav-left">
          <button class="nav-button menu-button">
            <i class="uil uil-bars"></i>
          </button>
          <a href="#" class="nav-logo">
            <img src="images/logo.png" alt="Logo" class="logo-image">
            <h2 class="logo-text">CnTube</h2>
          </a>
        </div>

        <div class="nav-section nav-center">
          <form action="#" class="search-form">
            <input type="search" placeholder="Search" class="search-input" required>
            <button class="nav-button search-button">
              <i class="uil uil-search"></i>
            </button>
          </form>
          <button class="nav-button mic-button">
            <i class="uil uil-microphone"></i>
          </button>
        </div>

        <div class="nav-section nav-right">
          <button class="nav-button search-button">
            <i class="uil uil-search"></i>
          </button>
          <button class="nav-button theme-button">
            <i class="uil uil-moon"></i>
          </button>
          <img src="images/user.jpg" alt="User Image" class="user-image">
        </div>
      </nav>
    </header>

    <!-- Main Layout -->
    <main class="main-layout">
      <div class="screen-overlay"></div>

      <!-- Sidebar -->
      <aside class="sidebar">
        <div class="nav-section nav-left">
          <button class="nav-button menu-button">
            <i class="uil uil-bars"></i>
          </button>
          <a href="#" class="nav-logo">
            <img src="images/logo.png" alt="Logo" class="logo-image">
            <h2 class="logo-text">CnTube</h2>
          </a>
        </div>

        <div class="links-container">
          <div class="link-section">
            <a href="#" class="link-item">
              <i class="uil uil-estate"></i> Home
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-video"></i> Shorts
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-tv-retro"></i> Subscriptions
            </a>
          </div>
          <div class="section-separator"></div>

          <div class="link-section">
            <h4 class="section-title">You</h4>
            <a href="#" class="link-item">
              <i class="uil uil-user-square"></i> Your channel
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-history"></i> History
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-clock"></i> Watch later
            </a>
          </div>
          <div class="section-separator"></div>

          <div class="link-section">
            <h4 class="section-title">Explore</h4>
            <a href="#" class="link-item">
              <i class="uil uil-fire"></i> Trending
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-music"></i> Music
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-basketball"></i> Gaming
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-trophy"></i> Sports
            </a>
          </div>
          <div class="section-separator"></div>

          <div class="link-section">
            <h4 class="section-title">More from YouTube</h4>
            <a href="#" class="link-item">
              <i class="uil uil-shield-plus"></i> YouTube Plus
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-headphones-alt"></i> YouTube Music
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-airplay"></i> YouTube Kids
            </a>
          </div>
          <div class="section-separator"></div>

          <div class="link-section">
            <a href="#" class="link-item">
              <i class="uil uil-setting"></i> Settings
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-file-medical-alt"></i> Report
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-question-circle"></i> Help
            </a>
            <a href="#" class="link-item">
              <i class="uil uil-exclamation-triangle"></i> Feedback
            </a>
          </div>
        </div>
      </aside>

      <div class="content-wrapper">
        <!-- Category List -->
        <div class="category-list">
          <button class="category-button active">All</button>
          <button class="category-button">Website</button>
          <button class="category-button">Music</button>
          <button class="category-button">Gaming</button>
          <button class="category-button">Node.js</button>
          <button class="category-button">JavaScript</button>
          <button class="category-button">React.js</button>
          <button class="category-button">TypeScript</button>
          <button class="category-button">Coding</button>
          <button class="category-button">Next.js</button>
          <button class="category-button">Data analysis</button>
          <button class="category-button">Web design</button>
          <button class="category-button">HTML</button>
          <button class="category-button">Tailwind</button>
          <button class="category-button">CSS</button>
          <button class="category-button">Express.js</button>
        </div>

        <!-- Video List -->
        <div class="video-list">
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/OORUHkgg4IM/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">10:03</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Top 10 Easy To Create JavaScript Games For Beginners</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">27K Views • 4 months ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/qOO6lVMhmGc/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">23:45</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/uITV5E7auiZMDD_BwhVRJMHXXY6qQc0GqBgVyP5LWYTmeRlUP2Dc945UlIbODvztd96ReOts=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">How to make Responsive Card Slider in HTML CSS & JavaScript</h2>
                <p class="channel-name">CodingLab</p>
                <p class="views">42K Views • 1 year ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/YEloDYy3DTg/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">29:43</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Create A Responsive Website with Login & Registration Form in HTML CSS and JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">68K Views • 9 months ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/hSSdc8vKP1I/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">38:45</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Build Hangman Game in HTML CSS and JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">57K Views • 11 months ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/coj-l7IrwGU/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">19:27</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">How to Make Chrome Extension in HTML CSS & JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">24K Views • 1 year ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/6QE8dXq9SOE/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">16:24</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Create A Draggable Card Slider in HTML CSS and Vanilla JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">14.2K Views • 4 days ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/q4RgxiDM6v0/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">37:13</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/uITV5E7auiZMDD_BwhVRJMHXXY6qQc0GqBgVyP5LWYTmeRlUP2Dc945UlIbODvztd96ReOts=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">How to make Responsive Image Slider in HTML CSS and JavaScript</h2>
                <p class="channel-name">CodingLab</p>
                <p class="views">1M Views • 1 year ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/DLs1X9T1GcY/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">9:27</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Create Text Typing Effect in HTML CSS & Vanilla JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">17K Views • 10 months ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/PsNaoDhzQm0/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">25:27</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Create Responsive Image Slider in HTML CSS and JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">157K Views • 9 months ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/20Qb7pNMv-4/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">12:24</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/uITV5E7auiZMDD_BwhVRJMHXXY6qQc0GqBgVyP5LWYTmeRlUP2Dc945UlIbODvztd96ReOts=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Make A Flipping Card UI Design in HTML & CSS</h2>
                <p class="channel-name">CodingLab</p>
                <p class="views">85K Views • 2 months ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/_RSaI2CxlXU/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">30:20</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Easy way to do Multiple File Uploading using HTML CSS and JavaScript</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">7.4K Views • 3 weeks ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/cHkN82X3KNU/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">11:13</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/uITV5E7auiZMDD_BwhVRJMHXXY6qQc0GqBgVyP5LWYTmeRlUP2Dc945UlIbODvztd96ReOts=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Build A Responsive Calculator in HTML CSS & JavaScript</h2>
                <p class="channel-name">CodingLab</p>
                <p class="views">30K Views • 2 years ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/0_Lwi5ucGwM/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">39:43</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Build A Currency Converter using ReactJS</h2>
                <p class="channel-name">CodingNepal</p>
                <p class="views">7.2K • 2 weeks ago</p>
              </div>
            </div>
          </a>
          <a href="#" class="video-card">
            <div class="thumbnail-container">
              <img src="https://i.ytimg.com/vi/AyV954yKRSw/maxresdefault.jpg" alt="Video Thumbnail" class="thumbnail">
              <p class="duration">1:37:13</p>
            </div>
            <div class="video-info">
              <img src="https://yt3.googleusercontent.com/uITV5E7auiZMDD_BwhVRJMHXXY6qQc0GqBgVyP5LWYTmeRlUP2Dc945UlIbODvztd96ReOts=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon">
              <div class="video-details">
                <h2 class="title">Responsive Admin Dashboard Panel in HTML CSS and JavaScript</h2>
                <p class="channel-name">CodingLab</p>
                <p class="views">161K Views • 1 year ago</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </main>
  </div>

  <!-- Linking custom script -->
  <script src="script.js"></script>
</body>
</html>

In your style.css file, add CSS code to style your YouTube homepage, and give it a responsive and YouTube-like design. Experiment with different CSS properties such as colors, fonts, and backgrounds to make your clone more attractive.

/* Importing Google Font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

/* Color variables for light theme */
:root {
  --white-color: #fff;
  --black-color: #000;
  --light-white-color: #f0f0f0;
  --light-gray-color: #e5e5e5;
  --border-color: #ccc;
  --primary-color: #3b82f6;
  --secondary-color: #404040;
  --overlay-dark-color: rgba(0, 0, 0, 0.6);
}

/* Color variables for dark theme */
.dark-mode {
  --white-color: #171717;
  --black-color: #d4d4d4;
  --light-white-color: #333;
  --light-gray-color: #404040;
  --border-color: #808080;
  --secondary-color: #d4d4d4;
}

body {
  background: var(--white-color);
}

.container {
  display: flex;
  overflow: hidden;
  max-height: 100vh;
  flex-direction: column;
}

header, .sidebar .nav-left, .category-list {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white-color);
}

.navbar {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 0.5rem 1rem;
  justify-content: space-between;
}

:where(.navbar, .sidebar) .nav-section {
  gap: 1rem;
}

:where(.navbar, .sidebar) :where(.nav-section, .nav-logo, .search-form) {
  display: flex;
  align-items: center;
}

:where(.navbar, .sidebar) :where(.logo-image, .user-image) {
  width: 32px;
  cursor: pointer;
  border-radius: 50%;
}

:where(.navbar, .sidebar) .nav-section .nav-button {
  border: none;
  height: 40px;
  width: 40px;
  cursor: pointer;
  background: none;
  border-radius: 50%;
}

:where(.navbar, .sidebar) .nav-section .nav-button:hover {
  background: var(--light-gray-color) !important;
}

:where(.navbar, .sidebar) .nav-button i {
  font-size: 1.5rem;
  display: flex;
  color: var(--black-color);
  align-items: center;
  justify-content: center;
}

:where(.navbar, .sidebar) .nav-logo {
  display: flex;
  gap: 0.5rem;
  text-decoration: none;
}

:where(.navbar, .sidebar) .nav-logo .logo-text {
  color: var(--black-color);
  font-size: 1.25rem;
}

.navbar .nav-center {
  gap: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.navbar .search-form {
  flex: 1;
  height: 40px;
  max-width: 550px;
}

.navbar .search-form .search-input {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  padding: 0 1rem;
  outline: none;
  color: var(--black-color);
  background: var(--white-color);
  border-radius: 3.1rem 0 0 3.1rem;
  border: 1px solid var(--border-color);
}

.navbar .search-form .search-input:focus {
  border-color: var(--primary-color);
}

.navbar .search-form .search-button {
  height: 40px;
  width: auto;
  padding: 0 1.25rem;
  border-radius: 0 3.1rem 3.1rem 0;
  border: 1px solid var(--border-color);
  border-left: 0;
}

.navbar .nav-center .mic-button {
  background: var(--light-white-color);
}

.navbar .nav-right .search-button {
  display: none;
}

.main-layout {
  display: flex;
  overflow-y: auto;
  scrollbar-color: #a6a6a6 transparent;
}

.main-layout .sidebar {
  width: 280px;
  overflow: hidden;
  padding: 0 0.7rem 0;
  background: var(--white-color);
}

.main-layout .sidebar .nav-left {
  display: none;
  padding: 0.5rem 0.3rem;
}

body.sidebar-hidden .main-layout .sidebar {
  width: 0;
  padding: 0;
}

.sidebar .links-container {
  padding: 1rem 0 2rem;
  overflow-y: auto;
  height: calc(100vh - 60px);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar .links-container:hover {
  scrollbar-color: #a6a6a6 transparent;
}

.sidebar .link-section .link-item {
  display: flex;
  color: var(--black-color);
  white-space: nowrap;
  align-items: center;
  font-size: 0.938rem;
  padding: 0.37rem 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.sidebar .link-section .link-item:hover {
  background: var(--light-gray-color);
}

.sidebar .link-section .link-item i {
  font-size: 1.4rem;
  margin-right: 0.625rem;
}

.sidebar .link-section .section-title {
  color: var(--black-color);
  font-weight: 600;
  font-size: 0.938rem;
  margin: 1rem 0 0.5rem 0.5rem;
}

.sidebar .section-separator {
  height: 1px;
  margin: 0.64rem 0;
  /* background: var(--light-gray-color); */
  background-color: var(--border-color);
}

.main-layout .content-wrapper {
  padding: 0 1rem;
  overflow-x: hidden;
  width: 100%;
}

.content-wrapper .category-list {
  display: flex;
  overflow-x: auto;
  gap: 0.75rem;
  padding: 0.75rem 0 0.7rem;
  scrollbar-width: none;
}

.category-list .category-button {
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.94rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  color: var(--black-color);
  padding: 0.4rem 0.75rem;
  background: var(--light-gray-color);
}

.category-list .category-button.active {
  color: var(--white-color);
  background: var(--black-color);
  pointer-events: none;
}

.dark-mode .category-list .category-button.active {
  filter: brightness(120%);
}

.category-list .category-button:not(.active):hover {
  background: var(--border-color);
}

.content-wrapper .video-list {
  display: grid; 
  gap: 1rem;
  padding: 1.25rem 0 4rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.video-list .video-card {
  text-decoration: none;
}

.video-list .video-card .thumbnail-container {
  position: relative;
}

.video-list .video-card .thumbnail {
  width: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  aspect-ratio: 16 / 9;
  background: var(--light-white-color);
}

.video-list .video-card .duration {
  position: absolute;
  right: 0.65rem;
  bottom: 0.8rem;
  color: #fff;
  font-size: 0.875rem;
  padding: 0 0.3rem;
  border-radius: 0.3rem;
  background: var(--overlay-dark-color);
}

.video-list .video-card .video-info {
  display: flex;
  gap: 0.7rem;
  padding: 0.7rem 0.5rem;
}

.video-list .video-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.video-list .video-card .title {
  font-size: 1rem;
  color: var(--black-color);
  font-weight: 600;
  line-height: 1.375;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video-list .video-card:hover .title {
  color: var(--primary-color);
}

.video-list .video-card p {
  font-size: 0.875rem;
  color: var(--secondary-color);
}

.video-list .video-card .channel-name {
  margin: 0.25rem 0 0.15rem;
}

/* Responsive media code for small devices */
@media (max-width: 768px) {
  .navbar .nav-center {
    display: none;
  }

  .navbar .nav-right .search-button {
    display: block;
  }

  .main-layout .screen-overlay {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15;
    width: 100%;
    height: 100vh;
    background: var(--overlay-dark-color);
    transition: 0.2s ease;
  }

  body.sidebar-hidden .main-layout .screen-overlay {
    opacity: 0;
    pointer-events: none;
  }

  .main-layout .sidebar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    height: 100vh;
    transition: 0.2s ease;
  }

  body.sidebar-hidden .main-layout .sidebar {
    left: -280px;
  }

  .main-layout .sidebar .nav-left {
    display: flex;
  }
}

In your script.js file, add JavaScript code to make your YouTube homepage interactive with features like a collapsible sidebar and theme toggling.

const menuButtons = document.querySelectorAll(".menu-button");
const screenOverlay = document.querySelector(".main-layout .screen-overlay");
const themeButton = document.querySelector(".navbar .theme-button i");

// Toggle sidebar visibility when menu buttons are clicked
menuButtons.forEach(button => {
  button.addEventListener("click", () => {
    document.body.classList.toggle("sidebar-hidden");
  });
});

// Toggle sidebar visibility when screen overlay is clicked
screenOverlay.addEventListener("click", () => {
  document.body.classList.toggle("sidebar-hidden");
});

// Initialize dark mode based on localStorage
if (localStorage.getItem("darkMode") === "enabled") {
  document.body.classList.add("dark-mode");
  themeButton.classList.replace("uil-moon", "uil-sun");
} else {
  themeButton.classList.replace("uil-sun", "uil-moon");
}

// Toggle dark mode when theme button is clicked
themeButton.addEventListener("click", () => {
  const isDarkMode = document.body.classList.toggle("dark-mode");
  localStorage.setItem("darkMode", isDarkMode ? "enabled" : "disabled");
  themeButton.classList.toggle("uil-sun", isDarkMode);
  themeButton.classList.toggle("uil-moon", !isDarkMode);
});

// Show sidebar on large screens by default
if (window.innerWidth >= 768) {
  document.body.classList.remove("sidebar-hidden");
}

That’s it! If you’ve added the code correctly, you’re ready to see your YouTube clone project. Open the index.html file in your preferred browser to view the project in action.

Conclusion and final words

Building a YouTube clone using HTML, CSS, and JavaScript is a rewarding project that enhances your skills in web development. By completing this project, you learned responsive design principles and created an impressive piece for your portfolio.

For those interested in a similar project using React.js and Tailwind CSS, you can explore my previous blog post on Create YouTube Clone in ReactJS and Tailwind. Whether you follow this approach or stick with HTML, CSS, and JavaScript, building a YouTube clone is a valuable addition to your portfolio and solidifying your understanding of modern web development practices.

If you encounter any problems while building your YouTube clone, you can download the source code files for this clone project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.

View Live Demo

Download Code Files

If you’ve found my content helpful, please consider buying me a coffee to support me in creating more content.

How to Create Responsive Card Slider in HTML CSS & JavaScript

CodingNepal — Fri, 05 Jul 2024 14:49:39 +0000

This article was originally published at https://www.codingnepalweb.com.

You may have seen card or image sliders on different websites, but have you ever thought about creating your own? Creating this kind of slider is straightforward, especially with SwiperJS — a leading library for modern, touch-friendly, responsive sliders.

In this blog post, I’ll guide you through creating a Responsive Card Slider using HTML, CSS, and JavaScript (SwiperJS) and how to make it attractive with the glassmorphism effect. By the end of this post, you’ll have a visually appealing and interactive slider for your website projects or portfolio.

If you prefer not to use SwiperJS and want to create a slider with vanilla JavaScript, check out this blog post on Responsive Image Slider in HTML CSS & JavaScript. Creating the slider with vanilla JavaScript can help you understand the underlying mechanisms of sliders and enhance your JavaScript skills.

Video Tutorial of Responsive Card Slider in HTML CSS & JavaScript

If you prefer video tutorials, the YouTube video above is a great resource. It explains each line of code and provides comments to make the process of creating your card slider project easy to follow. If you prefer reading or need a step-by-step guide, keep following this post.

Steps to Create Responsive Card Slider in HTML & JavaScript

To create a responsive card slider using HTML, CSS, and JavaScript (SwiperJS), follow these simple step-by-step instructions:

Create a folder with any name you like, e.g., card-slider.
Inside it, create the necessary files: index.html, style.css, and script.js.
Download the Images folder and put it in your project directory. This folder contains all the images you’ll need for this card slider. Alternatively, you can also use your images.

In your index.html file, add the essential HTML markup with different semantic tags and SwiperJS CDN links to create the card slider layout.



<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Slider HTML and CSS | CodingNepal</title>
  <!-- Linking SwiperJS CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container swiper">
    <div class="slider-wrapper">
      <div class="card-list swiper-wrapper">
        <div class="card-item swiper-slide">
          <img src="images/img-1.jpg" alt="User Image" class="user-image">
          <h2 class="user-name">James Wilson</h2>
          <p class="user-profession">Software Developer</p>
          <button class="message-button">Message</button>
        </div>

        <div class="card-item swiper-slide">
          <img src="images/img-2.jpg" alt="User Image" class="user-image">
          <h2 class="user-name">Sarah Johnson</h2>
          <p class="user-profession">Graphic Designer</p>
          <button class="message-button">Message</button>
        </div>

        <div class="card-item swiper-slide">
          <img src="images/img-3.jpg" alt="User Image" class="user-image">
          <h2 class="user-name">Michael Brown</h2>
          <p class="user-profession">Project Manager</p>
          <button class="message-button">Message</button>
        </div>

        <div class="card-item swiper-slide">
          <img src="images/img-4.jpg" alt="User Image" class="user-image">
          <h2 class="user-name">Emily Davis</h2>
          <p class="user-profession">Marketing Specialist</p>
          <button class="message-button">Message</button>
        </div>

        <div class="card-item swiper-slide">
          <img src="images/img-5.jpg" alt="User Image" class="user-image">
          <h2 class="user-name">Christopher Garcia</h2>
          <p class="user-profession">Data Scientist</p>
          <button class="message-button">Message</button>
        </div>

        <div class="card-item swiper-slide">
          <img src="images/img-6.jpg" alt="User Image" class="user-image">
          <h2 class="user-name">Richard Wilson</h2>
          <p class="user-profession">Product Designer</p>
          <button class="message-button">Message</button>
        </div>
      </div>

      <div class="swiper-pagination"></div>
      <div class="swiper-slide-button swiper-button-prev"></div>
      <div class="swiper-slide-button swiper-button-next"></div>
    </div>
  </div>

  <!-- Linking SwiperJS script -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!-- Linking custom script -->
  <script src="script.js"></script>
</body>
</html>

In your style.css file, style your card slider, and give it a sleek and modern glassmorphism effect. Experiment with different CSS properties such as colors, fonts, and backgrounds to make your slider more attractive.



/* Importing Google Font - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url("images/bg.jpg") #030728 no-repeat center;
}

.slider-wrapper {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 70px 55px;
}

.card-list .card-item {
  height: auto;
  color: #fff;
  user-select: none;
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-list .card-item .user-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 40px;
  border: 3px solid #fff;
  padding: 4px;
}

.card-list .card-item .user-profession {
  font-size: 1.15rem;
  color: #e3e3e3;
  font-weight: 500;
  margin: 14px 0 40px;
}

.card-list .card-item .message-button {
  font-size: 1.25rem;
  padding: 10px 35px;
  color: #030728;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
  transition: 0.2s ease;
}

.card-list .card-item .message-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  color: #fff;
}

.slider-wrapper .swiper-pagination-bullet {
  background: #fff;
  height: 13px;
  width: 13px;
  opacity: 0.5;
}

.slider-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.slider-wrapper .swiper-slide-button {
  color: #fff;
  margin-top: -55px;
  transition: 0.2s ease;
}

.slider-wrapper .swiper-slide-button:hover {
  color: #4658ff;
}

@media (max-width: 768px) {
  .slider-wrapper {
    margin: 0 10px 40px;
  }

  .slider-wrapper .swiper-slide-button {
    display: none;
  }
}

In your script.js file, add JavaScript code to initialize SwiperJS, and make your card slider functional.



const swiper = new Swiper('.slider-wrapper', {
  loop: true,
  grabCursor: true,
  spaceBetween: 30,

  // Pagination bullets
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    dynamicBullets: true
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    0: {
      slidesPerView: 1
    },
    768: {
      slidesPerView: 2
    },
    1024: {
      slidesPerView: 3
    }
  }
});

That’s it! If you’ve added the code correctly, you’re ready to see your card slider. Open the index.html file in your preferred browser to view the slider in action.

Conclusion and final words

By following these steps, you have created a responsive card slider using HTML, CSS, and JavaScript (SwiperJS). This slider project not only helps you understand the basics of web development but also demonstrates the power of using libraries to create interactive and useful web components easily.

Feel free to customize the slider and experiment with different settings to make it your own. For more customization details, you can check out the SwiperJS documentation.

For additional inspiration, check out my blog post on 10+ Best Image Sliders with Source Codes. Among these sliders, some utilize SwiperJS, some use Owl Carousel, and others are created with vanilla JavaScript, providing a wide range of examples to learn from.

View Live Demo

Download Code Files

If you’ve found my content helpful, please consider buying me a coffee to support me in creating more content.

Build A Currency Converter in ReactJS | Best Beginner ReactJS Project

CodingNepal — Wed, 26 Jun 2024 16:58:54 +0000

Are you new to ReactJS and looking for a project to enhance your skills? Building a currency converter using ReactJS and CSS is an excellent way to do just that. This project reinforces fundamental concepts like components, state management, and API integration, while also providing a practical and rewarding application.

In this blog post, I’ll guide you through building a Currency Converter using ReactJS and pure CSS. In this currency converter, users can input an amount, choose the currencies for conversion, and click a button to get the exchange rate.

Additionally, the converter will display flags representing the currency codes, and users will be able to switch the currencies by clicking a swap button.

Why Build a Currency Converter in ReactJS?

By building this currency converter project using React js and CSS, you can gain the following skills:

ReactJS Fundamentals: You’ll get hands-on experience with React components, state management, and hooks.
API Integration: Learn how to interact with web services, handle asynchronous operations, and manage data fetching in React.
CSS Skills: Learn how to create a responsive and visually appealing UI without relying on pre-built components.
Practical Application: This project provides a tangible result that you can showcase in your portfolio or use in real-life scenarios.

Video Tutorial to Build Currency Converter in ReactJS

If you prefer video tutorials, the YouTube video above is a great resource. It explains each line of code and provides comments to make the process of building your ReactJS currency converter easy to follow. If you prefer reading or need a step-by-step guide, keep following this post.

Setting Up the Project

Before we start making the currency converter with ReactJS and CSS, make sure you have Node.js installed on your computer. If you don’t have it, you can download and install it from the official Node.js website.

Create a Project Folder

Make a new folder, for instance, “currency-converter”.
Open this folder in your VS Code editor.

Initialize the Project

Use Vite to create a new React app with this command:

npm create vite@latest ./ -- --template react

Install Necessary Dependencies:

npm install

Start the Development Server:

npm run dev

If your project is up and running in your browser, congratulations! You’ve successfully set up your project. Now, let’s move on to the next step modifying folders and files.

Modify folder and CSS Files:

Remove the default assets folder and App.css file.
Download the bg.png image and place it inside the public folder.
Replace the content of index.css with the provided code.

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url("bg.png") #030728 no-repeat center;
}

#root {
  width: 100%;
}

.currency-converter {
  max-width: 410px;
  margin: 0 auto;
  padding: 40px 30px 50px;
  border-radius: 8px;
  backdrop-filter: blur(30px);
  background: rgba(2, 7, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.currency-converter .converter-title {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 600;
  text-align: center;
}

.currency-converter .converter-form {
  margin-top: 45px;
}

.converter-form .form-group {
  display: flex;
  margin-bottom: 30px;
  flex-direction: column;
}

.converter-form .form-group .form-label {
  color: #fff;
  font-weight: 500;
  display: block;
  margin-bottom: 9px;
  font-size: 1rem;
}

.converter-form .form-group .form-input {
  outline: none;
  font-size: 1.1rem;
  padding: 0 15px;
  color: #fff;
  font-weight: 500;
  min-height: 48px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.converter-form .form-currency-group {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.form-currency-group .currency-select {
  display: flex;
  padding: 0 10px;
  min-height: 45px;
  align-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.form-currency-group .currency-select img {
  width: 25px;
}

.form-currency-group .currency-select .currency-dropdown {
  outline: none;
  border: none;
  background: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  padding: 0 10px 0 5px;
}

.form-currency-group .currency-select .currency-dropdown option {
  color: #000;
  font-weight: 500;
}

.form-currency-group .swap-icon {
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: flex;
  margin-top: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: 0.2s ease;
}

.form-currency-group .swap-icon:hover {
  background: rgba(255, 255, 255, 0.3);
}

.converter-form .submit-button {
  width: 100%;
  min-height: 52px;
  border-radius: 6px;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
  transition: 0.2s ease;
}

.converter-form .submit-button.loading {
  opacity: 0.7;
  pointer-events: none;
}

.converter-form .submit-button:hover {
  background: rgba(255, 255, 255, 0.7);
}

.converter-form .exchange-rate-result {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  padding: 25px 0;
  margin-top: 25px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 640px) {
  body {
    padding: 0 10px;
  }

  .currency-converter {
    padding: 30px 20px 40px;
  }
}

Creating the Components

Within the src directory of your project, organize your files by creating a “components” folder. Inside the components folder, create the following files:

ConverterForm.jsx
CurrencySelect.jsx

Adding the Codes

Add the respective code to each newly created file. These files define the layout and functionality of the currency converter.

In components/ConverterForm.jsx, add the code for rendering the converter form, and fetch the exchange rate with an API call.

import { useEffect, useState } from "react";
import CurrencySelect from "./CurrencySelect";

const ConverterForm = () => {
    const [amount, setAmount] = useState(100);
    const [fromCurrency, setFromCurrency] = useState("USD");
    const [toCurrency, setToCurrency] = useState("INR");
    const [result, setResult] = useState("");
    const [isLoading, setIsLoading] = useState(false);

    // Swap the values of fromCurrency and toCurrency
    const handleSwapCurrencies = () => {
        setFromCurrency(toCurrency);
        setToCurrency(fromCurrency);
    }

    // Function to fetch the exchange rate and update the result
    const getExchangeRate = async () => {
        const API_KEY = "PASTE-YOUR-API-KEY";
        const API_URL = `https://v6.exchangerate-api.com/v6/${API_KEY}/pair/${fromCurrency}/${toCurrency}`;

        if (isLoading) return;
        setIsLoading(true);

        try {
            const response = await fetch(API_URL);
            if (!response.ok) throw Error("Something went wrong!");

            const data = await response.json();
            const rate = (data.conversion_rate * amount).toFixed(2);
            setResult(`${amount} ${fromCurrency} = ${rate} ${toCurrency}`);
        } catch (error) {
            setResult("Something went wrong!");
        } finally {
            setIsLoading(false);
        }
    }

    // Handle form submission
    const handleFormSubmit = (e) => {
        e.preventDefault();
        getExchangeRate();
    }

    // Fetch exchange rate on initial render
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useEffect(() => getExchangeRate, []);

    return (
        <form className="converter-form" onSubmit={handleFormSubmit}>
            <div className="form-group">
                <label className="form-label">Enter Amount</label>
                <input
                    type="number"
                    className="form-input"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    required
                />
            </div>

            <div className="form-group form-currency-group">
                <div className="form-section">
                    <label className="form-label">From</label>
                    <CurrencySelect
                        selectedCurrency={fromCurrency}
                        handleCurrency={e => setFromCurrency(e.target.value)}
                    />
                </div>

                <div className="swap-icon" onClick={handleSwapCurrencies}>
                    <svg width="16" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19.13 11.66H.22a.22.22 0 0 0-.22.22v1.62a.22.22 0 0 0 .22.22h16.45l-3.92 4.94a.22.22 0 0 0 .17.35h1.97c.13 0 .25-.06.33-.16l4.59-5.78a.9.9 0 0 0-.7-1.43zM19.78 5.29H3.34L7.26.35A.22.22 0 0 0 7.09 0H5.12a.22.22 0 0 0-.34.16L.19 5.94a.9.9 0 0 0 .68 1.4H19.78a.22.22 0 0 0 .22-.22V5.51a.22.22 0 0 0-.22-.22z"
                            fill="#fff" />
                    </svg>
                </div>

                <div className="form-section">
                    <label className="form-label">To</label>
                    <CurrencySelect
                        selectedCurrency={toCurrency}
                        handleCurrency={e => setToCurrency(e.target.value)}
                    />
                </div>
            </div>

            <button type="submit" className={`${isLoading ? "loading" : ""} submit-button`}>Get Exchange Rate</button>
            <p className="exchange-rate-result">
                {/* Display the conversion result */}
                {isLoading ? "Getting exchange rate..." : result}
            </p>
        </form>
    )
}

export default ConverterForm

Remember to paste your API key into the API_KEY variable within the getExchangeRate() function. For security, consider storing your API key in a .env file in your project’s root directory. You can get a free API key from the ExchangeRate-API website.

In components/CurrencySelect.jsx, add the code for rendering the currency selection dropdowns.

// Array of currency codes
const currencyCodes = [
    "AED", "AFN", "ALL", "AMD", "ANG", "AOA", "ARS", "AUD", "AWG", "AZN",
    "BAM", "BBD", "BDT", "BGN", "BHD", "BIF", "BMD", "BND", "BOB", "BRL",
    "BSD", "BTN", "BWP", "BYN", "BZD", "CAD", "CDF", "CHF", "CLP", "CNY",
    "COP", "CRC", "CUP", "CVE", "CZK", "DJF", "DKK", "DOP", "DZD", "EGP",
    "ERN", "ETB", "EUR", "FJD", "FKP", "FOK", "GBP", "GEL", "GGP", "GHS",
    "GIP", "GMD", "GNF", "GTQ", "GYD", "HKD", "HNL", "HRK", "HTG", "HUF",
    "IDR", "ILS", "IMP", "INR", "IQD", "IRR", "ISK", "JEP", "JMD", "JOD",
    "JPY", "KES", "KGS", "KHR", "KID", "KMF", "KRW", "KWD", "KYD", "KZT",
    "LAK", "LBP", "LKR", "LRD", "LSL", "LYD", "MAD", "MDL", "MGA", "MKD",
    "MMK", "MNT", "MOP", "MRU", "MUR", "MVR", "MWK", "MXN", "MYR", "MZN",
    "NAD", "NGN", "NIO", "NOK", "NPR", "NZD", "OMR", "PAB", "PEN", "PGK",
    "PHP", "PKR", "PLN", "PYG", "QAR", "RON", "RSD", "RUB", "RWF", "SAR",
    "SBD", "SCR", "SDG", "SEK", "SGD", "SHP", "SLE", "SLL", "SOS", "SRD",
    "SSP", "STN", "SYP", "SZL", "THB", "TJS", "TMT", "TND", "TOP", "TRY",
    "TTD", "TVD", "TWD", "TZS", "UAH", "UGX", "USD", "UYU", "UZS", "VES",
    "VND", "VUV", "WST", "XAF", "XCD", "XOF", "XPF", "YER", "ZAR", "ZMW",
    "ZWL"
];

const CurrencySelect = ({ selectedCurrency, handleCurrency }) => {
    // Extract the country code from the selected currency code
    const countryCode = selectedCurrency.substring(0, 2);

    return (
        <div className="currency-select">
            <img src={`https://flagsapi.com/${countryCode}/flat/64.png`} alt="Flag" />
            <select
                onChange={handleCurrency}
                className="currency-dropdown"
                value={selectedCurrency}
            >
                {currencyCodes.map(currency => (
                    <option key={currency} value={currency}>{currency}</option>
                ))}
            </select>
        </div>
    )
}

export default CurrencySelect

Finally, replace the content of src/App.jsx with the provided code. It imports and renders the ConverterForm component.

import ConverterForm from "./components/ConverterForm";

const App = () => {
  return (
    <div className="currency-converter">
      <h2 className="converter-title">Currency Converter</h2>
      <ConverterForm />
    </div>
  )
}

export default App;

That’s it! If you’ve completed all the steps, you should now see your currency converter project in your browser. You can interact with it by entering an amount, selecting currencies, and clicking the swap button to switch between them.

Conclusion and final words

Building a currency converter with ReactJS and CSS is a rewarding project for beginners. It enhances your knowledge of React components, state management, and hooks, while also giving you hands-on experience with API integration and CSS styling.

Keep experimenting with additional features like historical exchange rates or different themes to continue learning and improving your skills. If you encounter any issues, you can download the source code files for free by clicking the “Download” button and view a live demo by clicking the “View Live” button.

After downloading the zip file, unzip it and open the “currency-converter” folder in VS Code. Then, open components/ConverterForm.jsx file and paste your API key into the API_KEY variable within the getExchangeRate() function. For security, consider storing your API key in a .env file in your project’s root directory. You can get a free API key from the ExchangeRate-API website.

Finally, open the terminal by pressing Ctrl + J and run these commands to view your currency converter project in the browser:

npm install
npm run dev

View Live Demo

Download Code Files

If you’ve found my content helpful, please consider buying me a coffee to support me in creating more content.

How to Create A Snake Game in HTML CSS & JavaScript

CodingNepal — Tue, 25 Jun 2024 18:22:44 +0000

Snake is a classic game that millions of people have played. Have you ever thought about creating your own Snake Game? Creating a Snake Game using HTML, CSS, and vanilla JavaScript is a fun and educational project that can improve your web development skills.

In this blog post, I’ll guide you through the steps of creating your own Snake Game from scratch. You can play this game on a PC using keyboard arrow keys or on a mobile device using touch-based arrow buttons.

If you’re excited to see how this snake game looks and works, click here to play it. For a full video tutorial on creating a snake game using HTML, CSS and JavaScript, you can watch the given YouTube video.

Video Tutorial of Snake Game in JavaScript

Making a Snake Game is not only fun, but it can also help you develop problem-solving skills and the ability to break down complex problems into smaller ones. So, I highly recommend that you watch the above video tutorial to the end.

In the video, I tried to explain each line with comments and show which code does what in the game. But if you wish, you can skip the video tutorial and continue reading this post to create a snake game on your own.

Steps For Creating Snake Game in JavaScript

To create a snake game using HTML, CSS, and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create the game’s basic layout. The “play-board” container is empty now, but it will be filled with snake bodies and food elements later using JavaScript code.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Snake Game JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="game-details">
        <span class="score">Score: 0</span>
        <span class="high-score">High Score: 0</span>
      </div>
      <div class="play-board"></div>
      <div class="controls">
        <i data-key="ArrowLeft" class="fa-solid fa-arrow-left-long"></i>
        <i data-key="ArrowUp" class="fa-solid fa-arrow-up-long"></i>
        <i data-key="ArrowRight" class="fa-solid fa-arrow-right-long"></i>
        <i data-key="ArrowDown" class="fa-solid fa-arrow-down-long"></i>
      </div>
    </div>

  </body>
</html>

Next, add the following CSS codes to your style.css file to make the layout of the Snake game. Remember that control arrow keys are only shown on small devices, such as phones. If you prefer to display them on all devices, you can easily modify the media query code.

/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #E3F2FD;
}
.wrapper {
  width: 65vmin;
  height: 70vmin;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  background: #293447;
  box-shadow: 0 20px 40px rgba(52, 87, 220, 0.2);
}
.game-details {
  color: #B8C6DC;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 20px 27px;
  display: flex;
  justify-content: space-between;
}
.play-board {
  height: 100%;
  width: 100%;
  display: grid;
  background: #212837;
  grid-template: repeat(30, 1fr) / repeat(30, 1fr);
}
.play-board .food {
  background: #FF003D;
}
.play-board .head {
  background: #60CBFF;
}

.controls {
  display: none;
  justify-content: space-between;
}
.controls i {
  padding: 25px 0;
  text-align: center;
  font-size: 1.3rem;
  color: #B8C6DC;
  width: calc(100% / 4);
  cursor: pointer;
  border-right: 1px solid #171B26;
}

@media screen and (max-width: 800px) {
  .wrapper {
    width: 90vmin;
    height: 115vmin;
  }
  .game-details {
    font-size: 1rem;
    padding: 15px 27px;
  }
  .controls {
    display: flex;
  }
  .controls i {
    padding: 15px 0;
    font-size: 1rem;
  }
}

Finally, add the following JavaScript code to your script.js file to add functionality for the snake game. This code will handle the logic behind the snake’s movement, eating food, updating the score, and detecting collisions with walls or its own body.

const playBoard = document.querySelector(".play-board");
const scoreElement = document.querySelector(".score");
const highScoreElement = document.querySelector(".high-score");
const controls = document.querySelectorAll(".controls i");

let gameOver = false;
let foodX, foodY;
let snakeX = 5, snakeY = 5;
let velocityX = 0, velocityY = 0;
let snakeBody = [];
let setIntervalId;
let score = 0;

// Getting high score from the local storage
let highScore = localStorage.getItem("high-score") || 0;
highScoreElement.innerText = `High Score: ${highScore}`;

const updateFoodPosition = () => {
    // Passing a random 1 - 30 value as food position
    foodX = Math.floor(Math.random() * 30) + 1;
    foodY = Math.floor(Math.random() * 30) + 1;
}

const handleGameOver = () => {
    // Clearing the timer and reloading the page on game over
    clearInterval(setIntervalId);
    alert("Game Over! Press OK to replay...");
    location.reload();
}

const changeDirection = e => {
    // Changing velocity value based on key press
    if(e.key === "ArrowUp" && velocityY != 1) {
        velocityX = 0;
        velocityY = -1;
    } else if(e.key === "ArrowDown" && velocityY != -1) {
        velocityX = 0;
        velocityY = 1;
    } else if(e.key === "ArrowLeft" && velocityX != 1) {
        velocityX = -1;
        velocityY = 0;
    } else if(e.key === "ArrowRight" && velocityX != -1) {
        velocityX = 1;
        velocityY = 0;
    }
}

// Calling changeDirection on each key click and passing key dataset value as an object
controls.forEach(button => button.addEventListener("click", () => changeDirection({ key: button.dataset.key })));

const initGame = () => {
    if(gameOver) return handleGameOver();
    let html = `<div class="food" style="grid-area: ${foodY} / ${foodX}"></div>`;

    // Checking if the snake hit the food
    if(snakeX === foodX && snakeY === foodY) {
        updateFoodPosition();
        snakeBody.push([foodY, foodX]); // Pushing food position to snake body array
        score++; // increment score by 1
        highScore = score >= highScore ? score : highScore;
        localStorage.setItem("high-score", highScore);
        scoreElement.innerText = `Score: ${score}`;
        highScoreElement.innerText = `High Score: ${highScore}`;
    }
    // Updating the snake's head position based on the current velocity
    snakeX += velocityX;
    snakeY += velocityY;

    // Shifting forward the values of the elements in the snake body by one
    for (let i = snakeBody.length - 1; i > 0; i--) {
        snakeBody[i] = snakeBody[i - 1];
    }
    snakeBody[0] = [snakeX, snakeY]; // Setting first element of snake body to current snake position

    // Checking if the snake's head is out of wall, if so setting gameOver to true
    if(snakeX <= 0 || snakeX > 30 || snakeY <= 0 || snakeY > 30) {
        return gameOver = true;
    }

    for (let i = 0; i < snakeBody.length; i++) {
        // Adding a div for each part of the snake's body
        html += `<div class="head" style="grid-area: ${snakeBody[i][1]} / ${snakeBody[i][0]}"></div>`;
        // Checking if the snake head hit the body, if so set gameOver to true
        if (i !== 0 && snakeBody[0][1] === snakeBody[i][1] && snakeBody[0][0] === snakeBody[i][0]) {
            gameOver = true;
        }
    }
    playBoard.innerHTML = html;
}

updateFoodPosition();
setIntervalId = setInterval(initGame, 100);
document.addEventListener("keyup", changeDirection);

In the code, you can see that the current speed of the snake is 100 milliseconds, which determines how quickly the snake moves on the game board. You can easily adjust this speed by changing the value in the “setInterval” function at the bottom of the code.

To understand the code more deeply, you can watch the above YouTube video tutorial or read the comments within the code and experiment with it.

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a classic snake game using HTML, CSS, and JavaScript which you can play on any device browser. I hope this snake game project helps you understand DOM manipulation, problem-solving skills, and other web development skills.

If you enjoyed creating your Snake Game and learned something new, you can check out my other JavaScript Games. These games are not only enjoyable to create but also provide an excellent opportunity to practice and enhance your JavaScript skills.

If you encounter any problems while creating your snake game, you can download the source code files for this game project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.

View Live Demo

Download Code Files

Create A Responsive Coffee Website in HTML and CSS

CodingNepal — Tue, 18 Jun 2024 11:58:03 +0000

This article was originally published at https://www.codingnepalweb.com.

Creating your own website can be an exciting and rewarding project, especially if you’re a beginner looking to start learning web development. It thoroughly introduces HTML and CSS, allowing you to express your creativity and build a valuable portfolio piece.

In this blog post, I’ll guide you through the steps to create a beautiful, responsive coffee-themed website using HTML and CSS. The website will include multiple sections such as Home, About, Services, Why Us, Gallery, Contact, and a Footer. One of the best features of this website is its full responsiveness, ensuring that it looks great on mobile devices and desktops.

Especially on mobile devices, we will add a hamburger menu to the header to toggle the mobile navigation menu when clicked. This will be achieved using HTML checkbox input with label elements, without relying on JavaScript.

Here are the brief details of different sections of our coffee website:

Home: A welcoming section with an introduction to your coffee shop and includes a navigation menu.
About: Information about your coffee shop’s history and mission.
Services: Details about the products and services you offer.
Why Us: Reasons why customers should choose your coffee shop.
Gallery: A showcase of your coffee shop’s ambiance and offerings.
Contact: A form or contact information for visitors to get in touch.
Footer: Additional links and information, such as social media profiles.

Video Tutorial of Responsive Coffee Website in HTML & CSS

Steps to Create Responsive Coffee Website HTML & CSS

To create a responsive coffee website using HTML and CSS only, follow these simple step-by-step instructions:

Create a folder with any name you like, e.g., coffee-website.
Inside it, create the necessary files: index.html, style.css, and script.js.
Finally, download the Images folder and place it in your project directory. This folder contains all the images required for this coffee website project.

To start, add the following HTML codes to your index.html file: This code contains essential HTML markup with different semantic tags for different sections like <header>, <nav>, <ul>, <li>, <a>, <section>, <footer>, etc. to create our website layout or structure.

<!DOCTYPE html>
<!-- Coding by CodingNepal - youtube.com/@codingnepal -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coffee Website | CodingNepal</title>
    <!-- Linking Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    <!-- Linking Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Header / Navbar -->
    <header>
      <nav class="navbar">
        <a href="#" class="nav-logo">
          <h2 class="logo-text">☕ Coffee</h2>
        </a>

        <ul class="nav-menu">
          <button id="menu-close-button" class="fas fa-times"></button>

          <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#menu" class="nav-link">Menu</a>
          </li>
          <li class="nav-item">
            <a href="#testimonials" class="nav-link">Testimonials</a>
          </li>
          <li class="nav-item">
            <a href="#gallery" class="nav-link">Gallery</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact</a>
          </li>
        </ul>

        <button id="menu-open-button" class="fas fa-bars"></button>
      </nav>
    </header>

    <main>
      <!-- Hero section -->
      <section class="hero-section">
        <div class="section-content">
          <div class="hero-details">
            <h2 class="title">Best Coffee</h2>
            <h3 class="subtitle">Make your day great with our special coffee!</h3>
            <p class="description">Welcome to our coffee paradise, where every bean tells a story and every cup sparks joy.</p>

            <div class="buttons">
              <a href="#" class="button order-now">Order Now</a>
              <a href="#contact" class="button contact-us">Contact Us</a>
            </div>
          </div>
          <div class="hero-image-wrapper">
            <img src="images/coffee-hero-section.png" alt="Coffee" class="hero-image" />
          </div>
        </div>
      </section>

      <!-- About section -->
      <section class="about-section" id="about">
        <div class="section-content">
          <div class="about-image-wrapper">
            <img src="images/about-image.jpg" alt="About" class="about-image" />
          </div>
          <div class="about-details">
            <h2 class="section-title">About Us</h2>
            <p class="text">At Coffee House in Berndorf, Germany, we pride ourselves on being a go-to destination for coffee lovers and conversation seekers alike. We're dedicated to providing an exceptional coffee experience in a cozy and inviting atmosphere, where guests can relax, unwind, and enjoy their time in comfort.</p>
            <div class="social-link-list">
              <a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a>
              <a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a>
              <a href="#" class="social-link"><i class="fa-brands fa-x-twitter"></i></a>
            </div>
          </div>
        </div>
      </section>

      <!-- Menu section -->
      <section class="menu-section" id="menu">
        <h2 class="section-title">Our Menu</h2>
        <div class="section-content">
          <ul class="menu-list">
            <li class="menu-item">
              <img src="images/hot-beverages.png" alt="Hot Beverages" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Hot Beverages</h3>
                <p class="text">Wide range of Steaming hot coffee to make you fresh and light.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/cold-beverages.png" alt="Cold Beverages" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Cold Beverages</h3>
                <p class="text">Creamy and frothy cold coffee to make you cool.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/refreshment.png" alt="Refreshment" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Refreshment</h3>
                <p class="text">Fruit and icy refreshing drink to make feel refresh.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/special-combo.png" alt="Special Combos" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Special Combos</h3>
                <p class="text">Your favorite eating and drinking combations.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/desserts.png" alt="Dessert" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Dessert</h3>
                <p class="text">Satiate your palate and take you on a culinary treat.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/burger-frenchfries.png" alt="burger & French Fries" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Burger & French Fries</h3>
                <p class="text">Quick bites to satisfy your small size hunger.</p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <!-- Testimonials section -->
      <section class="testimonials-section" id="testimonials">
        <h2 class="section-title">Testimonials</h2>
        <div class="section-content">
          <div class="slider-container swiper">
            <div class="slider-wrapper">
              <ul class="testimonials-list swiper-wrapper">
                <li class="testimonial swiper-slide">
                  <img src="images/user-1.jpg" alt="User" class="user-image" />
                  <h3 class="name">Sarah Johnson</h3>
                  <i class="feedback">"Loved the French roast. Perfectly balanced and rich. Will order again!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/user-2.jpg" alt="User" class="user-image" />
                  <h3 class="name">James Wilson</h3>
                  <i class="feedback">"Great espresso blend! Smooth and bold flavor. Fast shipping too!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/user-3.jpg" alt="User" class="user-image" />
                  <h3 class="name">Michael Brown</h3>

                  <i class="feedback">"Fantastic mocha flavor. Fresh and aromatic. Quick shipping!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/user-4.jpg" alt="User" class="user-image" />
                  <h3 class="name">Emily Harris</h3>

                  <i class="feedback">"Excellent quality! Fresh beans and quick delivery. Highly recommend."</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/user-5.jpg" alt="User" class="user-image" />
                  <h3 class="name">Anthony Thompson</h3>

                  <i class="feedback">"Best decaf I've tried! Smooth and flavorful. Arrived promptly."</i>
                </li>
              </ul>

              <div class="swiper-pagination"></div>
              <div class="swiper-slide-button swiper-button-prev"></div>
              <div class="swiper-slide-button swiper-button-next"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Gallery section -->
      <section class="gallery-section" id="gallery">
        <h2 class="section-title">Gallery</h2>
        <div class="section-content">
          <ul class="gallery-list">
            <li class="gallery-item">
              <img src="images/gallery-1.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-2.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-3.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-4.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-5.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-6.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
          </ul>
        </div>
      </section>

      <!-- Contact section -->
      <section class="contact-section" id="contact">
        <h2 class="section-title">Contact Us</h2>
        <div class="section-content">
          <ul class="contact-info-list">
            <li class="contact-info">
              <i class="fa-solid fa-location-crosshairs"></i>
              <p>123 Campsite Avenue, Wilderness, CA 98765</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-envelope"></i>
              <p>info@coffeeshopwebsite.com</p>
            </li>
            <li class="contact-info">
              <i class="fa-solid fa-phone"></i>
              <p>(123) 456-78909</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-clock"></i>
              <p>Monday - Friday: 9:00 AM - 5:00 PM</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-clock"></i>
              <p>Saturday: 10:00 AM - 3:00 PM</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-clock"></i>
              <p>Sunday: Closed</p>
            </li>
            <li class="contact-info">
              <i class="fa-solid fa-globe"></i>
              <p>www.codingnepalweb.com</p>
            </li>
          </ul>

          <form action="#" class="contact-form">
            <input type="text" placeholder="Your name" class="form-input" required />
            <input type="email" placeholder="Your email" class="form-input" required />
            <textarea placeholder="Your message" class="form-input" required></textarea>
            <button type="submit" class="button submit-button">Submit</button>
          </form>
        </div>
      </section>

      <!-- Footer section -->
      <footer class="footer-section">
        <div class="section-content">
          <p class="copyright-text">© 2024 Coffee Shop</p>

          <div class="social-link-list">
            <a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a>
            <a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a>
            <a href="#" class="social-link"><i class="fa-brands fa-x-twitter"></i></a>
          </div>

          <p class="policy-text">
            <a href="#" class="policy-link">Privacy policy</a>
            <span class="separator">•</span>
            <a href="#" class="policy-link">Refund policy</a>
          </p>
        </div>
      </footer>
    </main>

    <!-- Linking Swiper script -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Linking custom script -->
    <script src="script.js"></script>
  </body>
</html>

Next, add the following CSS codes to your style.css file to make your website functional and visually appealing. Feel free to experiment with different CSS properties, such as colors, fonts, backgrounds, etc., to make your coffee website even more attractive.

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  /* Colors */
  --white-color: #fff;
  --dark-color: #252525;
  --primary-color: #3b141c;
  --secondary-color: #f3961c;
  --light-pink-color: #faf4f5;
  --medium-gray-color: #ccc;

  /* Font size */
  --font-size-s: 0.9rem;
  --font-size-n: 1rem;
  --font-size-m: 1.12rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;

  /* Font weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Border radius */
  --border-radius-s: 8px;
  --border-radius-m: 30px;
  --border-radius-circle: 50%;

  /* Site max width */
  --site-max-width: 1300px;
}

html {
  scroll-behavior: smooth;
}

/* Stylings for whole site */
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

img {
  width: 100%;
}

:where(section, footer) .section-content {
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--site-max-width);
}

section .section-title {
  text-align: center;
  padding: 60px 0 100px;
  text-transform: uppercase;
  font-size: var(--font-size-xl);
}

section .section-title::after {
  content: "";
  width: 80px;
  height: 5px;
  display: block;
  margin: 10px auto 0;
  background: var(--secondary-color);
  border-radius: var(--border-radius-s);
}

/* Navbar styling */
header {
  z-index: 5;
  width: 100%;
  position: fixed;
  background: var(--primary-color);
}

header .navbar {
  display: flex;
  padding: 20px;
  align-items: center;
  margin: 0 auto;
  justify-content: space-between;
  max-width: var(--site-max-width);
}

.navbar .nav-logo .logo-text {
  color: var(--white-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.navbar .nav-menu {
  gap: 10px;
  display: flex;
}

.navbar .nav-menu .nav-link {
  padding: 10px 18px;
  color: var(--white-color);
  font-size: var(--font-size-m);
  border-radius: var(--border-radius-m);
  transition: 0.3s ease;
}

.navbar .nav-menu .nav-link:hover {
  color: var(--primary-color);
  background: var(--secondary-color);
}

.navbar :where(#menu-open-button, #menu-close-button) {
  display: none;
}

/* Hero section styling */
.hero-section {
  min-height: 100vh;
  background: var(--primary-color);
}

.hero-section .section-content {
  display: flex;
  padding-top: 40px;
  align-items: center;
  min-height: 100vh;
  justify-content: space-between;
}

.hero-section .hero-details {
  color: var(--white-color);
}

.hero-section .hero-details .title {
  font-size: var(--font-size-xxl);
  color: var(--secondary-color);
  font-family: "Miniver", sans-serif;
}

.hero-section .hero-details .subtitle {
  margin-top: 8px;
  max-width: 70%;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.hero-section .hero-details .description {
  max-width: 70%;
  margin: 24px 0 40px;
  font-size: var(--font-size-m);
}

.hero-section .hero-details .buttons {
  display: flex;
  gap: 23px;
}

.hero-section .hero-details .button {
  padding: 10px 26px;
  display: block;
  border: 2px solid transparent;
  border-radius: var(--border-radius-m);
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  transition: 0.3s ease;
}

.hero-section .hero-details .button:hover,
.hero-section .hero-details .button.contact-us {
  color: var(--white-color);
  border-color: var(--white-color);
  background: transparent;
}

.hero-section .hero-details .button.contact-us:hover {
  color: var(--primary-color);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.hero-section .hero-image-wrapper {
  max-width: 500px;
  margin-right: 30px;
}

/* About section styling */
.about-section {
  padding: 120px 0;
  background: var(--light-pink-color);
}

.about-section .section-content {
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
}

.about-section .about-image-wrapper .about-image {
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}

.about-section .about-details {
  max-width: 50%;
}

.about-section .about-details .section-title {
  padding: 0;
}

.about-section .about-details .text {
  line-height: 30px;
  margin: 50px 0 30px;
  text-align: center;
  font-size: var(--font-size-m);
}

.about-section .social-link-list {
  display: flex;
  gap: 25px;
  justify-content: center;
}

.about-section .social-link-list .social-link {
  color: var(--primary-color);
  font-size: var(--font-size-l);
  transition: 0.2s ease;
}

.about-section .social-link-list .social-link:hover {
  color: var(--secondary-color);
}

/* Menu section styling */
.menu-section {
  color: var(--white-color);
  background: var(--dark-color);
  padding: 50px 0 100px;
}

.menu-section .menu-list {
  display: flex;
  gap: 110px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.menu-section .menu-list .menu-item {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(100% / 3 - 110px);
}

.menu-section .menu-list .menu-item .menu-image {
  width: 83%;
  aspect-ratio: 1;
  margin-bottom: 15px;
  object-fit: contain;
}

.menu-section .menu-list .menu-item .name {
  margin: 12px 0;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
}

.menu-section .menu-list .menu-item .text {
  font-size: var(--font-size-m);
}

/* Testimonials section styling */
.testimonials-section {
  padding: 50px 0 100px;
  background: var(--light-pink-color);
}

.testimonials-section .slider-wrapper {
  overflow: hidden;
  margin: 0 60px 50px;
}

.testimonials-section .testimonial {
  user-select: none;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.testimonials-section .testimonial .user-image {
  width: 180px;
  height: 180px;
  margin-bottom: 50px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}

.testimonials-section .testimonial .name {
  margin-bottom: 16px;
  font-size: var(--font-size-m);
}

.testimonials-section .testimonial .feedback {
  line-height: 25px;
}

.testimonials-section .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: var(--secondary-color);
}

.testimonials-section .swiper-slide-button {
  color: var(--secondary-color);
  margin-top: -50px;
  transition: 0.3s ease;
}

.testimonials-section .swiper-slide-button:hover {
  color: var(--primary-color);
}

/* Gallery section styling */
.gallery-section {
  padding: 50px 0 100px;
}

.gallery-section .gallery-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.gallery-section .gallery-list .gallery-item {
  overflow: hidden;
  border-radius: var(--border-radius-s);
  width: calc(100% / 3 - 32px);
}

.gallery-section .gallery-item .gallery-image {
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  transition: 0.3s ease;
}

.gallery-section .gallery-item:hover .gallery-image {
  transform: scale(1.3);
}

/* Contact section styling */
.contact-section {
  padding: 50px 0 100px;
  background: var(--light-pink-color);
}

.contact-section .section-content {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
}

.contact-section .contact-info-list .contact-info {
  display: flex;
  gap: 20px;
  margin: 20px 0;
  align-items: center;
}

.contact-section .contact-info-list .contact-info i {
  font-size: var(--font-size-m);
}

.contact-section .contact-form .form-input {
  width: 100%;
  height: 50px;
  padding: 0 12px;
  outline: none;
  margin-bottom: 16px;
  font-size: var(--font-size-s);
  border-radius: var(--border-radius-s);
  border: 1px solid var(--medium-gray-color);
}

.contact-section .contact-form {
  max-width: 50%;
}

.contact-section .contact-form textarea.form-input {
  height: 100px;
  padding: 12px;
  resize: vertical;
}

.contact-section .contact-form .form-input:focus {
  border-color: var(--secondary-color);
}

.contact-section .contact-form .submit-button {
  padding: 10px 28px;
  outline: none;
  margin-top: 10px;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-m);
  background: var(--primary-color);
  color: var(--white-color);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  transition: 0.3s ease;
}

.contact-section .contact-form .submit-button:hover {
  color: var(--primary-color);
  background: transparent;
}

/* Footer section styling */
.footer-section {
  padding: 20px 0;
  background: var(--dark-color);
}

.footer-section .section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-section :where(.copyright-text, .social-link, .policy-link) {
  color: var(--white-color);
  transition: 0.2s ease;
}

.footer-section .social-link-list {
  display: flex;
  gap: 25px;
}

.footer-section .social-link-list .social-link {
  font-size: var(--font-size-l);
}

.footer-section .social-link-list .social-link:hover,
.footer-section .policy-text .policy-link:hover {
  color: var(--secondary-color);
}

.footer-section .policy-text .separator {
  color: #fff;
  margin: 0 5px;
}

/* Responsive media query code for max width 1024px */
@media screen and (max-width: 1024px) {
  .menu-section .menu-list {
    gap: 60px;
  }

  .menu-section .menu-list .menu-item {
    width: calc(100% / 3 - 60px);
  }

}

/* Responsive media query code for max width 900px */
@media screen and (max-width: 900px) {
  :root {
    --font-size-m: 1rem;
    --font-size-l: 1.3rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.8rem;
  }

  body.show-mobile-menu {
    overflow: hidden;
  }

  body.show-mobile-menu header::before {
    content: "";
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.2);
  }

  .navbar :is(#menu-open-button, #menu-close-button) {
    font-size: var(--font-size-l);

    display: block;
  }

  .navbar :is(#menu-open-button, #menu-close-button):hover {
    color: var(--secondary-color) !important;
  }

  .navbar #menu-open-button {
    color: #fff;
  }

  .navbar .nav-menu #menu-close-button {
    position: absolute;
    right: 30px;
    top: 30px;
  }

  .navbar .nav-menu {
    display: block;
    background: #fff;
    position: fixed;
    top: 0;
    left: -300px;
    height: 100%;
    width: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 100px;
    transition: left 0.2s ease;
  }

  body.show-mobile-menu .nav-menu {
    left: 0;
  }

  .navbar .nav-menu .nav-link {
    display: block;
    margin-top: 17px;
    padding: 10px 22px;
    color: var(--dark-color);
    font-size: var(--font-size-l);
  }

  .hero-section .section-content {
    text-align: center;
    gap: 50px;
    padding: 30px 20px 20px;
    justify-content: center;
    flex-direction: column-reverse;
  }

  .hero-section .hero-details :is(.subtitle, .description),
  .about-section .about-details,
  .contact-section .contact-form {
    max-width: 100%;
  }

  .hero-section .hero-details .buttons {
    justify-content: center;
  }

  .hero-section .hero-image-wrapper {
    max-width: 270px;
    margin-right: 0;
  }

  .about-section .section-content {
    gap: 70px;
    flex-direction: column-reverse;
  }

  .about-section .about-image-wrapper .about-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    max-width: 250px;
  }

  .menu-section .menu-list {
    gap: 30px;
  }

  .menu-section .menu-list .menu-item {
    width: calc(100% / 2 - 30px);
  }

  .menu-section .menu-list .menu-item .menu-image {
    max-width: 200px;
  }

  .gallery-section .gallery-list {
    gap: 30px;
  }

  .gallery-section .gallery-list .gallery-item {
    width: calc(100% / 2 - 30px);
  }

  .contact-section .section-content {
    align-items: center;
    flex-direction: column-reverse;
  }
}

/* Responsive media query code for max width 640px */
@media screen and (max-width: 640px) {

  .menu-section .menu-list .menu-item,
  .gallery-section .gallery-list .gallery-item {
    width: 100%;
  }

  .menu-section .menu-list {
    gap: 60px;
  }

  .testimonials-section .slider-wrapper {
    margin: 0 0 30px;
  }

  .testimonials-section .swiper-slide-button {
    display: none;
  }

  .footer-section .section-content {
    flex-direction: column;
    gap: 20px;
  }
}

In your script.js file, add JavaScript code to make your coffee website interactive and functional. This code will initialize the Swiper slider and toggle the nav menu on mobile devices.

const navbarLinks = document.querySelectorAll(".nav-menu .nav-link");
const menuOpenButton = document.querySelector("#menu-open-button");
const menuCloseButton = document.querySelector("#menu-close-button");

menuOpenButton.addEventListener("click", () => {
  // Toggle mobile menu visibility
  document.body.classList.toggle("show-mobile-menu");
});

// Close menu when the close button is clicked
menuCloseButton.addEventListener("click", () => menuOpenButton.click());

// Close menu when nav link is clicked
navbarLinks.forEach((link) => {
  link.addEventListener("click", () => menuOpenButton.click());
});

/* Initializing Swiper */
let swiper = new Swiper(".slider-wrapper", {
  loop: true,
  grabCursor: true,
  spaceBetween: 25,

  // Pagination bullets
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  /* Responsive breakpoints */
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

That’s all, now simply open the index.html file in your favorite web browser to view and test your beautiful coffee website. Remember to experiment with the code and take this website to the next level with your creativity.

Conclusion and final words

In conclusion, creating a responsive coffee website using HTML and CSS is an excellent project for beginners in web development. By following the steps outlined in this blog post, I believe you’ve successfully created your beautiful and user-friendly coffee website. From home to footer, each website section provides hands-on experience to improve your HTML and CSS coding skills.

To further enhance your web development skills, try to recreate other beautiful website projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript create stunning websites with different features such as sliders, scroll animation, and dark mode.

If you encounter any problems while creating your coffee website, you can download the source code files for this website project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

View Live Demo

Download Code Files

Make A Simple Login Form in HTML and CSS only

CodingNepal — Sun, 16 Jun 2024 11:48:28 +0000

You’ve probably seen many login forms while browsing different sites. If you’re a beginner web developer, have you wondered how to create one using just HTML and CSS? Yes, it’s possible with just these two coding languages!

In this blog post, I’ll show you how to create a simple yet effective login form using only HTML and CSS. We’ll start by setting up the HTML structure, and then apply CSS to make it look good. We’ll also add Google and Apple login buttons for a modern touch.

We’ll use common HTML elements such as <form>, <div>, <a>, <label>, <button>, and simple CSS properties for styling this form. This project is straightforward, making it easy to follow and understand. Let’s get started!

Steps to Create a Simple Login Form in HTML and CSS

To create a simple yet effective login form using HTML and CSS only, follow these simple step-by-step instructions:

First, create a folder with any name you like, e.g., login-form. Then, create the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Finally, download the Images folder and place it in your project directory. This folder contains the logos for Google and Apple used in this form project.

To start, add the following HTML codes to your index.html file: This code includes essential HTML markup with different semantic tags like <form>, <div>, <a>, <label>, <button> to create the login form layout.

<!DOCTYPE html>
<!-- Source Codes By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Form in HTML and CSS | CodingNepal</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login_form">
    <!-- Login form container -->
    <form action="#">
      <h3>Log in with</h3>

      <div class="login_option">
        <!-- Google button -->
        <div class="option">
          <a href="#">
            <img src="logos/google.png" alt="Google" />
            <span>Google</span>
          </a>
        </div>

        <!-- Apple button -->
        <div class="option">
          <a href="#">
            <img src="logos/apple.png" alt="Apple" />
            <span>Apple</span>
          </a>
        </div>
      </div>

      <!-- Login option separator -->
      <p class="separator">
        <span>or</span>
      </p>

      <!-- Email input box -->
      <div class="input_box">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter email address" required />
      </div>

      <!-- Paswwrod input box -->
      <div class="input_box">
        <div class="password_title">
          <label for="password">Password</label>
          <a href="#">Forgot Password?</a>
        </div>

        <input type="password" id="password" placeholder="Enter your password" required />
      </div>

       <!-- Login button -->
      <button type="submit">Log In</button>

      <p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>
    </form>
  </div>
</body>
</html>

Next, add the following CSS codes to your style.css file to style your login form. Feel free to experiment with different CSS properties such as colors, fonts, and backgrounds to make your form more attractive.

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Resetting default styling and setting font-family */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    width: 100%;
    min-height: 100vh;
    padding: 0 10px;
    display: flex;
    background: #626cd6;
    justify-content: center;
    align-items: center;
}

/* Login form styling */
.login_form {
    width: 100%;
    max-width: 435px;
    background: #fff;
    border-radius: 6px;
    padding: 41px 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.login_form h3 {
    font-size: 20px;
    text-align: center;
}

/* Google & Apple button styling */

.login_form .login_option {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.login_form .login_option .option {
    width: calc(100% / 2 - 12px);
}

.login_form .login_option .option a {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #F8F8FB;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    margin: 34px 0 24px 0;
    text-decoration: none;
    color: #171645;
    font-weight: 500;
    transition: 0.2s ease;
}

.login_form .login_option .option a:hover {
    background: #ededf5;
    border-color: #626cd6;
}

.login_form .login_option .option a img {
    max-width: 25px;
}

.login_form p {
    text-align: center;
    font-weight: 500;
}

.login_form .separator {
    position: relative;
    margin-bottom: 24px;
}

/* Login option separator styling */
.login_form .separator span {
    background: #fff;
    z-index: 1;
    padding: 0 10px;
    position: relative;
}

.login_form .separator::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    height: 1px;
    background: #C2C2C2;
    display: block;
}

form .input_box label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Input field styling */
form .input_box input {
    width: 100%;
    height: 57px;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    outline: none;
    background: #F8F8FB;
    font-size: 17px;
    padding: 0px 20px;
    margin-bottom: 25px;
    transition: 0.2s ease;
}

form .input_box input:focus {
    border-color: #626cd6;
}

form .input_box .password_title {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

form .input_box {
    position: relative;
}

a {
    text-decoration: none;
    color: #626cd6;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

/* Login button styling */
form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #626CD6;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 28px;
    transition: 0.3s ease;
}

form button:hover {
    background: #4954d0;
}

That’s it! If you’ve added the code correctly, you’re ready to see your login form. Open the index.html file in your preferred browser to view the login form in action.

Conclusion and final words

Creating a login form is a great way for beginners to grasp the basics of HTML CSS, and gain practical experience in designing and styling forms. By following the steps and code provided in this blog post, you successfully created your own login form.

To further enhance your web development skills, especially with forms, consider recreating other attractive login and registration forms showcased on this website. Many of these forms use JavaScript to add features like password visibility toggling, password strength checking, and form validation.

If you encounter any problems while creating your login form, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.

View Live Demo

Download Code Files

Build A Hangman Game in HTML CSS and JavaScript

CodingNepal — Sat, 15 Jun 2024 07:15:00 +0000

Hangman is the classic word-guessing game you’ve likely enjoyed playing. But as a beginner web developer, have you ever thought about building your own Hangman game? Building a hangman game is not only fun and engaging but also provides an excellent opportunity to enhance your web development and problem-solving skills.

If you’re unfamiliar, Hangman is a word-guessing game where players try to guess all the letters of a randomly generated word within a given number of tries. There is also a hangman illustration that will progressively appear on the gallows for each incorrect guess.

In this beginner-friendly blog post, I’ll show you how to build a Hangman game in HTML, CSS, and JavaScript. By creating this game, you’ll gain practical experience and dive into essential concepts of web development, such as DOM manipulation, event handling, conditional statements, array usage, and many more.

Video Tutorial of Hangman Game HTML & JavaScript

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In the video, I’ve explained each line of code and provided informative comments to make the process of building your own Hangman game beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for building this game, you can continue reading this post. By the end of this post, you’ll have your own Hangman game that you can play or show off to your friends.

Steps to Build Hangman Game in HTML & JavaScript

To build a Hangman game using HTML, CSS, and JavaScript, follow these step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a scripts folder with word-list.js and script.js files. The extension of the files must be .js and files should be inside the scripts folder.
Download and place the Images folder in your project directory. This folder includes the necessary images and gifs for the game.

To start, add the following HTML codes to your index.html file. These codes include essential HTML elements, such as a modal box and a container for the game. Using JavaScript later, we’ll add or modify these elements and randomize game letters, hints, and keyboard keys.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hangman Game JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <script src="scripts/word-list.js" defer></script>
    <script src="scripts/script.js" defer></script>
</head>
<body>
    <div class="game-modal">
        <div class="content">
            <img src="#" alt="gif">
            <h4>Game Over!</h4>
            <p>The correct word was: <b>rainbow</b></p>
            <button class="play-again">Play Again</button>
        </div>
    </div>
    <div class="container">
        <div class="hangman-box">
            <img src="#" draggable="false" alt="hangman-img">
            <h1>Hangman Game</h1>
        </div>
        <div class="game-box">
            <ul class="word-display"></ul>
            <h4 class="hint-text">Hint: <b></b></h4>
            <h4 class="guesses-text">Incorrect guesses: <b></b></h4>
            <div class="keyboard"></div>
        </div>
    </div>
</body>
</html>

Next, add the following CSS codes to your style.css file to apply visual styling to your game: color, font, border, background, etc. Now, if you load the web page in your browser, you will see the Hangman game with its various styled elements. You can play around with colors, fonts, borders, backgrounds, and more to give your Hangman game a unique and appealing look.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}
body {
    display: flex;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #5E63BA;
}
.container {
    display: flex;
    width: 850px;
    gap: 70px;
    padding: 60px 40px;
    background: #fff;
    border-radius: 10px;
    align-items: flex-end;
    justify-content: space-between;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.hangman-box img {
    user-select: none;
    max-width: 270px;
}
.hangman-box h1 {
    font-size: 1.45rem;
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
}
.game-box .word-display {
    gap: 10px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.word-display .letter {
    width: 28px;
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 40px;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
}
.word-display .letter.guessed {
    margin: -40px 0 35px;
    border-color: transparent;
}
.game-box h4 {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
}
.game-box h4 b {
    font-weight: 600;
}
.game-box .guesses-text b {
    color: #ff0000;
}
.game-box .keyboard {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 40px;
    justify-content: center;
}
:where(.game-modal, .keyboard) button {
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    background: #5E63BA;
}
.keyboard button {
    padding: 7px;
    width: calc(100% / 9 - 5px);
}
.keyboard button[disabled] {
    pointer-events: none;
    opacity: 0.6;
}
:where(.game-modal, .keyboard) button:hover {
    background: #8286c9;
}
.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 0 10px;
    transition: opacity 0.4s ease;
}
.game-modal.show {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s 0.4s ease;
}
.game-modal .content {
    padding: 30px;
    max-width: 420px;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.game-modal img {
    max-width: 130px;
    margin-bottom: 20px;
}
.game-modal img[src="images/victory.gif"] {
    margin-left: -10px;
}
.game-modal h4 {
    font-size: 1.53rem;
}
.game-modal p {
    font-size: 1.15rem;
    margin: 15px 0 30px;
    font-weight: 500;
}
.game-modal p b {
    color: #5E63BA;
    font-weight: 600;
}
.game-modal button {
    padding: 12px 23px;
}

@media (max-width: 782px) {
    .container {
        flex-direction: column;
        padding: 30px 15px;
        align-items: center;
    }
    .hangman-box img {
        max-width: 200px;
    }
    .hangman-box h1 {
        display: none;
    }
    .game-box h4 {
        font-size: 1rem;
    }
    .word-display .letter {
        margin-bottom: 35px;
        font-size: 1.7rem;
    }
    .word-display .letter.guessed {
        margin: -35px 0 25px;
    }
    .game-modal img {
        max-width: 120px;
    }
    .game-modal h4 {
        font-size: 1.45rem;
    }
    .game-modal p {
        font-size: 1.1rem;
    }
    .game-modal button {
        padding: 10px 18px;
    }
}

Next, add the following JavaScript code to your word-list.js file: This script includes a list of various words along with corresponding hints. Feel free to expand this list to make your Hangman game even more enjoyable and challenging for players.

const wordList = [
    {
        word: "guitar",
        hint: "A musical instrument with strings."
    },
    {
        word: "oxygen",
        hint: "A colorless, odorless gas essential for life."
    },
    {
        word: "mountain",
        hint: "A large natural elevation of the Earth's surface."
    },
    {
        word: "painting",
        hint: "An art form using colors on a surface to create images or expression."
    },
    {
        word: "astronomy",
        hint: "The scientific study of celestial objects and phenomena."
    },
    {
        word: "football",
        hint: "A popular sport played with a spherical ball."
    },
    {
        word: "chocolate",
        hint: "A sweet treat made from cocoa beans."
    },
    {
        word: "butterfly",
        hint: "An insect with colorful wings and a slender body."
    },
    {
        word: "history",
        hint: "The study of past events and human civilization."
    },
    {
        word: "pizza",
        hint: "A savory dish consisting of a round, flattened base with toppings."
    },
    {
        word: "jazz",
        hint: "A genre of music characterized by improvisation and syncopation."
    },
    {
        word: "camera",
        hint: "A device used to capture and record images or videos."
    },
    {
        word: "diamond",
        hint: "A precious gemstone known for its brilliance and hardness."
    },
    {
        word: "adventure",
        hint: "An exciting or daring experience."
    },
    {
        word: "science",
        hint: "The systematic study of the structure and behavior of the physical and natural world."
    },
    {
        word: "bicycle",
        hint: "A human-powered vehicle with two wheels."
    },
    {
        word: "sunset",
        hint: "The daily disappearance of the sun below the horizon."
    },
    {
        word: "coffee",
        hint: "A popular caffeinated beverage made from roasted coffee beans."
    },
    {
        word: "dance",
        hint: "A rhythmic movement of the body often performed to music."
    },
    {
        word: "galaxy",
        hint: "A vast system of stars, gas, and dust held together by gravity."
    },
    {
        word: "orchestra",
        hint: "A large ensemble of musicians playing various instruments."
    },
    {
        word: "volcano",
        hint: "A mountain or hill with a vent through which lava, rock fragments, hot vapor, and gas are ejected."
    },
    {
        word: "novel",
        hint: "A long work of fiction, typically with a complex plot and characters."
    },
    {
        word: "sculpture",
        hint: "A three-dimensional art form created by shaping or combining materials."
    },
    {
        word: "symphony",
        hint: "A long musical composition for a full orchestra, typically in multiple movements."
    },
    {
        word: "architecture",
        hint: "The art and science of designing and constructing buildings."
    },
    {
        word: "ballet",
        hint: "A classical dance form characterized by precise and graceful movements."
    },
    {
        word: "astronaut",
        hint: "A person trained to travel and work in space."
    },
    {
        word: "waterfall",
        hint: "A cascade of water falling from a height."
    },
    {
        word: "technology",
        hint: "The application of scientific knowledge for practical purposes."
    },
    {
        word: "rainbow",
        hint: "A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light."
    },
    {
        word: "universe",
        hint: "All existing matter, space, and time as a whole."
    },
    {
        word: "piano",
        hint: "A musical instrument played by pressing keys that cause hammers to strike strings."
    },
    {
        word: "vacation",
        hint: "A period of time devoted to pleasure, rest, or relaxation."
    },
    {
        word: "rainforest",
        hint: "A dense forest characterized by high rainfall and biodiversity."
    },
    {
        word: "theater",
        hint: "A building or outdoor area in which plays, movies, or other performances are staged."
    },
    {
        word: "telephone",
        hint: "A device used to transmit sound over long distances."
    },
    {
        word: "language",
        hint: "A system of communication consisting of words, gestures, and syntax."
    },
    {
        word: "desert",
        hint: "A barren or arid land with little or no precipitation."
    },
    {
        word: "sunflower",
        hint: "A tall plant with a large yellow flower head."
    },
    {
        word: "fantasy",
        hint: "A genre of imaginative fiction involving magic and supernatural elements."
    },
    {
        word: "telescope",
        hint: "An optical instrument used to view distant objects in space."
    },
    {
        word: "breeze",
        hint: "A gentle wind."
    },
    {
        word: "oasis",
        hint: "A fertile spot in a desert where water is found."
    },
    {
        word: "photography",
        hint: "The art, process, or practice of creating images by recording light or other electromagnetic radiation."
    },
    {
        word: "safari",
        hint: "An expedition or journey, typically to observe wildlife in their natural habitat."
    },
    {
        word: "planet",
        hint: "A celestial body that orbits a star and does not produce light of its own."
    },
    {
        word: "river",
        hint: "A large natural stream of water flowing in a channel to the sea, a lake, or another such stream."
    },
    {
        word: "tropical",
        hint: "Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn."
    },
    {
        word: "mysterious",
        hint: "Difficult or impossible to understand, explain, or identify."
    },
    {
        word: "enigma",
        hint: "Something that is mysterious, puzzling, or difficult to understand."
    },
    {
        word: "paradox",
        hint: "A statement or situation that contradicts itself or defies intuition."
    },
    {
        word: "puzzle",
        hint: "A game, toy, or problem designed to test ingenuity or knowledge."
    },
    {
        word: "whisper",
        hint: "To speak very softly or quietly, often in a secretive manner."
    },
    {
        word: "shadow",
        hint: "A dark area or shape produced by an object blocking the light."
    },
    {
        word: "secret",
        hint: "Something kept hidden or unknown to others."
    },
    {
        word: "curiosity",
        hint: "A strong desire to know or learn something."
    },
    {
        word: "unpredictable",
        hint: "Not able to be foreseen or known beforehand; uncertain."
    },
    {
        word: "obfuscate",
        hint: "To confuse or bewilder someone; to make something unclear or difficult to understand."
    },
    {
        word: "unveil",
        hint: "To make known or reveal something previously secret or unknown."
    },
    {
        word: "illusion",
        hint: "A false perception or belief; a deceptive appearance or impression."
    },
    {
        word: "moonlight",
        hint: "The light from the moon."
    },
    {
        word: "vibrant",
        hint: "Full of energy, brightness, and life."
    },
    {
        word: "nostalgia",
        hint: "A sentimental longing or wistful affection for the past."
    },
    {
        word: "brilliant",
        hint: "Exceptionally clever, talented, or impressive."
    },
];

Finally, add the following JavaScript code to your script.js file. This script code will be responsible for the game’s logic, including generating a random word, managing user input, keeping track of guessed letters, checking for correct guesses, and updating the hangman’s visual representation as the game progresses.

const wordDisplay = document.querySelector(".word-display");
const guessesText = document.querySelector(".guesses-text b");
const keyboardDiv = document.querySelector(".keyboard");
const hangmanImage = document.querySelector(".hangman-box img");
const gameModal = document.querySelector(".game-modal");
const playAgainBtn = gameModal.querySelector("button");

// Initializing game variables
let currentWord, correctLetters, wrongGuessCount;
const maxGuesses = 6;

const resetGame = () => {
    // Ressetting game variables and UI elements
    correctLetters = [];
    wrongGuessCount = 0;
    hangmanImage.src = "images/hangman-0.svg";
    guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`;
    wordDisplay.innerHTML = currentWord.split("").map(() => `<li class="letter"></li>`).join("");
    keyboardDiv.querySelectorAll("button").forEach(btn => btn.disabled = false);
    gameModal.classList.remove("show");
}

const getRandomWord = () => {
    // Selecting a random word and hint from the wordList
    const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)];
    currentWord = word; // Making currentWord as random word
    document.querySelector(".hint-text b").innerText = hint;
    resetGame();
}

const gameOver = (isVictory) => {
    // After game complete.. showing modal with relevant details
    const modalText = isVictory ? `You found the word:` : 'The correct word was:';
    gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif`;
    gameModal.querySelector("h4").innerText = isVictory ? 'Congrats!' : 'Game Over!';
    gameModal.querySelector("p").innerHTML = `${modalText} <b>${currentWord}</b>`;
    gameModal.classList.add("show");
}

const initGame = (button, clickedLetter) => {
    // Checking if clickedLetter is exist on the currentWord
    if(currentWord.includes(clickedLetter)) {
        // Showing all correct letters on the word display
        [...currentWord].forEach((letter, index) => {
            if(letter === clickedLetter) {
                correctLetters.push(letter);
                wordDisplay.querySelectorAll("li")[index].innerText = letter;
                wordDisplay.querySelectorAll("li")[index].classList.add("guessed");
            }
        });
    } else {
        // If clicked letter doesn't exist then update the wrongGuessCount and hangman image
        wrongGuessCount++;
        hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`;
    }
    button.disabled = true; // Disabling the clicked button so user can't click again
    guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`;

    // Calling gameOver function if any of these condition meets
    if(wrongGuessCount === maxGuesses) return gameOver(false);
    if(correctLetters.length === currentWord.length) return gameOver(true);
}

// Creating keyboard buttons and adding event listeners
for (let i = 97; i <= 122; i++) {
    const button = document.createElement("button");
    button.innerText = String.fromCharCode(i);
    keyboardDiv.appendChild(button);
    button.addEventListener("click", (e) => initGame(e.target, String.fromCharCode(i)));
}

getRandomWord();
playAgainBtn.addEventListener("click", getRandomWord);

That’s all! To understand JavaScript code better, I recommend watching the above video tutorial, paying close attention to the code comments, and experimenting with the code.

Conclusion and Final Words

In conclusion, building a Hangman game from scratch using HTML, CSS, and JavaScript is an enjoyable and rewarding experience that can strengthen your web development and problem-solving skills. I believe that by following the steps in this post, you’ve successfully built your very own Hangman game.

Remember to experiment and customize your game to add personal touches and make it even more engaging. To continue improving your skills, I recommend exploring my blog post on How to Build Snake Game in HTML, CSS, and JavaScript.

If you encounter any problems while building your Hangman game, you can download the source code files for this game project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

View Live Demo

Download Code Files

10 Easy JavaScript Games for Beginners with Source Code

CodingNepal — Fri, 14 Jun 2024 07:15:00 +0000

Are you looking for a fun and engaging way to learn JavaScript? Creating games is a great way to learn the language and gain experience with programming concepts such as logic, algorithms, and problem-solving skills.

In this blog post, I will share the 10 Easy to Build JavaScript Games for Beginners. Each game on this list is simple but challenging enough to help you learn new JavaScript concepts. So, whether you’re a beginner or an experienced developer, learning to code games with JavaScript is a rewarding experience.

To make your learning process easier, each game is built with HTML, CSS, and vanilla JavaScript which means no external libraries or frameworks are used. I’ve also provided the source code and a video tutorial for all the games on this list.

You can easily reference these resources for guidance if you encounter any problems. So, let’s not waste more time and dive right into the game list!

1. Memory Card Game

Memory Card is a beginner-friendly game that you can create using HTML, CSS, and JavaScript. In this game, 16 cards are placed randomly on the screen, and each pair of cards has the same image. The objective of the game is to find all the matching pairs by clicking on the cards.

There’s no time limit to finding the matching cards, so players can take their time and focus on improving their memory. Creating this game is a great way to practice different JavaScript concepts, including event listeners, loops, arrays, and others.

2. Typing Speed Test Game

You may have tested your typing speed on different typing speed test websites. In this game, users have 60 seconds to type as many characters as possible and can check their WPM, CPM, accuracy, and more. Users can even erase their incorrect characters or go back using the backspace key.

Creating this game is a good way to improve your problem-solving skills and gain a better understanding of JavaScript concepts such as manipulating the DOM, handling event listeners, and creating user-friendly designs.

3. Hangman Game with Illustration

Hangman is the classic word-guessing game you’ve likely enjoyed playing. In this game, players try to guess all the letters of a randomly generated word within a given number of tries. There is also a hangman illustration that will progressively appear on the gallows for each incorrect guess.

Building a Hangman game from scratch using HTML, CSS, and JavaScript is an enjoyable and rewarding experience that can strengthen your web development and problem-solving skills.

4. Quiz Game with Timer

Quiz is a very popular game that every beginner tries to create using JavaScript. In this game, the users will be asked multiple questions with options and must choose the correct one within 15 seconds. Ultimately, the user score will be shown based on correct answers only.

Creating a Quiz game can help you understand various JavaScript concepts, including manipulating the DOM, using setInterval, working with arrays of objects, writing functions, and using loops. Moreover, this game project can also provide you with valuable experience in HTML and CSS, which can help you in web development.

5. Word Scramble Game

Word scramble is an easy word game you can create as a beginner. In this game, players must unscramble a set of letters to form a word within a given time limit of 30 seconds. And to make the game a little easier, users also get a hint about the word they are trying to guess.

By creating this word game, you can gain hands-on experience with essential JavaScript concepts, including arrays, objects, functions, DOM manipulation, string manipulation, event listeners, and conditional statements.

6. Tic Tac Toe Game

Tic Tac Toe is a well-known game that you can build to improve your JavaScript skills. In this game, the player needs to get three of the same symbol in a row, either horizontally, vertically, or diagonally, to win. The second player in this game is the bot, which plays automatically after each player’s turn.

Creating a Tic Tac Toe game can help you develop critical thinking and problem-solving abilities. You’ll learn many important JavaScript concepts, such as DOM manipulation, conditional statements, functions, arrays, event listeners, and more.

It can be a fun way to learn and apply these fundamental concepts while also improving your understanding of game development.

7. Number Guessing Game

Random number guessing is an easy game to create that every beginner must try. This game involves the computer or bot selecting a random number that you have to guess correctly. The game provides hints to help you along the way, and you have ten chances to make the correct guess.

It’s a simple but enjoyable game that can help you learn the basics of JavaScript programming, game logic, CSS styling, and more.

8. Word Guessing Game

Word guessing is the second-word game on this list that you can create as a beginner. In this game, the user has to guess all the letters of a randomly generated word within a specified number of tries. The game provides hints to help make the guessing process easier.

This word game helps you learn how to use JavaScript concepts like setInterval, DOM manipulation, arrays, objects, etc. to create an engaging and interactive game that keeps users engaged and entertained.

9. Rock Paper Scissors Game

Rock, Paper, Scissors is a game that’s widely enjoyed by beginner developers who want to build a simple game. In this game, you’ll play against a bot or computer, and the rules are straightforward: rock beats scissors, scissors beat paper, and paper beats rock.

It’s an excellent game project to work on if you want to develop your skills while creating an entertaining game. You’ll have fun while learning essential programming concepts that can be applied to other projects in the future.

10. Classic Snake Game

Snake is a classic arcade game that many of us played as children. But now you can create your own version of the game using JavaScript. In this game, players must guide the snake to eat food that appears randomly on the board. The game will end if the snake hits a wall or its own body.

What makes this game even more exciting is that users can play it on a PC using keyboard arrow keys or on a mobile device using touch-based arrow buttons.

Creating a snake game helps you improve problem-solving skills and logical thinking. You’ll also gain a deep understanding of programming concepts like loops, arrays, conditional statements, DOM manipulation, and game loops.

Conclusion and Final Words

In conclusion, these JavaScript games offer a great opportunity for beginners to improve their coding and problem-solving skills. From a memory card to the snake, these game projects cover various aspects of web and game development, including HTML, CSS, and JavaScript.

Choose a game that interests you and get ready to code. I recommended that you try creating these projects on your own rather than simply copying the source code. So, you’ll gain hands-on experience with essential programming concepts that can help you develop a strong foundation for future projects.

Furthermore, you can check out my Top 10 JavaScript Projects for Beginners to get extra coding projects to learn. Remember, practice is key when it comes to coding, so keep coding and experimenting with new ideas to improve your skills. Happy Coding!