PHP Name Generator -

This is an illustration of a name generator that was created with PHP, JavaScript, CSS, and HTML. Users may produce several names, bookmark favourites, and share them on social media with this generator, which generates names at random based on given options.

Let's build the generator!

HTML (index.html)

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CompcIT Name Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>CompcIT Name Generator</h1>
        <div id="options">
            <label for="gender">Gender:</label>
            <select id="gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
            <label for="length">Name Length:</label>
            <input type="number" id="length" min="3" max="12" value="6">
            <button onclick="generateName()">Generate Name</button>
        </div>
        <div id="generated-names"></div>
        <div id="favorites"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

				
					body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
}

h1 {
    margin-top: 0;
}

label, select, input, button {
    margin: 5px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

JavaScript (script.js)

				
					function generateName() {
    var gender = document.getElementById("gender").value;
    var length = document.getElementById("length").value;
    fetch("generate_name.php?gender=" + gender + "&length=" + length)
        .then(response => response.json())
        .then(data => {
            var generatedNamesDiv = document.getElementById("generated-names");
            generatedNamesDiv.innerHTML = "";
            data.names.forEach(name => {
                var nameElement = document.createElement("div");
                nameElement.textContent = name;
                generatedNamesDiv.appendChild(nameElement);
            });
        });
}

PHP (project.php)

				
					<?php
$gender = isset($_GET['gender']) ? $_GET['gender'] : 'male';
$length = isset($_GET['length']) ? intval($_GET['length']) : 6;

// Generate random names based on gender and length
// This is a simplified example; you can replace it with a more sophisticated name generation algorithm
$names = array();
for ($i = 0; $i < 5; $i++) {
    $name = generateRandomName($gender, $length);
    $names[] = $name;
}

// Return names as JSON response
header('Content-Type: application/json');
echo json_encode(array('names' => $names));

function generateRandomName($gender, $length) {
    $vowels = 'aeiou';
    $consonants = 'bcdfghjklmnpqrstvwxyz';
    $name = '';
    $len = rand($length - 2, $length); // Random length within range

    // Start with vowel for female, consonant for male
    if ($gender == 'female') {
        $name .= $vowels[rand(0, strlen($vowels) - 1)];
    } else {
        $name .= $consonants[rand(0, strlen($consonants) - 1)];
    }

    // Alternate vowels and consonants
    for ($i = 0; $i < $len - 1; $i++) {
        if ($i % 2 == 0) {
            $name .= $consonants[rand(0, strlen($consonants) - 1)];
        } else {
            $name .= $vowels[rand(0, strlen($vowels) - 1)];
        }
    }

    return ucfirst($name);
}
?>

With the help of this example, users may choose the gender and length of the names they wish to generate using a straightforward name generator. The PHP backend (project.php) receives an AJAX request from JavaScript when the “Generate Name” button is clicked. The PHP backend produces random names depending on the given settings and sends them as JSON. The produced names are then shown on the webpage by the JavaScript. This example can be expanded by including functions like social media sharing, name storage for favourites, and enhanced name creation algorithms.

How do I run the code?

Create a new directory or folder and name it “project” or whatever you want.
Navigate to the newly created folder or directory, create four files, and name the files (index.html, styles.css, script.js, and project.php).
Copy the code from here for each file and paste the code into your created files.
Save each file by pressing keyboard keys such as Ctrl+S or manually saving them one by one.
Navigate back to the index.html file and run it in your browser.
Your project is ready to be seen.