Skip to content

add in onboarding tool files #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
QuinnCurtis02 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add in onboarding tool files #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions Projects/onboarding-tool/bigthings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
//declaring variables for each product
var ontrack = 0;
var companyOps = 0;
var splashkit = 0;
var artGallery = 0;
var courseFlow = 0;

var onboardingData = [
{
name: "front end development",
ontrack: 1,
companyOperations: 1,
splashkit: 0,
artGallery: 1,
courseflow: 1,
},
{
name: "back end development",
ontrack: 1,
companyOperations: 0,
splashkit: 0,
artGallery: 1,
courseflow: 1,
},
{
name: "documentation",
ontrack: 0,
companyOperations: 1,
splashkit: 1,
artGallery: 0,
courseflow: 0,
},
{
name: "software development",
ontrack: 0,
companyOperations: 0,
splashkit: 1,
artGallery: 0,
courseflow: 0,
},
];

//new and improved function for toggling variables and setting values
function trueToggleButton(currentButton) {
var button = document.getElementById(currentButton);
if (button.style.color === "orange") {
//first change color
button.style.color = "black";
//then adjust variables using values in onboardingData
ontrack -= onboardingData[currentButton].ontrack;
companyOps -= onboardingData[currentButton].companyOperations;
splashkit -= onboardingData[currentButton].splashkit;
artGallery -= onboardingData[currentButton].artGallery;
courseFlow -= onboardingData[currentButton].courseflow;
} else {
button.style.color = "orange";
ontrack += onboardingData[currentButton].ontrack;
companyOps += onboardingData[currentButton].companyOperations;
splashkit += onboardingData[currentButton].splashkit;
artGallery += onboardingData[currentButton].artGallery;
courseFlow += onboardingData[currentButton].courseflow;
}
}

//function for printing buttons based on the length of onboardingData
function printButton() {
for (var i = 0; i < onboardingData.length; i++) {
//create button. Give it the id of the current loop value
var button = document.createElement("button");
button.setAttribute("id", i);

//set onclick to run the toggle button function on the
button.onclick = function () {
trueToggleButton(this.id);
};
var text = document.createTextNode(onboardingData[i].name);
button.appendChild(text);
document.body.appendChild(button);
}
}
64 changes: 64 additions & 0 deletions Projects/onboarding-tool/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<script src="bigthings.js"></script>
<html>
<div>
<button
type="button"
onclick="document.getElementById('ontrack').innerHTML = 'Otrack value: ' + ontrack;"
>
Test output ontrack
</button>
<button
type="button"
onclick="document.getElementById('co').innerHTML = 'CO value: ' + companyOps;"
>
Test output CO
</button>
<button
type="button"
onclick="document.getElementById('splashkit').innerHTML = 'SplashKit value: ' + splashkit;"
>
Test output SplashKit
</button>
<button
type="button"
onclick="document.getElementById('artGallery').innerHTML = 'art gallery value: ' + artGallery;"
>
Test output art gallery
</button>
<button
type="button"
onclick="document.getElementById('courseFlow').innerHTML = 'courseFlow value: ' + courseFlow;"
>
Test output courseFlow
</button>
</div>
</html>
<div>
<p id="ontrack"></p>
<p id="co"></p>
<p id="splashkit"></p>
<p id="artGallery"></p>
<p id="courseFlow"></p>
</div>

<!--reminder of args order: id, ot, co, sk, ag, cf. PLS keep the buttons in numbered order to cut down on confusion-->

<!--
<div>
<h1>General areas of interest</h1>
<button class="toggle" id="button0" onclick="toggleButton(0,1,0,0,1,1)">
Front end development
</button>
<button class="toggle" id="button1" onclick="toggleButton(1,1,0,0,1,1)">
Back end development
</button>
<button class="toggle" id="button2" onclick="toggleButton(2,0,1,1,0,0)">
Documentation
</button>
<button class="toggle" id="button3" onclick="toggleButton(3,0,0,1,0,0)">
Software development
</button>
</div>
-->
<body onload="printButton();"></body>