`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grammar Checker and Translator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
}
.result, .translation {
margin-top: 20px;
}
.error {
color: red;
}
select {
padding: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Open-Source Grammar Checker and Translator</h1>
<p>Enter text in the box below and click "Check Grammar" or "Translate":</p>
<textarea id="text-input" placeholder="Type or paste your text here..."></textarea>
<br>
<button onclick="checkGrammar()">Check Grammar</button>
<select id="language-select">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="uk">Ukrainian</option>
</select>
<button onclick="translateText()">Translate</button>
<div class="result" id="result"></div>
<div class="translation" id="translation"></div>
<script>
async function checkGrammar() {
const text = document.getElementById("text-input").value;
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "Checking grammar...";
try {
const response = await fetch("https://api.languagetool.org/v2/check", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
text: text,
language: "en-US"
})
});
const result = await response.json();
displayResults(result.matches);
} catch (error) {
resultDiv.innerHTML = "Error checking grammar. Please try again.";
}
}
function displayResults(matches) {
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (matches.length === 0) {
resultDiv.innerHTML = "<p>No grammar errors found!</p>";
return;
}
matches.forEach(match => {
const error = document.createElement("p");
error.classList.add("error");
error.innerHTML = `Error: <strong>${match.message}</strong> at position ${match.offset}. Suggested correction: <strong>${match.replacements[0]?.value || "No suggestion"}</strong>`;
resultDiv.appendChild(error);
});
}
// Translation functionality using Open Source Library (LibreTranslate)
async function translateText() {
const text = document.getElementById("text-input").value;
const targetLanguage = document.getElementById("language-select").value;
const translationDiv = document.getElementById("translation");
translationDiv.innerHTML = "Translating...";
try {
const response = await fetch("https://libretranslate.de/translate", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
q: text,
source: "en", // You can detect the source language dynamically if needed
target: targetLanguage,
format: "text"
})
});
const result = await response.json();
translationDiv.innerHTML =
} catch (error) {
translationDiv.innerHTML = "Error translating text. Please try again.";
}
}
</script>
</body>
</html>
"Content-Type": "application/json"
},
body: JSON.stringify({
q: text,
source: "en", // You can detect the source language dynamically if needed
target: targetLanguage,
format: "text"
})
});
const result = await response.json();
translationDiv.innerHTML =
<p>Translation: <strong>${result.translatedText}</strong></p>;} catch (error) {
translationDiv.innerHTML = "Error translating text. Please try again.";
}
}
</script>
</body>
</html>
`<div class="avatar-group -space-x-6 rtl:space-x-reverse">
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-12">
<span>+99</span>
</div>
</div>
</div>
Html codes
HTML, XML, WML is ...... ?
The meaning can change if you translate it into another language!
For example:
HTML, XML, not JML ...... ?
For example:
HTML, XML, not JML ...... ?
Which HTML element is used to define the structure of a webpage?
Anonymous Quiz
33%
<body>
0%
<header>
0%
<section>
67%
All of the above
🏆1
`<div id="article-carousel" class="relative w-full" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow">
<a href="#">
<img class="rounded-t-lg" src="https://via.placeholder.com/400x250" alt="Article Image 1" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Article Title 1</h5>
</a>
<p class="mb-3 font-normal text-gray-700">This is a short description of article 1...</p>
<a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300">
Read More
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow">
<a href="#">
<img class="rounded-t-lg" src="https://via.placeholder.com/400x250" alt="Article Image 2" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Article Title 2</h5>
</a>
<p class="mb-3 font-normal text-gray-700">This is a short description of article 2...</p>
<a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300">
Read More
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow">
<a href="#">
<img class="rounded-t-lg" src="https://via.placeholder.com/400x250" alt="Article Image 3" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Article Title 3</h5>
</a>
<p class="mb-3 font-normal text-gray-700">This is a short description of article 3...</p>
<a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300">
Read More
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
👍1
<svg aria-hidden="true" class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
<svg aria-hidden="true" class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
@Html_codee |this is pro code !
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
<svg aria-hidden="true" class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
`@Html_codee |this is pro code !
👍1
👍1🆒1
Basic HTML Commands:*
1.
2.
3.
4.
5.
6.
7.
8.
*Text Formatting Commands:*
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
*Link Commands:*
1.
2.
*Image Commands:*
1.
2.
3.
*List Commands:*
1.
2.
3.
4.
5.
6.
*Table
From Precious Chisom
1.
<html> - Root element of HTML document2.
<head> - Contains metadata about document3.
<title> - Sets title of page4.
<body> - Contains content of HTML document5.
<h1-6> - Headings (h1 largest, h6 smallest)6.
<p> - Paragraph7.
<br> - Line break8.
<hr> - Horizontal rule*Text Formatting Commands:*
1.
<b> - Bold text2.
<i> - Italic text3.
<u> - Underlined text4.
<s> - Strikethrough text5.
<strong> - Strongly emphasized text6.
<em> - Emphasized text7.
<mark> - Highlighted text8.
<small> - Smaller text9.
<del> - Deleted text10.
<ins> - Inserted text*Link Commands:*
1.
<a> - Anchor (link)2.
<link> - Links external stylesheet*Image Commands:*
1.
<img> - Image2.
<figure> - Figure (image with caption)3.
<figcaption> - Figure caption*List Commands:*
1.
<ul> - Unordered list2.
<ol> - Ordered list3.
<li> - List item4.
<dl> - Definition list5.
<dt> - Definition term6.
<dd> - Definition description*Table
From Precious Chisom
👍3👎1
Smart 🧠:
S-pecific
M-easurable
A-chievable
R-elevant
T-imely
©️sololearn app
•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee
S-pecific
M-easurable
A-chievable
R-elevant
T-imely
©️sololearn app
•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee
Here is a simple HTML and Tailwind CSS code snippet to display a video with a poster image using Tailwind CSS classes:
In this code snippet:
- We have an HTML structure that includes a video element with the controls attribute for playback controls.
- The poster attribute specifies an image that is displayed while the video is downloading or until the user plays it.
- We use Tailwind CSS classes for styling, such as centering the video on the screen and setting the background color.
You can replace the placeholder URLs with your actual video source URL and poster image URL. The provided code will display a video with a poster image using Tailwind CSS styles in a basic HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video with Poster using Tailwind CSS</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 flex items-center justify-center h-screen">
<div class="max-w-md">
<video controls poster="https://placekitten.com/800/600" class="w-full">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
In this code snippet:
- We have an HTML structure that includes a video element with the controls attribute for playback controls.
- The poster attribute specifies an image that is displayed while the video is downloading or until the user plays it.
- We use Tailwind CSS classes for styling, such as centering the video on the screen and setting the background color.
You can replace the placeholder URLs with your actual video source URL and poster image URL. The provided code will display a video with a poster image using Tailwind CSS styles in a basic HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowbite Alert</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<!-- Flowbite Alert -->
<div id="alert-1" class="flex p-4 mb-4 text-sm text-blue-800 border border-blue-300 rounded-lg bg-blue-50" role="alert">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 8a6 6 0 11-12 0 6 6 0 0112 0zm-6 8a8 8 0 100-16 8 8 0 000 16zm-.75-9.75a.75.75 0 111.5 0v2.25a.75.75 0 01-1.5 0V6.25zm.75 6a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"></path>
</svg>
<div>
<span class="font-medium">Info alert!</span> This is a blue alert using Flowbite.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8" data-dismiss-target="#alert-1" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
</body>
</html>