Hello World!

Posted byoswaldo reyesPosted inUncategorized

Welcome to WordPress! This is your first post. Edit or delete it to take the first step in your blogging journey.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>PRIORITIES – Rank What Matters to You</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
.priority {
display: inline-block;
margin: 10px;
padding: 20px;
border: 1px solid #ddd;
cursor: move;
}
#preview {
margin-top: 20px;
display: none;
}
</style>
</head>
<body>

<h1>Welcome to PRIORITIES</h1>
<p>Discover what truly matters to you. Rank your priorities from 1 to 8 and share your personalized list with the world.</p>

<h2>Step 1: Rank Your Priorities</h2>
<p>Drag and drop the priorities below to rank them:</p>

<ul id=”priorities”>
<li class=”priority”>FAMILY</li>
<li class=”priority”>RELATIONSHIP</li>
<li class=”priority”>PASSION</li>
<li class=”priority”>FRIENDS</li>
<li class=”priority”>HOBBY</li>
<li class=”priority”>SOCIAL LIFE</li>
<li class=”priority”>CAREER</li>
<li class=”priority”>FITNESS</li>
</ul>

<h2>Step 2: Preview</h2>
<button onclick=”showPreview()”>Show My Ranked Priorities</button>

<div id=”preview”></div>

<script>
// Using a basic sortable library for drag-drop functionality
const list = document.getElementById(‘priorities’);

let draggedItem = null;

list.addEventListener(‘dragstart’, function(e) {
draggedItem = e.target;
setTimeout(function() {
draggedItem.style.display = ‘none’;
}, 0);
});

list.addEventListener(‘dragend’, function(e) {
setTimeout(function() {
draggedItem.style.display = ‘block’;
draggedItem = null;
}, 0);
});

list.addEventListener(‘dragover’, function(e) {
e.preventDefault();
});

list.addEventListener(‘dragenter’, function(e) {
if (e.target.className == ‘priority’) {
e.target.style[‘border-bottom’] = ‘solid 4px gray’;
}
});

list.addEventListener(‘dragleave’, function(e) {
if (e.target.className == ‘priority’) {
e.target.style[‘border-bottom’] = ”;
}
});

list.addEventListener(‘drop’, function(e) {
if (e.target.className == ‘priority’) {
e.target.style[‘border-bottom’] = ”;
list.insertBefore(draggedItem, e.target.nextElementSibling);
}
});

function showPreview() {
const priorities = document.querySelectorAll(‘.priority’);
let previewHtml = “<ol>”;
priorities.forEach(priority => {
previewHtml += `<li>${priority.textContent}</li>`;
});
previewHtml += “</ol>”;
document.getElementById(‘preview’).innerHTML = previewHtml;
document.getElementById(‘preview’).style.display = ‘block’;
}
</script>

</body>
</html>

Leave a comment