Life Of Wheel Using Vanilla JavaScript, JsPDF and Chart.js | JavaScript Project For Beginner
The Wheel of Life is a great tool to help you improve your life balance. It helps you quickly and graphically identify the areas in your life to which you want to devote. If you want to learn more you can check out my youtube channel.
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<title>Wheel Life</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAVBAR START -->
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- NAVBAR ENDS -->
<br><br>
<div class="container text-center">
<!-- PROMPT START -->
<div id="prompt">
<div id="life-topic-box">
<h1 class="life-topic text-capitalize">Love/ Relationship</h1>
<h1 class="life-topic text-capitalize">Family and firends</h1>
<h1 class="life-topic text-capitalize">Career and business</h1>
<h1 class="life-topic text-capitalize">finance and money</h1>
<h1 class="life-topic text-capitalize">Health</h1>
<h1 class="life-topic text-capitalize">Home Environment</h1>
<h1 class="life-topic text-capitalize">Fun and entertainment</h1>
<h1 class="life-topic text-capitalize">Personal and spiritual</h1>
</div>
<h5>how whould you rate area of your life ?</h5>
<nav class="d-flex justify-content-center" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item mark"><a class="page-link" href="#">1</a></li>
<li class="page-item mark"><a class="page-link" href="#">2</a></li>
<li class="page-item mark"><a class="page-link" href="#">3</a></li>
<li class="page-item mark"><a class="page-link" href="#">4</a></li>
<li class="page-item mark"><a class="page-link" href="#">5</a></li>
<li class="page-item mark"><a class="page-link" href="#">6</a></li>
<li class="page-item mark"><a class="page-link" href="#">7</a></li>
<li class="page-item mark"><a class="page-link" href="#">8</a></li>
<li class="page-item mark"><a class="page-link" href="#">9</a></li>
<li class="page-item mark"><a class="page-link" href="#">10</a></li>
</ul>
</nav>
<a href="#" class="link" id="skip">
Skip this area - it's not important to me
</a>
</div>
<!-- PROMPT ENDS -->
<br><br>
<!-- WHEEL START -->
<div class="life-wheel text-center" id="wheel-of-life">
<div id="final-result">
<h1>my wheel of life</h1>
<h4 id="date">07 December 2020</h4>
<br>
<br>
<br>
</div>
<div class="wheel-chart">
<!-- CANVAS -->
<canvas id="myChart" ></canvas>
</div>
</div>
<!-- WHEEL ENDS -->
<div id="button-box">
<button class="btn btn-secondary d-inline-block" id="reload" >
Reload
</button>
<button class="btn btn-secondary d-inline-block" id="download" >
Download PDF
</button>
</div>
</div>
<!-- SCRIPT START -->
<!-- Optional JavaScript; choose one of the two! -->
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous">
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous">
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js">
</script>
<script
src="https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js">
</script>
<script
src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js">
</script>
<script src="js/main.js"></script>
<!-- SCRIPT ENDS -->
</body>
</html>
main.js
const lifeTopic = document.querySelectorAll('.life-topic');
const promptBox = document.getElementById('prompt');
// console.log("Life topic: ", lifeTopic);
const mark = document.querySelectorAll('.mark');
const finalResult = document.getElementById('final-result');
const buttonBox = document.getElementById('button-box');
const skip = document.getElementById('skip');
const reload = document.getElementById('reload');
const download = document.getElementById('download');
const myChart = document.getElementById('myChart');
const date = document.getElementById('date');
const wheelOfLife = document.getElementById('wheel-of-life');
let currentTopic = 0;
let labels = [];
let data = [];
let bgColors = [];
let colorArray = ['rgba(255, 99, 132, 0.4)', 'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)', ' rgba(0, 170, 23, 0.4)',
'rgba(153, 102, 255, 0.4)',
'rgba(255, 128, 0, 0.4)', 'rgba(0, 51, 85, 0.4)',
'rgba(85, 0, 0, 0.4)', 'rgba(85, 0, 52, 0.4)',
'#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
const now = new Date();
const dateTime = now.getDay() + " - " + now.getMonth()+ " - " + now.getFullYear();
date.textContent = dateTime.toString();
lifeTopic.forEach(lt => lt.style.display = "none");
lifeTopic[currentTopic].style.display = "block";
skip.addEventListener('click', (e) => {
e.preventDefault();
if (currentTopic >= lifeTopic.length - 1) {
displayFinal();
return;
}
lifeTopic[currentTopic].style.display = "none";
currentTopic++;
lifeTopic[currentTopic].style.display = "block";
});
mark.forEach(m => {
m.addEventListener('click', (e) => {
e.preventDefault();
console.log("you clicked on mark", m.childNodes[0].textContent);
const markValue = m.childNodes[0].textContent;
lifeTopic[currentTopic].style.display = "none";
if (currentTopic >= lifeTopic.length - 1) {
addDataToGraph(currentTopic, markValue);
displayFinal();
return;
}
addDataToGraph(currentTopic, markValue);
drawGraph();
currentTopic++;
lifeTopic[currentTopic].style.display = "block";
});
});
function addDataToGraph(currentTopic, markValue) {
labels.push(lifeTopic[currentTopic].textContent);
data.push(markValue);
bgColors.push(colorArray[currentTopic]);
}
function displayFinal() {
promptBox.style.display = "none";
buttonBox.style.display = "block";
finalResult.style.display = "block";
console.log("There are no question left");
console.log("All data at the end: ", { labels, data, bgColors });
download.addEventListener('click', e => convertHtmlToPdf());
drawGraph();
}
reload.addEventListener('click', e=>{
location.reload();
})
function drawGraph() {
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels,
datasets: [{
label: '# of Votes',
data,
backgroundColor: bgColors,
borderColor: bgColors,
borderWidth: 1
}]
},
options: {
legend:{
display: true,
position: "right",
align: 'center'
},
scales: {
pointLabels: {
fontSize: 18
}
},
responsive: true
}
});
}
function convertHtmlToPdf(){
const screenshot =async () =>{
const doc = new jsPDF('p', 'pt', "letter");
const canvas = await html2canvas(myChart);
const imgData = canvas.toDataURL('image/png');
doc.addImage(imgData, "PNG", 75, 140);
doc.fromHTML(wheelOfLife, 200, 25)
doc.save("life-of-wheel.pdf");
}
screenshot();
}
style.css
#button-box, #final-result{
display: none;
}
.life-wheel{
pointer-events: none;
width: 600px;
}
@media(max-width: 768px){
.life-wheel{
width: 400px;
}
}
No comments: