Skip to content

Commit

Permalink
create
Browse files Browse the repository at this point in the history
  • Loading branch information
@RasperRevision
RasperRevision committed Mar 29, 2024
1 parent c62ab60 commit f10ed7e
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 47 deletions.
18 changes: 3 additions & 15 deletions about/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" defer></script>
<link href="/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

</head>

<body class="bg-dark">
Expand Down Expand Up @@ -235,19 +235,7 @@ <h2 class="accordion-header" id="headingSix">
</div>
</div>

<script>
const icon = document.getElementById("icon");
const icon1 = document.getElementById("a");
const icon2 = document.getElementById("b");
const icon3 = document.getElementById("c");

icon.addEventListener('click', function () {
document.getElementById('sidebar').classList.toggle('active');
icon1.classList.toggle('a');
icon2.classList.toggle('c');
icon3.classList.toggle('b');
});
</script>
<script src="/sidebar.js"></script>
</body>

</html>
</html>
185 changes: 153 additions & 32 deletions create/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,67 +15,72 @@
defer></script>
<link href="/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<style>
.form-control.empty {
border-color: red !important;
border-width: 2px;
}
</style>
</head>

<body class="bg-dark">
<main class="container text-white mt-5">
<h1>Create</h1>
<p>Create a JSON file compatible with our activities, which can be uploaded <a href="#">here</a></p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Title" id="Title">
</div>

<div class="list-group">
<div class="list-group-item">
Terms
<input type="checkbox" id="imgs" value="imgs">
<label for="imgs">Include images</label>
<div class="list-group-item" style="background-color: rgb(224, 224, 224);">
<div class="input-group my-1">
<input type="text" class="form-control" placeholder="Title" id="title">
</div>
</div>
<div class="list-group-item bg-light">
<div class="input-group mb-3">
<div class="input-group mb-2">
<span class="input-group-text">Term</span>
<input type="text" class="form-control">
</div>
<div class="input-group my-1">
<div class="input-group my-3">
<span class="input-group-text">Definition</span>
<textarea class="form-control"></textarea>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="fileInput1">Upload image</label>
<input type="file" class="form-control" id="fileInput1">
</div>
<button class="btn btn-danger delete-item">
<i class="bi bi-trash3-fill"></i> Delete
</button>
</div>
<div class="list-group-item bg-light">
<div class="input-group mb-3">
<div class="input-group mb-2">
<span class="input-group-text">Term</span>
<input type="text" class="form-control">
</div>
<div class="input-group my-1">
<div class="input-group my-3">
<span class="input-group-text">Definition</span>
<textarea class="form-control"></textarea>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="fileInput2">Upload image</label>
<input type="file" class="form-control" id="fileInput2">
</div>
<button class="btn btn-danger delete-item">
<i class="bi bi-trash3-fill"></i> Delete
</button>
</div>

<div class="list-group-item bg-light">
<div class="input-group mb-3">
<div class="input-group mb-2">
<span class="input-group-text">Term</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<input type="text" class="form-control">
</div>
<div class="input-group my-1">
<div class="input-group my-3">
<span class="input-group-text">Definition</span>
<textarea class="form-control" aria-label="Definition"></textarea>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="fileInput3">Upload image</label>
<input type="file" class="form-control" id="fileInput3">
<textarea class="form-control"></textarea>
</div>
<button class="btn btn-danger delete-item">
<i class="bi bi-trash3-fill"></i> Delete
</button>
</div>
<div class="list-group-item p-3" style="background-color: rgb(224, 224, 224);">
<button class="btn btn-success download">Download .json</button>
<button class="btn btn-primary add-item">Add Item</button>
</div>
<button class="btn btn-success">Download <!-- Title -->.json </button>
</div>
</main>

<div class="hamburger-icon" id="icon">
<div class="icon-1" id="a"></div>
<div class="icon-2" id="b"></div>
Expand All @@ -92,7 +97,123 @@ <h1>Create</h1>
</div>
</div>
</div>

<script src="/sidebar.js"></script>

<script>
const download = document.querySelector('.download');
const title = document.getElementById('title');
const addButton = document.querySelector('.add-item');
let itemIndex = 0;
let inputs = document.querySelectorAll('.form-control');

addButton.addEventListener('click', function () {
const listItem = document.createElement('div');
listItem.classList.add('list-group-item', 'bg-light');
listItem.innerHTML = `
<div class="input-group mb-2">
<span class="input-group-text">Term</span>
<input type="text" class="form-control">
</div>
<div class="input-group my-3">
<span class="input-group-text">Definition</span>
<textarea class="form-control"></textarea>
</div>
<button class="btn btn-danger delete-item">
<i class="bi bi-trash3-fill"></i> Delete
</button>
`;
const listGroup = document.querySelector('.list-group');
listGroup.insertBefore(listItem, listGroup.lastElementChild);
updateDeleteButtonState();
inputs = document.querySelectorAll('.form-control');
inputs.forEach(function (input) {
input.addEventListener('input', removeEmptyBorder);
});
});

document.addEventListener('click', function (event) {
if (event.target && event.target.classList.contains('delete-item')) {
event.target.closest('.list-group-item').remove();
updateDeleteButtonState();
}
});

function updateDeleteButtonState() {
const deleteButtons = document.querySelectorAll('.delete-item');
deleteButtons.forEach(function (button) {
button.disabled = deleteButtons.length <= 1;
});
}

function removeEmptyBorder() {
inputs.forEach(function (item) {
if (item.value.trim() !== "") { item.classList.remove('empty'); }
});
}

title.addEventListener('input', function () {
download.textContent = "Download " + this.value + ".json";
});

download.addEventListener('click', function () {
let firstEmptyInput = null;

removeEmptyBorder();

inputs.forEach(function (item) {
if (item.value.trim() === "") { item.classList.add('empty'); }
});

inputs.forEach(function (item) {
if (item.value === "" || item.value === null) {
item.classList.add('empty');
if (!firstEmptyInput) { firstEmptyInput = item; }
} else { item.classList.remove('empty'); }
});

if (firstEmptyInput) { firstEmptyInput.focus(); }
else {
const jsonData = generateJSONData();
const blob = new Blob([jsonData], { type: "application/json" });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = title.value + ".json";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
});

function generateJSONData() {
const jsonData = [];

document.querySelectorAll('.list-group-item.bg-light').forEach(function (item) {
const termInput = item.querySelector('.input-group.mb-2 input');
const definitionInput = item.querySelector('.input-group.my-3 textarea');

if (termInput && definitionInput) {
const termValue = termInput.value.trim();
const definitionValue = definitionInput.value.trim();

if (termValue !== "" && definitionValue !== "") {
const newItem = {
"term": termValue,
"definition": definitionValue
};
jsonData.push(newItem);
}
}
});

return JSON.stringify(jsonData, null, 2);
}
</script>


</body>
</html>

</html>

0 comments on commit f10ed7e

Please sign in to comment.