Love is everywhere , in this blog post i will show you how you can build the love calculator web app using html css & javascript

Whether you're learning web development or just want to impress your friends with a quirky web tool, this app is a great beginner-friendly project.

🎯 Concept of Love Calculator App?

A Love Calculator is a fun app where users enter two names (usually their own and their crush’s) and it returns a “love percentage” result—purely for entertainment!

🚀 Key Features

• 🔤 Input fields for two names

• 🧮 Random love percentage generator

• 🎨 Stylish and mobile-friendly UI

• 🔁 Automatically Reload every 5 Seconds

🛠️ Technologies Used

1. HTML – for structuring the app

2. CSS – for styling and layout

3. JavaScript – to calculate and display results dynamically

HTML Code

<div id="conatiner">
        <input type="text" placeholder="Enter Your Name" id="yourName" required >
        <input type="text" placeholder="Enter Your Crush Name" id="crushName" required >
        <button id="love" onclick="calclove()">Calculate Love ❤</button>
        <p>Build by   xcodervicky 😎</p>
    </div>

above code I have used id #container and user 2 input field one input field is Your Name & other input field enter your Crush Name

and the last step use button tag to calculate love also i have use click event is onclick() when user click on button Love score is Display

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');

* {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: linear-gradient(to right, red,purple);
}

#conatiner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
input  {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    width: 350px;
    font-family: monospace;
    font-size: 18px;
}

button {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 20px;
    width: 350px;
    font-family: monospace;
    font-weight: 600;

}

p {
    margin-top: 80px;
    color: rgb(49, 48, 48);
    background: white;
    border-radius: 10px;
    padding: 6px;
    font-size: 9px;
}

in this css code i will use Gradient background also i will center my container horizontally & Vertically then the are design the input field that width is 350px and font-size is 18px

And now the last step design the button its give same width 350px & font-size is 20 & font weight is 600

Javascript code

// Generate random love score between 1 and 100
    var loveScore = Math.random() * 100;
    loveScore = Math.floor(loveScore) + 1;
    console.log(loveScore);

    // Main function to calculate love
    function calclove() {
      // Get input values
      const yourName = document.getElementById("yourName").value.trim();
      const crushName = document.getElementById("crushName").value.trim();
      // If both names are filled
      if (yourName !== "" && crushName !== "") {
        // Show result using SweetAlert
        Swal.fire({
          title: "Your Love Score",
          text: "Your Love Calculate Score is " + loveScore + "%",
          icon: "success"
        });
        // Reload page after 5 seconds
        setTimeout(function () {
          location.reload();
        }, 5000);
      } else {
        // Show error if names are missing
        Swal.fire("Please fill your name & Crush Name");
      }
    }

This is javascript code that generated random number to calculate the love score When user fill two input felid and click on button then function will be run & user get love score

Final Words

The Love Calculator App is a light-hearted way to improve your front-end coding skills. It's quick to build and a great addition to your portfolio. Don’t forget—real love can't be calculated, but coding it is super fun!

If you are creating website by using HTML css javascript & even you can use Frontend Frameworks like Tailwind CSS & React

Don’t worry I will Show you how you can Live your website using Free Hosting Platform

In this step-by-step guide, I’ll show you the easiest way to deploy your website on Netlify – without any complex setup, domain configuration, or backend knowledge.

Let’s get started! 🔥

What is Netlify?

Netlify is a powerful Web Hosting and beginner-friendly platform that allows you to:

• Deploy static websites for free

• Get a live URL instantly

• Connect custom domains

• Set up continuous deployment with GitHub

Perfect for developers, freelancers, and creators who want to share their work to the world.

🧰 Requirements Before You Begin

Make sure you have:

• A completed website folder (HTML/CSS/JS or any frontend framework build)

• A High Speed Internet

• Need Netlify account (create one at https://www.netlify.com/)

Deploy Your Website on Netlify in 2 Ways

Just Follow this steps to Deploy Website on netlify

Option 1: Deploy with Manually

• Login to Netlify Go to https://www.netlify.com/

• Click on Add New Site >> Click on Deploy Manually

• Drag & Drop Folder Drag the folder to upload file on Netlify hosting After you can upload all files so please Wait 1-2 minutes to Deploy website on netlify

• You will get Random Domain Name After you're Website is live

  

• Change Custom Subdomain After Deploy you can change the subdomain name Click on Site Configuration & Change Site Name

  

Boom! Live in Seconds. You can now view your site and even set a custom domain.

Option 2: Deploy with GitHub (For Automatic Updates)

This is great if your project is on GitHub and you want auto-deploy on every push.

Steps:

• Push Your Code to GitHub Create a repository and push your website files to it.

• Login to Netlify Go to https://app.netlify.com

• Click "Add New Site" → "Import an Existing Project"

• Choose GitHub as Source Connect your GitHub account to Netlify.

• Select Your Repository

• Set Build Settings (for static sites, leave everything default)

Click “Deploy Site”

Boom! Live in Seconds. You can now view your site and even set a custom domain.

🌍 Custom Domain Setup (Optional)

• Go to your deployed site in Netlify dashboard

• Click “Domain Management » Click on Add A Domain Name”

  

• Add your custom domain or buy one through Netlify

• Update DNS records in your domain provider (Netlify will guide you)

✅ Pros of Using Netlify

• Free for small and personal projects

• HTTPS included automatically

• Super fast CDN delivery

• Easy continuous deployment via Git

• Instant rollbacks and previews

Additional Features:

• Form Handling: Netlify offers built-in form handling without any backend code.

• Redirects and Rewrites: You can configure redirects and rewrites using a _redirects file or netlify.toml.

• Environment Variables: You can set environment variables for your build process in the site settings.

• Functions: Netlify supports serverless functions that can be used for dynamic back-end processing.

Final Words

Hosting your website doesn’t need to be hard. With Netlify, you can deploy your site in under 1 minute.

Whether you’re showcasing your portfolio, testing a landing page, or launching a side project, Netlify makes it dead simple.

Now go ahead and try it — your website deserves to be live! 🚀

That’s the Better Comments extension comes in—a simple but powerful VS Code extension that helps you write more meaningful, colorful, and organized comments to easily Understand the Code.

In this guide, you'll learn:

• Install the Extension

• Syntax for Using Better Comments

• How to customize it

• Tips for Using Better Comments

The "Better Comments" extension in VS Code helps you write more readable, colorful, and organized comments by using different styles (like TODO ! ? * etc.)

Here’s a quick guide to using it effectively:

Install the Extension

• Open VS Code

• Go to the Extensions tab (Ctrl+Shift+X)

• Search for: Better Comments

• Install the one by Aaron Bond (most popular)

Syntax for Using Better Comments

Use special characters at the start of your comment to trigger colors:

// ! This is an important comment (red)
// * This is a highlighted comment (green)
// ? This is a question (blue)
// TODO: This is a to-do comment (yellow)
// // This is a normal comment (gray) -- Default

Example in JavaScript:

// TODO: Refactor this function
// ! Don't forget to handle edge cases
// ? Should we use a try-catch here?
// * This part is working fine

It works in all programming languages supported by VS Code.

How to customize it

If you want to customize colors or keywords:

Press Ctrl+Shift+P → search for Preferences: Open Settings (JSON)

Add your own customization under better-comments.tags, like this:

"better-comments.tags": [
  {
    "tag": "!",
    "color": "#FF2D00",
    "strikethrough": false,
    "underline": false,
    "bold": true
  },
  {
    "tag": "?",
    "color": "#3498DB",
    "italic": true
  },
  {
    "tag": "TODO",
    "color": "#FF8C00",
    "bold": true
  },
  {
    "tag": "*",
    "color": "#10C44C"
  }
]

Tips for Using Better Comments

• Use TODO to mark tasks to complete later

• Use ! to flag urgent warnings or bugs

• Use ? to highlight areas you’re unsure about

• Use * to note important explanations

• Keep comments short and meaningful

Final Words

If you are using better comment extension is of the best way to showcase your code in well format then other developer is easily understand your code this extesnion is Very useful for every developer

Whether you're a beginner or a seasoned developer, this tool will improve your coding workflow instantly.

Give it a try and transform the way you comment in your code.