Skip to content

Commit

Permalink
Migrated call to json to fetch() and removed jQuery dependency becaus…
Browse files Browse the repository at this point in the history
…e why. Added some additional error handling and favicon
  • Loading branch information
Jac21 committed Feb 7, 2017
1 parent 4f3b2f8 commit 50d2331
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 85 deletions.
Binary file added favicon.ico
Binary file not shown.
9 changes: 6 additions & 3 deletions index.html
Expand Up @@ -4,11 +4,13 @@
<meta charset="utf-8">
<title>SkillSet</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

<h2>SkillSet</h2>
<img src="skillset.png"/>
<p class="body-text">If you'd like to see an example in action, click <a href="https://jac21.github.io/viz.html" target="_blank" rel="noopener noreferrer">here!</a></p>
<!-- basic web form for json uploading and converting -->
<form id = "json-form">
Expand All @@ -24,9 +26,10 @@ <h2>SkillSet</h2>
<button type="submit" id = "csv-input-button">Visualize</button>
</form>

<p id = "error-area"></p>

<a href="https://github.com/Jac21/SkillSet" target="_blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

<script type="text/javascript" src = "lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src = "scripts/converter.js"></script>

<script type="text/javascript" src = "lib/d3.min.js"></script>
Expand Down
4 changes: 0 additions & 4 deletions lib/jquery-2.1.1.min.js

This file was deleted.

166 changes: 91 additions & 75 deletions scripts/converter.js
@@ -1,76 +1,92 @@
$(document).ready(function(){

// base csv string object
var csv = "source,target,value";

// user has uploaded json file and clicked on submit button
$("#json-input-button").on('click', convertJson);

// convert JSONResume file input to csv file, download to user's machine
function convertJson(e) {
e.preventDefault();

// grab file value, create object URL to use in getJSON call
var jsonFileValue = $("#json-input")[0].files[0];
var jsonFile = window.URL.createObjectURL(jsonFileValue);

$.getJSON(jsonFile, function(data) {

// iterate through json resume skill section
for (var i = 0; i < data.skills.length; i++) {
// iterate through keywords sub-section, append values to csv
for (var j = 0; j < data.skills[i].keywords.length; j++) {
csv += "\n" + data.skills[i].name + "," +
data.skills[i].keywords[j] + "," +
setSkillValue(data.skills[i].level);
// base csv string object
var csv = "source,target,value";

// user has uploaded json file and clicked on submit button
var submitButton = document.getElementById('json-input-button');
submitButton.addEventListener('click', convertJson, false);

// user has uploaded converted csv file and clicked on submit button
var csvInputButton = document.getElementById("csv-input-button");
csvInputButton.addEventListener('click', visualizeCsv, false);

// error area declaration
var errorArea = document.getElementById('error-area');

// convert JSONResume file input to csv file, download to user's machine
function convertJson(e) {
e.preventDefault();

// grab file value, create object URL to use in getJSON call
var jsonInput = document.getElementById('json-input');
var jsonFileValue = jsonInput.files[0];
var jsonFile = window.URL.createObjectURL(jsonFileValue);

// if browser supports fetch api
if(self.fetch) {
fetch(jsonFile)
.then(function(response) {
return response.json().then(function(json) {
// iterate through json resume skill section
for (var i = 0; i < json.skills.length; i++) {
// iterate through keywords sub-section, append values to csv
for (var j = 0; j < json.skills[i].keywords.length; j++) {
csv += "\n" + json.skills[i].name + "," +
json.skills[i].keywords[j] + "," +
setSkillValue(json.skills[i].level);
}
}
}

// download
downloadCsv(csv);
});
};

// user has uploaded converted csv file and clicked on submit button
$("#csv-input-button").on('click', visualizeCsv);

// hide form elements, create csv object URL from file, call D3
function visualizeCsv(e) {
e.preventDefault();

//$("#json-form").hide();
//$("#csv-form").hide();

var csvFileValue = $("#csv-input")[0].files[0];
var csvFile = window.URL.createObjectURL(csvFileValue);

forceLayoutVisualize(csvFile);
};

// set skill value numeric value from json value
function setSkillValue(level) {
var skillLevelValue = "0";

if (level === "Beginner") {
skillLevelValue = "1.0";
} else if (level === "Intermediate") {
skillLevelValue = "2.0";
} else if (level === "Advanced") {
skillLevelValue = "2.5";
}

return skillLevelValue;
}

// downloads csv-converted file to local machine
function downloadCsv(csvString) {
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'mySkills.csv';

document.body.appendChild(a);
a.click();
}

});
// clear error area
errorArea.innerHTML = '';

// download
downloadCsv(csv);
});
})
.catch(function(error) {
errorArea.innerHTML = '<strong>There has been a problem with your fetch operation: ' + error.message + '</strong>';
});
} else {
errorArea.innerHTML = '<strong> Your browser does not support the fetch API! Please try this once more in Chrome or Firefox.</strong>';
}
};

// create csv object URL from file, call D3
function visualizeCsv(e) {
e.preventDefault();

var csvInput = document.getElementById('csv-input');
var csvFileValue = csvInput.files[0];
var csvFile = window.URL.createObjectURL(csvFileValue);

forceLayoutVisualize(csvFile);
};

/*
Helper Functions
*/

// set skill value numeric value from json value
function setSkillValue(level) {
var skillLevelValue = "0";

if (level === "Beginner") {
skillLevelValue = "1.0";
} else if (level === "Intermediate") {
skillLevelValue = "2.0";
} else if (level === "Advanced") {
skillLevelValue = "2.5";
}

return skillLevelValue;
};

// downloads csv-converted file to local machine
function downloadCsv(csvString) {
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'mySkills.csv';

document.body.appendChild(a);
a.click();
};
11 changes: 8 additions & 3 deletions styles/style.css
@@ -1,15 +1,20 @@
h2 {
font-family: Arial, Helvetica, sans-serif;
img {
width: 50%;
}

p {
body {
font-family: Arial, Helvetica, sans-serif;
}

.body-text {
margin-bottom: 2em;
}

#error-area {
font-size: 14px;
color: red;
}

path.link {
fill: none;
stroke: #666;
Expand Down

0 comments on commit 50d2331

Please sign in to comment.