DEV Community

Pratik Pathak
Pratik Pathak

Posted on • Originally published at pratikpathak.com on

Beautiful Beginner Javascript Projects “Travel India”

#css #html #javascript

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 Source Code

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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");
});
Enter fullscreen mode Exit fullscreen mode

25+ More Javascript Projects for beginners, click here to learn more 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.

Top comments (0)

Read next

teo_nordic_d6988ee4c1221e profile image

Exploring Java's Role in Cloud Computing and AI for 2024

Teo Nordic -

emmanuelayinde profile image

Understanding merge sort algorithm: Beginner's guide to mastering sorting algorithm

Emmanuel Ayinde -

harold_defree profile image

Inertia.js with Laravel and React: A Guide for Entry-Level Developers 🚀

Harold Defree -

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -