Learning verb tenses is essential for mastering English grammar, and what better way to practice than with an interactive Verb Tense Converter? In this tutorial, we’ll build a simple web application that converts verbs between past, present, and future tenses automatically using HTML, CSS, and JavaScript.
Features of the Verb Tense Converter
✅ Convert verbs between past, present, and future tenses automatically 🔄
✅ Supports both regular and irregular verbs ⚡
✅ Simple and interactive UI with real-time input handling 🎨
✅ Error handling for invalid inputs 🚨
✅ Learn English grammar in a fun and engaging way ✍️
Technologies Used
- HTML: Structure of the webpage 📝
- CSS: Styling and layout 🎨
- JavaScript: Logic for verb tense conversion 🔧
Step-by-Step Guide
1️⃣ Create the HTML Structure
Start by setting up the basic structure of the web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verb Tense Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Verb Tense Converter</h2>
<label for="past">Past Tense:</label>
<input type="text" id="past" oninput="validateAndConvert('past')" placeholder="Enter past tense">
<p id="error-past" class="error"></p>
<label for="present">Present Tense:</label>
<input type="text" id="present" oninput="validateAndConvert('present')" placeholder="Enter present tense">
<p id="error-present" class="error"></p>
<label for="future">Future Tense:</label>
<input type="text" id="future" oninput="validateAndConvert('future')" placeholder="Enter future tense">
<p id="error-future" class="error"></p>
</div>
<script src="script.js"></script>
</body>
</html>2️⃣ Style the Webpage with CSS
Create a styles.css file for a clean and user-friendly design:
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
input {
width: 90%;
padding: 10px;
margin: 10px 0;
font-size: 16px;
text-align: center;
}
.error {
color: red;
font-size: 14px;
}3️⃣ Implement the JavaScript Logic
Create a script.js file and add the following JavaScript logic:
const verbDictionary = {
"go": { past: "went", present: "go", future: "will go" },
"eat": { past: "ate", present: "eat", future: "will eat" },
"run": { past: "ran", present: "run", future: "will run" },
"write": { past: "wrote", present: "write", future: "will write" },
"read": { past: "read", present: "read", future: "will read" }
};
function validateAndConvert(inputType) {
let inputElement = document.getElementById(inputType);
let errorElement = document.getElementById("error-" + inputType);
let inputValue = inputElement.value.toLowerCase();
if (!/^[a-zA-Z\s]*$/.test(inputValue)) {
errorElement.textContent = "Only English letters are allowed!";
inputElement.value = inputValue.replace(/[^a-zA-Z\s]/g, "");
return;
} else {
errorElement.textContent = "";
}
convertTense(inputType, inputValue);
}
function convertTense(inputType, inputValue) {
let pastInput = document.getElementById("past");
let presentInput = document.getElementById("present");
let futureInput = document.getElementById("future");
if (inputType === "present" && verbDictionary[inputValue]) {
pastInput.value = verbDictionary[inputValue].past;
futureInput.value = verbDictionary[inputValue].future;
} else if (inputType === "past") {
let match = Object.entries(verbDictionary).find(([key, value]) => value.past === inputValue);
if (match) {
presentInput.value = match[1].present;
futureInput.value = match[1].future;
}
} else if (inputType === "future") {
let match = Object.entries(verbDictionary).find(([key, value]) => value.future === inputValue);
if (match) {
pastInput.value = match[1].past;
presentInput.value = match[1].present;
}
}
}📽️ Watch the Full Tutorial on YouTube
Check out the complete step-by-step guide in this YouTube video:
🔗 Get the Source Code on GitHub
Access the full source code here:
🔗 GitHub Repository
Conclusion
Congratulations! 🎉 You have successfully built a Verb Tense Converter using HTML, CSS, and JavaScript. This project not only helps in learning English grammar but also enhances your web development skills.
If you found this tutorial helpful, don’t forget to like, comment, and subscribe to Madras Academy for more exciting web development content! 🚀✨
#HTML #CSS #JavaScript #WebDevelopment #GrammarTool #EnglishLearning #Coding #TechTutorial