Sharing code yang orang boleh copy code tu
Berikut adalah cara untuk sharing code supaya orang boleh copy code tu dan paste kat blog atau website dia.
Biasanya untuk tools yang dibuat menggunakan code html dan javascript dan css.
<title>Aircond calculator</title>
<style>
/* Styles for copy button */
.copy-button {
cursor: pointer;
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 5px;
margin-bottom: 10px;
}
/* Styles for code block */
pre {
position: relative;
}
code {
display: block;
padding: 5px;
overflow-x: auto;
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 5px;
max-height: 150px;
font-size: 12px;
}
.copy-button-container {
position: absolute;
top: 5px;
right: 5px;
}
/* Styles for notification */
.notification {
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
display: none;
font-size: 14px;
}
.success {
background-color: #4CAF50;
color: #fff;
}
.error {
background-color: #f44336;
color: #fff;
}
</style>
<body>
<div class="code-container">
<button class="copy-button" onclick="copyCode()">Copy Code</button>
<pre>
<code id="html-code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AC Calculator</title>
<style>
.calculator-section {
position: relative; /* Make the container position relative */
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
margin: auto; /* Center the calculator on the page */
}
/* Logo styles */
.logo {
position: absolute; /* Position the logo absolutely within the container */
bottom: 10px; /* Distance from the bottom */
left: 10px; /* Distance from the left */
}
.calculator-heading {
text-align: center;
margin-bottom: 20px;
}
.calculator-form {
display: flex;
flex-direction: column;
}
.calculator-label {
margin-bottom: 10px;
}
.calculator-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
font-size: 16px;
}
.calculator-button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-bottom: 10px;
transition: background-color 0.3s;
}
.calculator-button:hover {
background-color: #0056b3;
}
.calculator-button:last-child {
margin-bottom: 0;
}
.calculator-result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.calculator-radio-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.calculator-radio-button {
flex: 1;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="calculator-section">
<h2 class="calculator-heading">Kira Horsepower (HP) Aircond</h2>
<form class="calculator-form">
<label class="calculator-label" for="length">Panjang Bilik (feet/kaki):</label>
<input class="calculator-input" type="number" id="length" name="length" required><br>
<label class="calculator-label" for="width">Lebar Bilik (feet/kaki):</label>
<input class="calculator-input" type="number" id="width" name="width" required><br>
<label class="calculator-label">Adalah ruang bilik terkena sinaran matahari secara direct?</label>
<div class="calculator-radio-container">
<button class="calculator-button calculator-radio-button" type="button" onclick="selectSunlight('yes')">YES</button>
<button class="calculator-button calculator-radio-button" type="button" onclick="selectSunlight('no')">NO</button>
</div>
</form>
<p class="calculator-result" id="result"></p>
<a href="https://www.rengking.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUga4fVzQBbHTaOR9skMOWGhvsZnGOz4UhUVPkBJxVTjvnXC9J8ZXPxYXsXWfS1V1J2kF9FN_F9_40gMplt6bUJaWkS9om3HjGKgmse7u33QW6Ot_5FqmxW2FHj6bpxDPzTQv5v8YMmtct2kObb3Psx0La5Zqg74kK0bollSI0fZdgVoQbsGsn5TgkJzK/s94/logogamekecik.png" alt="Logo" class="logo">
</a>
</div>
<script>
let selectedSunlight = '';
function selectSunlight(value) {
selectedSunlight = value;
document.querySelectorAll('.calculator-radio-button').forEach(button => {
button.style.backgroundColor = '#007bff';
});
document.querySelectorAll('.calculator-radio-button').forEach(button => {
if (button.textContent.toLowerCase() === value) {
button.style.backgroundColor = '#0056b3';
}
});
calculate(); // Automatically calculate when sunlight option is selected
}
function calculate() {
const length = parseFloat(document.getElementById('length').value);
const width = parseFloat(document.getElementById('width').value);
if (!length || !width || !selectedSunlight) {
return; // Exit early if any field is empty
}
const result = length * width * 80; // Assuming 80 as a constant factor
let horsePower;
if (result >= 10000 && result <= 11000) {
horsePower = '1 horse power (hp)';
} else if (result > 11000 && result <= 15000) {
horsePower = '1.5 horse power (hp)';
} else if (result > 15000 && result <= 20000) {
horsePower = '2 horse power (hp)';
} else if (result > 20000 && result <= 26000) {
horsePower = '2.5 horse power (hp)';
} else {
horsePower = 'Contact your nearest technician for consultation';
}
document.getElementById('result').innerText = `Estimated cooling capacity: &{result.toFixed(2)} BTU\nRecommended AC size: &{horsePower}`;
}
</script>
</body>
</html>
</code>
</pre>
<!-- Notification area -->
<div class="notification" id="notification"></div>
</div>
<script>
function copyCode() {
const codeElement = document.getElementById('html-code');
const codeText = codeElement.textContent;
const textarea = document.createElement('textarea');
textarea.value = codeText;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showNotification('Code copied!', 'success');
}
function showNotification(message, type) {
const notificationElement = document.getElementById('notification');
notificationElement.textContent = message;
notificationElement.classList.add(type);
notificationElement.style.display = 'block';
// Hide the notification after a few seconds (adjust the timeout as needed)
setTimeout(() => {
notificationElement.style.display = 'none';
notificationElement.classList.remove(type);
}, 3000);
}
</script>
</body>
yang merah tu la code yang nak dishare dan dicopy. Kalau yang nak dishare tu code html, kena pastikan tanda < ditukar ke &alt; dan > ke > guna fungsi Ctrl+H kat microsoft word atau Google document.