Skip to content

Commit

Permalink
Feature Changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jayantur13
jayantur13 committed Jun 14, 2024
1 parent 6b6264d commit 72b2a0f
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 51 deletions.
27 changes: 25 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,35 @@
# json.validator (WIP)

Basic type of json validation tool to validate and format json data
Basic type of json validation tool to validate and format, download json (jsontoxml) data

# Features

- Validate
> Green color if okay
> Red color if error
- Basic error message to fix json
- Option to download as file (appears after validate) in .json and .xml
- Automatic data reset in 1 min (if focus lost on textarea)
- Manual clear to clear/reset everything
- Line numbers (Planned)

# Open for

- Contributions, enhancements etc
- Support me (sponsor) or star the repo

# Changes

## 14-06-2024

- Added basic formatting for json
- Added option to download as a file (both as .json and .xml )
- Auto data reset

# Credit

- json2xml via https://github.com/nashwaan/xml-js

# License

This project is licensed under the [MIT Licence](https://github.com/jayantur13/json.validator/blob/master/LICENSE.md)
This project is licensed under the [MIT License](https://github.com/jayantur13/json.validator/blob/master/LICENSE.md)
41 changes: 29 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Primary Meta Tags -->
<title>JSON Validator | JSON Formatter | JSON Lint</title>
<title>JSON Validator: Validate, Format, Download</title>
<meta
name="description"
content="Completely free tool to validate and format your json data.Just copy and paste your data and validate or write and validate,thats all."
content="JSON tool completely free for everyone to validate, format and download your json data in json and xml format,copy and paste to begin."
/>
<meta
name="keywords"
content="json, json formatter, json validator, lint, linter, json lint"
content="json, json formatter, json validator, lint, linter, json lint, xml, json download, xml download, formatter"
/>
<meta name="author" content="Jayant Navrange" />
<meta name="robots" content="all" />
Expand All @@ -25,11 +25,11 @@
/>
<meta
property="og:title"
content="JSON Validator | JSON Formatter | JSON Lint"
content="JSON Validator: Validate, Format, Download"
/>
<meta
property="og:description"
content="Completely free tool to validate and format your json data.Just copy and paste your data and validate or write and validate,thats all."
content="JSON tool completely free for everyone to validate, format and download your json data in json and xml format,copy and paste to begin."
/>
<meta
property="og:image"
Expand All @@ -44,35 +44,52 @@
/>
<meta
property="twitter:title"
content="JSON Validator | JSON Formatter | JSON Lint"
content="JSON Validator: Validate, Format, Download"
/>
<meta
property="twitter:description"
content="Completely free tool to validate and format your json data.Just copy and paste your data and validate or write and validate,thats all."
content="JSON tool completely free for everyone to validate, format and download your json data in json and xml format,copy and paste to begin."
/>
<meta
property="twitter:image"
content="https://jayantur13.github.io/json.validator/images/json.png"
/>
<link rel="stylesheet" href="styling/style.css" />
<link rel="icon" type="image/x-icon" href="images/fav.png">
<link rel="icon" type="image/x-icon" href="images/fav.png" />
</head>
<body>
<div class="container">
<h2 class="title">JSON Validator</h2>
<pre class="title">Data clears in 1 min,to avoid click textarea</pre>
<textarea
id="jsonDataArea"
placeholder="Enter json data here..."
required
>
</textarea>
<pre id="errorMsg">Watch this space for error!</pre>
></textarea>
<pre id="infoArea">Watch this space for information!</pre>
<div class="btn-controls">
<button id="submit-btn">Validate</button>
<div id="download-btn-dropdown">
<button class="download-btn">Download</button>
<div class="download-btn-content">
<button type="button" id="dl-json-btn">As JSON</button>
<button type="button" id="dl-xml-btn">As XML</button>
</div>
</div>
<button id="clear-btn">Clear</button>
</div>
</div>
<script src="js/script.js"></script>
<footer class="footer">Made by Jayant Navrange</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xml-js.min.js"></script>
<footer class="footer">
<p>
This project is
<a href="https://github.com/jayantur13/json.validator">open source</a>
</p>
<p>Made by <a href="https://github.com/jayantur13">Jayant Navrange</a></p>
<p>
Buy me <a href="https://github.com/sponsors/jayantur13">something</a>
</p>
</footer>
</body>
</html>
144 changes: 118 additions & 26 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,146 @@
const validateBtn = document.getElementById("submit-btn");
const clearBtn = document.getElementById("clear-btn");
let defaultErrMsg = "Watch this space for error!";
const dlJsonBtn = document.getElementById("dl-json-btn");
const dlXMLtn = document.getElementById("dl-xml-btn");
let visible = document.getElementById("download-btn-dropdown");
const jsonDataInput = document.getElementById("jsonDataArea");
let defaultInfoMsg = "Watch this space for information!";

const validateJSON = () => {
const jsonDataInput = document.getElementById("jsonDataArea").value.trim();
let boolState;
if (jsonDataInput.length == 0 || jsonDataInput == " ") {
alert("Enter json data to validate");
} else {
try {
boolState = JSON.parse(jsonDataInput, null, 2);
if (boolState) {
document.getElementById("jsonDataArea").style.backgroundColor =
"#D1FFBD";
let errorMsg = document.getElementById("errorMsg");
if (errorMsg != "Watch this space for error!") {
document.getElementById("errorMsg").innerText = defaultErrMsg;
}
}
} catch (error) {
if (error) {
document.getElementById("jsonDataArea").style.backgroundColor =
"#FFF7F7";
document.getElementById("errorMsg").innerText = error;
}
let colorState = "pass";
try {
let jsonObject = JSON.parse(jsonDataInput);
const prettyJsonString = JSON.stringify(jsonObject, null, 2);
document.getElementById("jsonDataArea").value = prettyJsonString;
visible.style.display = "inline-block";
return colorState;
} catch (error) {
if (error) {
colorState = error;
return colorState;
}
}
};

const clearEntireThing = () => {
let jsonDataInput = document.getElementById("jsonDataArea").value;
let errorMsg = document.getElementById("errorMsg").innerText;
let infoArea = document.getElementById("infoArea").innerText;

if (
jsonDataInput.length != 0 ||
(jsonDataInput != " " && errorMsg === "Watch this space for error!")
(jsonDataInput != " " && infoArea === "Watch this space for information!")
) {
document.getElementById("jsonDataArea").value = "";
document.getElementById("jsonDataArea").style.backgroundColor = "#FFFFFF";
document.getElementById("infoArea").style.background = "#FFFFFF";
}
if (
jsonDataInput.length != 0 ||
(jsonDataInput != " " && errorMsg != "Watch this space for error!")
(jsonDataInput != " " && infoArea != "Watch this space for information!")
) {
document.getElementById("jsonDataArea").value = "";
document.getElementById("errorMsg").innerText = defaultErrMsg;
document.getElementById("infoArea").innerText = defaultInfoMsg;
document.getElementById("jsonDataArea").style.backgroundColor = "#FFFFFF";
document.getElementById("infoArea").style.background = "#FFFFFF";
}
visible.style.display = "none";
};

const checkThenWarn = () => {
const jsonDataInput = document.getElementById("jsonDataArea").value;
if (
jsonDataInput.length == 0 ||
jsonDataInput == "" ||
jsonDataInput == " "
) {
alert("Enter json data to validate");
} else {
let res = validateJSON();
if (res != "pass") {
//error if not pass
document.getElementById("jsonDataArea").style.backgroundColor = "#FFF7F7";
document.getElementById("infoArea").style.backgroundColor = "#FFF7F7";
document.getElementById("infoArea").innerText = res;
} else {
//okay if pass
document.getElementById("jsonDataArea").style.backgroundColor = "#D1FFBD";
let infoArea = document.getElementById("infoArea");
if (infoArea != "Watch this space for information!") {
document.getElementById("infoArea").style.backgroundColor = "#D1FFBD";
document.getElementById("infoArea").innerText = "JSON is valid!";
}
}
}
};

const downloadJSONFile = () => {
const jsonDataInput = document.getElementById("jsonDataArea").value;
if (
jsonDataInput.length == 0 ||
jsonDataInput == "" ||
jsonDataInput == " "
) {
alert("Enter json data to validate");
} else {
const fileName = "download.json";

const blob = new Blob([jsonDataInput], { type: "text/json" });
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
};

const structJSONToXMLdownload = () => {
const jsonDataInput = document.getElementById("jsonDataArea").value;
if (
jsonDataInput.length == 0 ||
jsonDataInput == "" ||
jsonDataInput == " "
) {
alert("Enter json data to validate");
} else {
const xml = json2xml(jsonDataInput, { compact: true, spaces: 4 });
const fileName = "download.xml";

const blob = new Blob([xml], { type: "text/xml" });
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
};

validateBtn.addEventListener("click", validateJSON);
let cleanerTimeout;

//Focus moved
document.getElementById("jsonDataArea").addEventListener("blur", () => {
//Clear everything in 1 min
if (cleanerTimeout) {
clearTimeout(cleanerTimeout);
}
cleanerTimeout = setTimeout(clearEntireThing, 60000);
});

// Add focus
document.getElementById("jsonDataArea").addEventListener("focus", () => {
// Clear the timeout if the input regains focus
if (cleanerTimeout) {
clearTimeout(cleanerTimeout);
cleanerTimeout = null; // Clear the timeout ID
}
});

validateBtn.addEventListener("click", checkThenWarn);

clearBtn.addEventListener("click", clearEntireThing);

dlJsonBtn.addEventListener("click", downloadJSONFile);

dlXMLtn.addEventListener("click", structJSONToXMLdownload);
Loading

0 comments on commit 72b2a0f

Please sign in to comment.