Beautiful Beginner Javascript Projects “Travel India”
Tags: css, html, javascript
Published: 2024-03-01 03:59:16

---
title: Beautiful Beginner Javascript Projects “Travel India”
published: true
date: 2024-02-19 06:08:01 UTC
tags: CSS,HTML,Javascript,JS
canonical_url: https://pratikpathak.com/travel-india-beginner-javascript-projects/
---

Travel India is a Project which focuses on India’s top 4 most visited tourist places. This project has a very beautiful UI controlled by Javascript. The Navigation is done by using Javascript. It also has a very beautiful Navbar.

## Code for “Travel India” Javascript Project

The project’s file structure likely includes this `index.html` file, a CSS file (`style.css`) for styling, and a JavaScript file (`javascript.js`) for functionality. It also includes a `videos` directory for the slideshow videos and an `icons` directory for the social media and navigation icons.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/02-Travel-India) [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)


Html:
```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Travel India</title>
  </head>
  <body>
    <section>
      <div class="bannerVideo" id="slideshow">
        <video
          src="./videos/mumbai.mp4"
          autoplay
          muted
          loop
          class="active"
        ></video>
        <video src="./videos/kerala.mp4" autoplay muted loop></video>
        <video src="./videos/banglore.mp4" autoplay muted loop></video>
        <video src="./videos/varanasi.mp4" autoplay muted loop></video>
      </div>

      <div class="container">
        <!-- Navigation menu -->
        <header class="" id="navbar">
          <a href="#" class="logo">Travel India</a>
          <ul>
            <li><a href="/" class="active">Home</a></li>
            <li><a href="#">Destination</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </header>

        <span class="menuIcon" id="menuIcon"></span>

        <!-- Places to visit/ Featured Places -->

        <div class="content">
          <div class="bannerText" id="slideShowText">
            <div class="active">
              <h2>Mumbai</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
                quisquam!
              </p>
            </div>

            <div class="">
              <h2>Kerala</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
                quisquam!
              </p>
            </div>

            <div class="">
              <h2>Banglore</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
                quisquam!
              </p>
            </div>

            <div class="">
              <h2>Varanasi</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                ad sed vero, ullam accusantium modi odio vel unde repellat fuga
                at earum voluptatum quaerat quidem nemo totam dicta. Quae,
                quisquam!
              </p>
            </div>
          </div>
        </div>

        <!-- Social Media Icons -->
        <ul class="sci">
          <li>
            <a href="https://www.facebook.com/pratikpathak24" target="blank"
              ><img src="./icons/facebook.png" alt=""
            /></a>
          </li>
          <li>
            <a href="https://www.instagram.com/pratikpathak.exe/" target="blank"
              ><img src="./icons/instagram.png" alt=""
            /></a>
          </li>
          <li>
            <a href="https://twitter.com/zpathakpratik" target="blank"
              ><img src="./icons/twitter.png" alt=""
            /></a>
          </li>
        </ul>

        <!-- Navigation Buttons -->
        <ul class="controls">
          <li id="prevSlide"><img src="./icons/left.png" alt="" /></li>
          <li id="nextSlide"><img src="./icons/right.png" alt="" /></li>
        </ul>
      </div>
    </section>

    <script src="./javascript.js"></script>
  </body>
</html>
```
Css
```css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap");

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

section {
  background: #111;
  min-height: 100vh;
}

section .bannerVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section .bannerVideo video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

section .bannerVideo video.active {
  opacity: 1;
}

.container {
  position: relative;
  padding: 0 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  backdrop-filter: blur(10px);
  box-shadow: 10px 0 15px rgba(0, 0, 0, 0.05);
}

.container header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 100px;
}

.container header .logo {
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.8em;
  text-decoration: none;
}

.container header ul {
  position: relative;
  display: flex;
}

.container header li {
  list-style: none;
  margin: 0 20px;
}

.container header li a {
  position: relative;
  text-decoration: none;
  font-size: 18px;
  padding: 4px 10px;
  color: #fff;
}

.container header li a:hover,
.container header li a.active {
  background: #fff;
  color: #111;
}

.container .content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.container .content .bannerText {
  position: relative;
  max-width: 700px;
}

.container .content .bannerText div {
  display: none;
  transition: 0.5s ease-in-out;
}

.container .content .bannerText div.active {
  display: initial;
}

.container .content .bannerText div h2 {
  color: #fff;
  font-size: 6em;
  line-height: 1em;
  font-weight: 700;
}

.container .content .bannerText div p {
  color: #fff;
  font-size: 18px;
  margin: 20px 0;
}

.sci {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

.sci li {
  list-style: none;
}

.sci li a {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.sci li a:hover {
  background: #b3b3b3;
}
.sci li a img {
  display: inline-block;
  max-height: 24px;
}

.controls {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
}

.controls li {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  cursor: pointer;
}

.controls li:hover {
  background: #b3b3b3;
}

.menuIcon {
  display: none;
}
/* Responsiveness */

@media (max-width: 991px) {
  .container {
    padding: 20px;
  }

  .container::before {
    width: 100%;
  }

  .container header {
    padding: 10px 20px;
  }

  .container .content .bannerText div h2 {
    font-size: 3em;
  }

  .container .content .bannerText {
    text-align: center;
  }

  .container header ul {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    display: none;
    align-items: center;

    justify-content: center;
    flex-direction: column;
  }

  .container header.active ul {
    display: flex;
  }

  .container header ul li {
    text-align: center;
    margin: 10px;
  }

  .container header ul li a {
    color: #333;
    font-size: 1.5em;
  }

  .container header ul li a:hover {
    color: #f00;
  }

  .menuIcon {
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: initial;
    z-index: 10000;
    background: #fff url(./icons/menu.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }

  .menuIcon.active {
    background: #fff url(./icons/close.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .sci li a {
    width: 50px;
    height: 50px;
  }

  .controls .li {
    width: 60px;
    height: 60px;
  }
}
```
Js:
```js


const slideShow = document.getElementById("slideshow");
const slides = slideShow.getElementsByTagName("video");
var index = 0;

const slideShowText = document.getElementById("slideShowText");
const slidesText = slideShowText.getElementsByTagName("div");
var i = 0;

document.getElementById("prevSlide").addEventListener("click", () => {
  slides[index].classList.remove("active");
  index = (index - 1 + slides.length) % slides.length;
  slides[index].classList.add("active");

  slidesText[i].classList.remove("active");
  i = (i - 1 + slidesText.length) % slidesText.length;
  slidesText[i].classList.add("active");
});

document.getElementById("nextSlide").addEventListener("click", () => {
  slides[index].classList.remove("active");
  index = (index + 1) % slides.length;
  slides[index].classList.add("active");

  slidesText[i].classList.remove("active");
  i = (i + 1) % slidesText.length;
  slidesText[i].classList.add("active");
});

// function toggleMenu() {
// const menuIcon = document.querySelector(".menuIcon");
// menuIcon.classList.toggle("active");
// }

document.getElementById("menuIcon").addEventListener("click", () => {
  const menuIcon = document.querySelector(".menuIcon");
  const navbar = document.getElementById("navbar");
  menuIcon.classList.toggle("active");
  navbar.classList.toggle("active");
});

```

25+ More Javascript Projects for beginners, [click here to learn more](https://pratikpathak.com/top-javascript-projects-with-source-code-github/) [https://pratikpathak.com/top-javascript-projects-with-source-code-github/](https://pratikpathak.com/top-javascript-projects-with-source-code-github/)

## More about index.html – Travel India

This project is a web-based application named “Travel India”. It showcases different places in India with a slideshow of videos and accompanying descriptions.

Here’s a breakdown of the HTML file:

- The `<!doctype html>`, `<html>`, `<head>`, and `<body>` tags are standard HTML elements that define the document structure.
- The `<link>` tag in the `<head>` section links to the CSS stylesheet (`style.css`) that styles the page.
- The `<title>` tag sets the title of the web page, which appears in the browser’s title bar or tab.
- The `<section>` tag in the `<body>` section contains the main content of the web page.
- The `<div>` with the class `bannerVideo` contains a slideshow of videos. Each `<video>` tag represents a video in the slideshow.
- The `<div>` with the class `container` contains the navigation menu, the slideshow text, and social media icons.
- The `<header>` tag contains the navigation menu with links to different sections of the site.
- The `<span>` with the id `menuIcon` likely represents a menu icon for mobile navigation.
- The `<div>` with the class `content` contains the slideshow text. Each `<div>` within it represents a slide in the slideshow.
- The `<ul>` with the class `sci` contains links to social media profiles.
- The `<ul>` with the class `controls` contains navigation buttons for the slideshow.
- The `<script>` tag at the end of the `<body>` section links to a JavaScript file (`javascript.js`), which provides the functionality for the slideshow and navigation menu.

## More about style.css – Travel India

This `style.css` file provides the styling for a web-based application named “Travel India”. Here’s a breakdown of the CSS rules:

- The `@import` rule imports the Poppins font from Google Fonts.
- The `*` selector applies styles to all elements. It sets the margin and padding to 0, applies `box-sizing: border-box` (which includes padding and border in the element’s total width and height), and sets the font family to Poppins.
- The `section` rule sets the background color to black and ensures the section takes up at least the full height of the viewport.
- The `.bannerVideo` and `.bannerVideo video` rules position the videos to cover the entire section. The `.bannerVideo video.active` rule sets the opacity of the active video to 1, making it visible.
- The `.container` rule styles the container for the navigation menu, slideshow text, and social media icons. The `.container::before` rule creates a semi-transparent overlay on the left half of the container.
- The `header`, `.logo`, and navigation menu (`header ul`, `header li`, `header li a`) rules style the navigation menu.
- The `.content` and `.bannerText` rules style the slideshow text. The `.bannerText div` rule initially hides all text slides, and the `.bannerText div.active` rule displays the active slide.
- The `.sci` and `.sci li a` rules style the social media icons.
- The `.controls` and `.controls li` rules style the slideshow navigation buttons.
- The `.menuIcon` rule initially hides the menu icon.
- The `@media (max-width: 991px)` rule contains styles that apply when the viewport width is 991px or less, making the layout responsive. It adjusts the padding, positions the navigation menu as a full-screen overlay, adjusts the text alignment and font size of the slideshow text, displays the menu icon, and adjusts the size of the social media icons and slideshow navigation buttons.

## More about script.js – Travel India

This `script.js` file provides the functionality for a web-based application named “Travel India”. Here’s a breakdown of the JavaScript code:

- `slideShow`, `slides`, `index`, `slideShowText`, `slidesText`, and `i` are variables that store references to the slideshow videos, the slideshow text, and their current indices.
- The `addEventListener` calls on `prevSlide` and `nextSlide` handle the functionality of the previous and next buttons for the slideshow. When a button is clicked, it removes the `active` class from the current video and text slide, updates the index to the previous or next slide (wrapping around if necessary), and adds the `active` class to the new slide.
- The `addEventListener` call on `menuIcon` handles the functionality of the menu icon. When the icon is clicked, it toggles the `active` class on the icon and the navigation menu (`navbar`). This likely opens and closes the navigation menu.

The commented-out `toggleMenu` function appears to be an earlier version of the menu icon functionality. It’s currently not being used and could be removed.

This script makes the slideshow and navigation menu interactive, allowing users to navigate through the slides and open/close the menu.