Fringe Salon

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Fringe Salon" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.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" />
    <title>fringe salon</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <header>
      <nav>
        <div class="logo"><h1 style="font-size: 20px">fringe salon</h1></div>
        <div class="menu">
          <a href="#" style="font-size: 20px">Home</a>
          <a href="#">Services</a>
          <a href="#">contact</a>
        </div>
      </nav>

<main>
        <section>
          <h3>Celebrating 5 years of fringe salon</h3>

<h1>
            Get 50% off on: <br> </on:br> <span class="change_content"> </span>
            <span style="margin-top: -10px"> </span>
          </h1>
          <p class="deal">The deal ends in <span id="demo"></span></p>
          <a href="#" class="btn">Book an appointment</a>
        </section>

style.css:

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

header {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.15)),
    url("i1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  width: 100%;
  height: 10vh;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

nav .logo {
  width: 25%;
  text-align: center;
  color: rgb(230, 117, 181);
  font-family: cursive;
}

nav .menu {
  width: 40%;
  display: flex;
  justify-content: space-around;
  font-family: "Josefin Sans", sans-serif;
}

nav .menu a {
  width: 25%;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

nav .menu a:hover {
  color: rgb(230, 117, 181);
}

main {
  width: 100%;
  min-height: calc(100vh - 15vh);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  color: white;

position: relative;
}

section h3 {
  font-size: 35px;
  font-weight: 200;
  letter-spacing: 3px;
  text-shadow: 1px 1px 2px black;
}

section h1 {
  margin: 30px 0 20px 0;
  font-size: 55px;
  font-weight: 700;
  text-shadow: 2px 1px 5px black;
  text-transform: uppercase;
}

section p {
  font-size: 25px;
  word-spacing: 2px;
  margin-bottom: 25px;
  text-shadow: 1px 1px 1px black;
}

.deal span {
  color: rgb(166, 223, 50);
  font-weight: bolder;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 2px;
}

section a {
  padding: 12px 30px;
  border-radius: 4px;
  outline: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.5s ease;
  position: fixed;
  bottom: 90px;
  right: 240px;
  z-index: 1;
}

section .btn {
  background: rgb(230, 117, 181);
  color: white;
}

.btn:hover {
  background: #fff;
  color: #000;
}

.change_content:after {
  content: "";
  animation: changetext 10s infinite linear;
  color: rgb(230, 117, 181);
}

@keyframes changetext {
  0% {
    content: "Hair extensions";
  }
  20% {
    content: "Scalp treatments";
  }
  35% {
    content: "Hair styling";
  }
  60% {
    content: "Hair coloring";
  }

100% {
    content: "Haircuts";
  }
}

.social-icons {
  position: absolute;
  left: 40%;
  top: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  font-size: 36px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 20px;
}

.social-icons a {
  margin-right: 20px;
  margin-bottom: 60px;
  transition: transform 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
  background-color: rgb(230, 117, 181);
}

/* Responsive Styles */

@media screen and (max-width: 768px) {
 
  nav .logo {
    width: 30%;
  }

nav .menu {
    width: 60%;
  }

nav .menu a {
    width: auto;
  }

section h3 {
    font-size: 30px;
  }

section h1 {
    font-size: 45px;
  }

section p {
    font-size: 20px;
  }

.social-icons {
    font-size: 30px;
  }
}

@media screen and (max-width: 480px) {
  /* Adjustments for screens up to 480px wide */

body {
    overflow: hidden;
  }

nav .logo {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

nav .menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
  }

nav .menu a {
    width: 100%;
    text-align: center;
    margin: 5px;
  }

section a {
    position: fixed;
    bottom: 90px;
    right: 90px;
    z-index: 1;
  }

.social-icons {
    position: fixed;
    left: auto;
    right: 130px;
    top: auto;
    bottom: 20px;
    transform: translateY(0);
    flex-direction: row;
    margin: 0;
    font-size: 24px;
  }

.social-icons a {
    margin-bottom: 0;
    margin-right: 10px;
  }
}

index.js:

// Smooth scrolling
const navLinks = document.querySelectorAll('nav ul li a');

navLinks.forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();

const targetId = link.getAttribute('href');
    const targetSection = document.querySelector(targetId);

window.scrollTo({
      top: targetSection.offsetTop,
      behavior: 'smooth',
    });
  });
});

// Sticky header
const header = document.querySelector('header');

window.addEventListener('scroll', () => {
  if (window.scrollY > 0) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

var countDownDate = new Date("may 30, 2023 15:37:25").getTime();
 
var x = setInterval(function() {
 
  var now = new Date().getTime();
 
  var distance = countDownDate - now;
 
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

Here is the explaination:

Sticky Header: When the user scrolls on the webpage, the code checks the vertical scroll position (window.scrollY). If the scroll position is greater than 0, it adds the CSS class "sticky" to the header element. Otherwise, it removes the "sticky" class. This allows the header to stick to the top of the viewport when the user scrolls down.

Countdown Timer: The code initializes a countdown timer by setting the countDownDate variable to a specific date and time in the future. It then uses setInterval to run a function every second. Inside this function, it calculates the remaining time (distance) between the current time and the countDownDate. It then breaks down the remaining time into days, hours, minutes, and seconds. The calculated values are displayed on the webpage using document.getElementById("demo").innerHTML. If the distance becomes less than 0, indicating that the countdown has expired, the interval is cleared, and the text "EXPIRED" is displayed.

FINAL WORDS:
Thank you Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas

Code Explained: front.end24 Edition

Search This Blog

Fringe Salon

Comments

Post a Comment

Popular posts from this blog

Project name: Profile statistics

Anmie Pics Generator

snack zilla : a responsive design with a slider