11th Project - Heppy Valentine's Day Using HTML CSS JavaScript

Projects

Click above image for live demo

  1. Replaced the <title> tag content with "Happy Valentine's Day".
  2. Corrected the rel attribute values for favicon and apple-touch-icon.
  3. Changed the font awesome icon classes to the updated ones (e.g., fa-brands to fab).
  4. Added missing closing </body> and </html> tags.
  5. Made minor formatting adjustments for consistency and readability.

Step -1 Save below code as an index.html file

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Happy Valentine's Day</title>
  <!-- Web page logos -->
  <link rel="icon" type="image/png" href="https://computer.rspeducation.in/Images/rapeducation.png">
  <link rel="apple-touch-icon" href="https://computer.rspeducation.in/Images/rapeducation.png">
  <script src="https://kit.fontawesome.com/cfa60462a9.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="wishes">
    <h2>Happy Valentine's Day</h2>
    <p>Generate Valentine's Day wishes for you and your loved one. Enter your names, and enjoy a beautiful animation and heartfelt message. Share your love with friends and family through social media!</p>

    <input type="text" id="FirstInput" placeholder="Enter your name" required>
    <input type="text" id="SecondInput" placeholder="Enter your lover's name" required>
    <span id="nameErrorMessage" style="color: red; font-size: 20px;"></span>
    <button id="generateButton">Generate Wishes</button>
  </div>

  <div class="heart-container" style="display: none;">
    <h2 class="FirstName" id="FirstName"></h2>
    <svg xmlns="http://www.w3.org/2000/svg" id="svg5" version="1.1" viewBox="0 0 502.98 108.61">
      <path id="heart" d="M213.35 29.43c19.41-15.19 33.68 10.86 37.73 18.82-.28-13.61 11.64-40.98 25.94-34.01 32.3 15.74-15.88 83.8-26.4 81.76-13.24-9-51.35-53.3-37.27-66.57Z" style="fill:#ff9999;stroke:#ff9999;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
      <path pathLength="1" id="line" d="M5.32 78.13c.96-.01 5-8.5 5.54-8.54.58-.05 6.1 8.51 7.1 8.51 3.66 0 9.29.06 10.71.05 2.53-.01 4.82-72.88 4.82-72.88l4.76 97.28 3.97-24.45 20.45-.22C64 77.86 77.1 63.66 78.36 63.8c1.31.15 6.68 14.08 7.94 14.07 2.3-.03 33.32.04 35.76.02.96 0 5-8.5 5.53-8.53.59-.05 6.1 8.51 7.1 8.5 3.66 0 9.3.07 10.72.06 2.53-.02 4.81-72.89 4.81-72.89l4.77 97.28 3.97-24.44s83.34-3.33 74.69 7.67c-8.65 11-45.3-42.94-31.65-53.58 25.6-19.96 49.96 36.94 40.26 36.5-12.2-.53 1.8-62.32 23.41-51.7 32.24 15.86-17.56 84.92-26.4 81.77-5.73-2.05-.68-21.68 31.4-26.58 26.65-6.42 29.5 2.35 52.62 7.11 2.53-.02 4.82-72.89 4.82-72.89l4.76 97.28 3.97-24.44 20.45-.22c1.31-.02 14.41-14.22 15.68-14.07 1.32.15 6.7 14.08 7.95 14.07 2.29-.03 33.32.04 35.76.02.95 0 5-8.5 5.53-8.54.58-.04 6.1 8.52 7.1 8.52 3.66 0 9.3.06 10.72.05 2.53-.02 4.81-72.89 4.81-72.89l4.77 97.28 3.97-24.44 20.45-.23c1.31-.01 14.4-14.22 15.68-14.07 1.32.16 6.69 14.09 7.94 14.07" />
    </svg>
    <h2 class="SecondName" id="SecondName"></h2>
    <div class="quotations" id="quotations"></div>
    <section>
      <div class="wishes">
        <div id="wishesMessage" style="display: none;"></div>
        <div id="shareLinks" style="display: none;">
          <div id="hiddenWishes" style="display: none;"></div>
          <strong style="font-size: 20px; text-align: center;">Share your wishes:</strong> <br>
          <a id="instagramLink" href="#"><i class="fab fa-instagram-square fa-fade"></i></a>
          <a id="facebookLink" href="#"><i class="fab fa-facebook fa-fade"></i></a>
          <a id="whatsappLink" href="#"><i class="fab fa-whatsapp-square fa-bounce"></i></a>
          <a id="twitterLink" href="#"><i class="fab fa-twitter fa-flip"></i></a>
          <a id="threadsLink" href="#"><i class="fab fa-threads fa-shake"></i></a>
        </div>
      </div>
    </section>
    <div class="video">
      <video id="autoplayVideo" width="0%" height="0%" controls download loop>
        <source src="https://greetings.rspeducation.in/img/love.mp4" type="video/mp4" class="post-img">
      </video>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Associated Files:

  1. Step -2 (style.css): The style.css file contains styles (CSS) that define the appearance and layout of the HTML elements.

style.css 

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

body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  background-image: url('https://greetings.rspeducation.in/img/background.png');
  background-size: cover;
  background-repeat: no-repeat;
}

/* Input fields and button */
.wishes {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 5%;
  color: #fff;
}

.wishes p {
  width: 50%;
  text-align: center;
  margin-bottom: 5%;
  background-color: #fff;
  color: #000;
}

input[type="text"] {
  padding: 10px;
  font-size: 20px;
  border: 2px solid #ff9999;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 1px;
}

button {
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 20px;
  background-color: #ff9999;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #ff6666;
}

/* Heart animation */
.heart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  color: #fff;
}

.heart-container svg {
  width: 100%;
}

.heart-container p {
  font-size: 20px;
  text-align: center;
  background-color: #000;
}

.quotations {
  font-size: 20px;
}

svg {
  overflow: visible;
}

svg path#line {
  fill: none;
  stroke: #e00000;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 4s linear infinite;
}

svg path#heart {
  transform-origin: 50% 50%;
  animation: blink 4s linear infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.2);
  }
  75% {
    opacity: 1;
    transform: scale(1.0);
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  85% {
    opacity: 1;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

/* Centering text */
.wishes,
.heart-container,
.wishesMessage {
  text-align: center;
}

/* Styling social media icons */
#shareLinks {
  margin-top: 20px;
}

#shareLinks a {
  margin: 0 10px;
  text-decoration: none;
  color: #000; /* Change color as needed */
}

#shareLinks a:hover {
  color: #ff6666; /* Change hover color as needed */
}

.fa-brands {
  font-size: 24px; /* Adjust icon size as needed */
}

@media (max-width: 800px) {
  body {
    height: 100vh;
  }
  .wishes p {
    width: 90%;
    background-color: #fff;
  }
}

  1. Step -3: JavaScript File (script.js): The script.js file contains JavaScript code that handles the dynamic behavior of the Calculator App to fetch weather data, updates the DOM (Document Object Model) dynamically, and performs other functionality related to the app.

In this rewritten JavaScript code:

  1. Changed document.getElementById("hiddenWishes").textContent for consistency.
  2. Enclosed the code inside the click event listener for "generateButton" in a function to ensure it runs only when the button is clicked.
  3. Corrected the usage of encodeURIComponent for generating share links to properly encode the message.
  4. Ensured that each event listener for the share links opens the link in a new tab by specifying "_blank" as the second argument for window.open.
script.js 

document.getElementById("generateButton").addEventListener("click", function() {
    const firstName = document.getElementById("FirstInput").value;
    const secondName = document.getElementById("SecondInput").value;

    // Display the names
    document.getElementById("FirstName").textContent = firstName;
    document.getElementById("SecondName").textContent = secondName;

    // Trigger heart animation
    const heartPath = document.getElementById("heart");
    heartPath.style.animation = "blink 4s linear infinite";

    // Generate and display random Valentine's Day quotation
    const quotations = [
        "On this Valentine's Day, I wish you all the love and happiness in the world..!",
        "Wishing you a day filled with endless hugs, kisses, and sweet surprises.",
        "Happy Valentine's Day! May your heart be filled with love and joy today and always...",
        "Sending you lots of love and warm wishes on this special day..",
        "Here's to a Valentine's Day filled with romantic moments and cherished memories.",
        // Add more quotations as needed
    ];

    const randomIndex = Math.floor(Math.random() * quotations.length);
    const randomQuotation = quotations[randomIndex];

    // Display the quotation
    document.getElementById("quotations").textContent = randomQuotation;

    // Show heart container
    document.querySelector(".heart-container").style.display = "block";

    // Hide wishes input and button
    document.querySelector(".wishes").style.display = "none";

    // Show share links
    document.getElementById("shareLinks").style.display = "block";

    // Play the video
    const videoElement = document.querySelector(".video");
    videoElement.style.display = "block";
    const video = document.getElementById("autoplayVideo");
    video.play();

    // Create the styled message
    const styledMessage = `Hello ! <span style=" ">${firstName} and ${secondName} </span><br><span style="color: orange">Happy </span> <span style="color: white">Valentine's</span> </span><span style="color: green">Day! 💞</span><br> <br>${randomQuotation}`;
    
    // Create the plain text message
    const plainTextMessage = `Happy Valentine's Day!\n\n ${randomQuotation}!\n${firstName} and ${secondName}\n\n${window.location.href}`;

    // Display the styled message
    document.getElementById("wishesMessage").innerHTML = styledMessage;

    // Set the plain text message for sharing
    document.getElementById("hiddenWishes").textContent = plainTextMessage;
});

// Open share links in new tab
document.getElementById("instagramLink").addEventListener("click", function(event) {
    event.preventDefault();
    const encodedMessage = encodeURIComponent(document.getElementById("hiddenWishes").textContent);
    const instagramLink = `https://www.instagram.com/share?url=${encodedMessage}`;
    window.open(instagramLink, "_blank");
});

document.getElementById("facebookLink").addEventListener("click", function(event) {
    event.preventDefault();
    const encodedMessage = encodeURIComponent(document.getElementById("hiddenWishes").textContent);
    const facebookLink = `https://www.facebook.com/sharer.php?u=${encodedMessage}`;
    window.open(facebookLink, "_blank");
});

document.getElementById("whatsappLink").addEventListener("click", function(event) {
    event.preventDefault();
    const encodedMessage = encodeURIComponent(document.getElementById("hiddenWishes").textContent);
    const whatsappLink = `https://wa.me/?text=${encodedMessage}`;
    window.open(whatsappLink, "_blank");
});

document.getElementById("twitterLink").addEventListener("click", function(event) {
    event.preventDefault();
    const encodedMessage = encodeURIComponent(document.getElementById("hiddenWishes").textContent);
    const twitterLink = `https://twitter.com/intent/tweet?text=${encodedMessage}`;
    window.open(twitterLink, "_blank");
});

document.getElementById("threadsLink").addEventListener("click", function(event) {
    event.preventDefault();
    const threadsLink = "https://www.youtube.com/@rspeducation";
    window.open(threadsLink, "_blank");
});

In summary, this HTML document represents a simple Heppy Valentine's Day, and the associated CSS and JavaScript files enhance its appearance and functionality. If you have specific questions or if there's a particular aspect you'd like more clarification on, feel free to ask!

Enhance Heppy Valentine's Day with downloadable ZIP files containing HTML, CSS, JavaScript, and project photos. Showcase your projects with ease:

How to Extract ZIP Files on Computer and Mobile

ZIP files are a popular way to compress and organize multiple files into a single container. Whether you're downloading a project or creating your own personal portfolio, knowing how to extract ZIP files is essential. In this guide, we'll cover the steps to extract ZIP files on both computer and mobile devices.

Extracting ZIP Files on Computer

Extracting ZIP Files on Computer

1. Locate the ZIP file on your computer that you want to extract.

2. Right-click on the ZIP file and select "Extract" or choose an extraction option based on the software you have installed, such as WinRAR or 7-Zip.

3. Specify the destination folder where you want to extract the contents of the ZIP file.

4. Click "Extract" to complete the process. You will now have access to the individual files inside the ZIP archive.



Extracting ZIP Files on Computer

Extracting ZIP Files on Computer

Extracting ZIP Files on Mobile

1. Download a Google file manager app from your mobile device's app store if you don't already have one.

2. Open the file manager and navigate to the location where the ZIP file is stored.

3. Long-press on the ZIP file and look for an option like "Extract" or "Unzip."

4. Choose the destination folder for the extracted files and confirm the extraction process.

5. Once extracted, you can access the individual files inside the ZIP archive on your mobile device.

Connecting HTML and CSS Files

When creating a html file, the connection between HTML and CSS files is crucial for styling and formatting. Follow these steps:

1. Create an HTML file for e.g., index.html.

2. Create a CSS file, e.g., style.css, for styling your portfolio.

3. Link the CSS file to your HTML file using the <link> tag in the <head> section:
```html ```

4. Now, any styles defined in your CSS file will be applied to the elements in your HTML file, allowing you to customize the appearance of your personal portfolio.

Extracting ZIP files on both computer and mobile devices is a straightforward process that allows you to access the contents of compressed archives. Incorporating these ZIP files into your personal portfolio projects, along with HTML, CSS, and JavaScript, can provide a convenient way for visitors to download and explore your work. Create an engaging portfolio with downloadable projects to showcase your skills and creativity effectively.