Create Dog Name Generator Online Tutorial

Build a fun Dog Name Generator in HTML, CSS & JavaScript. Generate random dog names with a click. Easy and playful naming for your furry friend!

Learn
20. Dec 2023
170 views
Create Dog Name Generator Online Tutorial















Dog lovers often find joy in choosing the perfect name for their furry friends. What if you could make a fun tool that, when a button is clicked, creates random dog names? This article will show you how to use HTML, CSS, and JavaScript to create a basic web-based Random Dog Name Generator.

Setting Up the Environment

To get started, we'll create an HTML file that will serve as the foundation of our Dog Name Generator. Open your favorite text editor and create a new file named index.html.

The HTML Structure

Let's structure the HTML file with the necessary elements: a header, a button to generate names, and a section to display the random dog name.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Random Dog Name Generator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Random Dog Name Generator</h1>
  <button onclick="generateDogName()">Generate Name</button>
  <div id="dogName"></div>

  <script src="script.js"></script>
</body>
</html>

 

Styling with CSS

Create a separate file named styles.css to style our Dog Name Generator:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
}
#dogName {
  font-size: 24px;
  margin-top: 20px;
}

 

Generating Dog Names with JavaScript

Now, create a JavaScript file named script.js to handle the random name generation:

function generateDogName() {
  var dogNames = ["Buddy", "Max", "Bella", "Lucy", "Charlie", "Daisy", "Bailey", "Molly", "Rocky", "Lola", "Toby", "Sadie", "Coco", "Rosie", "Jack", "Sophie", "Chloe", "Maggie", "Oliver", "Luna"];
  var randomIndex = Math.floor(Math.random() * dogNames.length);
  var randomName = dogNames[randomIndex];
  document.getElementById("dogName").innerHTML = "Random Dog Name: " + randomName;
}

 

This JavaScript function generateDogName() creates a list of dog names and randomly selects one name to display in the HTML document. You can also add more name here so that user can find more dog name. 

Bringing it All Together

Include the CSS and JavaScript files in the HTML file for integration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Random Dog Name Generator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Random Dog Name Generator</h1>
  <button onclick="generateDogName()">Generate Name</button>
  <div id="dogName"></div>

  <script src="script.js"></script>
</body>
</html>

 

Conclusion

Congratulations! You've used HTML, CSS, and JavaScript to create a basic Random Dog Name Generator. With only a touch of a button, users of this interactive program may generate random dog names, making the naming procedure easy and enjoyable.

You may easily grow this project by adding more dog names to the list or by adding features like the ability to save your favorite names or share the produced names on social media.

Join our WhatsApp Channel to Get Latest Updates.

TechNews

Note - We can not guarantee that the information on this page is 100% correct.

Disclaimer

Downloading any Book PDF is a legal offense. And our website does not endorse these sites in any way. Because it involves the hard work of many people, therefore if you want to read book then you should buy book from Amazon or you can buy from your nearest store.

Comments

No comments has been added on this post

Add new comment

You must be logged in to add new comment. Log in
Learn anything
PHP, HTML, CSS, Data Science, Python, AI
Categories
Gaming Blog
Game Reviews, Information and More.
Learn
Learn Anything
Factory Reset
How to Hard or Factory Reset?
Books and Novels
Latest Books and Novels
Osclass Solution
Find Best answer here for your Osclass website.
Information
Check full Information about Electronic Items. Latest Mobile launch Date. Latest Laptop Processor, Laptop Driver, Fridge, Top Brand Television.
Pets Blog
Check Details About All Pets like Dog, Cat, Fish, Rabbits and More. Pet Care Solution, Pet life Spam Information
Lately commented